O que acontece quando você abre um site · HTML do zero

A pergunta que ninguém faz

Você digita maiyu.com.br e a página aparece. Entre uma coisa e outra acontece bastante, e entender isso muda o jeito de escrever código depois.

O caminho, em quatro passos:

Você digita o endereço.
O navegador pergunta a um computador na internet: "me manda a página desse endereço".
Esse computador, o servidor, responde com texto.
O navegador lê o texto e desenha a página na sua tela.

Por que isso importa

Porque o texto que o servidor manda é exatamente o que você vai aprender a escrever. Nenhuma mágica: é um arquivo de texto, com regras.

Abra qualquer site, clique com o botão direito e escolha "Exibir código-fonte da página". Tudo aquilo é HTML. Alguém escreveu.

As três linguagens

Uma página é feita de três coisas, e cada uma tem um trabalho:

Linguagem	O trabalho dela	Exemplo
HTML	Dizer o que cada coisa é	isto é um título, isto é uma lista
CSS	Dizer como cada coisa aparece	o título é verde e grande
JavaScript	Dizer o que acontece	ao clicar no botão, mostrar o preço

Este curso é sobre o primeiro. E a ordem não é acidente: sem estrutura, não há o que estilizar nem o que programar.

Uma comparação que ajuda

Pense numa ficha de matrícula em papel.

O HTML é o formulário impresso: os campos, os rótulos, a ordem das perguntas. É o que diz "aqui vai o nome", "aqui vai a data de nascimento".
O CSS é o design do papel: a cor do cabeçalho, o tamanho da letra, o espaço entre os campos.
O JavaScript é o atendente: aquele que avisa "você esqueceu o telefone" antes de você entregar a ficha.

Uma ficha sem design é feia, mas serve. Uma ficha sem campos não serve para nada.

O portfólio que este curso constrói

Toda aula daqui para a frente acrescenta um pedaço da mesma coisa: um portfólio. Seu, com seu nome, publicado num endereço que você manda para alguém.

Não é um exercício descartável. É o site que responde, sem você estar junto, a três perguntas que alguém faz antes de te chamar para um trabalho: quem é você, o que você já fez e como te encontrar.

São seis páginas, e cada uma nasce numa aula específica:

Página	O que ela responde	Nasce nas aulas
`index.html`	Quem é você, em dez segundos	2, 3
`sobre.html`	Sua história, com mais calma	4
`stack.html`	O que você sabe fazer, por área	5
`carreira.html`	Onde você estudou e trabalhou, em ordem	5, 10
`portfolio.html`	O que você já construiu, com imagem e link	6, 7
`contato.html`	Como falar com você	6, 8, 9

E o portfólio já é o primeiro projeto dele: um site de seis páginas, escrito à mão, acessível e publicado, é trabalho de verdade e conta como tal. A aula 12 mostra como transformá-lo no primeiro <article> da sua portfolio.html, e que projetos pequenos cabem ao lado dele.

O curso irmão

Este curso deixa o portfólio estruturado e sem nenhum CSS: preto no branco, com a letra padrão do navegador. É feio de propósito.

O curso de CSS do zero pega esse mesmo portfólio, sem tocar numa linha de HTML, e o transforma: fundo escuro, realce verde, cartões, grade de projetos e tema claro para quem lê no sol. Os dois cursos são independentes - dá para fazer só um -, mas foram escritos para se encaixarem: o que sai daqui é exatamente o que entra lá.

O que você precisa para começar

Menos do que parece:

Um editor de texto. O Bloco de Notas serve. O VS Code é melhor e é gratuito: ele colore o código e avisa quando você esquece de fechar uma tag.
Um navegador. O que você já usa.
Uma pasta, que você cria na próxima aula, e que vai crescer até o fim.

Não precisa de internet para escrever, não precisa comprar nada, e não precisa instalar um programa pesado.

Exercícios

Abra o site de uma instituição que você conhece: o CETAM, uma prefeitura, uma rádio local: e veja o código-fonte da página. Não tente entender tudo; só repare que é texto.
Procure no código-fonte a palavra <title>. O que está escrito ao lado dela? Compare com o que aparece na aba do navegador.
Abra três portfólios de pessoas que trabalham com o que você quer trabalhar. Para cada um, anote em quanto tempo você descobriu o que a pessoa faz. Se passou de dez segundos, anote também o que atrapalhou.
Escreva, numa linha só, a frase que vai ficar embaixo do seu nome na página inicial. Não é o cargo dos sonhos: é o que você faz ou está aprendendo a fazer, hoje.
Liste três coisas que você já construiu, estudou ou organizou - de qualquer natureza. São as candidatas a virar projeto no seu portfolio.html.

Referências

Introdução ao HTML - MDN Web Docs - a documentação de referência, em português
Como a web funciona - MDN - o caminho do endereço até a tela, em detalhe
HTML Tutorial - W3Schools - tutorial interativo, com editor no próprio site