Guia Completo de HTML: Fundamentos e Elementos Essenciais

O que é uma página web?

Um site é uma coleção de páginas web relacionadas, criadas usando HTML e outros padrões, exibidas na internet com base em regras específicas. Cada página web é um arquivo geralmente em formato HTML, acessado através de navegadores. As páginas web são os elementos fundamentais dos sites, compostas por imagens, links, texto, áudio, vídeo e outros elementos. Normalmente, as páginas web têm extensões .htm ou .html, sendo comumente referidas como arquivos HTML.

O que é HTML?

HTML (HyperText Markup Language) é uma linguagem de marcação usada para descrever páginas web. Não é uma linguagem de programação, mas sim uma linguagem de marcação que utiliza etiquetas (tags) para estruturar o conteúdo. O termo "hipertexto" tem duas significações principais: permite incorporar eelmentos como imagens, sons, animações e multimídia (além do texto limitado) e facilita a navegação entre arquivos através de links que conectam a documentos em qualquer lugar do mundo.

Como as páginas web são formadas?

As páginas web são compostas por elementos HTML descritos por meio de etiquetas, que são interpretadas pelos navegadores para exibir o conteúdo aos usuários. Esses elementos incluem texto, imagens, links, vídeos e muito mais.

Navegadores Web

Os navegadores são plataformas que exibem e executam páginas web. O kernel (motor de renderização) é responsável por ler o conteúdo da página, organizar as informações e calcular como o conteúdo será exibido. Atualmente, a maioria dos navegadores no Brasil utiliza motores Webkit/Blink, como os navegadores 360, UC, QQ e Sogou.

Padrões Web

Por que precisamos de padrões web?

Padroniza o código desenvolvido por diferentes programadores
Expande as possibilidades de desenvolvimento web
Permite que o conteúdo seja acessado por uma variedade maior de dispositivos
Facilita a indexação por mecanismos de busca
Reduz custos de tráfego do site
Simplifica a manutenção do site
Melhora a velocidade de carregamento das páginas

Componentes dos padrões web

Componente	Descrição
Estrutura	Organiza e classifica elementos da página, utilizando principalmente HTML
Apresentação	Define o estilo visual dos elementos (layout, cores, tamanhos), utilizando principalmente CSS
Comportamento	Define interatividade e ações da página, utilizando principalmente JavaScript

A solução ideal proposta pelos padrões web é a separação entre estrutura, apresentação e comportamento. A estrutura é escrita em arquivos HTML, a apresentação em arquivos CSS e o comportamento em arquivos JavaScript.

Sintaxe e Estrutura HTML

Visão geral da sintaxe básica

As etiquetas HTML são palavras-chave entre colchetes angulares, como <html>
As etiquetas geralmente aparecem em pares, como <html> e </html>, sendo chamadas de etiquetas duplas. A primeira é a etiqueta de início e a segunda é a etiqueta de fim
Algumas etiquetas especiais devem ser únicas, como <br />, conhecidas como etiquetas simples

Relação entre etiquetas

As relações entre etiquetas podem ser de inclusão ou paralelas:


1. Relação de inclusão:
<head>
    <title></title>
</head>

2. Relação paralela:
<head></head>
<body></body>

Estrutura básica de um documento HTML

Toda página HTML possui uma estrutura básica (chamada de esqueleto), onde o conteúdo é escrito dentro dessas etiquetas:


  // Declara que é um documento HTML5
<html>           // Elemento raiz da página HTML
<head>           // Contém metadados do documento
    <meta charset="utf-8"> // Define a codificação como UTF-8
    <title>Título do Documento</title> // Define o título do documento
</head>
<body>           // Contém o conteúdo visível da página
    <h1>Título Principal</h1> // Define um cabeçalho de nível 1
    <p>Um parágrafo de texto.</p> // Define um parágrafo
</body>
</html>

Ferramentas de Desenvolvimento Web

Para o desenvolvimento de páginas web, podemos utilizar editores de código como VSCode e IntelliJ IDEA. Algumas dicas úteis incluem:

Duplicar rapidamente uma linha: Shift + Alt + seta para cima/baixo
Selecionar múltiplas palavras idênticas: Ctrl + D
Adicionar múltiplos cursores: Ctrl + Alt + seta para cima/baixo
Substituição global: Ctrl + H
Navegar para uma linha específica: Ctrl + G
Selecionar um bloco de código: Shift + Alt + arrastar o mouse

Etiquetas HTML Comuns

Semântica das etiquetas

A semântica das etiquetas refere-se ao significado ou propósito de cada etiqueta, ou seja, o que ela representa no contexto da página.

Etiquetas de títulos

Para tornar as páginas web mais semanticamente ricas, utilizamos etiquetas de títulos que indicam a hierarquia do conteúdo.

Etiquetas de parágrafo e quebra de linha

A etiqueta <p> define um parágrafo, dividindo o texto em seções lógicas
A etiqueta <br /> força uma quebra de linha no texto


<h1>Exemplo de Títulos</h1>
<h2>Título de nível 2</h2>
<p>Este é um parágrafo de texto.<br />Aqui temos uma quebra de linha.</p>
<p>Outro parágrafo.</p>

Etiquetas de formatação de texto

Para destacar o texto, podemos utilizar etiquetas de formatação:

Etiqueta	Descrição
<b> e <strong>	Define texto em negrito (recomenda-se usar <strong> para maior semântica)
<em>	Define texto enfatizado, em itálico
<i>	Define texto em itálico
<small>	Define texto em tamanho menor
<del>	Define texto excluído
<ins>	Define texto inserido


<b>Texto em negrito</b><br />
<strong>Texto importante</strong><br />
<i>Texto em itálico</i><br />
<em>Texto enfatizado</em><br />
<del>Texto excluído</del><br />
<ins>Texto inserido</ins>

Etiquetas div e span para layout

As etiquetas <div> e <span> são elementos semânticos usados como contêineres para conteúdo:

<div> é um elemento de bloco, geralmente ocupando uma linha inteira
<span> é um elemento inline, ocupando apenas o espaço necessário para seu conteúdo


<div>Este div ocupa uma linha inteira</div>
<div>Outro div em uma nova linha</div>
<span>Este span está na mesma linha</span>
<span>Este outro span está ao lado</span>

Etiquetas de imagem e caminhos

A etiqueta <img> é usada para inserir imagens em uma página HTML:


<img src="caminho/para/imagem.jpg" alt="Descrição da imagem" title="Texto de ajuda">

Atributos comuns:

src (obrigatório): caminho para o arquivo de imagem
alt: texto alternativo para quando a imagem não pode ser exibida
title: texto exibido ao passar o mouse sobre a imagem
width e height: dimensões da imagem

Tipos de caminhos

Caminho relativo: baseado na posição do arquivo atual
- Mesmo nível: "imagem.jpg"
- Nível inferior: "imagens/imagem.jpg"
- Nível superior: "../imagem.jpg"
Caminho absoluto: caminho completo a partir do diretório raiz

Etiquetas de link (hiperligações)

A etiqueta <a> define hiperligações entre páginas:


<a href="url" target="_blank">Texto do link</a>

Tipos de links:

Links externos: para outros sites
Links internos: entre páginas do mesmo site
Links vazios: "#" (usado para âncoras temporárias)
Links de download: para arquivos
Links para elementos da página (como imagens)
Links de âncora: para navegar dentro da mesma página

Etiquetas de fonte

A etiqueta <font> é usada para definir características de texto (embora seja considerada obsoleta em favor do CSS):


<font color="red" face="Arial" size="4">Texto formatado</font>

Etiquetas iframe

A etiqueta <iframe> permite incorporar uma página web dentro de outra:


<iframe src="pagina.html" width="500" height="300" name="meuFrame"></iframe>
<a href="outra.html" target="meuFrame">Carregar no iframe</a>

Elementos HTML

Elemetno <base>

Define a URL base para todas as URLs relativas na página:


<base href="https://www.exemplo.com/">

Elemento <link>

Define a relação entre o documento e recursos externos, geralmente usado para folhas de estilo:


<link rel="stylesheet" type="text/css" href="estilos.css">

Elemento <style>

Permite inserir estilos CSS diretamente no documento HTML:


<style>
    body { background-color: #f0f0f0; }
    h1 { color: blue; }
</style>

Elemento <meta>

Fornece metadados sobre o documento HTML:


<meta charset="UTF-8">
<meta name="description" content="Descrição do site">
<meta name="keywords" content="html, web, desenvolvimento">
<meta name="author" content="Nome do autor">

Elemento <script>

Usado para inserir scripts do lado do cliente, geralmente JavaScript:


<script src="script.js"></script>

Comentários e Caracteres Especiais

Comentários HTML

Os comentários são textos ignorados pelo navegador, mas úteis para desenvolvedores:


<!-- Este é um comentário -->

Caracteres especiais

Alguns caracteres têm significado especial em HTML e precisam ser representados por entidades:

Caracter	Entidade	Descrição
		Espaço não quebrável
<	<	Sinal menor que
>	>	Sinal maior que
&	&	E comercial
"	"	Aspas duplas
'	'	Aspas simples

Tabelas HTML

Uso principle das tabelas

As tabelas são usadas principalmente para exibir dados de forma estruturada e organizada, não para o layout da página.

Estrutura básica de uma tabela

Uma tabela HTML é definida pela etiqueta <table> e contém linhas (<tr>) e células (<td> ou <th> para cabeçalhos):


<table>
    <tr>
        <th>Cabeçalho 1</th>
        <th>Cabeçalho 2</th>
    </tr>
    <tr>
        <td>Dado 1</td>
        <td>Dado 2</td>
    </tr>
</table>

Atributos de tabela

Atributo	Valor	Descrição
align	left, center, right	Alinhamento da tabela
border	1 ou ""	Largura da borda
cellpadding	pixels	Espaço entre o conteúdo e a borda da célula
cellspacing	pixels	Espaço entre células
width	pixels ou %	Largura da tabela

Estrutura de tabelas

Para tabelas complexas, podemos usar etiquetas de estrutura:

Etiqueta	Descrição
<caption>	Título da tabela
<thead>	Cabeçalho da tabela
<tbody>	Corpo da tabela
<tfoot>	Rodapé da tabela

Mesclagem de células

Podemos mesclar células horizontalmente (colspan) ou verticalmente (rowspan):


<table border="1">
    <tr>
        <td colspan="2">Célula mesclada horizontalmente</td>
    </tr>
    <tr>
        <td rowspan="2">Célula mesclada verticalmente</td>
        <td>Célula normal</td>
    </tr>
    <tr>
        <td>Outra célula normal</td>
    </tr>
</table>

Listas HTML

Tipos de listas

Listas não ordenadas

Listas com itens marcados com pontos ou outros símbolos:


<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Listas ordenadas

Listas com itens numerados ou alfabeticamente:


<ol>
    <li>Primeiro item</li>
    <li>Segundo item</li>
    <li>Terceiro item</li>
</ol>

Listas de definição

Listas com termos e suas descrições:


<dl>
    <dt>Termo 1</dt>
    <dd>Descrição do termo 1</dd>
    <dt>Termo 2</dt>
    <dd>Descrição do termo 2</dd>
</dl>

Formulários HTML

Por que usar formulários?

Os formulários são usados para coletar informações dos usuários e enviá-las para o servidor para processamento.

Componentes de um formulário

Um formulário completo consiste em:

Domínio do formulário (<form>)
Controles do formulário (elementos de entrada)
Informações descritivas

Domínio do formulário

A etiqueta <form> define o domínio do formulário:


<form action="processar.php" method="post">
    // Elementos do formulário aqui
</form>