Tutorial HTML

Tutorial HTML
Por esta altura voc j deve ter reservado o seu domnio e j deve ter encontrado um servio de alojamento para o seu site. Se voc no est muito interessado em aprender HTML para criar as suas pginas, no se preocupe, muitos servios de alojamento disponibilizam software de criao de sites de uso fcil, tornando o processo muito simples, bastando alguns cliques para construir rpidamente um site sem que seja preciso saber HTML. Neste caso, verifique se o seu servio de alojamento lhe proporciona estas ferramentas ou ento, se ainda no tem alojamento, certifique-se que escolhe um servio 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!" da 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 introduzir voc mesmo os cdigos HTML indicados neste tutorial, e ver automaticamente o seu resultado, 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 no canto superior esquerdo do 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 claras funcionam bem com uma cor escura para o texto. 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 Hiperligaes

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 Hiperligaes
A tag para se inserir hiperligaes <a href="http://www.pagina.com">Nome do Link</a>. O resultado deste cdigo : Nome do Link
Abrir links em Novas Janelas

Se voc no 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>
Endereos Absolutos e Relativos

URL (de Uniform Resource Locator), em portugus Localizador de Recursos Universal, o endereo dos sites 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.
Hiperligaes ncora ou Marcadores
Uma hiperligao (link) ncora ou marcador um link interior 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 marcador 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. <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 hiperligaes, e no endereo 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 funo "mailto" na tag de hiperligao: <a href="mailto:seuendereo@email.com">Envie-me um Email</a>
Mudar as Cores dos Links

Por defeito as hiperligaes 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 #003300 #006600 #009900 #00CC00 #00FF00 #330000 #333300 #336600 #339900 #33CC00 #33FF00 #660000 #663300 #666600 #669900 #66CC00 #66FF00 #990000 #993300 #996600 #999900 #99CC00 #99FF00 #CC0000 #CC3300 #CC6600 #CC9900 #000033 #003333 #006633 #009933 #00CC33 #00FF33 #330033 #333333 #336633 #339933 #33CC33 #33FF33 #660033 #663333 #666633 #669933 #66CC33 #66FF33 #990033 #993333 #996633 #999933 #99CC33 #99FF33 #CC0033 #CC3333 #CC6633 #CC9933 #000066 #003366 #006666 #009966 #00CC66 #00FF66 #330066 #333366 #336666 #339966 #33CC66 #33FF66 #660066 #663366 #666666 #669966 #66CC66 #66FF66 #990066 #993366 #996666 #999966 #99CC66 #99FF66 #CC0066 #CC3366 #CC6666 #CC9966 #000099 #003399 #006699 #009999 #00CC99 #00FF99 #330099 #333399 #336699 #339999 #33CC99 #33FF99 #660099 #663399 #666699 #669999 #66CC99 #66FF99 #990099 #993399 #996699 #999999 #99CC99 #99FF99 #CC0099 #CC3399 #CC6699 #CC9999 #0000CC #0033CC #0066CC #0099CC #00CCCC #00FFCC #3300CC #3333CC #3366CC #3399CC #33CCCC #33FFCC #6600CC #6633CC #6666CC #6699CC #66CCCC #66FFCC #9900CC #9933CC #9966CC #9999CC #99CCCC #99FFCC #CC00CC #CC33CC #CC66CC #CC99CC #0000FF #0033FF #0066FF #0099FF #00CCFF #00FFFF #3300FF #3333FF #3366FF #3399FF #33CCFF #33FFFF #6600FF #6633FF #6666FF #6699FF #66CCFF #66FFFF #9900FF #9933FF #9966FF #9999FF #99CCFF #99FFFF #CC00FF #CC33FF #CC66FF #CC99FF
#CCCC00 #CCFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00
#CCCCCC #CCFFCC #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC
#CCCCFF #CCFFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #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> <tr> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td> </tr> </table> e o resultado desta tabela : Clula 1 Clula 2 Clula 3 Clula 4 Clula 5 Clula 6 Reparem que a tabela tem 3 linhas e 2 colunas. Reparem no cdigo 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 clulas 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>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td> </tr> <tr> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td> </tr> </table> e o resultado : Clula 1 Clula 2 Clula 3 Clula 4 Clula 5 Clula 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>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td> </tr> <tr> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td> </tr> </table> neste caso vamos ter uma tabela com um contorno vermelho: Clula 1 Clula 2 Clula 3 Clula 4 Clula 5 Clula 6
Definir Espao que Envolve as Clulas - CELLSPACING

Podemos aumentar ou diminuir o espao no interior da tabela que envolve as clulas. Para isso usamos o atributo "cellspacing". <table border="2" cellspacing="15"> <tr> <td>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td> </tr> <tr> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td> </tr> </table> temos assim:
Clula 1 Clula 4
Clula 2 Clula 5
Clula 3 Clula 6
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"> <tr> <td>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td> </tr> <tr> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td> </tr> </table> vejam como fica: Clula 1 Clula 4 Clula 2 Clula 5 Clula 3 Clula 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 espao disponivel dentro da seco aonde se encontra. <table border="2" width="100%"> <tr> <td>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td> </tr> <tr> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td> </tr> </table> resultado: Clula 1 Clula 4 Clula 2 Clula 5 Clula 3 Clula 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>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td> </tr> <tr> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td> </tr> </table> o resultado final desta tabela: Clula 1 Clula 4 Clula 2 Clula 5 Clula 3 Clula 6
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: <table border="2" width="400"> <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: Clula 1 Clula 4 Clula 2 Clula 5 Clula 3 Clula 6
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 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:
C1 C4
C2 C5
C3 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> <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: C1 C4 C2 C5 C3 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>: <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: C1 C4 C2 C5 C3 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">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: C1 C4 C2 C5 C3 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 < > ™ & ® © &dagger; " » « ° ¼ ½ ¾ · ¡ Carcter < > & " 20 Menor que Maior que Trademark Ampersand Marca Registada Copyright Cruz Aspas Seta de citao Seta de citao Tracejado Grau Um quarto Um meio Trs quartos Ponto no meio Ponto exclamao invertido Descrio
Para se conseguir que aparea um dos simbolos da coluna amarela basta colocar o respectivo cdigo no HTML da pgina.

Tutorial HTML

Uploaded by

Document Information

Original Title

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

Tutorial HTML

Uploaded by

Copyright:

Available Formats

Tutorial HTML

Estrutura Bsica do Cdigo HTML de um Documento

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 Hiperligaes

Abrir links em Novas Janelas

<a href="http://www.pagina.com" target="_blank">Nome do Link</a>

Endereos Absolutos e Relativos

Hiperligaes ncora ou Marcadores

Links para E-mails

Mudar as Cores dos Links

Cdigos HEX das Cores

ou ento copie directamente do seguinte quadro o cdigo da cor desejada:

#CCCC00 #CCFF00 #FF0000 #FF3300 #FF6600 #FF9900 #FFCC00 #FFFF00

#CCCC33 #CCFF33 #FF0033 #FF3333 #FF6633 #FF9933 #FFCC33 #FFFF33

#CCCC66 #CCFF66 #FF0066 #FF3366 #FF6666 #FF9966 #FFCC66 #FFFF66

#CCCC99 #CCFF99 #FF0099 #FF3399 #FF6699 #FF9999 #FFCC99 #FFFF99

#CCCCCC #CCFFCC #FF00CC #FF33CC #FF66CC #FF99CC #FFCCCC #FFFFCC

#CCCCFF #CCFFFF #FF00FF #FF33FF #FF66FF #FF99FF #FFCCFF #FFFFFF

Tags de tabela bsicas

Definindo um Contorno para a Tabela

Alterando a Cor do Contorno da Tabela

Definir Espao que Envolve as Clulas - CELLSPACING

Definir Espao no Interior das Clulas - CELLPADDING

Definir a Largura de uma Tabela

Definir a Largura das Colunas

Definir a Altura de uma Tabela

Alinhamento Horizontal do Contedo das Clulas

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

Alinhamento Vertical do Contedo das Clulas

<li>Item 2</li> <li>Item 3</li> </ul> e o cdigo resulta em:

Item 1 Item 2 Item 3

You might also like