O que HTML?
HTML a "lngua me" do seu navegador.
Resumindo uma longa histria, HTML foi 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 BernersLee. Ao inventar o HTML ele 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 do HTML. 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 cdigo HTML pode parecer complicado, mas este tutorial ir
tornar as coisas claras para voc.
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.
Com HTML as 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-up significa marcao e o texto que voc escreve. Voc cria a marcao
da mesma forma que escreve em um editor seus cabealhos, marcadores, negrito,
etc
Language significa linguagem e exatamente o que HTML ; uma linguagem. A
linguagem HTML usa muitas palavras do ingls.
"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 "<" e acabam com
um sinal de maior ">".
Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags
de fechamento: </comando>. 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 no HTML a 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 <br />.
HTML tag - e nada mais do que tags. Aprender HTML aprender como usar as
diferentes tags.
Exemplo 1:
<b>Este texto deve ser em negrito.</b>
As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> informam ao navegador que trata-se de um
cabealho (h vem de "heading" - cabealho ), sendo <h1> o cabealho de primeiro nvel e
aquele apresentado com o maior tamanho de texto, <h2> o cabealho de segundo nvel e
aquele apresentado com tamanho de texto um pouco menor e <h6> o cabealho de sexto
nvel e aquele apresentado com o menor tamanho de texto.
Exemplo 2:
<h1>Este um ttulo</h1>
<h2>Este um sub ttulo</h2>
Este um ttulo
Este um subttulo
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):
Notar como estruturamos o cdigo em linhas diferentes (usar a tecla Enter para pular
para prxima linha) e tambm a indentao (recuos) do cdigo (usar a tecla Tab para
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 seu HTML, 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 documentos HTML.
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 <title>:
<title>Minha primeira pgina web</title>
Notar 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:
<p>Hurrah! Esta a minha primeira pgina web.</p>
A letra p na tag <p> a abreviatura para "paragraph" (pargrafo) que exatamente o que
o texto - um texto pargrafo.
Seu documento HTML agora est como mostrado a seguir:
<html>
<head>
<title>Minha primeira pgina web</title>
</head>
<body>
<p>Hurrah! Esta a minha primeira pgina web.</p>
</body>
</html>
Voc dever ver no seu navegador: "Hurrah! Esta a minha primeira pgina web."
Parabns!
</html>
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:
<p> usado para pargraos.</p>
<b>Torna o texto negrito.</b>
<h1>Cabealho</h1>
<h2>Subttulo</h2>
<h3>Sub-subttulo</h3>
Lembre-se, o nico caminho para aprender HTML 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.
Ento mos obra. Comece suas experincias com tudo que voc aprendeu at agora.
E agora?
Agora vamos aprender mais sete tags.
Voc j sabe que pode obter negrito com a tag <b>, agora saiba que pode obter itlico letras inclinadas - com a tag <i>. J percebeu no ?, "i" vem de "italic".
Exemplo 1:
<i>Este texto deve ser itlico.</i>
Exemplo 2:
E no assim:
<b><i>Texto em negrito e itlico.</b></i>
Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a ltima tag
de fechamento </b>, 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 4 existem 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 <br /> que serve para criar uma quebra de linha:
Exemplo 4:
Um texto<br /> e mais texto em nova linha
Um texto
e mais texto em nova linha
Notar que a tag escrita como se fosse uma mistura de tag de abertura e de fechamento
com uma barra "/" no final: <br />. A princpio podemos escrever
tambm <br></br> (sem contedo), mas para que complicar?
Outra tag de comando <hr /> que serve para definir uma linha horizontal ("hr" vem
"horizontal rule" - rgua horizontal ):
Exemplo 5:
<hr />
Exemplo 6:
<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>
Um item de lista
Outro item de lista
Exemplo 7:
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
</ol>
Sim, por enquanto isto tudo. Aconselhamos, novamente, a fazer seus prprios
experimentos, construindo algumas pginas usando as sete tags ensinadas nesta lio:
<i>Itlico</i>
<small>Texto tamanho small</small>
<br /> Pula linha
<hr /> Linha Horizontal
<blockquote>Indentao</blockquote>
<ul>Lista</ul>
<ol>Lista ordenada</ol>
<li>Item de lista</li>
Atributos
Voc pode adicionar atributos s tags.
O que atributo?
Como voc deve estar lembrado, uma tag um comando para o navegador (por
exemplo, <br /> 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:
<h2 style="background-color:#ff0000;">Eu adoro HTML</h2>
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:
<html>
<head>
</head>
<body style="background-color:#ff0000;">
</body>
</html>
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.
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.
Links
Nesta lio voc aprender como construir links entre pginas.
Exemplo 1:
<a href="http://www.html.net/">Aqui um link para HTML.net</a>
Exemplo 2:
<a href="page2.htm">Aqui um link para a pagina 2</a>
Exemplo 3:
<a href="subdiretorio/pagina2.htm">Aqui um link para a pagina 2</a>
Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 como mostrado a
seguir:
Exemplo 4:
<a href="../pagina1.htm">Aqui um link para a pagina 1</a>
"../" 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).
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:
<a href="#heading1">Link para o cabealho 1</a>
Exemplo 5:
<html>
<head>
</head>
<body>
<p><a href="#heading1">Link para cabealho 1</a></p>
<p><a href="#heading2">Link para cabealho 2</a></p>
<h1 id="heading1">Cabealho 1</h1>
<p>Texto texto texto texto</p>
<h1 id="heading2">Cabealho 2</h1>
<p>Texto texto texto texto</p>
</body>
</html>
Cabealho 1
Texto texto texto texto
Cabealho 2
Texto texto texto texto
(Nota: O nome de um atributo id deve comear com uma letra)
Exemplo 6:
<a href="mailto:nobody@html.net">Enviar e-mail para nobody em
HTML.net</a>
Exemplo 7:
<a href="http://www.html.net/" title="Visite HTML.net e aprenda
HTML">HTML.net</a>
Imagens
O que voc acha de poder adicionar uma imagem do Tim Bernes-Lee o inventor
do HTML no centro da sua pgina?
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 <br /> 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
documentos HTML, ".jpg" informa ao navegador que o arquivo uma imagem. So trs os
tipos de imagens que voc pode inserir na sua pgina:
Agora voc pode inserir a imagem nos seus documentos. Tente fazer isto em um
documento que voc criou neste tutorial.
Exemplo 3:
<img src="http://www.html.net/logo.png">
Alguns navegadores mostram uma caixa pop-up com o contedo do atributo alt quando o
usurio passa o mouse sobre a imagem. Tenha em mente que a finalidade principal do
atributo alt a de fornecer uma alternativa textual para imagem. O atributo alt no 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 atributo title pode ser usado para fornecer uma curta descrio da imagem:
Exemplo 6:
<img src="logo.gif" title="Aprenda HTML no site HTML.net">
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 so width e height:
Exemplo 7:
<img src="logo.png" width="141" height="32">
Os atributos width e height podem 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:
<img src="logo.gif" width="32" height="32">
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.
Tabelas
Tabelas so usadas para apresentar "dados tabulares" , isto , informao que deva
ser apresentada em linhas e colunas, de forma lgica.
difcil?
Criar tabelas em HTML pode parecer complicado, mas se voc ficar frio e acompanhar
passo a passo a explicao, ver que tudo evidente - tal como acontece com tudo
no HTML.
Exemplo 1:
<table>
<tr>
<td>Clula
<td>Clula
</tr>
<tr>
<td>Clula
<td>Clula
</tr>
</table>
1</td>
2</td>
3</td>
4</td>
Clula 1
Clula 2
Clula 3
Clula 4
<td> significa "table data" - dados da tabela. comea e termina cada clula contida
Clula 1
Clula 2
Clula 3
Clula 4
Clula 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:
<table>
<tr>
<td>Clula
<td>Clula
<td>Clula
<td>Clula
</tr>
<tr>
<td>Clula
<td>Clula
<td>Clula
<td>Clula
</tr>
<tr>
<td>Clula
<td>Clula
<td>Clula
<td>Clula
</tr>
</table>
1</td>
2</td>
3</td>
4</td>
5</td>
6</td>
7</td>
8</td>
9</td>
10</td>
11</td>
12</td>
Clula 1
Clula 2
Clula 3
Clula 5
Clula 6
Clula 7
Clula 9
Clula 10
Clula 11
Existem atributos?
Claro! existem atributos. Por exemplo, o atributo border que usado para definir a
espessura de uma borda em volta da tabela:
Exemplo 3:
<table border="1">
<tr>
<td>Clula 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
</table>
Clula 1
Clula 2
Clula 3
Clula 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:
Exemplo 5:
<td align="right" valign="top">Clula 1</td>
Mais tabelas
O 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 do HTML poder
desafi-lo.
<tr>
<td>Clula 2</td>
<td>Clula 3</td>
<td>Clula 4</td>
</tr>
</table>
Clula 1
Clula 2
Clula 3
Clula 4
Definindo colspan em "3", a clula na primeira linha conter trs colunas. Se voc
definir colspan em "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:
<table border="1">
<tr>
<td colspan="2">Clula 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
<td>Clula 4</td>
<td>Clula 5</td>
</tr>
</table>
Clula 1
Clula 3
Clula 2
Clula 4
Clula 5
Exemplo 3:
<table border="1">
<tr>
<td rowspan="3">Clula 1</td>
<td>Clula 2</td>
</tr>
<tr>
<td>Clula 3</td>
</tr>
<tr>
<td>Clula 4</td>
</tr>
</table>
Clula 2
Clula 1
Clula 3
Clula 4
No exemplo acima rowspan 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
codificao HTML.
No est confuso? Ento v em frente e crie algumas tabela com uso
de colspan e rowspan.
Layout (CSS)
No seria timo se voc pudesse dar sua pgina o layout que ela merece?
<body>
<h1>Minha primeira pgina CSS</h1>
<h2>Bem vindo minha primeira pgina CSS</h2>
<p>Aqui voc ver como funciona CSS</p>
</body>
</html>
Ver exemplo
No exemplo acima inserimos as CSS na seo head do documento, assim ela se
aplica pgina inteira . Para fazer isto use a tag <style type="text/css"> que
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.
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.
Eu amo CSS
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 propriedade position, voc pode posicionar um elemento em qualquer lugar da
pgina, com preciso:
Exemplo 5:
<img src="bill.jpg" alt="Bill Gates"
style="position:absolute;bottom:50px;right:10px;" />
Ver exemplo
Uploading pginas
At agora somente voc conseguiu visualizar suas pginas. Chegou a hora de mostr-las
para o mundo todo.
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.
Alm do Document Type Definition (escrito na primeira linha no exemplo acima), que
informa ao navegador que voc est codificando XHTML, voc precisa ainda adicionar
informao extra na tag html, usando os atributos xmlns e lang.
xmlns abreviao de "XML-Name-Space" e deve ter sempre o
valor http://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 no site do W3C.
No atributo lang voc especfica em que lngua (aqui trata-se de linguagem humana) o
documento escrito. As abreviaturas para as lnguas existentes no mundo todo, esto
nas ISO 639 standard . No exemplo acima a lngua definida no atributo o portugus do
Brasil ("pt-br").
Uma DTD informar ao navegador como deve ser lido e renderizado o HTML. Use o
exemplo mostrado, como um template para todos os seus futuros documentos HTML.
O DTD importaante ainda, para a validao da pgina.
Dicas finais
Congratulaes, voc chegou na ltima lio.
Procure na Internet por artigos e tutoriais HTML. Existem muitos sites com timos
contedos sobre HTML.
Leia e faa perguntas nos Fruns. L voc encontra experts com os quais aprender muito
E para terminar - assim que voc se achar pronto - continue e aprenda CSS no
nosso Tutorial CSS.
S nos resta desejar a voc que passe horas agradveis ao lado do seu novo amigo,
o HTML.
Vejo voc na Internet :-)