Académique Documents
Professionnel Documents
Culture Documents
net
http://www.pt-br.html.net/tutorials/html/introduction.asp
HTML.net
Tutoriais HTML e CSS - Construa seu website
Introduo
As 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.
O tutorial no ensina tudo. Assim necessrio que voc se empenhe, pratique e consolide os ensinamento aqui
contidos. Mas, no se aborrea - aprender como construir um website divertido e bastante satisfatrio quando
voc trilha o caminho certo de aprendizado.
Como tirar o melhor proveito do tutotial uma deciso sua. Ns sugerimos que voc estude somente duas ou
trs lies por dia e pratique bastante tudo o que voc aprender em cada lio.
OK. Chega de conversa. Vamos comear!
Ver tambm
Prxima lio : Vamos comear
1 de 1
http://www.pt-br.html.net/tutorials/html/lesson1.asp
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.
1 de 1
http://www.pt-br.html.net/tutorials/html/lesson2.asp
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 Berners-Lee. 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.
1 de 1
http://www.pt-br.html.net/tutorials/html/lesson3.asp
"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.
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>
Vai ser apresentado no navegador, como mostrado a seguir:
Este um ttulo
Este um subttulo
1 de 1
http://www.pt-br.html.net/tutorials/html/lesson4.asp
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):
1 de 3
http://www.pt-br.html.net/tutorials/html/lesson4.asp
<html>
<head>
</head>
<body>
</body>
</html>
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 documento HTML. 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.
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:
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>
2 de 3
http://www.pt-br.html.net/tutorials/html/lesson4.asp
</html>
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.
3 de 3
http://www.pt-br.html.net/tutorials/html/lesson5.asp
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Coloque sempre o ttulo do seu documento na seo head: <title>Ttulo da sua pgina</title>. 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:
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.
1 de 2
http://www.pt-br.html.net/tutorials/html/lesson5.asp
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.
2 de 2
http://www.pt-br.html.net/tutorials/html/lesson6.asp
<html>
<head>
<title>Meu website</title>
</head>
<body>
<h1>Um cabealho</h1>
<p>texto, texto texto, texto</p>
<h2>Subttulo</h2>
<p>texto, texto texto, texto</p>
</body>
</html>
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:
1 de 3
http://www.pt-br.html.net/tutorials/html/lesson6.asp
E no assim:
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:
<hr />
Exemplo 6:
<ul>
<li>Um item de lista</li>
<li>Outro item de lista</li>
</ul>
2 de 3
http://www.pt-br.html.net/tutorials/html/lesson6.asp
Um item de lista
Outro item de lista
Exemplo 7:
<ol>
<li>Primeiro item da lista</li>
<li>Segundo item da lista</li>
</ol>
<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>
3 de 3
http://www.pt-br.html.net/tutorials/html/lesson7.asp
Lio 7: 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:
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.
1 de 2
http://www.pt-br.html.net/tutorials/html/lesson7.asp
exemplo <p>), ou por um elemento e um ou mais atributos (por exemplo <p style="background-color:#ff0000;">). Simples!
2 de 2
http://www.pt-br.html.net/tutorials/html/lesson8.asp
Lio 8: Links
Nesta lio voc aprender como construir links entre pginas.
Se a pagina2 for colocada em um subdiretrio (chamado de "subdiretorio"), o link como mostrado abaixo:
Exemplo 3:
Por outro lado, um link da pagina2 no "subdiretorio" para a pagina1 como mostrado a seguir:
Exemplo 4:
"../" 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).
1 de 3
http://www.pt-br.html.net/tutorials/html/lesson8.asp
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:
<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
2 de 3
http://www.pt-br.html.net/tutorials/html/lesson8.asp
A nica diferena que no lugar do endereo do documento voc escreve mailto: 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.
O 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".
3 de 3
http://www.pt-br.html.net/tutorials/html/lesson9.asp
Lio 9: 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:
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.
1 de 4
http://www.pt-br.html.net/tutorials/html/lesson9.asp
Agora voc pode inserir a imagem nos seus documentos. Tente fazer isto em um documento que voc criou
neste tutorial.
<img src="images/logo.png">
Exemplo 3:
<img src="http://www.html.net/logo.png">
<a href="http://www.html.net">
<img src="logo.png"></a>
2 de 4
http://www.pt-br.html.net/tutorials/html/lesson9.asp
existem alguns outros atributos que podem ser bastante teis quando voc insere imagens em uma pgina.
O atributo alt 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 atributo alt:
Exemplo 5:
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:
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:
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:
3 de 4
http://www.pt-br.html.net/tutorials/html/lesson9.asp
Exemplo 8:
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.
4 de 4
http://www.pt-br.html.net/tutorials/html/lesson10.asp
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
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>
1 de 3
<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>
http://www.pt-br.html.net/tutorials/html/lesson10.asp
1</td>
2</td>
3</td>
4</td>
5</td>
6</td>
7</td>
8</td>
9</td>
10</td>
11</td>
12</td>
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
2 de 3
http://www.pt-br.html.net/tutorials/html/lesson10.asp
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:
3 de 3
http://www.pt-br.html.net/tutorials/html/lesson11.asp
<table border="1">
<tr>
<td colspan="3">Clula 1</td>
</tr>
<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 2
<table border="1">
1 de 2
http://www.pt-br.html.net/tutorials/html/lesson11.asp
<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.
2 de 2
http://www.pt-br.html.net/tutorials/html/lesson12.asp
No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade font-family) e o tamanho
da fonte (com a propriedade font-size). Notar que no ltimo pargrafo do exemplo definimos tanto o tipo como o tamanho
da fonte separados por um ponto e vrgula.
<html>
<head>
<title>Minha primeira pgina CSS</title>
<style type="text/css">
h1 {font-size: 30px; font-family: arial}
h2 {font-size: 15px; font-family: courier}
p {font-size: 8px; font-family: times new roman}
</style>
</head>
<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.
1 de 3
http://www.pt-br.html.net/tutorials/html/lesson12.asp
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
Com a propriedade float um elemento poder "flutuar" esquerda ou direita. O exemplo seguinte ilustra este princpio:
Exemplo 4:
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:
2 de 3
http://www.pt-br.html.net/tutorials/html/lesson12.asp
Ver exemplo
No 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?
3 de 3
http://www.pt-br.html.net/tutorials/html/lesson13.asp
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://www.angelfire.com/folk/htmlnet/pagina1.htm).
D a uma das pginas o nome de "index.htm" (ou "index.html") e ela ser automaticamente a pgina de
1 de 2
http://www.pt-br.html.net/tutorials/html/lesson13.asp
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://www.angelfire.com/folk/htmlnet (sem qualquer nome de arquivo) e
abrir http://www.angelfire.com/folk/htmlnet/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.
2 de 2
http://www.pt-br.html.net/tutorials/html/lesson14.asp
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.
1 de 2
http://www.pt-br.html.net/tutorials/html/lesson14.asp
Sempre valide suas pginas, para ter certeza que elas sero mostradas corretamente em todos os navegadores.
2 de 2
http://www.pt-br.html.net/tutorials/html/lesson15.asp
Procure na Internet por artigos e tutoriais HTML. Existem muitos sites com timos contedos sobre HTML.
Leia e faa perguntas em listas de discusso e fruns na Internet. Um timo lugar o frum XHTML do iMasters
onde voc sempre encontra algum disposto a ajudar.
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 :-)
1 de 1