Upload
antonio-souza
View
240
Download
1
Embed Size (px)
DESCRIPTION
passo a passo html
Citation preview
IntroduoAs pessoas imaginam que muito difcil construir um website. Isto no verdade!Qualquer um pode aprender como construir um website. Se voc continuar lendo, estar apto a construir um website em uma hora.Outros pensam - erroneamente - que necessrio softwares avanados e caros para construir websites. verdade que existem muitos softwares capazes de criar um website para voc. Alguns mais fechados que outros. Mas, se voc pretende trilhar o caminho certo, dever criar voc mesmo o website. Felizmente,isto simples voc j tem a sua disposio todos os softwares que presisa.O objetivo deste tutorial fornecer os conhecimentos bsicos que permitiro construir um website de forma correta.O tutorial parte do zero e no requer qualquer conhecimento prvio de programao.
Lio 1: Vamos comearNesta primeira lio apresentaremos as ferramentas necessrias construo de um website.O que necessrio? muito provvel que voc j tenha as ferramentas que precisa.Voc tem um "navegador". Navegador um programa que permite visualizar e navegar por pginas na Internet. Voc est lendo est pgina em um navegador.No importa qual navegador voc usa. O mais comum o Microsoft Internet Explorer. Mais existem outros, tais como, Opera e Mozilla Firefox que podem ser usados.Voc j deve ter ouvido falar ou at mesmo pode j ter usado programas tais como, Microsoft FrontPage, Macromedia Dreamweaver ou mesmo Microsoft Word, que podem - pelo menos anunciam que podem - criar websites para voc. Por ora, esquea estes programas! Eles no tm qualquer utilidade para voc na tarefa de codificar seu website.Voc precisar de um simples editor de textos. Se voc tem instalado o Windows, poder usar o Notepad, que normalmente pode ser encontrado no menu Programs em Accessories (Programas Acessrios):
Se voc no tem o Windows, use um editor de texto similar. Por exemplo, Pico (Linux) ou TextEdit (Mac).Notepad um editor de texto bsico e simples, mas excelente para codificao, porque no interfere no que voc est digitando. Com ele o controle todo e somente seu. O problema com programas que criam o website para voc, que eles vm com uma srie de funes pr-instaladas para voc escolher. Tudo dever ser projetado para se encaixar nestas funes padro. Assim, muitas vezes no possvel criar exatamente aquilo que voc planejou. Ou - mais frustante ainda - os programas inserem modificaes no cdigo que voc cria. Usando o Notepad ou qualquer editor de textos simples voc o nico responsvel pelo acertos ou pelos erros do seu cdigo.Um navegador e o Notepad (ou editor similar) tudo o que voc precisa para acompanhar este tutorial e construir seu website.Preciso estar online?No. Voc no precisa estar conectado Internet - tanto para ler este tutorial como para construir seus websites.Se voc quer desconetar-se enquanto l este tutorial, voc poder imprimir ou simplesmente desconectar-se da Internet enquanto l a tela. Voc pode construir seu website noHDdo seu computador e fazer o upload para a Internet quando terminar.O que vem a seguir?Passe para a prxima lio e leia sobre oHTMLantes de comearmos a diverso a partir da Lio 3.
Lio 2: O que HTML?Esta lio apresentar voc seu novo amigo, oHTML.O que HTML?HTML a "lngua me" do seu navegador.Resumindo uma longa histria,HTMLfoi inventado em 1990 por um cientista chamado Tim Berners-Lee. A finalidade inicial era a de tornar possvel o acesso e a troca de informaes e de documentao de pesquisas, entre cientistas de diferentes universidades. O projeto inicial tornou-se um sucesso jamais imaginado por Tim Berners-Lee. Ao inventar oHTMLele lanou as fundaes da Internet tal como a conhecemos atualmente.HTML uma linguagem que possibilita apresentar informaes (documentao de pesquisas cientficas) na Internet. Aquilo que voc v quando abre uma pgina na Internet a interpretao que seu navegador faz doHTML. Para visualizar o cdigo HTML de uma pgina use o menu "View" (Ver) no topo do seu navegador e escolha a opo "Source" (Cdigo fonte).
Para quem no conhece, o cdigoHTMLpode parecer complicado, mas este tutorial ir tornar as coisas claras para voc.Para que devo usar oHTML?Se voc quer construir websites ter que conhecerHTML. Mesmo que voc use um programa para criar seu website, tal como o Dreamweaver, um conhecimento bsico deHTMLser necessrio para tornar as coisas mais simples e para criar um website de melhor qualidade. A boa notcia queHTML fcil de aprender e de usar. A partir das duas prximas lies voc j ter aprendido como construir seu primeiro website.HTML usado para construir websites. simples!OK, mas o que significa H-T-M-L?HTML a abreviatura de "HyperText Mark-up Language" - e isto tudo o que voc precisa saber por enquanto. Contudo, vamos detalhar isto. Hyper o oposto de linear. Nos tempos antigos - quando mouse era apenas um rato caado por gatos - os programas de computadores rodavam linearmente: quando o programa executava uma ao tinha que esperar a prxima linha de comando para executar a prxima ao e assim por diante de linha em linha. ComHTMLas coisas so diferentes - voc pode ir de onde estiver para onde quiser. Exemplificando: no necessrio que voc tenha visitado o site MSN.com antes de visitar o site HTML.net. Text texto e no h mais nada a acresentar. Mark-upsignifica marcao e o texto que voc escreve. Voc cria a marcao da mesma forma que escreve em um editor seus cabealhos, marcadores, negrito, etc Languagesignifica linguagem e exatamente o queHTML; uma linguagem. A linguagemHTMLusa muitas palavras do ingls.Neste tutorial voc aprenderXHTML(Extensible HyperText Mark-up Language) que nada mais do que uma maneira mais bem estruturada de escreverHTML.Agora que voc j sabe o que HTML(eXHTML) vamos comear aplicando eles para: construir websites.
Lio 3: O que so tagsHTML?Voc j est em condies de aprender a
chave doHTML- tags."Tags"?Tags so rtulos usados para informar ao
navegador como deve ser apresentado o website.Todas as tags tm o
mesmo formato: comeam com um sinal de menor "".Genericamente
falando, existem dois tipos de tags - tags de abertura: e tags de
fechamento: . A diferena entre elas que na tag de fechamento existe
um barra "/".Tudo que estiver contido entre uma tag de abertura e
uma tag de fechamento ser processado segundo o comando contido na
tag.Mas, como toda regra tem sua exceo, aqui noHTMLa exceo que para
algumas tags a abertura e o fechamento se d na mesma tag. Tais tags
contm comandos que no necessitam de um contedo para serem
processados, isto , so tags de comandos isolados, por exemplo, um
pulo de linha conseguido com a tag
.HTML tag - e nada mais do que tags. AprenderHTML aprender como
usar as diferentes tags.Voc pode mostrar alguns exemplos?OK, a
taginforma ao navegador que todo o texto colocado entreedeve
ser mostrado em negrito. (O comando "b" uma abreviao para "bold" -
negrito.)Exemplo 1:Este texto deve ser em negrito.Vai ser
apresentado no navegador, como mostrado a seguir:Este texto deve
ser em negrito.As tags,,,,einformam ao navegador que trata-se de um
cabealho (h vem de "heading" - cabealho ), sendoo cabealho de
primeiro nvel e aquele apresentado com o maior tamanho de texto,o
cabealho de segundo nvel e aquele apresentado com tamanho de texto
um pouco menor eo cabealho de sexto nvel e aquele apresentado com o
menor tamanho de texto.Exemplo 2:Este um ttuloEste um sub ttuloVai
ser apresentado no navegador, como mostrado a seguir:Este um
ttuloEste um subttuloAs tags devem ser escritas com letras
maisculas ou minsculas?Para a maioria dos navegadores indiferente
se voc usa maiscula, minscula ou mesmo uma mistura delas., ou
normalmente tem o mesmo efeito. Contudo a maneiracorreta usar
minsculas. Ento, crie ohbito de escrever suas tags com
minsculas.Onde devo colocar todas estas tags?Voc deve escrever suas
tags em um documentoHTML. Um website constituido por um ou mais
documentosHTML. Quando voc navega naWeb, voc est abrindo diferentes
documentosHTML.Se voc passar para a prxima lio, em dez minutos
estar construindo seu primeiro website.Lio 4: Criando seu primeiro
websiteCom o que voc aprendeu nas lies anteriores est a alguns
minutos de criar seu primeiro website.Como?Na lio 1 vimos o que
necessrio para construir um website: um navegador e o Notepad (ou
um editor de texto similar). Uma vez que voc esta lendo esta pgina,
provavelmente est com seu navegador aberto. Agora abra outra janela
do seu navegador de modo que voc tenha duas janelas na tela, uma
para ler este tutorial e outra para visualizar o website que voc
vai construir.Abra tambm o Notepad ( Iniciar Programas
Acessrios):Agora, estamos prontos para comear!O que posso
fazer?Vamos comear com algo simples. Que tal uma pgina que diga:
"Hurrah! Esta a minha primeira pginaweb." Continue e voc ver como
isto simples de fazer.HTML simples e lgico.O navegador l HTML de
modo idntico ao que voc l um texto qualquer, de cima para baixo e
da esquerda para a direita.Assim um documentoHTMLinicia com aquilo
que deve ser a primeira coisa aparecer na pgina e termina com a
ltima coisa a aparecer.A primeira coisa a fazer dizer ao navegador
que voc vai "falar" com ele na linguagemHTML. Isto feito com a
tag(nenhuma novidade nisto). Ento, antes de mais nada digite "" na
primeira linha do documento, no Notepad.Como sabemos das lies
anteriores, uma tag de abertura e deve ser fechada com a tag de
fechamento quando voc acabar de digitar seu documentoHTML. Para
termos certeza que no iremos esquecer de fechar a tagHTML, faa isso
agora mesmo, digitando"" localizada a algumas linhas abaixo, assim
voc ir escrever seu documento entre as tags digitadase.A prxima
coisa que o documento precisa um "head" (cabea), que fornece
informaes sobre o documento e um "body" (corpo), que abriga o
contedo do documento. Como HTML no seria nada se no fosse lgico, a
"cabea" (e) fica em cima do "corpo" (e).Seu documento agora est
como mostrado abaixo: Notar como estruturamos o cdigo em linhas
diferentes (usar a teclaEnterpara pular para prxima linha) e tambm
a indentao (recuos) do cdigo (usar a teclaTabpara indentar). A
prncipio no faz qualquer diferena a maneira como voc estrutura
(linhas e recuos na digitao) seu documentoHTML. Mas um cdigo bem
estruturado mais fcil de ler e entender, altamente recomendado que
voc adote uma estrutura clara e ntida para seuHTML,usando linhas e
indentao (recuos), como mostrado no exemplo acima.Se o seu
documento est como o mostrado acima, voc construiu sua primeira
pgina web - uma pgina particularmente chata e provalvelmente nada
parecido com o que voc sonhou fazer quando comeou a ler este
tutorial, mas de qualquer forma um tipo de website. Isto que voc
fez ser um template base para seus futuros documentosHTML.At aqui
tudo bem, mas como colocar contedo no meu website?Como voc j
aprendeu, seu documentoHTML composto de duas partes: um head e um
body.Na seo head voc escreve informaes sobre a pgina e na seo body
voc coloca as informaes que constituem a pgina.Por exemplo, para
dar um ttulo ao documento, ttulo este que aparea no topo da barra
do navegador voc dever usar a seo"head". A tag para acresentar um
ttulo :Minha primeira pgina webNotar que o ttulo no aparece na
pgina propriamente dita. Tudo que voc quer que aparea na pgina
contedo e dever ser colocado entre as tags "body".Conforme
combinamos, queremos uma pgina dizendo, "Hurrah! Esta a minha
primeira pgina web." Este o texto que queremos comunicar e ele
dever ser colocado na seo body. Ento digite na seo body o
seguinte:Hurrah! Esta a minha primeira pgina web.A letra p na tag a
abreviatura para "paragraph" (pargrafo) que exatamente o que o
texto - um texto pargrafo.Seu documentoHTMLagora est como mostrado
a seguir: Minha primeira pgina web Hurrah! Esta a minha primeira
pgina web. Pronto! Voc acaba de construir seu primeiro
website!Agora basta que voc salve seu trabalho noHDe depois
visualize no navegador: No Notepad v ao menu "Arquivo" no topo da
janela e escolha a opo "Salvar como...". Escolha "Todos os
arquivos" no box "Salvar como tipo". Isto muito importante - caso
voc no faa isto, o arquivo ser salvo como texto e no como
documentoHTML. Salve seu documento com o nome "page1.htm" (a
extenso ".htm" indica que se trata de um documentoHTML. A extenso
".html" d o mesmo resultado. Eu sempre uso ".htm", mas voc pode
escolher a que voc preferir .htm ou .html). Voc pode salvar o
documento onde voc quiser no seuHD- esteja certo de salvar em um
lugar que depois voc possa achar com facilidade.Agora v ao seu
navegador: No menu existente no topo do navegador v em "Arquivo" e
escolha a opo "Abrir" (CTRL+O). Clique em "Procurar" no box que
aparece. Localize o seu documentoHTMLe clique em "Abrir".Voc dever
ver no seu navegador: "Hurrah! Esta a minha primeira pgina web."
Parabns!Se voc quer que o mundo todo veja sua pgina, v direto para
a Lio 14 e aprenda como fazer upload da sua pgina para a Internet.
Se no, tenha pacincia e continue lendo. A brincadeira apenas
comeou.Lio 5: O que voc j aprendeu?Comece sempre com o template
bsico que construmos na lio anterior: Coloque sempre o ttulo do seu
documento na seo head:Ttulo da sua pgina. Ver na figura abaixo como
o ttulo aparece no topo superior esquerdo do navegador:O ttulo
muito importante porque usado pelos mecanismos de busca (tais como
o Google) para indexar seu website como mostrado a seguir para o
site CSS para Web Design:Na seo body voc escreve o contedo da sua
pgina. Voc conhece algumas das mais importantes tags: usado para
pargraos.Torna o texto negrito. CabealhoSubttuloSub-subttulo
Lembre-se, o nico caminho para aprenderHTML por ensaio e erro. Mas,
no se preocupe, voc no destruir seu computador e nem a Internet.
Ento, faa seus experimentos e testes - esta a melhor maneira de
ganhar experincia.O que significa isto?Ningum se tornar um bom
criador de websites aprendendo os exemplos contidos neste tutorial.
O que voc aprender neste tutorial simplesmente o bsico para criao -
para se tornar um bom desenvolvedor voc dever descobrir caminhos
por si mesmo em maneiras criativas.Ento mos obra. Comece suas
experincias com tudo que voc aprendeu at agora.O que fazer
agora?Tente criar algumas pginas. Por exemplo, construa uma pgina
com um ttulo, um cabealho, algum texto, um subttulo e mais algum
texto. No h nada contra fazer uma consulta no tutorial para
construir as pginas, ou seja, a "cola" permitida. Porm, mais a
frente, tente criar sem consultar - "cola" no permitida.Lio 6: Mais
tags HTMLE a? Voc construiu algumas pginas como sugerimos na lio
anterior? No? Sim? Bem, a seguir um exemplo: Meu website Um
cabealho texto, texto texto, texto Subttulo texto, texto texto,
texto E agora?Agora vamos aprender mais sete tags.Voc j sabe que
pode obter negrito com a tag, agora saiba que pode obter itlico
- letras inclinadas - com a tag. J percebeu no ?, "i" vem de
"italic".Exemplo 1:Este texto deve ser itlico.Ser
renderizado no navegador assim:Este texto deve ser itlico.De modo
similar voc pode fazer seu texto com letra menores usando a
tag:Exemplo 2: Este texto deve ser com letras em tamanho small.Ser
renderizado no navegador assim:Este texto deve ser com letras em
tamanho small.Posso usar vrias tags simultaneamente?Sim voc pode
usar quantas tags queiradesde de que as aninhe convenientemente.
Veja como fazer isto no exemplo abaixo:Exemplo 3:Para escrever um
texto em negrito e itlico faa como mostrado a seguir:Texto em
negrito e itlico. E no assim:Texto em negrito e
itlico. Observe que no primeiro exemplo a primeira tag de
aberturacorresponde a ltima tag de fechamento, e o
aninhamento est certo. Isto evita confuso para quem escreve o cdigo
e para o navegador que l o cdigo.Mais tags!Como foi dito na Lio
4existem tags que so abertas e fechadas em nica tag. Estas tags so
comandos isolados, ou seja, no contm nenhum texto dentro delas para
poder funcionar. Um exemplo a tag
que serve para criar uma quebra de linha:Exemplo 4:Um texto
e mais texto em nova linhaSer renderizado no navegador assim:Um
textoe mais texto em nova linhaNotar que a tag escrita como se
fosse uma mistura de tag de abertura e de fechamento com uma barra
"/" no final:
. A princpio podemos escrever tambm
(sem contedo), mas para que complicar?Outra tag de comando que
serve para definir uma linha horizontal ("hr" vem "horizontal rule"
- rgua horizontal ):Exemplo 5:Ser renderizado no navegador
assim:Exemplo 6:Um item de lista Outro item de lista Ser
renderizado no navegador assim: Um item de lista Outro item de
listaExemplo 7:Primeiro item da lista Segundo item da lista
Ser renderizado no navegador assim:1. Primeiro item da lista2.
Segundo item da listaUau! Isto tudo?Sim, por enquanto isto tudo.
Aconselhamos, novamente, a fazer seus prprios experimentos,
construindo algumas pginas usando as sete tags ensinadas nesta
lio:ItlicoTexto tamanho small
Pula linha Linha HorizontalIndentaoListaLista
ordenadaItem de listaLio 7: AtributosVoc pode adicionar atributos s
tags.O que atributo?Como voc deve estar lembrado, uma tag um
comando para o navegador (por exemplo,
um comando para mudar de linha). Em algumas tags voc pode ser mais
especfico, acresentando na tag, informaes adicionais de comando.
Isto feito atravs dos atributos.Exemplo 1:Eu adoro HTML Atributos
so escritos dentro da tag, seguidos por um sinal de igual e depois
entre aspas so declaradas as informaes do atributo. As informaes
quando mais de uma, devem ser separadas por ponto e vrgula, tudo
conforme mostrado no exemplo acima. Adiante voltaremos a este
assunto.Como isto?Existem vrios atributos. O primeiro que voc
aprender o atributo style.Com o atributo style voc pode adicionar
estilizao e layout ao seu website. Por exemplo, uma cor de
fundo:Exemplo 2: O cdigo acima renderiza uma pgina com cor de fundo
vermelha - v em frente! experimente voc mesmo, construa uma pgina
vermelha. A seguir explicaremos como funcionam as cores.Notar que
algumas tags e atributos usam nomes do idioma ingls dos E.U.A.
muito importante que voc use os nomes exatamente como mostrados
neste tutorial - se voc mudar uma letra que seja, o navegador no ir
entender seu cdigo. importante tambm que voc no se esquea de fechar
as aspas nas informaes do atributo.Como a pgina ficou vermelha?No
exemplo acima ns usamos o cdigo "#ff0000" para fazer a pgina na cor
vermelha. Eate o cdigo para a cor vermelha no sistema chamado de
nmeros hexadecimal (HEX).Cada cor representada por um nmero
hexadecimal. A seguir alguns exemplos:Branco: #ffffffPreto: #000000
(zeros)Vermelho: #ff0000Azul: #0000ffVerde: #00ff00Amarelo:
#ffff00Um cdigo hexadecimal para cores formado por um sinal #
seguido de seis dgitos e/ou letras. Existe mais de 1000 cdigos HEX
e no fcil decorar o cdigo para todas as cores. Para facilitar as
coisas ns desenvolvemos uma carta com as 216 cores mais usadas na
web:Carta das 216 cores seguras para a Web.Para algumas cores, voc
pode usar o nome das cores em ingls (white, black, red, blue, green
e yellow - branco, preto, vermelho, azul, verde, amarelo).Exemplo
3: Chega de cores. Voltemos aos atributos.Quais tags podem usar
atributos?Atributos podem ser aplicados maioria das tags.Voc
normalmente usar atributos com mais freqncia em algumas tags, tais
como a tagbodye raramente usar em outras, como por exemplo, a
tagbrque um comando para pular de linha e no precisa de nenhuma
informao adicional.Assim como existem muitas tags, tambm existem
muitos atributos. Alguns atributos so empregados em tags especficas
enquanto outros servem para vrias tags. E vice-versa: algumas tags
podem conter somente um tipo de atributo, enquanto outras podem
conter vrios tipos.Isto pode parecer um pouco confuso, mas medida
que voc for praticando vai constatar que tudo fcil e lgico, bem
como vai verificar as inmeras possibilidades que os atributos
oferecem.Este tutorial apresentou a voc, os atributos.Ento, quais
so as partes que constituem uma tag?A constituio bsica de uma tag
denominada elemento(por exemplo p em). Assim, uma tag constituida
de um elemento (por exemplo), ou por um elemento e um ou mais
atributos (por exemplo). Simples!Lio 8: LinksNesta lio voc aprender
como construir links entre pginas.O que eu preciso para construir
um link?Para construir um link voc usa o que tem usado at agora
para codificarHTML: uma tag.Uma simples e pequenina tag com um
elemento e um atributo suficiente para voc construir links para
onde quiser.A seguir um exemplo de link para o site
HTML.net:Exemplo 1:Aqui um link para HTML.net Ser renderizado no
navegador assim:Aqui um link para HTML.netO elementoarefere-se a
"anchor" - ncora . O atribuitohref abreviao para "hypertext
reference" - referncia a hypertexto - e especifica o destino do
link - que normalmente um endereo na Internet ou um arquivo.No
exemplo acima o atributohreftem o valor "http://www.html.net", que
o endereo completo do site HTML.net e chamado de URL (Uniform
Resource Locator). Notar que "http://" deve sempre ser incluido nas
URLs. A frase "Aqui um link para HTML.net" o texto mostrado no
navegador como link. Lembre-se de fechar a tag com um.Como so os
links entre minhas prprias pginas?Se voc quer construir links entre
pginas de um mesmo website voc no precisa escrever o endereo
completo de cada pgina (URL). Por exemplo, se voc tem duas pginas
(vamos cham-las de pagina1.htm e pagina2.htm) e salvou as duas em
um mesmo diretrio voc constri um link de uma para a outra usando
somente o nome do arquivo no link. Nestas condies, um link da
pgina1.htm para a pagina2.htm como mostrado abaixo:Exemplo 2:Aqui
um link para a pagina 2 Se a pagina2 for colocada em um subdiretrio
(chamado de "subdiretorio"), o link como mostrado abaixo:Exemplo
3:Aqui um link para a pagina 2 Por outro lado, um link da pagina2
no "subdiretorio" para a pagina1 como mostrado a seguir:Exemplo
4:Aqui um link para a pagina 1 "../" aponta para o diretrio a um
nvel acima do arquivo onde foi feito o link. Seguindo o mesmo
princpio voc pode apontar para dois (ou mais) nveis acima,
escrevendo "../../".Voc entendeu? Como alternativa voc pode usar
sempre o endereo completo do arquivo (URL).Como so os links dentro
de uma mesma pgina?Voc pode criar links internos, dentro da prpria
pgina - por exemplo, uma tabela de contedos ou ndice com links para
cada um dos captulos em uma pgina. Tudo o que voc precisa usar o
atributo id e o smbolo "#".Use o atributo id para marcar o elemento
que o destino do link. Por exemplo:Cabealho 1 Voc agora pode criar
um link que leve quele elemento usando o smbolo "#" no atributo do
link. O smbolo "#" informa ao navegador para ficar na mesma pgina
que est. O smbolo "#" deve ser seguido pelo valor atribuido a id
para onde o link vai. Por exemplo:Link para o cabealho 1 Tudo fica
claro com um exemplo:Exemplo 5: Link para cabealho 1 Link para
cabealho 2 Cabealho 1 Texto texto texto texto Cabealho 2 Texto
texto texto texto Ser renderizado no navegador assim (clique nos
dois links):Link para cabealho 1Link para cabealho 2Cabealho 1Texto
texto texto textoCabealho 2Texto texto texto texto(Nota: O nome de
um atributo id deve comear com uma letra)Posso criar link para mais
alguma coisa?Voc pode criar link para um endereo de e-mail. Isto
feito de modo semelhante aos links para documentos.Exemplo 6:Enviar
e-mail para nobody em HTML.net Ser renderizado no navegador
assim:Enviar e-mail para nobody em HTML.netA nica diferena que no
lugar do endereo do documento voc escrevemailto:seguido pelo
endereo de e-mail. Quando o link clicado o programa de e-mail padro
do usurio aberto com o endereo do link j digitado na linha para
destinatrio. Mas, ateno, isto s ir funcionar se o usurio tiver um
programa de e-mail instalado na sua mquina. Faa uma experincia com
este tipo de link clicando no exemplo acima.Existem outros
atributos que eu deva conhecer?Par criar links voc sempre usa o
atributohref. Adicionalmente voc pode usar umtitle (ttulo)para seu
link:Exemplo 7:HTML.net Ser renderizado no navegador
assim:HTML.netO atributo title usado para fornecer uma breve
descrio do link. Se voc - sem clicar no link - colocar o cursor do
mouse sobre o link, vai aparecer o texto "Visite o site HTML.net e
aprenda HTML".Lio 9: ImagensO que voc acha de poder adicionar uma
imagem do Tim Bernes-Lee o inventor doHTMLno centro da sua
pgina?Ops, isto soa como um desafio...Talvez, mas muito fcil de
fazer. Tudo o que voc precisa da nossa j conhecida tag:Exemplo 1:
Ser renderizado no navegador assim:O que voc tem a fazer dizer ao
navegador que quer inserir uma imagem (img) e depois informar onde
a imagem esta localizada (src, abreviatura para "source" - local de
armazenagem ).Notar que a tag imagem do tipo comando isolado, isto
, uma s tag de abertuta e fechamento. Semelhante a tag
que no precisa de um texto inserido nela."tim.jpg" o nome do
arquivo da imagem que voc quer inserir na pgina. ".jpg" a extenso
do tipo de imagem. Tal como a extenso ".htm" para arquivos de
documentosHTML, ".jpg" informa ao navegador que o arquivo uma
imagem. So trs os tipos de imagens que voc pode inserir na sua
pgina: GIF (Graphics Interchange Format) JPG / JPEG (Joint
Photographic Experts Group) PNG (Portable Network Graphics)Em geral
imagens GIF so melhores para grficos e desenhos e imagens JPEG so
melhores para fotografia. Existem duas razes para isto: primeiro,
imagens GIF so constituidas por 256 cores, e imagens JPEG por
milhes de cores, segundo, imagens GIF so melhores otimizadas para
imagens simples ao passo que imagens JPEG so melhores otimizadas
para imagens complexas. Quanto melhor a compresso tanto menor o
tamanho do arquivo e tanto mais rpido a pgina carregada no
navegador. Como voc deve saber por experincia prpria, pginas
desnecessariamente "pesadas" para carregar so frustantes para o
usurio.Tradicionalmente os formatos GIF e JPEG tem sido os mais
empregados, mas ultimamente o formato PNG tem se tornado cada vez
mais popular (notadamente em detrimento do formato GIF).O formato
PNG em vrios aspectos melhor que os formatos JPEG e GIF: milhes de
cores e efetiva compresso.Onde consigo minhas imagens?Para criar
suas prprias imagens voc precisa de um programa de edio de
imagens.Um programa de edio de imagens a ferramenta essencial para
criao de websites com grande impacto visual.Lamentavelmente, nenhum
editor de imagem vem instalado com o Windows ou qualquer outro
sistema operacional. Assim, voc deve considerar a aquisio do Paint
Shop Pro, do PhotoShop ou do Macromedia Fireworks, que so os trs
melhores editores de imagens atualmente existentes no
mercado.Contudo, como j dissemos, no h necessidade de comprar um
programa caro para acompanhar este tutorial. Por enquanto, voc
poder fazer o download de um exelente editor de imagens
chamadoIrfan Viewque freeware, isto , no custa nada.Ou voc pode
fazer download de imagens existentes na web. Mas, por favor, se
optar por fazer o download de imagens da Internet, cuidado para no
violar direitos autorais de terceiros. A seguir mostro como fazer o
download de uma imagem existente na Internet:1. Clique com o boto
direito do mouse na imagem da Internet.2. No menu que aparece
escolha a opo "Salvar imagem como...".3. Na janela que se abre,
escolha o lugar no seu computador para salvar e clique "Salvar".Faa
isto com a imagem abaixo e salve no seu computador no mesmo local
onde est localizado seus documentosHTML. (Notar que dever ser salvo
o arquivo com formato PNG: logo.png):Agora voc pode inserir a
imagem nos seus documentos. Tente fazer isto em um documento que
voc criou neste tutorial.Isto tudo o que eu preciso saber sobre
imagens?Existem mais algumas coisinhas que voc precisa
saber.Primeiro, voc pode inserir imagens que esto localizadas em
outros diretrios ou at mesmo em outros websites:Exemplo 2: Exemplo
3: Segundo, imagens podem ser links:Exemplo 4: Ser renderizado no
navegador assim: (clique na imagem):Existem outros atributos que eu
deva conhecer?Voc sempre ter que usar o atributosrc, que diz ao
navegador onde a imagem est localizada. Alm dele existem alguns
outros atributos que podem ser bastante teis quando voc insere
imagens em uma pgina.O atributoalt usado para fornecer uma descrio
textual alternativa da imagem caso por alguma razo a imagem no seja
renderizada para o usurio. Isto particularmente importante para
usurios com restries visuais ou quando a imagem carregada muito
lentamente. Em conseqncia, sempre use o atributoalt:Exemplo 5:
Alguns navegadores mostram uma caixa pop-up com o contedo do
atributoaltquando o usurio passa o mouse sobre a imagem. Tenha em
mente que a finalidade principal do atributoalt a de fornecer uma
alternativa textual para imagem. O atributoaltno deve ser usado
para criar mensagens pop-up uma vez que os leitores de tela passaro
uma mensagem que no descreve a imagem para os usurios com restries
visuais.O atributotitlepode ser usado para fornecer uma curta
descrio da imagem:Exemplo 6: Ser renderizado no navegador
assim:Coloque o ponteiro do mouse sobre a imagem, sem clicar e
aparecer uma caixa pop-up com o texto "Aprenda HTML no site
HTML.net" .Dois outros atributos importantes sowidtheheight:Exemplo
7: Ser renderizado no navegador assim:Os atributoswidtheheightpodem
ser usados para definir respectivamente, a largura e a altura da
imagem. O valor adotado para medidas o pixel. Pixel a unidade de
medida usada para medir a resoluo da tela. (As resolues de tela
mais comuns so de 800x600 e 1024x768 pixels). Ao contrrio de
centmetros, pixel uma inidade de medida relativa que depende da
resoluo da tela. Usurios com grande resoluo de tela tero 25 pixels
em 1 centmetro de tela enquanto aqueles com baixa resoluo de tela
tero os mesmos 25 pixels em 1,5 cm de tela.Se no forem definidos os
valores para width eheight, a imagem ser inserida com seu tamanho
real. Com width e height voc pode alterar o tamanho da
imagem:Exemplo 8: Ser renderizado no navegador assim:Contudo, o
tempo de descarga da imagem ser sempre aquele requerido como se ela
tivesse suas dimenses reais, mesmo que voc diminua seu tamanho com
uso destes atributos. Assim,voc no deve diminuir o tamanho das
imagens com o uso dos atributos width e height. Se voc precisa
diminuir a imagem diminua suas dimenses reais em um editor de
imagem para tornar suas pginas mais leves e mais rpidas.Dito isto,
acrescentamos que sempre uma boa idia definir os atributos width e
height para imagens, pois assim fazendo o navegador reservar o
espao para descarga da imagem previamente. Isto acaba por permitir
ao navegador, saber com antecedncia (antes de descarregar as
imagens) como ser o layout da pgina.Por enquanto isto tudo sobre o
Tim Berners-Lee e sobre imagens.Lio 10: TabelasTabelas so usadas
para apresentar "dados tabulares", isto , informao que deva ser
apresentada em linhas e colunas, de forma lgica. difcil?Criar
tabelas emHTMLpode parecer complicado, mas se voc ficar frio e
acompanhar passo a passo a explicao, ver que tudo evidente - tal
como acontece com tudo noHTML.Exemplo 1: Clula 1 Clula 2 Clula 3
Clula 4 Ser renderizado no navegador assim:Clula 1Clula 2Clula
3Clula 4Qual a diferena entree?Como voc deve ter visto no exemplo
acima, este foi o cdigoHTMLmais complicado que escrevemos at agora.
Vamos analisar isto por partes e explicar as diferentes tags:3 tags
bsicas so usadas para inserir tabelas: comea e termina uma tabela.
Evidente. significa "tablerow" - linha de tabela - comea e termina
e uma linha horizontal da tabela. Tambm evidente. significa
"tabledata" - dados da tabela. comea e termina cada clula contida
nas linhas da tabela. Tudo simples e evidente.Eis o acontece no
Exemplo 1: a tabela comea com, segue-se uma, que indica o incio de
uma nova linha. Duas clulas so ento inseridas na linha:Clula
1eClula 2. A linha termina come uma nova linhacomea imediatamente a
seguir. A nova linha tambm contm duas clulas. A tabela termina
com.Para esclarecer:linhas so horizontais e colunas so verticais,
ambas contendo clulas:Clula 1Clula 2Clula 3Clula 4Clula 1 e Clula 2
formam uma linha. Clula 1 e Clula 3 formam uma coluna.No exemplo
acima a tabela tem duas linhas e duas colunas. Uma tabela pode
conter um nmero ilimitado de linhas e colunas.Exemplo 2: Clula 1
Clula 2 Clula 3 Clula 4 Clula 5 Clula 6 Clula 7 Clula 8 Clula 9
Clula 10 Clula 11 Clula 12 Ser renderizado no navegador assim:Clula
1Clula 2Clula 3Clula 4Clula 5Clula 6Clula 7Clula 8Clula 9Clula
10Clula 11Clula 12Existem atributos?Claro! existem atributos. Por
exemplo, o atributo border que usado para definir a espessura de
uma borda em volta da tabela:Exemplo 3: Clula 1 Clula 2 Clula 3
Clula 4 Ser renderizado no navegador assim:Clula 1Clula 2Clula
3Clula 4A espessura da borda especificada em pixels (Ver lio 9)Tal
como fizemos com as imagens, podemos definir width - largura - em
pixels, para uma tabela - ou alternativamente em percentagem da
tela:Exemplo 4: Este exemplo renderiza no navegador uma tabela com
largura igual a 30% da largura da tela. Tente voc mesmo.Mais
atributos?Existe uma grande quantidade de atributos para tabelas. A
seguir mais dois: align: define o alinhamento horizontal do contedo
da tabela, de uma linha ou de uma clula. Por exemplo, left, center
ou right ( esquerda, no centro ou direita). valign: define o
alinhamento vertical do contedo de uma clula. Por exemplo, top,
middle ou bottom (em cima, no meio ou em baixo).Exemplo 5:Clula 1 O
que posso inserir em tabelas?Teoricamente voc pode inserir qualquer
coisa em uma tabela: texto, links e imagens...MAS, tabelas
destinam-se a apresentar dados tabulares(isto , dados que por sua
natureza devam ser apresentados em linhas e colunas) ento
abstenha-se de colocar coisas dentro de tabela simplesmente porque
voc deseja que elas estejam prximas umas s outras.Nos primrdios da
Internet - isto , h poucos anos atrs - tabelas eram usadas como
ferramenta para construir layout. Se voc quer controlar a
apresentao de textos e imagens, existe uma maneira bem mais
racional (dica:CSS). Adiante veremos isto.Agora, coloque em prtica
tudo que voc aprendeu e crie vrias tabelas de diferentes tamanhos,
usando diferentes atributos e contedos. Isto ir ocupar voc por
horas.Lio 11: Mais tabelasO ttulo "Mais tabelas" pode sugerir uma
lio enfadonha. Mas, veja as coisas pelo lado positivo, depois que
voc se tornar um mestre em tabelas nada mais doHTMLpoder
desafi-lo.O que mais existe?Os dois atributoscolspanerowspanso
usados para criar tabelas singulares.Colspan a abreviao para
"column span".Colspan usada na tagpara indicar quantas colunas
estaro contidas em uma clula.Exemplo 1: Clula 1 Clula 2 Clula 3
Clula 4 Ser renderizado no navegador assim:Clula 1Clula 2Clula
3Clula 4Definindocolspanem "3", a clula na primeira linha conter
trs colunas. Se voc definircolspanem "2", a clula conter duas
colunas e assim ser necessrio inserir mais uma clula na primeira
linha para que tenhamos na primeira linha as colunas em acordo com
as da segunda linha.Exemplo 2: Clula 1 Clula 2 Clula 3 Clula 4
Clula 5 Ser renderizado no navegador assim:Clula 1Clula 2Clula
3Clula 4Clula 5Que tal rowspan?Como voc j deve ter
concluido,rowspanespecifica quantas linhas estaro contidas em uma
clula:Exemplo 3: Clula 1 Clula 2 Clula 3 Clula 4 Ser renderizado no
navegador assim:Clula 1Clula 2Clula 3Clula 4No exemplo acimarowspan
definido em "3" na Clula 1. Isto especifica que uma clula deve
conter 3 linhas. Clula 1 e Clula 2 esto na mesma linha, enquanto
Clula 3 e Clula 4 formam duas linhas independentes.Confuso? Bem,
isto na verdade no descomplicado e voc pode se perder. Assim,
sempre uma boa idia, desenhar a tabela em uma folha de papel antes
de comear a codificaoHTML.No est confuso? Ento v em frente e crie
algumas tabela com uso decolspanerowspan.Lio 12: Layout (CSS)No
seria timo se voc pudesse dar sua pgina o layout que ela
merece?Claro! mas como fao isto?Para o layout da sua pgina use
Cascading Style Sheets (CSS) - Folhas de Estilo em Cascata. Nesta
lio voc ter uma breve introduo sCSS. Depois voc poder aprender CSS
desde o incio nonosso tutorial CSS. Assim, considere esta lio
apenas um aperitivo.CSS a melhor metade doHTML. Codificando, no h
melhor parceria:HTML responsvel pelo trabalho pesado (a estrutura),
enquantoCSSd o toque de elegncia (layout).Como mostrado naLio 7,CSS
pode ser adicionado com uso do atributo style. Por exemplo, voc
pode definir o tipo e o tamanho da fonte em um pargrafo:Exemplo
1:Este pargrafo em tamanho de fonte igual a 20pxEste pargrafo em
fonte CourierEste pargrafo em fonte Courier e tamanho 20px Ser
renderizado no navegador assim:Este pargrafo em tamanho de fonte
igual a 20pxEste pargrafo em fonte CourierEste pargrafo em fonte
Courier e tamanho 20pxNo exemplo acima usamos o atributostylepara
definir o tipo de fonte usado (com a propriedadefont-family) e o
tamanho da fonte (com a propriedadefont-size). Notar que no ltimo
pargrafo do exemplo definimos tanto o tipo como o tamanho da fonte
separados por um ponto e vrgula.Est parecendo que h uma grande
quantidade de trabalho a executarUma das funcionalidades mais
inteligentes das CSS a possibilidade de controlar o layout de um
arquivo central. Em lugar de se usar o atributostyleem cada tag,
voc pode dizer ao navegador como deve ser o layout de todos os
textos em uma pgina:Exemplo 2: Minha primeira pgina CSS h1
{font-size: 30px; font-family: arial} h2 {font-size: 15px;
font-family: courier} p {font-size: 8px; font-family: times new
roman} Minha primeira pgina CSS Bem vindo minha primeira pgina CSS
Aqui voc ver como funciona CSS Ver exemploNo exemplo acimainserimos
as CSS na seo head do documento, assim ela se aplica pginainteira.
Para fazer isto use a tagque informa ao navegador que voc est
digitando CSS.No exemplo, todos os cabealhos da pgina sero em fonte
Arial e tamanho 30px. Todos os subttulos sero em fonte Courier
tamanho 15. E, todos os textos dos pargrafos sero em fonte Times
New Roman tamanho 8.Uma outra opo a de digitar as CSS em um
documento separado.Com as CSS em um documento separado voc pode
gerenciar o layout de muitas pginas ao mesmo tempo.Muito
inteligente, pois voc pode mudar de uma s vez, o tipo ou o tamanho
da fonte de todo o site, quer ele tenha centenas ou milhares de
pginas. Ns no nos aprofundaremos em CSS agora, mas voc pode
aprender tudo, no futuro, em nosso tutorial CSS.O que mais posso
fazer com CSS?CSS faz muito mais do que definir tipos e tamanhos de
fontes. Por exemplo, voc pode adicionar cores e fundos. A seguir
alguns exemplos para voc praticar:Texto verde Cabealho com fundo
azul Tente inserir estes cdigos em algumas das suas pginas -
experimente as duas formas de inserir, tanto como mostrado acima
como colocando as CSS na seo head do documento.CSS no nada mais do
que cores e tipos de fontes?Alm de cores, tipos de fontes, etc.,CSS
pode ser usado para controlar a configurao e a apresentao da
pgina(margens, flutuaes, alinhamentos, larguras, alturas, etc.)
Controlando os diferentes elementos com CSS voc ser capaz de criar
layouts elegantes e precisos.Exemplo 3:Eu amo CSS Ser renderizado
no navegador assim:Eu amo CSSCom a propriedadefloatum elemento
poder "flutuar" esquerda ou direita. O exemplo seguinte ilustra
este princpio:Exemplo 4: Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
doloremagna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat... Ser renderizado no navegador
assim:Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo
consequat...No exemplo mostrado, um elemento (a imagem) flutua
esquerda e o outro elemento (o texto) preenche o espao deixado
direita.Com a propriedadeposition, voc pode posicionar um elemento
em qualquer lugar da pgina, com preciso:Exemplo 5: Ver exemploNo
exemplo mostrado a imagem foi posicionada a 50 pixels da borda
inferior e a 10 pixels da borda direita do navegador. Voc pode
colocar em qualquer lugar na pgina. Tente voc mesmo. Fcil e legal,
eh?Legal sim. Mas, fcil?Voc no aprende CSS em 10 minutos. E como
foi dito acima, nesta lio voc teve apenas uma breve introduo s CSS.
No futuro aprenda mais no nossoTutorial CSS.Por enquanto
concentre-se no HTML, e passe para a prxima lio onde voc aprender
como publicar seu website na Internet para que o mundo todo o
veja!Lio 13: Uploading pginasAt agora somente voc conseguiu
visualizar suas pginas. Chegou a hora de mostr-las para o mundo
todo.O mundo est preparado para ver suas pginas?O mundo est
preparado sim - voc, em breve, estar tambm.Para publicar seu
trabalho na Internet, voc precisa somente de espao em um servidor e
um programa FTP gratuito.Se voc costuma acessar a Internet j deve
ter visto que existem vrios servios gratutitos de hospedagem de
sites. Seu endereo no servidor ser alguma coisa parecida com
http://home.servidor.com/~nomedousuario. Voc tem que ativar o
servio. Informe-se como fazer isto na documentao fornecida pelo
servio de hospedagem.Outra opo obter um espao gratuito de um
servidor na Internet. Isto igual a registrar uma conta de e-mail
(como por exemplo, obter um endereo de e-mail do hotmail)voc pode
registrar-se gratuitamente para obter um espao em um servidor na
Internet. Existem vrias companhias que oferecem este servio
gratuito - entre elas a000webhost.com(clique em "Order" e escolha
membro gratuito - ou faa uma busca no Google para encontrar um
servio gratuito com registro em portugus) - isto um processo bem
rpido.Para acessar o servidor voc precisa conhecer o "Nome do seu
servidor" (Por exemplo, ftp.htmlnet.site50.net) e ter um nome de
usurio e senha.Isto tudo que eu preciso?Para acessar o servidor e
publicar as pginas voc precisa de um programa FTP. Voc no deve ter
um programa destes ainda, mas existem vrios deles na Internet para
download e so gratuitos.Existem muitos programas FTP. Um dos
melhores o FileZilla, e gratuito. Voc pode obter o FileZilla
emfilezilla.sourceforge.net.Como eu fao o upload das pginas?Abaixo
fornecemos um exemplo de como fazer isto usando o servidor
000webhost.com e o programa FileZilla. Este procedimento mais ou
menos igual para qualquer programa FTP.Conecte-se Internet e abra o
programa FTP. Insira "Host Name" ("ftp.htmlnet.site50.net" no
"Address"), nome do usurio (em "User") e senha (em "Password")
clique "Connect". Voc agora tem acesso ao servidor. Em um lado da
janela do programa voc ver os diretrios e arquivos do seu
computador ("Local Site"), e no outro o do servidor ("Remote
Site"):Ache os seus documentos HTML e imagens a serem publicadas
(no "Local site") e transfira para o servidor ("Remote site")
simplesmente dando um clique duplo nos arquivos. Agora o mundo todo
poder ver seu site! (Por exemplo, no endereo
http://htmlnet.site50.netpagina1.htm).D a uma das pginas o nome de
"index.htm" (ou "index.html") e ela ser automaticamente a pgina de
entrada no site, ou seja, basta digitar http://htmlnet.site50.net
(sem qualquer nome de arquivo) e abrir
http://htmlnet.site50.net/index.htm.Para mais adiante ser uma boa
idia comprar um domnio (espao no servidor) s para
voc(www.seu-nome.com) e assim ter um nome do site bem mais curto e
fcil de guardar que aqueles fornecidos por um servio gratuito da
Internet. Voc pode encontrar na Internet vrias firmas que vendem
domnio. Faa uma busca do Google.Lio 14: Web standards e
validaoNesta lio voc aprender mais alguns conceitos tericos
doHTML.O que mais h para conhecer sobreHTML?HTMLpode ser escrito de
vrias maneiras. O navegador est apto a lerHTMLescrito de vrias
maneiras. Podemos dizer queHTMLtem muitos dialetos. Esta a razo
porqu alguns websites so apresentados de formas diversas em
diferentes navegadores.Desde o aparecimento da Internet tem sido
feitas vrias tentativas para se normatizar o HTML notadamente
atravs doWorld Wide Web Consortium (W3C)fundado por Tim Berners-Lee
(yep! o grande sujeito que inventou o HTML). Mas, este tem sido um
rduo e longo caminho.No passado - quando voc tinha que comprar um
navegador - Netscape dominava o mercado de navegadores. quela poca
as normas para oHTMLestavam nas suas verses 2.0 e 3.2. Mas pelo
fato de dominar 90% do mercado a Netscape no teria - e no teve -
que se preocupar muito com normas. Pelo contrrio, a Netscape
inventava seus prprios elementos de marcao que no funcionavam em
outros navegadores.Por muitos anos a Microsoft ignorou
completamente a Internet. Em determinado momento, resolveu competir
com a Netscape e lanou seu navegador prprio. A primeira verso do
navegador da Microsoft's, o Internet Explorer, no era melhor do que
o Netscape no suporte s normas doHTML. Mas, a Microsoft resolveu
distribuir seu navegador gratuitamente (isto sempre agrada a todos)
e o Internet Explorer em pouco tempo tornou-se o navegador mais
usado e mais popular.A partir das verses 4 e 5 a Microsoft
anunciava que seus navegadores ofereciam cada vez maior suporte s
normasHTML doW3C. A Netscape no se movimentou para atualizar seu
navegador e continuou a colocar no mercado a velha e desatualizada
verso 4.O que vem a seguir histria. Nos dias atuais as
normasHTMLesto na sua verso 4.01 e noXHTML. Hoje em dia o Internet
Explorer que detm quase 90% do mercado. O Internet Explorer ainda
tem seus elementos prprios, mas oferece suporte para as
normasHTMLdoW3C. Os navegadores Mozilla, Opera e Netscape tambm
suportam as normas.Ento, quando voc codifica HTML de acordo com as
normas do W3C, voc est construindo um website para ser visualizado
em todos os navegadores- no s agora mas tambm no futuro. E
felizmente,tudo o que voc aprendeu neste tutorial est de acordo com
a mais nova verso doHTML,que o XHTML.Legal! Posso anunciar?Devido a
existncia de diferentes tipos deHTML,voc precisa informar ao
navegador qual o "dialeto" do HTML e no seu caso voc aprendeuXHTML.
Para informar ao navegador, voc usa o Document Type Definition. O
Document Type Definition deve ser escritosempreno topo do
documento:Exemplo 1: Ttulo texto texto Alm do Document Type
Definition (escrito na primeira linha no exemplo acima), que
informa ao navegador que voc est codificandoXHTML, voc precisa
ainda adicionar informao extra na tag html, usando os
atributosxmlnselang.xmlns abreviao de "XML-Name-Space" e deve ter
sempre o valorhttp://www.w3.org/1999/xhtml. Isto tudo o que voc
precisa saber. Se voc tem o hbito ou gosta de se aprofundar e
conhecer coisas complicadas poder ler mais sobre namespaces nosite
do W3C.No atributolangvoc especfica em que lngua (aqui trata-se de
linguagem humana) o documento escrito. As abreviaturas para as
lnguas existentes no mundo todo, esto nasISO 639 standard. No
exemplo acima a lngua definida no atributo o portugus do Brasil
("pt-br").UmaDTDinformar ao navegador como deve ser lido e
renderizado oHTML. Use o exemplo mostrado, como um template para
todos os seus futuros documentosHTML.ODTD importaante ainda, para a
validao da pgina.Validao? Porqu deveria eu fazer isto?Insira
oDTDnas suas pginas e poder verificar erros no seuHTML,usando
ovalidador gratuito do W3C.Para testar o validador faa o seguinte:
crie uma pgina e publique na Internet. A seguir entre
emvalidator.w3.orge l digite o endereo (a URL) da sua pgina, depois
clique no boto validar. Se seuHTMLestiver correto, vai aparecer uma
mensagem de congratulaes. Se no, ser apresentada uma lista de
erros, informando o qu est errado e onde. Cometa alguns erros
propositais no seu cdigo para verificar o que acontece.O validador
no til somente no encontro de erros. Alguns navegadores tentam
interpretar os erros cometidos pelos desenvolvedores e consertar o
cdigo mostrando a pgina corretamente. Em navegadores assim voc
nunca encontrar erros no prprio navegador. J outros navegadores no
aceitam o erro e apresentam a pgina arruinada ou mesmo nem
apresentam. O validador ento ajuda voc a encontrar erros que voc no
tenha nem idia de que existiamSempre valide suas pginas, para ter
certeza que elas sero mostradas corretamente em todos os
navegadores.Lio 15: Dicas finaisCongratulaes, voc chegou na ltima
lio.Ento, agora eu j sei tudo?Voc aprendeu um bocado de coisas e j
est em condies de construir seu website. No entanto o que voc
aprendeu o bsico e ainda h muita coisa a ser aperfeioada. Podemos
dizer que voc construiu uma base slida para continuar e se
aprofundar no assunto.Nesta ltima lio, daremos umas dicas finais:
Para comear, aconselhamos a escrever seus documentosHTMLde forma
ordenada e estruturada. Assim fazendo voc estar no s mostrando aos
outros que possui uma base slida de conhecimento mas tambm estar
facilitando a leitura, interpretao e manuteno do cdigo. Siga as
normas e valide seu cdigo. Mas, no faa disto uma fonte de stress.
Escreva umXHTMLclaro, use oDTDe valide suas pginas
novalidator.w3c.org. Coloque contedos nas suas pginas. Lembre-se
que HTML apenas a ferramenta que possibilita apresentar informao na
Internet, assim necessrio que haja a informao a ser apresentada ou
seja, o contedo. Pginas lindas e bem desenhadas so timas, mas as
pessoas buscam informao na Internet. Evite encher suas pginas com
imagens pesadas e outros "balangandans" que voc encontra na
Internet. Isto faz com suas pginas demorem a carregar e frustante
para o usurio. Pginas que demoram mais de 20 segundos para carregar
podem perder at 50% dos seus visitantes. Lembre-se de cadastrar seu
site nos sites de busca, de modo a que outras pessoas, alm da sua
famlia, possam encontr-las e visit-las. Na pgina de entrada dos
sites para cadastro em mecanismos de busca voc encontrar um link
para adicionar seu site (O mais importante oGooglemas, existem
outros tais como,DMOZ,Yahoo,AltaVista,AlltheWebeLycos). Neste
tutorial voc aprendeu a usar o Notepad, que um simples e fcil
editor de textos, contudo talvez voc agora possa pensar em usar um
editor mais sofisticado com mais possibilidades e ferramentas. Voc
encontra uma listagem e sumrio de diferentes editores
emDownload.com.Como eu aprendo mais?Antes de mais nada muito
importante que voc continue a trabalhar e experimentar com tudo que
voc aprendeu neste tutorial. Quando encontrar algum site que
contenha uma coisa que voc ache interessante, estude o cdigo do
site. No seu navegador v ao menu "View" - "Ver" e escolha "Source"
- "Cdigo Fonte" para ver o cdigo do site.Procure na Internet por
artigos e tutoriaisHTML. Existem muitos sites com timos contedos
sobreHTML.Leia e faa perguntas nosFruns. L voc encontra experts com
os quais aprender muitoE para terminar - assim que voc se achar
pronto - continue e aprenda CSS no nossoTutorial CSS.S nos resta
desejar a voc que passe horas agradveis ao lado do seu novo amigo,
oHTML.Vejo voc na Internet :-)