HTML Geral PDF

UNIVERSIDADE FEDERAL DE PELOTAS
Centro de Informtica - Seo de Projetos Cientficos

Apostila de HTML Bsico - http://www.ufpel.tche.br/ci/spc
1
ndice

INTRODUO: ________________________________________________________________ 2
DESENVOLVENDO UMA PGINA WEB _________________________________________ 7
TTULOS______________________________________________________________________ 9
CABEALHOS: ______________________________________________________________ 10
PARGRAFOS _______________________________________________________________ 11
DEFININDO FONTES__________________________________________________________ 12
ESTILOS DE TEXTO __________________________________________________________ 13
ACENTOS E CARACTERES ESPECIAIS ________________________________________ 14
QUEBRAS DE LINHA _________________________________________________________ 15
INFORMAES SOBRE A PGINA ____________________________________________ 16
INSERINDO COMENTRIOS EM SUA PGINA __________________________________ 17
LINHAS HORIZONTAIS _______________________________________________________ 18
CONTROLE DE CORES E GRFICOS DE FUNDO _______________________________ 19
ALINHANDO ELEMENTOS DE UMA PGINA ___________________________________ 22
LISTAS ______________________________________________________________________ 24
TEXTO ANIMADO ____________________________________________________________ 28
ENDEREOS_________________________________________________________________ 30
INTERLIGANDO DOCUMENTOS LINKS_______________________________________ 31
IMAGENS GRFICAS _________________________________________________________ 36
INSERINDO SOM _____________________________________________________________ 40
TABELAS____________________________________________________________________ 42
FRAMES_____________________________________________________________________ 56
FORMULRIOS ______________________________________________________________ 60
UPLOAD DE ARQUIVOS ______________________________________________________ 64
DICAS _______________________________________________________________________ 67


2
I NTRODU O:

Um dos maiores desafios de pesquisa da cincia de computao, dentre outros
nestes ltimos anos, a construo de hiperdocumentos e suas respectivas interfaces.
A capacidade oferecida de acesso no-linear a informao, os hiperdocumentos
conduziram indiretamente composio de ligaes de as quais refletem, melhor que o
texto seqencial o faz, o modo humano de organizar o conhecimento[MAENZA, 1994].
Oferecendo a riqueza da multimdia, os hiperdocumentos despertam para uma
interpretao mais ampla da motivao e da criatividade. Debruamo-nos sobre a questo
da autoria e a leitura de hiperdocumentos, especialmente no tocante interface Homen-
Mquina.
A leitura em um hiperdocumento, entendida como um processo descontnuo, e
no linear onde, atravs das ligaes, o leitor navega de uma informao e outra, no
necessariamente em uma ordem seqencial. Assim como o pensamento , por natureza,
associativo, o mecanismo de leitura em um hiperdocumento procura representar este
relacionamento associativo por meio de ns de ligaes.
O processo de escrita em ambientes de hiperdocumentos, denominado autoria.
No envolve somente a composio do texto, mas tambm o esquema da tela e o projeto
da interface e o que, talvez seja mais importante: a criao e o gerenciamento de ligaes
entre os ns.
O conceito de interface aplicado especialmente a informtica, designa um
dispositivo que garante a comunicao entre dois sistemas informticos distintos ou um
sistema informtico e uma rede de comunicao.
Utilizando ferramentas adequadas, para obter-se uma interface com um conjunto
de elementos que devem formar um conjunto com unidade, harmonia e coerncia. Esse
conjunto deve ter unidade para no apresentar elementos soltos e desconexos, que
podem confundir o usurio, levando-o a perder-se no produto, confundindo ou ignorando
informaes.

WEB
Sua idia inicial foi concebida em 1989, nos laboratrios de CERN (European
Laboratory of Particle physics), na Sua. Tim Berners-Lee, seu criador, conheceu a
linguagem com o propsito de interligar os computadores do laboratrio e instituies de
pesquisa coligadas a ele. O objetivo era Ter uma linguagem que exibia documentos


3
cientficos de forma simples e fcil de acessar. A Web tornou-se a moda no meio
cientfico-universitrio e cresceu rapidamente, essa moda foi rapidamente assimilada
pelas universidades americanas.
O crescimento estupendo da Web veio com a criao do primeiro
Browser(navegador) grfico, tipo Windows, no final de 1993, que foi desenvolvido por
Marc Anderseen. Em 1994 foi fundada a Netscape Corporation que com seu browser
permitiu a popularizao definitiva da Web. Desde ento o crescimento da Web tem sido
exponencial, numa velocidade fantstica.
O browser da Netscape tornou-se quase um padro da Web, at que a partir do
final de 1995, a Microsoft resolveu entrar no mercado, e colocou o produto Internet
Explorer a disposio cerca de 15% da base mundial instalada de navegadores.
A Web uma base de dados gigantesca que funciona atravs de hipertexto, que
permite acesso a arquivos da Internet de forma grfica. A chave do sucesso da World
Wide Web o hipertexto. Os textos e imagens so interligados, atravs de palavras-
chave tornando a navegao simples e agradvel

HIPERTEXTO
O termo hipertexto surgiu na dcada de 1960. Significa um texto no-linear, com
mais de uma dimenso enquanto que um texto uma coleo de informaes organizada
de forma linear, possuindo apenas uma dimenso, a qual deve ser apresentada e
recuperada de forma seqencial.
No hipertexto, a informao est organizada em uma rede, cujos ns contm
informao e esto relacionados por elos. Cada elo est, em geral associado
diretamente a uma ncora, que pode ser um boto ou cone, representando a origem de
um elo, e ao ativ-la ocorre um salto para um outro n. Quanto a apresentao as
ncoras aparecem em geral realadas, ou em cor diferente, na informao que est
sendo apresentada na tela.
Atravs de ligaes(links), o usurio pode pesquisar apenas os tpicos que lhe
interessam e ignorar os que no lhe convm. O hipertexto muito utilizado hoje em dia na
multimdia em geral e em pginas na Web.


4
MULTIMDIA
Refere-se a diversos tipos de informao que podem ser editadas e armazenadas
em tipos especficos de dispositivos. as apresentaes organizadas de som, imagens
grficas estticas, animaes, textos e vdeos em movimento. Esse tipo de informao
tem por finalidade esclarecer assuntos, indicar tendncias, informar, formar, demonstrar
ou simplesmente divertir.

HIPERMDIA
definida pela associao do hipertexto e da multimdia, a qual manipula um
conjunto de informaes pertencendo a diferentes tipos de mdia(textos, imagens, sons,
animaes e grficos), podendo estas informaes serem recuperadas de forma no-
linear atravs de diversos caminhos de acesso disponveis. Em outras palavras, a
hipermdia simplesmente uma extenso do hipertexto que incorpora outros tipos de
dados alm do texto.

HTML - Hiper Text Markup Language
a linguagem de marcao de hipertexto, ou seja, e a linguagem na qual so
escritas as pginas da Web, interpretada pelo navegador.
As informaes esto organizadas na forma de pginas ligadas entre si. Quando se
acessa um site, normalmente entra pela porta da frente, onde existe uma mensagem de
boas vindas e uma espcie de ndice para as demais pginas. Essa entrada se chama
pgina principal, ou home page.
Na Web, vamos encontrar tambm outros tipos de documentos alm dessas
pginas interligadas. Acessa-se computadores que mantm programas para serem
copiados gratuitamente, conhecidos como sendo assim, qualquer usurio pode, somente
com o seu mouse, Ter acesso a uma enorme quantidade de informao na forma de
textos, imagens, sons, grficos, vdeos, etc..., navegando atravs de palavras chaves e
cones.
A pgina transferida de um computador remoto para o usurio, onde o browser
faz o trabalho de interpretar os cdigos contidos naquele documento e mostra a pgina
que o usurio v. A Web est estruturada em dois princpios bsicos: HTTP(Hiper Text
Tranfer Protocol) e HTML (Hiper Text Markup Language).


5
HTTP o protocolo de transferncia de hipertexto, ou seja, o protocolo que
permite a navegao na Web, com o simples clicar do mouse sobre o texto(ou imagem)
que esteja associado a outro link. Estas ligaes entre as pginas, conhecidas como
hiperlinks (ligaes de hipertexto), podem ser de informaes contidas no prprio site,
bem como de computadores e empresas em qualquer lugar do mundo. Na Web
possvel que uma mquina faa referncia a praticamente qualquer documento disponvel
na Internet, e tambm outros tipos de
documentos alm dessas pginas
interligadas, podem acessar
computadores que mantm programas
para serem copiados gratuitamente,
conhecidos como servidores de FTP,
grupos de discusso e pginas comuns
de texto.
Os endereos na web sempre iniciam com HTTP://..., so conhecidos como
URL(Uniform Resource Locator) o endereo particular e nico de cada pgina da Web.
Uma URL padro possui at trs partes: o domnio(www.terra.com.br),
possivelmente um diretrio ou diretrios e possivelmente um arquivo(web.htm).
Um browser um programa navegador de Web. Os mais usados so o
Netscape(cerca de 75% do mercado mundial) da Netscape Corporation e o
Internet Explorer(cerca de 15% do mercado mundial)
da Microsoft, com diversos recursos de multimdia acoplados a
cada um. Ambos os navegadores, possuem tecnicamente para o
usurio leigo pouca diferena. uma questo de escolha.
Existem outros navegadores alternativos menos utilizados como
o Opera que pequeno, rpido e leve, possui cliente de e-mail e
gerenciador de download prprio. Tambm o MSN, novo programa da
Microsoft para tornar a Web ainda mais interessante. Funciona como
browser, cliente de e-mail, programa de mensagens instantneas,
player de som, entre outros recursos. Possui uma interface muito
amigvel, com recursos de procura de msica e vdeo, suporta e gerencia mltiplos
usurios, e atualizado automaticamente via web. Neoplanet
outro Browser alternativo, customizvel e extremamente


6
simples de usar. Voc poder trocar skins do Neoplanet e usar o mecanismo do seu
Internet Explorer 3.0, 4.0, 5.0 ou 5.5. Esta verso j vem com um programa para
download e muito mais. O AWE - Adonay Web Explorer atualmente o web browser com
maior nmero de recursos e funes. Multinavegao, bloqueio de janelas PopUps,
tradutor web ingls / portugus, zoom, notcias em tempo real, muda cor / imagem de
fundo e fontes das pginas, mostra todos os links relacionados,
navega em tela cheia, suporta J ava, Flash e conexes seguras.
importante que os usurios deve sempre usar a verso
mais recente de seu navegador para estar sempre atualizado
com os novos plugins disponveis para melhor navegabilidade pela Web.
Estes navegadores relacionados so totalmente grtis, e podem
ser adquiridos em suas empresas ou em inmeros locais disponveis
para download na Internet, como
o site SuperDownloads no Brasil e o
Download.com internacional. O melhor lugar o
seu prprio provedor de acesso.


7
DESENVOL VENDO UMA PGI NA WEB

Voc vai precisar:
! Conhecer a linguagem HTML para escrever o cdigo fonte de sua pgina
! Um editor de textos para gerar o seu cdigo fonte (bloco de notas, word, Wordpad)
! Um navegador de internet para visualizar as suas pginas (Netscape, Internet
Explorer, Opera)

TAGs
Os comandos HTML so chamados de TAGs, compreendem de marcas padres que
so utilizadas para fazer indicaes a um browsers.
Assim como em outras linguagens, os comandos tm uma sintaxe prpria, e seguem
algumas regras:
# As TAGs aparecem sempre entre os sinais de menor que(<) e maior que(>);
# Geralmente so utilizadas aos pares, sendo que a TAG de finalizao de um
comando qualquer finalizada com a precedncia de uma barra (/).

Em geral:
<nome da TAG>t e x t o </nome da TAG>

onde:
<nome da TAG>: indica o incio da TAG
</nome da TAG>: indica o fim da TAG

Para criar uma pgina Web, voc pode utilizar qualquer editor de texto simples,
at mesmo o bloco de notas do Windows. Porm mais prtico utilizar um editor de
HTML, que escrevem parte dos comandos para voc.

Guardando os seus documentos em HTML
1. Clique no menu ARQUIVO e escolha a opo SALVAR COMO;
2. Selecione o local,ou pasta onde voc ir salvar seus arquivos;
3. Na caixa de texto NOME DE ARQUIVO, digite o nome_do_arquivo.htm. No
esquea da extenso: *.htm ou *.html;
4. Na caixa de texto SALVAR COMO TIPO, selecione todos os arquivos (*.*);
5. Clique em salvar.

MODELO BSICO DE PGINA WEB

Uma pgina Web criada em HTML, possui trs partes bsicas: estrutura
principal, um cabealho e um corpo de pgina.

Possui uma estrutura dividida em 4 TAGs bsicas:

<HTML>... <HTML>
<HEAD>... <HEAD>
<TITLE>... <TITLE>
<BODY>... <BODY>


8
Onde:

<HTML>... <HTML>
so usados para delimitar os comandos HTML, indicam o incio e o fim de um
documento. O browser reconhece a TAG <HTML>e identifica que o documento que
vir seguir deve ser interpretado como HTML.

<HEAD>... </HEAD>
Delimitam a seo do cabealho do documento onde sero definidos poucos
comandos de linguagem, o mais importante o ttulo que exibido na barra de ttulos
do browser.

<TITLE> ... </TITLE>
Definem o ttulo da pgina que p exibido na barra de ttulos do browser. Estas
TAGs devem estar sempre dentro das TAGs <HEAD></HEAD>.

<BODY> ... </BODY>
Dentro desta TAG esto os elementos da pgina web. W onde esto
localizados as os textos, imagens, ligaes com outras pginas, etc...

Exemplo:

<HTML>

<HEAD>
<TITLE>
CURSO DE HTML PGINA BSICA
</TITLE>
</HEAD>

<BODY>
DESENVOLVENDO PGINAS DE
INTERNET
</BODY>

</HTML>


9
T TUL OS

Todo documento em HTML deve possuir um ttulo. De um modo geral aparece
em um lugar separado da pgina, na maioria das vezes no alto da tela dos
navegadores.
Utilizado para identificar o documento. Interessante que possa sugerir
claramente o contedo do documento.

Exemplo:
<HTML>
<HEAD>
<TITLE> Curso de HTML </TITLE>
</HEAD>
<BODY>
<H2>Visualize a parte superior da janela do navegador </H2>
</BODY>
</HTML>

Como fica no navegador:


10
CA BEA L HOS:
So linhas do documento que so exibidas no browser com letras diferentes do
restante do texto chamando a ateno de uma nova seo ou tpico. Sempre que se
definir um novo cabealho, uma nova linha inserida em branco aps a sua linha.
Ao definir o tamanho de um cabealho, no se est definindo o tamanho da
letra, apenas indicado ao navegador de cada usurio que deve ser visualicado com
maior ou menor destaque que o resto do texto.

A TAG <H>
Esta possui seis tamanhos os modelos diferentes. O tamanho ou corpo dos
caracteres vai do nvel 6 (menor nvel) ao 1 (maior nvel).

Sintaxe de comando:
<Hn> TEXTO DO CABEALHO </Hn>

# n varia de 1 a 6
# H1 o maior corpo
# H6 o menor corpo

Exemplo:
cabealhos.htm
<HTML>
<HEAD>
<TITLE>Cabealhos
</TITLE>
</HEAD>
<BODY>
<H1>Texto formatado com
H1</H1>
H2</H2>
H3</H3>
H4</H4>
H5</H5>
H6</H6>
</BODY>
</HTML>


11
PA RGRAFOS

A TAG <P>
A TAG responsvel pela quebra de pargrafos a <P>que finaliza o pargrafo e
insere automaticamente a um alinha em branco entre pargrafos.
Tambm responsvel pelo alinhamento de pargrafos.

Sintaxe de comando:
<P ALIGN=posio>Texto do pargrafo.

Posio pode ser:
# Left: alinhamento a esquerda;
# Center: centralizado
# Right: alinhamento a direita

Exemplo:
Nome do arquivo: pargrafos.htm

<HTML>
<HEAD>
<TITLE>Alinhamento de Pargrafos </TITLE>
</HEAD>
<BODY>
<P>Este pargrafo utiliza o alinhamento padro dos navegadores de Internet (esquerdo).
<P ALIGN=center>Este pargrafo tem o alinhamento centralizado.
<P ALIGN=right>Este pargrafo tem o alinhamento a direita.
</BODY>
</HTML>


12
DEFI NI NDO FONTES

A TAG <FONT>
Permite que voc insira em sua pgina um texto com fontes de tamanhos, cores
e tipos diferentes.

Comando:
<FONT SIZE=n FACE=nome COLOR=cor>texto </FONT>

Onde:
$ SIZE=n: n varia de 1 a 7 e 3 o valor padro da maioria dos navegadores;
$ FACE=nome: nome da fonte a ser utilizada;
$ COLOR=cor: cor da fonte definida em hexadecimal, ou atravs de um nome pr-
definido de cores.

Exemplo:
Formatando_fontes.htm

Observaes:
Caso a fonte face indicada para sua
pgina no esteja disponvel para o usurio
que visitar a sua pgina, a fonte utilizada
ento ser a padro do navegador utilizado
pelo visitante;
Pode-se definir mais de uma fonte
face, caso a primeira no esteja instalada no
sistema do usurio, o browser reconhece a
prxima FACE definida;

Outros exemplos:
# fontes_especiais.htm;
# fontes_especiais2.htm;


13
ESTI L OS DE TEXTO

Como nos editores de texto, alem dos tamanhos das fontes, voc pode modificar
o estilo de texto. Pode-se atribuir o negrito, itlico, sublinhado entre outros, abaixo
relacionados:

Tabela de estilos:

COMANDO APLICANDO O ESTILO FUNO
Negrito <B>Texto </B> Atribui o estilo negrito
Itlico <I>Texto </I> Atribui o estilo itlico
Sublinhado <U>Texto </U> Atribui o estilo sublinhado
Strong <STRONG>Texto </STRONG> Semelhante ao estilo negrito
nfase <EM>Texto </EM> Semelhante ao estilo itlico
Typewriter <TT>Texto </TT> Espao regular ao texto
Big <BIG>Texto </BIG> Aumenta a fonte e atribui negrito
Small <SMALL>Texto </SMALL> Reduz e altera a fonte
Sobrescrito <SUP>Texto </SUP> Eleva o texto e eleva o seu corpo
Subscrito <SUB>Texto </SUB> Rebaixa o texto e diminui seu corpo
Pulsante <BLINK>Texto </BLINK> Faz o texto ficar pulsante

Exemplo:


14
A CENTOS E CA RACTERES ESPECI AI S

Os arquivos HTML, no podem conter nenhum tipo de formatao ou caracteres
especiais(smbolos ou letras acentuadas).
Para criar uma pgina com caracteres especiais, deve-se utilizar alguns cdigos
especiais que o browser interpreta e substitui por um caractere especfico.
Um bom exemplo seria representar uma TAG sem que o browser interpretasse
como uma TAG. escrevendo a TAG=<BODY>. Para represent-la os sinais<>=
<BODY>
Encontra-se em anexo uma tabela com uma lista de cdigos e caracteres especiais
mais utilizados.
Os navegadores mais atualizados reconhecem caracteres, alguns.

Exemplo:
<HTML>

<HEAD>
<TITLE>Alguns acentos e
caracteres especiais </TITLE>
</HEAD>

<BODY>
à<br>ã <br>â
<br>ä <br>é
<br>è <br>ê
<br>í <br>ì
<br>õ
</BODY>

</HTML>

Verificar a pgina acentos_e_caracteres_especiais.htm, que contem tabela de
exemplos


15
QUEB RA S DE L I NHA

A TAG <BR>
Faz uma quebra de linha sem acrescentar espaos extras entre linhas. Finaliza a
linha de texto e insere automaticamente uma outra linha em branco.
No necessita ser finalizada com </BR>

Exemplo:
<HTML>

<HEAD>
<TITLE>Utilizando a quebra de linhas com a TAG <BR></TITLE>
</HEAD>

<BODY>
Este texto est
utilizando a TAG BR no
final de cada
linha<BR><BR>
Voc pode
utilizar<BR>a TAG
BR<BR>toda vez
que<BR>voc quiser
passar o texto<BR>para a
prxima
linha.<BR><BR>O
resultado simples.
</BODY>

</HTML>


16
I NFORMA ES SOB RE A P GI NA

A TAG <META>
Proporcionam informaes sobre a pgina, para o utilizador e para os motores de
pesquisa. Estes tags s necessitam e devem estar presentes na primeira pgina do site
(normalmente no index.html), porque s essa pesquisada pelos search engines.
Existem dois tipos de motores de pesquisa ou search engines: os indexes e os
spiders. Os primeiros so atualizados manualmente e os spiders so automticos. Deste
modo, no Yahoo!, que um index, para que um site seja listado, tem que se preencher
um formulrio, envi-lo, e esperar por uma resposta de um responsvel do yahoo a
confirmar que o site foi adicionado base de dados. Em contrapartida, no AltaVista, que
se trata de um spider, para adicionar um site, s se tem de introduzir o url na seco "add
url" e esperar por uma resposta automtica e quase imediata do robot, a confirmar que o
endereo existe e que os <META>tags foram localizados.
Os <META>tags encontram-se geralmente dentro do <HEAD></HEAD>e depois
do <TITLE></TITLE>.

Os atributos de <META>:

CONTENT:
1. Corresponde a informao disponvel na TAG <META>.

NAME:
1. O atributo NAME indica o tipo de informao que o <META>tag apresenta. Pode
ter vrios valores, tais como:
$ Keywords: indica as palavras chaves da pgina.
Exemplo: <META NAME="keywords" CONTENT="HTML, Tags, Atributos">
$ Description: indica uma breve descrio da pgina.
Exemplo: <META NAME="description" CONTENT="Uma pgina sobre HTML">
$ Author: indica o autor da pgina.
Exemplo: <META NAME="author" CONTENT="Gabriel Augusto">

Visualizando a pgina: http://www.uol.com.br

Visualizando o
cdigo fonte da
pgina do UOL,
observe as
informaes sobre a
pgina neste ponto.


17
I NSERI NDO COMENTRI OS EM SUA P GI NA

So utilizados em sua pgina WEB para descrever procedimentos utilizados na
criao de sua pgina.
O texto de um comentrio no exibido pelo navegador.
Alguns navegadores de Internet no reconhecem o uso de TAGs dentro de
comentrios, sendo assim quando utilizadas junto ao seu comentrio poder exibir na
pgina o seu comentrio.
So muito teis na hora de manuteno de uma pgina. Servem como lembretes
ou dicas para o programador que far a atualizao da pgina WEB.

Sintaxe de Comando:
<!Texto do pargrafo -->

Exemplo:
<HTML>
<HEAD>
<TITLE>Pgina com comentrios </TITLE>
</HEAD>
<BODY>
Esta pgina contm diversos comentrios



</BODY>
</HTML>

Observe que em
determinados pontos do
cdigo fonte, so inseridos
comentrios para prpria
orientao do
programador da pgina


18
L I NHA S HORI ZONTA I S

A TAG <HR>
Insere linhas horizontais no navegador. Este recurso pode ser utilizado para dividir
a sua pgina chamando a ateno para algum tpico especfico.

Sintaxe de comando:
<HR WIDHT=N% ALIGN=Posio SIZE=n COLOR =#cor NOSHADE>

Sobre cada atributo:
1. WIDHT=n%: define a largura da linha. Pode ser definida em pixels ou em
porcentagem do tamanho horizontal da tela;
2. ALIGN=posio: posio pode ser:
$ left: alinhamento a esquerda;
$ center: centralizado;
$ right: alinhamento a direita
3. SIZE=n:define a espessura da barra, em pixels;
4. COLOR=#cor: define uma cor a barra utilizada
5. NOSHADE: define que a barra no deve receber o efeito 3D.

Exemplo:
<BODY bgcolor="#D6E4ED">

<div align="center>Linhas Horizontais</div>
<br>
Linhas com alturas - SIZE- diferentes:
Tamanho 10: </font>
<HR SIZE="10" WIDTH="85%">
Tamanho 20:
<br>
Linhas com larguras - WIDHT - diferentes:
Largura 50% da pgina:
Largura 100% da pgina:
<br>
Linhas com alinhamentos - ALIGN - diferentes:
Alinhamento a direita da pgina:
<HR SIZE="05" ALIGN="RIGHT" WIDTH="80%">

</BODY>


19
CONTROL E DE CORES E GR FI COS DE FUNDO

A maioria dos browsers permite a utilizao de cores, apenas 256, mas j o
suficiente para voc criar uma pgina com fundo e texto personalizados.
As cores so compostas por cdigos RGB(red, green, blue). cada cdigo define
a intensidade do vermelho, do verde e do azul, formando uma cor. Cada cdigo varia
de 0 a 255, onde 000 equivale ao preto e 255 255 255 equivale ao branco.
Devem ser informados no formato hexadecimal. no necessrio decorar os
cdigos de uma cor, para isto s verificar a tabela de coresXcdigos em anexo.
Para definir cores para sua pgina voc deve utilizar a TAG <BODY>que possui
atributos vinculados a ela que personalizam cada pgina de Internet.
Pode-se Atribuir RGBs para cor de fundo da pgina, texto e links

CORES E ELEMENTOS GRFICOS DE FUNDO

# Cor de fundo - BGCOLOR:
a cor do fundo da pgina.
Este um atributo que deve ser inserido dentro da TAG BODY;

Comando:
<BODY BGCOLOR=#RRGGBB>

Exemplo:
<body bgcolor=" #FFFFCC" text="#000033">
<H4 align="center">COR DE FUNDO<br>
BGCOLOR="#cor"</H4>
Com este atributo você controla a cor
de fundo das páginas.<br><br>
Comando:<br>
<BODY BGCOLOR="#FFFFCC"
TEXT="#000033">
</body>
</html>

# Imagem de fundo - BACKGROUND:

Aplica uma imagem como plano de fundo e que ocupar toda a rea do fundo da
tela do navegador, aplicada em seqncia, uma ao lado da outra.
Deve ser inseridos a marcao <BODY>e especificar a URL da uma imagem
que ser utilizada na pgina.

Comando:
<BODY BACKGROUND=URL>Corpo da Pgina </BODY>


20

Exemplo:
<body background=
" ../imagens/fundo1.jpg" >
<h3 align="center">IMAGEM DE DE
FUNDO<br>
BACKGROUND="endereço&
quot;</h3>
Com este atributo você insere
imagens de fundo nas suas
páginas. <br><br>Comando:<br>
<BODY
BACKGROUND="../imagens/fundo1
.jpg">
</body>

Nota:
importante ter cuidado quando aplicar elementos de fundo para que no seja
prejudicada a leitura do texto.
Sempre vale a pena visitar outras pginas que utilizam este recurso para
recolher boas idias.
Alguns usurios de internet navegam sem a utilizao de imagens para viabilizar
uma melhor velocidade de acesso a WEB. em vista disso interessante atribuir junto
ao <BODY>uma cor de fundo (BGCOLOR) .

CORES DE LETRA E LINKS

# Texto - TEXT:
Utilizado para controlar a cor do texto normal em uma pgina
TEXT=#RRGGBB= a cor do texto, o padro preto;

Sintaxe de Comando:
<BODY TEXT=#RRGGBB>Corpo da Pgina </BODY>


21

Exemplo:
<body bgcolor="#FFFFFF"
text=" #333333" >
<div align="center">
<h4>CORES DE LETRAS DE TEXTO
NORMAL<br>
TEXT="#cor"</h4></div>
Com este atributo, você controla
a cor do texto normal em uma
pgina.<br>
Neste exemplo, estamos utilizando a
cor indicada conforme o exemplo a
seguir.<br><br>Comando:<br>
<BODY
BGCOLOR="#FFFFFF"
TEXT="#333333">
</body>

# Links LINK, VLINK, ALINK, :

! LINK=#RRGGBB= a cor dos links, o padro azul;
! VLINK=#RRGGBB= a cor dos links visitados, o padro vermelho-prpura;
! ALINK=#RRGGBB= a cor do link ativo, onde o usurio pressionou o boto do
mouse, mas ainda no soltou, o padro vermelho.

Comando:
<BODY LINK=#RRGGBB VLINK=#RRGGBB ALINK=#RRGGBB>

Exemplo:
<BODY BGCOLOR="#FFFFE0"
TEXT="#FF6347" LINK=" #ADFF2F"
VLINK=" #7FFFD4" ALINK=" #0000CD" >
<h1>EXEMPLO DE CORES<h1><BR>
<h3>O fundo da pgina est com uma cor
especial: Lightyellow - RGB:FFFFE0</h3><BR>
<h3>A cor do texto : Tomato -
RGB:FF6347</h3><BR>
LINKs: Greenyellow - RGB:ADFF2F<BR>
VLINKs: Aquamarine - RGB:7FFFD4<BR>
ALINKs: Mediumblue - RGB:0000CD<BR>
</div>
</BODY>


22
A L I NHA NDO EL EMENTOS DE UMA P GI NA

A TAG <DIV>
Permite que voc alinhe horizontalmente qualquer elemento em sua pgina.
Esta difere da TAG <CENTER>por permitir alinhamento centralizado. O Alinhamento
pode ser left, center ou right.

Comando:
<DIV ALIGN=posio>Elementos a serem alinhados</DIV>

Onde:
posio pode ser:
# left: alinhamento a esquerda;
# center: centralizado;
# right: alinhamento a direita

O alinhamento padro a esquerda, por defaut.

Exemplo:
<HTML>
<HEAD>
<TITLE>Alinhando Elementos com a
TAG DIV </TITLE>
</HEAD>
<BODY>
<DIV ALIGN="CENTER">Usando a TAG
DIV:</DIV>
<BR>
<DIV ALIGN=RIGHT>
<P>Usando a TAG DIV voc pode alinhar
o seu texto sem problemas.
<P>Pode utilizar o alinhamento a direita,
que alinha o seu texto na margem direita
da tela. Como um texto criado em um
editor de textos pra ser impressos em
uma pgina.
<P>Com a TAG DIV voc pode aproveitar
o mesmo alinhamento para vrios
pargrafos.
</DIV>
</BODY>
</HTML>

A TAG <CENTER>
Permite centralizar horizontalmente qualquer elemento em sua pgina. O efeito
exatamente o mesmo da TAG <DIV ALIGN=CENTER>, porm a TAG CENTER no
reconhecida em todos os navegadores.

Comando:
<CENTER>Elementos a serem centralizados</CENTER>


23
Exemplo:
<HTML>
<HEAD>
<TITLE>Centralizando com a TAG CENTER </TITLE>
</HEAD>
<BODY>
<CENTER>
TAG CENTER
</CENTER>
<br>
<p align="justify">Centralizar os
elementos de sua página em
relação ao navegador
Deve ser iniciada <center>e
finalizada </center>, para não
centralizar todos os elementos da
página. Você pode
utilizar.</p>
<b>EM IMAGENS:</b>
<div align="center"><b><CENTER>
</b><br>
<img
src="../imagens/dexter_laboratory.jpg"
width="185" height="154"><br>
</CENTER></div><BR>
<b>EM TEXTOS:</b><br>
<b><CENTER> </b><br>
<CENTER>Permite centralizar
horizontalmente qualquer elemento em
sua pgina. O efeito
exatamente o mesmo da TAG <DIV
ALIGN="center">
ELEMENTO A SER
CENTRALIZADO </DIV>, porm a
TAG CENTER no reconhecida em
todos os navegadores.</center>
<b></CENTER></b><br>
</BODY>
</HTML>


24
L I STA S

Uma boa forma de organizar as pginas WEB. Podem servir como resumos ou
ndices de todo o site, contendo links para as outras pginas criadas por voc ou outras
pessoas.

TIPOS DE LISTAS:
# Listas no numeradas;
# Listas numeradas;
# Listas de definies;
# Listas intercaladas.

# Listas No Numeradas:
A TAG <UL>:
Inserem marcadores na frente de cada item.

Comando:
<UL TYPE=formato>
<LI>Tpico 1
<LI>Tpico 2
<LI>Tpico 3
</UL>

Onde:
1. <UL>: incio da lista pontuada;
2. TYPE=formato: o formato do marcador pode ser:
$ disc: o marcador um ponto (padro utilizado pelos navegadores, no
precisa indicar)
$ square: o marcador um quadrado
$ circle: o marcador um crculo
3. <LI>: tpicos da lista, no e necessrio encerrar com a TAG </LI>;
4. </UL>: fim da lista pontuada.


25
Exemplo: listas_nao_numeradas.htm
<HTML>
<HEAD>
<TITLE>Listas No Numeradas
</TITLE>
</HEAD>
<BODY>
<H3>Listas No Numeradas</H3>
<UL TYPE="disc">
<LI>TYPE="disc"
<LI>Tpico um;
<LI>Tpico dois;
<LI>Tpico trs.
</UL>
<UL TYPE="square">
<LI>TYPE="square"
<LI>Tpico um;
<LI>Tpico dois;
<LI>Tpico trs.
</UL>
<UL TYPE="circle">
<LI>TYPE="circle"
<LI>Tpico um;
<LI>Tpico dois;
<LI>Tpico trs.
</UL>
</BODY>
</HTML>

# Listas Numeradas:
A TAG <OL>:
Permite inserir em sua pgina uma lista numrica ou alfabtica, com valor pr-definido ou
no

Sintaxe de comando:
<OL TYPE=formato START=n><LI>Tpico 1<LI>Tpico 2<LI>Tpico n</OL>

Onde:
1. <OL>: incio da lista numerada;
2. TYPE=formato: o formato da numerao pode ser:
$ 1: lista numrica(no necessrio ser definido);
$ A: lista alfabtica com letras maisculas;
$ a: lista alfabtica com letras minsculas;
$ I: lista numrica com nmeros romanos maisculos;
$ i: lista numrica com nmeros romanos minsculos.
3. START=n: o valor inicial da lista numerada;
4. <LI>: tpicos da lista;
5. </OL>: fim da lista numerada.


26
Exemplo: listas_numeradas.htm
<HTML>
<HEAD>
<TITLE>Listas Numeradas
</TITLE>
</HEAD>
<BODY>
<H3 align="center">Listas Ordenadas -
Numeradas</H3>
<H4>Lista Numerada Padro:</H4>
<OL>
<LI>Tpico um;
<LI>Tpico dois;
<LI>Tpico trs.
</OL>
<H5>Lista Numerada Padro com
START="10":</H5>
<OL START="10">
<LI>Tpico um;
<LI>Tpico dois;
<LI>Tpico trs.
</OL>
<H5>Lista Alfabtica com Letras Maisculas:</H5>
<OL TYPE="A">
<LI>Tpico um;
<LI>Tpico dois;
<LI>Tpico trs.
</OL>
</OL>
</BODY>
</HTML>

# Listas de Definies:
A TAG <DL>:
So diferentes das outras listas, pois cada item de cada lista possui dois componentes:
um tpico e a descrio do tpico.
Sintaxe de comando:
<DL><DT>Tpico 1<DD>Descrio do tpico 1 <DT>Tpico n <DD>Descrio do
Tpico n </DL>
Onde:
1. <DL>: incio da lista descritiva;
2. <DT>: tpico da lista descritiva;
$ no h limite para o nmero de tpicos;
$ no necessrio a TAG </DT>;
3. <DD>: descrio da lista descritiva:
$ para cada TAG <DT>existe uma TAG <DD>;
$ no necessrio a TAG </DD>;
4. </DL>: fim da lista descritiva.


27
Exemplo:
<HTML>
<HEAD>
<TITLE>Listas Descritivas
</TITLE>
</HEAD>
<BODY>
<H3><I>Exemplo de Listas
Descritivas</I></H3>
<DL>
<DT><B>Listas No Ordenadas:</B>
<DD>As listas no ordenadas ou pontuadas
inserem&nbsp<I>marcadores</I>&nbspna
frente de cada item.
<DT><B>Listas Ordenadas:</B>
<DD>As listas ordenadas ou numeradas
inserem&nbsp<I>nmeros</I>&nbspou&nbsp
<I>letras</I>&nbsp na frente de cada item.
<DT><B>Listas Descritivas:</B>
<DD>As listas descritivas ou de grossrio
so diferentes das outras listas. Cada item
de uma lista descritiva tem dois componetes:
um <I>tpico</I>e uma <I>descrio de
tpico</I>.
</DL>
</BODY>
</HTML>

# Listas Intercaladas:
Pode ser utilizada para voc criar listas hierrquicas, mesclando listas
ordenadas e no numeradas. utilizado para melhor organizar a estrutura de tpicos;
utilizados como links, mapa de sites.


28
TEXTO A NI MA DO

O comando MARQUEE orienta o browser a definir o efeito de texto passando na
tela para o texto digitado entre o incio e o fim da tag. Permite que uma imagem possa
correr de um lado para o outro na pgina tambm.
Deve ser utilizado quando voc desejar dar um destaque a uma frase, palavra
ou at mesmo a um pargrafo da pgina. Com cautela, sem exageros para no chamar
a ateno do usurio ficando voltado somente para o destaque, deixando de lado o
restante da pgina.

Comando:
<MARQUEE>Texto ou imagem </MARQUEE>

Atributos:
1. <MARQUEE>:
$ abertura da TAG de movimento;
2. ALIGN=posio:
Posio em relao ao browser, que pode ser:
$ top: alinha o texto com o topo do marquee;
$ middle: alinha o texto com o centro do marquee;
$ bottom: alinha o texto com a base do marquee;
3. BEHAVIOR=controle:
Controla o comportamento do texto dentro do marquee, que pode ser:
$ scroll: faz que o texto entre por um dos cantos e saia por outro,
$ slide: o texto entra por um dos cantos e do marquee e para ao chegar ao
canto oposto;
$ alternate: o texto fica passando de um canto para o outro dentro do
marquee;
4. BGCOLOR=#000000:
Muda a cor do fundo do marquee, valores em hexadecimais, ver tabela de cores
anexas a esta apostila;
5. DIRECTION=direo:
Define a direo no qual o texto se move, pode ser:
$ left: faz o texto correr para a esquerda;
$ right: faz o texto correr para a direita;
6. HEIGHT=altura:
Define a altura do marquee, sendo que n um valor em pixel ou um porcentual da
altura da janela;
7. WIDTH=n ou n%:
Define a largura do marquee, sendo que n um valor em pixel ou um porcentual
da altura da janela;
8. HSPACE=n:
Define margens a esquerda e a direita do marquee, sendo que n um valor em pixels;
9. VSPACE=n:
Define margens acima e abaixo do marquee, sendo que n um valor em pixels;
10. LOOP=n:
Define quantas vezes o texto ir cruzar o marquee, sendo que n o nmero de
vezes. Se n for igual a 1 ou infinite, ele ir passar pelo marquee infinitamente;
11. SCROLLAMOUNT=n:


29
Controla a velocidade do texto, definindo o nmero de pixels entre cada redesenho
do texto, sendo que n o valor em pixels que separa cada redesenho do texto, quanto
maior o n, maior o movimento do texto;
12. SCROLLDELAY=n:
Controla a velocidade do texto ao definir os intervalos de redesenho do texto,
sendo que n o valor em milisegundos do intervalo de redesenho do texto, quanto
menor o n, mais rpido o movimento do texto;
13. </MARQUEE>:
Encerra a TAG marquee.

Visualizando exemplo:
Para visualizar o exemplo e necessrio estar com o navegador aberto para
execuo da animao.


30
ENDEREOS

Normalmente utiliza-se o final da pgina para colocar informaes sobre o autor
da pgina, data da ltima alterao e outras informaes que achar necessrio.
Para isso utiliza-se:

A TAG <ADDRESS>

Tudo que fica dentro dela fica em itlico.

Comando:

<ADDRESS>Informaes a serem dispostas sobre o autor </ADDRESS>

Exemplo:
<html>
<head>
<title>ADDRESS</title>
</head>

<body bgcolor="#FFFFFF">
<div align="left">
<img src="../imagens/ufpel_pagina.jpg"
width="307" height="254"><br>
<ADDRESS> <br>
</div>
<ADDRESS>
---------------------------------------------------<br>
UNIVERSIDADE FEDERAL DE
PELOTAS<br>
Campus Universitário, s/n° -
Caixa Postal 354<br>
CEP 96010-900 - Pelotas, RS - BRASIL<br>
PABX: (53) 275-7000 - FAX: (53) 275-
9023<br>
CNPJ : 92.242.080/0001-00 <br>
--------------------------------------------------- <br>
</ADDRESS>
</ADDRESS>
</body>
</html>


31
I NTERL I GA NDO DOCUMENTOS L I NK S

O principal poder do HTML vem da capacidade de interligar partes de um texto,
imagens a outros documentos.
A interligao entre documentos no se restringe somente as ligaes com
outras pginas. Em pginas muito longas onde um assunto tem vrios tpicos,
podemos utilizar ndices onde os links tem a funo de interligar os tpicos de um texto
e que com apenas um clique em um dos tpicos do ndice, o item exibido.

LINKS PARA MESMO DIRETRIO:
Voc s precisa especificar o nome do arquivo que ser chamado e a sua extenso.

Sintaxe de comando:
<A HREF=nome do arquivo.extenso>Texto ou imagem </A>

Onde:
$ A: abertura da TAG de link;
$ HREF=nome do arquivo.extenso: deve ser informado o nome completo do
arquivo que ser acessado;
$ Texto ou imagem: que servir como link;
$ /A: encerra a TAG de link.

Observao:
No deixar espao em branco entre <A>e </A>.

Exemplo:


32
LINKS PARA OUTROS DIRETRIOS OU PASTAS:

Para criar links para uma pgina localizada em outros diretrios necessrio
indicar o caminho completo do arquivo. Para a WEB isto tem uma forma um pouco
diferente do Windows e do DOS, veja:
$ A barra utilizada para separar diretrios a barra convencional (/);
$ O ponto de partida para localizar um arquivo em outro diretrio o atual;
$ Para baixar um nvel deve utilizar os sinais ../ ;

Exemplo:
Neste exemplo foi criado um link na
pgina index.htm que acessa a pgina
primeira.htm, localizada dentro da pasta
pgina.

Para inserir um link na pgina entrada.htm,
- localizada dentro da pasta pagina - a
pgina index.htm, que esta um diretrio abaixo,
temos que descer um
diretrio, para isso
utiliza-se dois pontos ..
como no exemplo ao
lado:

LINKS PARA OUTROS SERVIDORES:

Para criar um link para arquivos localizados em qualquer parte do mundo
necessrio indicar a URL do arquivo.
URL a abreviatura de Uniform Resource Locator. Tem a funo de especificar
a localizao de pginas ou arquivos em servidores da WEB.
Composta de duas partes:


33
# O protocolo Internet do documento;
# O endereo do servidor da pgina.

Comando:
<A HREF=protocolo://servidor.arquivo>Texto ou imagem </A>.

Onde:
protocolo: o tipo de servidor que est sendo acessado;
Os mais utilizados so:
# http: Hiper Text Transfer Protocol, um servidor da WWW;
# ftp: File Tranfer Protocol, um servio para a troca de arquivos, programas entre
um servidor e um computador remoto;
o servidor: o computador que contm a pgina;
o arquivo: o nome do arquivo (diretrio e nome do arquivo).
O protocolo do servidor deve ser seguido:
o Dos smbolos ://;
o Do endereo do computador remoto.

Exemplo:

<body bgcolor="#FFFFFF">
<h3>LINK PARA OUTROS
SERVIDORES</h3>
<br>
<A
HREF="http://www.ufpel.tche.br&
quot;><a
href="http://www.ufpel.tche.br"><img
src="../imagens/simbolo_ufpel.gif"
width="110" height="108" border="0"
align="middle"></a>
</A> </div>
</body>

LINKS PARA MESMA PGINA:
muito simples. Definem-se sees na pgina, sendo que cada ter um nome
que servir de referncia para o link.

NCORAS:
Para ter links em uma mesma pgina, deve-se criar uma ncora no incio de
cada seo que ser acessada por um link. um ponto de referncia ou endereo que
ser acessado por um link. Utilizada para marcar o incio de cada seo da pgina. O
nome da ncora ser a referncia utilizada pelo link que a acessar.
Para criar ou acessar uma ncora deve-se utilizar a TAG de vnculo, com
atributos diferenciados.


34
Criando ncoras:
Com este atributo voc escolhe um local da pgina para inserir uma ncora.
Esta TAG fica invisvel ao usurio. Pode ser visualizada no cdigo fonte.
Normalmente utilizado em pginas com mais de uma tela do navegador e
inserida no topo do documento

<A NAME= nome da seo ></A>
# A: abertura da TAG de link;
# NAME=nome da seo: cria o nome da seo, marcando o incio da seo;
# No necessrio inserir nada entre os campos <A>e </A>;
# </A>: encerra a TAG.

Linkando ncoras:
Com esta TAG voc ir inserir uma imagem ou texto que indica ao usurio que
ao clicar neste tipo determinado de link ele ir para o local onde foi inserida uma
ncora.

<A HREF=#Nome da Seo>Texto ou imagem </A>
$ A: abertura da TAG de link;
$ HREF=#Nome da Seo: nome da seo que deve ser acessada;
$ </A>: encerra a TAG de link

IMPORTANTE:
O smbolo #indica ao navegador que o link se encontra na mesma pgina.
indispensvel o uso de "#.

CRIANDO LINKS PARA O SEU E-MAIL:
Voc deve informar o seu endereo eletrnico na TAG de LINK.

Sintaxe de comando:
<A HREF= mailto:endereo > Texto ou imagem </A>
$ mailto: informa ao browser que o link para um endereo eletrnico
$ endereo: o endereo de e-mail

Exemplo:
<body bgcolor="#FFFFCC">
INSERINDO
LINK PARA O SEU E-MAIL<br>
<A
HREF="mailto:seu_e_mail@domínio
"><a href="mailto:seu_e_mail@dom%
EDnio">Clique aqui<br><img
src="../imagens/email1.gif" width="90" height="90"
align="middle" border="0"><br>
para enviar<br>um e-mail</a></A><br>
Você pode inserir imagem, texto ou os dois
conforme o exemplo para indicar seu e-mail.
</div></body>


35
LINK DE DISPOSIO DE ARQUIVOS PARA DOWNLOADS

Basta no link referenciar um arquivo com a extenso *.EXE, *.ZIP

E ao clicar no link aparecer:

Clique neste
ponto para salvar
seu arquivo.
Escolha o local de
destino para salvar
o seu documento.
Download em
andamento.
Processo de cpia do
arquivo e salvamento
para o local de destino
pr-determinado
Download concludo:
- Abrir: executa o arquivo
do download;
- Abrir pasta: pasta onde
foi salvo o arquivo;
- Fechar: fecha a janela
de download.


36
I MAGENS GR FI CA S

Atualmente a maioria dos browsers exibe imagens, porm no qualquer tipo de
arquivo imagem que deve ser inserido em HTML. Os formatos mais aceitos na WEB
so GIF e J PEG.

GIF e JPG
O formato GIF (Grafics Interchange Format) pode ser utilizado em diferentes
plataformas de hardware (PC e Macintosh), suporta no mximo 256 cores e gera
arquivos menores , com extenso .gif. este formato muito utilizado para desenhos e
grficos.
O formato J PEG (J oint Photographic Engineering Group) suporta 16 milhes de
cores e pode reduzir o tamanho de uma imagem at dez vezes. Gera arquivos com a
extenso .jpg e .jpeg. muito utilizado para fotos.
Utilizar imagens de dimenses pequenas, gravadas no formato J PEG (no caso
de fotografias) ou GIF (melhor para desenhos, em preto-e-branco ou com poucas
cores). Tenha cuidado com as GIFs animadas; elas podem ocupar bastante espao em
disco, dependendo do nmero de cores e quadros de animao. Estes cuidados
tambm faro a sua pgina carregar mais rapidamente, tornando a visitao mais
agradvel.

INSERINDO UMA IMAGEM - <IMG SRC= nome do arquivo.extenso >

<IMG SRC=nome do arquivo.extenso WIDTH=n HEIGHT=n
ALIGN=posio ALT=mensagem BORDER=n>

Onde:
SRC=nome do arquivo.extenso: o nome do arquivo e sua extenso;

Exemplo:

imagens_graficas.htm

<HTML>
<HEAD>
<TITLE>Imagens Grficas
</TITLE>
</HEAD>
<BODY>
<center>
<H2>INSERINDO UMA IMAGEN</H2>
<BR>
<h3>CANCUN BEACH</h3><BR>
<img src="../imagens/cancun_beach.jpg">
</center>
</BODY>
</HTML>


37
DIMENSIONANDO AS IMAGENS:
O tamanho das imagens exibido pelo navegador pode ser alterado. Recurso este
muito utilizado para a criao de trumbnails, que so pequenas imagens que servem
como links para imagens maiores. O tamanho do arquivo da imagem no alterado.
Podemos redimensionar a figura atravs dos atributos a seguir:
1. WIDTH=n:
Altera a largura da imagem. Valores dados em pixels.
2. HEIGHT=n:
Altera a altura da imagem. Valores dados em pixels.

Exemplo:
<HTML>
<HEAD>
<TITLE>Redimensionando Imagens Grficas
</TITLE>
</HEAD>
<BODY>
<H2 align="center">Redimensionando<br>
Imagens Grficas</H2>
<CENTER>
<H3>Tamanho original da paisagem: 300 x 197 pixels -
20k</H3>
<p><img src="../imagens/paisagem.jpg"><BR>
widht="240" height="137"<br>
<IMG SRC="../imagens/paisagem.jpg" widht="240"
height="137" ALIGN="middle"><BR>
widht="160" height="57"<br>
<IMG SRC="../imagens/paisagem.jpg" widht="160"
height="57" ALIGN="middle">
</p>
</CENTER>
</BODY>
</HTML>

Nota:
As figuras redimensionadas podem perder um pouco a sua definio.

ALINHAMENTO DA IMAGEM:

ALIGN=posio:

Em relao ao navegador:
$ Right: alinhamento a direita;
$ Left: alinhamento a esquerda(padro dos navegadores);

Exemplo:
imagens_alinhadaas_navegador.htm


38
<HTML>
<HEAD>
<TITLE>Imagens Alinhadas em relao ao navegador
</TITLE>
</HEAD>
<BODY>
<h3 align="center">Imagens Alinhadas em Relao ao
Navegador </h3>
<BR>
Alinhamento a direita: <img
src="../imagens/dexter_laboratory2.jpg" align="right"
width="90" height="90">
<BR>
Alinhamento a esquerda: <img
src="../imagens/dexter_laboratory2.jpg" align="left"
width="90" height="90">
<BR>
<center>Alinhamento centralizado<br>
com a TAG CENTER:<br>
<img src="../imagens/dexter_laboratory2.jpg" width="90"
height="90">
</center>
</BODY>
</HTML>

Em relao ao texto:
$ Top: alinhamento pelo topo da imagem;
$ Bottom: alinhamento pela base da imagem;
$ Middle: alinhamento pelo centro da imagem;

Exemplo:
imagens_alinhadas_texto.htm

<BODY>
<H2>Imagens Alinhadas em Relao ao Texto </H2>
<BR><BR>
Alinhamento pelo topo da imagem:
<img src="../imagens/praia.jpg" ALIGN="top"><BR><BR>
<hr align="center" size="2" widht="80%"><BR><BR>
Alinhamento pela base da imagem:
<img src="../imagens/praia2.jpg" ALIGN="bottom"><BR><BR>
Alinhamento pelo centro da imagem:
<img src="../imagens/praia3.jpg" ALIGN="middle"><BR><BR>
</BODY>


39
DEMAIS ATRIBUTOS

$ ALT= mensagem :
Este atributo tem a funo de exibir uma mensagem no lugar da imagem
enquanto ela carregada. Quando o navegador no exibe imagem a mensagem
exibida em seu lugar. Tambm tem a funo de especificar, indicar sobre uma imagem,
quando o cursor colocado sobre a imagem.

Exemplo:
imagens_com_alt.htm
<HTML>
<HEAD>
<TITLE>Imagens com mensagens
</TITLE>
</HEAD>
<BODY>
<center><H3>ISERINDO UMA
MENSAGEM EM UMA IMAGEM</H3>
<BR>
<img src="../imagens/peixes.jpg"
ALT="Peixes no Lago. Este mais um exemplo de mensagens em uma imagem.
Visualizada quando o mouse passa por cima da imagem.">
</center>
</BODY>
</HTML>

$ BORDER= n :
Podem ser definidas diferentes tamanhos de bordas
para uma imagem, em pixels

Exemplo:
imagens_bordas.htm
<BODY>
<center>
<H2>INSERINDO BORDAS <BR>EM IMAGENS</H2>
<BR>
<img src="../imagens/animaniacs.jpg" BORDER="0"
ALT="Animaniacs sem bordas">
ALT="Animaniacs com borda 5">
ALT="Animaniacs com borda 10">
</center></BODY>


40
I NSERI NDO SOM

TAG <BGSOUND> - Sem player disponvel ao usurio:
Este comando carrega um arquivo de udio como trilha sonora enquanto a pgina
esta sendo visualizada. Quando a pgina encerrada a execuo do som tambm
finalizada.

Comando
<BGSOUND SRC=nome_arquivo.extenso LOOP=INFINITE>

# SRC= nome_arquivo.extenso: define o nome de arquivo de udio a ser
carregado durante a execuo da pgina.
# LOOP=n: n define quantas vezes o arquivo de udio ser executado. Se n for
igual a 1 ou INFINITE, o arquivo ser executado infinitamente durante a visita na
pgina.

Nota:
# Esta TAG de som pode ser inserida em qualquer ponto da pgina, dentro da
marcao <BODY></BODY>;
# Procure no inserir arquivos de udio muito grandes para diminuir o tempo de
acesso a pgina para os usurios que tem conexo discada(modem 56Kb).
# Suporta os seguintes formatos de arquivos de udio:
o *.wav;
o *.midi;
o *.au;
o *.mp3

TAG <EMBED> - Player visvel ao usurio:
Com esta TAG possvel o internauta interagir no som disponvel na pgina.

Comando:
<embed width="120" height="50" src="nome do arquivo.extenso" autostart="false"
showstatusbar="1" showdisplay="1">

# width: largura do player
# height: altura do player
# src: local relativo ou absoluto do arquivo (.mid, .wav, .mp3, .wma; .au)
# autostart: se true, o arquivo de midia ser inicializado automatimente, se false ficar
em modo parado
# showstatusbar: se 1 exibe o status do arquivo de midia, se 0 oculta as informaes
# showdisplay: se 1 exibe informaes sobre o arquivo de midia, se 0 oculta as
informaes


41
Exemplo:
<html>
<head>
<title>SOM NA PÁGINA -
<EMBED></title>
</head>
<body bgcolor="#F7FFD2">
<div align="center"><embed width="120"
height="45"
src="../sons/avril_lavigne_complicated.mid
" autostart="false"></embed><br>
Neste exemplo: <br>
<EMBED WIDTH="120"
HEIGHT="45"
SRC="../sons/complicated.midi"
AUTOSTART="false">
</font></div>
</body>
</html>


42
TA B EL AS

Muito utilizadas para organizar as pginas de internet hoje em dia. Tambm para
modelar o layout das home pages, organizar dados na web.
Pode ser inserido texto, imagens grficas, links.
Em primeiro momento voc pode achar difcil a compreenso das TAGs utilizadas
nas tabelas, mas isto s num primeiro momento de contato com estes cdigos. Mas
depois torna-se muito fcil a sua utilizao e interpretao para corrigir possveis falhas
em um editor de HTML qualquer.
Pode tambm ser utilizada dentro de outras tabelas, melhorando a disposio dos
contedos de sua pgina

MARCAES BSICAS PARA DESENVOLVER TABELAS EM HTML:

<TABLE> </TABLE>:
Ete o comando para se inserir a tabela, esta TAG deve ser encerrada.
Antes e depois de inserir uma tabela, sempre acontece uma quebra de linha

<TR> </TR>: Table Row
Serve para inserir linhas em uma tabela

<TD> </TD>: Table Data
Este comando insere clulas, em cada linha. Define os dados da tabela.

DESENVOLVENDO UMA TABELA SIMPLES:

Exemplo: tabelas.htm
<TABLE BORDER=1><! Inicia a tabela e
coloca uma borda de espessura igual a 1>
<TR><! Cria a primeira linha da tabela>
<TD>Primeira clula </TD><! Aqui foi
criada uma clula>
<TD>Segunda clula </TD>
<TD>Terceira clula </TD>
</TR><! Fecha a primeira linha da tabela>
<TR><! Abre a segunda linha da tabela>
<TD>Primeira clula </TD>
<TD>Segunda clula </TD>
<TD>Terceira clula </TD>
</TR><! Encerra a Segunda linha da
tabela>
</TABLE><! Encerra a tabela>

*Com isto voc j consegue Ter uma idia de como montar suas tabela. O segredo
para se conseguir fazer estas tabelas de forma eficiente planejar e ter a idia exata do
contedo desta tabela.
**Nas clulas da tabela voc pode inserir desde simples frases at figuras inteiras.
***Parmetros podem ser acrescidos s tabelas, tais como : aumentar ou diminuir a
largura de uma clula; distanciar as clulas uma das outras; inserir cor de fundo dentro da
clula etc.


43

<TH> </TH>: Table Header
Define os ttulos das tabelas. Podem ser posicionados em qualquer
clula.Quando inserido como o Table Data, as informaes contidas dentro desta TAG
aparecem em negrito.

Exemplo:
tabelas_table_header.htm
<table border="1" width="400">
<tr>
<td>Novos Cadastros</td>
<th>Outubro</th>
<th>Novembro</th>
<th>Dezembro</th>
</tr>
<tr>
<th>Alunos</th>
<td>10</td>
<td>3</td>
<td>16</td>
</tr>
<tr>
<th>Professores</th>
<td>3</td>
<td>7</td>
<td>11</td>
</tr>
</table>

<CAPTION> </CAPTION>:
Esta TAG insere a legenda da Tabela. Inserir entre <TABLE>e </TABLE>.

Exemplo:
tabela_caption.htm
<table BORDER="1"
WIDTH="80%">
<caption>LEGENDA ENTRE
CAPTION</caption>
<tr>
<th align="center">Uso de
Table Header - TH</th>
</tr>
<tr>
<td align="center">Uso de
Table Data - TD</td>
</tr>
</table>


44
ATRIBUTOS DE CONTROLE DE TABELAS:

WIDTH= valor ou % :
Com este atributo possvel alterar a largura da tabela em relao ao
navegador. Tambm a largura das clulas, como no exemplo que segue.
Para alterar a largura de uma clula da tabela basta acrescentar o parmetro
WIDTH dentro da tag <TD>.

Exemplo:
tabela2.htm
<table BORDER="2">
<tr>
<td
WIDTH=" 25%" >WIDTH=25%</td>
<td ALIGN="MIDDLE"
WIDTH=" 75%" >WIDTH=75%</td>
</tr>
</table>
<br>
<br>
<center>
<table BORDER="2">
<tr>
<td
WIDTH=" 100" >WIDTH=100</td>
<td ALIGN="MIDDLE"
WIDTH=" 200" >WIDTH=200
(PIXELS)</td>
</tr>
</table>

BORDER=n:
Com este abributo possvel colocar em maior destaque uma determinada
tabela. O nmero da espessura de uma tabela definida em pixels.

Exemplo:
tabela_atribuindo_bordas.htm
<table border=" 5" width="300"
align="center">
<tr>
<td width="33%" align="center">L1 -
C1</td>
C2</td>
C3</td>
</tr>
<tr>


45
<td width="33%" align="center">L2 - C1</td>
<td width="33%" align="center">L2 - </td>
<td width="34%" align="center">L2 - C3</td>
</tr>
</table>

ATRIBUINDO BORDER= 3 E BORDER= 0

Sintaxe de comando:
<tr>
<td width="50%"
align="center">
Tabela com
BORDER="3"&nbsp
;
table border=" 3" width="90%">
<tr>
<td width="50%"
align="center">Grmio</td>
<td width="50%"
align="center">J uventude</td>
</tr>
<tr>
<td width="50%"
align="center">Pelotas</td>
<td width="50%" align="center">Brasil</td>
</tr>
</table>
</td>
<td width="50%" align="center">
Tabela com BORDER="0"
<table border=" 0" width="90%">
<tr>
<td width="50%" align="center">So Paulo</td>
<td width="50%" align="center">Bahia </td>
</tr>
<tr>
<td width="50%" align="center">Palmeiras </td>
<td width="50%" align="center">Internacional </td>
</tr>
</table>
</td>
</tr>
</table>

*Neste exemplo foram colocadas duas tabelas dentro de uma tabela.


46
ALIGN= posio :
Este atributo controla o alinhamento do contedo dentro das TAGs TD, TR, TH.
Podem ser:
$ left:
alinhamento a esquerda;
$ center:
alinhamento centralizado;
$ right:
alinhamento a direita.

Exemplo:
tabela_alinhamentos.htm
<table border="1"
width="474">
<tr>
<td width="152"
align="center"><b>P
RIMEIRA
CLULA</b></td>
<td width="147"
align="center"><b>S
EGUNDA
CLULA</b></td>
<td width="153"
align="center"><b>T
ERCEIRA CLULA</b></td>
</tr>
<tr>
<td width="152" align="center">ALIGN="left"</td>
<td width="147" align="center">
ALIGN="center"</td>
<td width="153" align="center">
ALIGN="right"</td>
</tr>
<tr>
<td width="152">ESQUERDA</td>
<td width="147">
<p align="center">CENTRO</td>
<td width="153">
<p align="right">DIREITA</td>
</tr>
</table>

*Quando adicionado dentro da TAG <TABLE>, o alinhamento ser em relao ao
navegador, que pode ser:
$ ALIGN=left: alinhamento a esquerda (padro, no necessrio especificar);
$ ALIGN=center: alinhamento centralizado;
$ ALIGN=right: alinhamento a direita.


47
VALIGN= posio :
Controla o posicionamento do contedo dentro ds clulas. Pode ser:
$ top: alinhamento superior;
$ middle: alinhamento centralizado;
$ bottom: alinhamento inferior;

Pode ser adicionado dentro das TAGs TR,TD, TH.

Exemplo:
<tr>
<td width="234" align="center"><b>Controle do posicionamento dos contedos
das clulas pode ser:</b></td>
<td width="91" valign=" top" align="center"><b>TOP</b></td>
<td width="91" valign=" middle" align="center"><b>MIDDLE</b></td>
<td width="91" valign=" bottom" align="center"><b>BOTTOM</b></td>
</tr>
</table>


48
CELLSPACING= valor em Pixels :
Este atributo compreende a distncia entre clulas e linhas.
Deve ser adicionado dentro da TAG <TABLE>.
Como padro dos navegadores a distncia 2 pixels

Exemplo:
<table border="1" width="80%" ALIGN="center" cellspacing=" 6">
<tr>
<td width="33%"
align="center"><b><font size="2"
face="Arial
Narrow">CELLSPACING="6
"</font></b></td>
<td width="33%"
align="center"> </td>
<td width="34%"
</tr>
<tr>
<td width="33%"
<td width="33%" align="center"><b><font size="2" face="Arial
Narrow">CELLSPACING="6"</font></b></td>
<td width="34%" align="center"> </td>
</tr>
<tr>
<td width="34%" align="center"><b><font size="2" face="Arial
Narrow">CELLSPACING="6"</font></b></td>
</tr>
</table>

CELLPADDING= valor em pixels :
Este atributo utilizado para formatar o espao entre o contedo de uma clula
e suas bordas em todos os sentidos.
aplicado dentro da TAG <TABLE>


49
Exemplo:
<table border="1" width="80%" align="center" cellpadding=" 8" >
<tr>
<td width="33%"
align="center">PRA</td>
<td width="33%"
align="center">MAMO</td>
<td width="34%"
align="center">ABACAXI</td>
</tr>
<tr>
<td width="33%"
align="center">KIWI</td>
<td width="33%"
align="center">MELANCIA</td>
<td width="34%"
align="center">MORANGO</td
>
</tr>
<tr>
<td width="33%" align="center">ABACATE</td>
<td width="33%" align="center">MELO</td>
<td width="34%" align="center">MIRTILO</td>
</tr>
</table>

NOWRAP: sem quebra de linha
Este atributo evita a quebra de linha dentro da clula. O texto inserido dentro do
campo no pode ser dividido em mais de uma linha.
Deve ser adicionado dentro do <TD>.

Exemplo:
<table border="1"
width="100%"
align="center">
<tr>
<td width="50%"
nowrap>Clula com
NOWRAP. O texto fica sem
quebra
de linha.</td>
<td width="50%">Ao
contrrio desta clula que
no foi adicionado, o texto
sofre quebra de linha.</td>
</tr>
</table>

*Isto j d uma idia do funcionamento geral das tabelas na WEB. Muito dos
alinhamentos que encontramos na Internet feito por intermdio de tabelas.


50
**Voc tambm pode usar todos os outros recursos j vistos de HTML para
otimizar o uso de tabelas.

ROWSPAN=n:
Define quantas linhas uma mesma clula pode abranger. Por padro, na maioria
dos navegadores de internet cada clula adicionada em uma tabela corresponde a uma
linha. Pode ser aplicado em TH ou TD, proporcionando a mesmo efeito.

Exemplo: tabelas_rowspan.htm
<table border="1" width="380" cellpading="7" align="center">
<tr>
<td width="16%" rowspan=" 3" >3 linhas</td>
<td width="16%">coluna 2</td>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>

COLSPAN= n
Este atributo define quantas colunas uma clula pode abranger. Por padro, na
maioria dos navegadores de internet cada clula adicionada em uma tabela
corresponde a uma coluna. Pode ser aplicado em TH ou TD, proporcionando a mesma
abrangncia.


51
Exemplo: tabelas_colspan.htm
<table border="1" width="80%" align="center">
<tr>
<td width="24%"
colspan=" 3" >CLULA COM 3
COLUNAS</td>
</tr>
<tr>
</tr>
</table>

INSERINDO FIGURAS E CORES COMO PLANO DE FUNDO
Outro atributo que podemos ter nas tabelas mudar a sua cor de fundo, isto se
torna particularmente til quando se quer dar destaque a uma clula em especial.

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>


52
COLOCANDO UMA IMAGEM DE FUNDO NAS TABELAS
Um recurso parecido com a cor de fundo , colocar uma imagem como fundo de
uma tabela uma tcnica muito usada. Atravs do complemento BACKGROUND
dentro da tag TABLE , basta indicar qual o endereo e o nome da figura.

Exemplo:

<TABLE BACKGROUND=" nome do
arquivo.extenso" BORDER=5>
<TR>
<TD>imagem</TD>
</TR>
</TABLE>

USANDO 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=endereo/nome da
figura.extenso></TD>
</TR>
</TABLE>

Claro que voc deve usar com muito
bom senso este artifcio da tag <TABLE>,
pois nem sempre uma moldura em uma figura
define um bom layout (aparncia) na sua
home-page.


53
FORMATANDO LINHAS INTERNAS

RULES= complementos
Para escolher as linhas internas que sero mostradas dentro da tabela , usamos
o atributo RULES , dentro da tag <TABLE>.
Os complementos desse atributo so :

$ none : nenhuma linha interna ;
Sem as linhas internas de uma tabela tanto horizontais quanto verticais, como pode
ser visto no exemplo a seguir

Exemplo:
tabelas_rules_none.htm
<table border="1" width="300" rules=" none" >
<tr>
<td width="20%"
align="center">Alberto</td>
<td width="20%"
align="center">Fabiana</td>
<td width="20%"
align="center">Denis</td>
</tr>
<tr>
<td width="20%"
align="center">Alex</td>
<td width="20%"
align="center">J aqueline</td>
<td width="20%"
align="center">Lisla</td>
</tr>
<tr>
<td width="20%" align="center">Giovane</td>
<td width="20%" align="center">Ctia</td>
<td width="20%" align="center">Sandra</td>
</tr>
<tr>
<td width="20%" align="center">Darlan</td>
<td width="20%" align="center">Heloisa</td>
<td width="20%" align="center">Iara</td>
</tr>
</table>

$ rows : sem linhas verticais internas
Este complemento do atributo RULES, retira a visualizao das linhas verticais
internas entre cada clula da tabela. No dedixando de permitir a organizao do
contedo interno das tabelas.

Exemplo:
tabelas_rules_rows.htm
<table border="2" RULES=" rows" width="300">


54
<tr>
<td width="25%">papel</td>
<td width="25%">disquete</td>
<td width="25%">cadernos</td>
<td width="25%">corretivo</td>
</tr>
<tr>
<td width="25%">grafite</td>
<td width="25%">caneta</td>
<td width="25%">lapizeira</td>
<td
width="25%">calculadora</td>
</tr>
<tr>
<td width="25%">tesoura</td>
<td width="25%">pincel</td>
<td width="25%">lpis</td>
<td width="25%">borracha</td>
</tr>
</table>

$ cols: sem linhas horizontais entre cada coluna da tabela ;

Exemplo:
tabelas_rules_cols.htm

<table border="2" RULES=" cols"
width="300">
<tr>
<td width="25%">papel</td>
<td width="25%">disquete</td>
<td width="25%">cadernos</td>
<td width="25%">corretivo</td>
</tr>
<tr>
<td width="25%">grafite</td>
<td width="25%">caneta</td>
<td width="25%">lapiseira</td>
<td width="25%">calculadora</td>
</tr>
<tr>
<td width="25%">tesoura</td>
<td width="25%">pincel</td>
<td width="25%">lpis</td>
<td width="25%">borracha</td>
</tr>
</table>


55
Observao:

As tabelas so um recurso de
modelagem das home-pages hoje em
dia.
Alguns comandos HTML no
funcionam em um dado navegador, se
voc reparou para falarmos de tabelas
rodamos os exemplos nos dois
navegadores mais conhecidos : Internet
Explore 4.0 e no Netscape Communicator
4.0.
Voc no reparou nenhuma
diferena no uso destes navegadores
para nossos exemplos, a questo que
para tabelas mais complexas, com
alinhamentos mais precisos cada
navegador interpreta estes comandos
HTML de tabelas de forma diferenciada.
Um exemplo tpico uso de
CELLSPACING e CELLPADDING.
Isto se deve ao fato de que nem a
Netscape e nem a Microsoft entram em
um acordo quanto a padronizao de
seus navegadores. Sendo assim, quando
voc construir tabelas deve sempre levar
em conta em qual navegador voc dar
preferncia para rodar a sua pgina. Por
isso nunca demais deixar claro sua
home-page em qual navegador ela roda
melhor a sua formatao.


56
FRA MES

um recurso que permite dividir uma pgina de internet em outras, na mesma
pgina. Nada mais que uma pgina que chama outras na pgina inicial que um
documento html que contm frames.
Tambm chamados de moldura. Alguns programas como o Macromedia
Dreamweaver, por exemplo, em portugus.
Em um determinado arquivo como o index.htm, onde pode ser definido a
estrutura das novas janelas para o seu HTML.
O quantidade de frames utilizados definido por <FRAMESET>, cada frame
chama uma pgina de internet diferente, a ser apresentada em cada frame. Onde
cada pgina de uma frame interage com outra.
Normalmente utilizado na pgina de abertura (index.htm).
Estrutura de um frame
So utilizados um conjunto de TAGs, cada qual com sua funo:

<FRAMESET>:
a TAG de insero para a elaborao de um conjunto de frames com seu
elementos.
O FRAMESET aceita os atributos COLS e ROWS, referentes a diviso das
janelas que pode ser horizontal ou vertical. E internamente s podem ser utilizadas as
marcaes FRAMESET, FRAME ou NOFRAMES.

Atributos utilizados:
# COLS=colunas, largura:
Define o nmero de colunas a ser utilizado, o valor pode ser em pixels ou
porcentagem. neste atributo que definido o nmero de quadros usados em um
frame.
# ROWS=linhas, altura:
Tem a mesma funo do atributo COLS, s que este para as linhas de um
frame.
# FRAMEBORDER=0:
Voc pode atribuir borda na divisa de frames, 0 sem borda e 1 com borda

<FRAME>:
Define o frame a ser criado. No utilizada a Tag de encerramento </FRAME>,
pois no necessita.
Define cada janela contida em um rea, no necessita da TAG de finalizao
(/FRAME).

Atributos utilizados:
# SRC=URL:
Endereo do arquivo e extenso que ser exibido no frame
# NAME=nome da janela:
Este atributo utilizado para associar um nome a uma janela. Utilizado para criar
alvos de um frame para outro.


57
# MARGINWIDTH=valor:
Controla as margens de cada frame, a direita ou esquerda. Distncia entre os
contedos de cada pgina e as margens da janela.
# MARGINHEIGHT=valor:
Tem a mesma funo do MARGINWIDTH, s que controla as margens superiores
e inferior.
# SCROLLING=yes, no ou auto:
um atributo opcional. Define se uma janela deve ou no possuir barra de
rolagem. O padro utilizado, caso no especificar auto, sendo assim o seu navegador
ir aplicar quando neceessrio.
# NORESIZE:
Este atributo no possue complementos. Quando no adicionado a TAG
<FRAME>, o usurio poder alterar o tamanho das janelas, movendo as bordas das
janelas com o cursor. Por padro todas as janelas podem ter seu tamanho alterado, mas
bom colocar este atributo para no modificar o layout de sua pgina.

<NOFRAMES>:
Esta TAG utilizada para informar a alguns usurios de que seu navegador de
internet no suporta FRAMES. Hoje em dia a maioria dos navegadores no tem este
problema, como os antigos navegadores IE 2.0.
Permite a navegao em primeira pgina somente. Sendo assim colocar as
informaes de como atualizar o navegador do usurio para poder visualizar a sua
pgina corretamente.
Esta TAG deve ser encerrada com </NOFRAMES> e inserida dentro de
frameset. Exemplo:

<FRAMESET>
<NOFRAMES>Informaes a serem dispostas aqui sobre a impossibilidade
de navegar com frames em uma pgina.
</NOFRAMES>
</FRAMESET>

INTERLIGANDO DOCUMENTOS ENTRE FRAMES:

A marcao:

TARGET=complementos:
Utilizada opcionalmente na TAG de links, permite controlar o alvo em que uma
determinada pgina ir abrir, ou seja, em que frame especfico dever aparecer.

Complementos do atributo alvo (TARGET):
# nome do frame: Indica em qual frame dever ser aberta a nova janela indicada por
um link em um frame diferente. No necessrio indicar caso a janela a ser aberta
dever ser localizada no mesmo frame;
# _blank: Convenciona ao navegador que ele dever abrir uma janela, em branco por
um determinado link, para visualizar a pgina indicada por ele;


58
EXEMPLO USO DE FRAMES:

Criar uma pgina principal: frames.htm
Subdividida em dois frames, dispostos em colunas:

Coluna 1 25% de largura Coluna 2 - * de largura
O navegador disponibilizar a
esta janela o restante da tela
utilizada pelo navegador para o
lado direito
Nome: frame_1.htm Nome: frame_2.htm

Arquivo: frame_1.htm
<html>
<head>
<title>FRAME 1</title>
</head><body><div align="center">
<font size="4" face="Arial Black">FRAME
1.HTM</font><br><a href="frame_2.htm"
target="frame_2">Frame 2 (Pgina
Inicial)</a><br><br><br>
<a href="frames_ancoras.htm"
target="frame_2">ncoras</a><br>
<a href="frames_imagens_fundo.htm"
target="frame_2">Backgrounds na
Pgina</a><a href="frames_tabela
_backgrounds.htm" target="frame_2">
Backgrounds em Tabelas</a></div>
</body>
</html>

Arquivo: frame_2.htm

<html>
<head>
<title>FRAME 2</title>
</head>
<body>
<font size="4" face="Arial Black">
FRAME 2.HTM
<br><br>
PGINA INICIAL
</font>
</div>
</body>
</html>


59
INTERLIGANDO OS DOCUMENTOS PARA A PGINA COM FRAMES:

Arquivo: frames.htm

<html>
<head>
<title>*** PGINA COM FRAMES *** </title>
</head>
<frameset cols="25%,*" frameborder="1">
<frame name="frame_1" src="frame_1.htm" noresize scrolling="no">
<frame name="frame_2" src="frame_2.htm" noresize scrolling="auto">
<noframes>
Seu computador no comporta frames <br><br>
Atualize a
verso do
seu
navegador:
<br><br><a
href="http://d
ownload.micr
osoft.com/do
wnload/ie6sp
1/finrel/6_sp
1/
W98NT42K
MeXP/PT-
BR/ie6setup.
exe">---
CLIQUE
AQUI ---
</a>
</noframes>
</frameset>
</html>


60
FORMUL RI OS

um dos recursos mais interessantes em linguagem HTML.
Permitem ao usurio de web interagir com o servidor, enviando informaes
para o provedor do servio.

FINALIDADES DOS FORMULRIOS:
! Venda de produtos;
! Cadastro on-line;
! Pedidos de tele-entrega;
! Reservas em Hotis;
! Solicitao de servios em geral;
! Troca de informaes entre usurios e servidores;
Para melhor compreender as notaes utilizadas nos formulrios, primeiro
precisamos nos familiarizar melhor com o HTML.
Podemos ter tambm mltiplos formulrios em um nico hiperdocumento,
certificando-se apenas de que as TAGs <FORM>e </FORM>no se sobrepem.
Se um formulrio possuir apenas um campo de entrada de texto, ao teclar
ENTER aps inserir determinada informao, o formulrio ser submetido, ou seja, o
navegador ir interpretar como se o usurio estivesse acionado o boto de SUBMIT.
Para isso utilizar a tecla TAB ou o mouse.

Comandos de formulrios
So basicamente trs:
# TEXTAREA: define uma rea onde o usurio poder digitar linhas de texto
# SELECT: define opes em um quadro de rolagem, uma lista drop down,
permitindo que o usurio selecione a opo desejada.
# IMPUT: definem botes e caixa de seleo, botes para limpar e enviar dados,
linhas de texto, etc.

As TAGs de um formulrio devem ser iniciadas <FORM> e finalizadas
</FORM>. Os comandos de um formulrio devem ser inseridos entre essas TAGs, os
quais possuem seus prprios atributos.

Comando Geral:

<FORM> Define o incio do formulrio

Atributos:
METHOD=
So dois:
- POST: o mais utilizado pois envia cada informao de forma separada da URL.
Com este mtodo POST os dados entrados fazem parte do corpo da mensagem enviada
para o servidor e transfere grande quantidade de dados.
- GET: com este, os dados entrados fazem parte do URL associado consulta
enviada para o servidor e suporta at 128 caracteres

ACTION= nome da biblioteca a ser acessada no servidor
Cada provedor pode dispor as suas, as quais contm informaes para o envio de dados
do seu formulrio.


61

Entre as TAGs do formulrio, so inseridas as TAGs TEXTAREA, SELECT e
INPUT.
Neste ponto sero inseridas as linhas de comando para o seu formulrio,
seguidas da rotina fornecida pelo provedor.

</FORM> Finaliza o formulrio

TAGs do formulrio:

INPUT
uma opo para a reunio de informaes, tais como:
# Campos de senha;
# Botes para marcar;
# Caixas de seleo;
# Limpar dados digitados e enviar dados

Comando geral:
<INPUT TYPE= tipo a escolher >
Existem diferentes atributos para cada tipo de TYPE, que veremos a seguir:

TEXT

Armazena dados digitados pelo usurio
tais como nome, endereo, telefone, cidade, etc

<INPUT TYPE=text NAME=telefone SIZE=10 MAXLENGTH=10>
# NAME: nome obrigatrio;
# SIZE: tamanho do campo visualizado no formulrio;
# MAXLENGTH: nmero mximo de caracteres, a ser determinado para o campo.

NOTA:
Importante sempre utilizar o atributo NAME para definir o nome dos campos.

PASSWORD
Utilizado quando se deseja armazenar
dados confidenciais que no aparecem na
tela do navegador quando digitados. Por
exemplo as senhas.
<INPUT TYPE=password NAME=senhas SIZE=15 MAXLENGTH=15>
# SIZE: tamanho do campo visualizado no formulrio;
# MAXLENGTH: nmero mximo de caracteres, a ser determinado para o campo.


62
CHECKBOX

Define uma caixa de seleo para o visitante
marcar a opo desejada.

<INPUT TYPE=checkbox NAME=opera VALUE=sim>
# VALUE: valor definido para resposta quando selecionado este o item.

RADIO

Tambm define uma caixa de seleo, mas que
s permite ao usurio selecionar uma das opes.

<INPUT TYPE=radio NAME=nota VALUE=excelente>Excelente
# NAME: define o nome dos dados, obrigatrio. Os itens para seleo devem ter o
mesmo NAME;
# VALUE: valor retornado ao autor quando um determinado nome for escolhido.

* Voc pode ter diferentes caixas de seleo CHECKBOX em um mesmo
formulrio, desde que tenham NAMES diferentes.

HIDDEN
Com este atributo as informaes dispostas ficam ocultas. Tem a funo de
interagir por exemplo com o usurio a preencher um determinado campo que voc
determinou obrigatrio. De um modo geral voc configura a interatividade do formulrio
com o usurio e tambm a forma de recebimento dos formulrios preenchidos na sua
pgina por seus visitantes. Tudo vai depender do seu provedor, das opes que ir
dispor para estes fins.
<INPUT TYPE=hidden NAME= VALUE= >
# NAME:define o nome dos dados. Obrigatrio.
# VALUE: pode indicar destinos, ou campos obrigatrios utilizando seu nome.

RESET

Um boto inserido e tem a funo de apagar os dados
digitados no formulrio.

<INPUT TYPE=reset VALUE=apaga>
# VALUE: define o nome que aparecer no boto.


63
SUBMIT
Um boto inserido e tem a funo de submeter as informaes
digitadas no formulrio para o servidor.

<INPUT TYPE=submit VALUE=enviar>
# VALUE: define o nome que aparecer no boto.

SELECT

Permite definir uma lista de opes, com
barra de rolagem ou fixa na tela do navegador.
pode ser selecionado um item.
uma TAG que deve ser iniciada <SELECT>e finalizada </SELECT>.

<SELECT MULTIPLE NAME=softwares>
<OPTION SELECTED VALUE=adobe>Adobe Photoshop
<OPTION VALUE=corel>CorelDraw
</SELECT>
# NAME: obrigatrio, serve para identificao da lista;
# OPTION: tem da lista;
# MULTIPLE: com este atributo a lista aparecer sempre aberta;
# SELECTED: indica como valor padro da lista;
# VALUE: valor a ser retornado ao servidor

TEXTAREA

Insere uma caixa de texto com um nmero pr-
determinado de linhas e colunas. Tem a finalidade de o
usurio deixar a sua mensagem para o autor.
uma TAG que deve ser iniciada <TEXTAREA>e
finalizada </TEXTAREA>.

<TEXTAREA NAME=comentarios ROWS=4 COLS=40 VALUE=comentarios>

Texto padro digite aqui seus comentrios.

</TEXTAREA>
# NAME: obrigatrio, pois define o nome dos dados inseridos
# ROWS: nmero de linhas;
# COLS: nmero de colunas;
# VALUE: no obrigatrio, indica qual o texto ser referenciado ao autor


64
UPL OA D DE A RQUI VOS

Hospedando o site:

Os programas de ftp fazem a conexo do seu micro com o micro do provedor
para que voc possa transmitir o site ou atualizaes feitas em pginas do site para a
internet.
Ao terminar de construir o site voc precisa transferir todas as pginas que
construiu para o provedor de acesso onde vai hospedar o site. atravs dele que
qualquer usurio conectado a internet pode navegar no site.
Na internet, existem inmeros
locais para hospedagem, tais como o
VilaBol, CJ B.net, GeoCities, FreeSites,
HPG.
Para transmitir o site para o
provedor de acesso voc vai utilizar um
programa de FTP (File Transfel
Protocol), que possibilitar que voc
envie ao provedor onde vai hospedar
seu site uma cpia de todos os arquivos do mesmo, sem nem ao menos precisar sair
de casa.
Voc vai precisar ter um programa de FTP instalado no micro. Sugerimos o FTP
Explorer, que pode ser conseguido gratuitamente na internet.
Alm do programa de FTP, voc vai precisar saber o host address do provedor,
ter um login (nome de acesso) e uma senha. O trs sero necessrios para configurar
o programa de FTP de forma que ele possa fazer a transmisso. Muitos provedores
utilizam no FTP o seu login e senha de acesso. O host address fornecido pelo
provedor e diferente para cada um deles.

Evitando problemas na hora de disponibilizar sua pgina na Web:

Coloque o nome de index.htm no arquivo principal de sua home page:
Isto facilita o acesso sua pgina, simplificando o endereo que ter o seguinte
formato: http://www.ufpel.tche.br/~username, sem necessidade de especificar um nome
de arquivo HTML - o servidor automaticamente procurar pelo arquivo index.htm ou
index.html para exibir ao visitante. Alm disso, caso algum tente acessar sua pgina
pelo endereo exemplificado anteriormente, e voc no tenha um arquivo index, o
servidor exibir a relao de todos os arquivos contidos no seu diretrio.
Use sempre letras minsculas nos nomes dos arquivos e sem acentos:
Os sistemas operacionais compatveis com Unix, utilizados na maioria dos
servidores Web interpretam caracteres maisculos e minsculos de maneira diferente.
Ou seja, os arquivos chamados index.htm, Index.htm e index.HTM so considerados
trs arquivos diferentes. Esta a causa principal de links que no funcionam e imagens
que no carregam quando a pgina transferida para o servidor.
Evite o uso de acentos e espaos em branco nos nomes de arquivos
O uso de caracteres acentuados e espaos em branco tambm pode causar
problemas na transferncia dos arquivos, ou exibir o endereo de sua pgina de
maneira estranha no browser do visitante. Evite os acentos, e em caso de nomes
longos use o sublinhado ( _ ) ao invs do espao para separar palavras.


65

UPLOAD DOS ARQUIVOS DO SITE
Para que outras pessoas possam acessar sua pgina atravs da Internet
preciso colocar os arquivos em nosso servidor Web, localizado no Centro de
Informtica da UFPel, por exemplo. Para realizar a transferncia utiliza-se um
programa de FTP (Protocolo de Transferncia de Arquivos).

Utilizando o programa WS-FTP:
Execute o arquivo ws_ftp32

Uma pasta chamada WS-FTP ser
criada em seu desktop (rea de trabalho)

Abra esta pasta e d
um duplo clique no cone
WS_FTP95 para iniciar o
prgrama.

Ser exibida a tela de conexo. No campo
HostName/Address, indique o endereo do
servidor. No campo User ID digite seu username
(seu nome de usurio na UFPel - a parte que vem
antes de @ufpel.tche.br, por exemplo) e clique em
OK. Se a conexo com o servidor obtiver sucesso,
o programa pedir sua password; nesta janela
digite sua senha - a mesma que voc usa para se
conectar e para checar o e-mail.

Informa o local de
descompactao do
arquivo e que ser
numa pasta
chamada WS-FTP.
Clique aqui
para
descompactar
Altera o local de
descompactao
dos arquivos.
Clique aqui
para iniciar o
programa


66
Pronto, voc est conectado
ao servidor. Na janela da esquerda,
voc visualiza os arquivos gravados
em seu disco rgido, enquanto que a
janela da direita mostra os arquivos
gravados na sua rea de disco na
Minerva. Se for sua primeira conexo,
a janela da direita deve estar em
branco - no se preocupe se
houverem alguns arquivos de
configurao, entretanto.

Para inserir novas pastas ou subdiretrio clique no boto MkDir bem direita da
tela; na janela que aparece, digite o nome que voc deseja. Uma pequena pasta
amarela com o nome dado deve estar aparecendo agora na janela da direita.
D um clique duplo na pasta criada. A janela ficar em branco, indicando que
no h nada na pasta que voc acabou de criar. Agora localize, na janela da esquerda,
os arquivos de sua pgina que voc deseja colocar no servidor. Marque os arquivos,
clicando uma vez sobre eles - aperte e segure a tecla CTRL para marcar mais de um
arquivos. Finalmente, clique no boto -->entre as duas janelas, indicando que voc
quer transferir os arquivos da janela da esquerda para a da direita. Os arquivos
aparecero na janela da direita quando a transferncia se completar.
Agora voc j pode testar sua pgina. Se tudo estiver correto sua pgina j deve
estar acessvel de qualquer parte do mundo!
Se no quiser transferir mais nenhum arquivo, retorne tela do WS-FTP e clique
em Close para encerrar a conexo, e em Exit para fechar o programa.


67
DI CA S

Voc deve indicar aos visitantes do seu site com contedos atualizados para que
voc os tenha sempre retornando. Com isso seu site ganhar muitas visitas, sempre.

$ Criar uma tela de abertura ou apresentao dinmica do site.
Evitar arquivos pesados, para carregamento rpido da pgina;
$ Evitar a construo de pginas com mais de duas telas verticais:
Esta regra deve ser seguida pelo menos para as pginas principais,
normalmente as que servem de ndice;
$ Carregamento rpido de suas pginas:
Garantir a exibio de texto e alguma imagem em menos de 15 segundos
$ Barra de navegao nas pginas:
A elaborao de uma barra de navegao para cada seo do site, com
links para retornar as pginas principais. Devem ser criadas com texto arial
ou verdana no tamanho 1 ou 2. Caso for com imagens, evitar imagens
superiores a 2Kb
$ Integrar imagens de fundo as pginas
Elas do um toque personalizado e exclusivo ao site. Crie de modo que
tenham o menor tamanho possvel.
$ Contraste de cores
Cuidado na utilizao das cores tanto para imagens quanto para o texto, que
possam prejudicar a visualizao de figuras e principalmente do texto em
primeiro plano.
$ Evitar links quebrados
Normalmente causam irritao, vamos dizer assim, por parte dos visitastes
que tendem a passar para outro site imediatamente.
$ rea da tela utilizada pelas pginas
Por padres internacionais, so utilizados na elaborao de sites a
resoluo de 800x600 pixels.
$ Imagens
Disponha no seu site imagens muito pesadas, superiores a 75Kb, pois a
quantidade de informao muito elevada nas conexes discadas. Evite
mais de 10 imagens por pgina, principalmente para aquelas com tamanho
superior a 20Kb
$ Uso de fontes e cores
De preferncia no utilize a cor branca para texto, o que impedir aos seus
visitantes imprimir suas pginas. Evitar o cansao visual, atrapalhando o
foco na informao existente.
$ Banners
Seu visitante com certeza no est olhando sua pgina para apreciar os
banners, evite mais de dois por pgina.
$ Frames
Use de modo que as divises fiquem transparentes. Elabore grficos que se
estendam pelos frames.
$ Atualizaes
Este fator demonstra seu empenho em cuidar, manter e incrementar o site,
atualize o visual, pelo menos nas pginas principais, no contedo do site.
Disponha no site a data de atualizao.

HTML Geral PDF

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

HTML Geral PDF

Загружено:

Авторское право:

Доступные форматы

UNIVERSIDADE FEDERAL DE PELOTAS

Centro de Informtica - Seo de Projetos Cientficos

Вам также может понравиться