curso web_design - html

8/7/2019 Curso WEB_Design - Html

http://slidepdf.com/reader/full/curso-webdesign-html 1/37

DATACONTROLEducação e Tecnologia

Curso de WEB Design

Módulo de HTML



DATACONTROL - Educação e Tecnologia

Curso de WEB Design – Módulo de HTML 2

CAPÍTULO 1Neste capítulo iremos abordar conceitos sobre:1. Redes2. Internet3. Intranet

4. Extranet5. Uma visão geral de como funciona a Internet.

REDES E INTERNET

Para que você possa entender o que é e como funciona a Internet é necessário primeiro compreender o qé uma rede de computadores.

Uma rede de computadores consiste, na forma mais simples de sua definição, na conexão de diversocomputadores 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 muitacoisas, incluindo-se dados, através de uma longa distância. Então a interação de computadores normalmente come

com computadores no mesmo escritório ou no mesmo prédio conectados a uma rede local. O termo rede de área locou LAN, descreve um grupo de computadores geralmente conectados por mais de 300 metros de cabo, a quinterage e permite o compartilhamento de recursos. As redes locais são: Ethernet, Token-ring e a rede remota (WANAs 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 umconfiguração em anel ou estrela. Em redes Ethernet, os dados passam de um servidor para um computador na redAlguns sistemas de rede não usam qualquer cabo. A aparelhagem de redes remotas (ou sem fio) estendem as redealé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 á outrredes regionais. Um Backbone é uma estrutura básica para transmissão de dados na Internet extremamente velosão as espinhas dorsais do tráfego.

A Internet é uma interconexão de diversas redes através de linhas de alta capacidade chamadaBackbones, construídos para comportar o grande tráfego de informações que circulam na Internet. É um local públi

e não pertence nem é operada por nenhuma empresa.Agências governamentais ou companhias privadas são as responsáveis pela construção destas estruturaAs companhias de alcance de longa distância constróem backbones e vendem o acesso a eles a outras companhiaos ISPs (provedores de serviço da internet), é o que permite o acesso de seu computador a Internet, cobram dambos pelo tráfego de informações.

Vamos entender como funciona todo o processo desde ligar o computador até receber ou enviar ummensagem 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. Esshardware é projetado para transmitir dados entre redes e forma grande parte do "elemento de coesão" que uneInternet. As cinco partes mais importantes são: Hubs, pontes, portas de comunicação (gateways), repetidores roteadores.

Os Hubs são importantes porque ligam grupos de computadores entre si e permitem que os computadorese comuniquem uns com os outros. As pontes ligam as redes locais (LANs) umas ás outras. Permitem que os dadodestinados á outra LAN sejam enviados a partis delas, enquanto mantêm simultaneamente dados locais dentro de sprópria rede. As portas de comunicação (gateways) são semelhantes ás pontes, mas também traduzem dados de utipo de rede para outro.

Os dados sempre atravessam grandes distâncias quando viajam através da Internet, o que pode criar uproblema, pois o sinal que os envia pode enfraquecer com a distância. Para evitar que isto ocorra, os repetidoramplificam 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 dControle de Transmissão). Os roteadores garantem que estes pacotes cheguem ao seu destino. E, posteriormentestes 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 epacotes pelo TCP. Pois a Internet é uma rede comutada, onde não existe uma conexão permanente entre o emissoro receptor. Esses pacotes são enviados de seu computador para a sua rede local, provedor de serviços Internet opara 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ãterá um roteador captando estes dados do provedor, serviço comercial ou rede local e transmitindo para o roteador doutra rede local.

No caso da transmissão entre várias redes regionais, os pacotes serão enviados a um ponto de acessorede (NAP) e depois através de um backbone enviado a outro ponto de acesso próximo ao destino, a um roteadorem seguida ao computador de destino.

Esta divisão em pacotes é que faz a Internet ser conhecida como uma rede comutada em pacotes. É isque os dois Protocolos (conjunto de regras) de comunicação mais importantes fazem: o TCP e o IP. TCP é 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 empresComo uma intranet pode abranger o globo, muitas organizações consideram mais barato compartilhar informaçõcorporativas dessa maneira. Os protocolos e as regras são os mesmos da Internet, com a diferença que se trata duma rede fechada da empresa, disponível somente aos funcionários conectados a ela. As informações disponíveis nintranet são informações corporativas, geralmente de natureza proprietária.

Uma empresa estabelece uma intranet instalando o protocolo TCP/IP, um servidor Web (cujo conceiveremos no próximo capítulo) e navegadores Web, browsers. Os documentos da empresa são convertidos paformato HTML e colocados no(s) servidor(es) Web da intranet. Assim, os funcionários da empresa usam senavegadores Web para visualizar esses documentos, basta digitar o endereço local do documento que desejam vede 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 amesmo tempo.

A EXTRANET é um grupo de intranets interconectadas. As empresas que fazem negócios entre si podeformar extranets para compartilhar determinados tipos de informação.

COMO NASCEU A INTERNET

Em 1969, a ARPA, do departamento de defesa dos EUA, construiu uma rede experimental de computadorchamada ARPAnet. A ARPAnet uniu pesquisadores, militares e universitários, permitindo que os recursos de seucomputadores fossem compartilhados. A rede também permitiu que se fizesse pesquisas militares nas universidade que os militares se comunicassem, tanto entre si como com outros, via e-mail.

Com o tempo, a ARPAnet cresceu e se adaptou aos desenvolvimentos tecnológicos. Como resultadgrandes companhias construíram redes baseadas na ARPAnet e se conectaram a ARPAnet, em especial a NS(Fundação Nacional para a Ciência).

O tráfego cresceu tanto que a rede foi dividida em militar e civil. Com a descentralização ela se tornou umvasta rede de companhias, universidades, individuos, pesquisadores e governo, ou seja, qualquer pessoa qudispusesse de um computador poderia se conectar. Antes era chamada de NSFnet e em 1987 passou a se chamInternet.

Hoje diversos grupos orientam o crescimento da Internet, como o W3C, World Wide Web Consurtium, quorienta os padrões de evolução; o InterNIC, fundado pela Fundação Nacional de Ciência, que controla o Sistema dNomes de Domínio; etc. Mas isto não quer dizer que estas empresas controlam a Internet, elas orientam secrescimento e ajudam, como outras, a coordenar.

No início, foi o governo federal, as agências de pesquisas, os laboratórios e as universidades que deraforma a Internet. Mais recentemente, são os interesses comerciais que têm determinado a forma de sua infrestrutura.

Para solucionar problemas como nomes de domínio, velocidade, etc., e já está funcionando a "Internet 2Uma rede altamente veloz que está sendo utilizada somente por alguns orgãos governamentais e Instituições de nívSuperior Federal.

Normalmente, para nós pobres mortais, a velocidade de conexão chega a 56 Kbps. Na Internet 2 velocidade de conexão pode chegar a 2,4 Gigabytes por segundo.





Velocidades de conexão deste tipo também são utilizadas por usuários, felizardos, que possuem cabmodem. Onde provedores como o Ajato já operam em São Paulo e Rio de Janeiro.

CAPÍTULO 2

Este capítulo tratará :1. O que é necessário para se criar páginas para a Web.2. A diferença entre páginas Web, Home Page e apresentação Web3. Navegadores4. O que é site, Host, Provedor e Servidor Web5. Protocolos6. Serviços oferecidos na Web

A WORLD WIDE WEB

A Web é um conjunto de documentos acessíveis por meio da Internet. Esses documentos (ou páginas Wecontêm uma tecnologia chamada hipertexto. Onde você poderá percorrer partes do documento e outros documentatravés de pontes chamadas de links.

A quantidade de informação que está disponível no universo da Internet é mais do que você poderassimilar durante uma vida inteira, e ela se encontra das mais variadas formas. Podendo se perder facilmente. Assié muito importante o sistema de navegação, ou seja, a forma como as informações estão dispostas.

Poderia descrever a World Wide Web como um sistema de informação em hipertexto, gráfico, distribuídindependente de plataforma, dinâmico, interativo e global, utilizado na internet.

O hipertexto permite que você leia um texto e navegue por ele e por informações visuais de forma nãolinear, com base nas informações que deseja obter em seguida. A Web fornece recursos de imagens e animaçãfantásticos.

É independente de plataforma pois você pode acessar as informações disponíveis na Web igualmente bea partir de qualquer computador, sistema operacional e monitor de vídeo.

Como o volume de informações é muito grande ela é distribuída por diversos sites (um Site da Web é ulocal que divulga algum tipo de informação. Quando você exibe uma página Web, o seu navegador se conecta a esssite da Web para obter essas informações). Estas informações contidas nestes sites são encontradas através d

URLs (endereço na internet).A Internet ainda é interativa, ou seja, ela interage com o usuário. Não é como a TV.

1. HOME PAGE, PÁGINA WEB, SITE E APRESENTAÇÃO WEB?

Vamos entender melhor o cada termo deste quer dizer, já que os pronunciamos tantas vezes acima. Umpágina Web é um elemento específico de uma apresentação da Web que está contido em uma estrutura. A primeipágina de uma apresentação é chamada de home page.

Uma apresentação da Web é um conjunto de páginas Web estruturadas sobre um determinado conteúdeste conteúdo é aquilo que você está colocando na Web. Informações, texto de ficção, imagens, ilustraçõeprogramas, textos humorísticos, diagramas, jogos, etc. Tudo isso é conteúdo.

Esta apresentação, como outras, ficam armazenadas em um local chamado Site. O Site é hospedado pcomputadores conectados permanentemente a Internet e recebem o nome de Host.

Para entrar na net é preciso fazer uma conexão direta ou usar o computador Host. O provedor de serviçoInternet (ISP) atua como o computador Host (aquele computador que fica conectado permanentemente na Internpara lhe prover o acesso a mesma). ISP é uma empresa que fornece o gateway necessário para acessar a Internet.

Os ISPs podem ser de vários tipos, oferecendo diversos níveis de serviço:

Acesso indiretoVocê obtêm acesso através de um serviço on-line, como UOL, SBT On-Line e STI, entre outros, no Brasil.

necessário ser membro do serviço. A vantagem é que estes serviços facilitam a navegação, oferecendo mecanismde pesquisa personalizados e vínculos que levam a locais interessantes na Web. A desvantagem é que acessar userviço on-line por meio da Internet consome mais tempo do que adotar um caminho mais direto.





Acesso discadoA conexão é feita através de um modem. O ISP age como seu gateway para a Internet, mas não forne

serviços além de correio eletrônico e acesso á Internet. A vantagem é o menor esforço para navegar e colhinformações. A desvantagdem são os serviços de viagens, games e grupos de bate-papo entre os membros.

Conexão PermanenteFunciona por meio de uma rede de uma empresa. Nesse caso, a rede é conectada diretamente á Intern

pelo gateway. Você efetuará um logon para entrar na rede da empresa e poderá acessar a Internet. A vantagem équantidade de serviços oferecidos e a desvantagem é a questão da segurança e o valor pago ao ISP pelos serviços.

Como se cria uma página web?Uma página Web é composta de textos e comandos especiais (tags) de HTML, um acrônimo de Hyperte

Markup Language. Essa linguagem é bastante simples e tem como finalidade básica formatar o texto exibido e criligações entre as páginas da Web, criando assim documentos com o conceito de hipertexto.

Para que o conteúdo de um documento HTML possa ser formatado e exibido na Internet demos usar uprograma chamado browser, o navegador.

Ele lê o conteúdo do arquivo, interpreta os comandos e exibe sua página. Como já foi citado acima, existediversos tipos de browsers disponíveis no mercado.

O código pode ser escrito usando o mais simples editor de texto, como o bloco de notas do Windows. Poréa forma mais prática e produtiva é utilizar um editor HTML. Há vários no mercado como: HotDog Profession(www.sausage.com), o SiteAid (baixado do site www.siteaid.com), o FrontPage da Microsoft, etc.

É preciso estar conectado para visualizar a página que criei?Não, o browser funciona independente de se estar conectado a Internet. A melhor forma de se trabalh

desenvolvendo uma página HTML é off-line, desconectado.Primeiro você cria as páginas em seu computador e as testas por meio do browser. Depois, deve colocá-l

em um servidor Web para que outras pessoas também possam visualizá-la.

2. OS NAVEGADORES

Para visualizar toda informação disponível na Internet é necessário um Browser, navegador. Há vári

disponíveis no mercado. Os mais conhecidos são o Internet Explorer e Netscape Navigator.Os navegadores podem acessar vários tipos de dados, não só do protocolo FTTP mas também FTGolpher, Usenet News, Telnet, etc.

O que um navegador faz com maior freqüência é lidar com a formatação e a apresentação de documentoda Web. Cada página é um arquivo, criado em uma linguagem denominada HTML, que contém o texto da página, suestrutura e vínculos para outros documentos, imagens ou outros meios. A recuperação de documentos a partir dWeb e a formatação desses no seu sistema são as duas tarefas que compõem a base da funcionalidade de unavegador.

3. SERVIDOR WEB

Para exibir páginas na Web e navegar por elas, você precisará apenas de um navegador da Web. Padivulgar páginas na Web, você precisará, na maioria dos casos, de um servidor Web.

Servidor Web é o programa que é executado em um site da Web e que é responsável por atender ásolicitações de arquivos feitas pelo navegador da Web. Você precisará de um servidor Web para divulgar documentna Web.

4. PROTOCOLOS INTERNET

Para que os computadores se comuniquem eles precisam seguir conjuntos de regras chamados protocoloAs pessoas que desenvolvem essas regras não foram apenas inteligentes; elas criaram nomes interessantes, comGolpher (esquilo) e World Wide Web (teia mundial). Os extensos nomes descritivos e geralmente difíceis de lembrforam reduzidos a acrônicos como HTML.





Internet Protocol (IP)Este é um dos protocolos mais básicos. O IP é o sistema que define o "local", ou endereço IP, das redes qu

compõem a Internet. E um certo sentido, o IP forma o "mapa" da Internet e cada rede pode ser contatada em uponto localizado nesse mapa.

Transmission Control Protocol (TCP)TCP é o protocolo que define a estrutura dos dados transmitidos que já foi explicado num capítulo anterio

nº 01.File Transfer Protocol (FTP)Protocolo desenvolvido para a transmissão de mensagens longas entre duas pontas.

Hypertext Markup Language e Hypertext Transfer Protocol (HTML e HTTP)Juntos eles comandam a WWW, World Wide Web. O HTML define um método de incluir formatação e

arquivos de texto para que, quando exibidos com um browser. O HTTP define a maneira como os arquivos HTMdevem ser enviados e recebidos.Telnet

Um protocolo que define como um computador pode atuar como um terminal em outro. Usando uprograma Telnet, é possível se conectar a outro computador e executar programas nele, como se estivesse sentaddiante de sua própria máquina.

GopherOs servidores que usam protocolo gopher apresentam seu conteúdo na forma de submenus.

NNTP (Network News Transfer Protocol)Servidores UseNet armazenam mensagens e as encaminham usando o protocolo NNTP. Várias pessoa

podem então ler notícias como o Outlook Express News.

CAPÍTULO 3Este capítulo têm como objetivo:1. Organização do conteúdo

2. Formas de navegação3. Storyboard4. Diagramação

ORGANIZAÇÃO E NAVEGAÇÃO

1. O QUE PRETENDE DIVULGAR?Que tipo de conteúdo você pode apresentar na Web? Praticamente o que quiser. Eis aqui alguns tipos d

conteúdo mais comuns na Web, no momento:

o Informações pessoais: informações sobre você, por exemplo.o Hobbies ou interesses especiais: filmes, motocicletas, etc.

o Publicações: como jornais, revistas.o Perfis de empresa: o que uma empresa faz ou vende, etco Documentação On-line: desde manuais, guias de treinamento, dicionários, etc.o Catálogos de compras: comercialização de artigos.o Lojas on-line.o Pesquisas de opinião: a interatividade com o usuário através de formulários, caixas de sugestões, etc.o Educação On-line: numerosas universidades, escolas e empresas particulares oferecem o ensino a distânc

através da Web.





O único limite da Web é a sua própria vontade. Por isso, se a sua idéia não estiver nesta lista ou parecmeio maluca ou ainda não estiver amadurecida, pare e navegue um pouco pela Internet. Com certeza encontexcelentes idéias e poderá amadurecer as suas e ter muitas outras.

2. ESTABELEÇA SEUS OBJETIVOS!Você deve se perguntar os que seus leitores procuram? O que deseja realizar com sua apresentação? Ele

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, mas a determinação irá ajudá-lo a elaborar, organizar e codific

suas páginas com uma maior probabilidade de sucesso.Caso vá desenvolver uma apresentação Web para uma empresa ou pessoas é importante que você col

junto ao seu cliente seus objetivos, idéias, a forma que imagina sua página, etc. Assim, ficará bem mais fácil dcomeçar seu trabalho.

3. DIVIDA SEU CONTEÚDO EM TÓPICOSCrie uma lista com os principais tópicos, a princípio não importa a ordem. Esta é uma forma de começar a

organizar.Sua lista poderá Ter quantos tópicos desejar, mas se perca listando uma quantidade enorme de tópicos (se

leitor poderá se cansar e se perder em meio a tantas opções).

4. ORGANIZAÇÃO E NAVEGAÇÃOAqui descreverei algumas das estruturas e navegação e suas características e ainda consideraçõe

importantes como:

o Os tipos de informação que se adaptam melhor a cada estrutura.o Como os leitores conseguem se deslocar pelo conteúdo de cada tipo deo estrutura para encontrar as informações de que precisam.o Como Ter certeza de que os leitores conseguem se localizar nos seus documentos (contexto) e achar

caminho de volta até uma posição conhecida.o Ao ler esta parte reflita como suas informações se encaixaria em cada uma.o Você poderá combinar, até mesmo, duas estruturas e criar uma nova forma de navegação.

FORMAS DE ORGANIZAÇÃO1. HIERARQUIAS

A maneira mais fácil e mais lógica de estruturar os seus documentos. As hierarquias e os menus adaptamse especialmente bem aos documentos online e de hipertexto. Exemplo: sistemas de ajuda.

HOME PAGEEm uma organização hierárquica, é fácil para os leitores descobrir a posição em que se encontram n

estrutura. Nas hierarquias, a home Page fornece uma visão geral do conteúdo que está subordinado a ela e ainddefine os principais vínculos ás páginas dos níveis inferiores da hierarquia.





Este tipo de estrutura oferece um risco mínimo de ficar perdido, além de ser uma forma mais fácil dlocalizar informações. Mas procure não incluir muitos níveis para não aborrecer os leitores. Pois estes, após ter dselecionar opções em muitos menus, acaba esquecendo o que estava procurando. Fica aborrecido demais paprosseguir. Procure manter apenas dois ou três níveis na sua hierarquia.

2. LINEARMuito semelhante a forma como são organizados documentos impressos. Neste tipo de estrutura a hom

page é o título, ou introdução, e todas as outras páginas acompanham-na em seqüência com vínculos que levam duma página a outra, normalmente com opções de avançar e retroceder.

Uma organização linear é muito rígida e limita tanto a liberdade dos seus leitores de consultar ainformações quanto a sua própria liberdade de apresentá-las. As estruturas lineares são ideais para apresentar, ambiente on-line, um material que já tenha esse tipo de estrutura no ambiente off-line.

Como por exemplo: instruções passo-a-passo ou treinamento baseado em computador.

3. ESTRUTURA LINEAR COM ALTERNATIVASVocê pode tornar a estrutura linear menos rígida permitindo que o leitor se desvie do caminho principa

Pode ter, por exemplo, uma estrutura linear com ramificações alternativas que partam de um único tronco. Aramificações podem se reunir ao tronco principal em algum ponto mais adiante, em um nível mais baixo da estruturou continuar se ramificando em níveis inferiores seguindo caminhos próprios até chegar a um "fim".

Além de ramificar a estrutura linear, você pode também oferecer vínculos que permitam aos leitores avançou retroceder na cadeia, caso precisem rever alguma etapa ou já conheçam alguma parte do conteúdo.

4. COMBINAÇÃO DAS ESTRUTURAS LINEAR E HIERÁQUICAUma forma comum de organizar um documento na Web consiste em obter uma combinação das estrutura

linear e hierárquica. Essa estrutura combinada ocorre com maior freqüência quando documentos de estrutura rígidporém lineares, são apresentados no ambiente on-line. Um exemplo são os famosos FAQ ( Frequently AskeQuestions).

A combinação de documentos lineares e hierárquicos funciona bem desde que haja pistas em relação acontexto.

Como essa é uma estrutura linear e hierárquica, em cada página do roteiro você deve oferecer vínculos pao leitor avançar, retroceder, retornar ao início e subir um nível.





O STORYBOARDA próxima etapa do planejamento da sua apresentação da Web consiste em determinar o conteúdo que se

apresentado em cada uma das páginas e criar alguns vínculos simples que possibilitem a navegação por essapáginas.

O StoryBoard de uma apresentação é um conceito emprestado do cinema, em que cada cena e cda tomadde câmera é esboçada na ordem em que ocorre no filme. O storyboard fornece uma estrutura e um plano globais pao filme, que permitem que o diretor e sua equipe tenham uma idéia clara de onde cada tomada se encaixa no filme.

O uso de storyboard, uma técnica cinematográfica, consiste no processo de criação de um resumo cosketh (rascunho) da aparência final do seu trabalho antes de você efetivamente pôr em prática suas idéias. O uso dstoryboard ajuda-o a visualizar a apresentação como um todo e a prever sua forma final.

Esta técnica fornece um esboço geral de como a apresentação Web irá ficar quando estiver prontindicando os tópicos que serão incluídos em cada página, os vínculos básicos e talvez até mesmo uma idéconceitual do tipo de imagens gráficas que você usará e onde elas serão apresentadas. No caso de granddocumentação, o storyboard deverá ser dividido em áreas e cada equipe cuidará da parte que lhe cabe. Paestruturas muito pequenas talvez não seja necessário criar um storyboard.

DICAS PARA SEU STORYBOARD1. Coloque cada tópico em uma página, mas se tiver um grande número de tópicos, a manutenção e

vinculação, podem tornar-se maçantes.2. Defina bem a forma de navegação entre as páginas. Se houver formas alternativas, torne a navegação pa

os leitores a mais intuitiva possível.3. Tome cuidado com o que será incluindo na home page, lembre-se, ela será a porta da sua apresentação.4. Tenha sempre em mente seus objetivos. Procure não se distanciar deles.

DIAGRAMAÇÃOA disposição de imagens, textos, vídeos, etc. Tudo que você deseja colocar em sua página precisa s

colocado de forma agradável ao leitor. Daí abordarmos, de forma geral, a diagramação. Esta palavra vêm do munddos impressos. Trata-se da disposição de elementos que compõem uma página.

Deve ser observado o tamanho das fontes, disposição das imagens, forma como o texto será apresentadetc. Uma boa diagramação também garante o retorno do internauta.

CAPÍTULO 41. Este capítulo têm como objetivo:2. Tratar das etapas do projeto de um Website3. Quais os profissionais envolvidos.4. Administração do site.5. Dicas para não cometer erros graves na hora de projetar e construir um Website





PROJETO DE WEBSITE

1. HIPERTEXTOÉ a utilização da HTML como linguagem para desenvolvimento da sua página. Dominá-la é importante pa

um bom desenvolvimento do seu projeto.

2. WEB DESIGN E VISÃO DO PROJETOA maioria das pessoas associam Design unicamente ao projeto gráfico de um WebSite, o que é um erro.O conceito de Web Design envolve todos os aspectos da construção de um site, desde o desenho de su

estrutura de navegação e forma de disponibilização da informação até o desenvolvimento do projeto gráfico.A construção de um Website deve, antes de mais nada, ser entendida como um projeto, composto de fase

e desenvolvido por pessoas de backgrounds diferentes.

3. CONTEÚDO E FORMAO 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 primeira muito relaciona-se ao público alvo. Para qual tipo de público você está disponibilizand

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: 1º é o conteúdo. É o elemento central.2º ponto é o design do site (estrutura de navegação e projeto gráfico). Estruturar a informação de forma qu

a navegação seja o mais intuitiva possível faz com que sua apresentação Web tenha muito mais chance de sucessconsiderando o tipo de informação disponibilizada conforme seu público alvo.

3º ponto é a atualização para que não perca uma das principais características da Internet: a dinamicidade.

4. EQUIPE PARA CONSTRUÇÃO DE UM WEBSITEA construção de um Website exige uma equipe com backgrounds diferentes.

A equipe de profissionais adequada seria composta:a) Analistas de sistemas (com experiência em gerência de Informação), responsável pela organização d

informação;b) Design Gráfico, responsável pelo projeto gráfico;c) Programadores, que, dependendo do tipo de site, podem ser programadores HTML, Java, JavaScri

CGI, etc;d) Assistentes, que auxiliam o trabalho do Analista de sistemas ou do Design Gráfico (ilustradore

digitadores, etc.).

A equipe deverá ter um coordenador, responsável em fazer o trabalho fluir de forma eficiente, dentro de ucronograma aproveitando o máximo de cada profissional.

Depois do site construído surgirá uma outra pessoa: o WebMaster, que será responsável pela administraçdo site.

É muito haver o acúmulo de funções por membros da equipe. Mas é importante definir o papel de cada construção do site.

FASES NA CONSTRUÇÃO DE UM WEBSITE

1ª Fase : Organização da InformaçãoA primeira etapa é a organização da informação que irá compor seu site. O Analista de sistemas deve

colher toda informação e analisá-la, preparando a para a etapa seguinte, onde se iniciará o design do site.





Critérios de avaliação das informações:Qualquer documento pode ser disponibilizado através da Web mas alguns se tornam mais úteis quand

adequados as novas características dessa nova mídia. Aqui estão alguns dos critérios que deverão ser observadpara o projeto do site:

1. Material que tire vantagem da estrutura não linear de navegação do hiperdocumento.Ex.: manuais, guias, grandes bases de dados textuais, etc...;

2. Material que é mais valoroso se atualizado freqüentemente e mais facilmente.Ex.: agenda de reuniões, agenda telefônica, calendários, etc ...;

3. Material que possa ser totalmente substituído por uma impressão.Ex.: gráficos e textos (imagens de alta qualidade não são recomendáveis);

4. Material que requer intercâmbio de informações.Ex.: formulários de pesquisa, fichas de inscrição, etc...

2ª Fase : Conceituação do site e definição da estrutura de navegação Normalmentnesta etapa envolve uma ou mais reuniões de criação.

Todos os membros da equipe devem participar das reuniões de criação, cujo objetivo é obter o manúmero de idéias possíveis para a criação da estrutura de navegação e do projeto gráfico. O Coordenador da equipo Design Gráfico e o Analista de Sistemas, com suas respectivas visões de projeto, coordenam essas reuniões, paque as sugestões de áreas diferentes possam se integrar.

Uma vez discutidas e analisadas todas as sugestões de áreas diferentes possam se integrar. Uma vediscutidas e analisadas todas as sugestões, pode-se então, criar a estrutura de navegação. Nesta etapa, desenhfluxogramas de navegação, mostrando como as páginas estão linkadas (conectadas) entre si, ajudará a Ter umvisão geral do site. No futuro, isso facilitará também o processo de modificar, acrescentar ou retirar páginas.

3ª Fase: Montagem do SiteUma vez definida a estrutura de navegação, os membros da equipe poderão então trabalhar cada um e

sua área: o Design Gráfico e seus Assistentes desenvolverão o projeto gráfico, enquanto o Analista de Sistemasprogramadores montarão a estrutura de navegação (seja em HTML, Java, JavaScript ou no que tiver sido escolhid

como mais adequado para a construção do site).

4ª Fase: TestesAntes de ser disponibilizado para o público em geral é importante testar a navegação de todo o sit

checando os links de texto e imagens. É importante entrar no site a partir de várias plataformas e conexões diferentepara testar a velocidade de carga e consertar falhas de diagramação, que pode mudar, de acordo com o tamanho dmonitor e resolução usada.

DICAS E CONSIDERAÇÕES IMPORTANTES 1. Na criação do projeto gráfico, tente sempre optar por soluções que melhor se adaptem a plataforma ma

usada. Por exemplo: monitor 14 polegadas com resolução de 640x480, faça com a melhor diagramação das páginaaconteça quando o site é visto nesse tipo de monitor e resolução. Caso o seu site deva ser diagramado para umresolução ou tamanho de monitor diferentes do mais usado, informe no site.

2. Num projeto gráfico deve sempre se perguntar se sua apresentação ficou adequada ou não ao que scliente desejava e ao seu público alvo.

3. Para ter uma garantia que suas imagens serão sempre bem visualizadas, procure trabalhar com imagepaletizadas (formato .gif). O melhor resultado para isso será trabalhar suas imagens em RGB e depois indexálas coo menor número de cores possível. Caso precise utilizar imagens True Color, salve-as em formato .jpeg, que resultaem arquivos pequenos.

4. Sempre indique em que browser sua página será melhor visualizada.





5. A página de entrada de um site é muito importante. Ela deve ser projetada de forma que diga a que o sise destina, seja de forma textual, visual ou estrutural.

6. O conteúdo e forma como ele é apresentado serão os principais atrativos de suas páginas, a não ser quo ponto chave sejam as imagens. Por isso, não pense que a net é igual a outras mídias.

7. Direitos autorais: A proteção de direitos autorais não costuma ser muito evidente na Web. O deseoriginal de uma página não é protegido. Mas qualquer texto, gráfico, vídeo ou áudio originais deve ser protegido. Ulink ou URL não é protegido mas uma lista de links(como no caso das bibliotecas virtuais) deve ser protegido pelodireitos autorais.

8. A netiqueta e Domínio público: A Web foi criada com base em ser capaz de atar links de hipertexto dqualquer outra localização da rede. Consequentemente, quando você disponibiliza um site, implica em você permitiroutros "linkar" sua página de Web, porém a netiqueta recomenda que se peça permissão aos Webmasters sempque possível.

ADMINISTRAÇÃO DE UM SITETodo WebSite deve ter um Webmaster, ele é a autoridade máxima no site e coordena tanto se

desenvolvimento quanto sua manutenção além de responder a toda correspondência enviada ao site. Seu endereçeletrônico deve ser divulgado na primeira página e em todas as outras que exijam um processo interativo.

1. DIVULGAÇÃOCom o potencial de audiência de milhões encontrados na Internet é necessário utilizarmos todos os recurs

disponíveis nesta para conseguirmos atingir uma audiência chave.

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.b) Search engines: as informações de seu site devem ser organizadas da melhor forma possível para

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 aparec

estrategicamente localizada nas páginas de sites que vendem espaço publicitário. São na verdade imagens clicáve

para o site em promoção.

2. ESTATÍSTICASMostram as páginas mais visitadas, horários mais visitados, dias mais visitados, etc. Assim é possível defi

o perfil do usuário e desta forma atualizar o site de forma a atrair sempre o maior número de visitantes.

3. CHECAGEM DE LINKSÉ importante estabelecermos uma rotina periódica tanto para checagem dos links internos de sua págin

quanto para os externos. Essa rotina pode ser manual ou automatizada dependendo do tamanho de seu site. Existesoftwares específicos para essa tarefa.

4. ORGANIZAÇÃO DE ARQUIVOS E DIRETÓRIOSOs diretórios devem ser estruturados de acordo com a própria estruturação da informação. Se a

informações estão estruturadas por módulos e submódulos estas gerarão diretórios e subdiretórios. Em um ambienUnix o arquivo principal de cada módulo deve ser sempre chamado de "index.html", inclusive o arquivcorrespondente a primeira página do site (home). Isto, porque, quando chamarmos o endereço da página nãprecisaremos escrever o nome do arquivo. O sistema assume o arquivo "index.html" como "default" para a páginprincipal. Os arquivos e diretórios devem ter nomes que identifiquem seu conteúdo e as imagens devem ser colocadem um diretório específico. A cada nova atualização uma cópia backup da versão anterior de cada arquivo atualizaddeve ser feita.





CAPÍTULO 05Este capítulo abrangerá :1. Uma linguagem de marcação: HTML.2. Tags ou comandos3. Elementos que compõem uma página HTML

HTML: UMA LINGUAGEM DE MARCAÇÃOA HTML é uma linguagem de marcação. Criar um documento em uma linguagem de marcação significa qu

você começa com o texto da sua página e inclui tags especiais no início e no final de determinadas palavras oparágrafos.

As tags indicam as diversas partes da página e produzem diferentes efeitos no navegador.Os arquivos recebem a extensão .html e possuem como ícone a seguinte imagem:

Ícone do Netscape Internet Explorer

O ícone a esquerda pertence ao Netscape e o a direita ao Internet Explorer.A primeira página a ser exibida geralmente recebe o nome de index.htm ou .html, dependendo do proved

que hospeda a página.As tags normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo d

formatação. As tags são identificadas por estarem entre os sinais < > e < / >.Entre os sinais < > são especificados os comandos propriamente ditos.No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando-se a barra d

divisão /, indicando que a tag está finalizando a marcação de um texto.

O formato genérico de uma tag é:

<nome da tag> texto</nome da tag>

Mas algumas tags não possuem finalização. Vejamos agora alguns comandos e o tipo de efeito que estcausam ao texto quando interpretados pelo browser.

Assim como outras linguagens, a HTML possui uma estrutura básica para seus programas. Para que ubrowser interprete corretamente o programa, ele deve possuir alguns comandos básicos que sempre deverão estpresentes. Alguns browsers até dispensam seu uso, porém é melhor assumir como parte fundamental do programtais comandos.

Um programa HTML possui três partes básicas, a estrutura principal, o cabeçalho e o corpo do programTodo programa deve iniciar com o comando, tag, <html> e ser encerrado com o comando </html> . Esse par dcomandos é essencial. A área de cabeçalho é opcional e é delimitada pelo par de comandos <head> e </head> . Est

comandos para cabeçalho são usados para especificar alguns poucos comandos da linguagem. Eles são opcionaou seja, um programa HTML pode funcionar sem eles. Mas é conveniente usá-los, pois o título da página acrescentado através deles.E ainda temos as tags <Title> e </Title> , estes comandos delimitam o texto que iaparecer na barra de título do browser.

A maioria dos comandos será especificado no corpo do programa que é delimitado pelas tags <body></body> . É um comando obrigatório.

<HTML> <HEAD>





</HEAD> <BODY> </BODY>

</HTML>

<HTML> </HTML> Esta tag marca o início do programa HTML<HEAD> </HEAD> Esta tag marca início e fim de cabeçalho

<TITLE> </TITLE> Esta tag delimita o texto que irá ser visualizado na barra de título do browser.<BODY> </BODY> Esta tag delimita o corpo do programa, aonde a maior parte do comando serã

colocados.

1. OS PRINCIPAIS ELEMENTOS DE UMA PÁGINA HTMLUma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links, responsáve

pela chamada de outras páginas para a tela. Todos esses elementos são posicionados na página por meio dcomandos específicos da linguagem.

TÍTULOÉ o texto que aparece na barra de título do browser.IMAGEM São figuras, desenhos e fotos usados para ilustrar a página.TEXTOÉ a informação mais comum dentro da página. Pode ser formatado através de vários comandos.LINKÉ um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clic

no link, o browser acessa outra região da página atual ou uma página localizada em qualquer lugar da Internet. Umfigura também pode ser usada como um link, ou seja, clicando na figura saltamos para outro local.

CABEÇALHOSão linhas de texto com tamanhos especiais. Existem seis tamanhos prefixados de cabeçalho.





2. TÍTULOO título de uma página web indica qual o assunto abordado e irá aparecer na barra de título do browse

Este título é utilizado por programas de lista (hotlist) do seu navegador e também por outros programas que catalogapáginas da Internet. Para atribuir um título a página você deverá utilizar a tag:

<Title> </Title> .Esta tag sempre será incluída no cabeçalho (entre as tags <Head> </Head> e descrevem a mesma).

Considerações sobre o título:1. Você poderá ter apenas um título2. texto deverá ser simples e não poderá ter outras tags3. Escolha um texto curto e que descreva o conteúdo da página

3. CABEÇALHOSOs cabeçalhos são usados para dividir seções do texto, como capítulos de um livro. A HTML divide se

tamanhos de cabeçalhos, de H1 a H6, que aplicam um tamanho de fonte diferenciado no texto que envolvem, umlinha antes e depois e além disso dão um efeito de negrito. O maior tamanho é o H1 e o menor é o H6.

<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 tipos de conhecimentos.<br> Afinal, ele será o responsável pela administração de um site.</p> </body> </html>

Em nosso exemplo introduzi mais algumas tags. Os comandos:

<B> </B> Aplica o estilo negrito ao texto<I> </I> Aplica o estilo itálico ao texto.<P> </P> Inicia um novo parágrafo.<BR> Faz uma quebra de linha.





4. PARÁGRAFOSPara forçar o início de um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o texto n

Segunda linha após o final do parágrafo anterior, deve ser usado o comando <p> . Esse comando pode aparecindividualmente ou em par: <p> </p> .

Quando um comando <p> é inserido em um local do programa, o browser irá sempre avançar uma linha ebranco, posiciona-se na linha seguinte ao comando <p> .

5. QUEBRA DE LINHAO comando <br> faz uma espécie de quebra de linha. Este comando insere uma linha em branco no se

local ou na linha seguinte á qual ele foi inserido, caso esteja no meio de uma linha e não em seu final.A função deste comando é avançar para a linha imediatamente após aquela em que ele ocorre.

CAPÍTULO 06Este capítulo abrangerá :1. Tags de formatação de texto lógicas e físicas2. Texto pré-formatado

3. Endereços, citações e comentários

TAGS DE FORMATAÇÃO

Assim como em um editor de texto, em HTML você poderá utilizar efeitos em seu texto. Como já percebeos comandos, tags, trabalham em contêiner.

Alguns destes comandos já foram introduzidos no capítulo anterior. Os principais comandos de estilo:

TAG SINTAXE FUNÇÃO

STRONG <strong>texto</strong> Similar ao negrito

TYPERWRITER <tt>texto</tt> Deixa o texto com espaçamento regular B<big>texto</big> Aumenta a fonte e aplica negrito

SMALL <small>texto</small> Reduz e altera a fonte

SOBRESCRITO <sup>texto</sup> Eleva o texto e diminui seu corpo

SUBESCRITO <sub>texto</sub> Rebaixa o texto e diminui seu corpo

BLINK <blink>texto</blink> Faz com que o texto pisque

NEGRITO <b>texto</b> Aplica o estilo negrito

ITÁLICO <I>texto</I> Aplica o estilo itálico

SUBLINHADO <u>texto</u> Aplica um sublinhado (em alguns browsers esta tnão funciona).

Estes são os mais utilizados, porém há outros que merecem atenção. Para alterar a formatação de um texem HTML existem dois tipos de estilos que devem ser observados: o estilo lógico e o estilo físico.

1. ESTILO LÓGICOAs tags deste tipo indicam como o texto destacado deve ser utilizado e não como será apresentado. Es

estilo não indica como o texto será formatado e sim como será utilizado no documento. Não é possível garantir qu





um texto destacado que utilize tags deste tipo sempre será apresentado em negrito ou itálico, por exemplDependerá do browser.

Algumas tags de estilo lógico utilizadas em HTML padrão:

<EM> - Indica que os caracteres deverão ser enfatizados de alguma forma. De forma diferente do restando texto. Geralmente em itálico.

<STRONG> - Esta tag enfatiza ainda mais que a anterior. Em negrito.

<CODE> - Esta tag indica um código de exemplo a ser exposto.

<SAMP> - Esta tag indica texto de exemplo. Quando você quer dar um exemplo de endereço para a Internsem criar link.





2. ESTILOS FÍSICOSEste estilo de tag realmente altera a formatação do texto, no estilo anterior você não possui garantia que

texto irá ser visualizado da forma que planejou. Neste estilo ele será visualizado da forma que atribuir as tags a ele.

Algumas tags de estilo físico para HTML padrão:

<B> </B>....................... coloca o texto em negrito<I> </I> .......................... coloca o texto em itálico<TT> </TT> ................... fonte de máquina de escrever com espaçamento uniforme.<u> </u>........................ coloca o texto sublinhado<S> </S> ....................... coloca o texto tachado<BIG> </BIG> ............... o texto irá aparecer maior que o restante ao redor<SMALL> </SMALL> ... o texto irá aparecer menor que o restante ao redor<SUB> </SUB>............. coloca o texto subscrito<SUP> </SUP> ............. coloca o texto sobrescrito

Optando por utilizar tags do estilo físico, caso o navegador não reconheça uma das tags ele a irá substitupor outra equivalente ou ignorará a formatação.

3. TEXTO PRÉ-FORMATADOO texto de uma arquivo em HTML é formatado através das tags. 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 spágina html.

O texto pré-formatado é excelente para apresentar código-fonte com seus espaçamentos adequados. Esrecurso pode ser utilizado para criar tabelas mas não é recomendável.





Uma observação importante é que, ao usar tags de estilo ou vínculo, não tags de elemento, neste espaçelas irão funcionar normalmente.

SINTAXE:

<PRE>TEXTO

TEXTOTEXTO</PRE>

4. CITAÇÕES E COMENTÁRIOSA tag <BLOCKQUOTE> é utilizada na criação de citações longas que não devem ser aninhadas e

parágrafos.. A tag <CITE> destaca citações curtas.

Um exemplo:

<BLOCKQUOTE>"O mercado de webdesign é um dos segmentos de design com maior potencial de crescimento para o

próximos anos. Estima-se um crescimento de no mínimo 50% ao ano até 2005. E, na corrida rumo a esse nov

eldorado, as agências de propaganda mais uma vez largaram na frente dos escritórios de design, investindo primeiem estruturas especializadas para atender á demanda do mercado (...)". Maria Edicy Moreira.</BLOCKQUOTE>

Visualização no Internet Explorer

Visualização no Netscape





Caso queira fazer comentários a respeito do seu código HTML apenas como referência pessoal e não paser exibido em suas páginas você deverá fazer o comentário da seguinte forma:

<!- - comentário - - >

5. ENDEREÇOSEsta tag é utilizada para identificar autorias de sua página. Geralmente são apresentadas na parte inferior d

cada página. Mostra quem confeccionou aquela página, com quem o leitor deve entrar em contato caso queira talguma informação ou fazer alguma observação. Estes endereços são precedidos de um fio <hr>, que ainda veremoe você poderá utilizar a tag <br> para separar linhas.

<ADDRESS> TEXTO</ADDRESS>

Vejamos um exemplo:

<HR><address>[email protected]<br> A serviço de Ltda - 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 necessitemtambém uma forma de estar melhorando a sua HP (Home Page) através de sugestões.

6. A TAG <BLINK>O texto que se encontrar entre estas tags irá aparecer piscando. Dependendo da versão do Netscape, es

tag somente terá efeito sobre o texto se ele estiver sendo visualizado através do Netscape, esse efeito terá umdessas características:





1. texto ficará piscando em intervalos regulares2. Um bloco cinza ou branco ficará piscando atrás do texto.Este recurso geralmente é utilizado para chamar a atenção do leitor sobre uma determinada parte do textoO problema do efeito piscando é que ele chama atenção excessivamente sobre aquela parte do texto tirand

a atenção do leitor do restante do texto. A maioria dos projetistas web consideram este efeito feio, desagradávelirritante. Em HTML poderíamos colocá-lo como se fosse passar a colher com bastante força no fundo de uma pane

de alumínio. Já imaginou?

FONTESPara fazer alterações no tamanho, tipo e cor da fonte de seu texto você utilizará a tag <font> </font> que

do tipo contêiner. Sua sintaxe é a seguinte:

<font size=" " face=" " color=" "> Texto aqui </font>

1. SIZEO tamanho Size especifica o tamanho da fonte utilizada. Os valores permitidos vão de 1, o menor, a 7,

maior. O padrão é 3. Se for especificado um número antecedido com o sinal de adição ou subtração o valor da fonserá acrescido ou subtraído nesse valor. Vamos a um exemplo: se eu estiver trabalhando com uma fonte 5 e fespecificado <font size=+2, o texto passará a ser exibido em 7. Se não houver sinal a fonte será exibida naquele valo

2. FACEEsse parâmetro permite que seja escolhida uma fonte diferente para o texto. Podem ser especificadas vári

fontes, de maneira que, se o sistema não possuir uma determinada fonte ele irá utilizar outra.

Face="name [,name2[,name3]]

Se não forem encontradas as fontes especificadas, então, o texto será apresentado na fonte padrão.

<font face="Agaramond, Arial" size=1>

3. COLOREste parâmetro especifica a cor do texto. Seu valor será especificado no formato hexadecimal, RGB o

através de um nome predefinido de cores.

Algumas cores:

COR CÓDIGO COR CÓDIGO Aqua #70DB93 Blue #0000FFBlack #000000 Cyan #00FFFFFuchsia #FF00FF Gray #C0C0C0Green #00FF00 Lime #32CD32Brown #800000 Navy #23238EOlive #808000 Red #FF0000Silver #E6E8FA Teal #008080White #FFFFFF Yellow #FFFF00

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></html>

4. ALINHAMENTOPense 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ÁGRAFOSO comando <p> inicia um novo parágrafo onde o texto é automaticamente alinhado pela margem esquerd

da tela. Caso você deseje que seu novo parágrafo seja iniciado com um alinhamento diferente você deverá especificna 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 nganhou um forte impulso com a inclusão do plug-in necessário nos navegadores mais recentes (apartir do InternExplorer 4 e Netscape Navigator 4.6). Cada vez mais utilizado, este programa já está sendo empregado em sites dgrandes empresas. Seu poder se deve a sua grande capacidade multimídia e á sua versatilidade. Sua finalidade é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ÇALHOQuanto ao cabeçalho você só poderá alterar o alinhamento para direita e centralizado, a esquerda

alinhamento padrão.

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 detexto. A abreviatura DIV signifi

divisão. Ao usar esta tag num bloco de textovocê estará atingindo todas as tags dentro daquele bloco. Suavantagens sobre o Align é que:

1. Precisará ser utilizada apenas uma vez, ao contrário do atributo Align, que tem de ser incluído ediversas tags.

2. A tag <DIV> pode ser usada para alinhar qualquer elemento (cabeçalho, parágrafos, citações, imagentabelas, 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 podeter os valores left, right e center.

Sintaxe:<DIV ALIGN=" ">

TEXTO e OUTRAS TAGSTEXTO e OUTRAS TAGS

</DIV>

OBSERVAÇÃO:Além do atributo align=center temos a tag <center> </center> que funciona igualmente ao atributo.

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.

medida que a Web desenvolveu-se, as ferramentas também desenvolveram-se. Ferramentas simples de marcaçã

como HTML foram unidas por linguagens de programação de verdade. Incluindo <b>JavaScript</b>, que na verdadnã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 parausuário, tomar decisões, nem autorizar tarefas repetitivas. Tarefas interativas como essas exigem uma linguagemais 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 ESPECIAISHá caracteres que não podem ser obtidos por meio do teclado. Eles podem ser inseridos em sua págiatravés da especificação de um código especial que o browser interpreta e substitui por um caracter específico. Esse

códigos podem ser obtidos utilizando-se uma nomeclatura definida pela ISO - LATIN - 1 ou a partir de umentidade HTML.

A norma ISO utiliza um código composto pelo caractere & seguido do símbolo # e, então, de umcombinação numérica com ponto-e-vírgula. Já a entidade HTML usa o caractere & seguido de uma palavra quidentifica o símbolo com ponto-e-vírgula.

Caso você queira escrever uma página HTML em outro idioma terá que usar bastante esses caractereespeciais.

Imagine que você queira fazer uma página HTML ensinando a outras pessoas a linguagem HTML. Comfaria para explicar uma tag sem que o browser interpretasse como um comando. Terá de utilizar estes símbolo

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 d

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 uscaracteres 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 correr tudo bem. Mas alguém que visualizar suas páginas em um computador que não tenha as mesmconfiguraçõ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çã

do seu browser ficará perfeita, mas pode ser que em outros computadores com a configuração diferente não apareçda mesma forma. O ideal é colocá-la assim:

Café ou caé => Café ou café

E se desejasse colocar a palavra entre aspas:

"Café&quot => “Café”

ALGUNS CARACTERES ESPECIAIS:

CARACTER SÍMBOLO CARACTER SÍMBOLO ESPECIAL ESPECIAL

< ...................< à ...................à> ...................> â ...................â" ...................." á ...................á

{ ....................{ ã ...................ã} ....................} ü ...................ü: ....................: &................... &; ....................; ®...................®= ...................= " ...................."@..................@ ª....................ª$ ...................$ º ....................º% ..................% ? ................... ?

LISTASVamos colocar assim, há basicamente dois tipos de listas: as ordenadas, que contêm uma série de iten

sem numerá-los, e as listas ordenadas, que atribuem um número para cada elemento da lista. Trabalhar com listassimples.

Trabalharemos com os comandos <ul> para listas não ordenadas e <ol> para as listas ordenadas.

1. O COMANDO <UL>Para criar uma lista não ordenada, você deve usar um conjunto de comandos cuja sintaxe básica é mostrad

a seguir. O comando que gera a lista não ordenada é o comando <UL> (unordered list), que deve envolver o primeie o último item da lista. Cada item da lista deve ser precedido do comando <LI> (line list).

<UL><LI> Texto<LI> Texto

</UL>

2. O COMANDO <OL>Para criar uma lista básica não ordenada, você deve usar um conjunto de comandos cuja sintaxe básica

mostrada a seguir. O comando que gera a lista não ordenada (ordered list) é o comando <OL>, que deve envolverprimeiro e o último item da lista. Cada item da lista deve ser precedido do comando <LI> (Line item).

<OL><LI> Texto





<LI> Texto</OL>

OBSERVAÇÃO:Na lista não ordenada cada item receberá um marcador ("bolinha") e a numerada receberá automaticamen

números.

Você poderá personalizar sua lista ordenada com o atributo TYPE e START. O atributo Type pode assumcinco valores para definir o tipo de numeração a ser usado na lista.

"1" : Especifica que os algarismos arábicos padrão devem ser usados para numerar a lista ( 1,2,3,4, ...)."a" : Especifica que as letras minúsculas devem ser usadas para numerar a lista (a, b, c, d, etc.)."A" : Especifica que as letras maiúsculas devem ser usadas para numerar a lista (A, B, C, D, etc.)"i" : Especifica que os algarismos romanos minúsculos devem ser usados para numerar a lista ( i, ii, iii, iv, etc.)"I" : Especifica que os algarismos romanos maiúsculos devem ser usados para numerar a lista ( I, II, III, IV, etc

Exemplo:

<p>Ingredientes para bolo</p>

<ol><li>Farinha de Trigo<li>Açúcar<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çúcar<li>Manteiga<li>Ovos<li>Leite<li>Fermento

</ol>

Usando o atributo START você poderá determinar o número ou a letra que inicia sua lista. O ponto inicia1. Usando o Start, você pudará esse número. Um exemplo: <ol Type=a start=3> .

Usando o atributo VALUE em um item da lista poderemos alterar os valores da lista apartir de qualqu

ponto.

Ex.:<UL>

<LI><LI value=10><LI>

</UL>

IMAGENS





Para inserir uma imagem em uma página web utilizamos do comando, tag, <img src> e seus atributos.<img src=" endereço da imagem no HD">

ex.: <img src="c:\site\imagem.gif">

Poderemos acrescentar a esta imagem os seguintes atributos:

Width ="valor em pixel" largura da imagemHeight ="valor em pixel" altura da imagemAlign =(left, right ou center) alinhamento da imagemAlt ="texto" texto que irá aparecer ao passar o mouse sobre a imagem ou texto que surgirá caso a image

não possa ser visualizada.Border ="valor em pixel" especificação da largura da borda da imagem.Vspace ="valor em pixel" para especificar o espaço que deve ser deixado acima e abaixo da imagem.Hspace ="valor em pixel" especifica o espaço que deve ser deixado nas laterais da imagem.O único obrigatório é o src.

1- Colocando Uma Imagem Como Fundo Da Página

<body background=" endereço da imagem no HD">

ex.: <body background="c:\site\imagem.jpg">

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

2- Colocando Uma Cor Como Fundo Da Página:

<body bgcolor="cor">

Procure não usar cores chamativas. Para que a cor do fundo da sua página chame mais atenção que seconteúdo.

Você pode criar seus próprios fundos de página com programas como o Photoshop e o Corelphoto-paint.

LINKS E ANCORAS

1. LINKSA principal atração da Internet é a criação de documentos com o conceito de hipertexto ,ou seja ,u

documento que se vincula a outros documentos por meio de ligações especiais chamadas links ou hiperlinks.Coesse conceito ,você pode criar documentos que façam referências e permitam ao usuário acessar tais referências nimportando se elas estão em outra página Web ,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 srapidamente acessados por meio dos links. Imagine que você crie uma página sobre determinado assunto em váritópicos abordados. Assim como em um livro você cria todo o texto do documento e depois cria , no início ,um sumár

indicando os tópicos do documento. Se quiser acessar diretamente o texto de um tópico ,basta dar um clique sobreitem do tópico no sumário e ele será imediatamente exibido.

Um link é reconhecido em uma página por estar em cor normalmente diferente do resto do texto e , apassar com o mouse sobre esse texto o cursor muda para uma mão apontando para o link.

Para criar uma link com uma página

<a href="endereço da página"> texto que será o link</a>

ex.: <a href="c:\site\casa.html">Minha casa</a>





Usando uma imagem como link:

ex.: <a href="c:\site\casa.html><img src="c:\site\imagem.jpg"></a>

2. ÂncorasUma â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.Suponha que seu texto seja muito grande , o que tornaria trabalhoso para quem estiver vendo a págin

conseguir se movimentar entre um tópico e outro. Então faça o seguinte : Nomeie um pedaço da sua página atravdo tag :

<A NAME="NOME "> Texto </A>

(Lembre –se que "NOME" é fictício, você escolhe o nome…)

Depois disso escreva o pedaço que você quer associar a esse Nome. Agora crie um link para chegar aesse pedaço , usando o tag :

<A HREF="#NOME"> Clique Aqui</A>

Pronto! Ao clicar na mensagem "Clique Aqui" de sua página , o usuário irá até o pedaço que você nomeou.

ATENÇÃO: O sinal de cerquilha ou escopo (#) é necessário para a âncora, pois avisa ao browser paprocurar o link no documento atual !!!

3. Linkando Arquivos de Outros ServidoresAgora a coisa fica um pouco mais séria . É aqui que está toda graça de Internet. Através de um esquema d

endereçamento , a URL , a Internet consegue acessar um arquivo que está em qualquer micro deste planeta desdque esteja conectado adequadamente a Web.

Como já vimos , a URL serve para especificar a localização de páginas e arquivos em diretórios dservidores da Web . Vamos comparar com um esquema que você usa (as vezes até sem saber ) para acessar alguarquivo em seu próprio computador .

Acessando um arquivo pelo DOS:

C:\WINDOWS\SYSTEM\Lista.TXT

Acessando uma página pela Web:

HTTP:// WWW.ASPMASTERS.CJB.NET

Uma URL é composta por duas partes principais. A primeira é o protocolo Internet do documento, a segundparte é o endereço do servidor e da página.

A sintaxe disso é:

PROTOCOLO: //SERVIDOR.INSTITUIÇÃO/ARQUIVO

Onde:Protocolo é o tipo de servidor que está sendo acessado;Servidor é o computador que contém a página ; Instituição é o tipo de instituição a qual esse computador pertence ( Comercial, Internet Publica, Milit

etc.);Arquivo é o caminho do arquivo.

Exemplo:

HTTP://WWW.TIMASTER.COM.BR

Esse endereço pode ser especificado diretamente na linha de URL do Browser, para acessar diretamentepágina INDEX. HTM , ou então dentro de um link de um documento HTML , através do A HREF que cria uma ligaçãum link para o URL.

<A HREF = "HTTP : // WWW. TIMASTER.COM.BR "> TIMASTER </A>

TABELASAs tabelas são muito importantes para o designer de uma home-page. Com elas podese fazer alinhament

que dificilmente seriam possíveis com simples comandos.A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional e

usuário possa navegar de forma mais eficiente, pois os objetos podem estar melhor posicionados na home-page.Vamos discutir, nesta parte, quais são os comandos para se criar uma tabela e mostrar alguns exemplo

Claro que você deverá praticar e principalmente planejar a sua tabela, pois sem isso, fica muito difícil de controlarcódigo HTML da sua home-page.

O comando para se inserir uma tabela é <TABLE>; para iniciar uma linha devemos introduzir a tag <TR>para uma célula (alguns preferem dizer coluna) <TD>. Todos estes comandos são encerrados como </TABLE></TR> e </TD> respectivamente.

Vejamos um exemplo. Vamos supor que queiramos montar uma tabela 3X2, ou seja de 3 colunas porlinhas, 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>  <TR>  <TD>PRIMEIRA COLUNA </TD>  <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> </TR> 

<TR>  <TD> PRIMEIRA COLUNA</TD> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> <TR>  </TABLE>  </BODY> </HTML>

Salve este exemplo como TABELA.HTM e abra o arquivo num Browser para ver como ficou.Com isto você já consegue Ter uma idéia de como montar suas tabela. O segredo para se conseguir faz

estas tabelas de forma eficiente é planejar e ter a idéia exata do conteúdo desta tabela.Nas células da tabela você pode inserir desde simples frases até figuras inteiras.Parâmetros podem ser acrescidos às tabelas, tais como: aumentar ou diminuir a largura de uma célul

distanciar as células uma das outras; inserir cor de fundo dentro da célula etc.Vamos procurar trabalhar com vários exemplos para visualizarmos melhor o uso destes parâmetros.

1. ALTERANDO A LARGURA DA CÉLULAPara alterar o largura de uma célula da tabela basta acrescentar o parâmetro WIDTH dentro da tag <TD

Exemplo1:

<TABLE BORDER=2><TR><TD WIDTH=100> WIDTH=100</TD>





<TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD></TR></TABLE>

O parâmetro WIDTH pode receber dois tipos de valores, em pixels como no exemplo acima ou eporcentagem, como mostrado no exemplo a seguir. Também dentro da tag <TD> vemos um outro parâmetro queVALIGN=MIDDLE, este parâmetro tem por função alinhar o conteúdo da célula no meio da mesma, ou seja, dentro d

célula as frases são alinhadas com relação ao seu centro.

Exemplo2:<TABLE BORDER=2><TR><TD WIDTH=25%> WIDTH=25%</TD><TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD></TR>

Eu estive aqui...

2. INSERINDO COR DE FUNDO E SEPARAÇÃO DE CÉLULASOutro atributo que podemos ter nas tabelas é mudar a sua cor de fundo, isto se torna particularmente ú

quando se quer dar destaque a uma célula em especial.

Vejamos um exemplo:<TABLE BORDER=0><TR><TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD> <TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> </TR><TR><TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> <TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD>

</TR></TABLE>

Aqui, vimos que podemos acrescentar cores ao fundo de uma célula, outra coisa que também pode ser feié mudar a fonte com os comandos de formatação que você já conhece, como <FONT COLOR=>, por exemplo.

Repare que no exemplo anterior nós colocamos BORDER=0 e as células apareceram coloridas, mas coum certo espaçamento entre elas, para tirarmos este espaço devemos acrescentar dentro da tag <TABLE>parâmetro CELLSPACING=0. Este parâmetro elimina por completo os espaços entre as células.

<TABLE BORDER=0 CELLSPACING=0><TR><TD WIDTH=150 BGCOLOR=RED>VERMELHO </TD> <TD WIDTH=150 BGCOLOR=BLUE>AZUL </TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> </TR><TR><TD WIDTH=150 BGCOLOR=BLUE>AZUL</TD> <TD WIDTH=150 BGCOLOR=RED>VEMELHO</TD> <TD WIDTH=150 BGCOLOR=BLUE> AZUL</TD> </TR> </TABLE>

Outro parâmetro que pode ser usado para separar espaços em uma célula é CELLPADDING que inclui oexclui espaços dentro da célula, ou seja, se você tiver um elemento (frase, texto, figura etc.) dentro da célula vopode acrescentar espaços por igual nos quatros cantos da célula, fazendo com que seu texto ou figura não fiqu"grudado" nas paredes da célula. Aproveite os exemplos anteriores e experimente usar este atributo para ver comele funciona.

Isto já dá uma idéia do funcionamento geral das tabelas na WEB. Muitos dos alinhamentos que encontramna Internet são feito por intermédio de tabelas.

Você também pode usar todos os outros recursos já vistos de HTML para otimizar o uso de tabelas.

3. UM POUCO MAIS DE TABELASAgora que você já está um pouco mais familiarizado com o uso de tabelas e com seus principais atributo

vamos ver como podemos aperfeiçoar o uso de tabelas.Em seguida descreveremos uma série de outros atributos e comandos para tabelas:

<TH> ... </TH>

Esta tag insere um cabeçalho dentro da célula. 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.

<CAPTION> ... </CAPTION>

Exibe um texto centralizado em relação à tabela, como se fosse uma legenda.Exemplo:

<TABLE BORDER=1 CELLSPACING=2 CELLPADDING=6> 

<CAPTION>LEGENDA</CAPTION>  </TR><TR><TH>Conteúdo em negrito</TH></TR>

</TABLE>Repare neste exemplo, que a legenda já sai centralizada com relação a tabela e repare no espaço dentro d

célula devido ao comando CELLPADDING.

4. OS ATRIBUTOS COLSPAN E ROWSPANEstes atributos são muito importantes dentro da tag <TABLE>. São eles que nos possibilitam remodelar

disposição das células dentro da tabela. Vejamos um exemplo prático:

<TABLE BORDER=2 CELLPADDING=2><TR><TD COLSPAN=2>Exemplo do uso do COLSPAN</TD> <TR><TD>CÉLULA 1</TD> <TD>CÉLULA 2</TD> </TR></TABLE>

Neste exemplo vemos que na tag <TD> foi introduzido o parâmetro COLSPAN. Este parâmetro tem finalidade de dizer que sob a célula onde ele foi introduzido podemos ter um certo número de colunas. Logo, se vocquiser que uma célula ocupe uma única linha, como no nosso exemplo, você deve inserir o parâmetro dentro da t<TD> desta célula. A quantidade de células que virão em baixo da célula que recebeu o atributo COLSPAN deve sde acordo com o número especificado no parâmetro. Mas se quisermos definir uma única célula ocupando umcoluna inteira ? Neste caso usamos o atributo ROWSPAN. 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, po

somente desta forma você conseguirá fixar o uso destes parâmetros.

5. USANDO TABELAS COMO MOLDURASUm outro uso bastante interessante de tabelas é como moldura para alguma figura.Para isto basta você iniciar uma tabela e definir um valor para BORDER.

Exemplo:<TABLE BORDER=5><TR><TD> <IMG SRC=NOME DA FIGURA> </TD></TR></TABLE>Claro que você deve usar com muito bom senso este artifício da tag <TABLE>, pois

nem sempre uma moldura em uma figura defini um bom layout (aparência) da suahome-page.

6. COLOCANDO UMA IMAGEM DE FUNDO NAS TABELASUm recurso parecido com a cor de fundo , colocar uma imagem como fundo de uma tabela é uma técnic

muito usada. Através do complemento BACKGROUND dentro da tag TABLE , basta indicar qual o endereço e o nomda figura.

<TABLE BACKGROUND="POOL.GIF" BORDER=5><TR> <TD><H1>Que tal um mergulho agora ? </H1></TD> </TR></TABLE>

7. O atributo RULESPara escolher as linhas internas que serão mostradas dentro da tabela , usamos o atributo RULES , dent

da tag <TABLE> . Os complementos desse atributo são:

none: nenhuma linha interna;rows: para as linhas horizontais entre cada linha da tabela;cols: para as linhas verticais entre cada coluna da tabela;groups: para linhas entre grupos de colunas e seções horizontais, definidas por tags especiais com

COLGROUP e THEAD;all: para mostrar todas as linhas entre cada coluna e linha na tabela ( default ).

Veja uma tabela com todas as linhas internas ( default ):

<TABLE BORDER RULES=all> Outro exemplo sem as linhas internas:<TABLE BORDER RULES=none> Outro exemplo usando o complemento ROWS:<TABLE BORDER RULES=rows> O último exemplo usará o complemento COLS:<TABLE BORDER RULES=cols>





As tabelas são um forte recurso de modelagem das home-pages hoje em dia e para que você consigutilizar bem este recuso não deve se limitar somente aos exemplos desta apostila, procure em sites e até mesmos elivros, como por exemplo:

"Criando sites arrasadores na Web" (capítulo 4)."HTML Truques Espertos" (capítulo 5).

Nessas referências você poderá encontrar vários outros exemplos de páginas usando tabelas macomplexas (como por exemplo, uma tabela periódica dos elementos) e é claro em laboratório desenvolvendo sprópria home-page.

Há uma observação importantíssima que devemos fazer aqui. Como já vimos antes, alguns comandoHTML não funcionam em um dado navegador, se você reparou para falarmos de tabelas rodamos os exemplos nodois navegadores mais conhecidos:

Internet Explore e no Netscape Communicator. Você não reparou nenhuma diferença no uso destenavegadores para nossos exemplos, a questão é que para tabelas mais complexas, com alinhamentos mais precisocada navegador interpreta estes comandos HTML de tabelas de forma diferenciada. Um exemplo típico é uso dCELLSPACING e CELLPADDING.

Isto se deve ao fato de que nem a Netscape e nem a Microsoft entram em um acordo quanto a padronizaçãde seus navegadores. Sendo assim, quando você construir tabelas deve sempre levar em conta em qual navegadvocê dará preferência para rodar a sua página. Por isso nunca é demais deixar claro à sua home-page em qu

navegador ela roda melhor a sua formatação.

FRAMESFrames (quadros) são relativamente usadas na Web. Há os que adoram o uso de frames e não admitem qu

suas home-pages fiquem sem elas, por outro lado há os que abominam o uso de frames, porque julgam que ele"estragam" o layout da homepage.

Fazer frames tem o mesmo procedimento que confecção de home-pages simples, a diferença é que se detrocar a tag <BODY> pela tag <FRAMSET>.

Para termos uma home-page com frames, devemos ter três páginas, uma com o código que contém a ta<FRAMESET> e duas outras com os códigos onde serão inseridas as páginas de cada frame.

Vamos procurar entender melhor.

Um 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 umdocumento “HTML” de frames.

Vejamos um exemplo:<HTML><HEAD><TITLE> Exemplo de frame</TITLE>

</HEAD><FRAMESET COLS=20% , 80%> <FRAME SRC=FRAME1.HTM> <FRAME SRC=FRAME2.HTM></FRAMESET>

</HTML>

Este é o código para gerar os frames (veja a figura).

Agora vamos crias os códigos para serem inseridos nas duas colunas que criamos.<HTML><HEAD><TITLE>Página simples</TITLE></HEAD><BODY>AQUI ENTRA A PRIMEIRA PÁGINA NORMAL</BODY></HTML>

Salve este exemplo como FRAME1.HTM. Por que? Porque no código que geramos no exemplo de framechamamos a página com o comando <FRAME SRC=FRAME1.HTM>, se você salvar o nome do código de formdiferente deverá alterar também o código da página de frame.

<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.HTM, pelo mesmo motivo do código anterior. Sempre lembrandque estas páginas devem estar no mesmo DIRETÓRIO.

Pronto, você conseguiu fazer a sua primeira página com frame.Alem de poder dividir o navegador em colunas com o parâmetro COLS dentro da tag <FRAMSET>, vo

também pode dividir em linhas usando o parâmetro ROWS, ou ainda dividindo em colunas e linhas ao mesmo tempo

<HTML><HEAD><TITLE> Exemplo de frame</TITLE></HEAD><FRAMESET ROWS=50% , 50%> <! Este comando inicia o frame e divide a tela do navegador em 2 parte

uma com 50% da tela e outra com 50%-->

<FRAME SRC=FRAME1.HTM> 

<FRAME SRC=FRAME2.HTM></FRAMESET></HTML>

Uma tag <FRAMESET> pode ser inserida dentro da outra gerando assim frames dentro de frames, como ncódigo abaixo:

<HTML><HEAD>





<TITLE> Exemplo de frame</TITLE> </HEAD><FRAMESET COLS=50%,50%><FRAMESET ROWS=50%,50%><FRAME SRC=FRAME1.HTM><FRAME SRC=FRAME1.HTM></FRAMESET>

<FRAMESET ROWS=50%,50%><FRAME SRC=FRAME1.HTM><FRAME SRC=FRAME1.HTM></FRAMESET></FRAMESET></HTML>

Este código gera a seguinte página:Já deu para perceber que toda a estrutura de frames depende na verdade da tag <FRAME>. Vejam

alguns dos atributos que podem ser inseridos dentro desta tag.

1. PARÂMETROS DE FRAMESParâmetro SRC da tag <FRAME>

Este parâmetro é o responsável por chamar a página HTML que deve ser aberta (inserida) dentro de uframe. Em todos os exemplos até agora só usamos arquivos locais para abrir estas páginas em um frame, mas nadimpede você de colocar no lugar uma URL completa. Por exemplo:

<FRAME SRC=http://www.yahoo.com>Com este comando você será capaz, devidamente conectado, de chamar esta página para a seu fram

onde quer que ela esteja na Internet.

Parâmetro NAMEEste é um dos principais parâmetros da tag <FRAME>. Ele serve, como era de se esperar, para definir

nome do frame. Ele deve ser usado em conjunto com outro parâmetro que é o TARGET.

Parâmetro MARGINWIDTHDefine a margem entre as laterais do frame e seu conteúdo. Exemplo:<FRAME SRC=FRAME1.HTM MARGINWIDTH=100>Este comando cria uma margem de 100 pixels de cada lado do frame.

Parâmetro MARGINHEIGHT Da mesma forma que MARGINWIDTH, este parâmetro define uma distância de margem, que neste caso é

margem superior e inferior do frame. Exemplo:<FRAME SRC=FRAME1.HTM MARGINHEIGHT=100>Dá um espaço de 100 pixels entre as margens superior e inferior do frame.

Parâmetro SCROLLING Define se o frame terá ou não barras de rolagem. Por default quando o conteúdo de uma página excede

tamanho do frame as barras de rolagem são acrescentadas automaticamente. Os valores válidos para SCROLLINsão YES , NO e AUTO .

Exemplo:<FRAME SRC=FRAME1.HTM SCROLLING=YES>

Parâmetro TARGET Este é o mais importante de todos os parâmetros. Ele trabalha em conjunto com NAME e permite qu

coloquemos um link em um frame e o resultado, ou seja, a página linkada, aparece em outro frame.





Vejamos um exemplo de como podemos linkar um frame com outro. Vamos construir uma página qupossua um menu de opções do lado direito, para isso podemos aproveitar os códigos de exemplo abordadanteriormente.

Os códigos são:Arquivo: FRAME.HTM

<HTML>

<HEAD><TITLE>FRAMES</TITLE></HEAD><FRAMESET COLS=25%,75%><FRAME SRC=FRAME1.HTM SCROLLING=NO><FRAME SRC=FRAME2.HTM NAME=TESTE></FRAMESET></HTML>

Arquivo: FRAME1.HTM <HTML><HEAD><TITLE>FRAMES</TITLE>

</HEAD><BODY BGCOLOR=YELLOW><CENTER><H2>Escolha um Link</H2></CENTER><BR><A HREF=http:\\www.amazon.com TARGET=TESTE>Livraria Amazon</A><BR>< A HREF=http:\\www.yahoo.com TARGET=TESTE>Pesquisador YAHOO</A><BR><A HREF=FRAME2.HTM TARGET=TESTE>Volta para Frame2.htm</A></BODY></HTML>

Arquivo: FRAME2.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 e

Frame.HTM</FONT></CENTER></BODY></HTML>

Se tudo funcionar convenientemente você deverá visualizar sua página como abaixo, mas é claro que olinks que não são locais funcionarão somente se você estiver conectado.

2. Criando um frame InlineSe você quiser misturar texto , figuras e um frame em uma mesma página você precisa criar um frame inlin

Para isso , utilize a tag <IFRAME SRC=" nome do frame ">.Você pode usar os complementos NAME – para especificar um nome que identifica qual frame está em us

WIDTH e HEIGTH para definir o espaço na página utilizado pelo Frame ; ALIGN ( LEFT ou RIGHT ) - para alinharframe na página. Lembre-se de fechar a tag </IFRAME>.




Você também pode usar os atributos normais da tag frame , como o FRAMEBORDER, SCROLLING etc.

<html><body><center><h1>Exemplo do comando IFRAME </h1></center><hr><iframe width=90% height=70% src="pag2.htm">

</iframe></center>Aqui continua a página normal!</body></html>

Veja os tópicos e exemplos dados durante o curso com muita atenção. A importância na maioria das veznão está nas quantidade de ferramentas que se sabe, mas sim na criatividade aplicada sobre as mesmas!

Responda o caderno de exercícios após ter lido com atenção, procure não olhar o material e exercite cadparâmetro relacionado aqui neste livro.

curso web_design - html

Documents