Bem vindos à minha página.

Eu sei, não é uma página muito emocionante

Está totalmente em branco, 
mas toda página começa assim

e vou te mostrar como construir essa 
página daqui a pouco.

Mas, primeiro, me dê um momento para

mostrar o esqueleto de uma 
página web em braco.

Toda página começa com

essa coisa divertida chamada DOCTYPE,
aqui em cima.

Isso é um indicador para o navegador

de que essa página está escrita
utilizando HTML moderno

ao invés do HTML antigo e esquisito.

Em seguida, para a primeira tag da página.

HTML é uma linguagem de marcação,
então, tudo se resume à tags.

E uma tag é uma dessas coisas

que começa com um colchete angular

e termina com outro colchete angular.

Ou, se você gosta de
matemática, pense neles

como sinais de maior e menor (< >).

A primeira tag de todas as
páginas é sempre

a tag HTML, logo abaixo do DOCTYPE.

Esse aqui é o começo da tag HTML.

e, lá embaixo, existe o fechamento
da tag HTML.

que é a mesma coisa, exceto por esta 
barra, que é muito importante.

A tag HTML deve conter todas
as outras tags

que compõem a página.

É por isso que não fechamos a tag
HTML antes do fim da página.

Várias tags HTML vêm em pares como este,

mas nem todas.

Abaixo do HTML, sempre existe
uma tag "head".

Ela possui tags que ajudam o navegador 
a processar a página

mas não contém nada que o 
usuário veja, de fato.

Existe essa tag "meta" que
fornece ao navegador

mais detalhes sobre como ele deve
processar a página.

Por exemplo, se você está
usando caracteres

como os da língua Inglesa

e não caracteres mais difíceis de
processar, como

os da língua Arábica,

então você deve ter o meta charset 
definido como utf-8

Em seguida, temos essa tag "title"

que o navegador usa para decidir
o título da página.

Isso é mostrado nas abas de cima
dos navegadores,

nos favoritos e nos resultados de busca.

Aqui, no Khan Academy, o título é
exibido logo acima de nossa página.

Vamos trocar o título.

Eu vou criar uma página toda
sobre coelhos.

Então eu vou dizer: "Tudo Sobre Coelhos!!"

e talvez você até possa ver 
isso mudando ali em cima.

Legal.

Agora terminamos com esses detalhes,

fechamos a tag "head" e vamos até a tag

onde tudo vai acontecer: a tag "body".

Está muito chato agora, 
apenas o início e o fim.

O que eu devo adicionar?

Estou criando uma página
sobre coelhos,

então eu provavelmente deveria declarar 
isso em um grande título em cima.

Para adicionar um título, 
usamos a tag "h1".

e... Tudo sobre coelhos, ótimo.

Na verdade, existem seis tags que

podemos usar como títulos: 
h1, h2, h3, h4, h5 e h6.

"h1" é atribuído ao título mais 
relevante na página

e "h6", para o menos importante.

Vamos adicionar mais títulos
para as outras seções.

Eu vou usar um h2 já que essas são seções

menos importantes.

E algumas músicas. Ótimo.

Agora, vamos adicionar algum conteúdo.

Meu público alvo para essa página

são alienígenas que nunca viram
coelhos antes.

Logo, é bom que eu dê a eles uma descrição
sobre coelhos.

De fato, acho que preciso de um
parágrafo inteiro de informações.

Como eu posso demarcar um parágrafo 
usando HTML?

Com a tag "< p >", é claro!

Colocamos a tag "< p >" e

em seguida, vou em frente colando
as informações.

Assim você não precisa me ver
digitando tudo isso.

Lindo!

Agora os aliens precisam de uma música
para cumprimentar os coelhos

então, vou dar-lhes a letra de uma
favorita pessoal.

E, de novo usamos a tag "< p >" para isso.

E colocamos a música.

♫ Little Bunny Foofoo ♫

Ah, que música boa!

Mas, tudo está aparecendo
na mesma linha.

Como os aliens vão saber onde parar?

Por que o navegador não processou as
quebras de linha que coloquei ali?

Na verdade, os navegadores 
normalmente ignoram as

quebras de linhas e os espaços em seu HTML

Se quisermos que o navegador processe as
quebras de linhas,

precisamos avisá-lo explicitamente usando
uma outra tag:

a tag "< br >", que significa uma 
quebra de linha.

Vamos em frente e adicionando < br > após 
cada linha.

Agora isso parece uma letra de música.

Você percebeu algo engraçado em
relação ao "< br >"?

Não existe tag de fechamento.

Se você pensar nisso, uma quebra
de linha não tem conteúdo.

Logo, não há nada para ser fechado.

Precisamos apenas da tag de abertura.

Agora sim.

Os aliens vão aprender o básico
sobre coelhos

e vocês aprenderam o básico do HTML.

Depois que eu terminar de falar

brinque um pouco com isso 
e tente mudar as coisas.

E, quando estiver pronto, encare seu 
primeiro desafio HTML.

Traduzidor por [Felipe Francisco]
Revisado por [Fernando dos Reis]