AG8 Informtica

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.

AG8 Informtica

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

AG8 Informtica
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

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

AG8 Informtica

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.

AG8 Informtica 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

AG8 Informtica 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

AG8 Informtica

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.

AG8 Informtica 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 OnLine 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.

10

AG8 Informtica

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

11

AG8 Informtica 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

12

AG8 Informtica 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

13

AG8 Informtica
2 PARTE

CAPTULO 3
Este captulo tm como objetivo: 1. 2. 3. 4. Organizao do contedo Formas de navegao Storyboard Diagramao

14

AG8 Informtica

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:
v v v v v v v v v

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,

15

AG8 Informtica
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 navegao e suas caractersticas e ainda consideraes importantes como:
v Os tipos de informao que se adaptam melhor a cada estrutura. v Como os leitores conseguem se deslocar pelo contedo de cada tipo de

estrutura para encontrar as informaes de que precisam . v 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.

16

AG8 Informtica

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

17

AG8 Informtica
Uma organizao linear muito rgida e limita tanto a liberdade dos seus leitores de consultar as informaes quanto a sua prpria liberdade de apresent-las. 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.

18

AG8 Informtica

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.

19

AG8 Informtica

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.

20

AG8 Informtica

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. Trata-se 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
1. Por que to importante, antes de comear a construir uma apresentao Web, definir objetivos e tpicos? O que mais necessrio? 2. Descreva cada forma de organizao de pginas citada acima. Faa uma observao sobre o que voc compreendeu de cada uma. 3. O que storyboard e qual a sua utilidade? 4. Em que casos aconselhvel usar o storyboard? 5. 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

21

AG8 Informtica
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

22

AG8 Informtica

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

23

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

24

AG8 Informtica

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

25

AG8 Informtica

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

1. 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. 2. Num projeto grfico deve sempre se perguntar se sua apresentao ficou adequada ou no ao que seu cliente desejava e ao seu pblico alvo. 3. 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. 4. Sempre indique em que browser sua pgina ser melhor visualizada. 5. 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.

26

AG8 Informtica
6. 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. 7. 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. 8. 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.

27

AG8 Informtica

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.

28

AG8 Informtica

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
1. O que um WebDesign? 2. Quais as principais preocupaes no projeto de um WebSite? 3. Quais seriam os profissionais indicados para se compor uma equipe para projetar e construir um site? 4. Quais as fases na construo de um site? D as caractersticas e faa observaes suas para cada uma. 5. Qual o melhor formato de arquivo para se trabalhar com imagens? 6. Quem responsvel pela administrao e atualizao de um site? 7. Quais as formas de divulgao de um site?

ANOTAES

29

AG8 Informtica
3 PARTE

CAPTULO 05
Este captulo abranger : 1. Uma linguagem de marcao: HTML. 2. Tags ou comandos 3. Elementos que compem uma pgina HTML

30

AG8 Informtica

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

31

AG8 Informtica
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> <TITLE> </TITLE> <BODY> </BODY>

Esta tag marca o incio do programa HTML Esta tag marca incio e fim de cabealho Esta tag delimita o texto que ir ser visualizado na barra de ttulo do browser. Esta tag delimita o corpo do programa, aonde a maior parte do comando sero colocados

32

AG8 Informtica

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.

33

AG8 Informtica
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: 1. Voc poder ter apenas um ttulo 2. texto dever ser simples e no poder ter outras tags 3. Escolha um texto curto e que descreva o contedo da pgina

34

AG8 Informtica

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:

35

AG8 Informtica

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

36

AG8 Informtica

EXERCCIOS
1. 2. 3. 4. 5. 6. a) b) c) d) e) f) g) h) i) 7. Qual a extenso de um arquivo de um programa em HTML? A primeira pgina de um site geralmente recebe que nome? Escreva a estrutura bsica de um programa HTML. Quais os principais elementos exibidos em uma home page? O que link? Qual as funo das tags abaixo: <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <H2> </H2> <BODY> </BODY> <B> </B> <I> </I> <P> <BR> 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

37

AG8 Informtica
3 PARTE

CAPTULO 06
Este captulo abranger : 1. Tags de formatao de texto lgicas e fsicas 2. Texto pr-formatado 3. Endereos, citaes e comentrios

38

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.

39

AG8 Informtica

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

40

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> <I> </I> <TT> </TT> <u> </u> <S> </S> <BIG> </BIG> <SMALL> </SMALL> <SUB> </SUB> <SUP> </SUP>

coloca o texto em negrito coloca o texto em itlico fonte de mquina de escrever com espaamento uniforme. coloca o texto sublinhado coloca o texto tachado o texto ir aparecer maior que o restante ao redor o texto ir aparecer menor que o restante ao redor coloca o texto subscrito coloca o texto sobrescrito

41

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

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>

42

AG8 Informtica

Visualizao no Internet Explore 5

Visualizao no Netscape 4.51

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:

43

AG8 Informtica <!- -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> </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: 1. texto ficar piscando em intervalos regulares 2. 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.

44

AG8 Informtica
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
1. Os comandos de formatao podem ser combinados para aplicar mais de
um efeito ao mesmo tempo? 2. Coloque os comandos HTML abaixo para que o texto tenha o seguinte efeito: Tutorial de HTML

3. 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. 4. Por que a tag Blink no bem aceita pela maioria dos projetistas de pginas Web? 5. Qual a utilidade da tag de pr-formatao e qual sua sintaxe? 6. Como devo utilizar a tag <ADDRESS> </ADDRESS> e qual sua finalidade?

ANOTAES

45

AG8 Informtica

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.

46

AG8 Informtica
Algumas cores:

Aqua Black Fuchsia Green Brown Olive Silver White

COR

#70DB93 #000000 #FF00FF #00FF00 #800000 #808000 #E6E8FA #FFFFFF

CDIGO

Blue Cyan Gray Lime Navy Red Teal Yellow

COR

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

CDIGO

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>

47

AG8 Informtica
</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.

48

AG8 Informtica
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: 1. Precisar ser utilizada apenas uma vez, ao contrrio do atributo Align, que tem de ser includo em diversas tags. 2. 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. 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>

49

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

50

AG8 Informtica
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;

51

AG8 Informtica

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

52

AG8 Informtica

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> </UL> <LI> Texto <LI> Texto

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> </OL> <LI> Texto <LI> Texto

OBSERVAO: Na lista no ordenada cada item receber um marcador ("bolinha") e a numerada receber automaticamente nmeros.

53

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

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

54

AG8 Informtica
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>

55

AG8 Informtica

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) Alt="texto"

largura da imagem altura da imagem alinhamento da imagem texto que ir aparecer ao passar o mouse sobre a imagem ou texto que surgir caso a imagem no possa ser visualizada. especificao da largura da borda da imagem. para especificar o espao que deve ser deixado acima e abaixo da imagem. especifica o espao que deve ser deixado nas l aterais da imagem.

Border="valor em pixel" Vspace="valor em pixel" Hspace="valor em pixel" O nico obrigatrio o src.

1- Colocando Uma Imagem Como Fundo Da Pgina

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

56

AG8 Informtica
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

57

AG8 Informtica

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>

58

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

59

AG8 Informtica
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 :

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

60

AG8 Informtica

TABELAS

As tabelas so muito importantes para o designer de uma home-page. Com elas podese 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>

61

AG8 Informtica
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>

62

AG8 Informtica 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>

63

AG8 Informtica
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>

64

AG8 Informtica
</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.

65

AG8 Informtica 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 ) .

66

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

67

AG8 Informtica

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

68

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

69

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

70

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

71

AG8 Informtica
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>

72

AG8 Informtica
</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">

73

AG8 Informtica
</iframe> </center> Aqui continua a pgina normal ! </body> </html>

74

Tutorial Mdulo 1: Introduo e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br) Introduo A HyperText Markup Language e a Web No ncleo de toda pgina da Web, encontramos a HyperText Markup Language, uma linguagem de diagramao baseada em marcadores, ou tags como mais comumente conhecido. A HTML (HyperText Markup Language) uma linguagem simples baseada em texto que podemos visualizar em qualquer plataforma. Pode ser visualiza em navegadores somente texto, como o Lynx ou em navegadores mais avanados como Netscape Navigator e Internet Explorer. A HTML , na verdade, apenas texto com cdigos de formatao que especificam diferentes fontes e estilos ou at mesmo outras funes mais avanadas, que sero abordadas ao longo deste tutorial. Ela muito semelhante aos antigos editores de texto que exigiam a insero de tags para especificar tipos em itlico, negrito ou sublinhado. Convenes utilizadas neste tutorial importante destacar algumas observaes antes de comearmos a trabalhar diretamente com a linguagem. Este tutorial objetivo, gradativo e exemplificado, ou seja, a cada nova tag ou instruo, ser dado um exemplo e desprezaremos informaes complementares, quando possvel, para evitar disperso no aprendizado. Ser indicado um editor HTML quando necessrio, ou seja, at a dada instruo, aconselhvel um editor de texto simples, como o Bloco de Notas do Windows, por exemplo. Algumas vezes, sero apresentados tpicos como Dica, Observao ou alguma nota adicional que ajudar o leitor a compreender o que est sendo estudado. Quando for apresentado o tpico LINK, significa que uma URL ser indicada para posterior referncia. Neste caso, o leitor poder anotar o endereo para enriquecer seus conhecimentos posteriormente. Utilizaremos a expresso Mos Obra! para especificar que trechos na linguagem HTML sero apresentados como exemplos. Diagramando com a HTML Introduo Os navegadores seguem trs regras bsicas ao apresentarem a pgina. So elas:

 Os espaos em brancos so ignorados. Isto significa que inserir espaos, como os causados pelas teclas [tab] e [enter], no afetar em nada a interpretao do documento pelo navegador. As tags de formatao no se distinguem pelas caixas, ou seja, uma tag escrita em caixas altas ter o mesmo efeito do que uma tag escrita em caixas baixas. Caixas altas so as letras maisculas. Ex: CAIXA ALTA. Em sua maioria, as tags de formatao formam pares. Ex: <HTML> e </HTML> Estrutura de um documento Todo documento HTML inicia-se por uma tag <HTML> e encerra-se por uma tag </HTML>. Um documento HTML consiste em duas partes um cabealho e um corpo. O cabealho contm informaes a respeito do documento como, por exemplo, o ttulo. O corpo contm o documento propriamente dito. O cabealho e o corpo se distinguem pelo uso das tags <HEAD> e <BODY>. Observe a estrutura. <HTML> <HEAD> elementos contidos no cabealho </HEAD> <BODY> documento apresentado pelo browser </BODY> </HTML> Elementos do cabealho Ttulo do documento O cabealho de um documento tem apenas um elemento de uso praticamente obrigatrio: <TITLE>Ttulo da pgina</TITLE>. Existem outros elementos adicionais de importncia grande, mas abordaremos tais elementos mais frente. NOTA: Mecanismos de buscas, na Internet, utilizam os elementos <TITLE> e </TITLE> para definir um ttulo na apresentao do resultado da procura. Se o diagramador no insere um ttulo na sua pgina HTML, o mecanismo de busca define o ttulo com o endereo da pgina, ou seja, a URL da pgina. Elementos do corpo Ttulos A HTML aceita seis estilos de ttulos, que so usados para fazer o texto se destacar em diversos nveis. Esses ttulos so numerados de 1 a 6, sendo <H1> o maior deles e, obviamente, <H6> o menor.

Pargrafos A insero de uma tag <P>, diz ao navegador que o texto a seguir inicia um pargrafo. Dessa forma, o navegador apresenta o texto com uma linha abaixo dos elementos anteriores. Pargrafos com <P> no precisam de um correspondente de fechamento, embora uma boa prtica seja inserir a </P> encerrando o pargrafo, pois em documentos que utilizam componentes avanados da linguagem, necessrio. Uma vez que pretendemos avanar o nosso conhecimento, interessante se habituar, desde j, com a tag </P>. Mos obra! Insira o trecho abaixo em um novo arquivo no Bloco de Notas. <HTML> <HEAD> <TITLE>Meu primeiro documento HTML</TITLE> </HEAD> <BODY> <H1>A linguagem HTML muito simples</H1> Comeo aqui o meu aprendizado para que no ano que vem esteja concorrendo ao maior prmio da Internet brasileira. <P>Crio aqui um pargrafo para visualizar, na prtica, o efeito desta tag.</P> </BODY> </HTML> Depois de inserir, salve-o com a extenso .htm ou .html. O uso da extenso .htm importante e obrigatrio para que o navegador saiba que se trata de um documento HTML. Agora, abra o arquivo no seu navegador preferido e observe os resultados. DICA: Faa uma experincia. Remova as tags <P> e </P> ou as <H1> e </H1> para ver como o navegador interpretar o documento. Estilos de formatao Os estilos aceitos pela HTML so o negrito, o itlico, o sublinhado e o de mquina de escrever (fonte monoespaada), vamos inser-los no documento. Mos obra! Insira no mesmo documento criado anteriormente, o seguinte trecho. <P> Aprendendo com tutoriais passo-a-passo muito mais fcil.<BR> Agora j posso trabalhar com a utilizao de estilos<BR> So exemplos: <B>Negrito</B>, <I>Itlico</I>, <U>Sublinhado</U> e <TT>Monoespaado</TT>

OBSERVAO: Ateno ao inserir o trecho abaixo no documento j existente. Coloque o trecho depois de qualquer elemento, mas antes das tags </BODY> e </HTML>, caso contrrio o navegador ao encontrar as tags </BODY> e </HTML> interpreta que o documento acabou e no apresentar mais nada aps. NOTA: Houve a insero de uma tag nova, no trecho acima. A tag <BR> semelhante <P>, porm com uma diferena, ela apenas quebra o texto para uma nova linha, enquanto que a tag <P> pula uma linha. Repare tambm que no houve tag de fechamento para a <BR>, isso se deve ao fato de no ser necessrio. LINK: Existe um consrcio regulamentador da linguagem HTML na Web. o famoso W3C (Wolrd Wide Web Consortium) e pode ser visitado na URL http://www.w3c.org. Separadores J estamos acostumados com linhas que delimitam textos e pargrafos, que ajudam a diagramar o contedo dos documentos. Essas linhas so simples de fazer. Mos obra! Insira em qualquer parte do documento a tag <HR> <P>Aprendendo HTML o primeiro passo para construir a minha homepage.</P> <HR> importante praticar para manter o conhecimento afiado. Listas A linguagem aceita diversos tipos de listas formatadas para apresentao dos dados. Todas as listas exigem um par de tags que indica o tipo de lista, alm de uma tag no incio de cada item da lista. As mais importantes so as seguintes. Listas ordenadas Utitlizam as tags <OL> e </OL> Listas no ordenadas Utilizam as tags <UL> e </UL> Mos obra! Insira no seu documento HTML, inicialmente uma lista no ordenada com as suas frutas favoritas. <H3>Minhas frutas <U>favoritas</U></H3> <UL> <LI>Ma <LI>Pra <LI>Uva <LI>Tamarindo

</UL> <P>Agora, vamos formatar uma lista ordenada e comparar as duas.</P> <H3>Meus livros preferidos</H3> <OL> <LI>A Lei do Triunfo, Napoleon Hill <LI>Descartes, coleo Os Pensadores <LI>Memorial de Maria Moura, Rachel de Queiroz </OL> DICA: considerado uma boa prtica em formatar listas, criar uma margem esquerda para os itens das listas, mantendo as tags organizadas no documento. Normalmente, esta margem feita teclando uma s vez a tecla [tab], o que no afeta em nada o resultado na interpretao do navegador, pois como j foi dito, espaos em branco so ignorados.

Tutorial Mdulo 2: Inserindo imagens, criando hyperlinks e ncoras Por Daniel Chicayban (dan@trendnet.com.br) Introduo Sem o apelo visual das imagens, talvez a World Wide Web no tivesse conseguido alcanar com a mesma rapidez a popularidade que atingiu. Os principais navegadores podem exibir de forma automtica imagens no formato GIF e JPEG. O GIF (Graphics Interchange Format), desenvolvido originalmente para os usurios do CompuServe, foi escolhido como padro da WWW por ser compacto e tambm por ser um dos formatos grficos mais conhecidos. Depois veio o padro JPEG. Saiba mais sobre os padres no endereo abaixo. LINK: http://www.ibestmasters.com.br/tutorial/tutorial03.asp Imagens As imagens devem ser gravadas como arquivos separados, mesmo que sejam referenciadas e exibidas em um documento de HTML. Para incluir uma imagem no documento, utilize a tag <IMG> Por exemplo: <IMG SRC=minha_foto.jpg> A tag IMG possui alguns atributos importantes. So eles: SRC O atributo SRC contm um URL para a imagem desejada. Tendo em vista que os ULRs podem indicar qualquer localizao, voc tem a oportunidade de referenciar imagens localizadas em servidores remotos e tambm no seu prprio servidor. Cuidado ao utilizar imagens localizadas em servidores remotos. Por exemplo: imaginemos que o leitor visitou o site fictcio http://www.chicayban.com.br e deseja utilizar a imagem contida no endereo http://www.chicayban.com.br/imagem.gif. Para inseri-la, basta colocar o atributo SRC apontando para o endereo, mas lembre-se de que a imagem pode conter direitos autorais reservados e o administrador do website pode mudar a imagem de nome, remover a imagem do servidor ou mesmo mudar a contedo da imagem. O melhor que se tem a fazer nesses casos copiar a imagem para o seu prprio servidor, respeitando os direitos autorais, se houver, claro. A sintaxe para uma imagem remota a seguinte: <IMG SRC=http://www.chicayban.com.br/imagem.gif> NOTA: Os atributos da tag IMG so sempre os mesmos, ou seja, no se alteram, mas os valores so variveis, mudam de acordo com o diagramador. No exemplo acima, o atributo

SRC e o valor http://www.chicayban.com.br/imagem.gif. Logo, para inserir uma imagem, deve substituir o valor exemplificado pelo valor desejado. A sintaxe para um imagem local a seguinte: <IMG SRC=imagem.gif> NOTA: Para o exemplo acima, a imagem deve estar na mesma pasta (diretrio) que o documento HTML. Ainda neste mdulo, vamos falar sobre diretrios, pastas, arquivos e seus padres no Unix, DOS e Windows. ALIGN O atributo ALIGN controla a localizao do texto em funo da imagem inserida. Note, o atributo no controla a localizao da imagem no documento. comum haver confuso com este atributo. muito importante que o leitor teste todos os valores possveis para o atributo ALIGN para perceber na prtica as diferenas e resultados. Os principais valores so: TOP MIDDLE BOTTOM O valor TOP, alinha o texto no topo da imagem, j o MIDDLE alinha no centro da imagem e por ltimo o valor BOTTOM que alinha o texto no rodap da imagem. Um exemplo do uso deste atributo mostrado abaixo. <IMG SRC=imagem.gif ALIGN=TOP> Mo obra! medida que vamos avanando nosso aprendizado, vamos deixar que os leitores criem suas prprias solues, pois fundamental para o verdadeiro aprendizado. Experimente inserir o exemplo citado acima no seu documento HTML. Junto com o exemplo, adicione algum texto para testar os valores TOP, MIDDLE e BOTTOM. Assim: Testando os valores do atributo ALIGN <IMG SRC=imagem.gif ALIGN=TOP> ALT O atributo ALT especifica o texto que deve ser exibido em lugar de uma imagem nos navegadores somente texto ou nos navegadores grficos que esto configurados para no mostrar as imagens. Por exemplo, para incluir suporte a navegadores somente de texto no exemplo dado acima, a linha HTML seria semelhante a esta: <IMG SRC=imagem.gif ALIGN=TOP ALT=Descrio da Imagem> Esse atributo muito importante quando a conexo do navegador com o servidor web lenta, pois o usurio pode ler uma descrio da imagem antes do navegador carreg-la.

DICA: Voc pode usar imagens pequenas para acrescentar variedade aos documentos. Uma tcnica bastante popular na Web consiste em criar listas com marcadores usando pequenas bolas coloridas como marcadores. Cada marcador de cor diferente apresenta um arquivo GIF e cada arquivo GIF carregado apenas uma vez. Os navegadores memorizam a imagem que carregada, de modo que ela possa ser utilizada vrias vezes no mesmo documento. Dependendo dos ajustes de cache do navegador, tambm poder guardar em memria a imagem para uso em outros documentos. WIDTH e HEIGHT Os atributos WIDTH e HEIGHT so de extrema importncia. Eles definem o tamanho da imagem no documento HTML. O atributo WIDTH define a largura em pixels e o HEIGHT define a altura em pixels. Para quem no sabe, a traduo de WIDTH largura e HEIGHT, altura. Se tais atributos no forem definidos na tag <IMG>, o navegador ser obrigado a calcular o tamanho da imagem para apresent-la na pgina, ou seja, defini-los uma forma de aliviar o trabalho do navegador. No estar cometendo um crime quem no definir esses atributos, mas considerado uma boa prtica na diagramao de pginas. Hyperlinks e ncoras Uma referncia de hipertexto algo muito simples. Consiste em uma ncora e um endereo, ou URL. A ncora o texto ou a imagem sobre o qual o usurio d um clique para ir at outro lugar. O endereo indica a localizao do documento que o navegador ir carregar quando o usurio der um clique sobre a ncora. ncoras Em HTML, uma ncora pode ser um texto ou um grfico. De modo geral, as ncoras de texto aparecem em estilo sublinhado e em cor diferente do texto normal nos navegadores. Como Criar ncoras Qualquer texto pode ser uma ncora em HTML, independente do seu tamanho ou da sua formatao. Uma ncora pode consistir em algumas letras, palavras, ou mesmo linhas de texto. O formato de um par ncora-endereo simples. <A HREF=URL>Texto da ncora</A> A letra A na tag <A HREF> significa ncora (anchor) e HREF quer dizer referncia de hipertexto (hypertext reference). Tudo que se encontra entre as tags <A HREF> e </A> representa o texto da ncora, que aparece sublinhado ou em negrito, dependendo do navegador. Observe o exemplo a seguir: <A HREF=comprar.htm>Clique aqui para comprar!</A>

Podem ser utilizados outros cdigos de formatao em conjunto com as ncoras de hipertexto. Por exemplo, para fazer uma ncora de hipertexto aparecer no estilo de ttulo nvel 4, voc escreveria: <A HREF=URL><H4>Texto da ncora</H4></A> A ordem dos pares de tags no relevante. Tambm seria possvel escrever: <H4><A HREF=URL>Texto da ncora</A></H4> Com hyperlinks e ncoras, tambm possvel direcionar o visitante para posies especficas do prprio documento em questo ou de um outro documento ainda no visitado. Isso muito comum em pginas que contm ndices. Por exemplo, voc est criando uma pgina que ir conter dicas de culinria e informtica. No preciso dizer que os assuntos so totalmente distintos, logo, quem curte informtica, provavelmente no est interessado em ler sobre culinria, ento possvel criar um ndice para que se o visitante clicar em informtica, o navegador exibe imediatamente as dicas de informtica, mesmo que as dicas de culinria venham antes do que as de informtica, na pgina de dicas. Observe atentamente o exemplo abaixo. <UL> <LI>Dicas sobre culinria <LI>Dicas sobre informtica e Internet </UL> Inicialmente, uma lista foi construda. Testamos no navegador e a lista parece estar sem nenhum erro de diagramao HTML, logo, podemos continuar. Vamos colocar agora os hyperlinks e ncoras para facilitar a leitura do documento. <UL> <LI><A HREF=#culinaria>Dicas sobre culinria</A> <LI><A HREF=#informatica>Dicas sobre informtica e Internet</A> </UL> Note que o hyperlink acima difere dos que j aprendemos at agora. O smbolo # diz ao navegador que em algum lugar deste documento, encontra-se uma ncora referente ao nome especificado. Ento, para dizer ao navegador onde se encontra as dicas de culinria e informtica, usamos a tag <A NAME>. Ao colocar, por exemplo, <A NAME=informatica> em qualquer lugar do documento HTML, diz ao navegador que neste lugar a parte das dicas de informtica. Dessa forma, quando o visitante clicar no hyperlink Dicas sobre informtica e Internet, o navegador

o remeter para a parte do documento HTML que se encontra as dicas sobre informtica e internet, pulando completamente as dicas de culinria. LINK: Para entender melhor o funcionamento desta nova tag, v at http://users.trendnet.com.br/dan/dicas.htm e clique em um dos hyperlinks de dicas contido l. Como Criar Botes Grficos Podemos utilizar hipergrficos para criar efeitos semelhantes a botes e oferecer uma boa alternativa aos cliques em texto simples. O formato de uma ncora grfica idntico ao de uma ncora de texto. Porm, ao invs de inserir texto entre as tags <A HREF> e </A>, voc referencia uma imagem. Observe o exemplo abaixo: <A HREF=homepage.htm><IMG SRC=home.gif></A> DICA: Se o texto ou as imagens usadas em ncoras de hipertexto parecerem no funcionar de forma correta, verifique se o endereo do documento na tag <A HREF> est totalmente colocado entre aspas. Omitir as aspas finais um erro muito comum. Nomes de Arquivo O caminho dos documentos, ou nomes de arquivo, semelhante ao que se utiliza nos sistemas DOS e UNIX, embora a barra seja normal (/) e no a invertida (contra-barra - \), como os usurios do DOS esto acostumados a empregar. Cada barra conduz ao prximo subdiretrio com o nome especificado e o caminho termina em um nome de arquivo com uma extenso (tal como um TXT ou HTML). Tambm possvel especificar um caminho at um diretrio inteiro, apenas completando a especificao do caminho com o nome do diretrio e uma barra (/) final. Por exemplo, para ver o contedo do diretrio chicayban em um servidor FTP, poderamos usar: ftp://ftp.chicayban.com.br/chicayban/ Ao desenvolver uma srie de documentos HTML, voc tem a possibilidade de usar um excelente atalho, empregando caminhos relativos em lugar de caminhos absolutos. possvel omitir o protocolo e o endereo e, simplesmente, iniciar o endereo do documento no hyperlink, por meio de um caminho relativo. Para exemplificar, se voc estiver trabalhando em um arquivo chamado projeto.htm em algum servidor da Web e quiser vincular esse arquivo a reuniao.htm no mesmo diretrio, o vnculo seria: <A HREF=reuniao.htm>Concluses da reunio sobre o Projeto Internet 2</A> J se o arquivo estiver em um subdiretrio denominado conclusoes, comece pelo nome do subdiretrio: <A HREF=conclusoes/reuniao.htm> Concluses da reunio sobre o Projeto Internet 2</A>

Voc tambm pode especificar um caminho relativo at um documento localizado em diretrios de nveis mais elevados, usando .., o smbolo que corresponde ao diretrio superior. Por exemplo, esta referncia indica um arquivo denominado relatorio.htm no diretrio superior: <A HREF=../relatorio.htm>Clique para ler o relatrio do Projeto Internet 2</A> Ainda que um documento esteja em um rvore de diretrios inteiramente isolada, embora situada no mesmo servidor, voc pode omitir o protocolo e o endereo da Internet, iniciando o nome do arquivo com uma barra (/). Essa representao referencia o diretrio principal de documentos do servidor, a partir do qual os subdiretrios e os diretrios com nomes alternativos podem ser referenciados. Se este assunto lhe parece um pouco confuso porque, talvez, voc seja da gerao Windows. Nunca usou um DOS ou muito menos um Unix? Acertei? No Windows, diretrios so pastas e como tudo na base do clique, voc nunca precisou digitar nenhum caminho de diretrio. Infelizmente, no h nenhuma forma de se diagramar em HTML sem conhecer esse bsico de sistemas operacionais, mas se voc ainda no entendeu, tente ler novamente os pargrafos acima. Se ainda assim nada ficou claro ou dvidas apareceram, pergunte! Estarei inteiramente disponvel para solucionar dvidas no endereo dan@trendnet.com.br. Se possvel, coloque algum assunto na mensagem como Ibest.Master. No prximo modulo, vamos aprender a construir um formulrio HTML para envio de mensagens eletrnicas para receber feedback dos visitantes!