Vous êtes sur la page 1sur 84

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

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

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

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

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

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

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

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

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

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

pare e navegue um pouco pela Internet. etc. Educação On-line: numerosas universidades. etc. Lojas on-line. mas a determinação irá ajudá-lo a elaborar. O único limite da Web é a sua própria vontade. 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. Publicações: como jornais. no momento: v v v v v v v v v Informações pessoais: informações sobre você. dicionários. O QUE PRETENDE DIVULGAR? Que tipo de conteúdo você pode apresentar na Web? Praticamente o que quiser. organizar e codificar suas páginas com uma maior probabilidade de sucesso. revistas. Eis aqui alguns tipos de conteúdo mais comuns na Web. motocicletas. se a sua idéia não estiver nesta lista ou parecer meio maluca ou ainda não estiver amadurecida. 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.AG8 Informática ORGANIZAÇÃO E NAVEGAÇÃO 1. Com certeza encontra excelentes idéias e poderá amadurecer as suas e ter muitas outras. caixas de sugestões. Catálogos de compras: comercialização de artigos. etc. 15 . por exemplo. 2. etc Documentação On-line: desde manuais. 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. Por isso. Perfis de empresa: o que uma empresa faz ou vende. Hobbies ou interesses especiais: filmes.

etc. a princípio não importa a ordem. 3. ficará bem mais fácil de começar seu trabalho. 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 os leitores conseguem se deslocar pelo conteúdo de cada tipo de estrutura para encontrar as informações de que precisam . v Como Ter certeza de que os leitores conseguem se localizar nos seus documentos (contexto) e achar o caminho de volta até uma posição conhecida. até mesmo. 16 . 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). duas estruturas e criar uma nova forma de navegação. Esta é uma forma de começar a se organizar. Assim. Você poderá combinar. Ao ler esta parte reflita como suas informações se encaixaria em cada uma. 4. Sua lista poderá Ter quantos tópicos desejar.AG8 Informática idéias. DIVIDA SEU CONTEÚDO EM TÓPICOS Crie uma lista com os principais tópicos.

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

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

retroceder. retornar ao início e subir um nível. são apresentados no ambiente on-line. Um exemplo são os famosos FAQ ( Frequently Asked Questions). em cada página do roteiro você deve oferecer vínculos para o leitor avançar. porém lineares. A combinação de documentos lineares e hierárquicos funciona bem desde que haja pistas em relação ao contexto. Essa estrutura combinada ocorre com maior freqüência quando documentos de estrutura rígida. 19 . Como essa é uma estrutura linear e hierárquica.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.

em que cada cena e cda tomada de câmera é esboçada na ordem em que ocorre no filme. mas se tiver um grande número de tópicos. uma técnica cinematográfica. 3. a manutenção e vinculação pode se tornar maçante. o storyboard deverá ser dividido em áreas e cada equipe cuidará da parte que lhe cabe. O storyboard fornece uma estrutura e um plano globais para o filme. Procure não se distanciar deles. O uso de storyboard. Para estruturas muito pequenas talvez não seja necessário criar um storyboard. Tome cuidado com o que será incluindo na home page.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. ela será a porta da sua apresentação. O uso de storyboard ajuda-o a visualizar a apresentação como um todo e a prever sua forma final. indicando os tópicos que serão incluídos em cada página. 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. O StoryBoard de uma apresentação é um conceito emprestado do cinema. Esta técnica fornece um esboço geral de como a apresentação Web irá ficar quando estiver pronta. No caso de grande documentação. Tenha sempre em mente seus objetivos. Se houver formas alternativas. Coloque cada tópico em uma página. 20 . Defina bem a forma de navegação entre as páginas. 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. 4. que permitem que o diretor e sua equipe tenham uma idéia clara de onde cada tomada se encaixa no filme. torne a navegação para os leitores a mais intuitiva possível. DICAS PARA SEU STORYBOARD 1. 2. lembre-se.

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

4. 2.AG8 Informática 2ª PARTE CAPÍTULO 4 Este capítulo têm como objetivo: 1. 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 . 3.

composto de fases e desenvolvido por pessoas de backgrounds diferentes. 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 2º ponto é o design do site (estrutura de navegação e projeto gráfico). A primeira muito relaciona-se ao público alvo. o que é um erro. antes de mais nada. 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. O conceito de Web Design envolve todos os aspectos da construção de um site. 3. 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.WEB DESIGN E VISÃO DO PROJETO A maioria das pessoas associam Design unicamente ao projeto gráfico de um WebSite.AG8 Informática PROJETO DE WEBSITE 1. considerando o tipo de informação disponibilizada conforme seu 23 .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. A construção de um Website deve. 2. Dominá-la é importante para um bom desenvolvimento do seu projeto. É o elemento central. ser entendida como um projeto.HIPERTEXTO É a utilização da HTML como linguagem para desenvolvimento da sua página.

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

preparandoa para a etapa seguinte. 2. Material que é mais valoroso se atualizado freqüentemente e mais facilmente.: gráficos e textos (imagens de alta qualidade não são recomendáveis). o Design Gráfico e o Analista de Sistemas. ex. pode-se então.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. 4. calendários. etc. Nesta etapa. 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. fichas de inscrição.: manuais. Material que possa ser totalmente substituído por uma impressão. Todos os membros da equipe devem participar das reuniões de criação. isso facilitará também o processo de modificar. Uma vez discutidas e analisadas todas as sugestões. Uma vez discutidas e analisadas todas as sugestões de áreas diferentes possam se integrar.. onde se iniciará o design do site. guias. desenhar fluxogramas de navegação. ex. criar a estrutura de navegação. mostrando como as páginas estão linkadas (conectadas) entre si. 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 Coordenador da equipe.. etc . agenda telefônica. etc . com suas respectivas visões de projeto. coordenam essas reuniões. ex.: formulários de pesquisa. Ex. Material que tire vantagem da estrutura não linear de navegação do hiperdocumento.: agenda de reuniões.. ajudará a Ter uma visão geral do site. 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... No futuro. 25 . Material que requer intercâmbio de informações. grandes bases de dados textuais. acrescentar ou retirar páginas. para que as sugestões de áreas diferentes possam se integrar.. Aqui estão alguns dos critérios que deverão ser observados para o projeto do site: 1. O Analista de sistemas deverá colher toda informação e analisa-la.. 3..

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

AG8 Informática 6. a não ser que o ponto chave sejam as imagens. 7. Mas qualquer texto. implica em você permitir a outros "linkar" sua página de Web. Consequentemente. O desejo original de uma página não é protegido. vídeo ou áudio originais deve ser protegido. 8. não pense que a net é igual a outras mídias. 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 isso. porém a netiqueta recomenda que se peça permissão aos Webmasters sempre que possível. O conteúdo e forma como ele é apresentado serão os principais atrativos de suas páginas. Direitos autorais: A proteção de direitos autorais não costuma ser muito evidente na Web. gráfico. 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. quando você disponibiliza um site.

Essa rotina pode ser manual ou automatizada dependendo do tamanho de seu site. 28 . Existem softwares específicos para essa tarefa. ESTATÍSTICAS Mostram as páginas mais visitadas. horários mais visitados. CHECAGEM DE LINKS É importante estabelecermos uma rotina periódica tanto para checagem dos links internos de sua página quanto para os externos. 3. São na verdade imagens clicáveis para o site em promoção. 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. 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. dias mais visitados.AG8 Informática ADMINISTRAÇÃO DE UM SITE Todo WebSite deve ter um Webmaster. 1. 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. etc. Seu endereço eletrônico deve ser divulgado na primeira página e em todas as outras que exijam um processo interativo. 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. 2. 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.

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

2. Uma linguagem de marcação: HTML. 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.

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

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

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

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

que aplicam um tamanho de fonte diferenciado no texto que envolvem. <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. Os comandos: 35 . A HTML divide seis tamanhos de cabeçalhos. </body> </html> tipos de Em nosso exemplo introduzi mais algumas tags. CABEÇALHOS Os cabeçalhos são usados para dividir seções do texto. de H1 a H6. O maior tamanho é o H1 e o menor é o H6.<br> Afinal. como capítulos de um livro. ele será o responsável pela administração de um site. uma linha antes e depois e além disso dão um efeito de negrito.AG8 Informática 3.

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

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

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

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> <sub>texto</sub> <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. Como já percebeu os comandos. em HTML você poderá utilizar efeitos em seu texto. 39 . trabalham em contêiner. 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. porém há outros que merecem atenção.AG8 Informática TAGS DE FORMATAÇÃO Assim como em um editor de texto. tags.

ESTILO LÓGICO As tags deste tipo indicam como o texto destacado deve ser utilizado e não como será apresentado. Algumas tags de estilo lógico utilizadas em HTML padrão: <EM> Indica que os caracteres deverão ser enfatizados de alguma forma. <CODE> Esta tag indica um código de exemplo a ser exposto. De forma diferente do restante do texto. Geralmente em itálico <STRONG> Esta tag enfatiza ainda mais que a anterior. 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. por exemplo. Este estilo não indica como o texto será formatado e sim como será utilizado no documento. <SAMP> Esta tag indica texto de exemplo. Dependerá do browser. Em negrito. 40 .AG8 Informática 1.

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. 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 . 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. Neste estilo ele será visualizado da forma que atribuir as tags a ele.AG8 Informática 2.

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

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

Claro que você deverá praticar e principalmente planejar a sua tabela. O comando para se inserir uma tabela é <TABLE>. fica muito difícil de controlar o código HTML da sua home-page. 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. 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 . quais são os comandos para se criar uma tabela e mostrar alguns exemplos. nesta parte. para iniciar uma linha devemos introduzir a tag <TR> e para uma célula (alguns preferem dizer coluna) <TD>. Todos estes comandos são encerrados como </TABLE> .AG8 Informática TABELAS As tabelas são muito importantes para o designer de uma home-page. pois os objetos podem estar melhor posicionados na home-page. Vamos supor que queiramos montar uma tabela 3X2. pois sem isso. Vejamos um exemplo. Com elas podese fazer alinhamentos que dificilmente seriam possíveis com simples comandos. Vamos discutir. </TR> e </TD> respectivamente. ou seja de 3 colunas por 2 linhas.

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

isto se torna particularmente útil quando se quer dar destaque a uma célula em especial. como <FONT COLOR=>. por exemplo. 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. vimos que podemos acrescentar cores ao fundo de uma célula. para tirarmos este espaço devemos acrescentar dentro da tag <TABLE> o parâmetro CELLSPACING=0. outra coisa que também pode ser feita é mudar a fonte com os comandos de formatação que você já conhece. mas com um certo espaçamento entre elas. Repare que no exemplo anterior nós colocamos BORDER=0 e as células apareceram coloridas.AG8 Informática 2. 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. <TABLE BORDER=0 CELLSPACING=0> <TR> <TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD> <TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> </TR> <TR> <TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> <TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD> </TR> </TABLE> 63 .

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

se você quiser que uma célula ocupe uma única linha. 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. Logo.AG8 Informática </TABLE> Repare neste exemplo. 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. 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. 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. Mas se quisermos definir uma única célula ocupando uma coluna inteira ? Neste caso usamos o atributo ROWSPAN. você deve inserir o parâmetro dentro da tag <TD> desta célula. 65 . São eles que nos possibilitam remodelar a disposição das células dentro da tabela. pois somente desta forma você conseguirá fixar o uso destes parâmetros. que a legenda já sai centralizada com relação a tabela e repare no espaço dentro da célula devido ao comando CELLPADDING. como no nosso exemplo. 4-OS ATRIBUTOS COLSPAN E ROWSPAN Estes atributos são muito importantes dentro da tag <TABLE>.

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

Sendo assim. 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. a questão é que para tabelas mais complexas. 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. com alinhamentos mais precisos cada navegador interpreta estes comandos HTML de tabelas de forma diferenciada.0. como por exemplo: "Criando sites arrasadores na Web" (capítulo 4) ou "HTML Truques Espertos" (capítulo 5).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. Você não reparou nenhuma diferença no uso destes navegadores para nossos exemplos. Como já vimos antes. alguns comandos HTML não funcionam em um dado navegador. quando você construir tabelas deve sempre levar em conta em qual navegador você dará preferência para rodar a sua página. Nessas referências você poderá encontrar vários outros exemplos de páginas usando tabelas mais complexas (como por exemplo. Por isso nunca é demais deixar claro à sua home-page em qual navegador ela roda melhor a sua formatação. Um exemplo típico é uso de CELLSPACING e CELLPADDING. procure em sites e até mesmos em livros . 67 .0 e no Netscape Communicator 4. se você reparou para falarmos de tabelas rodamos os exemplos nos dois navegadores mais conhecidos : Internet Explore 4.

AG8 Informática FRAMES Frames (quadros) são relativamente usadas na Web. 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. Vamos procurar entender melhor. Fazer frames tem o mesmo procedimento que confecção de home-pages simples. porque julgam que eles "estragam" o layout da homepage. 68 . 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. por outro lado há os que abominam o uso de frames. Há os que adoram o uso de frames e não admitem que suas home-pages fiquem sem elas.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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