utorial 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. |
Olá! O meu nome é Cátia.
Pode experimentar introduzir você mesmo os códigos HTML indicados
neste tutorial, e ver automaticamente o seu resultado, 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 <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> |
texto
Voltar ao ÍndiceImagens 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>:
<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 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):<a href="http://www.outra_pagina.com"><img src="fotos/imagem.jpg"></a>
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'":<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 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:
| #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 |
| #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 |
| #66FF00 | #66FF33 | #66FF66 | #66FF99 | #66FFCC | #66FFFF |
| #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 |
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
<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 |
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 |
Se usarmos um valor em pixels, por exemplo 250px, a tabela vai ter uma largura fixa de 400px:
<table border="2" width="400">
<tr> <td width="250">C 1</td> <td width="75">C 2</td> <td width="75">C 3</td> </tr>
<tr> <td width="250">C 4</td> <td width="75">C 5</td> <td width="75">C 6</td> </tr>
</table>
o resultado da tabela:
| C 1 | C 2 | C 3 |
| C 4 | C 5 | C 6 |
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">C 1</td> <td width="75">C 2</td> <td width="75">C 3</td> </tr>
<tr> <td width="250">C 4</td> <td width="75">C 5</td> <td width="75">C 6</td> </tr>
</table>
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>:<table border="2" width="400">
<tr> <td width="250" align="center">C 1</td> <td width="75">C 2</td> <td width="75">C 3</td> </tr>
<tr> <td width="250" align="center">C 4</td> <td width="75">C 5</td> <td width="75">C 6</td> </tr>
</table>
resultado:
| C 1 | C 2 | C 3 |
| C 4 | C 5 | C 6 |
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">C 1</td> <td width="75">C 2</td> <td width="75">C 3</td> </tr>
<tr> <td width="250" valign="top">C 4</td> <td width="75">C 5</td> <td width="75">C 6</td> </tr>
</table>
resultado:
| C 1 | C 2 | C 3 |
| C 4 | C 5 | C 6 |
Voltar ao Índice
Definir Listas
Lista numeradaPara 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:
- Item 1
- Item 2
- Item 3
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
Caracteres Especiais
Código
|
Carácter
|
Descrição
|
| < |
<
|
Menor que |
| > |
>
|
Maior que |
| ™ |
™
|
Trademark |
| & |
&
|
Ampersand |
| ® |
®
|
Marca Registada |
| © |
©
|
Copyright |
| † |
†
|
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 |
Nenhum comentário:
Postar um comentário