apostila de html (básico) -...
TRANSCRIPT
Apostila de html (básico)
Introdução
Como funciona a Internet
World Wide Web
E – Mail
Correio Eletrônico
FTP (File Transfer Protocol)
HTML
Estrutura básica de uma página
Criando Sites HTML
Tags para formatar sua página
Imagens
Links
Âncoras
Montagem de listas em HTML
Tabelas em HTML
FRAMES
Criando um frame Inline
Introdução
As redes de computadores existem há mais de vinte anos e são utilizadas por milhões 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 computação para obter acesso a computadores, compartilhar
arquivos e enviar mensagens eletrônicas Hoje em dia ,cientistas, engenheiros professores,
estudantes, bibliotecários, médicos, homens de negócios, políticos e até crianças, o utilizam para
receber jornais eletrônicos, ter acesso a "Bulletins boards"(BBS – Visto mais adiante) , consultar
bases de dados e utilizam, remotamente, vários equipamentos.
Atualmente, dentro da comunicação global, a informação disponível na INTERNET ultrapassa os
limites físicos, políticos e as estruturas econômicas de todas as partes do planeta, transformandose
em um fórum universal que independente de raça ,profissão ou idade, disponibiliza informações
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 INTERNET
continua crescendo incontrolavelmente. Hoje, ela engloba mais de 5000 redes espalhadas em 145
países espalhados pelos 5 continentes.
Estima-se um crescimento de 10%ao mês e um intercâmbio de mais de 15 milhões de mensagens
entre a INTERNET e todas as demais redes conectadas.
A INTERNET começou a ser utilizada no Brasil, em meados de 89/90, somente por Instituições de
pesquisas e um pouco depois por Universidades, permanecendo , assim , até o final de 1995,
quando a exploração comercial teve início com a liberação de um BackBone lançado pela
EMBRATEL, com um grande incentivo para a sua propagação da mídia, que passou a abordar o
assunto, utilizando-se até de novelas.
A INTERNET nasceu em 1969 para descentralizar informações militares norte-americanas em
várias redes, a fim de se evitar que um ataque soviético estratégico destruísse informações
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 através de rádios e satélites.
No final dos anos 70 surgiu a USENET (Users Network) prestando serviços a comunidades
universitárias e algumas organizações comerciais. No início da década de 80, a ARPANET dividiuse
em : ARPANET e MILNET (também militar), mantendo a comunicação entre ambas originou o
nome de DAR INTERNET e depois se abreviou para INTERNET.
Em 1986, foi criada a NSFNET (National Science Foundation Network) para viabilizar a conexão de
pesquisadores aos cincos grandes centros dos EUA e abrangendo, rapidamente redes acadêmicas
e escolares.
Nessa época, a INTERNET iniciou sua expansão. Novas redes foram a ela conectadas, mais
computadores e, consequentemente mais participantes. Redes internacionais similares surgiram e
hoje, temos uma presença mundial significativa, salvo na África , onde contamos com poucos
pontos de presença.
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 inglês Local Area Network ). Se essa LAN for ligada à Internet , todos os
computadores conectados à LAN poderão ter acesso à Internet. É assim que muitas empresas
proporcionam acesso à Internet a seus funcionários.
Uma rede é formada por vários computadores interligados dentro de um estabelecimento (cidade,
estado..).
A INTERNET é a "rede das redes". Ela é composta de pequenas redes locais(LANS), redes
estaduais e enormes redes nacionais que conectam computadores de diversas organizações
mundo afora.
Essas redes estão interligadas de diversas formas, desde uma simples linha telefônica discada até
malhas de fibras óticas. Estar na INTERNET significa participar de uma rede interconectada.
As redes que formam a Internet são Interligadas por outras redes de alta capacidade , chamadas
backbones ( espinha dorsal ). Os backbones são poderosos computadores conectados por linhas
de grande largura de banda como canais de fibra óptica , elos de satélite e elos de transmissão por
rádio. Como já vimos , a Internet surgiu a partir da criação do backbone original , o ARPAnet, um
projeto militar para intercâmbio de informações estratégicas financiado pelo governo americano. Ao
longo dos anos a Internet passou por várias etapas , transformando-se numa rede de pesquisa
acadêmica e , finalmente , na grande rede que é .
A melhor forma de entender a Internet é pensar nela não como uma rede de computadores, mas
como uma rede de redes. Sendo assim, a Internet não tem um dono ou uma empresa encarregada
de administrá-la . A instituição que mais se aproxima de uma administração central é a Internet
Society. Trata –se de uma entidade que se baseia no trabalho voluntário de seus integrantes com
o objetivo de exercer o mínimo controle necessário para manter a Internet em funcionamento.
O princípio básico de uma rede é a capacidade de "comunicação" entre dois computadores. Para
isso, utilizam-se protocolos , regras ou convenções que regem essa comunicação. Para que a
comunicação se efetive , dois computadores devem utilizar o mesmo protocolo, simultaneamente.
TCP/IP (Trasmission Control Protocol / INTERNET Protocol) é a família de protocolos da
INTERNET, desenvolvida nos anos 70 e utilizada pela primeira vez em 1983.É considerado um
protocolo aberto e "sem dono". O que significa dizer que não é produto de empresa nenhuma
específica.
Cada vez que ocorre uma transferência, o protocolo age quebrando a informação , formando
diversos pacotes e roteadores, que estão programados para enviá-los corretamente ao seu destino.
As redes de nível captam o tráfego nos "BackBones"(redes de alta velocidade) e o distribuem para
suas próprias redes e vice-versa.
World Wide Web
WWW é um serviço baseado um hipertextos (documentos que possuem , dentro de si , conexões
com outros documentos) que permite buscar e recuperar informações distribuídas por diversos
computadores da rede . O hipertexto é uma forma de apresentação gráfica de informação que
contém palavras com ligações subjacentes com outros textos , o que torna possível leituras
diversas , não - 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 navegação em informações disponíveis na rede . Torna-se , assim , irrelevante
para o usuário a localização física dos documentos recuperados.
O documento recuperado não precisa ser necessariamente em texto. Também pode conter outros
tipos de informação , tais como imagens , gráficos e sons. Cabe lembrar que através de um
servidor WWW, é possível não só o acesso a documentos , mas também o acesso aos demais
serviços da rede , como ftp,wais,gopher ,telnet, os quais você verá posteriormente.
E - Mail
Correio Eletrônico
É o servidor básico de comunicação em redes de computadores . O processo de troca de
mensagens eletrônicas é bastante rápida e fácil ,necessitando apenas de um programa de correio
eletrônico e do endereço eletrônico dos envolvidos.
• endereço eletrônico de um usuário na INTERNET contém todas as informações
necessárias , para que a mensagem (username) e uma parte relacionada à localização no
formato:
EX: joã[email protected]
Uma mensagem é composta de cabeçalho e corpo . O cabeçalho informa a data do envio da
mensagem, o endereço do emitente , um título sobre o assunto , além de informações de controle .
O corpo da mensagem é o seu conteúdo.
Embora a grande maioria das mensagens trocadas via rede sejam constituídas por informação
puramente textual, também é possível obter outros tipos de informação , tais como sons e
imagens . Através do correio eletrônico, também é possível utilizar outros serviços de rede , tais
como listas de discussão, USENET News , ftp , archie.
FTP (File Transfer Protocol)
Protocolo de transferência de arquivos é o serviço básico de transferências de arquivos na rede .
Com a devida permissão , é possível copiar um arquivo de um computador a distância para o seu
computador ou transferir um arquivo do seu computador para um computador remoto , para tanto ,
você deve ter permissão de acesso ao computador remoto .
Ante as restrições para transferência de arquivos foi criado o "FTP Anônimo" para facilitar o acesso
de usuários de todo mundo a determinadas máquinas que mantém enormes repositórios de
informação. Não é necessário uma permissão de acesso . O usuário irá identificar-se como
Anonymous quando o sistema requisitar o "log-in".
HTML
Falemos do que interessa mesmo.HTML – abreviação de HiperText Markup Language é a
linguagem de programação que usamos para criar uma página Web , que por sua vez será
composta de textos e comandos especiais que chamaremos de Tags. Não se assuste com o nome,
pois se trata de uma linguagem muito simples , e tem como finalidade básica formatar o texto e
imagens exibidos e criar ligações entre páginasWeb , criando assim documentos com o conceito
de Hipertexto.
Como em qualquer outra linguagem , o programador deve escrever o código - fonte seguindo as
regras de sintaxe da linguagem. Este código – fonte é posteriormente interpretado pelo browser ,
que se encarregará de executar os comandos ou tags do código para formatar e acessar recursos
da Web.
Em março de 1989, Tim Berners-Lee do European Laboratory for Particle Physics ( mais conhecido
como CERN ) , propôs um novo conjunto de protocolos para um sistema de distribuição de
informações da Internet a ser usado entre os diversos grupos de pesquisa em física de altas
energias . Os protocolos da WWW foram logo adotados por outras organizações e foi formado um
consórcio de organizações , chamado de W3 Consortium , que uniu seus recursos de modo a
prosseguir com o desenvolvimento de padrões WWW.
Esse consórcio é liderado pelo MIT ( Massachusetts Institute of Technology) , pelo CERN e pelo
INRA ( French National Institute for Research in Computer Science and Control). Ele propõe
recursos mais novos e sofisticados de HTML , avalia sugestões e implementações alternativas e
publica novos "níveis" de versões do padrão HTML.
Existem vários programas para editoração HTML , que tornaria nosso trabalho muito mais fácil e
nos acomodaria como usuários – finais que não entendem nada do que estão fazendo. Por isso ,
sofreremos um pouco e usaremos o incrível , sensacional , fantástico e estupendo Bloco de Notas
( NotePad ) do Windows.
• Comandos HTML – Tags
Os comandos em HTML são chamados de tags , e eles irão dizer ao browser como o texto, a
informação e as imagens serão exibidas . Por exemplo , um tag pode dizer que um texto será
exibido em negrito , itálico e com um tipo de fonte qualquer. Além de formatação de texto um tag
também pode dizer que na verdade um determinado pedaço do texto é um endereço para outra
página Web , que será acessado ao dar um click no endereço.
Os tags são identificados por serem envolvidos pelos sinais < > ou </ >. Entre os sinais < > são
especificados os TAGS propriamente ditos . No caso de tags que precisem envolver um texto , a
sua finalização deverá ser feita usando a barra de divisão "/ " , indicando que o tag está finalizando
a marcação de um texto , o que faz os tags normalmente andarem em pares. O formato genérico
de um tag é :
<Nome do tag> Texto </Nome do tag> .
Lembraremos sempre que não é necessário estar ligado à Web para criar páginas HTML ou para
usar os Browsers. Basta que , ao terminar de escrever sua página no Bloco de Notas , você salve
seu documento com um nome qualquer e a extensão HTM ou HTML , para que o browser possa
interpretar suas páginas.
Estrutura básica de uma página
Bem , deixarei claro que ultimamente o que vou explicar não é bem assim , pois existe um certo
desleixo hoje na Internet , mas , seguindo o padrão clássico teremos :
O TAG <HTML> – que será usado em conjunto com seu tag de fechamento < / HTML > e será
colocado no início e no final do documento , delimitando a área onde serão colocados os TAGS
HTML .
O TAG <HEAD> - que também terá seu tag de fechamento </HEAD> e servirá para delimitar uma
área de cabeçalho com poucos TAGS (não é necessário ter esse TAG para sua página funcionar)
O TAG <TITLE> - que será usado dentro dos tags <HEAD> , e servirá apenas para colocar um
título que aparecerá na barra de título do seu browser ( não esqueça o </TITLE>) .
Dentro dos TAGS <BODY> </BODY> serão colocados todos os comandos , textos e imagens da
sua página . Será o corpo da sua página.
Veja um exemplo de estrutura :
<HTML>
<HEAD>
<TITLE> Título da página </TITLE>
</HEAD>
<BODY>
Aqui você coloca os comandos em HTML , seus
Textos e Imagens .
Aliás , tanto faz colocar os tags em maiúsculas ou
minúsculas.
</BODY>
</HTML>
Vá até a opção Arquivo – Salvar Como do seu Bloco de Notas e salve o exemplo acima como
TESTE. HTM .
Ao abrir o arquivo no browser , sua primeira página ficou assim :
Talvez você tenha de problemas para abrir sua página. Então vou dar uma explicação rápida no
Internet Explorer, e no Netscape que são muito parecidos .
1 – Vá até o Menu Arquivo - Abrir… ;
2 – Aparecerá uma caixa para você colocar o endereço da página. Clique no botão Procurar
(Browse…) ;
3 – Aparecerá a conhecida caixinha de pastas do Windows. Vá até a pasta onde você gravou sua
página e clique em Abrir ( Open ) ;
4 – Você voltará até a caixa para a entrada do endereço , já com o caminho dentro da caixa ;
5 – Aí é só clicar OK .
Criando Sites HTML
Agora que aprendemos algumas técnicas , como criar uma página HTML , salvá – la com a
extensão . HTM , abrir e vê – la em nosso browser , vamos formatar tudo o que for possível , para
dar um ar mais profissional em sua página. Afinal , no exemplo que fizemos até agora , o fundo da
nossa página não tem cor , nossas fontes são estáticas o que torna o conjunto da página feio.
Vamos ver agora algumas tags que ajudarão a tornar nossas páginas motivo de inveja para
qualquer um .
Tags para formatar sua página
• Tags <H1..6> … </H1..6>
O TAG <H> cria uma espécie de cabeçalho no documento , com padrões de formatação já
prontinhos para usar. Serve para identificar o começo de uma seção ou tópico , facilitando a
visualização dentro da página. Logo após o TAG <H> deve vir um número de 1 a 6 indicando o
tamanho da fonte , sendo que 1 é o maior tamanho e 6 o menor. Exemplo :
<H1> Cabeçalho Grande </H1>
<H6> Cabeçalho Pequeno </H6>
Toda vez que usado esse TAG , a fonte já virá padronizada em negrito e em determinado
tamanho , além de colocar uma linha em branco após o texto. Lembre –se de fechar com o tag
</H> .
• Tags <CENTER> … </CENTER>
Seria bom se pudéssemos alinhar nosso texto bem no meio da página , centralizado Até agora ,
tudo o que escrevemos está alinhado à esquerda da nossa página , enquanto esteticamente ,
ficaria muito melhor centralizado. Essa é a função do TAG <CENTER> que centraliza um texto ,
uma imagem ou um elemento da página. Exemplo:
<CENTER> Essa frase está centralizada na página </CENTER>
• Tag <P>
A principal diferença entre a página HTML e um editor de textos tradicional é que a página não
reconhece o fim de um parágrafo com o pressionamento da tecla Enter. Se você simplesmente
escrever palavras sem TAGS de formatação em um arquivo html elas serão formatadas em um
grande único parágrafo. Você precisa forçar o fim do parágrafo e a quebra de linha usando TAGS
especiais. O TAG responsável pela quebra de parágrafos é o TAG <P> . Ele iniciará um novo
parágrafo e pulará uma linha entre o texto.
Sua sintaxe é apenas :
Texto Texto <P>
• Tag <BR>
Em muitas situações , você precisa quebrar a linha e continuar o texto na linha seguinte , coisa que
o TAG <P> não faz , pois ele pulará uma linha. Para isso usamos o TAG <BR> (abreviação de
BREAK – Quebrar ) , dando continuidade do texto na linha de baixo.
Sua sintaxe é apenas :
Texto Texto <BR>
• Tag <HR>
O TAG <HR> cria uma linha horizontal que são utilizadas para dar destaque a títulos ou para gerar
a sensação de quebra entre um item de informação e outro. Estas linhas podem também ser
usadas com atributos de largura e altura. Exemplo :
<HR SIZE=8 WIDTH=80%>
Onde WIDTH indica que a linha ocupará 80% da largura da janela do browser. E SIZE indica que
será exibida uma linha com 8 pixels de espessura.
• Formatação e Estilos de Texto
Assim como no editor de textos , você pode criar uma série de efeitos no texto , alterando a forma
ou o tipo de fonte. Todos esses TAGS de formatação e estilo de texto devem ter seu tag de
fechamento , pois senão se espalhará em toda sua página e não só onde você escolheu. Vamos
ver os principais estilos de texto :
Estilo Sintaxe Função
Negrito <B> Texto </B> Deixa o texto em negrito
Itálico <I> Texto <I> Deixa o texto em Itálico
Sublinhado <U>Texto </U> Deixa o texto sublinhado
Letreiro <MARQUEE > Texto </MARQUEE> Cria o efeito da proteção de
tela "Marquee" do Windows
Pulsante <BLINK> Texto </BLINK> Cria um efeito " pisca –
pisca" no texto
É importante saber que nem todos esses TAGS funcionam nos dois browsers. Por exemplo , o
TAG <BLINK> só funciona no Netscape Navigator , enquanto os TAGS <MARQUEE> e <U>
funcionam apenas no Internet Explorer. Existem outros estilos , mas por enquanto , isso vai nos
servir.
• Tags <FONT> … </FONT>
Vamos agora formatar as fontes da nossa página. Para isso vamos usar o tag FONT com seus
complementos : FACE , COLOR e SIZE .
O <FONT FACE = "FONTE"> irá definir que tipo de fonte que seu texto irá utilizar. Aconselho a
usar fontes de padrão popular no Windows , pois as fontes que seu computador tem , pode ser que
outro computador não tenha. Por isso fontes como TIMES NEW ROMAN e ARIAL são
aconselháveis.
Exemplo :
<FONT FACE = "TIMES"> Coloque aqui seu texto </FONT>
Obs. : A fonte Times New Roman ( Times ) já é o padrão das páginas HTML , podendo se colocar
qualquer fonte existente em sua máquina como Mistral , Arial etc.
O <FONT SIZE = "TAMANHO DA FONTE "> irá definir qual o tamanho da fonte utilizada ,
lembrando que deveremos seguir o padrão de hipertexto e usar fontes de tamanho 1 a 6. Podemos
usar tamanhos como 78 e 64 , mas lembre – se que pode não funcionar em alguns micros. Por
isso , se você quer aumentar o tamanho de uma fonte , use o sinal de + antes do número que irá
definir o tamanho da fonte e , para diminuir use o sinal de - . Por Exemplo :
<FONT SIZE = + 3> Irá deixar o texto com o tamanho 6 </FONT> ;
<FONT SIZE = 3> Irá deixar seu texto com o tamanho 3 </FONT> ;
Obs. : O tamanho 3 é o tamanho padrão das páginas HTML , podendo colocar qualquer tamanho
compatível a fonte usada.
O <FONT COLOR = "COR "> irá colocar uma cor na fonte escolhida e seguirá o padrão de cores
RGB , o mesmo do BODY BGCOLOR. Exemplo :
<FONT COLOR = "BLACK"> Veja um texto pretinho! </FONT>
Obs. : A cor preta é o padrão de cor usado nas páginas HTML , podendo –se usar qualquer outra
cor descrita em inglês ou código 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 = "ARIAL" COLOR= "RED " SIZE = "3">TRICOLOR CAMPEÃO !!! </FONT>
Lembre – se de fechar o tag </FONT> para que o formato seja usado só no texto escolhido e não
em toda a página.
• Tag BODY parâmetro BGCOLOR
Esse TAG não precisa de tag de fechamento , pois o próprio < BODY > se encarregará disso. Sua
função será a de colocar uma cor de fundo para sua página. Sua sintaxe é :
<BODY BGCOLOR = "COR ">
Onde : "COR " será a cor do fundo escolhido , que deverá ser escrito em inglês ou em código. Os
browsers disponibilizam até 256 cores para serem usadas como cor de fundo, sendo que cada cor
é formada por um código RGB ( red / green / blue ) . O código é composto por três números nos
quais os primeiros dois dígitos 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 atribuídos os valores mínimos R=000 , G=000 e B=000 , é obtida a cor
preta. Se forem atribuídos o valor máximo para cada cor ( 255 ) , é obtida a cor branca. Mas , para
facilitar nossa vida , vamos escrever o padrão em inglês , que é muito mais simples.
Exemplo :
<BODY BGCOLOR="YELLOW"> ou <BODY BGCOLOR="#FFFF00">
O tag BODY BGCOLOR pode ser colocado logo após o tag BODY , ou até mesmo acoplado em
um mesmo tag. Veja uma tabelinha de cores e alguns códigos : Código Hexadecimal
Black ( Preto ) #000000
White ( Branco ) #FFFFFF
Yellow ( Amarelo ) #FFFF00
Blue ( Azul ) #0000FF
Green ( Verde ) #00FF00
Dark Green ( Verde escuro ) #2F4F2F
Red ( Vermelho ) #FF0000
Magenta ( Rosa ) #FF00FF
Cyan ( Ciano ) #00FFFF
Imagens
Incluir uma imagem na sua página é bem simples. Só se exige apenas que você tenha disponível 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 GIF . Esse formato , é uma abreviação de Graphics
Interchange Format e pode ser usado em diferentes plataformas de hardware , tais como o PC e o
Machintosh . Se comparado com o formato padrão do Windows ( BMP – Bitmaps , também 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 atenção : não encha sua página de imagens , pois , lembre- se de que , ao usar a rede para
transmitir suas páginas e suas imagens , a velocidade de transmissão é muito reduzida , girando
em torno de 1 KB por segundo ou , dependendo do tráfego , ela cai ainda mais. Portanto , uma
imagem de 100 KB pode levar vários minutos para ser exibida , frustrando a platéia. Tente usar
imagens pequenas , com a resolução de 78 pixels por polegada , que é a resolução usada no
padrão VGA e SVGA da maioria dos usuários. No caso de fotos , tente usar 256 cores se a
qualidade não ficar muito comprometida .
• Tag <IMG SRC>
O TAG HTML usado para inserir uma imagem na posição atual onde ele é especificado é o IMG
SRC. Sua sintaxe ;
<IMG SRC = "Nome da imagem.GIF"> ou <IMG SRC= "Nome da imagem . JPG">
Se não for especificado uma URL , o browser procura a imagem no diretório atual. Caso a imagem
esteja em um diretório diferente ao do documento, é necessário indicar o diretório
Onde ela se encontra , através de "../nome_ do _ diretório". Por exemplo:
Se minha figura chamada "carta.gif" estiver em um diretório(pasta) chamado "figuras", devemos
proceder com:
<IMG SRC="../figuras/carta.gif">
Indicando assim que a figura está na Raiz ("../") no diretório figuras ("../figuras/").Pode-se também,
mas não é aconselhável , utilizar o padrão DOS , por exemplo :
<IMG SRC = "C:\figuras\carta.gif">
Porém , prefira que as imagens estejam no mesmo diretório que seu arquivo .HTM ou HTML.
Observe a codificação abaixo :
<HTML>
<HEAD>
<TITLE> Teste com a tag img</TITLE>
</HEAD>
<BODY>
<H1><CENTER>Imagem</H1>
<IMG SRC ="imagem.GIF">
</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:
<IMG SRC = "imagem.GIF" ALIGN="TOP"> Alinha a imagem por cima do texto ;
<IMG SRC = "imagem.GIF" ALIGN="MIDDLE"> Alinha a imagem pelo meio do texto ;
<IMG SRC = "imagem.GIF" ALIGN="BOTTOM"> Alinha a imagem pelo fundo do texto;
<IMG SRC = "imagem.GIF" ALIGN="LEFT"> Alinha a imagem à esquerda da página ;
<IMG SRC = "imagem.GIF" ALIGN="RIGHT">Alinha a imagem à direita da página.
Além do complemento ALIGN , também podemos usar o complemento ALT , que cria uma espécie
de HINT, isto é , um pequeno texto explicativo que aparece abaixo da seta do mouse quando este
pára por sobre a figura. Exemplo:
<IMG SRC = "imagem.GIF " ALIGN = "LEFT " ALT= "imagem">
• Tag BODY parâmetro BACKGROUND
Além de colocar imagens como elementos de nossa página , podemos colocá-las também como
papel de parede no fundo de nossas páginas. Isto é , 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 não colocar imagens como a do Beavis , pois ficaria muito difícil 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 = "IMAGEM.GIF"> ou <BODY BACKGROUND ="IMAGEM.JPG">
Esse TAG pode ser incluído dentro do tag BODY , pois seu fechamento será no próprio tag
</BODY> . Você também 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 = "PISO.GIF"> , consegui esse resultado , sendo que PISO.
GIF é uma textura e , sozinha , a imagem aparece assim :
Repare que , se a sua página tiver uma grande quantidade de elementos como textos e imagens e
você deverá se mover pela tela através das barras de rolagem , o fundo da sua página
acompanhará o movimento da tela , como se estivesse "andando". Isso torna sua página mais
lenta para quem está vendo. Para poupar você deste sofrimento existe um complemento para esse
tag , chamado BGPROPERTIES. Se você declarar essa propriedade como fixa ( FIXED ) o fundo
da sua página ficará estático e apenas o conteúdo da sua página irá se mover. A sintaxe é :
<BODY BACKGROUND = "PISO.GIF " BGPROPERTIES= "FIXED ">
Tente não colocar fundos muito carregados , de tamanho muito grande , pois , quanto maior for o
fundo , mais tempo sua página irá demorar para ser carregada .
Links
A principal atração da Internet é a criação de documentos com o conceito de hipertexto , ou seja ,
um documento que se vincula a outros documentos por meio de ligações especiais chamadas links
ou hiperlinks.Com esse conceito , você pode criar documentos que façam referências e permitam
ao usuário acessar tais referências não importando se elas estão em outra página Web , no seu
micro ou em algum servidor de rede.
O uso de hipertexto também facilita a criação de documentos extensos cujas seções ou tópicos
podem ser rapidamente acessados por meio dos links. Imagine que você crie uma página sobre
determinado assunto em vários tópicos abordados. Assim como em um livro você cria todo o texto
do documento e depois cria , no início , um sumário indicando os tópicos do documento. Se quiser
acessar diretamente o texto de um tópico , basta dar um clique sobre o item do tópico no sumário e
ele será imediatamente exibido.
Um link é reconhecido em uma página por estar em cor normalmente diferente do resto do texto e ,
ao passar com o mouse sobre esse texto o cursor muda para uma mão apontando para o link.
Âncoras
Uma âncora é um ponto de referência ou endereço que será acessado por um link. Uma âncora é
usada dentro do documento para marcar o início de uma seção do documento.
Suponha que seu texto seja muito grande , o que tornaria trabalhoso para quem estiver vendo a
página conseguir se movimentar entre um tópico e outro. Então faça o seguinte : Nomeie um
pedaço da sua página através do tag :
<A NAME="NOME "> Texto </A> ( Lembre –se que "NOME" é fictício, você escolhe o nome…)
Depois disso escreva o pedaço que você quer associar a esse Nome. Agora crie um link para
chegar até esse pedaço , usando o tag :
<A HREF="#NOME">Clique Aqui</A>
Pronto! Ao clicar na mensagem "Clique Aqui" de sua página , o usuário irá até o pedaço que você
nomeou.
ATENÇÃO : O sinal de cerquilha (#) é necessário para a âncora, pois avisa ao browser para
procurar o link no documento atual !!!
• Linkando Arquivos Locais
Fazer a ligação de um texto com outra página , 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 através do TAG A
HREF . Exemplo :
<A HREF = "página.HTM "> Clique aqui para ir à próxima página </A>
Você ainda pode criar uma âncora em outro documento e chamá-lo em um link do documento atual.
É só nomear a âncora na página que você quer e colocar no link o nome da página seguido pela
âncora . Exemplo :
<A HREF="página1.HTM#index"> Vai para o INDEX </A>
• Linkando Arquivos de Outros Diretórios
Você pode especificar o endereço de outros diretórios ( pastas ) usando um esquema de caminhos
parecidos com o do DOS . Existe uma grande diferença entre esses caminhos . Na Web você deve
inverter a barra de espaços , usando a barra "/ " no lugar da barra "\" para separar diretórios.
Além disso o browser usa como referencial o diretório atual para iniciar a busca de páginas. Para
especificar um arquivo que esteja no diretório STRAUSS , que fica abaixo do diretório BACH , os
quais se encontram ambos no diretório raiz , você deve usar os sinais ..\ para subir um nível,
acessando assim a raiz e depois o caminho do diretório BACH .Exemplo :
<A HREF = "../BACH / STRAUSS / INDEX.HTM">
Se o diretório a ser acessado está abaixo do diretório atual , basta especificar o nome do
subdiretório sem nenhum símbolo . Por exemplo :
<A HREF = "MOZAT / INDEX.HTM">
Em alguns browser , você pode escrever o caminho como no DOS , exemplo :
<A HREF = "C:\BACH \ STRAUSS \ INDEX. HTM ">
Porém , tente evitar esta técnica em alguns browsers isso não funciona…
• Linkando Arquivos de Outros Servidores
Agora a coisa fica um pouco mais séria . É aqui que está toda graça de Internet . Através de um
esquema de endereçamento , a URL , a Internet 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 localização de páginas e arquivos em diretórios de
servidores da Web . Vamos comparar com um esquema que você usa ( as vezes até sem saber )
para acessar algum arquivo em seu próprio computador .
Acessando um arquivo pelo DOS :
C: \WINDOWS \SYSTEM \ Lista.TXT
Acessando uma página pela Web :
HTTP : // WWW. STRAUSS. COM / LISTA . HTM
Uma URL é composta por duas partes principais . A primeira é o protocolo Internet do documento ,
a segunda parte é o endereço do servidor e da página. A sintaxe disso é :
PROTOCOLO: //SERVIDOR . INSTITUIÇÃO / ARQUIVO
Onde :
Protocolo é o tipo de servidor que está sendo acessado;
Servidor é o computador que contém a página ;
Instituição é o tipo de instituição a qual esse computador pertence ( Comercial , Internet Publica ,
Militar etc. ) ;
Arquivo é o caminho do arquivo.
Exemplo :
HTTP : // WWW. MACLINUX.NET / INDEX . HTM
Esse endereço pode ser especificado diretamente na linha de URL do Browser , para acessar
diretamente a página INDEX. HTM , ou então dentro de um link de um documento HTML , através
do A HREF que cria uma ligação , um link para o URL .
<A HREF = "HTTP : // WWW. MACLINUX.NET / INDEX . HTM "> MacLinux.net </A>
Montagem de listas em HTML
Listas já foram muito importantes na confecção de páginas HTML, mas hoje poucos sites usam
este recurso.
A idéia é a de criar uma seqüência de informações de forma ordenada (numeradas uma a uma) ou
desordenada (sem numeração).
Exemplos :
Lista ordenada:
1. Não diga o que fazer, mas sim como fazer
2. Faça tudo com boa vontade
3. Quando quiser ouvir respostas agradáveis, comece você dizendo coisas agradáveis
Lista desordenada:
•Acredite em você
•Pare de reclamar
•Aja e faça corretamente
Os comandos HTML para criar estas listas são muitos simples, veja o exemplo abaixo:
<HTML>
<HEAD>
<TITLE>Criando listas</TITLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=RED SIZE=6>EXEMPLO DE UMA LISTA
ORDENADA</FONT></CENTER>
<BR>
<OL> <!Este comando inicia a lista>
<LI> Não diga o que fazer, mas sim como fazer <! Aqui você começa a inserir os itens da lista,
cada item deve ser iniciado por um LI>
<LI> Faça tudo com boa vontade
<LI> Quando quiser ouvir respostas agradáveis, comece você dizendo coisas agradáveis
</OL> <! Este comando encerra a lista criada>
</BODY>
</HTML>
Se salvarmos este exemplo como LISTA.HTM, podemos visualizá-lo no navegador.
Repare que neste exemplo não inserirmos no código da página os números dos itens, pois o
comando <OL> (Ordened List) insere automaticamente os números da lista , esta é a característica
da lista ordenada.
Para se montar uma lista desordenada o procedimento é o mesmo porém o comando HTML que
inicia uma lista desordenada é <UL> (Unordered List).
<HTML>
<HEAD>
<TITLE>Criando listas</TITLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=RED SIZE=6>EXEMPLO DE UMA LISTA
DESORDENADA</FONT></CENTER>
<BR>
<UL> <!Este comando inicia a lista>
<LI> Acredite em você <! Aqui você começa a inserir os itens da lista, cada item deve ser iniciado
por um LI>
<LI> Pare de reclamar
<LI> Aja e faça corretamente
</UL> <! Este comando encerra a lista criada>
</BODY>
</HTML>
Um outro tipo de lista além da ordenada e da desordenada é a de tipo glossário. Uma lista do tipo
glossário tem esta aparência:
HTML
Hyper Text Markup Language, linguagem usada na Internet
para a confecção 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 avança das linguagens de formatação
(Markup)
e serve para se criar modelos de realidade virtual para a Internet.
Os códigos HTML para se criar esta lista ficam assim:
<HTML>
<HEAD>
<TITLE>Criando listas</TITLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=RED SIZE=6>EXEMPLO DE UMA LISTA TIPO
GLOSSÁRIO</FONT></CENTER>
<BR>
<DL> <! Este comando inicia a lista de glossário>
<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 Internet
para a confecção 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 avança das linguagens de formatação (Markup)
e serve para se criar modelos de realidade virtual para a Internet
</DL> <! Este comando encerra a lista de glossário>
</BODY>
</HTML>
Todos os comandos de formatação 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 HTML
As tabelas são muito importantes para o designer de uma home-page. Com elas pode-se fazer
alinhamentos que dificilmente seriam possíveis com simples comandos.
A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais
profissional e o usuário possa navegar de forma mais eficiente, pois os objetos podem estar melhor
posicionados na home-page.
Vamos discutir, nesta parte, quais são 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 difícil de controlar o código 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 célula (alguns preferem dizer coluna) <TD>. Todos estes comandos são
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 código HTML para isso é :
<HTML>
<HEAD>
<TITLE>Criando Tabelas</TITLE>
</HEAD>
<BODY>
<CENTER><FONT COLOR=BLUE SIZE=6>TABELA</FONT></CENTER>
<BR>
<TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1>
<TR> <! Cria a primeira linha da tabela>
<TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma célula>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCEIRA COLUNA </TD>
</TR> <! Fecha a primeira linha da tabela>
<TR> <! Abre a segunda linha da tabela>
<TD> PRIMEIRA COLUNA</TD>
<TD>SEGUNDA COLUNA </TD>
<TD>TERCEIRA COLUNA </TD>
<TR> <! Encerra a Segunda linha da tabela>
</TABLE> <! Encerra a tabela>
</BODY>
</HTML>
Salve este exemplo como TABELA.HTM e abra o arquivo num Browser para ver como ficou.
Com isto você já consegue Ter uma idéia de como montar suas tabela. O segredo para se
conseguir fazer estas tabelas de forma eficiente é planejar e ter a idéia exata do conteúdo desta
tabela.
Nas células da tabela você pode inserir desde simples frases até figuras inteiras.
Parâmetros podem ser acrescidos às tabelas, tais como : aumentar ou diminuir a largura de uma
célula; distanciar as células uma das outras; inserir cor de fundo dentro da célula etc.
Vamos procurar trabalhar com vários exemplos para visualizarmos melhor o uso destes
parâmetros.
• Alterando a largura da célula
Para alterar o largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag
<TD>. Exemplo1:
<TABLE BORDER=2>
<TR>
<TDWIDTH=100> WIDTH=100</TD>
<TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD>
</TR>
</TABLE>
O parâmetro WIDTH pode receber dois tipos de valores, em pixels como no exemplo acima ou em
porcentagem, como mostrado no exemplo a seguir. Também dentro da tag <TD> vemos um outro
parâmetro que é VALIGN=MIDDLE, este parâmetro tem por função alinhar o conteúdo da célula no
meio da mesma, ou seja, dentro da célula as frases são alinhadas com relação ao seu centro.
Exemplo2:
<TABLE BORDER=2>
<TR>
<TDWIDTH=25%> WIDTH=25%</TD>
<TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD>
</TR>
• Inserindo cor de fundo e separação 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 célula em especial.
Vejamos um exemplo:
<TABLE BORDER=0>
<TR>
<TDWIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TDWIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TDWIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TDWIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TDWIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TDWIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
Aqui, vimos que podemos acrescentar cores ao fundo de uma célula, outra coisa que também
pode ser feita é mudar a fonte com os comandos de formatação que você já conhece, como
<FONT COLOR=cyan>, por exemplo.
Repare que no exemplo anterior nós colocamos BORDER=0 e as células apareceram coloridas,
mas com um certo espaçamento entre elas, para tirarmos este espaço devemos acrescentar
dentro da tag <TABLE> o parâmetro CELLSPACING=0. Este parâmetro elimina por completo os
espaços entre as células.
<TABLE BORDER=0 CELLSPACING=0>
<TR>
<TDWIDTH=150 BGCOLOR=RED>VERMELHO </TD>
<TDWIDTH=150 BGCOLOR=BLUE>AZUL </TD>
<TDWIDTH=150 BGCOLOR=RED>VEMELHO</TD>
</TR>
<TR>
<TDWIDTH=150 BGCOLOR=BLUE>AZUL</TD>
<TDWIDTH=150 BGCOLOR=RED>VEMELHO</TD>
<TDWIDTH=150 BGCOLOR=BLUE> AZUL</TD>
</TR>
</TABLE>
Outro parâmetro que pode ser usado para separar espaços em uma célula é CELLPADDING que
inclui ou exclui espaços dentro da célula, ou seja, se você tiver um elemento (frase, texto, figura
etc.) dentro da célula você pode acrescentar espaços por igual nos quatros cantos da célula,
fazendo com que seu texto ou figura não fique "grudado" nas paredes da célula. Aproveite os
exemplos anteriores e experimente usar este atributo para ver como ele funciona.
Isto já dá uma idéia do funcionamento geral das tabelas na WEB. Muitos dos alinhamentos que
encontramos na Internet são feito por intermédio de tabelas.
Você também pode usar todos os outros recursos já vistos de HTML para otimizar o uso de tabelas.
• Um pouco 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 aperfeiçoar o uso de tabelas.
Em seguida descreveremos uma série de outros atributos e comandos para tabelas:
<TH> ... </TH>
Esta tag insere um cabeçalho dentro da célula. Na verdade a única diferença entre a tag <TH> e a
tag <TD> é que a <TH> exibe o conteúdo da célula em negrito.
<CAPTION> ... </CAPTION>
Exibe um texto centralizado em relação à tabela, como se fosse uma legenda.
Exemplo:
<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=6> <! Esta linha inicia a tabela com borda
de espessura 1 (border), espaço entre as células 2 (Cellspacing) e espaço dentro da célula 6
(Cellpadding)>
<CAPTION>LEGENDA</CAPTION> <! Introduz uma legenda na tabela>
<TR>
<TH>Conteúdo em negrito</TH> <! Insere o texto na forma de cabeçalho (negrito)>
</TR>
<TR>
<TH>Conteúdo em negrito</TH>
</TR>
</TABLE>
Repare neste exemplo, que a legenda já sai centralizada com relação a tabela e repare no espaço
dentro da célula devido ao comando CELLPADDING.
• Os atributos COLSPAN e ROWSPAN
Estes atributos são muito importantes dentro da tag <TABLE>. São eles que nos possibilitam
remodelar a disposição das células dentro da tabela. Vejamos um exemplo prático:
<TABLE BORDER=2 CELLPADDING=2>
<TR>
<TD COLSPAN=2>Exemplo do uso do COLSPAN</TD>
<TR>
<TD>CÉLULA 1</TD> <TD>CÉLULA 2</TD>
</TR>
</TABLE>
Neste exemplo vemos que na tag <TD> foi introduzido o parâmetro COLSPAN. Este parâmetro
tem a finalidade de dizer que sob a célula onde ele foi introduzido podemos ter um certo número de
colunas. Logo, se você quiser que uma célula ocupe uma única linha, como no nosso exemplo,
você deve inserir o parâmetro dentro da tag <TD> desta célula. A quantidade de células que virão
em baixo da célula que recebeu o atributo COLSPAN deve ser de acordo com o número
especificado no parâmetro.
Mas se quisermos definir uma única célula ocupando uma coluna inteira ? Neste caso usamos o
atributo ROWSPAN. Exemplo:
<TABLE BORDER=2 CELLPADDING=2>
<TR>
<TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD>
<TD>CÉLULA 1</TD></TR><TR> <TD>CÉLULA 2</TD>
</TR>
</TABLE>
Para melhor utilizar estes parâmetros e ver como eles funcionam você deve fazer a sua própria
tabela, pois somente desta forma você conseguirá fixar o uso destes parâmetros.
• Usando 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> <IMG SRC=NOME DA FIGURA> </TD>
</TR>
</TABLE>
Claro que você deve usar com muito bom senso este artifício da tag <TABLE>, pois nem sempre
uma moldura em uma figura defini um bom layout (aparência) da sua home-page.
• Colocando uma imagem de fundo nas tabelas
Um recurso parecido com a cor de fundo , colocar uma imagem como fundo de uma tabela é uma
técnica muito usada. Através do complemento BACKGROUND dentro da tag TABLE , basta indicar
qual o endereço e o nome da figura.
<TABLE BACKGROUND="POOL.GIF" BORDER=5>
<TR>
<TD><H1>Que tal um mergulho agora ? </H1></TD>
</TR>
</TABLE>
O atributo RULES
Para escolher as linhas internas que serão mostradas dentro da tabela , usamos o atributo RULES ,
dentro da tag <TABLE> . Os complementos desse atributo são :
• 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 seções 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 são um forte recurso de modelagem das home-pages hoje em dia e para que você
consiga utilizar bem este recuso não deve se limitar somente aos exemplos desta apostila, procure
em sites e até mesmos em livros , como por exemplo: "Criando sites arrasadores na Web" (capítulo
4) ou "HTML Truques Espertos" (capítulo 5). Nessas referências você poderá encontrar vários
outros exemplos de páginas usando tabelas mais complexas (como por exemplo, uma tabela
periódica dos elementos) e é claro em laboratório desenvolvendo sua própria home-page.
Há uma observação importantíssima que devemos fazer aqui. Como já vimos antes, alguns
comandos HTML não 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ê não reparou nenhuma diferença no uso destes navegadores
para nossos exemplos, a questão é que para tabelas mais complexas, com alinhamentos mais
precisos cada navegador interpreta estes comandos HTML de tabelas de forma diferenciada. Um
exemplo típico é 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
padronização de seus navegadores. Sendo assim, quando você construir tabelas deve sempre
levar em conta em qual navegador você dará preferência para rodar a sua página. Por isso nunca
é demais deixar claro à sua home-page em qual navegador ela roda melhor a sua formatação.
FRAMES
Frames (quadros) são relativamente usadas na Web. Há os que adoram o uso de frames e não
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 confecção de home-pages simples, a diferença é
que se deve trocar a tag <BODY> pela tag <FRAMSET>
Para termos uma home-page com frames devemos ter três páginas, uma com o código que
contém a tag <FRAMESET> e duas outras com os códigos onde serão inseridas as páginas de
cada frame.
Vamos procurar entender melhor.
Uma documento HTML simples seria assim :
<HTML>
<HEAD>
<TITLE>Página simples </TITLE>
</HEAD>
<BODY>
Neste campo entram os comandos em geral
</BODY>
</HTML>
Já um documento HTML que teria frames ficaria assim:
<HTML>
<HEAD>
<TITLE>Página com Frame </TITLE>
</HEAD>
<FRAMESET>
NESTE CAMPO ENTRAM AS CHAMADAS PARA OS DOCUMENTOS DOS FRAMES
</FRAMESET>
</HTML>
Então o que devemos fazer ? Devemos criar um documento HTML normal e um documento HTML
de frames.
Vejamos um exemplo:
<HTML>
<HEAD>
<TITLE> Exemplo de frame</TITLE>
</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 páginas HTML que devem ocupar as
colunas divididas pelo frame>
<FRAME SRC=FRAME2.HTM>
</FRAMESET>
</HTML>
Este é o código para gerar os frames (veja a figura) .
Agora vamos crias os códigos para serem inseridos nas duas colunas que criamos.
<HTML>
<HEAD>
<TITLE>Página simples </TITLE>
</HEAD>
<BODY>
AQUI ENTRA A PRIMEIRA PÁGINA NORMAL
</BODY>
</HTML>
Salve este exemplo como FRAME1.HTM. Por que ? Porque no código que geramos no exemplo de
frames chamamos a página com o comando <FRAME SRC=FRAME1.HTM>, se você salvar o
nome do código de forma diferente deverá alterar também o código da página de frame.
<HTML>
<HEAD>
<TITLE>Página simples </TITLE>
</HEAD>
<BODY>
AQUI ENTRA A SEGUNDA PÁGINA NORMAL
</BODY>
</HTML>
Este código deve ser salvo como FRAME2.HTM, pelo mesmo motivo do código anterior.
Sempre lembrando que estas páginas devem estar no mesmo DIRETÓRIO.
Pronto, você conseguiu fazer a sua primeira página com frame.
Alem de poder dividir o navegador em colunas com o parâmetro COLS dentro da tag <FRAMSET> ,
você também pode dividir em linhas usando o parâmetro ROWS, ou ainda dividindo em colunas e
linhas ao mesmo tempo.
<HTML>
<HEAD>
<TITLE> Exemplo de frame</TITLE>
</HEAD>
<FRAMESET ROWS=50% , 50%> <! Este comando inicia o frame e divide a tela do navegador em
2 partes, uma com 50% da tela e outra com 50%>
<FRAME SRC=FRAME1.HTM> <! Este comando chama as páginas HTML que devem ocupar as
colunas divididas pelo frame>
<FRAME SRC=FRAME2.HTM>
</FRAMESET></HTML>
Uma tag <FRAMESET> pode ser inserida dentro da outra gerando assim frames dentro de frames,
como no código abaixo:
<HTML>
<HEAD>
<TITLE> Exemplo de frame</TITLE>
</HEAD>
<FRAMESET COLS=50%,50%>
<FRAMESET ROWS=50%,50%>
<FRAME SRC=FRAME1.HTM>
<FRAME SRC=FRAME1.HTM>
</FRAMESET>
<FRAMESET ROWS=50%,50%>
<FRAME SRC=FRAME1.HTM>
<FRAME SRC=FRAME1.HTM>
</FRAMESET>
</FRAMESET>
</HTML>
Este código gera a seguinte página :
Já deu para perceber que toda a estrutura de frames depende na verdade da tag <FRAME>.
Vejamos alguns dos atributos que podem ser inseridos dentro desta tag.
• Parâmetros de frames
Parâmetro SRC da tag <FRAME>
Este parâmetro é o responsável por chamar a página HTML que deve ser aberta (inserida) dentro
de um frame. Em todos os exemplos até agora só usamos arquivos locais para abrir estas páginas
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 página para a seu
frame, onde quer que ela esteja na Internet.
Parâmetro NAME
Este é um dos principais parâmetros da tag <FRAME>. Ele serve, como era de se esperar, para
definir o nome do frame. Ele deve ser usado em conjunto com outro parâmetro que é o TARGET.
Parâmetro MARGINWIDTH
Define a margem entre as laterais do frame e seu conteúdo. Exemplo:
<FRAME SRC=FRAME1.HTM MARGINWIDTH=100>
Este comando cria uma margem de 100 pixels de cada lado do frame.
Parâmetro MARGINHEIGHT
Da mesma forma que MARGINWIDTH, este parâmetro define uma distância de margem, que neste
caso é a margem superior e inferior do frame. Exemplo:
<FRAME SRC=FRAME1.HTM MARGINHEIGHT=100>
Dá um espaço de 100 pixels entre as margens superior e inferior do frame.
Parâmetro SCROLLING
Define se o frame terá ou não barras de rolagem. Por default quando o conteúdo de uma página
excede o tamanho do frame as barras de rolagem são acrescentadas automaticamente. Os valores
válidos para SCROLLING são YES, NO e AUTO. Exemplo:
<FRAME SRC=FRAME1.HTM SCROLLING=YES>
Parâmetro TARGET
Este é o mais importante de todos os parâmetros. Ele trabalha em conjunto com NAME e permite
que coloquemos um link em um frame e o resultado, ou seja, a página linkada, aparece em outro
frame.
Vejamos um exemplo de como podemos linkar um frame com outro. Vamos construir uma página
que possua um menu de opções do lado direito, para isso podemos aproveitar os códigos de
exemplo abordados anteriormente.
Os códigos são:
FRAME.HTM
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<FRAMESET COLS=25%,75%>
<FRAME SRC=FRAME1.HTM SCROLLING=NO>
<FRAME SRC=FRAME2.HTM NAME=TESTE>
</FRAMESET>
</HTML>
FRAME1.HTM
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<BODY BGCOLOR=YELLOW>
<CENTER><H2>Escolha um Link</H2></CENTER>
<BR>
<A HREF=http:\\www.amazon.com TARGET=TESTE>Livraria Amazon</A>
<BR>
< A HREF=http:\\www.yahoo.com TARGET=TESTE>Pesquisador YAHOO</A>
<BR>
<A HREF=FRAME2.HTM TARGET=TESTE>Volta para Frame2.htm</A>
</BODY>
</HTML>
FRAME2.HTM
<HTML>
<HEAD>
<TITLE>FRAMES</TITLE>
</HEAD>
<BODY>
<CENTER><H2>Os links ao lado deverão aparecer neste lado do Navegador</H2></CENTER>
<BR>
<CENTER>
<FONT SIZE=4>Este frame é o que foi nomeado como TESTE com o parâmetro NAME em
Frame.HTM</FONT>
</CENTER>
</BODY>
</HTML>
Se tudo funcionar convenientemente você deverá visualizar sua página como abaixo, mas é claro
que os links que não são locais funcionarão somente se você estiver conectado.
Criando um frame Inline
Se você quiser misturar texto , figuras e um frame em uma mesma página você
precisa
criar um frame inline. Para isso , utilize a tag <IFRAME SRC=" nome do frame "> .
Você pode usar os complementos NAME – para especificar um nome que identifica qual frame
está em uso ; WIDTH e HEIGTH para definir o espaço na página utilizado pelo Frame ; ALIGN
( LEFT ou RIGHT ) - para alinhar o frame na página. Lembre-se de fechar a tag </IFRAME>.
Você também pode usar os atributos normais da tag frame , como o FRAMEBORDER ,
SCROLLING etc.
<html>
<body>
<center><h1>Exemplo do comando IFRAME </h1></center>
<hr>
<iframe width=90% height=70% src="pag2.htm">
</iframe>
</center>
Aqui continua a página normal !
</body>
</html>