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.
+ Não há comentários
Adicione o seu