Material de Apoio: HTML

1. Metadados: O Cérebro Invisível

São as configurações que o navegador lê para saber como o seu site deve se comportar. O usuário não vê isso na página, mas sente a diferença.

A "Cabeça" do Site: <head>

<title>: É o nome que aparece na aba do navegador.
<meta charset="UTF-8">: Avisa ao PC que o seu site usa acentos (á, é, ç). Sem isso, o texto fica todo quebrado!
<meta name="viewport">: O comando mágico que faz o site não ficar minúsculo no celular.

Dica: Use sempre o Open Graph (og:image) para que, quando você mandar o link do seu portfólio no WhatsApp, ele apareça com uma foto bonitona em vez de apenas um link cinza.

2. As "Caixas" de Significado

Imagine que você está etiquetando as gavetas do seu armário. O HTML semântico faz exatamente isso: diz ao navegador o que tem dentro de cada parte do site.

O Topo: Gaveta das apresentações. Aqui vai o logo e o menu de navegação.

<main>

O Principal: A gaveta mais importante. Aqui fica o assunto central daquela página.

O Rodapé: A gaveta das miudezas. Fica lá embaixo com contatos e redes sociais.

3. Mágica sem Programação

O HTML moderno já vem com "truques" que antes precisavam de muito código difícil.

<details> + <summary>

O jeito mais simples de criar um menu que abre e fecha (estilo perguntas frequentes).

Clique para ver meus serviços

Edição de Vídeo
Design de Logos

Popovers Nativos

Agora dá para criar janelas que aparecem na frente de tudo sem usar JavaScript!

4. Destaques e Textos Especiais

Como dar ênfase no que realmente importa no seu texto.

<mark>

Funciona como um marca-texto. Serve para destacar algo que o usuário está procurando.

Exemplo de texto destacado.

<kbd>

Representa uma tecla do teclado. Ótimo para dar instruções.

Pressione Enter para continuar.

Lembrete: Use <strong> para coisas importantes e não apenas para deixar o texto gordinho. Para estilo, usaremos o CSS depois!