HTML

Ferramentas de Construção de Websites
Izequiel Pereira de Norões
Módulo 2 – HTML
Apresentação
• Professor:
– Izequiel Pereira de Norões
– Bacharel em Informática (Unifor)
– Pós em Gerência Estratégica da Informação (Unifor)
– Pós em Tecnologias da Informação – Ênfase Web (UFC)
Contato: izequiel@gmail.com
Material da disciplina:
http://fatene.ipn.eti.br
Izequiel Pereira de Norões - 2006

HTML
• Objetivos:
– Apresentar os fundamentos básicos de
criação de websites com a linguagem
HTML;
– Apresentar uma visão geral da
linguagem;
– Conhecer as principais TAGs utilizadas;

HTML - HyperText Markup Language
• HTML (acrônimo para a expressão
inglesa HyperText Markup Language,
que significa Linguagem de Marcação
de Hipertexto) é uma linguagem de
marcação utilizada para produzir
páginas na Web. Documentos HTML
podem ser interpretados por
navegadores. A tecnologia é fruto do
"casamento" dos padrões HyTime e
SGML.
• HyTime é um padrão para a representação

estruturada de hipermédia e conteúdo
baseado em tempo. Um documento é visto
como um conjunto de eventos
concorrentes dependentes de tempo
(como áudio, vídeo, etc.), conectados por
hiper-ligações. O padrão é independente
de outros padrões de processamento de
texto em geral.

• SGML é um padrão de formatação de

textos. Não foi desenvolvido para
hipertexto, mas tornou-se
conveniente para transformar
documentos em hiper-objetos e para
descrever as ligações.

• Estrutura documentos a serem
apresentados por agentes de
usuários – ex. browsers;
• O texto de um documento é incluído
diretamente no código HTML;
• Define âncoras e elos para a ligação
entre documentos;
• Define outros conteúdos a serem
incluídos no documento;
• Figuras, áudio, vídeo, Applets e
outras tecnologias podem ser
incorporadas ao código;
• Define Scripts a serem interpretados
pelo browser;
• Define Meta-Informações de um
documento.

• Desde a publicação do HTML 4.0 no final
de 1997, o grupo de trabalho da W3C tem
cada vez mais — e de 2002 a 2006, de
forma exlusiva — focado no
desenvolvimento do XHTML, uma
especificação HTML baseada em XML que
é considerada pela W3C como um
sucessor do HTML. O XHTML aplicada uma
sintaxe mais rigorosa e menos ambígua
para tornar o HTML mais simples de ser
processado e extendido.
HTML – Modelo de Documento
<HTML>
<HEAD>
<TITLE> Meu documento </TITLE>
</HEAD>
<BODY>
Oi Pessoal!
</BODY>
</HTML>
HTML – Usos comuns
• Estruturação apenas (recomendado)
– Estrutura o documento: títulos, listas,
parágrafos...
• Os aspectos estéticos são determinados
pelas CSS – Folhas de Estilo em Cascata
• Estruturação e apresentação
– Usa-se elementos avançados da HTML para
determinar os aspectos estéticos
• Recipiente de conteúdos
– Usa-se a HTML apenas como base para a
inclusão de outras tecnologias.
HTML – Estrutura e TAGs
• A estrutura de um documento é definida
por elementos que são marcados por
“TAGS”
• Cada tag é escrita entre os sinais
“<“ e “>”  <TAG>
• As tags são definidas a partir da SGML –
Standard Generalized Markup Language
• A sintaxe de uma HTML é definida num
documento SGML chamado DTD –
Document Type Definition
HTML – estrutura básica, elementos e tags

HTML – Composição Simples
• Cabeçalho (Head)
– Título (Title)
• Elementos do Corpo (Body)
– Cabeçalhos
– Parágrafos
– Listas não-ordenadas (unordered list)
– Destacando texto
– Outros elementos de marcação

HTML – Cabeçalho
• <HEAD> ... </HEAD>
– Coloca-se o título do documento
– Coloca-se informações sobre o
documento (autor,língua)
– Descreve-se elementos de Estilos
<STYLE>
– Descreve-se programa Script <SCRIPT>
– Define-se ligações com outros
documents <LINK>

HTML - Título
• <TITLE> ... </TITLE>
– Deve ser curto e descrever o propósito
do documento
– É a maneira com o browser identifica
para o usuário o um documento Aparece
na barra superior do browser, nos
bookmarks,nos menus de avançar e
voltar, etc.

HTML - Corpo
• <BODY> ... </BODY>
– É onde está colocada a parte do
documento que será apresentada pelo
browser
– Contém o conteúdo textual do
documento
– Contém os elementos que estruturam o
documento
– Contém os elementos que incluem
conteúdos de imagens, sons, vídeo
– Contém os elementos de formulário
HTML – Cabeçalhos de texto
• <H1>... </H1>
• <H2> ... </H2>
• ...
• <H6> ... </H6>
– Estruturado em 6 níveis
– Utilizados em títulos principais e seções do
texto
• do documento
– Existe um formato pré-definido
• Pode ser alterado por atributos ou estilos.
HTML - Título
do documento
voltar, etc.

HTML - Título
do documento
voltar, etc.

HTML - Título
do documento
voltar, etc.

HTML – Marcações de parágrafo
• <P> ... </P>
– Marca o início de um parágrafo
– A marcação de fim é opcional, um novo
parágrafo ou um outro elemento de
estruturação indicam o fim do parágrafo
– Espaços e “CRLF” não alteram o
parágrafo
– Pode ser alterado por atributos ou
estilos

HTML – Listas
• Listas não ordenadas <UL>
• Listas ordenadas <OL>
• Listas de definições <DL>
• As listas podem ser aninhadas

HTML – Listas não ordenadas
• <UL>
• <LI>
• <LI>
• ...
• </UL>
• Utiliza-se para listar tópicos
– O elemento de lista <LI> é necessário,
mas não tem terminação
– <LI> é usado também em Menus e
Listas ordenadas
HTML – Listas ordenadas
• <OL>
• <LI>
• <LI>
• ...
• </OL>
– Utiliza-se para listar tópicos numerados
– Pode-se aninhar lista

HTML – Elementos em destaque
• <EM> ... </EM>
– Ênfase. Normalmente em itálico
• <STRONG> ... </STRONG>
– Ênfase forte. Normalmente em negrito
– Devem ser colocados no corpo
delimitando o texto a ser destacado
– São elementos lógicos, ao invés de
físicos como: <I>, para itálico, <B>
para negrito e <TT> para fonte
typewriter
HTML – Outros elementos de marcação
• <HR>
– Desenha uma linha horizontal
proporcional a área de exibição
• <BR>
– Introduz uma quebra de linha sem
inicial um novo parágrafo
•
– Força um espaço em branco no texto

HTML – Imagens e elos de hipertexto
• Incluindo imagens
– Alinhamento
– Imagens como links
– Texto alternativo
• Âncoras e elos de hipertexto
– Definindo âncora origem com <A HREF...>
– Definindo âncora destino com <A NAME...>

HTML – incluindo imagens
• <IMG SRC=“nomearq”>
– “Nomearq” deve o nome do arquivo precedido
ou não do path e da URI do servidor onde está
o arquivo
• <IMG SRC=“nomearq” ALIGN=“posição”>
– Posição pode ser top, middle ou bottom
• <IMG SRC=“nomearq” ALT=“[texto]”>
– O texto deve descrever sucintamente a
imagem para os casos nos quais ela não puder
ser exibida

HTML – criando hipertextos
• Um dos objetivos da HTML é permitir
a construção de hipertextos
• Hipertextos estruturam documentos
em páginas, âncoras e elos
• Os elos interligam as páginas
• Um elo é definido por uma âncora
origem e uma âncora destino
• O usuário lê um hipertexto
percorrendo âncoras
HTML – Elos e âncoras
• Um elo define a ligação entre um trecho
de um documento a um outro documento,
ou trecho de outro documento
• Elos são definidos por âncoras origem e
destino
• A âncora origem é o trecho do documento
exibido que quando clicado “leva” ao
documento destino
• A âncora destino é um arquivo completo
ou o início de um trecho do documento

HTML – Hipertexto

• Âncoras e elos são definidos em documentos
HTML através das Tags e da URI
• Âncora origem
– <A HREF=“URI#destino”> nome_do_elo </A>
• Âncora destino
– <A NAME=“destino”>

• Símbolo #
– Usado no protocolo HTTP para referenciar trecho de um
documento HTML.
• Documento A tem a seguinte âncora origem
• <A
HREF=“http://fatene.ipn.eti.br/~zec/inicio.html#aval
iacao”> Avaliação </A> (novo!)
• Documento B tem a seguinte âncora destino
– <A NAME=“avaliacao”> Avaliação </A>
• No mesmo documento B é necessário apenas a
origem
– <AHEF=“#avaliacao”> Avaliação </A> (novo!)

HTML – Tabelas
• O modelo de tabelas da HTML permite
organizar dados em linha e colunas
• Os dados podem ser texto, imagens, elos,
formulários, outras tabelas, etc.
• Cada tabela pode ter uma legenda e um
sumário associada si
• Tabelas não devem ser utilizadas para
controlar o layout de páginas, embora isto
seja uma prática constante

HTML – Elementos de uma tabela
• Os principais elementos que definem uma tabela
em HTML são tabela, linha e células
• Que são marcados pelas tags:
<TABLE>
<TR><TD> l1d1 <TD> l1d2
<TR><TD> l2d1 <TD> l2d2
</TABLE>
• OBS: </TR> e </TD> são opcionais

HTML – Elementos de uma tabela

• Existem dois tipos de células:
– Cabeçalho, que é marcado com a tag <TH>
– Dado, que é marcado com a tag <TD>
• São visualizados de forma distinta

HTML – Exemplo de cabeçalho e dados

HTML – Bordas e espaçamentos
• A borda, e o espaçamento inter- e intra-células podem ser
controlados pelos atributos, respectivamente:
– <TABLE BORDER=“3”
CELLSPACING=“10”
CELLPADDING=“10”>

HTML – Tamanho e alinhamento
• O tamanho da tabela e de cada célula pode ser
controlado pelo atributo width
• O valor deste atributo pode ser
– Um valor absoluto em pixels
– Um valor percentual em relação à área de exibição do
browser
– Um valor proporcional a outra células
• O alinhamento de cada célula deve ser definido
com o atributo align

HTML – Outros atributos
• Usando atributos ROWSPAN e COLSPAN podese
definir que uma célula estenda-se por outras
células
• Cores de fundo podem ser definidas usando-se o
atributo BGCOLOR
• A acessibilidade pode ser melhorada usando-se o
elemento CAPTION e o atributo SUMMARY

HTML – Frames
• Frames (quadros) permitem múltiplas visões
dodocumento;
• Podem ser janelas independentes ou sub-janelas;
• Cada visão pode ser controlada de maneira
independente pelo usuário;
• Uma visão pode conter, p.ex. um menu, outra
um banner e uma terceira um documento.

HTML – Frames
• Um documento HTML com frames é chamado
frameset document
• Não possui corpo (BODY), apenas o cabeçalho
(HEAD) e o elemento FRAMESET
• Se o browser não tem capacidade de exibir
frames, é mostrado o conteúdo especificado pelo
elemento NOFRAMES.

HTML – Frames
• A estrutura de um frameset é
<HEAD> ... </HEAD>
<FRAMESET rows=“posicoes”>
<FRAME src=“URI”>
<FRAME src=“URI”>
...
<NOFRAMES> ... </NOFRAMES>
</FRAMESET>.
HTML – Frames
• O elemento frameset deve especificar se a divisão
será feita em linhas ou colunas
• Os valores dos atributos rows e cols podem ser
absolutos ou porcentagem
• Para cada linha ou coluna deve estar associadoum
elemento FRAME
• Em cada elemento FRAME deve-se indicar a URI do
documento a ser exibido através do atributo
• src=
• Um frameset pode conter outro frameset

HTML – Frames
• Pode-se usar um frame como menu que controla a
exibição de um outro frame.
• No frame que contém os documentos a serem
exibidos:
<FRAME name=“nome” src=“URI”>
• No frame que contém o menu:
<A href=“URI” target=“nome”>

HTML – Frames
<HTML>
<HEAD>
<TITLE>Coloque o título da página</TITLE>
</HEAD>
<FRAMESET COLS="20%,80%">
<FRAME SRC="texto1.htm" name="esquerda">
<FRAME SRC="texto2.htm" name="direita">

<NOFRAME>Conteúdo do NOFRAME</NOFRAME >
</FRAMESET>
</HTML>

HTML – Frames
<HTML>
<HEAD>
</HEAD>

</FRAMESET>
</HTML>

HTML – Frames
<HTML>
<HEAD>
</HEAD>

</FRAMESET>
</HTML>

HTML – Frames - Aparência
• Os seguintes atributos controlam a aparência dos
frames:
– Frameborder = 1 ou 0
– Scrolling = auto, yes, no
– noresize
– Marginwidth = pixels
– Marginhight = pixels

HTML – Objetos, imagens e aplets
• Elemento OBJECT
• Inclui imagens, applets e outros objetos em
documentos HTML
• Recomendação do W3C na versão 4.01 da HTML
• O elemento APPLET deve ser evitado

• Na descrição de um objeto a ser incluído deve
• especificar
• – a URI do dado
• – O tipoMIME do dado
<OBJECT data=“URI” type=“mimetype”>
Texto caso o browser não consiga exibir o dado.
</OBJECT>

<HTML>
<BODY>
<P>Eis aqui uma perspectiva do Grand Canyon:
<OBJECT data="canyon.png" type="image/png">
Esta é uma <EM>perspectiva</EM> do Grand
Canyon.
</OBJECT>
</BODY>
</HTML>

Antigo!!!
<APPLET code="AudioItem" width="15“ height="15">
<PARAM name="snd" value="Hello.au|Welcome.au">
O applet Java que toca um som de boas-vindas.
</APPLET>
Novo!!!
<OBJECT codetype="application/java"
classid="AudioItem" width="15" height="15">
<PARAM name="snd“ value="Hello.au|
Welcome.au">
O applet Java que toca um som de boas-vindas.
</OBJECT>
HTML – Outros elementos
• Blockquote
– <BLOCKQUOTE> texto </ BLOCKQUOTE>
• Usado para citações longas que podem incluir
parágrafos
– <Q> texto </Q>
• Usado para citações curtas dentro de um
parágrafo

• Blockquote
– <SUP> texto </SUP>
• O texto delimitado pelo marcadores aparece
sobrescrito
E = mc<SUP>2</SUP>
– <SUB> texto </SUB>
• O texto delimitado pelo marcadores aparece
subscrito
H<SUB>2</SUB>O

• <PRE> texto </PRE>
– Determina que o texto será exibido da forma
como digitado
– Espaços em branco e quebras de linha são
mantidos
– É usado um fonte fixo
• <CODE> código </CODE>
– Descrição de programas de computador
– Permite apresentar um código fonte de um
programa
– Ignora os espaços e quebras de linha no código
fonte
• <DEL> texto </DEL>
– Utilizado para marcar um texto retirado
com uma linha cortando o texto
• <INS> texto </INS>
– Utilizado para marcar um texto inserido
com sublinhado
– É o autor quem deve indicar o que retirou
ou incluiu

• ABBR - Permite indicar a ocorrência de
abreviações
<P><ABBR title="World Wide Web">WWW
</ABBR><ABBR lang="fr" title="Société
Nationale desChemins de Fer">SNCF</ABBR>
<ABBR lang="es" title="Doña">Doña</ABBR>
<ABBR title="Abbreviation">abbr.</ABBR></P>

HTML – Mapas de Imagens
• Partes de uma imagem podem funcionar
como âncoras distintas
• Permite associar áreas de uma imagem com
uma determinada URI
<IMG SRC=“URI” USEMAP=“nomemapa”>
<MAP NAME=“#nomemapa”>
<AREA SHAPE=“tipodaforma”>
...
</MAP>

• A forma geral para especificar uma
área e associar um elo é:
<AREA SHAPE=“forma básica”
COORDS=“coordenadas”
HREF=“URI”
ALT=“texto alternativo”>
• Pode-se não associar o elo:
<AREA SHAPE=“...” COORDS=“...”
NOHREF>
• Existem três formas básica: retângulo,
círculo, polígono
• Deve-se especificar a área indicando o
tipo da forma e as respectivas
coordenadas
– Rect: esq-x, topo-y, dir-x, base-y
– Circle: centro-x, centro-y, raio
– Poly: X1,X1, X2,Y2, ... Xn,Yn
<AREASHAPE=“circle”COORDS=“42,171,45 ...>

<p>Clique nos planetas:</p>
<img src ="planets.gif“ width ="145" height ="126"
alt="Planets“ usemap ="#planetmap" />
<map id ="planetmap“ name="planetmap">
<area shape ="rect" coords ="0,0,82,126“ href
="sun.htm" target ="_blank“ alt="Sol" />
<area shape ="circle" coords ="90,58,3“ href
="mercur.htm" target ="_blank"
alt="Mercurio" /><area shape ="circle" coords
="124,58,8“ href ="venus.htm" target ="_blank"
alt="Venus" />
</map> </p>

HTML – Formulários
• Introdução
• Controles
• O elemento INPUT
• O elemento BUTTON
• O elemento SELECT
• O elemento TEXTAREA
• Labels e estruturação de formulários

• Um formulário HTML é uma seção do corpo
do documento
• Um formulário é delimitado pelas tags
<FORM> ...
</FORM>
• Pode conter texto, marcações e controles
• Os controles são utilizados para possibilitar
interação do usuário com web site Exemplos
de controles são:– Botões, caixa de texto,
menu, labels, etc.

<FORM action=“URI” method=“GET”>
<P>
<INPUT type=“text” name=“primnome”><BR>
<INPUT type=“text” name=“sobrenome”><BR>
<INPUT type=“radio” name=”sexo” value=“M”>Masc
<INPUT type=“radio” name=”sexo” value=“F”>Fem
<INPUT type=“submit” >
<INPUT type=“reset”></P>
</FORM>

• Um formulário HTML é uma seção do corpo
do documento
• Um formulário é delimitado pelas tags
<FORM> ...
</FORM>
• Pode conter texto, marcações e controles
• Os controles são utilizados para possibilitar
interação do usuário com web site Exemplos
de controles são:– Botões, caixa de texto,
menu, labels, etc.

• Visualização de um formulário.

• Funciona como recipiente de outros
controles
• Pode conter texto e outros elementos
• Pode ser identificado através dos atributos
id ou name
• Deve ter associado uma ação através do
atributo action cujo valor é uma URI
• Permite especificar o método de submissão
dos dados através do atributo method que
pode ser GET ou POST.

• Cada formulário, além de texto e de
outros elementos HTML, contém um
conjunto de controles que pertencem
ao seu escopo;
• Cada controle possui um tipo, um
nome, um valor e outros atributos;
• O tipo determina qual é o controle;
• O nome é associado ao valor fornecido
pelo usuário durante o preenchimento
do formulário;
HTML – Formulários - Action
• Cada formulário possui alguns
elementos chaves padronizados;
• O atributo action associa o formulário
com uma URI onde deverá estar um
programa;
• Este programa deverá ser capaz de
processar os dados fornecidos através
do formulário;
• O controle submit é um botão que
pode ser pressionado pelo usuário;
• ENVIANDO DADOS VIA POST:
POST /cgi-bin/programa1 HTTP/1.0
Accept : text/plain
Accept : apliation/x-html
Accept :
.
.
.
User-Agent: NSCA Mosaic for X Window System/2.4
Content-type application/x-www-form-urlencoded
Content-length: 58
Nome=izequiel&sobrenome=Norões&sexo=M
• ENVIANDO DADOS VIA GET:
GET /cgi-
bin/programa1?prinnome=Izequiel&sobrenome=No
roes...
Accept : text/plain
Accept : apliation/x-html
Accept :
.
.
.
User-Agent: NSCA Mosaic for X Window System/2.4
(uma linha contendo apenas CRLF)

HTML – Formulários - Controles
• Usuários interagem com formulários
através de controles
• O nome de um controle é dado pelo
atributo name da respectiva tag HTML
• Tipos de controles:
– Buttons, checkboxes, radio buttons,
menus, text input, file select, hidden
controls

HTML – Formulários – Valores de Controles
• Um controle pode ter um valor inicial caso

especificado
• O valor fornecido pelo usuário é chamado
valor corrente de um controle
• Scripts também modificam o valor corrente
• O valor corrente é enviado junto com o
nome, quando o formulário é submetido
• O controle reset atribui o valor inicial a
todos os controles.

HTML – Formulários – INPUT
• Permite especificar a maioria dos controles
• O tipo do controle é especificado pelo
atributo type e pode ser:
– text | password | checkbox | radio | submit |
reset | file | hidden | image | button
• O atributo value permite definir o valor
inicial
• O atributo name define o nome a ser
associado ao valor
• Outros atributos são específicos de um
determinado controle

HTML – Formulários – BUTTON
• Usado como o input, mas é mais flexível
• O botão pode ter um conteúdo específico
que pode ser texto ou imagem
• Alguns browsers oferecem uma visualização
melhor quando usa-se button
• Forma geral
<BUTTON> texto e/ou <IMG ...></BUTTON>

HTML – Formulários – SELECT
• Define o controle menu
• Permite oferecer um conjunto de opções
que o usuário pode selecionar
• Junto com o select usa-se o elemento
option e optgroup
• O option determinar as opções do menu
• O optgroup agrupa opções relacionadas
• O atributo multiple permite que mais de
uma opção seja escolhida

HTML – Formulários – TEXTAREA
• Define um controle para entrada de texto
com múltiplas linhas;
• É necessário definir os atributos name,
rows e cols
• O valor inicial é colocado entra as tags
<TEXTAREA name=“nome” rows=“20”
cols=“80”>texto inicial</TEXTAREA>

HTML – Formulários – LABEL
• Permite associar um rótulo a um
controle
• O atributo for associa a um
identificador (id) de um controle
<LABEL for=“id_idade”>Texto do
rótulo</LABEL>
<INPUT type=“text” name=“idade”
id=“id_idade”>

HTML – Iframe
• iFrames (inline frames) é um recurso muito
utilizado em websites. Consiste na inserção
de páginas web (arquivos) dentro de
páginas web (arquivos) . Não confunda com
Frames (quadros). Frames são divisões da
mesma página (arquivo) em seções, já
iFrame não, são páginas dentro de páginas.
É importante lembrar que as iFrames são
reconhecidas somente nos navegadores
MSIE 4 , NN 6 e Opera 5 ou superiores. O
código HTML gerado para inserção de uma
iFrame é:
<iframe></iframe>
HTML – Iframe
• Atributos básicos de uma iFrame
– Name  nome da iframe;
– ID  (identificação da iframe;
– Width  (largura em pixels);
– Height  (altura em pixels);
– Src  (caminho para o conteúdo da iframe. Pode
ser um URL , um outro arquivo , uma imagem
etc...);
– Scrolling  (determina a presença ou não de
barra de rolagem - yes, no, auto);
– Marginwidth = "x“  Determina a largura em
pixels da margem horizontal.

HTML – Iframe
• Atributos básicos de uma iFrame
– Marginheight = "x“  Determina a largura em
pixels da margem vertical.
– Frameborder="x“  Determina a espessura da
linha divisória que aparece entre a página e o
iframe. Sendo que x é o valor da linha em pixels.
– Vspace="x“  Determina o espaço vertical entre
o iframe e o resto do documento html, sendo
que x é o valor do espaço em pixels.
– Hspace="x“  Determina o espaço horizontal
entre o iframe e o resto do documento html,
sendo que x é o valor do espaço em pixels.

HTML – Iframe
• Exemplo de uma iframe:

<iframe id=macromedia_index name="iframe01"
src="http://www.macromedia.com" width="600"
height="400" scrolling="Auto"></iframe>

Próximo módulo...
• CSS

HTML

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Ferramentas de Construção de Websites

Izequiel Pereira de Norões

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

• HyTime é um padrão para a representação

Izequiel Pereira de Norões - 2006

• SGML é um padrão de formatação de

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

<FRAME SRC="texto2.htm" name="direita">

Izequiel Pereira de Norões - 2006

<FRAME SRC="texto2.htm" name="direita">

Izequiel Pereira de Norões - 2006

<FRAME SRC="texto2.htm" name="direita">

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006

Izequiel Pereira de Norões - 2006