1. Títulos
O HTML fornece várias tags para formatar e estruturar conteúdo textual, imagens, links e listas. As tags básicas de HTML permitem criar uma página clara e organizada, que seja atraente e fácil de consumir. Vamos dar uma olhada nas tags básicas mais populares e suas funções.
Os títulos (ou header) são usados para indicar diferentes níveis de cabeçalhos em uma página. O HTML oferece seis níveis de cabeçalhos — de <h1> a <h6>, onde <h1> é o cabeçalho principal e mais importante, enquanto <h6> é o menor.
<h1>Cabeçalho principal da página</h1>
<h2>Subtítulo do primeiro nível</h2>
<h3>Subtítulo do segundo nível</h3>
...
<h6>O menor cabeçalho</h6>
O uso de cabeçalhos ajuda a estruturar informações textuais e também melhora o SEO (otimização para motores de busca), já que os motores de busca levam em consideração os títulos ao analisar o conteúdo de uma página.
2. Formatação de texto
Para formatar texto, o HTML oferece algumas tags simples, mas poderosas.
Parágrafos
Agora que conhecemos os títulos, é hora de focar no texto. Parágrafos em HTML são criados usando a tag <p>. É como no editor de texto favorito, onde você pressiona "Enter" para iniciar um novo parágrafo. Aqui vai um exemplo:
<p>Este é o primeiro parágrafo na nossa página, e ele vai te contar um pouco mais sobre o nosso tema.</p>
<p>Este é o segundo parágrafo, porque só o "primeiro" às vezes não é suficiente para expressar todas as ideias!</p>
Blocos de texto
Não se esqueça do <span> e do <div>. O <span> é o seu ajudante modesto para estilizar fragmentos de texto no HTML. Já o <div> é o campeão para criar blocos e containers.
<div>Este bloco pode conter muita coisa interessante!</div>
<span>Este texto pode ganhar cor ou fonte personalizada.</span>
Texto em Negrito
Texto em Negrito — <b>: A tag <b> deixa o texto em negrito. Essa tag é frequentemente usada para destacar palavras ou frases importantes.
<p>Este é um <b>texto importante</b> que chama atenção.</p>
Texto em Itálico
Itálico — <i>: A tag <i> estiliza o texto em itálico. Serve para destacar citações, palavras estrangeiras ou outros elementos que precisam de ênfase.
<p>Este é um texto em itálico: <i>exemplo de texto em itálico</i>.</p>
3. Imagens
Para adicionar imagens à página, usamos a tag <img>. Esta tag é auto-contida, e para funcionar, é necessário especificar o caminho da imagem com o atributo src. Também é importante incluir uma descrição com o atributo alt, para que usuários com deficiência ou problemas no carregamento da imagem possam entender o que deveria aparecer nela.
<img src="image.jpg" alt="Descrição da Imagem">
Atributos úteis para a tag <img>:
-
width— largura da imagem (ex.:width="200"). -
height— altura da imagem (ex.:height="150").
Exemplo com os atributos width e height:
<img src="http://google.com/image.jpg" alt="Descrição da Imagem" width="200" height="150">
4. Links
Links são elementos importantes do HTML, permitindo que os usuários naveguem para outras páginas ou recursos. Links são criados com a tag <a>, onde o atributo principal é href, que indica o destino do link.
<a href="https://example.com">Visitar um site de exemplo</a>
Atributos úteis para links:
-
target="_blank"— abre o link em uma nova aba. -
title="Dica"— adiciona uma dica de ferramenta ao passar o mouse sobre o link.
Exemplo de link com atributos adicionais:
<a href="https://example.com" target="_blank" title="Abrirá em uma nova aba">Visite nosso site</a>
5. Listas
Listas ajudam a organizar informações em blocos acessíveis. O HTML suporta dois tipos de listas:
Lista com Pontos
Lista Não Ordenada — <ul>: Elementos desta lista são marcados com pontos.
<ul>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
</ul>
Lista Numerada
Lista Ordenada — <ol>: Os elementos desta lista são numerados automaticamente.
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
<li>Terceiro item da lista</li>
</ol>
Os elementos das listas são criados com o uso da tag <li>, que é colocada dentro de <ul> ou <ol>. Listas são amplamente usadas para menus, sequências de ações, e outros dados estruturados.
6. Exemplo utilizando todas as tags básicas
Agora vamos juntar todas as tags discutidas em um único fragmento HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Exemplo de página com tags básicas do HTML</title>
</head>
<body>
<h1>Cabeçalho da página</h1>
<h2>Subtítulo</h2>
<p>Este é um exemplo de parágrafo com <b>texto em negrito</b> e <i>texto em itálico</i>.</p>
<h3>Imagem</h3>
<img src="image.jpg" alt="Exemplo de imagem" width="200" height="150">
<h3>Link</h3>
<p>Aqui está <a href="https://example.com" target="_blank">um link para um site externo</a>.</p>
<h3>Exemplo de Lista Não Ordenada</h3>
<ul>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ul>
<h3>Exemplo de Lista Ordenada</h3>
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>
</body>
</html>
Conclusão
Agora que você tem uma ideia de como usar as tags HTML básicas, pode começar a experimentar com combinações para criar páginas mais complexas. Tente criar sua própria página HTML com títulos, alguns parágrafos, e uma imagem que serve de link para outro recurso.
No mundo do HTML, conhecer as tags é só o início. É como saber onde estão as teclas no teclado. Nas próximas aulas, vamos explorar o CSS, que nos permitirá estilizar esses elementos e dar forma às nossas ideias. Por enquanto, continue experimentando e lembre-se: "olhar sob o capô" é uma ótima forma de descrever o trabalho com HTML.
Por enquanto, encerramos esta pequena, mas importante aula. Espero que você tenha entendido que o HTML é o coração das suas páginas web. Agora você sabe como dar os primeiros passos no desenvolvimento web: escrever um código que os navegadores entendam!
GO TO FULL VERSION