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.