Explorando a Tag <body></body>(Tudo sobre o body )(marking up your content)
Entendendo as tags HTML
As tags HTML são os blocos de construção de uma página web. Elas delimitam o início e o fim de um elemento HTML. A maioria das tags HTML vem em pares, uma tag de abertura <tag> e uma tag de fechamento </tag>.
Exemplos:
<p>Este é um parágrafo.</p>Elementos HTML comuns
<div>
Elemento genérico de bloco usado para agrupar outros elementos.
<div>
<h1>Título</h1>
<p>Este é um parágrafo dentro de uma div.</p>
</div><p>
Define um parágrafo.
<p>Este é um parágrafo.</p><h1>
Define o título de nível 1, o mais importante.
<h1>Título Principal</h1><a>
Define um hiperlink.
<a href="https://www.exemplo.com">Visite o Exemplo</a><img>
Incorpora uma imagem.
<img src="imagem.jpg" alt="Descrição da imagem"><ul> e <li>
Define uma lista não ordenada e seus itens.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Elementos HTML semânticos
Elementos que claramente descrevem seu significado tanto para o navegador quanto para o desenvolvedor.
Exemplos:
<article>
<h2>Título do Artigo</h2>
<p>Este é o conteúdo do artigo.</p>
</article>
<nav>
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>2. Atributos HTML
Compreendendo atributos
Atributos fornecem informações adicionais sobre os elementos HTML. Eles são sempre especificados na tag de abertura e consistem em um nome e um valor.
Exemplos:
<a href="https://www.exemplo.com" target="_blank">Visite o Exemplo</a>
<img src="imagem.jpg" alt="Descrição da imagem">Atributos HTML comuns
src
Especifica a URL da mídia (imagem, vídeo, etc.).
<img src="imagem.jpg" alt="Descrição da imagem">href
Especifica o destino de um link.
<a href="https://www.exemplo.com">Visite o Exemplo</a>alt
Fornece texto alternativo para uma imagem.
<img src="imagem.jpg" alt="Descrição da imagem">class
Especifica uma ou mais classes para um elemento.
<p class="paragrafo-destaque">Este é um parágrafo destacado.</p>id
Especifica um identificador único para um elemento.
<div id="conteudo-principal">Conteúdo principal aqui</div>style
Aplica estilos CSS diretamente no elemento.
<p style="color: red;">Este texto é vermelho.</p>3. Formatação e Estrutura de Texto
Títulos e parágrafos
Exemplos:
<h1>Título 1</h1>
<h2>Título 2</h2>
<p>Este é um parágrafo.</p>Formatação de texto
Negrito, itálico, sublinhado
<p><b>Texto em negrito</b></p>
<p><i>Texto em itálico</i></p>
<p><u>Texto sublinhado</u></p>Listas
Lista não ordenada
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Lista ordenada
<ol>
<li>Primeiro item</li>
<li>Segundo item</li>
<li>Terceiro item</li>
</ol>Lista de definição
<dl>
<dt>Termo 1</dt>
<dd>Definição do Termo 1</dd>
<dt>Termo 2</dt>
<dd>Definição do Termo 2</dd>
</dl>4. Links e Navegação
Criando hiperlinks
Exemplos:
<a href="https://www.exemplo.com">Visite o Exemplo</a>URLs relativas vs. URLs absolutas
URL relativa
<a href="/sobre.html">Sobre Nós</a>URL absoluta
<a href="https://www.exemplo.com/sobre.html">Sobre Nós</a>Tags âncora e navegação interna
Exemplos:
<a href="#secao1">Vá para a Seção 1</a>
<section id="secao1">
<h2>Seção 1</h2>
<p>Conteúdo da seção 1.</p>
</section>5. Imagens e Multimídia
Inserindo imagens
Exemplos:
<img src="imagem.jpg" alt="Descrição da imagem">Atributos de imagem
Exemplos:
<img src="imagem.jpg" alt="Descrição da imagem" width="500" height="600">Incorporando conteúdo multimídia
Exemplos:
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Seu navegador não suporta o elemento de áudio.
</audio>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Seu navegador não suporta o elemento de vídeo.
</video>6. Tabelas
Criando tabelas
Exemplos:
<table>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>João</td>
<td>30</td>
</tr>
<tr>
<td>Maria</td>
<td>25</td>
</tr>
</table>Estrutura da tabela
Exemplos:
<table>
<caption>Exemplo de Tabela</caption>
<thead>
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
</thead>
<tbody>
<tr>
<td>João</td>
<td>30</td>
</tr>
<tr>
<td>Maria</td>
<td>25</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Fim dos Dados</td>
</tr>
</tfoot>
</table>Atributos de tabela
Exemplos:
<table border="1" cellpadding="10" cellspacing="5">
<tr>
<th>Nome</th>
<th>Idade</th>
</tr>
<tr>
<td>João</td>
<td>30</td>
</tr>
<tr>
<td>Maria</td>
<td>25</td>
</tr>
</table>7. Formulários e Elementos de Entrada
Estrutura do formulário
Exemplos:
<form action="/enviar-dados" method="post">
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<input type="submit" value="Enviar">
</form>Elementos de entrada de formulário
Exemplos:
<form>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome">
<label for="senha">Senha:</label>
<input type="password" id="senha" name="senha">
<label>Gênero:</label>
<input type="radio" id="masculino" name="genero" value="masculino">
<label for="masculino">Masculino</label>
<input type="radio" id="feminino" name="genero" value="feminino">
<label for="feminino">Feminino</label>
<label for="interesses">Interesses:</label>
<input type="checkbox" id="esportes" name="interesses" value="esportes">
<label for="esportes">Esportes</label>
<input type="checkbox" id="musica" name="interesses" value="musica">
<label for="musica">Música</label>
<label for="pais">País:</label>
<select id="pais" name="pais">
<option value="brasil">Brasil</option>
<option value="eua">EUA</option>
</select>
<input type="submit" value="Enviar">
</form>8. HTML Semântico
Importância do HTML semântico
O HTML semântico melhora a acessibilidade e a SEO ao descrever melhor o conteúdo.
Elementos semânticos
Exemplos:
<header>
<h1>Cabeçalho da Página</h1>
</header>
<nav>
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>
<article>
<h2>Título do Artigo</h2>
<p>Conteúdo do artigo.</p>
</article>
<aside>
<h3>Informações Adicionais</h3>
<p>Texto do aside.</p>
</aside>
<footer>
<p>Rodapé da página.</p>
</footer><article>
O elemento <article> representa uma composição autocontida em um documento, página ou site que é destinada a ser distribuída ou reutilizada independentemente. Exemplos incluem postagens de blog, artigos de notícias, postagens em fóruns e outros conteúdos que podem existir por conta própria.
<article>
<h1>Energia Renovável: O Futuro da Energia</h1>
<p>Fontes de energia renovável são cruciais para o desenvolvimento sustentável do nosso planeta. Neste artigo, exploramos os vários tipos de energia renovável e seus benefícios.</p>
</article><aside>
O elemento <aside> representa uma seção da página com conteúdo tangencialmente relacionado ao conteúdo ao redor. Isso pode incluir barras laterais, caixas de destaque ou links relacionados.
Exemplo:
<aside>
<h2>Você Sabia?</h2>
<p>A energia eólica é uma das fontes de energia renovável que mais cresce no mundo.</p>
</aside><section>
O elemento <section> representa uma seção autônoma de conteúdo que é agrupada tematicamente, geralmente com um título. As seções são usadas para dividir o conteúdo em grupos lógicos e nomeados.
<section>
<h2>Tipos de Energia Renovável</h2>
<p>Existem vários tipos de fontes de energia renovável, incluindo solar, eólica, hídrica e geotérmica.</p>
</section><header>
O elemento <header> representa conteúdo introdutório ou um conjunto de links de navegação para seu elemento ancestral mais próximo de conteúdo ou raiz de seção. Geralmente contém um grupo de ajudas introdutórias ou de navegação.
Exemplo:
<header>
<h1>Bem-vindo ao Notícias de Energia Verde</h1>
<nav>
<ul>
<li><a href="#home">Início</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#contact">Contato</a></li>
</ul>
</nav>
</header><footer>
O elemento <footer> representa um rodapé para seu conteúdo ou raiz de seção mais próximo. Geralmente contém informações sobre o autor, informações de direitos autorais, links para documentos relacionados ou outros metadados.
Exemplo:
<footer>
<p>© 2024 Notícias de Energia Verde. Todos os direitos reservados.</p>
<p><a href="#privacy-policy">Política de Privacidade</a></p>
</footer>Combinando todos esses elementos em uma página web típica pode ficar assim:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notícias de Energia Verde</title>
<style>
body {
font-family: Arial, sans-serif;
}
header, footer {
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
article {
margin: 20px;
}
aside {
background-color: #f9f9f9;
padding: 10px;
margin: 20px;
border-left: 3px solid #ccc;
}
section {
margin: 20px 0;
}
</style>
</head>
<body>
<header>
<h1>Notícias de Energia Verde</h1>
<nav>
<ul>
<li><a href="#home">Início</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#contact">Contato</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h2>Energia Renovável: O Futuro da Energia</h2>
<p>Publicado em 24 de maio de 2024 por João Silva</p>
</header>
<section>
<h3>Introdução</h3>
<p>Fontes de energia renovável são cruciais para o desenvolvimento sustentável do nosso planeta...</p>
</section>
<section>
<h3>Tipos de Energia Renovável</h3>
<p>Existem vários tipos de fontes de energia renovável, incluindo solar, eólica, hídrica e geotérmica...</p>
</section>
<aside>
<h4>Você Sabia?</h4>
<p>A energia eólica é uma das fontes de energia renovável que mais cresce no mundo.</p>
</aside>
<footer>
<p>Autor: João Silva</p>
</footer>
</article>
<footer>
<p>© 2024 Notícias de Energia Verde. Todos os direitos reservados.</p>
<p><a href="#privacy-policy">Política de Privacidade</a></p>
</footer>
</body>
</html>A tag <main>
A tag <main> é usada para delinear o conteúdo principal de uma página. Esse conteúdo deve ser único para a página e não deve incluir itens que se repetem em várias páginas, como cabeçalhos, barras laterais, rodapés e links de navegação.
No exemplo do mundo real, a tag <main> pode envolver o conteúdo principal da página, ou seja, o artigo e quaisquer seções que sejam específicas daquela página.
Aqui está o exemplo atualizado para incluir a tag <main>:
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notícias de Energia Verde</title>
<style>
body {
font-family: Arial, sans-serif;
}
header, footer {
background-color: #f0f0f0;
padding: 10px;
text-align: center;
}
main {
margin: 20px;
}
article {
margin: 20px 0;
}
aside {
background-color: #f9f9f9;
padding: 10px;
margin: 20px 0;
border-left: 3px solid #ccc;
}
section {
margin: 20px 0;
}
</style>
</head>
<body>
<header>
<h1>Notícias de Energia Verde</h1>
<nav>
<ul>
<li><a href="#home">Início</a></li>
<li><a href="#about">Sobre</a></li>
<li><a href="#contact">Contato</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>Energia Renovável: O Futuro da Energia</h2>
<p>Publicado em 24 de maio de 2024 por João Silva</p>
</header>
<section>
<h3>Introdução</h3>
<p>Fontes de energia renovável são cruciais para o desenvolvimento sustentável do nosso planeta...</p>
</section>
<section>
<h3>Tipos de Energia Renovável</h3>
<p>Existem vários tipos de fontes de energia renovável, incluindo solar, eólica, hídrica e geotérmica...</p>
</section>
<aside>
<h4>Você Sabia?</h4>
<p>A energia eólica é uma das fontes de energia renovável que mais cresce no mundo.</p>
</aside>
<footer>
<p>Autor: João Silva</p>
</footer>
</article>
</main>
<footer>
<p>© 2024 Notícias de Energia Verde. Todos os direitos reservados.</p>
<p><a href="#privacy-policy">Política de Privacidade</a></p>
</footer>
</body>
</html>9. Recursos do HTML5
Novos elementos HTML5
<canvas>
<canvas id="meuCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = document.getElementById("meuCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script><video>
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
Seu navegador não suporta o elemento de vídeo.
</video>Aprimoramentos de formulário HTML5
Exemplos:
<form>
<label for="data">Data:</label>
<input type="date" id="data" name="data">
<label for="cor">Cor Favorita:</label>
<input type="color" id="cor" name="cor">
<label for="quantidade">Quantidade:</label>
<input type="range" id="quantidade" name="quantidade" min="1" max="100">
</form>10. Acessibilidade em HTML
Importância da acessibilidade na web
A acessibilidade garante que todos os usuários, incluindo aqueles com deficiências, possam acessar e utilizar seu site.
HTML semântico para acessibilidade
Exemplos:
<nav aria-label="Main Navigation">
<ul>
<li><a href="#inicio">Início</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</nav>Atributos e papéis ARIA
Exemplos:
<button aria-label="Fechar">X</button>
<div role="dialog" aria-labelledby="titulo-dialogo" aria-describedby="descricao-dialogo">
<h2 id="titulo-dialogo">Título do Diálogo</h2>
<p id="descricao-dialogo">Descrição do diálogo.</p>
</div>11. Design Responsivo na Web
Noções básicas de design responsivo na web
O design responsivo ajusta o layout do site para diferentes tamanhos de tela e dispositivos.
Usando HTML para layouts responsivos
Meta tag viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0"><style>
.container {
display: flex;
flex-direction: column;
}
@media (min-width: 600px) {
.container {
flex-direction: row;
}
}
</style>
<div class="container">
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</div>13. Melhores Práticas e Padrões HTML
Convenções de codificação e melhores práticas
Use tags semânticas, organize seu código de forma clara e comente quando necessário.
Padrões e validação HTML do W3C
Valide seu código HTML para garantir conformidade com os padrões.
Exemplos:
<!-- Usando comentários para clarificar seções do código -->
<header>
<h1>Cabeçalho</h1>
</header>
<main>
<article>
<h2>Artigo Principal</h2>
<p>Conteúdo do artigo.</p>
</article>
</main>
<footer>
<p>Rodapé</p>
</footer>14. Técnicas Avançadas de HTML
APIs HTML5
localStorage
<script>
localStorage.setItem("nome", "João");
document.getElementById("exibir").textContent = localStorage.getItem("nome");
</script>
<div id="exibir"></div><script>
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById("localizacao").textContent = "Latitude: " + position.coords.latitude + ", Longitude: " + position.coords.longitude;
});
</script>
<div id="localizacao"></div>Atributos de dados personalizados
Exemplos:
<div data-produto-id="12345">Produto</div>
<script>
var produtoId = document.querySelector('div').dataset.produtoId;
console.log(produtoId);
</script>Microformatos e dados estruturados
Exemplos:
<div itemscope itemtype="http://schema.org/Person">
<span itemprop="name">João da Silva</span>
<span itemprop="jobTitle">Desenvolvedor Web</span>
<span itemprop="telephone">(11) 99999-9999</span>
</div>Esses tópicos abrangem uma ampla gama de conceitos e práticas essenciais para o desenvolvimento web com HTML, proporcionando uma base sólida para criar sites bem estruturados, acessíveis e compatíveis com diferentes dispositivos e navegadores.
