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]