Apostila de html (bsico)

Introduo Como funciona a Internet World Wide Web E Mail Correio Eletrnico FTP (File Transfer Protocol) HTML Estrutura bsica de uma pgina Criando Sites HTML Tags para formatar sua pgina Imagens Links ncoras Montagem de listas em HTML Tabelas em HTML FRAMES 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 INTERNET 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 INTERNET 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 INTERNET e todas as demais redes conectadas. A INTERNET comeou a ser utilizada no Brasil, em meados de 89/90, somente por Instituies 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 INTERNET 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 MILNET (tambm militar), mantendo a comunicao 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 conexo de pesquisadores aos cincos grandes centros dos EUA e abrangendo, rapidamente redes acadmicas

e escolares.

Nessa poca, a INTERNET 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 Internet , todos os computadores conectados LAN podero ter acesso Internet. assim que muitas empresas proporcionam acesso Internet a seus funcionrios. Uma rede formada por vrios 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 organizaes mundo afora. Essas redes esto interligadas de diversas formas, desde uma simples linha telefnica discada at malhas de fibras ticas. Estar na INTERNET significa participar de uma rede interconectada. As redes que formam a Internet so Interligadas 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 Internet 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 Internet passou por vrias etapas , transformando-se numa rede de pesquisa acadmica e , finalmente , na grande rede que . A melhor forma de entender a Internet pensar nela no como uma rede de computadores, mas como uma rede de redes. Sendo assim, a Internet 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 Internet 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/IP (Trasmission Control Protocol / INTERNET Protocol) a famlia 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 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 INTERNET 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".

HTML
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 Internet 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 MIT ( Massachusetts Institute of Technology) , pelo CERN e pelo INRA ( French National Institute 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 HTML Tags 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 bsica de uma pgina

Bem , deixarei claro que ultimamente o que vou explicar no bem assim , pois existe um certo desleixo hoje na Internet , 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 <TITLE> - 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 </TITLE>) . 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> <TITLE> Ttulo da pgina </TITLE> </HEAD> <BODY> Aqui voc coloca os comandos em HTML , seus Textos e Imagens . 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 Internet 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 Sites HTML

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 .

Tags para formatar sua pgina

Tags <H1..6> </H1..6> 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> .

Tags <CENTER> </CENTER>

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> Tag <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>

Tag <BR> 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>

Tag <HR> 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 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. Formatao e Estilos de Texto 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 Itlico <I> Texto <I> Deixa o texto em Itlico Sublinhado <U>Texto </U> Deixa o texto sublinhado Letreiro <MARQUEE > Texto </MARQUEE> Cria o efeito da proteo 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 pgina. 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 padro popular no Windows , pois as fontes que seu computador tem , pode ser que outro computador no tenha. Por isso fontes como TIMES NEW ROMAN e ARIAL so aconselhveis. Exemplo : <FONT FACE = "TIMES"> 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 SIZE = "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 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 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 = "ARIAL" COLOR= "RED " SIZE = "3">TRICOLOR 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. Tag BODY parmetro BGCOLOR 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 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 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 GIF . Esse formato , uma abreviao 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 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 . Tag <IMG SRC>

O TAG HTML usado para inserir uma imagem na posio atual onde ele especificado o IMG SRC. Sua sintaxe ; <IMG SRC = "Nome da imagem.GIF"> ou <IMG 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: <IMG SRC="../figuras/carta.gif"> Indicando assim que a figura est na Raiz ("../") no diretrio figuras ("../figuras/").Pode-se tambm, mas no aconselhvel , utilizar o padro DOS , por exemplo : <IMG 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> <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 pgina ; <IMG SRC = "imagem.GIF" ALIGN="RIGHT">Alinha a imagem direita da pgina. Alm do complemento ALIGN , tambm podemos usar o complemento ALT , que cria uma espcie de HINT, isto , um pequeno texto explicativo que aparece abaixo da seta do mouse quando este pra por sobre a figura. Exemplo: <IMG SRC = "imagem.GIF " ALIGN = "LEFT " ALT= "imagem">

 Tag BODY parmetro BACKGROUND Alm de colocar imagens como elementos de nossa pgina , podemos coloc-las tambm como papel de parede no fundo de nossas pginas. 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 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 = "IMAGEM.GIF"> ou <BODY BACKGROUND ="IMAGEM.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 = "PISO.GIF"> , consegui esse resultado , sendo que PISO. GIF 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". Isso torna sua pgina 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 pgina ficar esttico e apenas o contedo da sua pgina ir se mover. A sintaxe : <BODY BACKGROUND = "PISO.GIF " BGPROPERTIES= "FIXED "> 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 .

Links
A principal atrao da Internet 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. Imagine 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 !!! Linkando Arquivos Locais

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 INDEX </A> Linkando Arquivos de Outros Diretrios 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 / INDEX.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 / INDEX.HTM">

Em alguns browser , voc pode escrever o caminho como no DOS , exemplo : <A HREF = "C:\BACH \ STRAUSS \ INDEX. HTM "> Porm , tente evitar esta tcnica em alguns browsers isso no funciona Linkando Arquivos de Outros Servidores Agora a coisa fica um pouco mais sria . aqui que est toda graa de Internet . Atravs de um esquema de endereamento , 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 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 Internet do documento , a segunda parte o endereo do servidor e da pgina. A sintaxe disso : PROTOCOLO: //SERVIDOR . INSTITUIO / ARQUIVO Onde :

Protocolo o tipo de servidor que est sendo acessado; Servidor o computador que contm a pgina ; Instituio o tipo de instituio a qual esse computador pertence ( Comercial , Internet Publica , Militar etc. ) ; Arquivo o caminho do arquivo. Exemplo : HTTP : // WWW. MACLINUX.NET / INDEX . HTM Esse endereo pode ser especificado diretamente na linha de URL do Browser , para acessar

diretamente a pgina INDEX. 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. MACLINUX.NET / INDEX . HTM "> MacLinux.net </A>

Montagem de listas em HTML

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> <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> 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 LI> <LI> Faa tudo com boa vontade <LI> Quando quiser ouvir respostas agradveis, comece voc dizendo coisas agradveis </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 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> <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 comea a inserir os itens da lista, cada item deve ser iniciado por um LI> <LI> Pare de reclamar <LI> 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 Internet 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 Internet.

Os cdigos 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 GLOSSRIO</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 Internet 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 Internet </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 HTML
As tabelas so muito importantes para o designer 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> <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 clula> <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 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.

Alterando a largura da clula Para alterar o largura de uma clula da tabela basta acrescentar o parmetro 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 parmetro WIDTH 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 VALIGN=MIDDLE, 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> <TDWIDTH=25%> WIDTH=25%</TD> <TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD> </TR> Inserindo cor de fundo e separao de clulas 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> <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 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 CELLSPACING=0. Este parmetro elimina por completo os espaos entre as clulas. <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 parmetro que pode ser usado para separar espaos em uma clula CELLPADDING que inclui ou exclui espaos dentro da clula, 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. Isto j d uma idia do funcionamento geral das tabelas na WEB. Muitos dos alinhamentos que encontramos na Internet so feito por intermdio de tabelas. Voc tambm 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 aperfeioar o uso de tabelas. Em seguida descreveremos uma srie de outros atributos e comandos para tabelas: <TH> ... </TH>

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. <CAPTION> ... </CAPTION> Exibe um texto centralizado em relao 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), espao entre as clulas 2 (Cellspacing) e espao dentro da clula 6 (Cellpadding)> <CAPTION>LEGENDA</CAPTION> <! Introduz uma legenda na tabela> <TR> <TH>Contedo em negrito</TH> <! Insere 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 CELLPADDING. Os atributos COLSPAN e ROWSPAN 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 CELLPADDING=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 CELLPADDING=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.

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 artifcio da tag <TABLE>, pois nem sempre uma moldura em uma figura defini um bom layout (aparncia) 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 tcnica muito usada. Atravs do complemento BACKGROUND dentro da tag TABLE , basta indicar qual o endereo 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 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 : Internet Explore 4.0 e no Netscape Communicator 4.0. Voc no reparou nenhuma diferena no uso destes navegadores para nossos exemplos, a questo que para tabelas mais complexas, com alinhamentos mais precisos cada navegador interpreta estes comandos HTML de tabelas de forma diferenciada. Um exemplo tpico uso de CELLSPACING e CELLPADDING. Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordo quanto a padronizao de seus navegadores. Sendo assim, quando voc construir tabelas deve sempre levar em conta em qual navegador voc dar preferncia para rodar a sua pgina. Por isso nunca demais deixar claro sua home-page em qual navegador ela roda melhor a sua formatao.

FRAMES

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> <TITLE>Pgina 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>Pgina com Frame </TITLE> </HEAD>

<FRAMESET>
NESTE CAMPO ENTRAM AS CHAMADAS PARA OS DOCUMENTOS DOS FRAMES

</FRAMESET> </HTML> Ento 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 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> <TITLE>Pgina simples </TITLE> </HEAD> <BODY> AQUI ENTRA A PRIMEIRA PGINA 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> <TITLE>Pgina simples </TITLE> </HEAD> <BODY> AQUI ENTRA A SEGUNDA PGINA 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 DIRETRIO. 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> <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 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>

<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 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. Parmetros de frames Parmetro SRC da tag <FRAME> 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 Internet. Parmetro NAME 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. Parmetro MARGINWIDTH Define a margem entre as laterais do frame e seu contedo. Exemplo: <FRAME SRC=FRAME1.HTM MARGINWIDTH=100> Este comando cria uma margem de 100 pixels de cada lado do frame.

Parmetro MARGINHEIGHT Da mesma forma que MARGINWIDTH, este parmetro define uma distncia de margem, que neste caso a margem superior e inferior do frame. Exemplo: <FRAME SRC=FRAME1.HTM MARGINHEIGHT=100> D um espao de 100 pixels entre as margens superior e inferior do frame. Parmetro SCROLLING 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 SCROLLING so YES, NO e AUTO. Exemplo: <FRAME SRC=FRAME1.HTM SCROLLING=YES> Parmetro TARGET 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:

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 devero aparecer neste lado do Navegador</H2></CENTER> <BR> <CENTER> <FONT SIZE=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 <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 espao na pgina utilizado pelo Frame ; ALIGN ( LEFT ou RIGHT ) - para alinhar o frame na pgina. Lembre-se de fechar a tag </IFRAME>. Voc tambm 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 pgina normal ! </body> </html>