UNIVERSIDADE ESTADUAL DE MARING PR-REITORIA DE RECURSOS HUMANOS E ASSUNTOS COMUNITRIOS - PRH DIRETORIA DE RECURSOS HUMANOS - DRH DIVISO DE TREINAMENTO

E DESENVOLVIMENTO - TDE

DESENVOLVIMENTO DE PGINAS PARA INTERNET

PARTE 1

Criao e Adaptao: Marcos Antunes Moleiro mamoleiro@uem.br

Maio de 2010

O QUE NECESSRIO PARA SE CRIAR PGINAS PARA INTERNET

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

Algumas definies importantes

Para entender melhor alguns temas utilizados na criao e navegao pela internet, ser faz necessrio algumas definies: Uma pgina Web um elemento especfico de uma apresentao da Web que est contido em uma estrutura. A primeira pgina de uma apresentao chamada de home page. Uma apresentao da Web um conjunto de pginas Web estruturadas sobre um determinado contedo, este contedo aquilo que voc est colocando na Web. Informaes, imagens, ilustraes, programas, textos, diagramas, jogos, propaganda de produtos e servios, etc. Tudo isso contedo. Esta apresentao, como outras, ficam armazenadas em um local chamado Site. O Site hospedado por computadores conectados permanentemente a Internet e recebem o nome de Host. Para entrar na net preciso fazer uma conexo direta ou usar o computador Host. O fornecedor de acesso Internet (ISP) atua como o computador Host (aquele computador que fica conectado permanentemente na Internet para lhe prover o acesso mesma). ISP uma empresa que fornece o gateway necessrio para acessar a Internet. Gateway, ou porta de ligao, uma mquina intermediria geralmente destinada a interligar redes, separar domnios de coliso, ou mesmo traduzir protocolos (http://pt.wikipedia.org/wiki/Gateway). 1

Composio de uma pgina web?

Uma pgina Web composta de textos e comandos especiais (tags) de HTML (Hypertext Markup Language). Essa linguagem bastante simples e tem como finalidade bsica formatar o texto exibido e criar ligaes entre as pginas da Web, criando assim documentos com o conceito de hipertexto. Para que o contedo de um documento HTML possa ser formatado e exibido na Internet demos usar um programa chamado browser, o navegador. Ele l o contedo do arquivo, interpreta os comandos e exibe sua pgina. Existem diversos tipos de browsers disponveis no mercado. O cdigo pode ser escrito usando o mais simples editor de texto, como o bloco de notas do Windows. Porm a forma mais prtica e produtiva utilizar um editor HTML. H vrios no mercado como: HotDog Professional, o FrontPage da Microsoft, o Adobe Dreamweaver, os gratuitos KompoZer (sucessor do NVU), Crimson Editor e MoreMotion Application Studio, etc. Existem tambm os Sistemas Gerenciadores de Contedo (CMS, Content Management System em ingls) como o Joomla!, Drupal, Xoops, entre outros.

Visualizao das pgina/site criado

No necessrio estar conectado a internet para visualizar as pginas/sites criado. A melhor forma de se trabalhar desenvolvendo uma pgina HTML off-line, ou seja, desconectado. Primeiro voc cria as pginas/site em seu computador e as testas por meio do browser. Depois, deve coloc-las em um servidor Web para que outras pessoas tambm possam visualiz-la.

Tipos de navegadores
Para visualizar toda informao disponvel na Internet necessrio um Browser, navegador. H vrios disponveis no mercado. Os mais conhecidos so o Internet Explorer, Firefox, Opera, Google Chrome, Safari, Netscape entre outros. Os navegadores podem acessar vrios tipos de dados, no s do protocolo HTTP mas tambm FTP, Golpher, Telnet, etc. O que um navegador faz com maior freqncia lidar com a formatao e a apresentao de documentos da Web. Cada pgina um arquivo, criado em uma linguagem denominada HTML, que contm o texto da pgina, sua estrutura e vnculos para outros documentos, imagens ou outros meios. A recuperao de documentos a partir da Web e a formatao desses no seu sistema so as duas tarefas que compem a base da funcionalidade de um navegador.

Servidor de pginas
Para exibir pginas na Web e navegar por elas, voc precisar apenas de um navegador da Web. Para divulgar pginas na Web, voc precisar, na maioria dos casos, de um servidor Web. Servidor Web o programa que executado em um site da Web e que responsvel por atender s solicitaes de arquivos feitas pelo navegador da Web. Existem vrios servidores de pginas, entretanto o mais conhecido e utilizado o Apache, o qual possui verses para diversos sistemas operacionais, incluindo o Windows e o Linux. 2

Protocolos de Comunicao
Para que os computadores se comuniquem eles precisam seguir conjuntos de regras chamados protocolos. As pessoas que desenvolvem essas regras no foram apenas inteligentes; elas criaram nomes interessantes, como Golpher (esquilo) e World Wide Web (teia mundial). Os extensos nomes descritivos e geralmente difceis de lembrar foram reduzidos a siglas como HTML. Internet Protocol (IP) Este um dos protocolos mais bsicos. O IP o sistema que define o "local", ou endereo IP, das redes que compem a Internet. E um certo sentido, o IP forma o "mapa" da Internet e cada rede pode ser contatada em um ponto localizado nesse mapa. Transmission Control Protocol (TCP) TCP o protocolo que define a estrutura dos dados transmitidos. A versatilidade e robustez deste protocolo tornaram-o adequado a redes globais, j que este verifica se os dados so enviados de forma correta, na seqncia apropriada e sem erros, pela rede. File Transfer Protocol (FTP) O objetivo principal do FTP promover o compartilhamento de arquivos, programas computadores e/ou dados. Tambm utilizado para promover o acesso computadores remotos, blindar o usurio da variao dos tipos de sistema armazenamento de arquivos entre os diversos hosts e finalmente, transferir dados forma confivel e eficiente.

de a de de

Hypertext Markup Language e Hypertext Transfer Protocol (HTML e HTTP) Juntos eles comandam a WWW, World Wide Web. O HTML define um mtodo de incluir formatao em arquivos de texto para que, quando exibidos com um browser. O HTTP define a maneira como os arquivos HTML devem ser enviados e recebidos. Telnet Um protocolo que define como um computador pode atuar como um terminal em outro. Usando um programa Telnet, possvel se conectar a outro computador e executar programas nele, como se estivesse sentado diante de sua prpria mquina. Gopher Um protocolo de redes de computadores que foi desenhado para indexar repositrios, atuando assim como um mecanismo de busca, de documentos na Internet. Atualmente o Gopher perdeu popularidade com o crescimento da WWW, devido sua falta de flexibilidade quando comparado com o HTML. NNTP (Network News Transfer Protocol) Servidores UseNet armazenam mensagens e as encaminham usando o protocolo NNTP. O protocolo baseado no compartilhamento de grandes quantidades de informao entre os vrios servidores NNTP e na possibilidade do cliente em baixar, de acordo com suas necessidades e interesses, partes dessa informao. O protocolo antigo e desde muito tempo foi estabelecido como uma forma til de troca de arquivos online. O usurio desse protocolo pode ento ler as notcias/mensagens selecionadas utilizando programas como o Outlook Express, ou o Mozilla Thunderbird, entre outros. 3

CONTEDO DAS PGINAS PARA INTERNET

Para se criar pginas para internet, com qualidade, o seu contedo deve ser bem planejado a fim de atingir os objetivos desejados. A estrutura da pgina um item importantssimo para se alcanar o sucesso esperado. Uma estrutura de pgina mal concebida pode acarretar grandes prejuzos de dinheiro, de tempo e, principalmente, a desmotivao do usurio em voltar a visitar a pgina. Uma mudana de estrutura da pgina, depois da sua publicao, com certeza vai acarretar muito trabalho e tempo para ser refeito, espantando muitos usurios.

Estabelecendo Objetivos!
Voc deve se perguntar os que seus leitores procuram? O que deseja realizar com sua apresentao? Eles lero a pgina inteira ou apenas uma parte dela? Antes de comear entrar com cdigos ou imagens voc deve pensar o que quero colocar em minha pgina? Como ser estruturada? Ela est adequada ou no ao meu pblico alvo? Os objetivos no precisam ser grandiosos, mas a determinao ir ajud-lo a elaborar, organizar e codificar suas pginas com uma maior probabilidade de sucesso. Caso v desenvolver uma apresentao Web para uma empresa ou pessoas importante que voc colha junto ao seu cliente seus objetivos, idias, a forma que imagina sua pgina, etc. Assim, ficar bem mais fcil de comear seu trabalho.

Tipos de Contedos
Praticamente todo tipo de contedo pode ser apresentado na Web? Tudo o que quiser. Alguns tipos de contedo mais comuns na Web, podem ser: Informaes pessoais: informaes sobre voc, por exemplo. Hobbies ou interesses especiais: filmes, musicas, motocicletas, carros, etc. Publicaes: como jornais, revistas, boletins. Perfis de empresa: o que uma empresa faz ou vende, etc Documentao On-line: manuais, guias de treinamento, dicionrios, etc. Catlogos de compras: comercializao de produtos e servios. Lojas on-line. Pesquisas de opinio: a interatividade com o usurio atravs de formulrios, caixas de sugestes, etc. Educao On-line: numerosas universidades, escolas e empresas particulares oferecem o ensino a distncia atravs da Web. O nico limite da Web a sua prpria vontade. Por isso, se a sua idia no estiver nesta lista ou ainda no estiver amadurecida, pare e navegue um pouco pela Internet. Com certeza encontra excelentes idias e poder amadurecer as suas e ter muitas outras.

Organizao
No se deve criar pginas de qualquer forma, sem nenhuma organizao. Apesar de no existir um mtodo padro a se adotar, alguns critrios devem ser seguidos para se conseguir alcanar os objetivos desejados. 4

Divida o Contedo em Tpicos

Crie uma lista com os principais tpicos, a princpio no importa a ordem. Esta uma forma de comear a se organizar. Sua lista poder ter quantos tpicos desejar, mas no se perca listando uma quantidade enorme de tpicos (seu leitor poder se cansar e se perder em meio a tantas opes). Procure sempre manter o foco principal da pgina, ou seja, os objetivos a serem alcanados.

Organizao e Navegao
Quanto a organizao e navegao algumas consideraes e perguntas so pertinentes de serem analisadas como: Os tipos de informao que se adaptam melhor a cada estrutura. Como os leitores conseguem se deslocar pelo contedo de cada tipo de estrutura para encontrar as informaes de que precisam . Como ter certeza de que os leitores conseguem se localizar na navegao das pginas (contexto) e achar o caminho de volta at uma posio conhecida. Ao ler esta parte reflita como suas informaes se encaixaria em cada uma. Voc poder combinar, at mesmo, duas estruturas e criar uma nova forma de navegao.

FASES PARA O DESENVOLVIMENTO DE PGINAS PARA INTERNET

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

2 Fase : Conceituao do site e definio da estrutura de navegao Normalmente nesta etapa envolve uma ou mais reunies de criao. Todos os membros da equipe devem participar das reunies de criao, cujo objetivo obter o 5

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

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

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

Organizao da informao
Hierarquias a maneira mais fcil e mais lgica de estruturar os seus documentos. As hierarquias e os menus adaptam-se especialmente bem aos documentos on-line e de hipertexto. Exemplo: sistemas de ajuda, compra de produtos, etc.

HOME PAGE

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

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

Estrutura Linear Com Alternativas Voc pode tornar a estrutura linear menos rgida permitindo que o leitor se desvie do caminho principal. Pode ter, por exemplo, uma estrutura linear com ramificaes alternativas que partam de um nico tronco. As ramificaes podem se reunir ao tronco principal em algum ponto mais adiante, em um nvel mais baixo da estrutura, ou continuar se ramificando em nveis inferiores seguindo caminhos prprios at chegar a um "fim".

Alm de ramificar a estrutura linear, voc pode tambm oferecer vnculos que permitam aos leitores avanar ou retroceder na cadeia, caso precisem rever alguma etapa ou j conheam alguma parte do contedo.

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

Apresentao do contedos das pginas

A prxima etapa do planejamento da sua apresentao da Web consiste em determinar o contedo que ser apresentado em cada uma das pginas e criar alguns vnculos simples que possibilitem a navegao por essas pginas.

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

Dicas Para a Criao do Storyboard:

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

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

Estrutura de navegao
Os diretrios devem ser estruturados de acordo com a prpria estruturao da informao. Se as informaes esto estruturadas por mdulos e submdulos estas geraro diretrios e subdiretrios. Em um ambiente Unix/Linux/Windows o arquivo principal de cada mdulo deve ser sempre chamado de "index.html", inclusive o arquivo correspondente a primeira pgina do site (home). Isto, porque, quando se chama o 9

endereo da pgina no precisa escrever o nome do arquivo. O sistema assume o arquivo "index.html" como "default" para a pgina principal (outros nomes de arquivos tambm podem ser utilizados dependendo do tipo de servidor de pgina utilizado como: "index.htm", "index.php", "indice.html" entre outros). Os arquivos e diretrios devem ter nomes que identifiquem seu contedo e as imagens devem ser colocadas em um diretrio especfico. A cada nova atualizao uma cpia backup da verso anterior de cada arquivo atualizado deve ser feita.

Muito cuidado com os nomes dos arquivos, pois os diversos sistemas operacionais e servidores de pginas trabalham de forma diferente, com relao a eles. Uns fazem diferenciao entre letras maisculas e minsculas, acentos, espaos e caracteres especiais. Portanto, por precauo, utilize sempre letras minsculas, sem uso de espaos, acentos e caracteres especiais. O ponto . tambm deve ser evitado. O underline _ muito utilizado para substituir o espao, assim como o sinal de menos -.

10

A montagem das pginas para internet

Hipertexto a utilizao da HTML como linguagem para desenvolvimento da sua pgina. Domin-la importante para um bom desenvolvimento do seu projeto (este tpico ser visto em um captulo especfico, mais a frente).

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

Contedo e Forma O que faz uma pessoa entrar em um site? O faz a pessoa querer retornar? Estas perguntas devem sempre estar na cabea das pessoas de uma equipe de construo de sites. A primeira muito relaciona-se ao pblico alvo. Para qual tipo de pblico voc est disponibilizando informao? Quais so as prioridades e interesses deste pblico? Que tipo de conexo mais usada por ele? As respostas para a segunda pergunta certamente envolvem trs pontos: o 1 o contedo. o elemento central. O 2 ponto o design do site (estrutura de navegao e projeto grfico). Estruturar a informao de forma que a navegao seja o mais intuitiva possvel faz com que sua apresentao Web tenha muito mais chance de sucesso, considerando o tipo de informao disponibilizada conforme seu pblico alvo. Outro ponto a atualizao para que no perca uma das principais caractersticas da Internet: a dinamicidade. A utilizao de menus uma tcnica muito bem vista pela maioria dos usurios, pois torna a navegao mais intuitiva e organizada. Os menus geralmente so usados no topo e na lateral esquerda das pginas. Nada impede que sejam utilizados em outros locais da pgina, mas deve-se ter o cuidado em no carregar demais a pgina e com isso gerar confuso ao usurio.

Equipe para Construo de um Website A construo de um Website exige uma equipe com backgrounds diferentes. A equipe de profissionais adequada seria composta: a) Analistas de sistemas (com experincia em gerncia de Informao), responsvel pela organizao da informao; b) Design Grfico, responsvel pelo projeto grfico; c) Programadores, que, dependendo do tipo de site, podem ser programadores HTML, Java, JavaScript, CGI, CSS, PHP, etc; d) Assistentes, que auxiliam o trabalho do Analista de sistemas ou do Design Grfico (ilustradores, digitadores, etc.). 11

A equipe dever ter um coordenador, responsvel em fazer o trabalho fluir de forma eficiente, dentro de um cronograma aproveitando o mximo de cada profissional. Depois do site construdo surgir uma outra pessoa: o WebMaster, que ser responsvel pela administrao do site. muito comum haver o acmulo de funes por membros da equipe. Mas importante definir o papel de cada na construo do site.

Testes
Os testes so importantssimos para a verificao de erros e imperfeies encontradas nos sites/pginas, antes destes serem publicados. No uma coisa muito agradvel receber, por exemplo, uma e-mail de um usurio relatando erros de ortografia em pginas do site. Ou no mais receber visitas de um usurio que queria acessar uma determinada informao e o link est incorreto, ele provavelmente ir procurar em outro site, e dificilmente voltar ao site novamente. Checagem de links importante estabelecermos uma rotina peridica tanto para checagem dos links internos de sua pgina quanto para os externos. Essa rotina pode ser manual ou automatizada dependendo do tamanho de seu site. Existem softwares especficos para essa tarefa. Imagens importante fazer a checagem das imagens para verificar se o link est realmente apontando para a imagem desejada. Se esta imagem pode ser vista perfeitamente sem cortes ou distores e no tamanho apropriado. Um erro muito comum um link apontar para uma determinada foto e abrir outra. Ex. O link indica que este mostrar a foto de uma casa e ao clicar no link aparece a foto de um carro. Isso um erro que no pode acontecer de maneira nenhuma. Checagem dos documentos e arquivos o mesmo caso da checagem das imagens. Deve-se tomar o cuidado de no acontecer de um link indicar um determinado documento/arquivo e abrir um outro. Checar se os documentos e arquivos esto em seus devidos locais dentro da rvore de diretrios/subdiretrios de arquivos. Diagramao Chegar toda a parte ortogrfica das pginas imprescindvel antes de sua publicao. Erros de ortografia muitas vezes causas perda de credibilidade do site, principalmente se este voltado educao e lingstica. Erros de textos incompletos, frases mal formuladas e raciocnio confuso, tambm so muito prejudiciais pgina/site. Tempo de abertura do site/pginas Essa checagem para verificar o tempo que a pgina/site demora para abrir, pois caso esse tempo seja elevado vai provocar uma certa rejeio ao usurio voltar a visitar a pgina/site. Essa verificao tem que ser feita logo que o site for publicado, pois aps esse momento que se tem o real tempo que o site/pgina leva para ser aberto. Se a demora for significativa, deve-se repensar o layout da pgina. Entretanto, primeiramente, pode-se tirar informaes no necessrias ou ainda diminuir a quantidade e ou qualidade das imagens da pgina, para ver se o tempo de abertura passa a ser aceitvel. 12

Resolues de vdeo Esta etapa consiste em verificar como as informaes da pgina/site se comportam dependendo do tipo de resoluo de cada usurio. Para isso deve-se no prprio computador (ou em outro) abrir a pgina/site em diferentes modos de resoluo de vdeo ( ex. 800x600, 1024x768, 1280x1024, entre outros) e verificar se aparecer imperfeies no contedo. Checagem em diferentes sistemas operacionais Dependendo do sistema operacional que o usurio est usando, o contedo pode apresentar diferenas, sendo necessria a realizao de alguns ajustes. Em muitos casos o problema pode ser causado pelo tipo de fonte utilizada e ainda caracteres especiais. Checagem em diferentes navegadores o mesmo caso da checagem em diferentes sistemas operacionais, entretanto os problemas com o contedo podem ser causados por inmeras possibilidades. A falta de padronizao na interpretao de tags pelos diversos navegadores existentes pode resultar em comportamentos diferentes de uma determinada tag de acordo com o navegador utilizado.

Publicao da pgina na internet

Depois de feitas as pginas/site so necessrias public-las, ou seja, colocar todos os arquivos utilizados em uma rea de um provedor que permitir sua visualizao na Internet. Com a publicao obtm-se um endereo, ou seja, URL que ser acessvel pelo servio WWW da Internet. Assim, as informaes, imagens e sons ali colocados sero acessveis por qualquer computador conectado a internet em qualquer parte do mundo.

Onde publicar Vrios provedores oferecem espao para hospedar pginas/sites, inclusive espao grtis. Entretanto, os servios de hospedagem gratuitos podem apresentar alguns inconvenientes, como a insero de propagandas nas pginas do site, que podem gerar algum aborrecimento. Assim, se voc usa a Internet em casa e paga um provedor, informe-se junto empresa, sobre a existncia de hospedagem como parte do pacote de acesso. Mas, se voc no pretende ter um site grande, com uso intensivo de imagens ou multimdia, e no prev muito trfego, os servios de hospedagem gratuitos podem ser mais que suficientes. importante lembrar que servios de hospedagem pagos geralmente oferecem maior espao para armazenamento, um nome de domnio e vrios endereos de correio eletrnico. A maioria deles tambm fornece ferramentas bsicas de personalizao de pginas e rastreio de trfego, assim como ajuda para registro de domnio.

Como publicar O envio dos arquivos para realizar a publicao das pginas/site pode acontecer de vrias maneiras, dependo do provedor e do tipo de hospedagem escolhido. A publicao em provedores gratuitos, de uma maneira geral, feita a atravs do prprio site do provedor. Atravs de um usurio e senha, se tem acesso ao gerenciador de arquivos disponibilizado pelo provedor. 13

A publicao em servidores pagos, pode tambm ser feita atravs do prprio site do provedor, mas na maioria das vezes feita atravs da transferncia de arquivos atravs do protocolo FTP (File Transpher protocol), que mais rpido, seguro e prtico. O provedor disponibiliza ao usurio um login de acesso, atravs de um usurio e senha, para a realizao da autenticao no servidor do provedor. A utilizao da transferncia de arquivos por FTP geralmente realizada utilizando-se de um programa de FTP, que permite no s fazer o upload dos arquivos para o servidor do provedor, mas realizar toda a administrao remota dos arquivos/pastas alocados no servidor, como se estivessem no disco rgido do computador do usurio. Existem muito programas para transferncia de arquivos por FTP, por exemplo: os gratuitos FileZilla e WinSCP, e os pagos SmartFTP e CuteFTP; no caso Firefox existe uma extenso chamada FireFTP que tambm muito eficiente.

Dicas importantes
Todo WebSite deve ter um Webmaster, ele a autoridade mxima no site e coordena tanto seu desenvolvimento quanto sua manuteno alm de responder a toda correspondncia enviada ao site. Seu endereo eletrnico deve ser divulgado na primeira pgina e em todas as outras que exijam um processo interativo. Na criao do projeto grfico, tente sempre optar por solues que melhor se adaptem a plataforma mais usada. Por exemplo: monitor 15 polegadas com resoluo de 800x600, faz com que a melhor diagramao das pginas acontea quando o site visto nesse tipo de monitor e resoluo. Caso o seu site deva ser diagramado para uma resoluo ou tamanho de monitor diferentes do mais usado, informe no site. OBS. Convencionalmente a resoluo de 800x600 ainda a padro no desenvolvimento de sites/pginas, entretanto, uma grande quantidade de sites j adotaram a resoluo de 1024x768. Num projeto grfico deve sempre se perguntar se sua apresentao ficou adequada ou no ao que seu cliente desejava e ao seu pblico alvo. Para ter uma garantia que suas imagens sero sempre bem visualizadas, procure trabalhar com imagens paletizadas (formato .gif). O melhor resultado para isso ser trabalhar suas imagens em RGB e depois index-las com o menor nmero de cores possvel. Caso precise utilizar imagens True Color, salve-as em formato .jpeg, que resultar em arquivos pequenos. 14

Sempre indique em que browser sua pgina ser melhor visualizada. A pgina de entrada de um site muito importante. Ela deve ser projetada de forma que diga a que o site se destina, seja de forma textual, visual ou estrutural. O contedo e forma como ele apresentado sero os principais atrativos de suas pginas, a no ser que o ponto chave sejam as imagens. Por isso, no pense que a internet igual a outras mdias. A TV, por exemplo, que apesar de se poder trocar de canal, a hora que de queira, muito mais limitada em relao quantidade de sites com o mesmo assunto existentes na internet. Direitos autorais: A proteo de direitos autorais no costuma ser muito evidente na Web. O desejo original de uma pgina no protegido. Mas qualquer texto, grfico, vdeo ou udio originais deve ser protegido. Um link ou URL no protegido mas uma lista de links(como no caso das bibliotecas virtuais) deve ser protegido pelos direitos autorais. A netiqueta e Domnio pblico: A Web foi criada com base em ser capaz de atar links de hipertexto de qualquer outra localizao da rede. Consequentemente, quando voc disponibiliza um site, implica em voc permitir a outros "linkar" sua pgina de Web, porm a netiqueta recomenda que se pea permisso aos Webmasters sempre que possvel.

PRINCIPAIS COMANDOS DA LINGUAGEM HTML (LINGUAGEM DE MARCAO DE HIPERTEXTO)

A HTML uma linguagem de marcao. Criar um documento em uma linguagem de marcao significa que voc comea com o texto da sua pgina e inclui tags especiais no incio e no final de determinadas palavras ou pargrafos. As tags indicam as diversas partes da pgina e produzem diferentes efeitos no navegador. Os arquivos recebem a extenso.html e possuem como cone a seguinte imagem:

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

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

TAG <HTML> </HTML> <HEAD> </HEAD> <TITLE> </TITLE> <BODY> </BODY>

Significado Esta tag marca o incio e fim do cdigo HTML Esta tag marca incio e fim de cabealho Esta tag delimita o texto que ir ser visualizado na barra de ttulo do navegador. Esta tag delimita o corpo do cdigo HTML, aonde a maior parte dos comandos sero colocados.

Os Principais Elementos de uma Pgina HTML

Uma pgina HTML composta basicamente de ttulos, textos, pargrafos, imagens e links, responsveis pela chamada de outras pginas para a tela. Todos esses elementos so posicionados na pgina por meio de comandos especficos da linguagem.

16

TTULO CABEALHO TEXTO IMAGEM LINK

o texto que aparece na barra de ttulo do navegador. So linhas de texto com tamanhos especiais. Existem seis tamanhos prefixados de cabealho. a informao mais comum dentro da pgina. Pode ser formatado atravs de vrios comandos. So figuras, desenhos e fotos usados para ilustrar a pgina. um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no link, o navegador acessa outra regio da pgina atual ou uma pgina localizada em qualquer lugar da Internet. Uma figura tambm pode ser usada como um link, ou seja, clicando na figura saltamos para outro local. IMAGEM CABEALHO

TTULO

TEXTO

LINK

Ttulo
O ttulo de uma pgina web indica qual o assunto abordado e ir aparecer na barra de ttulo do navegador. Este ttulo utilizado por programas de lista (hotlist) do seu navegador e tambm por outros programas que catalogam pginas da Internet. Para atribuir um ttulo a pgina voc dever utilizar a tag: <Title> Texto </Title>. Esta tag sempre ser includa no cabealho (entre as tags <Head> </Head> e descrevem a mesma). Consideraes sobre o ttulo: 1. Voc poder ter apenas um ttulo; 2. Texto dever ser simples e no poder ter outras tags; 3. Escolha um texto curto e que descreva o contedo da pgina. 17

Cabealhos
Os cabealhos so usados para dividir sees do texto, como captulos de um livro. A HTML divide seis tamanhos de cabealhos, de H1 a H6, que aplicam um tamanho de fonte diferenciado no texto que envolve, alm disso, do um efeito de negrito. O maior tamanho o H1 e o menor o H6. <H1> Texto </H1> Experimente o seguinte cdigo: Comando Resultado

</html> <head> <title>Cabealho</title> </head> <body> <h1>C</h1> <h2>A</h2> <h3>B</h3> <h4>E</h4> <h5></h5> <h6>A</h6> <h5>L</h5> <h4>H</h4> <h3>O</h3> <h2>S</h2> </body> </html>

Vejamos um exemplo de outro cdigo em HTML: Comando

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

Resultado

18

No exemplo acima foi introduzido mais algumas tags. Os comandos: TAG <B> texto </B> <I> texto </I> <P> texto </P> <BR> Significado Aplica o estilo negrito ao texto Aplica o estilo itlico ao texto. Inicia um novo pargrafo. Faz uma quebra de linha.

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

Lista de Definies
Uma lista de definies consiste em alternar um termo e uma definio. Veja no visual do exemplo. Muito comuns em livros que fazem citaes constantes de trechos de outros autores ou para chamar a ateno do leitor para algo realmente importante. Exemplo: Comando
<H1> LISTA DE DEFINIES </H1> <H2> Wireless </H2> <DL> <DD> <P>Em portugus significa "sem fio". um sistema de comunicao que utiliza ondas de radiofreqncia, ultra-som ou raios infravermelhos (IV) para trocar dados entre dispositivos. </DL> </DD> <DL> <DD> <P>Est se tornando cada vez mais popular o uso desse sistema para a transferncia de dados entre o computador e as cmeras digitais, os PDAs, as calculadoras, as agendas eletrnicas, etc. <DL><DD> <P>Na Internet, o termo utilizado para indicar que a transmisso de informao se efetua prescindindo dos cabos. o caso dos celulares com sistema WAP, por exemplo, ou das conexes domiciliares ou comerciais Internet atravs de antenas de rdio bidirecional. <P> </DL></DD></DL></DD>

Resultado

As entradas <DL> e <DD> podem conter vrios pargrafos, separados por <P>, listas, ou outras definies. A marcao <DD> pode ser utilizada fora de uma lista de definies como se fosse uma tabulao (insere um espao no incio da frase).

19

Exemplo: Comando
<html> <head> <title>Experincia com Fontes</title> <body> <H1> DEFINIES PARA TABULAR </H1> <DL><DD> Universidade Estadual de Maring</DD> <DL><DD><DD> Maring - Paran</DD></DD> <DL><DD><DD><DD> Laboratrio da TDE </DD></DD></DD> <DL><DD><DD><DD><DD> Marcos A. Moleiro </DD></DD></DD></DD> </DL></DL></DL></DL> </body> </html>

Resultado

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

Tags de Formatao
Assim como em um editor de texto, em HTML voc poder utilizar efeitos em seu texto. Como j percebeu os comandos, tags, trabalham em continer. Alguns destes comandos j foram introduzidos no captulo anterior. Os principais comandos de estilo: TAG STRONG TYPERWRITER BIG SMALL SOBRESCRITO SUBESCRITO BLINK NEGRITO ITLICO SUBLINHADO SINTAXE <strong>texto</strong> <tt>texto</tt> <big>texto</big> <small>texto</small> ^texto _texto <blink>texto</blink> <b>texto</b> <I>texto</I> <u>texto</u> SIGNIFICADO Similar ao negrito Deixa o texto com espaamento regular Aumenta a fonte e aplica negrito Reduz e altera a fonte Eleva o texto e diminui seu corpo Rebaixa o texto e diminui seu corpo Faz com que o texto pisque (em alguns navegadores esta tag no funciona) Aplica o estilo negrito Aplica o estilo itlico Aplica um sublinhado (em alguns navegadores esta tag no funciona)

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

Estilo lgico As tags deste tipo indicam como o texto destacado deve ser utilizado e no como ser apresentado. Este estilo no indica como o texto ser formatado e sim como ser utilizado no documento. No possvel garantir que um texto destacado que 20

utilize tags deste tipo sempre ser apresentado em negrito ou itlico, por exemplo, isto depender do navegador. Algumas tags de estilo lgico utilizadas em HTML padro: TAG <EM> texto </EM> Significado Indica que os caracteres devero ser enfatizados de alguma forma. De forma diferente do restante do texto. Geralmente em itlico <STRONG> texto </STRONG> Esta tag enfatiza ainda mais que a anterior. Em negrito. <CODE> texto </CODE> Esta tag indica um cdigo de exemplo a ser exposto. <SAMP> texto </SAMP> Esta tag indica texto de exemplo. Quando voc quer dar um exemplo de endereo para a Internet sem criar link.

21

Estilos Fsicos Este estilo de tag realmente altera a formatao do texto, no estilo anterior voc no possui garantia que o texto ir ser visualizado da forma que planejou. Neste estilo ele ser visualizado da forma que atribuir as tags a ele. Algumas tags de estilo fsico para HTML padro: TAG <B> texto </B> <I> texto </I> <TT> texto </TT> <u> texto </u> <S> texto </S> <BIG> texto </BIG> <SMALL> texto </SMALL> <SUB> texto </SUB> <SUP> texto </SUP> Significado Coloca o texto em negrito Coloca o texto em itlico Fonte de mquina de escrever com espaamento uniforme Coloca o texto sublinhado Coloca o texto tachado O texto ir aparecer maior que o restante ao redor O texto ir aparecer menor que o restante ao redor Coloca o texto subscrito Coloca o texto sobrescrito

Optando por utilizar tags do estilo fsico, caso o navegador no reconhea uma das tags ele a ir substituir por outra equivalente ou ignorar a formatao.

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

Citaes e Comentrios A tag <BLOCKQUOTE> utilizada na criao de citaes longas que no devem ser aninhadas em pargrafos. A tag <CITE> destaca citaes curtas.

22

Exemplo: Comando <BLOCKQUOTE> "O mercado de webdesign um dos segmentos de design com maior potencial de crescimento para os prximos anos. Estima-se um crescimento de no mnimo 50% ao ano at 2005. E, na corrida rumo a esse novo eldorado, as agncias de propaganda mais uma vez largaram na frente dos escritrios de design, investindo primeiro em estruturas especializadas para atender demanda do mercado (...)". Maria Edicy Moreira. </BLOCKQUOTE>

Comentrio Em alguns momentos pgina faz necessrio comentar alguns trechos do cdigo para facilitar na leitura e manuteno da pgina, por isso se adiciona comentrios, ou seja, palavras ou frases que no so exibidos no Navegador, apenas so visto como se esta trabalhando no cdigo fonte. O comentrio feito da seguinte forma:

<! comentrio >

TAG <Meta> Marcas Metas. Servem para especificar o autor, palavras-chaves, descrio da pgina, etc.. Dentro do tag<meta>, tem os comandos name e o content. No comando name especifica-se que informao se quer fornecer, e no content descreve-se a informao. As mais importantes so: Author: O nome do autor da pgina. Ex:<meta name="author" content="Andr" /> Content-language: Declara a(s) linguagem(ns) natural(is) do documento. Pode ser usada pelos motores de busca para categorizar por idioma. Ex:<meta http-equiv="content-language" content="pt-br, en-US, fr" />

23

CopyRight: Como o nome j diz declara o direito autoral da pgina. Ex:<meta name="copyright" content=" 2010 uem" /> Description: Contm uma descrio da pgina Ex:<meta name="description" content="...resumo da pgina..." /> Generator: Indica o software usado para criar a pgina como forma de medir a popularidade do produto. Ex:<meta name="generator" content="Notepad++, KompoZer" /> Keywords: As keywords tipicamente so usadas por alguns motores de busca para indexar os documentos juntamente com informaes encontradas em seu ttulo e body. As frases ou palavras devem ser separadas por vrgulas. Ex:<meta name="keywords" content="..palavras-chave do documento" /> Refresh: Especifica um tempo em segundos para o browser atualizar a pgina, opcionalmente pode-se adicionar uma URL para a qual ser redirecionado.
Ex:<meta http-equiv="refresh" content="15;url=http://www.thechessman.org" />

Content-Script-Type: Define o tipo padro da linguagem de script do documento. Ex:<meta http-equiv="content-script-type" content="text/javascript" /> Content-Style-Type: Define o tipo padro de linguagem para estilizao do documento. Ex:<meta http-equiv="content-style-type" content="text/css" />

Endereos Esta tag utilizada para identificar autorias de sua pgina. Geralmente so apresentadas na parte inferior de cada pgina. Mostra quem confeccionou aquela pgina, com quem o leitor deve entrar em contato caso queira ter alguma informao ou fazer alguma observao. Estes endereos so precedidos de um fio <hr>, que ser visto mais adiante, e ainda poder ser utilizada a tag <br> para separar linhas. <ADDRESS> TEXTO</ADDRESS> Exemplo: Comando
<HR> <address> mamoleiro@uem.br<br> Universidade Estadual de Maring UEM<br> Maio de 2010<br> </address>

Resultado

24

Esta uma excelente forma de garantir que as pessoas entrem em contato com voc caso necessitem e tambm uma forma de estar melhorando o seu site (Home Page) atravs de sugestes.

A TAG <BLINK> O texto que se encontrar entre estas tags ir aparecer piscando. Dependendo da verso e do navegador utilizado, esta tag no funcionar adequadamente. Esta tag <blink> sendo visualizada no Firefox (ou em outro navegador compatvel), o efeito ter uma dessas caractersticas: 1. texto ficar piscando em intervalos regulares 2. Um bloco cinza ou branco ficar piscando atrs do texto. Este recurso geralmente utilizado para chamar a ateno do leitor sobre uma determinada parte do texto. O problema do efeito piscando que ele chama ateno excessivamente sobre aquela parte do texto tirando a ateno do leitor do restante do texto. A maioria dos projetistas web consideram este efeito feio, desagradvel e irritante

A TAG <HR> A tag <HR> cria linhas de separaes horizontais dentro de um documento HTML. Essas linhas so apenas de efeito visual e podem ser usadas para dividir sees de contedos dentro da pgina. Em <HR> existem algumas opes: SINTAXE: <HR Size=Espessura WIDTH=Comprimento ALIGN=Opo NOSHADE> Onde: Size: Especifica a espessura da linha de separao em pixels; Width: Especifica a largura ou comprimento da linha de separao em porcentagem da rea ocupada ou em pixels. Usando 50% faz a linha com metade da largura da tela. Quando usar Width=100% o padro. Align: Posiciona a linha de separao: LEFT (Esquerda) RIGHT (Direita) e CENTER (Centro). NoShade: Esse parmetro indica que a linha no deve ter sombra e ser slida. Exemplo: Comando
<HTML> <HEAD> <TITLE> | Exemplo 1 | </TITLE> </HEAD> <BODY> <H1> SEPARADORES </H1> <H2> HR com opo Size e NoShade</H2> <HR Size=1 NoShade> <HR Size=3> <HR Size=5 NoShade> <HR Size=10> <HR Size=15 NoShade> <HR Size=25> </BODY> </HTML>

Resultado

25

No exemplo anterior, foi intercalado um com NoShade e um sem. Exemplo: Usando <HR> controlando a largura com Width e mostrando Align e Width com Pixels. Comando
<HTML> <HEAD> <TITLE> | Exemplo 2 | </TITLE> </HEAD> <BODY> <H2> HR com opo Width (%) </H2> <HR Size=5 Width=100%> <HR Size=5 Width= 75%> <HR Size=5 Width= 50%> <HR Size=5 Width= 25%> <HR Size=5 Width= 12%> <H2> HR com opo Align </H2> <HR Size=5 Width=200 Align=Left> <HR Size=5 Width=200 Align=Center> <HR Size=5 Width=200 Align=Right></BODY> </HTML>

Resultado

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

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

Face Esse parmetro permite que seja escolhida uma fonte diferente para o texto. Podem ser especificadas vrias fontes, de maneira que, se o sistema no possuir uma determinada fonte ele ir utilizar outra. Face="name [,name2[,name3]]

26

Se no forem encontradas as fontes especificadas, ento, o texto ser apresentado na fonte padro. <font face="Agaramond, Arial" size=1> Exemplo: Comando
<html> <head> <title>Experincia com Fontes</title> </head> <body> <h2>Primeiro exemplo com tipos de fontes</h2> <font face="Agaramond"><p> Este texto ser exibido em Agaramond</font><br> <font face="Tahoma"><p> Este texto ser exibido em Tahoma</font><br> <font face="Arcane"><p> Este texto ser exibido em Aracane</font><br> <p> <h2>Exemplos com tamanhos diferentes de fontes</h2> <font face="Courier" Size=1> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=2> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=3> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=4> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=5> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=6> Este texto ser exibido em Courier</font><br><p> <font face="Courier" Size=7> Este texto ser exibido em Courier</font><br><p> <p> <h2>Agora iremos usar cores</h2> <font Face="Verdana" size=5 color="#800000"> Este o primeiro texto a ser modificado</font> </body> </html>

Resultado

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

COR
Aqua Black Fuchsia Green Brown Olive Silver White

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

COR
Blue Cyan Gray Lime Navy Red Teal Yellow

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

Alinhamento Pense no que alinhar um texto no Word ou BrOffice Writer. Pois ento voc sabe o que alinhar um texto. claro que voc no ir alinhar em HTML da mesma forma, ter que utilizar tags e parmetros para estas tags. Para alinhar um texto voc utilizar o atributo ALIGN com valores: LEFT (esquerda), RIGHT (direita), CENTER (centralizado) e JUSTIFY (justificado). Pargrafos O comando <p> inicia um novo pargrafo onde o texto automaticamente alinhado pela margem esquerda da tela. Caso voc deseje que seu novo pargrafo seja iniciado com um alinhamento diferente voc dever especificar na hora que incluir esta tag o atributo align. Exemplo: Comando
<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. Cada vez mais utilizado, este programa j est sendo empregado em sites de grandes empresas. Seu poder se deve a sua grande capacidade multimdia e sua versatilidade. Sua finalidade a criao de imagens vetoriais com animao, som e interatividade.</p> <p align=center> Depois veremos mais sobre o Flash</p> </body> </html>

Resultado

Cabealho Quanto ao cabealho voc s poder alterar o alinhamento para direita e centralizado, a esquerda alinhamento padro. Exemplo: Comando
<html> <head> <title>Alinhamento de cabealho </title> </head> <body> <h2>Cabealho sem alinhamento especial</h2> Este um exemplo do cabealho sem alinhamento especial. <h2 align=center>Cabealho com alinhamento centralizado</h2> Este um exemplo de cabealho alinhado ao centro. <h2 align=right>Cabealho com alinhamento a direita</h2> Este um exemplo de cabealho alinhado a direita. </body> </html>

Resultado

28

Alinhamento com o Comando <DIV> A utilizao desta tag uma forma prtica e rpida de alinhar bloco de texto. A abreviatura DIV significa diviso. Ao usar esta tag num bloco de texto voc estar atingindo todas as tags dentro daquele bloco. Suas vantagens sobre o Align que: 1. Precisar ser utilizada apenas uma vez, ao contrrio do atributo Align, que tem de ser includo em diversas tags. 2. A tag <DIV> pode ser usada para alinhar qualquer elemento (cabealho, pargrafos, citaes, imagens, tabelas, etc.). O atributo Align encontra-se disponvel apenas em um nmero limitado de tags. Voc dever colocar a tag <DIV> e acrescentar o atributo align na tag de abertura. O atributo align poder ter os valores left, right e center. SINTAXE: <DIV ALIGN=" "> TEXTO e OUTRAS TAGS TEXTO e OUTRAS TAGS </DIV>

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

Resultado

29

Efeito de Rolagem de Texto Existe uma tag do html, que produz um efeito de rolagem de texto pela tela, muito parecido com um dos descansos de tela do Windows. Veja como fazer: SINTAXE: <MARQUEE propriedades> FRASE/IMAGEM </MARQUEE>

Algumas propriedades disponveis so: Propriedades ALIGN=opo Significado Funciona do mesmo modo que para posicionar o texto em relao imagem. As opes so: Top, Middle e Bottom. BEHAVIOR=opo Controle o tipo de deslocamento que a frase ou imagem vai se deslocar pela tela. O padro sempre Scroll. As opes so: Scroll: Deslocamento ocorre de um lado ao outro da tela; Alternate: Deslocamento ocorre da direita para esquerda. Slide: Deslocamento ocorre at o extremo oposto e para ao chegar; BGCOLOR=#RGB Especfica a cor de fundo que o local onde a frase ou imagem vai passar ter; DIRECTION=opo O padro desta opo Left (esquerda). Determina a direo que o texto vai tomar para iniciar o deslocamento. O nico valor aqui Right. HEIGHT=valor Especifica a altura do painel por onde o <MARQUEE> vai passar. Pode ser em pixel ou porcentagem; HSPACE=valor Criar uma margem na esquerda e direita do <MARQUEE> que pode ser usada para no deix-lo tocar no texto ou imagens que estiverem na tela; LOOP=valor O valor determina a quantidade de vezes que o <MARQUEE> ser reprisado. Se ao invs de um nmero colocar a palavra Infinite ele nunca vai parar. WIDTH=valor Espao da tela que a frase ocupar. O valor pode ser em pixel ou porcentagem; SCROLLAMOUNT=valor Indica a quantidade de pixels usada fazer a movimentao; SCROLLDELAY=valor Informe um valor em milessegundos, que ser o tempo entre um deslocamento e outro;

30

Exemplo: Comando
<html> <H1> MARQUEE </H1> <Marquee> Esse o mais simples de todos </Marquee> <Font Face=Acidic Size=7 Color=#0000FF> <Marquee Bgcolor=#70DBDB> Velocidade Normal </Marquee> <Font Face=Acidic Size=7 Color=#70DBDB> <Marquee Bgcolor=#0000FF Direction=Right> Normal Inversa </Marquee> <Font Face=Acidic Size=7 Color=#0000FF> <Marquee Bgcolor=#70DBDB ScrollAmount=20 ScrollDelay=1> Acelerado </Marquee> </Font> <BR><BR> <Font Face=Undercover Size=6 Color=#000000> <Marquee Bgcolor=#FF7F00 Behavior="Alternate" Width=100%> Veja esse </Marquee> </Font> <BR><BR> <Font Face=KellyAnnGothic Size=7 Color=#ffffff> <P Align=Center> <Marquee Bgcolor=#000000 Behavior="Slide" Width=50% Loop=3> 3 vezes </Marquee> </Font></html>

Resultado

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

Resultado

31

Observe que para que o navegador pudesse mostrar <br> e <p> sem interpretar como comandos usei caracteres especiais &lt; para indicar sinal de < e &gt; para indicar o sinal de >. Quando voc utiliza a acentuao comum do teclado nas suas pginas podem at parecer que tudo ir correr tudo bem. Mas algum que visualizar suas pginas em um computador que no tenha as mesmas configuraes de vdeo e teclado, alguns caracteres podem no sair da forma desejada. Por exemplo: A palavra caf, se voc utilizar esta palavra com a acentuao do seu teclado, com certeza na visualizao do seu navegador ficar perfeita, mas pode ser que em outros computadores com a configurao diferente no aparea da mesma forma. O ideal coloc-la assim: Caf&eacute; ou caf&#233;

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

ALGUNS CARACTERES ESPECIAIS

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

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

32

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

Atributos para <UL>: Type: modifica o tipo do marcador (smbolo), que pode ser: Circle: um crculo vazio Ex: <ul type=circle> Disc: um crculo cheio Ex: <ul type=disc> Square: um quadrado cheio Ex: <ul type=square> Exemplo: Comando
<p>Ingredientes para bolo</p> <ul type=circle> <li>Farinha de Trigo <li>Acar </ul> <ul type=disc> <li>Manteiga <li>Ovos </ul> <ul type=square> <li>Leite <li>Fermento </ul>

Resultado

O Comando <OL> Para criar uma lista bsica ordenada, voc deve usar um conjunto de comandos cuja sintaxe bsica mostrada a seguir. O comando que gera a lista ordenada (ordered list) o comando <OL>, que deve envolver o primeiro e o ltimo item da lista. Cada item da lista deve ser precedido do comando <LI> (Line item).

SINTAXE: <OL> <LI> Texto <LI> Texto </OL> OBSERVAO: Na lista no ordenada cada item receber um marcador ("bolinha") e a numerada receber automaticamente nmeros. 33

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

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

Exemplo: Comando
<p>Ingredientes para bolo</p> <ol> <li>Farinha de Trigo <li>Acar <li>Manteiga <li>Ovos <li>Leite <li>Fermento </ol>

Resultado

Um exemplo com o atributo Type: Comando

<p>Ingredientes para bolo</p> <ol type="I"> <li>Farinha de trigo <li>Acar <li>Manteiga <li>Ovos <li>Leite <li>Fermento </ol>

Resultado

Usando o atributo START determina-se o nmero ou a letra que inicia sua lista. O ponto inicial 1. Usando o Start, pode-se mudar esse nmero. Um exemplo: <ol Type=a start=3>. Usando o atributo VALUE em um item da lista poderemos alterar os valores da lista a partir de qualquer ponto.

34

Exemplo: Comando
<p>Ingredientes para bolo</p> <ol start=10> <li>Farinha de Trigo <li>Acar <li value=100>Manteiga <li>Ovos <li>Leite <li>Fermento </ol>

Resultado

Imagens
A insero de imagens na pgina web deve seguir alguns critrios para que na hora da publicao da pgina web no servidor de internet, no ocorra erros de as imagens no serem encontradas. Para isso, deve-se copiar as imagens a serem inseridas na pgina web dentro da estrutura de diretrios da pgina web, no micro local, e posteriormente quando for feita a publicao da pgina web, tambm no sistema de diretrio do servidor Web. O ideal que dentro da estrutura de diretrio da pgina web seja criada uma pasta especfica para as imagens, para uma melhor organizao dos arquivos que compem as pginas web. OBSERVAO: O que foi dita acima para as imagens tambm serve para os arquivos inseridos na pgina web. Para inserir uma imagem em uma pgina web utilizamos do comando, tag, <img src> e seus atributos. SINTAXE: <img src="caminho da imagem/nome da imagem.extenso">

OBSERVAO: Caso a imagem a ser inserida encontra-se na mesma pasta que a pgina web, a qual ser inserida a imagem, o caminho da imagem deve ser suprimido.

Exemplo: arquivo imagem.jpg que se encontra no mesmo diretrio da pgina web.

<img src="imagem.jpg">

Exemplo: arquivo imagem.jpg que se encontra na pasta imagem dentro do diretrio raiz da pgina web. 35

<img src="imagem/imagem.jpg">

OBSERVAO: O que foi dito acima para as imagens tambm serve para os arquivos inseridos na pgina web. Pode-se acrescentar a esta imagem os seguintes atributos: Atributos Width="valor em pixel" Height="valor em pixel" Align=(left, right ou center) Alt="texto" Significado Largura da imagem. Altura da imagem. Alinhamento da imagem. Texto que ir aparecer ao passar o mouse sobre a imagem ou texto que surgir caso a imagem no possa ser visualizada. Especificao da largura da borda da imagem. Para especificar o espao que deve ser deixado acima e abaixo da imagem. Especifica o espao que deve ser deixado nas laterais da imagem.

Border="valor em pixel" Vspace="valor em pixel" Hspace="valor em pixel"

OBSERVAO: O nico obrigatrio o src.

Colocando uma Imagem Como Fundo da Pgina SINTAXE: <body background="caminho da imagem/nome da imagem.extenso">

Exemplo:

<body background="imagem/imagem.jpg">

OBSERVAO: Procure usar imagens simples, com poucas variaes de tons.

Colocando uma Cor Como Fundo da Pgina: SINTAXE: <body bgcolor = cor" >

Procure no usar cores chamativas. Para que a cor do fundo da sua pgina chame mais ateno que seu contedo. 36

Voc pode criar seus prprios fundos de pgina com programas como o Gimp, Photoshop, Coreldraw, BrOffice Draw, Inkscape, dentre outros.

Colocando Cores para os links SINTAXE: <BODY LINK=cor" VLINK=cor" ALINK=cor">

Acrescentando algumas opes a tag <Body> percebe-se uma mudana nas cores os links. Onde: LINK: Especifica a cor dos links no visitados (padro azul) VLINK: Especifica a cor dos links visitados (padro magenta) ALINK: Especifica a cor do link ativo no momento. (Visto apenas em mltiplas janelas ou frames)

Links e Ancoras
Links A principal atrao da Internet a criao de documentos com o conceito de hipertexto, ou seja, um documento que se vincula a outros documentos por meio de ligaes especiais chamadas links ou hiperlinks. Com esse conceito, voc pode criar documentos que faam referncias e permitam ao usurio acessar tais referncias no importando se elas esto em outra pgina Web, no seu micro ou em algum servidor de rede. O uso de hipertexto tambm facilita a criao de documentos extensos cujas sees ou tpicos podem ser rapidamente acessados por meio dos links. Imagine que voc crie uma pgina sobre determinado assunto em vrios tpicos abordados. Assim como em um livro voc cria todo o texto do documento e depois cria, no incio, um sumrio indicando os tpicos do documento. Se quiser acessar diretamente o texto de um tpico, basta dar um clique sobre o item do tpico no sumrio e ele ser imediatamente exibido. Um link reconhecido em uma pgina por estar em cor normalmente diferente do resto do texto e, ao passar com o mouse sobre esse texto o cursor muda para uma mo apontando para o link. Para criar um link com uma pgina: SINTAXE: <a href="endereo da pgina" target=destino >texto que ser o link</a>

Exemplo:

<a href="contato.html">Clique aqui para entrar em contato </a> 37

Usando uma imagem como link: Exemplo:

<a href="contato.html"><img src=" imagem/contato.jpg"></a>

Usando o TARGET A opo target opcional, podendo fazer a pgina que esta sendo aberta criar uma nova janela do navegador, ao invs de sobrepor sua pgina. Exemplo: abrir a pgina contato.html em uma nova janela do navegador atravs do valor blank o target.

<a href="contato.html" target=blank >Clique aqui></a>

Usando link para Email Exemplo:

<A HREF=mailto:mamoleiro@uem.br> Contato </a>

Onde: mailto: um parmetro que permite que um programa para envio de email seja acionada pelo seu site.

ncoras Uma ncora um ponto de referncia ou endereo que ser acessado por um link. Uma ncora usada dentro do documento para marcar o incio de uma seo do documento. Suponha que seu texto seja muito grande, o que tornaria trabalhoso para quem estiver vendo a pgina conseguir se movimentar entre um tpico e outro. Ento faa o seguinte: Nomeie um pedao da sua pgina atravs do tag : SINTAXE: <A NAME="NOME "> Texto </A>

IMPORTANTE: o "NOME" fictcio, voc escolhe o nome) Depois disso escreva o pedao que voc quer associar a esse Nome. Agora crie um link para chegar at esse pedao, usando o tag :

38

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

Pronto! Ao clicar na mensagem "Clique Aqui" de sua pgina, o usurio ir at o pedao que voc nomeou. ATENO: O sinal de cerquilha (#) necessrio para a ncora, pois avisa ao navegador para procurar o link no documento atual.

Linkando Arquivos de Outros Servidores Agora a coisa fica um pouco mais sria. aqui que est toda graa de Internet. Atravs de um esquema de endereamento, a URL, a Internet consegue acessar um arquivo que est em qualquer micro deste planeta desde que esteja conectado adequadamente a Web. Como j foi visto, a URL serve para especificar a localizao de pginas e arquivos em diretrios de servidores da Web. Comparando com um esquema que voc usa (s vezes at sem saber) para acessar algum arquivo em seu prprio computador. Acessando um arquivo pelo Windows: C: \Meus Documentos\Lista.DOC Acessando o arquivo por uma pgina pela Web : HTTP:// WWW. MINHAPAGINA.COM.BR/lista.DOC Uma URL composta por duas partes principais. A primeira o protocolo Internet do documento, a segunda parte o endereo do servidor e da pgina. A sintaxe disso : SINTAXE: PROTOCOLO: // SERVIDOR . INSTITUIO / ARQUIVO

Onde : Protocolo o tipo de servidor que est sendo acessado (geralmente HTTP); Servidor o computador que contm a pgina (pode conter o WWW, ou no); Instituio o tipo de instituio a qual esse computador pertence (Comercial, Internet Publica , Militar, Governamental, Educativa, etc. ) ; Arquivo o caminho da pasta publicada no servidor WEB (para isso a pgina principal deve estar nomeada para index.html ou). Exemplos: http://www.minhapagina.com.br ou http://www.minhapagina.com.br/documentos 39

Esse endereo pode ser especificado diretamente na linha de URL do navegador, para acessar diretamente a pgina INDEX.HTML (index.htm ou outro nome compatvel com o servidor WEB utilizado), ou ento dentro de um link de um documento HTML, atravs do A HREF que cria uma ligao , um link para o URL .

<A HREF = "HTTP://WWW.MINHAPAGINA.COM.BR ">MINHA PAGINA</A>

Tabelas
As tabelas so muito importantes para o designer de uma pgina/site. Com elas pode-se fazer alinhamentos que dificilmente seriam possveis com simples comandos. A funcionalidade de uma tabela faz com que um determinado site tenha um aspecto mais profissional e o usurio possa navegar de forma mais eficiente, pois os objetos podem estar mais bem posicionados na pgina/site. Ser discutido, nesta parte, quais so os comandos para se criar uma tabela e mostrar alguns exemplos. Claro que voc dever praticar e principalmente planejar a sua tabela, pois sem isso, fica muito difcil de controlar o cdigo HTML da sua pgina/site. O comando para se inserir uma tabela <TABLE>; para iniciar uma linha devemos introduzir a tag <TR> e para clula (alguns preferem dizer coluna) <TD>. Todos estes comandos so encerrados como </TABLE>, </TR> e </TD> respectivamente. Exemplo. Vamos supor que se queira montar uma tabela 3X2, ou seja de 3 colunas por 2 linhas, o cdigo HTML para isso :

<HTML> <HEAD> <TITLE>Criando Tabelas</TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6>TABELA</FONT></CENTER> <BR> <TABLE BORDER=1> <! Inicia a tabela e coloca uma borda de espessura igual a 1> <TR> <! Cria a primeira linha da tabela> <TD>PRIMEIRA COLUNA </TD> <! Aqui foi criada uma clula> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> </TR> <! Fecha a primeira linha da tabela> <TR> <! Abre a segunda linha da tabela> <TD> PRIMEIRA COLUNA</TD> <TD>SEGUNDA COLUNA </TD> <TD>TERCEIRA COLUNA </TD> <TR> <! Encerra a Segunda linha da tabela> </TABLE> <! Encerra a tabela> </BODY> </HTML>

40

Salve este exemplo como TABELA.HTML e abra o arquivo num navegador para ver como ficou. Com isto j se consegue ter uma idia de como montar as tabela. O segredo para se conseguir fazer estas tabelas de forma eficiente planejar e ter a idia exata do contedo desta tabela. Nas clulas da tabela pode-se inserir desde simples frases at figuras inteiras. Parmetros podem ser acrescidos s tabelas, tais como: aumentar ou diminuir a largura de uma clula; distanciar as clulas uma das outras; inserir cor de fundo dentro da clula etc. Para se visualizar melhor o uso destes parmetros, sero trabalhados vrios exemplos, conforme a seguir:

Alterando a Largura da Clula Para alterar o largura de uma clula da tabela basta acrescentar o parmetro WIDTH dentro da tag <TD>. Exemplo:

<HTML> <HEAD> <TITLE>Criando Tabelas </TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6>Largura das celulas em pixels </FONT></CENTER> <BR> <TABLE BORDER=2> <TR> <TD WIDTH=100> WIDTH=100</TD> <TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD> </TR> </TABLE> </BODY> </HTML>

O parmetro WIDTH pode receber dois tipos de valores, em pixels como no exemplo acima ou em porcentagem, como mostrado no exemplo a seguir. Tambm dentro da tag <TD> tem-se um outro parmetro que VALIGN=MIDDLE, este parmetro tem por funo alinhar o contedo da clula no meio da mesma, ou seja, dentro da clula as frases so alinhadas com relao ao seu centro.

41

Exemplo:

<HTML> <HEAD> <TITLE>Criando Tabelas </TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6>Largura das celulas em % </FONT></CENTER> <BR> <TABLE BORDER=2> <TR> <TD WIDTH=25%> WIDTH=25%</TD> <TD ALIGN=MIDDLE WIDTH=75%>WIDTH=75%</TD> </TR> </TABLE> </BODY> </HTML>

Inserindo Cor de Fundo e Separao de Clulas Outro atributo que se pode ter nas tabelas mudar a sua cor de fundo, isto se torna particularmente til quando se quer dar destaque a uma clula em especial. Exemplo:

<HTML> <HEAD> <TITLE>Criando Tabelas </TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6>Cor de fundo </FONT></CENTER> <BR> <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> </BODY> </HTML>

42

Pode-se acrescentar cores ao fundo de uma clula, outra coisa que tambm pode ser feita mudar a fonte com os comandos de formatao que voc j conhece, como <FONT COLOR=>, por exemplo. Repare que no exemplo anterior foi colocado BORDER=0 e as clulas apareceram coloridas, mas com um certo espaamento entre elas, para tirarmos este espao devemos acrescentar dentro da tag <TABLE> o parmetro CELLSPACING=0. Este parmetro elimina por completo os espaos entre as clulas. Exemplo:

<HTML> <HEAD> <TITLE>Criando Tabelas </TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6>Cor de fundo </FONT></CENTER> <BR> <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> </BODY> </HTML>

Outro parmetro que pode ser usado para separar espaos em uma clula CELLPADDING que inclui ou exclui espaos dentro da clula. Ou seja, se voc tiver um elemento (frase, texto, figura etc.) dentro da clula voc pode acrescentar espaos por igual nos quatros cantos da clula, fazendo com que seu texto ou figura no fique "grudado" nas paredes da clula. Aproveite os exemplos anteriores e experimente usar este atributo para ver como ele funciona. Isto j d uma idia do funcionamento geral das tabelas na pgina WEB. Muitos dos alinhamentos que encontramos na Internet so feito por intermdio de tabelas. Voc tambm pode usar todos os outros recursos j vistos de HTML para otimizar o uso de tabelas.

43

Um Pouco Mais de Tabelas Agora que voc j est um pouco mais familiarizado com o uso de tabelas e com seus principais atributos, vamos ver como podemos aperfeioar o uso de tabelas. Em seguida descrito uma srie de outros atributos e comandos para tabelas: <TH> ... </TH> Esta tag insere um cabealho dentro da clula. Na verdade a nica diferena entre a tag <TH> e a tag <TD> que a <TH> exibe o contedo da clula em negrito. <CAPTION> ... </CAPTION> Exibe um texto centralizado em relao tabela, como se fosse uma legenda. Exemplo:

<HTML> <HEAD> <TITLE>Criando Tabelas </TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6>TH e CAPTION </FONT></CENTER> <BR> <TABLE BORDER=1 CELLSPACING=2 CELLPADDING=6> <! Esta linha
inicia a tabela com borda de espessura 1 (border), espao entre as clulas 2 (Cellspacing) e espao dentro da clula 6 (Cellpadding)> <CAPTION>LEGENDA</CAPTION> <! Introduz uma legenda na tabela>

<TR> <TH>Contedo em negrito</TH> <! Insere o texto na forma de cabealho

(negrito)>

</TR> <TR> <TH>Contedo em negrito</TH> </TR> </TABLE> </BODY> </HTML>

Repare neste exemplo, que a legenda j sai centralizada em relao tabela e repare no espao dentro da clula devido ao comando CELLPADDING.

Os Atributos Colspan e Rowspan Estes atributos so muito importantes dentro da tag <TABLE>. So eles que possibilitam remodelar a disposio das clulas dentro da tabela.

44

Exemplo:

<HTML> <HEAD> <TITLE>Criando Tabelas </TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6>Colspan </FONT></CENTER> <BR> <TABLE BORDER=2 CELLPADDING=2> <TR> <TD COLSPAN=2>Exemplo do uso do COLSPAN</TD> <TR> <TD>CLULA 1</TD> <TD>CLULA 2</TD> </TR> </TABLE> </BODY> </HTML>

Neste exemplo verifica-se que na tag <TD> foi introduzido o parmetro COLSPAN. Este parmetro tem a finalidade de dizer que sob a clula onde ele foi introduzido pode-se ter um certo nmero de colunas. Logo, caso se queira que uma clula ocupe uma nica linha, como no exemplo, deve-se inserir o parmetro dentro da tag <TD> desta clula. A quantidade de clulas que viro em baixo da clula que recebeu o atributo COLSPAN deve ser de acordo com o nmero especificado no parmetro. Mas caso se queira definir uma nica clula ocupando uma coluna inteira? Neste caso usa-se o atributo ROWSPAN. Exemplo:

<HTML> <HEAD> <TITLE>Criando Tabelas </TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6>Rowspan </FONT></CENTER> <BR> <TABLE BORDER=2 CELLPADDING=2> <TR> <TD ROWSPAN=2>Exemplo do uso do ROWSPAN</TD> <TD>CLULA 1</TD></TR><TR> <TD>CLULA 2</TD> </TR> </TABLE> </BODY> </HTML>

45

Para melhor utilizar estes parmetros e ver como eles funcionam deve-se fazer a sua prpria tabela, pois somente desta forma se conseguir fixar o uso destes parmetros.

Usando Tabelas Como Molduras Outro uso bastante interessante de tabelas como moldura para alguma figura. Para isto basta iniciar uma tabela e definir um valor para BORDER. Exemplo: <HTML> <HEAD> <TITLE>Criando Tabelas </TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6>Molduras </FONT></CENTER> <BR> <TABLE BORDER=5> <TR> <TD><IMG SRC=NOME DA FIGURA> </TD> </TR> </TABLE> </BODY> </HTML> Claro que deve-se usar com muito bom senso este artifcio da tag <TABLE>, pois nem sempre uma moldura em uma figura defini um bom layout (aparncia) da sua pgina.

Colocando Uma Imagem de Fundo nas Tabelas Um recurso parecido com a cor de fundo , colocar uma imagem como fundo de uma tabela uma tcnica muito usada. Atravs do complemento BACKGROUND dentro da tag TABLE , basta indicar qual o endereo e o nome da figura. Exemplo: <HTML> <HEAD> <TITLE>Criando Tabelas </TITLE> </HEAD> <BODY> <CENTER><FONT COLOR=BLUE SIZE=6>Imagem de fundo </FONT></CENTER> <BR> <TABLE BACKGROUND="imagem/imagem.jpg" BORDER=5> <TR> <TD><H1>A imagem ficou no fundo da tabela? </H1></TD> </TR> </TABLE> </BODY> </HTML> 46

O Atributo RULES Para escolher as linhas internas que sero mostradas dentro da tabela , usamos o atributo RULES , dentro da tag <TABLE> . Os complementos desse atributo so: none : nenhuma linha interna ; rows : para as linhas horizontais entre cada linha da tabela ; cols : para as linhas verticais entre cada coluna da tabela ; groups : para linhas entre grupos de colunas e sees horizontais , definidas por tags especiais como COLGROUP e THEAD ; all : para mostrar todas as linhas entre cada coluna e linha na tabela ( default ) . Exemplos:

Tabela com todas as linhas internas ( default ) : <TABLE BORDER RULES=all> Tabela sem as linhas internas : <TABLE BORDER RULES=none> Tabela usando o complemento ROWS: <TABLE BORDER RULES=rows> Tabela usando o complemento COLS : <TABLE BORDER RULES=cols>

As tabelas so um forte recurso de modelagem das pginas web hoje em dia e para que se consiga utilizar bem este recuso no deve se limitar somente aos exemplos desta apostila procure em sites e at mesmos em livros. Nessas referncias se poder encontrar vrios outros exemplos de pginas usando tabelas mais complexas (como por exemplo, uma tabela peridica dos elementos). H uma observao importantssima que se deve fazer aqui. Como j visto antes, alguns comandos HTML no funcionam em um dado navegador. No caso de tabelas mais complexas, com alinhamentos mais precisos cada navegador interpreta estes comandos HTML de tabelas de forma diferenciada. Um exemplo tpico uso de CELLSPACING e CELLPADDING. Isto se deve ao fato de que no existe um consenso quanto a esta padronizao pelos diferentes navegadores. Sendo assim, quando se for criar tabelas deve-se sempre levar em conta em qual navegador que se dar preferncia para rodar a pgina. Por isso nunca demais deixar claro, em alguma parte da pgina/site principal, qual o navegador que rodar melhor com formatao utilizada.

Frames
Frames (quadros) so relativamente usadas na Web. H os que adoram o uso de frames e no admitem que suas pginas/sites fiquem sem elas, por outro lado h os que abominam o uso de frames, porque julgam que eles "estragam" o layout da pgina. Fazer frames tem o mesmo procedimento que confeco de pginas/site simples, a diferena que se deve trocar a tag <BODY> pela tag <FRAMSET> Para se ter uma pgina com dois frames deve-se ter trs pginas, uma com o cdigo que contm a tag <FRAMESET> e duas outras com os cdigos onde sero inseridas as pginas de cada frame. Para entender melhor segue a seguir algumas explicaes prticas. 47

Uma documento HTML simples seria assim : <HTML> <HEAD> <TITLE>Pgina simples </TITLE> </HEAD> <BODY> Neste campo entram os comandos em geral </BODY> </HTML> J um documento HTML que teria frames ficaria assim: <HTML> <HEAD> <TITLE>Pgina com Frame </TITLE> </HEAD> <FRAMESET> Neste campo entram as chamadas para os documentos dos frames </FRAMESET> </HTML> Ento o que se deve fazer? Deve-se criar um documento HTML normal e um documento HTML de frames. Exemplo: Este o cdigo para gerar os frames (veja a figura) Cdigo <HTML> <HEAD> <TITLE> Exemplo de frame </TITLE> </HEAD> <FRAMESET COLS=20%,80%>
<! Este comando inicia o frame e divide a tela do navegador em 2 partes, uma com 20% da tela e outra com 80%>

Resultado

<FRAME SRC=FRAME1.HTML>
<! Este comando chama as pginas HTML que devem ocupar as colunas divididas pelo frame>

<FRAME SRC=FRAME2.HTML> </FRAMESET> </HTML> OBSERVAO: Na imagem acirra pode-se perceber a diviso realizada pelos frames, entretanto, o erro de Arquivos no encontrado deve-se ao fato de que os arquivos FRAME1.HTML e FRAME2.HTML, ainda no foram criados. 48

Agora vamos crias os cdigos para serem inseridos nas duas colunas que criamos. FRAME1.HTML <HTML> <HEAD> <TITLE>Pgina simples </TITLE> </HEAD> <BODY> AQUI ENTRA A PRIMEIRA PGINA NORMAL </BODY> </HTML>

Salvar este exemplo como FRAME1.HTML. Por qu? Porque no cdigo que foi gerado, no exemplo de frames, chama-se a pgina com o comando <FRAME SRC=FRAME1.HTML>, caso se salve o nome do arquivo de forma diferente dever alterar tambm o cdigo da pgina de frame.

FRAME2.HTML <HTML> <HEAD> <TITLE>Pgina simples </TITLE> </HEAD> <BODY> AQUI ENTRA A SEGUNDA PGINA NORMAL </BODY> </HTML>

Este cdigo deve ser salvo como FRAME2.HTML, pelo mesmo motivo do cdigo anterior. OBSERVAO: Sempre lembrando que estas pginas devem estar no mesmo DIRETRIO. Pronto, a figura abaixo mostra o resultado da primeira pgina com frame.

49

Alem de poder dividir o navegador em colunas com o parmetro COLS dentro da tag <FRAMESET> , voc tambm pode dividir em linhas usando o parmetro ROWS, ou ainda dividindo em colunas e linhas ao mesmo tempo. Exemplo : Cdigo <HTML> <HEAD> <TITLE> Exemplo de frame </TITLE> </HEAD> <FRAMESET ROWS=50%,50%>
<! Este comando inicia o frame e divide a tela do navegador em 2 partes, uma com 50% da tela e outra com 50%>

Resultado

<FRAME SRC=FRAME1.HTML>
<! Este comando chama as pginas HTML que devem ocupar as colunas divididas pelo frame>

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

Uma tag <FRAMESET> pode ser inserida dentro da outra gerando assim frames dentro de frames, como no cdigo abaixo: Exemplo : Cdigo <HTML> <HEAD> <TITLE> Exemplo de frame</TITLE> </HEAD> <FRAMESET COLS=50%,50%> <FRAMESET ROWS=50%,50%> <FRAME SRC=FRAME1.HTML> <FRAME SRC=FRAME2.HTML> </FRAMESET> <FRAMESET ROWS=50%,50%> <FRAME SRC=FRAME1.HTML> <FRAME SRC=FRAME2.HTML> </FRAMESET> </FRAMESET> </HTML> Resultado

50

Percebe-se que toda a estrutura de frames depende na verdade da tag <FRAME>. A seguir, tem-se alguns dos atributos que podem ser inseridos dentro desta tag.

Parmetros de Frames Parmetro SRC da tag Este parmetro o responsvel por chamar a pgina HTML que deve ser aberta (inserida) dentro de um frame. Em todos os exemplos at agora s se usou arquivos locais para abrir estas pginas em um frame, mas nada impede de se colocar no lugar uma URL completa. Exemplo :

<FRAME SRC=http://www.yahoo.com> Este comando ser capaz, devidamente conectado a internet, de chamar esta pgina para o frame, onde quer que ela esteja na Internet.

Parmetro NAME Este um dos principais parmetros da tag <FRAME>. Ele serve para definir o nome do frame. Ele deve ser usado em conjunto com outro parmetro que o TARGET. Parmetro MARGINWIDTH Define a margem entre as laterais do frame e seu contedo. Exemplo :

<FRAME SRC=FRAME1.HTML MARGINWIDTH=100> Este comando cria uma margem de 100 pixels de cada lado do frame.

Parmetro MARGINHEIGHT Da mesma forma que MARGINWIDTH, este parmetro define uma distncia de margem, que neste caso a margem superior e inferior do frame. Exemplo :

<FRAME SRC=FRAME1.HTML MARGINHEIGHT=100> D um espao de 100 pixels entre as margens superiores e inferiores do frame.

51

Parmetro SCROLLING Define se o frame ter ou no barras de rolagem. Por default quando o contedo de uma pgina excede o tamanho do frame as barras de rolagem so acrescentadas automaticamente. Os valores vlidos para SCROLLING so YES, NO e AUTO. Exemplo :

<FRAME SRC=FRAME1.HTML SCROLLING=YES>

Parmetro TARGET Este o mais importante de todos os parmetros. Ele trabalha em conjunto com NAME e permite que coloquemos um link em um frame e o resultado, ou seja, a pgina linkada, aparece em outro frame. Abaixo apresentado um exemplo de como linkar um frame com outro. No exemplo construda uma pgina que possue um menu de opes do lado direito, para isso pode-se aproveitar os cdigos de exemplo abordados anteriormente. Os cdigos so: FRAME.HTML <HTML> <HEAD> <TITLE>FRAMES</TITLE> </HEAD> <FRAMESET COLS=25%,75%> <FRAME SRC=FRAME1.HTML SCROLLING=NO> <FRAME SRC=FRAME2.HTML NAME=TESTE> </FRAMESET> </HTML>

FRAME1.HTML <HTML> <HEAD> <TITLE>FRAMES</TITLE> </HEAD> <BODY BGCOLOR=YELLOW> <CENTER><H2>Escolha um Link</H2></CENTER> <BR> <A HREF=http://www.uol.com.br TARGET=TESTE>Site do Uol</A> <BR> <A HREF=http://www.yahoo.com.br TARGET=TESTE>Site YAHOO </A> <BR> <A HREF=FRAME2.HTML TARGET=TESTE>Volta para Frame2.html</A> </BODY> </HTML>

52

FRAME2.HTML <HTML> <HEAD> <TITLE>FRAMES</TITLE> </HEAD> <BODY> <CENTER><H2>Os links ao lado devem aparecer neste lado do Navegador </H2></CENTER> <BR> <CENTER> <FONT SIZE=4>Este frame foi nomeado como TESTE com o parmetro NAME em Frame.HTML</FONT> </CENTER> </BODY> </HTML>

Se tudo funcionar satisfatoriamente a pgina ser visualizada como abaixo, mas claro que os links que no so locais funcionaro somente se estiver conectado a internet.

Criando um Frame Inline Caso se queira misturar texto, figuras e um frame em uma mesma pgina, devese criar um frame inline. Para isso, utiliza-se a tag: SINTAXE: <IFRAME SRC=" nome do frame ">

53

Pode-se usar os complementos NAME para especificar um nome que identifica qual frame est em uso; WIDTH e HEIGTH para definir o espao na pgina utilizado pelo Frame; ALIGN ( LEFT ou RIGHT ), para alinhar o frame na pgina. Lembrando que se deve fechar a tag com </IFRAME>. Pode-se tambm pode usar os atributos normais da tag frame, como o FRAMEBORDER , SCROLLING etc. Exemplo : Cdigo <html> <body> <center><h1>Exemplo do comando IFRAME </h1></center> <hr> <iframe width=90% height=70% src="http://www.uol.com.br" frameborder=yes> </iframe> </center> <br> Aqui continua a pgina normal! </body> </html> Resultado

Referncias:
Obs. Parte desta apostila foi elaborada atravs de consultas realizadas em diversas apostilas, tutoriais e sites encontrados na internet, como: http://pt.wikipedia.org http://www.cultura.ufpa.br/dicas/htm/htm-ind.htm http://www.criarwebsite.com/tutoriais http://construindoseusite.com.br/ http://www.oficinadanet.com.br/ http://www.criarsites.com/ https://developer.mozilla.org/pt/Utilizando_meta_tags Mrcio, Neilon. Web Designer Passo a passo para iniciantes. Apostila. Miyasaki, Fbio. HTML - HiperText Markup Language. Apostila. 2006. Teixeira, Cssia de Jesus Ramos. HTML. Apostila da AG8 Informtica. 2000.

54