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.
<!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.
