Tutorial de HTML

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



Índice do Tutorial HTML

Estrutura Básica

Fonte e Texto

Fundos

Imagens

Links

Cores (HEX)

Tabelas

Listas

Caracteres Especiais


Por esta altura você já deve ter reservado o seu domínio e já deve ter encontrado um serviço de hospedagem 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 hospedagem disponibilizam software de criação de sites de uso fácil, tornando o processo muito simples. Através do próprio serviço de hospedagem poderá construir rápidamente um site, com apenas alguns cliques, sem que seja preciso saber HTML. Verifique se o seu serviço de hospedagem lhe proporciona estas ferramentas ou então, se ainda não tem hospedagem, certifique-se que escolhe um serviço de hospedagem 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á!" na 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.

Pode experimentar você mesmo os códigos HTML indicados neste tutorial, e ver automaticamente o seu resultado, introduzindo-os na página "Editor de HTML em tempo real".


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 identificando o respectivo separador no 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 de fundo claras funcionam bem com uma cor de texto escura.

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

<body bgcolor="blue">

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:

<body background="fotos/imagem.jpg">

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 é:

<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 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:

<img src="imagem.jpg" alt="Aniversário 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 código pode ser por exemplo:

<img src="imagem.jpg" border="5">

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:

<img src="imagem.jpg" border="5" alt="Aniversário da Joana" width="200" height="100">

Inserir Imagens em Links

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):

<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 código seria:

Nome do Link


Abrir links em Novas Janelas

Se você não 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>


Endereços Absolutos e Relativos

URL (de Uniform Resource Locator), em português Localizador de Recursos Universal, é o endereço dos sites. É aquele endereço 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.


Links Âncora (ou Marcadores)

Um link âncora (ou marcador) é um link interior, é um link 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 link âncora 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. Nesse local defina o seguinte código 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 página, use a tag para links, e no endereço é 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 função "mailto" na tag de link:

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

Mudar as Cores dos Links

Por defeito os links 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:

Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player



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 1Célula 2Célula 3
Célula 4Célula 5Cé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 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 células 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">
<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 1Célula 2Célula 3
Célula 4Célula 5Célula 6

 

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">
<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 1Célula 2Célula 3
Célula 4Célula 5Célula 6

 

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

Podemos aumentar ou diminuir o espaço que envolve as células no interior da tabela. 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 1Célula 2Célula 3
Célula 4Célula 5Cé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 1Célula 2Célula 3
Célula 4Célula 5Cé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 onde 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 1Célula 2Célula 3
Célula 4Célula 5Cé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 1Célula 2Célula 3
Célula 4Célula 5Cé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 1Célula 2Célula 3
Célula 4Célula 5Cé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 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:

<table border="2" width="400">
<tr>   <td width="250">C1</td> <td width="75">C2</td> <td width="75">C3</td>   </tr>
<tr>   <td width="250">C4</td> <td width="75">C5</td> <td width="75">C6</td>   </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 também definir uma altura para a tabela adicionando o atributo "height":

<table border="2" height="200" width="400">
<tr>   <td width="250">C1</td> <td width="75">C2</td> <td width="75">C3</td>   </tr>
<tr>   <td width="250">C4</td> <td width="75">C5</td> <td width="75">C6</td>   </tr>
</table>

resultado:

C1 C2 C3
C4 C5 C6

 

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>:

<table border="2" width="400">
<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 width="75">C6</td> </tr>
</table>

resultado:

C1 C2 C3
C4 C5 C6

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>:

<table border="2" height="200" width="400">
<tr> <td width="250" valign="bottom">C1</td> <td width="75">C2</td> <td width="75">C3</td> </tr>
<tr> <td width="250" valign="top">C4</td> <td width="75">C5</td> <td width="75">C6</td> </tr>
</table>

resultado:

C1 C2 C3
C4 C5 C6

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:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
</li>
</ol>

e o código resulta em:

  1. Item 1
  2. Item 2
  3. 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:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
</li>
</ul>

e o código resulta em:

  • Item 1
  • Item 2
  • Item 3

Voltar ao Índice

 

Caracteres Especiais

Código
Carácter
Descrição
&lt;
<
Menor que
&gt;
>
Maior que
&trade;
Trademark
&amp;
&
Ampersand
&reg;
®
Marca Registada
&copy;
©
Copyright
&dagger;
Cruz
&quot;
"
Aspas
&raquo;
»
Seta de citação
&laquo;
«
Seta de citação
&#151;
———
Tracejado
&deg;
20°
Grau
&frac14;
¼
Um quarto
&frac12;
½
Um meio
&frac34;
¾
Três quartos
&middot;
·
Ponto no meio
&iexcl;
¡
Ponto exclamação invertido

Para conseguir que apareça no seu site um dos simbolos da coluna amarela, basta colocar o respectivo código no HTML da página.

Voltar ao Índice

 


Registro de Dominio:
Namecheap.com

Domínios a preços acessíveis.
Inclui serviço de privacidade gratuito.

Hospedagem para seu site:

banner de afiliado

Eu próprio uso esta empresa
de hospedagem para alojar
os meus sites.

Criar Site Grátis:

Loja Virtual Grátis:

BLOG | FÓRUM | Política de Privacidade
Copyright © 2015 - ComoFazerUmSite.com
Design com Dreamweaver

.