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]