[HELDER DA ROCHA] Criação de Web Sites I

Helder da Rocha

Criao de

Web Sites I

Web e Internet Web design

Tecnologias de apresentao

Rev.: CWS1-03-2000/01 A4

Copyright 2000 por Helder Lima Santos da Rocha. Todos os direitos reservados. Os direitos do autor sobre esta obra esto protegidos pela Lei 9.610/98 (Lei de Direitos Autorais). Nenhuma parte desta publicao poder ser reproduzida ou utilizada em outros cursos sem a autorizao, por escrito, do autor. Alunos, professores ou funcionrios de instituies educa-cionais ou filantrpicas podem requerer autorizao gratuita para a reproduo deste material para uso prprio, ou para uso em treinamentos sem fins lucrativos. O autor pode ser contata-do atravs dos endereos eletrnicos [email protected] ou [email protected]. Este livro faz parte da srie Criao de Web Sites de propriedade de Helder Lima Santos da Rocha. Esta edio destina-se exclusivamente ao uso como material didtico do curso Forma-o WebDesigner, da IBPI Software e Servios Ltda. e no pode ser vendida separadamente nem utilizada como material didtico de outros cursos. Embora todos os cuidados tenham sido tomados na preparao deste livro, o autor no assu-me responsabilidade por erros e omisses, ou por quaisquer danos resultantes do uso das in-formaes nele contidas. Web Site: http://www.ibpinet.net/helder/wd/cws1/ Capa, editorao eletrnica e reviso: o autor. Cdigo desta edio: CWS1-03-2000/01 (Primeira edio) Formato: A4 apostila (numerao de pginas por captulo). Responsvel por esta tiragem: IBPINET So Paulo Tiragem desta edio: 80 cpias (juntamente com a edio 0 para a IBPINET). R672s Rocha, Helder Lima Santos da, 1968-

Criao de Web sites I tecnologias de apresentao. 1a. edio com tiragem limitada e autorizada apenas para cursos da IBPINET realizados at 31/12/2000. 140 p. A4. Acompanha disquete ou CD de 3 ou Web site com cdigo e exemplos. Reproduo: IBPINET So Paulo, SP, Maro de 2000. 1. Web design criao e apresentao de contedo interativo para a World Wide Web. 2. HTML HyperText Markup Language (linguagem usada para criar pginas). 3. CSS Cascading Style Sheets (linguagem usada para controlar forma). 4. World Wide Web (servio de recuperao de informaes da Internet) Programao. 5. Internet (rede de computadores, meio de comunicao) Programao. I. Ttulo: Criao de Web Sites I Tecnologias de apresentao. II. Srie.

CDD 005.133

Quaisquer marcas registradas citadas nesta obra pertencem aos seus respectivos proprietrios.

ii

Contedo

Apresentao

Prefcio

Parte 1: Web e Internet 1. Introduo 2. Criao de Web sites

Parte 2: HTML 1. Fundamentos do HTML 2. Pargrafos e blocos 3. Listas 4. Imagens 5. Formatao de caracteres (inline elements) 6. ncoras e Vnculos 7. Tabelas 8. Elementos deprecados 9. Testes

Parte 3: Folhas de Estilo 1. Introduo 2. Regras Bsicas 3. Fontes 4. Atributos de texto 5. Cores 6. Propriedades de classificao 7. Controle de blocos

iii

8. Posicionamento 9. Exerccios

Parte 4: Recursos Avanados 1. Layout com tabelas 2. Frames 3. Multimdia 4. Applets Java 5. Exerccios

Apndice A Bibliografia

iv

Apresentao

Web design (web = teia, design = projeto) , em ingls, o nome da arte milenar praticada pelos seres artrpodes da ordem Aracneae, ou aracndeos, mais popularmente conhecidos como as aranhas!

Essa seria uma boa definio para o termo web design h 10 anos! Hoje, Web design a arte de tecer um outro tipo de teia, razoavelmente organizada, para depois lig-la a uma teia enorme, muito desorganizada e catica, e que no controlada por nenhuma aranha individual: a World Wide Web. Web design , portanto, a concepo e projeto de colees de pginas de in-formao e aplicaes interativas, mantidas no ar por um programa chamado de servidor Web, o mesmo que mantm cada site acessvel atravs da World Wide Web.

Na poca em que as aranhas perderam a exclusividade da sua arte, a administrao da Web cabia a programadores que precisavam codificar toda a informao de texto usando uma linguagem: o HTML, para depois armazen-las em uma rea especial de uma mquina Unix, onde rodava um servidor Web. O Web design na poca era totalmente dependente do HTML. Pouco tempo depois, com a chegada da Web grfica, as imagens tornaram a teia ciberntica um pouco mais colorida. Hoje, a arte de criar pginas Web continua a exigir mais e mais conhe-cimentos de programao... programao visual! Saber HTML hoje menos importante que saber organizar informao graficamente, em um meio dinmico e heterogneo que tem altura, largura e profundidade.

A criao das pginas para a Web hoje se assemelha mais editorao eletrnica que programao. Os programadores no esto mais codificando HTML. Eles agora se preocupam com Java, Perl, ASP e outras linguagens de verdade. So os designers que tomaram conta da Web, e agora eles querem domin-la.

Mas no fcil dominar algo que muda todos os dias. Os caminhos do Web design so bem diferentes daqueles seguidos na criao para mdia impressa, de onde vm muitos designers de interface. O Web designer deve conhecer no s as possibilidades do meio onde publicar a sua informao, como tambm, e principalmente, suas limitaes. Novas tecnologias nem sempre podem ser aproveitadas. O que melhor, nem sempre vivel.

A arte do Web design consiste em aproveitar ao mximo os recursos oferecidos pela Web, garantindo a melhor apresentao, navegabilidade e interatividade de um Web site, dentro dos limites impostos pelo meio. necessrio atrair os visitantes e estimul-los a voltar outras ve-zes. s vezes necessrio sacrificar a qualidade da apresentao ou deixar de usar algum recur-

v

so til devido a lentido da rede ou incompatibilidades de navegadores problemas tpicos desse meio. importante que o Web designer aprenda a traar uma linha de equilbrio entre os impedimentos tecnolgicos e as possibilidades criativas dessa nova mdia, para tirar o maior proveito do seu potencial. preciso estar mais atento s novas tecnologias, s novas verses dos navegadores e demora dos velhos navegadores em desaparecerem totalmente que qual-quer recurso oferecido por uma nova ferramenta de desenvolvimento. A Web aberta e as tecnologias que a sustentam tambm so abertas e gratuitas.

Um Web designer no deve ser limitado pelos recursos tecnolgicos que tem disposio, nem pelas ferramentas que permitem que ele no precise se preocupar com tais recursos. O bom Web design comea longe do computador. Planejar a estrutura da teia e sua identidade com base nos objetivos que se destina (comercio, informao, promoo, intranet, captura de insetos) antes de iniciar a implementao libera a criatividade, preserva o conceito por trs do design da interface e diminui os limites impostos pela tecnologia. Por outro lado, conhecer as tecnologias envolvidas e no se contentar em apenas usar os recursos oferecidos pelas ferra-mentas que as escondem essencial para o Web designer que deseje dominar a Web, e no ficar eternamente nas mos dos que desenvolvem tais ferramentas.

O objetivo deste curso oferecer os conhecimentos necessrios para formar esse tipo de Web designer, que sabe projetar o visual, identidade e estrutura de navegao de um site e ao mesmo tempo conhece as tecnologias que as suas ferramentas esto gerando, para que possa, quando for preciso, super-las.

vi

Prefcio

Este material didtico contm textos selecionados e organizados especialmente para o curso Criao de Web Sites I. A finalidade deste material servir de apoio ao curso como fonte de in-formaes tericas e exerccios.

A finalidade do curso Criao de Web Sites I capacitar o aluno a desenvolver Web sites eficientes, de fcil manuteno, esteticamente atraentes, navegveis, acessveis e compatveis com os navegadores do pblico-alvo ao qual se destinam. O curso concentra-se nas tecnologi-as utilizadas para o desenvolvimento de sistemas de informao em hipertexto: HTML e CSS e tambm discute aspectos de design e acessibilidade.

O curso Criao de Web Sites I o primeiro de uma seqncia de trs cursos, de igual du-rao, que exploram a maior parte das tecnologias essenciais e de domnio pblico para criar Web sites interativos. No faz parte do programa desses trs cursos o tratamento de imagens para a Web, o uso de ferramentas grficas e de produtividade, nem o projeto supervisionado de um site enfatizando critrios de design. Tais assuntos, importantes em um programa comple-to para formao de um Web designer, podero ser abordados em outros cursos (e realizados na seqncia ou paralelamente.)

O que voc j deve saber Para ter o melhor rendimento neste curso, voc dever saber:

usar um computador PC/Windows, Macintosh ou Unix (copiar arquivos, remover arquivos, mudar o nome de arquivos, criar diretrios, mudar de diretrio, rodar apli-caes).

conectar-se e navegar na Internet usando um navegador. usar um editor de textos para alterar e criar novos textos. O laboratrio onde este curso ser ministrado em geral s contm um tipo de computa-

dor (PC, Mac ou Linux consulte a coordenao do curso para saber qual). Usurios de outros sistemas devero revisar as tarefas bsicas do sistema disponvel no laboratrio antes de iniciar o curso de forma a obter o melhor rendimento em sala de aula.

vii

No Web site dedicado a este curso (veja pgina de copyright) h links para material adicio-nal de referncia, aplicativos (para Linux, Macintosh e Windows) usados em sala de aula e al-ternativas, programa do curso (datas) e outras informaes.

Descrio do contedo Esta apostila consiste de quatro partes. A primeira traz uma introduo Web e Internet, com a definio de conceitos essenciais que sero usados ao longo do curso e aspectos importantes do desenvolvimento de Web sites.

A segunda parte trata exclusivamente da tecnologia HTML que ser apresentada de for-ma interativa. Ela no cobre todo o HTML, mas apenas mostra como usar os principais descri-tores HTML e seus atributos mais importantes, destacando o uso de tabelas, vnculos e ima-gens com diversos exemplos e ilustraes.

A terceira parte introduz a linguagem CSS, usada para criar sites controlados por folhas de estilo. Com essa tecnologia possvel ter controle quase absoluto sobre a aparncia de um site, com vantagens que facilitam a manuteno, tornam o site mais leve e acessvel e permite o suporte a tecnologias interativas como o DHTML (Dynamic HTML).

A quarta e ltima parte apresenta aspectos avanados do HTML como o uso de tabelas para organizar o layout de pginas, o uso de imagens para espaamento, janelas com mltiplos documentos (frames), imagens mapeadas, udio, vdeo, plug-ins e applets Java.

Esta apostila no contm tudo sobre HTML 4.0 e CSS. Para complement-la voc deve fazer o download de guias de referncia completos disponveis na Internet. Veja no site deste curso os endereos onde eles podem ser encontrados. Ao longo do curso, anexos podero ser distribudos (ou colocados na Internet para download) para complementar ou atualizar assuntos que eventualmente precisem ser tratados em maior detalhe.

Programa do curso O programa do curso cobre a maior parte dos assuntos discutidos nesta apostila, mas no to-dos. Alguns assuntos so temas de outros cursos e esto na apostila apenas para servir de refe-rncia. O programa abaixo no esttico. A ordem e profundidade dos assuntos abordados em sala podero ser modificadas pelo instrutor, visando o melhor aprendizado e o cumprimento dos objetivos do treinamento.

1. INTRODUO PLATAFORMA WEB: Conceitos essenciais. Tpicos: Princpios de In-ternet/Intranet, A Web e a Internet, Protocolos, Servios, A plataforma Web, Arqui-tetura da Web, Browsers e servidores, HTTP, HTML e URI (URL). Testes

2. HTML - HYPERTEXT MARKUP LANGUAGE: Introduo prtica linguagem declara-tiva usada para a descrio da estrutura de uma pgina de hipertexto. Tpicos: Tecno-logias de apresentao, HTML e CSS, Fundamentos do HTML 4, Blocos e pargra-fos:

ix

Vnculos , Imagens , Tabelas , , , . Testes e exerccios

3. CSS - FOLHAS DE ESTILO: Linguagem declarativa usada para a definio do estilo e aparncia de um Web Site ou pgina. Tpicos: Fundamentos de folhas de estilo, Re-gras e Sintaxe, Propriedades do CSS, Cores e imagens de fundo, Fontes, Margens e posicionamento. Testes e exerccios.

4. RECURSOS AVANADOS DO HTML: Frames, imagens mapeadas e recursos de estilo para sites cujo pblico-alvo no suporta HTML 4 ou CSS. Tpicos: Imagens mapea-das, frames, layout com tabelas, estilos com HTML. Exerccios. Projetos usando HTML e CSS.

Testes, exerccios e projetos podero ser propostos para a realizao fora do horrio de aula. Reserve pelo menos algumas horas por semana para dedicar-se a eles. Exerccios adicio-nais, alm de testes e projetos para avaliao (obrigatrios em alguns cursos), estaro dispon-veis no Web site dedicado ao curso (veja pgina de copyright).

Mdia eletrnica e atualizaes Todos os exemplos, exerccios resolvidos e solues de alguns exerccios propostos esto ou distribudos em um disquete ou CD que acompanha este livro ou disponveis na Internet. Veja na pgina de copyright (logo aps a capa desta apostila) qual o endereo na Internet onde os arquivos deste curso se encontram disponveis para download.

Crticas e sugestes Os textos contidos nesta edio esto sempre sendo revisados, atualizados e ampliados perio-dicamente e cada vez que so utilizados em cursos. Cuidados foram tomados para garantir a apresentao dos assuntos de forma clara, didtica e precisa, mas eventualmente podem esca-par erros, imprecises e trechos de pouca clareza. Sugestes, crticas e correes so sempre bem vindas e podem ser enviadas por e-mail a [email protected] ou [email protected]. Sua opinio muito importante e contribuir para que futuras edies possam ser cada vez melhores.

Helder L. S. da Rocha So Paulo, 16 de maro de 2000.

Criao de Web Sites I

e Internet

Parte 1 Web e Internet

Contedo

1. Introduo............................................................................................................... 3 1.1. Breve histria da Internet ............................................................................................3

A rede acadmica .................................................................................................................3 O surgimento da Web .........................................................................................................4 O poder da Web como meio de comunicao ................................................................5

1.2. Como funciona a Web e a Internet ............................................................................5 Protocolos .............................................................................................................................5 Endereos Internet ..............................................................................................................7 Servio de Nomes (DNS Domain Name Service).......................................................7 Portas e servios da Internet ..............................................................................................8 A Web entre os servios da Internet .................................................................................8

1.3. A plataforma Web.........................................................................................................9 Hipertexto .............................................................................................................................9 HTML....................................................................................................................................9 Servidor HTTP...................................................................................................................10 URIs (URLs) .......................................................................................................................11 Browser................................................................................................................................12 Tipos MIME.......................................................................................................................12

1.4. Tecnologias de Apresentao....................................................................................13 HTML..................................................................................................................................13 Histrico do HTML ..........................................................................................................14 HTML 4 e CSS ...................................................................................................................15 XML e XSL.........................................................................................................................15

1.5. Exerccios .....................................................................................................................16 2. Criao de Web Sites ............................................................................................ 19

2.1. Quais ferramentas existem para criar e manter sites? ............................................19 Editores grficos (WYSIWYG) .......................................................................................19 Editores de texto ................................................................................................................20 Editores de HTML ............................................................................................................20

2.2. Por que se preocupar com o perfil dos visitantes?.................................................21 2.3. Por que aprender HTML? .........................................................................................21

2


1. Introduo

O objetivo deste captulo definir os termos e definies essenciais relacionadas com a Web e a Internet. As informaes deste captulo no so essenciais para a criao de pginas, mas conhec-las uma vantagem que dar maior poder ao Web designer, pois entendendo como funciona o meio no qual ir publicar seus sites, ter melhores condies de detectar e solucio-nar os problemas que surgirem na publicao e manuteno deles.

1.1. Breve histria da Internet A Internet uma rede antiga. Tem mais de 30 anos de idade. Uma das pessoas que teve

um papel decisivo na sua criao, embora nunca seja lembrado por isto, foi o presidente cuba-no Fidel Castro. Os Estados Unidos tinham passado por uma possibilidade real de ataque nu-clear depois da instalao de msseis russos em Cuba e a interligao das bases militares em rede foi uma estratgia militar para proteger a comunicao em caso de ataque. Ela ligava m-quinas diferentes entre si atravs de linhas redundantes de maneira que, mesmo que uma ou vrias bases fossem reduzidas a p, as outras estaes ainda conseguiriam se comunicar entre si. Ento, com medo que Fidel e seus charutos nucleares paralisassem o sistema de defesa do pas foi criada a rede ARPANET (Advanced Research Projects Agency Network). A rede interligou vrios computadores em algumas universidades e centros de pesquisa envolvidos com projetos militares. Na poca, computador ainda era coisa rara. Computador em rede, mais raro ainda.

A rede acadmica Os primeiros usurios (cientistas) usavam a rede para trocar mensagens de correio ele-

trnico e ligarem-se remotamente a computadores distantes. O servio tornou-se to til que as universidades envolvidas comearam a ligar seus departamentos, mesmo os que no tinham nada a ver com o projeto. Na dcada de 80, foi a vez da NSFNET, a rede nacional de pesquisa dos Estados Unidos, que conectou os cinco grandes centros regionais de supercomputao e passou tambm a fazer parte da ARPANET. A NSFNET se tornou espinha dorsal das duas redes, depois chamada de Internet.

A NSFNET levou consigo uma legio de pequenas redes que a ela estavam conectadas. E assim a Internet foi crescendo e crescendo, sem nenhuma organizao central. Qualquer centro que achasse seus servios convenientes podia se amarrar ao n mais prximo simples-

3


mente pagando as despesas de uma linha dedicada de dados. Em pouco tempo, a Internet j interligava os maiores centros de pesquisa do mundo.

A expanso foi trazendo novos servios e outras redes de pesquisa, como a Usenet, a Bitnet, EARN e redes de BBSs. O crescimento j era impressionante, mas a popularidade ain-da era limitada. Grande parte do trfego era acadmico. Operar um sistema de correio eletr-nico em geral significava saber operar um jurssico terminal IBM ou mquina Unix, e ter al-guma familiaridade com suas interfaces hostis. Para transferir um arquivo era necessrio saber usar um programa especial (FTP), mandar comandos para ele e entender os cdigos que ele retornava.

O maior problema na poca, maior talvez que a complexidade, j que os usurios eram todos acadmicos, era a desorganizao generalizada da Internet. A Internet era um tremendo caos. Sabamos que era possvel transferir um arquivo de informaes de qualquer lugar do mundo. O problema era como saber se ele existia e onde estava!

O surgimento da Web A Internet comeou a crescer de forma explosiva em 1992, com o surgimento da World

Wide Web a evoluo de um projeto desenvolvido por Tim Berners-Lee no laboratrio CERN em Genebra. A CERN Laboratrio Europeu para Fsica de Partculas uma das maiores instituies cientficas do mundo e seus laboratrios esto distribudos por vrias ci-dades localizadas em 19 pases da Europa. Berners-Lee demonstrou como a informao se perdia diariamente no CERN, um ambiente que ele classificou como um modelo em miniatu-ra do resto do mundo em alguns anos. O sistema proposto, inicialmente chamado de Mesh foi implantado no CERN no ano seguinte j com o nome de World Wide Web.

Berners-Lee estava certo. O CERN era uma miniatura do mundo. Hoje, 10 anos depois, a Internet no mais a mesma. Todos os servios da Internet se renderam ao poder da Web e linguagem HTML, que a sustenta. At o servio de correio eletrnico, campeo de trfego na Internet por muitos anos, que por muito tempo exigia aplicaes especficas, separadas do browser, hoje lido dentro de um browser, atravs de pginas HTML.

A Web conseguiu finalmente organizar um pouco as informaes da Internet atravs do hipertexto mas foi s no ano seguinte que comeou a tomar conta da Internet com a chegada do primeiro navegador grfico: o X-Mosaic programa desenvolvido por um grupo de estagi-rios do NCSA - Centro Nacional de Supercomputao da Universidade de Illinois. Pouco de-pois surgiram verses para Windows e Macintosh que, oferecendo pela primeira vez uma interfa-ce grfica para a Web, acessvel atravs de um PC ou Mac, trouxe a grande massa de usurios domsticos para dentro da rede. Os provedores de acesso e informao comerciais se multipli-caram, oferecendo s pessoas comuns o mesmo acesso que antes s tinham as grandes organi-zaes e o meio acadmico, e a NSFNET finalmente se entregou iniciativa privada.

Os criadores do Mosaic, entre eles Marc Andreesen, pouco depois de deixar a universida-de criaram uma empresa: a Netscape, que foi provavelmente a empresa que teve a maior influ-ncia nos rumos seguidos pela Web na sua evoluo at os dias de hoje.

4


O poder da Web como meio de comunicao Apesar de ter surgido inicialmente como um servio disponvel em uma rede de compu-

tadores, a Web tem hoje um papel muito mais importante. Ela confundida com a prpria Internet, da qual faz parte. Para explor-la, nem mais necessrio ter um PC. Para publicar informaes atravs dela, no preciso saber nada sobre programao ou redes. Tecnologias recentes como o Network Computer (NC) um terminal inteligente para a Web, telefones celu-lares com navegadores embutidos e a rede WebTV mostram que a World Wide Web est desti-nada a preencher todos os espaos da mdia de difuso, no se limitando queles que possuem um computador.

A Web, dessa forma, possui um potencial inigualvel na histria das telecomunicaes. capaz de servir de porta de entrada no s a todos os servios da Internet mas tambm invadir a praia dos tradicionais servios de voz (telefone), televiso, rdio e mdias impressas, sem falar do impacto que est tendo diretamente nos hbitos da sociedade, mudando as regras do co-mrcio e das relaes humanas.

Diferente dos meios tradicionais de comunicao de massa, a World Wide Web uma m-dia democrtica (isto demonstrado pelo fracasso das tentativas de controle da informao por governos totalitrios.) O participante da comunidade virtual no precisa possuir uma esta-o difusora, uma concesso, uma grfica e nem sequer um computador para poder publicar sua informao e influenciar sua audincia, j que existem provedores de acesso e hospedeiros de informaes que nada cobram. Todos podem receber as informaes de todos. Qualquer um pode prover informao. O poder da informao est nas mos de todos os que puderem ter um espao na Teia, e no mais apenas com aqueles que controlam os meios de difuso tra-dicionais.

1.2. Como funciona a Web e a Internet Como deve ter ficado claro se voc leu a histria da Internet, os termos Web e Internet

no so sinnimos. A World Wide Web o nome do servio mais popular da Internet. Por esse motivo, freqentemente confundida com a prpria Internet. Internet, por sua vez, o nome dado ao conjunto de computadores, provedores de acesso, satlites, cabos e servios que for-mam uma rede mundial baseada em uma coleo de protocolos de comunicao conhecidos como TCP/IP. Essa distino pode fazer pouca diferena para quem apenas navega pela Web mas essencial para quem pretende desenvolver e colocar no ar pginas e aplicaes.

Protocolos atravs de protocolos de comunicao que um computador pode se comunicar com

outro atravs de uma linha telefnica ou placa de rede sem que o usurio precise se preocupar em saber qual o meio fsico que est sendo utilizado. O sistema Windows possui protocolos que permitem facilmente interligar computadores rodando Windows entre si. Os mesmos pro-tocolos podem no servir para fazer com que uma mquina Windows se comunique com uma

5


mquina Unix ou Macintosh, pois essas mquinas possuem arquiteturas diferentes. TCP/IP uma suite de protocolos padro que foi adotado como lngua oficial da Internet. Para fazer parte da Internet, um computador precisa saber se comunicar em TCP/IP. Todas as operaes de rede so traduzidas para TCP/IP antes que possam funcionar na Internet.

Protocolos TCP/IP atuam em vrios nveis ou camadas dentro de uma rede ou compu-tador. Um grupo de protocolos lida com os detalhes da rede fsica, como a converso dos da-dos para que possam ser enviados pela linha telefnica ou cabos de rede. So chamados de protocolos da camada fsica. Uma segunda classe de protocolos serve para organizar geografi-camente a rede, atribuindo a cada pedao de informao que circula por ela um endereo de origem e destino. Esses so os protocolos de nvel de rede. Garantir que as informaes che-gam ao seu destino inteiras e na ordem correta uma tarefa realizada por uma classe de proto-colos chamados de protocolos de transporte. Finalmente, h protocolos que se preocupam ape-nas com a comunicao entre aplicaes rodando em mquinas diferentes. Esses so os proto-colos de nvel de aplicao.

Para que qualquer informao na Internet saia de um computador e chegue at outro, precisar ser transformada por esses quatro tipos de protocolos em seqncia. Cada camada fragmenta ou transforma os dados mais e mais at que estejam em um formato que possa ser usado pelo protocolo seguinte ou adequado transmisso pela rede. Ao chegar do outro lado, os dados so decodificados na ordem inversa. A relao abaixo apresenta um resumo desses quatro tipos de protocolos (com as siglas de alguns deles entre parnteses):

Camada 4 (mais alta): protocolos de aplicao - oferecem servios como acesso remo-to (Telnet), e-mail (SMTP, POP3), transferncia de arquivos (FTP), servio de no-mes (DNS), servio Web (HTTP) entre outros. Lidam com a comunicao aparente entre duas aplicaes rodando em computadores diferentes.

Camada 3: protocolos de transporte - realizam a transferncia dos dados organizados em pacotes de uma mquina para outra. A transferncia pode ser confivel (TCP) ou no-confivel (UDP). Transferncias no confiveis so mais rpidas e por isso so usadas para transmitir udio e vdeo eficientemente.

Camada 2: protocolos de nvel de rede - identificam as mquinas e pacotes de infor-mao atravs de endereos (IP) de origem e destino, formados por cdigos distintos como 200.231.19.1

Camada 1: protocolos da camada fsica - realizam a interface entre as camadas anteri-ores e o meio de transmisso que pode ser formado por linhas telefnicas (PPP, SLIP, ...), placas e cabos de rede, transmissores e receptores de rdio e infraverme-lho, links de satlite, etc.

6


A figura abaixo ilustra a transferncia de informaes entre computadores, passando pe-las 4 camadas interligadas pelos protocolos TC

HTTP

TCP

IP

PPP

Cliente

Linha teInte

Linha te

ComunApa

Endereos Internet Um dos protocolos mais importantes da

- Internet Protocol. Ele define a forma de endereamena Internet, atravs de um conjunto de dgitos svel atravs da Internet tem um endereo IP expermanente. Quando voc se conecta a um proveIP temporrio sua mquina que permitir quesesso no provedor. S assim possvel recebeComputadores que hospedam pginas Web e qsam de um endereo IP fixo, para que voc pos200.231.191.10 o endereo IP da mquina onem So Paulo. Voc pode localiz-lo digitando do seu navegador.

Servio de Nomes (DNS Domain NaEmbora cada computador seja identificad

IP, no dessa forma que costumamos localizao funcionamento da Internet o servio de nomemquinas espalhadas pela Internet e que guardaou de uma rede a um endereo IP. Quando vocser (por exemplo, www.ibpinet.net), o browser prmquina (cujo endereo IP o browser j conhequina consulta outros servios de nomes espalho endereo IP correspondente ao nome solicita

Se o sistema de nomes falhar, o browser no localizar a mquina correspondente (mesmP/IP:

HTTP

TCP

IP

PPP

Servidor

lefnicarnetlefnica

icaorente

suite TCP/IP o protocolo de nvel de rede IP nto que permite a localizao de um computador chamado de endereo IP. Qualquer mquina aces-clusivo. Esse endereo pode ser temporrio ou dor via linha telefnica, ele atribui um nmero ela faa parte da Internet enquanto durar a sua r informaes em um browser ou enviar e-mail. ue oferecem outros servios pela Internet preci-sa localiz-los a qualquer hora. Por exemplo, de est localizado o servidor Web do IBPINET http://200.231.191.10/ no campo de endereos

me Service) o de forma exclusiva atravs de um endereo -los na Internet. Um dos servios fundamentais s de domnio. Esse servio oferecido por vrias m tabelas que associam o nome de uma mquina digita o nome de uma mquina no seu brow-

imeiro tenta localiz-la consultando uma outra ce) que oferece o servio de nomes. Essa m-ados pela Internet e em pouco tempo devolve do (www.ibpinet.net devolver 200.231.191.10). no conseguir o nmero IP que precisa e assim o que ela no esteja fora do ar).

7


Portas e servios da Internet A Internet existe h mais de trs dcadas. Na maior parte desse perodo ela era restrita

aos meios acadmicos e militares e oferecia poucos servios. Os principais servios utilizados na rede eram a transferncia de arquivos entre computadores (usando aplicaes que se comunicavam atravs do protocolo FTP - File Transfer Protocol), o correio eletrnico e a emulao de terminal, que permitia o acesso a computadores remotos. Esses servios eram oferecidos em algumas m-quinas onde rodavam programas servidores, permanentemente no ar aguardando a conexo de um cliente em uma de suas portas de comunicao.

Uma mesma mquina pode oferecer vrios servios, desde que em portas diferentes. I-magine que o endereo IP de uma mquina seja como o endereo de um prdio de escritrios. Localizando o prdio, voc procura por um determinado servio que prestado por uma em-presa. Pode haver vrias empresas no prdio. Cada uma tem uma sala identificada por um n-mero. O nmero da sala anlogo porta de servios de uma mquina. Para facilitar a vida dos clientes, vrias portas, identificadas por um nmero, foram padronizadas, ou seja, em computadores diferentes, voc geralmente encontra os mesmos servios localizados em portas com os mesmos nmeros.

Para ter acesso a um servio preciso ter uma aplicao cliente apropriada que saiba con-versar na lngua (protocolo de nvel de aplicao) de uma aplicao servidora (programa que oferece o servio na porta buscada pelo cliente). Como as portas so padronizadas, um cliente muitas vezes s precisa saber o nome ou endereo IP da mquina que tem determinado servi-o, pois o nmero da porta ele supe que seja o nmero padro.

Se voc usa o Internet Explorer para ter acesso ao site do IBPINET ou o Outlook Express para ler seu e-mail no IBPINET, possvel que voc esteja se conectando mesma mquina. O Outlook Express se conectar porta 110 para verificar suas mensagens. Na hora de enviar, utilizar os servios da porta 25. O Internet Explorer buscar a home page do IBPINET na porta 80, mas se voc decidir fazer compras e utilizar o servidor seguro do IBPINET, seu browser utilizar a porta 443.

A Web entre os servios da Internet O servio de emulao de terminal remoto - Telnet, requer que o usurio conhea o sis-

tema remoto, tenha permisso de acesso e saiba utiliz-lo. O acesso orientado a caracter e pode ser feito em MS-DOS. No incio da popularizao da Internet, vrios servios eram ofe-recidos apenas via Telnet, que funcionava como uma espcie de cliente universal. O usurio, ligado Internet, poderia pesquisar o banco de dados da Nasa, bater papo com usurios remo-tos e pesquisar repositrios de informaes pelo mundo afora. A World Wide Web surgiu inici-almente como mais um desses servios, que poderia ser utilizado atravs de um cliente Telnet apontando para o endereo info.cern.ch. O servio ainda existe, por razes histricas. poss-vel acess-lo via linha de comando no DOS ou Unix usando:

telnet info.cern.ch

8


um acesso orientado a caracter e na poca concorria com outros servios de informa-es mais populares como o WAIS, o Gopher e o Archie, que tambm tentavam organizar as informaes da Internet.

O acesso direto ao servidor, usando um cliente conectado sua porta de comunicao sempre mais rpido e eficiente que o acesso via Telnet. Os primeiros clientes Web eram orien-tados a caracter (no exibiam fontes nem imagens) e rodavam apenas em ambientes Unix. Foi somente com o surgimento do X-Mosaic que a Web se tornou grfica (e comeou a se tornar popular.) O Mosaic abriu caminho para vrios outros clientes Web, hoje chamados de browsers ou navegadores, e que passaram a ser o primeiro (e s vezes nico) contato de muitos usurios com a Internet.

Os browsers de hoje no so mais apenas clientes Web. Eles lem pginas locais, enviam e-mail, permitem que o usurio leia grupos de notcias, e-mail, execute aplicaes locais, acesse aplicaes remotas e diversos outros servios da Internet. O browser moderno um cliente universal para toda a Internet, embora esse acesso ocorra atravs da World Wide Web.

1.3. A plataforma Web A World Wide Web um servio TCP/IP baseado no protocolo de nvel de aplicao HTTP

(HyperText Transfer Protocol) Protocolo de Transferncia de Hipertexto. A plataforma Web o meio virtual formado pelos servidores HTTP (servidores Web que mantm sites), clientes HTTP (browsers) e protocolo HTTP (a lngua comum entre o cliente e o servidor).

Hipertexto Hipertexto uma forma no linear de publicao de informaes onde palavras que apare-

cem no texto podem levar a outras sees de um documento, outros documentos ou at outros sistemas de informao, fugindo da estrutura linear original de um texto simples. O hipertexto baseia-se em ligaes entre dois pontos chamados de ncoras. As ligaes entre as ncoras so chamadas de vnculos (links). Vnculos de hipertexto so implementados em textos publicados na Web usando uma linguagem declarativa chamada HTML - HyperText Markup Language.

HTML HTML usada para marcar um arquivo de texto simples (texto simples texto sem forma-

tao alguma, visualizvel em qualquer editor de textos). Se um arquivo de texto simples receber uma extenso de nome de arquivo .html ou .htm, um navegador como o Internet Explo-rer ir tentar interpret-lo como HTML. Dentro do texto, pode-se definir descritores (ou co-mandos HTML) entre os smbolos :

Arquivo de texto Este o primeiro pargrafo.

9


Os descritores s sero visveis quando o arquivo for visualizado em um editor de tex-tos (como o Bloco de Notas do Windows). Ao ser visualizado em um programa capaz de enten-der HTML, apenas o texto aparece, com uma aparncia determinada pelos descritores:

Arquivo de texto Este o primeiro pargrafo.

O texto com marcadores chamado cdigo-fonte HTML. O cdigo-fonte usado para produzir a pgina visualizada o browser que chamada de pgina HTML ou pgina Web.

O browser, por ser capaz de exibir diversos tipos de informao, depende totalmente da extenso do arquivo para saber o que fazer com ele. Se a extenso .htm ou .html no estiver presente ou se o arquivo tiver a extenso .txt, o browser exibir o cdigo-fonte.

Alm da formatao da pgina, o HTML responsvel tambm pela incluso de imagens e definio dos links que permitem a navegao em hipertexto.

Servidor HTTP O servio HTTP funciona de forma semelhante ao servio FTP - File Transfer Protocol

(protocolo de comunicao usado na Web para operaes de transferncia de arquivos). Am-bos oferecem aos seus clientes um sistema de arquivos virtual onde podem localizar recursos (arqui-vos, programas, etc.) e transferi-los de um computador para outro. O sistema virtual pode ter uma hierarquia prpria e totalmente diferente do sistema de arquivos real do computador, ao qual est vinculado. Geralmente um servidor tem acesso a uma rea restrita da mquina e s permite a visualizao dos arquivos l contidos. O sistema de arquivos virtual usa uma notao diferente daquela usada pelo sistema real. Por exemplo, considere o seguinte sistema de diretrios no Windows:

C:\ C:\Windows C:\Documentos C:\Documentos\Web\ C:\Documentos\Web\Imagens C:\Documentos\Web\Videos Suponha que um servidor HTTP foi instalado nessa mquina. Na instalao, ele confi-

gurado para administrar um sistema de diretrios a partir de um certo diretrio. Suponha que esse diretrio C:\Documentos\Web\. Para o servidor, isto seu diretrio raiz. No sistema de diretrios virtual, o diretrio raiz de um servidor chamado de / (barra). O sistema de arqui-vos virtual (a parte que um browser poder ter acesso) :

/ (C:\Documentos\Web\) /Imagens (C:\Documentos\Web\Imagens)

10


/Videos (C:\Documentos\Web\Videos) Um browser jamais ter acesso ao diretrio Windows, por exemplo. A principal funo

de um servidor Web , portanto, administrar um sistema de arquivos e diretrios virtual e atender requisies dos clientes HTTP (os browsers), que, na maior parte das vezes, enviam comandos HTTP pedindo que o servidor devolva um ou mais arquivos localizados nesses diretrios. Os pedidos so feitos atravs de uma sintaxe especial chamada de URI.

URIs (URLs1) Todas as comunicaes na plataforma Web utilizam uma sintaxe de endereamento

chamada URI - Uniform Resource Identifier - para localizar os recursos que so transferidos. O servio HTTP depende da URI que usada para localizar qualquer coisa na Internet. Contm duas informaes essenciais: 1) COMO transferir o objeto (o protocolo); 2) ONDE encontr-lo (o endereo da mquina e o caminho virtual). URIs tipicamente so constitudas de trs par-tes:

mecanismo (protocolo) usado para ter acesso aos recursos (geralmente HTTP) nome da mquina (precedido de //) onde o servio remoto oferecido (e a porta, se

o servio no estiver em uma porta padro) ou outro nome atravs do qual o servio possa ser localizado (sem //).

nome do recurso (arquivo, programa) na forma de um caminho (no sistema de ar-quivos virtual do servidor) onde se possa encontr-lo dentro da mquina.

Sintaxe tpica:

protocolo://maquina:porta/caminho/recurso

As URIs mais comuns so os endereos da Web, que utilizam o mecanismo HTTP para realizar a transferncia de dados:

http://www.maquina.com.br/caminho/para/minha/pgina/texto.html Veja algumas outras URLs:

ftp://usuario:[email protected]/pub/arquivo.doc Acesso a servidor FTP que exige usurio e senha para fazer download de arquivo.doc

nntp://news.com.br/comp.lang.java Acesso a servidor de newsgroups para ler o grupo comp.lang.java

news:comp.lang.java Acesso ao grupo comp.lang.java atravs de servidor default (definido localmente)

http://www.ibpinet.net/ Acesso pgina default disponvel no diretrio raiz do servidor Web de www.ibpinet.net

1 URIs tambm so frequentemente chamadas de URLs (Uniform Resource Locators). A URL um tipo particular de URI mas, para a nossa discusso, essa distino irrelevante. A documentao HTML (especificao) sempre refere-se essa sintaxe como URI.

11


http://www.algumlugar.com:8081/textos/

Acesso pgina default disponvel no diretrio textos do servidor Web que roda na porta 8081 da mquina www.algumlugar.net

http://www.busca.com/progbusca.exe?opcoes=abc&pesquisa=dracula Passagem de parmetros de pesquisa para programa de busca progbusca.exe que ter sua execuo iniciada pelo servidor HTTP que roda na porta 80 (default) de www.busca.com.

http://www.ibpinet.net/helder/dante/pt/inferno/notas_4.html#cesar Acesso uma seo da pgina HTML notas_4.html identificada como cesar, localizada no subdiretrio virtual /helder/dante/pt/inferno/ do servidor Web de www.ibpinet.net.

mailto:[email protected] Acesso janela de envio de e-mail do cliente de correio eletrnico local.

Browser O browser um programa que serve de interface universal a todos os servios que po-

dem ser oferecidos via Web. para a plataforma Web o que o sistema operacional (Windows, Linux, Mac) para o computador. A principal funo de um browser ler e exibir o contedo de uma pgina Web. A maior parte dos browsers tambm capaz de exibir vrios outros tipos de informao como diversos formatos de imagens, vdeos, executar sons e rodar programas.

Um browser geralmente usado como cliente HTTP aplicao de rede que envia requi-sies a um servidor HTTP e recebe os dados (uma pgina HTML, uma imagem, um progra-ma) para exibio, execuo ou download. Browsers tambm podem ser usados off-line como aplicao local do sistema operacional para navegar em sistemas de hipertexto construdos com arquivos HTML (sem precisar de servidor HTTP). Nesse caso, no se comportam como clien-tes HTTP (j que no esto realizando operaes em rede) mas apenas como visualizadores de mdia interativa capazes de visualizar HTML, imagens, sons, programas, etc.

Como os browsers precisam interpretar vrios tipos de cdigo (cdigo de imagens GIF, JPEG, cdigo de programas Java e Flash, cdigos de texto HTML ou texto simples) preciso que ele saiba identificar os dados que recebe do servidor. Isto no a mesma coisa que identi-ficar um arquivo carregado do disco local, onde ele pode identificar o tipo atravs da extenso. Quando os dados chegam atravs da rede, a extenso no significa nada. O servidor precisa informar ao browser o que ele est enviando. Na Web, isto feito atravs de uma sintaxe pa-dro para definir tipos chamada MIME - Multipart Internet Mail Extensions.

Tipos MIME MIME uma sintaxe universal para identificar tipos de dados originalmente utilizada pa-

ra permitir o envio de arquivos anexados via e-mail. O servidor Web possui, internamente, tabelas que relacionam os tipos de dados (na sintaxe MIME) com a extenso dos arquivos por ele gerenciados. Quando ele envia um conjunto de bytes para o browser, envia antes um cabea-lho (semelhante ao cabealho de e-mail) informando o nmero de bytes enviados e o tipo MIME

12


dos dados para que o browser saiba o que fazer com a informao. A sintaxe MIME tem a seguinte forma:

tipo/subtipo O tipo classifica um conjunto de bytes como imagens, textos, vdeos, programas (aplica-

es), etc. O subtipo informa caractersticas particulares de cada tipo. No basta saber que o arquivo uma imagem, preciso saber qual o formato, pois o cdigos usados para produzir imagens de mesma aparncia grfica podem diferir bastante entre si. Tanto no servidor como no browser h tabelas que relacionam extenses de arquivo a tipos MIME:

image/jpeg .jpe, .jpg, .jpeg image/png .png image/gif .gif text/html .html, .htm, .jsp, .asp, .shtml text/plain .txt x-application/java .class

1.4. Tecnologias de Apresentao As tecnologias utilizadas na plataforma Web podem ser classificadas de acordo com sua

finalidade em tecnologias de apresentao e tecnologias interativas. As tecnologias de apresentao so aquelas que se destinam unicamente formatao e estruturao das pginas Web. Podem ser usadas tambm para construir a interface de aplicaes Web no browser. Os principais padres em uso atualmente so HTML, CSS, XML e XSL. As tecnologias interativas so as que permi-tem o desenvolvimento de aplicaes e pginas com alto nvel de interatividade com o usurio. Em geral consistem da combinao de uma linguagem de programao com uma arquitetura ou modelo que possibilita a sua integrao com uma pgina HTML ou servidor HTTP. Po-dem, portanto, executar do lado do servidor (como CGI, ASP, ADO, Servlets, ISAPI, JSP, PhP, Cold Fusion e LiveWire) ou do lado do cliente (como JavaScript, DHTML, Java Applets, ActiveX e VBScript).

HTML HTML - HyperText Markup Language a linguagem universal da Web. atravs dela que a in-formao disponvel nas pginas da WWW pode ser acessada por mquinas de arquiteturas e sistemas operacionais diferentes. No uma linguagem de programao com a qual se possa construir algoritmos, mas uma linguagem declarativa que serve para organizar informaes em um arquivo de textos que ser visualizado em um browser. Define uma coleo de elementos para marcao (definio de estrutura) de texto. Se voc, no passado, j usou um editor de textos como WordStar ou Carta Certa, dever se sentir em casa com HTML. Coo foi mencio-nado anteriormente, um arquivo HTML um arquivo de texto simples recheado de marcadores que se destacam do texto pelos caracteres especiais "".

13


Existem vrias linguagens para formatao de textos. Qualquer texto que aparece forma-tado (com fontes, cores, tamanhos) em um computador tem uma linguagem de formatao por trs. A maioria so linguagens proprietrias que s funcionam em softwares especficos (textos em formato Word, por exemplo). Existem alguns formatos, porm, que se tornaram padres, servindo basicamente para realizar converses entre os formatos proprietrios (SGML e RTF, PostScript, TeX, PDF). HTML um formato pblico (no pertence a um fabri-cante especfico), e leve (no produz arquivos enormes como o Word) sendo por essas e outras razes adequado difuso de informaes que sero visualizadas em mquinas diferentes.

Com HTML possvel publicar documentos estruturados on-line, recuperar informaes atravs de vnculos de hipertexto, projetar uma interface interativa com formulrios para aces-so a servios remotos como buscas e comrcio eletrnico, e incluir imagens, vdeos, sons, ani-maes e outras aplicaes interativas dentro de documentos visveis no browser.

Histrico do HTML HTML foi desenvolvida originalmente por Tim Berners-Lee no CERN - Laboratrio

Europeu de Fsica de Partculas. Sua popularidade cresceu junto com a popularizao da Web, atravs do NCSA Mosaic. Devido ao surgimento de vrios browsers que utilizavam HTML para navegar no sistema de informaes proporcionado pela Web, grupos de trabalho foram formados com a inteno de padronizar especificaes para o HTML.

HTML 2.0, concluda em 1995, foi a primeira verso recomendada pelo IETF - Internet Engineering Task Force e se tornou um padro da Internet. HTML 2.0 era uma linguagem sim-ples que dizia como um browser deveria estruturar uma pgina, mas no como os ttulos, par-grafos e listas deveriam aparecer graficamente. Durante o desenvolvimento do HTML 3.0, a Web estava em franca expanso e os esforos de padronizao no puderam acompanhar as tendncias do mercado, que exigiam maiores recursos de apresentao grfica ao HTML 2.0. O HTML 3.0 acabou no sendo aprovado e anos depois, aprovou-se uma recomendao cha-mada HTML 3.2 em 1997, que introduzia recursos de apresentao grfica no HTML.

Infelizmente a maioria dos recursos grficos do HTML 3.2 foram incorporaes de ex-tenses proprietrias da Netscape e Microsoft, criadas sem levar em conta a filosofia do HTML de garantir a compatibilidade da linguagem em plataformas diferentes. Isto acabou atrasando o desenvolvimento de ferramentas de desenvolvimento eficientes, pois era impossvel validar HTML para plataformas que no suportavam certos recursos grficos mais sofisticados.

HTML foi desenvolvida originalmente para que qualquer dispositivo pudesse ter acesso informao da Web. Isto inclui PCs com monitores grficos de diversas resolues, terminais orientados a caracter, telefones celulares, dispositivos geradores de voz, etc. HTML 3.2 tinha elementos que prejudicavam essa meta. Finalmente, depois de muita discusso, as empresas entraram em um acordo e desenvolveram o HTML 4.0, que estende o HTML com mais recur-sos visando um acesso mais universal informao da Web, como recursos de acessibilidade pessoas com deficincias, suporte a convenes internacionais (outras lnguas, outros alfabe-

14


tos), separao da estrutura, contedo e apresentao, recursos interativos do lado do cliente e otimizao em tabelas e formulrios.

HTML 4 e CSS Vrios elementos do HTML 3.2 foram considerados deprecados (candidatos a se tornarem

obsoletos) pelo HTML 4. So todos elementos que permitem definir cores, fontes, alinhamen-to, imagens de fundo e outras caractersticas da apresentao da pgina que dependem da pla-taforma onde a informao visualizada. HTML nunca realizou bem o trabalho de formatao grfica de uma pgina. Foi criada inicialmente para apenas dar estrutura a um contedo. Nunca previu formas de posicionar imagens e texto de forma absoluta em uma pgina e as solues desenvolvidas pelos Web designers, por no serem solues previstas na especificao, tm causado problemas de acesso em vrios sites e impedido o acesso de dispositivos mais limita-dos como a WebTV e WebPhone de terem acesso total Web. A soluo do HTML 4.0 foi separar a estrutura da apresentao, deixando que a linguagem HTML voltasse s suas origens (nos tempos do HTML 2) para definir apenas a funo do texto marcado (o que ttulo, par-grafo, etc.) Uma outra linguagem foi criada para se preocupar com a aparncia (como o ttulo e pargrafo sero exibidos na tela). A principal linguagem usada para esse fim CSS - Cascading Style Sheets, que permite a criao de folhas de estilo aplicveis a vrias pginas de um site. Se um dispositivo limitado no consegue exibir os estilos definidos no CSS, ele pelo menos consegue entender a estrutura do texto e imagens de forma que mesmo usurios com menos recursos podem ter acesso informao.

Escrever HTML no difcil, apenas toma tempo, por isso usar um editor apropriado pode tornar o processo de criao de pginas mais produtivo. Um arquivo de texto simples com descritores HTML, quando carregado em um browser, tem os descritores interpretados e as suas informaes formatadas na tela de acordo com a estrutura prevista pelos marcadores e uma folha de estilos, geralmente definida pelo prprio browser. A folha de estilos pode ser definida pelo programador usando uma linguagem como CSS e vinculada pgina para mudar sua aparncia.

XML e XSL XML - eXtensible Markup Language e XSL - eXtensible Style Language so as novas criaes

do W3C - World Wide Web Consortium (consrcio das empresas que desenvolvem os padres para a WWW). No pretendem substituir o HTML mas, em vez disso, oferecer meios de es-tender e ampliar as possibilidades da Web. XML uma especificao ou meta-linguagem que define uma sintaxe que pode ser usada para criar novas linguagens semelhantes a HTML. A prpria linguagem HTML pode ser vista como um tipo especial de XML. Com XML voc pode criar sua prpria linguagem de marcao MinhaML, definir seus prprios marcadores e esquemas para aplicaes especficas, por exemplo, poderia conter algo como:

26/12/1999... ...

15


Depois voc pode usar CSS ou XSL para definir a aparncia dos seus marcadores em um browser XML. Para que um browser XML seja capaz de compreender a linguagem que voc criou, preciso definir um dicionrio e uma gramtica (usando as regras da especificao XML) para ela. A gramtica para a anlise da sua linguagem deve ficar armazenada em um documento chamado DTD - Document Type Definition. Carregando o DTD, o browser XML aprender a nova linguagem e ser capaz de formatar a informao que voc estruturou com seus marcado-res, e apresentar as informaes na tela de acordo com as regras de estilo definidas no CSS ou em um XSL criado por voc.

As tecnologias XML e XSL no sero abordadas neste curso mas voc pode obter maio-res informaes sobre as duas tecnologias, alm de ter acesso a guias de referncia e tutoriais atravs do site do World Wide Web Consortium (W3C) em http://www.w3.org/XML/.

1.5. Exerccios

1. Entre as opes abaixo, quais representam protocolos da Internet? Marque uma ou mais de uma.

a) HTML b) HTTP c) CSS d) FTP e) URI

2. Marque apenas as afirmaes verdadeiras: a) World Wide Web e Internet so dois nomes usados para representar o conjunto de

computadores, provedores de acesso, satlites, cabos e servios que formam uma rede de alcance mundial.

b) Um protocolo de comunicaes essencial para que computadores diferentes possam se comunicar uns com os outros.

c) A Internet se baseia em um protocolo de comunicaes chamado de HTTP Hy-perText Transfer Protocol. Para fazer parte da Internet, um computador precisa saber falar HTTP.

d) Qualquer mquina acessvel atravs da Internet tem, em algum momento, um ende-reo IP exclusivo.

e) No possvel que um computador utilize programas como browsers e aplicativos de correio eletrnico para navegar, receber e enviar e-mail sem que ele possua, ne-cessariamente, um endereo IP.

3. Marque apenas as alternativas falsas: a) Se um computador identificado atravs de um nome, por exemplo,

www.severino.com.br, ele no precisa ter um endereo IP. b) Se o sistema de pesquisa de nomes (DNS) falhar o browser no localizar a mqui-

na procurada na Internet. Isto no quer dizer que o site est fora do ar. Se voc in-formar diretamente o endereo IP da mquina, existe a possibilidade que o site seja alcanado.

16


c) Uma mesma mquina pode oferecer vrios servios TCP/IP, como o servio HTTP (Web), oferecido por mquinas que hospedam sites, o servio de caixa-postal, e o servio de envio de correio eletrnico.

d) Uma porta TCP/IP pode oferecer apenas um tipo de servio. e) Os nmeros das principais portas de servio TCP/IP so padronizadas, ou seja, em

computadores diferentes, voc geralmente encontra os mesmos servios localiza-dos em portas com os mesmos nmeros.

4. Servidor e cliente so papis diferentes exercidos por um computador em rede (os termos tambm so usados para se referir aos programas usados para esses fins). Uma mesma m-quina pode, simultaneamente, exercer os dois papis, desde que rode programas capazes de oferecer servios e de consumi-los. Entre as alternativas abaixo, marque apenas as que des-crevem caractersticas de servidores Web:

a) Monitoramento da porta TCP/IP de nmero 80 em uma nica mquina. b) Hospedagem e gerenciamento de arquivos em um site na Web c) Interpretao de arquivos HTML d) Exibio de imagens e) Requisio de informaes remotas atravs de URIs

5. Qual a principal funo da sintaxe MIME Multipart Internet Mail Extensions? Marque uma alternativa.

a) localizar pginas na Internet b) tornar possvel o envio de e-mail atravs de uma pgina Web c) identificar tipos de arquivos d) permitir que um browser funcione como servidor de e-mail e) nenhuma das alternativas anteriores

6. Marque as opes verdadeiras. Uma pgina HTML ... a) ... geralmente um arquivo de texto com extenso .htm ou .html b) ... poder exibir imagens, texto formatado, vnculos de hipertexto e cores ao ser lida

por uma aplicao como o Internet Explorer. c) ... exibir seu cdigo-fonte, consistindo de smbolos especiais entre

quando for lida por um editor de textos comum, e no mostrar imagens. d) ... no pode ser criada atravs de um editor de textos qualquer. preciso usar uma

ferramenta como o DreamWeaver ou HomeSite. e) ... pode ter vnculos interligando-a com outras pginas e com imagens. f) ... se tiver vnculos deve express-los usando a notao de URIs, absolutas ou rela-

tivas, para que funcionem quando a pgina for publicada em um servidor Web.

7. O que acontece quando um browser carrega um arquivo de texto simples, com extenso .html ou .htm, mas sem formatao HTML alguma?

a) A pgina no carregada b) A pgina carregada mas toda a formatao do texto original (pargrafos, ttulos,

quebras de linha, etc.) perdida na visualizao c) A pgina interpretada como texto simples e exibida em fonte de largura fixa

(Courier, por exemplo), preservando a formatao original d) O browser causa a abertura de uma aplicao para a leitura de textos (o Word, por

exemplo).

17


e) O browser exibe uma mensagem de erro

8. Considere o seguinte sistema de diretrios no Windows, em uma mquina acessvel via In-ternet chamada www.tribos.com.br: C:\ C:\Windows C:\Apache C:\Apache\htdocs\ C:\Apache\htdocs\ongs\ Suponha que um servidor HTTP foi instalado nessa mquina e configurado para admi-

nistrar um sistema de diretrios a partir do diretrio C:\Apache\htdocs\ (diretrio raiz do servidor). Qual das URLs abaixo permite a visualizao do arquivo index.html, armazenado em C:\Apache\htdocs\ongs\ atravs de um browser localizado em uma mquina remota?

a) http://www.tribos.com.br/Apache/htdocs/ongs/index.html b) http://www.tribos.com.br/C:/Apache/htdocs/ongs/index.html c) http://www.tribos.com.br/ongs/index.html d) http://www.tribos.com.br/C:/Apache/htdocs/index.html e) http://www.tribos.com.br/index.html f) http://www.tribos.com.br/ g) C:\Apache\htdocs\ongs\index.html

9. No mesmo servidor Web da questo anterior h uma imagem logotipo.gif armaze-nada no diretrio C:\Apache\htdocs\. O arquivo index.html localizado em C:\Apache\htdocs\ongs\ refere-se a essa imagem atravs de um descritor . Quais, entre as sintaxes abaixo para o descritor de index.html, causaro a exibio da i-magem dentro da pgina, quando visualizada por um browser em uma mquina remota? Marque no mnimo uma.

a) b) c) d) e) f)

10. Qual dos caminhos abaixo no uma URI (ou URL)? a) ftp://usuario:[email protected]/pub/arquivo.doc b) news:comp.lang.java c) http://www.algumlugar.com:8081/textos/ d) c:\wd\paginas\html\ e) /progbusca.exe?opcoes=abc&pesquisa=dracula f) mailto:[email protected]

18


2. Criao de Web Sites

2.1. Quais ferramentas existem para criar e manter sites? Podemos criar uma pgina Web simplesmente usando um editor de textos (como o blo-

co de notas do Windows) e um browser para visualizao. Embora esta seja uma boa forma de aprender, pouco produtiva para desenvolver sites complexos que usam tabelas, frames e de-sign sofisticado. Alguns editores so bastante visuais e mostram todo o processo de criao do site, fazem busca e substituio em todo o site, utilizam templates, permitem edio direta do cdigo e fazem a previso sem a necessidade de um browser. o caso do Microsoft FrontPage, do Macromedia DreamWeaver, do Corel WebMaster, e do Adobe GoLive. Outros, simplesmente ser-vem para economizar batidas de teclas e evitar erros de sintaxe na hora de escrever o cdigo HTML. Editores de cdigo HTML como o Hot Dog, Hot Metal, HomeSite, BareBones, etc. reali-zam esta funo. Nas sees a seguir, discutiremos as diferenas entre cada tipo de editor.

Editores grficos (WYSIWYG) Os editores mais fceis de usar, que dispensam totalmente o uso de HTML so os edito-

res WYSIWYG. Esse nome esquisito uma sigla bastante usada nos primeiros tempos da edi-torao eletrnica para caracterizar programas que representavam na tela do computador uma pgina da forma como seria impressa. Naquele tempo, era comum a existncia de processado-res de texto ou formatadores de texto que usavam comandos para descrever como o texto iria aparecer na hora da impresso. Para se ter uma idia do resultado final, era necessrio ou im-primir ou rodar um programa a parte que fizesse um preview da pgina criada. Com o advento da editorao eletrnica, surgiram programas como o Aldus PageMaker no Macintosh e Ventura Publisher no PC que mostravam na tela a prpria pgina, e no um monte de cdigos de controle misturados ao texto. Eles se definiam como programas WYSIWYG, que quer dizer What You See Is What You Get, ou, o que voc v o que voc obtm, sugerindo que o que o autor visualiza na tela uma representao bastante fiel do resultado final que obter na im-pressora. WYSIWYG na Web bem menos fiel que na impresso. Para trabalhos impressos, tem-se uma representao da pgina em uma determinada impressora, com determinadas fontes, cores, etc. Na Web impossvel saber se a pessoa que ir ver a sua pgina ter as mesmas fon-tes, cores, verses de browser que aquela onde voc fez o seu teste WYSIWYG. Portanto,

19


os editores grficos de pginas Web so no mximo WYSISWIG ou What You See Is Someti-mes What You Get (o que voc v s vezes o que voc obtm.).

A multiplicidade de browsers e plataformas que existem na Internet exige do Web designer mais que saber fazer pgi-nas que ficam boas em uma nica plataforma e browser. necessrio testar o site em sistemas diferentes levando em conta o pblico-alvo do site e muitas vezes ne-cessrio recorrer codifi-cao HTML para resol-ver algum problema no previsto pelos editores. Todos os bons editores grficos permitem a edio do cdigo HTML assim como o desenvol-vimento grfico. A imagem acima mostra o ambiente do Macromedia Dreamweaver 3.

Editores de texto Pode-se usar qualquer editor de texto que tenha a capacidade de salvar um arquivo de

texto puro, com alfabeto ISO-Latin-1 (ISO-8859-1) ou ASCII para criar pginas HTML. Se o seu editor s conseguir salvar US-ASCII, ser mais difcil o uso de acentos (voc ter que usar cdigos especiais). Alguns exemplos de editores que podem ser usados so o Bloco de Notas do Windows, o WordPad (desde que se salve a pgina como texto), o EditPad, o WinEdit e outros editores shareware/freeware populares disponveis na Internet.

Editores de HTML Editores de HTML so como os

editores de texto mas possuem uma srie de atalhos para agilizar a entrada de cdi-go HTML. Os atalhos tambm evitam que se cometam erros de sintaxe. Os editores HTML mais sofisticados possu-em um sistema de preview embutido, per-mitem a definio de gabar os a serem aplicados a um conjunto deit

pginas, su-20


portam macros, busca e substituio em diversos arquivos e filtros diversos. A figura acima mostra o ambiente do Allaire HomeSite 4.5.

A maioria dos editores HTML esto disponveis na Internet pelo sistema de freeware ou shareware. O site das duas vacas, ou TUCOWS (http://www.tucows.com) possui uma lista crescente destes programas. Voc tambm encontra editores em http://www.shareware.com. Entre os comerciais, um dos mais populares o HomeSite.

2.2. Por que se preocupar com o perfil dos visitantes? Qualquer Web designer que queira desenvolver pginas seriamente hoje em dia deve ter

as verses dos browsers mais populares entre o pblico. No basta testar somente na ltima verso. Geralmente a grande massa de usurios que navega na Internet no possui a ltima verso do seu browser.

Os browsers so a janela do usurio para a Web. Dependendo da verso ou do tipo de browser que o seu visitante est usando, e qual o seu computador, a sua pgina pode aparecer para ele como uma experincia agradvel que o far voltar muitas e muitas vezes; ou como um pesadelo horrvel, que ele jamais esquecer. trabalho do Web designer resolver ao mximo esses problemas de compatibilidade de forma a garantir que pelo menos a informao essencial seja acessvel (isto inclui a identidade visual e a navegao do site). essencial testar as pginas em browsers e plataformas diferentes antes de public-las.

Os browsers mais populares hoje continuam sendo o Netscape Communicator e Microsoft In-ternet Explorer. As plataformas de navegao mais populares ainda so PC e Mac. Mas o que usado por todo o mundo pode no ser o mais importante no seu caso: se seu pblico-alvo for-mado em grande parte por usurios de mquinas Sun essencial testar suas pginas nessas plataformas tambm.

H ainda uma outra questo. Mesmo que voc saiba que 99% do seu pblico usa brow-sers Netscape ou Microsoft, importante saber as verses que eles usam. A grande maioria dos usurios no possui as ltimas verses dos seus browsers (os provedores continuam distribuindo verses antigas). H muitos recursos novos nas novas verses do Communicator e do Internet Explorer que no so suportados nas verses anteriores. Se voc us-los sem prestar ateno ao efeito que causam em verses antigas, uma grande parte do pblico que visitar suas pginas podero nunca mais voltar.

2.3. Por que aprender HTML? Se possvel fazer todo um site, com scripts interativos, imagens, animaes, Java, etc.

sem escrever uma linha sequer de HTML, por que perder tempo aprendendo cdigos que no vo servir para nada? No seria programar em HTML um desperdcio de tempo e criatividade que um Web designer poderia economizar usando ferramentas que escondessem o cdigo, dando maior nfase ao aspecto visual?

21


22

As respostas s perguntas do pargrafo anterior dependem do que voc pretende fazer e do controle que voc pretende ter sobre a sua obra. Se o seu objetivo fazer pginas prticas e rpidas, como uma home page pessoal ou para um sistema Intranet simples, pode realizar todo o trabalho sem sequer tomar conhecimento do HTML, usando as ferramentas que existem por a. Mas se voc deseja fazer coisas mais sofisticadas, como ter mais controle sobre o design da sua pgina, criar pginas que interajam com outros programas (como servidores de bancos de dados) e usar recursos novos como Dynamic HTML, JavaScript, canais e folhas de estilo, voc provavelmente no vai escapar de ter que editar sua pgina pelo menos uma ou duas vezes. Talvez para fazer alguns ajustes, talvez simplesmente para localizar o ponto do cdigo onde ser inserida uma rotina JavaScript que algum programador escreveu. Saber HTML significa mais poder sobre a sua obra.

Mas no se preocupe em vo. A notcia boa que HTML fcil. No linguagem de programao, no tem coisas como recurso, ponteiros ou nada do tipo. Web designers podem e devem aprender HTML. somente marcao de texto. uma linguagem trivial para aqueles que usam computadores desde o tempo do MS-DOS e WordStar programas bem mais com-plexos que o HTML.

Criao de Web Sites I

Parte 2 - HTML

Contedo

3. Fundamentos do HTML...................................................................................... 26 3.1. Elementos e descritores (tags)...................................................................................27 3.2. Atributos.......................................................................................................................29 3.3. Caracteres de escape ...................................................................................................29 3.4. Comentrios.................................................................................................................31 3.5. Estrutura do documento............................................................................................31 3.6. Elementos do HEAD.................................................................................................32

TITLE..................................................................................................................................32 META..................................................................................................................................32 LINK ...................................................................................................................................33 BASE ...................................................................................................................................33

3.7. Elementos de BODY .................................................................................................33 4. Pargrafos e blocos ................................................................................................ 35

4.1. Pargrafos ...........................................................................................................35 4.2. Cabealhos a .......................................................................................36 4.3. Quebras de linha .............................................................................................37 4.4. Linhas horizontais .........................................................................................37 4.5. Citao de bloco ...................................................................37 4.6. Texto pr-formatado ...................................................................................38 4.7. Bloco genrico de seo ..............................................................................39 4.8. Bloco de endereo ...........................................................................39

5. Listas ................................................................................................................... 40 5.1. Listas no-ordenadas , .........................................................................40 5.2. Listas ordenadas , ................................................................................41 5.3. Listas de definies , , ..........................................................41

6. Imagens................................................................................................................. 43 6.1. O objeto .......................................................................................................43

URIs relativas......................................................................................................................43 6.2. Alinhamento de imagens............................................................................................44 6.3. Dimensionamento.......................................................................................................44

7. Formatao de texto (inline elements) ................................................................... 46 8. ncoras e Vnculos .............................................................................................. 48 9. Tabelas ................................................................................................................. 49

9.1. Principais elementos estruturais , , ou ...........49 9.2. Tabela sem bordas ......................................................................................................50 9.3. Bordas ...........................................................................................................................51 9.4. Espaamento................................................................................................................51

24

Parte 2 - HTML

9.5. Largura da tabela .........................................................................................................52 9.6. Altura, posicionamento e cores.................................................................................53 9.7. Alinhamento de clulas ..............................................................................................54 9.8. Combinao de clulas ...............................................................................................55 9.9. Otimizao , , , ..................55 9.10. Legenda .............................................................................................56

10.Elementos deprecados............................................................................................ 57 10.1. Blocos que alteram estilo (deprecados)....................................................................57 10.2. Bloco centrado ...................................................................................57 10.3. Bloco sem quebras de linha e ...............................................58 10.4. Elementos de estilo (deprecados no HTML 4.0) ...................................................58 10.5. Atributos de uma pgina .......................................................59 10.6. Cores e fontes ..........................................................................................59 10.7. Concluso.....................................................................................................................60

11.Testes ................................................................................................................... 61

25

Parte 2 - HTML

3. Fundamentos do HTML

O arquivo usado para construir uma pgina Web texto simples. Mesmo que a pgina visuali-zada no browser mostre imagens, applets Java, plug-ins (como Flash) e outros recursos, por trs de tudo existe uma pgina de texto e vrios outros arquivos separados, que foram monta-dos em uma pgina pelo browser. O cdigo texto, mas no s texto. texto marcado com HTML. HTML define toda a estrutura de uma pgina para que um browser possa format-la e produzir a apresentao desejada. HTML tambm importa as imagens, programas, sons e vdeos que uma pgina exibe em seu interior. Mas como HTML texto simples, pode ser editada em qualquer editor de texto (como o Bloco de Notas do Windows).

Ao ler um documento HTML, um browser tenta interpretar todas as seqncias de ca-racteres que ficam entre os smbolos "". O browser entende que qualquer coisa que esti-ver entre esses caracteres um descritor HTML (tag) e no deve ser mostrado na tela. Se o des-critor for desconhecido ele simplesmente o ignora (e no mostra o contedo na tela) mas se realmente for um elemento HTML (definido na especificao suportada pelo browser), ele usar as informaes contidas entre os smbolos estruturar a pgina, formatando-a de acordo com alguma regra de estilo previamente definida.

Toda a formatao de um arquivo HTML feita exclusivamente atravs dos descritores. O browser sabe que o arquivo contm cdigo HTML atravs de sua extenso (ou tipo MIME enviado pelo servidor). Se um arquivo de texto com extenso HTML mas sem descritores for carregado, no browser, toda a sua informao aparecer em um nico pargrafo, sem desta-ques, sem formatao alguma. Veja as figuras abaixo. Elas ilustram um mesmo texto de um documento HTML digitado no Bloco de Notas do Windows e lidos atravs do Internet Explorer. Na primeira figura, no h descritores HTML e, apesar dos espaos, tabulaes e novas-linhas existente no arquivo de texto visualizado no editor de textos, o browser ignora toda a formata-o. J na segunda figura descritores HTML foram includos e o browser foi capaz de formatar a pgina de uma maneira estruturada.

26

Parte 2 - HTML

Arquivo de texto (com extenso .html) sem marca-o HTML ao ser visualizado no browser e no editor Bloco de Notas (Windows).

Arquivo de texto (com extenso .html) contendo

3.1. Elementos e descritores (tags) A maioria dos elementos HTML possui um descritor inicial e um descri o

texto que marcado por eles. A sintaxe bsica

Texto marcado por Elemento O texto marcado passa a ter uma funo, determinada pelo Elemen to

significa que o texto marcado ter sua aparncia alterada quando a pgin no browser. H browsers orientados a caractere que no so capazes de exib nte, por exemplo. Outros podem no ter uma forma associada a um element utor tor final, cercando

to. Nem sempre isa HTML aparecerir tamanhos de fo

o. Neste caso, o amarcao HTML ao ser visualizado no browser e no editor Bloco de Notas (Windows).27

Parte 2 - HTML

da pgina poder definir a forma atravs de uma folha de estilos usando CSS, caso o browser a suporte. Os elementos tambm podem influenciar o comportamento de mecanismos de busca, que atribuem maior importncia ou filtram dados de acordo com a sua funo determinada pelos elementos HTML. O texto marcado e o elemento HTML tambm assumem o papel de objeto abstrato utilizvel por linguagens embutidas na pgina como CSS e JavaScript. Essas lin-guagens interagem com o HTML atravs de um modelo de objetos que relaciona as estruturas HTML com comportamentos interativos (em JavaScript e DHTML) e forma grfica (CSS).

Veja alguns exemplos de texto rotulado com descritores HTML:

Texto em negrito Subttulo Observe que o descritor final praticamente idntico ao descritor inicial. A nica dife-

rena que este ltimo precedido por uma barra ("/"). No faz diferena utilizar letras mai-sculas ou minsculas para os descritores HTML.

Os blocos de texto marcados pelo HTML podem conter outros blocos. Sempre que isto ocorrer, o bloco mais interno dever ser fechado antes do descritor de fechamento do bloco externo. Veja um exemplo:

Texto muito importante para todos Este outro exemplo est incorreto pois o bloco fecha sem que o bloco tenha

fechado.

Texto muito importante para todos Nem todo elemento HTML pode conter outros descritores e mesmo os que podem tm

regras que definem quais os elementos permitidos. Existem elementos que no precisam ter descritores de fechamento. O pargrafo, por

exemplo, marcado por e pode omitir o descritor final. Isto permitido porque no pode haver um pargrafo dentro de outro, portanto, se o browser encontra um pouco depois de outro ele automaticamente coloca um antes.

Primeiro pargrafo. Incio de outro pargrafo. Finalmente, h tambm elementos que no podem conter texto ou quaisquer descritores

HTML. Eles precisam ser vazios. O descritor final nesses casos sequer permitido (a no ser que aparea logo aps o descritor inicial).

Esta uma fraseque ocupa duas linhas. No exemplo acima (quebra de linha) marca a posio onde a linha deve ser que-

brada (no contm ou marca texto algum).

28

Parte 2 - HTML

3.2. Atributos Alguns elementos HTML podem ter um ou mais atributos, opcionais ou no, que modifi-

cam alguma propriedade do texto marcado ou acrescentam alguma informao necessria. Geralmente os atributos so pares do tipo:

propriedade="valor" Quando presentes, os atributos aparecem apenas no descritor inicial separados por espa-

os, logo aps o nome do elemento:

Ttulo centralizado Um descritor pode ter vrios atributos. A ordem em que aparecem no faz diferena desde

que apaream no descritor inicial e estejam separados dos outros atributos e do nome do elemen-to por espaos. Se um atributo for escrito incorretamente ou se o browser no o reconhecer, ele ser ignorado. Diversos atributos so comuns a todos os elementos HTML. Outros s fazem sentido em certos elementos.

O valor do atributo no precisa estar entre aspas se contiver apenas letras (A-Z, a-z), nmeros, ponto (.), dois pontos (:), hfen (-) e sublinhado (_). Se o valor atribudo proprie-dade tiver espaos, preciso coloc-lo entre aspas ou apstrofes. No pode haver espao entre a propriedade e o = nem entre o = e o valor:

propriedade="Valor com espaos" propriedade = "Sintaxe incorreta"

O segundo exemplo acima ser interpretado incorretamente pelo browser como tendo trs atributos e no um (no pode haver espaos!).

Atributos geralmente so opcionais. Em alguns casos so obrigatrios, como os atribu-tos HREF e SRC em vnculos de hipertexto e imagens, respectivamente. Ambos informam uma URI onde se encontra um recurso na Web.

Clique aqui

3.3. Caracteres de escape Os caracteres "", por definirem o incio e final dos descritores, no podem ser

impressos na tela do browser. Quando necessrio produzi-los, deve-se utilizar uma seqncia de escape. Esta seqncia iniciada por um "&" seguido de uma abreviao e um ponto-e-vrgula, que indica o final da seqncia. Como o "&" tambm caractere especial, h tambm

29

Parte 2 - HTML

uma seqncia para produzi-lo. As principais seqncias de escape, necessrias para produzir "", "&" e aspas (quando necessrio) so:

Caractere Seqncia de Escape < < > > & & " "

Por exemplo, para produzir as seguintes linhas no browser:

144 < 25 + x < 36 + y Fulano, Sicrano & Cia.

preciso digitar no editor de textos (cdigo HTML):

144 < 25 + x < 36 + y Fulano, Sicrano & Cia. As seqncias de escape tambm so usadas para produzir caracteres que no so encon-

trados no teclado, como letras acentuadas, smbolos de copyright, etc. Por exemplo, para produ-zir, no browser, as palavras:

Plantao magebend hndbfger enciclopdia sueo

pode-se usar, no editor de textos:

Plantao magebend hndbger encilopdia sueo

possvel usar tambm cdigos numricos, porm eles so dependentes do alfabeto uti-lizado. Consulte a documentao HTML para uma lista completa de todos os cdigos.

Os editores mais sofisticados, como por exemplo o HomeSite, facilitam a entrada de ca-racteres especiais e geram automaticamente as seqncias de escape. Se voc est usando um editor comum, como o Bloco de Notas, deve ter o cuidado de digitar corretamente as seqncias. Alguns browsers simplesmente ignoram seqncias que no conhecem, outros engolem linhas e palavras. Em qualquer um dos casos h perda de informao. Nunca necessrio digitar se-qncias de escape se:

voc tem os caracteres no seu teclado

30

Parte 2 - HTML

eles fazem parte do conjunto de caracteres ISO-Latin-1 (alfabeto default do HTML) alfabeto default da pgina no foi alterado atravs de um descritor ou de

um cabealho HTTP. Todos os browsers h mais de 4 anos entendem acentos e cedilha sem que seja necess-

rio digitar os cdigos. indiferente usar letras maisculas ou minsculas para o nome do descritor ou seus a-

tributos. Tanto faz usar , , ou ; ou . Deve-se tomar cuidado, porm, com o contedo dos atributos (o valor que s vezes precisam vir entre aspas). Em alguns casos, principalmente quando se lida com URIs ou quando se usa JavaScript, o formato maisculo ou minsculo faz diferena e deve ser res-peitado.

3.4. Comentrios Elementos desconhecidos pelo HTML so ignorados quando colocados entre sinais de

< e >. Se voc deseja fazer isto intencionalmente para acrescentar comentrios no cdigo (que no aparecero na pgina), deve usar os comentrios HTML, identificados entre . Qualquer texto ou cdigo entre esses smbolos ser ignorado na formatao da pgina pelo browser.

3.5. Estrutura do documento A maioria dos elementos HTML segue uma estrutura hierrquica. H uma estrutura b-

sica (mnima) para uma pgina HTML, construda de acordo com a especificao padro, que deve ser respeitada para garantir uma compatibilidade com o maior nmero de browsers pos-svel. Esta estrutura est mostrada na figura abaixo:

Descrio do documento

Aqui ficam blocos de controle, folha de estilo, funes de scripts, informaes de indexao, atributos que afetam todo o documento, etc.

Toda a informao visvel da pgina vem aqui. A primeira linha:

um descritor SGML que informa ao browser que ele deve interpretar o documento de acordo com a definio do HTML verso 4.0, se possvel. HTML uma linguagem derivada e comple-

31

Parte 2 - HTML

tamente especificada a partir da linguagem SGML Standard Generalized Markup Language. Voc no precisa saber SGML para usar HTML, basta recortar e colar a linha acima que serve para orientar o browser e permitir a validao do cdigo de sua pgina.

O elemento ... marca o incio e o final do documento HTML. Deve conter duas sub-estruturas distintas: o cabealho, delimitado por e , e o corpo do documento, entre os descritores e .

3.6. Elementos do HEAD O bloco do cabealho, marcado por e pode conter informaes

sobre o contedo do documento utilizada para fins de indexao e organizao. No contm informao que ser exibida na pgina.

TITLE o nico elemento obrigatrio do bloco do cabealho. Deve conter o ttulo

do documento que aparece fora da pgina, na barra de ttulo do browser. o que aparece tambm nos hotlists e bookmarks. O ttulo deve conter informaes que descrevam o documen-to.

HTML e CSS: Introduo

META usado para incluir meta-informao como palavras-chave, descries, etc.

que podem ser usadas por mecanismos de busca, softwares de pesquisa e catalogao. A in-formao adicional deve vir nos atributos NAME (descreve o tipo de meta-informao, por exemplo Keywords) e CONTENT (descreve o contedo da meta-informao, por exemplo, uma lista de palavras-chave separadas por vrgula). tambm pode ser usado para adicio-nar ou redefinir cabealhos HTTP. Isto feito atravs do atributo HTTP-EQUIV. Neste caso, o CONTENT deve conter o contedo do cabealho.

32

Parte 2 - HTML

LINK usado para vincular uma pgina a outro recurso. Na maioria dos casos, o

vnculo simblico e no tem outra finalidade a no ser facilitar a indexao e organizao do site por ferramentas de validao e busca. Vnculos a folhas de estilo incorporam o arquivo que interpretado pelo browser antes de formatar a pgina..

BASE altera os vnculos de origem e destino da janela, ou seja, a parte absoluta da

URL das imagens e vnculos, especificados com URLs relativas, e a janela onde o resultado dos vnculos ser mostrada. Normalmente a URL base de origem o local onde a pgina se encon-tra no momento em que carrega a imagem ou o usurio clica no vnculo (protocolo atual, m-quina atual e diretrio atual ou "./"). Com , o autor pode alterar a URL base para que as imagens e links sejam buscados em outros lugares. Normalmente a janela atual (_self) a responsvel por receber o resultado dos vnculos. O autor tambm pode, com , fazer com que links abram em outra janela, em novas janelas (_blank) ou em outras partes de estru-tura de frames (_top e _parent).

3.7. Elementos de BODY O bloco marcado por e contm a parte do documento onde ser

colocada a informao que efetivamente ser mostrada e formatada na tela pelo browser. To-dos os elementos que sero apresentados daqui em diante tratam da formatao do texto (ou imagens) da pgina e devem, portanto, estar presentes no bloco . Elementos HTML podem ser de vrios tipos e tm regras especficas sobre o que podem conter e onde podem ser usados. Quanto estrutura que assumem na pgina, podem ser classificados da seguinte forma:

Elementos de bloco (contm texto ou agrupam outros elementos de bloco)

Elementos inline (em linha usados dentro do texto) Elementos de lista (usados para construir listas) Elementos de tabela (usados para construir tabelas) Elementos de formulrio (usados para construir formulrios) Elementos para embutir objetos (usados para incluir imagens, applets, vdeos, etc.)

33

Parte 2 - HTML

Entre os elementos inline esto os vnculos (links) de hipertexto, que permitem marcar texto que servir de ligao a outra pgina ou recurso na Internet.

O objetivo das sees seguintes ser apresentar uma introduo bsica aos principais e-lementos HTML. No uma introduo exaustiva. Consulte as referncias e documentao oficial para uma abordagem completa de cada elemento HTML.

34

Parte 2 - HTML

4. Pargrafos e blocos

Blocos so elementos que podem ocorrer dentro de . No permitido existir texto diretamente abaixo de . O texto dever estar dentro de um bloco, tabela, lis

[HELDER DA ROCHA] Criação de Web Sites I

Documents

Transcript of [HELDER DA ROCHA] Criação de Web Sites I