HTML

AUTORA: Cssia de Jesus Ramos Teixeira

1 PARTE

CAPTULO 1

Neste captulo iremos abordar conceitos sobre: 1. 2. 3. 4. 5. Redes Internet Intranet Extranet Uma viso geral de como funciona a Internet.

REDES E INTERNET

Para que voc possa entender o que e como funciona a Internet necessrio primeiro compreender o que uma rede de computadores. Uma rede de computadores consiste, na forma mais simples de sua definio, na conexo de diversos computadores por meio de cabos e outros tipos de hardware. Podendo trocar dados entre si. A interao entre computadores envolve a movimentao de muitos dados, mas difcil de se mover muitas coisas, incluindo-se dados, atravs de uma longa distncia. Ento a interao de computadores normalmente comea com computadores no mesmo escritrio ou no mesmo prdio conectados a uma rede local. O termo rede de rea local ou LAN, descreve um grupo de computadores geralmente conectados por mais de 300 metros de cabo, a qual interage e permite o compartilhamento de recursos. As redes locais so: Ethernet, Token-ring e a rede remota (WAN). As redes Ethernet e Token-ring so dois tipos diferentes de redes que podem ser conectadas Internet. Nas redes Token-ring os dados so transmitidos em "Tokens" de computador para computador, em uma configurao em anel ou estrela. Em redes Ethernet, os dados passam de um servidor para um computador na rede. Alguns sistemas de rede no usam qualquer cabo. A aparelhagem de redes remotas (ou sem fio) estendem as redes alm do alcance dos cabos de cobre ou dos cabos de fibra tica. As redes locais so agrupadas em redes regionais. Que podem atravs dos Backbones ter acesso outras redes regionais. Um Backbone uma estrutura bsica para transmisso de dados na Internet extremamente veloz, so as espinhas dorsais do trfego. A Internet uma interconexo de diversas redes atravs de linhas de alta capacidade chamadas Backbones, construdos para comportar o grande trfego de informaes que circulam na Internet. um local pblico e no pertence nem operada por nenhuma empresa. Agncias governamentais ou companhias privadas so as responsveis pela construo destas estruturas. As companhias de alcance de longa distncia constroem backbones e vendem o acesso a eles a outras companhias, os ISPs ( provedores de servio da internet), o que permite o acesso de seu computador a Internet, cobram de ambos pelo trfego de informaes.

Vamos entender como funciona todo o processo desde ligar o computador at receber ou enviar uma mensagem para um computador do outro lado do mundo ou em outro estado do nosso pas. Alm do computador diversos outros tipos de hardware sero envolvidos ao se navegar na Internet. Esse hardware projetado para transmitir dados entre redes e forma grande parte do "elemento de coeso" que une a Internet. As cinco partes mais importantes so: Hubs, pontes, portas de comunicao(gateways), repetidores e roteadores. Os Hubs so importantes porque ligam grupos de computadores entre si e permitem que os computadores se comuniquem uns com os outros. As pontes ligam as redes locais (LANs) umas s outras. Permitem que os dados destinados outra LAN sejam enviados a partis delas, enquanto mantm simultaneamente dados locais dentro de sua prpria rede. As portas de comunicao (gateways) so semelhantes s pontes, mas tambm traduzem dados de um tipo de rede para outro. Os dados sempre atravessam grandes distncias quando viajam atravs da Internet, o que pode criar um problema, pois o sinal que os envia pode enfraquecer com a distncia. Para evitar que isto ocorra, os repetidores amplificam os dados, em determinados intervalos, para que o sinal no enfraquea. Os dados para serem enviados de um local para outro so divididos em pacotes pelo TCP (Protocolo de Controle de Transmisso). Os roteadores garantem que estes pacotes cheguem ao seu destino. E ,posteriormente, estes pacotes so montados formando a informao como foi enviada. Agora que vimos o hardware envolvido, iremos entender todo o processo. Os dados so divididos em pacotes pelo TCP. Pois a Internet uma rede comutada, onde no existe uma conexo permanente entre o emissor e o receptor. Esses pacotes so enviados de seu computador para a sua rede local, provedor de servios Internet ou para um servio comercial on-line, via modem. Caso o destino seja uma outra rede local dentro da rede regional a qual as duas fazem parte, a transmisso ter um roteador captando estes dados do provedor, servio comercial ou rede local e transmitindo para o roteador da outra rede local. No caso da transmisso entre vrias redes regionais, os pacotes sero enviados a um ponto de acesso rede (NAP) e depois atravs de um backbone enviado a outro ponto de acesso prximo ao destino, a um roteador e em seguida ao computador de destino. Esta diviso em pacotes que faz a Internet ser conhecida como uma rede comutada em pacotes. isto que os dois Protocolos (conjunto de regras) de comunicao mais importantes fazem: o TCP e o IP. TCP o Protocolo de Controle de Transmisso e o IP o Protocolo Internet.

INTRANET E EXTRANET

Uma intranet uma internet interna. O acesso a ela normalmente se restringe a funcionrios da empresa. Como uma intranet pode abranger o globo, muitas organizaes consideram mais barato compartilhar informaes corporativas dessa maneira. Os protocolos e as regras so os mesmos da Internet, com a diferena que se trata de uma rede fechada da empresa, disponvel somente aos funcionrios conectados a ela. As informaes disponveis na intranet so informaes corporativas, geralmente de natureza proprietria. Uma empresa estabelece uma intranet instalando o protocolo TCP/IP, um servidor Web (cujo conceito veremos no prximo captulo) e navegadores Web, browsers. Os documentos da empresa so convertidos para formato HTML e colocados no(s) servidor(es) Web da intranet. Assim, os funcionrios da empresa usam seus navegadores Web para visualizar esses documentos, basta digitar o endereo local do documento que desejam ver, de forma semelhante insero de um endereo Internet. Fazer parte de uma intranet no impede necessariamente o acesso Internet. possvel ter os dois ao mesmo tempo. A EXTRANET um grupo de intranets interconectadas. As empresas que fazem negcios entre si podem formar extranets para compartilhar determinados tipos de informao.

COMO NASCEU A INTERNET

Em 1969, a ARPA, do departamento de defesa dos EUA, construiu uma rede experimental de computadores chamada ARPAnet. A ARPAnet uniu pesquisadores, militares e universitrios, permitindo que os recursos de seus computadores fossem compartilhados. A rede tambm permitiu que se fizesse pesquisas militares nas universidades e que os militares se comunicassem, tanto entre si como com outros, via e-mail. Com o tempo, a ARPAnet cresceu e se adaptou aos desenvolvimentos tecnolgicos. Como resultado grandes companhias construram redes baseadas na ARPAnet e se conectaram a ARPAnet, em especial a NSF (Fundao Nacional para a Cincia). O trfego cresceu tanto que a rede foi dividida em militar e civil. Com a descentralizao ela se tornou uma vasta rede de companhias, universidades, individuos, pesquisadores e governo, ou seja, qualquer pessoa que dispusesse de um computador poderia se conectar. Antes era chamada de NSFnet e em 1987 passou a se chamar Internet. Hoje diversos grupos orientam o crescimento da Internet, como o W3C, World Wide Web Consurtium, que orienta os padres de evoluo; o InterNIC, fundado pela Fundao Nacional de Cincia, que controla o Sistema de Nomes de Domnio; etc. Mas isto no quer dizer que estas empresas controlam a Internet, elas orientam seu crescimento e ajudam, como outras, a coordenar. No incio, foi o governo federal, as agncias de pesquisas, os laboratrios e as universidades que deram forma a Internet. Mais recentemente, so os interesses comerciais que tm determinado a forma de sua infra-estrutura. Para solucionar problemas como nomes de domnio, velocidade, etc., e j est funcionando a "Internet 2". Uma rede altamente veloz que est sendo utilizada somente por alguns orgos governamentais e Instituies de nvel Superior Federal. Normalmente, para ns pobres mortais, a velocidade de conexo chega a 56 Kbps. Na Internet 2 a velocidade de conexo pode chegar a 2,4 Gigabytes por segundo. Velocidades de conexo deste tipo tambm so utilizadas por usurios, felizardos, que possuem cable modem. Onde provedores como o Ajato j operam em So Paulo e Rio de Janeiro.

EXERCCIOS
1. Defina Internet e redes locais. 2. O que uma rede comutada? 3. Conceitue: A. B. C. D. Backbone Hub Roteador Repetidor

4. De forma simples e concisa mostre como funciona, de maneira geral, o envio de informaes pela Internet. 5. O que uma Intranet? 6. Se estiver trabalhando em uma Intranet em uma empresa poder ter acesso a Internet? 7. O que uma Extranet?

ANOTAES

1 PARTE

CAPTULO 2
Este captulo tratar : 1. 2. 3. 4. 5. 6. O que necessrio para se criar pginas para a Web. A diferena entre pginas Web, Home Page e apresentao Web Navegadores O que site, Host, Provedor e Servidor Web Protocolos Servios oferecidos na Web

A WORLD WIDE WEB

A Web um conjunto de documentos acessveis por meio da Internet. Esses documentos (ou pginas Web) contm uma tecnologia chamada hipertexto. Onde voc poder percorrer partes do documento e outros documentos atravs de pontes chamadas de links. A quantidade de informao que est disponvel no universo da Internet mais do que voc poderia assimilar durante uma vida inteira, e ela se encontra das mais variadas formas. Podendo se perder facilmente. Assim muito importante o sistema de navegao, ou seja, a forma como as informaes esto dispostas. Poderia descrever a World Wide Web como um sistema de informao em hipertexto, grfico, distribudo, independente de plataforma, dinmico, interativo e global, utilizado na internet. O hipertexto permite que voc leia um texto e navegue por ele e por informaes visuais de forma no-linear, com base nas informaes que deseja obter em seguida. A Web fornece recursos de imagens e animao fantsticos. independente de plataforma pois voc pode acessar as informaes disponveis na Web igualmente bem a partir de qualquer computador, sistema operacional e monitor de vdeo. Como o volume de informaes muito grande ela distribuda por diversos sites (um Site da Web um local que divulga algum tipo de informao. Quando voc exibe uma pgina Web, o seu navegador se conecta a esse site da Web para obter essas informaes). Estas informaes contidas nestes sites so encontradas atravs de URLs (endereo na internet). A Internet ainda interativa, ou seja, ela interage com o usurio. No como a TV.

1. HOME PAGE, PGINA WEB, SITE E APRESENTAO WEB?

Vamos entender melhor o cada termo deste quer dizer, j que os pronunciamos tantas vezes acima.

Uma pgina Web um elemento especfico de uma apresentao da Web que est contido em uma estrutura. A primeira pgina de uma apresentao chamada de home page. Uma apresentao da Web um conjunto de pginas Web estruturadas sobre um determinado contedo, este contedo aquilo que voc est colocando na Web. Informaes, texto de fico, imagens, ilustraes, programas, textos humorsticos, diagramas, jogos, etc. Tudo isso contedo. Esta apresentao, como outras, ficam armazenadas em um local chamado Site. O Site hospedado por computadores conectados permanentemente a Internet e recebem o nome de Host. Para entrar na net preciso fazer uma conexo direta ou usar o computador Host. O provedor de servios Internet (ISP) atua como o computador Host (aquele computador que fica conectado permanentemente na Internet para lhe prover o acesso a mesma). ISP uma empresa que fornece o gateway necessrio para acessar a Internet. Os ISPs podem ser de vrios tipos, oferecendo diversos nveis de servio: Acesso indireto Voc obtm acesso atravs de um servio on-line, como UOL, SBT On-Line e STI, entre outros, no Brasil. necessrio ser membro do servio. A vantagem que estes servios facilitam a navegao, oferecendo mecanismos de pesquisa personalizados e vnculos que levam a locais interessantes na Web. A desvantagem que acessar um servio on-line por meio da Internet consome mais tempo do que adotar um caminho mais direto. Acesso discado A conexo feita atravs de um modem. O ISP age como seu gateway para a Internet, mas no fornece servios alm de correio eletrnico e acesso Internet. A vantagem o menor esforo para navegar e colher informaes. A desvantagdem so os servios de viagens, games e grupos de bate-papo entre os membros. Conexo Permanente Funciona por meio de uma rede de uma empresa. Nesse caso, a rede conectada diretamente Internet pelo gateway. Voc efetuar um logon para entrar na rede da empresa e poder acessar a Internet. A vantagem a

quantidade de servios oferecidos e a desvantagem a questo da segurana e o valor pago ao ISP pelos servios.

Como se cria uma pgina web?

Uma pgina Web composta de textos e comandos especiais (tags) de HTML, um acrnimo de Hypertext Markup Language. Essa linguagem bastante simples e tem como finalidade bsica formatar o texto exibido e criar ligaes entre as pginas da Web, criando assim documentos com o conceito de hipertexto. Para que o contedo de um documento HTML possa ser formatado e exibido na Internet demos usar um programa chamado browser, o navegador. Ele l o contedo do arquivo, interpreta os comandos e exibe sua pgina. Como j foi citado acima, existem diversos tipos de browsers disponveis no mercado. O cdigo pode ser escrito usando o mais simples editor de texto, como o bloco de notas do Windows. Porm a forma mais prtica e produtiva utilizar um editor HTML. H vrios no mercado como: HotDog Professional (www.sausage.com), o SiteAid (baixado do site www.siteaid.com), o FrontPage da Microsoft, etc.

preciso estar conectado para visualizar a pgina que criei?

No, o browser funciona independente de se estar conectado a Internet. A melhor forma de se trabalhar desenvolvendo uma pgina HTML off-line, desconectado. Primeiro voc cria as pginas em seu computador e as testas por meio do browser. Depois, deve coloc-las em um servidor Web para que outras pessoas tambm possam visualiz-la.

2. OS NAVEGADORES
Para visualizar toda informao disponvel na Internet necessrio um Browser, navegador. H vrios disponveis no mercado. Os mais conhecidos so o Internet Explorer e Netscape Navigator. Os navegadores podem acessar vrios tipos de dados, no s do protocolo FTTP mas tambm FTP, Golpher, Usenet News, Telnet, etc. O que um navegador faz com maior freqncia lidar com a formatao e a apresentao de documentos da Web. Cada pgina um arquivo, criado em uma linguagem denominada HTML, que contm o texto da pgina, sua estrutura e

vnculos para outros documentos, imagens ou outros meios. A recuperao de documentos a partir da Web e a formatao desses no seu sistema so as duas tarefas que compem a base da funcionalidade de um navegador.

3. SERVIDOR WEB
Para exibir pginas na Web e navegar por elas, voc precisar apenas de um navegador da Web. Para divulgar pginas na Web, voc precisar, na maioria dos casos, de um servidor Web. Servidor Web o programa que executado em um site da Web e que responsvel por atender s solicitaes de arquivos feitas pelo navegador da Web. Voc precisar de um servidor Web para divulgar documentos na Web.

4. PROTOCOLOS INTERNET
Para que os computadores se comuniquem eles precisam seguir conjuntos de regras chamados protocolos. As pessoas que desenvolvem essas regras no foram apenas inteligentes; elas criaram nomes interessantes, como Golpher (esquilo) e World Wide Web (teia mundial). Os extensos nomes descritivos e geralmente difceis de lembrar foram reduzidos a acrnicos como HTML. Internet Protocol (IP) Este um dos protocolos mais bsicos. O IP o sistema que define o "local", ou endereo IP, das redes que compem a Internet. E um certo sentido, o IP forma o "mapa" da Internet e cada rede pode ser contatada em um ponto localizado nesse mapa. Transmission Control Protocol (TCP) TCP o protocolo que define a estrutura dos dados transmitidos que j foi explicado num captulo anterior, n 01. File Transfer Protocol (FTP) Protocolo desenvolvido para a transmisso de mensagens longas entre duas pontas. Hypertext Markup Language e Hypertext Transfer Protocol (HTML e HTTP) Juntos eles comandam a WWW, World Wide Web. O HTML define um mtodo de incluir formatao em arquivos de texto para que, quando exibidos com um browser. O HTTP define a maneira como os arquivos HTML devem ser enviados e recebidos.

Telnet Um protocolo que define como um computador pode atuar como um terminal em outro. Usando um programa Telnet, possvel se conectar a outro computador e executar programas nele, como se estivesse sentado diante de sua prpria mquina. Gopher Os servidores que usam protocolo gopher apresentam seu contedo na forma de submenus. NNTP (Network News Transfer Protocol) Servidores UseNet armazenam mensagens e as encaminham usando o protocolo NNTP. Vrias pessoas podem ento ler notcias como o Outlook Express News.

EXERCCIOS
1. O que um browser? E um editor HTML? 2. Defina: a) Site b) Home Page c) Pgina Web d) Apresentao Web e) Servidor Web f) Provedor g) Host 3. O que o protocolo TCP/IP? E por que ele to importante? 4. Que programas so necessrios para se criar uma pgina HTML? 5. Qual a importncia de um servidor Web? 6. Defina as formas de acesso e faa comentrios das vantagens e desvantagens de cada caso.

ANOTAES

2 PARTE

CAPTULO 3
Este captulo tm como objetivo: Organizao do contedo F. Formas de navegao G. Storyboard H. Diagramao
E.

ORGANIZAO E NAVEGAO

1. O QUE PRETENDE DIVULGAR?

Que tipo de contedo voc pode apresentar na Web? Praticamente o que quiser. Eis aqui alguns tipos de contedo mais comuns na Web, no momento: Informaes pessoais: informaes sobre voc, por exemplo. Hobbies ou interesses especiais: filmes, motocicletas, etc. Publicaes: como jornais, revistas. Perfis de empresa: o que uma empresa faz ou vende, etc Documentao On-line: desde manuais, guias de treinamento, dicionrios, etc. Catlogos de compras: comercializao de artigos. Lojas on-line. Pesquisas de opinio: a interatividade com o usurio atravs de formulrios, caixas de sugestes, etc. Educao On-line: numerosas universidades, escolas e empresas particulares oferecem o ensino a distncia atravs da Web.

O nico limite da Web a sua prpria vontade. Por isso, se a sua idia no estiver nesta lista ou parecer meio maluca ou ainda no estiver amadurecida, pare e navegue um pouco pela Internet. Com certeza encontra excelentes idias e poder amadurecer as suas e ter muitas outras.

2. ESTABELEA SEUS OBJETIVOS!

Voc deve se perguntar os que seus leitores procuram? O que deseja realizar com sua apresentao? Eles lero a pgina inteira ou apenas uma parte dela? Antes de comear entrar com cdigos ou imagens voc deve pensar o que quero colocar em minha pgina? Como ser estruturada? Ela est adequada ou no ao meu pblico alvo? Os objetivos no precisam ser grandiosos, mas a determinao ir ajud-lo a elaborar, organizar e codificar suas pginas com uma maior probabilidade de sucesso.

Caso v desenvolver uma apresentao Web para uma empresa ou pessoas importante que voc colha junto ao seu cliente seus objetivos, idias, a forma que imagina sua pgina, etc. Assim, ficar bem mais fcil de comear seu trabalho.

3. DIVIDA SEU CONTEDO EM TPICOS

Crie uma lista com os principais tpicos, a princpio no importa a ordem. Esta uma forma de comear a se organizar. Sua lista poder Ter quantos tpicos desejar, mas se perca listando uma quantidade enorme de tpicos (seu leitor poder se cansar e se perder em meio a tantas opes).

4. ORGANIZAO E NAVEGAO
Aqui descreverei algumas das estruturas e caractersticas e ainda consideraes importantes como: navegao e suas

Os tipos de informao que se adaptam melhor a cada estrutura. Como os leitores conseguem se deslocar pelo contedo de cada tipo de

estrutura para encontrar as informaes de que precisam .

Como Ter certeza de que os leitores conseguem se localizar nos seus

documentos (contexto) e achar o caminho de volta at uma posio conhecida. Ao ler esta parte reflita como suas informaes se encaixaria em cada uma. Voc poder combinar, at mesmo, duas estruturas e criar uma nova forma de navegao.

FORMAS DE ORGANIZAO

1. HIERARQUIAS
A maneira mais fcil e mais lgica de estruturar os seus documentos. As hierarquias e os menus adaptam-se especialmente bem aos documentos on-line e de hipertexto. Exemplo: sistemas de ajuda.
HOME PAGE

Em uma organizao hierrquica, fcil para os leitores descobrir a posio em que se encontram na estrutura. Nas hierarquias, a home page fornece uma viso geral do contedo que est subordinado a ela e ainda define os principais vnculos s pginas dos nveis inferiores da hierarquia. Este tipo de estrutura oferece um risco mnimo de ficar perdido, alm de ser uma forma mais fcil de localizar informaes. Mas procure no incluir muitos nveis para no aborrecer os leitores. Pois estes, aps ter de selecionar opes em muitos menus, acaba esquecendo o que estava procurando. Fica aborrecido demais para prosseguir. Procure manter apenas dois ou trs nveis na sua hierarquia.

2. LINEAR
Muito semelhante a forma como so organizados documentos impressos. Neste tipo de estrutura a home page o ttulo, ou introduo, e todas as outras pginas acompanham-na em seqncia com vnculos que levam de uma pgina a outra, normalmente com opes de avanar e retroceder. Uma organizao linear muito rgida e limita tanto a liberdade dos seus leitores de consultar as informaes quanto a sua prpria liberdade de apresentlas. As estruturas lineares so ideais para apresentar, no ambiente on-line, um material que j tenha esse tipo de estrutura no ambiente off-line. Como por exemplo: instrues passo-a-passo ou treinamento baseado em computador.

3.

ESTRUTURA LINEAR COM ALTERNATIVAS

Voc pode tornar a estrutura linear menos rgida permitindo que o leitor se desvie do caminho principal. Pode ter, por exemplo, uma estrutura linear com ramificaes alternativas que partam de um nico tronco. As ramificaes podem se reunir ao tronco principal em algum ponto mais adiante, em um nvel mais baixo da estrutura, ou continuar se ramificando em nveis inferiores seguindo caminhos prprios at chegar a um "fim". Alm de ramificar a estrutura linear, voc pode tambm oferecer vnculos que permitam aos leitores avanar ou retroceder na cadeia, caso precicem rever alguma etapa ou j conheam alguma parte do contedo.

4. COMBINAO DAS ESTRUTURAS LINEAR E HIERQUICA

Uma forma comum de organizar um documento na Web consiste em obter uma combinao das estruturas linear e hierrquica. Essa estrutura combinada ocorre com maior freqncia quando documentos de estrutura rgida, porm lineares, so apresentados no ambiente on-line. Um exemplo so os famosos FAQ ( Frequently Asked Questions). A combinao de documentos lineares e hierrquicos funciona bem desde que haja pistas em relao ao contexto. Como essa uma estrutura linear e hierrquica, em cada pgina do roteiro voc deve oferecer vnculos para o leitor avanar, retroceder, retornar ao incio e subir um nvel.

O STORYBOARD

A prxima etapa do planejamento da sua apresentao da Web consiste em determinar o contedo que ser apresentado em cada uma das pginas e criar alguns vnculos simples que possibilitem a navegao por essas pginas. O StoryBoard de uma apresentao um conceito emprestado do cinema, em que cada cena e cda tomada de cmera esboada na ordem em que ocorre no filme. O storyboard fornece uma estrutura e um plano globais para o filme, que permitem que o diretor e sua equipe tenham uma idia clara de onde cada tomada se encaixa no filme. O uso de storyboard, uma tcnica cinematogrfica, consiste no processo de criao de um resumo com sketh (rascunho) da aparncia final do seu trabalho antes de voc efetivamente pr em prtica suas idias. O uso de storyboard ajuda-o a visualizar a apresentao como um todo e a prever sua forma final. Esta tcnica fornece um esboo geral de como a apresentao Web ir ficar quando estiver pronta, indicando os tpicos que sero includos em cada pgina, os vnculos bsicos e talvez at mesmo uma idia conceitual do tipo de imagens grficas que voc usar e onde elas sero apresentadas. No caso de grande documentao, o storyboard dever ser dividido em reas e cada equipe cuidar da parte que lhe cabe. Para estruturas muito pequenas talvez no seja necessrio criar um storyboard.

DICAS PARA SEU STORYBOARD

1. Coloque

cada tpico em uma pgina, mas se tiver um grande nmero de tpicos, a manuteno e vinculao pode se tornar maante. 2. Defina bem a forma de navegao entre as pginas. Se houver formas alternativas, torne a navegao para os leitores a mais intuitiva possvel. 3. Tome cuidado com o que ser incluindo na home page, lembre-se, ela ser a porta da sua apresentao. 4. Tenha sempre em mente seus objetivos. Procure no se distanciar deles.

DIAGRAMAO
A disposio de imagens, textos, vdeos, etc. Tudo que voc deseja colocar em sua pgina precisa ser colocado de forma agradvel ao leitor. Da abordarmos, de forma geral, a diagramao. Esta palavra vm do mundo dos impressos. Tratase da disposio de elementos que compem uma pgina. Deve ser observado o tamanho das fontes, disposio das imagens, forma como o texto ser apresentado, etc. Uma boa diagramao tambm garante o retorno do internauta.

EXERCCIOS
8. 9. 10. 11. 12.

Por que to importante, antes de comear a construir uma apresentao Web, definir objetivos e tpicos? O que mais necessrio? Descreva cada forma de organizao de pginas citada acima. Faa uma observao sobre o que voc compreendeu de cada uma. O que storyboard e qual a sua utilidade? Em que casos aconselhvel usar o storyboard? Vamos comear a planejar sua Home Page pessoal. Pense no que gostaria de colocar em suas pginas, se haver links para outras partes da mesma pgina e os links para outras pginas, quais os tpicos abordados, etc. Faa um storyboard da sua apresentao web.

ANOTAES

2 PARTE

CAPTULO 4
Este captulo tm como objetivo: 1. 2. 3. 4. Tratar das etapas do projeto de um Website Quais os profissionais envolvidos Administrao do site Dicas para no cometer erros graves na hora de projetar e construir um Website

PROJETO DE WEBSITE

1.HIPERTEXTO
a utilizao da HTML como linguagem para desenvolvimento da sua pgina. Domin-la importante para um bom desenvolvimento do seu projeto.

2.WEB DESIGN E VISO DO PROJETO

A maioria das pessoas associam Design unicamente ao projeto grfico de um WebSite, o que um erro. O conceito de Web Design envolve todos os aspectos da construo de um site, desde o desenho de sua estrutura de navegao e forma de disponibilizao da informao at o desenvolvimento do projeto grfico. A construo de um Website deve, antes de mais nada, ser entendida como um projeto, composto de fases e desenvolvido por pessoas de backgrounds diferentes.

3.CONTEDO E FORMA
O que faz uma pessoa entrar em um site? O faz a pessoa querer retornar? Estas perguntas devem sempre estar na cabea das pessoas de uma equipe de construo de sites. A primeira muito relaciona-se ao pblico alvo. Para qual tipo de pblico voc est disponibilizando informao? Quais so as prioridades e interesses deste pblico? Que tipo de conexo mais usada por ele?

As respostas para a segunda pergunta certamente envolvem trs pontos: o 1 o contedo. o elemento central. O 2 ponto o design do site (estrutura de navegao e projeto grfico). Estruturar a informao de forma que a navegao seja o mais intuitiva possvel faz com que sua apresentao Web tenha muito mais chance de sucesso, considerando o tipo de informao disponibilizada conforme seu pblico alvo. Outro ponto a atualizao para que no perca uma das principais caractersticas da Internet: a dinamicidade.

4.EQUIPE PARA CONSTRUO DE UM WEBSITE

A construo de um Website exige uma equipe com backgrounds diferentes. A equipe de profissionais adequada seria composta: a) Analistas de sistemas (com experincia em gerncia de Informao), responsvel pela organizao da informao; b) Design Grfico, responsvel pelo projeto grfico; c) Programadores, que, dependendo do tipo de site, podem ser programadores HTML, Java, JavaScript, CGI, etc; d) Assistentes, que auxiliam o trabalho do Analista de sistemas ou do Design Grfico (ilustradores, digitadores, etc.). A equipe dever ter um coordenador, responsvel em fazer o trabalho fluir de forma eficiente, dentro de um cronograma aproveitando o mximo de cada profissional. Depois do site construdo surgir uma outra pessoa: o WebMaster, que ser responsvel pela administrao do site. muito haver o acmulo de funes por membros da equipe. Mas importante definir o papel de cada na construo do site.

FASES NA CONSTRUO DE UM WEBSITE

1 Fase : Organizao da Informao

A primeira etapa a organizao da informao que ir compor seu site. O Analista de sistemas dever colher toda informao e analisa-la, preparando-a para a etapa seguinte, onde se iniciar o design do site. Critrios de avaliao das informaes: Qualquer documento pode ser disponibilizado atravs da Web mas alguns se tornam mais teis quando adequados as novas caractersticas dessa nova mdia. Aqui esto alguns dos critrios que devero ser observados para o projeto do site: 1. Material que tire vantagem da estrutura no linear de navegao do hiperdocumento. Ex.: manuais, guias, grandes bases de dados textuais, etc...; 2. Material que mais valoroso se atualizado freqentemente e mais facilmente, ex.: agenda de reunies, agenda telefnica, calendrios, etc ...; 3. Material que possa ser totalmente substitudo por uma impresso, ex.: grficos e textos (imagens de alta qualidade no so recomendveis); 4. Material que requer intercmbio de informaes, ex.: formulrios de pesquisa, fichas de inscrio, etc ...

2 Fase : Conceituao do site e definio da estrutura de navegao

Normalmente nesta etapa envolve uma ou mais reunies de criao. Todos os membros da equipe devem participar das reunies de criao, cujo objetivo obter o maior nmero de idias possveis para a criao da estrutura de navegao e do projeto grfico. O Coordenador da equipe, o Design Grfico e o Analista de Sistemas, com suas respectivas vises de projeto, coordenam essas reunies, para que as sugestes de reas diferentes possam se integrar. Uma vez discutidas e analisadas todas as sugestes de reas diferentes possam se integrar. Uma vez discutidas e analisadas todas as sugestes, pode-se ento, criar a estrutura de navegao. Nesta etapa, desenhar fluxogramas de navegao, mostrando como as pginas esto linkadas (conectadas) entre si, ajudar a Ter uma viso geral do site. No futuro, isso facilitar tambm o processo de modificar, acrescentar ou retirar pginas.

3 Fase: Montagem do Site

Uma vez definida a estrutura de navegao, os membros da equipe podero ento trabalhar cada um em sua rea: o Design Grfico e seus Assistentes desenvolvero o projeto grfico, enquanto o Analista de Sistemas e programadores montaro a estrutura de navegao (seja em HTML, Java, JavaScript ou no que tiver sido escolhido como mais adequado para a construo do site).

4 Fase: Testes
Antes de ser disponibilizado para o pblico em geral importante testar a navegao de todo o site, checando os links de texto e imagens. importante entrar no site a partir de vrias plataformas e conexes diferentes, para testar a velocidade de carga e consertar falhas de diagramao, que pode mudar, de acordo com o tamanho de monitor e resoluo usada.

DICAS E CONSIDERAES IMPORTANTES

I. Na criao do projeto grfico, tente sempre optar por solues que melhor se adaptem a plataforma mais usada. Por exemplo: monitor 14 polegadas com resoluo de 640x480, faa com a melhor diagramao das pginas acontea quando o site visto nesse tipo de monitor e resoluo. Caso o seu site deva ser diagramado para uma resoluo ou tamanho de monitor diferentes do mais usado, informe no site.

J.Num projeto grfico deve sempre se perguntar se sua apresentao ficou adequada ou no ao que seu cliente desejava e ao seu pblico alvo. K. Para ter uma garantia que suas imagens sero sempre bem visualizadas, procure trabalhar com imagens paletizadas (formato .gif). O melhor resultado para isso ser trabalhar suas imagens em RGB e depois indexlas com o menor nmero de cores possvel. Caso precise utilizar imagens True Color, salve-as em formato .jpeg, que resultar em arquivos pequenos. L. Sempre indique em que browser sua pgina ser melhor visualizada. M. A pgina de entrada de um site muito importante. Ela deve ser projetada de forma que diga a que o site se destina, seja de forma textual, visual ou estrutural. N. O contedo e forma como ele apresentado sero os principais atrativos de suas pginas, a no ser que o ponto chave sejam as imagens. Por isso, no pense que a net igual a outras mdias. O. Direitos autorais: A proteo de direitos autorais no costuma ser muito evidente na Web. O desejo original de uma pgina no protegido. Mas qualquer texto, grfico, vdeo ou udio originais deve ser protegido. Um link ou URL no protegido mas uma lista de links(como no caso das bibliotecas virtuais) deve ser protegido pelos direitos autorais. P.A netiqueta e Domnio pblico: A Web foi criada com base em ser capaz de atar links de hipertexto de qualquer outra localizao da rede. Consequentemente, quando voc disponibiliza um site, implica em voc permitir a outros "linkar" sua pgina de Web, porm a netiqueta recomenda que se pea permisso aos Webmasters sempre que possvel.

ADMINISTRAO DE UM SITE

Todo WebSite deve ter um Webmaster, ele a autoridade mxima no site e coordena tanto seu desenvolvimento quanto sua manuteno alm de responder a toda correspondncia enviada ao site. Seu endereo eletrnico deve ser divulgado na primeira pgina e em todas as outras que exijam um processo interativo.

1. DIVULGAO
Com o potencial de audincia de milhes encontrados na Internet necessrio utilizarmos todos os recursos disponveis nesta para conseguirmos atingir uma audincia chave. As principais formas de divulgao on-line so: a) E-mail: o envio de propaganda no solicitada pela Internet uma prtica no recomendada. b) Search engines: as informaes de seu site devem ser organizadas da melhor forma possvel para a captura pelos inmeros recursos de busca existentes na rede. c) Banners: trata-se de uma tarja com informaes promocionais sobre seu site que deve aparecer estrategicamente localizada nas pginas de sites que vendem espao publicitrio. So na verdade imagens clicveis para o site em promoo.

2. ESTATSTICAS
Mostram as pginas mais visitadas, horrios mais visitados, dias mais visitados, etc. Assim possvel definir o perfil do usurio e desta forma atualizar o site de forma a atrair sempre o maior nmero de visitantes.

3. CHECAGEM DE LINKS
importante estabelecermos uma rotina peridica tanto para checagem dos links internos de sua pgina quanto para os externos. Essa rotina pode ser manual ou automatizada dependendo do tamanho de seu site. Existem softwares especficos para essa tarefa.

4. ORGANIZAO DE ARQUIVOS E DIRETRIOS

Os diretrios devem ser estruturados de acordo com a prpria estruturao da informao. Se as informaes esto estruturadas por mdulos e submdulos estas geraro diretrios e subdiretrios. Em um ambiente Unix o arquivo principal de cada mdulo deve ser sempre chamado de "index.html", inclusive o arquivo correspondente a primeira pgina do site (home). Isto, porque, quando chamarmos o endereo da pgina no precisaremos escrever o nome do arquivo. O sistema assume o arquivo "index.html" como "default" para a pgina principal. Os arquivos e diretrios devem ter nomes que identifiquem seu contedo e as imagens devem ser colocadas em um diretrio especfico. A cada nova atualizao uma cpia backup da verso anterior de cada arquivo atualizado deve ser feita.

EXERCCIO
7. O que um WebDesign? 8. Quais as principais preocupaes no projeto de um WebSite? 9. Quais seriam os profissionais indicados para se compor uma equipe para
projetar e construir um site? 10. Quais as fases na construo de um site? D as caractersticas e faa observaes suas para cada uma. 11. Qual o melhor formato de arquivo para se trabalhar com imagens?

12. 13.

Quem responsvel pela administrao e atualizao de um site? Quais as formas de divulgao de um site?

ANOTAES

3 PARTE

CAPTULO 05
Este captulo abranger : 5. Uma linguagem de marcao: HTML. 6. Tags ou comandos 7. Elementos que compem uma pgina HTML

HTML: UMA LINGUAGEM DE MARCAO

A HTML uma linguagem de marcao. Criar um documento em uma linguagem de marcao significa que voc comea com o texto da sua pgina e inclui tags especiais no incio e no final de determinadas palavras ou pargrafos. As tags indicam as diversas partes da pgina e produzem diferentes efeitos no navegador.

Os arquivos recebem a extenso .html e possuem como cone a seguinte imagem: O cone a esquerda pertence ao Netscape e o a direita ao Internet Explorer 5. A primeira pgina a ser exibida geralmente recebe o nome de index.htm ou .html, dependendo do provedor que hospeda a pgina. As tags normalmente so especificadas em pares, delimitando um texto que sofrer algum tipo de formatao. As tags so identificadas por estarem entre os sinais < > e < / >. Entre os sinais < > so especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalizao deve ser feita usando-se a barra de diviso /, indicando que a tag est finalizando a marcao de um texto. O formato genrico de uma tag : <nome da tag> texto</nome da tag> Mas algumas tags no possuem finalizao.

Vejamos agora alguns comandos e o tipo de efeito que estes causam ao texto quando interpretados pelo browser. Assim como outras linguagens, a HTML possui uma estrutura bsica para seus programas. Para que um browser interprete corretamente o programa, ele deve possuir alguns comandos bsicos que sempre devero estar presentes. Alguns browsers at dispensam seu uso, porm melhor assumir como parte fundamental do programa tais comandos. Um programa HTML possui trs partes bsicas, a estrutura principal, o cabealho e o corpo do programa. Todo programa deve iniciar com o comando, tag, <html> e ser encerrado com o comando </html>. Esse par de comandos essencial. A rea de cabealho opcional e delimitada pelo par de comandos <head> e </head>. Estes comandos para cabealho so usados para especificar alguns poucos comandos da linguagem. Eles so opcionais, ou seja, um programa HTML pode funcionar sem eles. Mas conveniente us-los, pois o ttulo da pgina acrescentado atravs deles.E ainda temos as tags <Title> e </Title>, estes comandos delimitam o texto que ir aparecer na barra de ttulo do browser. A maioria dos comandos ser especificado no corpo do programa que delimitado pelas tags <body> e </body>. um comando obrigatrio. <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML>

<HTML> </HTML> <HEAD> </HEAD>

Esta tag marca o incio do programa HTML Esta tag marca incio e fim de cabealho

<TITLE> </TITLE> Esta tag delimita o texto que ir ser visualizado na barra de ttulo do browser. <BODY> </BODY> Esta tag delimita o corpo do programa, aonde a maior parte do comando sero colocados

1. OS PRINCIPAIS ELEMENTOS DE UMA PGINA HTML

Uma pgina HTML composta basicamente de ttulos, textos, pargrafos, imagens e links, responsveis pela chamada de outras pginas para a tela. Todos esses elementos so posicionados na pgina por meio de comandos especficos da linguagem. TTULO o texto que aparece na barra de ttulo do browser. IMAGEM So figuras, desenhos e fotos usados para ilustrar a pgina. TEXTO a informao mais comum dentro da pgina. Pode ser formatado atravs de vrios comandos. LINK um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no link, o browser acessa outra regio da pgina atual ou uma pgina localizada em qualquer lugar da Internet. Uma figura tambm pode ser usada como um link, ou seja, clicando na figura saltamos para outro local. CABEALHO So linhas de texto com tamanhos especiais. Existem seis tamanhos prefixados de cabealho.

TTULO

IMAGEM

CABEALHO

TEXTO

LINK

2. TTULO
O ttulo de uma pgina web indica qual o assunto abordado e ir aparecer na barra de ttulo do browser. Este ttulo utilizado por programas de lista (hotlist) do seu navegador e tambm por outros programas que catalogam pginas da Internet. Para atribuir um ttulo a pgina voc dever utilizar a tag: <Title> </Title>. Esta tag sempre ser includa no cabealho (entre as tags <Head> </Head> e descrevem a mesma). Consideraes sobre o ttulo:

Q. Voc poder ter apenas um ttulo R. texto dever ser simples e no poder ter outras tags S. Escolha um texto curto e que descreva o contedo da pgina

3. CABEALHOS
Os cabealhos so usados para dividir sees do texto, como captulos de um livro. A HTML divide seis tamanhos de cabealhos, de H1 a H6, que aplicam um tamanho de fonte diferenciado no texto que envolvem, uma linha antes e depois e alm disso do um efeito de negrito. O maior tamanho o H1 e o menor o H6. <H1> Texto </H1> Experimente o seguinte cdigo: </html> <head><title>Cabealhos</title></head> <body> <h1>C</h1> <h2>A</h2> <h3>B</h3> <h4>E</h4> <h5></h5> <h6>A</h6> <h5>L</h5> <h4>H</h4> <h3>O</h3> <h2>S</h2> </body> </html> Vejamos um exemplo de outro cdigo em HTML: <html>

<head><b> A FORMAO DE UM WEBMASTER</b></HEAD> <body> <p> A formao de um <i>Webmaster</i> envolve diversos conhecimentos.<br> Afinal, ele ser o responsvel pela administrao de um site. </body> </html>

tipos

de

Em nosso exemplo introduzi mais algumas tags. Os comandos:

<B> </B> <I> </I> <P> </P> <BR>

Aplica o estilo negrito ao texto Aplica o estilo itlico ao texto. Inicia um novo pargrafo. Faz uma quebra de linha.

4. PARGRAFOS
Para forar o incio de um novo pargrafo, ou seja, avanar uma linha em branco e iniciar o texto na Segunda linha aps o final do pargrafo anterior, deve ser usado o comando <p>. Esse comando pode aparecer individualmente ou em par: <p> </p>. Quando um comando <p> inserido em um local do programa, o browser ir sempre avanar uma linha em branco, posiciona-se na linha seguinte ao comando <p>.

5. QUEBRA DE LINHA
O comando <br> faz uma espcie de quebra de linha. Este comando inseri uma linha em branco no seu local ou na linha seguinte qual ele foi inserido, caso esteja no meio de uma linha e no em seu final. A funo deste comando avanar para a linha imediatamente aps aquela em que ele ocorre.

EXERCCIOS
1. Qual a extenso de um arquivo de um programa em HTML? 2. A primeira pgina de um site geralmente recebe que nome? 3. Escreva a estrutura bsica de um programa HTML. 4. Quais os principais elementos exibidos em uma home page? 5. O que link? 6. Qual as funo das tags abaixo: 13. <HTML> </HTML> 14. <HEAD> </HEAD> 15. <TITLE> </TITLE> 16. <H2> </H2> 17. <BODY> </BODY> 18. <B> </B> 19. <I> </I> 20. <P> 21. <BR> 7. Utilize o que voc j aprendeu nesta seo e crie seu primeira pgina HTML. Use a linguagem HTML e faa uma pgina falando das suas expectativas para este curso, como pretende usar o conhecimento que est adquirindo e quais outros cursos que pretende fazer. Seu texto deve ter no mximo 5 linhas. Salve na unidade A: com o nome de projetos.html. 8. Faa um pgina utilizando os comandos que voc j conhece para falar sobre uma pessoa. Pode ser algum que voc admire, do seu crculo de amigos, ou uma pessoa pblica (ator, atriz, etc). Seu texto deve ter no mximo 5 linhas. Salve na unidade A: com o nome de Pessoa admirvel.html.

ANOTAES

3 PARTE

CAPTULO 06
Este captulo abranger : 8. Tags de formatao de texto lgicas e fsicas 9. Texto pr-formatado 10. Endereos, citaes e comentrios

AG8 Informtica

TAGS DE FORMATAO

Assim como em um editor de texto, em HTML voc poder utilizar efeitos em seu texto. Como j percebeu os comandos, tags, trabalham em continer. Alguns destes comandos j foram introduzidos no captulo anterior. Os principais comandos de estilo:

TAG STRONG TYPERWRITER BIG SMALL SOBRESCRITO SUBESCRITO BLINK NEGRITO ITLICO SUBLINHADO

SINTAXE <strong>texto</strong> <tt>texto</tt> <big>texto</big> <small>texto</small> <sup>texto>/sup> _texto <blink>texto</blink> <b>texto</b> <I>texto</I> <u>texto</u>

FUNO Similar ao negrito Deixa o texto com espaamento regular Aumenta a fonte e aplica negrito Reduz e altera a fonte Eleva o texto e diminui seu corpo Rebaixa o texto e diminui seu corpo Faz com que o texto pisque Aplica o estilo negrito Aplica o estilo itlico Aplica um sublinhado (em alguns browsers esta tag no funciona)

Estes so os mais utilizados, porm h outros que merecem ateno. Para alterar a formatao de um texto em HTML existem dois tipos de estilos que devem ser observados: o estilo lgico e o estilo fsico.

1. ESTILO LGICO
29

AG8 Informtica

As tags deste tipo indicam como o texto destacado deve ser utilizado e no como ser apresentado. Este estilo no indica como o texto ser formatado e sim como ser utilizado no documento. No possvel garantir que um texto destacado que utilize tags deste tipo sempre ser apresentado em negrito ou itlico, por exemplo. Depender do browser. Algumas tags de estilo lgico utilizadas em HTML padro: <EM> Indica que os caracteres devero ser enfatizados de alguma forma. De forma diferente do restante do texto. Geralmente em itlico <STRONG> Esta tag enfatiza ainda mais que a anterior. Em negrito. <CODE> Esta tag indica um cdigo de exemplo a ser exposto. <SAMP> Esta tag indica texto de exemplo. Quando voc quer dar um exemplo de endereo para a Internet sem criar link.

30

AG8 Informtica

2. ESTILOS FSICOS
Este estilo de tag realmente altera a formatao do texto, no estilo anterior voc no possui garantia que o texto ir ser visualizado da forma que planejou. Neste estilo ele ser visualizado da forma que atribuir as tags a ele. Algumas tags de estilo fsico para HTML padro:

<B> </B> coloca o texto em negrito <I> </I> coloca o texto em itlico <TT> </TT> fonte de mquina de escrever com espaamento uniforme. <u> </u> coloca o texto sublinhado <S> </S> coloca o texto tachado <BIG> </BIG> o texto ir aparecer maior que o restante ao redor <SMALL> </SMALL> o texto ir aparecer menor que o restante ao redor <SUB> </SUB> coloca o texto subscrito <SUP> </SUP> coloca o texto sobrescrito Optando por utilizar tags do estilo fsico, caso o navegador no reconhea uma das tags ele a ir substituir por outra equivalente ou ignorar a formatao.

31

AG8 Informtica

3. TEXTO PR-FORMATADO
O texto de uma arquivo em HTML formatado atravs das tags. Mas voc possui a opo da tag <PRE> </PRE> para estabelecer uma formatao atravs de um editor de texto e que esta formatao permanea na sua pgina html. O texto pr-formatado excelente para apresentar cdigo-fonte com seus espaamentos adequados. Este recurso pode ser utilizado para criar tabelas mas no recomendvel. Uma observao importante que, ao usar tags de estilo ou vnculo, no tags de elemento, neste espao elas iro funcionar normalmente. SINTAXE: <PRE> TEXTO TEXTO TEXTO </PRE>

4. CITAES E COMENTRIOS
A tag <BLOCKQUOTE> utilizada na criao de citaes longas que no devem ser aninhadas em pargrafos.. A tag <CITE> destaca citaes curtas. Um exemplo: <BLOCKQUOTE> "O mercado de webdesign um dos segmentos de design com maior potencial de crescimento para os prximos anos. Estima-se um crescimento de no mnimo 50% ao ano at 2005. E, na corrida rumo a esse novo eldorado, as agncias de propaganda mais uma vez largaram na frente dos escritrios de design, investindo primeiro em estruturas especializadas para atender demanda do mercado (...)". Maria Edicy Moreira. </BLOCKQUOTE>

32

AG8 Informtica
Visualizao no Internet Explore 5 Visualizao no Netscape 4.51

33

AG8 Informtica

Caso queira fazer comentrios a respeito do seu cdigo HTML apenas como referncia pessoal e no para ser exibido em suas pginas voc dever fazer o comentrio da seguinte forma:

<!- -comentrio- - >

5. ENDEREOS
Esta tag utilizada para identificar autorias de sua pgina. Geralmente so apresentadas na parte inferior de cada pgina. Mostra quem confeccionou aquela pgina, com quem o leitor deve entrar em contato caso queira ter alguma informao ou fazer alguma observao. Estes endereos so precedidos de um fio <hr>, que ainda veremos, e voc poder utilizar a tag <br> para separar linhas. <ADDRESS> TEXTO</ADDRESS> Vejamos um exemplo: <HR> <address> Cassia.teixeira@bol.com.br<br> A servio de Ag8 Informtica Ltda - Me<br> ltima atualizao: 10 de Janeiro de 2000<br> Todos os direitos autorais so reservados<br>

34

AG8 Informtica
</address> Esta uma excelente forma de garantir que as pessoas entrem em contato com voc caso necessitem e tambm uma forma de estar melhorando a sua HP (Home Page) atravs de sugestes.

6. A TAG <BLINK>
O texto que se encontrar entre estas tags ir aparecer piscando. Dependendo da verso do Netscape, esta tag somente ter efeito sobre o texto se ele estiver sendo visualizado atravs do Netscape, esse efeito ter uma dessas caractersticas: 22. texto ficar piscando em intervalos regulares 23. Um bloco cinza ou branco ficar piscando atrs do texto. Este recurso geralmente utilizado para chamar a ateno do leitor sobre uma determinada parte do texto. O problema do efeito piscando que ele chama ateno excessivamente sobre aquela parte do texto tirando a ateno do leitor do restante do texto. A maioria dos projetistas web consideram este efeito feio, desagradvel e irritante. Em HTML poderamos coloc-lo como se fosse passar a colher com bastante fora no fundo de uma panela de alumnio. J imaginou?

EXERCCIOS
6. Os comandos de formatao podem ser combinados para aplicar mais de um efeito ao mesmo tempo? 7. Coloque os comandos HTML abaixo para que o texto tenha o seguinte efeito: Tutorial de HTML 8. Crie uma pgina HTML sobre algo que goste de fazer, e que faa muito bem, e queira ensinar a outras pessoas. Um tutorial usando todas as tags vistas at ento. Utilizando principalmente todos os comandos de formatao. 9. Por que a tag Blink no bem aceita pela maioria dos projetistas de pginas Web? 10. Qual a utilidade da tag de pr-formatao e qual sua sintaxe? 11. Como devo utilizar a tag <ADDRESS> </ADDRESS> e qual sua finalidade?

35

AG8 Informtica

ANOTAES

36

FONTES

Para fazer alteraes no tamanho, tipo e cor da fonte de seu texto voc utilizar a tag <font> </font> que do tipo continer. Sua sintaxe a seguinte: <font size=" " face=" " color=" "> </font>

1. SIZE
O tamanho Size especifica o tamanho da fonte utilizada. Os valores permitidos vo de 1, o menor, a 7, o maior. O padro 3. Se for especificado um nmero antecedido com o sinal de adio ou subtrao o valor da fonte ser acrescido ou subtrado nesse valor. Vamos a um exemplo: se eu estiver trabalhando com uma fonte 5 e for especificado <font size=+2, o texto passar a ser exibido em 7. Se no houver sinal a fonte ser exibida naquele valor.

2. FACE
Esse parmetro permite que seja escolhida uma fonte diferente para o texto. Podem ser especificadas vrias fontes, de maneira que, se o sistema no possuir uma determinada fonte ele ir utilizar outra. Face="name [,name2[,name3]] Se no forem encontradas as fontes especificadas, ento, o texto ser apresentado na fonte padro. <font face="Agaramond, Arial" size=1>

3. COLOR
Este parmetro especifica a cor do texto. Seu valor ser especificado no formato hexadecimal, RGB ou atravs de um nome predefinido de cores.

Algumas cores:

COR
Aqua Black Fuchsia Green Brown Olive Silver White

CDIGO
#70DB93 #000000 #FF00FF #00FF00 #800000 #808000 #E6E8FA #FFFFFF Blue Cyan Gray Lime Navy Red Teal Yellow

COR

CDIGO
#0000FF #00FFFF #C0C0C0 #32CD32 #23238E #FF0000 #008080 #FFFF00

Vamos a um exemplo de cdigo: <html> <head> </title>Experincia com Fontes</title> </head> <body> <h2>Primeiro exemplo com tipos de fontes</h2> <font face="Agaramond"><p> Este texto ser exibido em Agaramond</font><br> <font face="Tahoma"><p> Este texto ser exibido em Tahoma</font><br> <font face="Arcane"><p> Este texto ser exibido em Aracane</font><br> <p> <h2>Exemplos com tamanhos diferentes de fontes</h2> <font face="Courier" Size=1> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=2> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=3> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=4> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=5> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=6> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=7> Este texto ser exibido em Courier</font><br><p> <p>

<h2>Agora iremos usar cores</h2> <font Face="Verdana" size=5 color="#800000"> Este o primeiro texto a ser modificado</font> </body> </html>

4. ALINHAMENTO
Pense no que alinhar um texto no Word ou no StarWrite. Pois ento voc sabe o que alinhar um texto. claro que voc no ir alinhar em HTML da mesma forma, ter que utilizar tags e parmetros para estas tags. Para alinhar um texto voc utilizar o atributo ALIGN com valores : LEFT (esquerda), RIGHT (direita), CENTER (centralizado) e JUSTIFY (justificado).

PARGRAFOS
O comando <p> inicia um novo pargrafo onde o texto automaticamente alinhado pela margem esquerda da tela. Caso voc deseje que seu novo pargrafo seja iniciado com um alinhamento diferente voc dever especificar na hora que incluir esta tag o atributo align. Vejamos um exemplo: <html> <head> <title>Alinhamento</title> </head> <body> <h1>MACROMEDIA FLASH</H1> <P ALIGN=JUSTIFY> A tecnologia Shockwave Flash, da Macromedia, j est presente na Web h alguns anos, e no ltimo no ganhou um forte impulso com a incluso do plug-in necessrio nos navegadores mais recentes (apartir do Internet Explorer 4 e Netscape Navigator 4.6). Cada vez mais utilizado, este programa j est sendo empregado em sites de grandes empresas. Seu poder se deve a sua grande capacidade multimdia e sua versatilidade. Sua finalidade a criao de imagens vetoriais com animao, som e interatividade.</p> <p align=center> Depois veremos mais sobre o Flash</p> </body> </html>

CABEALHO
Quanto ao cabealho voc s poder alterar o alinhamento para direita e centralizado, a esquerda alinhamento padro. Exemplo: <h2 align=center>Este um exemplo de cabealho com alinhamento</h2> Vamos ao cdigo-fonte para verificarmos a diferena:

<html> <head> <title>Alinhamento de cabealho</title> </head> <body> <h2>Cabealho sem alinhamento especial</h2> Este um exemplo do cabealho sem alinhamento especial. <h2 align=center>Cabealho com alinhamento centralizado</h2> Este um exemplo de cabealho alinhado ao centro. <h2 align=right>Cabealho com alinhamento a direita</h2> Este um exemplo de cabealho alinhado a direita. </body> </html>

5. ALINHAMENTO COM O COMANDO <DIV>

A utilizao desta tag uma forma prtica e rpida de alinhar bloco de texto. A abreviatura DIV significa diviso. Ao usar esta tag num bloco de texto voc estar atingindo todas as tags dentro daquele bloco. Suas vantagens sobre o Align que:
24.

Precisar ser utilizada apenas uma vez, ao contrrio do atributo Align, que tem de ser includo em diversas tags. A tag <DIV> pode ser usada para alinhar qualquer elemento (cabealho, pargrafos, citaes, imagens, tabelas, etc.). O atributo Align encontra-se disponvel apenas em um nmero limitado de tags.

25.

Voc dever colocar a tag <DIV> e acrescentar o atributo align na tag de abertura. O atributo align poder ter os valores left, right e center.

Sintaxe:
<DIV ALIGN=" "> TEXTO e OUTRAS TAGS TEXTO e OUTRAS TAGS </DIV>

OBSERVAO:
Alm do atributo align=center temos a tag <center> funciona igualmente ao atributo. </center> que

Vamos treinar um pouco com este cdigo-fonte: <html> <head> <title>Utilizando a tag DIV para alinhar</title> </head> <body> <h2>JavaScript na World Wide Web</h2> <p align=justify> A World Wide Web iniciou-se como um simples repositrio de informaes, mas cresceu muito alm disso. A medida que a Web desenvolveu-se, as ferramentas tambm desenvolveram-se. Ferramentas simples de marcao como HTML foram unidas por linguagens de programao de verdade. Incluindo <b>JavaScript</b>, que na verdade no uma linguagem de programao mas uma <b>linguagem Script hospedeira</b> de pginas em HTML.<br> <p> <div align=center> <h2>Entendendo a utilidade do JavaScript</h2> Como a HTML uma linguagem apenas de marcao de texto simples, ela no pode responder para o usurio, tomar decises, nem autorizar tarefas repetitivas. Tarefas interativas como essas exigem uma linguagem mais complexa. <h3>Eu precisarei usar JavaScript em todas as minhas pginas</h3> Apenas se quiser aprimor-las e interagir com o usurio. </div> </body> </html>

6. CARACTERES ESPECIAIS
H caracteres que no podem ser obtidos por meio do teclado. Eles podem ser inseridos em sua pgina atravs da especificao de um cdigo especial que o browser interpreta e substitui por um caracter especfico. Esses cdigos podem ser obtidos utilizando-se uma nomeclatura definida pela ISO -LATIN - 1 ou a partir de uma entidade HTML. A norma ISO utiliza um cdigo composto pelo caractere & seguido do smbolo # e, ento, de uma combinao numrica com ponto-e-vrgula. J a entidade HTML usa o caractere & seguido de uma palavra que identifica o smbolo com ponto-e-vrgula. Caso voc queira escrever uma pgina HTML em outro idioma ter que usar bastante esses caracteres especiais. Imagine que voc queira fazer uma pgina HTML ensinando a outras pessoas a linguagem HTML. Como faria para explicar uma tag sem que o browser interpretasse como um comando. Ter de utilizar estes smbolos especiais. Vamos a um exemplo: <html> <head> <title>Tutorial em HTML</title> </head> <body> <h2>O comando &ltBR&gt</h2> A finalidade deste comando HTML marcar uma seo do texto como pargrafo inserindo uma quebra de linha.<br> <p> J o comando &ltP&gt para indicar incio de uma novo pargrafo. </body> </html> Observe que para que o browser pudesse mostrar <br> e <p> sem interpretar como comandos usei caracteres especiais &lt para indicar sinal de < e &gt para indicar o sinal de >.

Quando voc utiliza a acentuao comum do teclado nas suas pginas podem at parecer que tudo ir correr tudo bem. Mas algum que visualizar suas pginas em um computador que no tenha as mesmas configuraes de 'vdeo e teclado, alguns caracteres podem no sair da forma desejada. Por exemplo: A palavra caf, se voc utilizar esta palavra com a acentuao do seu teclado, com certeza na visualizao do seu browser ficar perfeita, mas pode ser que em outros computadores com a configurao diferente no aparea da mesma forma. O ideal coloc-la assim: Caf&eacute; ou ca&#233;

E se desejasse colocar a palavra entre aspas: &quot;Caf&eacute;&quot

ALGUNS CARACTERES ESPECIAIS

CARACTER ESPECIAL < > { } : ; = @ $ % SMBOLO &lt &gt &#123; &#125; &#58; &#59; &#61; &aacute; &#64; &#36; &#37; CARACTER ESPECIAL & " " ? SMBOLO &agrave; &acirc; &atilde; &uuml; &#38; &#174; &#34; &quot; &ordf; &ordm; &#63;

EXERCCIOS
11.

Crie uma pgina HTML utilizando os recursos vistos acima. Use esta pgina para falar da utilidade da Internet na vida de pessoas que no trabalham com informtica, sugestes para aqueles que querem abrir negcios novos envolvendo Internet, sem ser um racker.

ANOTAES

LISTAS

Vamos colocar assim, h basicamente dois tipos de listas: as ordenadas, que contm uma srie de itens sem numer-los, e as listas ordenadas, que atribuem um nmero para cada elemento da lista. Trabalhar com listas simples. Trabalharemos com os comandos <ul> para listas no ordenadas e <ol> para as listas ordenadas.

1. O COMANDO <UL>
Para criar uma lista no ordenada, voc deve usar um conjunto de comandos cuja sintaxe bsica mostrada a seguir. O comando que gera a lista no ordenada o comando <UL> (unordered list), que deve envolver o primeiro e o ltimo item da lista. Cada item da lista deve ser precedido do comando <LI> (line list). <UL> <LI> Texto <LI> Texto </UL>

2. O COMANDO <OL>
Para criar uma lista bsica no ordenada, voc deve usar um conjunto de comandos cuja sintaxe bsica mostrada a seguir. O comando que gera a lista no ordenada (ordered list) o comando <OL>, que deve envolver o primeiro e o ltimo item da lista. Cada item da lista deve ser precedido do comando <LI> (Line item). <OL> <LI> Texto <LI> Texto </OL> OBSERVAO: Na lista no ordenada cada item receber um marcador ("bolinha") e a numerada receber automaticamente nmeros.

Voc poder personalizar sua lista ordenada com o atributo TYPE e START. O atributo Type pode assumir cinco valores para definir o tipo de numerao a ser usado na lista.
12. 13. 14. 15. 16.

"1" : Especifica que os algarismos arbicos padro devem ser usados para numerar a lista ( 1,2,3,4, ...). "a" : Especifica que as letras minsculas devem ser usadas para numerar a lista (a, b, c, d, etc.) "A" : Especifica que as letras maisculas devem ser usadas para numerar a lista (A, B, C, D, etc.) "i" : Especifica que os algarismos romanos minsculos devem ser usados para numerar a lista ( i, ii, iii, iv, etc.) "I" : Especifica que os algarismos romanos maisculos devem ser usados para numerar a lista ( I, II, III, IV, etc.).

Exemplo: <p>Ingredientes para bolo</p> <ol> <li>Farinha de Trigo <li>Aucar <li>Manteiga <li>Ovos <li>Leite <li>Fermento </ol> Agora um exemplo com o atributo Type: <p>Ingredientes para bolo</p> <ol type="I"> <li>Farinha de trigo <li>Aucar <li>Manteiga <li>Ovos <li>Leite <li>Fermento </ol> Usando o atributo START voc poder determinar o nmero ou a letra que inicia sua lista. O ponto inicial 1. Usando o Start, voc pudar esse nmero. Um exemplo: <ol Type=a start=3>.

Usando o atributo VALUE em um item da lista poderemos alterar os valores da lista apartir de qualquer ponto. Ex.: <UL> <LI> <LI value=10> <LI> </UL>

IMAGENS
Para inserir uma imagem em uma pgina web utilizamos do comando, tag, <img src> e seus atributos. <img src="endereo da imagem no HD"> ex.: <img src="c:\site\imagem.gif"> Poderemos acrescentar a esta imagem os seguintes atributos: Width="valor em pixel" Height="valor em pixel" Align=(left, right ou center) largura da imagem altura da imagem alinhamento da imagem

Alt="texto" texto que ir aparecer ao passar o mouse sobre a imagem ou texto que surgir caso a imagem no possa ser visualizada. Border="valor em pixel" especificao da largura da borda da imagem.

Vspace="valor em pixel"para especificar o espao que deve ser deixado acima e abaixo da imagem. Hspace="valor em pixel" O nico obrigatrio o src. especifica o espao que deve ser deixado nas l aterais da imagem.

1- Colocando Uma Imagem Como Fundo Da Pgina

<body background="endereo da imagem no HD"> ex.: <body background="c:\site\imagem.jpg">

Procure usar imagens simples, com poucas variaes de tons. Para fixar a imagem de fundo <body background="c:\site\imagem.jpg" bgproperties="fixed">

2- Colocando Uma Cor Como Fundo Da Pgina:

<body bgcolor="cor">

Procure no usar cores chamativas. Para que a cor do fundo da sua pgina chame mais ateno que seu contedo. Voc pode criar seus prprios fundos de pgina com programas como o Photoshop e o Corelphoto-paint.

ANOTAES

LINKS E ANCORAS

1- 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. Para criar uma link com uma pgina <a href="endereo da pgina">texto que ser o link</a> ex.: <a href="c:\site\casa.html">Minha casa</a> Usando uma imagem como link: Ex.: <a href="c:\site\casa.html><img src="c:\site\imagem.jpg"></a>

2- 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 !!!

3- 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. ASPMASTERS.CJB.NET 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 : 12. Protocolo o tipo de servidor que est sendo acessado; 13. Servidor o computador que contm a pgina ; 14. Instituio o tipo de instituio a qual esse computador pertence ( Comercial , Internet Publica , Militar etc. ) ; 15. Arquivo o caminho do arquivo. Exemplo : HTTP : // WWW.TIMASTER.COM.BR 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. TIMASTER.COM.BR "> TIMASTER </A>

TABELAS
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.

1-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> <TD WIDTH=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> <TD WIDTH=25%> WIDTH=25%</TD> <TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD> </TR>

2- 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> <TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD> <TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> </TR> <TR> <TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> <TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD> </TR> </TABLE> 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=>, 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> <TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD> <TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> </TR> <TR> <TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> <TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD> </TR> </TABLE>

Outro 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.

3-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.

4-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.

5-USANDO TABELAS COMO MOLDURAS

Um outro uso bastante interessante de tabelas como moldura para alguma figura. Para isto basta voc iniciar uma tabela e definir um valor para BORDER. Exemplo: <TABLE BORDER=5> <TR> <TD> <IMG SRC=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.

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

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

1-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.

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