Subscreva a Newsletter:

registe o seu domínio em:

Como Fazer Um Site é o seu site para aprender a criar sites.

Tutorial de HTML

Como Fazer Um Site >> Criar um Site >> Dicas de HTML

Índice do Tutorial HTML

Por esta altura você já deve ter reservado o seu domínio e já deve ter encontrado um serviço de alojamento para o seu site.

Se você não está muito interessado em aprender HTML para criar as suas páginas, não se preocupe, muitos serviços de alojamento disponibilizam software de criação de sites de uso fácil, tornando o processo muito simples, bastando alguns cliques para construir rápidamente um site sem que seja preciso saber HTML. Neste caso, verifique se o seu serviço de alojamento lhe proporciona estas ferramentas ou então, se ainda não tem alojamento, certifique-se que escolhe um serviço que inclua uma ferramenta de criação de páginas web.

Mas, se você está com vontade de aprender HTML, ainda bem para si! É sempre vantajoso saber HTML, ou pelo menos ter umas bases.

Noções Básicas

O código HTML é composto por TAGS (ou comandos), que são usadas no inicio e no final do texto que vai ser afectado pelo código.

Uma tag de inicio é por exemplo a tag <b> que é usada para colocar uma porção 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á!" da frase abaixo, então o código HTML fica:

<b>Olá!</b> O meu nome é Cátia.

e o resultado será:

Olá! O meu nome é Cátia.

Estrutura Básica do Código HTML de um Documento

Comece por definir o layout básico do documento. Pode copiar e colar este código no Bloco de Notas ou outro editor de texto:

<html>
<head>
<title>Título da sua página</title>
<meta name="description" content="Breve descrição da sua página">
<meta name="keywords" content="Palavras chave da sua página">
</head>
<body>

Nesta área fica tudo aquilo que se visualiza no navegador da internet, texto e imagens, juntamente com todos as tags HTML de formatação.

</body>
</html>

As tags <html> e </html> dizem ao navegador de internet aonde começa e aonde acaba o código HTML.

As tags <title> e </title> dizem ao browser qual é o título da página. O título pode ser visto no canto superior esquerdo do seu navegador de internet. O texto que for definido entre estas tags é também o texto que é usado como título pelos motores de busca quando apresentam as páginas nos resultados de uma pesquisa.

A tag <meta name="description" ...> é informação que pode ser útil para os motores de busca. Eles podem usar o que você escreveu na descrição para descrever a página quando ela é apresentada nos resultados de uma pesquisa. Ou então, por vezes, os motores de busca usam também uma porção aleatória do que estiver no <body> da sua página.

A tag <meta name="keywords" ...> também pode ser usada pelos motores de busca na indexação da página. Coloque as palavras chave separadas por virgulas no interior desta tag.

Entre as tags <body> e </body> é colocado o conteúdo da página, que é o que é visualizado no browser.

Após inserir os códigos HTML e o conteúdo pretendido, deve-se guardar o ficheiro com a extensão ".html". Ou seja, damos-lhe um nome e acrescentamos a extensão ".html". Ficariamos por exemplo com o ficheiro "index.html". Depois disso, para visualizar a página no browser basta clicar sobre o ficheiro.

Voltar ao Índice

Tags Básicas para Fonte e Texto

Itálico: <i>texto</i>

Sublinhado: <u>texto</u>

Negrito: <b>texto</b>

Texto Riscado: <s>texto</s>

Novo Parágrafo: <p>texto</p>
Esta tag inicia um novo parágrafo introduzindo uma linha em branco entre o novo parágrafo 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 parágrafo.

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 também utilizar os códigos 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)

Atenção:

Pode-se formatar um texto usando várias tags em simultâneo. Assim, por exemplo eu posso formatar um texto em negrito, itálico 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 combinação entre a cor de fundo e a cor do texto que não dificulte a leitura. Normalmente as cores claras funcionam bem com uma cor escura para o texto.

Para usar uma cor de fundo na sua página você deve usar o seguinte código dentro da tag <body>:

Pode também utilizar os códigos HEX para definir as cores que combinem melhor.

Inserir uma Imagem de Fundo

Se você quiser definir uma imagem de fundo use o seguinte código:

Lembre-se que "fotos/imagem.jpg" é a localização do ficheiro da imagem. Trata-se de um URL relativo que aponta para a pasta "fotos" que está no seu site. Pode também usar um URL absoluto, que pode também apontar para o seu site ou então para outra imagem localizada algures na internet. Um exemplo do código da imagem de fundo com URL absoluto é:

Voltar ao Índice

Inserir Imagens

A tag para se inserir imagens é <img src="imagem.jpg"> .
Deve-se ter em atenção que o endereço da imagem a introduzir em "src" deve ter em conta a pasta onde a imagem está arquivada no servidor. Assim se a nossa página 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 apareça sempre que passarmos o rato sobre a imagem. Este texto também aparece como texto descritivo quando a exibição das imagens não está activa. A tag fica:

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:

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 código pode ser por exemplo:

Múltiplos Atributos

Se quisermos definir as dimensões da imagem, um contorno, e um texto "alt", podemos definir a tag com todos esses atributos. A ordem em que os colocamos não é importante:

Inserir Imagens em Hiperligações

Para fazer com que os visitantes possam ser levados para outra página ao clicar numa imagem, basta juntar o código HTML para imagem e o código HTML para links (que vamos abordar a seguir):

Voltar ao Índice

Inserir Hiperligações

A tag para se inserir hiperligações é <a href="http://www.pagina.com">Nome do Link</a>.

O resultado deste código é:

Nome do Link

Abrir links em Novas Janelas

Se você não quer que as pessoas abandonem completamente o seu site quando clicarem nos links, você pode definir seus links para abrirem numa nova janela com o atributo "target='_blank'":

Endereços Absolutos e Relativos

URL (de Uniform Resource Locator), em português Localizador de Recursos Universal, é o endereço dos sites que todos estamos habituados a colocar na barra de endereços do navegador de internet.

Pode-se linkar para outras páginas usando URLs absolutos ou relativos.

URLs absolutos

Um URL absoluto contém o caminho completo para a localização do ficheiro do site que se pretende.

Se por exemplo você quisesse abrir uma página chamada camoes.html, que se encontrava no interior de uma pasta chamada "poetas", e esta pasta se encontrava na raiz do seu site, então o URL absoluto seria:

<a href="http://www.seusite.com/poetas/camoes.html">Camões</a>

É preferível o uso de URLs absolutos em páginas que possam mudar de posição na estrutura de pastas do site. Dessa forma se a página que contém os links mudar de pasta, os links vão continuar a funcionar.

URLs relativos

Um URL relativo indica apenas o caminho a percorrer desde a posição em que estamos.

Se por exemplo estivessemos na página camoes.html (que se encontra dentro da pasta "poetas") e quisessemos linkar para trás para a página principal (para a página index.html da raiz do site), então o URL relativo seria:

<a href="../index.html">Página 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 vão funcionar se abrirmos as páginas do site a partir do disco.

Hiperligações Âncora ou Marcadores

Uma hiperligação (link) âncora ou marcador é um link interior para dentro da própria página. É um link que leva o visitante para outra secção da mesma página (em vez de o levar para outra página ou site).

1- Para fazer um marcador primeiro você deve ir ao local do seu código HTML para onde você quer que o link aponte. Este é o local para onde o seu visitante será encaminhado quando clicar no link âncora.

<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 página, use a tag para hiperligações, e no endereço é só colocar cardinal seguido do nome escolhido para a âncora:

<a href="#nome1">clique aqui</a>

Links para E-mails

Para criar um link que permite que os seus visitantes lhe enviem e-mails basta colocar a função "mailto" na tag de hiperligação:

<a href="mailto:seuendereço@email.com">Envie-me um Email</a>

Mudar as Cores dos Links

Por defeito as hiperligações têm a cor azul. Mas você pode alterar as cores usando o código "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 também usar os códigos HEX para definir estas cores:

Códigos HEX das Cores

Clique para seleccionar uma cor e depois poderá copiar e colar o respectivo código HEX:

ou então copie directamente do seguinte quadro o código da cor desejada:

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 conteúdo 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 básicas

São 3 as tags básicas 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 célula da tabela dentro da linha

Vamos então criar uma tabela simples:

<table>
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>

e o resultado desta tabela é:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Reparem que a tabela tem 3 linhas e 2 colunas. Reparem no código HTML acima como cada <tr> é uma linha. Como abrimos 3 tags <tr> vamos ter 3 linhas. E reparem como no interior de cada linha temos 2 tags <td> o que vai resultar em 2 células por cada linha, ou 2 colunas na tabela final.

Definindo 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">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>

e o resultado é:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Alterando 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">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>

neste caso vamos ter uma tabela com um contorno vermelho:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Definir Espaço que Envolve as Células - CELLSPACING

Podemos aumentar ou diminuir o espaço no interior da tabela que envolve as células. Para isso usamos o atributo "cellspacing".

<table border="2" cellspacing="15">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>

temos assim:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Definir Espaço no Interior das Células - CELLPADDING

Para aumentar ou diminuir o espaço no interior das células usamos o atributo "cellspadding".

<table border="2" cellpadding="10">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>

vejam como fica:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

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 espaço disponivel dentro da secção aonde se encontra.

<table border="2" width="100%">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>

resultado:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Se usarmos um valor em pixels, por exemplo 400px, a tabela vai ter uma largura fixa de 400px.

<table border="2" width="400">
<tr> <td>Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td>Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>

o resultado final desta tabela:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Definir a Largura das Colunas

Se não 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 código:

<table border="2" width="400">
<tr> <td width="50%">Célula 1</td> <td>Célula 2</td> <td>Célula 3</td> </tr>
<tr> <td width="50%">Célula 4</td> <td>Célula 5</td> <td>Célula 6</td> </tr>
</table>

e o resultado da tabela:

Célula 1	Célula 2	Célula 3
Célula 4	Célula 5	Célula 6

Reparem que nas duas linhas tivemos que definir uma largura de 50% para a primeira coluna. Se para as restantes colunas não definirmos nenhum valor, o espaço que sobra vai ser dividido de forma automática igualmente por todas elas.

Se usarmos um valor em pixels, por exemplo 250px, a tabela vai ter uma largura fixa de 400px:

o resultado da tabela:

C 1	C 2	C 3
C 4	C 5	C 6

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 também definir uma altura para a tabela adicionando o atributo "height":

resultado:

C 1	C 2	C 3
C 4	C 5	C 6

Alinhamento Horizontal do Conteúdo das Células

Por defeito o conteúdo das células está alinhado à esquerda, mas é possivel também centrar o conteúdo e alinhar à direita. Para isso usamos o atributo "align" no interior da tag <td>:

resultado:

C 1	C 2	C 3
C 4	C 5	C 6

Se quisermos alinhar à direita temos que usar align="right".

Alinhamento Vertical do Conteúdo das Células

Por defeito os dados ficam alinhados verticalmente no meio (middle) da célula, mas é possivel também alinhar o conteúdo e alinhar para o fundo (bottom) e para o topo (top) da célula. Para isso usamos o atributo "valign" no interior da tag <td>:

resultado:

C 1	C 2	C 3
C 4	C 5	C 6

Reparem como o C1 ficou alinhado pelo fundo e o C4 pelo topo da célula.

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:

e o código resulta em:

Item 1
Item 2
Item 3

Lista não numerada

Para apresentar uma lista de itens não numerada usamos a tag <ul>, iniciais de "unordered list", para a lista, e a tag <li>, iniciais de "list item", para cada item:

e o código resulta em:

Item 1
Item 2
Item 3

Voltar ao Índice

Caracteres Especiais

Código	Carácter	Descrição
<	<	Menor que
>	>	Maior que
™	™	Trademark
&	&	Ampersand
®	®	Marca Registada
©	©	Copyright
&dagger;	†	Cruz
"	"	Aspas
»	»	Seta de citação
«	«	Seta de citação
	———	Tracejado
°	20°	Grau
¼	¼	Um quarto
½	½	Um meio
¾	¾	Três quartos
·	·	Ponto no meio
¡	¡	Ponto exclamação invertido