Capítulo 2: Tags HTML básicas

No Capítulo 1, aprendemos que o HTML é composto por tags que indicam ao navegador da web como exibir o conteúdo da página. Neste capítulo, vamos dar uma olhada mais detalhada nas tags HTML básicas e como usá-las.

Tag `<html>`

A tag <html> é usada para indicar o início e o fim de uma página HTML. Tudo o que estiver dentro da tag <html> será exibido na página.

Anúncio

<!DOCTYPE html>
<html>
  <head>
    <title>Minha página web</title>
  </head>
  <body>
    <h1>Bem-vindo à minha página web</h1>
    <p>Esta é a minha primeira página web.</p>
  </body>
</html>

Neste exemplo, temos uma página HTML básica que contém um cabeçalho de primeiro nível e um parágrafo de texto, tudo dentro da tag <html>.

Tag `<head>`

A tag <head> é usada para incluir informações sobre a página, como o título da página, metadados e links para arquivos CSS e JavaScript. O conteúdo dentro da tag <head> não é exibido na página.

<head>
  <title>Minha página web</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

Neste exemplo, temos um cabeçalho que inclui o título da página, um metadado para definir a codificação de caracteres como UTF-8 e links para um arquivo CSS e um arquivo JavaScript.

Tag `<body>`

A tag <body> é usada para indicar o início e o fim do conteúdo principal da página, como texto, imagens, links e outros elementos.

<body>
  <h1>Bem-vindo à minha página web</h1>
  <p>Esta é a minha primeira página web.</p>
  <img src="imagem.jpg" alt="Minha imagem">
  <a href="http://www.exemplo.com">Clique aqui</a>
</body>

Neste exemplo, temos o conteúdo principal da página dentro da tag <body>, incluindo um cabeçalho, um parágrafo de texto, uma imagem e um link.

Tag `<h1>` a `<h6>`

As tags <h1> a <h6> são usadas para criar cabeçalhos de diferentes níveis. O <h1> é o cabeçalho de primeiro nível e o <h6> é o cabeçalho de sexto nível.

<h1>Cabeçalho de primeiro nível</h1>
<h2>Cabeçalho de segundo nível</h2>
<h3>Cabeçalho de terceiro nível</h3>
<h4>Cabeçalho de quarto nível</h4>
<h5>Cabeçalho de quinto nível</h5>
<h6>Cabeçalho de sexto nível</h6>

Tag `<p>`

A tag <p> é usada para criar parágrafos de texto.

<p>Este é um parágrafo de texto.</p>

Tag `<img>`

A tag <img> é usada para inserir imagens na página.

<img src="https://lherespondo.com/wp-content/uploads/2023/02/My-project-1-5.png" alt="Minha imagem">

Neste exemplo, a imagem “https://lherespondo.com/wp-content/uploads/2023/02/My-project-1-5.png” será exibida na página e o atributo “alt” fornece uma descrição alternativa da imagem para usuários que não conseguem visualizá-la.

Tag `<a>`

A tag <a> é usada para criar links para outras páginas ou arquivos.

<a href="http://www.exemplo.com">Clique aqui</a>

Neste exemplo, o link “http://www.exemplo.com” será exibido na página com o texto “Clique aqui”.

Tag `<ul>` e `<li>`

As tags <ul> e <li> são usadas para criar listas não ordenadas.

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Neste exemplo, temos uma lista não ordenada com três itens.

Tag `<ol>` e `<li>`

As tags <ol> e <li> são usadas para criar listas ordenadas.

<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

Neste exemplo, temos uma lista ordenada com três itens.

Tag `<table>`, `<tr>`, `<th>` e `<td>`

As tags <table>, <tr>, <th> e <td> são usadas para criar tabelas.

<table>
  <thead>
    <tr>
      <th>Coluna 1</th>
      <th>Coluna 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Linha 1, Coluna 1</td>
      <td>Linha 1, Coluna 2</td>
    </tr>
    <tr>
      <td>Linha 2, Coluna 1</td>
      <td>Linha 2, Coluna 2</td>
    </tr>
  </tbody>
</table>

este exemplo, temos uma tabela com duas colunas e duas linhas.

Tag `<form>`

A tag <form> é usada para criar um formulário.

<form>
  <label for="nome">Nome:</label>
  <input type="text" id="nome" name="nome"><br>

  <label for="email">E-mail:</label>
  <input type="email" id="email" name="email"><br>

  <label for="mensagem">Mensagem:</label>
  <textarea id="mensagem" name="mensagem"></textarea><br>

  <input type="submit" value="Enviar">
</form>

Neste exemplo, temos um formulário com campos de nome, e-mail e mensagem, e um botão de envio.

Tag `<select>` e `<option>`

As tags <select> e <option> são usadas para criar uma lista de seleção.

<label for="animais">Selecione um animal:</label>
<select id="animais" name="animais">
  <option value="cachorro">Cachorro</option>
  <option value="gato">Gato</option>
  <option value="passarinho">Passarinho</option>
</select>

Neste exemplo, temos uma lista de seleção com três opções: cachorro, gato e passarinho.

Tag `<div>`

A tag <div> é usada para agrupar elementos em uma seção.

<div>
  <h2>Título da seção</h2>
  <p>Conteúdo da seção</p>
</div>

Tag `<iframe>`

A tag <iframe> é usada para incorporar uma página da web em outra página.

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Neste exemplo, temos um <iframe> que incorpora um vídeo do YouTube na página.

Tag `<audio>` e `<video>`

As tags <audio> e <video> são usadas para adicionar arquivos de áudio e vídeo em uma página.

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Neste exemplo, temos um elemento <audio> com um arquivo de áudio MP3 e um elemento <video> com um arquivo de vídeo MP4.

Tag `<canvas>`

A tag <canvas> é usada para desenhar gráficos, animações e outros conteúdos visuais em uma página.

<canvas id="meu-canvas" width="200" height="200"></canvas>

Neste exemplo, temos um elemento <canvas> com um ID de “meu-canvas” e uma largura e altura de 200 pixels.

Tag `<header>`, `<main>`, `<section>` e `<footer>`

As tags <header>, <main>, <section> e <footer> são usadas para dividir uma página em seções.

<header>
  <h1>Título da página</h1>
  <nav>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>Seção 1</h2>
    <p>Conteúdo da seção 1</p>
  </section>

  <section>
    <h2>Seção 2</h2>
    <p>Conteúdo da seção 2</p>
  </section>
</main>

<footer>
  <p>Direitos autorais © 2023 Empresa X</p>
</footer>

Neste exemplo, temos um cabeçalho com um título e um menu de navegação, uma seção principal com duas seções secundárias, e um rodapé com informações de direitos autorais.

Conclusão

Com essas tags, podemos criar páginas HTML mais ricas e interativas, com conteúdo multimídia e organizado em seções. No próximo capítulo, vamos aprender sobre o CSS e como podemos estilizar nossas páginas HTML para deixá-las ainda mais bonitas e personalizadas.