Anda di halaman 1dari 12

Escola Estadual Dr Joo Ponce de Arruda

Curso: Tcnico em Informtica - turma 2015


Disciplina: Linguagem para Internet
Professora Miriam

RESUMO
TUTORIAL DE HTML
ndice do Tutorial HTML
1. Estrutura Bsica
2. Fonte e Texto
3. Fundos

4. Imagens
5. Links
6. Cores (HEX)

7. Tabelas
8. Listas
9. Caracteres Especiais

Instalando o Notepad++

Site para download https://notepad-plus-plus.org/download/v6.7.9.2.html

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:

Escola Estadual Dr Joo Ponce de Arruda


Curso: Tcnico em Informtica - turma 2015
Disciplina: Linguagem para Internet
Professora Miriam

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

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)

Escola Estadual Dr Joo Ponce de Arruda


Curso: Tcnico em Informtica - turma 2015
Disciplina: Linguagem para Internet
Professora Miriam

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

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

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
Escola Estadual Dr Joo Ponce de Arruda
Curso: Tcnico em Informtica - turma 2015
Disciplina: Linguagem para Internet
Professora Miriam

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>

Inserir Links
A tag para se inserir links <a href="http://www.pagina.com">Nome do Link</a>.
O resultado deste cdigo seria:

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

Escola Estadual Dr Joo Ponce de Arruda


Curso: Tcnico em Informtica - turma 2015
Disciplina: Linguagem para Internet
Professora Miriam

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

Voc pode tambm usar os cdigos HEX para definir estas cores:

Cdigos HEX das Cores


Clique para selecionar uma cor e depois poder copiar e colar o respectivo cdigo HEX:
Ou ento copie diretamente 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

#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

Escola Estadual Dr Joo Ponce de Arruda


Curso: Tcnico em Informtica - turma 2015
Disciplina: Linguagem para Internet
Professora Miriam

#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 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> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td>
</table>

</tr>
</tr>

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

Escola Estadual Dr Joo Ponce de Arruda


Curso: Tcnico em Informtica - turma 2015
Disciplina: Linguagem para Internet
Professora Miriam

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>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td>
<tr> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td>
</table>

</tr>
</tr>

e o resultado :
Clula 1 Clula 2 Clula 3
Clula 4 Clula 5 Clula 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>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td>
<tr> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td>
</table>

</tr>
</tr>

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 que envolve as clulas no interior da tabela. 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> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td>
</table>

</tr>
</tr>

temos assim:
Clula 1

Clula 2

Clula 3

Clula 4

Clula 5

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> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td>
</table>

vejam como fica:


Clula 1

Clula 2

Clula 3

Clula 4

Clula 5

Clula 6

Definir a Largura de uma Tabela

Escola Estadual Dr Joo Ponce de Arruda


Curso: Tcnico em Informtica - turma 2015
Disciplina: Linguagem para Internet
Professora Miriam

</tr>
</tr>

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%">
<tr> <td>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td>
<tr> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td>
</table>

</tr>
</tr>

resultado:
Clula 1

Clula 2

Clula 3

Clula 4

Clula 5

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> <td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td>
</table>

</tr>
</tr>

o resultado final desta tabela:


Clula 1

Clula 2

Clula 3

Clula 4

Clula 5

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> <td width="50%">Clula 4</td> <td>Clula 5</td> <td>Clula 6</td>
</table>

</tr>
</tr>

e o resultado da tabela:
Clula 1

Clula 2

Clula 3

Clula 4

Clula 5

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 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> <td width="250">C4</td> <td width="75">C5</td> <td width="75">C6</td>
</table>

</tr>
</tr>

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

Escola Estadual Dr Joo Ponce de Arruda


Curso: Tcnico em Informtica - turma 2015
Disciplina: Linguagem para Internet
Professora Miriam

<table border="2" height="200" width="400">


<tr> <td width="250">C1</td> <td width="75">C2</td> <td width="75">C3</td>
<tr> <td width="250">C4</td> <td width="75">C5</td> <td width="75">C6</td>
</table>

</tr>
</tr>

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

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:

Escola Estadual Dr Joo Ponce de Arruda


Curso: Tcnico em Informtica - turma 2015
Disciplina: Linguagem para Internet
Professora Miriam

<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

Caracteres Especiais
Cdigo

Carcter

Descrio

&lt;

<

Menor que

&gt;

>

Maior que

&trade;

Trademark

&amp;

&

Ampersand

&reg;

Marca Registada

&copy;

Copyright

&dagger;

Cruz

&quot;

"

Aspas

&raquo;

Seta de citao

&laquo;

Seta de citao

&#151;

&deg;

20

Tracejado
Grau

&frac14;

Um quarto

&frac12;

Um meio

&frac34;

Trs quartos

&middot;

Ponto no meio

&iexcl;

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.

Tabela de acentos e caracteres especiais em HTML


.............. &Aacute;
............... &aacute;
................. &Acirc;
................ &acirc;
............... &Agrave;
............... &agrave;
................. &Aring;
................ &aring;

................ &Iacute;
............... &iacute;
................. &Icirc;
................ &icirc;
................ &Igrave;
............... &igrave;
.................. &Iuml;
................. &iuml;

Escola Estadual Dr Joo Ponce de Arruda


Curso: Tcnico em Informtica - turma 2015
Disciplina: Linguagem para Internet
Professora Miriam

.............. &Uacute;
............... &uacute;
................ &Ucirc;
................ &ucirc;
............. &Ugrave;
.............. &ugrave;
................. &Uuml;
................. &uuml;

................ &Atilde;
............... &atilde;
.................. &Auml;
................. &auml;
................. &AElig;
.................. &aelig;

................ &Eacute;
............... &eacute;
................. &Ecirc;
................ &ecirc;
................ &Egrave;
............... &egrave;
.................. &Euml;
................. &euml;
................... &ETH;
.................. &eth;

........... &Oacute;
.............. &oacute;
................ &Ocirc;
................. &ocirc;
.............. &Ograve;
............... &ograve;
................ &Oslash;
............... &oslash;
................ &Otilde;
............... &otilde;
.................. &Ouml;
................. &ouml;

............... &Ccedil;
............... &ccedil;
............... &Ntilde;
............... &ntilde;
< ................. &lt;
> ................. &gt;
& ................ &amp;
" ................. &quot;
.................. &reg;
............... &copy;
............ &Yacute;
............ &yacute;
.............. &THORN;
................ &thorn;
................ &szlig;

Referencias:
Tutorial de HTML; Disponvel em:
http://www.comofazerumsite.com/criarsite/tutorial_html.html#estrutura; Acesso em 01 de
jul. de 2015
Tabela de acentos e caracteres especiais em HTML; Disponvel em:
http://www.lsi.usp.br/~help/html/iso.html; acesso em 01 de jul. de 2015.
DownloadNotepad++6.7.9.2; Disponvel em : https://notepad-plus-plus.org/download/v6.7.9.2.html;

acesso em 01 de jul. de 2015.

Escola Estadual Dr Joo Ponce de Arruda


Curso: Tcnico em Informtica - turma 2015
Disciplina: Linguagem para Internet
Professora Miriam