Introdução à Web e Estrutura do HTML

🌐 Como os sites são criados?

Todos os sites são construídos com HTML e CSS.
Sistemas como blogs, e-commerce e CMS utilizam tecnologias adicionais.
Ao acessar um site, o navegador geralmente está recebendo HTML e CSS de um servidor web.

🌍 Como funciona a Web?

O navegador busca o endereço IP do site através de um servidor DNS.
Com o IP em mãos, ele se conecta ao servidor e baixa os arquivos HTML/CSS/JS.
O navegador interpreta esses arquivos e renderiza a página.

Exemplos de conexões globais:

Usuário em Nova York acessa google.com (San Francisco)
Usuário em Estocolmo acessa qantas.com.au (Sydney)

💡 Dica: Testando o caminho de um DNS usando a ferramenta Traceroute

Para entender melhor como o DNS funciona, você pode usar a ferramenta traceroute. Ela mostra o caminho que os pacotes percorrem até chegar ao destino.

Instalação do traceroute:

Linux: Use o gerenciador de pacotes da sua distribuição, por exemplo:

sudo apt install traceroute  # Debian/Ubuntu
sudo yum install traceroute  # CentOS/RHEL

sudo apt install traceroute  # Debian/Ubuntu
sudo yum install traceroute  # CentOS/RHEL

macOS: O traceroute já vem instalado por padrão.
Windows: Use o comando tracert no terminal.

Depois de instalado, experimente rodar o comando:

📄 Estrutura de uma página web

Toda página HTML é composta por elementos estruturais chamados de tags.

Exemplo de estrutura básica:

basic-structure

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Bem-vindos</title>
  </head>
  <body>
    <h1>Olá, turma!</h1>
    <p>Meu primeiro parágrafo</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Bem-vindos</title>
  </head>
  <body>
    <h1>Olá, turma!</h1>
    <p>Meu primeiro parágrafo</p>
  </body>
</html>

💡 Detalhes sobre o <!DOCTYPE html>

O <!DOCTYPE html> é uma declaração especial usada no início de um documento HTML para informar ao navegador qual versão do HTML está sendo usada. Ele não é uma tag HTML, mas sim uma instrução para o navegador.

Por que é importante?

Compatibilidade: Garante que o navegador renderize a página no modo padrão, evitando o modo quirks (modo de renderização antigo para navegadores incompatíveis), que pode causar inconsistências na renderização.
HTML5: A declaração <!DOCTYPE html> é usada para documentos HTML5 e é a mais simples em comparação com versões anteriores do HTML.

Observação:

O <!DOCTYPE html> não diferencia maiúsculas de minúsculas, então <!doctype html> também é válido.
Ele não gera nenhum conteúdo visível na página, mas é essencial para o funcionamento correto do documento.

🔍 Anatomia de uma tag HTML

Tag de abertura:

<p>

<p>

Tag de fechamento:

</p>

</p>

As tags delimitam o início e o fim de um elemento HTML.
Elementos podem conter texto, outros elementos, ou atributos.

🧾 Atributos em HTML

Atributos fornecem informações adicionais sobre os elementos.
Sintaxe: nome="valor"

Exemplo:

<p lang="en-us">Paragraph in English</p>

<p lang="en-us">Paragraph in English</p>

🧠 Head, Body e Title

<html>: Contém toda a estrutura da página.
<head>: Define metadados, como o título da aba.
<title>: Título exibido na aba do navegador.
<body>: Todo o conteúdo visível na página.

🛠️ Prática: Criando sua primeira página HTML

Crie um arquivo com a extensão .html.
Copie e cole o exemplo anterior.
Abra no navegador para visualizar o resultado.

🔧 Inspecionando páginas com o navegador

Use a ferramenta “Inspecionar Elemento” no navegador (geralmente clicando com o botão direito sobre a página).

Com o Chrome DevTools, é possível:

Ver o HTML/CSS carregado.
Entender a estrutura da página.
Testar modificações em tempo real.

Editar esta página