Apostila de html (bsico)

Introduo
Como funciona a Internet
World Wide Web
E Mail
Correio Eletrnico
FTP (File Transfer Protocol)
HTM
Estrutura b!sica de uma "!#ina
Criando $ites HTM
Ta#s "ara formatar sua "!#ina
Ima#ens
in%s
&ncoras
Monta#em de listas em HTM
Tabelas em HTM
F'(ME$
Criando um frame Inline
Introduo
As redes de computadores existem h mais de vinte anos e so utilizadas por milhes de pessoas
em todo o mundo.
A primeira rede , ARPANET, que na sua origem conectava centros militares e de pesquisas, foi
utilizada por alguns cientistas de computao para obter acesso a computadores, compartilhar
arquivos e enviar mensagens eletrnicas Hoje em dia ,cientistas, engenheiros professores,
estudantes, bibliotecrios, mdicos, homens de negcios, polticos e at crianas, o utilizam para
receber jornais eletrnicos, ter acesso a "Bulletins boards"(BBS Visto mais adiante) , consultar
bases de dados e utilizam, remotamente, vrios equipamentos.
Atualmente, dentro da comunicao global, a informao disponvel na NTERNET ultrapassa os
limites fsicos, polticos e as estruturas econmicas de todas as partes do planeta, transformandose
em um frum universal que independente de raa ,profisso ou idade, disponibiliza informaes
das mais variadas para todos que se ligam a rede.
A ARPANET "foi aposentada" em 1990 , a CSNET deixou de existir em 1991 e a NTERNET
continua crescendo incontrolavelmente. Hoje, ela engloba mais de 5000 redes espalhadas em 145
pases espalhados pelos 5 continentes.
Estima-se um crescimento de 10%ao ms e um intercmbio de mais de 15 milhes de mensagens
entre a NTERNET e todas as demais redes conectadas.
A NTERNET comeou a ser utilizada no Brasil, em meados de 89/90, somente por nstituies de
pesquisas e um pouco depois por Universidades, permanecendo , assim , at o final de 1995,
quando a explorao comercial teve incio com a liberao de um BackBone lanado pela
EMBRATEL, com um grande incentivo para a sua propagao da mdia, que passou a abordar o
assunto, utilizando-se at de novelas.
A NTERNET nasceu em 1969 para descentralizar informaes militares norte-americanas em
vrias redes, a fim de se evitar que um ataque sovitico estratgico destrusse informaes
militares armazenadas em grandes computadores. Com isso, surgiu a ARPANET (rede da
Advance Research Projects Agency), um projeto experimental do departamento de defesa norte
americano que interligava computadores a centros de comando remotos. Algumas redes
experimentais se juntavam a ARPANET atravs de rdios e satlites.
No final dos anos 70 surgiu a USENET (Users Network) prestando servios a comunidades
universitrias e algumas organizaes comerciais. No incio da dcada de 80, a ARPANET dividiuse
em : ARPANET e MLNET (tambm militar), mantendo a comunicao entre ambas originou o
nome de DAR NTERNET e depois se abreviou para NTERNET.
Em 1986, foi criada a NSFNET (National Science Foundation Network) para viabilizar a conexo de
pesquisadores aos cincos grandes centros dos EUA e abrangendo, rapidamente redes acadmicas
e escolares.
Nessa poca, a NTERNET iniciou sua expanso. Novas redes foram a ela conectadas, mais
computadores e, consequentemente mais participantes. Redes internacionais similares surgiram e
hoje, temos uma presena mundial significativa, salvo na frica , onde contamos com poucos
pontos de presena.
Como funciona a Internet
Para que uma rede exista preciso que muitos computadores possam ser interligados ao mesmo
tempo. preciso instalar em cada computador um dispositivo chamado placa de rede. Ela permitir
que muitos computadores sejam interligados simultaneamente , formando o que se chama de uma
rede local , ou LAN ( do ingls Local Area Network ). Se essa LAN for ligada nternet , todos os
computadores conectados LAN podero ter acesso nternet. assim que muitas empresas
proporcionam acesso nternet a seus funcionrios.
Uma rede formada por vrios computadores interligados dentro de um estabelecimento (cidade,
estado..).
A NTERNET a "rede das redes". Ela composta de pequenas redes locais(LANS), redes
estaduais e enormes redes nacionais que conectam computadores de diversas organizaes
mundo afora.
Essas redes esto interligadas de diversas formas, desde uma simples linha telefnica discada at
malhas de fibras ticas. Estar na NTERNET significa participar de uma rede interconectada.
As redes que formam a nternet so nterligadas por outras redes de alta capacidade , chamadas
backbones ( espinha dorsal ). Os backbones so poderosos computadores conectados por linhas
de grande largura de banda como canais de fibra ptica , elos de satlite e elos de transmisso por
rdio. Como j vimos , a nternet surgiu a partir da criao do backbone original , o ARPAnet, um
projeto militar para intercmbio de informaes estratgicas financiado pelo governo americano. Ao
longo dos anos a nternet passou por vrias etapas , transformando-se numa rede de pesquisa
acadmica e , finalmente , na grande rede que .
A melhor forma de entender a nternet pensar nela no como uma rede de computadores, mas
como uma rede de redes. Sendo assim, a nternet no tem um dono ou uma empresa encarregada
de administr-la . A instituio que mais se aproxima de uma administrao central a Internet
Society. Trata se de uma entidade que se baseia no trabalho voluntrio de seus integrantes com
o objetivo de exercer o mnimo controle necessrio para manter a nternet em funcionamento.
O princpio bsico de uma rede a capacidade de "comunicao" entre dois computadores. Para
isso, utilizam-se protocolos , regras ou convenes que regem essa comunicao. Para que a
comunicao se efetive , dois computadores devem utilizar o mesmo protocolo, simultaneamente.
TCP/P (Trasmission Control Protocol / NTERNET Protocol) a famlia de protocolos da
NTERNET, desenvolvida nos anos 70 e utilizada pela primeira vez em 1983. considerado um
protocolo aberto e "sem dono". O que significa dizer que no produto de empresa nenhuma
especfica.
Cada vez que ocorre uma transferncia, o protocolo age quebrando a informao , formando
diversos pacotes e roteadores, que esto programados para envi-los corretamente ao seu destino.
As redes de nvel captam o trfego nos "BackBones"(redes de alta velocidade) e o distribuem para
suas prprias redes e vice-versa.
World Wide Web
WWW um servio baseado um hipertextos (documentos que possuem , dentro de si , conexes
com outros documentos) que permite buscar e recuperar informaes distribudas por diversos
computadores da rede . O hipertexto uma forma de apresentao grfica de informao que
contm palavras com ligaes subjacentes com outros textos , o que torna possvel leituras
diversas , no - lineares. Voc pode selecionar uma das palavras que aparece assinalada e ter
acesso a um novo documento , associado com o termo selecionado. O novo documento , por sua
vez , um outro hipertexto com novas palavras assinaladas.
Assim , como o gopher, o servidor WWWpode interligar-se com diversos outros servidoresWWW,
possibilitando a navegao em informaes disponveis na rede . Torna-se , assim , irrelevante
para o usurio a localizao fsica dos documentos recuperados.
O documento recuperado no precisa ser necessariamente em texto. Tambm pode conter outros
tipos de informao , tais como imagens , grficos e sons. Cabe lembrar que atravs de um
servidor WWW, possvel no s o acesso a documentos , mas tambm o acesso aos demais
servios da rede , como ftp,wais,gopher ,telnet, os quais voc ver posteriormente.
E - Mail
Correio Eletrnico
o servidor bsico de comunicao em redes de computadores . O processo de troca de
mensagens eletrnicas bastante rpida e fcil ,necessitando apenas de um programa de correio
eletrnico e do endereo eletrnico dos envolvidos.
endereo eletrnico de um usurio na NTERNET contm todas as informaes
necessrias , para que a mensagem (username) e uma parte relacionada localizao no
formato:
username@subdominios.domnio
EX: joo@mas.com.br
Uma mensagem composta de cabealho e corpo . O cabealho informa a data do envio da
mensagem, o endereo do emitente , um ttulo sobre o assunto , alm de informaes de controle .
O corpo da mensagem o seu contedo.
Embora a grande maioria das mensagens trocadas via rede sejam constitudas por informao
puramente textual, tambm possvel obter outros tipos de informao , tais como sons e
imagens . Atravs do correio eletrnico, tambm possvel utilizar outros servios de rede , tais
como listas de discusso, USENET News , ftp , archie.
FTP (File Transfer Protocol)
Protocolo de transferncia de arquivos o servio bsico de transferncias de arquivos na rede .
Com a devida permisso , possvel copiar um arquivo de um computador a distncia para o seu
computador ou transferir um arquivo do seu computador para um computador remoto , para tanto ,
voc deve ter permisso de acesso ao computador remoto .
Ante as restries para transferncia de arquivos foi criado o "FTP Annimo" para facilitar o acesso
de usurios de todo mundo a determinadas mquinas que mantm enormes repositrios de
informao. No necessrio uma permisso de acesso . O usurio ir identificar-se como
Anonymous quando o sistema requisitar o "log-in".
HTM
Falemos do que interessa mesmo.HTML abreviao de HiperText Markup Language a
linguagem de programao que usamos para criar uma pgina Web , que por sua vez ser
composta de textos e comandos especiais que chamaremos de Tags. No se assuste com o nome,
pois se trata de uma linguagem muito simples , e tem como finalidade bsica formatar o texto e
imagens exibidos e criar ligaes entre pginasWeb , criando assim documentos com o conceito
de Hipertexto.
Como em qualquer outra linguagem , o programador deve escrever o cdigo - fonte seguindo as
regras de sintaxe da linguagem. Este cdigo fonte posteriormente interpretado pelo browser ,
que se encarregar de executar os comandos ou tags do cdigo para formatar e acessar recursos
da Web.
Em maro de 1989, Tim Berners-Lee do European Laboratory for Particle Physics ( mais conhecido
como CERN ) , props um novo conjunto de protocolos para um sistema de distribuio de
informaes da nternet a ser usado entre os diversos grupos de pesquisa em fsica de altas
energias . Os protocolos da WWW foram logo adotados por outras organizaes e foi formado um
consrcio de organizaes , chamado de W3 Consortium , que uniu seus recursos de modo a
prosseguir com o desenvolvimento de padres WWW.
Esse consrcio liderado pelo MT ( Massachusetts nstitute of Technology) , pelo CERN e pelo
NRA ( French National nstitute for Research in Computer Science and Control). Ele prope
recursos mais novos e sofisticados de HTML , avalia sugestes e implementaes alternativas e
publica novos "nveis" de verses do padro HTML.
Existem vrios programas para editorao HTML , que tornaria nosso trabalho muito mais fcil e
nos acomodaria como usurios finais que no entendem nada do que esto fazendo. Por isso ,
sofreremos um pouco e usaremos o incrvel , sensacional , fantstico e estupendo Bloco de Notas
( NotePad ) do Windows.
Comandos HTM ! Ta"s
Os comandos em HTML so chamados de tags , e eles iro dizer ao browser como o texto, a
informao e as imagens sero exibidas . Por exemplo , um tag pode dizer que um texto ser
exibido em negrito , itlico e com um tipo de fonte qualquer. Alm de formatao de texto um tag
tambm pode dizer que na verdade um determinado pedao do texto um endereo para outra
pgina Web , que ser acessado ao dar um click no endereo.
Os tags so identificados por serem envolvidos pelos sinais < > ou </ >. Entre os sinais < > so
especificados os TAGS propriamente ditos . No caso de tags que precisem envolver um texto , a
sua finalizao dever ser feita usando a barra de diviso "/ " , indicando que o tag est finalizando
a marcao de um texto , o que faz os tags normalmente andarem em pares. O formato genrico
de um tag :
<Nome do tag> Texto </Nome do tag> .
Lembraremos sempre que no necessrio estar ligado Web para criar pginas HTML ou para
usar os Browsers. Basta que , ao terminar de escrever sua pgina no Bloco de Notas , voc salve
seu documento com um nome qualquer e a extenso HTM ou HTML , para que o browser possa
interpretar suas pginas.
Estrutura b#sica de uma $#"ina
Bem , deixarei claro que ultimamente o que vou explicar no bem assim , pois existe um certo
desleixo hoje na nternet , mas , seguindo o padro clssico teremos :
O TAG <HTML> que ser usado em conjunto com seu tag de fechamento < / HTML > e ser
colocado no incio e no final do documento , delimitando a rea onde sero colocados os TAGS
HTML .
O TAG <HEAD> - que tambm ter seu tag de fechamento </HEAD> e servir para delimitar uma
rea de cabealho com poucos TAGS (no necessrio ter esse TAG para sua pgina funcionar)
O TAG <TTLE> - que ser usado dentro dos tags <HEAD> , e servir apenas para colocar um
ttulo que aparecer na barra de ttulo do seu browser ( no esquea o </TTLE>) .
Dentro dos TAGS <BODY> </BODY> sero colocados todos os comandos , textos e imagens da
sua pgina . Ser o corpo da sua pgina.
Veja um exemplo de estrutura :
<HTML>
<HEAD>
<TTLE> Ttulo da pgina </TTLE>
</HEAD>
<BODY>
Aqui voc coloca os comandos em HTML , seus
Textos e magens .
Alis , tanto faz colocar os tags em maisculas ou
minsculas.
</BODY>
</HTML>
V at a opo Arquivo Salvar Como do seu Bloco de Notas e salve o exemplo acima como
TESTE. HTM .
Ao abrir o arquivo no browser , sua primeira pgina ficou assim :
Talvez voc tenha de problemas para abrir sua pgina. Ento vou dar uma explicao rpida no
nternet Explorer, e no Netscape que so muito parecidos .
1 V at o Menu Arquivo - Abrir. ;
2 Aparecer uma caixa para voc colocar o endereo da pgina. Clique no boto Procurar
(Browse.) ;
3 Aparecer a conhecida caixinha de pastas do Windows. V at a pasta onde voc gravou sua
pgina e clique em Abrir ( Open ) ;
4 Voc voltar at a caixa para a entrada do endereo , j com o caminho dentro da caixa ;
5 A s clicar OK .
Criando %ites HTM
Agora que aprendemos algumas tcnicas , como criar uma pgina HTML , salv la com a
extenso . HTM , abrir e v la em nosso browser , vamos formatar tudo o que for possvel , para
dar um ar mais profissional em sua pgina. Afinal , no exemplo que fizemos at agora , o fundo da
nossa pgina no tem cor , nossas fontes so estticas o que torna o conjunto da pgina feio.
Vamos ver agora algumas tags que ajudaro a tornar nossas pginas motivo de inveja para
qualquer um .
Ta"s $ara formatar sua $#"ina
Ta"s &H'(()* + &,H'(()*
O TAG <H> cria uma espcie de cabealho no documento , com padres de formatao j
prontinhos para usar. Serve para identificar o comeo de uma seo ou tpico , facilitando a
visualizao dentro da pgina. Logo aps o TAG <H> deve vir um nmero de 1 a 6 indicando o
tamanho da fonte , sendo que 1 o maior tamanho e 6 o menor. Exemplo :
<H1> Cabealho Grande </H1>
<H6> Cabealho Pequeno </H6>
Toda vez que usado esse TAG , a fonte j vir padronizada em negrito e em determinado
tamanho , alm de colocar uma linha em branco aps o texto. Lembre se de fechar com o tag
</H> .
Ta"s &CE-TE.* + &,CE-TE.*
Seria bom se pudssemos alinhar nosso texto bem no meio da pgina , centralizado At agora ,
tudo o que escrevemos est alinhado esquerda da nossa pgina , enquanto esteticamente ,
ficaria muito melhor centralizado. Essa a funo do TAG <CENTER> que centraliza um texto ,
uma imagem ou um elemento da pgina. Exemplo:
<CENTER> Essa frase est centralizada na pgina </CENTER>
Ta" &P*
A principal diferena entre a pgina HTML e um editor de textos tradicional que a pgina no
reconhece o fim de um pargrafo com o pressionamento da tecla Enter. Se voc simplesmente
escrever palavras sem TAGS de formatao em um arquivo html elas sero formatadas em um
grande nico pargrafo. Voc precisa forar o fim do pargrafo e a quebra de linha usando TAGS
especiais. O TAG responsvel pela quebra de pargrafos o TAG <P> . Ele iniciar um novo
pargrafo e pular uma linha entre o texto.
Sua sintaxe apenas :
Texto Texto <P>
Ta" &/.*
Em muitas situaes , voc precisa quebrar a linha e continuar o texto na linha seguinte , coisa que
o TAG <P> no faz , pois ele pular uma linha. Para isso usamos o TAG <BR> (abreviao de
BREAK Quebrar ) , dando continuidade do texto na linha de baixo.
Sua sintaxe apenas :
Texto Texto <BR>
Ta" &H.*
O TAG <HR> cria uma linha horizontal que so utilizadas para dar destaque a ttulos ou para gerar
a sensao de quebra entre um item de informao e outro. Estas linhas podem tambm ser
usadas com atributos de largura e altura. Exemplo :
<HR SZE=8 WDTH=80%>
Onde WDTH indica que a linha ocupar 80% da largura da janela do browser. E SZE indica que
ser exibida uma linha com 8 pixels de espessura.
Formatao e Estilos de Te0to
Assim como no editor de textos , voc pode criar uma srie de efeitos no texto , alterando a forma
ou o tipo de fonte. Todos esses TAGS de formatao e estilo de texto devem ter seu tag de
fechamento , pois seno se espalhar em toda sua pgina e no s onde voc escolheu. Vamos
ver os principais estilos de texto :
Estilo Sintaxe Funo
Negrito <B> Texto </B> Deixa o texto em negrito
tlico <> Texto <> Deixa o texto em tlico
Sublinhado <U>Texto </U> Deixa o texto sublinhado
Letreiro <MARQUEE > Texto </MARQUEE> Cria o efeito da proteo de
tela "Marquee" do Windows
Pulsante <BLNK> Texto </BLNK> Cria um efeito " pisca
pisca" no texto
importante saber que nem todos esses TAGS funcionam nos dois browsers. Por exemplo , o
TAG <BLNK> s funciona no Netscape Navigator , enquanto os TAGS <MARQUEE> e <U>
funcionam apenas no nternet Explorer. Existem outros estilos , mas por enquanto , isso vai nos
servir.
Ta"s &F1-T* + &,F1-T*
Vamos agora formatar as fontes da nossa pgina. Para isso vamos usar o tag FONT com seus
complementos : FACE , COLOR e SZE .
O <FONT FACE = "FONTE"> ir definir que tipo de fonte que seu texto ir utilizar. Aconselho a
usar fontes de padro popular no Windows , pois as fontes que seu computador tem , pode ser que
outro computador no tenha. Por isso fontes como TMES NEW ROMAN e ARAL so
aconselhveis.
Exemplo :
<FONT FACE = "TMES"> Coloque aqui seu texto </FONT>
Obs. : A fonte Times New Roman ( Times ) j o padro das pginas HTML , podendo se colocar
qualquer fonte existente em sua mquina como Mistral , Arial etc.
O <FONT SZE = "TAMANHO DA FONTE "> ir definir qual o tamanho da fonte utilizada ,
lembrando que deveremos seguir o padro de hipertexto e usar fontes de tamanho 1 a 6. Podemos
usar tamanhos como 78 e 64 , mas lembre se que pode no funcionar em alguns micros. Por
isso , se voc quer aumentar o tamanho de uma fonte , use o sinal de + antes do nmero que ir
definir o tamanho da fonte e , para diminuir use o sinal de - . Por Exemplo :
<FONT SZE = + 3> r deixar o texto com o tamanho 6 </FONT> ;
<FONT SZE = 3> r deixar seu texto com o tamanho 3 </FONT> ;
Obs. : O tamanho 3 o tamanho padro das pginas HTML , podendo colocar qualquer tamanho
compatvel a fonte usada.
O <FONT COLOR = "COR "> ir colocar uma cor na fonte escolhida e seguir o padro de cores
RGB , o mesmo do BODY BGCOLOR. Exemplo :
<FONT COLOR = "BLACK"> Veja um texto pretinho! </FONT>
Obs. : A cor preta o padro de cor usado nas pginas HTML , podendo se usar qualquer outra
cor descrita em ingls ou cdigo hexadecimal , descrito mais adiante .
Todos esses complementos de tag podem ser usados juntos dentro de um s tag , o que facilita a
nossa vida. Por Exemplo :
<FONT FACE = "ARAL" COLOR= "RED " SZE = "3">TRCOLOR CAMPEO !!! </FONT>
Lembre se de fechar o tag </FONT> para que o formato seja usado s no texto escolhido e no
em toda a pgina.
Ta" /123 $ar4metro /5C11.
Esse TAG no precisa de tag de fechamento , pois o prprio < BODY > se encarregar disso. Sua
funo ser a de colocar uma cor de fundo para sua pgina. Sua sintaxe :
<BODY BGCOLOR = "COR ">
Onde : "COR " ser a cor do fundo escolhido , que dever ser escrito em ingls ou em cdigo. Os
browsers disponibilizam at 256 cores para serem usadas como cor de fundo, sendo que cada cor
formada por um cdigo RGB ( red / green / blue ) . O cdigo composto por trs nmeros nos
quais os primeiros dois dgitos representam a intensidade do vermelho ( R ); o segundo , a
intensidade do verde ( G ) e o ltimo a intensidade do azul ( B ) . Cada cor pode ter um valor que
varia de 0 a 255. Se forem atribudos os valores mnimos R=000 , G=000 e B=000 , obtida a cor
preta. Se forem atribudos o valor mximo para cada cor ( 255 ) , obtida a cor branca. Mas , para
facilitar nossa vida , vamos escrever o padro em ingls , que muito mais simples.
Exemplo :
<BODY BGCOLOR="YELLOW"> ou <BODY BGCOLOR="#FFFF00">
O tag BODY BGCOLOR pode ser colocado logo aps o tag BODY , ou at mesmo acoplado em
um mesmo tag. Veja uma tabelinha de cores e alguns cdigos : Cdigo Headecimal
Black ( Preto ) !""""""
White ( Branco ) !######
Yellow ( Amarelo ) !####""
Blue ( Azul ) !""""##
Green ( Verde ) !""##""
Dark Green ( Verde escuro ) !$#%#$#
Red ( Vermelho ) !##""""
Magenta ( Rosa ) !##""##
Cyan ( Ciano ) !""####
Ima"ens
ncluir uma imagem na sua pgina bem simples. S se exige apenas que voc tenha disponvel a
imagem que ser exibida , e que ela esteja em um dos formatos aceitos pelo browser. O formato
mais usado e aceito pela WEB o formato GF . Esse formato , uma abreviao de Graphics
nterchange Format e pode ser usado em diferentes plataformas de hardware , tais como o PC e o
Machintosh . Se comparado com o formato padro do Windows ( BMP Bitmaps , tambm aceito
pelos browsers ) , ele gera arquivos de tamanho bem menor.
Outro formato bastante usado na WEB o JPEG ( Joint Photographic Engineering Group ). Ele
consegue reduzir o tamanho de uma imagem em at dez vezes.
Mas ateno : no encha sua pgina de imagens , pois , lembre- se de que , ao usar a rede para
transmitir suas pginas e suas imagens , a velocidade de transmisso muito reduzida , girando
em torno de 1 KB por segundo ou , dependendo do trfego , ela cai ainda mais. Portanto , uma
imagem de 100 KB pode levar vrios minutos para ser exibida , frustrando a platia. Tente usar
imagens pequenas , com a resoluo de 78 pixels por polegada , que a resoluo usada no
padro VGA e SVGA da maioria dos usurios. No caso de fotos , tente usar 256 cores se a
qualidade no ficar muito comprometida .
Ta" &IM5 %.C*
O TAG HTML usado para inserir uma imagem na posio atual onde ele especificado o MG
SRC. Sua sintaxe ;
<MG SRC = "Nome da imagem.GF"> ou <MG SRC= "Nome da imagem . JPG">
Se no for especificado uma URL , o browser procura a imagem no diretrio atual. Caso a imagem
esteja em um diretrio diferente ao do documento, necessrio indicar o diretrio
Onde ela se encontra , atravs de "../nome_ do _ diretrio". Por exemplo:
Se minha figura chamada "carta.gif" estiver em um diretrio(pasta) chamado "figuras", devemos
proceder com:
<MG SRC="../figuras/carta.gif">
ndicando assim que a figura est na Raiz ("../") no diretrio figuras ("../figuras/").Pode-se tambm,
mas no aconselhvel , utilizar o padro DOS , por exemplo :
<MG SRC = "C:\figuras\carta.gif">
Porm , prefira que as imagens estejam no mesmo diretrio que seu arquivo .HTM ou HTML.
Observe a codificao abaixo :
<HTML>
<HEAD>
<TTLE> Teste com a tag img</TTLE>
</HEAD>
<BODY>
<H1><CENTER>magem</H1>
<MG SRC ="imagem.GF">
</CENTER>
</BODY>
</HTML>
Podendo alinhar a imagem para um determinado ponto da tela, como por exemplo deixando o
texto pelo fundo da imagem. Veja os exemplos:
<MG SRC = "imagem.GF" ALGN="TOP"> Alinha a imagem por cima do texto ;
<MG SRC = "imagem.GF" ALGN="MDDLE"> Alinha a imagem pelo meio do texto ;
<MG SRC = "imagem.GF" ALGN="BOTTOM"> Alinha a imagem pelo fundo do texto;
<MG SRC = "imagem.GF" ALGN="LEFT"> Alinha a imagem esquerda da pgina ;
<MG SRC = "imagem.GF" ALGN="RGHT">Alinha a imagem direita da pgina.
Alm do complemento ALGN , tambm podemos usar o complemento ALT , que cria uma espcie
de HNT, isto , um pequeno texto explicativo que aparece abaixo da seta do mouse quando este
pra por sobre a figura. Exemplo:
<MG SRC = "imagem.GF " ALGN = "LEFT " ALT= "imagem">
Ta" /123 $ar4metro /6C75.18-2
Alm de colocar imagens como elementos de nossa pgina , podemos coloc-las tambm como
papel de parede no fundo de nossas pginas. sto , em vez de usarmos cores , ou deixarmos
aquele "cinza "ou "branco" do fundo , podemos colocar uma imagem qualquer. claro que teremos
o bom senso de no colocar imagens como a do Beavis , pois ficaria muito difcil visualizar o fundo
da tela com esse tipo de imagem. Vamos usar umas imagens chamadas normalmente de texturas ,
que , vista isoladamente parece apenas uma quadrado com um desenho qualquer sem significado ,
mas , quando postas uma ao lado da outra , criam um efeito papel de parede , como azulejos. Sua
sintaxe :
<BODY BACKGROUND = "MAGEM.GF"> ou <BODY BACKGROUND ="MAGEM.JPG">
Esse TAG pode ser includo dentro do tag BODY , pois seu fechamento ser no prprio tag
</BODY> . Voc tambm pode usar o BODY BGCOLOR e o BODY BACKGROUND juntos mas ,
claro que o papel de parede ir cobrir o fundo colorido , fazendo este aparecer s de vez em
quando.
Com a linha <BODY BACKGROUND = "PSO.GF"> , consegui esse resultado , sendo que PSO.
GF uma textura e , sozinha , a imagem aparece assim :
Repare que , se a sua pgina tiver uma grande quantidade de elementos como textos e imagens e
voc dever se mover pela tela atravs das barras de rolagem , o fundo da sua pgina
acompanhar o movimento da tela , como se estivesse "andando". sso torna sua pgina mais
lenta para quem est vendo. Para poupar voc deste sofrimento existe um complemento para esse
tag , chamado BGPROPERTES. Se voc declarar essa propriedade como fixa ( FXED ) o fundo
da sua pgina ficar esttico e apenas o contedo da sua pgina ir se mover. A sintaxe :
<BODY BACKGROUND = "PSO.GF " BGPROPERTES= "FXED ">
Tente no colocar fundos muito carregados , de tamanho muito grande , pois , quanto maior for o
fundo , mais tempo sua pgina ir demorar para ser carregada .
in9s
A principal atrao da nternet a criao de documentos com o conceito de hipertexto , ou seja ,
um documento que se vincula a outros documentos por meio de ligaes especiais chamadas links
ou hiperlinks.Com esse conceito , voc pode criar documentos que faam referncias e permitam
ao usurio acessar tais referncias no importando se elas esto em outra pgina Web , no seu
micro ou em algum servidor de rede.
O uso de hipertexto tambm facilita a criao de documentos extensos cujas sees ou tpicos
podem ser rapidamente acessados por meio dos links. magine que voc crie uma pgina sobre
determinado assunto em vrios tpicos abordados. Assim como em um livro voc cria todo o texto
do documento e depois cria , no incio , um sumrio indicando os tpicos do documento. Se quiser
acessar diretamente o texto de um tpico , basta dar um clique sobre o item do tpico no sumrio e
ele ser imediatamente exibido.
Um link reconhecido em uma pgina por estar em cor normalmente diferente do resto do texto e ,
ao passar com o mouse sobre esse texto o cursor muda para uma mo apontando para o link.
:ncoras
Uma ncora um ponto de referncia ou endereo que ser acessado por um link. Uma ncora
usada dentro do documento para marcar o incio de uma seo do documento.
Suponha que seu texto seja muito grande , o que tornaria trabalhoso para quem estiver vendo a
pgina conseguir se movimentar entre um tpico e outro. Ento faa o seguinte : Nomeie um
pedao da sua pgina atravs do tag :
<A NAME="NOME "> Texto </A> ( Lembre se que "NOME" fictcio, voc escolhe o nome.)
Depois disso escreva o pedao que voc quer associar a esse Nome. Agora crie um link para
chegar at esse pedao , usando o tag :
<A HREF="#NOME">Clique Aqui</A>
Pronto! Ao clicar na mensagem "Clique Aqui" de sua pgina , o usurio ir at o pedao que voc
nomeou.
ATENO : O sinal de cerquilha (#) necessrio para a ncora, pois avisa ao browser para
procurar o link no documento atual !!!
in9ando 6r;ui<os ocais
Fazer a ligao de um texto com outra pgina , ou figura , ou at mesmo outros arquivos que
estejam na mesma pasta que seu documento atual est uma tarefa bastante simples. Voc
precisa apenas especificar o nome completo do arquivo que ser chamado atravs do TAG A
HREF . Exemplo :
<A HREF = "pgina.HTM "> Clique aqui para ir prxima pgina </A>
Voc ainda pode criar uma ncora em outro documento e cham-lo em um link do documento atual.
s nomear a ncora na pgina que voc quer e colocar no link o nome da pgina seguido pela
ncora . Exemplo :
<A HREF="pgina1.HTM#index"> Vai para o NDEX </A>
in9ando 6r;ui<os de 1utros 2iret=rios
Voc pode especificar o endereo de outros diretrios ( pastas ) usando um esquema de caminhos
parecidos com o do DOS . Existe uma grande diferena entre esses caminhos . Na Web voc deve
inverter a barra de espaos , usando a barra "/ " no lugar da barra "\" para separar diretrios.
Alm disso o browser usa como referencial o diretrio atual para iniciar a busca de pginas. Para
especificar um arquivo que esteja no diretrio STRAUSS , que fica abaixo do diretrio BACH , os
quais se encontram ambos no diretrio raiz , voc deve usar os sinais ..\ para subir um nvel,
acessando assim a raiz e depois o caminho do diretrio BACH .Exemplo :
<A HREF = "../BACH / STRAUSS / NDEX.HTM">
Se o diretrio a ser acessado est abaixo do diretrio atual , basta especificar o nome do
subdiretrio sem nenhum smbolo . Por exemplo :
<A HREF = "MOZAT / NDEX.HTM">
Em alguns browser , voc pode escrever o caminho como no DOS , exemplo :
<A HREF = "C:\BACH \ STRAUSS \ NDEX. HTM ">
Porm , tente evitar esta tcnica em alguns browsers isso no funciona.
in9ando 6r;ui<os de 1utros %er<idores
Agora a coisa fica um pouco mais sria . aqui que est toda graa de nternet . Atravs de um
esquema de endereamento , a URL , a nternet consegue acessar um arquivo que est em
qualquer micro deste planeta desde que esteja conectado adequadamente a Web.
Como j vimos , a URL serve para especificar a localizao de pginas e arquivos em diretrios de
servidores da Web . Vamos comparar com um esquema que voc usa ( as vezes at sem saber )
para acessar algum arquivo em seu prprio computador .
Acessando um arquivo pelo DOS :
C: \WINDOWS \SYSTEM \ Lista.TXT
Acessando uma pgina pela Web :
HTTP : // WWW. STRAUSS. COM / LISTA . HTM
Uma URL composta por duas partes principais . A primeira o protocolo nternet do documento ,
a segunda parte o endereo do servidor e da pgina. A sintaxe disso :
PROTOCOLO: //SERVDOR . NSTTUO / ARQUVO
Onde :
Protocolo o tipo de servidor que est sendo acessado;
Servidor o computador que contm a pgina ;
nstituio o tipo de instituio a qual esse computador pertence ( Comercial , nternet Publica ,
Militar etc. ) ;
Arquivo o caminho do arquivo.
Exemplo :
HTTP : // WWW. MACLNUX.NET / NDEX . HTM
Esse endereo pode ser especificado diretamente na linha de URL do Browser , para acessar
diretamente a pgina NDEX. HTM , ou ento dentro de um link de um documento HTML , atravs
do A HREF que cria uma ligao , um link para o URL .
<A HREF = "HTTP : // WWW. MACLNUX.NET / NDEX . HTM "> MacLinux.net </A>
Monta"em de listas em HTM
Listas j foram muito importantes na confeco de pginas HTML, mas hoje poucos sites usam
este recurso.
A idia a de criar uma seqncia de informaes de forma ordenada (numeradas uma a uma) ou
desordenada (sem numerao).
Exemplos :
Lista ordenada&
1. No diga o que fazer, mas sim como fazer
2. Faa tudo com boa vontade
3. Quando quiser ouvir respostas agradveis, comece voc dizendo coisas agradveis
Lista desordenada&
Acredite em voc
Pare de reclamar
Aja e faa corretamente
Os comandos HTML para criar estas listas so muitos simples, veja o exemplo abaixo:
<HTML>
<HEAD>
<TTLE>Criando listas</TTLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=RED SZE=6>EXEMPLO DE UMA LSTA
ORDENADA</FONT></CENTER>
<BR>
<OL> <!Este comando inicia a lista>
<L> No diga o que fazer, mas sim como fazer <! Aqui voc comea a inserir os itens da lista,
cada item deve ser iniciado por um L>
<L> Faa tudo com boa vontade
<L> Quando quiser ouvir respostas agradveis, comece voc dizendo coisas agradveis
</OL> <! Este comando encerra a lista criada>
</BODY>
</HTML>
Se salvarmos este exemplo como LSTA.HTM, podemos visualiz-lo no navegador.
Repare que neste exemplo no inserirmos no cdigo da pgina os nmeros dos itens, pois o
comando <OL> (Ordened List) insere automaticamente os nmeros da lista , esta a caracterstica
da lista ordenada.
Para se montar uma lista desordenada o procedimento o mesmo porm o comando HTML que
inicia uma lista desordenada <UL> (Unordered List).
<HTML>
<HEAD>
<TTLE>Criando listas</TTLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=RED SZE=6>EXEMPLO DE UMA LSTA
DESORDENADA</FONT></CENTER>
<BR>
<UL> <!Este comando inicia a lista>
<L> Acredite em voc <! Aqui voc comea a inserir os itens da lista, cada item deve ser iniciado
por um L>
<L> Pare de reclamar
<L> Aja e faa corretamente
</UL> <! Este comando encerra a lista criada>
</BODY>
</HTML>
Um outro tipo de lista alm da ordenada e da desordenada a de tipo glossrio. Uma lista do tipo
glossrio tem esta aparncia:
HTML
Hyper Text Markup Language, linguagem usada na nternet
para a confeco de Home-Pages.
SGML
Standard Generalized Markup Language, a partir desta linguagem que se derivou o HTML.
uma linguagem mais rica em comandos e uma pouco mais complexa.
VRML
Virtual Reality Modeling Language, a mais avana das linguagens de formatao
(Markup)
e serve para se criar modelos de realidade virtual para a nternet.
Os cdigos HTML para se criar esta lista ficam assim:
<HTML>
<HEAD>
<TTLE>Criando listas</TTLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=RED SZE=6>EXEMPLO DE UMA LSTA TPO
GLOSSRO</FONT></CENTER>
<BR>
<DL> <! Este comando inicia a lista de glossrio>
<DT> HTML <!Este comando serve para definir qual a palavra que ser usada como destaque da
lista>
<DD> Hyper Text Markup Language, linguagem usada na nternet
para a confeco de Home-Pages. <! O comando DD serve para acrescentar a frase que se refere
a palavra que definimos em DT>
<DT>SGML
<DD> Standard Generalized Markup Language, a partir desta linguagem que se derivou o HTML
uma linguagem mais rica em comandos e uma pouco mais complexa.
<DT>VRML
<DD> Virtual Reality Modeling Language, a mais avana das linguagens de formatao (Markup)
e serve para se criar modelos de realidade virtual para a nternet
</DL> <! Este comando encerra a lista de glossrio>
</BODY>
</HTML>
Todos os comandos de formatao de texto que voc j viu podem ser aninhados (colocados
juntos) nas listas, ou seja, voc pode mudar a cor da fonte, tamanho etc.
Tabelas em HTM
As tabelas so muito importantes para o designe de uma home-page. Com elas pode-se fazer
alinhamentos que dificilmente seriam possveis com simples comandos.
A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais
profissional e o usurio possa navegar de forma mais eficiente, pois os objetos podem estar melhor
posicionados na home-page.
Vamos discutir, nesta parte, quais so os comandos para se criar uma tabela e mostrar alguns
exemplos. Claro que voc dever praticar e principalmente planejar a sua tabela, pois sem isso,
fica muito difcil de controlar o cdigo HTML da sua home-page.
O comando para se inserir uma tabela <TABLE>; para iniciar uma linha devemos introduzir a tag
<TR> e para uma clula (alguns preferem dizer coluna) <TD>. Todos estes comandos so
encerrados como </TABLE> , </TR> e </TD> respectivamente.
Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas
por 2 linhas, o cdigo HTML para isso :
<HTML>
<HEAD>
<TTLE>Criando Tabelas</TTLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=BLUE SZE=6>TABELA</FONT></CENTER>
<BR>
<TABLE BORDER=1> <! nicia a tabela e coloca uma borda de espessura igual a 1>
<TR> <! Cria a primeira linha da tabela>
<TD>PRMERA COLUNA </TD> <! Aqui foi criada uma clula>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCERA COLUNA </TD>
</TR> <! Fecha a primeira linha da tabela>
<TR> <! Abre a segunda linha da tabela>
<TD> PRMERA COLUNA</TD>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCERA COLUNA </TD>
<TR> <! Encerra a Segunda linha da tabela>
</TABLE> <! Encerra a tabela>
</BODY>
</HTML>
Salve este exemplo como TABELA.HTM e abra o arquivo num Browser para ver como ficou.
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.
Vamos procurar trabalhar com vrios exemplos para visualizarmos melhor o uso destes
parmetros.
6lterando a lar"ura da c>lula
Para alterar o largura de uma clula da tabela basta acrescentar o parmetro WDTH dentro da tag
<TD>. Exemplo1:
<TABLE BORDER=2>
<TR>
<TDWDTH=100> WDTH=100</TD>
<TD ALGN=MDDLE WDTH=200>WDTH=200 (PXELS)</TD>
</TR>
</TABLE>
O parmetro WDTH pode receber dois tipos de valores, em pixels como no exemplo acima ou em
porcentagem, como mostrado no exemplo a seguir. Tambm dentro da tag <TD> vemos um outro
parmetro que VALGN=MDDLE, este parmetro tem por funo alinhar o contedo da clula no
meio da mesma, ou seja, dentro da clula as frases so alinhadas com relao ao seu centro.
Exemplo2:
<TABLE BORDER=2>
<TR>
<TDWDTH=25%> WDTH=25%</TD>
<TD ALGN=MDDLE WDTH=75%>WDTH=75%</TD>
</TR>
Inserindo cor de fundo e se$arao de c>lulas
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.
Vejamos um exemplo:
<TABLE BORDER=0>
<TR>
<TDWDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TDWDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TDWDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TDWDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TDWDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TDWDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
Aqui, vimos que podemos acrescentar cores ao fundo de uma clula, outra coisa que tambm
pode ser feita mudar a fonte com os comandos de formatao que voc j conhece, como
<FONT COLOR=cyan>, por exemplo.
Repare que no exemplo anterior ns colocamos BORDER=0 e as clulas apareceram coloridas,
mas com um certo espaamento entre elas, para tirarmos este espao devemos acrescentar
dentro da tag <TABLE> o parmetro CELLSPACNG=0. Este parmetro elimina por completo os
espaos entre as clulas.
<TABLE BORDER=0 CELLSPACNG=0>
<TR>
<TDWDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TDWDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TDWDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TDWDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TDWDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TDWDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
Outro parmetro que pode ser usado para separar espaos em uma clula CELLPADDNG que
inclui ou exclui espaos dentro da c'l(la, ou seja, se voc tiver um elemento (frase, texto, figura
etc.) dentro da clula voc pode acrescentar espaos por igual nos quatros cantos da clula,
fazendo com que seu texto ou figura no fique "grudado" nas paredes da clula. Aproveite os
exemplos anteriores e experimente usar este atributo para ver como ele funciona.
sto j d uma idia do funcionamento geral das tabelas na WEB. Muitos dos alinhamentos que
encontramos na nternet so feito por intermdio de tabelas.
Voc tambm pode usar todos os outros recursos j vistos de HTML para otimizar o uso de tabelas.
8m $ouco mais de Tabelas
Agora que voc j est um pouco mais familiarizado com o uso de tabelas e com seus principais
atributos, vamos ver como podemos aperfeioar o uso de tabelas.
Em seguida descreveremos uma srie de outros atributos e comandos para tabelas:
)*H+ ... ),*H+
Esta tag insere um cabealho dentro da clula. Na verdade a nica diferena entre a tag <TH> e a
tag <TD> que a <TH> exibe o contedo da clula em negrito.
)CA-*I.N+ ... ),CA-*I.N+
Exibe um texto centralizado em relao tabela, como se fosse uma legenda.
Exemplo:
<TABLE BORDER=1 CELLSPACNG=2 CELLPADDNG=6> <! Esta linha inicia a tabela com borda
de espessura 1 (border), espao entre as clulas 2 (Cellspacing) e espao dentro da clula 6
(Cellpadding)>
<CAPTON>LEGENDA</CAPTON> <! ntroduz uma legenda na tabela>
<TR>
<TH>Contedo em negrito</TH> <! nsere o texto na forma de cabealho (negrito)>
</TR>
<TR>
<TH>Contedo em negrito</TH>
</TR>
</TABLE>
Repare neste exemplo, que a legenda j sai centralizada com relao a tabela e repare no espao
dentro da clula devido ao comando CELLPADDNG.
1s atributos C1%P6- e .1W%P6-
Estes atributos so muito importantes dentro da tag <TABLE>. So eles que nos possibilitam
remodelar a disposio das clulas dentro da tabela. Vejamos um exemplo prtico:
<TABLE BORDER=2 CELLPADDNG=2>
<TR>
<TD COLSPAN=2>Exemplo do uso do COLSPAN</TD>
<TR>
<TD>CLULA 1</TD> <TD>CLULA 2</TD>
</TR>
</TABLE>
Neste exemplo vemos que na tag <TD> foi introduzido o parmetro COLSPAN. Este parmetro
tem a finalidade de dizer que sob a clula onde ele foi introduzido podemos ter um certo nmero de
colunas. Logo, se voc quiser que uma clula ocupe uma nica linha, como no nosso exemplo,
voc deve inserir o parmetro dentro da tag <TD> desta clula. A quantidade de clulas que viro
em baixo da clula que recebeu o atributo COLSPAN deve ser de acordo com o nmero
especificado no parmetro.
Mas se quisermos definir uma nica clula ocupando uma coluna inteira ? Neste caso usamos o
atributo ROWSPAN. Exemplo:
<TABLE BORDER=2 CELLPADDNG=2>
<TR>
<TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD>
<TD>CLULA 1</TD></TR><TR> <TD>CLULA 2</TD>
</TR>
</TABLE>
Para melhor utilizar estes parmetros e ver como eles funcionam voc deve fazer a sua prpria
tabela, pois somente desta forma voc conseguir fixar o uso destes parmetros.
8sando tabelas como molduras
Um outro uso bastante interessante de tabelas comomoldura para alguma figura. Para isto basta
voc iniciar uma tabela e definir um valor para BORDER.
Exemplo:
<TABLE BORDER=5>
<TR>
<TD> <MG SRC=NOME DA !I"URA> </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 defini um bom layout (aparncia) da sua home-page.
Colocando uma ima"em 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.
<TABLE BACKGROUND="POOL.GF" BORDER=5>
<TR>
<TD><H1>Que tal um mergulho agora ? </H1></TD>
</TR>
</TABLE>
1 atributo .8E%
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 ;
rows : para as linhas horizontais entre cada linha da tabela ;
cols : para as linhas verticais entre cada coluna da tabela ;
groups : para linhas entre grupos de colunas e sees horizontais , definidas por tags
especiais como COLGROUP e THEAD ;
all : para mostrar todas as linhas entre cada coluna e linha na tabela ( default ) .
Veja uma tabela com todas as linhas internas ( default ) :
<TABLE BORDER RULES=all>
Outro exemplo sem as linhas internas :
<TABLE BORDER RULES=none>
Outro exemplo usando o complemento ROWS:
<TABLE BORDER RULES=rows>
O ltimo exemplo usar o complemento COLS :
<TABLE BORDER RULES=cols>
As tabelas so um forte recurso de modelagem das home-pages hoje em dia e para que voc
consiga utilizar bem este recuso no deve se limitar somente aos exemplos desta apostila, procure
em sites e at mesmos em livros , como por exemplo: "Criando sites arrasadores na Web" (captulo
4) ou "HTML Truques Espertos" (captulo 5). Nessas referncias voc poder encontrar vrios
outros exemplos de pginas usando tabelas mais complexas (como por exemplo, uma tabela
peridica dos elementos) e claro em laboratrio desenvolvendo sua prpria home-page.
H uma observao importantssima que devemos fazer aqui. Como j vimos antes, alguns
comandos HTML no funcionam em um dado navegador, se voc reparou para falarmos de
tabelas rodamos os exemplos nos dois navegadores mais conhecidos : nternet 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 CELLSPACNG e CELLPADDNG.
sto 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.
F.6ME%
Frames (quadros) so relativamente usadas na Web. H os que adoram o uso de frames e no
admitem que suas home-pages fiquem sem elas, por outro lado h os que abominam o uso de
frames, porque julgam que eles "estragam" o layout da home-page.
Fazer frames tem o mesmo procedimento que confeco de home-pages simples, a diferena
que se deve trocar a tag <BODY> pela tag <FRAMSET>
Para termos uma home-page com frames devemos ter trs pginas, uma com o cdigo que
contm a tag <FRAMESET> e duas outras com os cdigos onde sero inseridas as pginas de
cada frame.
Vamos procurar entender melhor.
Uma documento HTML simples seria assim :
<HTML>
<HEAD>
<TTLE>Pgina simples </TTLE>
</HEAD>
<BODY>
Neste #a$%& enta$ &s #&$and&s e$ gea'
</BODY>
</HTML>
J um documento HTML que teria frames ficaria assim:
<HTML>
<HEAD>
<TTLE>Pgina com Frame </TTLE>
</HEAD>
<FRAMESET>
NESTE CAMPO ENTRAM AS CHAMADAS PARA OS DOCUMENTOS DOS !RAMES
</FRAMESET>
</HTML>
Ento o que devemos fazer ? Devemos criar um documento HTML normal e um documento HTML
de frames.
Vejamos um exemplo:
<HTML>
<HEAD>
<TTLE> Exemplo de frame</TTLE>
</HEAD>
<FRAMESET COLS=20% , 80%> <! Este comando inicia o frame e divide a tela do navegador em
2 partes, uma com 20% da tela e outra com 80%>
<FRAME SRC=FRAME1.HTM> <! Este comando chama as pginas HTML que devem ocupar as
colunas divididas pelo frame>
<FRAME SRC=FRAME2.HTM>
</FRAMESET>
</HTML>
Este o cdigo para gerar os frames (veja a figura) .
Agora vamos crias os cdigos para serem inseridos nas duas colunas que criamos.
<HTML>
<HEAD>
<TTLE>Pgina simples </TTLE>
</HEAD>
<BODY>
AQU ENTRA A PRMERA PGNA NORMAL
</BODY>
</HTML>
Salve este exemplo como FRAME1.HTM. Por que ? Porque no cdigo que geramos no exemplo de
frames chamamos a pgina com o comando <FRAME SRC=FRAME1.HTM>, se voc salvar o
nome do cdigo de forma diferente dever alterar tambm o cdigo da pgina de frame.
<HTML>
<HEAD>
<TTLE>Pgina simples </TTLE>
</HEAD>
<BODY>
AQU ENTRA A SEGUNDA PGNA NORMAL
</BODY>
</HTML>
Este cdigo deve ser salvo como FRAME2.HTM, pelo mesmo motivo do cdigo anterior.
Sempre lembrando que estas pginas devem estar no mesmo /I01*20I..
Pronto, voc conseguiu fazer a sua primeira pgina com frame.
Alem de poder dividir o navegador em colunas com o parmetro COLS dentro da tag <FRAMSET> ,
voc tambm pode dividir em linhas usando o parmetro ROWS, ou ainda dividindo em colunas e
linhas ao mesmo tempo.
<HTML>
<HEAD>
<TTLE> Exemplo de frame</TTLE>
</HEAD>
<FRAMESET ROWS=50% , 50%> <! Este comando inicia o frame e divide a tela do navegador em
2 partes, uma com 50% da tela e outra com 50%>
<FRAME SRC=FRAME1.HTM> <! Este comando chama as pginas 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 cdigo abaixo:
<HTML>
<HEAD>
<TTLE> Exemplo de frame</TTLE>
</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>
Este cdigo gera a seguinte pgina :
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.
Par4metros de frames
-ar3metro S0C da tag )#0A41+
Este parmetro o responsvel por chamar a pgina HTML que deve ser aberta (inserida) dentro
de um frame. Em todos os exemplos at agora s usamos arquivos locais para abrir estas pginas
em um frame, mas nada impede voc de colocar no lugar uma URL completa. Por exemplo:
<FRAME SRC=http://www.yahoo.com>
Com este comando voc ser capaz, devidamente conectado, de chamar esta pgina para a seu
frame, onde quer que ela esteja na nternet.
-ar3metro NA41
Este um dos principais parmetros da tag <FRAME>. Ele serve, como era de se esperar, para
definir o nome do frame. Ele deve ser usado em conjunto com outro parmetro que o TARGET.
-ar3metro 4A05IN6I/*H
Define a margem entre as laterais do frame e seu contedo. Exemplo:
<FRAME SRC=FRAME1.HTM MARGNWDTH=100>
Este comando cria uma margem de 100 pixels de cada lado do frame.
-ar3metro 4A05INH1I5H*
Da mesma forma que MARGNWDTH, este parmetro define uma distncia de margem, que neste
caso a margem superior e inferior do frame. Exemplo:
<FRAME SRC=FRAME1.HTM MARGNHEGHT=100>
D um espao de 100 pixels entre as margens superior e inferior do frame.
-ar3metro SC0.LLIN5
Define se o frame ter ou no barras de rolagem. Por default quando o contedo de uma pgina
excede o tamanho do frame as barras de rolagem so acrescentadas automaticamente. Os valores
vlidos para SCROLLNG so YES, NO e AUTO. Exemplo:
<FRAME SRC=FRAME1.HTM SCROLLNG=YES>
-ar3metro *A051*
Este o mais importante de todos os parmetros. Ele trabalha em conjunto com NAME e permite
que coloquemos um link em um frame e o resultado, ou seja, a pgina linkada, aparece em outro
frame.
Vejamos um exemplo de como podemos linkar um frame com outro. Vamos construir uma pgina
que possua um menu de opes do lado direito, para isso podemos aproveitar os cdigos de
exemplo abordados anteriormente.
Os cdigos so:
F.6ME(HTM
<HTML>
<HEAD>
<TTLE>FRAMES</TTLE>
</HEAD>
<FRAMESET COLS=25%,75%>
<FRAME SRC=FRAME1.HTM SCROLLNG=NO>
<FRAME SRC=FRAME2.HTM NAME=TESTE>
</FRAMESET>
</HTML>
F.6ME'(HTM
<HTML>
<HEAD>
<TTLE>FRAMES</TTLE>
</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>
F.6ME?(HTM
<HTML>
<HEAD>
<TTLE>FRAMES</TTLE>
</HEAD>
<BODY>
<CENTER><H2>Os links ao lado devero aparecer neste lado do Navegador</H2></CENTER>
<BR>
<CENTER>
<FONT SZE=4>Este frame o que foi nomeado como TESTE com o parmetro NAME em
Frame.HTM</FONT>
</CENTER>
</BODY>
</HTML>
Se tudo funcionar convenientemente voc dever visualizar sua pgina como abaixo, mas claro
que os links que no so locais funcionaro somente se voc estiver conectado.
Criando um frame Inline
Se voc quiser misturar texto , figuras e um frame em uma mesma pgina voc
precisa
criar um frame inline. Para isso , utilize a tag <FRAME SRC=" nome do frame "> .
Voc pode usar os complementos NAME para especificar um nome que identifica qual frame
est em uso ; WDTH e HEGTH para definir o espao na pgina utilizado pelo Frame ; ALGN
( LEFT ou RGHT ) - para alinhar o frame na pgina. Lembre-se de fechar a tag </FRAME>.
Voc tambm pode usar os atributos normais da tag frame , como o FRAMEBORDER ,
SCROLLNG etc.
<html>
<body>
<center><h1>Exemplo do comando FRAME </h1></center>
<hr>
<iframe width=90% height=70% src="pag2.htm">
</iframe>
</center>
Aqui continua a pgina normal !
</body>
</html>