Indice
📋1. Introdução ao HTML na Prática
O que é ?
HTML (HyperText Markup Language) é a linguagem usada para criar páginas da web. Com ele, podemos organizar textos, imagens , links, vídeos e outros conteúdos em um site.
Ele funciona com tags, que são comandos colocados entre sinais de menor e maior (< >), como
<p> para parágrafo ou <img> para imagem.
O HTML é a base de qualquer página da internet. Ele pode ser usado junto com CSS (para o design) e JavaScript (para interações).
🛠️Ferramentas Utilizadas
📌 O Visual Studio Code é um editor de
código-fonte desenvolvido pela Microsoft para Windows, Linux e macOS.
Ele inclui suporte para depuração, controle de versionamento Git incorporado, realce de sintaxe,
complementação inteligente de código, snippets e refatoração de código. Ele é customizável, permitindo que
os usuários possam mudar o tema do editor, teclas de atalho e preferências. Ele é um software livre e de
código aberto,apesar do download oficial estar sob uma licença proprietária.
📌Ferramentas para desenvolvedores do Google Chrome para verificar tags.
Para abrir as Ferramentas para desenvolvedores do Chrome, você tem as seguintes opções:
- Clique com o botão direito do mouse em uma página e selecione Inspecionar. O código HTML do elemento clicado será exibido.
-
Na parte de cima da janela do navegador, selecione Visualização
>Desenvolvedor>Ferramentas para desenvolvedores.
📋Estrutura Básica do HTML
Explicação rápida das principais tags:
<!DOCTYPE html>: informa ao navegador que o documento é HTML5.<html>: a raiz do documento.<head>: contém informações que não aparecem diretamente na página (como título e meta-informações).<body>: tudo que aparece na tela do site.<header>: cabeçalho da página (pode conter o título, menus, etc).<main>: conteúdo principal da página.<footer>: rodapé com informações complementares.
📋Tags
Tags HTML mais comuns:
<title>: define o título da página que aparece na aba do navegador.<meta>: define metadados como codificação e descrição da página.<h1> até <h6>: títulos e subtítulos, sendo <h1> o mais importante e <h6> o menos.<p>: define um parágrafo de texto.<a>: cria um link para outra página ou site.<img>: insere uma imagem na página.<ul>: cria uma lista não ordenada (com marcadores).<ol>: cria uma lista ordenada (com números).<li>: representa um item dentro de uma lista (<ul> ou <ol>).<div>: contêiner genérico para agrupar conteúdo.<span>: contêiner genérico em linha, usado para estilizar partes do texto.<section>: define uma seção temática do conteúdo.<article>: representa um conteúdo independente e completo (como um post).<nav>: define um menu ou links de navegação.<br>: quebra de linha (usado para pular linha dentro de um parágrafo).<hr>: insere uma linha horizontal (divisor visual).
📋Atributos das tags
Atributos comuns das tags HTML:
lang: define o idioma do conteúdo (usado na tag<html>, ex:lang="pt-BR").charset: define a codificação de caracteres (usado no<meta>, ex:charset="UTF-8").href: define o destino de um link (usado em<a>, ex:href="pagina.html").src: define a origem (endereço) de uma imagem ou script (ex:<img src="foto.jpg">).alt: texto alternativo de uma imagem (usado em<img>, ex:alt="Descrição da imagem").title: mostra uma dica ao passar o mouse (funciona em várias tags).id: identifica um elemento único na página (ex:id="menu").class: agrupa elementos com o mesmo estilo (ex:class="destaque").style: adiciona estilo direto na tag (ex:style="color: red;").target: define onde o link será aberto (ex:target="_blank"para nova aba).type: define o tipo de conteúdo (usado em<script>,<input>e outros).value: valor de um campo de formulário (usado em<input>,<button>, etc).name: nome do campo de formulário (usado para identificar dados enviados).placeholder: texto de dica dentro de um campo (usado em<input>).disabled: desativa um campo (ex:<input disabled>).readonly: torna um campo somente leitura (não editável).
📋Textos
Em HTML, citações são usadas para indicar trechos de texto que vêm de outras fontes ou para destacar palavras ditas por alguém. O HTML oferece tags específicas para representar diferentes tipos de citações. Abaixo estão as principais:
✔️<blockquote> – Citação em bloco Usada para citações longas, geralmente com recuo. Ideal
para parágrafos inteiros.
Veja o código:
<blockquote cite="https://www.exemplo.com/artigo">
A tecnologia é apenas uma ferramenta. No que se refere a conseguir que as crianças trabalhem juntas e
motivá-las, o professor é o mais importante.
</blockquote>
Resultado real:
A tecnologia é apenas uma ferramenta. No que se refere a conseguir que as crianças trabalhem juntas e motivá-las, o professor é o mais importante.
Obs.:Você pode usar o atributo cite para indicar a fonte da citação (opcional).
✔️<q> – Citação curta
Usada para citações curtas em linha, como quando você menciona algo que alguém disse em uma frase.
Veja o código:
<p>Ela disse:
<q>
<i>A persistência é o caminho do êxito.</i>
</q>
</p>Resultado real:
Ela disse:
A persistência é o caminho do êxito.
Obs.: Os navegadores geralmente colocam aspas automaticamente em volta da citação.
✔️<cite> - Referência a uma obra
Usada para indicar o título de uma obra, como
livros, filmes, músicas, sites, etc.
Exemplo com a tag <cite>
Veja o código:
<p>
Meu livro favorito é <cite>Dom Casmurro</cite>, de Machado de Assis.
</p>
Resultado real:
Meu livro favorito é Dom Casmurro, de Machado de Assis.
Obs.:
O conteúdo da tag <cite>geralmente é exibido em itálico.
✔️<abbr> - Abreviações (com tooltip)
não seja uma citação propriamente dita, é útil
quando você quer mostrar significados de siglas ou abreviações.
Exemplo:
Veja o código:
<p>
O <abbr title="HyperText Markup Language">HTML</abbr> é a base da web.
</p>Resultado real:
O HTML é a base da web.
✔️<code>, <pre>,
<Kbd> - Citações técnicas ou comandos
Essas são úteis para destacar códigos,
comandos ou textos literais, comuns em citações técnicas.
Veja o código:
<p>
Use o comando <kbd>Ctrl + C</kbd> para copiar.
</p>Resultado real:
Use o comando Ctrl + C para copiar.
2. Trabalhando com Formulário em HTML
O que é um formulário em HTML?
Um formulário em HTML é utilizado para coletar dados do usuário , como nome, e-mail, opiniões e preferências. Ele é composto por campos interativos, como caixas de texto, botões de envio e menus de seleção. Esses dados podem ser enviados para um servidor ou processados por scripts .
Abaixo um exemplo de formulário:
Fale Conosco
Estruturando seu HTML + formatações
O que é a estrutura do HTML?
A estrutura do HTML define a organização básica de uma página web. Ela começa com a declaração
<!DOCTYPE html>, seguida pelas tags <html>, <head>
e <body>.
No head ficam informações como o título da página e a codificação de caracteres.
Já no body está o conteúdo que será exibido ao usuário, como textos, imagens e links.
Essa estrutura é essencial para que os navegadores interpretem e exibam corretamente o site.
Exemplo de estrutura HTML básica:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Minha Página</title>
</head>
<body>
<h1>Bem-vindo ao meu site</h1>
<p>Esse é um exemplo básico de HTML.</p>
</body>
</html>
📝
Trabalhando com Mídias utilizando HTML
Uso de Mídias em HTML
Em HTML, mídias são recursos como imagens, áudios e vídeos que enriquecem o conteúdo da página.
A tag <img> é usada para exibir imagens, enquanto <audio> e
<video> permitem incorporar sons e vídeos diretamente no site.
Essas tags podem conter atributos como src (fonte do arquivo), controls (exibir
controles de reprodução) e autoplay (reprodução automática).
O uso correto das mídias melhora a experiência do usuário e torna a página mais atrativa.
- <img> – Usada para inserir imagens.
- <audio> – Usada para adicionar arquivos de áudio.
- <video> – Usada para inserir vídeos.
- <source> – Usada dentro das tags <audio> ou <video> para especificar múltiplas fontes.
- <track> – Usada dentro da tag <video> para adicionar legendas ou faixas de texto.
- <figure> – Agrupa mídias com uma legenda (como imagem + descrição).
- <figcaption> – Adiciona uma legenda a um elemento <figure>.
- <embed> – Incorpora conteúdo externo, como PDF ou arquivos em Flash (hoje pouco usado).
- <object> – Também usado para incorporar arquivos multimídia, como animações e documentos.
- <iframe> – Usado para incorporar outra página web (como vídeos do YouTube).
Alguns exemplos de mídias:
✔️Imagem:
✔️Áudio:
✔️Vídeo:
📝Criando Tabelas com HTML
Tabelas com Tags Semânticas
As tabelas em HTML são utilizadas para exibir dados organizados em linhas e colunas. Para garantir acessibilidade e significado ao conteúdo, utilizamos tags semânticas como:
- <table>: define o início de uma tabela.
- <thead>: agrupa o cabeçalho da tabela.
- <tbody>: agrupa o corpo da tabela.
- <tfoot>: agrupa o rodapé da tabela (opcional).
- <tr>: define uma linha.
- <th>: define uma célula de cabeçalho (com significado).
- <td>: define uma célula de dado comum.
O uso correto dessas tags melhora a organização do código, facilita a leitura por leitores de tela e contribui para boas práticas de desenvolvimento.
Exemplo:
| Listas de Alunos | ||
|---|---|---|
| Nome | Idade | Curso |
| Maria Oliveira | 22 | Engenharia |
| João Silva | 24 | Análise de Sistemas |
| Ana Souza | 20 | Design Gráfico |
| Total de alunos: 3 | ||
📝Entendendo HTML Semântico
Resumo sobre Tags Semânticas
As tags semânticas em HTML são elementos que carregam um significado claro sobre o conteúdo que envolvem. Elas ajudam a organizar melhor a estrutura da página, facilitando a leitura do código por desenvolvedores, navegadores e leitores de tela.
Exemplos de tags semânticas incluem:
- <header>: define o cabeçalho de uma página ou seção.
- <nav>: agrupa links de navegação.
- <main>: representa o conteúdo principal do documento.
- <section>: agrupa conteúdos relacionados com um mesmo tema.
- <article>: representa um conteúdo independente, como postagens ou notícias.
- <aside>: conteúdo complementar, como barras laterais.
- <footer>: rodapé da página ou seção.
O uso adequado dessas tags melhora a semântica, acessibilidade e SEO do site, além de tornar o HTML mais organizado e compreensível.