Manual de HTML

Índice

Introdução
Head
Body
Títulos
Parágrafos e quebras de linha
Listas
Formatação de caracteres
Links (ligações)
Imagens
Som
Vídeo
Formulários
CSS
Tabelas
Frames

Introdução

O HTML (HyperText Markup Language) é por assim dizer uma "linguagem" de descrição de dados, onde sobressai as hiperligações de um documento para outros ou ao próprio documento.
O HTML é destinado à criação de páginas na Web. É uma espécie de linguagem de formatação em que um ficheiro de texto é formatado através de uma série de comandos – ‘tags’.

Notas importantes:
• Os códigos HTML (tags) podem ser escritos com letras maiúsculas ou minúsculas. Para melhor visualização é recomendável escrever com maiúsculas.
A ordem dos parâmetros dos comandos é irrelevante.
• Linhas em comentário (não alteram a forma como o documento HTML é visualizado - começam com "" - servem apenas para ajudar o editor das páginas a referenciar aspectos importantes.
• Para auxiliar a compreensão do código HTML, os códigos HTML explicados serão escritos a côr azul.

Exemplo de uma página HTML simples:
<HTML>
   <HEAD>
    <TITLE>Aqui fica o título da página (que surge no topo da página)</TITLE>
  </HEAD>
  <BODY>
     Aqui fica o corpo (conteúdo) da página...
  </BODY>
</HTML>

Como se pode notar as tags (etiquetas) começam com o sinal < e terminam com o sinal >. Definem uma acção ou
comportamento e normalmente, salvo raras excepções, têm uma tag de terminação com a mesma designação mas
precedida de /.As tags deverão obrigatoriamente que ficar encadeadas e nunca alternadas. De forma a facilitar a leitura,
deve-se identar o código conforme se pode observar no exemplo anterior.

Uma página HTML, delimitada pelas tags <HTML> e </HTML>, tem duas secções principais, a secção do cabeçalho
onde se coloca o título (<TITLE>), algumas meta instruções, código de Javascript e chamadas a ficheiros externos (CSS)
que serão explicados mais tarde. A secção do <BODY> destina-se a colocar todo o conteúdo da página como texto,
imagens, som, vídeo. Para facilitar a leitura do código HTML é recomendável escrever cada instrução na sua linha.

Pode-se usar qualquer editor de texto como por exemplo o bloco de notas ou wordpad para editar uma página HTML
mas existem editores próprios que facilitam o processo de edição HTML. Um editor simples e bastante completo para o
efeito é o HTML-KIT que poderá ser livremente descarregado pela Internet e então instalado no computador.

Head

O Head serve para definir o cabeçalho e tem a seguinte estrutura e comandos:

<HEAD>
<TITLE>Manual de HTML</TITLE>

Podem existir também metatags como por exemplo:
<META NAME="description" CONTENT="Breve descrição do site">
<META NAME="keywords" CONTENT="palavra chave 1, palavra chave 2, palavra chave 3,...">
Estas metatags servem para facilitar a procura nos motores de busca.
Dentro do head podem aparecer scripts para funcionar localmente ao nível do browser. (Os scripts não acedem ao servidor)
Uma das linguagens mais utilizadas nesses scripts é o Javascript como se exemplifica seguidamente:
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

</HEAD>

Ir para o princípio

Body

O body inicia o corpo da página. Possui alguns parâmetros de entre os quais se destacam:
Background que recorre a uma imagem:
<BODY BACKGROUND="imagem_do_background.gif">
e a segunda (côr de fundo):
<BODY BGCOLOR="#ffffcc">
As cores são definidas em código Hexadecimal aos pares no formato RGB (vermelho, verde e azul)
Por exemplo, a5 em hexadecimal é igual a 5+10(a)*16=165 em decimal.
Segue-se uma tabela das côres padrão usadas na Internet:

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

Clique aqui para consultar côres que ligam entre si e ainda aqui

Existem mais 4 parâmetros que definem as côres por defeito do texto e dos links a saber:
<BODY TEXT="#000000"> texto a preto
<BODY LINK="#FF0000"> côr dos links (a vermelho neste caso)
<BODY ALINK="#00FF00"> côr do link quando é clicado (verde neste caso)
<BODY VLINK="#0000FF"> côr dos links visitados (azul neste caso)
Um exemplo completo seria:
<BODY BGCOLOR="#ffffcc" TEXT="#000000" LINK="#FF0000" ALINK="#00FF00" VLINK="#0000FF" ONLOAD="javascript:imprimir_ola() ONUNLOAD="javascript:imprimir_ola()">
(ONLOAD="javascript:imprimir_ola()" significa que quando caregar a página irá chamar a função javascript com o nome imprimir_ola(); analogamente ONUNLOAD irá chamar a função javascript imprimir_ola() quando a página fôr fechada)
Como se pode observar do exemplo anterior, a tag BODY tem vários parâmetros que servem para configurar alguns dos elementos que definem o aspecto visual da página.

Ir para o princípio

Títulos

Código HTML	Forma como é visualizado no browser
<H1>Heading 1</H1>	Heading 1
<H2>Heading 2</H2>	Heading 2
<H3>Heading 3</H3>	Heading 3
<H4>Heading 4</H4>	Heading 4
<H5>Heading 5</H5>	Heading 5
<H6>Heading 6</H6>	Heading 6

Parágrafos e quebras de linha

<P>Isto é um parágrafo</P>
Forma como surge no browser:
Isto é um parágrafo

<P ALIGN="left">Parágrafo alinhado à esquerda</P>
Forma como surge no browser:
Paragrafo alinhado à esquerda

<P ALIGN="center">Parágrafo alinhado ao centro</P>
Forma como surge no browser:

Parágrafo alinhado ao centro

<P ALIGN="right">Parágrafo alinhado à direita</P>
Forma como surge no browser:

Parágrafo alinhado à direita

<P ALIGN="justify">Parágrafo extenso para ser alinhado à direita</P>
Forma como surge no browser:
Parágrafo extenso para ser alinhado à direita

Para continuar a escrita na linha imediatamente abaixo usa-se a tag <BR> (quebra de linha portanto).

Os espaços em HTML são conseguidos com a instrução   (non breaking space)

O código HTML para evidenciar o separador que se vê em baixo (desenho de uma linha) é <HR>
Esta tag pode ter alguns parâmetros como a largura (WIDTH em pixeis ou em %), a côr (COLOR) ou espessura
(HEIGHT)

Evidenciar partes de texto
Exemplo para evidenciar um texto:
Para evidenciar parte de um texto usa-se <blockquote> texto a ser evidenciado</blockquote>

texto a ser evidenciado

Continua...

Ir para o princípio

Listas

Listas não ordenadas:

Código HTML

Como surge no browser

<UL>
   <LI>Monday
   <LI>Tuesday
   <LI>Wednesday
   <LI>Thursday
   <LI>Friday
</UL>

Monday
Tuesday
Wednesday
Thursday
Friday

Listas ordenadas:

Código HTML	Como surge no browser
<OL> <LI>Monday <LI>Tuesday <LI>Wednesday <LI>Thursday <LI>Friday </OL>	Monday Tuesday Wednesday Thursday Friday

Listas definidas:

Código HTML (Usando apenas DL)	Como surge no browser
<DL> <DT>Do <DD>a deer, a female deer <DT>Re <DD>a drop of golden sun <DT>Mi <DD>a name I call myself </DL>	Do a deer, a female deer Re a drop of golden sun Mi a name I call myself

Ir para o princípio

Formatação de caracteres

Código HTML	Como surge no browser
<EM>para realçar uma frase</EM>	para realçar uma frase
<CITE>consegue-se o mesmo efeito</CITE>	consegue-se o mesmo efeito
<B>aqui fica texot em negrito</B>	aqui fica texto em negrito
<I>aqui fica texot em itálico</I>	aqui fica texot em itálico
<U>Para sublinhar uma frase usa-se o underline</U>	Para sublinhar uma frase usa-se o underline
frase <SUP>superscript</SUP> continua	frase ^superscript continua
frase <SUB>subscript</SUB> continua	frase _subscript continua
<FONT COLOR="green">texto em côr verde</FONT>	texto em côr verde
<FONT SIZE="2">texto com tamanho 2</FONT>	texto com tamanho 2
<FONT FACE="Times New Roman">Tipo de letra</FONT>	Tipo de letra
<FONT COLOR="blue" SIZE="4">vários parâmetros </FONT>	vários parâmetros
frase <TT>com igual espaçamento (Typewriter) </TT> continua	frase `igual espaçamento (Typewriter)` continua

Ir para o princípio

Links

Código HTML	Como surge no browser
Ir para uma página com um endereço absoluto: <A HREF="http://www.inforensino.com/index.php">Site da InforEnsino</A>	Site da InforEnsino
Ir para uma página com um endereço relativo (no meu disco por exemplo): <A HREF="minha_pagina.html">Minha página</A>	Minha página
Ir para uma página com um endereço relativo situada noutra pasta: <A HREF="nome_da_outra_pasta/pagina.html">Página noutra pasta</A>	Página noutra pasta
Ir para uma nova página e abrir numa nova janela: <A HREF="nova_pagina.html" TARGET="_BLANK">Nova página </A>	Nova página
Link através de uma imagem: <A HREF="nova_pagina.html"><IMG SRC="imagem.gif" BORDER="0"></A>	imagem correspondente ao ficheiro imagem.gif
Ir para uma posição da página do documento actual: <a href="#ancora"> Ir para âncora</a> No documento deverá haver a seguinte instrução: <a name="ancora">Âncora</A>	Ir para âncora
<A HREF="mailto:inforensino@mail.com">Enviar e-mail para a InforEnsino</A>	Enviar e-mail para a InforEnsino

Ir para o princípio

Imagens

Para colocar imagens na página usa-se o seguinte código:
<IMG SRC="nome_da_imagem">
Se a imagem estiver noutra pasta que não a corrente usar o seguinte código:
<IMG SRC="caminho_para_a_pasta_da_imagem/nome_da_imagem">

Exemplos:
<IMG SRC="minha_foto.jpg">
<IMG SRC="imagens/minha_foto.jpg"> minha_foto.jpg está na pasta imagens
<IMG SRC="../minha_foto.jpg"> minha_foto.jpg está na pasta anterior à pasta corrente

<IMG SRC="../../minha_foto.jpg"> minha_foto.jpg está 2 pastas antes da pasta corrente

Atributos das imagens
Etiqueta ALT
<IMG SRC="minha_foto.jpg" ALT="Aqui fica a etiqueta">
Border
<IMG SRC="minha_foto.jpg"ALT="etiqueta" border="0" > imagem sem border
<IMG SRC="minha_foto.jpg"ALT="etiqueta" border="0" align="right" height="100" width="200">
(alinhada a direita com altura de 100 pixeis e largura de 200)

Link para uma página clicando numa imagem
<a href="www.inforensino.com"><IMG SRC="minha_foto.jpg"></A>

Ir para o princípio

Som

A inserção de som de fundo pode ser efectuado com a seguinte combinação de tags HTML:

<BGSOUND SRC="nome_ficheiro_som.wav">
ou
<EMBED SRC="nome_ficheiro_som.wav" WIDTH="140" HEIGHT="25" AUTOSTART="TRUE" CONTROLS="SMALLCONSOLE" VOLUME="60" OOP="FALSE"></EMBED>

Para colocar som através de um link usa-se o comando

<A HREF="http://www.inforensino.com/sons/som.mid">Clique aqui para ouvir o som</A>

Ir para o princípio

Vídeo

A inserção de vídeo de fundo pode ser efectuado com a seguinte combinação de tags HTML:

<BGSOUND SRC="nome_ficheiro_video.mov">
ou
<EMBED SRC="nome_ficheiro_video.mov" WIDTH="320" HEIGHT="240" AUTOSTART="TRUE"></EMBED>

Para colocar vídeo através de um link usa-se o comando

<A HREF="http://www.inforensino.com/videos/video.mov">Clique aqui para vêr o vídeo</A>

Ir para o princípio

Formulários

Um formulário toma a seguinte forma:

<FORM method="post" action="caminho_para_a_pagina_destino_dos_dados/script_de_tratamento_dos_dados">.. elementos do formulário neste espaço..
</FORM>

Elementos do formulário:

Nome

Elemento

HTML

Caixa de texto -Text box <INPUT type="text" name="caixa" size="20" maxlength="60">

Área de texto -Text area <TEXTAREA name="texto" rows="3" cols="20"></TEXTAREA>

Botão de múltipla escolha - Rádio button <INPUT type="radio" name="produto" value="pizza">

Botão de selecção - Check box
<INPUT type="checkbox" name="produto" value="pizza">

Liat de selecção -List box <SELECT name="cor">
<OPTION SELECTED>Escolher a côr nesta caixa
<OPTION>vermelho</OPTION>
<OPTION>preto</OPTION>
<OPTION>verde</OPTION>
<OPTION>azul</OPTION>
</SELECT>

Botão de comando -command button <INPUT type="submit" value="Enviar!">

Enviar ficheiro-Upload field <input type="file" name="file">

Campo escondido -hidden field (permite guardar valores de variáveis). <input type="hidden" name="hiddenField">

Ir para o princípio

CSS

As folhas de estilo CSS (Cascate Style Sheets) permitem controlar a aparência de elementos HTML.

As vantagens são:
- grande liberdade de formatação
- maior produtividade (mais rapidez)
- maior facilidade de actualização

As CSS permitem, através das propriedades disponíveis, uma grande liberdade de formatação dos conteúdos. a formatação
não necessita de ser feita linha a linha podendo configurar-se de uma só vez todos os parágrafos de um documento HTML.

Comparação de HTML e CSS

<HTML>
<HEAD>
<TITLE>Em HTML</TITLE>
</HEAD>
<BODY>
<H1><FONT COLOR="#00ff00">Título nível 1</FONT></H1>
<H2><FONT COLOR="#dda0dd">Título nível 2</FONT></H2>
<P><FONT COLOR="#0000ff">Parágrafo</FONT></P>
</BODY>
</HTML>

O mesmo código em CSS

<HTML>
<HEAD>
<TITLE>Em CSS</TITLE>
<STYLE TYPE="text/css">
h1 {color: #00ff00}
h2 {color: #dda0dd}
p{color: rgb(0,0,255)}
</STYLE>
</HEAD>
<BODY>
<H1>Título nível 1</H1>
<H2>Título nível 2</H2>
<P>Parágrafo</P>
</BODY>
</HTML>

Sintaxe do CSS

Sintaxe	Exemplo
selector {propriedade: valor}	body {background-color: #FFFFFF}
selector {propriedade: valor; propriedade: valor}	p{text-align:center; color:red}
selector,selector,selector{propriedade:valor}	h1,h2,h3 {color:green}

Tipos de folhas de estilo

Internas

O s códigos css colocam-se embutidos na própria página HTML na zona das tags <HEAD> e </HEAD>
e dentro das tags
<STYLE TYPE="text/css">
...tags CSS
</STYLE>

Externas

Colocam-se as tags CSS (e somente as TAGS) num ficheiro de texto, por exemplo formatacao.css, sendo este ficheiro
depois chamado na página HTML com a tag:

<LINK REL="stylesheet" TYPE="text/css" HREF="formatacao.css" />

colocada dentro das tags <HEAD> e </HEAD>

Selectores de Classe

Para se criar uma classe utiliza-se o "." seguido do nome da classe como por exemplo:
.rodape {color: blue} /* selector de classe inserido na folha de estilo */

A clase é posteriormente invocada através do atributo class
<h1 class=rodape>Este elemento está associado à classe rodapé</h1>
<h2 class=rodape>E este também</h2>

Para criar uma classe associada a um tipo de elementos, p por exemplo, utiliza-se o nome do elemento, seguido
de "." e do nome da classe. Exemplo:
p.textonormal {color: blue} /* uma classe de selectores de p */
p.textodestaques{color:red} /* outra classe de selectores de p */

As classes são posteriormente invocadas através do atributo class:
<p class=textonormal>Este parágrafo é azul</p>
<p classe=textodestaques>Este parágrafo é a vermelho</p>

Nota: os nomes das classes podem ter letras, números, - mas não podem começar com números.

Selectores de ID

Um selector de ID permite identificar uma única ocorrência de um elemento HTML e atribuir-lhe um estado. Começam
com o caracter # seguidos do nome do selector. Exemplo:

#abc123 {color:red; background:black}
O Id é posteriormente invocado através de:
<p id=abc123>Este elemento e só este tem este tipo de formatação>

Ir para o princípio

Tabelas

A estrutura de uma tabela por exemplo com 3 linhas e duas colunas seria:
<TABLE BORDER="1">
<TR><TD>1 linha, 1 coluna</TD><TD>1 linha, 2 coluna</TD></TR>
<TR><TD>2 linha, 1 coluna</TD><TD>2 linha, 2 coluna</TD></TR>
<TR><TD>3 linha, 1 coluna</TD><TD>3 linha, 2 coluna</TD></TR>
</TABLE>
A forma desta tabela seria:

1 linha, 1 coluna	1 linha, 2 coluna
2 linha, 1 coluna	2 linha, 2 coluna
3 linha, 1 coluna	3 linha, 2 coluna

Outra tabela exemplo seria:

1 linha, 1 coluna 1 linha, 2 coluna

2 linha, 1 coluna 2 linha, 2 coluna

3 linha

Esta tabela é construida da seguinte maneira:
<TABLE BORDER="1">
<TR><TD>1 linha, 1 coluna</TD><TD>1 linha, 2 coluna</TD></TR>
<TR><TD>2 linha, 1 coluna</TD><TD>2 linha, 2 coluna</TD></TR>
<TR><TD colspan="2">3 linha</TD></TR>
</TABLE>

Os parâmetros de uma tabela mais usados são:
BORDER (alinhamento da tabela - exmplo <TABLE ALIGN="CENTER"...)
ALIGN (alinhamento da tabela - exmplo <TABLE ALIGN="CENTER"...)
BGCOLOR (côr de fundo - exemplo <TABLE BGCOLOR="RED"...
CELLPADDING (espessura da célula - exemplo <TABLE CELLPADDING="2"...
CELLSPACING (afastamento entre células - exemplo <TABLE CELLSPACING="2"...
WIDTH (largura da tabela - exemplo <TABLE WIDTH="75%"... ou <TABLE WIDTH="800"

Os parametros mais usados das linhas(TR) são: align, bgcolor, bordercolor, valign (para o alinhamento vertical)

Os parametros mais usados das colunas(TD) são: align, bgcolor, colspan, valign , width

Ir para o princípio

Frames

menu (menu.html)	topo (topo.html)
	principal (principal.html)

Divisão de uma janela em várias

Definir a página que faz a divisão nas restantes como a seguir se exemplifica:

<HTML>
<HEAD><TITLE>Página com Frames</TITLE></HEAD>

<FRAMESET COLS ="160,*" BORDER="0" FRAMESPACING="0">
<FRAME SRC="menu.html" NAME="menu" NORSIZE FRAMEBORDER="NO">

     <FRAMESET ROWS ="90,*">
           <FRAME SRC="topo.html" NAME="topo" NORESIZE SCROLLING="NO" FRAMEBORDER="NO">
           <FRAME SRC="principal.html" NAME="principal" FRAMEBORDER="NO">
      </FRAMESET>

</FRAMESET>

<NOFRAMES>
<BODY BGCOLOR="#FFFFFF">
Esta página usa frames, mas o seu browser não as consegue visualizar.
</BODY>
</NOFRAMES>
</HTML>

Para definir frames, utiliza-se o ‘tag’ <FRAMESET>. Como não se trata propriamente do corpo da página, este ‘tag’ define uma área após a área <HEAD>, mas não contido dentro do ‘tag’ <BODY>. Ao utilizar o parâmetro COLS, divide a página em colunas, neste caso definidas por "160,*". Isto significa que são criadas duas, uma com 160 pixeis de largura e outra que ocupa o resto do espaço disponível no ecrã. As medidas das frames podem ser fornecidas em pixeis, em percentagem do espaço disponível ou por um asterisco, que significa ‘o resto’. Estas colunas são definidas da esquerda para a direita. Temos também BORDER e FRAMESPACING, que definem a borda e o espaçamento entre frames.

Dentro de <FRAMESET>, podemos então definir a frame propriamente dita ou subdividi-la pela ordem em que foram criadas as colunas. Temos então inserido o ‘tag’ <FRAME>, que se refere à primeira coluna (de 160 pixeis). SRC define qual o ficheiro HTML a ser exibido nessa frame, NAME, muito importante, indica qual o nome da frame, para que as links possam lá recair (veremos isto mais à frente). NORESIZE indica que a frame não pode ser redimensionada com o rato, e FRAMEBORDER, mais uma vez, a borda da frame. Utiliza-se <FRAME FRAMEBORDER> e <FRAMESET BORDER> mais uma vez por uma questão de compatibilidade entre o Internet Explorer e o Netscape Navigator. SCROLLING pode ser definido com "YES" ou "NO" para obrigar a barra de scroll a estar sempre visível ou escondida.

A segunda coluna que definimos é então ocupada por um novo <FRAMESET>, este agora que divide essa área em duas linhas, utilizando ROWS. De forma semelhante a COLS, ROWS divide a área a que diz respeito em linhas, lidas de cima para baixo.

No final temos ainda uma estranha área<NOFRAMES>. Esta, que dentro de si contém uma área<BODY>, destina-se a alojar o conteúdo do corpo da página visível nos browsers antigos (anteriores ao Netscape 2.0), que não suportam frames.

Como é que fazemos com que as links ‘caiam’ sobre uma das frames que criamos?

Aí entra o parâmetro NAME de <FRAME>. Através do nome que definimos, podemos usar o seguinte código, por exemplo no ficheiro ‘menu.html’:

Através de TARGET podemos definir o ‘alvo’ de uma link, que terá o nome que atribuímos à frame desejada. Podemos ainda utilizar TARGET="_blank", que abre a link numa nova janela, e TARGET="_ top", que abre a link no topo de toda a hierarquia de frames no ecrã, apagando as frames existentes. Quando não é atribuído um TARGET, as links abrem por defeito na própria frame onde existem.

Ir para o princípio

Manual de HTML

Índice

Introdução

Head

Body

Títulos

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Parágrafos e quebras de linha

Listas

Listas não ordenadas:

Listas ordenadas:

Listas definidas:

Formatação de caracteres

Links

Imagens

Som

Vídeo

CSS

Tabelas

Frames