AG8 Informática

1ª PARTE

CAPÍTULO 1

Neste capítulo iremos abordar conceitos sobre: 1. 2. 3. 4. 5. Redes Internet Intranet Extranet Uma visão geral de como funciona a Internet.

2

AG8 Informática

REDES E INTERNET
Para que você possa entender o que é e como funciona a Internet é necessário primeiro compreender o que é uma rede de computadores. Uma rede de computadores consiste, na forma mais simples de sua definição, na conexão de diversos computadores por meio de cabos e outros tipos de hardware. Podendo trocar dados entre si. A interação entre computadores envolve a movimentação de muitos dados, mas é difícil de se mover muitas coisas, incluindo-se dados, através de uma longa distância. Então a interação de computadores normalmente começa com computadores no mesmo escritório ou no mesmo prédio 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 são: Ethernet, Token-ring e a rede remota (WAN). As redes Ethernet e Token-ring são dois tipos diferentes de redes que podem ser conectadas á Internet. Nas redes Token-ring os dados são transmitidos em "Tokens" de computador para computador, em uma configuração em anel ou estrela. Em redes Ethernet, os dados passam de um servidor para um computador na rede. Alguns sistemas de rede não usam qualquer cabo. A aparelhagem de redes remotas (ou sem fio) estendem as redes além do alcance dos cabos de cobre ou dos cabos de fibra ótica. As redes locais são agrupadas em redes regionais. Que podem através dos Backbones ter acesso á outras redes regionais. Um Backbone é uma estrutura básica para transmissão de dados na Internet extremamente veloz, são as espinhas dorsais do tráfego. A Internet é uma interconexão de diversas redes através de linhas de alta capacidade chamadas Backbones, construídos para comportar o grande tráfego de informações que circulam na Internet. É um local público e não pertence nem é operada por nenhuma empresa. Agências governamentais ou companhias privadas são as responsáveis pela construção destas estruturas. As companhias de alcance de longa distância constróem backbones e vendem o acesso a eles a outras companhias, os ISPs ( provedores de serviço da internet), é o que permite o acesso de seu computador a Internet, cobram de ambos pelo tráfego de informações.

3

AG8 Informática
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 país. Além do computador diversos outros tipos de hardware serão envolvidos ao se navegar na Internet. Esse hardware é projetado para transmitir dados entre redes e forma grande parte do "elemento de coesão" que une a Internet. As cinco partes mais importantes são: Hubs, pontes, portas de comunicação(gateways), repetidores e roteadores. Os Hubs são 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 mantêm simultaneamente dados locais dentro de sua própria rede. As portas de comunicação (gateways) são semelhantes ás pontes, mas também traduzem dados de um tipo de rede para outro. Os dados sempre atravessam grandes distâncias quando viajam através da Internet, o que pode criar um problema, pois o sinal que os envia pode enfraquecer com a distância. Para evitar que isto ocorra, os repetidores amplificam os dados, em determinados intervalos, para que o sinal não enfraqueça. Os dados para serem enviados de um local para outro são divididos em pacotes pelo TCP (Protocolo de Controle de Transmissão). Os roteadores garantem que estes pacotes cheguem ao seu destino. E ,posteriormente, estes pacotes são montados formando a informação como foi enviada. Agora que vimos o hardware envolvido, iremos entender todo o processo. Os dados são divididos em pacotes pelo TCP. Pois a Internet é uma rede comutada, onde não existe uma conexão permanente entre o emissor e o receptor. Esses pacotes são enviados de seu computador para a sua rede local, provedor de serviços Internet ou para um serviço comercial on-line, via modem. Caso o destino seja uma outra rede local dentro da rede regional a qual as duas fazem parte, a transmissão terá um roteador captando estes dados do provedor, serviço comercial ou rede local e transmitindo para o roteador da outra rede local. No caso da transmissão entre várias redes regionais, os pacotes serão enviados a um ponto de acesso á rede (NAP) e depois através de um backbone enviado a outro ponto de acesso próximo ao destino, a um roteador e em seguida ao computador de destino. Esta divisão em pacotes é que faz a Internet ser conhecida como uma rede comutada em pacotes. É isto que os dois Protocolos (conjunto de regras) de

4

AG8 Informática
comunicação mais importantes fazem: o TCP e o IP. TCP é o Protocolo de Controle de Transmissão e o IP é o Protocolo Internet.

INTRANET E EXTRANET
Uma intranet é uma internet interna. O acesso a ela normalmente se restringe a funcionários da empresa. Como uma intranet pode abranger o globo, muitas organizações consideram mais barato compartilhar informações corporativas dessa maneira. Os protocolos e as regras são os mesmos da Internet, com a diferença que se trata de uma rede fechada da empresa, disponível somente aos funcionários conectados a ela. As informações disponíveis na intranet são informações corporativas, geralmente de natureza proprietária. Uma empresa estabelece uma intranet instalando o protocolo TCP/IP, um servidor Web (cujo conceito veremos no próximo capítulo) e navegadores Web, browsers. Os documentos da empresa são convertidos para formato HTML e colocados no(s) servidor(es) Web da intranet. Assim, os funcionários da empresa usam seus navegadores Web para visualizar esses documentos, basta digitar o endereço local do documento que desejam ver, de forma semelhante á inserção de um endereço Internet. Fazer parte de uma intranet não impede necessariamente o acesso á Internet. É possível ter os dois ao mesmo tempo. A EXTRANET é um grupo de intranets interconectadas. As empresas que fazem negócios entre si podem formar extranets para compartilhar determinados tipos de informação.

5

Com a descentralização ela se tornou uma vasta rede de companhias. Hoje diversos grupos orientam o crescimento da Internet. para nós pobres mortais. universidades. Na Internet 2 a velocidade de conexão pode chegar a 2. Onde provedores como o Ajato já operam em São Paulo e Rio de Janeiro. 6 . tanto entre si como com outros. Velocidades de conexão deste tipo também são utilizadas por usuários. Uma rede altamente veloz que está sendo utilizada somente por alguns orgãos governamentais e Instituições de nível Superior Federal. os laboratórios e as universidades que deram forma a Internet. A ARPAnet uniu pesquisadores. Mas isto não quer dizer que estas empresas controlam a Internet. o InterNIC. velocidade. A rede também permitiu que se fizesse pesquisas militares nas universidades e que os militares se comunicassem. elas orientam seu crescimento e ajudam. e já está funcionando a "Internet 2". militares e universitários. O tráfego cresceu tanto que a rede foi dividida em militar e civil. ou seja. via e-mail. que orienta os padrões de evolução. as agências de pesquisas. do departamento de defesa dos EUA. fundado pela Fundação Nacional de Ciência. qualquer pessoa que dispusesse de um computador poderia se conectar. No início. em especial a NSF (Fundação Nacional para a Ciência). a ARPAnet cresceu e se adaptou aos desenvolvimentos tecnológicos.4 Gigabytes por segundo. World Wide Web Consurtium. a ARPA. a velocidade de conexão chega a 56 Kbps. que controla o Sistema de Nomes de Domínio. Com o tempo. a coordenar. Antes era chamada de NSFnet e em 1987 passou a se chamar Internet. foi o governo federal. Para solucionar problemas como nomes de domínio. Mais recentemente. Como resultado grandes companhias construíram redes baseadas na ARPAnet e se conectaram a ARPAnet. individuos. pesquisadores e governo. como o W3C.AG8 Informática COMO NASCEU A INTERNET Em 1969. Normalmente. permitindo que os recursos de seus computadores fossem compartilhados. são os interesses comerciais que têm determinado a forma de sua infra-estrutura. etc. etc. que possuem cable modem. como outras.. felizardos. construiu uma rede experimental de computadores chamada ARPAnet.

De forma simples e concisa mostre como funciona. 2. C. Se estiver trabalhando em uma Intranet em uma empresa poderá ter acesso a Internet? 7. O que uma Extranet? ANOTAÇÕES 7 . Backbone Hub Roteador Repetidor 4. Conceitue: A. o envio de informações pela Internet. D. 5. Defina Internet e redes locais. B. de maneira geral. O que é uma Intranet? 6.AG8 Informática EXERCÍCIOS 1. O que uma rede comutada? 3.

Home Page e apresentação Web Navegadores O que é site. O que é necessário para se criar páginas para a Web. 2. 6. Host. 3.AG8 Informática 1ª PARTE CAPÍTULO 2 Este capítulo tratará : 1. A diferença entre páginas Web. 5. 4. Provedor e Servidor Web Protocolos Serviços oferecidos na Web 8 .

ou seja. Estas informações contidas nestes sites são encontradas através de URLs (endereço na internet). É independente de plataforma pois você pode acessar as informações disponíveis na Web igualmente bem a partir de qualquer computador. distribuído. a forma como as informações estão dispostas. ela interage com o usuário. A Internet ainda é interativa. gráfico. com base nas informações que deseja obter em seguida. utilizado na internet.AG8 Informática A WORLD WIDE WEB A Web é um conjunto de documentos acessíveis por meio da Internet. Poderia descrever a World Wide Web como um sistema de informação em hipertexto. 1. sistema operacional e monitor de vídeo. já que os pronunciamos tantas vezes acima. interativo e global. HOME PAGE. 9 . Onde você poderá percorrer partes do documento e outros documentos através de pontes chamadas de links. Podendo se perder facilmente. Não é como a TV. O hipertexto permite que você leia um texto e navegue por ele e por informações visuais de forma não-linear. ou seja. Como o volume de informações é muito grande ela é distribuída por diversos sites (um Site da Web é um local que divulga algum tipo de informação. Assim é muito importante o sistema de navegação. dinâmico. Quando você exibe uma página Web. SITE E APRESENTAÇÃO WEB? Vamos entender melhor o cada termo deste quer dizer. PÁGINA WEB. Esses documentos (ou páginas Web) contêm uma tecnologia chamada hipertexto. independente de plataforma. A Web fornece recursos de imagens e animação fantásticos. A quantidade de informação que está disponível no universo da Internet é mais do que você poderia assimilar durante uma vida inteira. e ela se encontra das mais variadas formas. o seu navegador se conecta a esse site da Web para obter essas informações).

games e grupos de bate-papo entre os membros. Uma apresentação da Web é um conjunto de páginas Web estruturadas sobre um determinado conteúdo.AG8 Informática Uma página Web é um elemento específico de uma apresentação da Web que está contido em uma estrutura. A vantagem é o menor esforço para navegar e colher informações. no Brasil. O provedor de serviços Internet (ISP) atua como o computador Host (aquele computador que fica conectado permanentemente na Internet para lhe prover o acesso a mesma). etc. oferecendo diversos níveis de serviço: Acesso indireto Você obtêm acesso através de um serviço on-line. jogos. Tudo isso é conteúdo. mas não fornece serviços além de correio eletrônico e acesso á Internet. Os ISPs podem ser de vários tipos. A desvantagdem são os serviços de viagens. programas. A primeira página de uma apresentação é chamada de home page. Informações. Você efetuará um logon para entrar na rede da empresa e poderá acessar a Internet. este conteúdo é aquilo que você está colocando na Web. ilustrações. diagramas. A desvantagem é que acessar um serviço on-line por meio da Internet consome mais tempo do que adotar um caminho mais direto. ficam armazenadas em um local chamado Site. oferecendo mecanismos de pesquisa personalizados e vínculos que levam a locais interessantes na Web. O Site é hospedado por computadores conectados permanentemente a Internet e recebem o nome de Host. É necessário ser membro do serviço. texto de ficção. a rede é conectada diretamente á Internet pelo gateway. entre outros. 10 . A vantagem é que estes serviços facilitam a navegação. O ISP age como seu gateway para a Internet. Conexão Permanente Funciona por meio de uma rede de uma empresa. textos humorísticos. ISP é uma empresa que fornece o gateway necessário para acessar a Internet. Acesso discado A conexão é feita através de um modem. A vantagem é a quantidade de serviços oferecidos e a desvantagem é a questão da segurança e o valor pago ao ISP pelos serviços. Para entrar na net é preciso fazer uma conexão direta ou usar o computador Host. como UOL. imagens. Nesse caso. como outras. SBT OnLine e STI. Esta apresentação.

Cada página é um arquivo. Golpher. criado em uma linguagem denominada HTML. o SiteAid (baixado do site www. Os mais conhecidos são o Internet Explorer e Netscape Navigator. A recuperação de documentos a partir da Web e a formatação desses no seu 11 . não só do protocolo FTTP mas também FTP. Porém a forma mais prática e produtiva é utilizar um editor HTML. Telnet.com). sua estrutura e vínculos para outros documentos. etc. 2. Há vários no mercado como: HotDog Professional (www. É preciso estar conectado para visualizar a página que criei? Não. deve colocá-las em um servidor Web para que outras pessoas também possam visualizá-la.AG8 Informática Como se cria uma página web? Uma página Web é composta de textos e comandos especiais (tags) de HTML. Há vários disponíveis no mercado. Os navegadores podem acessar vários tipos de dados. imagens ou outros meios. Primeiro você cria as páginas em seu computador e as testas por meio do browser. o browser funciona independente de se estar conectado a Internet. O que um navegador faz com maior freqüência é lidar com a formatação e a apresentação de documentos da Web. Essa linguagem é bastante simples e tem como finalidade básica formatar o texto exibido e criar ligações entre as páginas da Web. O código pode ser escrito usando o mais simples editor de texto. um acrônimo de Hypertext Markup Language. o FrontPage da Microsoft. navegador. Usenet News. desconectado. como o bloco de notas do Windows. existem diversos tipos de browsers disponíveis no mercado.sausage. o navegador. que contém o texto da página. criando assim documentos com o conceito de hipertexto. Para que o conteúdo de um documento HTML possa ser formatado e exibido na Internet demos usar um programa chamado browser. etc. interpreta os comandos e exibe sua página. Ele lê o conteúdo do arquivo. Depois.siteaid. OS NAVEGADORES Para visualizar toda informação disponível na Internet é necessário um Browser. Como já foi citado acima.com). A melhor forma de se trabalhar desenvolvendo uma página HTML é off-line.

elas criaram nomes interessantes. Transmission Control Protocol (TCP) TCP é o protocolo que define a estrutura dos dados transmitidos que já foi explicado num capítulo anterior. na maioria dos casos. O HTTP define a maneira como os arquivos HTML devem ser enviados e recebidos. você precisará apenas de um navegador da Web. Usando um programa Telnet.AG8 Informática sistema são as duas tarefas que compõem a base da funcionalidade de um navegador. SERVIDOR WEB Para exibir páginas na Web e navegar por elas. 4. E um certo sentido. As pessoas que desenvolvem essas regras não foram apenas inteligentes. quando exibidos com um browser. File Transfer Protocol (FTP) Protocolo desenvolvido para a transmissão de mensagens longas entre duas pontas. nº 01. é possível se conectar a outro 12 . Os extensos nomes descritivos e geralmente difíceis de lembrar foram reduzidos a acrônicos como HTML. Hypertext Markup Language e Hypertext Transfer Protocol (HTML e HTTP) Juntos eles comandam a WWW. Servidor Web é o programa que é executado em um site da Web e que é responsável por atender ás solicitações de arquivos feitas pelo navegador da Web. como Golpher (esquilo) e World Wide Web (teia mundial). Telnet Um protocolo que define como um computador pode atuar como um terminal em outro. você precisará. World Wide Web. Internet Protocol (IP) Este é um dos protocolos mais básicos. Para divulgar páginas na Web. 3. PROTOCOLOS INTERNET Para que os computadores se comuniquem eles precisam seguir conjuntos de regras chamados protocolos. Você precisará de um servidor Web para divulgar documentos na Web. das redes que compõem a Internet. o IP forma o "mapa" da Internet e cada rede pode ser contatada em um ponto localizado nesse mapa. O IP é o sistema que define o "local". de um servidor Web. O HTML define um método de incluir formatação em arquivos de texto para que. ou endereço IP.

Gopher Os servidores que usam protocolo gopher apresentam seu conteúdo na forma de submenus. Defina as formas de acesso e faça comentários das vantagens e desvantagens de cada caso. Qual a importância de um servidor Web? 6. O que é o protocolo TCP/IP? E por que ele é tão importante? 4. Defina: a) Site b) Home Page c) Página Web d) Apresentação Web e) Servidor Web f) Provedor g) Host 3. Que programas são necessários para se criar uma página HTML? 5. ANOTAÇÕES 13 . NNTP (Network News Transfer Protocol) Servidores UseNet armazenam mensagens e as encaminham usando o protocolo NNTP. O que é um browser? E um editor HTML? 2.AG8 Informática computador e executar programas nele. Várias pessoas podem então ler notícias como o Outlook Express News. EXERCÍCIOS 1. como se estivesse sentado diante de sua própria máquina.

3. 4.AG8 Informática 2ª PARTE CAPÍTULO 3 Este capítulo têm como objetivo: 1. Organização do conteúdo Formas de navegação Storyboard Diagramação 14 . 2.

etc Documentação On-line: desde manuais. Por isso.AG8 Informática ORGANIZAÇÃO E NAVEGAÇÃO 1. O único limite da Web é a sua própria vontade. por exemplo. organizar e codificar suas páginas com uma maior probabilidade de sucesso. caixas de sugestões. etc. 2. guias de treinamento. Caso vá desenvolver uma apresentação Web para uma empresa ou pessoas é importante que você colha junto ao seu cliente seus objetivos. no momento: v v v v v v v v v Informações pessoais: informações sobre você. mas a determinação irá ajudá-lo a elaborar. etc. Publicações: como jornais. escolas e empresas particulares oferecem o ensino a distância através da Web. Pesquisas de opinião: a interatividade com o usuário através de formulários. motocicletas. ESTABELEÇA SEUS OBJETIVOS! Você deve se perguntar os que seus leitores procuram? O que deseja realizar com sua apresentação? Eles lerão a página inteira ou apenas uma parte dela? Antes de começar entrar com códigos ou imagens você deve pensar o que quero colocar em minha página? Como será estruturada? Ela está adequada ou não ao meu público alvo? Os objetivos não precisam ser grandiosos. Lojas on-line. se a sua idéia não estiver nesta lista ou parecer meio maluca ou ainda não estiver amadurecida. Com certeza encontra excelentes idéias e poderá amadurecer as suas e ter muitas outras. etc. revistas. pare e navegue um pouco pela Internet. dicionários. O QUE PRETENDE DIVULGAR? Que tipo de conteúdo você pode apresentar na Web? Praticamente o que quiser. 15 . Eis aqui alguns tipos de conteúdo mais comuns na Web. Hobbies ou interesses especiais: filmes. Perfis de empresa: o que uma empresa faz ou vende. Educação On-line: numerosas universidades. Catálogos de compras: comercialização de artigos.

Sua lista poderá Ter quantos tópicos desejar. a forma que imagina sua página. mas se perca listando uma quantidade enorme de tópicos (seu leitor poderá se cansar e se perder em meio a tantas opções). Ao ler esta parte reflita como suas informações se encaixaria em cada uma. etc. Você poderá combinar.AG8 Informática idéias. a princípio não importa a ordem. 16 . ficará bem mais fácil de começar seu trabalho. até mesmo. Esta é uma forma de começar a se organizar. DIVIDA SEU CONTEÚDO EM TÓPICOS Crie uma lista com os principais tópicos. Assim. duas estruturas e criar uma nova forma de navegação. v Como os leitores conseguem se deslocar pelo conteúdo de cada tipo de estrutura para encontrar as informações de que precisam . 3. ORGANIZAÇÃO E NAVEGAÇÃO Aqui descreverei algumas das estruturas e navegação e suas características e ainda considerações importantes como: v Os tipos de informação que se adaptam melhor a cada estrutura. v Como Ter certeza de que os leitores conseguem se localizar nos seus documentos (contexto) e achar o caminho de volta até uma posição conhecida. 4.

é fácil para os leitores descobrir a posição em que se encontram na estrutura. após ter de selecionar opções em muitos menus. normalmente com opções de avançar e retroceder. Exemplo: sistemas de ajuda. As hierarquias e os menus adaptam-se especialmente bem aos documentos online e de hipertexto. LINEAR Muito semelhante a forma como são organizados documentos impressos. Nas hierarquias. Mas procure não incluir muitos níveis para não aborrecer os leitores. Neste tipo de estrutura a home page é o título. Fica aborrecido demais para prosseguir. 2.AG8 Informática FORMAS DE ORGANIZAÇÃO 1. acaba esquecendo o que estava procurando. além de ser uma forma mais fácil de localizar informações. HIERARQUIAS A maneira mais fácil e mais lógica de estruturar os seus documentos. e todas as outras páginas acompanham-na em seqüência com vínculos que levam de uma página a outra. 17 . ou introdução. Procure manter apenas dois ou três níveis na sua hierarquia. HOME PAGE Em uma organização hierárquica. Este tipo de estrutura oferece um risco mínimo de ficar perdido. a home page fornece uma visão geral do conteúdo que está subordinado a ela e ainda define os principais vínculos ás páginas dos níveis inferiores da hierarquia. Pois estes.

ESTRUTURA LINEAR COM ALTERNATIVAS Você pode tornar a estrutura linear menos rígida permitindo que o leitor se desvie do caminho principal. As ramificações podem se reunir ao tronco principal em algum ponto mais adiante.AG8 Informática Uma organização linear é muito rígida e limita tanto a liberdade dos seus leitores de consultar as informações quanto a sua própria liberdade de apresentá-las. no ambiente on-line. por exemplo. ou continuar se ramificando em níveis inferiores seguindo caminhos próprios até chegar a um "fim". um material que já tenha esse tipo de estrutura no ambiente off-line. 3. caso precicem rever alguma etapa ou já conheçam alguma parte do conteúdo. Como por exemplo: instruções passo-a-passo ou treinamento baseado em computador. 18 . em um nível mais baixo da estrutura. As estruturas lineares são ideais para apresentar. uma estrutura linear com ramificações alternativas que partam de um único tronco. Além de ramificar a estrutura linear. Pode ter. você pode também oferecer vínculos que permitam aos leitores avançar ou retroceder na cadeia.

AG8 Informática 4. COMBINAÇÃO DAS ESTRUTURAS LINEAR E HIERÁQUICA Uma forma comum de organizar um documento na Web consiste em obter uma combinação das estruturas linear e hierárquica. 19 . Como essa é uma estrutura linear e hierárquica. em cada página do roteiro você deve oferecer vínculos para o leitor avançar. retroceder. retornar ao início e subir um nível. Essa estrutura combinada ocorre com maior freqüência quando documentos de estrutura rígida. Um exemplo são os famosos FAQ ( Frequently Asked Questions). são apresentados no ambiente on-line. porém lineares. A combinação de documentos lineares e hierárquicos funciona bem desde que haja pistas em relação ao contexto.

3. DICAS PARA SEU STORYBOARD 1. Coloque cada tópico em uma página. ela será a porta da sua apresentação. 20 . uma técnica cinematográfica. consiste no processo de criação de um resumo com sketh (rascunho) da aparência final do seu trabalho antes de você efetivamente pôr em prática suas idéias. No caso de grande documentação.AG8 Informática O STORYBOARD A próxima etapa do planejamento da sua apresentação da Web consiste em determinar o conteúdo que será apresentado em cada uma das páginas e criar alguns vínculos simples que possibilitem a navegação por essas páginas. O storyboard fornece uma estrutura e um plano globais para o filme. 4. mas se tiver um grande número de tópicos. Defina bem a forma de navegação entre as páginas. os vínculos básicos e talvez até mesmo uma idéia conceitual do tipo de imagens gráficas que você usará e onde elas serão apresentadas. a manutenção e vinculação pode se tornar maçante. em que cada cena e cda tomada de câmera é esboçada na ordem em que ocorre no filme. Para estruturas muito pequenas talvez não seja necessário criar um storyboard. Tenha sempre em mente seus objetivos. torne a navegação para os leitores a mais intuitiva possível. indicando os tópicos que serão incluídos em cada página. O StoryBoard de uma apresentação é um conceito emprestado do cinema. lembre-se. Esta técnica fornece um esboço geral de como a apresentação Web irá ficar quando estiver pronta. o storyboard deverá ser dividido em áreas e cada equipe cuidará da parte que lhe cabe. Tome cuidado com o que será incluindo na home page. Se houver formas alternativas. 2. Procure não se distanciar deles. que permitem que o diretor e sua equipe tenham uma idéia clara de onde cada tomada se encaixa no filme. O uso de storyboard. O uso de storyboard ajuda-o a visualizar a apresentação como um todo e a prever sua forma final.

etc. quais os tópicos abordados. Uma boa diagramação também garante o retorno do internauta. a diagramação. Tudo que você deseja colocar em sua página precisa ser colocado de forma agradável ao leitor. Por que é tão importante. O que é storyboard e qual a sua utilidade? 4. etc.AG8 Informática ] DIAGRAMAÇÃO A disposição de imagens. antes de começar a construir uma apresentação Web. 3. disposição das imagens. Pense no que gostaria de colocar em suas páginas. Faça um storyboard da sua apresentação web. Daí abordarmos. se haverá links para outras partes da mesma página e os links para outras páginas. forma como o texto será apresentado. ANOTAÇÕES 21 . de forma geral. Trata-se da disposição de elementos que compõem uma página. definir objetivos e tópicos? O que mais é necessário? 2. Vamos começar a planejar sua Home Page pessoal. textos. Descreva cada forma de organização de páginas citada acima. Deve ser observado o tamanho das fontes. Em que casos é aconselhável usar o storyboard? 5. vídeos. Esta palavra vêm do mundo dos impressos. etc. Faça uma observação sobre o que você compreendeu de cada uma. EXERCÍCIOS 1.

2. 3. Tratar das etapas do projeto de um Website Quais os profissionais envolvidos Administração do site Dicas para não cometer erros graves na hora de projetar e construir um Website 22 .AG8 Informática 2ª PARTE CAPÍTULO 4 Este capítulo têm como objetivo: 1. 4.

O 2º ponto é o design do site (estrutura de navegação e projeto gráfico). composto de fases e desenvolvido por pessoas de backgrounds diferentes.AG8 Informática PROJETO DE WEBSITE 1. Estruturar a informação de forma que a navegação seja o mais intuitiva possível faz com que sua apresentação Web tenha muito mais chance de sucesso. Para qual tipo de público você está disponibilizando informação? Quais são as prioridades e interesses deste público? Que tipo de conexão é mais usada por ele? As respostas para a segunda pergunta certamente envolvem três pontos: o 1º é o conteúdo. A construção de um Website deve.HIPERTEXTO É a utilização da HTML como linguagem para desenvolvimento da sua página. ser entendida como um projeto. É o elemento central. Dominá-la é importante para um bom desenvolvimento do seu projeto. antes de mais nada. A primeira muito relaciona-se ao público alvo. 2. desde o desenho de sua estrutura de navegação e forma de disponibilização da informação até o desenvolvimento do projeto gráfico. O conceito de Web Design envolve todos os aspectos da construção de um site. considerando o tipo de informação disponibilizada conforme seu 23 . o que é um erro.CONTEÚDO E FORMA O que faz uma pessoa entrar em um site? O faz a pessoa querer retornar? Estas perguntas devem sempre estar na cabeça das pessoas de uma equipe de construção de sites. 3.WEB DESIGN E VISÃO DO PROJETO A maioria das pessoas associam Design unicamente ao projeto gráfico de um WebSite.

A equipe de profissionais adequada seria composta: a) Analistas de sistemas (com experiência em gerência de Informação). que auxiliam o trabalho do Analista de sistemas ou do Design Gráfico (ilustradores. c) Programadores. responsável pelo projeto gráfico. JavaScript. que. Outro ponto é a atualização para que não perca uma das principais características da Internet: a dinamicidade.EQUIPE PARA CONSTRUÇÃO DE UM WEBSITE A construção de um Website exige uma equipe com backgrounds diferentes. Java. responsável pela organização da informação. 4. CGI. b) Design Gráfico. Mas é importante definir o papel de cada na construção do site. É muito haver o acúmulo de funções por membros da equipe. 24 . etc. A equipe deverá ter um coordenador. digitadores. Depois do site construído surgirá uma outra pessoa: o WebMaster. responsável em fazer o trabalho fluir de forma eficiente. podem ser programadores HTML.AG8 Informática público alvo. dependendo do tipo de site. dentro de um cronograma aproveitando o máximo de cada profissional. que será responsável pela administração do site. etc.). d) Assistentes.

acrescentar ou retirar páginas.. Aqui estão alguns dos critérios que deverão ser observados para o projeto do site: 1. Material que requer intercâmbio de informações. com suas respectivas visões de projeto. pode-se então. ex. guias.. para que as sugestões de áreas diferentes possam se integrar.: agenda de reuniões. grandes bases de dados textuais. 4. isso facilitará também o processo de modificar. ajudará a Ter uma visão geral do site. Uma vez discutidas e analisadas todas as sugestões. Nesta etapa. cujo objetivo é obter o maior número de idéias possíveis para a criação da estrutura de navegação e do projeto gráfico. o Design Gráfico e o Analista de Sistemas. 2. etc . O Analista de sistemas deverá colher toda informação e analisa-la. Material que é mais valoroso se atualizado freqüentemente e mais facilmente. Material que tire vantagem da estrutura não linear de navegação do hiperdocumento. ex.. Critérios de avaliação das informações: Qualquer documento pode ser disponibilizado através da Web mas alguns se tornam mais úteis quando adequados as novas características dessa nova mídia. ex. No futuro.. Material que possa ser totalmente substituído por uma impressão. coordenam essas reuniões. etc.: gráficos e textos (imagens de alta qualidade não são recomendáveis).. Uma vez discutidas e analisadas todas as sugestões de áreas diferentes possam se integrar. 3. criar a estrutura de navegação. 25 . preparandoa para a etapa seguinte.AG8 Informática FASES NA CONSTRUÇÃO DE UM WEBSITE 1ª Fase : Organização da Informação A primeira etapa é a organização da informação que irá compor seu site. Ex.. 2ª Fase : Conceituação do site e definição da estrutura de navegação Normalmente nesta etapa envolve uma ou mais reuniões de criação. etc . desenhar fluxogramas de navegação. fichas de inscrição..: formulários de pesquisa. Todos os membros da equipe devem participar das reuniões de criação. calendários.. onde se iniciará o design do site. agenda telefônica. O Coordenador da equipe. mostrando como as páginas estão linkadas (conectadas) entre si.: manuais.

Para ter uma garantia que suas imagens serão sempre bem visualizadas. informe no site. enquanto o Analista de Sistemas e programadores montarão a estrutura de navegação (seja em HTML. É importante entrar no site a partir de várias plataformas e conexões diferentes. visual ou estrutural. 4. DICAS E CONSIDERAÇÕES IMPORTANTES 1. O melhor resultado para isso será trabalhar suas imagens em RGB e depois indexálas com o menor número de cores possível. os membros da equipe poderão então trabalhar cada um em sua área: o Design Gráfico e seus Assistentes desenvolverão o projeto gráfico. tente sempre optar por soluções que melhor se adaptem a plataforma mais usada. Por exemplo: monitor 14 polegadas com resolução de 640x480.gif). JavaScript ou no que tiver sido escolhido como mais adequado para a construção do site).jpeg. 5. Java. que pode mudar. Na criação do projeto gráfico. que resultará em arquivos pequenos. 2. Num projeto gráfico deve sempre se perguntar se sua apresentação ficou adequada ou não ao que seu cliente desejava e ao seu público alvo. faça com a melhor diagramação das páginas aconteça quando o site é visto nesse tipo de monitor e resolução. A página de entrada de um site é muito importante. 3. Ela deve ser projetada de forma que diga a que o site se destina. 4ª Fase: Testes Antes de ser disponibilizado para o público em geral é importante testar a navegação de todo o site. Caso o seu site deva ser diagramado para uma resolução ou tamanho de monitor diferentes do mais usado. 26 . salve-as em formato . seja de forma textual. procure trabalhar com imagens paletizadas (formato . de acordo com o tamanho de monitor e resolução usada. Caso precise utilizar imagens True Color.AG8 Informática 3ª Fase: Montagem do Site Uma vez definida a estrutura de navegação. Sempre indique em que browser sua página será melhor visualizada. para testar a velocidade de carga e consertar falhas de diagramação. checando os links de texto e imagens.

27 . A netiqueta e Domínio público: A Web foi criada com base em ser capaz de atar links de hipertexto de qualquer outra localização da rede. Direitos autorais: A proteção de direitos autorais não costuma ser muito evidente na Web. não pense que a net é igual a outras mídias. quando você disponibiliza um site.AG8 Informática 6. O desejo original de uma página não é protegido. O conteúdo e forma como ele é apresentado serão os principais atrativos de suas páginas. Um link ou URL não é protegido mas uma lista de links(como no caso das bibliotecas virtuais) deve ser protegido pelos direitos autorais. porém a netiqueta recomenda que se peça permissão aos Webmasters sempre que possível. 8. vídeo ou áudio originais deve ser protegido. implica em você permitir a outros "linkar" sua página de Web. Mas qualquer texto. Consequentemente. Por isso. 7. gráfico. a não ser que o ponto chave sejam as imagens.

Essa rotina pode ser manual ou automatizada dependendo do tamanho de seu site. c) Banners: trata-se de uma tarja com informações promocionais sobre seu site que deve aparecer estrategicamente localizada nas páginas de sites que vendem espaço publicitário. São na verdade imagens clicáveis para o site em promoção. etc. ESTATÍSTICAS Mostram as páginas mais visitadas. b) Search engines: as informações de seu site devem ser organizadas da melhor forma possível para a captura pelos inúmeros recursos de busca existentes na rede. CHECAGEM DE LINKS É importante estabelecermos uma rotina periódica tanto para checagem dos links internos de sua página quanto para os externos. 3. Existem softwares específicos para essa tarefa.AG8 Informática ADMINISTRAÇÃO DE UM SITE Todo WebSite deve ter um Webmaster. horários mais visitados. ele é a autoridade máxima no site e coordena tanto seu desenvolvimento quanto sua manutenção além de responder a toda correspondência enviada ao site. As principais formas de divulgação on-line são: a) E-mail: o envio de propaganda não solicitada pela Internet é uma prática não recomendada. dias mais visitados. 2. 28 . Seu endereço eletrônico deve ser divulgado na primeira página e em todas as outras que exijam um processo interativo. 1. Assim é possível definir o perfil do usuário e desta forma atualizar o site de forma a atrair sempre o maior número de visitantes. DIVULGAÇÃO Com o potencial de audiência de milhões encontrados na Internet é necessário utilizarmos todos os recursos disponíveis nesta para conseguirmos atingir uma audiência chave.

Qual o melhor formato de arquivo para se trabalhar com imagens? 6.AG8 Informática 4. Quais as fases na construção de um site? Dê as características e faça observações suas para cada uma. inclusive o arquivo correspondente a primeira página do site (home). O que é um WebDesign? 2.html" como "default" para a página principal. Isto. quando chamarmos o endereço da página não precisaremos escrever o nome do arquivo. Em um ambiente Unix o arquivo principal de cada módulo deve ser sempre chamado de "index. Os arquivos e diretórios devem ter nomes que identifiquem seu conteúdo e as imagens devem ser colocadas em um diretório específico. Quais as principais preocupações no projeto de um WebSite? 3. A cada nova atualização uma cópia backup da versão anterior de cada arquivo atualizado deve ser feita. ORGANIZAÇÃO DE ARQUIVOS E DIRETÓRIOS Os diretórios devem ser estruturados de acordo com a própria estruturação da informação. Quais seriam os profissionais indicados para se compor uma equipe para projetar e construir um site? 4. Se as informações estão estruturadas por módulos e submódulos estas gerarão diretórios e subdiretórios. O sistema assume o arquivo "index. 5.html". Quem é responsável pela administração e atualização de um site? 7. Quais as formas de divulgação de um site? ANOTAÇÕES 29 . EXERCÍCIO 1. porque.

Tags ou comandos 3. Elementos que compõem uma página HTML 30 .AG8 Informática 3ª PARTE CAPÍTULO 05 Este capítulo abrangerá : 1. Uma linguagem de marcação: HTML. 2.

Assim como outras linguagens. Os arquivos recebem a extensão . sua finalização deve ser feita usando-se a barra de divisão /. As tags normalmente são especificadas em pares. O formato genérico de uma tag é: <nome da tag> texto</nome da tag> Mas algumas tags não possuem finalização. As tags são identificadas por estarem entre os sinais < > e < / >.AG8 Informática HTML: UMA LINGUAGEM DE MARCAÇÃO A HTML é uma linguagem de marcação.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 página a ser exibida geralmente recebe o nome de index. Vejamos agora alguns comandos e o tipo de efeito que estes causam ao texto quando interpretados pelo browser. Entre os sinais < > são especificados os comandos propriamente ditos.html. Criar um documento em uma linguagem de marcação significa que você começa com o texto da sua página e inclui tags especiais no início e no final de determinadas palavras ou parágrafos. indicando que a tag está finalizando a marcação de um texto. Para que um browser interprete corretamente o 31 . a HTML possui uma estrutura básica para seus programas. No caso de tags que necessitam envolver um texto. As tags indicam as diversas partes da página e produzem diferentes efeitos no navegador. dependendo do provedor que hospeda a página.htm ou . delimitando um texto que sofrerá algum tipo de formatação.

A área de cabeçalho é opcional e é delimitada pelo par de comandos <head> e </head>. a estrutura principal. Mas é conveniente usá-los. Um programa HTML possui três partes básicas. A maioria dos comandos será especificado no corpo do programa que é delimitado pelas tags <body> e </body>. um programa HTML pode funcionar sem eles. Esta tag delimita o corpo do programa. É um comando obrigatório. Eles são opcionais. Estes comandos para cabeçalho são usados para especificar alguns poucos comandos da linguagem. tag. estes comandos delimitam o texto que irá aparecer na barra de título do browser. Todo programa deve iniciar com o comando. o cabeçalho e o corpo do programa. pois o título da página é acrescentado através deles. ou seja. Esse par de comandos é essencial. porém é melhor assumir como parte fundamental do programa tais comandos. aonde a maior parte do comando serão colocados 32 . Alguns browsers até dispensam seu uso.AG8 Informática programa. <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY> Esta tag marca o início do programa HTML Esta tag marca início e fim de cabeçalho Esta tag delimita o texto que irá ser visualizado na barra de título do browser.E ainda temos as tags <Title> e </Title>. <html> e ser encerrado com o comando </html>. ele deve possuir alguns comandos básicos que sempre deverão estar presentes.

Pode ser formatado através de vários comandos. imagens e links. LINK É um trecho que aparece destacado do restante do texto. ou seja. TÍTULO É o texto que aparece na barra de título do browser. responsáveis pela chamada de outras páginas para a tela. Existem seis tamanhos prefixados de cabeçalho. clicando na figura saltamos para outro local.AG8 Informática 1. Todos esses elementos são posicionados na página por meio de comandos específicos da linguagem. CABEÇALHO São linhas de texto com tamanhos especiais. IMAGEM São figuras. TEXTO É a informação mais comum dentro da página. Uma figura também pode ser usada como um link. textos. Ao clicar no link. OS PRINCIPAIS ELEMENTOS DE UMA PÁGINA HTML Uma página HTML é composta basicamente de títulos. o browser acessa outra região da página atual ou uma página localizada em qualquer lugar da Internet. desenhos e fotos usados para ilustrar a página. normalmente sublinhado e com outra cor. 33 . parágrafos.

TÍTULO O título de uma página web indica qual o assunto abordado e irá aparecer na barra de título do browser. Escolha um texto curto e que descreva o conteúdo da página 34 . Este título é utilizado por programas de lista (hotlist) do seu navegador e também por outros programas que catalogam páginas da Internet.AG8 Informática TÍTULO IMAGEM CABEÇALHO TEXTO LINK 2. Você poderá ter apenas um título 2. Considerações sobre o título: 1. Para atribuir um título a página você deverá utilizar a tag: <Title> </Title>. texto deverá ser simples e não poderá ter outras tags 3. Esta tag sempre será incluída no cabeçalho (entre as tags <Head> </Head> e descrevem a mesma).

ele será o responsável pela administração de um site. <H1> Texto </H1> Experimente o seguinte código: </html> <head><title>Cabeçalhos</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 código em HTML: <html> <head><b> A FORMAÇÃO DE UM WEBMASTER</b></HEAD> <body> <p> A formação de um <i>Webmaster</i> envolve diversos conhecimentos. como capítulos de um livro. de H1 a H6. que aplicam um tamanho de fonte diferenciado no texto que envolvem. uma linha antes e depois e além disso dão um efeito de negrito. A HTML divide seis tamanhos de cabeçalhos.AG8 Informática 3. CABEÇALHOS Os cabeçalhos são usados para dividir seções do texto.<br> Afinal. Os comandos: 35 . O maior tamanho é o H1 e o menor é o H6. </body> </html> tipos de Em nosso exemplo introduzi mais algumas tags.

Este comando inseri uma linha em branco no seu local ou na linha seguinte á qual ele foi inserido. avançar uma linha em branco e iniciar o texto na Segunda linha após o final do parágrafo anterior. posiciona-se na linha seguinte ao comando <p>. Quando um comando <p> é inserido em um local do programa. Faz uma quebra de linha. Esse comando pode aparecer individualmente ou em par: <p> </p>. 36 . PARÁGRAFOS Para forçar o início de um novo parágrafo. o browser irá sempre avançar uma linha em branco. A função deste comando é avançar para a linha imediatamente após aquela em que ele ocorre. ou seja. deve ser usado o comando <p>. QUEBRA DE LINHA O comando <br> faz uma espécie de quebra de linha.AG8 Informática <B> </B> <I> </I> <P> </P> <BR> Aplica o estilo negrito ao texto Aplica o estilo itálico ao texto. caso esteja no meio de uma linha e não em seu final. Inicia um novo parágrafo. 5. 4.

5. 6.html. Use a linguagem HTML e faça uma página falando das suas expectativas para este curso. Seu texto deve ter no máximo 5 linhas. a) b) c) d) e) f) g) h) i) 7. atriz. 3. 4. Pode ser alguém que você admire. ou uma pessoa pública (ator. Quais os principais elementos exibidos em uma home page? O que é link? Qual as função 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 seção e crie seu primeira página HTML. Salve na unidade A: com o nome de projetos. Seu texto deve ter no máximo 5 linhas. 2. como pretende usar o conhecimento que está adquirindo e quais outros cursos que pretende fazer. ANOTAÇÕES 37 .AG8 Informática EXERCÍCIOS 1. Faça um página utilizando os comandos que você já conhece para falar sobre uma pessoa.html. etc). Qual a extensão de um arquivo de um programa em HTML? A primeira página de um site geralmente recebe que nome? Escreva a estrutura básica de um programa HTML. Salve na unidade A: com o nome de Pessoa admirável. do seu círculo de amigos. 8.

Tags de formatação de texto lógicas e físicas 2. Texto pré-formatado 3. Endereços.AG8 Informática 3ª PARTE CAPÍTULO 06 Este capítulo abrangerá : 1. citações e comentários 38 .

Como já percebeu os comandos. Para alterar a formatação de um texto em HTML existem dois tipos de estilos que devem ser observados: o estilo lógico e o estilo físico. Alguns destes comandos já foram introduzidos no capítulo anterior. em HTML você poderá utilizar efeitos em seu texto. Os principais comandos de estilo: TAG STRONG TYPERWRITER BIG SMALL SOBRESCRITO SUBESCRITO BLINK NEGRITO ITÁLICO 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> FUNÇÃO Similar ao negrito Deixa o texto com espaçamento 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 itálico Aplica um sublinhado (em alguns browsers esta tag não funciona) Estes são os mais utilizados. 39 .AG8 Informática TAGS DE FORMATAÇÃO Assim como em um editor de texto. porém há outros que merecem atenção. tags. trabalham em contêiner.

Este estilo não indica como o texto será formatado e sim como será utilizado no documento. Não é possível garantir que um texto destacado que utilize tags deste tipo sempre será apresentado em negrito ou itálico. Quando você quer dar um exemplo de endereço para a Internet sem criar link. <CODE> Esta tag indica um código de exemplo a ser exposto. <SAMP> Esta tag indica texto de exemplo. ESTILO LÓGICO As tags deste tipo indicam como o texto destacado deve ser utilizado e não como será apresentado. 40 . Dependerá do browser. Geralmente em itálico <STRONG> Esta tag enfatiza ainda mais que a anterior. Em negrito.AG8 Informática 1. por exemplo. De forma diferente do restante do texto. Algumas tags de estilo lógico utilizadas em HTML padrão: <EM> Indica que os caracteres deverão ser enfatizados de alguma forma.

AG8 Informática 2. Algumas tags de estilo físico para HTML padrão: <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 itálico fonte de máquina de escrever com espaçamento uniforme. ESTILOS FÍSICOS Este estilo de tag realmente altera a formatação do texto. no estilo anterior você não possui garantia que o texto irá ser visualizado da forma que planejou. 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 . Neste estilo ele será visualizado da forma que atribuir as tags a ele.

CITAÇÕES E COMENTÁRIOS A tag <BLOCKQUOTE> é utilizada na criação de citações longas que não devem ser aninhadas em parágrafos. investindo primeiro em estruturas especializadas para atender á demanda do mercado (. E. Uma observação importante é que. as agências de propaganda mais uma vez largaram na frente dos escritórios de design. 3. O texto pré-formatado é excelente para apresentar código-fonte com seus espaçamentos adequados... Estima-se um crescimento de no mínimo 50% ao ano até 2005. SINTAXE: <PRE> TEXTO TEXTO TEXTO </PRE> 4. neste espaço elas irão funcionar normalmente. ao usar tags de estilo ou vínculo.)".AG8 Informática Optando por utilizar tags do estilo físico. </BLOCKQUOTE> 42 . caso o navegador não reconheça uma das tags ele a irá substituir por outra equivalente ou ignorará a formatação. Maria Edicy Moreira. Um exemplo: <BLOCKQUOTE> "O mercado de webdesign é um dos segmentos de design com maior potencial de crescimento para os próximos anos. Este recurso pode ser utilizado para criar tabelas mas não é recomendável. Mas você possui a opção da tag <PRE> </PRE> para estabelecer uma formatação através de um editor de texto e que esta formatação permaneça na sua página html.. TEXTO PRÉ-FORMATADO O texto de uma arquivo em HTML é formatado através das tags. na corrida rumo a esse novo eldorado. não tags de elemento. A tag <CITE> destaca citações curtas.

51 Caso queira fazer comentários a respeito do seu código HTML apenas como referência pessoal e não para ser exibido em suas páginas você deverá fazer o comentário da seguinte forma: 43 .AG8 Informática Visualização no Internet Explore 5 Visualização no Netscape 4.

-comentário. Geralmente são apresentadas na parte inferior de cada página. e você poderá utilizar a tag <br> para separar linhas. 44 .> 5. com quem o leitor deve entrar em contato caso queira ter alguma informação ou fazer alguma observação. esta tag somente terá efeito sobre o texto se ele estiver sendo visualizado através do Netscape.Me<br> Última atualização: 10 de Janeiro de 2000<br> Todos os direitos autorais são reservados<br> </address> Esta é uma excelente forma de garantir que as pessoas entrem em contato com você caso necessitem e também uma forma de estar melhorando a sua HP (Home Page) através de sugestões.com.. Este recurso geralmente é utilizado para chamar a atenção do leitor sobre uma determinada parte do texto. que ainda veremos. Mostra quem confeccionou aquela página.teixeira@bol.AG8 Informática <!. <ADDRESS> TEXTO</ADDRESS> Vejamos um exemplo: <HR> <address> Cassia. Estes endereços são precedidos de um fio <hr>. esse efeito terá uma dessas características: 1. ENDEREÇOS Esta tag é utilizada para identificar autorias de sua página. A TAG <BLINK> O texto que se encontrar entre estas tags irá aparecer piscando. 6. Um bloco cinza ou branco ficará piscando atrás do texto.br<br> A serviço de Ag8 Informática Ltda . texto ficará piscando em intervalos regulares 2. Dependendo da versão do Netscape.

Um tutorial usando todas as tags vistas até então.AG8 Informática O problema do efeito piscando é que ele chama atenção excessivamente sobre aquela parte do texto tirando a atenção do leitor do restante do texto. desagradável e irritante. Como devo utilizar a tag <ADDRESS> </ADDRESS> e qual sua finalidade? ANOTAÇÕES 45 . e queira ensinar a outras pessoas. A maioria dos projetistas web consideram este efeito feio. Qual a utilidade da tag de pré-formatação e qual sua sintaxe? 6. Crie uma página HTML sobre algo que goste de fazer. Coloque os comandos HTML abaixo para que o texto tenha o seguinte efeito: Tutorial de HTML 3. Os comandos de formatação podem ser combinados para aplicar mais de um efeito ao mesmo tempo? 2. Em HTML poderíamos colocá-lo como se fosse passar a colher com bastante força no fundo de uma panela de alumínio. 4. Por que a tag Blink não é bem aceita pela maioria dos projetistas de páginas Web? 5. Utilizando principalmente todos os comandos de formatação. Já imaginou? EXERCÍCIOS 1. e que faça muito bem.

Face="name [. 2. tipo e cor da fonte de seu texto você utilizará a tag <font> </font> que é do tipo contêiner. Os valores permitidos vão de 1.name2[. Se for especificado um número antecedido com o sinal de adição ou subtração o valor da fonte será acrescido ou subtraído nesse valor. o texto será apresentado na fonte padrão. 46 . Sua sintaxe é a seguinte: <font size=" " face=" " color=" "> </font> 1. SIZE O tamanho Size especifica o tamanho da fonte utilizada. O padrão é 3. o texto passará a ser exibido em 7. Seu valor será especificado no formato hexadecimal. FACE Esse parâmetro permite que seja escolhida uma fonte diferente para o texto. Arial" size=1> 3. Se não houver sinal a fonte será exibida naquele valor. de maneira que. o menor.AG8 Informática FONTES Para fazer alterações no tamanho. <font face="Agaramond. então. a 7. o maior. Podem ser especificadas várias fontes. se o sistema não possuir uma determinada fonte ele irá utilizar outra. COLOR Este parâmetro especifica a cor do texto.name3]] Se não forem encontradas as fontes especificadas. RGB ou através de um nome predefinido de cores. Vamos a um exemplo: se eu estiver trabalhando com uma fonte 5 e for especificado <font size=+2.

AG8 Informática Algumas cores: Aqua Black Fuchsia Green Brown Olive Silver White COR #70DB93 #000000 #FF00FF #00FF00 #800000 #808000 #E6E8FA #FFFFFF CÓDIGO Blue Cyan Gray Lime Navy Red Teal Yellow COR #0000FF #00FFFF #C0C0C0 #32CD32 #23238E #FF0000 #008080 #FFFF00 CÓDIGO Vamos a um exemplo de código: <html> <head> </title>Experiência 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 Informática
</html>

4. ALINHAMENTO
Pense no que é alinhar um texto no Word ou no StarWrite. Pois então você sabe o que é alinhar um texto. É claro que você não irá alinhar em HTML da mesma forma, terá que utilizar tags e parâmetros para estas tags. Para alinhar um texto você utilizará o atributo ALIGN com valores : LEFT (esquerda), RIGHT (direita), CENTER (centralizado) e JUSTIFY (justificado).

PARÁGRAFOS
O comando <p> inicia um novo parágrafo onde o texto é automaticamente alinhado pela margem esquerda da tela. Caso você deseje que seu novo parágrafo 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 inclusão do plug-in necessário 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 multimídia e á sua versatilidade. Sua finalidade é a criação de imagens vetoriais com animação, som e interatividade.</p> <p align=center> Depois veremos mais sobre o Flash</p> </body> </html>

CABEÇALHO
Quanto ao cabeçalho você só poderá alterar o alinhamento para direita e centralizado, a esquerda é alinhamento padrão.

48

AG8 Informática
Exemplo: <h2 align=center>Este é um exemplo de cabeçalho com alinhamento</h2> Vamos ao código-fonte para verificarmos a diferença:

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

5. ALINHAMENTO COM O COMANDO <DIV>
A utilização desta tag é uma forma prática e rápida de alinhar bloco de texto. A abreviatura DIV significa divisão. 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 contrário do atributo Align, que tem de ser incluído em diversas tags. 2. A tag <DIV> pode ser usada para alinhar qualquer elemento (cabeçalho, parágrafos, citações, imagens, tabelas, etc.). O atributo Align encontra-se disponível apenas em um número 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 Informática OBSERVAÇÃO:
Além do atributo align=center temos a tag <center> funciona igualmente ao atributo. </center> que

Vamos treinar um pouco com este código-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 repositório de informações, mas cresceu muito além disso. A medida que a Web desenvolveu-se, as ferramentas também desenvolveram-se. Ferramentas simples de marcação como HTML foram unidas por linguagens de programação de verdade. Incluindo <b>JavaScript</b>, que na verdade não é uma linguagem de programação mas uma <b>linguagem Script hospedeira</b> de páginas em HTML.<br> <p> <div align=center> <h2>Entendendo a utilidade do JavaScript</h2> Como a HTML é uma linguagem apenas de marcação de texto simples, ela não pode responder para o usuário, tomar decisões, nem autorizar tarefas repetitivas. Tarefas interativas como essas exigem uma linguagem mais complexa. <h3>Eu precisarei usar JavaScript em todas as minhas páginas</h3> Apenas se quiser aprimorá-las e interagir com o usuário. </div> </body> </html>

6. CARACTERES ESPECIAIS
Há caracteres que não podem ser obtidos por meio do teclado. Eles podem ser inseridos em sua página através da especificação de um código especial que o browser interpreta e substitui por um caracter específico. Esses códigos podem ser obtidos utilizando-se uma nomeclatura definida pela ISO LATIN - 1 ou a partir de uma entidade HTML.

50

AG8 Informática
A norma ISO utiliza um código composto pelo caractere & seguido do símbolo # e, então, de uma combinação numérica com ponto-e-vírgula. Já a entidade HTML usa o caractere & seguido de uma palavra que identifica o símbolo com ponto-e-vírgula. Caso você queira escrever uma página HTML em outro idioma terá que usar bastante esses caracteres especiais. Imagine que você queira fazer uma página 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 símbolos 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 seção do texto como parágrafo inserindo uma quebra de linha.<br> <p> Já o comando &ltP&gt é para indicar início de uma novo parágrafo. </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 acentuação comum do teclado nas suas páginas podem até parecer que tudo irá correr tudo bem. Mas alguém que visualizar suas páginas em um computador que não tenha as mesmas configurações de 'vídeo e teclado, alguns caracteres podem não sair da forma desejada. Por exemplo: A palavra café, se você utilizar esta palavra com a acentuação do seu teclado, com certeza na visualização do seu browser ficará perfeita, mas pode ser que em outros computadores com a configuração diferente não apareça da mesma forma. O ideal é colocá-la assim: Caf&eacute; ou ca&#233;

51

Caf&eacute.Crie uma página HTML utilizando os recursos vistos acima. &ordf. &quot. CARACTER ESPECIAL à â ã ü & ® " " ª º ? SÍMBOLO &agrave. &aacute. Use esta página para falar da utilidade da Internet na vida de pessoas que não trabalham com informática. sugestões para aqueles que querem abrir negócios novos envolvendo Internet. &#38. &#63. &uuml. = á @ $ % SÍMBOLO &lt &gt &#123. &#58. sem ser um racker. &#61.AG8 Informática E se desejasse colocar a palavra entre aspas: &quot. EXERCÍCIOS 1. &atilde. &#59.&quot ALGUNS CARACTERES ESPECIAIS CARACTER ESPECIAL < > { } : . ANOTAÇÕES 52 . &#64. &ordm. &#125. &#34. &acirc. &#174. &#36. &#37.

há basicamente dois tipos de listas: as ordenadas. você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista não ordenada (ordered list) é o comando <OL>. que atribuem um número para cada elemento da lista. <UL> </UL> <LI> Texto <LI> Texto 2. 53 . que deve envolver o primeiro e o último item da lista. que deve envolver o primeiro e o último item da lista. e as listas ordenadas. que contêm uma série de itens sem numerá-los. 1. você deve usar um conjunto de comandos cuja sintaxe básica é mostrada a seguir. O comando que gera a lista não ordenada é o comando <UL> (unordered list). O COMANDO <OL> Para criar uma lista básica não ordenada. Cada item da lista deve ser precedido do comando <LI> (Line item). Trabalhar com listas é simples. Cada item da lista deve ser precedido do comando <LI> (line list).AG8 Informática LISTAS Vamos colocar assim. Trabalharemos com os comandos <ul> para listas não ordenadas e <ol> para as listas ordenadas. O COMANDO <UL> Para criar uma lista não ordenada. <OL> </OL> <LI> Texto <LI> Texto OBSERVAÇÃO: Na lista não ordenada cada item receberá um marcador ("bolinha") e a numerada receberá automaticamente números.

etc.3.AG8 Informática Você poderá personalizar sua lista ordenada com o atributo TYPE e START. ii. c. .2. · "1" : Especifica que os algarismos arábicos padrão devem ser usados para · · · · numerar a lista ( 1.4.. d. II. etc. O atributo Type pode assumir cinco valores para definir o tipo de numeração a ser usado na lista. C. B. D. b. etc.).) "i" : Especifica que os algarismos romanos minúsculos devem ser usados para numerar a lista ( i. Exemplo: <p>Ingredientes para bolo</p> <ol> <li>Farinha de Trigo <li>Açucar <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>Açucar <li>Manteiga <li>Ovos <li>Leite <li>Fermento </ol> 54 . "a" : Especifica que as letras minúsculas devem ser usadas para numerar a lista (a. iv.) "A" : Especifica que as letras maiúsculas devem ser usadas para numerar a lista (A. IV. etc.. III.) "I" : Especifica que os algarismos romanos maiúsculos devem ser usados para numerar a lista ( I.). iii.

Usando o Start.AG8 Informática Usando o atributo START você poderá determinar o número ou a letra que inicia sua lista. Usando o atributo VALUE em um item da lista poderemos alterar os valores da lista apartir de qualquer ponto. você pudará esse número. Um exemplo: <ol Type=a start=3>. O ponto inicial é 1. Ex.: <UL> <LI> <LI value=10> <LI> </UL> 55 .

Border="valor em pixel" Vspace="valor em pixel" Hspace="valor em pixel" O único obrigatório é o src. para especificar o espaço que deve ser deixado acima e abaixo da imagem. especificação da largura da borda da imagem.gif"> Poderemos acrescentar a esta imagem os seguintes atributos: Width="valor em pixel" Height="valor em pixel" Align=(left. 1.AG8 Informática IMAGENS Para inserir uma imagem em uma página web utilizamos do comando.: <img src="c:\site\imagem.: <body background="c:\site\imagem. <img src="endereço da imagem no HD"> ex.Colocando Uma Imagem Como Fundo Da Página <body background="endereço da imagem no HD"> ex. especifica o espaço que deve ser deixado nas l aterais da imagem. <img src> e seus atributos. tag. 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 não possa ser visualizada.jpg"> 56 .

Para que a cor do fundo da sua página chame mais atenção que seu conteúdo. Para fixar a imagem de fundo <body background="c:\site\imagem. Você pode criar seus próprios fundos de página com programas como o Photoshop e o Corelphoto-paint. com poucas variações de tons.jpg" bgproperties="fixed"> 2. ANOTAÇÕES 57 .Colocando Uma Cor Como Fundo Da Página: <body bgcolor="cor"> Procure não usar cores chamativas.AG8 Informática Procure usar imagens simples.

Se quiser acessar diretamente o texto de um tópico . ao passar com o mouse sobre esse texto o cursor muda para uma mão apontando para o link.html><img src="c:\site\imagem.Com esse conceito . no início .: <a href="c:\site\casa.html">Minha casa</a> Usando uma imagem como link: Ex.AG8 Informática LINKS E ANCORAS 1.no seu micro ou em algum servidor de rede.jpg"></a> 58 .você pode criar documentos que façam referências e permitam ao usuário acessar tais referências não importando se elas estão em outra página Web . Para criar uma link com uma página <a href="endereço da página">texto que será o link</a> ex.um documento que se vincula a outros documentos por meio de ligações especiais chamadas links ou hiperlinks.: <a href="c:\site\casa.LINKS A principal atração da Internet é a criação de documentos com o conceito de hipertexto .basta dar um clique sobre o item do tópico no sumário e ele será imediatamente exibido. Assim como em um livro você cria todo o texto do documento e depois cria . Imagine que você crie uma página sobre determinado assunto em vários tópicos abordados. O uso de hipertexto também facilita a criação de documentos extensos cujas seções ou tópicos podem ser rapidamente acessados por meio dos links.ou seja .um sumário indicando os tópicos do documento. Um link é reconhecido em uma página por estar em cor normalmente diferente do resto do texto e .

o que tornaria trabalhoso para quem estiver vendo a página conseguir se movimentar entre um tópico e outro.AG8 Informática 2.Âncoras Uma âncora é um ponto de referência ou endereço que será acessado por um link. o usuário irá até o pedaço que você nomeou. Então faça o seguinte : Nomeie um pedaço da sua página através do tag : <A NAME="NOME "> Texto </A> ( Lembre –se que "NOME" é fictício. a URL . Suponha que seu texto seja muito grande . Através de um esquema de endereçamento . É aqui que está toda graça de Internet . 59 . usando o tag : <A HREF="#NOME">Clique Aqui</A> Pronto! Ao clicar na mensagem "Clique Aqui" de sua página . Agora crie um link para chegar até esse pedaço . a Internet consegue acessar um arquivo que está em qualquer micro deste planeta desde que esteja conectado adequadamente a Web. pois avisa ao browser para procurar o link no documento atual !!! 3. ATENÇÃO : O sinal de cerquilha (#) é necessário para a âncora.Linkando Arquivos de Outros Servidores Agora a coisa fica um pouco mais séria . você escolhe o nome…) Depois disso escreva o pedaço que você quer associar a esse Nome. Uma âncora é usada dentro do documento para marcar o início de uma seção do documento.

TIMASTER. ) . a URL serve para especificar a localização de páginas e arquivos em diretórios de servidores da Web .BR "> TIMASTER </A> 60 . para acessar diretamente a página INDEX. através do A HREF que cria uma ligação . · Servidor é o computador que contém a página .AG8 Informática Como já vimos . HTM . TIMASTER. A primeira é o protocolo Internet do documento . INSTITUIÇÃO / ARQUIVO Onde : · Protocolo é o tipo de servidor que está sendo acessado. Internet Publica . Vamos comparar com um esquema que você usa ( as vezes até sem saber ) para acessar algum arquivo em seu próprio computador . Exemplo : HTTP : // WWW. Acessando um arquivo pelo DOS : C: \WINDOWS \SYSTEM \ Lista. · Instituição é o tipo de instituição a qual esse computador pertence ( Comercial . ou então dentro de um link de um documento HTML . Militar etc. ASPMASTERS.COM.NET Uma URL é composta por duas partes principais .CJB. um link para o URL .TXT Acessando uma página pela Web : HTTP : // WWW.BR Esse endereço pode ser especificado diretamente na linha de URL do Browser .COM. · Arquivo é o caminho do arquivo. A sintaxe disso é : PROTOCOLO: //SERVIDOR . a segunda parte é o endereço do servidor e da página. <A HREF = "HTTP : // WWW.

Vamos supor que queiramos montar uma tabela 3X2. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. Todos estes comandos são encerrados como </TABLE> . Vamos discutir. quais são os comandos para se criar uma tabela e mostrar alguns exemplos. pois os objetos podem estar melhor posicionados na home-page. para iniciar uma linha devemos introduzir a tag <TR> e para uma célula (alguns preferem dizer coluna) <TD>. O comando para se inserir uma tabela é <TABLE>. A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional e o usuário possa navegar de forma mais eficiente. Claro que você deverá praticar e principalmente planejar a sua tabela. nesta parte. ou seja de 3 colunas por 2 linhas. o código HTML para isso é : <HTML> <HEAD> <TITLE>Criando Tabelas</TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6>TABELA</FONT></CENTER> <BR> <TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1> <TR> <! Cria a primeira linha da tabela> <TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma célula> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> </TR> <! Fecha a primeira linha da tabela> <TR> <! Abre a segunda linha da tabela> <TD> PRIMEIRA COLUNA</TD> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> <TR> <! Encerra a Segunda linha da tabela> </TABLE> <! Encerra a tabela> </BODY> </HTML> 61 . pois sem isso. Vejamos um exemplo. fica muito difícil de controlar o código HTML da sua home-page. </TR> e </TD> respectivamente.AG8 Informática TABELAS As tabelas são muito importantes para o designer de uma home-page.

ou seja.AG8 Informática Salve este exemplo como TABELA. Parâmetros podem ser acrescidos às tabelas. Nas células da tabela você pode inserir desde simples frases até figuras inteiras. dentro da célula as frases são alinhadas com relação ao seu centro. Exemplo1: <TABLE BORDER=2> <TR> <TD WIDTH=100> WIDTH=100</TD> <TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD> </TR> </TABLE> O parâmetro WIDTH pode receber dois tipos de valores. tais como : aumentar ou diminuir a largura de uma célula. como mostrado no exemplo a seguir.HTM e abra o arquivo num Browser para ver como ficou. em pixels como no exemplo acima ou em porcentagem. Exemplo2: <TABLE BORDER=2> <TR> <TD WIDTH=25%> WIDTH=25%</TD> <TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD> </TR> 62 . este parâmetro tem por função alinhar o conteúdo da célula no meio da mesma. Com isto você já consegue Ter uma idéia de como montar suas tabela. 1-ALTERANDO A LARGURA DA CÉLULA Para alterar o largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag <TD>. O segredo para se conseguir fazer estas tabelas de forma eficiente é planejar e ter a idéia exata do conteúdo desta tabela. Vamos procurar trabalhar com vários exemplos para visualizarmos melhor o uso destes parâmetros. distanciar as células uma das outras. Também dentro da tag <TD> vemos um outro parâmetro que é VALIGN=MIDDLE. inserir cor de fundo dentro da célula etc.

vimos que podemos acrescentar cores ao fundo de uma célula. mas com um certo espaçamento entre elas. outra coisa que também pode ser feita é mudar a fonte com os comandos de formatação que você já conhece. <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 . Este parâmetro elimina por completo os espaços entre as células.INSERINDO COR DE FUNDO E SEPARAÇÃO DE CÉLULAS Outro atributo que podemos ter nas tabelas é mudar a sua cor de fundo. Repare que no exemplo anterior nós colocamos BORDER=0 e as células apareceram coloridas.AG8 Informática 2. isto se torna particularmente útil quando se quer dar destaque a uma célula em especial. para tirarmos este espaço devemos acrescentar dentro da tag <TABLE> o parâmetro CELLSPACING=0. por exemplo. 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. como <FONT COLOR=>.

fazendo com que seu texto ou figura não fique "grudado" nas paredes da célula. Aproveite os exemplos anteriores e experimente usar este atributo para ver como ele funciona. espaço entre as células 2 (Cellspacing) e espaço dentro da célula 6 (Cellpadding)> <CAPTION>LEGENDA</CAPTION> <! Introduz uma legenda na tabela> <TR> <TH>Conteúdo em negrito</TH> <! Insere o texto na forma de cabeçalho (negrito)> </TR> <TR> <TH>Conteúdo em negrito</TH> </TR> 64 . Na verdade a única diferença entre a tag <TH> e a tag <TD> é que a <TH> exibe o conteúdo da célula em negrito. </TH> Esta tag insere um cabeçalho dentro da célula. figura etc.. ou seja. se você tiver um elemento (frase. 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. texto. Em seguida descreveremos uma série de outros atributos e comandos para tabelas: <TH> . Isto já dá uma idéia do funcionamento geral das tabelas na WEB...) dentro da célula você pode acrescentar espaços por igual nos quatros cantos da célula..AG8 Informática Outro parâmetro que pode ser usado para separar espaços em uma célula é CELLPADDING que inclui ou exclui espaços dentro da célula. Você também pode usar todos os outros recursos já vistos de HTML para otimizar o uso de tabelas. </CAPTION> Exibe um texto centralizado em relação à tabela. Muitos dos alinhamentos que encontramos na Internet são feito por intermédio de tabelas. vamos ver como podemos aperfeiçoar o uso de tabelas. <CAPTION> . Exemplo: <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=6> <! Esta linha inicia a tabela com borda de espessura 1 (border). como se fosse uma legenda.

São eles que nos possibilitam remodelar a disposição das células dentro da tabela.AG8 Informática </TABLE> Repare neste exemplo. Exemplo: <TABLE BORDER=2 CELLPADDING=2> <TR> <TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD> <TD>CÉLULA 1</TD></TR><TR> <TD>CÉLULA 2</TD> </TR> </TABLE> Para melhor utilizar estes parâmetros e ver como eles funcionam você deve fazer a sua própria tabela. que a legenda já sai centralizada com relação a tabela e repare no espaço dentro da célula devido ao comando CELLPADDING. Vejamos um exemplo prático: <TABLE BORDER=2 CELLPADDING=2> <TR> <TD COLSPAN=2>Exemplo do uso do COLSPAN</TD> <TR> <TD>CÉLULA 1</TD> <TD>CÉLULA 2</TD> </TR> </TABLE> Neste exemplo vemos que na tag <TD> foi introduzido o parâmetro COLSPAN. Este parâmetro tem a finalidade de dizer que sob a célula onde ele foi introduzido podemos ter um certo número de colunas. você deve inserir o parâmetro dentro da tag <TD> desta célula. se você quiser que uma célula ocupe uma única linha. A quantidade de células que virão em baixo da célula que recebeu o atributo COLSPAN deve ser de acordo com o número especificado no parâmetro. Logo. Mas se quisermos definir uma única célula ocupando uma coluna inteira ? Neste caso usamos o atributo ROWSPAN. 4-OS ATRIBUTOS COLSPAN E ROWSPAN Estes atributos são muito importantes dentro da tag <TABLE>. pois somente desta forma você conseguirá fixar o uso destes parâmetros. como no nosso exemplo. 65 .

O atributo RULES Para escolher as linhas internas que serão mostradas dentro da tabela . rows : para as linhas horizontais entre cada linha da tabela . Através do complemento BACKGROUND dentro da tag TABLE . cols : para as linhas verticais entre cada coluna da tabela .AG8 Informática 5-USANDO TABELAS COMO MOLDURAS Um outro uso bastante interessante de tabelas é como moldura para alguma figura. groups : para linhas entre grupos de colunas e seções horizontais . 66 . definidas por tags especiais como COLGROUP e THEAD . basta indicar qual o endereço e o nome da figura. Os complementos desse atributo são : · · · · · none : nenhuma linha interna . all : para mostrar todas as linhas entre cada coluna e linha na tabela ( default ) . <TABLE BACKGROUND="POOL. usamos o atributo RULES . 6-COLOCANDO UMA IMAGEM DE FUNDO NAS TABELAS Um recurso parecido com a cor de fundo .GIF" BORDER=5> <TR> <TD><H1>Que tal um mergulho agora ? </H1></TD> </TR> </TABLE> 7. colocar uma imagem como fundo de uma tabela é uma técnica muito usada. Para isto basta você iniciar uma tabela e definir um valor para BORDER. pois nem sempre uma moldura em uma figura defini um bom layout (aparência) da sua home-page. dentro da tag <TABLE> . Exemplo: <TABLE BORDER=5> <TR> <TD> <IMG SRC=NOME DA FIGURA> </TD> </TR> </TABLE> Claro que você deve usar com muito bom senso este artifício da tag <TABLE>.

Nessas referências você poderá encontrar vários outros exemplos de páginas usando tabelas mais complexas (como por exemplo. com alinhamentos mais precisos cada navegador interpreta estes comandos HTML de tabelas de forma diferenciada. 67 . alguns comandos HTML não funcionam em um dado navegador. Um exemplo típico é uso de CELLSPACING e CELLPADDING. se você reparou para falarmos de tabelas rodamos os exemplos nos dois navegadores mais conhecidos : Internet Explore 4. Você não reparou nenhuma diferença no uso destes navegadores para nossos exemplos. Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordo quanto a padronização de seus navegadores. a questão é que para tabelas mais complexas. Sendo assim.0 e no Netscape Communicator 4. Como já vimos antes.0.AG8 Informática Veja uma tabela com todas as linhas internas ( default ) : <TABLE BORDER RULES=all> Outro exemplo sem as linhas internas : <TABLE BORDER RULES=none> Outro exemplo usando o complemento ROWS: <TABLE BORDER RULES=rows> O último exemplo usará o complemento COLS : <TABLE BORDER RULES=cols> As tabelas são um forte recurso de modelagem das home-pages hoje em dia e para que você consiga utilizar bem este recuso não deve se limitar somente aos exemplos desta apostila. Há uma observação importantíssima que devemos fazer aqui. uma tabela periódica dos elementos) e é claro em laboratório desenvolvendo sua própria home-page. procure em sites e até mesmos em livros . quando você construir tabelas deve sempre levar em conta em qual navegador você dará preferência para rodar a sua página. como por exemplo: "Criando sites arrasadores na Web" (capítulo 4) ou "HTML Truques Espertos" (capítulo 5). Por isso nunca é demais deixar claro à sua home-page em qual navegador ela roda melhor a sua formatação.

Vamos procurar entender melhor. Uma documento HTML simples seria assim : <HTML> <HEAD> <TITLE>Página simples </TITLE> </HEAD> <BODY> Neste campo entram os comandos em geral </BODY> </HTML> Já um documento HTML que teria frames ficaria assim: <HTML> <HEAD> <TITLE>Página com Frame </TITLE> </HEAD> <FRAMESET> NESTE CAMPO ENTRAM AS CHAMADAS PARA OS DOCUMENTOS DOS FRAMES </FRAMESET> </HTML> Então o que devemos fazer ? Devemos criar um documento HTML normal e um documento HTML de frames. uma com o código que contém a tag <FRAMESET> e duas outras com os códigos onde serão inseridas as páginas de cada frame. porque julgam que eles "estragam" o layout da homepage. 68 . por outro lado há os que abominam o uso de frames. a diferença é que se deve trocar a tag <BODY> pela tag <FRAMSET> Para termos uma home-page com frames devemos ter três páginas. Fazer frames tem o mesmo procedimento que confecção de home-pages simples. Há os que adoram o uso de frames e não admitem que suas home-pages fiquem sem elas.AG8 Informática FRAMES Frames (quadros) são relativamente usadas na Web.

HTM> </FRAMESET> </HTML> Este é o código para gerar os frames (veja a figura) .HTM. <HTML> <HEAD> <TITLE>Página simples </TITLE> </HEAD> <BODY> AQUI ENTRA A PRIMEIRA PÁGINA NORMAL </BODY> </HTML> Salve este exemplo como FRAME1.HTM>. Agora vamos crias os códigos para serem inseridos nas duas colunas que criamos. Por que ? Porque no código que geramos no exemplo de frames chamamos a página com o comando <FRAME SRC=FRAME1. se você salvar o nome do código de forma diferente deverá alterar também o código da página de frame. 69 . uma com 20% da tela e outra com 80%> <FRAME SRC=FRAME1.HTM. Sempre lembrando que estas páginas devem estar no mesmo DIRETÓRIO. <HTML> <HEAD> <TITLE>Página simples </TITLE> </HEAD> <BODY> AQUI ENTRA A SEGUNDA PÁGINA NORMAL </BODY> </HTML> Este código deve ser salvo como FRAME2.AG8 Informática Vejamos um exemplo: <HTML> <HEAD> <TITLE> Exemplo de frame</TITLE> </HEAD> <FRAMESET COLS=20% . pelo mesmo motivo do código anterior.HTM> <! Este comando chama as páginas HTML que devem ocupar as colunas divididas pelo frame> <FRAME SRC=FRAME2. 80%> <! Este comando inicia o frame e divide a tela do navegador em 2 partes.

Vejamos alguns dos atributos que podem ser inseridos dentro desta tag.HTM> <! Este comando chama as páginas HTML que devem ocupar as colunas divididas pelo frame> <FRAME SRC=FRAME2. você também pode dividir em linhas usando o parâmetro ROWS.HTM> </FRAMESET> <FRAMESET ROWS=50%.AG8 Informática Pronto.50%> <FRAME SRC=FRAME1. Alem de poder dividir o navegador em colunas com o parâmetro COLS dentro da tag <FRAMSET> .HTM> <FRAME SRC=FRAME1.50%> <FRAMESET ROWS=50%.HTM> </FRAMESET> </FRAMESET> </HTML> Este código gera a seguinte página : Já deu para perceber que toda a estrutura de frames depende na verdade da tag <FRAME>. você conseguiu fazer a sua primeira página com frame. como no código abaixo: <HTML> <HEAD> <TITLE> Exemplo de frame</TITLE> </HEAD> <FRAMESET COLS=50%. 50%> <! Este comando inicia o frame e divide a tela do navegador em 2 partes.HTM> <FRAME SRC=FRAME1. <HTML> <HEAD> <TITLE> Exemplo de frame</TITLE> </HEAD> <FRAMESET ROWS=50% . uma com 50% da tela e outra com 50%> <FRAME SRC=FRAME1. 70 . ou ainda dividindo em colunas e linhas ao mesmo tempo.HTM> </FRAMESET></HTML> Uma tag <FRAMESET> pode ser inserida dentro da outra gerando assim frames dentro de frames.50%> <FRAME SRC=FRAME1.

yahoo. NO e AUTO. Por exemplo: <FRAME SRC=http://www. devidamente conectado. mas nada impede você de colocar no lugar uma URL completa. Os valores válidos para SCROLLING são YES. Parâmetro NAME Este é um dos principais parâmetros da tag <FRAME>. Por default quando o conteúdo de uma página excede o tamanho do frame as barras de rolagem são acrescentadas automaticamente. para definir o nome do frame. 71 . este parâmetro define uma distância de margem.AG8 Informática 1-PARÂMETROS DE FRAMES Parâmetro SRC da tag <FRAME> Este parâmetro é o responsável por chamar a página HTML que deve ser aberta (inserida) dentro de um frame. Exemplo: <FRAME SRC=FRAME1. Exemplo: <FRAME SRC=FRAME1. Parâmetro SCROLLING Define se o frame terá ou não barras de rolagem. Ele deve ser usado em conjunto com outro parâmetro que é o TARGET. Em todos os exemplos até agora só usamos arquivos locais para abrir estas páginas em um frame. de chamar esta página para a seu frame. como era de se esperar. Parâmetro MARGINHEIGHT Da mesma forma que MARGINWIDTH. Parâmetro MARGINWIDTH Define a margem entre as laterais do frame e seu conteúdo. que neste caso é a margem superior e inferior do frame.com> Com este comando você será capaz.HTM MARGINHEIGHT=100> Dá um espaço de 100 pixels entre as margens superior e inferior do frame. Ele serve.HTM MARGINWIDTH=100> Este comando cria uma margem de 100 pixels de cada lado do frame. onde quer que ela esteja na Internet.

yahoo.HTM SCROLLING=NO> <FRAME SRC=FRAME2.com TARGET=TESTE>Livraria Amazon</A> <BR> < A HREF=http:\\www.amazon.AG8 Informática Exemplo: <FRAME SRC=FRAME1.HTM <HTML> <HEAD> <TITLE>FRAMES</TITLE> </HEAD> <BODY BGCOLOR=YELLOW> <CENTER><H2>Escolha um Link</H2></CENTER> <BR> <A HREF=http:\\www.HTM SCROLLING=YES> Parâmetro TARGET Este é o mais importante de todos os parâmetros.HTM <HTML> <HEAD> <TITLE>FRAMES</TITLE> </HEAD> <FRAMESET COLS=25%.com TARGET=TESTE>Pesquisador YAHOO</A> <BR> <A HREF=FRAME2. a página linkada. Os códigos são: FRAME.HTM TARGET=TESTE>Volta para Frame2. Vamos construir uma página que possua um menu de opções do lado direito. Vejamos um exemplo de como podemos linkar um frame com outro. Ele trabalha em conjunto com NAME e permite que coloquemos um link em um frame e o resultado. ou seja.75%> <FRAME SRC=FRAME1.HTM NAME=TESTE> </FRAMESET> </HTML> FRAME1. aparece em outro frame. para isso podemos aproveitar os códigos de exemplo abordados anteriormente.htm</A> </BODY> 72 .

Você pode usar os complementos NAME – para especificar um nome que identifica qual frame está em uso . mas é claro que os links que não são locais funcionarão somente se você estiver conectado. WIDTH e HEIGTH para definir o espaço na página utilizado pelo Frame . <html> <body> <center><h1>Exemplo do comando IFRAME </h1></center> <hr> <iframe width=90% height=70% src="pag2. Lembre-se de fechar a tag </IFRAME>. utilize a tag <IFRAME SRC=" nome do frame "> . Para isso . 2-Criando um frame Inline Se você quiser misturar texto .htm"> 73 . como o FRAMEBORDER .para alinhar o frame na página.HTM <HTML> <HEAD> <TITLE>FRAMES</TITLE> </HEAD> <BODY> <CENTER><H2>Os links ao lado deverão aparecer neste lado do Navegador</H2></CENTER> <BR> <CENTER> <FONT SIZE=4>Este frame é o que foi nomeado como TESTE com o parâmetro NAME em Frame.AG8 Informática </HTML> FRAME2. figuras e um frame em uma mesma página você precisa criar um frame inline.HTM</FONT> </CENTER> </BODY> </HTML> Se tudo funcionar convenientemente você deverá visualizar sua página como abaixo. SCROLLING etc. Você também pode usar os atributos normais da tag frame . ALIGN ( LEFT ou RIGHT ) .

AG8 Informática </iframe> </center> Aqui continua a página normal ! </body> </html> 74 .

será dado um exemplo e desprezaremos informações complementares. Pode ser visualiza em navegadores somente texto. ou seja. · Quando for apresentado o tópico “LINK”. · Algumas vezes. Neste caso. o leitor poderá anotar o endereço para enriquecer seus conhecimentos posteriormente. que serão abordadas ao longo deste tutorial. para evitar dispersão no aprendizado. São elas: .br) Introdução A HyperText Markup Language e a Web No núcleo de toda página da Web. Ela é muito semelhante aos antigos editores de texto que exigiam a inserção de tags para especificar tipos em itálico.Tutorial – Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet. A HTML é. a cada nova tag ou instrução. na verdade. · Utilizaremos a expressão “Mãos à Obra!” para especificar que trechos na linguagem HTML serão apresentados como exemplos. uma linguagem de diagramação baseada em marcadores. por exemplo. como o Bloco de Notas do Windows. Convenções utilizadas neste tutorial É importante destacar algumas observações antes de começarmos a trabalhar diretamente com a linguagem. como o Lynx ou em navegadores mais avançados como Netscape Navigator e Internet Explorer. ou tags como é mais comumente conhecido. · Este tutorial é objetivo. quando possível. até a dada instrução. A HTML (HyperText Markup Language) é uma linguagem simples baseada em texto que podemos visualizar em qualquer plataforma.com. gradativo e exemplificado. negrito ou sublinhado. serão apresentados tópicos como Dica. encontramos a HyperText Markup Language. ou seja. apenas texto com códigos de formatação que especificam diferentes fontes e estilos ou até mesmo outras funções mais avançadas. é aconselhável um editor de texto simples. Diagramando com a HTML Introdução Os navegadores seguem três regras básicas ao apresentarem a página. Observação ou alguma nota adicional que ajudará o leitor a compreender o que está sendo estudado. significa que uma URL será indicada para posterior referência. · Será indicado um editor HTML quando necessário.

que são usados para fazer o texto se destacar em diversos níveis. como os causados pelas teclas [tab] e [enter]. <HTML> <HEAD> elementos contidos no cabeçalho </HEAD> <BODY> documento apresentado pelo browser </BODY> </HTML> Elementos do cabeçalho Título do documento O cabeçalho de um documento tem apenas um elemento de uso praticamente obrigatório: <TITLE>Título da página</TITLE>. O corpo contém o documento propriamente dito. · As tags de formatação não se distinguem pelas caixas. Existem outros elementos adicionais de importância grande. Ex: CAIXA ALTA. por exemplo.· Os espaços em brancos são ignorados. Isto significa que inserir espaços. ou seja. na Internet. O cabeçalho contém informações a respeito do documento como. Esses títulos são numerados de 1 a 6. Ex: <HTML> e </HTML> Estrutura de um documento Todo documento HTML inicia-se por uma tag <HTML> e encerra-se por uma tag </HTML>. sendo <H1> o maior deles e. Se o diagramador não insere um título na sua página HTML. Caixas altas são as letras maiúsculas. as tags de formatação formam pares. utilizam os elementos <TITLE> e </TITLE> para definir um título na apresentação do resultado da procura. ou seja. não afetará em nada a interpretação do documento pelo navegador. a URL da página. o título. NOTA: Mecanismos de buscas. O cabeçalho e o corpo se distinguem pelo uso das tags <HEAD> e <BODY>. Observe a estrutura. o mecanismo de busca define o título com o endereço da página. <H6> o menor. obviamente. uma tag escrita em caixas altas terá o mesmo efeito do que uma tag escrita em caixas baixas. . Elementos do corpo Títulos A HTML aceita seis estilos de títulos. mas abordaremos tais elementos mais à frente. · Em sua maioria. Um documento HTML consiste em duas partes — um cabeçalho e um corpo.

O uso da extensão . DICA: Faça uma experiência. Uma vez que pretendemos avançar o nosso conhecimento. Remova as tags <P> e </P> ou as <H1> e </H1> para ver como o navegador interpretará o documento. Estilos de formatação Os estilos aceitos pela HTML são o negrito. vamos inserí-los no documento. <P> Aprendendo com tutoriais passo-a-passo é muito mais fácil. é interessante se habituar. o seguinte trecho. embora uma boa prática seja inserir a </P> encerrando o parágrafo. pois em documentos que utilizam componentes avançados da linguagem. Parágrafos com <P> não precisam de um correspondente de fechamento. salve-o com a extensão .htm é importante e obrigatório para que o navegador saiba que se trata de um documento HTML. é necessário.</P> </BODY> </HTML> Depois de inserir. Agora. desde já. o efeito desta tag. o itálico. com a tag </P>. <U>Sublinhado</U> e <TT>Monoespaçado</TT> . <I>Itálico</I>. o sublinhado e o de máquina de escrever (fonte monoespaçada). abra o arquivo no seu navegador preferido e observe os resultados. <P>Crio aqui um parágrafo para visualizar.Parágrafos A inserção de uma tag <P>. Dessa forma. <HTML> <HEAD> <TITLE>Meu primeiro documento HTML</TITLE> </HEAD> <BODY> <H1>A linguagem HTML é muito simples</H1> Começo aqui o meu aprendizado para que no ano que vem esteja concorrendo ao maior prêmio da Internet brasileira.htm ou . na prática.<BR> Agora já posso trabalhar com a utilização de estilos<BR> São exemplos: <B>Negrito</B>.html. Mãos à obra! Insira o trecho abaixo em um novo arquivo no Bloco de Notas. Mãos à obra! Insira no mesmo documento criado anteriormente. o navegador apresenta o texto com uma linha abaixo dos elementos anteriores. diz ao navegador que o texto a seguir inicia um parágrafo.

Listas A linguagem aceita diversos tipos de listas formatadas para apresentação dos dados. A tag <BR> é semelhante à <P>. isso se deve ao fato de não ser necessário. porém com uma diferença. Repare também que não houve tag de fechamento para a <BR>. além de uma tag no início de cada item da lista. LINK: Existe um consórcio regulamentador da linguagem HTML na Web. Separadores Já estamos acostumados com linhas que delimitam textos e parágrafos. Listas ordenadas Utitlizam as tags <OL> e </OL> Listas não ordenadas Utilizam as tags <UL> e </UL> Mãos à obra! Insira no seu documento HTML. caso contrário o navegador ao encontrar as tags </BODY> e </HTML> interpreta que o documento acabou e não apresentará mais nada após.w3c. que ajudam a diagramar o conteúdo dos documentos. ela apenas quebra o texto para uma nova linha.</P> <HR> É importante praticar para manter o conhecimento afiado. Mãos à obra! Insira em qualquer parte do documento a tag <HR> <P>Aprendendo HTML é o primeiro passo para construir a minha homepage. NOTA: Houve a inserção de uma tag nova. As mais importantes são as seguintes. É o famoso W3C (Wolrd Wide Web Consortium) e pode ser visitado na URL http://www. mas antes das tags </BODY> e </HTML>. Essas linhas são simples de fazer.OBSERVAÇÃO: Atenção ao inserir o trecho abaixo no documento já existente. enquanto que a tag <P> pula uma linha. <H3>Minhas frutas <U>favoritas</U></H3> <UL> <LI>Maçã <LI>Pêra <LI>Uva <LI>Tamarindo . inicialmente uma lista não ordenada com as suas frutas favoritas. Todas as listas exigem um par de tags que indica o tipo de lista. Coloque o trecho depois de qualquer elemento.org. no trecho acima.

</UL> <P>Agora. Normalmente. Rachel de Queiroz </OL> DICA: É considerado uma boa prática em formatar listas. espaços em branco são ignorados. pois como já foi dito. Napoleon Hill <LI>Descartes.</P> <H3>Meus livros preferidos</H3> <OL> <LI>A Lei do Triunfo. esta margem é feita teclando uma só vez a tecla [tab]. coleção “Os Pensadores” <LI>Memorial de Maria Moura. mantendo as tags organizadas no documento. . vamos formatar uma lista ordenada e comparar as duas. criar uma margem à esquerda para os itens das listas. o que não afeta em nada o resultado na interpretação do navegador.

gif.Tutorial – Módulo 2: Inserindo imagens.chicayban. desenvolvido originalmente para os usuários do CompuServe.jpg”> A tag IMG possui alguns atributos importantes.chicayban. O melhor que se tem a fazer nesses casos é copiar a imagem para o seu próprio servidor. O GIF (Graphics Interchange Format). Por exemplo: imaginemos que o leitor visitou o site fictício http://www. Para incluir uma imagem no documento. A sintaxe para uma imagem remota é a seguinte: <IMG SRC=”http://www. Os principais navegadores podem exibir de forma automática imagens no formato GIF e JPEG.ibestmasters. mas os valores são variáveis.chicayban. mas lembre-se de que a imagem pode conter direitos autorais reservados e o administrador do website pode mudar a imagem de nome. Tendo em vista que os ULRs podem indicar qualquer localização. Saiba mais sobre os padrões no endereço abaixo. Cuidado ao utilizar imagens localizadas em servidores remotos. Para inseri-la. o atributo é .com.br/imagem.com.br) Introdução Sem o apelo visual das imagens. mesmo que sejam referenciadas e exibidas em um documento de HTML.gif”> NOTA: Os atributos da tag IMG são sempre os mesmos.com. foi escolhido como padrão da WWW por ser compacto e também por ser um dos formatos gráficos mais conhecidos. talvez a World Wide Web não tivesse conseguido alcançar com a mesma rapidez a popularidade que atingiu. basta colocar o atributo SRC apontando para o endereço. ou seja. No exemplo acima.br/imagem. São eles: SRC O atributo SRC contém um URL para a imagem desejada. LINK: http://www. remover a imagem do servidor ou mesmo mudar a conteúdo da imagem.com. criando hyperlinks e âncoras Por Daniel Chicayban (dan@trendnet.com. não se alteram.br e deseja utilizar a imagem contida no endereço http://www.br/tutorial/tutorial03. mudam de acordo com o diagramador. utilize a tag <IMG> Por exemplo: <IMG SRC=”minha_foto. Depois veio o padrão JPEG.asp Imagens As imagens devem ser gravadas como arquivos separados. se houver. respeitando os direitos autorais. você tem a oportunidade de referenciar imagens localizadas em servidores remotos e também no seu próprio servidor. claro.

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 gráficos que estão configurados para não mostrar as imagens. para incluir suporte a navegadores somente de texto no exemplo dado acima. MIDDLE e BOTTOM.SRC e o valor é http://www. deve substituir o valor exemplificado pelo valor desejado. pastas. para inserir uma imagem. A sintaxe para um imagem local é a seguinte: <IMG SRC=”imagem. Assim: Testando os valores do atributo ALIGN <IMG SRC=”imagem. Experimente inserir o exemplo citado acima no seu documento HTML. <IMG SRC=”imagem. adicione algum texto para testar os valores TOP. vamos deixar que os leitores criem suas próprias soluções.br/imagem.gif. Um exemplo do uso deste atributo é mostrado abaixo. a imagem deve estar na mesma pasta (diretório) que o documento HTML. vamos falar sobre diretórios. alinha o texto no topo da imagem. a linha HTML seria semelhante a esta: <IMG SRC=”imagem. Ainda neste módulo. Junto com o exemplo.chicayban. ALIGN O atributo ALIGN controla a localização do texto em função da imagem inserida.gif”> NOTA: Para o exemplo acima.gif” ALIGN=”TOP”> Mão à obra! À medida que vamos avançando nosso aprendizado. Por exemplo.com. Logo. DOS e Windows. . arquivos e seus padrões no Unix.gif” ALIGN=”TOP” ALT=”Descrição da Imagem”> Esse atributo é muito importante quando a conexão do navegador com o servidor web é lenta. Note. pois é fundamental para o verdadeiro aprendizado. o atributo não controla a localização da imagem no documento. já o MIDDLE alinha no centro da imagem e por último o valor BOTTOM que alinha o texto no rodapé da imagem. Os principais valores são: TOP MIDDLE BOTTOM O valor TOP. É comum haver confusão com este atributo. É muito importante que o leitor teste todos os valores possíveis para o atributo ALIGN para perceber na prática as diferenças e resultados. pois o usuário pode ler uma descrição da imagem antes do navegador carregá-la.

A âncora é o texto ou a imagem sobre o qual o usuário dá um clique para ir até outro lugar. também poderá guardar em memória a imagem para uso em outros documentos. Eles definem o tamanho da imagem no documento HTML. uma âncora pode ser um texto ou um gráfico. mas é considerado uma boa prática na diagramação de páginas. Se tais atributos não forem definidos na tag <IMG>. Observe o exemplo a seguir: <A HREF=”comprar.htm”>Clique aqui para comprar!</A> . que aparece sublinhado ou em negrito. ou URL. De modo geral. defini-los é uma forma de aliviar o trabalho do navegador. de modo que ela possa ser utilizada várias vezes no mesmo documento. o navegador será obrigado a calcular o tamanho da imagem para apresentá-la na página. <A HREF=”URL”>Texto da âncora</A> A letra A na tag <A HREF> significa “âncora” (anchor) e HREF quer dizer “referência de hipertexto” (hypertext reference). altura. as âncoras de texto aparecem em estilo sublinhado e em cor diferente do texto normal nos navegadores. ou seja. Uma âncora pode consistir em algumas letras. O formato de um par âncora-endereço é simples. Tudo que se encontra entre as tags <A HREF> e </A> representa o texto da âncora. Como Criar Âncoras Qualquer texto pode ser uma âncora em HTML. Hyperlinks e Âncoras Uma referência de hipertexto é algo muito simples. Consiste em uma âncora e um endereço. Para quem não sabe. palavras. independente do seu tamanho ou da sua formatação. Dependendo dos ajustes de cache do navegador. Não estará cometendo um crime quem não definir esses atributos. Âncoras Em HTML. dependendo do navegador. O atributo WIDTH define a largura em pixels e o HEIGHT define a altura em pixels. WIDTH e HEIGHT Os atributos WIDTH e HEIGHT são de extrema importância. Os navegadores memorizam a imagem que é carregada. ou mesmo linhas de texto. Uma técnica bastante popular na Web consiste em criar listas com marcadores usando pequenas bolas coloridas como marcadores. O endereço indica a localização do documento que o navegador irá carregar quando o usuário der um clique sobre a âncora. Cada marcador de cor diferente apresenta um arquivo GIF e cada arquivo GIF é carregado apenas uma vez. a tradução de WIDTH é largura e HEIGHT.DICA: Você pode usar imagens pequenas para acrescentar variedade aos documentos.

Também seria possível escrever: <H4><A HREF=”URL”>Texto da âncora</A></H4> Com hyperlinks e âncoras. Testamos no navegador e a lista parece estar sem nenhum erro de diagramação HTML. encontra-se uma âncora referente ao nome especificado. quando o visitante clicar no hyperlink “Dicas sobre informática e Internet”. <A NAME=”informatica”> em qualquer lugar do documento HTML. podemos continuar. Isso é muito comum em páginas que contêm índices. Não é preciso dizer que os assuntos são totalmente distintos. uma lista foi construída. o navegador exibe imediatamente as dicas de informática. quem curte informática. Então. usamos a tag <A NAME>. Ao colocar. <UL> <LI><A HREF=”#culinaria”>Dicas sobre culinária</A> <LI><A HREF=”#informatica”>Dicas sobre informática e Internet</A> </UL> Note que o hyperlink acima difere dos que já aprendemos até agora. mesmo que as dicas de culinária venham antes do que as de informática. por exemplo. logo. Dessa forma. para fazer uma âncora de hipertexto aparecer no estilo de título nível 4. Observe atentamente o exemplo abaixo. O símbolo “#” diz ao navegador que em algum lugar deste documento. provavelmente não está interessado em ler sobre culinária. logo. você está criando uma página que irá conter dicas de culinária e informática. também é possível direcionar o visitante para posições específicas do próprio documento em questão ou de um outro documento ainda não visitado. Por exemplo. diz ao navegador que neste lugar é a parte das dicas de informática. Vamos colocar agora os hyperlinks e âncoras para facilitar a leitura do documento. para dizer ao navegador onde se encontra as dicas de culinária e informática. Por exemplo. você escreveria: <A HREF=”URL”><H4>Texto da âncora</H4></A> A ordem dos pares de tags não é relevante. o navegador . então é possível criar um índice para que se o visitante clicar em “informática”.Podem ser utilizados outros códigos de formatação em conjunto com as âncoras de hipertexto. na página de dicas. <UL> <LI>Dicas sobre culinária <LI>Dicas sobre informática e Internet </UL> Inicialmente.

Observe o exemplo abaixo: <A HREF=”homepage.o remeterá para a parte do documento HTML que se encontra as dicas sobre informática e internet. iniciar o endereço do documento no hyperlink. Nomes de Arquivo O caminho dos documentos.htm e clique em um dos hyperlinks de dicas contido lá. Omitir as aspas finais é um erro muito comum. é semelhante ao que se utiliza nos sistemas DOS e UNIX. você tem a possibilidade de usar um excelente atalho. embora a barra seja normal (/) e não a invertida (contra-barra .\). poderíamos usar: ftp://ftp. se você estiver trabalhando em um arquivo chamado “projeto. É possível omitir o protocolo e o endereço e. vá até http://users.br/dan/dicas. LINK: Para entender melhor o funcionamento desta nova tag.htm”><IMG SRC=”home. pulando completamente as dicas de culinária.htm” no mesmo diretório.chicayban. como os usuários do DOS estão acostumados a empregar. você referencia uma imagem.gif”></A> DICA: Se o texto ou as imagens usadas em âncoras de hipertexto parecerem não funcionar de forma correta. Cada barra conduz ao próximo subdiretório com o nome especificado e o caminho termina em um nome de arquivo com uma extensão (tal como um TXT ou HTML). por meio de um caminho relativo. O formato de uma âncora gráfica é idêntico ao de uma âncora de texto. o vínculo seria: <A HREF=”reuniao. verifique se o endereço do documento na tag <A HREF> está totalmente colocado entre aspas. Para exemplificar.com. Porém. Como Criar Botões Gráficos Podemos utilizar hipergráficos para criar efeitos semelhantes a botões e oferecer uma boa alternativa aos cliques em texto simples.htm” em algum servidor da Web e quiser vincular esse arquivo a “reuniao.trendnet.htm”> Conclusões da reunião sobre o “Projeto Internet 2”</A> . simplesmente.br/chicayban/ Ao desenvolver uma série de documentos HTML. ao invés de inserir texto entre as tags <A HREF> e </A>. Também é possível especificar um caminho até um diretório inteiro. apenas completando a especificação do caminho com o nome do diretório e uma barra (/) final. empregando caminhos relativos em lugar de caminhos absolutos.htm”>Conclusões da reunião sobre o “Projeto Internet 2”</A> Já se o arquivo estiver em um subdiretório denominado “conclusoes”. comece pelo nome do subdiretório: <A HREF=”conclusoes/reuniao. para ver o conteúdo do diretório chicayban em um servidor FTP.com. Por exemplo. ou nomes de arquivo.

talvez. No próximo modulo. mas se você ainda não entendeu. a partir do qual os subdiretórios e os diretórios com nomes alternativos podem ser referenciados. Se ainda assim nada ficou claro ou dúvidas apareceram. vamos aprender a construir um formulário HTML para envio de mensagens eletrônicas para receber “feedback” dos visitantes! .br. Infelizmente. coloque algum assunto na mensagem como “Ibest. você nunca precisou digitar nenhum caminho de diretório. embora situada no mesmo servidor. Essa representação referencia o diretório principal de documentos do servidor. você seja da geração Windows. tente ler novamente os parágrafos acima.htm” no diretório superior: <A HREF=”. iniciando o nome do arquivo com uma barra (/). não há nenhuma forma de se diagramar em HTML sem conhecer esse básico de sistemas operacionais.htm”>Clique para ler o relatório do “Projeto Internet 2”</A> Ainda que um documento esteja em um árvore de diretórios inteiramente isolada. Se este assunto lhe parece um pouco confuso é porque. diretórios são pastas e como tudo é na base do clique. o símbolo que corresponde ao diretório superior.Master”. Por exemplo.”.Você também pode especificar um caminho relativo até um documento localizado em diretórios de níveis mais elevados. esta referência indica um arquivo denominado “relatorio./relatorio. Nunca usou um DOS ou muito menos um Unix? Acertei? No Windows.com.. pergunte! Estarei inteiramente disponível para solucionar dúvidas no endereço dan@trendnet. usando “.. Se possível. você pode omitir o protocolo e o endereço da Internet.