-
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]
