Conhecendo as Tags HTML mais Comuns: <html>, <head> e <body>
Vamos explorar algumas das tags HTML mais comuns e fundamentais para a estrutura de uma página da web. O uso de qualquer tag html é indispensável para criação de páginas HTML.
<html>
A tag <html> é a primeira tag a ser utilizada em um documento HTML e marca o início e o fim do documento HTML como um todo. Além disso, ela envolve todo o conteúdo da página e define o contexto para o navegador, indicando que o arquivo é um documento HTML.
<head>
A tag <head> é usada para agrupar elementos de metadados e informações sobre o documento HTML. Enfim, mesmo não sendo visível na página exibida no navegador, a tag tem o objetivo de fornecer instruções e configurações importantes para o navegador e outros mecanismos de busca.
Dentro da tag <head>, podemos incluir os seguintes elementos:
- Tag <title>: Define o título da página, que é exibido na barra de título do navegador.
- Tag <meta>: Fornece metadados sobre a página, como a codificação de caracteres, descrições, palavras-chave e outras informações úteis para os mecanismos de busca.
- Tag <link>: Usada para vincular arquivos externos, como arquivos CSS ou arquivos de ícone, à página HTML.
- Tag <script>: Utilizada para incluir scripts JavaScript na página.
<body>
A tag <body> é onde o conteúdo visível da página é colocado. Enfim, ela envolve todos os elementos visíveis, como textos, imagens, links, tabelas e outros elementos interativos. Todo o conteúdo que será exibido aos usuários deve estar dentro da tag <body>.
Logo, é dentro da tag <body> que podemos utilizar diversas outras tags HTML para estruturar e formatar o conteúdo da página, como:
- Elementos de cabeçalho: <h1> até <h6> para títulos e subtítulos.
- Elemento <p>: para parágrafos de texto.
- Elemento <img>: Para exibir imagens.
- Elemento <a>: Para criar links.
- Elemento <ul> e <ol>: Para criar listas não ordenadas e ordenadas, respectivamente.
- Elemento <table>: Para criar tabelas.
Desse modo, exploramos algumas das tags HTML mais comuns e fundamentais para a estrutura de uma página da web. A tag marca o início e o fim do documento HTML, a tag agrupa metadados e informações sobre o documento, e a tag envolve o conteúdo visível da página. Enfim, é essencial ter conhecimento sobre como utilizar corretamente essas tags para criar páginas HTML bem estruturadas e apresentar o conteúdo aos usuários. Nesse sentido, continue praticando e explorando outras tags HTML para expandir suas habilidades de desenvolvimento web.
Utilizando Elementos de Texto: <h1>, <p> e <a>
Nesta aula, vamos explorar alguns dos elementos de texto mais comuns em HTML, como <h1>, <p> e <a>. Enfim, esses elementos desempenham um papel fundamental na formatação e organização do conteúdo textual de uma página da web.
Elemento <h1>: Títulos e Subtítulos:
A <h1> usamos para criar o título principal da página, que geralmente é o título mais proeminente e de maior destaque. Além do <h1>, existem as tags <h2>, <h3>, <h4>, <h5> e <h6>para criar subtítulos de tamanhos diferentes. Log, recomenda-se usar o <h1> apenas uma vez na página, representando o título principal.
<h1>Título Principal</h1>
<h2>Subtítulo</h2>Elemento <p>: Parágrafos de texto:
A <p> usamos para criar parágrafos de texto. Desse modo, ela é ideal para separar blocos de texto em parágrafos lógicos e legíveis. Separado por espaços em branco, o conteúdo dentro dotag <p> se torna mais fácil a leitura e compreendido pelos usuários.
<p>Este é um parágrafo de texto.</p>
<p>Este é outro parágrafo de texto.</p>Elemento <a> – Linkss:
A tag <a> é usada para criar links (hiperlinks) em HTML. Portanto, ela permite que você vincule uma página da web a outra página, um arquivo, uma seção específica da mesma página ou até mesmo um endereço de e-mail. O atributo “href” especifica o destino do link.
<a href="https://www.exemplo.com">Link para um site</a>
<a href="pagina.html">Link para outra página no mesmo diretório</a>Dentro da tag <a>, você pode incluir qualquer conteúdo de texto ou outros elementos HTML, como imagens.
Primeiramente, exploramos alguns dos elementos de texto mais comuns em HTML: <h1>, <p> e <a>. O <h1> usamos para títulos principais e os elementos <h2> a <h6> para subtítulos. A <p> é ideal para criar parágrafos de texto, facilitando a leitura. A <a> permite criar links para outras páginas ou recursos. Enfim, utilizar adequadamente esses elementos é fundamental para estruturar uma página web de forma eficiente e facilitar a navegação. Então, continue praticando e explorando outras tags HTML para aprimorar suas habilidades de desenvolvimento web.
Inserindo Imagens com a Tag
Em conclusão, vamos aprender como inserir imagens em uma página HTML utilizando a tag <img>. As imagens são elementos visuais essenciais em muitos sites, e o uso correto da tag <img>é fundamental para exibir imagens de forma adequada e eficiente.
Tag SRC
O atributo mais importante da tag <img> é o atributo “src”, que especifica o caminho (URL ou caminho local) para a imagem que será exibida. Ou seja, o valor do atributo “src” pode ser o endereço da imagem em um servidor remoto ou o caminho relativo para a imagem no seu sistema de arquivos.
<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">Tag ALT
Usamos o atributo “alt” para fornecer um texto alternativo para a imagem. A exibição é feita quando não é possivel carregar a imagem, desse modo a imagem pode ser descrita por leitores de tela. Ou seja, é uma boa prática sempre incluir o atributo “alt” em suas tags <img>.
<img src="caminho/para/imagem.jpg" alt="Descrição da imagem">Atributos opcionais
Existem vários outros atributos opcionais que podem ser usados com a tag <img>, ou seja, dependendo das necessidades específicas do seu projeto. Enfim, alguns exemplos incluem:
- “width” e “height”: Especificam as dimensões da imagem em pixels.
- “title”: Fornece um texto de dica (tooltip) exibindo quando o usuário passa o mouse sobre a imagem.
- “class” e “id”: Permitem a aplicação de estilos CSS ou a manipulação da imagem por meio de scripts.
<img src="caminho/para/imagem.jpg" alt="Descrição da imagem" width="300" height="200" title="Título da imagem" class="imagem-destaque" id="imagem-1">Por fim, aprendemos como inserir imagens em uma página HTML utilizando a tag . Utilizando o atributo “src”, especificamos o caminho para a imagem, enquanto o atributo “alt” fornece uma descrição alternativa para fins de acessibilidade. Enfim,também exploramos outros atributos opcionais, como “width”, “height”, “title”, “class” e “id”. Desse modo, agora você está pronto para adicionar imagens a suas páginas web de forma eficiente e acessível. Em conclusão, continue praticando e experimentando diferentes técnicas para aprimorar suas habilidades de desenvolvimento web.
