HTML

Por esta altura voc j deve ter reservado o seu domnio e j deve ter encontrado
um servio de hospedagem para o seu site.

Se voc no est muito interessado em aprender HTML para criar as suas pginas,
no se preocupe, muitos servios de hospedagem disponibilizam software de
criao de sites de uso fcil, tornando o processo muito simples. Atravs do prprio
servio de hospedagem poder construir rpidamente um site, com apenas alguns
cliques, sem que seja preciso saber HTML. Verifique se o seu servio de
hospedagem lhe proporciona estas ferramentas ou ento, se ainda no tem
hospedagem, certifique-se que escolhe um servio de hospedagem que inclua
uma ferramenta de criao de pginas web.
Mas, se voc est com vontade de aprender HTML, ainda bem para si! sempre
vantajoso saber HTML, ou pelo menos ter umas bases.
Noes Bsicas
O cdigo HTML composto por TAGS (ou comandos), que so usadas no inicio e
no final do texto que vai ser afectado pelo cdigo.
Uma tag de inicio por exemplo a tag <b> que usada para colocar uma poro de
texto em negrito. A tag de fecho correspondente ser </b> que ser usada no final
desse texto que queremos formatar.
Assim, se quisermos colocar em negrito a palavra "Ol!" na frase abaixo, ento o
cdigo HTML fica:
<b>Ol!</b> O meu nome Ctia.
e o resultado ser:
Ol! O meu nome Ctia.
Pode experimentar voc mesmo os cdigos HTML indicados neste tutorial, e ver
automaticamente o seu resultado, introduzindo-os na pgina "Editor de HTML em
tempo real".
Estrutura Bsica do Cdigo HTML de um Documento

Comece por definir o layout bsico do documento. Pode copiar e colar este cdigo
no Bloco de Notas ou outro editor de texto:
<html>
<head>
<title>Ttulo da sua pgina</title>
<meta name="description" content="Breve descrio da sua pgina">
<meta name="keywords" content="Palavras chave da sua pgina">
</head>
<body>
Nesta rea fica tudo aquilo que se visualiza no navegador da internet,

texto e imagens, juntamente com todos as tags HTML de formatao.
</body>
</html>
As tags <html> e </html> dizem ao navegador de internet aonde comea e aonde
acaba o cdigo HTML.
As tags <title> e </title> dizem ao browser qual o ttulo da pgina. O ttulo pode
ser visto identificando o respectivo separador no seu navegador de internet. O texto
que for definido entre estas tags tambm o texto que usado como ttulo pelos
motores de busca quando apresentam as pginas nos resultados de uma pesquisa.
A tag <meta name="description" ...> informao que pode ser til para os
motores de busca. Eles podem usar o que voc escreveu na descrio para
descrever a pgina quando ela apresentada nos resultados de uma pesquisa. Ou
ento, por vezes, os motores de busca usam tambm uma poro aleatria do que
estiver no <body> da sua pgina.
A tag <meta name="keywords" ...> tambm pode ser usada pelos motores de
busca na indexao da pgina. Coloque as palavras chave separadas por virgulas
no interior desta tag.
Entre as tags <body> e </body> colocado o contedo da pgina, que o que
visualizado no browser.
Aps inserir os cdigos HTML e o contedo pretendido, deve-se guardar o ficheiro
com a extenso ".html". Ou seja, damos-lhe um nome e acrescentamos a extenso
".html". Ficariamos por exemplo com o ficheiro "index.html". Depois disso, para
visualizar a pgina no browser basta clicar sobre o ficheiro.
Voltar ao ndice
Tags Bsicas para Fonte e Texto

Itlico: <i>texto</i>
Sublinhado: <u>texto</u>
Negrito: <b>texto</b>
Texto Riscado: <s>texto</s>
Novo Pargrafo: <p>texto</p>
Esta tag inicia um novo pargrafo introduzindo uma linha em branco entre o novo
pargrafo e o anterior.
Quebra de linha: <br>
Esta tag faz com que o texto que vier a seguir mude para a linha seguinte. Introduzir
esta tag duas vezes seguidas faz o mesmo efeito que a tag de pargrafo.
Centrar: <center>texto</center>
Alinhar texto esquerda: <p align="left">texto</p>
Alinhar texto direita: <p align="right">texto</p>
Mudar cor do texto: <font color="red">texto</font>
Pode tambm utilizar os cdigos HEX para definir as mais variadas cores.
Mudar a fonte: <font face="Arial">texto</font>
Mudar o tamanho: <font size="2">texto</font>
(escolher entre 1 e 7)
Ateno:
Pode-se formatar um texto usando vrias tags em simultneo. Assim, por exemplo
eu posso formatar um texto em negrito, itlico e sublinhado, colocando todas as tags
ao mesmo tempo, acumulando os efeitos:
<b><u><i>texto</i></u></b>
e o resultado :
texto
Voltar ao ndice
Imagens de Fundo e Cores de Fundo
Cor de Fundo
Para usar cores de fundo deve-se procurar uma combinao entre a cor de fundo e
a cor do texto que no dificulte a leitura. Normalmente as cores de fundo claras
funcionam bem com uma cor de texto escura.
Para usar uma cor de fundo na sua pgina voc deve usar o seguinte cdigo dentro
da tag <body>:
<body bgcolor="blue">
Pode tambm utilizar os cdigos HEX para definir as cores que combinem melhor.
Inserir uma Imagem de Fundo

Se voc quiser definir uma imagem de fundo use o seguinte cdigo:
<body background="fotos/imagem.jpg">
Lembre-se que "fotos/imagem.jpg" a localizao do ficheiro da imagem. Trata-se
de um URL relativo que aponta para a pasta "fotos" que est no seu site. Pode
tambm usar um URL absoluto, que pode tambm apontar para o seu site ou ento
para outra imagem localizada algures na internet. Um exemplo do cdigo da imagem
de fundo com URL absoluto :
<body background="http://www.seudominio.com/fotos/imagem.jpg">
Voltar ao ndice
Inserir Imagens
A tag para se inserir imagens <img src="imagem.jpg"> .
Deve-se ter em ateno que o endereo da imagem a introduzir em "src" deve ter
em conta a pasta onde a imagem est arquivada no servidor. Assim se a nossa
pgina estiver na raiz, e a imagem estiver numa pasta chamada "fotos", a nossa tag
para aquela imagem deveria ser:
<img src="fotos/imagem.jpg"> .
Atributo "alt"
O atributo "alt" deve ser usado para quando queremos que um texto aparea sempre
que passarmos o rato sobre a imagem. Este texto tambm aparece como texto
descritivo quando a exibio das imagens no est activa. A tag fica:
<img src="imagem.jpg" alt="Aniversrio da Joana">
Definir Altura e Largura

Para a largura usa-se o atributo "width" e para altura o "height". Podem-se definir os
valores em pixels ou em percentagem:
<img src="imagem.jpg" width="200" height="100">
Definir Contorno da Imagem

Para o contorno usa-se o atributo "border". O valor 0 faz com que a imagem fique
sem contorno. Quanto maior for o valor definido maior a espessura do contorno. O
cdigo pode ser por exemplo:
<img src="imagem.jpg" border="5">
Mltiplos Atributos
Se quisermos definir as dimenses da imagem, um contorno, e um texto "alt",
podemos definir a tag com todos esses atributos. A ordem em que os colocamos
no importante:
<img src="imagem.jpg" border="5" alt="Aniversrio da Joana" width="200"
height="100">
Inserir Imagens em Links

Para fazer com que os visitantes possam ser levados para outra pgina ao clicar
numa imagem, basta juntar o cdigo HTML para imagem e o cdigo HTML para links
(que vamos abordar a seguir):
<a href="http://www.outra_pagina.com"><img src="fotos/imagem.jpg"></a>
Voltar ao ndice
Inserir Links
A tag para se inserir links <a href="http://www.pagina.com">Nome do
Link</a>.
O resultado deste cdigo seria:
Nome do Link
Abrir links em Novas Janelas

Se voc no quer que as pessoas abandonem o seu site quando clicarem nos links,
voc pode definir seus links para abrirem numa nova janela com o atributo
"target='_blank'":
<a href="http://www.pagina.com" target="_blank">Nome do Link</a>
Endereos Absolutos e Relativos

URL (de Uniform Resource Locator), em portugus Localizador de Recursos
Universal, o endereo dos sites. aquele endereo que todos estamos habituados
a colocar na barra de endereos do navegador de internet.
Pode-se linkar para outras pginas usando URLs absolutos ou relativos.
URLs absolutos
Um URL absoluto contm o caminho completo para a localizao do ficheiro do site
que se pretende.
Se por exemplo voc quisesse abrir uma pgina chamada camoes.html, que se
encontrava no interior de uma pasta chamada "poetas", e esta pasta se encontrava
na raiz do seu site, ento o URL absoluto seria:
<a href="http://www.seusite.com/poetas/camoes.html">Cames</a>
prefervel o uso de URLs absolutos em pginas que possam mudar de posio na
estrutura de pastas do site. Dessa forma se a pgina que contm os links mudar de
pasta, os links vo continuar a funcionar.
URLs relativos
Um URL relativo indica apenas o caminho a percorrer desde a posio em que
estamos.
Se por exemplo estivessemos na pgina camoes.html (que se encontra dentro da
pasta "poetas") e quisessemos linkar para trs para a pgina principal (para a pgina
index.html da raiz do site), ento o URL relativo seria:
<a href="../index.html">Pgina Principal</a>
os dois pontos, seguidos de uma barra, dizem ao browser para subir um nivel na
hierarquia na estrutura de pastas do site.
O URL relativo permite que o site possa ser testado offline, quando tivermos as
pastas e os ficheiros html no disco duro. Desta forma os links vo funcionar se
abrirmos as pginas do site a partir do disco.
Links ncora (ou Marcadores)

Um link ncora (ou marcador) um link interior, um link para dentro da prpria
pgina. um link que leva o visitante para outra seco da mesma pgina (em vez
de o levar para outra pgina ou site).
1- Para fazer um link ncora primeiro voc deve ir ao local do seu cdigo HTML para
onde voc quer que o link aponte. Este o local para onde o seu visitante ser
encaminhado quando clicar no link ncora. Nesse local defina o seguinte cdigo de
link com o atributo "name":
<a name="nome1">Este o Texto Onde a ncora vai parar</a>
"nome1" o nome da ncora que voc escolhe.
2 - Agora para linkar para aquele local da pgina, use a tag para links, e no
endereo s colocar cardinal seguido do nome escolhido para a ncora:
<a href="#nome1">clique aqui</a>
Link para E-mail

Para criar um link que permite que os seus visitantes lhe enviem e-mails basta
colocar a funo "mailto" na tag de link:
<a href="mailto:seuendereo@email.com">Envie-me um Email</a>
Mudar as Cores dos Links

Por defeito os links tm a cor azul. Mas voc pode alterar as cores usando o cdigo
"link" no interior da tag <body> . Exemplo:
<body link="red" vlink="green" alink="yellow">
link - cor dos links, vermelho neste caso

vlink - links visitados, verde neste caso
alink - links activos, amarelo neste caso
Voltar ao ndice
Voc pode tambm usar os cdigos HEX para definir estas cores:
Cdigos HEX das Cores

Clique para seleccionar uma cor e depois poder copiar e colar o respectivo cdigo
HEX:
ou ento copie directamente do seguinte quadro o cdigo da cor desejada:
#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF

#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
Voltar ao ndice
Criar Tabelas
Perceber como funcionam as tabelas em HTML muito importante. Com elas
podemos fazer muita coisa no design do nosso site. Podemos ordenar o nosso
contedo de uma determinada forma, podemos ordenar imagens lado a lado, ou em
fila, podemos criar colunas para o layout do site, criar uma barra lateral, etc.
Tags de tabela bsicas

So 3 as tags bsicas para inserir tabelas:
<table> a tag que inicia e finaliza uma tabela

<tr> significa "table row"( linha de tabela), a tag que representa uma linha
na tabela
<td> significa "table data" (dados da tabela), a tag que representa uma
clula da tabela dentro da linha
Vamos ento criar uma tabela simples:

<table>
<tr> <td>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td> </tr>
</table>
e o resultado desta tabela :
Clula 1 Clula 2 Clula 3
Reparem que a tabela tem 3 linhas e 2 colunas. Reparem no cdigo HTML acima
como cada <tr> uma linha. Como abrimos 2 tags <tr> vamos ter 2 linhas. E
reparem como no interior de cada linha temos 3 tags <td> o que vai resultar em 3
clulas por cada linha, ou 3 colunas no aspeto final da tabela.
Definir um Contorno para a Tabela

Para definir um contorno para uma tabela basta colocarmos no atributo "border" a
espessura do contorno que queremos:
<table border="2">
</table>
e o resultado :

Alterar a Cor do Contorno da Tabela

Para alterar o contorno da tabela colocamos no atributo "bordercolor" a cor que
pretendemos:
<table border="2" bordercolor="red">
</table>
neste caso vamos ter uma tabela com um contorno vermelho:

Definir Espao que Envolve as Clulas - CELLSPACING

Podemos aumentar ou diminuir o espao que envolve as clulas no interior da
tabela. Para isso usamos o atributo "cellspacing".
<table border="2" cellspacing="15">
</table>
temos assim:
Definir Espao no Interior das Clulas - CELLPADDING

Para aumentar ou diminuir o espao no interior das clulas usamos o atributo
"cellspadding".
<table border="2" cellpadding="10">
</table>
vejam como fica:
Definir a Largura de uma Tabela

Para definirmos a largura de uma tabela usamos o atributo "width". O valor pode ser
em pixels ou em percentagem.
Se usarmos uma percentagem, por exemplo um valor de 100%, a tabela vai ocupar
todo o espao disponivel dentro da seco onde se encontra.
<table border="2" width="100%">
</table>
resultado:
Se usarmos um valor em pixels, por exemplo 400px, a tabela vai ter uma largura fixa
de 400px.
<table border="2" width="400">
</table>
o resultado final desta tabela:
Definir a Largura das Colunas
Se no quisermos que todas as colunas tenham a mesma largura temos que definir
um atributo de largura dentro da tag <td>. Se usarmos percentagens temos por
exemplo o seguinte cdigo:
<tr> <td width="50%">Clula 1</td> <td>Clula 2</td> <td>Clula 3</td>
</tr>
<tr> <td width="50%">Clula 4</td> <td>Clula 5</td> <td>Clula
6</td> </tr>
</table>
e o resultado da tabela:
Reparem que nas duas linhas tivemos que definir uma largura de 50% para a
primeira coluna. Se para as restantes colunas no definirmos nenhum valor, o
espao que sobra vai ser dividido de forma automtica igualmente por todas elas.
Se usarmos um valor em pixels, por exemplo 250px, a primeira coluna ter 250px de
largura e o que sobra vai para as restantes colunas at ao total 400px que a
largura definida para a tabela:
<tr> <td width="250">C1</td> <td width="75">C2</td> <td width="75">C3</td>
</tr>
</tr>
</table>
o resultado da tabela:
C1 C2 C3
C4 C5 C6
Em cada linha a soma dos valor de largura definido para as colunas totaliza o valor
da largura da tabela 250+75+75=400.
Definir a Altura de uma Tabela

Podemos tambm definir uma altura para a tabela adicionando o atributo "height":
<table border="2" height="200" width="400">
</tr>
</tr>
</table>
resultado:
C1 C2 C3
C4 C5 C6
Alinhamento Horizontal do Contedo das Clulas
Por defeito o contedo das clulas est alinhado esquerda, mas possivel
tambm centrar o contedo e alinhar direita. Para isso usamos o atributo "align" no
interior da tag <td>:
<tr> <td width="250" align="center">C1</td> <td width="75">C2</td> <td
width="75">C3</td> </tr>
<tr> <td width="250" align="center">C4</td> <td width="75">C5</td> <td
</table>
resultado:
C1 C2 C3
C4 C5 C6
Se quisermos alinhar direita temos que usar align="right".
Alinhamento Vertical do Contedo das Clulas

Por defeito os dados ficam alinhados verticalmente no meio (middle) da clula, mas
possivel tambm alinhar o contedo e alinhar para o fundo (bottom) e para o topo
(top) da clula. Para isso usamos o atributo "valign" no interior da tag <td>:
<table border="2" height="200" width="400">
<tr> <td width="250" valign="bottom">C1</td> <td width="75">C2</td> <td
<tr> <td width="250" valign="top">C4</td> <td width="75">C5</td> <td
</table>
resultado:
C1 C2 C3
C4 C5 C6
Reparem como o C1 ficou alinhado pelo fundo e o C4 pelo topo da clula.
Voltar ao ndice
Definir Listas
Lista numerada:
Para apresentar uma lista de itens numerada usamos a tag <ol>, iniciais de "ordered
list", para a lista. E a tag <li>, iniciais de "list item", para cada item:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
e o cdigo resulta em:
1. Item 1
2. Item 2
3. Item 3
Lista no numerada:
Para apresentar uma lista de itens no numerada usamos a tag <ul>, iniciais de
"unordered list", para a lista. E a tag <li>, iniciais de "list item", para cada item:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
e o cdigo resulta em:
Item 1
Item 2
Item 3
Voltar ao ndice
Caracteres Especiais
Cdigo Carcter Descrio
< < Menor que
> > Maior que
™ Trademark
& & Ampersand
® Marca Registada
© Copyright
&dagger; Cruz
" " Aspas
» Seta de citao
« Seta de citao
Tracejado
° 20 Grau
¼ Um quarto
½ Um meio
¾ Trs quartos
· Ponto no meio
¡ Ponto exclamao invertido
Para conseguir que aparea no seu site um dos simbolos da coluna amarela, basta
colocar o respectivo cdigo no HTML da pgina.

HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

Por esta altura voc j deve ter reservado o seu domnio e j deve ter encontrado

um servio de hospedagem para o seu site.

Estrutura Bsica do Cdigo HTML de um Documento

Nesta rea fica tudo aquilo que se visualiza no navegador da internet,

Tags Bsicas para Fonte e Texto

Imagens de Fundo e Cores de Fundo

Inserir uma Imagem de Fundo

Definir Altura e Largura

Definir Contorno da Imagem

Inserir Imagens em Links

Abrir links em Novas Janelas

Endereos Absolutos e Relativos

Links ncora (ou Marcadores)

Link para E-mail

Mudar as Cores dos Links

link - cor dos links, vermelho neste caso

Cdigos HEX das Cores

#003300 #003333 #003366 #003399 #0033CC #0033FF

#006600 #006633 #006666 #006699 #0066CC #0066FF

#009900 #009933 #009966 #009999 #0099CC #0099FF

#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF

#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF

#330000 #330033 #330066 #330099 #3300CC #3300FF

#333300 #333333 #333366 #333399 #3333CC #3333FF

#336600 #336633 #336666 #336699 #3366CC #3366FF

#339900 #339933 #339966 #339999 #3399CC #3399FF

#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF

#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF

#660000 #660033 #660066 #660099 #6600CC #6600FF

#663300 #663333 #663366 #663399 #6633CC #6633FF

#666600 #666633 #666666 #666699 #6666CC #6666FF

#669900 #669933 #669966 #669999 #6699CC #6699FF

#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF

#990000 #990033 #990066 #990099 #9900CC #9900FF

#993300 #993333 #993366 #993399 #9933CC #9933FF

#996600 #996633 #996666 #996699 #9966CC #9966FF

#999900 #999933 #999966 #999999 #9999CC #9999FF

#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF

#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF

#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF

#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF

#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF

#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF

#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF

#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF

#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF

#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF

#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF

#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF

#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF

#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF

Tags de tabela bsicas

<table> a tag que inicia e finaliza uma tabela

Vamos ento criar uma tabela simples:

Definir um Contorno para a Tabela

Clula 1 Clula 2 Clula 3

Alterar a Cor do Contorno da Tabela

Clula 1 Clula 2 Clula 3

Definir Espao que Envolve as Clulas - CELLSPACING

Clula 1 Clula 2 Clula 3

Clula 4 Clula 5 Clula 6

Definir Espao no Interior das Clulas - CELLPADDING

Clula 1 Clula 2 Clula 3

Clula 4 Clula 5 Clula 6