(1572) Linguagens Programacao I

Universidade do Sul de Santa Catarina
Linguagens de Programao I
Disciplina na modalidade a distncia
2 edio revista e atualizada
Palhoa UnisulVirtual 2009
Apresentao
Este livro didtico corresponde disciplina Linguagens de Programao I. O material foi elaborado visando a uma aprendizagem autnoma e aborda contedos especialmente selecionados e relacionados sua rea de formao. Ao adotar uma linguagem didtica e dialgica, objetivamos facilitar seu estudo a distncia, proporcionando condies favorveis s mltiplas interaes e a um aprendizado contextualizado e eficaz. Lembre-se que sua caminhada, nesta disciplina, ser acompanhada e monitorada constantemente pelo Sistema Tutorial da UnisulVirtual, por isso a distncia fica caracterizada somente na modalidade de ensino que voc optou para sua formao, pois na relao de aprendizagem professores e instituio estaro sempre conectados com voc. Ento, sempre que sentir necessidade entre em contato; voc tem disposio diversas ferramentas e canais de acesso tais como: telefone, e-mail e o Espao Unisul Virtual de Aprendizagem, que o canal mais recomendado, pois tudo o que for enviado e recebido fica registrado para seu maior controle e comodidade. Nossa equipe tcnica e pedaggica ter o maior prazer em lhe atender, pois sua aprendizagem o nosso principal objetivo. Bom estudo e sucesso! Equipe UnisulVirtual.
Patrcia Gerent Petry
Livro didtico Reviso e atualizao Alexandre Henrique Paes Design instrucional Leandro Kingeski Pacheco 2 edio revista e atualizada
Palhoa UnisulVirtual 2009
Copyright UnisulVirtual 2009 Nenhuma parte desta publicao pode ser reproduzida por qualquer meio sem a prvia autorizao desta instituio.
Edio Livro Didtico

Professor Conteudista Patricia Gerent Petry Reviso e Atualizao Alexandre Henrique Paes (2 edio revista e atualizada) Design Instrucional Leandro K. Pacheco Assistente Acadmico Ngila Cristina Hinckel (2 edio revista e atualizada) Projeto Grfico e Capa Equipe UnisulVirtual Diagramao Rafael Pessi Fernando Roberto Dias Zimmermann (2 edio revista e atualizada) Reviso B2B 005.133 P59 Petry, Patrcia Gerent Linguagens de programao I : livro didtico / Patrcia Gerent Petry ; reviso e atualizao Alexandre Henrique Paes ; design instrucional Leandro Kingeski Pacheco, [assistente acadmico Ngila Cristina Hinckel]. 2. ed. rev. e atual. Palhoa : UnisulVirtual, 2009. 322 p. : il. ; 28 cm. Inclui bibliografia. 1. Linguagem de programao (Computadores). 2. HTML (Linguagem de programao de computador) I. Paes, Alexandre Henrique. II. Pacheco, Leandro Kingeski. III. Hinckel, Nagila Cristina. IV. Ttulo.
Ficha catalogrfica elaborada pela Biblioteca Universitria da Unisul
Sumrio
Apresentao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 Palavras da professora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 UNIDADE 1 Conceitos bsicos pertinentes linguagem de programao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 UNIDADE UNIDADE UNIDADE UNIDADE UNIDADE UNIDADE UNIDADE UNIDADE UNIDADE UNIDADE 2 3 4 5 Introduo HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Listas e Vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Mais formatao em HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Uso de Imagens, Painis de Fundos e Arquivos de Msica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 6 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 7 Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 8 Desenvolvendo pginas eficientes . . . . . . . . . . . . . . . . . . . . . . . . . . 219 9 Folhas de Estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243 10 Criao de Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 11 Elementos e atributos HTML obsoletos . . . . . . . . . . . . . . . . . . . . 307
Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313 Referncias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315 Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317 Respostas e comentrios das atividades de auto-avaliao . . . . . . . . . . . . . . . . 319
Palavras da professora
Caro Aluno! Voc j deve ter passado boa parte de seu tempo explorando a web e provvel que j esteja familiarizado com a maior parte do contedo deste livro. Com ele, vamos aprender a escrever pginas para a web. Talvez voc at j tenha realizado isso em alguma oportunidade. Muito dos contedos provavelmente sero cansativos para voc. Mas no deixe de ler e participar, contribuindo assim para o bom andamento da Disciplina. Neste livro voc encontrar tudo que precisa para criar uma pgina esttica na web. Digo esttica porque, aqui, ainda no aprenderemos a tornar as pginas dinmicas, como existem em muitos sites j visitados por vocs (por exemplo, realizar um cadastro em um banco de dados, via web). Iremos aprender como criar uma pgina HTML, disponibiliz-la na web, criar vnculos, incluir imagens etc. Este livro trata de detalhes tcnicos bsicos para a criao de um site na web. Voc aprender porque deve produzir um efeito em particular em uma pgina, quando deve us-lo e como. Neste livro, voc tambm encontrar dicas, sugestes e muitos exemplos de como estruturar sua apresentao e no simplesmente o texto em cada pgina. Ou seja, o livro dar dicas para uma boa apresentao de um site na web. Trabalhar com desenvolvimento para a web gratificante, pois sabemos que uma das caractersticas mais interessantes da internet a oportunidade que todas as pessoas tm de disseminar informaes. Portanto, disponibilizar informaes na web ser o nosso foco. Espero que voc se anime e se divirta bastante enquanto estuda. Vamos l? Bons estudos! Professora Patrcia Gerent Petry
Plano de estudo
O plano de estudo visa orient-lo/a no desenvolvimento do Projeto Integrador. Nele, voc encontrar elementos que esclarecero o contexto do mesmo e sugeriro formas de organizar o seu tempo de estudos. O processo de ensino e aprendizagem na UnisulVirtual leva em conta instrumentos que se articulam e se complementam. Assim, a construo de competncias se d sobre a articulao de metodologias e por meio das diversas formas de ao/ mediao. So elementos desse processo:

o livro didtico; o Espao UnisulVirtual de Aprendizagem - EVA; as atividades de avaliao a distncia (no sero feitas avaliaes presenciais); o Sistema Tutorial.
Ementa
Apresentao das principais linguagens de programao e ferramentas para desenvolvimento de sites. Estudo de HTML. Desenvolvimento de sites estticos. Tabelas, frames, formulrios, imagens, som, vdeo e links. Estilos de fontes e definio de contedos. Implementao de sites e seus respectivos testes, avaliao e manuteno.
Carga Horria
A carga horria total da disciplina 120 horas-aula, 8 crditos, incluindo o processo de avaliao.
Objetivos
Gerais: Esta Disciplina tem por objetivo fornecer um estudo sobre a linguagem bsica utilizada para a criao de pginas na internet: HTML (HyperText Markup Language). Sero abordados os conceitos bsicos e avanados da linguagem. Especficos:

Apresentar o funcionamento da web. Descrever os principais conceitos referentes HTML. Conhecer alguns editores de HTML. Definir o que so tags HTML. Identificar as tags e a estrutura geral de uma pgina HTML. Aprender a criar listas. Como criar vnculos em HTML. Proporcionar formataes em pargrafos e textos HTML. Trabalhar com imagens em pginas da web. Utilizar tabelas. Construir frames. Proporcionar a criao de folhas de estilos. Elaborar um layout adequado para as suas pginas em HTML. Criar formulrios. Verificar elementos e atributos HTML obsoletos.
12
Contedo programtico/objetivos
Os objetivos de cada unidade definem o conjunto de conhecimentos que voc dever deter para o desenvolvimento de habilidades e competncias necessrias sua formao. Neste sentido, veja, a seguir, as unidades que compem o livro didtico desta Disciplina, bem como os seus respectivos objetivos. Unidades de estudo: 11
Unidade 1 Conceitos bsicos pertinentes linguagem de programao HTML

Esta unidade pretende descrever o que a internet, revendo seus conceitos. Como funciona a web, definindo o que HTML e como editar documentos HTML.
Unidade 2 Introduo HTML

A unidade que iniciar a criao de pginas da web simples. Voc aprender a estruturar seu cdigo HTML. Utilizar separadores entre linhas, textos. Aprender o alinhamento de texto.
Unidade 3 Listas e Vnculos

Nesta unidade, voc saber como criar os vrios tipos de listas possveis. Aprender a incluir um comentrio em seu cdigo HTML e aprender a incluir vnculos entre o texto e as pginas da web.
Unidade 4 Mais formatao em HTML

Na unidade 4, voc aprender os diferentes estilos de caracter. Ao fim da unidade, saber como formatar texto e a utilizar as tags <blink> e <marquee>.
13
Unidade 5 Uso de Imagens, Painis de Fundos e Arquivos de Msica

Nesta unidade, voc utilizar a tag <img> e seus atributos. Far referncia de hipertexto com imagem. Criar painis de fundo com imagens. Sero abordadas sugestes para um melhor uso das imagens. Msica.
Unidade 6 Tabelas
Na unidade 6, voc criar tabelas. Elementos bsicos de tabelas. Alinhamento da tabela e das clulas. Dimenses da tabela. Cor em tabelas.
Unidade 7 Frames
Nesta unidade, voc construir frames com o elemento FRAMESET. Links com frames. Composio com frames. Os atributos de frameset. Os atributos de frame. Aplicaes de frames e cuidados no uso.
Unidade 8 Desenvolvendo pginas eficientes

Na unidade 8, voc aprender a desenvolver pginas eficientes. Uso das extenses HTML. Seu texto na web. Projeto e layout da pgina. Uso de vnculos. Outras sugestes de bons hbitos.
Unidade 9 Folhas de Estilo

Na unidade 9, voc saber o que so as famosas folhas de estilos. A sintaxe CSS. Os tipos de definio de estilos. A ordem da cascata.
Unidade 10 Criao de Formulrios

Nesta unidade, voc criar formulrios. Aprender a usar campos de entrada de texto. Selees listas de opes. Botes de rdio. Caixas de validao. Boto de envio. Exemplo completo de formulrio.
14
Unidade 11 Elementos e atributos HTML obsoletos(deprecated).

Segundo a W3C alguns elementos e atributos HTML esto em desuso. Por isso W3C recomenda, que deve-se evitar desde j o seu uso, visto que tornar-se-o obsoletos nas futuras verses do HTML. Nesta unidade veremos alguns exemplos de elementos/ atributos em desuso.
Agenda de atividades/ Cronograma
Verifique com ateno o EVA, organize-se para acessar periodicamente o espao da Disciplina. O sucesso nos seus estudos depende da priorizao do tempo para a leitura; da realizao de anlises e snteses do contedo; e da interao com os seus colegas e professor. No perca os prazos das atividades. Registre no espao a seguir as datas, com base no cronograma da disciplina disponibilizado no EVA. Use o quadro para agendar e programar as atividades relativas ao desenvolvimento da Disciplina.
15
Atividades obrigatrias
Demais atividades (registro pessoal)
16
unidade 1
Conceitos bsicos pertinentes linguagem de programao HTML

Objetivos de aprendizagem
n
Rever conceitos importantes sobre Internet. Conhecer HTML. Conhecer alguns editores de HTML existentes.
Sees de estudo
Seo 1 O que a Internet Seo 2 Como funciona a web Seo 3 Afinal o que HTML? Seo 4 Edio de documentos HTML
Para incio de conversa

Caro aluno, antes de voc iniciar seus estudos sobre linguagem de programao I, vamos relembrar alguns conceitos j estudados. Uma das caractersticas mais interessantes da Internet a oportunidade que todos os usurios tm de disseminar informaes. Tanto um vencedor do prmio Nobel quanto um estudante do primeiro ano de faculdade contam com os mesmos canais de distribuio para expressar suas idias. Com o surgimento da World Wide Web, esse meio s foi enriquecido. O contedo da rede ficou mais atraente com a possibilidade de incorporar imagens e sons. Um novo sistema de localizao de arquivos criou um ambiente em que cada informao tem um endereo nico e pode ser encontrada por qualquer usurio da rede. Isso significa que, na prtica, no existe nenhuma diferena entre as pginas de uma grande empresa na web e as pginas que voc ir produzir. Ambas podem ser acessadas com a mesma facilidade. A diferena uma s: a criatividade. Este livro tem o objetivo de fornecer as ferramentas bsicas para exercitar a criatividade na web. Ser preciso, ento, aprender um pouco de HTML (HyperText Markup Language), a linguagem utilizada para criar as pginas. Voc tambm vai encontrar uma poro de dicas, truques e exemplos.
A World Wide Web (Teia de Alcance Mundial) o nome dado rede de servidores da Internet que mantm documentos hipermdia, interligados entre si por hiperlinks e que formam uma grande teia de informaes espalhadas pelo mundo. A WWW foi a grande responsvel pela popularizao da Internet, oferecendo um mtodo mais intuitivo de pesquisar e consultar informaes na grande rede.
Seo 1 - O que a Internet

Muito provavelmente, voc j estudou a internet. Antes de iniciar os estudos, escreva aqui o que voc entende por internet?
18
Existem muitos termos que tentam definir a Internet. Superestrada da informao, preferem os polticos. Rede de redes, insistem os cientistas. O certo que cada um desses grupos prefere ver a rede segundo seus prprios interesses. Para os polticos, uma nova fronteira de construo e investimentos coletivos um desafio. J os cientistas, rigorosos em suas definies, enxergam a virtude da Internet em conectar computadores de qualquer tipo em todo o globo. As vises distintas da rede no param por a. H quem veja na Internet uma perigosa fonte de pornografia. As indstrias sonham com o dia em que podero vender diretamente aos consumidores, sem nenhum intermedirio. Empresas de comunicao esperam o meio que rena rdio, TV e televiso em um mesmo sistema de produo. Pais de estudantes no exterior matam as saudades pelo monitor e paqueras virtuais acontecem a toda hora em cada canto da rede. A Internet tudo isso ao mesmo tempo e, com certeza, muito mais. A rede o que cada pessoa quiser que ela seja. Em toda a histria da Internet foram os usurios que inventaram novos recursos e novas aplicaes. um terreno frtil para boas idias.
Unidade 1
19
Isso tudo porque a Internet uma inveno muito simples. Nada mais do que uma forma fcil e barata de fazer com que computadores distantes possam se comunicar. A partir da, a revoluo est nas mos das pessoas. Cada usurio recebe uma identificao nica, conhecida como endereo. Com esse endereo, ele pode se comunicar, enviando mensagens para outras pessoas. o que se chama de correio eletrnico. Graas aos esforos de instituies como Universidades e empresas ligadas pesquisa, dispostas a investir dinheiro e pessoal para criar e manter os pontos principais da rede - os servidores (computadores de alto desempenho) - possvel conseguir programas de graa e consultar bancos de dados pblicos. Hoje, com o sucesso da Internet, toda empresa se v na obrigao de colocar a cara na rede. Os servios se multiplicam. Os bancos oferecem todas as suas operaes pelo computador. Notcias so distribudas imediatamente. Pizzarias aceitam pedidos. Livrarias e lojas de discos vendem seus produtos. No entanto, boa parte do material da rede produzido por indivduos querendo expressar ao mundo suas preferncias. Um usurio rene tudo que tinha sobre Jornada nas Estrelas e coloca na Internet. Outro, com objetivos mais prticos, escreve um currculo e espera que seus talentos sejam descobertos. Todo mundo que um dia sentiu vontade de compartilhar suas faanhas agora pode fazer isso. O tal terreno frtil da Internet tem um nome. Chama-se World Wide Web ou apenas web.
Seo 2 - Como funciona a web

O navegador usado para exibir pginas da web e outras informaes disponveis na world wide web e navegar por elas.
A web funciona basicamente com dois tipos de programas: os clientes e os servidores. O cliente o programa utilizado pelos usurios para ver as pginas, enquanto os servidores ficam responsveis por armazenar e permitir o acesso ao contedo da rede. Neste livro, chamamos o programa cliente de navegador (browser, em ingls). O que o navegador faz requisitar um
20
arquivo para um servidor. Se a informao pedida estiver realmente armazenada naquele servidor, o pedido ser enviado de volta e mostrado na tela do navegador.
Voc tem idia de como a informao na web organizada?
A informao na web organizada na forma de pginas, que podem conter texto, imagens, sons e, mais recentemente, pequenos programas. Alm disso, as pginas da web podem ser ligadas umas com as outras, formando o que se chama de um conjunto de hipertextos. Assim, possvel, por exemplo, que um trabalho de faculdade faa referncia direta a um texto que serviu de base para o estudo. O leitor interessado na fonte de pesquisa pode saltar imediatamente para o texto original. Dessa forma, qualquer documento pode levar a um outro texto que tambm esteja disponvel na rede. A possibilidade de criar uma malha de informao em torno do planeta deu origem ao nome World Wide Web, que significa teia de alcance mundial. A web um sistema de informao em hipertexto. Os sistemas de ajuda on-line utilizam hipertextos para apresentar informaes. A figura 1.1 a seguir mostra um diagrama simples de como funciona esse tipo de sistema.
FIGURA 1.1 UM SIMPLES SISTEMA DE AJUDA ON-LINE
Unidade 1
21
Saiba mais sobre hipertexto, link ou hiperlink Hipertexto um sistema para a visualizao de informao cujos documentos contm referncias internas para outros documentos (chamadas de hiperlinks ou, simplesmente, links), e para a fcil publicao, atualizao e pesquisa de informao. O sistema de hipertexto mais conhecido atualmente a World Wide Web. O hipertexto permite que voc leia um texto e navegue por ele e por informaes visuais no-linear, com base nas informaes que deseja obter em seguida. O Link ou Hiperlink um dos principais elementos de um hipertexto, pois permite a conexo de uma pgina com informaes outra previamente definida, geralmente contendo um assunto correlato. Nas pginas WWW, os hiperlinks aparecem como palavras em destaque, normalmente sublinhadas e de cor diferente do restante do texto, e so acionados clicando-se sobre eles com o mouse.
A web grfica e fcil de ser navegada

Antes da web, o uso da internet envolvia conexes simples de textos. Voc tinha de navegar pelos vrios servios da internet utilizando interfaces de linha de comandos e ferramentas rudimentares. Embora houvesse muitas informaes realmente interessantes na internet, ela no tinha um aspecto agradvel. A web fornece recursos de imagem, som e vdeo que podem ser incorporados ao texto, e os softwares mais recentes oferecem novos recursos para multimdia e aplicativos incorporados. E o mais importante que a interface de todos esses recursos de fcil navegao basta saltar de vnculo em vnculo, de pgina em pgina, passando por sites e servidores.
22
Ateno! Se a web incorpora muito mais do que texto, por que chamada de sistema de hipertexto? No deveria ser um sistema de hipermdia? Muitos autores discutem sobre o assunto. Muitos argumentam que a web comeou com um sistema de textos e que a maior parte de seu contedo ainda , basicamente, composta de textos, com partes extras de mdias.
A web distribuda
Sabemos que as informaes ocupam muito espao, especialmente quando voc inclui imagens, sons, vdeos. Para armazenar todas as informaes que a web fornece, voc precisa de um espao enorme em disco e seria quase impossvel gerenci-las. A web consegue fornecer um volume to grande de informaes porque elas esto distribudas globalmente por milhares de sites, cada qual contribuindo com o espao necessrio s informaes que divulga.
A web dinmica
Como as informaes da web esto contidas no site que as divulgou, as pessoas que as publicaram, originalmente, podem atualiz-las de forma instantnea, a qualquer momento. Para obter informaes atualizadas basta usar o seu navegador para navegar pelas informaes e verificar o que h de novo.
Site da web um local na web que divulga algum tipo de informao. Quando voc exibe uma pgina da web, o seu navegador se conecta a esse site da web para obter essas informaes.
A web independente de plataforma

O termo independente de plataforma significa que voc pode acessar as informaes disponveis na web igualmente bem a partir de qualquer computador, sistema operacional e monitor de vdeo. Voc tem acesso web atravs de um aplicativo denominado navegador (browser), como o Netscape Navigator ou o Internet Explorer. Voc pode encontrar muitos desses navegadores para a maioria dos sistemas computacionais existentes. E, depois que tiver um navegador e uma conexo com a internet, voc ter alcanado seu objetivo. Voc estar na web.
Unidade 1
23
Ateno! A idia de que a web independente de plataforma sustentada por uns e por outros no. Com a introduo de novos recursos, tecnologias e tipos de mdia, a web est perdendo parte de sua capacidade de ser verdadeiramente independente de plataforma. medida que os autores da web optam por usar esses recursos mais recentes, eles voluntariamente limitam o pblico potencial para seus sites.
A web interativa
Interatividade a capacidade de responder ao servidor web. A web interativa por natureza. O ato de selecionar um vnculo e acessar outra pgina da web para ir a outro local na web uma forma de interatividade. Alm disso, ela permite que voc se comunique com o autor das pginas que est lendo e com outros leitores dessas pginas.
Os navegadores da web
Conforme voc estudou anteriormente, os usurios circulam por essa teia com um programa chamado navegador, que o programa que voc utiliza para exibir pginas pela world wide web. Esse programa envia pedidos de pginas pela rede e as apresenta na tela do usurio. Existem vrios navegadores da web, praticamente para todas as plataformas que voc possa imaginar, desde sistemas baseados em GUI (Mac, Windows), a sistemas de textos para conexes UNIX. Os navegadores mais conhecidos so o Netscape Navigator, o Microsoft Internet Explorer e o NCSA Mosaic. A opo de desenvolver programas para um navegador especfico conveniente quando voc sabe que o seu site da web vai ser visto por um pblico limitado. Esse tipo de desenvolvimento uma prtica comum em intranets implementadas em corporaes. Neste livro, os exemplos realizados foram utilizados com o navegador Internet Explorer 5.0.
GUI = Interface Grfica com o Usurio
24
Os servidores web
Para que uma pgina esteja permanentemente disponvel pela web, ela precisa ter um endereo fixo, alojada em um servidor. Os pedidos dos navegadores so atendidos por uma combinao de computadores e programas que formam os servidores. Esses computadores e programas armazenam as pginas e podem exercer algum tipo de controle sobre quais usurios podem acess-las. Os servidores so mquinas potentes instaladas em universidades, empresas e rgos do governo, conectados permanentemente Internet. Tambm possvel montar um servidor de web em casa, com um computador pessoal. Apesar de poderem ser instalados em, praticamente, todos os tipos de computadores, os servidores devem estar conectados 24 horas por dia na rede para que os usurios possam requisitar as pginas a qualquer momento. A melhor soluo para montar um conjunto de pginas procurar uma empresa que aluga espao em um servidor web. Existem vrios provedores de espao (hostings) gratuitos. Os provedores de acesso internet geralmente oferecem espao para os sites de seus assinantes. Sites com fins lucrativos so geralmente hospedados em provedores de espao pagos. Definida a hospedagem, basta enviar para o provedor os arquivos de seu site (via FTP ou por uma pgina de envio no prprio provedor de espao) e suas pginas j estaro disponveis para visitas.
O que uma URL

A web permitiu que cada documento na rede tenha um endereo nico, que indica o nome do arquivo, diretrio, nome do servidor e o mtodo pelo qual ele deve ser requisitado. Esse endereo foi chamado de URL (Uniform Resource Locator, numa traduo literal, localizador uniforme de recursos). Toda URL apresenta uma estrutura bsica. Acompanhe tal estrutura em funo do exemplo seguinte:
Unidade 1
25
Considere o seguinte URL: http://www.inf.unisul.br/~patricia/aprendajava.html Onde, http:// o mtodo pelo qual ocorrer a transao entre cliente e servidor. HTTP (HyperText Transfer Protocol, ou protocolo de transferncia de arquivos de hipertexto) o mtodo utilizado para transportar pginas de web pela rede. Outros mtodos comuns so: ftp:// (para transferir arquivos), news:// (grupos de discusso) e mailto:// (para enviar correio eletrnico). www.inf.unisul.br o nome do servidor onde est armazenado o arquivo. Nem sempre o nome de um servidor de web inicia por www. Existem alguns com nomes como cs. dal. ca. /~patricia/ o diretrio onde est o arquivo. s vezes uma URL indica apenas o diretrio (ou o servidor). Nesse caso, o servidor se encarrega de procurar e enviar o arquivo adequado. aprendajava.html o nome do arquivo. A extenso .html indica que se trata de uma pgina web. Uma URL pode indicar outras extenses. Quando o navegador recebe um arquivo com a extenso .txt, o arquivo tratado como um texto comum. Em outros casos, como nas extenses .zip (arquivo comprimido) e .exe (um programa), o navegador abre uma janela perguntando ao usurio o que fazer com o arquivo.
Esse endereo nico de um documento pode ser utilizado pelo usurio para localizar um arquivo com o navegador. Nesse caso, o usurio deve preencher com o endereo uma janela do navegador conhecida como Endereo. A URL ser enviada at o servidor, que tentar localizar o arquivo e envi-lo para o usurio. Caso o arquivo no esteja disponvel no servidor, o usurio receber uma mensagem de erro. As URLs tambm so colocadas dentro de pginas de WWW para fazer referncia a outras informaes disponveis na Internet. Nesse caso, determinados itens (trechos de texto ou imagens) da pgina, conhecidos como links, como j visto, podem ser utilizados pelos usurios para saltar de um lugar a outro na rede. Os links podem estabelecer ligao com qualquer tipo de arquivo. Essa ligao entre os documentos o que se chama de hipertexto.
26
Seo 3 - Afinal o que HTML?

Para voc publicar informaes acessveis a todos, voc precisa de uma linguagem entendida mundialmente, algo parecido como uma linguagem padro que todos os computadores possam entender. Como j dito, a linguagem utilizada para a World Wide Web a HTML (HyperText Markup Language ou linguagem de formatao de hipertexto). O HTML uma linguagem de marcao de texto ou dado relativamente simples e que pode ser combinado com outras linguagens de programao como: JSP, PHP, ASP, etc; podendo dar efeito dinmico aos sites. O HTML permite:
publicar documentos on-line com texto, tabelas, fotografias e muito mais; receber informaes atravs de ligaes (links) de hipertexto atravs de um clique; desenhar formulrios para transaes comerciais atravs de servios remotos, como para encontrar informao, fazer reservas, encomendar produtos, etc.; e ainda incluir som, vdeo e muitas aplicaes nos documentos.
Breve histrico do HTML

O HTML foi originalmente desenvolvido por Tim BernersLee, quando estava no CERN, e tornou-se conhecido atravs do Mosaic, um browser desenvolvido em NCSA. Durante os primrdios dos anos 90, expandiu-se com a enorme exploso do crescimento da WWW. Quando o HTML surgiu, a sua principal utilizao era para descrever a informao, sendo predominantemente usado no meio cientfico para partilhar documentos de forma universal e facilmente legvel. Pargrafos, listas, cabealhos, ttulos (os elementos principais do HTML) eram ideais para este tipo de documentao.
27
Unidade 1
Posteriormente, o HTML foi expandido em vrios caminhos. De 1990 a 1995, a linguagem HTML sofreu uma srie de extenses por parte de diversos grupos e organizaes: HTML 2.0 da IETF, HTML+, HTML 3.0. Em 1996, os esforos do grupo de trabalho do World Wide Web Consortium, levaram ao aparecimento do standard HTML 3.2. Entretanto, o problema foi que a web ficou literalmente cheia de sites feitos com essas criatividades em HTML, que o puxaram para uma finalidade que no a original. Para acomodar os mais variados pedidos, as tags de apresentao (cor, fonte e alinhamento) foram usadas e abusadas, quando o principal propsito da linguagem era estruturar a informao. Muitos, em alguma fase, aproveitaram-se das aparentes facilidades desta verso do HTML e de browsers demasiado permissivos a erros. Muitas pessoas concordavam que os documentos HTML deveriam trabalhar bem atravs de diferentes browsers e sistemas operacionais. Em 1997, surge o HTML 4.0, que uma extenso do HTML 3.2, que permite a utilizao de folhas de estilo (style sheets), mecanismos de scripts, frames, objetos incorporados, e alguns mecanismos de acessibilidade para deficientes. Em 1999, o HTML 4.01 fixa um certo nmero de erros e incongruncias encontradas na recomendao anterior. Neste momento, em 1999, existe um consenso para a necessidade de se voltar um pouco atrs, preparando ao mesmo tempo o futuro. Um exemplo a separao do contedo com a apresentao do documento, usando XHTML para o contedo e deixando a apresentao do documento a cargo de Cascading Style Sheets (CSS). Esta linguagem (XHTML) foi desenvolvida e aprovada com a recomendao do World Wide Web Consortium (W3C) em 2000, e a sucessora do HTML 4.0. O XHTML nada mais que o HTML escrito em XML (eXtensible Markup Language).
28
Saiba mais sobre o World Wide Web Consortium (W3C)

O World Wide Web Consortium um consrcio de empresas de tecnologia (atualmente cerca de 500 membros) fundado por Tim Berners Lee, em 1994, para levar a web ao seu potencial mximo, atravs do desenvolvimento de protocolos comuns e fruns abertos que promovam sua evoluo e assegurem a sua interoperabilidade. O W3C desenvolve tecnologias denominadas padres da web para a criao e a interpretao dos seus contedos. Sites desenvolvidos segundo esses padres podem ser acessados e visualizados por qualquer pessoa ou tecnologia independente de hardware ou software utilizados, como celular, PDA, eletrodomsticos etc., independentemente da plataforma, de maneira rpida e compatvel com os novos padres e tecnologias que possam surgir com a evoluo da internet. Para alcanar seus objetivos, a W3C possui diversos comits que estudam as tecnologias existentes para a apresentao de contedo na Internet e criam padres de recomendao para utilizar estas tecnologias. Com a padronizao, os programas conseguem acessar facilmente os cdigos e entender onde deve ser aplicado cada conhecimento expresso no documento. Apesar do W3C no ser muito conhecido no Brasil, padres seus como HTML, eXtensible Hypertext Markup Language (XHTML) e Cascading Style Sheets (CSS) so muito populares. Contudo, em muitos casos so usados de forma errnea devido falta de conhecimento de suas especificaes. um dever de todo desenvolvedor web respeitar e seguir os padres do W3C, pois, de outro modo, poder estar impondo barreiras tecnolgicas a diversas pessoas e, com isso, desestimulando e, at mesmo, impedindo o acesso a suas pginas. O site oficial da W3C http://www.w3c.org. Todas as atividades em desenvolvimento esto em ingls, mas voc encontrar uma grande parte das especificaes traduzida para outras lnguas.
Unidade 1
29
Em suma, hoje em dia temos um HTML mais flexvel, porttil e com um formato prtico para dar forma aos documentos de Internet, que pode ser combinado com outras linguagens como Javascript, Flash e Java tornando o documento muito mais interativo.
Seo 4 - Edio de documentos HTML

Agora que voc conheceu um pouco da histria do HTML e de suas novidades, vamos aprender como editar um documento HTML, alm de uma breve introduo linguagem HTML. Os documentos em HTML so como arquivos ASCII comuns, que podem ser editados em vi (no linux), emacs (no linux), textedit, bloco de notas, ou qualquer editor simples. Para facilitar a produo de documentos, existem editores HTML especficos:
Editores de texto fonte - facilitam a insero das etiquetas (tags, como chamaremos), orientando o uso de atributos e marcaes. Ex.: W3e, HotDog, Crimson Editor.
FIGURA 1.2 - TELA DO CRIMSON EDITOR
30
Editores WYSIWYG - oferecem ambiente de edio com um resultado final das marcaes (pois o resultado final depende do browser usado para visitar a pgina). Ex.: FrontPage, Namo Editor, Dreamweaver.
WYSIWYG o acrnimo da expresso em ingls What You See Is What You Get , que pode ser traduzido para O que voc v o que voc recebe. Trata-se de um mtodo de edio, no qual o usurio v o objeto no momento da edio na tela do computador j com a aparncia do produto final. Um exemplo clssico de editor WYSIWYG o Microsoft Word, no qual o documento mostrado na tela da mesma forma que ser impresso. O criador do primeiro editor WYSIWYG, o Bravo, foi Charles Simonyi. Na linguagem de programao para internet, um dos editores mais conhecidos atualmente o Macromedia Dreamweaver, no qual qualquer pessoa, com o mnimo de conhecimento em HTML, pode fazer muito rapidamente uma pgina ou at um site inteiro para internet.
FIGURA 1.3 - TELA DO NAMO EDITOR
Alm dos editores especficos para HTML, editores bastante utilizados, como o Word, entre outros, permitem a exportao de seus documentos prprios para o formato HTML. O documento HTML produzido normalmente ter extenso .html ou .htm.
Unidade 1
31
Existem muitos editores de HTML gratuitos, como:

Html beauty: http://www.htmlbeauty.com/ PageBreeze: http://www.pagebreeze.com/ Web writer: http://www.webwriter.dk/english/index.htm
Introduo linguagem HTML

A linguagem HTML fruto do casamento dos padres HyTime e SGML. Estes padres so especificados a seguir.
HyTime - Hypermedia/Time-based Document Structuring Language HyTime (ISO 10744:1992) o padro para representao estruturada de hipermdia e informao baseada em tempo. Um documento visto como um conjunto de eventos concorrentes dependentes de tempo (udio, vdeo etc.), conectados por webs ou hiperlinks. O padro HyTime independente dos padres de processamento de texto em geral. Ele fornece a base para a construo de sistemas hipertexto padronizados, consistindo-se de documentos que aplicam os padres de maneira particular. SGML - Standard Generalized Markup Language SGML o padro ISO 8879 de formatao de textos. No foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiperobjetos e para descrever as ligaes. O SGML no aplicado de maneira padronizada. Todos os produtos SGML tm seu prprio sistema para traduzir as etiquetas para um particular formatador de texto. DTD - Document Type Definition - define as regras de formatao para uma determinada classe de documentos. Um DTD ou uma referncia para um DTD deve estar contido em qualquer documento conforme o padro SGML.
Neste sentido, o HTML definido segundo um DTD de SGML.

32
Todo documento HTML apresenta elementos entre < e >; esses elementos so as etiquetas (doravante chamadas de tags) de HTML, que so os comandos de formatao da linguagem, que podem ser escritas em maiscula ou minscula. A maioria das tags tem sua correspondente de fechamento:
<tag>...</tag>
Isso necessrio porque as tags servem para definir a formatao de uma poro de texto e, assim, marcamos onde comea e termina o texto com a formatao especificada por ela. Alguns elementos so chamados vazios, pois no marcam uma regio de texto, apenas inserem alguma coisa no documento:
<tag>
Todos os elementos podem ter atributos:
<tag atributo1=valor1 atributo2=valor2>...</tag>

Os valores dos atributos devem estar entre aspas.
<A HREF=URL>Texto</A>
Unidade 1
33
Sntese
Caro aluno, voc finalizou a unidade 1, revisando alguns conceitos importantes, j estudados em disciplinas anteriores, como Internet, World Wide Web, clientes, servidores, hipertextos, Link ou Hiperlink, navegador, servidores, provedores de espao (hostings) e URL. Voc tambm aprendeu conceitos introdutrios de HTML, que um recurso muito simples e acessvel para a produo de documentos. No podemos deixar de frisar a importncia das tags em HTML. Por isso, segue abaixo uma tabela resumindo a morfologia das tags:
Tipo
Tag Texto Atributo
Sintaxe
<tag> <tag>texto</tag> <tag NOME_ATRIBUTO=valor>texto</tag>
Exemplo
<BR> <B>texto</B> <A HREF=url>texto</A>
Nas prximas unidades, voc estudar outros elementos do HTML, que lhe possibilitaro, com alguma imaginao, fazer um bom website. At l!
34
Atividades de auto-avaliao
1. Faa uma pesquisa sobre alguns editores gratuitos de HTML na internet. Pontue vantagens e desvantagens. Na ferramenta FRUM do EVA, vamos discutir sobre os editores HTML encontrados.
Saiba mais
Para voc aprimorar ainda mais seus conhecimentos acerca dos temas aprendidos nesta unidade, consulte a seguinte referncia: PRATES, Rubens. HTML: guia de consulta rpida. So Paulo: Editora Novatec, 1997. E os seguintes sites:
http://www.abcdohtml.hpg.ig.com.br/html_intro.htm http://minerva.ufpel.edu.br/~bira/html/web.html
(Introduo ao HTML)
(Web Design)
Unidade 1
35
unidade 2
Introduo HTML
Conhecer o que HTML e a importncia de utiliz-la. Conhecer o que so as tags HTML e como utiliz-las. Identificar as tags para a estrutura geral de uma pgina. Identificar as tags para ttulos, cabealhos e pargrafos.
Sees de estudo
Seo 1 Criao de pginas da web simples Seo 2 Estruture sua HTML Seo 3 Sepa radores Seo 4 Alinhamento de texto

Depois de apresentarmos os conceitos iniciais, voc deve estar se perguntando: quando que vamos comear a criar uma pgina web? Afinal, este um dos objetivos desta disciplina. Ento, nesta unidade, voc comea a conhecer a estrutura da HTML a linguagem em que so criadas as pginas da web.
Seo 1 - Criao de pginas da web simples

Apesar da aparente sofisticao, as pginas web no passam de documentos de texto simples. Voc pode produzi-las com qualquer editor de texto, como o bloco de notas do Windows. A diferena que as pginas web contm algumas marcas especiais para determinar o papel de cada elemento dentro do texto. Alguns elementos so marcados como ttulos, outros como pargrafos. As marcaes so usadas, tambm, para indicar os links que levam a outros documentos na rede. Essas marcas so chamadas de tags e esto especificadas dentro da linguagem utilizada para criar as pginas web, HTML. As tags de HTML apenas informam ao navegador o que so os elementos que esto na pgina. Eles dizem, por exemplo, que um determinado trecho o ttulo principal do documento e outro um item de lista. A formatao do trecho deixada para o navegador. Cada navegador mostra a pgina de uma forma um pouco diferente, o que dificulta o trabalho de programao visual na web. Para complicar ainda mais, cada usurio pode modificar a configurao padro de seu navegador para que o seu programa mostre o texto na fonte (tipo de caractere) que quiser. Em compensao, muito simples criar uma pgina bsica para colocar na internet com HTML. Nesta unidade, voc estudar um exemplo enxuto, que, aos poucos, ficar mais sofisticado.
38
Seo 2 - Estruture sua HTML

Nos exemplos a seguir voc ir verificar vrios trechos de texto marcados por cdigos colocados entre os caracteres < e >. Esses cdigos, chamados de tags, so responsveis pela marcao do texto em funo de seu papel dentro do documento. O ttulo principal de um documento, por exemplo, pode ser marcado com as tags <b> e </b> (coloca o texto em negrito), enquanto os pargrafos so separados pela tag <P>. Existem dois tipos de tags. Algumas so formadas aos pares, indicando o incio e o fim do trecho afetado, como o par <b> e </b>. Outros podem ser colocados individualmente, como o <P>, que simplesmente insere um espao para dividir pargrafos. Mais adiante, mostraremos que os tags tambm podem receber atributos.
Tags bsicas
A estrutura bsica de um documento HTML apresenta os seguintes tags: <HTML> <BODY> texto, imagem, links, ... </HTML> <HEAD> <TITLE>Titulo do Documento</TITLE> </HEAD>
</BODY>
Unidade 2
39
Observe que existem quatro pares de tags, que devem ser sempre colocados na pgina. O par de tags <HTML> e </HTML> deve englobar todo o contedo da pgina (estar presente no incio e no fim do texto) para indicar ao navegador que se trata de um documento HTML. O documento, por sua vez, est dividido em duas partes: o cabealho e o corpo do texto, cada um indicado por um par de tags diferentes. Tudo que estiver entre o par <HEAD> e </HEAD> ir compor o cabealho, no aparecendo na pgina. O elemento principal do cabealho o ttulo do documento, que deve ser colocado entre o par <TITLE> e </TITLE>. Os navegadores mostram o ttulo na barra de ttulo do programa e na rea em aparecem as pginas j visitadas. Por fim, existe o par <BODY> e </BODY>, que serve para indicar o corpo do texto, ou seja, a parte mostrada na janela do navegador. As tags HTML no so sensveis caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>, <HtMl>, ... Veja, em detalhe, cada uma destas tags estruturais.
<HTML>
A primeira tag de estrutura de toda a pgina em HTML a <html>, que indica que o contedo do arquivo encontra-se codificado na linguagem HTML. Para que o computador reconhea que voc est escrevendo um documento em HTML, todo o seu contedo dever ser delimitado pelas tags HTML de abertura e fechamento, como no exemplo:
<HTML> .... a sua pgina ... </HTML> 40
<HEAD>
A tag <HEAD> e </HEAD> delimita o cabealho do documento. Geralmente h poucas tags na parte <HEAD> da pgina. Voc nunca deve incluir no cabealho parte alguma do texto de sua pgina. Eis um exemplo tpico de uso correto da tag <HEAD>:
<HTML> <HEAD> </HTML> <TITLE> ESTE MEU TTULO </TITLE> </HEAD>
Campo <TITLE>
O elemento <TITLE>, por exemplo, define um ttulo, que mostrado no alto da janela do navegador. Todo documento web deve ter um ttulo; este ttulo referenciado em buscas pela rede, dando uma identidade ao documento. Para ver na prtica a importncia do ttulo, se voc adicionar uma pgina com ttulo aos seus Favoritos (Bookmarks), o ttulo da pgina se torna a ncora de atalho para ela. Por isso sugerido que os ttulos dos documentos sejam sugestivos, evitando-se ttulos genricos como Introduo. O ttulo tambm bastante significativo para a listagem de uma pgina nos resultados de pesquisas nos catlogos da internet. As tags <TITLE> so sempre includas no cabealho da pgina, entre as tags <HEAD> e </HEAD>, e descrevem o contedo da mesma como no exemplo anterior. Voc pode ter apenas um ttulo na pgina e o ttulo pode conter somente texto simples, ou seja, no pode haver outras tags no ttulo. Escolha um ttulo curto, mas que descreva o contedo da pgina.
Unidade 2
41
Campo <META>
Alm do ttulo, <HEAD> contm outras informaes de importncia para os robs de pesquisa, indicadas nos campos <META>. Os campos <META> tm dois atributos principais:

NAME ,
indicando um nome para a informao.
HTTP-EQUIV,
que faz uma correspondncia com campos de cabealho do protocolo HTTP; a informao deste campo pode ser lida pelos navegadores e provocar algumas aes.
Ateno! Os atributos so partes extras das tags da HTML que contm opes ou outras informaes sobre a tag em si.
A Sintaxe refere-se s regras para a construo de um comando ou instruo.
Acompanhe a sintaxe seguinte, como modelo de uso dos atributos <META> (NAME e HTTP-EQUIV):
<HEAD> <TITLE>Ttulo do Documento</TITLE> <META NAME=nome CONTENT=valor> <META HTTP-EQUIV=nome CONTENT=valor> </HEAD>
42
Um documento, por exemplo, pode ter as seguintes informaes:
<HEAD> <META HTTP-EQUIV=content-type CONTENT=text/html; charset=iso-8859-1> <TITLE>Ttulo da Janela</TITLE> <META NAME= Author CONTENT=Patrcia> <META NAME=Description CONTENT=Livro de Linguagem de Programao I> <META NAME=KeyWords CONTENT=HTML, WWW, Web, Internet> <LINK REL=stylesheet HREF=folhasestilos.css> </HEAD>
Alguns valores dos atributos META NAME so inseridos automaticamente por alguns editores, por exemplo: Author. Os campos Description e KeyWords ajudam a classificao da pgina em algumas ferramentas de busca. Essas informaes no tm qualquer efeito na apresentao da pgina, mas servem como uma explicao ou documentao sobre as informaes contidas nela. H poucos valores para META HTTP-EQUIV em uso. O mais comum content-type, que indica o conjunto de caracteres usados na pgina. Essa informao ajuda o navegador a exibir corretamente os caracteres especiais que estiverem presentes no texto. Um exemplo de uso comum do atributo HTTP-EQUIV promover a mudana automtica de pginas, atribuindo-lhe o valor Refresh. Veja este exemplo:
<HEAD> <TITLE> ... </TITLE> <META HTTP-EQUIV=Refresh CONTENT=segundos; URL= pagina.html> </HEAD>
Unidade 2
43
onde:
pagina.html : a pgina a ser carregada
automaticamente.
segundos : o nmero de segundos passados at que a
pgina indicada seja carregada.
Como comentado no exemplo, o efeito interessante, mas para que serve? Se no pensamos em uma finalidade til para esse efeito, camos na tentao de us-lo toa. A aplicao mais utilizada a atualizao automtica de um documento que, por exemplo, tenha uma foto produzida por uma cmara de vdeo. Voc pode forar, com o Refresh (atualizador), a atualizao dessa pgina, mostrando para o usurio sempre uma imagem mais atual de algum evento focalizado pela cmara. Outra utilizao em chats, ou em pginas que desviem a navegao atravs de documentos desenvolvidos para navegadores avanados.
Saiba mais sobre o uso de META tags! O uso de META tags no obrigatrio. At poucos anos atrs, elas eram consideradas essenciais para uma pgina ter bom posicionamento nos resultados das pesquisas em catlogos da web. Com o tempo, no entanto, os responsveis pelos catlogos viram que os autores de pginas abusavam das tags META, colocando palavras-chave em demasia para enganar os critrios de catalogao. Atualmente, nenhum dos catlogos mais conceituados considera as palavras-chave contidas em META tags.
<BODY>
o corpo do documento. Tudo que estiver contido em <BODY> ser mostrado na janela principal do seu navegador. <BODY> pode conter cabealhos, pargrafos, listas, tabelas, links para outros documentos, imagens, formulrios, animaes, vdeos, sons e scripts embutidos.
44
Estas duas tags, <BODY> </BODY>, delimitam todo o contedo do site. a que aparecero os textos, as imagens, o fundo de tela, entre outras coisas. Dentro da tag <BODY> voc conseguir especificar os seguintes atributos:
BACKGROUND (configura a imagem que voc deseja como fundo de tela) - indica o URL da imagem a ser replicada no fundo da pgina, como uma marca d`gua. Para efeitos de design, possvel fixar a imagem de fundo, para que ela no se mova junto com o texto ao se rolar a pgina. Esse efeito no padro e funciona no Internet Explorer 5.0. Exemplo: <body background=imagem.gif>
BGCOLOR (cor de fundo) - a cor de fundo da tela. Quando no indicada, o navegador ir mostrar uma cor padro, geralmente o cinza ou branco; alguns editores podero estabelecer o branco para o fundo da pgina. Exemplo: <body bgcolor=cor>
TEXT (cor do texto padro) - a cor padro de todo o texto da pgina. Cor dos textos da pgina (padro: preto). Exemplo: <body text=cor>
LINK (cor dos links) - determina a cor de todos os links da pgina. Cor dos links (padro: azul). Exemplo: <body link=cor>
VLINK (cor dos links visitados) - determina a cor de todos os links j visitados na pgina. Cor dos links, depois de visitados (padro: azul escuro ou roxo). Exemplo: <body vlink=cor>
Unidade 2
45
ALINK (cor dos links ativos) - determina a cor dos links ativos. Cor dos links, quando acionados (padro: vermelho). Exemplo: <body alink=cor>
Acompanhe a sintaxe seguinte, como modelo de uso dos atributos especficos do <BODY>:
<BODY BACKGROUND=imagem.gif BGCOLOR=cor TEXT=cor LINK=cor ALINK=cor VLINK=cor> contedo </BODY>
O exemplo seguinte determina que a cor de fundo do site seja amarela, o texto seja preto, os links ainda no visitados sejam azuis, os links j visitados sejam roxos, e os links ativos sejam verdes:
<BODY BGCOLOR=yellow TEXT=black LINK=blue VLINK=purple ALINK=green> contedo </BODY>
Os valores das cores podem ser dados tambm em hexadecimal, equivalentes a cores no padro RGB (Red, Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores j oferece uma interface bem amigvel atravs da qual escolhemos as cores desejadas, sem nos preocuparmos com nmeros esdrxulos, tais como #FF80A0.
46
Saiba mais sobre o sistema hexadecimal

O sistema hexadecimal um sistema de numerao vinculado informtica, j que os computadores interpretam as linguagens de programao em bytes, que so compostos de oito dgitos. medida que os computadores e os programas aumentam a sua capacidade de processamento, eles funcionam com mltiplos de oito, como 16 ou 32. Por este motivo, o sistema hexadecimal, de 16 dgitos, um standard na informtica. Como o nosso sistema de numerao s dispe de dez dgitos, devemos incluir seis letras para completar o sistema. Estas letras e o seu valor em decimal so: A = 10, B = 11, C = 12, D = 13, E = 14 e F = 15. A utilizao do sistema hexadecimal nos computadores, deve-se a que um dgito hexadecimal representa quatro dgitos binrios (4 bits), portanto dois dgitos hexadecimais representam oito dgitos binrios (8 bits = 1 byte) que, como sabido, a unidade bsica de armazenamento de informao.
Fonte: http://pt.wikipedia.org/wiki/Hexadecimal
Navegadores que seguem a definio de HTML 3.2 em diante, tambm aceitam 16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR=BLUE. Porm, os navegadores mais antigos no apresentam as cores indicadas.
Criando uma pgina HTML

A melhor maneira de voc aprender a escrever pginas de web fazendo. Vamos ao primeiro exemplo. Abra o bloco de notas e digite o cdigo a seguir. Por ora, no necessrio que voc entenda todas as tags que ele apresenta e o que significa. Voc aprender tudo sobre elas mais adiante. Este s um exemplo simples para voc comear.
Unidade 2
47
<HTML> <HEAD> <TITLE>Primeiro exemplo</TITLE> </HEAD> <BODY> <b>Ttulo principal</b> <p> Este o texto do primeiro exemplo.<p> Este o segundo pargrafo. <p> <b>Ttulo secundrio</b> <br> Acabei de abrir uma linha. Vamos agora adicionar uma lista.<p> <b>Uma lista</b> <UL> <LI>Item 1 <LI>Item 2 <LI>Item 3 </UL> </BODY> </HTML>
Aps criar seu arquivo HTML, grave-o em alguma pasta com seus trabalhos. Lembre-se de gravar estes arquivos, escolhendo a opo Salvar Como. Existem duas regras que voc dever seguir ao escolher um nome para o arquivo:
o nome do arquivo dever ter uma extenso .html (ou .htm). Por exemplo, meuarquivo.html ou principal.htm. A maioria dos softwares exigir que os seus arquivos tenham essa extenso. Por isso, crie desde j o hbito de utiliz-la; use nome simples e curtos. No inclua espaos ou caracteres especiais (marcadores, letras acentuadas etc.). Use apenas letras e nmeros.
48
Visualizando o exemplo no navegador

Agora que voc tem um arquivo em HTML, inicialize o seu navegador da web. Voc no precisa estar conectado com a rede, uma vez que no vai abrir pginas armazenadas em outros sites. No seu navegador, procure um comando no menu ou boto para abrir um arquivo. Esse comando permitir que voc navegue pelo seu disco local, solicitando ao navegador que leia um arquivo em HTML do seu disco, analise-o e apresente-o, como se fosse uma pgina j existente na web. Ao usar o seu navegador, voc pode criar e testar os seus arquivos HTML no seu computador. Se o que for apresentado na tela no se parecer com o que est ilustrado na figura 2.1, a seguir, ento volte ao bloco de notas, abra o seu arquivo criado e compare-o com exemplo apresentado acima. Verifique se todas as tags tm tags de fechamento e se todas as tags esto descritas corretamente. Assim, basta corrigir o arquivo e grav-lo novamente com o mesmo nome. Para isso voc no precisa sair do navegador.
FIGURA 2.1 VISUALIZANDO O PRIMEIRO EXEMPLO NO NAVEGADOR
Unidade 2
49
Em seguida, retorne ao navegador. Deve haver um item no menu ou boto denominado Atualizar (recarregar). O navegador ler a nova verso do seu arquivo e, ento, voc poder editar e visualizar o documento sucessivamente at que tudo esteja correto. Mas no esquea tambm de verificar a extenso de seu arquivo, caso o seu navegador apresente o texto HTML real. A extenso importante. Vamos exercitar? Que tal agora voc usar o mesmo exemplo anteriormente criado e atribuir tag <BODY> alguns atributos, como por exemplo a cor de fundo e a cor do texto? Vamos tentar?
Portanto, para escrever documentos HTML no necessrio mais do que um editor de texto simples e conhecimentos dos cdigos que compem a linguagem. Os cdigos, conhecidos como tags, servem para indicar a funo de cada elemento da pgina na rede.
Quando uma pgina em HTML analisada por um navegador, toda a formatao feita manualmente espaos, tabulaes, quebras de pargrafos etc. ignorada. O nico elemento capaz de formatar uma pgina em HTML so as tags de HTML. Se voc passar horas editando cuidadosamente um arquivo de texto simples para ter pargrafos e colunas de nmeros bem formatados, mas se esquecer de incluir as tags, quando for ler a pgina em um navegador HTML, todo o texto fluir em um nico pargrafo. E todo o seu trabalho ter sido em vo. A vantagem de todos os espaos em branco serem ignorados est no fato de voc poder incluir as suas tags onde desejar.
50
Ateno! H uma nica exceo a essa regra: uma tag denominada <PRE>. Voc aprender sobre ela mais adiante.
Cabealho
Os cabealhos so usados para dividir sees do texto. A HTML define 6 nveis de cabealho. As tags de cabealho tm o seguinte formato:
<H1> texto do cabealho de nvel 1 </H1>
Os nmeros indicam os nveis de cabealho (de H1 a H6). Quando apresentados na tela, eles aparecem em letras maiores, em negrito, centralizados, sublinhados ou em letras maisculas, de alguma forma que os destaque do restante do texto. O <H1> deixa a letra maior que o <H2> e assim por diante. Veja o seguinte exemplo:
<H1>Este um cabealho de nvel 1</H1> <H2>Este um cabealho de nvel 2</H2> <H3>Este um cabealho de nvel 3</H3> <H4>Este um cabealho de nvel 4</H4> <H5>Este um cabealho de nvel 5</H5> <H6>Este um cabealho de nvel 6</H6>
Unidade 2
51
Esses cabealhos so mostrados da seguinte forma:
FIGURA 2.2 VISUALIZANDO EXEMPLO DE CABEALHO
Aninhamento de cabealhos
Aninhamento colocar documentos dentro de outro documento. Em HTML, aninhar colocar tags uma dentro das outras.
Os cabealhos no podem ser aninhados, isto , a formatao pode produzir algum resultado prximo ao desejado como no exemplo abaixo. Vamos testar?
<H2>Este <H1>um cabealho de nvel 1</H1> dentro de um cabealho de nvel 2</H2>
FIGURA 2.3 VISUALIZANDO EXEMPLO DE NO ANINHAMENTO DE TAG
52
Mas o mais comum que os navegadores entendam a formatao anterior como:
<H2>Este </H2> <H1>um cabealho de nvel 1</H1> dentro de um cabealho de nvel 2</H2>
Ou seja, os navegadores interpretam a formatao anterior como se estivesse faltando uma etiqueta de fechamento de <H2> antes de <H1> e faltando uma abertura de <H2> depois do fechamento de <H1>, oferecendo o seguinte resultado:
FIGURA 2.4 VISUALIZANDO EXEMPLO DE ANINHAMENTO DE TAG
Os editores WYSIWYG naturalmente no permitem o aninhamento de cabealhos.
Alinhamento dos cabealhos

Os cabealhos tm atributos de alinhamento:
<H2 ALIGN=CENTER>Cabealho centralizado</H2> <H3 ALIGN=RIGHT>Cabealho alinhado direita</H3> <H4 ALIGN=LEFT>Cabealho alinhado esquerda (default)</H4>
Verifique o resultado no seu navegador.

Unidade 2
53
Seo 3 - Separadores
Como voc viu no primeiro exemplo, as quebras de linha do texto fonte no so significativas na apresentao de documentos em HTML. Para organizar os textos, voc precisa, ento, de separadores tal como os apresentados aqui.
Quebra de linha
Quando queremos mudar de linha, usamos o elemento <BR>. Isso s necessrio quando queremos uma quebra de linha em determinado ponto, pois os navegadores j quebram as linhas automaticamente para apresentar os textos. Quando um navegador da web encontra uma tag <BR>, ele reinicia o texto na margem esquerda da linha seguinte a essa tag. Voc pode usar a tag <BR> dentro de outros elementos, como por exemplo, pargrafos ou itens de uma lista. Essa tag no possui espao extra acima ou abaixo da nova linha, nem altera a fonte ou o estilo atual. Ela apenas reinicia o texto na linha seguinte. Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Este elemento tem um atributo especial (CLEAR), que utilizado com imagens que tm texto ao redor, conforme ser apresentado na unidade 5.
Pargrafos
Os pargrafos so digitados normalmente. A tag <P> serve para indicar o incio de um novo pargrafo. As tags <P> e </P> delimitam um pargrafo no texto. possvel, neste caso, no fechar a tag <P>, ou seja, omitir o </P>, sem prejudicar, o resultado final. Ao contrrio da quebra de linha, com o uso do <P> deixada uma linha em branco antes do prximo pargrafo. Quebra de linha no deixa uma linha em branco.
54
O atributo que deve ser utilizado com a tag <P> o ALIGN, podendo ter os seguintes valores que delimitam o alinhamento do pargrafo:
LEFT - se voc quiser que o texto fique alinhado esquerda. Exemplo: <P ALIGN=left>
RIGHT - se voc quiser que o texto fique alinhado direita. Exemplo: <P ALIGN =right>
CENTER - se voc quiser que o texto fique alinhado ao centro. Exemplo: <P ALIGN =center>
Neste ltimo caso, a tag <P> ganhou uma opo (ALIGN=CENTER). Por isso, preciso utilizar uma tag de fechamento (</P>) para indicar que apenas aquele pargrafo receber um alinhamento diferente. Observe o exemplo 1, que aborda como inserir uma linha em branco entre pargrafos:
Pargrafo 1;<P>Pargrafo 2.
Unidade 2
55
Verifique se o resultado no seu navegador ficou prximo deste:
FIGURA 2.5 EXEMPLO DE USO DE PARGRAFO
Acompanhe o exemplo 2, que combina a insero de linha entre pargrafos e quebras de linha:
Pargrafo 1;<br> linha 1 do pargrafo 1, <br> linha 2 do pargrafo 1.<P>Pargrafo 2;<br> linha 1 do pargrafo 2, <br> linha 2 do pargrafo 2.
O resultado da marcao acima no navegador :
FIGURA 2.6 EXEMPLO DE PARGRAFO E QUEBRA DE LINHA
56
Veja o exemplo 3 sobre o alinhamento de pargrafos, alm de insero de linhas entre pargrafos e quebra de linha:
<P ALIGN=CENTER>Assim como os trens, as boas idias s vezes chegam com atraso. <BR>(Giovani Guareschi)</P> <P ALIGN=RIGHT>Como diz o provrbio chins: melhor passar por ignorante uma vez do que permanecer ignorante para sempre.</P> <P ALIGN=LEFT>Este o alinhamento padro (default), e por isso no vou colocar nenhuma frase especial.</P>
Verifique o seguinte resultado no navegador:
FIGURA 2.7 EXEMPLO DE ALINHAMENTO DE PARGRAFO
Linha horizontal
A tag <HR> utilizado para colocar linhas horizontais em uma pgina. Essa linha tem diversos atributos, oferecendo resultados diversos. As linhas (ou fios) so excelentes para separar visualmente sees da pgina da web antes dos cabealhos ou para separar o texto de uma lista de itens. Voc pode determinar a altura, a largura e o alinhamento da linha.
Unidade 2
57
Observe o exemplo 1:
<HR SIZE=8 ALIGN=center WIDTH=75%>
Onde: Size: configura a espessura da linha, no exemplo insere uma linha de largura de 8 pixels. Width: configura a largura da linha (pode ser em porcentagem ou em pixels). No exemplo, insere uma linha que ocupa 75% do espao horizontal disponvel. Align: determina o posicionamento da linha. Noshade: indica sem efeito tridimensional.
FIGURA 2.8 VISUALIZANDO UMA LINHA HORIZONTAL CENTRALIZADA NO NAVEGADOR
Considere o exemplo 2:
<HR WIDTH=30% ALIGN=RIGHT NOSHADE>
Com estes comandos, voc insere uma linha de comprimento 30% (do espao horizontal disponvel), alinhada direita, sem efeito tridimensional. Verifique o resultado no seu navegador.
58
Figura 2.9 EXEMPLO DE LINHA HORIZONTAL
Tambm veja o exemplo 3:
<HR SIZE=70 WIDTH=7 ALIGN=LEFT>
Neste caso, voc insere uma linha de largura 70 (pixels), comprimento 2 (pixels), alinhada esquerda (o Netscape, aparentemente, no aceita esta formatao de <HR>). Verifique o resultado no seu navegador. Ter o aspecto abaixo? Se sim, ento est correto.
FIGURA 2.10 EXEMPLO DE LINHA HORIZONTAL
Unidade 2
59
Seo 4 - Alinhamento de texto

Nesta seo, voc aprender como alinhar um bloco de texto em sua pgina da web. Voc estudar diversas tags para esta finalidade (centralizar um texto, formatar um bloco de texto). Ao fim saber qual a melhor alternativa para tornar sua pgina da web melhor.
Alinhamento de bloco de texto

As tags <DIV ALIGN=> e </DIV> marcam uma diviso lgica de um documento, formatao bastante usada atualmente, e configuram o alinhamento de um bloco todo de texto. O alinhamento pode ser esquerda (left), direita (right) e ao centro (center).
A tag <DIV> utilizada para delimitar um bloco de tags HTML de qualquer tipo e atinge todas as tags e o texto contido entre as de abertura e de fechamento.
Existem vantagens da utilizao da tag <DIV> em vez do atributo ALIGN:
Essa tag precisa ser usada apenas uma vez, ao contrrio do atributo ALIGN, que tem de ser includo em diversas tags. A tag <DIV> pode ser usada para alinhar qualquer elemento (cabealho, pargrafos, citaes etc.). O atributo ALIGN encontra-se disponvel apenas em um nmero limitado de tags.
Veja o seguinte exemplo:

<DIV ALIGN=LEFT> <H1>Exemplo de texto esquerda</H1> <p>Testando esquerda</p> </DIV>
60
Verifique o seguinte resultado no navegador:
FIGURA 2.11 EXEMPLO DE ALINHAMENTO DE BLOCO DE TEXTO ESQUERDA
Centralizao de texto
As tags <CENTER> e </CENTER> centralizam os elementos textos, imagens, tabelas - que estiverem dentro de sua marcao. A tag <CENTER> funciona de maneira idntica a <DIV ALIGN=CENTER>, centralizando todo o contedo HTML contido entre as tags de abertura e de fechamento. Acompanhe o seguinte exemplo:
<CENTER> <H1>Exemplo de texto centralizado</H1> <p>Testando.</p>
</CENTER>
Verifique o resultado no seu navegador.
Unidade 2
61
FIGURA 2.12 - EXEMPLO DE ALINHAMENTO DE BLOCO DE TEXTO CENTRALIZADO
Margem
Outro controle sobre o alinhamento dos elementos da pgina pode ser conseguido atravs de mudana, de configurao, de margem. O texto sempre comea a uma determinada distncia da janela do navegador (um pouco diferente em cada navegador). s vezes, ser necessrio aumentar essa margem e fazer com que o texto comece mais para dentro da pgina. O par de tags <BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar a margem. O efeito dessa tag pode ser acumulado para conseguir margens maiores. Veja os exemplos:
<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE> <BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem ainda</BLOCKQUOTE></BLOCKQUOTE>
62
O resultado no seu navegador parece-se com este da figura abaixo?
FIGURA 2.13 EXEMPLO DE CONFIGURAO DE MARGEM
A tag <BLOCKQUOTE> utilizada, principalmente, na criao de citaes. Geralmente, as citaes so destacadas em relao ao restante do texto atravs do recuo.
Ateno! Se voc no deseja aumentar a margem do texto, no utilize a tag <BLOCKQUOTE>. Por padro, os cdigos HTML no tm margem definida.
Texto pr-formatado
Existe ainda uma outra forma de modificar o alinhamento. a utilizao do par de tags <PRE> e </PRE>. Usando essas tags, todos os espaos e entradas de pargrafo (o resultado da tecla ENTER) so respeitados. Em um texto normal, qualquer espao a mais entre duas palavras ignorado pelo navegador. Com a pr-formatao, pode-se controlar o espaamento com a barra de espao e colocar o texto em, praticamente, qualquer lugar da pgina. Apesar da vantagem dessa forma de alinhamento arbitrrio, a tag <PRE> muda o tipo de caractere para uma fonte monoespaada.
Uma fonte monoespaada aquela na qual todos os caracteres ocupam o mesmo espao horizontal, ao contrrio da fonte proporcional, na qual o i ocupa menos espao do que o a, por exemplo.
Unidade 2
63
Uma vez que <PRE> mantm o texto original, no se deve forar espaos com essa marcao dentro de outra marcao que j apresente tabulaes e espaos especficos. Acompanhe este exemplo:
<PRE> Este texto est pr-formatado. A fonte monoespaada e as entradas de pargrafo, assim como os espaos adicionais, so respeitadas. Neste caso, a margem esquerda foi aumentada em cinco caracteres.</PRE> O texto normal recebe fonte proporcional e ignora a presena de espaos a mais no meio do texto. Entradas de pargrafos adicionais tambm so ignoradas.
Vamos ver o resultado no navegador?
FIGURA 2.14 EXEMPLO DE FONTE MONOESPAADA
64
Sntese
Como voc aprendeu, a HTML uma linguagem de marcao de texto usada para descrever documentos de hipertexto na WWW, que descreve uma pgina e o seu contedo, no a sua aparncia. Nesta unidade, voc tambm aprendeu a estrutura bsica de um documento HTML, como criar e visualizar arquivos em HTML simples. Aprendeu ainda a usar as tags de HTML apresentadas na tabela abaixo.
TAG
<HTML>...</HTML> <HEAD>...</HEAD> <BODY>...</BODY> <TITLE>...</TITLE> <H1>...</H1> <H2>...</H2> <H3>...</H3> <H4>...</H4> <H5>...</H5> <H6>...</H6> <BR> <P> <CENTER>...</CENTER> <PRE> <BLOCKQUOTE>...</ BLOCKQUOTE> <HR> <DIV>...</DIV>
USO
Toda a pgina em HTML O cabealho, o prlogo da pgina em HTML Todo o restante do contedo da pgina em HTML O ttulo da pgina Ttulo de nvel 1 Ttulo de nvel 2 Ttulo de nvel 3 Ttulo de nvel 4 Ttulo de nvel 5 Ttulo de nvel 6 Nova linha Pargrafo Alinhar o texto ao centro Pr-formatao Margem Linha Horizontal Alinhamento de bloco de texto
Unidade 2
65
Caro aluno, leia cada enunciado com ateno e responda as questes que seguem. 1. Em muitas pginas da web, as tags de estrutura de pgina (<HTML>, <HEAD>, <BODY>) no so usadas. Devo inclu-las mesmo que as pginas funcionem bem sem elas? Por que?
66
2. Agora que voc sabe o que HTML, conhece algumas tags, possui os conhecimentos suficientes para criar pginas simples em HTML, e at navegou por arquivos em HTML (atravs dos exemplos) - crie uma pgina inicial em HTML com o nome de index.html, utilizando tags e atributos estudados nesta unidade.
Unidade 2
67
Saiba mais
Aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias: MARCONDES, Christian Alfim. HTML 4.0 fundamental: a base da programao para web. Editora rica, 2005. Tambm consulte o seguinte site para aprofundar seus estudos:
http://www.icmc.usp.br/ensino/material/html/edicao.html (Instituto de Cincias Matemticas e de Computao)
68
unidade 3
Listas e Vnculos
Conhecer as tags para listas. Realizar comentrios atravs do cdigo HTML. Conhecer os vnculos realizados em HTML.
Sees de estudo
Seo 1 Listas Seo 2 Comentrios Seo 3 Tudo sobre vnculos

Alm dos cabealhos e pargrafos, provvel que o elemento HTML mais comum que voc usar seja a lista. Depois de estudar esta unidade, voc saber criar uma lista em HTML e, mais que isso, saber criar cinco tipos de listas, um tipo para cada ocasio. A HTML define estes cinco tipos de listas:

Listas numeradas ou ordenadas; Listas com marcadores ou no-ordenadas; Listas de definio ou de glossrio; Listas de menu e Listas de diretrio.
Voc tambm estudar como realizar um comentrio e como estabelecer os vnculos em HTML. Vamos comear!
Seo 1 - Listas
Nesta seo, voc estuda agora os cinco tipos de lista em HTML. Todas as tags de lista possuem em comum estes elementos:
a lista inteira delimitada pelas tags de abertura e fechamento referentes ao tipo da lista; cada item da lista tem sua prpria tag.
70
Listas Numeradas ou Ordenadas

As listas numeradas so delimitadas pelas tags <OL>...</OL> e cada item da lista comea com a tag <LI>, onde:

OL = Ordered List (lista ordenada) LI = List Item (item de lista)
A tag <LI> unilateral, voc no precisa especificar a tag de fechamento. A existncia da prxima <LI> ou da tag de fechamento </OL> indica o final desse item na lista. Quando o navegador interpreta uma lista ordenada, ele numera (e em geral recua) cada um dos elementos de forma seqencial. Voc no precisa numer-los. Acompanhe este exemplo:
<OL> <LI>item de uma lista numerada <LI>item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI>item de lista numerada </OL>
Listas ordenadas so aquelas em que cada item tem um nmero.
Visualize o resultado em seu navegador:
FIGURA 3.1 EXEMPLO NO NAVEGADOR DE UMA LISTA ORDENADA
Unidade 3
71
Ateno! Utilize listas numeradas somente quando quiser indicar que os elementos esto ordenados, ou seja, nos casos em que os itens devero ser apresentados nessa ordem especfica.
As listas numeradas tm vrios atributos que voc pode utilizar para personalizar sua apresentao no navegador. Esses atributos permitem controlar vrias caractersticas das listas, incluindo o esquema de numerao a ser usado e a partir de que nmero se vai iniciar a contagem (se voc no quiser iniciar em 1). Voc pode personalizar listas ordenadas de duas maneiras:

como elas so numeradas; e
em que nmero a lista comea.
A HTML fornece o atributo TYPE, que pode assumir cinco valores para definir o tipo de numerao a ser usado na lista:
1 - especifica que os algarismos arbicos padres devem ser usados para numerar a lista (isto , 1, 2, 3, 4 etc.); a - especifica que as letras minsculas devem ser usadas para numerar a lista (isto , a, b, c, d etc.); A - especifica que as letras maisculas devem ser usadas para numerar a lista (isto , A, B, C, D etc.); i - especifica que os algarismos romanos minsculos devem ser usados para numerar a lista (isto , i, ii, iii, iv etc.); I - especifica que os algarismos romanos maisculos devem ser usados para numerar a lista (isto , I, II, III, IV etc.).
Os tipos de numerao podem ser especificados na tag <OL>, como no exemplo a seguir, que utiliza o padro TYPE=a.
72
<OL TYPE=a> <LI>item de uma lista numerada <LI>item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio preocupar-se com a formatao das margens de texto <LI>item de lista numerada </OL>
Visualize o seguinte resultado no navegador:
FIGURA 3.2 EXEMPLO DE LISTA ORDENADA PERSONALIZADA
Ateno! Os navegadores da web geralmente ignoram os atributos que no entendem. Por exemplo, se um navegador no suportar o atributo TYPE da tag OL, ele simplesmente vai ignor-lo quando o encontrar. O atributo TYPE tambm pode ser aplicado na tag <LI>, mudando efetivamente o tipo de numerao no meio da lista. Quando o atributo TYPE usado na tag <LI>, ele afeta o item em questo e todas as entradas que venham a seguir na lista.
Usando o atributo START, voc pode especificar o nmero ou letra que inicia sua lista. O ponto inicial padro 1, claro. Usando START, voc pode mudar esse nmero. Por exemplo, <OL START=4> iniciaria a lista no nmero 4, enquanto <OL TYPE=a START=3> iniciaria a numerao com c e percorreria o alfabeto a partir da.
Unidade 3
73
Veja o exemplo a seguir.

<OL TYPE=a START=3> <LI>item de uma lista numerada <LI>item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a formatao das margens de texto <LI>item de lista numerada </OL>
O navegador apresenta o seguinte resultado:
FIGURA 3.3 EXEMPLO NO NAVEGADOR DE UMA LISTA ORDENADA PERSONALIZADA
Assim como no atributo TYPE, voc pode mudar o valor do nmero de uma entrada em qualquer ponto da lista. Isto feito usando-se o atributo VALUE na tag <LI>. A atribuio de um VALUE em uma tag <LI> reinicia a numerao na lista a partir da entrada afetada, como no exemplo a seguir:
74
<OL> <LI>item 1 <LI>item 2 <LI>item 3 <LI VALUE=55>item 55 <LI>item 56
</OL>
Veja o resultado em seu navegador.
FIGURA 3.4 EXEMPLO NO NAVEGADOR DE UMA LISTA ORDENADA PERSONALIZADA
Listas com Marcadores No-ordenados ou No-numerados

Listas no ordenadas so aquelas em que os elementos podem ser apresentados em qualquer ordem. Estas listas se assemelham s listas ordenadas na HTML. A diferena que a lista indicada atravs das tags <UL>...</UL>, em vez de <OL>. Os elementos da lista so separados por <LI>, como nas listas ordenadas. Confira o exemplo:
<UL> <LI>item 1 <LI>item 2 <LI>item 3 <LI>item 4 <LI>item 5 </UL> 75
Unidade 3
E visualize-o no navegador:
FIGURA 3.5 EXEMPLO NO NAVEGADOR DE UMA LISTA COM MARCADORES
Ateno! Listas no-ordenadas so aquelas em que os itens so marcadores ou outros smbolos.
Assim como as listas ordenadas, as listas no-ordenadas podem ser personalizadas. De acordo com a especificao HTML, o atributo TYPE pode receber trs valores poss veis, quando apresentados no Netscape Navigator:
disc - configura um disco ou marcador (este o padro), na maioria das vezes representa um crculo preenchido; square - configura um quadrado; circle - este marcador gera um crculo no preenchido em navegadores compatveis.
76
Confira o exemplo:
<UL TYPE=disc> <LI>Fita <LI>CD <LI>DVD </UL> <UL TYPE=square> <LI>Fita <LI>CD <LI>DVD </UL> <UL TYPE=circle> <LI>Fita <LI>CD <LI>DVD </UL>
Este exemplo assim visualizado:
FIGURA 3.6 EXEMPLO NO NAVEGADOR DE UMA LISTA PERSONALIZADA COM MARCADORES
Unidade 3
77
Cada item de uma lista com marcadores no-ordenados tambm pode ter seu atributo especfico, atravs do TYPE na tag <LI>:
<UL> <LI TYPE=disc>um item <LI TYPE=circle>mais um item <LI TYPE=square>ltimo item
</UL>
Veja o resultado no seu navegador:
FIGURA 3.7 EXEMPLO NO NAVEGADOR DE UMA LISTA PERSONALIZADA COM MARCADORES
As listas com marcadores em HTML so equivalentes s listas com marcadores do Microsoft Word. A diferena entre o resultado da marcao HTML e do Word est na mudana dos marcadores, distino que veremos mais adiante.
Listas de Glossrio ou Listas de Definio

As listas de definio so tambm chamadas listas de glossrio. Elas so um pouco diferentes das outras listas. Cada item de uma lista de glossrio tem estes dois componentes:

um termo; a definio do termo.
78
Uma lista de glossrio permite incluir uma descrio de cada item listado. O descritor <DL> e os descritores <DT> e <DD> fazem esta funo. Cada componente da lista de glossrio possui sua prpria tag:

<DT>: para o termo (Definition Term) <DD>: para a respectiva definio (Definition Definition)
Essas tags so unilaterais e, em geral, apresentadas aos pares, embora a maioria dos navegadores possa tratar <tratar o qu?> com definies ou termos especficos. A lista de glossrio inteira indicada pelas tags <DL>...</DL> (Definition List) Eis um exemplo de uma lista de glossrio:
<DL> <DT>termo a ser definido </DL> <DD>definio <DD>definio <DT>termo a ser definido
Considere a seguinte visualizao:
FIGURA 3.8 EXEMPLO NO NAVEGADOR DE UMA LISTA DE GLOSSRIO
Unidade 3
79
Este tipo de lista muito utilizado para diversos efeitos de organizao de pginas, pois permite a tabulao do texto. Um exemplo de ocorrncia desta lista so os ndices de navegao presentes em muitas pginas de tutoriais na web.
Listas de Menu e Listas de Diretrios

Listas de menu so listas de itens ou pargrafos curtos sem marcadores, nmeros ou qualquer outro smbolo. Essas listas se assemelham s listas simples de pargrafos. A diferena que alguns navegadores podem recu-las ou format-las de maneira diferente dos pargrafos normais. As listas de menu so delimitadas pelas tags <MENU> e </MENU> e cada item da lista indicado pela tag <LI>. As listas de diretrios so destinadas a itens ainda mais curtos do que os da lista de menu e devem ser formatadas pelos navegadores horizontalmente em colunas. As listas de diretrio so delimitadas pelas tags <DIR> e </DIR> e a tag <LI> identifica cada item da lista. Veja o exemplo abaixo:
<MENU> <LI>maa <LI>laranja <LI>goiaba </MENU>
Veja o resultado no seu navegador que como se fosse mostrada uma lista. Conforme descrito anteriormente, o que diferencia o recuo que alguns navegadores podem adotar.
80
FIGURA 3.9 EXEMPLO NO NAVEGADOR DE UMA LISTA DE MENU E LISTA DE DIRETRIO
Ateno!
Embora as listas de menu e de diretrio existam na especificao HTML 2.0, no so muito utilizadas em pginas na web. Na HTML 4.0 elas so consideradas diferentes das listas no-ordenadas e das listas de glossrio - por serem representadas de modo diferente na, aparncia, em relao s listas no ordenadas ou de glossrio -, mas os navegadores ainda no as implementam de modo diferente. Considerando que a maioria dos navegadores formata menus e diretrios da mesma forma que as listas de glossrio ou listas no-ordenadas, e no da forma como esto descritas na especificao, provvel que a melhor opo seja utilizar os outros 3 formatos de lista (LEMAY; LAURA). A maioria dos navegadores aceita o uso da tag <LI> fora de uma estrutura de lista, isolada na pgina e a formatar como um pargrafo simples ou como um item com marcador, mas sem recuo. Contudo, segundo a verdadeira definio HTML, o uso de uma tag <LI> invlido dessa forma. Por isso, as pginas em HTML adequadas no devem us-la assim. E como estamos procurando criar pginas em HTML corretas, voc no dever fazer uso desse mtodo. Assim, inclua sempre os seus itens nas listas a que pertencem.
Unidade 3
81
Aninhamento de Listas
O que acontece quando voc insere uma lista em outra? J parou para pensar? J tentou criar? As listas podem ser aninhadas sim. Apenas inclua a estrutura inteira de uma lista na outra lista, como se fosse um de seus elementos. Digite o exemplo seguinte no bloco de notas e verifique seu resultado no navegador.
<DL> <DT>termo a ser definido <DD>definio <LI>item de uma lista numerada <LI>item de uma lista numerada <UL> </UL> <LI>item de uma lista numerada <LI>item de uma lista <OL>
</OL> <DT>termo a ser definido </DL> <DD>definio
O recuo de listas aninhadas no prprio cdigo HTML ajuda a mostrar no layout final, o seguinte relacionamento entre as listas:
FIGURA 3.10 EXEMPLO NO NAVEGADOR DE LISTAS ANINHADAS
82
Considere o seguinte exemplo:
<HTML> <HEAD> <TITLE>Exemplo</TITLE> </HEAD> <BODY BGCOLOR=black TEXT=yellow> <UL> <LI>1</LI> <LI>2</LI> <LI>3</LI>
<UL> </BODY> </HTML>
Vamos verificar o resultado em seu navegador? Que tal publicar na ferramenta EXPOSIO do EVA?
Ateno! Boa parte dos editores HTML (WYSIWYG ou no) insere marcaes que no existem em HTML. Exemplos tpicos so </DD>, </DT>, e </LI>. Porm, como essas tags no so reconhecidas pelos navegadores, elas no causam efeito colateral algum nos documentos.
Unidade 3
83
Um exemplo deste caso:

<UL> <LI>Documentos bsicos <LI>Documentos avanados <UL> <LI>formulrios <UL> <LI>CGI
</UL>
<LI>contadores <LI>relgios
</UL> <LI>Detalhes sobre imagens </UL>
Veja o resultado no navegador:
Observe que estas mesmas listas tambm no apresentariam numerao em formato 1.1, 1.2 etc., quando ordenadas e compostas:
84
1. Documentos bsicos 2. Documentos avanados 1. formulrios 1. CGI 2. contadores 3. relgios
3. Detalhes sobre imagens Porm, atravs do atributo TYPE (HTML 3.2), pode-se lidar com a numerao dos itens:
<OL TYPE=I> <LI>Documentos bsicos <LI>Documentos avanados <OL TYPE=a> <LI >formulrios <OL TYPE=i> <LI>CGI </OL>
<LI>contadores <LI>relgios </OL> <LI>Detalhes sobre imagens </OL>
Unidade 3
85
Vamos testar o exemplo acima no seu navegador e verificar o resultado? Ele apresenta-se como o visualizado abaixo!
Um outro exemplo de listas aninhadas so as listas de glossrios, descritas tal como no exemplo a seguir:
<DL> <DT>Imperadores do Brasil: <DD>D. Pedro I <DL> <DD>Nome completo: Pedro de Alcntara Francisco Antnio Joo Carlos Xavier de Paula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de Bragana e Bourbon </DL> <DD>D. Pedro II <DL> <DD>Nome completo: Pedro de Alcntara Joo Carlos Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocdio Miguel Gabriel Rafael Gonzaga </DL> </DL>
86
Vamos visualizar o exemplo acima no seu navegador?! Qual o resultado? Publique este resultado tambm na ferramenta EXPOSIO no ambiente virtual EVA.
Ateno! Se voc no est vendo diferena alguma entre as listas comuns e as que tm atributos TYPE, isto se deve ao fato de seu navegador no estar reconhecendo esses atributos como vlidos. Trata-se de um navegador de verso antiga. Deve-se pensar nisto quando usamos atributos mais recentes, pois nem todo usurio poder ver o resultado das novas marcaes.
Seo 2 - Comentrios
Voc pode incluir comentrios em pginas em HTML para descrever a prpria pgina ou para fornecer alguma indicao de seu status. O texto inserido ignorado quando o arquivo em HTML analisado. Os comentrios nunca so apresentados na tela por isto so comentrios. Eles tm um formato semelhante ao seguinte:

Em verses mais atuais da HTML, voc pode comentar tambm vrias linhas assim:
 Aqui tem um exemplo de comentrio!! Ele no apareceu escrito!!
Unidade 3
87
Visualize o exemplo acima no seu navegador:
FIGURA 3.13 EXEMPLO DE COMENTRIO
Atividade de auto-avaliao
A partir de seus estudos, leia com ateno e resolva a atividade programada para a sua auto-avaliao. 1. Crie uma pgina HTML chamada de MinhaLista.html e crie listas aninhadas nesta pgina. No esquea de comentar o seu cdigo HTML.
88
Seo 3 - Tudo sobre vnculos

At agora, produzimos apenas um documento bastante simples, que poderia ser composto com recursos muito mais sofisticados, em qualquer processador de texto. Mas nesta seo, falaremos de documentos de hipertexto, que podem fazer ligaes com outros textos. Com HTML possvel voc fazer ligaes de uma regio de texto (ou imagem) a um outro documento. O navegador destaca regies e imagens do texto, indicando que so ligaes de hipertexto - tambm chamadas hypertext links ou hiperlinks ou simplesmente links, como voc j estudou na unidade 1. Para criar um vnculo em HTML, voc precisa de dois componentes:
o nome do arquivo (ou URL do arquivo) com o qual deseja estabelecer o vnculo; o texto que ser destacado no navegador e dever ser selecionado pelos usurios para acompanhar os vnculos.
Apenas este segundo componente estar visvel na sua pgina. Quando voc clicar sobre o texto que aponta para o vnculo, o navegador reconhecer o primeiro componente como o local para onde dever ir.
A tag de vnculo <A>

Para criar um vnculo em uma pgina em HTML, voc dever utilizar a tag de vnculo <A>...</A>. Esta tag chamada tambm de tag de ncora, pois pode ser utilizada para criar ncoras para vnculos, como voc aprender mais frente. No entanto, a tag de vnculo costuma ser mais utilizada, em geral, na criao de vnculos com outras pginas. Dentro dessa tag, na forma de atributo, colocada a referncia ao arquivo ligado. A referncia indica a URL do documento. Quando o usurio clicar sobre o trecho realado pela ncora de hipertexto, o arquivo ligado ser requisitado ao servidor e mostrado na janela do navegador.
Unidade 3
89
Atributos
A tag <A> tem vrios atributos, utilizados conforme a ao associada ao link. Os mais usados so:
HREF - indica o arquivo de destino da ligao de hipertexto ou o endereo de uma pgina HTML. TARGET - indica o frame em que ser carregado o arquivo de destino. Maiores detalhes, voc ver na unidade 7, que aborda frames. NAME - marca um indicador, isto , a regio de um documento como destino de uma ligao.
Veja o exemplo abaixo:
Arquivo a ser carregado quando o link selecionado
Texto que ser selecionado
<A HREF=.../cadastro/menu.htlm>Acesse o Menu Principal</A>
Tag de abertura
Tag de fechamento
Neste exemplo, o texto Acesse o Menu Principal aparece no navegador realado de alguma forma, normalmente, em uma cor diferente e sublinhado. O cursor do mouse se transforma em uma mozinha quando colocado sobre o texto realado. Ao clicar no link, o arquivo menu.html, do diretrio /cadastro/ ser mostrado na tela.
90
Referncia de Hipertexto
Colocando uma URL no atributo HREF da tag <A>, pode-se ligar uma pgina com qualquer outro documento disponvel na internet, ou seja, possvel estabelecer uma referncia de hipertexto em funo de tags que criam links para outras pginas da internet. Pode-se fazer uma pgina com uma lista de pginas preferidas da rede com suas devidas ligaes de hipertexto. Veja este modelo:
<a href=http://endereodapagina.htm>Aqui vai o nome ou o endereo da pgina para a qual voc est apontando o link</a>
Vamos verificar o resultado no navegador?
FIGURA 3.14 EXEMPLO DE VNCULO
Por exemplo, para colocar um link da UnisulVirtual na sua pgina, escreva:
<a href=http://www.virtual.unisul.br>UnisulVirtual</a>
Um visitante na sua pgina que clicar sobre o link UnisulVirtual ser levado pgina principal do site.
Unidade 3
91
Links na mesma Pgina (ncora)

A tag <A> com o atributo NAME permite que voc crie links internos na mesma pgina, ou seja, faz com que a ncora indicada (por isso tambm chamado de indicador) seja o destino de um link. Observe este exemplo:
<A HREF=#explicao>Saiba mais sobre o meu site</A><P><hr> Escrevendo um texto em HTML com vnculos.<P><br><br><br><br><br> <br><br> <A NAME=explicao>O meu site</A>
O exemplo acima, Saiba mais sobre o meu site est vinculado regio chamada O meu site . Ou seja, quando um usurio clicar sobre Saiba mais sobre o meu site , ser levado para a regio, na mesma pgina, chamada Meu site . O caractere # indica que se trata de um link em uma mesma pgina.
Ateno! Como foi dito anteriormente, o atributo NAME permite indicar um trecho de documento como ponto de chegada de uma ligao hipertexto.
Veja o resultado no navegador:
FIGURA 3.15 EXEMPLO DE LINK NA MESMA PGINA
92
No exemplo do navegador acima, quando o usurio clicar em Saiba mais sobre o meu site , o link levar o usurio a mesma pgina onde foi marcado o ponto de chegada, neste caso O meu site. Veja:
FIGURA 3.16 EXEMPLO DE LINK NA MESMA PGINA
Quando construmos links para trechos determinados de outros documentos, precisamos saber quais trechos do documento destino esto marcados para ponto de chegada de um link.
Ateno! Lembre-se que os nomes das ncoras no contm caracteres #. Somente os vnculos correspondentes contm esses caracteres.
Uma referncia a uma outra parte do mesmo documento particularmente til quando se est fazendo o ndice de um texto. Vejamos um outro exemplo:
<A HREF=#cap1>Captulo 1</A>
Enquanto o alvo do link fica desta forma:
<A NAME=cap1>Captulo 1</A>
Unidade 3
93
Neste exemplo, quando o usurio clicar sobre o link <A HREF=#cap1>Captulo 1</A>, ele ser remetido ao ponto onde est a referncia <A NAME=cap1>Captulo 1</A>. A parte do texto que referenciada (o alvo de um link) no fica realada como os hyperlinks. Alm de ser invisvel, no obrigatrio que exista um link apontando para ele.
Ateno! As ncoras fazem distino entre maisculas e minsculas. Por isto, se o navegador no conseguir localizar o nome de uma ncora que tenha a grafia exata, possvel que ele tente selecionar outro nome semelhante contido na pgina. Isto varia em funo do comportamento do navegador.
Link para e-mail

A tag <A> tambm permite que os visitantes mandem e-mail para o autor do site, ao clicar no endereo. possvel esta ao a partir do seguinte modelo:
<A HREF=mailto:petry@unisul.br>Mande-me um e-mail</A>
Vnculos de Pginas Locais atravs de Nomes de Caminhos Absolutos e Relativos

Aqui voc ver exemplos de como estabelecer vnculos entre pginas que estejam contidas na mesma pgina ou em diferentes pastas (ou diretrios) de seu disco local (pginas locais). Os links podem estar indicados como caminhos relativos ou absolutos.
94
Caminho Relativo
Quando voc especifica, entre aspas, apenas o nome do caminho de um arquivo vinculado, o navegador procura esse arquivo no diretrio em que est armazenado o arquivo atual. Isso ocorre mesmo se o arquivo atual e o arquivo com que se est estabelecendo o vnculo estejam armazenados em um servidor localizado em algum outro ponto da rede. Os dois arquivos esto contidos no mesmo diretrio nesse servidor. Essa a forma mais simples de nomear o caminho relativo.
Ateno! O caminho relativo deve ser usado sempre que queremos fazer referncia a um documento armazenado no mesmo servidor do documento atual.
O nome de um caminho relativo pode conter tambm o nome de diretrio(s) ou indicar o caminho que voc tomaria para navegar at esse arquivo, se tivesse partido do diretrio ou pasta atual. Um nome de caminho pode conter, por exemplo, as direes a serem percorridas para subir dois nveis de diretrio e, em seguida, descer outros dois para obter acesso ao arquivo.
No esquea! Os nomes de caminhos relativos indicam os arquivos com base em sua localizao relativa, ou seja, na posio em que se encontram em relao ao arquivo atual.
Unidade 3
95
A tabela abaixo mostra alguns exemplos de nomes de caminhos relativos e seus significados:
Nome do caminho
HREF=arquivo.html
Descrio
Arquivo.html est localizado na pasta atual. Arquivo.html est localizado na pasta (ou diretrio) docs e a pasta docs est localizada na pasta atual. Arquivo.html est localizado na pasta situada um nvel acima da pasta atual (pasta ou diretrio superior) Arquivo.html est localizado na pasta docs, sendo que esta pasta est localizada dois nveis acima da pasta atual.
HREF=docs/arquivo.html
HREF=../arquivo.html HREF=../../docs/arquivo. html
Acompanhe este exemplo:

Veja o <A HREF=exemplos/doc2.html>exemplo de caminho relativo</A>.
A referncia cruzada entre arquivos armazenados no mesmo computador, mas em diretrios diferentes merece bastante ateno. Digamos que existam dois diretrios colocados no mesmo nvel. Um chamado msica e o outro comida. Um arquivo chamado rock.htm, do diretrio msica deve fazer uma referncia ao arquivo feijoada.htm, do diretrio comida. A ncora de hipertexto do documento rock.htm deve ficar assim:
<A HREF=../comida/feijoada.htm>Tudo sobre feijoada</A>
Pode-se colocar referncias do tipo <A NAME> em um documento longo para que outras pessoas que estejam navegando na web possam fazer ligaes para determinadas partes do texto.
96
Para citar uma determinada parte de um outro texto, a referncia :
<A HREF=exemplo.htm#capitulo1>Captulo 1 do Exemplo</A>
Neste caso, exemplo.htm o nome do arquivo referenciado e captulo1 a referncia a uma parte daquele texto. Para usar links com caminhos relativos preciso, portanto, conhecer a estrutura do diretrio do servidor no qual estamos trabalhando. Quando h alguma dvida, o melhor usar o caminho absoluto.
Caminho Absoluto
Utilize o caminho absoluto quando desejar referenciar um documento que esteja em outro servidor. No vnculo seguinte, por exemplo, oferecido um link para um documento no servidor WWW da Unisul:
<A HREF=http://www.unisul.br/ >Universidade do Sul de Santa Catarina</A>
Com esta mesma sintaxe, possvel escrever links para qualquer servidor de informaes da internet. Veja este outro exemplo:
So Carlos um <A HREF= /ambiente/saocarlos/histprog.html#polo>plo de alta tecnologia</A>.
Neste caso, foi produzido um link para um pargrafo marcado com <A NAME=polo> no arquivo histprogr.html sobre a cidade de So Carlos, no diretrio /ambiente/saocarlos/.
Unidade 3
97
Cores dos Hyperlinks

Da mesma forma que possvel definir cores diferentes para o fundo e o texto, pode-se mudar a cor dos links. As cores das ncoras de hipertexto variam de acordo com a sua condio: visitados, nunca visitados e ativos. Assim, os navegadores sabem quais foram os hyperlinks j visitados pelo usurio em um determinado perodo de tempo. Por isso, a cor dos links j visitados deve ser diferente da cor das referncias nunca visitadas. Alm disso, o link pisca em uma cor ainda diferente dessas duas logo depois que clicado pelo usurio. A cor dos links definida no tag <BODY> como j foi estudado na unidade 2.
<BODY LINK=red ALINK=blue VLINK=green>
Onde:

LINK - determina a cor dos links no visitados; ALINK - determina a cor que os links devem piscar quando clicados; VLINK - determina a cor dos links j visitados.
Neste exemplo, os links nunca visitados ficam em vermelho, os ativos (quando clicados) em azul, e os visitados em verde. Para no confundir os usurios, a cor dos links j visitados deve ser uma verso mais clara da cor das ligaes ainda no visitadas.
98
Sntese
Amigos, mais uma unidade vencida! Nesta unidade, aprendemos como criar os mais diferentes tipos de listas. As listas podem ser as seguintes:
Tipo de lista
Ordenada
Sintaxe
<OL>contedo</OL>
Exemplo
<OL> <LI>item</LI> </OL> <UL> <LI>item</LI> </UL> <DL> <DT>termo</DT> <DD>definio</DD> </DL>
No-Ordenada
<UL>contedo</UL>
Definio
<DL>contedo</DL>
Voc tambm aprendeu como criar vnculos de uma pgina outra na internet, atravs da tag <A> com o atributo HREF.
Tipo de vnculo
Localizao Abrir Nova Janela Mail
Sintaxe
HREF=LOCALIZAO
Exemplo
<A HREF=http://link.da/pagina.html> texto</A> <A HREF=http://link.da/pagina.html TARGET=_ BLANK>texto</A> <A HREF=mailto:mail@sub.dominio> texto</A>
TARGET=_BLANK
HREF=mailto:MAIL
Unidade 3
99
Leia com ateno e resolva a seguinte atividade de auto-avaliao. 1. Voc pode colocar qualquer URL em um vnculo? Comente esta questo na ferramenta FRUM no Espao UnisulVirtual de Aprendizagem e discuta com os colegas!
Saiba mais
Aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias:
MARCONDES, Christian Alfim. HTML 4.0 fundamental: a base da programao para web. Editora rica, 2005.
Tambm consulte o(s) seguinte(s) site(s) para aprofundar seus estudos:

http://home.fmh.utl.pt/~cferreira/informatica/pdf/webpages.pdf
100
unidade 4
Formatao de Texto
n
Especificar o aspecto visual dos caracteres. Incluir caracteres especiais.
Alterar a fonte e o tamanho da fonte.
Sees de estudo
Seo 1 Estilos de Caracter Seo 2 Caracteres Especiais Seo 3 Formatao do Texto Seo 4 A Tag <blink> e <marquee> Seo 5 Endereos

Voc j aprendeu os conceitos bsicos da HTML, que abrangem vrios elementos bsicos da pgina e vnculos. Com esse conhecimento, voc est agora preparado para aprender um pouco mais sobre o que a HTML oferece no que diz respeito formatao do texto e elaborao do layout das pginas. Esta unidade descreve vrias tags e atributos. Mas no se preocupe em memorizar tudo. Dedique-se apenas a aprender os diversos tipos de formatao que voc pode utilizar na HTML.
Seo 1 - Estilos de Caracter

Quando voc utiliza uma tag HTML em pargrafos, cabealhos ou listas, essas tags afetam esse bloco de texto como um todo, alterando a fonte, o espaamento acima e abaixo da linha ou incluindo caracteres (como as listas com marcadores). Os estilos de caracter so tags que afetam as palavras ou caracteres contidos em outras entidades HTML e alteram o aspecto visual do texto de forma a diferenci-lo do texto restante, como por exemplo, atravs do negrito, sublinhado. H dois tipos de formatao em HTML:

as tags de estilo lgico; e as tags de estilo fsico.
Os efeitos de apresentao na tela, a partir destes dois tipos de formatao, so os mesmos. O motivo da distino entre eles se deve idia bsica de independncia entre especificao e apresentao. Ento, para alterar a aparncia de um conjunto de caracteres contidos no texto, voc pode usar esses dois estilos.
102
Estilos Lgicos
As tags de estilo lgico indicam como o texto destacado dever ser utilizado e no como ser apresentado (formatado). Elas se assemelham s tags de elementos comuns, utilizadas para pargrafos ou cabealhos. Essas tags podem indicar uma definio, um segmento de cdigo ou uma palavra enfatizada. Quando formatamos um trecho de texto como cabealho de nvel 1, no explicitamos se esse tipo de cabealho deve apresentar alguma fonte determinada, em um tamanho determinado, justificado esquerda ou direita, ou centralizado. Esses detalhes de apresentao so deixados para o navegador - o dispositivo de apresentao do documento - que pode ser configurado de acordo com o usurio final. Desse modo, alm de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a uniformidade de apresentao dos cabealhos, pargrafos, listas etc. A formatao lgica segue o significado lgico do texto marcado: um endereo de e-mail, uma citao etc. Sua apresentao final varia conforme o navegador, podendo oferecer resultados mais ricos. Cada tag de estilo de caracter contm lados de abertura e de fechamento e afeta o texto contido entre essas duas tags. Existem 8 tags padro para esse estilo:
Unidade 4
103
Tabela 4.1 - Estilos Lgicos
Tag de Estilo lgico

<CITE>
Definio
Exemplo
<CITE>Assisti Guerra nas Estrelas umas oito vezes!</CITE> <P> Este trecho foi citado no livro X <CITE>(Silva, 2006)</CITE></P> <CODE>for (x=0); cl &&(!feof(stdin)); x++)); </CODE> <CODE>#include teste.h#</CODE> <DFN>CERN: Centre d`studes et Recherches Nucleaires </DFN>
Para ttulos de livros, filmes, e citaes curtas.
<CODE>
Para indicar trechos de cdigo de programas. Indica definio de uma palavra ou expresso. Em geral apresenta o texto em itlico. nfase. Indica que os caracteres devero ser enfatizados de alguma forma. Em geral, apresentada em itlico. Indica uma entrada via teclado, ou seja, o texto a ser digitado pelo usurio. Indica uma seqncia de caracteres, por exemplo, uma mensagem de erro ou um resultado ou um texto de exemplo. Semelhante a <CODE>. Forte nfase, mostrado normalmente em negrito. Indica variveis ou valores que o usurio dever escrever. Geralmente mostrado em itlico ou sublinhado.
Fonte: LEMAY, 1998.
<DFN>
<EM>
preciso pesquisar <EM>muito</EM> para encontrar o termo exato.
<KBD>
Para ler mensagens recebidas, digite <KBD> pine -i </KBD>
<SAMP>
O resultado do primeiro applet : <SAMP> Hello, World! </SAMP>
<STRONG>
Antes de enviar um e-mail, <STRONG> confira o campo Subject:! </STRONG>
<VAR>
No campo Login, escreva <VAR> guest. </VAR>
Estilos Fsicos
A formatao fsica especifica o estilo que se quer para o texto. Ou seja, existe um conjunto de tags que altera realmente o estilo de apresentao de um texto: itlico, grifado, negrito, espaamento etc. Sua apresentao final no sofre grandes variaes. Assim como as tags de estilos de caracter lgico, cada tag de formatao fsica contm uma tag de abertura e uma tag de fechamento. As tags de estilo fsico so as descritas a seguir:
104
Tabela 4.2 - Estilos Fsicos
Tag de Estilo Fsico

<B>
Definio
Negrito (Quando disponvel em alguns navegadores pode aparecer sublinhado). Itlico. Fonte de mquina de escrever com espaamento uniforme (monoespaada). Sublinhado. Tachado. Fonte maior que a do texto ao redor. Fonte menor. Subscrito. Sobrescrito.
Exemplo
<B>Texto em negrito</B>
<I>
<I>Texto em itlico</I>
<TT> <U> <STRIKE> ou <S> <BIG> <SMALL> <SUB> <SUP>

Fonte: LEMAY, 1998.
<TT>Texto monoespaado </TT> <U>Texto sublinhado</U> <S>Texto Tachado</S> Testando a <BIG>fonte</BIG> maior. Testando a <SMALL> fonte </SMALL> menor. Frase em estilo ndice, como em H2O. Frase em estilo expoente, como em Km2.
Ateno! Utilize a Tag <U> com cuidado, pois ela se

confunde com a apresentao de links.
As tags de estilo podem ser usadas umas sobre as outras, acumulando seus efeitos. Voc pode aninhar tags de caracter, como nos exemplos abaixo:
Unidade 4
105
<B><I>Texto em negrito e itlico</I></B><P> <B><TT>Texto monoespaado em negrito</TT></B><P> <I><TT>Texto monoespaado em itlico</TT></I><P> <B><TT><I>Texto monoespaado em negrito e itlico</I></TT></B>
Vamos visualizar o exemplo acima no navegador:
FIGURA 4.1 EXEMPLO DE TAGS DE ESTILO
Ao contrrio de <PRE>, a tag <TT> ignora espaos em branco adicionais e entradas de pargrafo no meio do texto. Em relao ao espaamento, a tag <TT> funciona exatamente como texto normal. Entretanto, o resultado na tela depender do navegador utilizado. Sobretudo em navegadores baseados em texto como, por exemplo, o Lynx, algumas dessas tags no podero ser representadas visualmente.
ASCII (American Standard Code for Information Interchange) um conjunto de cdigos para o computador representar nmeros, letras, pontuao e outros caracteres.
106
Seo 2 - Caracteres Especiais

No recomendvel que os documentos web contenham acentos. Ainda que todos os navegadores existentes entendam a presena de um caractere acentuado, existem ocasies em que o texto em HTML pode ficar truncado. Os arquivos HTML so textos ASCII que no devem conter formatao ou caracteres especiais. Na verdade, os nicos caracteres que dever incluir nos seus arquivos HTML so os que constam no seu teclado. Se voc tiver de pressionar qualquer tecla que no seja a tecla SHIFT ou pressionar uma combinao complexa de teclas para produzir um nico caracter, ento voc no poder usar esse caracter no seu arquivo em HTML. Isso se aplica tambm a caracteres que talvez voc esteja acostumado a usar, como travesses, por exemplo. Mas, espere um instante! Sabemos o que voc est pensando: se eu posso digitar um caracter, como um marcador ou um a acentuado no meu teclado atravs de uma seqncia de teclas especiais, incluindo-o assim no meu arquivo em HTML, e o meu navegador capaz de apresent-lo corretamente, qual o problema? O problema, neste caso, que a codificao interna feita pelo seu computador para produzir esse caracter (que permite a apresentao de forma apropriada no seu arquivo em HTML e no seu navegador) provavelmente no poder ser convertida em outros computadores. Se uma outra pessoa estiver lendo o seu arquivo HTML na internet com esse caracter especial, provvel que acabe vendo outro caracter na tela, o que costumamos chamar de lixo. Ou, dependendo de como a sua pgina for apresentada na internet, o caracter poder se perder antes de chegar ao computador em que o arquivo est sendo exibido. E o que voc pode fazer? A HTML oferece uma soluo razovel. Ela define um conjunto especial de cdigos, que so chamados de entidades de caracter. Voc pode incluir essas entidades nos seus arquivos em HTML para representar os caracteres que deseja usar. Quando interpretadas pelo navegador, essas entidades so apresentadas como caracteres apropriados para a plataforma e a fonte especificadas.
107
Unidade 4
Por exemplo, quando algum copia uma pgina web e a envia para outra pessoa atravs de correio eletrnico. Para contornar este problema, existe uma tabela de cdigos que substituem os acentos. Os navegadores transformam estes cdigos em caracteres acentuados e o documento poder ser transmitido por qualquer meio. HTML permite que caracteres especiais sejam representados por seqncias de escape, indicadas por trs partes: um & inicial, um nmero ou cadeia de caracteres correspondente ao caracter desejado, e um ; final. Dessa forma, para usar a palavra caf no seu arquivo HTML, voc deveria usar:
Café
Ou
Café
Acompanhe como fica esta palavra em seu navegador:
FIGURA 4.2 - EXEMPLO DE VISUALIZAO DO USO DE CARACTERES ESPECIAIS
No exemplo acima, eacute e #233 equivale ao caracter e acentuado na tabela ASCII. Suponha agora que voc queira incluir em um arquivo em HTML uma linha de cdigo semelhante a esta:
108
<CODE>se (x < 0) ento</CODE>
A HTML no capaz de representar essa linha da forma como foi digitada. Por que? O problema est relacionado ao caracter < (menor que). Para um navegador HTML, esse caracter significa este o incio de uma tag . Como nesse contexto o caracter < (menor que) no representa o incio de uma tag, o navegador ficar confuso. Dessa forma, para ser gravada de forma correta para a HTML, essa linha de cdigo deveria ser apresentada da seguinte forma:
<CODE>se (x < 0) ento</CODE>
Acompanhe a visualizao do texto em questo:
FIGURA 4.3 - EXEMPLO DE VISUALIZAO DE UMA LINHA DE CDIGO DE PROGRAMA
Quatro caracteres ASCII: <, >, & e tm significados especiais em HTML e so usados dentro de documentos seguindo esta correspondncia:
Entidade < > Caracter < >
ISO Latin1: ASCII com extenses para idiomas Europeus
Unidade 4
109
& "
&
Outras seqncias de escape suportam caracteres ISO Latin1. Aqui est uma tabela com os caracteres mais utilizados em portugus:
Entidade
á â à ã ç é ê í ó ô õ ú ü
Caracter

Entidade
Á Â À Ã Ç É Ê
Caracter

110
Í Ó Ô Õ Ú Ü
Como vemos, as seqncias de escape so sensveis caixa (alta ou baixa). Os editores de HTML fazem essa traduo automaticamente. Alguns editores, no entanto, mantm a acentuao sem usar as entidades de formatao. Quando isso acontece, deve-se inserir uma indicao do esquema de codificao ISO Latin1, escrevendo:
<HTML> <HEAD> <TITLE>...</TITLE> <META HTTP-EQUIV=Content-Type CONTENT=text/html; charset=ISO-8859-1>
</HEAD> </HTML>
Existem alguns smbolos que vm sendo incorporados ao conjunto de caracteres reconhecidos em HTML. Por exemplo:

© para o smbolo ; ® para , e; § para .

111
Unidade 4
Por que usar essas formataes?

Por causa de um problema tcnico relativo transmisso dos caracteres especiais de vrias lnguas. Chama-se conjunto de caracteres uma representao digital de texto. O conjunto de representao amplamente utilizado o ASCII. O ASCII padro tem 7 bits, porm so usadas verses particulares desse padro - o ASCII americano, ASCII portugus etc., que utilizam 8 bits. Se voc gera um texto em ASCII de 8 bits e, na transmisso, esse texto tratado por um sistema que compreende apenas o ASCII de 7 bits, ento os caracteres especiais sero transformados em caracteres diferentes, pela perda do oitavo bit. Como usurio da Internet, voc j deve ter sofrido experincia semelhante com mensagens de e-mail, que chegam com caracteres estranhos, ou pginas da web com textos em japons ou russo.
Seo 3 - Formatao do Texto

A tag <FONT> usada para controlar as caractersticas de determinado conjunto de caracteres, que por sua vez no representado pelos estilos de caracter Lgico e Fsico, como vimos na seo 1 desta unidade. Originalmente, essa tag era usada apenas para controlar o tamanho da fonte dos caracteres delimitados por ela. Mas tem sido expandida no sentido de permitir que voc altere a prpria fonte e a cor desses caracteres.
Tamanho da Fonte
O uso mais comum da tag <FONT> consiste em alterar o tamanho da fonte de um caracter, palavra, frase ou qualquer texto. As tags <FONT> e </FONT> delimitam o texto e o atributo <SIZE> indica o tamanho a ser atribudo fonte. Os
112
valores desse atributo variam de 1 a 7 e o valor 3 corresponde ao tamanho padro. O modelo o seguinte:
<FONT SIZE=tamanho_da_letra>Texto</FONT>
A formatao acima permite que o autor do documento altere o tamanho das letras em trechos especficos de texto. Veja o exemplo a seguir:
<FONT SIZE=7>Texto</FONT>
Visualize o exemplo acima no seu navegador:
FIGURA 4.4 EXEMPLO DE VISUALIZAO DE TAMANHO DE FONTE
Voc pode tambm indicar o tamanho na tag <FONT> como um valor relativo, atravs da utilizao dos caracteres + ou - no valor do atributo SIZE. Como o padro 3, voc pode alterar os tamanhos de fonte relativos de -3 a +4, da seguinte maneira:
<FONT SIZE=+2>Letra maior</FONT><p> Letra normal<p> <FONT SIZE=-2>Letra menor</FONT>
Unidade 4
113
Vamos visualizar este exemplo no seu navegador? O que aconteceu? Comente:
A tag <FONT> pode ser atribuda a qualquer parte do texto, com exceo dos ttulos. No existe nenhuma relao entre os valores no atributo SIZE e o nmero de pontos (pixels - a unidade utilizada para medir os caracteres). Portanto, o melhor experimentar todos os tamanhos e avaliar o resultado. Observe os exemplos:
<FONT SIZE=7>Texto com FONT SIZE=7</FONT><P> <FONT SIZE=6>Texto com FONT SIZE=6</FONT><P> <FONT SIZE=5>Texto com FONT SIZE=5</FONT><P> <FONT SIZE=4>Texto com FONT SIZE=4</FONT><P> <FONT SIZE=3>Texto com FONT SIZE=3</FONT><P> <FONT SIZE=2>Texto com FONT SIZE=2</FONT><P> <FONT SIZE=1>Texto com FONT SIZE=1</FONT>
Acompanhe a visualizao:
114
FIGURA 4.5 - EXEMPLO DE VISUALIZAO DE VRIOS TAMANHOS DE FONTE
A tag <FONT> tambm pode ser utilizada com um atributo diferente para cada letra. A aplicao mais bvia a colocao de uma capitular, aquela letra em tamanho maior no incio de um pargrafo.
<FONT SIZE=7>T</FONT><FONT SIZE=4>exto</FONT>
Veja a visualizao do cdigo HTML acima no seu navegador.
FIGURA 4.6 EXEMPLO DE VISUALIZAO DE TAMANHO DE FONTE DIFERENTE ENTRE OS CARACTERES DE UM TEXTO
Unidade 4
115
Tambm possvel modificar o tamanho de todo o texto de uma vez s colocando a tag <BASEFONT> no topo do texto. Confira o exemplo:
<BASEFONT SIZE=5> Aqui todo o texto est em um nico<br>tamanho de fonte.
Visualizao:
FIGURA 4.7 EXEMPLO DE VISUALIZAO DE TAMANHO DE FONTE DE TODO O TEXTO
Como alterar o tipo da fonte

O Internet Explorer, navegador da Microsoft lanado no segundo semestre de 1995, trouxe a novidade de permitir a mudana do tipo de caractere do texto. Assim, o autor de uma pgina web pode definir com este navegador qual ser o tipo de fonte de determinada parte do texto, mas o usurio precisa ter aquela fonte instalada no computador. Sugere-se a escolha de tipos comuns, como o Arial, que vem junto com o Windows, por exemplo. O atributo FACE na tag FONT recebe como valor um conjunto de nomes de fonte, delimitados por aspas e separados por vrgulas. Quando um navegador que oferece suporte ao atributo FACE interpretar uma pgina que o contm, ele localizar no sistema cada um nos dos nomes de fonte especificados. Se no conseguir encontrar o primeiro nome, procurar o segundo, depois, o terceiro e assim por diante, at localizar uma fonte que esteja instalada no sistema. Se nenhuma das fontes especificadas for localizada, ser utilizada a fonte padro.
116
O modelo de sintaxe completa da tag FONT ficaria assim:
<FONT face=tipologia size=tamanho color=cor></FONT>
Onde:

o atributo FACE determina o tipo da fonte; o atributo SIZE, como j foi estudado, o tamanho da fonte; e o atributo COLOR a cor do texto que vier escrito entre essas tags.
Por exemplo:
<FONT face=arial SIZE=6 COLOR=red>O texto ser escrito em vermelho, com fonte arial e tamanho 6.</FONT>
FIGURA 4.8 - EXEMPLO DE VISUALIZAO DE FORMATAO DE TEXTO
Cores diferentes
As cores so introduzidas atravs do elemento <FONT>, com o atributo COLOR, usando o sistema RGB (red, green, blue) para cores, como j comentado na seo 2 da unidade 2:
Unidade 4
117
<FONT COLOR=#rrggbb>Texto</FONT>
Assim, um trecho de texto pode ter uma cor diferente da definio geral de cores, feita atravs dos atributos de <BODY>. Podemos utilizar o sistema RGB como escrever o nome da cor indicada (porm, navegadores antigos no aceitam este ltimo). Estes dois modelos seguintes oferecem o mesmo resultado no navegador.
<FONT COLOR=ffffff>Texto na cor branca</FONT>
ou
<FONT COLOR=white>Texto na cor branca</FONT>
Ainda, possvel ter texto de vrias cores na mesma pgina.
<FONT COLOR=white>Texto em branco</FONT>, <FONT COLOR=blue>azul</FONT>, <FONT COLOR=green>verde</FONT> e <FONT COLOR=red>vermelho</FONT>
Confira a visualizao:
118
FIGURA 4.9 - EXEMPLO DE VISUALIZAO DE FORMATAO DE CORES EM TEXTOS.
Tambm podemos realizar uma alterao simultnea de tipo de fonte e cor, como no exemplo:
<FONT FACE=Verdana COLOR=#0000AA>Fonte Verdana azul</FONT> <FONT FACE=Arial COLOR=#00AA00>Fonte Arial verde</FONT>
Este exemplo assim visualizado:
FIGURA 4.10 - EXEMPLO DE VISUALIZAO DE FORMATAO DE CARACTERES
Seo 4 - A Tag <Blink> e <Marquee>

Voc conhece as tags <BLINK> e </BLINK>? Para que servem estas tags? Voc estudar essas tags logo abaixo.
Unidade 4
119
BLINK
As tags <BLINK> e </BLINK> atribuem um efeito piscante ao texto. O perigo de se usar o BLINK que, se sua pgina j apresenta cores, desenhos, cabealhos, todos os efeitos que chamam a ateno do leitor, o BLINK ser ainda mais um fator chamativo, o que causa um efeito final cansativo e confuso. Evite usar o BLINK. possvel substituir esse recurso por outros efeitos de JavaScript. Felizmente, so poucos os navegadores que mostram o efeito dessa formatao. O Internet Explorer um dos navegadores que no consideram o BLINK. Um exemplo seria:
<BLINK>Efeito piscante ao texto.</BLINK>
Ateno! Ao usar o BLINK, aplique-o somente em pequenos detalhes (palavras ou flechinhas), nunca em grande nmero, muito menos em frases inteiras ou cabealhos.
MARQUEE
Um texto pode entrar na pgina e percorr-la da direita para a esquerda ou em sentido contrrio. possvel obter esse efeito de animao de texto, atravs da formatao <MARQUEE>. Este o modelo para o uso do MARQUEE:
<MARQUEE BEHAVIOR=efeito WIDTH=largura>Texto</MARQUEE>
Atributos de largura e direo do efeito permitem diversas apresentaes diferentes. Tambm se podem aplicar cores,
120
negrito, itlico, alterar a fonte e o seu tamanho, normalmente. Por exemplo, (o efeito de MARQUEE s executado no Internet Explorer e em verses recentes do Netscape - e de maneiras diferentes):
<MARQUEE BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>
No exemplo acima, o texto movimenta-se da direita para a esquerda, utilizando apenas 30% da linha horizontal. Vamos testar esse movimento no seu navegador? No exemplo abaixo, o texto movimenta-se da esquerda para a direita:
<MARQUEE BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE>
Vamos visualizar o texto acima no seu navegador? No exemplo abaixo, o texto movimenta-se da direita para a esquerda. No esquea de visualizar o movimento no seu navegador:
<MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE>
Confira os atributos da tag <MARQUEE>:

Atributo
BGCOLOR BEHAVIOR
Definio
cor de fundo comportamento do texto
Exemplo
BGCOLOR =#FFFFFF BEHAVIOR =scroll ou slide ou alternate
Unidade 4
121
DIRECTION LOOP HSPACE VSPACE HEIGHT WIDTH
direo do texto quantidade de vezes de repetio do texto espao entre o texto e a marquee espao entre as linhas da marquee altura em pixels largura em pixels
DIRECTION =right ou left LOOP =nombre ou infinite HSPACE =10 VSAPCE =5 HEIGHT =200 WIDTH =300
Veja o exemplo de uso alguns destes atributos MARQUEE logo abaixo:

<marquee behavior=scroll bgcolor=#FF0000> <font face=arial color=#ffffff size=2> <b>MXSTUDIO</b> - Comunidade DW e FW </font> </marquee>
Observe o resultado no seu navegador. O texto percorre continuamente (ele no pra) o caminho da direita para a esquerda conforme o resultado nos dois navegadores abaixo:
122
FIGURA 4.11 - EXEMPLO DO USO DA TAG MARQUEE ETAPA 1
FIGURA 4.12 - EXEMPLO DO USO DA TAG MARQUEE ETAPA 2
Seo 5 - Endereos
A tag <ADDRESS> utilizada para entidades de assinaturas em pginas da web. Ela usada para formatar endereos, e-mail e referncias a autores de documentos. As tags de endereo em geral so apresentadas na parte inferior de cada pgina da web e utilizadas para indicar quem criou tal pgina. Veja o exemplo:
Envie crticas e sugestes para <address>webmaster@icmc.usp.br</address>
No navegador, fica assim:
Unidade 4
123
FIGURA 4.13 - EXEMPLO DO USO DE ENDEREOS NO SEU NAVEGADOR
Sntese
Tags, tags e mais tags! Nesta unidade, voc aprendeu a usar a maioria das tags para apresentao de texto e outras tags que oferecem outras opes de formatao de texto e apresentao de pgina. Voc poderia parar agora e criar algumas pginas web de boa qualidade. Mas, ainda, h muita coisa interessante a aprender. Por isso, continue seus estudos. Vamos em frente! Que tal voc preparar uma tabela resumo com todas as tags aprendidas at agora? Coloque o nome da tag, descrio e um exemplo. Vamos tentar? E a cada nova tag, v acrescentando nesta sua tabela.
Caro aluno, leia o enunciado com ateno e responda a questo. 1. At agora, voc j aprendeu muita coisa sobre as tags e tambm criou 2 pginas em HTML (index.html e MinhaLista.html). Que tal abrir estes arquivos e format-los, conforme o desejado, utilizando tipos de fontes diferentes, estilos, cores etc.? Enfim, aplique tudo que voc j estudou at o momento. Aps a formatao do texto, na pgina index.html,
124
unidade 5
Uso de Imagens, Painis de Fundos e Arquivos de Msica

Identificar os tipos de imagens que voc pode utilizar
na web.
Compreender como e quando incluir imagens em uma
pgina na web.
Conhecer como usar imagens com vnculos. Compreender como usar imagens para painis de
fundo lado a lado.
Identificar como
inserir um arquivo de msica na web.
Sees de estudo
Seo 1 A tag <img> e seus atributos Seo 2 Referncia de hipertexto com imagem Seo 3 Painis de fundo com imagens Seo 4 Sugestes para um melhor uso das imagens Seo 5 Msica

O HTML torna muito fcil para voc a tarefa de mostrar imagens dentro de um documento. Porm, as imagens devem estar em formato especfico. Normalmente, as imagens tm terminao .gif ou .jpg. O formato .GIF hoje o padro mais conhecido e existem mais navegadores capazes de exibir arquivos GIF do que arquivos JPEG, por exemplo. Por isso, o uso do formato GIF o mtodo mais seguro de garantir que as suas imagens possam ser exibidas para o maior pblico possvel. Mas o suporte ao formato JPEG est se tornando cada vez mais difundido. Hoje em dia, existem tambm muitos programas de edio de imagens, como por exemplo, o Adobe Photoshop, Paint Shop Pro, CorelDraw etc., que fornecem meios de promover a converso entre formatos de imagens. Existem tambm programas freeware e shareware para vrias plataformas, destinados exatamente converso entre formatos de imagens.
Ateno! Alguns editores de imagens tentaro gravar os arquivos com extenses compostas por letras maisculas (.GIF, .JPEG). Embora essas extenses sejam corretas, h distino entre letras maisculas e minsculas nos nomes das imagens, bem como nos nomes de arquivo em HTML. Por isso, GIF no a mesma extenso que gif. A grafia da extenso no importante quando se est realizando testes no seu sistema local, mas ser relevante quando voc transferir os seus arquivos HTML e imagens para o servidor, onde seu site ficar hospedado. Por isso, sempre que possvel, utilize letras minsculas.
A vantagem do formato GIF que voc pode gravar na opo GIF89 para conseguir que a imagem seja carregada progressivamente, um efeito conhecido como interlaceamento. Com o carregamento progressivo, o usurio tem a impresso da imagem estar sendo carregada no navegador mais rpido. O formato JPG oferece um fator de compresso maior do que o GIF. Ou seja, as imagens JPG ocupam menos espao em bytes.
126
Mas o processo de compresso do JPG pode causar alguma perda de qualidade imagem. Como regra geral, o formato JPG deve ser usado em imagens fotogrficas e o GIF em imagens criadas em computador ou desenhadas. A compresso do formato GIF se d ainda melhor com imagens com poucas cores e trechos contnuos de uma cor s.
Seo 1 - A Tag <Img> e seus atributos

A insero de imagens num documento faz-se com a tag <IMG>. Esta tag tem contedo vazio, o que significa que ele apenas possui atributos e no tem tag de fechamento. A tag <IMG> pode vir acompanhada de diversos atributos, entre eles o SRC. A escolha da imagem que ser mostrada na pgina faz-se atravs do atributo SRC (que uma abreviao de source ou origem). Este atributo indica o nome e o local em que pode ser encontrada a pasta que contm a imagem que voc deseja incluir - esse nome deve ser digitado entre aspas. Esse o atributo mais importante da tag <IMG>. A forma genrica mais simples de expressar a tag IMG e o seu atributo SRC a seguinte:
<IMG SRC=url_imagem>
Neste caso, a url_imagem aponta para o local onde se encontra a pasta que contm a imagem. Pode, tambm, ser referenciada uma imagem que esteja em um outro servidor (o que, logicamente, no conveniente). Por exemplo, se quisermos mostrar o cone que aparece no incio de cada pgina do W3C, devemos usar o URL:
http://www.w3.org/Icons/WWW/w3c_home
Unidade 5
127
Ento o cdigo ficaria assim:

<IMG SRC=http://www.w3.org/Icons/WWW/w3c_home>
A imagem ser desenhada no local que corresponde tag <IMG> dentro do documento HTML, claro que fazendo referncia quele servidor.
FIGURA 5.1 EXEMPLO DO USO DE IMAGEM ATRAVS DE UMA PGINA NA INTERNET
O exemplo seguinte ilustra um outro uso desta tag, onde o arquivo de imagem amigos.jpg encontra-se na pasta imagens:
<html> <body> <img src=.imagens/amigos.jpg> </body> </html>
Para visualizar o cdigo acima no seu navegador, voc precisa ter a figura chamada amigos.jpg na pasta imagens, que est dentro da pasta onde est gravado o cdigo HTML acima. Vamos visualizar:
128
FIGURA 5.2 - EXEMPLO DO USO DE IMAGEM NO SEU CDIGO HTML
Observe que o nome de caminho referente ao arquivo utiliza as mesmas regras de nomes de caminhos usadas pelo atributo HREF em vnculos. Por isso, um arquivo GIF denominado imagem.gif , contido na mesma pasta que o arquivo HTML, poder usar a seguinte tag:
<IMG SRC=imagem.gif>
Para um arquivo de imagem que esteja localizado uma pasta acima da pasta atual, utilize esta tag:
<IMG SRC=../imagem.gif>
E assim por diante! Use sempre as mesmas regras que utilizaria para nomes de pgina na parte HREF da tag <A>, como j foi estudado na unidade 3.
Unidade 5
129
Quando o caminho no est correto ou o nome da figura est errado, o que aparecer no seu visualizador ser algo assim:
FIGURA 5.3 EXEMPLO DO USO DE IMAGEM COM CAMINHO OU NOME ERRADO
Ateno! Se sua imagem no for carregada (e o seu navegador apresentar um cone esquisito no lugar dela), verifique, antes, se voc especificou corretamente o nome do arquivo no cdigo HTML. Se no for isso, examine o arquivo de imagem para verificar se ela est realmente no formato GIF ou JPEG e se tem a extenso de arquivo apropriada.
Outros Atributos Bsicos de Imagem

A seguir, voc v outros atributos bsicos de imagem: ALT, WIDTH e HEIGHT, BORDER, ALIGN, HSPACE e VSPACE.
ALT
De nada adianta voc caprichar na produo de uma imagem, se a pessoa que v as pginas utiliza um navegador incapaz de mostrar as imagens (sim, estes navegadores existem e so bastante utilizados, principalmente o Lynx). Outros usurios tambm ajustam o navegador para no carregar imediatamente as imagens. Por causa de conexes lentas, algumas pessoas preferem receber o texto e, depois, pedir as imagens. Mas para isso elas precisam saber do que tratam as imagens. Essa a funo do texto alternativo. Pode-se colocar o ttulo ou a melhor descrio possvel de uma imagem utilizando o atributo ALT. Veja a sintaxe a seguir:
130
<IMG SRC=URL_imagem ALT=descrio_da_imagem>
O texto alternativo descreve brevemente a imagem. Tal texto apresentado no lugar da imagem nos navegadores de texto ou quando se desabilita o carregamento de imagens em navegadores grficos, como j citado. recomendvel que esteja sempre presente, pois este texto ser mostrado, em vez da imagem, caso o navegador no conseguir apresent-la. O texto acompanhado do ALT aparecer quando o usurio passar o cursor em cima da imagem. uma legenda alternativa para a imagem.
<img src=http://www.w3.org/Icons/WWW/w3c_home alt=cone do W3C>
FIGURA 5.4 EXEMPLO DE IMAGEM COM O USO DO ATRIBUTO ALT
FIGURA 5.5 EXEMPLO DE IMAGEM NO ENCONTRADA COM O ATRIBUTO ALT
Unidade 5
131
O atributo ALT deve ter uma descrio daquilo que a imagem contm para que seja possvel compreender o seu contedo, mesmo sem v-la. A utilizao do atributo ALT recomendada porque melhora a acessibilidade das pginas. Este atributo pode ser lido em voz alta pelo software de leitura utilizado pelas pessoas que tm deficincias visuais. Nesses casos, sem o atributo ALT o contedo das imagens seria sempre um mistrio. Dessa forma,
<IMG SRC=/icones/newred.gif ALT=Novo!>
apresentado nos navegadores grficos assim:
e nos navegadores de texto assim:

[Novo!]
Se a imagem estiver em um diretrio (ou pasta) diferente do arquivo de texto, como no exemplo acima, preciso especific-lo na referncia. Recomenda-se que as imagens sejam colocadas em um diretrio separado para facilitar a manuteno dos arquivos.
WIDTH e HEIGHT
WIDTH e HEIGHT so atributos de dimenso da imagem em pixels. Grande parte dos editores HTML coloca automaticamente os valores destes atributos, quando indicam a insero de uma imagem. Veja a sintaxe abaixo:
132
<IMG SRC=imagem ALT=descrio WIDTH=largura HEIGHT=altura>
No exemplo abaixo, definimos as dimenses da imagem, veja:
<IMG SRC=imagens/amigos.jpg ALT=Meus amigos WIDTH=100 HEIGHT=50>
Vamos visualizar o resultado no seu navegador?
FIGURA 5.6 EXEMPLO DE IMAGEM COM ATRIBUTOS WIDTH E HEIGHT
Uma das vantagens de se usar esses atributos que o navegador pode montar mais rapidamente as pginas, por saber, de antemo, o espao que dever ser reservado a elas. Por isso, se as dimenses da imagem forem colocadas na referncia, o usurio ter a impresso de que a pgina foi carregada mais rpido. Fornecendo as dimenses, o navegador reserva o espao para a imagem e vai carregando o texto para que o usurio possa comear a ler. Depois de carregado o texto, as imagens comeam a ser mostradas.
Unidade 5
133
BORDER
Com o atributo BORDER possvel colocar uma borda em volta da imagem. O valor da borda expresso em pixels.
Aqui voc v uma imagem:<P> <IMG SRC=sol.gif BORDER=2> Note que a imagem...<P>
Veja voc o resultado no seu navegador, no esquecendo de criar uma imagem com o nome de sol.gif em um editor de imagens. O resultado deve ser este:
FIGURA 5.7 - EXEMPLO DA UTILIZAO DE BORDA EM IMAGENS
ALIGN
A tag <IMG> contm tambm um atributo ALIGN, que permite alinhar a imagem com a parte superior ou inferior do texto existente, ao redor ou com outras imagens contidas na mesma linha. Sua sintaxe :
<IMG SRC=imagem ALT=descrio ALIGN=alinhamento>
134
A HTML 2.0 define trs valores bsicos para o atributo ALIGN, que so os seguintes:
ALIGN=
top middle bottom
Definio
alinha a parte superior da imagem com a parte superior da linha. alinha o centro da imagem com a parte central da linha. alinha a parte inferior da imagem com a parte inferior da linha de texto.
Vamos verificar os atributos de alinhamento e seus resultados, logo a seguir.
<IMG ALIGN=top SRC=imagem.jpg ALT=imagem>Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado no seja muito bom. Pois provavelmente a prxima linha do texto ir para a linha abaixo da imagem.
Observe o resultado no seu navegador. semelhante ao que est sendo visualizado a seguir?
FIGURA 5.8 - EXEMPLO DE ALINHAMENTO DE TEXTO E IMAGEM
Unidade 5
135
Vamos testar agora os dois cdigos abaixo? Qual o resultado em seu navegador?
<IMG ALIGN=middle SRC=imagem.jpg ALT=imagem>Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado no seja muito bom. Pois provavelmente a prxima linha do texto ir para a linha abaixo da imagem.
Visualizao:
<IMG ALIGN=bottom SRC=imagens/amigos.jpg ALT=imagem>Alinha o texto adjacente com a parte de baixo da imagem. Se existir mais texto, o mesmo pula para a linha imediatamente aps a imagem.
Visualizao:
136
Quando no especificado o atributo ALIGN, o padro utilizado pelo navegador o bottom. A incluso de uma imagem em uma linha funciona bem quando voc tem apenas uma linha de texto. Se voc tiver vrias linhas de texto e incluir uma imagem no meio dessas linhas, todo o texto ao redor da imagem (exceto o da primeira linha) ser apresentado acima e abaixo dessa imagem, como nos exemplos acima. E se voc quiser promover o retorno automtico de vrias linhas de texto ao redor de uma imagem? Com a HTML 2.0 isso no possvel. Voc est, ento, restrito a uma nica linha de texto em cada lado da imagem, o que limita os tipos de projetos que voc pode realizar. Para contornar essa limitao, novos valores para o atributo ALIGN da tag <IMG> foram incorporados na HTML 3.2: left e right.
ALIGN=
right left
Definio
alinha uma imagem na margem direita. alinha uma imagem na margem esquerda.
Mas o uso desses atributos faz tambm com que todo o texto localizado aps a imagem seja apresentado no espao direita ou esquerda dessa imagem, dependendo do alinhamento da margem. Veja os exemplos a seguir:
Unidade 5
137
<IMG ALIGN=right SRC=imagem.jpg ALT=imagem>ALIGN=RIGHT Alinha imagem direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.
Confira o resultado:
<IMG ALIGN=left SRC=imagem.jpg ALT=imagem>ALIGN=LEFT Alinha imagem esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da imagem.
Visualizao:
138
Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:
<IMG align=left SRC=imagem.jpg alt=imagem><IMG align=right SRC=imagem.jpg alt=imagem>...e agora voc pode escrever vontade entre as imagens! O texto que voc desejar, sem a linha ir para abaixo da imagem...
Isso resulta em:
FIGURA 5.13 - EXEMPLO DE VISUALIZAO DE TEXTO ENTRE DUAS IMAGENS
Voc pode incluir qualquer texto HTML aps uma imagem alinhada e ser promovido o retorno automtico do texto no espao existente entre a imagem e a margem ou entre 2 imagens, como no exemplo anterior. O navegador preenche o espao com texto at a parte inferior da imagem e, em seguida, continua a preencher com texto o espao existente abaixo dela. No entanto, quando se usam os atributos ALIGN=LEFT ou ALIGN=RIGHT, todo o texto imediatamente posterior puxado para o lado da imagem. Se for necessrio interromper o fluxo de texto ao lado da imagem, pode-se usar a tag <BR> com o atributo CLEAR=ALL, conforme exemplo abaixo:
<IMG align=left SRC=imagem.jpg alt=imagem><IMG align=right SRC=imagem.jpg alt=imagem>...e agora voc pode escrever vontade entre as imagens! O texto que voc desejar, sem a linha ir para abaixo da imagem...<BR CLEAR=all>Mas agora eu quero interromper essa linha e jogar abaixo das imagens.
Unidade 5
139
Visualizao:
Note que o texto est contornando as imagens, mas somente at determinado ponto:<BR CLEAR=all>. A partir deste ponto, o texto jogado para a prxima margem livre em qualquer um dos lados da janela.
HSPACE e VSPACE
Com a capacidade de promover o retorno automtico do texto ao redor de uma imagem, possvel que voc queira tambm ajustar o espao existente ao redor dessa imagem. Voc pode controlar o espao em volta da imagem colocando o valor em pixels da margem desejada. possvel definir as margens separadamente ou em conjunto. Os atributos HSPACE e VSPACE (introduzidos na HTML 3.2) permitem isso. O atributo VSPACE controla o espao acima e abaixo da imagem. Ou seja, os textos que forem escritos ao redor da imagem no ficaro grudados nela. A sintaxe a seguinte:
<IMG SRC=imagem VSPACE=espaovertical>
O atributo HSPACE controla o espao esquerda e direita da imagem. Ou seja, os textos que forem escritos ao redor da imagem no ficaro grudados nela. A sintaxe a seguinte:
<IMG SRC=imagem HSPACE=espaohorizontal>
140
Esses atributos surgiram para melhorar ainda mais a apresentao das imagens junto com os textos. Tambm so conhecidos como atributos de moldura. O efeito desses atributos pode ser percebido nos textos a seguir. No primeiro texto, as imagens no tm atributos de moldura ( fcil notar como o texto fica grudado na imagem):
...e agora voc pode escrever<IMG align=left SRC=imagem.jpg alt=imagem WIDTH=138 HEIGHT=65> vontade entre as imagens! O texto que voc desejar, sem a linha ir para abaixo da imagem...... ter um texto posicionado no ponto em que a margem <IMG align=right SRC=imagem.jpg alt=imagem WIDTH=110 HEIGHT=71>direita fica livre, com ou no ponto em que a margem esquerda fica livre, com Mas agora eu quero interromper essa linha e jogar abaixo das imagens.
Veja o resultado do cdigo acima no seu navegador:
Neste segundo texto so usadas, respectivamente, as seguintes formataes:

<IMG align=left SRC=imagem.jpg alt=imagem WIDTH=138 HEIGHT=65 VSPACE=30>
e
<IMG align=right SRC=imagem.jpg alt=imagem WIDTH=110 HEIGHT=71 HSPACE=40>
Unidade 5
141
Neste segundo texto, a primeira imagem surgir no texto com espaamento vertical em relao ao texto e a segunda imagem com espaamento horizontal em relao ao texto. Veja o resultado mostrado no navegador abaixo:
Vamos testar? Que tal, agora, voc utilizar os alinhamentos em conjunto como no exemplo abaixo? Faa um teste no seu navegador. Crie uma imagem chamada imagem.jpg e guarde na mesma pasta do seu arquivo que contm o cdigo HTML abaixo:
...e agora voc pode escrever <IMG align=left SRC=imagem.jpg alt=imagem WIDTH=118 HEIGHT=65 VSPACE=30 HSPACE=30> vontade entre as imagens! O texto que voc desejar, sem a linha ir para abaixo da imagem...... ter um texto posicionado no ponto em que a margem <IMG align=right SRC=imagem.jpg alt=imagem WIDTH=100 HEIGHT=71 HSPACE=30 VSPACE=30 border=3>direita fica livre, com ou no ponto em que a margem esquerda fica livre, com Mas agora eu quero interromper essa linha e jogar abaixo das imagens. Acrescentando mais texto pois assim fica mais visvel o uso dos atributos HSPACE e VSPACE. Podemos observar que as imagens no aparecem to grudadas agora ao texto. Isso em funo dos valores <br clear=all> atribudos aos atributos HSPACE e VSPACE utilizados em conjunto na mesma tag IMG.Na imagem a direita foi colocado uma borda com espessura 3. 142
O resultado no navegador do Internet Explorer este:
Cada um desses atributos (HSPACE e VSPACE) adiciona espao nas duas faces da imagem (em cima e em baixo e direita e esquerda). Portanto, no h como definir uma margem maior apenas esquerda ou somente na parte inferior.
Seo 2 - Referncia de hipertexto com imagem

Uma imagem pode funcionar como um vnculo? evidente que sim! Se voc incluir a tag <IMG> entre as partes de abertura e de fechamento de uma tag de vnculo (<A>), essa imagem funcionar como um ponto ativo (que pode ser selecionado com um clique) referente ao prprio vnculo. A sintaxe basicamente a seguinte:
<A href=URL> <IMG src=nome da imagem > </A>
Unidade 5
143
Se uma frase marcada como ncora de um link, ento ela se apresenta sublinhada; se uma imagem se faz de ncora, ento ela ganha uma borda que indica a sua condio. Neste caso, em vez de colocar o link em um texto, voc estar colocando o link em uma imagem. Veja o exemplo:
<HTML> <HEAD> <TITLE>Exemplo Link em Imagem</TITLE> </HEAD> <BODY BGCOLOR=black TEXT=yellow> <A HREF=pagina2.html> <IMG SRC=imagens/amigos.jpg> </A> </BODY> </HTML>
Vamos verificar o exemplo acima no seu navegador?
FIGURA 5.18 EXEMPLO DE IMAGEM COM LINK
144
Se voc quiser uma borda mais larga, siga o exemplo:
<A HREF=URL><IMG SRC=sol.gif ALT=descrio BORDER=4></A>
E confira o resultado:
FIGURA 5.19 - EXEMPLO DO USO DE IMAGEM COMO LINK
Porm, por questes de apresentao, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o atributo BORDER, voc pode controlar esse detalhe.
<A HREF=URL><IMG SRC=sol.gif ALT=descrio BORDER=0></A>
Assim aparecer no navegador:
FIGURA 5.20 - EXEMPLO DO USO DE IMAGEM SEM BORDA
Unidade 5
145
Portanto, a borda pode ser apresentada tanto em imagens que no so ncora de links como em links. Se voc incluir uma imagem e um texto na ncora, a imagem e o texto se tornaro pontos ativos que conduziro mesma pgina. Veja o exemplo:
<A href=http://www.bol.com.br> <IMG src=sol.gif border=0 alt=BOL>Clique aqui para ir a pgina do BOL </A>
A visualizao deve ser esta:
As imagens que so pontos ativos referentes a vnculos aparecem com uma borda ao redor, como na figura 5.18.
Ateno! Ao utilizar as imagens, tenha em conta que elas podem aumentar consideravelmente o tempo que preciso esperar para se ver os contedos das pginas. Por isso, use-as com cuidado!
146
Seo 3 - Painis de fundo com imagens

Voc j deve ter visto pginas na internet com imagens de fundo. Esta seo consiste no desenvolvimento da capacidade de usar uma imagem como painel de fundo para as suas pginas HTML, em vez de utilizar simplesmente um fundo de determinada cor. Quando voc usa uma imagem em um painel de fundo, essa imagem apresentada lado a lado. Ou seja, esta imagem repetida em fileiras para preencher a janela do navegador. Para criar um painel de fundo, voc precisar de uma imagem que ser repetida para compor esse painel. De modo geral, ao criar uma imagem para essa finalidade, voc precisar verificar se o padro escolhido flui harmoniosamente quando disposto lado a lado. Normalmente, voc pode realizar com cautela algumas operaes de edio na imagem, atravs da utilizao do seu programa preferido de edio de imagens, para ter certeza de que as bordas esto alinhadas. O objetivo que as bordas coincidam perfeitamente umas com as outras, de modo a no haver emendas entre as imagens quando voc as apresentar lado a lado. Voc tambm pode experimentar usar pacotes de clip-art destinados a painis de fundo ou padres lado a lado, que em geral so projetados especificamente para serem apresentados dessa forma. Quando voc tiver essa imagem, tudo o que voc precisar para criar um painel de fundo do atributo BACKGROUND, que faz parte da tag <BODY>. O valor desse atributo um nome de arquivo ou URL que corresponda ao seu arquivo de imagem, como no seguinte exemplo:
<BODY background=fundo.gif>
Unidade 5
147
O resultado visualizado assim:
FIGURA 5.22 - EXEMPLO DE PAINEL DE FUNDO
Seo 4 - Sugestes para um melhor uso das imagens

O uso de imagens hoje um dos assuntos mais discutidos entre usurios e provedores de pginas da web. Todo aquele que deseja projetar pginas da web, incluindo imagens maiores e mais claras para tirar maior proveito dos recursos grficos da web, deve estar ciente de que sempre existir algum com uma conexo lenta de rede, que estar implorando por menos imagens para que seu navegador no leve horas para carregar uma nica pgina. Ao desenvolver websites, voc deve considerar esses aspectos: procure alcanar o ponto de equilbrio entre a criao de uma pgina da web bem estruturada e colorida e a necessidade de transmitir as suas informaes a todo o seu pblico e isso inclui, tambm, as pessoas que no tm acesso s suas imagens. Atente paras as seguintes sugestes:
Fonte: LEMAY, 1998.
148
Voc precisa realmente dessa imagem? - Para cada imagem
que voc inserir na pgina da web, reflita sobre o motivo pelo qual a est incluindo. Essa imagem acrescenta algo ao projeto da pgina? Ela fornece informaes que poderiam ser substitudas por texto? Ou voc simplesmente a incluiu porque gosta do resultado produzido? Uma pgina simples com apenas algumas imagens de cones costuma produzir um efeito melhor do que uma pgina que apresenta uma imagem enorme, sofisticados botes tridimensionais e marcadores sombreados. leva menos tempo para ser transferida na internet. Por isso, o uso dessas imagens faz a pgina da web ser carregada mais rapidamente e causa menos frustrao aos usurios que tentam l-la em uma conexo lenta de rede. Para criar imagens pequenas, voc pode reduzir as dimenses fsicas reais dessas imagens na tela. Pode, tambm, criar tamanhos de arquivos menores para as suas imagens atravs da reduo do nmero de cores. Uma boa regra consiste em procurar manter as imagens com menos de 20KB. Esse tamanho pode parecer pequeno, mas um arquivo simples de 20 KB leva quase 20 segundos para ser carregado por um download em uma conexo de 14,4 Kbps. Multiplique esse tempo pelo nmero de imagens contidas na pgina da web e voc ver que a carga dessa pgina pode levar um tempo considervel. imagens o mximo possvel, em pginas isoladas e em vrias pginas. Se, por exemplo, voc tiver imagens como marcadores, use a mesma para todos os marcadores, em vez de usar diversas imagens. A reutilizao de imagens proporciona o projeto padronizado das pginas, que faz parte da criao de uma identidade visual global para o seu site. E o mais importante que, assim, o seu navegador tem de fazer apenas uma vez o download delas. utilizando o atributo ALT nas suas imagens, passe a us-lo. Esse atributo muito til, pois permite que a sua pgina da web seja lida por navegadores de texto.
Mantenha as imagens pequenas! - Uma imagem pequena
Procure reutilizar imagens! - Procure reutilizar as mesmas
Fornea alternativas s imagens! - Se voc ainda no estiver
Unidade 5
149
Seo 5 - Msica
Voc pode incluir em sua pgina um som de fundo. Com isso, sempre que algum acess-la, este som ser tocado. Desta forma, voc pode fazer seu site ter mais recursos e personalidade. Os arquivos de som ideais para serem inseridos em uma home page so aqueles no formato MIDI (.MID), mas voc tambm pode incluir sons do tipo WAVE (.WAV). Existem duas maneiras de colocar msicas em seu site. A primeira com a tag <BGSOUND> que s reconhecida pelo Internet Explorer. Para utilizar esta tag, siga o exemplo:
<BGSOUND src=arquivo.mid>
Onde:
arquivo.mid o arquivo de msica.
Caso voc queira que a msica se repita, adicione o atributo loop=infinite.
A segunda maneira de adicionar msica ao seu site com a tag <EMBED> que, por ser reconhecida pelo Internet Explorer e Netscape, a mais recomendada. Para utiliz-la, siga o exemplo:
<EMBED src=arquivo.mid>
150
Essa tag tambm pode ser usada com alguns atributos. Veja o exemplo:
<embed src=nome da msica autostart=true loop=10>
Onde:
Em "nome da musica", voc coloca o nome da msica mid ou wav. Em "loop", voc coloca o nmero de vezes que o som ser repetido. Em "autostart", voc define se quer que a msica comece a tocar sozinha (atributo TRUE). Caso contrrio, voc deve colocar FALSE, opo na qual o usurio ter que clicar no boto de play para ouvir a msica.
Se voc quiser que a msica fique se repetindo infinitamente, basta colocar infinity no lugar de um nmero. No necessrio colocar </embed> neste caso.
Ateno! O Netscape e o Internet Explorer tm algumas diferenas em seu sistema e, por isso, em algumas verses do Netscape o som pode no tocar. recomendado usar arquivos mid por serem bem menores que os wavs.
Unidade 5
151
Sntese
Um dos principais recursos que fazem a WWW se destacar em relao aos outros documentos de informaes da internet consiste na capacidade dos documentos da web conterem imagens em cores. Com certeza, foi graas a essas imagens que a web se tornou to conhecida e utilizada em um curto perodo de tempo. Para serem inseridas em pginas da web, as imagens precisam estar no formato GIF ou JPEG e ter dimenses suficientemente reduzidas para poderem ser carregadas rapidamente por download em uma conexo lenta. Nesta unidade, voc tambm aprendeu que a tag <IMG> da HTML permite inserir uma imagem na pgina da web, utilizando atributos bsicos, que contam com o suporte da HTML padro:
Tipo
Localizao
Sintaxe
SRC=localizao WIDTH=tamanho (em pixels ou % da pgina) HEIGHT=tamanho (em pixels ou % da pgina) BORDER=tamanho (em pixels) ALT=texto (usa-se em caso de no aparecer a imagem) ALIGN=tipo (o modo como a imagem ser posicionada verticalmente em relao ao texto existente ao redor)
Exemplo
<IMG SRC=linkdaimagem.tipo>
Comprimento
<IMG SRC=linkdaimagem.tipo WIDTH=10>
Altura
<IMG SRC=linkdaimagem.tipo HEIGHT=20>
Borda
<IMG SRC=linkdaimagem.tipo BORDER=2>
Alternativa
<IMG SRC=linkdaimagem.tipo ALT=Minha Foto>
Alinhamento
<IMG SRC=linkdaimagem.tipo ALIGN=top> <IMG SRC=linkdaimagem.tipo ALIGN=middle> <IMG SRC=linkdaimagem.tipo ALIGN=bottom>
Alm das imagens, voc aprendeu a incluir painis de fundo compostos por padres ou imagens lado a lado, atravs do atributo BACKGROUND, da tag <BODY>, com a imagem que ser usada para compor o painel.
152
A partir de seus estudos, leia com ateno e resolva a atividade programada para a sua auto-avaliao. 1. Que tal acrescentar um arquivo mid em sua pgina index.html, como sua atividade de auto-avaliao?
Saiba mais
Voc pode saber mais sobre o assunto estudado nesta unidade consultando as seguintes referncias:
LEMAY, Laura. Aprenda a criar pginas web com HTML e XHTML em 21 Dias. So Paulo: Makron Book Editora, 2002.
E os seguintes sites:

http://www.silicio.com.br/html/dicas/abertura.html (Silcio: o portal brasileiro na internet) http://www.w3schools.com/html/html_images.asp (HTML Images)
Unidade 5
153
unidade 6
Tabelas
Definir tabelas em HTML. Criar legendas, clulas de cabealho e de dados. Modificar o alinhamento da clula. Criar clulas que ocupam vrias linhas ou colunas. Trabalhar com cores nas tabelas. Elaborar tabelas nos seus documentos da web.
Sees de estudo
Seo 1 Elementos bsicos de tabelas Seo 2 Alinhamento da tabela e das clulas Seo 3 Dimenses da tabela Seo 4 Cor em tabelas

As tabelas so construes avanadas em HTML, que permitem a voc organizar um texto, imagens e outro tipo de contedo HTML em linhas e colunas, com ou sem bordas. Elas podem ser usadas no apenas para apresentar dados em um formato tabular, mas tambm para a definio do layout da pgina e para o controle do posicionamento dos vrios elementos HTML em uma pgina. As tabelas tornaram-se to conhecidas, que a maioria dos principais navegadores hoje oferece suporte para esse recurso. A formatao de tabelas foi adotada bem antes de sua incluso na definio de HTML. A manipulao de tabelas, mesmo em editores, trabalhosa. A maior diferena entre tabelas em HTML e em editores como o MS Word, entretanto, o fato das tabelas em HTML serem definidas apenas em termos de linhas e no de colunas. Mas isso ser percebido no decorrer desta unidade. Tabelas implementam um conceito importante de layout: as grades, segundo as quais organizamos textos e ilustraes de maneira harmoniosa. Como j foi possvel perceber, as tabelas contm textos, listas, pargrafos, imagens, formulrios e vrias outras formataes - inclusive outras tabelas. Novas verses de HTML e de navegadores populares vm acrescentando diversos atributos s tabelas e nosso objetivo aqui saber lidar com a maioria desses recursos disponveis. Cientes dessa possibilidade, vamos em frente!
156
Seo 1 - Elementos bsicos de tabelas

Para criar tabelas em HTML, voc deve definir as partes de sua tabela e os elementos HTML a serem inseridos. Em seguida, delimite essas partes com o cdigo HTML de tabela. Por ltimo, aprimore o aspecto visual da tabela atravs de alinhamentos, bordas e clulas coloridas. Antes de entrarmos no cdigo HTML propriamente dito para criar uma tabela, permita-nos definir alguns termos para que voc entenda o que ser descrito:
Legenda - indica o assunto ao qual a tabela se refere, como, por
exemplo, Estatsticas das Eleies. As legendas so opcionais.
Cabealhos da tabela - identificam as linhas ou as colunas, ou
ambas. Em geral, os cabealhos da tabela so apresentados em uma fonte maior ou enfatizada, de alguma forma diferentes em relao ao restante da tabela. Os cabealhos da tabela tambm so opcionais. tabela. A combinao dos cabealhos com os dados resulta na parte essencial da tabela.
Dados da tabela - consistem nos valores que compem a
Clulas da tabela - consistem em cada um dos quadrados que
a compem. Uma clula pode conter dados normais de tabela ou um cabealho de tabela.
Feitas estas consideraes preliminares, vamos aprender algumas tags prprias para a formatao da tabela:
A tag <TABLE>
Para criar uma tabela em HTML, utilize as tags <TABLE>...</ TABLE> que contm o cdigo referente a uma legenda e o contedo da prpria tabela.
Unidade 6
157
O atributo mais comum da tag <TABLE> o atributo BORDER, que indica a apresentao da borda. Veja o exemplo:
<TABLE BORDER=borda> ... </TABLE>
Definir BORDER=0 significa que a borda no tem largura e, portanto, no apresentada. BORDER=1 cria uma borda de um pixel de largura, BODER=2 cria uma borda de 2 pixels de largura e assim por diante. Alm disso, se voc omitir o atributo BORDER, os navegadores no devero apresentar uma borda. As tabelas sem borda so teis quando voc deseja usar a estrutura da tabela para fins de layout, mas no quer, necessariamente, apresentar a estrutura de uma tabela na pgina.
Linhas e clulas
Entre as tags <TABLE>...</TABLE> voc define o contedo da tabela. As tabelas so especificadas linha por linha em HTML e a definio de cada linha contm definies referentes a todas as clulas dessa linha. Por isso, para definir uma tabela, voc comea definindo a primeira linha e cada uma de suas clulas e, em seguida, define a segunda e suas respectivas clulas e assim por diante. As colunas so calculadas automaticamente, com base na quantidade de clulas de cada linha. Cada linha da tabela indicada pela tag <TR> e termina a tag de fechamento </TR>. Cada linha da tabela por sua vez tem vrias clulas, que so indicadas pelas tags <TH>...</TH> (para clulas de cabealho) e <TD>...</TD> (para clulas de dados). Voc pode ter quantas linhas quiser e quantas clulas forem necessrias em cada linha, para compor as suas colunas. Mas deve verificar se cada linha tem o mesmo nmero de clulas para que as colunas fiquem alinhadas.
158
Legendas
As legendas de tabela informam ao leitor o assunto da tabela. Embora voc possa simplesmente usar um pargrafo normal ou um cabealho como um rtulo para a sua tabela, a tag <CAPTION> tem justamente essa finalidade de legenda. Mas o que fazer se voc no quiser usar uma legenda? Voc no precisa inclu-la. As legendas so opcionais. A tag <CAPTION> includa na tag <TABLE>, antes das linhas da tabela, e contm o ttulo da tabela. Ela fechada pela tag </CAPTION>. O atributo ALIGN da legenda determina o seu alinhamento. Por padro, a legenda colocada na parte superior da tabela (ALIGN=top) Vejamos o exemplo de uma tabela simples com legenda:
<TABLE BORDER=4> <CAPTION>Primeiro exemplo</CAPTION> <TR> <TH>Coluna 1</TH><TH>Coluna 2</TH> </TR> <TR> <TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD> </TR> <TR> <TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD> </TR> </TABLE>
Visualize agora:
FIGURA 6.1 EXEMPLO DE VISUALIZAO DE TABELA COM LEGENDA POR COLUNA
Unidade 6
159
A tag <TH> indica uma clula que tambm um cabealho da tabela e a tag <TD> indica uma clula comum da tabela (TD significa Table Data = dados da tabela). Os cabealhos geralmente so apresentados de forma diferente das clulas da tabela, como, por exemplo, em uma fonte em negrito. O exemplo anterior mostra um cabealho apresentado na borda superior da tabela, atravs da tag <TH> includa na primeira linha. Para apresentar os cabealhos na borda esquerda da tabela, inclua cada uma das tag s <TH> na primeira clula de cada linha, como neste exemplo:
<TABLE BORDER=4> <CAPTION>Primeiro exemplo</CAPTION> <TR> <TH>Linha 1</TH> <TD>linha 1, coluna 1</TD>
</TR> <TR> <TH>Linha 2</TH> <TD>linha 2, coluna 1</TD>
</TR> </TABLE>
A visualizao fica assim:
FIGURA 6.2 EXEMPLO DE VISUALIZAO DE TABELA COM LEGENDA POR LINHA
160
Os cabealhos e os dados da tabela podem conter qualquer texto ou cdigo HTML, ou ambos, incluindo vnculos, listas, formulrios, imagens e outras tabelas.
Clulas vazias
E se voc quisesse ter uma clula sem qualquer contedo? Isso simples. Basta definir uma clula com a uma tag <TH> ou <TD> sem especificar texto algum, como neste exemplo:
<TABLE BORDER=3> <TR> <TD></TD> <TD>20</TD> <TD>30</TD>
</TR> </TABLE>
s vezes, uma clula vazia desse tipo apresentada como se a clula no existisse:
FIGURA 6.3 EXEMPLO DE VISUALIZAO DE TABELA COM A PRIMEIRA CLULA INEXISTENTE
Unidade 6
161
Se voc quiser forar a apresentao de uma clula vazia, pode incluir uma quebra de linha nessa clula, sem inserir texto algum:
<TABLE BORDER=3> <TR> <TD><BR></TD> <TD>20</TD> <TD>30</TD>
</TR> </TABLE>
No navegador fica assim:
FIGURA 6.4 EXEMPLO DE VISUALIZAO DE TABELA COM A PRIMEIRA CLULA VAZIA
162
Seo 2 - Alinhamento da tabela e das clulas

Nesta seo, voc v como as tags auxiliam no alinhamento da tabela e das clulas.
Alinhamento da tabela
Os elementos dentro da tabela podem ser alinhados da mesma forma que um pargrafo comum. Por padro, as tabelas so apresentadas em uma linha no lado esquerdo da pgina, com o restante do texto acima ou abaixo da tabela. No entanto, ao usar o atributo ALIGN, voc pode alinhar as tabelas na margem esquerda ou direita e promover o retorno automtico do texto ao redor delas, exatamente como faria com as imagens. As linhas e clulas podem ter alinhamentos definidos atravs dos atributos:
ALIGN
= alinhamento horizontal = alinhamento vertical
VALIGN
Esses atributos devem ser usados dentro das tag s <TR> e <TD> (alm de <TH>, se for o caso). Por padro, as clulas de dados so alinhadas:
no no
sentido horizontal: alinhamento esquerda sentido vertical: alinhamento no centro da clula
Unidade 6
163
Alinhamento da clula
Quando as suas linhas e clulas estiverem na posio adequada e a tabela estiver alinhada corretamente na pgina, voc poder, ainda, alinhar os dados contidos em cada clula para obter o melhor efeito possvel com base no contedo da sua tabela. As tabelas oferecem vrias opes para o alinhamento dos dados contidos nas clulas, tanto na horizontal como na vertical. Alinhamento horizontal:
ALIGN=LEFT:
alinha o contedo esquerda. alinha o contedo direita. alinha o contedo ao centro.
ALIGN=RIGHT:
ALIGN=CENTER:
Alinhamento vertical:
VALIGN=BASELINE:
mantm as linhas de texto com o mesmo alinhamento (para ser usado dentro de <TR> ou no primeiro <TD> de uma linha). alinha o contedo no topo. alinha o contedo ao centro. alinha o contedo na base da clula.
VALIGN=TOP:
VALIGN=MIDDLE:
VALIGN=BOTTOM:
Veja como esses alinhamentos funcionam nas clulas:
<TD ALIGN=alinhamento_horizontal>Texto da clula</TD> <TD VALIGN=alinhamento_vertical>Texto da clula</TD>
164
O alinhamento pode ser assim resumido no quadro abaixo:

Alinhamento Horizontal Alinhamento Vertical
ALIGN=LEFT VALIGN=TOP VALIGN=MIDDLE VALIGN=BOTTOM ALIGN=CENTER ALIGN=RIGHT
Ateno! A tabela acima foi feita especialmente para mostrar as diferenas entre os alinhamentos. Uma tabela comum ajusta o tamanho de suas clulas ao contedo, desta seguinte forma:
Confira a visualizao:
FIGURA 6.5 EXEMPLO DE UMA TABELA
Vamos utilizar um texto mais longo na segunda clula da segunda coluna para demonstrar o alinhamento padro.
<TABLE BORDER=1> <TR> <TH>Ttulo 1</TH> <TH>Ttulo 2</TH> </TR> <TR> <TD>Clula 1</TD> <TD><B>Clula 2</B><P> Quando existe um texto longo, a clula expandida at margem da janela do navegador. Para controlar a apresentao de texto dentro da tabela, pode-se modificar as dimenses da clula. </TD> </TR> </TABLE>
Unidade 6
165
A visualizao esta:
FIGURA 6.6 EXEMPLO DE ALINHAMENTO DE TABELA
Observe que a largura da coluna da direita foi ampliada para que o texto da clula 2 aproveitasse at o final da margem do navegador. Se a largura da janela do navegador for diminuda, tambm diminui a largura da segunda coluna. Vamos, agora, melhorar a aparncia da tabela ajustando a largura da clula 2 em 300 pixels. Assim, a largura de toda a segunda coluna ser ajustada. Aproveitamos este exemplo para alinhar o texto da clula 1 no topo e mudar a largura da borda da tabela. Se voc observar, tambm, as clulas de cabealho por padro so centralizadas verticalmente e horizontalmente:
<TABLE BORDER=3> <TR> <TH>Ttulo 1</TH> <TH>Ttulo 2</TH>
</TR> <TR> <TD valign=top>Clula 1</TD> <TD width=300><B>Clula 2</B><P> A largura de cada clula pode ser controlada individualmente utilizando-se o atributo <tt>width</tt>.</TD>
</TR> </TABLE>
166
Qual o resultado do cdigo acima? Qual a aparncia de sua tabela agora?
Alinhamento combinado
Repare que uma mesma clula pode ter atributos ALIGN e VALIGN combinados:
<TD ALIGN=alinhamento_horizontal VALIGN=alinhamento_ vertical>Texto da clula</TD>
Veja algumas combinaes na tabela abaixo:

ALIGN=CENTER, VALIGN=TOP
Alinhamento horizontal e vertical

ALIGN=LEFT, VALIGN=BOTTOM
ALIGN=RIGHT, VALIGN=MIDDLE
Alinhamento de linhas
Acima, voc viu o alinhamento na tag TD. O alinhamento pode ser aplicado a linhas inteiras na tag da linha TR, com a seguinte sintaxe:
<TR ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da clula</TR>
Porm, o alinhamento declarado em uma clula prevalece sobre o alinhamento da linha, como se v no exemplo:
Unidade 6
167
Center
center TD VALIGN=top
center
TD ALIGN=right
bottom
bottom
bottom
FIGURA 6.7 EXEMPLO DE ALINHAMENTO COMBINADO EM TABELA
Tal resultado pode ser interessante, conforme sua necessidade.
Clulas que ocupam vrias linhas ou colunas

Todas as tabelas que voc criou at o momento tinham um valor para cada clula e, s vezes, uma clula vazia. Voc, tambm, pode criar clulas que ocupem vrias linhas ou colunas da tabela. Para criar uma clula que ocupa vrias linhas ou colunas, voc deve incluir o atributo COLSPAN (para colunas) e ROWSPAN (para linhas) nas tag s <TH> ou <TD> junto com o nmero de linhas ou colunas que deseja que a clula ocupe. O exemplo abaixo mostra uma tabela com duas linhas e duas colunas. O nmero de colunas definido pelo nmero de clulas presentes nas linhas. possvel expandir as clulas para que elas ocupem o espao de mais de uma coluna:
<TABLE BORDER=2> <TR> <TD COLSPAN=2>Clula expandida</TD> </TR> <TR> <TD>Clula 1</TD><TD>Clula 2</TD> </TR> <TR> <TD>Clula 3</TD><TD>Clula 4</TD> </TR> </TABLE>
168
FIGURA 6.8 EXEMPLO DE CLULA EXPANDIDA OU MESCLADA POR LINHA
Agora vamos expandir as clulas para que ocupem o espao de mais de uma linha.
<TABLE BORDER=3> <TR> <TD ROWSPAN=2>Clula expandida</TD> <TD>Clula 1</TD><TD>Clula 2</TD>
</TR> <TR> <TD>Clula 3</TD><TD>Clula 4</TD> </TR> </TABLE>
Observe no seu navegador:
FIGURA 6.9 EXEMPLO DE CLULA EXPANDIDA OU MESCLADA POR COLUNA
Unidade 6
169
A soluo necessria para fazer uma clula expandida diferente em cada um dos exemplos anteriores. No caso da clula expandida na largura de duas colunas, ela ficou em uma linha diferente das clulas 1 e 2. No segundo exemplo, para deixar a clula expandida da altura de duas linhas foi preciso coloc-la na mesma linha das clulas 1 e 2. Podemos expandir colunas e linhas em uma mesma tabela. Os dados contidos nessa clula preenchero a largura ou o comprimento das clulas combinadas, como no exemplo a seguir:
<TABLE BORDER=1> <TR><TH COLSPAN=2>Colunas 1 e 2</TH></TR> <TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR> <TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR> <TR><TH ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR> <TR><TD>duas linhas</TD></TR> <TR><TD>tres linhas</TD></TR> </TABLE>
Vamos testar o cdigo acima no seu navegador? Ele ficou parecido com o que est sendo visualizado abaixo? timo! Se no ficou, no se desespere, verifique se no esqueceu de fechar alguma tag. Ou ser que no faltou algum cdigo HTML? Observe!
FIGURA 6.10 EXEMPLO DE CLULA EXPANDIDA
170
Neste exemplo, perceba que o cabealho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabealho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).
Ateno! A identao no cdigo HTML facilita a visualizao de possveis erros e at o entendimento do cdigo.
Uma outra maneira de identarmos o cdigo anterior poderia ser assim:
<TABLE BORDER=1> <TR> <TH COLSPAN=2>Colunas 1 e 2</TH> </TR> <TR> <TD>linha1, coluna 1</TD> <TD> linha 1, coluna 2</TD> </TR> <TR> <TD>linha 2, coluna 1</TD> <TD>linha 2, coluna 2</TD> </TR> <TR> <TH ROWSPAN=3>3 linhas</TH> <TD>uma linha</TD> </TR> <TR> <TD>duas linhas</TD> </TR> <TR> <TD>trs linhas</TD> </TR> </TABLE>
Identao significa organizar o cdigo HTML para o mesmo tornar-se legvel, sabendo, por exemplo, onde inicia e termina uma tag ou, ainda, sabendo quais tags ou texto esto dentro de outras tags. Organizamos o cdigo utilizando espao ou a tecla TAB.
Unidade 6
171
Quais das visualizaes dos cdigos em HTML para o exemplo acima parecem ser mais legveis a voc?! Observe que os dois cdigos representam a mesma coisa, ou seja, trazem como resultado a mesma tela do navegador mostrado anteriormente.
Seo 3 - Dimenses da tabela

Alm de controlar a largura da borda (com o atributo BORDER), possvel definir as dimenses (em pixels) de toda a tabela, espao entre clulas e as margens dentro das clulas. Todos esses controles so feitos atravs de atributos dentro da tag <TABLE>. Os atributos largura da tabela so:
WIDTH:
para definir a largura da tabela. para definir a altura da tabela.
HEIGHT:
Os atributos de espaamento so:
CELLPADDING: CELLSPACING:
para definir a margem dentro das clulas.
para definir o espao entre as clulas.
172
Acompanhe o exemplo:
<TABLE BORDER=2 WIDTH=400 HEIGHT=200 CELLPADDING=20 CELLSPACING=20> <TR> <TD ROWSPAN=2>Clula expandida</TD> <TD>Clula 1</TD><TD>Clula 2</TD>
</TR> <TR> <TD>Clula 3</TD><TD>Clula 4</TD> </TR> </TABLE>
A visualizao a seguinte:
FIGURA 6.11 EXEMPLO DO USO DE TABELA COM DIMENSES ALTERADAS
Os atributos WIDTH e HEIGHT tambm podem ser utilizados para definir o tamanho de clulas especficas. Neste caso, devem ser colocados dentro da tag <TD> (ou <TH>). Vamos estudar detalhadamente cada um deles a seguir.
Unidade 6
173
Atributos de largura
J foi comentado que uma tabela comum ajusta o tamanho de suas clulas ao contedo. Por exemplo:
FIGURA 6.12 EXEMPLO DE TABELA AJUSTADA
Para apresentar uma tabela ocupando determinado espao disponvel na linha, usamos o atributo WIDTH. Esse atributo pode ser aplicado, tambm, a linhas e clulas. Essa largura pode ser definida:
em em
porcentagem (do espao disponvel) - WIDTH=x%; pixels - WIDTH=x.
Abaixo, segue o exemplo de uma tabela ocupando 50% do espao disponvel:

<TABLE BORDER=1 width=50%>
A visualizao como segue:
174
FIGURA 6.13 EXEMPLO DE TABELA OCUPANDO 50% DA JANELA
A seguir, um exemplo de uma tabela ocupando 50% do espao disponvel, com uma coluna de 60% do espao disponvel na tabela:
<TABLE BORDER=1 width=50%> <TR> <TD>janeiro</TD><TD width=60%>fevereiro</TD><TD>maro</TD> </TR> <TR> <TD>abril</TD><TD width=60%>maio</TD><TD>junho</TD> </TR> </TABLE>
Observe o resultado em seu navegador:
FIGURA 6.14 EXEMPLO DE TABELA USANDO 50% DA JANELA E ALTERANDO LARGURA DA 2 COLUNA
Unidade 6
175
Agora, neste outro exemplo, o controle da largura da tabela est limitado dimenso de seu contedo. Ou seja, a tabela ocupar 50% do espao disponvel com uma coluna de 1%. Os ajustes farse-o s outras colunas para a ocupao dos 50%:
<TABLE BORDER=1 width=50%> <TR> <TD>janeiro</TD><TD width=1%>fevereiro</TD><TD>maro</TD> </TR> <TR> <TD>abril</TD><TD width=1%>maio</TD><TD>junho</TD> </TR> </TABLE>
Assim fica a visualizao:
FIGURA 6.15 EXEMPLO DE OCUPAO DE TABELA EM RELAO JANELA E AJUSTE DE COLUNA
Atributos de espaamento
Como voc j verificou, existem dois atributos que permitem o controle de espaamento em tabelas:
176
CELLPADDING estabelece o espao entre o texto e as bordas da clula. CELLSPACING estabelece o espao entre clulas.
Tomemos a mesma tabela simples j vista na figura 6.12:
FIGURA 6.16 EXEMPLO DE TABELA AJUSTADA
Agora, vamos alterar o espao entre o texto e as bordas do exemplo anterior, colocando na tag TABLE, o seguinte cdigo:
<TABLE BORDER=1 CELLPADDING=20>
Observe que o texto afastou-se da borda:
FIGURA 6.17 EXEMPLO DE ESPAAMENTO DO TEXTO EM RELAO S BORDAS DA TABELA
Unidade 6
177
Vamos alterar, agora tambm, o espao entre clulas do exemplo anterior:

<TABLE BORDER=1 CELLSPACING=20>
Veja o espaamento entre as clulas (o preenchimento) foi afetado:
FIGURA 6.18 EXEMPLO DE PREENCHIMENTO DAS BORDAS DA TABELA (AFASTAMENTO ENTRE AS CLULAS)
Podemos, ainda, combinar os dois atributos, alterando o espao entre texto e bordas alm do espao entre clulas, conforme exemplo abaixo:
<TABLE BORDER=1 CELLPADDING=20 CELLSPACING=20>
A tabela assim visualizada:
FIGURA 6.19 EXEMPLO DE ESPAAMENTO E PREENCHIMENTO NA TABELA
178
Voc, agora, j viu grande parte dos recursos disponveis para manipular tabelas, que permitem produzir bons efeitos de apresentao. Vamos, ento, estudar as cores em tabelas?
Seo 4 - Cor em tabelas

Voc vai estudar, nesta seo, como inserir, em tabelas, cor de fundo e de borda alm de como combinar tais cores.
Cor de fundo
Para alterar a cor de fundo de uma tabela, de uma linha ou de uma clula contida em uma linha, use o atributo BGCOLOR das tags <TABLE>, <TR>, <TD> ou <TH>. Novamente, utilize o exemplo dos meses, para propor uma cor de fundo na tabela:
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR=#E1FFD9>
Veja o resultado abaixo:
FIGURA 6.20 EXEMPLO DA UTILIZAO DE CORES EM TABELA
Unidade 6
179
Cada cor de fundo anula a cor de fundo do elemento em que est contida. O fundo de uma tabela, por exemplo, anula o fundo da pgina; o fundo de uma linha anula o fundo da tabela; e as cores das clulas anulam todas as outras cores. Podemos colocar cor de fundo em clulas especficas da tabela, verifique o exemplo a seguir:
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10> <TR> <TD BGCOLOR=#E1FFD9>janeiro</TD> <TD>fevereiro</TD> <TD BGCOLOR=#E1FFD9>maro</TD>
</TR> <TR> <TD>abril</TD> <TD BGCOLOR=#E1FFD9>maio</TD> <TD>junho</TD>
</TR> </TABLE>
FIGURA 6.21 EXEMPLO DO USO DE CORES DE FUNDO EM CLULAS ALTERNADAS
180
Cor de borda
Alguns navegadores permitem que voc altere as cores dos elementos da borda da tabela, atravs da utilizao dos seguintes atributos:
BORDERCOLOR
- define a corda da borda, anulando o aspecto tridimensional da borda padro. - define o componente claro de bordas tridimensionais. - define o componente escuro de bordas tridimensionais.
BORDERCOLORLIGHT
BORDERCOLORDARK
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9" BORDERCOLOR="#00FF00">
Veja o resultado do atributo BORDERCOLOR no navegador:
FIGURA 6.22 EXEMPLO DE BORDA COM COR
Unidade 6
181
Veja este outro exemplo:

<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=10 BORDERCOLOR=#00FF00> <TR> <TD bgcolor=#E1FFD9>janeiro</TD> <TD>fevereiro</TD> <TD bgcolor=#E1FFD9>maro</TD>
</TR> <TR> <TD>abril</TD> <TD bgcolor=#E1FFD9>maio</TD> <TD>junho</TD>
</TR> </TABLE>
A visualizao esta:
FIGURA 6.23 EXEMPLO DE FORMATAO DE TABELA
182
Combinando cores
O Internet Explorer, navegador da Microsoft, permite atribuir cores diferentes para o fundo de cada clula. Basta acrescentar o atributo BGCOLOR com a cor desejada s tag s de clula. Em algumas combinaes de cores ser necessrio tambm modificar a cor das letras. Isso feito com o atributo COLOR dentro da tag <FONT>. Veja o exemplo:
<TABLE BORDER> <TR> <TH BGCOLOR=000000><FONT COLOR=FFFFFF>Comida</FONT></TH> <TH BGCOLOR=000000><FONT COLOR=FFFFFF>Bebida</FONT></TH>
</TR> <TR> <TD BGCOLOR=white>Arroz</TD> <TD BGCOLOR=black><FONT COLOR=WHITE>Vinho</FONT></TD>
</TR> </TABLE>
Visualizao:
FIGURA 6.24 EXEMPLO DE FORMATAO DE TABELA
Unidade 6
183
Sntese
Para melhor auxiliar voc nos seus estudos, abaixo, segue uma sntese das tabelas com os atributos de tabela, coluna e linha:
Sintaxe
<TABLE>...</TABLE> <CAPTION>...</CAPTION> <TR>...</TR> <TH>...</TH> <TD>...</TD>
Definio
define a tabela define o ttulo da tabela delimita uma linha define um cabealho para colunas ou linhas (dentro de <TR>) delimita um elemento ou clula (dentro de <TR>)
Eis um resumo para a tag <TABLE>:

Tipo
Alinhamento Borda Comprimento Altura Cor de fundo Cor da borda Cor da borda escura Cor da borda clara
Sintaxe
ALIGN=LEFT|RIGHT|CENTER BORDER=TAMANHO (em pixels) WIDTH=TAMANHO (em pixels ou % da pagina) HEIGHT=TAMANHO (em pixels ou % da pagina)
Exemplo
<TABLE ALIGN=CENTER>texto</TABLE> <TABLE BORDER=1>texto</TABLE> <TABLE WIDTH=20%>texto</TABLE> <TABLE HEIGHT=20%>texto</TABLE>
<TABLE BGCOLOR=blue>texto</TABLE>
BGCOLOR=COR
BORDERCOLOR=COR
<TABLE BORDERCOLOR=orange>texto</TABLE>
<TABLE BORDERCOLORDARK=red>texto</TABLE> <TABLE BORDERCOLORLIGHT=yellow>texto</TABLE>
BORDERCOLORDARK=COR BORDERCOLORLIGHT=COR
184
Para a tag <TR>:

Tipo
Alinhamento
Sintaxe
ALIGN=LEFT|RIGHT|CENTER|MIDDLE|BOTTOM
Exemplo
<TR ALIGN=CENTER>texto</TR>
Para a tag <TD>:

Tipo
Alinhamento Colunas que ocupa Linhas que ocupa Cor de fundo
Sintaxe
ALIGN=LEFT|RIGHT|CENTER e VALIGN=TOP|MIDDLE|BOTTOM COLSPAN=NUMERO ROWSPAN=NUMERO BGCOLOR=COR
Exemplo
<TD ALIGN=CENTER>texto</TD> <COLSPAN=2>texto</TD> <ROWSPAN=2>texto</TD> <TD BGCOLOR=#123456>texto</TD>
Existe tambm o <TH> que como o <TD>, mas ele j vem com o atributo negrito e centralizado como padro.
Unidade 6
185
Leia com ateno o enunciado seguinte e resolva a atividade programada para a sua auto-avaliao. 1. Caro aluno, voc consegue reproduzir o cdigo HTML que est sendo mostrado no navegador abaixo? Vamos tentar?
FIGURA 6.25 UM EXEMPLO DE TABELA PARA A AUTO-AVALIAO
Pior que os acentos... A formatao de tabelas complicada e o texto fonte chega a ser quase ininteligvel quando montamos tabelas complexas e fazemos uso de seus diversos atributos. A melhor opo para voc montar sua tabela, sem dvida, usar os editores WYSIWYG. Alguns editores de modo texto tm uma interface grfica que ajuda na criao de tabelas, mas a edio de tabelas j existentes precisa ser feita mo.
186
Saiba mais
http://ftp.unicamp.br/pub/apoio/treinamentos/internet/webpages.pdf (Confeco de
webpages)
http://www.pypbr.com/html/htm_avc.asp#table (HTML Avanado)
Unidade 6
187
unidade 7
Frames
Construir Frames Utilizar os atributos de FRAMESET Utilizar os atributos para FRAME Definir a janela alvo atravs do atributo TARGET
Sees de estudo
Seo 1 Links com frames Seo 2 Composio com frames Seo 3 Atributos de FRAMESET Seo 4 Atributos de FRAME Seo 5 Tag NOFRAMES

A especificao de frames em HTML 3.2 ainda est em andamento e nem todos os navegadores oferecem suporte a eles. O Netscape foi o primeiro a implementar essa facilidade (a partir da verso 2.0). Os frames so divises da tela do browser em diversas telas (ou quadros). Com isso, torna-se possvel apresentar mais de uma pgina por vez. Tome como exemplo um ndice principal em uma parte pequena da tela e os textos relacionados ao ndice em outra parte. Os documentos que possuem frames so bonitos e atrativos, por serem diferentes do padro simples de pginas encontradas na web. Eles possibilitam dividir um hipertexto em mltiplas janelas (os frames), nas quais podem ser carregados diferentes documentos HTML. muito fcil colocar frames em pginas. Porm, nem todos os usurios gostam deles, pois nem sempre a navegao fcil, alm de problemas para a impresso e a marcao dos documentos interiores aos frames nos bookmarks. A alternativa natural para os frames so as tabelas. Os frames mudam o conceito de pgina para o navegador e para voc. Ao contrrio de todos os exemplos anteriores, que utilizam uma nica pgina em HTML para apresentar uma tela de informaes, quando voc cria sites na web, atravs da utilizao de frames, uma nica tela composta, na verdade, de diversos documentos HTML separados, que interagem uns com os outros.
Bookmark um atalho que marca o endereo de um site j acessado para ser acessado novamente. Os navegadores possibilitam armazenar bookmarks ou favoritos, que guardam a URL dos sites tornando fcil visit-los novamente. uma lista de endereos j visitados na internet.
190
A figura seguinte mostra que necessrio um mnimo de quatro documentos distintos para criar uma tela como a representada a seguir:
FIGURA 7.1 ESTRUTURA BSICA DE FRAMES
Os frames so gerados atravs de dois componentes bsicos:

elemento
FRAMESET - responsvel pela diviso do documento em campos separados; FRAME - que indica as pginas que devem ser carregadas em cada uma dessas subdivises.
elemento
O documento que implementa frames, em que se define a estrutura das janelas, conhecido como Frame Document. nele que se estabelece o nmero de janelas desejado e a sua distribuio na tela. Dentro de um Frame Document, as marcaes <BODY> e </BODY> so substitudas por <FRAMESET> e </FRAMESET>.
Unidade 7
191
Construindo Frames com o elemento FRAMESET

Como j dito, a tag <FRAMESET> divide um documento em diversas regies. Para tal, ela faz uso dos atributos COLS e ROWS, referentes a divises verticais (como colunas em uma tabela) e horizontais (como linhas) entre as janelas na tela. Os atributos FRAMEBORDER, BORDER e BORDERCOLOR tambm podem ser utilizados para modificar o layout dos frames. Veremos esses atributos mais adiante.
Ateno! Observe que dentro de um FRAMESET no se pode utilizar nenhum outro dos elementos vlidos no corpo de um texto HTML comum.
Uma pgina com frames tem um texto fonte semelhante a:
<HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS=20%, 80%> <FRAME SRC=indice1.html> <FRAME SRC=texto.html NAME=principal> <NOFRAME> <BODY> <H2>Bem-vindo pgina do assunto X!</h2> <P>Bl bl bl bl bl bl bl bl bl bl </BODY> </NOFRAME> </FRAMESET> </HTML>
192
Conforme o exemplo acima, a parte FRAMESET define a diviso da pgina em quadros. Neste caso, a pgina ser dividida em duas colunas, sendo a primeira com 20% do tamanho da tela e a segunda coluna com os restantes 80% da tela. Observe que, dentro da formatao de FRAMESET, temos os FRAME SRC, que fazem referncias s pginas que sero mostradas nos frames definidos. Assim, no cdigo descrito acima, a pgina indice1.html ser mostrada na primeira coluna (que ocupar 20% da tela) e a pgina texto.html ser mostrada na segunda (ocupando 80% da tela). O contedo do arquivo indice1.html este:
<HTML> TESTANDO FRAME... 20% </HTML>
E o contedo o arquivo texto.html este:

<HTML> TESTANDO FRAME... 80% </HTML>
Assim, o resultado apresentado no navegador ser:
FIGURA 7.2 EXEMPLO DE VISUALIZAO DE UM FRAME
Unidade 7
193
A formatao de frames inclui tambm uma parte NOFRAME, que mostrada normalmente pelos navegadores que no suportam sua apresentao.
Seo 1 - Links com Frames

Sempre que se aciona um link dentro de uma pgina, padro que a pgina referente a esse link seja carregada na mesma janela da pgina anterior.
Definindo a janela Alvo atravs do Atributo TARGET

O atributo TARGET permite controlar em qual janela um link especfico ser exibido quando o usurio clicar sobre ele. Por exemplo, pode-se ter uma janela lateral com uma espcie de ndice, em que vrios links estaro disponveis, e uma outra janela em que sero carregados os documentos referentes a esses links. Para projetar um documento com essas caractersticas, preciso que o atributo TARGET seja utilizado, pois ele responsvel por indicar em que lugar um determinado documento deve ser visualizado. aqui que entra a necessidade de adicionar o atributo NAME ao elemento FRAME, pois a partir do atributo NAME que o elemento TARGET saber em qual janela da tela deve ser exibido o documento. No exemplo a seguir um link dentro da janela direita faz com que a pgina apontada seja mostrada ocupando a janela da direita (coluna de 80%):
194
<HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS=20%, 80%> <FRAME SRC=indice1.html> <FRAME SRC=texto.html NAME=principal> <NOFRAME> <BODY> <H2>Bem-vindo pgina do assunto X!</h2> <P> Bl bl bl bl bl bl bl bl bl bl </BODY> </NOFRAME> </FRAMESET> </HTML>
Veja que no cdigo fonte acima o frame associado apresenta. html tem um atributo NAME. Nomear um frame permite que direcionemos o frame em que ser apresentado o documento de destino de um link. No arquivo indice1.html, temos o seguinte contedo:
<HTML> TESTANDO FRAME... 20% <a href=apresenta.html TARGET=principal>Exemplo n.2</a>. </HTML>
Deste modo, indica-se que se est definindo (pelo atributo target) o frame em que a pgina de destino do link (apresenta.html) ser mostrada.
Unidade 7
195
No arquivo apresenta.html, temos o seguinte contedo:
<HTML> Aqui estamos vendo a apresentao de frames com link. </HTML>
O resultado no seu navegador ser assim:
FIGURA 7.3 EXEMPLO DE LINKS COM FRAMES
Quando clicarmos em Exemplo n 2, no frame da esquerda, o resultado ser mostrado no frame da direita, conforme figura a seguir:
FIGURA 7.4 EXEMPLO DE LINK J VISITADO COM FRAME
Se voc no entendeu como funciona esse mecanismo de direcionamento, reveja o exemplo e teste todos os links para verificar o que foi dito neste item, pois esta estrutura bsica de FRAMES em HTML fundamental!
196
Limpando a tela
H basicamente dois efeitos possveis para limpar a apresentao de frames e isso feito com targets especiais (como voc j viu, o atributo TARGET foi apresentado no item Links com Frames):
TARGET="_top
limpa os frames que estiverem ativos, apresentando a pgina de destino na tela inteira. abre uma nova janela do browser para apresentar a pgina de destino.
TARGET="_blank
Seo 2 - Composio com Frames

Como voc j observou, a formatao FRAMESET tem atributos que definem a diviso do espao da janela do browser em colunas ou linhas. Podemos utilizar uma combinao de framesets para criar diversos modos de apresentao do contedo de um site. Antes de ver algumas composies, lembre-se de que os pontoschave para o mecanismo dos frames so estes, mostrados no item anterior:
a a
nomeao dos frames; e
declarao dos targets dos links, que definem o frame no qual as pginas de destino sero mostradas.
Embora quase todos os editores WYSIWYG de HTML dem suporte criao de frames, necessrio que o autor se preocupe com os detalhes de nomeao de frames e de direcionamento de links.
Unidade 7
197
Veja como montar dois frames em coluna:

<FRAMESET COLS=x, y> <FRAME SRC=col1.html> <FRAME SRC=col2.html>
FIGURA 7.5 EXEMPLO DE FRAME EM COLUNA
</FRAMESET>
Como montar dois frames em linha:

<FRAMESET ROWS=x, y> <FRAME SRC=lin1.html> <FRAME SRC=lin2.html>
FIGURA 7.6 - EXEMPLO DE FRAME EM LINHA
</FRAMESET>
Para montar esta estrutura abaixo, voc deve criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em linha:
<FRAMESET COLS=x, y> <FRAME SRC=col1.html> <FRAMESET ROWS=x, y>
FIGURA 7.7 - EXEMPLO DE DOIS FRAMES EM COLUNA E DOIS FRAMES EM LINHA
<FRAME SRC=lin1.html> <FRAME SRC=lin2.html> </FRAMESET> </FRAMESET>
198
Para montar a estrutura abaixo, crie primeiro dois frames em linha e componha a segunda linha com dois frames em coluna:
<FRAMESET ROWS=x, y> <FRAME SRC=lin1.html> <FRAMESET COLS=x, y>

FIGURA 7.8 - EXEMPLO DE DOIS FRAMES EM LINHA E DOIS FRAMES EM COLUNA
<FRAME SRC=col1.html> <FRAME SRC=col2.html> </FRAMESET> </FRAMESET>
Ateno! As composies com mais de um frameset precisam ser bem planejadas para funcionarem de maneira adequada.
Seo 3 - Atributos de FRAMESET

Nesta seo voc estudar os seguintes atributos de FRAMESET: ROWS; COLS, FRAMEBORDER, BORDER e BORDERCOLOR.
ROWS
Este atributo define divises horizontais entre janelas. Vem sempre acompanhado de valores que definem que espao da tela ser ocupado por cada janela. Cada janela a ser criada dever
Unidade 7
199
ter, portanto, um valor associado e esses valores devem estar separados por vrgula. Veja a sintaxe:
(ROWS=valor, valor, valor...)
Cada valor poder ser:

Refere quantos pixels cada frame (ou janela) deve ocupar. A desvantagem dessa notao que no possvel ter o controle do valor total de pixels que o navegador do usurio contm. Corresponde a um valor percentual do tamanho da pgina, sempre somando um total de 100%. Esse o mtodo mais simples. Define o tamanho de uma janela em relao s outras. No exemplo ao lado, os dois primeiros frames vo ocupar um quarto da tela e o terceiro frame ocupar dois quartos, ou seja, metade da tela. Esse exemplo produz o mesmo resultado que o exemplo anterior utilizado no Percentual.
Numrico em pixels (ROWS=30,50)
Percentual (ROWS=25%,25%,50%)
Relativo (ROWS=*,*,2*)
No ltimo caso, do valor relativo, o * funciona como uma varivel: ao se somar os valores de cada um dos campos em que ser dividida a tela, deve-se obter 1 (um). No exemplo anterior, teramos o seguinte: * + * + 2* = 1 > * = 1/4. Por este motivo, as primeiras janelas ocupam um quarto da tela (*) e a terceira janela ocupa um meio (2*). Tambm possvel combinar os valores numricos, percentuais e relativos, como demonstram os exemplos a seguir. Veja como dividir a tela do navegador em trs janelas horizontais, com a do meio mais larga que as de cima e de baixo.
200
<HTML> <HEAD> <TITLE> Documento Frame</TITLE> </HEAD> <FRAMESET ROWS=30%, 40%, 30%> <FRAME SRC=exemplo1.html> <FRAME SCR=exemplo2.html> <FRAME SCR=exemplo3.html> </FRAMESET> </HTML>
EXEMPLO 7.9 EXEMPLO DA TELA DIVIDIDA EM 3 FRAMES EM LINHA
Ateno! Se os arquivos Exemplo1.html, Exemplo2.html e Exemplo3.html no existirem, o resultado na tela naquele frame que indica um dos arquivos inexistente aparecer com a mensagem A pgina no pode ser exibida.
Unidade 7
201
Voc tambm pode propor trs janelas horizontais: a primeira e a ltima com altura fixa e o frame central ocupando o restante do espao ( o prprio navegador que define qual o tamanho do frame central, de acordo com o espao que sobra na tela aps a definio do primeiro e do ltimo frames).
<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD> <FRAMESET ROWS=35, *, 40> <FRAME SCR=exemplo1.html> <FRAME SRC=exemplo2.html> <FRAME SCR=exemplo3.html> </FRAMESET> </HTML>
Visualizando a tela dividida em frames no seu navegador:
EXEMPLO 7.10 EXEMPLO DO USO DE FRAMES EM LINHA COM O FRAME CENTRAL MAIS LARGO
202
Na definio do Frame Document anterior, cada janela ( frame) corresponde a um elemento FRAME que indica, no mnimo, a URL que ser associada a essa regio da tela, atravs do atributo SRC. O elemento FRAME e seus atributos sero descritos em breve.
COLS
O atributo COLS funciona exatamente como a marcao anterior (inclusive no que diz respeito ao modo de apresentao do campo valor). No entanto, este atributo divide a tela em frames ou janelas verticais (assim como as colunas em tabelas), como mostram os exemplos a seguir. A sintaxe a seguinte:
(COLS=valor,valor,valor..)
Acompanhe os exemplos: Aqui se divide a tela em 3 colunas, sendo que a do meio mais larga que as outras duas:
<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD> <FRAMESET COLS=30%, 40% ,30%> <FRAME SRC=exemplo1.html> <FRAME SRC=exemplo2.html> <FRAME SRC=exemplo3.html> </FRAMESET> </HTML>
Vejamos o resultado do cdigo HTML acima no seu navegador.
Unidade 7
203
EXEMPLO 7.11 EXEMPLO DA TELA DIVIDIDA EM 3 FRAMES EM COLUNA
Aqui se divide a tela em duas verticais:

<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD> <FRAMESET COLS=200,*> <FRAME SRC=exemplo1.html> <FRAME SRC=exemplo2.html> </FRAMESET> </HTML>
Vejamos o resultado no seu navegador:
EXEMPLO 7.12 EXEMPLO DA TELA DIVIDIDA EM 2 FRAMES EM COLUNA
204
Da mesma maneira que nos exemplos das linhas (ROWS), o navegador ir definir sozinho qual o tamanho da segunda clula do atributo COLS. Para intercalar janelas verticais e horizontais, necessrio definir vrias reas FRAMESET. Para cada rea delimitada com FRAMESET, pode-se definir o nmero de linhas ou colunas. Contudo, no possvel definir COLS e ROWS para uma mesma rea FRAMESET. Para intercalar linhas e colunas, pode-se fazer como no exemplo a seguir:
<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD>  <FRAMESET ROWS=30%,70%> <FRAME SRC=exemplo1.html>  <FRAMESET COLS=50%,50%> <FRAME SRC=exemplo2.html> <FRAME SRC=exemplo3.html> </FRAMESET> </FRAMESET> </HTML>
Unidade 7
205
EXEMPLO 7.13 EXEMPLO DA TELA DIVIDIDA EM FRAMES POR LINHA E COLUNA
FRAMEBORDER
Este atributo especifica se os frames do FRAMESET devem apresentar uma borda ou no. Se ele for omitido, ser usado o valor (yes ou no) do FRAMESET mais externo. Se nenhum FRAMESET apresentar esse atributo, ento, o valor padro (com bordas) ser usado. O modelo o seguinte:
(FRAMEBORDER=yes|no)
Eis um exemplo:
<FRAMEBORDER=no>
206
Podemos testar o exemplo a seguir utilizando o atributo FRAMEBORDER no FRAMESET:
<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD> <FRAMESET COLS=200,* FRAMEBORDER=no> <FRAME SRC=exemplo1.html> <FRAME SRC=exemplo2.html> </FRAMESET> </HTML>
Veja o resultado do frame sem as bordas no seu navegador:
EXEMPLO 7.14 EXEMPLO DE FRAME SEM BORDA
Unidade 7
207
BORDER
Este atributo especifica a largura da borda que os frames desse FRAMESET devem apresentar. A sintaxe esta:
(BORDER=valor)
BORDER=0 equivale a definir FRAMESET=no. O exemplo a seguir define bordas com espessura de 10 pixels:
<BORDER=10>
BORDERCOLOR
Este atributo especifica a cor da borda que os frames desse FRAMESET devem apresentar. A sintaxe a seguinte:
(BORDERCOLOR=nome-cor|RGB)
Neste caso, voc pode usar tanto o nome da uma cor (nome-cor) quanto o padro RGB:
<BORDERCOLOR=blue>
208
Seo 4 Atributos de FRAME

At este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME (para FRAME). A tag <FRAME> define que pgina HTML ser carregada em cada janela contida em uma rea FRAMESET. Ela aceita seis possveis atributos, cuja utilizao depende das necessidades do criador da pgina (Frame Document):

SRC NAME MARGINWIDTH MARGINHEIGHT SCROLLING NORESIZE
Vejamos cada atributo em separado.
SRC
O atributo SRC define a URL que ser exibida em cada frame. Ele pode ser omitido caso se deseje criar uma regio em branco na tela. A sintaxe esta:
(SRC=url)
Veja o exemplo:
<FRAME SRC=indice.html>
Unidade 7
209
NAME
Esse atributo utilizado para associar um nome a uma das divises do Frame Document. Deve ser usado quando se deseja especificar onde (em que janela) documentos devem ser carregados. um atributo opcional. Por padro, os frames no tm nome, mas quando acontece de se estabelecerem nomes para janelas, estes devem comear com caractere alfanumrico. A sintaxe a seguinte:
(NAME=nome)
<FRAME SRC=inicial.html NAME=navega>
MARGINWIDTH
Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a distncia entre o contedo da pgina e as margens da janela. O valor associado ser em valor absoluto em pixels. O menor valor aceito 1. um atributo opcional. Caso no esteja definido, o navegador usar o seu padro para definir as margens dos frames ou janelas. A sintaxe a seguinte:
(MARGINWIDTH=valor)
Observe o exemplo:
<FRAME SRC=indice.html MARGINWIDTH=3>
210
MARGINHEIGHT
Tambm um atributo opcional. Funciona exatamente como o anterior, s que determina as margens superior/inferior de cada frame. Eis a sintaxe:
(MARGINHEIGHT=valor)
Veja o exemplo:
<FRAME SRC=indice.html MARGINHEIGHT=4>
SCROLLING
Novamente, temos um atributo opcional. Com SCROLLING definido se uma janela deve possuir barra de rolagem ou no. Caso seja definido como YES, a janela sempre possuir uma barra de rolagem visvel. Caso seja definido como NO, nunca haver barra de rolagem. E, finalmente, se vier como AUTO, o navegador aplicar a barra quando necessrio. O valor padro AUTO. Portanto, se o atributo SCROLLING no for definido, o navegador aplicar a barra de rolagem janela em questo, automaticamente, toda vez que o contedo da pgina HTML no couber completamente no frame. A sintaxe esta:
(SCROLLING=yes/no/auto)
Observe o exemplo:
<FRAME SRC=indice.html SCROLLING=yes>
Unidade 7
211
Para dispor o frame sem a barra de rolagem:
<FRAMESET COLS=20%, 80%> <FRAME SRC=indice.html SCROLLING=no> <FRAME SRC=apresenta.html NAME=principal> </FRAMESET>
bom lembrar que a barra de rolagem de um frame fica sempre direita; no possvel, atualmente, mudar essa caracterstica.
NORESIZE
NORESIZE tambm opcional. Esse atributo no possui valor associado; quando ele no aparece, o usurio poder alterar o tamanho da janela, arrastando a sua borda com o mouse. Caso contrrio, a janela ter sempre um tamanho inaltervel. Normalmente, todas as janelas podem ter seu tamanho alterado, j que navegadores diferentes estaro sendo utilizados por diferentes pessoas e as pginas podem no caber na tela, impedindo que os usurios possam l-las. Eis um exemplo:
<FRAME SRC=indice.html NORESIZE>
212
Aqui est um exemplo de elemento FRAME acompanhado de alguns atributos:
<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD> <FRAMESET COLS=200,*,*> <FRAME SRC=Exemplo1.html> <FRAME SRC=Exemplo2.html NAME=indice MARGINWIDTH=3 MARGINHEIGHT=4 SCROLLING=yes NORESIZE> <FRAME SRC=Exemplo3.html> </FRAMESET> </HTML>
EXEMPLO 7.15 EXEMPLO DE ATRIBUTOS NA TAG FRAME
Unidade 7
213
Seo 5 Tag NOFRAMES

Se existem navegadores que no suportam ou no entendem frames, o que fazer para viabilizar Frame Documents que possam ser navegados por eles? justamente a que entra a container tag <NOFRAMES>. Ela possibilita que se crie uma opo de navegao na pgina para quem no possui um navegador que entenda frames. Isso bastante recomendvel! Essa marcao aparece no documento inicial Frame Document. Quando o acesso for feito atravs de um navegador que NO entenda frames, os elementos FRAMESET e FRAME (e NOFRAMES tambm!) sero ignorados pelo navegador e as marcaes entre <NOFRAME> e </ NOFRAME> sero obedecidas, montando-se uma pgina alternativa. Por outro lado, os navegadores que suportam frames ignoram todo contedo entre as marcaes NOFRAMES. Veja o exemplo a seguir:
<HTML> <HEAD> <TITLE> Noframes </TITLE> </HEAD> <FRAMESET ROWS=30%,70%> <FRAME SRC=exemplo1.htm> <FRAMESET COLS=50%,50%> <FRAME SRC=exemplo2.htm> <FRAME SRC=exemplo3.htm> </FRAMESET> </FRAMESET>  <NOFRAMES> <FONT SIZE=4>
214
Esta parte do cdigo, s ir aparecer no seu navegador caso o mesmo no suporte o uso de frames. </FONT> </NOFRAMES> </HTML>
Veja o resultado no seu navegador. Se ele suporta o uso de frames, surgir algo do tipo:
EXEMPLO 7.16 EXEMPLO DO USO DA TAG NOFRAMES
Caso o seu navegador NO suporte o uso de frames surgir na tela a seguinte mensagem:
EXEMPLO 7.15 EXEMPLO DO USO DA TAG NOFRAMES QUANDO O NAVEGADOR NO ACEITA FRAME
Unidade 7
215
Sntese
E assim acaba nossa unidade. Neste momento, voc tem os conhecimentos suficientes para a construo de um web site bsico. Agora, com um bocado de imaginao pode fazer um bom web site. Boa sorte e sucesso! Os Frames so interessantes para apresentar conjuntos de pginas com um ndice fixo para a navegao. Alm disso, com este recurso torna-se possvel mostrar diversas pginas e/ou mdias em uma nica janela do browser. Tenha o cuidado de procurar controlar a navegao, evitando que o acionamento de links no leve o leitor a ver seu navegador criar frames dentro de frames, gerando uma grande confuso. Evite isso utilizando a tag TARGET, como vimos na seo 1 desta unidade.
216
Leia com ateno e resolva as atividades programadas para a sua autoavaliao. 1 Crie o frame a seguir para ser visualizado no seu navegador: Cabealho.html
Menu.html
Principal.html
Rodap.html
2 Quais as vantagens de se utilizar frames em um site? Vamos discutir sobre isso na ferramenta FORUM.
3 - importante criarmos tags NOFRAME? Por qu?
Unidade 7
217
Saiba mais
http://www.sistemasabertos.com.br/twiki/bin/genpdfpub/Pub/LivroHTMLTotal (HTML) http://www.criarweb.com/artigos/131.php (Frames em HTML) http://ftp.unicamp.br/pub/apoio/treinamentos/internet/webpages.pdf (Confeco de
webpages)
218
unidade 8
Desenvolvendo Pginas Eficientes

Utilizar as tags HTML 2.0, 3.2 ou 4. Criar pginas HTML de modo a serem facilmente
consultadas.
Elaborar um layout adequado de pginas da web. Compreender quando e por que criar vnculos.
Sees de estudo
Seo 1 Uso das extenses HTML Seo 2 Seu texto na web Seo 3 Projeto e layout da pgina Seo 4 Uso de vnculos Seo 5 Outras sugestes de bons hbitos

Nesta unidade, no vamos abordar as tags HTML e sim, estudaremos os elementos que podem diferenciar os seus documentos dos de algum que apenas conhece as tags e espalha o texto e as imagens grficas no documento, chamando isso de apresentao.
Seo 1 Uso das extenses HTML

No passado, antes de todas as empresas que produzem navegadores comearem a introduzir suas prprias tags HTML, era fcil ser um projetista da web. As nicas tags que voc tinha que lidar eram aquelas da HTML 2.0 e a grande maioria dos navegadores existentes na web era capaz de ler as suas pginas sem qualquer problema. Hoje, ser um projetista da web bem mais complicado. Voc tem que trabalhar com vrios grupos de tags:
Tags da HTML 2.0. Recursos da HTML 3.2 e 4, como, por exemplo, frames, tabelas, divises,
painis de fundos, cores e folhas de estilos, que contam com o suporte da maioria, mas no de todos os navegadores. parte da especificao HTML oficial e cujo suporte varia de um navegador para outro.
Tags especficas dos navegadores, que podem ou no se tornarem
Outras tags propostas para o futuro para a HTML, que contam com o
suporte de poucos navegadores.
Fonte: LEMAY, 2001.
Se voc considera essa situao confusa, saiba que no o nico. Os autores e projetistas esto tentando esclarecer essa confuso e tomar decises com base no aspecto visual que desejam
220
atribuir s suas pginas. As extenses HTML oferecem maior flexibilidade no layout, mas limitam o pblico que pode ver essas pginas da maneira que voc deseja que elas sejam exibidas. A escolha de uma estratgia para a utilizao de extenses HTML uma das mais importantes decises de projeto que voc far ao criar pginas da web. Se o autor da web quer o maior pblico possvel para suas pginas da web, ento ele deve se manter fiel s tags da HTML 2.0, conforme definidas pelo padro. Voc pode criar um documento da web magnfico com as tags da HTML 2.0 e esse documento tem uma grande vantagem em relao a muitos documentos experimentais, pois ele reconhecido sem qualquer dificuldade pela grande maioria dos navegadores e atinge, portanto, o maior pblico possvel. Se o autor da web, por outro lado, deseja ter sobre o layout de pginas o tipo de controle que as mais avanadas tags proporcionam e est disposto a perder boa parte de seu pblico para conseguir isso, ento ele utilizar as mais novas inseres propostas pela HTML 4. As pginas para esse autor so elaboradas para poucos navegadores, so testadas somente nesses navegadores e possvel inclusive que haja um aviso na pgina informando em qual navegador a pgina deve ser lida. Na maioria das vezes, se voc usar outro navegador para ler essas pginas, o resultado poder ser bem confuso, quando no for inteiramente ilegvel. A melhor posio, ao se escolher entre um projeto refinado e um grande pblico provavelmente o equilbrio entre os dois. Com algum conhecimento prvio dos efeitos que as extenses HTML tero sobre as suas pginas, tanto em navegadores que oferecem suporte para elas como em outros que no oferecem esse suporte, voc poder promover pequenas modificaes no seu projeto, que permitiro tirar proveito dos dois aspectos mencionados. Assim, as suas pginas continuaro legveis e teis em navegadores mais antigos e em uma grande variedade de plataformas, mas podero tambm tirar proveito dos recursos avanados nos novos navegadores (LEMAY, 2001). A estratgia mais importante que podemos sugerir para utilizar extenses e, ao mesmo tempo, manter a compatibilidade com outros navegadores consiste em testar os seus arquivos nesses navegadores. A maioria dos navegadores composta
Unidade 8
221
de programa freeware ou shareware e se encontra disponvel para download. Por isso, basta localiz-los e instal-los. Ao testar as suas pginas, voc poder ter uma noo de como os diversos navegadores interpretam as diferentes tags e acabar percebendo quais extenses proporcionam maior flexibilidade, quais delas exigem codificao especial para fornecer alternativas em navegadores mais antigos e quais tags podem ser usadas livremente sem causar problema em outros navegadores.
Voc sabe por que usar o HTML 4? Pesquise no site http://www.artifice.web.pt/tutoriais/ cntd/tut_html16.html
Seo 2 Seu texto na web

A redao na web no diferente da redao no mundo real. Mesmo que o texto que voc esteja redigindo para a web no seja apresentado em uma cpia impressa, ainda assim ele ser publicado e refletir a sua personalidade e o seu trabalho. Na verdade, voc dever seguir as regras de uma boa redao com mais cuidado, pelo fato de o documento estar no ambiente on-line e ser, por isso, muito visitado por leitores muito exigentes. Com a grande quantidade de informaes na web, os leitores no tero muita pacincia se a sua pgina estiver cheia de erros de grafia ou desorganizada. Eles certamente desistiro depois de lerem a segunda frase e passaro para a pgina de outra pessoa. Afinal de contas, existem milhes de pginas na web. No h tempo a perder com pginas ruins. Vai dizer que voc nunca fez isso? Nunca visitou uma pgina carregada de informaes desorganizadas, sem um bom layout e acabou desistindo? Isso no significa que voc tenha que se tornar um escritor profissional para criar uma pgina na web apresentvel. Mas deve seguir algumas sugestes para tornar a sua pgina mais legvel e compreensvel. A seguir esto elas:
222
Redija com clareza e objetividade

Uma das melhores formas de tornar as suas pginas da web legveis consiste em redigir da maneira mais clara e objetiva possvel, apresentando os seus pontos de vista e nada mais. Se voc colocar muitas informaes adicionais, poder dificultar a compreenso das suas idias por parte do leitor da sua pgina. O critrio de qualidade do texto vale tanto para a Internet quanto para o papel. No h linguagem nova que desobrigue o texto na Internet a ser bom, legvel e compreensvel. O texto s passa a existir realmente quando consumido produtivamente pela pessoa que est do outro lado da linha.
Saiba mais sobre webwriting! Voc sabe o que webwriting? Webwriting o trabalho de criao, produo, edio e administrao de textos especficos para contedo de websites, a partir de um conjunto de caractersticas prprias da linguagem escrita da mdia internet. Estude mais sobre o assunto no seguinte site: http://www.webwritersbrasil.com.br/detalhe. asp?numero=146
Organize as suas pginas para uma rpida consulta

Mesmo que voc crie o texto mais sucinto e bem-estruturado jamais visto em toda a web, os seus leitores no iro l-lo com ateno do incio ao fim. Um texto para internet tem que ter o tamanho que a informao exigir. Na informao rpida, no se pode esquecer de um ponto crucial: o porqu. Se ns entramos na Internet, queremos saber o porqu dos fatos, no queremos s rapidez. A velocidade tem que vir com peso, com qualidade. A internet a grande chance da humanidade para preservar sua cultura e, neste sentido, deve funcionar como um banco de dados e no apenas como um veculo de informao.
Unidade 8
223
A consulta, nesse contexto, a primeira olhada dos leitores em cada pgina, para ter uma noo geral de seu contedo. Dependendo das informaes que eles quiserem obter nas pginas, podero ler as partes que mais chamam a ateno (cabealhos, vnculos, palavras enfatizadas) e, talvez, alguns pargrafos contextuais para, em seguida, continuar a leitura. Ao criar e organizar as suas pginas para facilitar a consulta, voc estar ajudando os leitores a obter o mais rapidamente possvel as informaes que necessitam. Para facilitar a consulta pgina:
Utilize cabealhos para resumir os tpicos - Se observar, este livro possui
ttulos e subttulos para que voc possa percorrer rapidamente na busca da informao de maior interesse. O mesmo se aplica s pginas da web.
Utilize listas - So excelentes para resumir itens relacionados. No se esquea dos menus de vnculos - O menu de vnculo consiste em
uma espcie de lista que, alm de oferecer todas as vantagens das listas para a consulta, funciona como uma excelente ferramenta de navegao, atravs dos links. alguma ressalva ou ponto a destacar, faa-o na parte superior da pgina ou no incio do pargrafo. Pargrafos longos so de difcil leitura e mais complicado obter informaes neles. Quanto mais para dentro do pargrafo voc colocar a questo que deseja destacar, menor ser a probabilidade desta ser lida.
No esconda informaes importantes no meio do texto - Se tiver
Destaque cada pgina - Tenha o cuidado de criar pginas da web de
modo que cada uma delas seja auto-suficiente. Por exemplo, se o leitor cair em uma de suas pginas de seu site, que depende de uma pgina que ele no visitou, deve ser dado um destaque a essa pgina visitada de que ele precisa de informaes de outra pgina ou criar um vnculo at a outra pgina.
Utilize ttulos descritivos - O ttulo dever fornecer informaes sobre
o assunto abordado nessa pgina e tambm sobre o seu relacionamento com as outras pginas da apresentao de que faz parte. de retorno pgina anterior (de preferncia crie tambm um vnculo com a pgina que ocupa o nvel mais alto da hierarquia).
Se uma pgina depender de outra anterior a ela, fornea um vnculo
Evite frases do tipo voc poder evitar esses problemas fazendo...,
ao terminar isso, faa aquilo..., as vantagens desse mtodo so... que disponham informaes que estaro sendo apresentadas em outra pgina. Ao se deparar logo de incio com essas frases, o leitor poder ficar confuso.
Fonte: LEMAY, 2001.
224
No exagere na nfase
Pargrafos com muitas informaes em negrito e itlico ou palavras EM LETRAS MAISCULAS so de difcil leitura, especialmente se voc as utiliza diversas vezes em um mesmo pargrafo ou se enfatiza trechos muito longos. A melhor maneira de enfatizar o texto consiste em destacar apenas palavras pequenas, como, por exemplo, E, MAS... Os textos de vnculo constituem tambm uma forma de nfase. Utilize uma nica palavra ou uma frase curta como texto de vnculo. No use trechos ou pargrafos inteiros como vnculos.
No use termos especficos do navegador

Evite fazer referncias a recursos especficos de determinados navegadores. No use, por exemplo, frases como estas:
D um clique Aqui - E se o seu leitor estiver usando um navegador
sem mouse?
Para gravar estar pgina, abra o menu Arquivo e selecione Salvar
- Cada navegador tem um conjunto diferente de menus e maneiras especficas de executar a mesma ao, alm de idiomas diferentes. Sempre que possvel, evite fazer referncia a operaes especficas do navegador nas suas pginas da web.
Utilize o boto Voltar/Back para retornar pgina anterior - Como
no item anterior, cada navegador possui um conjunto de botes e mtodos especficos de retorno. Para que seus leitores consigam realmente retornar a uma pgina anterior ou acessar outra pgina especfica, estabelea um vnculo direto com essas pginas.
Verifique a grafia e revise as suas pginas

Parece bvio esse item, mas em virtude da quantidade de pginas que existem e que j visitamos, vale a pena mencionlo. A elaborao de um conjunto de pginas da web e sua publicao correspondem ao processo de publicao de um livro,
Unidade 8
225
produo de uma revista ou ao lanamento de um produto. Obviamente, muito mais fcil publicar pginas na web do que livros, revistas ou outros produtos. No entanto, o fato de ser mais fcil no significa que o processo deve ser descuidado. Por isso, existem muitas pginas com muitos erros, pois qualquer pessoa pode redigir um texto, mesmo sem ser um expert em lngua portuguesa, por exemplo. Lembre-se que qualquer pessoa poder ler e explorar suas pginas da web. Erros ortogrficos ou gramaticais produzem uma impresso negativa do seu trabalho, de voc e das informaes que estiver fornecendo. Uma redao ruim poder irritar o leitor e faz-lo desistir de prosseguir com a leitura do seu site, por mais fascinante que seja o assunto abordado. Revise e verifique a grafia de cada uma de suas pginas da web. Se possvel, pea a algum para l-las. Quando outra pessoa l, esta poder detectar melhor determinados erros que voc, por ser o autor, muitas vezes no percebe. Uma simples reviso poder aprimorar muito as suas pginas, facilitando a leitura e navegao.
226
Atividade de auto-avaliao
Leia cada enunciado com ateno e responda as questes que seguem. 1. O texto na web apresentado, a seguir, mostra o tipo de tcnica de redao que deve ser evitado. Pelo fato de todas as informaes dessa pgina serem apresentadas em formato de pargrafo, os seus leitores tero de ler todos os pargrafos para localizar as informaes que desejam e ainda descobrir como prosseguir com a leitura. Como voc aprimoraria esse exemplo? Procure elaborar novamente essa seo de forma a destacar melhor os pontos principais do texto e o layout da pgina. No esquea de revisar o portugus e fazer os links como veremos abaixo:
Fonte: LE MAY, 2001.
FIGURA 8.1 COMO CONSTRUIR UM WEBSITE
Ateno! O cdigo HTML para ser utilizado no exerccio de auto-avaliao encontra-se na MIDIATECA. Publique o seu resultado em EXPOSIO.
Unidade 8
227
Resposta:
228
Seo 3 Projeto e layout da pgina

O melhor layout a ser seguido ao elaborar o projeto de cada pgina da web o seguinte: mantenha o projeto o mais simples possvel. Reduza o nmero de elementos (imagens, cabealhos e linhas) e lembre-se sempre de chamar a ateno para os pontos mais importantes da pgina, sem exagerar.
Use cabealho como cabealhos

Aqui estamos falando das tags de cabealhos <h1>, <h2>... Em navegadores grficos, os cabealhos so em geral representados em fontes maiores ou em negrito. Por isso, somos sempre tentados a utilizar uma tag de cabealho para fornecer algum tipo de advertncia ou nota ou mesmo enfatizar um texto normal. Os cabealhos funcionam melhor quando utilizados realmente como cabealhos, pois destacam o texto e indicam o incio de um novo tpico. Se voc desejar enfatizar uma determinada seo do texto, considere a possibilidade de utilizar uma imagem pequena, uma linha ou outra forma de nfase.
Agrupe visualmente as informaes relacionadas

Agrupar informaes relacionadas em uma pgina da web uma tarefa de criao e de projeto. Conforme j sugerido, voc pode aumentar a capacidade de consulta atravs do agrupamento de informaes afins em cabealhos. Ao separar visualmente as sees, voc facilita sua diferenciao e enfatiza a relao existente entre as informaes fornecidas. Se uma pgina da web contiver diversas sees, separe-as visualmente, utilizando, por exemplo, um cabealho ou uma linha horizontal, atravs da tag <HR>.
Unidade 8
229
Use um layout padronizado

Em um livro ou revista, as pginas e sees apresentam em geral o mesmo layout (veja este livro, por exemplo). Os nmeros das pginas, assim como a primeira palavra apresentada nelas, esto sempre na posio padro. Esse tipo de layout padronizado funciona igualmente bem nas pginas da web. A atribuio de uma nica aparncia e de um nico comportamento a todas as pginas da sua apresentao da web proporciona conforto aos leitores. Depois da segunda ou terceira pgina, eles conhecero os elementos de cada pgina e sabero onde localiz-los. Assim, com um projeto padronizado, os seus leitores podem localizar as informaes que necessitam e navegar pelas suas pginas sem precisar parar em cada uma delas para saber onde encontrar essas informaes. Um layout padronizado deve conter:
Elementos de pgina padronizados - Se voc utilizar cabealhos de segundo nvel (<H2>), em uma pgina, para indicar os tpicos principais, dever utiliz-los tambm para os tpicos principais de todas as outras pginas. Se tiver includo um cabealho e uma linha horizontal na parte superior da pgina, utilize esse mesmo layout em todas as outras pginas. Formas padronizadas de navegao - Inclua os seus menus de navegao na mesma posio em todas as pginas (em geral, na parte superior ou inferior da pgina) e utilize a mesma quantidade de menus. Se preferir usar cones de navegao, lembre-se de utilizar os mesmos cones na mesma ordem em todas as pginas.
Voc sabe como os internautas lem na Internet? Pesquise o assunto no site:
http:// www.comunidade.sebrae.com.br/intranet/Downloads/ Downloads_GetFile.aspx?id=5101
230
Seo 4 Uso de vnculos

Sem os vnculos, as pginas da web no teriam a menor graa e seria praticamente impossvel encontrar algo interessante na web. Sob vrios aspectos, a qualidade dos seus vnculos pode ser to importante quanto a criao e o projeto das pginas propriamente ditas. Considere as seguintes dicas que Lemay (2001; 2002) coloca em seus livros:
Use menus de vnculos com texto descritivo

Conforme j comentado, quando voc organiza os vnculos em listas ou em outras estruturas semelhantes a menus, o seu leitor pode consultar rpida e facilmente as opes oferecidas para a pgina. No entanto, a simples organizao dos vnculos em menus no suficiente. Ao organiz-los dessa forma, verifique se as suas descries no esto excessivamente reduzidas. Muitas vezes somos tentados a usar menus de nomes de arquivo ou de outros vnculos pouco descritivos. Se os vnculos forem menus com nomes de arquivo, por exemplo, ento como o leitor poder saber quais as informaes encontraro no outro lado do vnculo? E assim, como o leitor poder determinar se est ou no interessado nessas informaes, a partir das limitadas indicaes fornecidas? A maneira correta ofereceria um texto adicional que descrevesse o contedo do arquivo ou simplesmente evitasse o uso de nomes de arquivos (quem estaria interessado neles)? Logo, descreva o contedo dos arquivos no menu, destacando o texto apropriado.
Uso de vnculos no texto

A melhor maneira de fornecer vnculos no texto consiste em redigir antes o texto sem os vnculos, como se voc no pretendesse incluir vnculo algum nele (para utiliz-lo, por exemplo, apenas como uma cpia impressa). Em seguida, destaque as palavras apropriadas que funcionaro como o texto
Unidade 8
231
dos vnculos, que conduziro a outras pginas. Ao incluir um vnculo, verifique se este no est interrompendo o fluxo da pgina. A idia de incluso de vnculos no meio do texto torna-o autosuficiente. Dessa forma, os vnculos fornecem informaes adicionais ou superficiais que os leitores podem optar por ignorar ou acessar, de acordo com seu interesse. Se voc estiver usando um texto apenas para descrever vnculos, considere a possibilidade de usar um menu de vnculos, em vez de um pargrafo. Os leitores encontraro mais facilmente as informaes que estiverem procurando. Em vez de lerem o pargrafo inteiro, podero simplesmente dar uma olhada nos vnculos para identificar aqueles que esto interessados. Uma maneira de saber se voc esta incluindo vnculos no texto da forma apropriada consiste em imprimir a pgina da web formatada no seu navegador. Na cpia impressa, sem hipertexto, o pargrafo faz algum sentido? Se a pgina ficar esquisita no papel, ficar esquisita tambm na web. De modo geral, alguns ajustes na construo das frases podem tornar o texto mais legvel e mais til tanto na web quanto na cpia impressa.
Evite a sndrome do Aqui

Um erro comum que muitos autores da web cometem ao criar vnculos no meio do texto consiste no que costumamos chamar de sndrome do aqui. Essa sndrome a tendncia de criar vnculos com uma nica palavra (aqui) destacada e descrever o vnculo em alguma outra parte do texto. Por exemplo:
Informaes sobre o uso de vnculo clique aqui.
Uma opo muito melhor seria usar algo semelhante a isso:

Selecione este link para obter informaes sobre o uso de vnculo.
232
Ou ainda:
O tutorial de HTML tem informaes sobre o uso de vnculos.
Por estarem destacados na pgina da web, os vnculos se sobressaem visualmente mais do que o texto apresentado ao redor. Assim, o seu leitor ver o vnculo antes de ler o texto. Experimente usar vnculos desse modo.
Use vnculos de retorno origem

Considere a possibilidade de incluir em cada uma das pginas da sua apresentao, um vnculo com a pgina de nvel mais alto ou com a home-page. Esse vnculo permite que os leitores saiam rapidamente dos nveis mais profundos do seu documento. Usar um vnculo de retorno origem bem mais fcil que tentar navegar de volta pela hierarquia das pginas ou utilizar o recurso de retorno (voltar) de um navegador.
Vincular ou No Vincular
A exemplo do que ocorre com as imagens grficas, para todo vnculo criado, voc dever considerar o motivo pelo qual est vinculando duas pginas ou sees. Esse vnculo til para os leitores? Ele fornecer mais informaes e os deixar mais prximos de seus objetivos? Esse vnculo relevante em relao ao assunto corrente? Cada vnculo deve ter uma finalidade. Tenha motivos razoveis para estabelec-los. O simples fato de voc mencionar a palavra caf em uma pgina referente a algum outro tpico no significa que tenha de vincul-la com um site referente ao caf. Isso pode at parecer interessante, mas se um vnculo no for til para o assunto corrente, servir apenas para confundir o leitor.
Unidade 8
233
Existem algumas categorias de vnculos teis em pginas da web. Vejamos:
Vnculos explcitos de navegao - So aqueles que indicam os
caminhos especficos que o leitor poder tomar nas pginas da web: para frente, para trs, para cima e para o incio. Em geral, esses vnculos so indicados por cones de navegao.
Vnculos implcitos de navegao -
So aqueles que apenas sugerem, sem indicar de forma direta, a navegao entre as pginas. Os menus de vnculos so o melhor exemplo de vnculos implcitos. O destaque do texto de vnculo torna claro ao leitor que ele poder obter maiores informaes sobre esse tpico ao selecionar um vnculo correspondente. Mas isso no indicado de forma explcita no texto. Os vnculos implcitos de navegao podem tambm conter estruturas de sumrio ou outras estruturas de viso geral compostas inteiramente por vnculos. se tornar vnculos excelentes, especialmente se voc estiver criando grandes redes de pginas que contenham glossrios. Ao estabelecer um vnculo entre a primeira ocorrncia de uma palavra e sua definio, voc pode explicar o significado dessa palavra aos leitores que no o conhecem, sem desviar a ateno daqueles que j possuem esse conhecimento.
Vnculos de definio - Palavras ou definies de conceitos podem
Vnculos de tangentes - Vnculos com informaes tangentes e
relacionadas so teis quando o contedo do texto pode desviar a ateno do leitor do objetivo principal da pgina. Considere os vnculos de tangente como as notas de rodap ou as notas de fim em um texto impresso. Eles podem se referir a citaes de outras obras ou a informaes adicionais que sejam interessantes, mas que no sejam diretamente relacionadas quelas que voc quer transmitir. Mas cuidado com os vnculos de tangente. possvel voc criar tantas tangentes a ponto de os leitores passarem um tempo enorme acessando vnculos para outras pginas e no conseguirem, por isso, retornar ao texto original. Resista tentao de criar todos os vnculos que puder e procure estabelecer vnculos apenas para tangentes relevantes ao seu prprio texto. Evite tambm duplicar a mesma tangente por exemplo, estabelecer vnculos com todas as ocorrncias da palavra web na sua pgina.
234
Seo 5 Outras sugestes de bons hbitos

A seguir, algumas sugestes sobre os bons hbitos que voc deve desenvolver ao trabalhar com grupos de pginas da web.
No divida os tpicos entre as pginas

As pginas da web funcionam melhor quando abrangem um nico tpico completamente. No divida os tpicos entre as pginas. Mesmo que voc crie vnculos entre elas, a transio pode ser confusa. E ficar ainda mais confusa se um leitor passar diretamente para a segunda ou a terceira pgina e no souber o que est acontecendo. Se voc perceber que um tpico est ficando muito longo para uma nica pgina, considere a possibilidade de reorganizar o contedo para que possa dividir esse tpico em vrios subtpicos. Isso funciona especialmente bem em organizaes hierrquicas e permite que voc determine exatamente o nvel de detalhe de cada nvel da hierarquia que deve ser includo, alm do tamanho e da complexidade a serem atribudos a cada pgina.
No crie pginas a mais ou a menos

No existem regras para o nmero de pginas ou para o tamanho que as suas apresentaes da web devem ter. Voc pode ter uma nica pgina ou milhares delas, dependendo do volume de informaes que deseja transmitir e da forma como as tiver organizado. Suponha que voc queira incluir todas as informaes que deseja transmitir em uma pgina grande e crie vrios vnculos com as sees dessa pgina. Voc pode optar por um extremo ou por outro, cada qual com suas vantagens e desvantagens:
Unidade 8
235
Vantagens:
A manuteno de um nico arquivo mais fcil e os vnculos contidos nele no sero rompidos se voc mover as informaes ou atribuir novos nomes aos arquivos vinculados. A estrutura a mesma utilizada em documentos reais.
Desvantagens:
Leva muito tempo para se fazer download de um arquivo grande, especialmente em conexes de rede lentas e se a pgina contm muitas imagens grficas. Os leitores precisam rolar o texto vrias vezes para localizar o que desejam. O acesso a informaes especficas pode ser tornar tedioso. A navegao at outros pontos que no estejam localizados nem no incio nem no final do documento torna-se praticamente impossvel. A estrutura excessivamente rgida. Uma nica pgina , por natureza, linear. Embora voc possa passar diretamente de uma seo para outra, a estrutura linear ainda reflete a da pgina impressa e no tira proveito da flexibilidade das pginas menores vinculadas de forma no linear.
Ou, por outro lado, voc pode criar um conjunto de pginas pequenas e estabelecer vnculos entre elas.
Vantagens:

As pginas menores so carregadas rapidamente. Freqentemente voc pode apresentar a pgina inteira na tela. Dessa forma, as informaes contidas nessa pgina podem ser facilmente consultadas pelo leitor.
236
Desvantagens:
A manuteno de todos esses vnculos pode se tornar um pesadelo. A simples incluso de algum tipo de estrutura de navegao para essa grande quantidade de pginas criaria milhares de vnculos. Se houver muitos vnculos entre as pginas, eles ficaro em desarmonia. difcil manter a continuidade da leitura quando o leitor passa mais tempo alternando entre documentos do que propriamente lendo o texto.
Afinal, qual a soluo?! De modo geral, o assunto que voc est escrevendo determinar o tamanho e a quantidade de pginas que voc precisar, especialmente se voc seguir a sugesto de usar um tpico por pgina. Se voc testar as suas pginas da web em uma grande variedade de plataformas e velocidades de rede, saber se uma nica pgina muito grande. Se, por exemplo, voc passar muito tempo rolando o texto do documento ou se ele demorar mais do que o esperado para ser carregado, significa que est muito grande.
Assine as suas pginas

Cada pgina deve conter algum tipo de informao na parte inferior, que funcione como uma assinatura. A tag <ADDRESS> foi criada especificamente com esse objetivo. A utilizao desta tag til nas suas pginas, pois informam:
Sobre como entrar em contato com o autor da pgina da web ou com a pessoa responsvel pela pgina, a quem chamamos de webmaster. Essas informaes devem conter pelo menos o nome e o correio eletrnico dessa pessoa. O status da pgina. Ela est completa? um trabalho ainda em andamento? Foi deixada propositalmente em branco?
Webmaster a pessoa responsvel pela criao e manuteno de um site na web. Em geral, as responsabilidades de um webmaster incluem responder a mensagens de correio eletrnico, garantir a operao apropriada do site, criar e atualizar pginas da web e manter a estrutura e o projeto do site. Muitas vezes, o webmaster acumula a tarefa de administrao de servidores na qual se alberga o site.
Unidade 8
237
A data da ltima reviso realizada na pgina. Isso especialmente importante no caso de pginas alteradas com muita freqncia. Inclua uma data em cada pgina para que as pessoas saibam h quanto tempo ela foi criada e/ou atualizada. Sobre os direitos autorais e as marcas registradas, quando necessrio. O URL da pgina. A incluso de um URL impresso de uma pgina que pode ser localizada nesse mesmo URL pode parecer um pouco exagerada. Mas, e se algum imprimir a pgina e perder todas as outras referncias a ela no meio da pilha de papis da mesa de trabalho? De onde elas vieram?
A figura abaixo apresenta um timo exemplo de um bloco de endereo:
FIGURA 8.2 EXEMPLO DE ASSINATURA PARA UMA PGINA WEB
Uma boa sugesto para a sua pgina da web estabelecer um vnculo entre um URL mailto e o texto que contm o endereo de correio eletrnico (e-mail ) do webmaster, como neste exemplo:
<A HREF=mailto:sac@embrapa.br>sac@embrapa.br</A>
238
O endereo da figura anterior ficaria assim:
FIGURA 8.3 EXEMPLO DE ASSINATURA PARA UMA PGINA WEB COM MAILTO
Tal procedimento permite aos leitores que tenham navegadores que ofeream suporte ao URL mailto, simplesmente selecionar o vnculo e enviar uma correspondncia para a pessoal responsvel pela pgina, sem precisar digitar novamente o endereo em seus programas de correio eletrnico.
Sntese
As principais normas para o projeto e a elaborao de pginas da web, apresentadas nesta unidade, so agora destacadas:

Teste as suas pginas da web em vrios navegadores. Redija suas pginas de forma clara e concisa. Organize o texto da pgina para que os leitores possam consultar as informaes importantes. Crie pginas independentes de contexto, ou seja, crie pginas que no dependam de pginas anteriores ou posteriores. No abuse da nfase e nem utilize as tags de cabealho para dar nfase. No use terminologias especficas de algum navegador.
Unidade 8
239
Revise e verifique a grafia das suas pginas, bem como a concordncia gramatical. Utilize um layout padronizado e simples em todas as pginas. Use menus de vnculos. No sobrecarregue a pgina com imagens bonitas, porm desnecessrias.
Leia cada enunciado com ateno e responda as questes que seguem. 1. Visite os 3 sites seguintes, explore-os e na ferramenta FRUM discuta o tipo de informao que apresentada, o projeto e layout da(s) pgina(s), o uso de vnculos e imagens. Aponte ainda os recursos adequados e inadequados:

http://www.hippo.com.br http://www.livrodereceitas.com http://enciclopedia.tiosam.com/enciclopedia/enciclopedia.asp?title=Wiki
240
Saiba mais
DAMASCENO, Anielle. Webdesign: teoria e prtica. So Paulo: Visual Books, 2006. LEMAY, Laura. Aprenda em 1 semana HTML 4. So Paulo: Campus, 2001. LEMAY, Laura. Aprenda a criar pginas web com HTML e XHTML em 21 Dias. So Paulo: Makron Book, 2002. RODRIGUES, Bruno. Webwriting redao & informao para a web. Rio de Janeiro: Brasport, 2006.
Tambm consulte o(s) seguinte(s) site(s) para aprofundar seus estudos:

black.rc.unesp.br/marcus/tese.pdf
(Construo de pginas web: depurao e especificao de um ambiente de aprendizagem) (O valor de um projeto de pgina web)
http://www.freecode.com.br/forum/lofiversion/index.php/t8902.html
Unidade 8
241
unidade 9
Folhas de Estilo
Identificar a definio de folhas de estilos. Compreender como e porque utilizar folhas de estilos
em cascata.
Conhecer a sintaxe e os tipos de definio de estilos. Criar folhas de estilos.
Sees de estudo
Seo 1 O que so os estilos CSS Seo 2 A sintaxe CSS Seo 3 Tipos de definio de estilos Seo 4 A ordem da cascata

Voc deve estar perguntando: o que ser que so folhas de estilo? Para que servem? J ouvi falar tanto nisso, mas no tenho idia do que se trata. Nesta unidade, aprenderemos a criar essas folhas de estilos no seu documento HTML ou em parte dele. Mas antes de definirmos folhas de estilo, que tal voc descrever o que um estilo?
Conseguiu? timo! Observe que voc j sabe o que estilo ou j tem uma noo do que trata um estilo. Sabendo o que isso significa, podemos comear o nosso estudo de folhas de estilo.
244
Seo 1 O que so os estilos CSS

As tags que definem os elementos do HTML foram concebidas para definir contedos. O autor do HTML nunca teve qualquer inteno de usar esta linguagem para definir estilos grficos para as pginas. As tags do HTML foram idealizadas para declarar coisas como Isto um pargrafo, ou Isto um cabealho. Para isso, colocavam-se tags como <P> ou <H1> em redor do texto. A forma como esta informao devia ser apresentada graficamente era um problema que o navegador tinha que resolver tendo em considerao o significado de cada tag. Este conceito perfeitamente racional era muito adequado enquanto o objetivo das pginas era apenas a escrita e a partilha de textos na web, mas a rpida aceitao da web fez com que as pessoas que davam importncia ao design tambm se interessassem por este meio. Esse interesse estimulou esforos para criar pginas graficamente elaboradas, mais ao gosto dos designers. Um dos efeitos importantes foi a completa adulterao do propsito de diversas tags. A tag <TABLE>, por exemplo, foi concebida unicamente para apresentar tabelas com dados numricos, mas os designers passaram a us-la para colocar as tags em diversos pontos das pginas em arranjos cada vez mais complexos. Mas isto no foi suficiente porque havia coisas que no podiam ser feitas usando apenas as tags disponveis. Para dar aos designers aquilo que eles pediam, os criadores dos navegadores acharam que era boa idia os primeiros inventarem as suas prprias tags e acrescentarem atributos estilsticos s que j existiam. Estas extenses permitiram usar o HTML para dar cores e estilos diferentes ao texto e aplicar outras formataes. As iniciativas dos criadores destas novas tags e atributos ignoraram por completo a filosofia na qual o criador do HTML, Tim Berners Lee, baseou-se para criar a linguagem. As novas tags (como a tag <FONT>) davam importncia ao aspecto grfico que produziam e no ao significado daquilo que continham. Apesar de todas as contra-indicaes, a criao e rpida disseminao de tags conduziu a uma situao em que os contedos das pginas estavam completamente misturados com
Unidade 9
245
os aspectos estilsticos. Este contexto conduziu, no final da dcada de 1990, o HTML a um estado em que era muito difcil criar e fazer a manuteno de websites compostos por mais do que um nmero reduzido de pginas. Os contedos das pginas no eram mais do que imensas sopas de tags mal organizadas, cujo significado no era muito claro. Este problema comeou a ser resolvido pelo World Wide Web Consortium (W3C) com a criao dos padres HTML4, CSS, XML e XHTML. Para o W3C, o HTML deve ser usado em conjunto com estilos CSS (folhas de estilo em cascata), sendo que os contedos se exprimem em HTML e os estilos em CSS. As folhas de estilo permitem que voc defina a aparncia padro de diferentes partes de seu documento. E precisamente esse o objetivo das folhas de estilo em cascata. Com elas, voc pode controlar a cor e o estilo de fontes, ajustar o espao em branco etc. Este novo paradigma para a criao de pginas bem suportado por todos os navegadores dominantes: Netscape7/Mozilla, Microsoft Internet Explorer5 e superior e Opera7.
Vantagens dos estilos CSS

As pginas que usam estilos CSS, alm de serem mais fceis de escrever, so tambm mais leves e aparecem mais depressa no navegador. Como j mencionado, as regras de estilos definem o layout, a tipografia e os recursos de projeto de um documento, separados da definio da estrutura do documento. Assim, a estrutura de um documento definida atravs da utilizao do HTML. Um autor pode, ento, definir a aparncia e o projeto de sua preferncia, usando uma folha de estilo.
A folha de estilo um conjunto de regras, normalmente definido em um arquivo separado, que um navegador compatvel utiliza para representar o documento estruturado, definido com o HTML.
246
Ateno! Um navegador que no oferea suporte para folhas de estilo ainda pode representar o arquivo como um documento HTML padro e este documento deve ser auto-suficiente, sem depender da folha de estilo.
As folhas de estilos permitem ganhar tempo e flexibilidade

O que interessante na idia das folhas de estilos que elas so flexveis. As tags e atributos, usados para aplicar folhas de estilo em um documento HTML, no prendem os autores e fabricantes de navegadores a um tipo nico de folha de estilo. Os estilos CSS definem o aspecto grfico a dar s tags do HTML. Os estilos podem ser definidos numa folha de estilos, externa ou internamente, no prprio documento HTML. Quando definidos numa pasta externa, os estilos podem ser compartilhados por muitas pginas, o que permite alterar instantaneamente o aspecto grfico de todas as pginas, modificando apenas a pasta em que os estilos so definidos. Quando voc tinha de usar as tcnicas antigas para fazer alteraes no aspecto grfico de um website, voc era obrigado a alterar todas as tags <FONT> e todas as tabelas usadas para formatar as pginas. Isto tinha que ser feito em todas as pginas. Quando voc utiliza estilos CSS, basta modificar um nmero reduzido de definies numa nica folha de estilo para instantaneamente atualizar centenas ou milhares de pginas com um esforo mnimo. Os erros ocorrem com muito menor freqncia e so muito mais fceis de corrigir. A facilidade com que as alteraes so assim feitas d uma maior flexibilidade ao website e melhoram o seu desempenho. As pginas ficam simultaneamente mais ricas e mais leves.
Unidade 9
247
O mecanismo de cascata
O termo cascata se refere seqncia ordenada de estilos de formatao do documento. As regras das folhas posteriores tm precedncia sobre as anteriores. A ordem de estilos aplicados :
Um arquivo de folha de estilos separado que vinculado - uma folha de estilos externa. Informaes de estilos incorporados dentro da pgina - uma folha de estilo interna. Estilos aplicados diretamente a texto selecionado - um estilo linear ou inline.
Ateno! As definies dos diferentes tipos de estilos, voc estudar na seo 3 desta Unidade. As folhas de estilos CSS do-nos muita liberdade na forma de definir os estilos. No mesmo documento, podemos utilizar uma ou mais pastas externas, definir os estilos na seco <HEAD> do documento ou utilizar o atributo STYLE nas tags do HTML. O navegador l todas as definies de estilos que encontra e, quando aparecem estilos repetidos, ele combina-os num s estilo seguindo algumas regras simples. Uma das regras da cascata diz que, ao encontrar vrias verses para o mesmo estilo, o navegador guarda a ltima que encontrou. Outra regra diz que alguns estilos so herdados pelas tags que se encontram dentro de outras tags.
Limitaes dos navegadores atuais

As limitaes associadas ao suporte que os navegadores atuais oferecem devem estar sempre presentes na mente do criador de pginas baseadas em CSS. Se voc usar apenas as funcionalidades que so bem suportadas, que j so muitas, no ser preciso tomar muitas precaues. Se voc decidiu utilizar funcionalidades mais avanadas, definidas pelos padres CSS, lembre-se que preciso testar tudo de forma exaustiva em todos os navegadores relevantes para no ter surpresas desagradveis.
248
Seo 2 - A sintaxe CSS

Agora voc est pronto para usar as folhas de estilo em cascata. Elas utilizam uma sintaxe simples para definir a propriedade de estilo. A sintaxe das definies CSS composta por duas partes: uma tag e uma declarao. Veja:
tag { propriedade: valor }
Os nomes de propriedade fazem parte da especificao CSS (color, background etc.). Os valores representam todos os valores vlidos para a propriedade especfica. Veja um exemplo:
Tag H1 Declarao { color: green }
Neste exemplo a tag H1 diz que o estilo se aplica a tags <h1> e a definio diz que a cor do texto destas tags deve ser verde (green). A declarao fica entre chaves ({...}) e pode conter vrias definies. Cada definio formada por um par propriedade: valor, que separado da propriedade pelo carcter : (dois pontos.). A declarao pode ser composta de uma lista de parespropriedade: valores separados por ; (ponto e vrgula). Veja o exemplo abaixo:
Tag P Declarao { color: green; font-family: arial}
Unidade 9
249
Essas listas podem ser usadas de vrias formas, para aplicar estilo a uma tag. A W3C definiu um conjunto de tags e atributos que podem ser usados para aplicar qualquer folha de estilo em um documento. A base das folhas de estilo simples (ser estudada com mais nfase na prxima seo). Veja:
folhas de estilo inline uma definio de estilo que pode ser aplicada a uma tag HTML especfica, atravs da utilizao do atributo STYLE. folhas de estilo interna uma definio de estilo que pode ser criada entre as tags <STYLE> e </STYLE> (isso deve estar no cabealho do documento HTML). Esse tipo de definio estabelece um estilo para todas as ocorrncias de determinada tag HTML. Por exemplo, voc pode definir todas as ocorrncias de cabealho <H1> para que sejam apresentadas em tipo vermelho. folhas de estilo externa uma folha de estilo que pode ser importada de um arquivo externo, atravs da utilizao de <LINK REL=stylesheet HREF=nome do arquivo de folha de estilo>.
Ateno! O ideal remover toda a formatao das tags da linguagem e colocar em folhas de estilo em cascata.
Seo 3 Tipos de definio de estilos

Quando o navegador encontra uma folha de estilos num documento, ele a usa para formatar os elementos desse documento. Existem trs formas bsicas e diferentes (como j comentado) para definir estilos e inseri-los num documento.
250
1. Folhas de Estilo Inline

Usa-se um estilo inline quando a definio s precisa ser utilizada uma nica vez. A definio de estilos inline faz-se atravs do atributo STYLE colocado na tag ao qual queremos aplicar o estilo. A definio pode conter qualquer uma das propriedades CSS. A sintaxe a seguir mostra como a definio de um estilo inline:
<tag STYLE=propriedade: valor; propriedade: valor>... </tag>
A definio de estilos utilizando o atributo STYLE faznos perder muitas das vantagens das folhas de estilos porque acabamos por misturar estilos com contedos. Esta forma de definir estilos deve ser feita em uma nica tag. O atributo STYLE aceita quase todas as propriedades CSS. O exemplo seguinte mostra como podemos controlar a cor e a margem esquerda de um pargrafo:
<html> <body> <p style=color: blue; margin-left: 20px> Isto um pargrafo formatado com o atributo style</p> <p> este pargrafo no tem estilo </body> </html>
Unidade 9
251
Assim fica no navegador:
FIGURA 9.1 EXEMPLO DA CRIAO DE UM ESTILO EM PARGRAFO
Se desejarmos atribuir a uma propriedade um valor que contm espaos, devemos coloc-lo entre apstrofos (). No exemplo seguinte, usaremos o tipo de letra sansserif a um pargrafo e comicsansms a outro:
<html> <body> <p style=font-family: sans-serif> Neste pargrafo o tipo de letra sans-serif</p> <p style=font-family: comic sans ms> Neste pargrafo o tipo de letra comic sans ms </p> </body> </html>
A visualizao esta:
FIGURA 9.2 - EXEMPLO DA CRIAO DE UM ESTILO EM PARGRAFOS DIFERENTES
252
2. Folha de Estilos Interna

As folhas de estilos internas devem ser usadas quando as definies so usadas por um nico documento. Neste caso, as definies dos estilos so colocadas dentro de uma tag <STYLE> no cabealho do documento HTML. Veja este exemplo:
<STYLE TYPE=text/css> tag {propriedade : valor; propriedade : valor; ...} tag {propriedade : valor; propriedade : valor; ...} ... </STYLE>
Observe o uso do atributo TYPE na tag <STYLE> para indicar o uso da folha de estilo em cascata. Uma folha de estilos interna deve ser usada quando os estilos so usados uma nica vez. Nesse caso, as definies fazem-se dentro de uma tag <STYLE> que deve ser colocada dentro da tag <HEAD> da pgina HTML, assim:
<HEAD> <STYLE type=text/css> body { background-color: red } p </STYLE> </HEAD> { margin-left: 20px }
O navegador l as definies contidas na tag <STYLE> e faz a formatao dos elementos da pgina aplicando essas definies. O exemplo seguinte, permite-lhe experimentar isto de imediato e ver seu resultado no navegador:
Unidade 9
253
<html> <head> <style type=text/css> H1 { color: green } </style> </head> <body> <H1>Este cabealho tem cor verde</H1> </body> </html>
Visualizao:
FIGURA 9.3 EXEMPLO DE FOLHA DE ESTILO INTERNO
Se o valor que queremos dar propriedade tiver mais do que uma palavra, ento devemos coloc-lo entre aspas, como mostrado a seguir:
<html> <head> <style type=text/css> p { font-family: comic sans ms } </style> </head> <body> <p> </p> </body> </html> 254 O texto deste pargrafo tem tipo de letra comic sans ms.
Visualize agora:
FIGURA 9.4 EXEMPLO DE FOLHA DE ESTILO COM PROPRIEDADE COM MAIS DE UMA PALAVRA
Dentro das chaves { e }, podemos colocar vrias definies separadas pelo caracter ; (ponto e vrgula), conforme j comentado. O exemplo seguinte define trs propriedades para a tag <P>, que so o alinhamento, a cor do texto e o tipo de letra:
<html> <head> <style type=text/css> p { text-align: center; } </style> </head> <body> <p> O texto deste pargrafo tem tipo de letra arial, cor verde e est alinhado ao centro. </p> </body> </html> color: green; font-family: arial
Unidade 9
255
Observe como fica no navegador:
FIGURA 9.5 EXEMPLO DE FOLHA DE ESTILO COM MAIS DE UMA DEFINIO
Ateno! Para tornarmos mais legveis as definies dos estilos, devemos colocar cada definio em uma linha diferente, mas podemos tambm escrever tudo na mesma linha.
O comportamento normal dos navegadores consiste em ignorar os elementos cujo significado desconhecem. Isto significa que um navegador muito antigo, que no suporta estilos CSS, ignorar a tag <STYLE>, mas no ignorar o texto que est escrito l dentro. Se for necessrio evitar que esse navegador escreva o texto das definies, devemos ento ocult-lo, colocando-o dentro de um comentrio do HTML, como mostramos a seguir:
<head> <style type=text/css> <!-hr { color: blue } p { margin-left: 20px } body { background-image: url(backgrnd.jpg) } --> </style> </head>
256
Se o navegador suporta CSS, ele entender a aplicao da folha de estilo tag mencionada.
Saiba mais sobre os estilos! Mas opa! Voc deve estar se perguntando... Como vou saber aplicar todos os estilos? Como vou saber o nome exato de uma fonte que desejo? Como vou saber definir uma margem? E o espaamento entre as linhas? Calma, no se preocupe. Existem as propriedades da CSS que voc encontra em vrios livros e sites. No necessrio decorar todas as propriedades. Mas interessante conhec-las para poder criar as folhas de estilo a serem utilizadas no seu documento HTML e utilizar as tags HTML apenas para o contedo, sem se preocupar com layout. Um bom site o da prpria W3C: http://www.w3.org/TR/ REC-CSS1. Consulte tambm outros sites na seo Saiba Mais, nesta unidade.
3. Folha de Estilos Externa

Uma folha de estilos externa a soluo mais indicada quando se pretende aplicar os mesmos estilos a vrias pginas. Este mtodo de formatao permite-nos alterar os estilos apenas na folha e assim aplic-los a todas as pginas imediatamente. Todas as pginas ficam atualizadas com as novas definies. Para uma pgina poder usar uma folha de estilos, basta colocar dentro do cabealho (<HEAD>) uma tag <LINK> com uma referncia para a folha de estilos que contm as definies, como se ilustra a seguir:
<HEAD> <LINK rel=stylesheet type=text/css href=meu_estilo.css> </HEAD>
Unidade 9
257
A tag LINK associa um arquivo de folha de estilo externa ao documento corrente. Dessa forma, um estilo padronizado para um site pode ser determinado pelo gerente, por exemplo, e aplicado aos documentos criados por um autor de uma organizao. O atributo REL relaciona o link a uma folha de estilos externa. A utilizao de folha de estilos externa permite poupar tempo, ganhar flexibilidade e aumentar a consistncia das pginas que constituem um website. Quando guardamos os estilos em uma pasta externa e os aplicamos a todas as pginas de um website, a modificao de diversas qualidades do aspecto grfico passa a ser uma tarefa fcil. O navegador l as definies contidas na folha de estilos (meu_estilo.css) e faz a formatao dos elementos do documento aplicando essas definies. Se voc abrir o arquivo meu_estilo.css ir reparar que a folha de estilos externa apenas um arquivo de texto que contm definies CSS. No seu contedo no podem aparecer tags do HTML, pois s so permitidas definies CSS vlidas.
Elementos de bloco e elementos inline

Todos os elementos visveis numa pgina escrita em HTML pertencem a um destes dois tipos: bloco ou inline . Os elementos de bloco, como por exemplo <div> ou <table>, comeam numa nova linha e ao terminarem ocorre novamente uma mudana de linha. Os elementos de bloco recebem larguras que so calculadas em funo da largura do bloco em que esto contidos. Os elementos inline, como <b> ou <span>, no do incio a uma nova linha e a sua largura determinada apenas pelo seu contedo. O seu comportamento semelhante ao comportamento do texto simples.
258
Agrupar tags
Se voc desejar aplicar os estilos a mais do que uma tag, agrupe as tags que partilham as mesmas definies. Para isso, escreva uns seguidos dos outros, separados por vrgulas. No exemplo seguinte, as tags de <h1> at <h6> partilham todas a mesma definio:
h1,h2,h3,h4,h5,h6 { color: green }
Tags de Classe
Uma classe um estilo amplamente definido, que estabelece propriedades para alguns ou para todos os elementos de um documento. Assim, a classe pode ser aplicada a qualquer elemento, atravs da utilizao do atributo CLASS. Apenas as definies de estilo para esse elemento na classe especfica sero aplicadas a ele. As definies de classes permitem-nos definir estilos diferentes que podem ser aplicados mesma tag. Imagine que voc precisa ter dois tipos diferentes de pargrafo no documento, um alinhado direita e outro alinhado ao centro. Vejamos como as classes tornam isto fcil:
<html> <head> <style type=text/css> p.direita { text-align: right } p.centro { text-align: center } </style> </head> <body> 259
Unidade 9
<p class=direita> Este pargrafo est alinhado a direita.</p> <p class=centro> Este pargrafo est alinhado ao centro.</p> </body> </html>
Visualize:
FIGURA 9.6 EXEMPLO DE TAG DE CLASSE
O atributo CLASS, como qualquer outro atributo, s pode ser especificado uma nica vez em uma tag. O exemplo seguinte est errado:
<p class=direita class=verde> Este pargrafo tem um erro causado pela utilizao repetida do atributo class. </p>
As definies de classe tambm podem ser criadas sem colocarmos o nome de uma tag no incio da definio. Quando isso acontece, as definies podem ser aplicadas a qualquer tag, cujo atributo CLASS tenha o valor correto. O exemplo seguinte define uma classe que pode ser utilizada com qualquer tag da HTML:
260
<html> <head> <style type=text/css> .centro { text-align: center } </style> </head> <body> <h2 class=centro> Cabealho alinhado ao centro </h2> <p class=centro> Este pargrafo tambm est alinhado ao centro. </p> </body> </html>
FIGURA 9.7 EXEMPLO DE TAG DE CLASSE EM TAGS DIFERENTES
Tags de ID
O atributo ID define algo que tenha um valor exclusivo para um documento inteiro, ou seja, aplica-se a um nico elemento da pgina. As regras do HTML ditam que os valores do atributo ID no podem repetir-se numa mesma pgina. Da resulta que o nmero de elementos no documento com um determinado ID um ou zero.
Unidade 9
261
A regra de seleo para o estilo definido no exemplo seguinte indica que ele s pode ser aplicado a uma tag <P> que tenha o valor para1 no atributo ID:
<html> <head> <style type=text/css> p#para1 { text-align: center; color: red } </style> </head> <body> <p id=para1> Este pargrafo est alinhado ao centro e tem cor vermelho. </p> </body> </html>
Visualize:
FIGURA 9.8 EXEMPLO DE TAG DE ID
262
Se tentarmos aplicar esta regra a uma tag <DIV>, usando id=para1, vemos que o navegador no a aceita, pois ele foi definido somente para a tag <P>:
<html> <head> <style type=text/css> p#para1 { text-align: center; color: red } </style>
</head> <body> <div id=para1> Este elemento no est alinhado ao centro e no tem cor vermelho porque no um pargrafo. </div> </body> </html>
A visualizao fica assim:
FIGURA 9.9 EXEMPLO DE TAG ID UTILIZADA EM OUTRA TAG NO DEFINIDA
Unidade 9
263
Se quisermos que a regra se aplique a qualquer tag que tenha o id=para1, basta escrev-la na forma seguinte:
#para1 { text-align: center; color: red }
A regra acima aplicvel a qualquer tag que tenha o ID correto porque no est sendo definido para uma tag especfica e sim para o ID que se aplica a todas as tags. No exemplo seguinte, ela seria aplicada tag <H1>:
<H1 id=para1>As msicas do Bonga so bu de fixes</H1>
Escrever Comentrios em Folha de Estilos

Podemos inserir comentrios nas definies CSS para explicar o cdigo que escrevemos tornando-o mais fcil de compreender. Ao mais tarde voltarmos a uma folha de estilos ou se a partilharmos com outra pessoa, ser mais fcil perceber como funciona. Para iniciar um comentrio escreva a seqncia de caracteres /*, depois o texto do comentrio e no fim escreva */ para terminar o comentrio. O exemplo seguinte mostra como se faz:
264
p { text-align: center; /* Isto um comentrio */ color: black; /* O MSIE 5 no reconhece os comentrios!!! */ font-family: arial }
Seo 4 - A ordem da cascata

Quando um estilo definido mais do que uma vez, qual das definies deve o navegador escolher? A primeira? A ltima? Nenhuma delas? Para decidir, o navegador aplica as regras seguintes (listadas por ordem crescente de importncia):
Estilos definidos por omisso (so aplicados sempre que no existirem outros que se sobreponham a eles). Estilos definidos numa folha de estilos interna (dentro da tag <STYLE>) ou em uma pasta externa. Estilos "inline (definidos atravs do atributo STYLE nas tags do documento HTML).
Assim, temos que os estilos que so definidos na prpria tag atravs do atributo STYLE tm a prioridade mais elevada. As definies que o atributo STYLE faz sobrepem-se a qualquer definio que tenha sido feita antes.
Unidade 9
265
Ateno! Um documento HTML pode definir ou utilizar mais do que uma folha de estilos. Quando isso acontece, possvel que algumas propriedades sejam definidas numa folha e definidas de novo numa outra. Nestes casos, o navegador deve aplicar as regras descritas para decidir qual das definies mais importante.
Suponha que uma folha de estilos externa defina as seguintes propriedades para a tag h2:
H2 { color: red; text-align: left; font-size: 8pt }
Mas existe uma folha de estilos interna com as seguintes propriedades tambm para a tag h2:
H2 { text-align: right; font-size: 20pt }
Se a pgina que contm a folha de estilos interna usa a tag <link> para se ligar folha de estilos externa indicada antes, ento as duas definies sero combinadas para produzir a seguinte verso final para a tag h2:
H2 { color: red; text-align: right; font-size: 20pt }
266
Veja que a cor foi herdada da folha externa, mas o alinhamento do texto e o tamanho de letra foram substitudos pelas definies dadas na folha interna.
Herana de Estilos entre Elementos

Algumas propriedades CSS definidas para um elemento so automaticamente aplicadas aos descendentes desse elemento. Quando isso acontece, diz-se que as propriedades so herdadas. O exemplo seguinte mostra como funciona este mecanismo de herana de estilos:
<html> <head> <style type=text/css> div { color: blue } </style> </head> <body> <div>O texto dos elementos <div> tem cor azul. <p> Este pargrafo est dentro de um elemento <div>. Ele herda a cor azul. </p> </div> <p> Este pargrafo no est dentro de nenhum elemento que lhe deixe uma herana. </p> </body> </html>
No exemplo acima, a folha de estilos expressa que o texto das tags <DIV> deve ter cor azul. O pargrafo que est dentro de uma tag <DIV> herda a cor azul porque a propriedade color herdada pelos descendentes de uma tag. J o segundo pargrafo no est dentro de nenhuma tag que lhe deixe uma herana (que neste caso a propriedade color) e por isto o seu texto tem a cor normal.
Unidade 9
267
Visualizao:
FIGURA 9.10 EXEMPLO DE HERANA DE ESTILOS
H outras propriedades que s afetam o elemento ao qual so aplicadas e no se propagam aos seus descendentes. Diz-se que estas propriedades no so herdadas. O exemplo seguinte semelhante ao anterior com o acrscimo da propriedade border, que no herdada:
<html> <head> <style type=text/css> div { color: blue; border: solid thin red } </style> </head> <body> <div> Os elementos <div> recebem uma linha de contorno vermelha (border) e texto com cor azul. <p> Este pargrafo est dentro de um elemento <div>. Ele herda a cor azul mas no herda a linha de contorno (border). </p> <div> Tal como o elemento <div> principal este elemento <div> recebe a sua prpria linha de contorno. </div> </div> </body> </html>
268
Como voc pode observar no seu navegador, a propriedade color propaga-se tag <P> mas a propriedade border no:
FIGURA 9.11 OUTRO EXEMPLO DE HERANA DE ESTILOS
Sntese
Atravs da utilizao das folhas de estilo, voc pode definir tudo, de tipos de fonte para as diferentes tags da HTML at cores de fontes, cores e imagens grficas de fundo, margens, espaamento, estilo de tipo e muito mais. Basicamente, qualquer parte da aparncia visual de seu documento pode ser definida com as folhas de estilo em cascata. Enfim, nesta unidade aprendemos a criar estilos para um documento HTML. Apesar de os navegadores atuais (Netscape7/Mozilla, MSIE5 e superior, Opera7) oferecerem um bom suporte para os estilos CSS, preciso chamar a ateno para o fato de ainda subsistirem alguns problemas quando aplicamos tcnicas avanadas de formatao baseadas em CSS. Por isso, necessrio testar e aplicar os estilos para que voc veja o resultado em vrios navegadores. Nesta unidade, tambm definimos algumas tags utilizadas para criar estilos em documentos HTML que podem ser resumidas no quadro a seguir:
Unidade 9
269
Tag
<STYLE> <LINK> <DIV>
Descrio
Define estilos CSS estilos internos Define uma referncia para um estilo externo Insere uma seo no documento
1. Crie uma folha de estilo externa para seu documento HTML. Utilize as mais variadas propriedades em tags como <BODY>, <P>, <DIV> etc. Veja as referncias para consultar as propriedades e seus valores em sites apropriados.
270
Saiba mais
Voc pode saber mais sobre o assunto estudado nesta unidade consultando os seguintes sites:
http://www.w3.org/TR/REC-CSS1 (Cascading style sheets, level 1) http://www.artifice.web.pt/tutoriais/cntd/tut_css19.html (Tutorial e referncia de CSS) http://www.htmlhelp.com/reference/css/structure.html (CSS structure and rules) http://www.maujor.com/ (CSS para web design) http://paginas.fe.up.pt/~jvv/Assuntos/CSS/CSS_ficheiros/frame.html (Cascading style sheets) http://unix.wmonline.com.br/dreamweaver/tutoriais/melhordaweb/css_dw/ (Como utilizar folhas de estilos
em cascata)
O seguinte site aborda apostilas de CSS:

http://www.crieseuwebsite.com/apostilas/abrecategoria.php?cat=7&nomecat=CSS (Crie seu web site)
Tambm existem outras propriedades de recursos mais avanados para a utilizao em folhas de estilos que podero ser encontradas em:
http://www.artifice.web.pt/tutoriais/cntd/tut_css10.html (CSS avanado)
Unidade 9
271
unidade 10
Criao de Formulrios
Criar um formulrio. Conhecer os elementos bsicos de entrada dos
formulrios.
Sees de estudo
Seo 1 Criando um formulrio Seo 2 Campos de entrada de texto Seo 3 Selees e listas de opes Seo 4 Botes de rdio Seo 5 Caixas de validao Seo 6 O boto de envio Seo 7 Exemplo completo de formulrio Seo 8 Exemplo de um formulrio utilizando Javascript

At agora voc viu a forma na qual o HTML mostra a informao, essencialmente mediante o texto, imagens e links. At ento, os leitores esto sentados lendo as pginas, percorrendo vnculos e absorvendo as informaes que voc apresentou. Os formulrios mudam inteiramente essa situao. O leitor passa a interagir com o seu site atravs de uma grande quantidade de aes que se podem realizar na web: comprar um artigo, preencher uma enquete, enviar um comentrio ao autor etc. Voc viu, anteriormente, que podemos, por intermdio dos links, entrar em contato diretamente com um correio eletrnico. Entretanto, esta opo pode ser pouco verstil em alguns casos se o que desejamos que o leitor nos envie uma informao bem precisa atravs da pgina criada por voc. Isto pode ser realizado por meio do uso de formulrios. Os formulrios so estas famosas caixas de texto e botes que podemos encontrar em muitas pginas web. So muito utilizados para realizar buscas ou tambm para introduzir dados pessoais, por exemplo, em sites de comrcio eletrnico. Os dados que o usurio introduz nestes campos so enviados ao correio eletrnico do administrador pelo formulrio ou so processados automaticamente por um programa. Usando HTML, voc pode unicamente enviar o formulrio a um correio eletrnico. Se quiser process-lo por intermdio de um programa, a coisa pode ser um pouco mais complexa, j que voc ter que empregar algumas linguagens para web como ASP ou PHP, por exemplo, que permitir, entre outras coisas, o tratamento de formulrios.
274
Seo 1 - Criando um formulrio

Um formulrio uma seo da pgina HTML que contm elementos que permitem ao leitor introduzir dados numricos, textos curtos, textos extensos, selecionar elementos em uma lista com vrias escolhas, responder facilmente respostas do tipo sim ou no, selecionar rapidamente uma opo em um pequeno grupo etc. A criao de um formulrio envolve, em geral, duas etapas independentes: a criao do layout do formulrio e a criao de um programa de script no lado do servidor para processar as informaes que voc obtm a partir de um formulrio. Mas, nesta unidade, voc aprender a criar os layouts do formulrio. Para criar um formulrio, voc utiliza as tags <FORM>...</ FORM>. A tag <FORM> por si s no faz com que o navegador desenhe algo na pgina nem permite inserir dados. Ela contm elementos que recolhem os dados (campos de texto, botes etc.) e possui atributos que dizem ao navegador como e para onde deve enviar os dados para processamento.
Atributos da tag <FORM>

Acompanhe os atributos da tag <FORM>, utilizados para a criao de formulrios.
ACTION
Este atributo da tag <FORM> define o tipo de ao a ser realizado com o formulrio. Como j comentado anteriormente, existem duas possibilidades:
O formulrio enviado a um endereo de correio eletrnico. O formulrio enviado a um programa ou script que processa seu contedo, ou seja, uma URL.
Unidade 10
275
No primeiro caso, o contedo do formulrio enviado ao endereo de correio eletrnico especificado por meio da sintaxe abaixo:
<FORM action=mailto:endereo@correio.com>...</FORM>
Se o que o que voc deseja que o formulrio seja processado por um programa, voc deve especificar o endereo do arquivo que contm tal programa. Neste caso, a tag ficaria da seguinte forma:
<FORM action=endereo do arquivo>...</FORM>
A maneira de se expressar a localizao do arquivo que contm o script a mesma j estudada na unidade sobre vnculos.
METHOD
Este atributo da tag <FORM> encarrega-se de especificar a forma na qual o formulrio enviado, ou seja, seleciona um mtodo para acessar a URL de ao. Os mtodos usados atualmente so GET e POST. Ambos os mtodos transferem dados do navegador para o servidor, com a seguinte diferena bsica:
POST - Os dados inseridos fazem parte do corpo da mensagem enviada para o servidor; transfere grande quantidade de dados. GET - Os dados inseridos fazem parte da URL associada consulta enviada para o servidor; suporta at 128 caracteres.
Os formulrios podem conter qualquer formatao - pargrafos, listas, tabelas, imagens - exceto outros formulrios. Em especial, colocamos dentro da tag <FORM> as formataes para campos
276
de entrada de dados, que so trs: <INPUT>, <SELECT> e <TEXTAREA>. Todos os campos de entrada de dados tm um atributo NAME, ao qual associamos um nome, utilizado, posteriormente, pelo sistema para enviar os dados. Normalm ente, so usados scripts. Os scripts organizam esses dados de entrada de todos os campos em um conjunto de informaes e realizam uma tarefa programada como, por exemplo, enviar os dados do formulrio para o seu e-mail. Como a HTML no tem condies de fazer isso, necessrio utilizar scripts CGI, PERL, ASP, JavaScript etc. para executar estas tarefas. Porm, estes tipos de scripts necessitam de aprendizado mais dedicado para criar o que voc deseja e so muito mais complexos do que a linguagem HTML, pois eles processam informaes.
ENCTYPE
Este outro atributo da tag <FORM> indica a forma na qual a informao que for mandada pelo formulrio viajar. No caso mais corrente, ao se enviar o formulrio por correio eletrnico, o valor deste atributo deve ser TEXT/PLAIN. Assim, voc consegue que o contedo do formulrio seja enviado como texto plano dentro do e-mail. Se voc deseja que o formulrio se processe automaticamente por um programa, geralmente no se utiliza este atributo no seu valor padro, ou seja, no incluindo ENCTYPE dentro da tag <FORM>. Assim, para o caso mais habitual - o envio do formulrio por correio - a tag de criao do formulrio ter o seguinte aspecto:
<FORM action=mailto:endereo@correio.com (ou o nome do arquivo de script) method=post enctype=text/plain>...</FORM>
Unidade 10
277
Entre esta tag e seu fechamento, voc colocar o resto de tags que daro forma ao seu formulrio, as quais sero vistas nas prximas sees. O HTML prope uma grande diversidade de alternativas na hora de criar os formulrios. Elas vo desde a clssica caixa de texto at a lista de opes, passando pelas caixas de validao. Voc vai ver em que consiste cada uma destas modalidades e como pode implement-las em seu formulrio.
Seo 2 Campos de entrada de texto

Os campos de textos permitem ao usurio digitar texto em um campo de nica linha. A tag <INPUT> inicia a criao de campos de dados ou caixas de texto. Esse um dos elementos que mais encontramos nos formulrios. A tag <INPUT> no tem tag de fechamento. O emprego destas caixas est fundamentalmente destinado tomada de dados breves: palavras ou conjuntos de palavras de longitude relativamente curta. Voc ver, mais adiante, que existe outra forma de tomar textos mais longos a partir de outra tag. H vrios atributos que permitem a criao de diferentes campos de entrada de dados.
Atributo NAME
O nome do elemento do formulrio de grande importncia para poder identific-lo em nosso programa de processamento ou no e-mail recebido. Sua sintaxe :
<INPUT name=nome_do_campo>
Este atributo especialmente usado para que voc d um nome ao campo. Ele no aparece na pgina, mas serve para identificar o campo e o valor digitado no e-mail que voc receber ou algum elemento do script a ser processado.
278
Nunca deixe de definir o nome dos campos, pois s assim voc poder saber o que cada usurio preencheu em cada campo. Por exemplo, se voc tem vrios campos de texto, cada um para um tipo de informao diferente, voc usa o atributo NAME para identificar o campo. Voc sempre ver em todas as tags INPUT que este atributo estar presente.
Atributo TYPE
Por outro lado, importantssimo indicar o atributo TYPE, j que existem outras modalidades de formulrio que usam esta mesma tag. Em campo de dados de texto, o atributo TYPE recebe o valor text. A tag da seguinte forma:
<INPUT type=text name=nome>
Deste modo expressamos nosso desejo de criar uma caixa de texto, cujo contedo ser chamado nome (por exemplo). O aspecto deste tipo de caixas conhecido, como pode ser visto aqui:
FIGURA 10.1 CAIXA DE TEXTO
Quando INPUT no apresenta o atributo TYPE, assume-se TYPE=TEXT como padro da formatao.
Unidade 10
279
O exemplo seguinte mostra um formulrio simples com dois elementos input :
<FORM action=processar.php method=post> Primeiro nome: <INPUT type=text name=primeiro_nome><br> ltimo nome: <INPUT type=text name=ultimo_nome> </FORM>
Acompanhe o aspecto do formulrio quando visualizado no seu navegador:
FIGURA 10.2 EXEMPLO DE UM FORMULRIO
Atributo VALUE
Em alguns casos pode ser interessante atribuir um valor definido ao campo em questo. Isto pode ajudar ao usurio a preencher mais rapidamente o formulrio ou a dar alguma idia sobre a natureza de dados que se deseja. Este valor inicial do campo pode ser expresso mediante o atributo value. Vejamos seu efeito com um exemplo simples:
<input type=text name=nome value=Ana Paula>
280
Gera-se, assim, um campo deste tipo:
FIGURA 10.3 EXEMPLO DE CAIXA DE TEXTO COM VALOR DEFINIDO
Campo de dados texto em formato senha

O campo de dados texto, em formato senha, uma entrada de texto na qual os caracteres so escondidos por asteriscos. Podemos esconder o texto escrito por meio de asteriscos de forma a fornecer certa confiabilidade. Este tipo de campo anlogo aos de texto com somente uma diferena: o atributo TYPE ser igual ao password :
<INPUT type=password name=nome>
Neste caso, pode ser comprovado que, ao escrever dentro do campo no lugar de texto, sero vistos asteriscos. Estes campos so ideais para a introduo de dados confidenciais, principalmente cdigos de acesso. muito usado para entradas de senhas, como se pode ver no exemplo:
<FORM> Usurio: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME=senha> </FORM>
Unidade 10
281
Resultado:
FIGURA 10.4 EXEMPLO DE CAIXA DE TEXTO EM FORMATO SENHA
Campo de dados escondido

O campo de dados escondido funciona igual a um campo de texto, s que ele no aparece no formulrio para o visitante. Ele est l no cdigo, mas o visitante no pode v-lo ou alter-lo. Isso importante para voc incluir informaes que ache necessrias, mas que no deseja que o visitante altere. Veja um exemplo:
<FORM> <INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> </FORM>
Aqui o campo est escondido. O visitante no o v, mas ele vai ser processado pelo formulrio. Voc pode inclu-lo sem problemas junto com os outros elementos. Por exemplo:
<FORM> Usurio: <INPUT TYPE=TEXT NAME=login><br> Senha: <INPUT TYPE=PASSWORD NAME=senha> <INPUT TYPE=HIDDEN NAME=Escondido Value=Sim> </FORM>
282
A visualizao deste exemplo a seguinte:
FIGURA 10.5 EXEMPLO DE CAIXA DE TEXTO COM CAMPO ESCONDIDO
Em alguns casos, a parte dos prprios dados enviados pelo usurio, pode ser prtico enviar dados definidos por ns mesmos, que ajudem o programa em seu processamento do formulrio. Vejamos um outro exemplo:
<input type=hidden name=site value=www.meusite.com>
Esta tag, includa dentro de nosso formulrio, enviar um dado adicional ao correio ou ao programa encarregado da gesto do formulrio. Poderamos, a partir deste dado, tornar conhecido para o programa a origem do formulrio ou algum tipo de ao a ser realizada (um re-endereamento, por exemplo).
Atributo SIZE
O atributo SIZE define o tamanho da caixa em nmero de caracteres. Se, ao escrever, o usurio chega ao final da caixa, o texto ir desfilando medida que se escreve fazendo desaparecer a parte de texto que fica esquerda. Este atributo tambm especifica o tamanho do espao no vdeo para o campo do formulrio. S vlido para campos TEXT e PASSWORD. O valor padro 20. Veja um exemplo:
Unidade 10
283
<FORM> Endereo: <INPUT TYPE=TEXT SIZE=35> </FORM>
FIGURA 10.6 - EXEMPLO DA UTILIZAO DO ATRIBUTO SIZE
Atributo MAXLENGTH
Este atributo indica o tamanho mximo do texto que pode ser tomado pelo formulrio. importante no confundi-lo com o atributo SIZE. Enquanto o primeiro define o tamanho aparente da caixa de texto, o MEXLENGTH indica o tamanho mximo real do texto que pode ser escrito. Podemos ter uma caixa de texto com um tamanho aparente (SIZE) que menor do que o tamanho mximo (MAXLENGTH). O que ocorrer, neste caso, que, ao ser escrito, o texto ir desfilando dentro da caixa at que cheguemos ao seu tamanho mximo, definido por MAXLENGTH. Neste momento, ser impossvel continuar escrevendo. Este atributo s vlido para campos de entrada TEXT e PASSWORD.
<FORM> Dia do ms: <INPUT TYPE=TEXT NAME=ex MAXLENGTH=2> </FORM>
284
Resultado:
FIGURA 10.7 - EXEMPLO DA UTILIZAO DO ATRIBUTO MAXLENGTH
No exemplo acima, apenas 2 caracteres sero lidos pelo formulrio e no ser possvel digitar mais do que 2 caracteres no campo.
Ateno! Quando voc deseja utilizar elementos de formulrio, voc deve escrev-los sempre entre as tags <form>...</form>. Caso contrrio, os elementos sero vistos perfeitamente no Internet Explorer, enquanto em outros navegadores podem no ser. por isso que, para mostrar um campo de texto, no adianta colocar a tag <input> e sim, coloc-la dentro de um formulrio, assim:
<form> <input type=text name=nome value=Josefa Palotes> </form>
rea de texto longo

Se voc deseja colocar disposio do usurio um campo de texto, onde possa escrever sobre um espao composto de vrias linhas, voc tem, ento, que utilizar a tag <TEXTAREA> e seu fechamento correspondente.
Unidade 10
285
Estes tipos de campos so prticos quando o contedo a ser enviado no um nome, telefone ou qualquer outro dado breve e sim um comentrio, opinio etc. Dentro desta tag, voc deve indicar o atributo NAME para associar o contedo a um nome, que ser semelhante a uma varivel em linguagens de programao. Alm disso, voc pode definir as dimenses do campo a partir dos seguintes atributos:

ROWS: Define o nmero de linhas do campo de texto. COLS: Define o nmero de colunas do campo de texto.
A tag fica desta forma:

<TEXTAREA name=comentrio rows=10 cols=40>...</TEXTAREA>
O resultado o seguinte:
FIGURA 10.8 - EXEMPLO DA UTILIZAO DE REA DE TEXTO
Mesmo assim, ainda possvel definir o contedo do campo. Para isso, voc no usar o atributo VALUE e sim, o contedo entre as tags que lhe desejamos atribuir. Vejamos:
<textarea name=comentrio rows=10 cols=40>Escreva seu comentrio....</textarea>
286
Voc obtm o resultado:
FIGURA 10.9 - EXEMPLO DA UTILIZAO DE REA DE TEXTO COM CONTEDO DEFINIDO
Repare que, no atributo COLS, ns definimos o nmero de colunas para a largura do campo de texto e, em ROWS, o nmero de linhas para o campo de texto. Se o usurio digitar mais do que 10 linhas ou se o texto ocupar mais do que as 10 linhas definidas, surgir uma barra de rolagem. Os valores destes atributos podem ser modificados vontade de acordo com a sua necessidade.
Seo 3 Selees e listas de opes

Efetivamente, os textos so uma forma muito prtica para se fazer chegar a informao do navegante. Porm, em muitos casos, os textos so dificilmente adaptveis a programas que possam process-los devidamente ou pode ser, tambm, que seu contedo no se ajuste ao tipo de informao que requeremos. por isso que, em determinados casos, pode ser mais efetivo propor uma escolha ao navegante, a partir da exposio de uma srie de opes. Este o caso de, por exemplo, oferecer uma lista de pases, o tipo de carto de crdito para um pagamento etc. Estes tipos de opes podem ser expressos de diferentes formas.
287
Unidade 10
As listas de opes so tipos de menus desdobrveis que nos permitem escolher uma (ou vrias) das mltiplas opes que nos propem. Para constru-las, utilizaremos uma tag com seu respectivo fechamento: <SELECT>. Como para os casos j vistos, dentro desta tag, definiremos seu nome por meio do atributo NAME. Cada opo ser includa em uma linha precedida da tag <OPTION>. Veja, a partir destas diretrizes, a forma mais tpica e simples desta tag :
<SELECT name=estao> <option>Primavera</option> <option>Vero</option> <option>Outono</option> <option>Inverno</option> </SELECT>
O resultado :
FIGURA 10.10 - EXEMPLO DE SELEO
A tag SELECT pode ser vista modificada, principalmente a partir de outros dois atributos: SIZE e MULTIPLE.
288
Atributo SIZE indica o nmero de elementos da lista visveis no formulrio. O resto pode ser visto por meio da barra lateral de deslocamento. Exemplo:
<SELECT name=estao size=3> <option>Primavera</option> <option>Vero</option> <option>Outono</option> <option>Inverno</option> </SELECT>
Visualize agora:
FIGURA 10.11 - EXEMPLO DE SELEO COM O ATRIBUTO SIZE
Atributo MULTIPLE permite a seleo de vrios elementos da lista. A escolha de mais de um elemento se faz a partir das teclas CTRL ou SHIFT ou com o mouse.
Ateno! Se for possvel, no utilize MULTIPLE. No recomendamos a prtica desta opo j que o manejo das teclas CTRL ou SHIFT, para escolher vrias opes, pode ser desconhecido para o usurio. Evidentemente, sempre cabe a possibilidade de explicar como funciona, apesar de ser uma complicao a mais para o visitante.
Unidade 10
289
Vejamos qual o efeito produzido por esses atributos:
<SELECT name=estao size=3 MULTIPLE> <option>Primavera</option> <option>Vero</option> <option>Outono</option> <option>Inverno</option> </SELECT>
A lista poder ser selecionada dessa forma:
FIGURA 10.12 - EXEMPLO DE SELEO COM O ATRIBUTO MULTIPLE
A tag <OPTION> ainda pode ser utilizada juntamente com outros atributos, tais como SELECTED e VALUE.
Atributo SELECT - Da mesma forma que o MULTIPLE, este atributo no toma nenhum valor, a no ser o de simplesmente indicar que a opo apresentada est escolhida por padro. Esse atributo aplicado tag <OPTION>.
Assim, se mudamos a linha do cdigo anterior:
290
<SELECT name=estao> <option>Primavera</option> <option>Vero</option> <option SELECTED>Outono</option> <option>Inverno</option> </SELECT>
O resultado ser:
FIGURA 10.13 - EXEMPLO DE SELEO COM O ATRIBUTO SELECTED
Atributo VALUE - Define o valor da opo que ser enviada ao programa ou ao correio eletrnico se o usurio escolhe essa opo. Este atributo pode ser muito til se o formulrio for enviado a um programa, visto que a cada opo se pode associar um nmero ou letra, o qual se torna muito mais fcil de manipular do que uma palavra ou texto. Poderamos assim escrever linhas do tipo:
<option value=1>Primavera</option>
Deste modo, se o usurio escolhe primavera, o que chegar ao programa (ou ao correio) uma varivel chamada estao, que ter como valor 1. No correio eletrnico, por exemplo, receberamos:
estao=1 291
Unidade 10
Seo 4 - Botes de rdio

Os botes de rdio indicam uma lista de itens, dos quais apenas um pode ser escolhido de cada vez. Os botes de rdio usam a tag <INPUT> com o atributo TYPE igual a radio. Voc indica os grupos de botes de rdio usando o mesmo atributo NAME para cada um. Alm disso, cada um dos botes de rdio deve ter um atributo VALUE exclusivo, indicando o valor da seleo. Veja o exemplo:
<form> <input type=radio name=sexo value=masculino> Masculino<br> <input type=radio name=sexo value=feminino> Feminino </form>
Este o aspecto do formulrio quando visualizado em um navegador:
FIGURA 10.14 - EXEMPLO DE BOTO DE SELEO
Repare que s se pode selecionar uma das opes dadas. Elas excluem-se mutuamente. Se o usurio escolhe, supostamente, feminino, receberemos como resultado:
292
Sexo=feminino
Ateno! Observe que a tag <input type=radio> somente coloca o campo para clicar na pgina. Os textos que aparecem ao lado, assim como as quebras de linha, devem ser dispostos com o correspondente texto no cdigo da pgina e com as tags HTML que necessitarmos.
Por padro, todos os botes de rdio esto desativados (no selecionados). Voc pode determinar o boto de rdio padro de um grupo, atravs da utilizao do atributo CHECKED, da seguinte forma:
<form> <input type=radio name=sexo value=masculino> Masculino<br> <input type=radio name=sexo value=feminino checked> Feminino </form>
Vejamos o efeito:
FIGURA 10.15 - EXEMPLO DE BOTO DE SELEO SELECIONADO
Unidade 10
293
Seo 5 - Caixas de validao

As caixas de validao (checkboxes) ou verificao devem ser usadas sempre que queremos que o usurio aprove (ou no) itens dentro de um pequeno grupo. permitido validar mais do que uma opo simultaneamente. Ou seja, as caixas de verificao permitem a seleo de vrios itens de uma lista. Cada caixa pode estar ativada ou desativada (o padro desativada). A tag <INPUT>, juntamente com o atributo TYPE, definem as caixas de validao quando TYPE=checkbox. Observe o exemplo:
<form> <input type=checkbox name=patins>Eu tenho patins.<br> <input type=checkbox name=skate>Eu tenho um skate.<br> <input type=checkbox name=bicicleta>Eu tenho uma bicicleta. </form>
Acompanhe o aspecto do formulrio quando visualizado em um navegador:
FIGURA 10.16 - EXEMPLO DE CAIXA DE VALIDAO
Repare que voc pode selecionar cada uma das opes de forma independente da outra. Estes tipos de elementos podem ser ativados ou desativados pelo usurio com um simples clique sobre a caixa em questo.
294
Da mesma forma que para os botes de rdio, podemos ativar a caixa de validao por meio do atributo CHECKED. Exemplo:
<form> <input type=checkbox name=patins checked>Eu tenho patins.<br> <input type=checkbox name=skate>Eu tenho um skate.<br> <input type=checkbox name=bicicleta>Eu tenho uma bicicleta. </form>
Visualize:
FIGURA 10.17 - EXEMPLO DE CAIXA DE VALIDAO SELECIONADA
O tipo de informao que chegar ao nosso correio (ou ao programa) ser do tipo:
patins=on (ou off dependendo se tiver sido ativada ou no)
Unidade 10
295
Seo 6 O boto de envio

Os botes de envio orientam o navegador para que envie os dados do formulrio ao servidor. Voc dever incluir pelo menos um boto de envio em cada formulrio. Para criar um boto de envio, use SUBMIT como valor do atributo em uma tag <INPUT>, da seguinte forma:
<INPUT type=submit>
Voc pode modificar o texto de rtulo do boto usando o atributo VALUE, como neste exemplo:
<input type=submit value=Enviar>
O aspecto desse boto o seguinte:
FIGURA 10.18 - EXEMPLO DE BOTO DE ENVIO
Quando o usurio clicar sobre o boto Enviar as repostas e texto inseridos no formulrio so enviados para processamento. O atributo action do elemento <FORM> contm o endereo (URL) do recurso da web que est encarregado de realizar esse processamento. para l que o contedo do formulrio enviado. Veja este exemplo:
296
<form name=entrada action=pagina2.html method=get> Nome: <input type=text name=nome> <input type=submit value=Enviar> </form>
Observe o aspecto do formulrio quando visualizado em um navegador:
FIGURA 10.19 EXEMPLO DE FORMULRIO
Os formulrios, assim, no somente permitem captar uma informao do usurio como tambm apresentam uma outra srie de funes. Concretamente, os formulrios permitem-nos enviar informaes atravs do seu boto de envio. Tambm pode ser prtico propor um boto Apagar Campos ou, ainda, propor dados ocultos que possam ajudar-nos em seu processamento.
Boto apagar campos

Este boto nos permite apagar o formulrio por completo, caso o usurio deseje refaz-lo desde o princpio. Sua estrutura sinttica igual anterior, s que utilizamos o atributo TYPE com o valor reset :
<input type=reset value=Apagar Campos>
Unidade 10
297
A diferena entre o boto de envio, indispensvel em qualquer formulrio, para o boto de Apagar Campos meramente optativa j que este ltimo no utilizado freqentemente. Tenha cuidado de no coloc-lo muito perto do boto de envio e de distinguir claramente um do outro.
Botes normais
Dentro dos formulrios, tambm podemos colocar botes normais, clicveis como qualquer outro boto. Da mesma forma que ocorre com os campos HIDDEN, estes botes por si s no tm muita utilidade, mas poderemos necessit-los para realizar aes no futuro. Sua sintaxe a seguinte:
<input type=button value=Texto escrito no boto>
A visualizao ficaria desta maneira:
FIGURA 10.20 - EXEMPLO DE BOTO
O uso mais freqente de um boto na programao do cliente. Utilizando linguagens como Javascript, podemos definir aes a tomar quando um usurio clica o boto de uma pgina web.
298
Seo 7 - Exemplo completo de formulrio

Com esta unidade, voc finaliza o estudo sobre formulrios. Passamos, agora, a exemplificar todo o aprendido a partir da criao de um formulrio, que consulta o grau de satisfao dos usurios de uma linha de nibus fictcia. O formulrio est construdo de modo que se enviem os dados por correio eletrnico a uma caixa de entrada determinada. Vemos o formulrio nesta pgina. Vocs devem agora construlo para ver se realmente entenderam bem os temas sobre formulrios.
Nome E-mail Cidade Sexo Homem Mulher Freqncia das viagens
Comentrios sobre sua satisfao pessoal
Desejo receber notificao das novidades nas linhas de nibus.
FIGURA 10.21 - EXEMPLO DE UM FORMULRIO COMPLETO
Unidade 10
299
A seguir, tambm mostraremos o cdigo fonte deste formulrio, importante para o olhar de todos, mesmo que seja rapidamente.
<form action=mailto:paty@meusite.com method=post enctype=text/plain> Nome <input type=text name=nome size=30 maxlength=100> <br> E-mail<input type=text name=email size=25 maxlength=100 value=> <br> Cidade <input type=text name=cidade size=20 maxlength=60><br> Sexo<br> <input type=radio name=sexo value=Masculino checked> Homem<br> <input type=radio name=sexo value=Feminino> Mulher<br> <br> Frequncia das viagens <br> <select name=utilizao> <option value=1>Vrias vezes por dia <option value=2>Uma vez por dia <option value=3>Vrias vezes por semana <option value=4>vrias vezes por ms </select> <br><br> Comentrios sobre sua satisfao pessoal<br> <textarea cols=30 rows=7 name=comentrios></textarea> <br><br> <input type=checkbox name=receber_info checked> Desejo receber notificao das novidades nas linhas de nibus. <br><br> <input type=submit value= Enviar formulrio> <br> <br> <input type=Reset value=Apagar tudo> </form>
Para finalizar, veja um modelo de correio eletrnico recebido na empresa de nibus quando um usurio qualquer preenchesse este formulrio e clicasse sobre o boto de envio:
300
nome=Frederico Silvestre e-mail=frede@terramix.com cidade=Rio de Janeiro sexo=Masculino utilizao=2 comentrios=Acho que no uma boa linha. Colocar mais nibus. receber_info=on
Seo 8 Exemplo de um formulrio utilizando Javascript

JavaScript uma linguagem para pginas web. Os scripts escritos com JavaScript podem ser colocados dentro das suas pginas HTML. Com JavaScript, voc capaz, por exemplo, de responder muito facilmente a eventos iniciados pelo usurio. Deste modo, voc pode criar pginas muito sofisticadas com a ajuda desta linguagem. Vamos ver um exemplo utilizando JAVASCRIPT? Antes de qualquer coisa, vamos criar um script simples que contm uma funo chamada Enviar(). A pgina HTML ter dois elementos textuais, um campo texto e um boto para enviar os dados da caixa de texto para serem processadas.
<script language=JavaScript> function Enviar(form) { document.write(Seu nome : +form.nome.value); } </script> <form> Digite seu nome:<br> <input type=text name=nome> <hr> <input type=button name=botao1 value=Teste a Informao onClick=Enviar(this.form)> </form>
Unidade 10
301
Vamos a uma rpida explicao. Todo script executado dentro das tags <SCRIPT>...</SCRIPT>. Voc pode usar essas tags no seu documento, no lugar que desejar. Muitos autores declaram os scripts dentro das tags <HEAD> quando utilizam funes Javascript, como o caso do exemplo anterior (foi utilizada a funo Enviar() com o parmetro FORM). As funes so convocadas por eventos iniciados pelo usurio. Elas so carregadas antes que o usurio possa fazer alguma ao que chamar a funo. Quando executarmos o cdigo anterior, surgir no seu navegador a seguinte tela:
FIGURA 10.22 VISUALIZANDO UM FORMULRIO HTML
Digite seu nome na caixa de texto e, aps, clique no boto Teste a Informao. Aps o clique neste boto (pelo atributo ONCLICK), a funo Enviar( form) ser chamada. Dentro desta funo, temos o comando document.write(), que escreve na tela alguma informao. Poderamos substituir este comando pelo comando alert (), que mostra a informao em uma janela. Como desejamos mostrar na tela o nome que foi digitado na caixa de texto, utilizamos o comando form.<nome da caixa de texto>.value. Ento o comando fica assim: form.nome.value para pegar o valor da caixa de texto chamada nome. O resultado na tela, aps o clique no boto, ser:
302
FIGURA 10.23 RESULTADO DA AO DO BOTO
Ateno! O estudo de Javascript no faz parte da nossa disciplina, por isso, segue, abaixo, alguns links para voc aprofundar seu estudo: http://hospedagem.ilogic.com.br/suporte/tutorial/javascript/javascript3/index.htm http://www.cm-braganca.pt/document/448112/503209.pdf http://www.javascript-tutorial.com.br/content-cat-1.html http://www.mozilla.org/js/ http://developer.mozilla.org/en/docs/Core_JavaScript_1.5_Guide http://pt.wikipedia.org/wiki/JavaScript http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/ 0441e1e5-34e4-4d32-b188-f7fc35613478.asp
Unidade 10
303
Sntese
Caros alunos! Nesta unidade, voc aprendeu a criar formulrios. Os formulrios so de extrema importncia no HTML, uma vez que so responsveis pela interao entre um usurio e o servidor, possibilitando a troca de dados ou informaes. O uso de formulrio importante quando desejamos enviar os dados cadastrados em um formulrio para outra pgina ou pelo correio eletrnico. Quando precisamos enviar dados para outra pgina, faz-se necessria a utilizao de outra linguagem de programao para tornar o processo dinmico, tais como Javascript, Php, Asp etc. Veja, a seguir, um breve relato dos elementos estudados nesta unidade.
Elementos para Formulrios

Elemento
<form> <input> <textarea> <select> <option> <button>
Descrio
Define um formulrio Insere um campo para introduzir dados Define uma rea de texto (permite inserir texto com vrias linhas e um nmero ilimitado de caracteres) Define uma lista com vrias opes selecionveis Insere uma opo a mais numa lista com vrias opes selecionveis Define um boto que pode ser pressionado
304
1. Que tal, agora, voc criar um formulrio? Suponha que voc ir fazer uma pesquisa sobre o usurio do seu site. Pergunte nome, endereo, email, profisso, sexo e sugir uma lista de opes do que ele gostaria de visualizar no site. No esquea de incluir um campo para comentrios. Publique na ferramenta EXPOSIO do ambiente on-line.
Saiba mais
www.icmc.usp.br/ensino/material/html/forms.html (Formulrios) http://www.mhavila.com.br/topicos/web/valform.html (Validao de formulrios HTML
com JavaScript)
http://www.criarweb.com/artigos/93.php?manual=2 (Formulrios HTML) http://br.geocities.com/aquiaprende/10.html (Formulrios HTML)
Unidade 10
305
unidade 11
Elementos e atributos HTML obsoletos (deprecated)

Conhecer e identificar elementos/atributos obsoletos
11
(deprecated).
Sees de estudo
Seo 1 O que so elementos/atributos obsoletos. Seo 2 Exemplos de elementos obsoletos.

Nas unidades anteriores vimos como funciona as estruturas bsicas do HTML como Listas, vnculos, tabelas, frames, etc ... Vimos tambm os padres CSS para desenvolvimento de layout de pginas. Segundo a W3C devemos utilizar o HTML em conjunto com os CSS, sendo que os contedos se exprimem em HTML e os estilos em CSS. Nesse trabalho em conjunto algumas tags sofreram modificaes onde deixaram de pertencer ao HTML e foram incorporadas ao CSS, essas tags no HTML passaram a ser chamadas de deprecated ou obsoletas. Nesta unidade vamos aprender um pouco mais quanto as tags obsoletas.
Seo 1 - O que so elementos/atributos obsoletos

No incio o HTML era a linguagem mais utilizada por cientistas. Eles no precisavam de qualidade grfica, diferentes formataes de textos, se preocupavam muito mais com o contedo do que a forma visual. Como as pginas eram simples, qualquer navegador poderia ser utilizado para visualizao. Com a evoluo dos navegadores que apresentam novas funcionalidades para atrair usurio e designers, teve a necessidade de se criar pginas mais interessantes ao usurio o que as tornariam mais complexas. O designer da pgina passou a ter a mesma importncia que o contedo, em um certo momento o HTML passou a se preocupar com ambas as necessidades(contedo, designer), mas no foi muito bem sucedido. As Web pages ficaram cheias de tags desnecessrias, muitas tabelas agrupadas e outros truques para fazer com que o HTML se comporta-se como uma linguagem de designer grfico.
308
As pginas tiveram que possuir uma codificao mais complexa e de difcil manuteno e que por conseqncia trouxeram problemas de exibio a certos navegadores. Foi ai que a W3C resolveu dar um basta nisso e resolveu tornar essas tags de formatao de texto como obsoletas (deprecated), ou seja essas tags de formatao de texto e atributos estariam condenadas em futuras verses do HTML e do XHTML. A W3C ento incorporou essas tags de formatao de texto/ atributos ao CSS, separando o que contedo da estrutura.
No CSS as tags bsicas do HTML definem os pargrafos, as listas, os cabealhos, etc.. e o CSS define como o navegador ir mostrar as informaes.
Seo 2 - Exemplos de elementos obsoletos.

Nesta seo voc ver algumas tags obsoletas do HTML 4.0.
TAG HTML Center B U Font HTML Atributo align background bgcolor hspace vspace size Propriedade CSS text-align:center font-weight:bold font-style:italic font-family:font name Propriedade CSS text-align background-image:url(image) background-color padding padding font-size:
Unidade 11
309
Exemplo : align = left|center|right|justify
Exemplo Obsoleto: <H1 align=center> Cabealho Centralizado </H1>
Exemplo utilizando CSS: <HEAD> <STYLE type=text/css> H1 { text-align: center} </STYLE> <BODY> <H1> Cabealho Centralizado </H1>
Note que o atributo align, que antes era definido no prprio HTML agora definido no CSS.
Sntese
Com a evoluo do HTML algumas tags vem sofrendo alteraes, fazendo com que as anteriores se tornem precated ou obsoleto. Nesta unidade vimos o que so essas tags precated e como proceder utiliz-las da maneira correta.
310
Atividades de autoavaliao
Pesquise nos sites de referncias as tags que esto se tornando obsoletas e exemplifique pelo menos 3 tags encontradas.
Saiba mais
Aprofunde os contedos estudados nesta unidade ao consultar as seguintes referncias :
http://www.netmechanic.com/news/vol6/beginner_no11.htm http://www.codehelp.co.uk/html/deprecated.html http://www.htmlgoodies.com/tutorials/html_401/html4-ref/article.php/3460291 [OFICIAL] http://www.w3schools.com/tags/default.asp
Unidade 11
311
Para concluir o estudo

Caro aluno! Conhecer HTML imprescindvel para qualquer profissional que pretende trabalhar com desenvolvimento web, sendo o primeiro passo na confeco de pginas na internet. Neste livro abordamos os conceitos introdutrios de HTML e suas caractersticas, utilizao de tags de formatao de textos e pargrafos, estilos, blocos de texto, alinhamentos, listas, links, imagens, tabelas e clulas. Destacamos a importncia e caractersticas dos frames, uso de formulrios, alguns comandos bsicos de JAVASCRIPT, bem como criar pginas eficientes. Espero que voc tenha gostado da disciplina e que tenha aproveitado os conhecimentos adquiridos para iniciar a construo de sua pgina web. A nossa preocupao foi direcion-los ao incio da construo de sites simples, colocando em prtica os conceitos bsicos sobre as tags de HTML, da melhor forma possvel. Sabemos que a criao das pginas pode ser aprofundada em cada unidade estudada bem como atravs de linguagens dinmicas que permitem a interao do usurio com o pgina, como por exemplo, Php, Asp, Javascript etc. Por isso, desejamos que voc no pare seus estudos aqui! V em frente na sua constante busca de conhecimentos. Espero que voc consiga tirar proveito dos temas aqui trabalhados e aplic-los em seus projetos pessoais tanto quanto profissionais. Que o nosso esforo lhe traga muito sucesso. Boa sorte! Abraos, Patrcia.
Referncias
FLANAGAN, David. JavaScript: o guia definitivo. 4 ed. Porto Alegre: Bookman, 2004. GRAHAM, Ian S. HTML 4.0 sourcebook: a complete guide to HTML 4.0 and HTML extensions. New York: Wiley Computer Publishing, 1998. LEMAY, Laura. Aprenda em 1 semana HTML 4. Rio de Janeiro: Editora Campus, 1998. MARCONDES, Christian Alfim. HTML 4.0 fundamental: a base da programao para web. So Paulo: Editora rica, 2005. NIEDERST, Jennifer. Web design in a nutshell: a desktop quick reference. Sebastopol: OReilly, 1998. PRATES, Rubens. HTML: guia de consulta rpida. So Paulo: Editora Novatec, 1997. RAMALHO, Jos Antnio Alves. HTML 4: prtico e rpido. So Paulo: Editora Berkeley, 1999. REHDER, Wellington da Silva & PEREIRA, Marcelo Gino. HTML: hypertext markup Language. So Paulo: Editora Viena, 2003. WEINMAN, Lynda; WEINMAN, Bill. Design criativo com Html 2: um guia prtico e completo para design na web. Rio de Janeiro: Cincia Moderna, 2002.
Sites de Referncia
http://www.abcdohtml.hpg.ig.com.br/html_intro.htm http://www.intergate.com.br/suporte/glossario/glossario_w_x_y_z/glossario_w_x_y_z.html http://rouder.vilabol.uol.com.br/html.htm http://www.hexagora.com/en_home.asp http://www.icmc.usp.br/ensino/material/html/edicao.html http://www.mat.ua.pt/antoniop/html/intro.htm http://members.fortunecity.com/vshelter/html/ http://eof.alunos.dcc.fc.up.pt/manuais/HTML/HTML.html http://www.webwritersbrasil.com.br/detalhe.asp?numero=145 http://www.artifice.web.pt/tutoriais http://vitoria.upf.tche.br/~carolina/ccc002/oficina/ http://www.maujor.com/blog/2006/04/06/el-html/ http://enciclopedia.tiosam.com/enciclopedia/enciclopedia.asp?title=Wiki http://www.mxstudio.com.br/views.glossario.php?cid=6&char=&p=5 http://www.imasters.com.br/artigo/4224/css/ http://www.w3schools.com/ http://www.webwriter.dk/english/index.htm http://www.htmlbeauty.com/ http://www.pagebreeze.com/ http://forum.htmlstaff.org/
316
Sobre a professora conteudista

Patrcia Gerent Petry nasceu em Florianpolis, SC. Formada em Cincia da Computao pela Universidade Federal de Santa Catarina. Mestre em Cincia da Computao, rea Informtica e Educao, pela Universidade Federal de Santa Catarina, tendo como tema principal de sua dissertao O Processo de Ensino e Aprendizagem de Algoritmos. Atuou como professora substituta da Universidade Federal de Santa Catarina. Foi professora nas instituies de ensino superior: Universidade do Vale do Itaja e Faculdades Barddal. Atualmente Analista de Sistemas dos Correios/SC e atua como professora da Universidade do Sul de Santa Catarina desde 1998. Atuou por muitos anos nas disciplinas de Programao I, Programao II, Laboratrio de Informtica e Anlise e Projeto de Sistemas I dos cursos de Sistema de Informao e Cincia da Computao no ensino presencial da UNISUL. No ensino virtual, atua como tutora nas cadeiras de Introduo Internet, Lgica de Programao I e II, Linguagem de Programao I do curso de Tecnlogo em Web Design e Programao. Publicou diversos artigos cientficos e captulo de um livro na rea de Informtica e Educao.
Respostas e comentrios das atividades de auto-avaliao
Unidade 1
1) Resposta Pessoal
Unidade 2
1) No. A maioria dos navegadores capaz de lidar com pginas em HTML simples, sem as tags de estrutura de pgina. Mas ao inclu-las voc permitir que a sua pgina seja lida por ferramentas SGML (Standard Generalized Markup Language define a estrutura geral do contedo dos documentos e no a aparncia real desse contedo na pgina) mais genricas e tambm tirar proveito dos recursos dos futuros navegadores. 2) Resposta pessoal.
Unidade 3
1) Resposta pessoal. 2) Resposta pessoal.
Unidade 4
1) Resposta pessoal.
Unidade 5
1) Resposta pessoal.
Unidade 6
1) <body bgcolor=#000000> <table border=1> <tr> <td width=8><font color=#FFFF00>1</font></td> <td width=8><font color=#FFFF00>2</font></td> <td width=16><font color=#FFFF00>3</font>3</td> </tr> <tr> <td><font color=#FFFF00>4</font></td> <td><font color=#FFFF00>5</font></td> <td><font color=#FFFF00>6</font></td> </tr> <tr> <td><font color=#FFFF00>7</font></td> <td><font color=#FFFF00>8</font></td> <td><font color=#FFFF00>9</font></td> </tr> </table> </body>
Unidade 7
1) Resposta Pessoal. 2) Resposta Pessoal. 3) Sim. A tag NOFRAME possibilita que se crie uma opo de navegao na pgina para quem no possui um navegador que entenda frames. Se voc est navegando na internet e entra em uma pgina que no suporte frames, o navegador ignora essas tags e procura pela tag NOFRAME, que seria uma pgina alternativa.
320
Unidade 8
1) Resposta Pessoal. 2) Resposta Pessoal.
Unidade 9
1) Resposta Pessoal.
Unidade 10
Unidade 11
321

(1572) Linguagens Programacao I

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

(1572) Linguagens Programacao I

Enviado por

Direitos autorais:

Formatos disponíveis

Universidade do Sul de Santa Catarina

2 edio revista e atualizada

Palhoa UnisulVirtual 2009

Patrcia Gerent Petry

Edio Livro Didtico

Universidade do Sul de Santa Catarina

Unidade 1 Conceitos bsicos pertinentes linguagem de programao HTML

Unidade 2 Introduo HTML

Unidade 3 Listas e Vnculos

Unidade 4 Mais formatao em HTML

Universidade do Sul de Santa Catarina

Unidade 5 Uso de Imagens, Painis de Fundos e Arquivos de Msica

Unidade 8 Desenvolvendo pginas eficientes

Unidade 9 Folhas de Estilo

Unidade 10 Criao de Formulrios

Unidade 11 Elementos e atributos HTML obsoletos(deprecated).

Agenda de atividades/ Cronograma

Universidade do Sul de Santa Catarina

Demais atividades (registro pessoal)

Conceitos bsicos pertinentes linguagem de programao HTML

Universidade do Sul de Santa Catarina

Para incio de conversa

Seo 1 - O que a Internet

Universidade do Sul de Santa Catarina

Seo 2 - Como funciona a web

FIGURA 1.1 UM SIMPLES SISTEMA DE AJUDA ON-LINE

Universidade do Sul de Santa Catarina

A web grfica e fcil de ser navegada

A web independente de plataforma

Universidade do Sul de Santa Catarina

GUI = Interface Grfica com o Usurio

O que uma URL

Universidade do Sul de Santa Catarina

Seo 3 - Afinal o que HTML?

Breve histrico do HTML

Universidade do Sul de Santa Catarina

Saiba mais sobre o World Wide Web Consortium (W3C)

Universidade do Sul de Santa Catarina

Seo 4 - Edio de documentos HTML

FIGURA 1.2 - TELA DO CRIMSON EDITOR

FIGURA 1.3 - TELA DO NAMO EDITOR

Universidade do Sul de Santa Catarina

Existem muitos editores de HTML gratuitos, como:

Html beauty: http://www.htmlbeauty.com/ PageBreeze: http://www.pagebreeze.com/ Web writer: http://www.webwriter.dk/english/index.htm

Introduo linguagem HTML

Neste sentido, o HTML definido segundo um DTD de SGML.

<tag atributo1=valor1 atributo2=valor2>...</tag>

Universidade do Sul de Santa Catarina

Universidade do Sul de Santa Catarina

Para incio de conversa

Seo 1 - Criao de pginas da web simples

Seo 2 - Estruture sua HTML

Universidade do Sul de Santa Catarina

Universidade do Sul de Santa Catarina

indicando um nome para a informao.

A Sintaxe refere-se s regras para a construo de um comando ou instruo.

Um documento, por exemplo, pode ter as seguintes informaes:

Universidade do Sul de Santa Catarina

pagina.html : a pgina a ser carregada

segundos : o nmero de segundos passados at que a

pgina indicada seja carregada.

Universidade do Sul de Santa Catarina

<BODY BACKGROUND=imagem.gif BGCOLOR=cor TEXT=cor LINK=cor ALINK=cor VLINK=cor> contedo </BODY>