MANUAL DE FORMAÇÃO

Criação de páginas para a web em hipertexto

Referência online:

www.w3schools.com
INTRODUÇÃO À LINGUAGEM HTML .................................................................................................................... .4
O formato genérico de uma tag é: .................................................................................................................................. 4

Cabeçalhos ......................................................................................................................................................................... 5
Há seis níveis de cabeçalhos em HTML, de <H1> a <H6> ........................................................................................... 5
Alinhamento de cabeçalhos ........................................................................................................................................... 5
Quebra de linha .............................................................................................................................................................. 6
Parágrafos ...................................................................................................................................................................... 6
Linha Horizontal ............................................................................................................................................................ 6

LISTAS .............................................................................................................................................................................. 7
Listas de Definição......................................................................................................................................................... 7
Listas não numeradas ..................................................................................................................................................... 7
Listas Numeradas ........................................................................................................................................................... 8
Atributo Type ................................................................................................................................................................. 9
Atributo START ........................................................................................................................................................... 9

Formatação de Textos e Caracteres ................................................................................................................................ 9

<PRE>.......................................................................................................................................................................... 10
<BLOCKQUOTE> ...................................................................................................................................................... 10
<ADDRESS> ............................................................................................................................................................... 10

Formatação de Frases ..................................................................................................................................................... 11

Estilos Físicos .............................................................................................................................................................. 11
Marquee ....................................................................................................................................................................... 12

Ligações (uso de Links) .................................................................................................................................................. 12

Caminhos (uso de Links) ............................................................................................................................................. 12
O caminho Relativo ..................................................................................................................................................... 13
Caminho Absoluto ....................................................................................................................................................... 13
Indicadores (uso de Links) ........................................................................................................................................... 13

Formatação do Texto – Cores e Fontes ......................................................................................................................... 14

IMAGENS ....................................................................................................................................................................... 15
Atributos Básicos de Imagem ...................................................................................................................................... 15
ALT.............................................................................................................................................................................. 15
Width="valor em pixel" largura da imagem ................................................................................................................ 16
Height="valor em pixel" altura da imagem.................................................................................................................. 16
Align=(left, right ou center) alinhamento da imagem .................................................................................................. 16
Border="valor em pixel" especificação da largura da borda da imagem. .................................................................... 16
Vspace="valor em pixel" para especificar o espaço que deve ser deixado acima e abaixo da imagem. ...................... 16
Hspace="valor em pixel" especifica o espaço que deve ser deixado nas laterais da imagem. ..................................... 16
Borda mais larga .......................................................................................................................................................... 16
Uma imagem sem borda .............................................................................................................................................. 16
Molduras de Imagem ................................................................................................................................................... 17
Imagem Como Fundo Da Página ................................................................................................................................. 17
Para fixar a imagem de fundo ...................................................................................................................................... 17
Uma Cor Como Fundo Da Página................................................................................................................................ 17

LINKS .............................................................................................................................................................................. 18
Criar um link para uma página ..................................................................................................................................... 18
Usando uma imagem como link................................................................................................................................... 18

TABELAS........................................................................................................................................................................ 18
Alterar a Largura da Coluna......................................................................................................................................... 19
Cor de Fundo e separação de células ........................................................................................................................... 20

Pág. 2
 Tabelas e os principais atributos .................................................................................................................................. 22
Os Atributos COLSPAN e ROWSPAN ....................................................................................................................... 22
Tabelas como molduras ............................................................................................................................................... 23
Imagem de fundo na tabela .......................................................................................................................................... 24

FRAMES ......................................................................................................................................................................... 24
Parâmetros de Frames .................................................................................................................................................. 27
MARGINWIDTH ........................................................................................................................................................ 28
MARGINHEIGHT ...................................................................................................................................................... 28
SCROLLING ............................................................................................................................................................... 28
TARGET...................................................................................................................................................................... 28
Frame Inline ................................................................................................................................................................. 30

Áudio ................................................................................................................................................................................ 31

Vídeo ................................................................................................................................................................................ 31
<EMBED SRC="arquivo_de_video.extensão"> ......................................................................................................... 31
START=FILEOPEN: o vídeo começa a ser exibido assim que a página é carregada ................................................. 32
LOOP=n: Executa o trecho de vídeo “n” vezes. . ........................................................................................................ 32
LOOPDELAY=n: especifica, em milisegundos, de quanto em quanto tempo o trecho de vídeo será executado quando
colocado em loop ......................................................................................................................................................... 32

Tabela de Comandos
Tabela de Cores............................................................................................................................................................ 32

Programa das Fontes ...................................................................................................................................................... 33

Exemplo de Listagem ordenada..................................................................................................................................... 34

Exemplo de Textos e Imagem ........................................................................................................................................ 34

Exemplo de Tabelas ........................................................................................................................................................ 35

Exemplo de Links ........................................................................................................................................................... 35

Pág. 3
Introdução à Linguagem HTML

HTML (HyperText Markup Language - Linguagem de Formatação de Hipertexto) é fruto

de uma união entre os padrões HyTime e SGML.

As tags normalmente são especificadas em pares, delimitando um texto que sofrerá

algum tipo de formatação. As tags são identificadas por estarem entre os sinais < > e
< / >.

Entre os sinais < > são especificados os comandos propriamente ditos. No caso de tags
que necessitam envolver um texto, sua finalização deve ser feita usando-se a barra de
divisão /, indicando que a tag está finalizando a marcação de um texto.

Um documento HTML, normalmente terá extensão .html ou .htm.

O formato genérico de uma tag é:

<nome da tag> texto</nome da tag>

Um programa HTML possui três partes básicas, a estrutura principal, o cabeçalho e o

corpo do programa. Todo programa deve iniciar com o comando, tag, <html> e ser
encerrado com o comando </html>.

Esse par de comandos é essencial. A área de cabeçalho é opcional e é delimitada pelo

par de comandos <head> e </head>.

Estes comandos para cabeçalho são usados para especificar alguns poucos comandos
da linguagem. Eles são opcionais, ou seja, um programa HTML pode funcionar sem eles.

Mas é conveniente usá-los, pois o título da página é acrescentado através deles.

E ainda temos as tags <Title> e </Title>, estes comandos delimitam o texto que irá
aparecer na barra do título do browser.

<HTML> </HTML> Esta tag marca o início do programa HTML

<HEAD> </HEAD> Esta tag marca início e fim de cabeçalho

<TITLE> </TITLE> Esta tag delimita o texto que irá ser visualizado na barra de
título do browser.

<BODY> </BODY> Esta tag delimita o corpo do programa, aonde a maior parte do
comando serão colocados

Cabeçalhos

Há seis níveis de cabeçalhos em HTML, de <H1> a <H6>:

<H1> Este é um cabeçalho de nível 1 </H1> <H2> Este é um cabeçalho de nível 2

</H2>
<H3> Este é um cabeçalho de nível 3 </H3> <H4> Este é um cabeçalho de nível 4
</H4>
<H5> Este é um cabeçalho de nível 5 </H5> <H6> Este é um cabeçalho de nível 6
</H6>

Alinhamento de cabeçalhos - os cabeçalhos têm atributos de alinhamento:

<H2 ALIGN=CENTER>Cabeçalho centralizado</H2>

Cabeçalho centralizado
<H3 ALIGN=RIGHT>Cabeçalho alinhado à direita</H3>
Cabeçalho alinhado à direita
<H4 ALIGN=LEFT>Cabeçalho alinhado à esquerda (default=padrão)</H4>
Cabeçalho alinhado à esquerda (default=padrão)
Quebra de linha

Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é necessário

quando queremos uma quebra de linha em determinado ponto, pois os browsers já
quebram as linhas automaticamente para apresentar os textos.

Parágrafos

Para separar blocos de texto, usamos o elemento <P>, por exemplo:

Parágrafo 1; <P> Parágrafo 2.
que produz o seguinte:
Parágrafo1;
Parágrafo2.

<P> tem atributo de alinhamento, semelhante aos cabeçalhos, como nos exemplos a
seguir:

<P ALIGN=CENTER> Assim Como diz o provérbio chinês: “É melhor passar por
ignorante uma vez do que permanecer ignorante para sempre”. <BR>(Giovani
Guareschi) </P>

Linha Horizontal

<HR> insere uma linha horizontal,

<HR SIZE=7> insere uma linha de largura 7 (pixels):

<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30%

(do espaço horizontal disponível), alinhada à direita, sem efeito tridimensional.

<HR SIZE=70 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 70 (pixels),

comprimento 2 (pixels), alinhada à esquerda (o Netscape, aparentemente, não aceita
esta formatação de <HR>):

LISTAS

Há vários tipos de listas em HTML, sendo estas as mais usadas e correctamente

apresentadas pelos browsers:

Listas de Definição

<DL>
<DT> artigo 1
<DD> artigo um da publicação de autor
<DT> artigo 2
<DD> artigo 2 do estatuto de estudante
</DL>

Que produz:

artigo 1
artigo um da publicação de autor
artigo 2
artigo 2 do estatuto de estudante

Listas não numeradas

São equivalentes às listas com marcadores do MS-Word, por exemplo:

<UL>
<LI> Documentos básicos
<LI> Documentos avançados
<UL>
<LI> formulários
<UL>
<LI> CGI
</UL>
<LI> contadores
<LI> relógios
</UL>
<LI> Detalhes sobre imagens
</UL>

• Documentos básicos
• Documentos avançados
o formulários
o CGI
o contadores
o relógios
• Detalhes sobre imagens

Listas Numeradas

Trabalhamos com os comandos <ul> para listas não ordenadas e <ol> para as listas
ordenadas.

Pode-se personalizar a lista ordenada com o atributo TYPE e START.

O atributo Type pode assumir cinco valores para definir o tipo de numeração a ser
usado na lista.
· "1" : Especifica que os algarismos arábicos padrão devem ser usados para numerar a
lista ( 1,2,3,4, ...).
· "a" : Especifica que as letras minúsculas devem ser usadas para numerar a lista (a,
b, c, d, etc.)
· "A" : Especifica que as letras maiúsculas devem ser usadas para numerar a lista (A,
B, C, D, etc.)
· "i" : Especifica que os algarismos romanos minúsculos devem ser usados para numerar
a lista ( i, ii, iii, iv, etc.)
· "I" : Especifica que os algarismos romanos maiúsculos devem ser usados para numerar
a lista ( I, II, III, IV, etc.).
Exemplo:
<p>Ingredientes para bolo</p>
<ol>
<li>Farinha de Trigo
<li>Açucar
<li>Manteiga
<li>Ovos
<li>Leite
<li>Fermento
</ol>

Atributo Type

<p>Ingredientes para bolo</p>

<ol type="I">
<li>Farinha de trigo
<li>Açucar
<li>Manteiga
<li>Ovos
<li>Leite
<li>Fermento
</ol>

Atributo START pode-se determinar o número ou a letra que inicia a lista. O ponto
inicial é 1.
Usando o Start, pomos esse número.

Um exemplo:
<ol Type=a start=3>.

Formatação de Textos e Caracteres

HTML oferece as seguintes formatações de blocos de texto:

<PRE>

Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha
e tabulações:

<pre> uma linha aqui,

outra ali,
etc. </pre>

Resulta em:
uma linha aqui,
outra ali,
etc.

Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com essa
marcação dentro de outra marcação que já apresente tabulações e espaços específicos.

<BLOCKQUOTE>

É usado para citações longas:

<blockquote> A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que
a Terra siga uma trajectória recta no espaço-tempo quadridimensional, parece-nos que
se desloca em órbita circular no espaço tridimensional. </blockquote> (Stephen W.
Hawking, “Uma Breve História do Tempo”)

A massa do Sol arqueia o espaço-tempo de tal maneira que, ainda que a Terra
siga uma trajectória recta no espaço-tempo quadridimensional, parece-nos
que se desloca em órbita circular no espaço tridimensional.
(Stephen W. Hawking, “Uma Breve História do Tempo”)

<ADDRESS>
Usado para formatar endereços de E-Mail e referências a autores de documentos, como
por exemplo:

Envie críticas e sugestões para <address> [email protected] </address>

Envie críticas e sugestões para

[email protected]

<a href="mailto:[email protected]">pessoal de apoio

Formatação de Frases

Estilos Físicos
<B>
Quando disponível no browser, é mostrado em negrito (em alguns browsers, pode
aparecer sublinhado).
<I>
Itálico
<U>
Sublinhado. Deve ser usado com cuidado, pois confunde-se com a apresentação de
links.
<STRIKE> ou <S>
Frase riscada.
<BIG>
Fonte um pouco maior.
<SMALL>
Fonte um pouco menor.
<SUB>
Frase em estilo índice, como em H2O, por exemplo.
<SUP>
Frase em estilo expoente, como em Km2, por exemplo.
Marquee

É possível obter o efeito de animação de texto, através da formatação <MARQUEE>.

<MARQUEE BEHAVIOR=efeito> Texto </MARQUEE>

Atributos de largura e direção do efeito permitem diversas apresentações diferentes,

por exemplo:

<MARQUEE BEHAVIOR=SCROLL WIDTH=30%> Texto </MARQUEE>

<MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT> Texto </MARQUEE>
<MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT> Texto </MARQUEE>

Ligações (uso de Links)

Com HTML é possível fazermos ligações de uma região de texto (ou imagem) a um
outro documento (ou a outra parte do próprio documento).

Também chamadas hypertext links ou hiperlinks ou simplesmente links, onde

normalmente, o rato vira uma “mãozinha” e ao clicar “chamamos” (abrimos) um outro
documento, página web ou figura por exemplo.

Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:

<A HREF = "arquivo_destino"> âncora </A>

Onde:
arquivo_destino: é o endereço do documento de destino, da página ou imagem a qual
queremos abrir.
âncora: é o texto ou imagem que servirá de ligação hipertexto do documento sendo
apresentado para o documento de destino.

Caminhos (uso de Links)

O caminho Relativo

Pode ser usado sempre que queremos fazer referência a um documento guardado
no mesmo servidor do documento actual.

<A HREF="documentos/doc.html"> Exemplo de Caminho Relativo </A>

Caminho Absoluto

Utilizamos o caminho absoluto quando desejamos referenciar um documento que esteja

em outro servidor, por exemplo:

<A HREF="http://www.rtp.pt"> RTP – Rádio Televisão Portuguesa </A>

Que oferece um link RTP – Rádio Televisão Portuguesa que ao ser clicado com o rato
abrirá a página cujo endereço é http:// www.rtp.pt.

Com a mesma sintaxe, é possível escrever links para qualquer servidor de informações
da Internet.

Indicadores (uso de Links)

O atributo NAME permite indicar um trecho de documento como ponto de chegada de uma
ligação hipertexto.

A formatação:

<A NAME="inicio"> Indicadores (uso de links) </A>

Faz com que a âncora Indicadores (uso de links) seja o destino de um link.

Se escrevermos:

<A HREF="#inicio"> Topo do Documento </A>

Teremos uma ligação hipertexto para um trecho deste mesmo documento.

Formatação do Texto – Cores e Fontes

<B> </B> Aplica o estilo negrito ao texto

<I> </I> Aplica o estilo itálico ao texto.
<P> </P> Inicia um novo parágrafo.
<BR> Faz uma quebra de linha.

Para alinhar um texto Tem que se utilizar o atributo ALIGN com valores :

LEFT (esquerda), RIGHT (direita), CENTER (centralizado) e JUSTIFY (justificado).

Exemplo:
<h2 align=center>Este é um exemplo de cabeçalho com alinhamento</h2>

Tamanho, tipo e cor da fonte, do texto que utilizará a tag <font> </font>.

Size especifica o tamanho da fonte utilizada,

Face é a fonte diferente para o texto.
Color Este parâmetro especifica a cor do texto

Sua sintaxe é a seguinte:

<FONT COLOR="red"> Texto </FONT>

Produzirá na página: a palavra Texto escrita na cor vermelha.

<FONT SIZE=3> Texto </FONT>

Produzirá na página: a palavra Texto como o tamanho 3.

<FONT FACE="Arial"> Texto </FONT>

Produzirá: a palavra Texto com a fonte (tipo de letra) Arial.
Mais exemplos:

<FONT FACE="Verdana" COLOR="blue"> Fonte Verdana Azul </FONT>

IMAGENS

O elemento IMG insere imagens que são apresentadas junto com os textos. Um atributo
SRC deve estar presente, da seguinte forma:

<IMG SRC="URL_imagem">

<IMG SRC = "nome_da_figura.extensão">

ou, se ela estiver dentro de uma pasta no mesmo servidor:

<IMG SRC = "nome_da_pasta/nome_da_figura.extensão">

ex.: <img src="c:\site\imagem.gif">

As imagens usadas na Web, normalmente são armazenadas em arquivos com as

seguintes extensões: .gif, .jpg (ou .jpeg), .png, .bmp.

Atributos Básicos de Imagem

ALT

Indica um texto alternativo, descrevendo brevemente a imagem, que é apresentado no

lugar da imagem nos browsers texto, ou quando se desabilita o carregamento de
imagens em browsers gráficos. É recomendável que esteja sempre presente. Também
aparecerá ao “passar o rato sobre a imagem”.

<IMG SRC="URL_imagem" ALT="descrição_da_imagem">

Dessa forma:

<IMG SRC="newred.gif" ALT="Novo!!!">

É apresentado nos browsers gráficos assim: e, nos browsers texto, assim: [Novo!!!]. E
ao passar o rato sobre a figura também aparecerá a descrição Novo!!!

Width="valor em pixel" largura da imagem

Height="valor em pixel" altura da imagem
Align=(left, right ou center) alinhamento da imagem
Border="valor em pixel" especificação da largura da borda da imagem.
Vspace="valor em pixel" para especificar o espaço que deve ser deixado acima e
abaixo da imagem.
Hspace="valor em pixel" especifica o espaço que deve ser deixado nas laterais da
imagem.

<IMG SRC="URL_imagem" ALT="descrição" WIDTH="largura" HEIGHT="altura">

Borda mais larga:

<A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=4> </A>

Uma imagem sem borda:

<A HREF="URL"> <IMG SRC="imagem" ALT="descrição" BORDER=0> </A>

Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:

<IMG ALIGN=LEFT SRC="imagem.extensão" ALT="descrição"> <IMG

ALIGN=RIGHT
SRC="imagem.extensão" ALT="descrição"> ...e pode-se escrever à vontade entre
as imagens!
Molduras de Imagem

Estes atributos definem o espaço - vertical e horizontal - deixado entre as imagens e os

textos circundantes:

<IMG SRC="imagem.extensão" VSPACE=espaço_vertical>

<IMG SRC=" imagem.extensão " HSPACE=espaço_horizontal>

Outros exemplos:

<IMG SRC="foto.gif" WIDTH="148" HEIGHT="95" ALIGN=left VSPACE="30">

<IMG SRC="foto.gif" WIDTH="160" HEIGHT="71" ALIGN=right HSPACE="30">

Abaixo, temos um exemplo com os dois atributos, através da formatação:

<IMG SRC="foto.gif" ALIGN="LEFT" WIDTH="63" HEIGHT="68" HSPACE="20"

VSPACE="20">

O único obrigatório é o src.

Imagem Como Fundo Da Página

ex.: <body background="c:\site\imagem.jpg">

Para fixar a imagem de fundo

<body background="c:\site\imagem.jpg" bgproperties="fixed">

Uma Cor Como Fundo Da Página

<body bgcolor="cor"> ou <boby> bgcolor=”#FFFFFF”>

LINKS

Um link é reconhecido numa página por estar em cor normalmente diferente do resto do texto
e, ao passar com o rato sobre esse texto o cursor muda para uma mão apontando para o link.

Criar um link para uma página:

ex.: <a href="c:\site\casa.html">Minha casa</a>

Usando uma imagem como link:

Ex.: <a href="c:\site\casa.html><img src="c:\site\imagem.jpg"></a>

TABELAS

As tabelas são muito importantes para o designer de uma home-page. Com elas pode-
se fazer alinhamentos que dificilmente seriam possíveis com simples comandos.

A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto
mais profissional e o utilizador possa navegar de forma mais eficiente, pois os objectos
podem estar melhor posicionados na home-page.

O comando para se inserir uma tabela é <TABLE>; para iniciar uma linha devemos
introduzir a tag <TR> e para uma coluna <TD>. Todos estes comandos são encerrados
como </TABLE> , </TR> e </TD> respectivamente.

Vejamos um exemplo. Vamos supor que queríamos montar uma tabela 3X2, ou seja
de 3 colunas por 2 linhas, o código HTML para isso é:

<HTML>
<HEAD>
<TITLE>Criando Tabelas</TITLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=BLUE SIZE=6>TABELA</FONT></CENTER>
<BR>
<TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1>
<TR> <! Cria a primeira linha da tabela>
<TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma célula>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCEIRA COLUNA </TD>
</TR> <! Fecha a primeira linha da tabela>
<TR> <! Abre a segunda linha da tabela>
<TD> PRIMEIRA COLUNA</TD>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCEIRA COLUNA </TD>
<TR> <! Encerra a Segunda linha da tabela>
</TABLE> <! Encerra a tabela>
</BODY>
</HTML>

Vamos procurar trabalhar com vários exemplos para visualizarmos melhor o uso destes
parâmetros.

ALTERAR A LARGURA DA COLUNA

Para alterar o largura de uma célula da tabela basta acrescentar o parâmetro WIDTH
dentro da tag <TD>. Exemplo1:

<TABLE BORDER=2>
<TR>
<TD WIDTH=100> WIDTH=100</TD>
<TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD>
</TR>
</TABLE>
O parâmetro WIDTH pode receber dois tipos de valores, em pixels como no exemplo
acima ou em percentagem, como mostrado no exemplo a seguir. Também dentro da
tag <TD> vemos um outro parâmetro que é VALIGN=MIDDLE, este parâmetro tem por
função alinhar o conteúdo da célula no meio da mesma, ou seja, dentro da célula as
frases são alinhadas com relação ao seu centro.

Exemplo2:
<TABLE BORDER=2>
<TR>
<TD WIDTH=25%> WIDTH=25%</TD>
<TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD>
</TR>

COR DE FUNDO E SEPARAÇÃO DE CÉLULAS

Outro atributo que podemos ter nas tabelas é mudar a cor de fundo, isto torna-se
particularmente útil quando se quer dar destaque a uma célula em especial.

Vejamos um exemplo:

<TABLE BORDER=0>
<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
Repare que no exemplo anterior nós colocamos BORDER=0 e as células apareceram
coloridas, mas com um certo espaçamento entre elas, para tirarmos este espaço
devemos acrescentar dentro da tag <TABLE> o parâmetro CELLSPACING=0. Este
parâmetro elimina por completo os espaços entre as células.

<TABLE BORDER=0 CELLSPACING=0>

<TR>
<TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>

Outro parâmetro que pode ser usado para separar espaços em uma célula é
CELLPADDING que inclui ou exclui espaços dentro da célula, ou seja, se você tiver um
elemento (frase, texto, figura etc.) dentro da célula pode-se acrescentar espaços por
igual nos quatros cantos da célula, fazendo com que o texto ou figura não fique
"grudado" nas paredes da célula. Aproveite os exemplos anteriores e experimente usar
este atributo para ver como ele funciona.

Exemplo:

<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10>

<TR><TD BGCOLOR="#E1FFD9">janeiro</TD><TD>fevereiro</TD>
<TD BGCOLOR="#E1FFD9">março</TD></TR>
<TR><TD>abril</TD><TD BGCOLOR="#E1FFD9">maio</TD><TD>junho</TD></TR>
</TABLE>
Tabelas e os principais atributos.

Em seguida descreveremos uma série de outros atributos e comandos para tabelas:

<TH> ... </TH>

Esta tag insere um cabeçalho dentro da célula. Na verdade a única diferença entre a tag <TH> e a tag <TD>
é que a <TH> exibe o conteúdo da célula em negrito.

<CAPTION> ... </CAPTION>

Exibe um texto centralizado em relação à tabela, como se fosse uma legenda.

Exemplo:

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=6> <! Esta linha inicia a

tabela com borda de espessura 1 (border), espaço entre as células 2 (Cellspacing) e
espaço dentro da célula 6 (Cellpadding)>
<CAPTION>LEGENDA</CAPTION> <! Introduz uma legenda na tabela>
<TR>
<TH>Conteúdo em negrito</TH> <! Insere o texto na forma de cabeçalho (negrito)>
</TR>
<TR>
<TH>Conteúdo em negrito</TH>
</TR>
</TABLE>

OS ATRIBUTOS COLSPAN E ROWSPAN

Estes atributos são muito importantes dentro da tag <TABLE>. São eles que nos
possibilitam remodelar a disposição das células dentro da tabela.

Vejamos um exemplo prático:

<TABLE BORDER=2 CELLPADDING=2>

<TR>
<TD COLSPAN=2>Exemplo do uso do COLSPAN</TD>
<TR>
<TD>CÉLULA 1</TD> <TD>CÉLULA 2</TD>
</TR>
</TABLE>

Neste exemplo vemos que na tag <TD> foi introduzido o parâmetro COLSPAN. Este
parâmetro tem a finalidade de dizer que sob a célula onde ele foi introduzido podemos
ter um certo número de colunas.
Logo, se quisermos que uma célula ocupe uma única linha, como no nosso exemplo,
devemos inserir o parâmetro dentro da tag <TD> desta célula.
A quantidade de células que vêem a baixo da célula que recebeu o atributo COLSPAN
deve ser de acordo com o número especificado no parâmetro.

Mas se quisermos definir uma única célula ocupando uma coluna inteira? Neste caso
usamos o atributo ROWSPAN.

Exemplo:
<TABLE BORDER=2 CELLPADDING=2>
<TR>
<TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD>
<TD>CÉLULA 1</TD></TR><TR> <TD>CÉLULA 2</TD>
</TR>
</TABLE>

TABELAS COMO MOLDURAS

Um outro uso bastante interessante de tabelas é como moldura para alguma figura.
Para isto basta você iniciar uma tabela e definir um valor para BORDER.

Exemplo:

<TABLE BORDER=5>
<TR>
<TD> <IMG SRC=NOME DA FIGURA> </TD>
</TR>
</TABLE>

IMAGEM DE FUNDO NAS TABELAS

Um recurso parecido com a cor de fundo , colocar uma imagem como fundo de uma tabela é uma técnica
muito usada. Através do complemento BACKGROUND dentro da tag TABLE , basta indicar qual o endereço
e o nome da figura.

<TABLE BACKGROUND="POOL.GIF" BORDER=5>

<TR>
<TD><H1>Que tal um mergulho agora ? </H1></TD>
</TR>
</TABLE>

FRAMES

As frames são divisões do ecrã do browser em diversos ecrãs (ou “quadros”). Com isso,
torna-se possível apresentar mais de uma página por vez: por exemplo, um índice
principal numa parte pequena do ecrã, e os textos relacionados ao índice em outra parte
(menus).

Fazer frames tem o mesmo procedimento que confecção de home-pages simples, a

diferença é que se deve trocar a tag <BODY> pela tag <FRAMSET>

Para termos uma home-page com frames devemos ter três páginas, uma com o código
que contém a tag <FRAMESET> e duas outras com os códigos onde serão inseridas as
páginas de cada frame.

Um documento HTML simples seria assim:

<HTML>
<HEAD>
<TITLE>Página simples </TITLE>
</HEAD>
<BODY>
Neste campo entram os comandos em geral
</BODY>
</HTML>

Já um documento HTML que teria frames ficaria assim:

<HTML>
<HEAD>
<TITLE>Página com Frame </TITLE>
</HEAD>
<FRAMESET>
NESTE CAMPO ENTRAM AS CHAMADAS PARA OS DOCUMENTOS DOS FRAMES
</FRAMESET>
</HTML>

Vejamos um exemplo:
<HTML>
<HEAD>
<TITLE> Exemplo de frame</TITLE>
</HEAD>
<FRAMESET COLS=20% , 80%> <! Este comando inicia o frame e divide o ecrã do
navegador em 2 partes, uma com 20% do ecrã e outra com 80%>
<FRAME SRC=FRAME1.HTM> <! Este comando chama as páginas HTML que devem
ocupar as colunas divididas pelo frame>
<FRAME SRC=FRAME2.HTM>
</FRAMESET>
</HTML>

Este é o código para gerar as frames.

Agora vamos criar os códigos para serem inseridos nas duas colunas que criamos.
<HTML>
<HEAD>
<TITLE>Página simples </TITLE>
</HEAD>
<BODY>
AQUI ENTRA A PRIMEIRA PÁGINA NORMAL
</BODY>
</HTML>

Guardar este exemplo como FRAME1.HTM. Porque? Porque no código que geramos no
exemplo de frames chamamos a página com o comando <FRAME SRC=FRAME1.HTM>,
se quisermos guardar o nome do código de forma diferente devemos alterar também o
código da página de frame.

<HTML>
<HEAD>
<TITLE>Página simples </TITLE>
</HEAD>
<BODY>
AQUI ENTRA A SEGUNDA PÁGINA NORMAL
</BODY>
</HTML>

Este código deve ser guardado como FRAME2.HTM, pelo mesmo motivo do código
anterior.
Não esquecer que estas páginas devem estar no mesmo DIRETÓRIO.

Alem de poder dividir o navegador em colunas com o parâmetro COLS dentro da tag
<FRAMSET>, também pode-se dividir em linhas usando o parâmetro ROWS, ou ainda
dividindo em colunas e linhas ao mesmo tempo.

<HTML>
<HEAD>
<TITLE> Exemplo de frame</TITLE>
</HEAD>
<FRAMESET ROWS=50% , 50%> <! Este comando inicia o frame e divide o ecrã do
navegador em 2 partes, uma com 50% do ecrã e outra com 50%>
<FRAME SRC=FRAME1.HTM> <! Este comando chama as páginas HTML que devem
ocupar as colunas divididas pelo frame>
<FRAME SRC=FRAME2.HTM>
</FRAMESET></HTML>

Uma tag <FRAMESET> pode ser inserida dentro da outra gerando assim frames dentro
de frames, como no código abaixo:

<HTML>
<HEAD>
<TITLE> Exemplo de frame</TITLE>
</HEAD>
<FRAMESET COLS=50%,50%>
<FRAMESET ROWS=50%,50%>
<FRAME SRC=FRAME1.HTM>
<FRAME SRC=FRAME1.HTM>
</FRAMESET>
<FRAMESET ROWS=50%,50%>
<FRAME SRC=FRAME1.HTM>
<FRAME SRC=FRAME1.HTM>
</FRAMESET>
</FRAMESET>
</HTML>

Já deu para perceber que toda a estrutura de frames depende na verdade da tag
<FRAME>. Vejamos alguns dos atributos que podem ser inseridos dentro desta tag.

PARÂMETROS DE FRAMES

Este parâmetro é o responsável por chamar a página HTML que deve ser aberta
(inserida) dentro de um frame. Em todos os exemplos até agora só usamos arquivos
locais para abrir estas páginas numa frame, mas nada impede de se colocar no lugar
uma URL completa.
Por exemplo:
<FRAME SRC=http://www.yahoo.com>
Com este comando será capaz, devidamente conectado, de chamar esta página para a
frame, onde se quer que ela esteja na Internet.

MARGINWIDTH

Define a margem entre as laterais do frame e seu conteúdo. Exemplo:

<FRAME SRC=FRAME1.HTM MARGINWIDTH=100>

Este comando cria uma margem de 100 pixels de cada lado da frame.

MARGINHEIGHT

Da mesma forma que MARGINWIDTH, este parâmetro define uma distância de margem,
que neste caso é a margem superior e inferior da frame. Exemplo:

<FRAME SRC=FRAME1.HTM MARGINHEIGHT=100>

Dá um espaço de 100 pixels entre as margens superior e inferior da frame.

SCROLLING
Define se a frame terá ou não barras de rolagem. Por default quando o conteúdo de
uma página excede o tamanho da frame as barras de rolagem são acrescentadas
automaticamente. Os valores válidos para SCROLLING são YES, NO e AUTO.

Exemplo:
<FRAME SRC=FRAME1.HTM SCROLLING=YES>

TARGET

Este é o mais importante de todos os parâmetros. Ele trabalha em conjunto com NAME
e permite que coloquemos um link numa frame e o resultado, ou seja, a página linkada,
aparece noutra frame.
Vejamos um exemplo de como podemos linkar uma frame com outro. Vamos construir
uma página que possua um menu de opções do lado direito, para isso podemos
aproveitar os códigos de exemplo abordados anteriormente.
Os códigos são:
FRAME.HTM
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<FRAMESET COLS=25%,75%>
<FRAME SRC=FRAME1.HTM SCROLLING=NO>
<FRAME SRC=FRAME2.HTM NAME=TESTE>
</FRAMESET>
</HTML>

FRAME1.HTM
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<BODY BGCOLOR=YELLOW>
<CENTER><H2>Escolha um Link</H2></CENTER>
<BR>
<A HREF=http:\\www.amazon.com TARGET=TESTE>Livraria Amazon</A>
<BR>
< A HREF=http:\\www.yahoo.com TARGET=TESTE>Pesquisador YAHOO</A>
<BR>
<A HREF=FRAME2.HTM TARGET=TESTE>Volta para Frame2.htm</A>
</BODY>
</HTML>

FRAME2.HTM
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<BODY>
<CENTER><H2>Os links ao lado deverão aparecer neste lado do
Navegador</H2></CENTER>
<BR>
<CENTER>
<FONT SIZE=4>Este frame é o que foi nomeado como TESTE com o parâmetro NAME
em Frame.HTM</FONT>
</CENTER>
</BODY>
</HTML>

Frame Inline

Se quisemos misturar texto , figuras e um frame em uma mesma página precisamos

criar uma frame inline. Para isso, utilizamos a tag <IFRAME SRC=" nome do frame ">
Pode-se usar os complementos NAME – para especificar um nome que identifica qual
frame está em uso ; WIDTH e HEIGTH para definir o espaço na página utilizado pelo
Frame ; ALIGN ( LEFT ou RIGHT ) - para alinhar oa frame na página. Lembre-se de
fechar a tag </IFRAME>.

Também pode-se usar os atributos normais da tag frame , como o FRAMEBORDER ,

SCROLLING etc.

<html>
<body>
<center><h1>Exemplo do comando IFRAME </h1></center>
<hr>
<iframe width=90% height=70% src="pag2.htm">
</iframe>
</center>
Aqui continua a página normal !
</body>
</html>
Áudio

Há duas maneiras de inserir som em uma página:

<EMBED SRC="arquivo_de_som.extensão"> insere o arquivo de som como

objeto.

<BGSOUND SRC=" arquivo_de_som.extensão "> faz com que o som seja inserido
como som de fundo ou 'trilha sonora' de uma página. Esta formatação só funciona no
Internet Explorer.

Essas formatações, porém, não farão efeito algum quando o browser não estiver
configurado para "executar" o arquivo de som por meio de um plug-in adequado, ou se
o computador em que estiver carregada a página não tiver instalada uma placa de som.

Vídeo

A inserção de vídeo depende bastante do tipo de arquivo de vídeo que temos para
inserir numa página. De maneira geral, esta formatação pode servir para a inserção de
um arquivo QuickTime:

<EMBED SRC="arquivo_de_video.extensão">

Uma formatação mais completa inclui a indicação do plug-in e controles da reprodução

do Video.
Exemplo:
<IMG DYNSRC=video.avi SRC=imagem.gif WIDTH=50 HEIGHT=50 START=MOUSEOVER
LOOP=INFINITE>

O exemplo acima implementa numa página lida com o Internet Explorer 2.0 o arquivo
de vídeo video.avi. Outros navegadores (como o Netscape) irão mostrar apenas a
imagem imagem.gif. O atributo START=MOUSEOVER indica que o trecho de vídeo começará
a ser executado quando o utilizador passar o rato sobre ele.
O atributo LOOP=INFINITE declara que o vídeo será exibido continuamente até que o
utilizador mude de página.

Outros atributos são:

START=FILEOPEN: o vídeo começa a ser exibido assim que a página é carregada

CONTROLS: adiciona um conjunto de botões para controlar a execução do vídeo

LOOP=n: Executa o trecho de vídeo “n” vezes. Se for colocado LOOP=5, o vídeo será
exibido cinco vezes.

LOOPDELAY=n: especifica, em milisegundos, de quanto em quanto tempo o trecho de

vídeo será executado quando colocado em loop.

Tabela de Cores
Cor Código Hexadecimal
Black ( Preto ) #000000
White ( Branco ) #FFFFFF
Yellow ( Amarelo ) #FFFF00
Blue ( Azul ) #0000FF
Green ( Verde ) #00FF00
Dark Green ( Verde escuro ) #2F4F2F
Red ( Vermelho ) #FF0000
Magenta ( Rosa ) #FF00FF
Cyan ( Ciano ) #00FFFF
Programa das Fontes

<html>
<head>
</title>Experiência com Fontes</title>
</head>
<body>
<h2>Primeiro exemplo com tipos de fontes</h2>
<font face="Agaramond"><p>
Este texto será exibido em Agaramond</font><br>
<font face="Tahoma"><p>
Este texto será exibido em Tahoma</font><br>
<font face="Arcane"><p>
Este texto será exibido em Aracane</font><br>
<p>
<h2>Exemplos com tamanhos diferentes de fontes</h2>
<font face="Courier" Size=1>
Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=2>
Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=3>
Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=4>
Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=5>
Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=6>
Este texto será exibido em Courier</font><br><p>
<font face="Courier" Size=7>
Este texto será exibido em Courier</font><br><p>
<p>
<h2>Agora iremos usar cores</h2>
<font Face="Verdana" size=5 color="#800000">
Este é o primeiro texto a ser modificado</font>
</body>
Exemplo de Listagem ordenada

<html>
<head><title>Listas</title>
</head>
<body>
<h3>Isto é uma listagem iniciando no número 4</h3>
<ol start=4>
<li>Item 1
<li>Item 2
<li>Item 3
</ol>
<h3>Isto é uma listagem com letras</h3>
<ol type=A>
<li>Editora
<li>Érica
<li>Livros
</ol>
<h3>Isto é uma listagem em algarismo romano</h3>
<ol type=I>
<li>Editora
<li>Érica
<li>Livros
</ol>
<h3>Esta é uma listagem em algarismo romano a partir do número 3</h3>
<ol type=I start=3>
<li>Editora
<li>Érica
<li>Livros
</ol>
</body>
</html>

Exemplo de Textos e Imagem

<html>
<head><title>Imagens</title>
</head>
<body>
<h1>Agora estamos a trabalhar com imagens</h1>
<h3> Esta é sua primeira imagem. Sorria?</h3>
<img src=fig.jpg align=left>Veja se consegue ver, as seguintes imagens?<br>
 O rosto de um velho<br>
Uma moça<br>
Um cachorro<br>
Um outro velho<br>
Um pássaro<br>
E algo mais<br>
</body>
</html>

Exemplo de Tabelas
<html>
<head><title>Tabelas</title>
</head>
<body>
<table border=1 width=400 height=120 cellpadding=5 cellspacing=5>
<tr>
<td align=center>No Centro</td>
<td align=right>Para Direita</td>
<td align=left>Para a Esquerda</td>
</tr>
<tr>
<td valign=bottom>Em baixo</td>
<td valign=top>No Topo</td>
<td valign=middle>Centro na Vertical</td>
</tr>
</table>
</body>
</html>

Exemplo de Links

<html>
<head><title>Estudando Links</title>
</head>
<body>
<h2>Exemplo de Links Internos</h2>
<h3>Seção de Exemplos</h3>
<a href=exemplo1.html>Exemplo1</a>
<a href=exemplo2.html>Exemplo2</a>
 <hr>
<h2>Exemplo de Links Externos</h2>
<a href=http://www.google.pt >Conheça a pagina do google</a><br>
<a href=http://www.apple.com>Apple Computer</a>
<h3>Você pode usar imagens para usar nos links</h3>
<a href=exemplo10.html><img src=bola.gif> </a>Imagens
</body>
</html>
X . Bibliografia