Vous êtes sur la page 1sur 310

Universidade do Sul de Santa Catarina

Linguagens de Programao I
Disciplina na modalidade a distncia

Palhoa UnisulVirtual 2010

Crditos
Universidade do Sul de Santa Catarina Campus UnisulVirtual Educao Superior a Distncia Reitor Unisul Ailton Nazareno Soares Vice-Reitor Sebastio Salsio Heerdt Chefe de Gabinete da Reitoria Willian Mximo Pr-Reitora Acadmica Miriam de Ftima Bora Rosa Pr-Reitor de Administrao Fabian Martins de Castro Pr-Reitor de Ensino Mauri Luiz Heerdt Campus Universitrio de Tubaro Diretora Milene Pacheco Kindermann Campus Universitrio da Grande Florianpolis Diretor Hrcules Nunes de Arajo Campus Universitrio UnisulVirtual Diretora Jucimara Roesler Equipe UnisulVirtual Diretora Adjunta
Patrcia Alberton Secretaria Executiva e Cerimonial Jackson Schuelter Wiggers (Coord.) Bruno Lucion Roso Marcelo Fraiberg Machado Tenille Catarina Assessoria de Assuntos Internacionais Murilo Matos Mendona Assessoria DAD - Disciplinas a Distncia Enzo de Oliveira Moreira (Coord.) Carlos Alberto Areias Franciele Arruda Rampelotti Luiz Fernando Meneghel Assessoria de Inovao e Qualidade da EaD Dnia Falco de Bittencourt (Coord.) Rafael Bavaresco Bongiolo Assessoria de Relao com Poder Pblico e Foras Armadas Adenir Siqueira Viana Assessoria de Tecnologia Osmar de Oliveira Braz Jnior (Coord.) Felipe Jacson de Freitas Jeerson Amorin Oliveira Jos Olmpio Schmidt Marcelo Neri da Silva Phelipe Luiz Winter da Silva Priscila da Silva Rodrigo Battistotti Pimpo Gesto Documental Lamuni Souza (Coord.) Clair Maria Cardoso Janaina Stuart da Costa Josiane Leal Marlia Locks Fernandes Ricardo Mello Platt Secretaria de Ensino a Distncia Karine Augusta Zanoni Giane dos Passos
(Secretria de Ensino) (Secretria Acadmica)

Avenida dos Lagos, 41 Cidade Universitria Pedra Branca | Palhoa SC | 88137-900 | Fone/fax: (48) 3279-1242 e 3279-1271 | E-mail: cursovirtual@unisul.br | Site: www.unisul.br/unisulvirtual Bruno Augusto Zunino Claudia Noemi Nascimento Dbora Cristina Silveira Ednia Araujo Alberto Francine Cardoso da Silva Karla F. Wisniewski Desengrini Maria Eugnia Ferreira Celeghin Maria Lina Moratelli Prado Mayara de Oliveira Bastos Patrcia de Souza Amorim Poliana Morgana Simo Priscila Machado Relacionamento com o Mercado Eliza Bianchini Dallanhol Locks Walter Flix Cardoso Jnior

Gerncia de Produo

Coordenao dos Cursos


Auxiliares das coordenaes Fabiana Lange Patricio Maria de Ftima Martins Tnia Regina Goularte Waltemann Coordenadores Graduao Adriana Santos Ramm Adriano Srgio da Cunha Alosio Jos Rodrigues Ana Luisa Mlbert Ana Paula R. Pacheco Bernardino Jos da Silva Carmen Maria C. Pandini Catia Melissa S. Rodrigues Charles Cesconetto Diva Marlia Flemming Eduardo Aquino Hbler Eliza B. D. Locks Fabiano Ceretta Horcio Dutra Mello Itamar Pedro Bevilaqua Jairo Afonso Henkes Janana Baeta Neves Jardel Mendes Vieira Joel Irineu Lohn Jorge Alexandre N. Cardoso Jos Carlos N. Oliveira Jos Gabriel da Silva Jos Humberto D. Toledo Joseane Borges de Miranda Luciana Manfroi Marciel Evangelista Catneo Maria Cristina Veit Maria da Graa Poyer Mauro Faccioni Filho Moacir Fogaa Myriam Riguetto Nlio Herzmann Onei Tadeu Dutra Raulino Jac Brning Rogrio Santos da Costa Rosa Beatriz M. Pinheiro Tatiana Lee Marques Thiago Coelho Soares Valnei Campos Denardin Roberto Iunskovski Rose Clr Beche Rodrigo Nunes Lunardelli Coordenadores Ps-Graduao Aloisio Rodrigues Anelise Leal Vieira Cubas Bernardino Jos da Silva Carmen Maria Cipriani Pandini Daniela Ernani Monteiro Will Giovani de Paula Karla Leonora Nunes Luiz Otvio Botelho Lento Thiago Coelho Soares Vera Regina N. Schuhmacher Gerncia Administrao Acadmica Mrcia Luz de Oliveira (Gerente) Fernanda Farias Financeiro Acadmico Marlene Schauer Rafael Back Vilmar Isaurino Vidal

Arthur Emmanuel F. Silveira (Gerente) Francini Ferreira Dias Design Visual Pedro Paulo Alves Teixeira (Coord.) Adriana Ferreira dos Santos Alex Sandro Xavier Alice Demaria Silva Anne Cristyne Pereira Diogo Rafael da Silva Edison Rodrigo Valim Frederico Trilha Higor Ghisi Luciano Jordana Paula Schulka Nelson Rosa Patrcia Fragnani de Morais Multimdia Srgio Giron (Coord.) Cristiano Neri Gonalves Ribeiro Dandara Lemos Reynaldo Fernando Gustav Soares Lima Srgio Freitas Flores Portal Rafael Pessi (Coord.) Luiz Felipe Buchmann Figueiredo Comunicao Marcelo Barcelos Andreia Drewes Carla Fabiana Feltrin Raimundo Produo Industrial Francisco Asp (Coord.) Ana Paula Pereira Marcelo Bittencourt

Alessandro Alves da Silva Andra Luci Mandira Cristina Mara Shauert Djeime Sammer Bortolotti Douglas Silveira Fabiano Silva Michels Felipe Wronski Henrique Janaina Conceio Jean Martins Luana Borges da Silva Luana Tarsila Hellmann Maria Jos Rossetti Miguel Rodrigues da Silveira Junior Monique Tayse da Silva Patricia A. Pereira de Carvalho Patricia Nunes Martins Paulo Lisboa Cordeiro Rafaela Fusieger Rosngela Mara Siegel Silvana Henrique Silva Vanilda Liordina Heerdt

Gerncia de Desenho e Desenvolvimento de Materiais Didticos


Mrcia Loch (Gerente) Acessibilidade Vanessa de Andrade Manoel (Coord.) Bruna de Souza Rachadel Letcia Regiane Da Silva Tobal Desenho Educacional Carmen Maria Cipriani Pandini

(Coord. Ps)

Carolina Hoeller da S. Boeing Silvana Souza da Cruz (Coord. Grad.) Ana Cludia Ta Cristina Klipp de Oliveira Eloisa Machado Seemann Flvia Lumi Matuzawa Gabriella Arajo Souza Esteves Giovanny Noceti Viana Jaqueline Cardozo Polla Lis Air Fogolari Lygia Pereira Luiz Henrique Milani Queriquelli Marina Cabeda Egger Moellwald Marina Melhado Gomes da Silva Melina de la Barrera Ayres Michele Antunes Correa Ngila Cristina Hinckel Roberta de Ftima Martins Sabrina Paula Soares Scaranto Viviane Bastos
(Coord. Ext/DAD)

Gerncia Administrativa e Financeira


Renato Andr Luz (Gerente) Naiara Jeremias da Rocha Valmir Vencio Incio

Gerncia de Ensino, Pesquisa e Extenso


Moacir Heerdt (Gerente) Aracelli Araldi Hackbarth Elaborao de Projeto e Reconhecimento de Curso Diane Dal Mago Vanderlei Brasil Extenso Maria Cristina Veit (Coord.) Pesquisa Daniela Will (Coord. PUIP, PUIC, PIBIC) Mauro Faccioni (Coord. Nuvem) Ps-Graduao Clarissa Carneiro Mussi (Coord.) Biblioteca Soraya Arruda (Coord.) Paula Sanhudo da Silva Renan Felipe Cascaes Rodrigo Martins da Silva Capacitao e Assessoria ao Docente Angelita Maral Flores (Coord.) Adriana Silveira Alexandre Wagner da Rocha Cludia Behr Valente Elaine Cristiane Surian Juliana Cardoso Esmeraldino Patrcia da Silva Meneghel Simone Perroni da Silva Zigunovas Monitoria e Suporte Rafael da Cunha Lara (Coord.) Anderson da Silveira Anglica Cristina Gollo

Gerncia Servio de Ateno Integral ao Acadmico


James Marcel Silva Ribeiro (Gerente) Atendimento Maria Isabel Aragon (Coord.) Andiara Clara Ferreira Andr Luiz Portes Bruno Ataide Martins Holdrin Milet Brandao Jennier Camargo Maurcio dos Santos Augusto Maycon de Sousa Candido Sabrina Mari Kawano Gonalves Vanessa Trindade Orivaldo Carli da Silva Junior Estgio Jonatas Collao de Souza (Coord.) Juliana Cardoso da Silva Micheli Maria Lino de Medeiros Priscilla Geovana Pagani Prouni Tatiane Crestani Trentin (Coord.) Gisele Terezinha Cardoso Ferreira Scheila Cristina Martins Taize Muller

Gerncia de Logstica
(Gerente)

Jeferson Cassiano A. da Costa Andrei Rodrigues Logstica de Encontros Presenciais Graciele Marins Lindenmayr (Coord.) Ana Paula de Andrade Cristilaine Santana Medeiros Daiana Cristina Bortolotti Edesio Medeiros Martins Filho Fabiana Pereira Fernando Oliveira Santos Fernando Steimbach Marcelo Jair Ramos Logstica de Materiais Carlos Eduardo D. da Silva (Coord.) Abrao do Nascimento Germano Fylippy Margino dos Santos Guilherme Lentz Pablo Farela da Silveira Rubens Amorim

Gerncia de Marketing

Fabiano Ceretta (Gerente) Alex Fabiano Wehrle Sheyla Fabiana Batista Guerrer Victor Henrique M. Ferreira (frica)

Patrcia Gerent Petry

Linguagens de Programao I
Livro didtico Reviso e atualizao Clavison Martinelli Zapelini Design instrucional Leandro Kingeski Pacheco Melina de la Barrera Ayres 3 edio revista e atualizada
Palhoa UnisulVirtual 2010

Copyright UnisulVirtual 2010 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 Clavison Martinelli Zapelini (3 ed. rev. e atual.) Design Instrucional Leandro Kingeski Pacheco Melina de la Barrera Ayres (3 ed. rev. e atual.) Assistente Acadmico Sabrina Paula Soares Scaranto (3 ed. rev. e atual.) Lygia Pereira (3 ed. rev. e atual.) Projeto Grfico e Capa Equipe UnisulVirtual Diagramao Rafael Pessi Anne Cristyne Pereira (3 ed. rev. e atual.) Reviso Amaline Boulus Issa Mussi (3 ed. rev. e atual.)

005.133 P59 Petry, Patrcia Gerent Linguagens de programao I : livro didtico / Patrcia Gerent Petry ; reviso e atualizao Clavison Martinelli Zapelini ; design instrucional Leandro Kingeski Pacheco, Melina De La Barrera Ayres ; [assistente acadmico Sabrina Paula Soares Scaranto, Lygia Pereira]. 3. ed. rev. e atual. Palhoa : UnisulVirtual, 2010. 310 p. : il. ; 28 cm. Inclui bibliografia. 1. Linguagem de programao (Computadores). 2. HTML (Linguagem de programao de computador). I. Zapelini, Clavison Martinelli. II. Pacheco, Leandro Kingeski. III. Ayres, Melina De La Barrera. IV. Scaranto, Sabrina Paula Soares. IV. Pereira, Lygia. V. Ttulo.

Ficha catalogrfica elaborada pela Biblioteca Universitria da Unisul

Sumrio
Apresentao . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Palavras da professora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Plano de estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 UNIDADE 1 Conceitos bsicos pertinentes linguagem de programao HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .17 UNIDADE 2 Introduo HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .37 UNIDADE 3 Listas e Vnculos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .69 UNIDADE 4 Mais formatao em HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .99 UNIDADE 5 Uso de Imagens, Painis de Fundo e Arquivos de Msica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .123 UNIDADE 6 Tabelas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153 UNIDADE 7 Frames . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .185 UNIDADE 8 Desenvolvendo pginas eficientes . . . . . . . . . . . . . . . . . . . . . . . . . .215 UNIDADE 9 Folhas de Estilo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .239 UNIDADE 10 Criao de Formulrios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269 Para concluir o estudo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .301 Referncias . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .303 Sobre a professora conteudista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .305 Respostas e comentrios das atividades de autoavaliao . . . . . . . . . . . . . . . . .307 Biblioteca Virtual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .309

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 que sua caminhada nesta disciplina ser acompanhada e monitorada constantemente pelo Sistema Tutorial da UnisulVirtual. Neste sentido a expresso a distncia caracteriza, somente, a modalidade de ensino pela qual 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

Palavras da professora
Caro(a) Aluno(a)! Voc j deve ter passado boa parte de seu tempo explorando a web, e provvel que j esteja familiarizado(a) com a maior parte do contedo deste livro. Com ele, vamos aprender a escrever pginas para a web. Talvez voc at j tenha realizado isto em alguma oportunidade. Muitos dos contedos provavelmente sero cansativos para voc. Mas no deixe de ler e participar, contribuindo assim para o bom andamento da Disciplina. Aqui 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 voc (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 por que 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 estudos visa a orient-lo(a) no desenvolvimento da disciplina. Possui elementos que o(a) ajudaro a conhecer o contexto da disciplina e a organizar o seu tempo de estudos. O processo de ensino e aprendizagem na UnisulVirtual leva em conta instrumentos que se articulam e se complementam, portanto 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 (complementares, a distncia e 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.

Universidade do Sul de Santa Catarina

Carga Horria
A carga horria total da disciplina de 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. Aprender a 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

Linguagens de Programao I

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: 10 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 Nesta unidade, voc iniciar a criao de pginas web. Aprender a estruturar o cdigo HTML e a utilizar os tags. Unidade 3 Listas e Vnculos Nesta unidade, voc criar diversos tipos de listas possveis. Saber como inserir um comentrio em seu cdigo HTML e como incluir vnculos entre o texto e as pginas da web. Unidade 4 Mais formatao em HTML Nesta unidade, voc distinguir os diferentes estilos de caracter. Saber como formatar e utilizar as tags <blink> e <marquee>.

13

Universidade do Sul de Santa Catarina

Unidade 5 Uso de Imagens, Painis de Fundo e Arquivos de udio Nesta unidade, voc utilizar a tag <img> e seus atributos. Far referncia de hipertexto com imagem. Criar painis de fundo com imagens. Alm disso, sero abordadas sugestes para um melhor uso das imagens e tcnicas para manipulao de arquivos de udio. Unidade 6 Tabelas Nesta unidade, voc criar as tabelas e seus elementos bsicos: alinhamento da tabela e das clulas, dimenses e cor. Unidade 7 Frames Nesta unidade, voc construir frames com o elemento FRAMESET, aprender suas aplicaes e cuidados no uso. Far links com frames. Realizar a composio dos frames e distinguir os atributos de frameset e frame. Unidade 8 Desenvolvendo pginas eficientes Na unidade 8, voc desenvolver pginas eficientes. Saber como utilizar as extenses de HTML, como realizar o projeto e layout da pgina e como usar os vnculos. Nesta unidade, tambm encontrar sugestes de bons hbitos e conhecer atributos HTML em desuso. Unidade 9 Folhas de Estilo Nesta unidade, voc saber o que so as folhas de estilos e a sintaxe SCC. Aprender os tipos de definio de estilos e a ordem da cascata.

14

Linguagens de Programao I

Unidade 10 Criao de Formulrios Nesta unidade, voc criar formulrios. Usar campos de entrada de texto; selees - listas de opes; botes de rdio, caixas de validao e botes de envio. Voc ver, tambm, um exemplo completo de formulrio.

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

Universidade do Sul de Santa Catarina

Atividades obrigatrias

Demais atividades (registro pessoal)

16

UNIDADE 1

Conceitos bsicos pertinentes linguagem de programao HTML


Objetivos de aprendizagem

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

Universidade do Sul de Santa Catarina

Para incio de estudo


Caro(a) aluno(a), 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 ideias. 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. A evoluo da internet constante. Atualmente, a evoluo mais marcante a preconizada WEB 2.0, que melhorou muito o carregamento de pginas dinmicas com a substituio do simples HTML pelo XHTML e a utilizao de AJAX. Esses conceitos sero abordados de forma mais aprofundada na unidade 7. 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 os quais 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

Linguagens de Programao I

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 ideias, e, ao mesmo tempo, perigoso, quando utilizado para fins ilcitos.
Unidade 1

19

Universidade do Sul de Santa Catarina

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 produzida por indivduos que desejam 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. Qualquer pessoa 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


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 o contedo da rede e permitir o acesso a ele. Neste livro, chamamos o programa cliente de navegador (browser, em ingls). O que o navegador faz

O navegador usado para exibir pginas da web e outras informaes disponveis na world wide web e navegar por elas.

20

Linguagens de Programao I

requisitar um 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 ideia 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. Desta 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.

Um exemplo de pginas que utilizam hipertextos pode ser visualizados em: <http://pt.wikipedia.org/ wiki/Internet>. Acesso em 1mar.2010.

Ajuda Tpico um Tpico dois Tpico trs Ajuda no Tpico dois SubTpico um SubTpico dois SubTpico trs Ajuda no SubTpico dois Ajuda detalhada Mais detalhes Milhes de detalhes

Figura 1.1 Sistema de ajuda on-line.

Unidade 1

21

Universidade do Sul de Santa Catarina

Voc Sabia?
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 lineares, 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 a 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.

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 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.

22

Linguagens de Programao I

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 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, Internet Explorer, Mozilla Firefox ou Google Chrome. 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

Universidade do Sul de Santa Catarina

A ideia de que a web independente de plataforma no sustentada por todos. 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, Mozilla Firefox ou Google Chrome. 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

Linguagens de Programao I

Os servidores web
Para que uma pgina esteja permanentemente disponvel na web, ela precisa ter um endereo fixo, alojada em um servidor.
Este endereo chamado URL (Uniform Resource Locator, numa traduo literal, localizador uniforme de recursos).

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. Toda URL apresenta uma estrutura bsica. Acompanhe tal estrutura em funo do exemplo seguinte:

Unidade 1

25

Universidade do Sul de Santa Catarina

Considere a seguinte URL: <http://www.unisul.br/aluno/aluno.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.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. /aluno/ o diretrio onde est o arquivo. s vezes, uma URL indica apenas o diretrio (ou o servidor). Neste caso, o servidor se encarrega de procurar e enviar o arquivo adequado. aluno.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. Neste 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

Linguagens de Programao I

Seo 3 - Afinal o que HTML?


Para voc publicar informaes acessveis a todos, voc precisa de uma linguagem entendida mundialmente, algo parecido com 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 por meio 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

Universidade do Sul de Santa Catarina

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 certo nmero de erros e incongruncias encontrados 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

Linguagens de Programao I

Voc Sabia? 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

Universidade do Sul de Santa Catarina

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 efetuar 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

Linguagens de Programao I

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 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. Existem muitos editores de HTML gratuitos, como:

Html beauty: http://www.htmlbeauty.com/


Unidade 1

31

Universidade do Sul de Santa Catarina

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

Linguagens de Programao I

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, as quais 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 algo 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

Universidade do Sul de Santa Catarina

Sntese
Caro(a) aluno(a), voc finalizou a unidade 1. Revisando alguns conceitos importantes: 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

Linguagens de Programao I

Atividades de autoavaliao
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/> (Introduo ao HTML) <http://minerva.ufpel.edu.br/~bira/html/web.html> (Web Design)

Unidade 1

35

UNIDADE 2

Introduo HTML
Objetivos de aprendizagem

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 Separadores Seo 4 Alinhamento de texto

Universidade do Sul de Santa Catarina

Para incio de estudo


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

Linguagens de Programao I

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>. Outras podem ser colocadas individualmente, como o <P>, que simplesmente insere um espao para dividir pargrafos. Mais adiante, mostraremos que as tags tambm podem receber atributos.

Tags bsicas
A estrutura bsica de um documento HTML apresenta as seguintes tags: <HTML> <HEAD> <TITLE>Ttulo do Documento</TITLE> </HEAD> <BODY> texto, imagem, links, ... </BODY> </HTML>

Unidade 2

39

Universidade do Sul de Santa Catarina

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 que 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>, a qual 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

Linguagens de Programao I

<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. Alm do ttulo da pgina (< TITLE> ...

de uso correto da tag <HEAD>:


<HTML> <HEAD>

</TITLE>), no cabealho so inseridas tambm tags utilizadas para indexao do documento HTML e para relacionamento com documentos externos (javascript, CSS, etc...). Eis um exemplo tpico

<TITLE> ESTE MEU TTULO </TITLE> </HEAD> </HTML>

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

Universidade do Sul de Santa Catarina

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;

que faz uma correspondncia com campos de cabealho do protocolo HTTP; a informao deste campo pode ser lida pelos navegadores e provocar algumas aes.

HTTP-EQUIV,

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

Linguagens de Programao I

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

Universidade do Sul de Santa Catarina

Onde diz:

automaticamente;

pagina.html : a pgina a ser carregada 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 pensarmos 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.
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.

Ainda no exemplo anterior, se voc observar atentamente, alm das tags TITLE e META, a ltima tag utilizada no cabealho foi LINK. Esta tag tem a funo de fazer um relacionamento com algum documento externo. <LINK REL= stylesheet HREF=folhaestilo.css>

44

Linguagens de Programao I

O atributo REL a identificao do tipo de formato do documento. O valor stylesheet indica que se trata de folhas de estilo. Poderiam ser outro valores, como por exemplo script, que indicaria arquivo de funes java script. HREF o caminho fsico do arquivo. Neste caso, existe um arquivo chamado folhaestilo.css no prprio diretrio do HTML.

<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. 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 a 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, de modo que ela no se mova junto com o texto, ao se rolar a pgina. Exemplo: <body background=imagem.gif> Neste exemplo, o arquivo de imagem deve estar no mesmo diretrio do arquivo HTML.

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>

Unidade 2

45

Universidade do Sul de Santa Catarina

O atributo cor pode ser utilizado em todas as tags, tanto pode ser o nome de uma cor (RED, BLUE, BLACK, etc...) ou a codificao da cor em representao hexadecimal (#FF00FF, #C42A1F, etc...).

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> 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
46

Linguagens de Programao I

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.

Voc Sabia?
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.

Unidade 2

47

Universidade do Sul de Santa Catarina

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 significam. Voc aprender tudo sobre elas mais adiante. Este s um exemplo simples para voc comear.
<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>

48

Linguagens de Programao I

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 esta extenso. Por isso, crie desde j o hbito de utiliz-la; use nomes simples e curtos. No inclua espaos ou caracteres especiais (marcadores, letras acentuadas, etc.). Use apenas letras e nmeros.

Aqui vai uma dica, se voc for utilizar o bloco de notas do Windows para editar o exemplo: no momento de gravar o arquivo, coloque o nome e extenso entre aspas duplas, por exemplo: meuarquivo.html. Este processo evitar que o arquivo seja gravado com a extenso txt (meuarquivo.html.txt), confuso ocasionada conforme a configurao do sistema operacional.

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. Uma outra forma de abrir o arquivo dar dois cliques sobre ele. Abrir o navegador que estiver configurado como navegador padro. 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 o exemplo apresentado acima. Verifique se todas as tags tm tags de
49

Unidade 2

Universidade do Sul de Santa Catarina

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

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 se esquea de verificar tambm 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?

50

Linguagens de Programao I

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.

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>
Unidade 2

51

Universidade do Sul de Santa Catarina

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>

Lembre-se de que todas as tags acima devem estar dentro da BODY. Esses cabealhos so mostrados da seguinte forma:

Figura 2.2 Visualizando exemplo de cabealho.

Aninhamento colocar documentos dentro de outro documento. Em HTML, aninhar colocar tags uma dentro das outras.

Aninhamento de cabealhos
Os cabealhos no podem ser aninhados, isto , a formatao pode produzir algum resultado prximo ao desejado, como no exemplo a seguir. Vamos testar?

52

Linguagens de Programao I

<H2>Este <H1>um cabealho de nvel 1</H1><H2> dentro de um cabealho de nvel 2</H2>

Figura 2.3 Visualizando exemplo de no aninhamento de tag.

Porm o mais comum que os navegadores entendam a formatao anterior como:

<H2>Este </H2> <H1>um cabealho de nvel 1</H1><H2> 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>, e oferecem o seguinte resultado:

Figura 2.4 Visualizando exemplo de aninhamento de tag.

Unidade 2

53

Universidade do Sul de Santa Catarina

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.

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 tais 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.
54

Linguagens de Programao I

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. 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

Universidade do Sul de Santa Catarina

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

Linguagens de Programao I

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 ideias 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> utilizada 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

Universidade do Sul de Santa Catarina

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

Linguagens de Programao I

Figura 2.9 Exemplo de linha horizontal.

Tambm veja o exemplo 3:

<HR SIZE=70 WIDTH=7 ALIGN=LEFT>

A utilizao de aspas duplas nos valores dos atributos opcional, porm considerada uma boa prtica. Neste caso, voc insere uma linha de altura 70 (pixels), comprimento 7 (pixels), alinhada esquerda (o Netscape, aparentemente, no aceita esta formatao de <HR>). Verifique o resultado no seu navegador. Ter o aspecto abaixo? Se afirmativo, ento est correto.

Figura 2.10 Exemplo de linha horizontal.

Unidade 2

59

Universidade do Sul de Santa Catarina

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 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:

60

Linguagens de Programao I

<DIV ALIGN=LEFT> <H1>Exemplo de texto esquerda</H1> <p>Testando esquerda</p> </DIV>

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

Universidade do Sul de Santa Catarina

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

Linguagens de Programao I

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.
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 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 desta forma de alinhamento arbitrrio, a tag <PRE> muda o tipo de caractere para uma fonte monoespaada. 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.

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

Universidade do Sul de Santa Catarina

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

Linguagens de Programao I

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

Universidade do Sul de Santa Catarina

Atividades de autoavaliao
Caro(a) aluno(a), 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 qu?

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.

66

Linguagens de Programao I

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. So Paulo: 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)

Unidade 2

67

UNIDADE 3

Listas e Vnculos
Objetivos de aprendizagem

Conhecer e criar as tags para listas. Realizar comentrios atravs do cdigo HTML. Fazer os vnculos realizados em HTML.

Sees de estudo
Seo 1 Listas Seo 2 Comentrios Seo 3 Tudo sobre vnculos

Universidade do Sul de Santa Catarina

Para incio de estudo


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 aprender a realizar um comentrio e como estabelecer os vnculos em HTML. Vamos comear!

Seo 1 - Listas
Nesta seo, voc estuda agora os cinco tipos de listas 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

Linguagens de Programao I

Listas Numeradas ou Ordenadas


As listas numeradas so delimitadas pelas tags <OL>...</OL> e cada item 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 sequencial. 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

Universidade do Sul de Santa Catarina

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

Linguagens de Programao I

<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.

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

Universidade do Sul de Santa Catarina

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:
<OL> <LI>item 1 <LI>item 2 <LI>item 3 <LI VALUE=55>item 55 <LI>item 56 </OL>

74

Linguagens de Programao I

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 cada 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>

E visualize-o no navegador:

Figura 3.5 Exemplo no navegador de uma lista com marcadores.

Unidade 3

75

Universidade do Sul de Santa Catarina

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 possveis, 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.

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>

76

Linguagens de Programao I

Este exemplo assim visualizado:

Figura 3.6 Exemplo no navegador de uma lista personalizada com marcadores.

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.

Unidade 3

77

Universidade do Sul de Santa Catarina

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.

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 <DD>definio <DT>termo a ser definido <DD>definio </DL>

Considere a seguinte visualizao:

78

Linguagens de Programao I

Figura 3.8 Exemplo no navegador de uma lista de glossrio.

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>ma <LI>laranja <LI>goiaba </MENU>

Unidade 3

79

Universidade do Sul de Santa Catarina

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.

Figura 3.9 Exemplo no navegador de uma lista de menu e lista de diretrio.

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, 1998). 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 desta 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.

80

Linguagens de Programao I

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 <OL> <LI>item de uma lista numerada <LI>item de uma lista numerada <UL> <LI>item de uma lista </UL> <LI>item de uma lista numerada </OL> <DT>termo a ser definido <DD>definio </DL>

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.

Unidade 3

81

Universidade do Sul de Santa Catarina

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?
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.

82

Linguagens de Programao I

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:

Figura 3.11 Exemplo no navegador de listas aninhadas.

Observe que estas mesmas listas tambm no apresentariam numerao em formato 1.1, 1.2, etc., quando ordenadas e compostas: 1. Documentos bsicos 2. Documentos avanados
Unidade 3

83

Universidade do Sul de Santa Catarina

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>

Vamos testar o exemplo acima no seu navegador e verificar o resultado? Ele apresenta-se como o visualizado abaixo!

84

Figura 3.12 Exemplo no navegador de listas aninhadas.

Linguagens de Programao I

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>

Vamos visualizar o exemplo acima no seu navegador? Qual o resultado? Publique este resultado tambm na ferramenta EXPOSIO, no ambiente virtual EVA.
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.

Unidade 3

85

Universidade do Sul de Santa Catarina

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:
<!-- Isto um comentrio -->

Em verses mais atuais da HTML, voc pode comentar tambm vrias linhas assim:
<!-- Isto um comentrio De duas ou mais linhas --> Aqui tem um exemplo de comentrio!! Ele no apareceu escrito!!

Visualize o exemplo acima no seu navegador:

Figura 3.13 - Exemplo de comentrio.

86

Linguagens de Programao I

Atividade de autoavaliao
A partir de seus estudos, leia com ateno e resolva a atividade programada para a sua autoavaliao. 1. Crie uma pgina HTML chamada de MinhaLista.html e crie listas aninhadas nesta pgina. No se esquea de comentar o seu cdigo HTML.

Unidade 3

87

Universidade do Sul de Santa Catarina

Seo 3 - Tudo sobre vnculos


At agora, produzimos 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.

88

Linguagens de Programao I

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.

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
89

Unidade 3

Universidade do Sul de Santa Catarina

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.

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 chamada de indicador) seja o destino de um link.

90

Linguagens de Programao I

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.
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.

Unidade 3

91

Universidade do Sul de Santa Catarina

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.
Lembre-se de 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 outro exemplo:

<A HREF=#cap1>Captulo 1</A>

Enquanto o alvo do link fica desta forma:

<A NAME=cap1>Captulo 1</A>

92

Linguagens de Programao I

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.
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.

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
Unidade 3

93

Universidade do Sul de Santa Catarina

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.
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.

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.

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

94

Linguagens de Programao I

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. Para citar uma determinada parte de 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.

Unidade 3

95

Universidade do Sul de Santa Catarina

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

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 disto, o link pisca em uma cor ainda diferente dessas duas logo depois que clicado pelo usurio. A cor dos links definida no tag <BODY>, conforme j foi estudado na unidade 2.

96

Linguagens de Programao I

<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.

Sntese
Amigos, mais uma unidade vencida! Nesta unidade, aprendemos como criar os mais diferentes tipos de lista. 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.
Unidade 3

97

Universidade do Sul de Santa Catarina

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

Atividades de autoavaliao
Leia com ateno e resolva a seguinte atividade de autoavaliao. 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. So Paulo: Editora rica, 2005. <http://www.clem.ufba.br/tuts/html/c07.htm> <http://www.criarweb.com/manuais/2/>

98

UNIDADE 4

Mais formatao em HTML


Objetivos de aprendizagem

Especificar o aspecto visual dos caracteres. Incluir caracteres especiais. Alterar a fonte e o tamanho da fonte.

Sees de estudo
Seo 1 Estilos de Caractere Seo 2 Caracteres Especiais Seo 3 Formatao do Texto Seo 4 As Tags <blink> e <marquee> Seo 5 Endereos

Universidade do Sul de Santa Catarina

Para incio de estudo


Voc j aprendeu os conceitos bsicos da HTML, que abrangem vrios elementos bsicos da pgina e vnculos. Com esse conhecimento, voc est agora preparado(a) 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 Caractere


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 caractere 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 ideia 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.

100

Linguagens de Programao I

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. Estes 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 caractere 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

101

Universidade do Sul de Santa Catarina

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 sequncia de caracteres, por exemplo, uma mensagem de erro ou um resultado ou um texto de exemplo. Semelhante a <CODE>. Forte nfase, mostrada normalmente em negrito. Indica variveis ou valores que o usurio dever escrever. Geralmente mostrado em itlico ou sublinhado.

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

Fonte: LEMAY, 1998.

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 caractere lgico, cada
102

Linguagens de Programao I

tag de formatao fsica contm uma tag de abertura e uma tag de fechamento. As tags de estilo fsico so as descritas a seguir:
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.

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 caractere, como nos exemplos a seguir:

Unidade 4

103

Universidade do Sul de Santa Catarina

<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.

104

Linguagens de Programao I

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 caractere, ento voc no poder usar esse caractere no seu arquivo em HTML. Isso se aplica tambm a caracteres que talvez voc esteja acostumado(a) a usar, como travesses, por exemplo. Mas, espere um instante! Imagino o que voc est pensando: se eu posso digitar um caractere, como um marcador ou um a acentuado no meu teclado atravs de uma sequncia 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 caractere (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 outra pessoa estiver lendo o seu arquivo HTML na internet com esse caractere especial, provvel que acabe vendo outro caractere na tela, o que costumamos chamar de lixo. Ou, dependendo de como a sua pgina for apresentada na internet, o caractere poder perder-se 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 caractere. 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.

ASCII (American Standard Code for Information Interchange) um conjunto de cdigos para o computador representar nmeros, letras, pontuao e outros caracteres.

Unidade 4

105

Universidade do Sul de Santa Catarina

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 sequncias de escape, indicadas por trs partes: um & inicial, um nmero ou cadeia de caracteres correspondente ao caractere desejado, e um ; final. Dessa forma, para usar a palavra caf no seu arquivo HTML, voc deveria usar:

Caf&eacute;

Ou
Caf&#233;

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 caractere e acentuado na tabela ASCII. Suponha agora que voc queira incluir em um arquivo em HTML uma linha de cdigo semelhante a esta:
106

Linguagens de Programao I

<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 caractere < (menor que). Para um navegador HTML, esse caractere significa este o incio de uma tag. Como nesse contexto o caractere < (menor que) no representa o incio de uma tag, o navegador ficar confuso. Outro problema trata da acentuao da palavra ento, que dever ser substituda pela sequncia correspondente. Dessa forma, para ser gravada de forma correta para a HTML, essa linha de cdigo deveria ser apresentada da seguinte forma:

<CODE> se (x&lt;0) ent&atiloe;0</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 &lt; Caractere <

Unidade 4

107

Universidade do Sul de Santa Catarina

&gt; &amp; &quot;


ISO Latin1: ASCII com extenses para idiomas Europeus

> &

Outras sequncias de escape suportam caracteres ISO Latin1. Aqui est uma tabela com os caracteres mais utilizados em portugus:
Entidade
&aacute; &acirc; &agrave; &atilde; &ccedil; &eacute; &ecirc; &iacute; &oacute; &ocirc; &otilde; &uacute; &uuml;

Caractere

Entidade
&Aacute; &Acirc; &Agrave; &Atilde; &Ccedil;

Caractere

108

Linguagens de Programao I

&Eacute; &Ecirc; &Iacute; &Oacute; &Ocirc; &Otilde; &Uacute;

Como vemos, as sequncias 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:

&copy; para o smbolo ; &reg; para ; e &sect; para .

Unidade 4

109

Universidade do Sul de Santa Catarina

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 caractere 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 caractere, 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 valores desse atributo variam de 1 a 7, e o valor 3 corresponde ao tamanho padro. O modelo o seguinte:
110

Linguagens de Programao I

<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

111

Universidade do Sul de Santa Catarina

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>

112

Linguagens de Programao I

Acompanhe a visualizao:

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

113

Universidade do Sul de Santa Catarina

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. Os navegadores mais conhecidos tambm j implementam essa funcionalidade. 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 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

114

Linguagens de Programao I

esteja instalada no sistema. Se nenhuma das fontes especificadas for localizada, ser utilizada a fonte padro. 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>

Acompanhe a visualizao:

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

115

Universidade do Sul de Santa Catarina

<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:

Figura 4.9 - Exemplo de visualizao de formatao de cores em textos.

116

Linguagens de Programao I

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 - As Tags <Blink> e <Marquee>


Voc conhece as tags <BLINK> e </BLINK>? Para que servem estas tags? Voc estudar essas tags logo abaixo.

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.
Unidade 4

117

Universidade do Sul de Santa Catarina

Um exemplo seria:

<BLINK>Efeito piscante ao texto.</BLINK>

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, 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?
118

Linguagens de Programao I

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 se esquea de visualizar o movimento no seu navegador:

<MARQUEE BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE>

Confira os atributos da tag <MARQUEE>:


Atributo
BGCOLOR BEHAVIOR DIRECTION LOOP HSPACE VSPACE HEIGHT WIDTH

Definio
cor de fundo comportamento do texto 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

Exemplo
BGCOLOR =#FFFFFF BEHAVIOR =scroll ou slide ou alternate DIRECTION =right ou left LOOP =nombre ou infinite HSPACE =10 VSAPCE =5 HEIGHT =200 WIDTH =300

Unidade 4

119

Universidade do Sul de Santa Catarina

Veja o exemplo de uso de 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 para) o caminho da direita para a esquerda, conforme o resultado nos dois navegadores abaixo:

Figura 4.11 - Exemplo do uso da tag MARQUEE Etapa 1.

Figura 4.12 - Exemplo do uso da tag MARQUEE Etapa 2.

120

Linguagens de Programao I

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 suas dvidas sobre a entrega de seu material para <address>monitorvirtual@unisul.br</address>

No navegador, fica assim:

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.
Unidade 4

121

Universidade do Sul de Santa Catarina

Atividades de autoavaliao
Caro aluno, leia o enunciado com ateno e responda 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, crie um link (vnculo) com a pgina MinhaLista.html. Verifique depois o resultado no seu navegador, iniciando em index.html.

Saiba mais
Aprofunde-se sobre formatao em HTML, consultando as seguintes referncias: WATRALL Ethan, SIARTO Jeff. Use a cabea Web-Design. So Paulo: Alta Books, 2009 <http://www.juliobattisti.com.br/tutoriais/ericogoncalves/ htmlbasico004.asp> <http://www.vas-y.com/dicas/curso/html/2_3.htm>

122

UNIDADE 5

Uso de Imagens, Painis de Fundo e Arquivos de Msica


Objetivos de aprendizagem

Identificar os tipos de imagens que voc pode utilizar na web. Compreender como e quando incluir imagens em uma pgina na web. Criar vnculos com as imagens. Aprender a usar imagens para painis de fundo lado a lado. 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 Arquivos de udio

Universidade do Sul de Santa Catarina

Para incio de estudo


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 mais utilizadas em pginas web tm as terminaes: .bmp, .jpg, .gif ou .png. Cada extenso de imagem possui suas vantagens e desvantagens. Observe: As imagens com terminao .bmp: tm tamanho muito grande, o que gera lentido no carregamento das pginas e no permite transparncia. A vantagem deste tipo de imagem a facilidade de edio sem a perda da qualidade, porm, com a evoluo tecnolgica, est sendo bem pouco utilizada. O formato jpg (ou jpeg) pode trabalhar com esquema de cores de 24 bits, aceitando assim 16,8 milhes de cores. A qualidade da imagem boa, mas tambm no permite transparncia. O tamanho bem reduzido, se comparado com o .bmp, mas ainda grande para pginas que utilizam muitas imagens. Os gifs trabalham com apenas 256 cores, de forma que o tamanho o menor de todos os formatos, permitindo tambm transparncia e animaes. um dos formatos mais utilizados na web justamente pela rapidez em carregar as imagens. Porm o fato de utilizar apenas 256 cores deixa a qualidade da imagem bem limitada. O .png interessante, porque consegue trabalhar com esquema de 24 bits de cores, ou seja, 16,8 milhes de cores, suportando tambm a transparncia e com tamanho menor que o formato .jpg, pois utiliza um algoritmo mais eficiente para compresso da imagem. um pouco maior que o .gif, por causa da qualidade da imagem, que bem superior. Atualmente, um formato bastante utilizado. Hoje em dia, existem 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.
124

Linguagens de Programao I

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.

Graas aos formatos .jpg, .gif e .png, possvel utilizar imagens em diferentes aplicaes, at mesmo na definio de layout das pginas. A escolha do tipo de imagem no pode ser arbitrria, devem ser levadas em considerao todas as vantagens e desvantagens, principalmente no que se refere qualidade e tamanho. Uma boa prtica utilizar .png ou .jpg para imagens fotogrficas e .gif para imagens criadas em computador ou desenhadas (cones, botes, etc...). Os formatos de imagem explicados aqui so os mais utilizados e compatveis com os diversos tipos de navegadores, porm existem vrios outros tipos de imagens, cada um com caractersticas e finalidades diferentes.

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 onde pode ser encontrada a
Unidade 5

125

Universidade do Sul de Santa Catarina

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 na pgina da Unisul Virtual, devemos usar o URL:
https://minha.unisul.br/pa89prd/uni_imagens/topoEsquerda.gif

Ento o cdigo ficaria assim:


<IMG SRC= https://minha.unisul.br/pa89prd/uni_imagens/topoEsquerda.gif>

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.

126

Linguagens de Programao I

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 se encontra dentro da pasta onde est gravado o cdigo HTML acima. Vamos visualizar:

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>

Unidade 5

127

Universidade do Sul de Santa Catarina

Para um arquivo de imagem que esteja localizado em 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. 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.

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.

128

Linguagens de Programao I

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:
<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 consiga 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= https://minha.unisul.br/pa89prd/uni_imagens/ topoEsquerda.gif alt= cone Unisul Virtual>

Unidade 5

129

Universidade do Sul de Santa Catarina

Figura 5.4 Exemplo de imagem com o uso do atributo ALT.

Figura 5.5 Exemplo de imagem no encontrada com o atributo ALT.

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 por pessoas que tm deficincias visuais. Nesses casos, sem o atributo ALT, o contedo das imagens seria sempre um mistrio.

130

Linguagens de Programao I

Desta 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:
<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>

Unidade 5

131

Universidade do Sul de Santa Catarina

Vamos visualizar o resultado no seu navegador?

Figura 5.6 Exemplo de imagem com atributos WIDTH e HEIGHT.

Uma das vantagens de se usarem 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.

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 se esquecendo de criar uma imagem com o nome de sol.gif em um editor de imagens. O resultado deve ser este:

132

Linguagens de Programao I

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>

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.

Unidade 5

133

Universidade do Sul de Santa Catarina

<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.

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:

Figura 5.9 - Exemplo de alinhamento de texto e imagem.

134

Linguagens de Programao I

<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:

Figura 5.10 - Exemplo de alinhamento de texto e imagem.

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.

Unidade 5

135

Universidade do Sul de Santa Catarina

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:
<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:

Figura 5.11 - Exemplo de alinhamento de texto e imagem.

<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:

Figura 5.12 - Exemplo de alinhamento de texto e imagem.

Para ter duas imagens, uma em cada margem, numa mesma


136

Linguagens de Programao I

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

137

Universidade do Sul de Santa Catarina

Visualizao:

Figura 5.14 - Exemplo de alinhamento de texto e imagem.

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>

138

Linguagens de Programao I

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:

Figura 5.15 - Exemplo de alinhamento de texto e imagem.

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

139

Universidade do Sul de Santa Catarina

Neste segundo texto, a primeira imagem surgir 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:

Figura 5.16 - Exemplo de alinhamento de texto e imagem.

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 direita foi colocada uma borda com espessura 3.

140

Linguagens de Programao I

O resultado no navegador do Internet Explorer este:

Figura 5.17 - Exemplo de alinhamento de texto e imagem.

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>

Se uma frase marcada como ncora de um link, ento ela se apresenta sublinhada; se uma imagem se faz de ncora, ento ela
Unidade 5

141

Universidade do Sul de Santa Catarina

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.

Se voc quiser uma borda mais larga, siga o exemplo:

<A HREF=URL><IMG SRC=sol.gif ALT=descrio BORDER=4></A>

142

Linguagens de Programao I

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>

Deste modo, aparecer no navegador:

Figura 5.20 - Exemplo do uso de imagem sem borda.

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
143

Unidade 5

Universidade do Sul de Santa Catarina

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 pgina do BOL </A>

A visualizao deve ser esta:

Figura 5.21 - Exemplo de alinhamento de texto e imagem.

As imagens que so pontos ativos referentes a vnculos aparecem com uma borda ao redor, como na figura 5.18.
Ao utilizar as imagens, tenha em conta que elas podem aumentar consideravelmente o tempo que preciso esperar, para se verem os contedos das pginas. Por isso, use-as com cuidado!

144

Linguagens de Programao I

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 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, a qual 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

145

Universidade do Sul de Santa Catarina

O resultado visualizado assim:

Figura 5.22 - Exemplo de painel de fundo.

Caso o desenvolvedor necessite colocar uma imagem de fundo sem que a mesma seja repetida, utilizar tcnicas de folhas de estilo (CSS), que permitem a configurao visual de toda a pgina. O CSS ser abordado, ainda neste material, nas prximas unidades.

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 para as seguintes sugestes (LEMAY, 1998):

146

Linguagens de Programao I

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. Mantenha as imagens pequenas! - Uma imagem pequena 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. Procure reutilizar imagens! - Procure reutilizar as mesmas 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. Fornea alternativas s imagens! - Se voc ainda no estiver 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.

Unidade 5

147

Universidade do Sul de Santa Catarina

Seo 5 - Arquivos de udio


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>

Essa tag tambm pode ser usada com alguns atributos. Veja o exemplo:
<embed src=nome da msica autostart=true loop=10>

148

Linguagens de Programao I

Onde:

Em "nome da msica", voc coloca o nome e caminho do arquivo a 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.
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

149

Universidade do Sul de Santa Catarina

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, PNG ou JPG 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.
150

Linguagens de Programao I

Atividades de autoavaliao
A partir de seus estudos, leia com ateno e resolva a atividade programada para a sua autoavaliao. 1. Que tal acrescentar como sua atividade de autoavaliao um arquivo mid em sua pgina index.html?

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

151

UNIDADE 6

Tabelas
Objetivos de aprendizagem

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

Universidade do Sul de Santa Catarina

Para incio de estudo


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 isto 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 adiante!

154

Linguagens de Programao I

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, vamos 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 diferente em relao ao restante da tabela. Os cabealhos da tabela tambm so opcionais. Dados da tabela - consistem nos valores que compem a tabela. A combinao dos cabealhos com os dados resulta na parte essencial da tabela. 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

155

Universidade do Sul de Santa Catarina

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. 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.
156

Linguagens de Programao I

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

157

Universidade do Sul de Santa Catarina

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 tags <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.

158

Linguagens de Programao I

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? Isto simples. Basta definir uma clula com 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 deste tipo apresentada, como se a clula no existisse:

Figura 6.3 Exemplo de visualizao de tabela com a primeira clula inexistente.

Unidade 6

159

Universidade do Sul de Santa Catarina

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.

160

Linguagens de Programao I

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 VALIGN = alinhamento vertical

Esses atributos devem ser usados dentro das tags <TR> e <TD> (alm de <TH>, se for o caso). Por padro, as clulas de dados so alinhadas:

no sentido horizontal: alinhamento esquerda no sentido vertical: alinhamento no centro da clula

Unidade 6

161

Universidade do Sul de Santa Catarina

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. ALIGN=RIGHT: alinha o contedo direita. ALIGN=CENTER: alinha o contedo ao centro.

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). VALIGN=TOP: alinha o contedo no topo. VALIGN=MIDDLE: alinha o contedo ao centro. VALIGN=BOTTOM: alinha o contedo na base da clula.

Veja como esses alinhamentos funcionam nas clulas:

<TD ALIGN=alinhamento_horizontal>Texto da clula</TD> <TD VALIGN=alinhamento_vertical>Texto da clula</TD>

162

Linguagens de Programao I

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

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

163

Universidade do Sul de Santa Catarina

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>

164

Linguagens de Programao I

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

165

Universidade do Sul de Santa Catarina

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 tags <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>

166

Linguagens de Programao I

Veja o resultado no seu navegador:

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

167

Universidade do Sul de Santa Catarina

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>trs 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.

168

Linguagens de Programao I

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). 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.

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 mostrada anteriormente.

Unidade 6

169

Universidade do Sul de Santa Catarina

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. HEIGHT: para definir a altura da tabela.

Os atributos de espaamento so:

CELLPADDING: para definir a margem dentro das clulas. CELLSPACING: para definir o espao entre as clulas.

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>

170

Linguagens de Programao I

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.

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:
Unidade 6

171

Universidade do Sul de Santa Catarina

em porcentagem (do espao disponvel) - WIDTH=x%; em pixels - WIDTH=x.

Abaixo, segue o exemplo de uma tabela ocupando 50% do espao disponvel:


<TABLE BORDER=1 width=50%>

A visualizao como segue:

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>

172

Linguagens de Programao I

Observe o resultado em seu navegador:

Figura 6.14 Exemplo de tabela usando 50% da janela e alterando largura da 2 coluna.

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.

Unidade 6

173

Universidade do Sul de Santa Catarina

Atributos de espaamento
Como voc j verificou, existem dois atributos que permitem o controle de espaamento em tabelas:

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.

174

Linguagens de Programao I

Vamos tambm alterar, agora, 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.

Unidade 6

175

Universidade do Sul de Santa Catarina

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 das frutas, 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.

176

Linguagens de Programao I

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>

A visualizao a seguinte:

Figura 6.21 Exemplo do uso de cores de fundo em clulas alternadas.

Unidade 6

177

Universidade do Sul de Santa Catarina

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. BORDERCOLORLIGHT - define o componente claro de bordas tridimensionais. BORDERCOLORDARK - define o componente escuro de bordas tridimensionais.

Acompanhe o exemplo:

<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.

Veja este outro exemplo:

178

Linguagens de Programao I

<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.

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 tags 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:

Unidade 6

179

Universidade do Sul de Santa Catarina

<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.

180

Linguagens de Programao I

Sntese
Para melhor auxiliar voc nos seus estudos, segue abaixo 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

Sintaxe
ALIGN=LEFT|RIGHT|CENTER

Exemplo
<TABLE ALIGN=CENTER>texto</TABLE>

Borda

BORDER=TAMANHO (em pixels) WIDTH=TAMANHO (em pixels ou % da pagina)

<TABLE BORDER=1>texto</TABLE>

Comprimento

<TABLE WIDTH=20%>texto</TABLE>

Altura

HEIGHT=TAMANHO (em pixels ou <TABLE HEIGHT=20%>texto</TABLE> % da pagina) BGCOLOR=COR <TABLE BGCOLOR=blue>texto</TABLE>

Cor de fundo

Cor da borda Cor da borda escura

BORDERCOLOR=COR

<TABLE BORDERCOLOR=orange>texto</TABLE>

BORDERCOLORDARK=COR

<TABLE BORDERCOLORDARK=red>texto</TABLE>

Cor da borda clara BORDERCOLORLIGHT=COR

<TABLE BORDERCOLORLIGHT=yellow>texto</TABLE>

Unidade 6

181

Universidade do Sul de Santa Catarina

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=NMERO ROWSPAN=NMERO 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.

Atividades de autoavaliao
Leia com ateno o enunciado seguinte e resolva a atividade programada para a sua autoavaliao. 1. Caro(a) aluno(a), voc consegue reproduzir o cdigo HTML que est sendo mostrado no navegador abaixo? Vamos tentar?

Figura 6.25 Um exemplo de tabela para a autoavaliao.

182

Linguagens de Programao I

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.

Saiba mais
Aprofunde os contedos estudados nesta unidade, ao consultar as seguintes referncias: <http://www.criarweb.com/artigos/64.php> <http://www.juliobattisti.com.br/tutoriais/ericogoncalves/ htmlbasico010.asp> <http://www.pypbr.com/html/htm_avc.asp#table> (HTML Avanado)

Unidade 6

183

UNIDADE 7

Frames
Objetivos de aprendizagem

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

Universidade do Sul de Santa Catarina

Para incio de estudo


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 esta 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.

186

Linguagens de Programao I

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; elemento FRAME - que indica as pginas que devem ser carregadas em cada uma dessas subdivises.

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

187

Universidade do Sul de Santa Catarina

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 estes atributos mais adiante.

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=ndice1.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>

Conforme o exemplo acima, a parte FRAMESET define a diviso da pgina em quadros. Neste caso, a pgina ser
188

Linguagens de Programao I

dividida em duas colunas, sendo a primeira com 20% do tamanho da tela e a segunda coluna com os restantes 80% da tela. Neste exemplo, no foi configurado o nmero de linhas (ROWS) do FRAMESET. Como veremos a seguir, as composies de linhas e colunas seguem um padro diferenciado, de forma que no possvel a definio dos dois atributos (ROWS e COLS) simultaneamente. Observe que, dentro da formatao de FRAMESET, temos os FRAME SRC, os quais fazem referncias s pginas que sero mostradas nos frames definidos. O caminho das pginas a serem inseridas como frames (no exemplo: ndice1.html e texto.html) seguem a mesma padronizao para a insero de imagens; neste caso, os dois arquivos esto no mesmo diretrio do frame document (arquivo que contm a tag FRAMESET). Assim, no cdigo descrito acima, a pgina ndice1.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 ndice1.html este:
<HTML> TESTANDO FRAME... 20% </HTML>

E o contedo do arquivo texto.html este:


<HTML> TESTANDO FRAME... 80% </HTML>

Assim, o resultado apresentado no navegador ser:


189

Unidade 7

Universidade do Sul de Santa Catarina

Figura 7.2 Exemplo de visualizao de um FRAME.

A formatao de frames inclui tambm uma parte NOFRAME, a qual 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 esquerda faz com que a pgina apontada seja mostrada ocupando a janela da direita (coluna de 80%):
190

Linguagens de Programao I

<HTML> <HEAD><TITLE>Assunto X</TITLE></HEAD> <FRAMESET COLS=20%, 80%> <FRAME SRC=ndice1.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 ndice1.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

191

Universidade do Sul de Santa Catarina

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!

192

Linguagens de Programao I

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. TARGET="_blank abre uma nova janela do browser para apresentar a pgina de destino.

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 nomeao dos frames; e a 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 deem suporte criao de frames, necessrio que o autor se preocupe com os detalhes de nomeao de frames e de direcionamento de links.

Unidade 7

193

Universidade do Sul de Santa Catarina

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>

194

Linguagens de Programao I

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>

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 ter, portanto, um valor associado, e esses valores devem estar separados por vrgula. Veja a sintaxe:
195

Unidade 7

Universidade do Sul de Santa Catarina

(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. Este 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 serem somados 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.

196

Linguagens de Programao I

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

Veja o resultado no seu navegador:

FIgura 7.9 Exemplo da tela dividida em 3 FRAMES em linha.

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

197

Universidade do Sul de Santa Catarina

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:

Figura 7.10 Exemplo do uso de FRAMES em linha com o FRAME central mais largo.

198

Linguagens de Programao I

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

199

Universidade do Sul de Santa Catarina

Figura 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:

Figura 7.12 Exemplo da tela dividida em 2 FRAMES em coluna.

200

Linguagens de Programao I

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> <!-- O tag HTML abaixo divide a tela em duas linhas --> <FRAMESET ROWS=30%,70%> <FRAME SRC=exemplo1.html> <!-- A linha de cdigo abaixo divide a segunda linha em duas colunas --> <FRAMESET COLS=50%,50%> <FRAME SRC=exemplo2.html> <FRAME SRC=exemplo3.html> </FRAMESET> </FRAMESET> </HTML>

Unidade 7

201

Universidade do Sul de Santa Catarina

Veja o resultado no seu navegador:

Figura 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 este atributo, ento, o valor padro (com bordas) ser usado. O modelo o seguinte:
(FRAMEBORDER=yes|no)

Eis um exemplo:
<FRAMEBORDER=no>

202

Linguagens de Programao I

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:

Figura 7.14 Exemplo de FRAME sem borda.

Unidade 7

203

Universidade do Sul de Santa Catarina

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>

204

Linguagens de Programao I

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 qual 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 separadamente.

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=ndice.html>

Unidade 7

205

Universidade do Sul de Santa Catarina

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)

Acompanhe o exemplo:
<FRAME SRC=inicial.html NAME=navega>

MARGINWIDTH
Este 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=ndice.html MARGINWIDTH=3>

206

Linguagens de Programao I

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=ndice.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=ndice.html SCROLLING=yes>

Unidade 7

207

Universidade do Sul de Santa Catarina

Para dispor o frame sem a barra de rolagem:

<FRAMESET COLS=20%, 80%> <FRAME SRC=ndice.html SCROLLING=no> <FRAME SRC=apresenta.html NAME=principal> </FRAMESET>

A barra de rolagem de um frame fica sempre direita. No possvel, atualmente, mudar esta caracterstica.

NORESIZE
NORESIZE tambm opcional. Este 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=ndice.html NORESIZE>

Aqui est um exemplo de elemento FRAME acompanhado de alguns atributos:

208

Linguagens de Programao I

<HTML> <HEAD> <TITLE> Frame Document </TITLE> </HEAD> <FRAMESET COLS=200,*,*> <FRAME SRC=Exemplo1.html> <FRAME SRC=Exemplo2.html NAME=ndice MARGINWIDTH=3 MARGINHEIGHT=4 SCROLLING=yes NORESIZE> <FRAME SRC=Exemplo3.html> </FRAMESET> </HTML>

Veja o resultado no seu navegador:

Figura 7.15 Exemplo de atributos na tag FRAME.

Unidade 7

209

Universidade do Sul de Santa Catarina

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> <!-- O campo abaixo o campo que o navegador que aceita frames, ignora --> <NOFRAMES> <FONT SIZE=4>

210

Linguagens de Programao I

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:

Figura 7.16 Exemplo do uso da tag NOFRAMES.

Caso o seu navegador NO suporte o uso de frames, surgir na tela a seguinte mensagem:

Figura 7.17 Exemplo do uso da tag NOFRAMES quando o navegador no aceita FRAME.

Unidade 7

211

Universidade do Sul de Santa Catarina

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. 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 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.

Atividades de autoavaliao
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

212

Linguagens de Programao I

2 Quais as vantagens de se utilizarem frames em um site? Vamos discutir sobre isso na ferramenta FORUM. 3 - importante criarmos tags NOFRAME? Por qu?

Saiba mais
Aprofunde os contedos estudados nesta unidade, ao consultar as seguintes referncias: <http://www.icmc.usp.br/ensino/material/html/> <http://www.criarweb.com/artigos/131.php (Frames em HTML)> <http://www.apostilaspdf.com/apostila-manual-criacao-webpages/>

Unidade 7

213

UNIDADE 8

Desenvolvendo Pginas Eficientes


Objetivos de aprendizagem

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. Identificar elementos/ atributos obsoletos (deprecated).

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 Seo 6 Elementos e atributos obsoletos

Universidade do Sul de Santa Catarina

Para incio de estudo


Nesta unidade, no vamos abordar as tags HTML, e sim, 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. Ainda: conheceremos alguns elementos e atributos que j esto obsoletos e que devem ser evitados na programao eficiente.

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 com que voc tinha de 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. Tags especficas dos navegadores, que podem, ou no, se tornar parte da especificao HTML oficial e cujo suporte varia de um navegador para outro. Outras tags propostas para o futuro para a HTML, que contam com o suporte de poucos navegadores.

Fonte: LEMAY, 2001.

Se voc considera tal situao confusa, saiba que no o(a) nico(a). Os autores e projetistas esto tentando esclarecer
216

Linguagens de Programao I

essa confuso e tomar decises com base no aspecto visual que desejam 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
Unidade 8

217

Universidade do Sul de Santa Catarina

nesses navegadores. A maioria dos navegadores composta 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 como usar um HTML 4? Pesquise no site: <http://www.clem.ufba.br/tuts/html/ c16.htm>.

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 de 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. Analise-as na sequncia.
218

Linguagens de Programao I

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 ideias 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.

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 de 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

219

Universidade do Sul de Santa Catarina

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 percorr-lo 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. No esconda informaes importantes no meio do texto - Se tiver 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. Destaque cada pgina - Tenha o cuidado de criar pginas da web de modo que cada uma delas seja autossuficiente. Por exemplo: se o leitor cair em uma das pginas de seu site, a qual depende de uma pgina que ele no visitou, deve ser dado um destaque nessa 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. Se uma pgina depender de outra anterior a ela, fornea um vnculo de retorno pgina anterior (de preferncia, crie tambm um vnculo com a pgina que ocupa o nvel mais alto da hierarquia). Evite frases do tipo voc poder evitar esses problemas fazendo..., ao terminar isso, faa aquilo..., as vantagens desse mtodo so..., que disponham informaes as quais estaro sendo apresentadas em outra pgina. Ao se deparar logo de incio com essas frases, o leitor poder ficar confuso.

Fonte: LEMAY, 2001.

220

Linguagens de Programao I

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 esta 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

221

Universidade do Sul de Santa Catarina

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 de 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 os quais voc, por ser o autor, muitas vezes no percebe. Uma simples reviso poder aprimorar as suas pginas, facilitando a leitura e navegao.

222

Linguagens de Programao I

Atividade de autoavaliao
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 este exemplo? Procure elaborar novamente esta seo, de forma a destacar melhor os pontos principais do texto e o layout da pgina. No se esquea de revisar o portugus e fazer os links, como veremos abaixo:

Fonte: LE MAY, 2001.

Figura 8.1 Como construir um website.

O cdigo HTML, para ser utilizado no exerccio de autoavaliao, encontra-se na MIDIATECA. Publique o seu resultado em EXPOSIO.

Unidade 8

223

Universidade do Sul de Santa Catarina

Resposta:

224

Linguagens de Programao I

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

225

Universidade do Sul de Santa Catarina

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 leem na Internet? Pesquise o assunto no site:

<http:// www.comunidade.sebrae.com.br/intranet/Downloads/ Downloads_GetFile.aspx?id=5101>.

226

Linguagens de Programao I

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, na sequncia, orientaes 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, como o leitor saber quais informaes encontrar 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. 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

227

Universidade do Sul de Santa Catarina

dos vnculos, os quais conduziro a outras pginas. Ao incluir um vnculo, verifique se este no est interrompendo o fluxo da pgina. A ideia de incluso de vnculos no meio do texto torna-o autossuficiente. 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 em que esto interessados. Uma maneira de saber se voc esta incluindo vnculos no texto de 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. Esta 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 isto:


Selecione este link para obter informaes sobre o uso de vnculo.

228

Linguagens de Programao I

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. Este 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

229

Universidade do Sul de Santa Catarina

Existem algumas categorias de vnculos teis em pginas da web. Veja na sequncia.

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. Vnculos de definio - Palavras ou definies de conceitos podem 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 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.

230

Linguagens de Programao I

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. Isto 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

231

Universidade do Sul de Santa Catarina

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 se 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. Frequentemente voc pode apresentar a pgina inteira na tela. Desta forma, as informaes contidas nessa pgina podem ser facilmente consultadas pelo leitor.

232

Linguagens de Programao I

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 de 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. Estas 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

233

Universidade do Sul de Santa Catarina

A data da ltima reviso realizada na pgina. Isto especialmente importante no caso de pginas alteradas com muita frequncia. 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>

234

Linguagens de Programao I

O endereo da figura anterior ficaria assim:

Figura 8.3 Exemplo de assinatura para uma pgina web com mailto.

Tal procedimento permite aos leitores os quais tenham navegadores que ofeream suporte ao URL mailto, simplesmente selecionar o vnculo e enviar uma correspondncia para a pessoa responsvel pela pgina, sem precisar digitar novamente o endereo em seus programas de correio eletrnico.

Seo 6 - Elementos e atributos obsoletos


No incio, o HTML era a linguagem mais utilizada por cientistas. Eles no precisavam de qualidade grfica, diferentes formataes de textos, preocupavam-se 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, surgiu a necessidade de criar pginas mais interessantes e, ao mesmo tempo, mais complexas. O design 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 comportasse como uma linguagem de design grfico.

Unidade 8

235

Universidade do Sul de Santa Catarina

As pginas passaram a ter uma codificao mais complexa e de difcil manuteno e, por consequncia, trouxeram problemas de exibio a certos navegadores. Foi a 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.

Algumas tags obsoletas do HTML 4.0. so:


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:

Exemplo : align = left|center|right|justify Exemplo Obsoleto: <H1 align=center> Cabealho Centralizado </H1> Exemplo utilizando CSS: <HEAD> <STYLE type=text/css>
236

Linguagens de Programao I

H1 { text-align: center} </STYLE> <BODY> <H1> Cabealho Centralizado </H1>

Sntese
As principais normas para o projeto e a elaborao de pginas da web, apresentadas nesta unidade, so destacadas a seguir.

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. 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.

Unidade 8

237

Universidade do Sul de Santa Catarina

Atividades de autoavaliao
Leia cada enunciado com ateno e responda s 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> <www.wikipedia.br>

Saiba mais
Aprofunde os contedos estudados nesta unidade, ao consultar as seguintes referncias: 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: <http://www.unesp.br/prograd/PDFNE2003/Um%20 ambeinte%20de%20aprendizagem.pdf> (Construo de pginas web: depurao e especificao de um ambiente de aprendizagem) <http://www.abraweb.com.br/site/colunistas.php?c=27> (O valor de um projeto de pgina web)
238

UNIDADE 9

Folhas de Estilo
Objetivos de aprendizagem

Definir folhas de estilos. Compreender como e por que utilizar folhas de estilos em cascata. Aprender 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

Universidade do Sul de Santa Catarina

Para incio de estudo


Voc deve estar perguntando: o que ser que so folhas de estilo? Para que servem? J ouvi falar tanto nisso, mas no tenho ideia do que seja. 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 mesmo, j tem uma noo a respeito do assunto: do que se trata, etc. Sabendo o que isto significa, podemos comear o nosso estudo de folhas de estilo.

240

Linguagens de Programao I

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 de resolver, tendo em considerao o significado de cada tag. Este conceito perfeitamente racional era muito adequado enquanto o objetivo das pginas se limitava escrita e 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 ideia 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 contraindicaes, a criao e rpida disseminao de tags conduziu a uma situao em que os contedos das pginas estavam completamente misturados com
Unidade 9

241

Universidade do Sul de Santa Catarina

os aspectos estilsticos. Este contexto conduziu o HTML, no final da dcada de 1990, 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 HTML 4, 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: Netscape/Mozila, Microsoft Internet Explorer, Opera, Google Chrome, etc...

Vantagens dos estilos CSS


As pginas que usam estilos CSS, alm de serem mais fceis de escrever, so tambm mais leves e carregam mais rpido 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.

242

Linguagens de Programao I

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 autossuficiente, sem depender da folha de estilo.

As folhas de estilos permitem ganhar tempo e flexibilidade


O que interessante na ideia 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) 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 frequncia e so muito mais fceis de corrigir. A facilidade com que as alteraes so feitas d uma maior flexibilidade ao website e melhoram o seu desempenho. As pginas ficam simultaneamente mais ricas e mais leves.

Unidade 9

243

Universidade do Sul de Santa Catarina

O mecanismo de cascata
O termo cascata se refere sequncia 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 de que preciso testar tudo de forma exaustiva, em todos os navegadores relevantes, para no ter surpresas desagradveis.
244

Linguagens de Programao I

Seo 2 - A sintaxe CSS


Agora voc est pronto(a) 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 caractere : (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

245

Universidade do Sul de Santa Catarina

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> (isto deve estar no cabealho do documento HTML). Este 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>.

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.

246

Linguagens de Programao I

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 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 faz-nos 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

247

Universidade do Sul de Santa Catarina

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 sans serif a um pargrafo e comic sans ms 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.

248

Linguagens de Programao I

2. Folha de Estilos Interna


As folhas de estilos internas devem ser utilizadas, 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

249

Universidade do Sul de Santa Catarina

<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 desejamos 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> 250 O texto deste pargrafo tem tipo de letra comic sans ms.

Linguagens de Programao I

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 caractere ; (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; color: green; font-family: arial } </style> </head> <body> <p> O texto deste pargrafo tem tipo de letra arial, cor verde e est alinhado ao centro. </p> </body> </html>

Unidade 9

251

Universidade do Sul de Santa Catarina

Observe como fica no navegador:

Figura 9.5 Exemplo de folha de estilo com mais de uma definio.

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>

Se o navegador suporta CSS, ele entender a aplicao da folha de estilo tag mencionada.

252

Linguagens de Programao I

Voc Sabia?
Os Estilos 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 conheclas 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>

A tag LINK associa um arquivo de folha de estilo externa ao documento corrente. Desta forma, um estilo padronizado para um site pode ser determinado pelo gerente, por exemplo, e aplicado aos documentos criados por um autor de uma
Unidade 9

253

Universidade do Sul de Santa Catarina

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. Mais uma vez, o caminho dos arquivos das folhas de estilo deve estar no mesmo diretrio da pgina, ou ser definido o caminho absoluto ou relativo. Para poder testar este tipo de insero de folhas de estilho, crie um arquivo texto (pode ser editado no prprio bloco de notas do Windows) chamado meu_estilo.css. Em seu contedo, escreva as formataes dos exemplos. Sempre que alterar o valor de um estilo, basta salvar o arquivo CSS e atualizar (F5) a pgina, sem a necessidade de nenhuma alterao no arquivo HTML. Dentro do mesmo arquivo, pode haver a definio de layout de vrias tags, classes de forma que, com a abertura e fechamento das chaves {}, delimitam uma declarao de outra. 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.

254

Linguagens de Programao I

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.

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:
Unidade 9

255

Universidade do Sul de Santa Catarina

<html> <head> <style type=text/css> p.direita { text-align: right } p.centro { text-align: center } </style> </head> <body>

<p class=direita> Este pargrafo est alinhado 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:

256

Linguagens de Programao I

<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:
<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>

Acompanhe a visualizao:

Unidade 9

257

Universidade do Sul de Santa Catarina

Figura 9.7 Exemplo de tag de classe em tags diferentes.

Perceba que a definio de classes genricas, que pode ser utilizada em qualquer tag, necessita obrigatoriamente um ponto (.) antes do nome da classe. Essa metodologia bem interessante, pois existe a possibilidade de reaproveitamento de estilos, sempre que for necessrio utilizar a referida formatao. O critrio de nomenclatura das classes o seguinte:
Nome_da_tag.nome_da_classe Utilizado apenas para todas as tags definidas p.direta .nome_da_classe Utilizado em qualquer tag a que se queira aplicar a classe .centro

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. 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:

258

Linguagens de Programao I

<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 vermelha. </p> </body> </html>

Visualize:

Figura 9.8 Exemplo de tag de ID.

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>:

Unidade 9

259

Universidade do Sul de Santa Catarina

<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 vermelha porque no um pargrafo. </div> </body> </html>

A visualizao fica assim:

Figura 9.9 Exemplo de tag ID utilizada em outra tag no definida.

Se quisermos que a regra se aplique a qualquer tag que tenha o id=para1, basta escrev-la na forma seguinte:

260

Linguagens de Programao I

#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 sequncia de caracteres /*, depois o texto do comentrio e, no fim, escreva */ para terminar o comentrio. O exemplo seguinte mostra como se faz:
p { text-align: center; /* Isto um comentrio */ color: black; /* O MSIE 5 no reconhece os comentrios!!! */ font-family: arial } 261

Unidade 9

Universidade do Sul de Santa Catarina

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.
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 }

262

Linguagens de Programao I

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 }

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:

Unidade 9

263

Universidade do Sul de Santa Catarina

<html> <head> <style type=text/css> div { color: blue } </style> </head> <body> <div>O texto dos elementos &lt;div&gt; tem cor azul. <p> Este pargrafo est dentro de um elemento &lt;div&gt;. 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. Visualizao:

Figura 9.10 Exemplo de herana de estilos.

264

Linguagens de Programao I

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 &lt;div&gt; recebem uma linha de contorno vermelha (border) e texto com cor azul. <p> Este pargrafo est dentro de um elemento &lt;div&gt;. Ele herda a cor azul mas no herda a linha de contorno (border). </p> <div> Tal como o elemento &lt;div&gt; principal este elemento &lt;div&gt; recebe a sua prpria linha de contorno. </div> </div> </body> </html>

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.

Unidade 9

265

Universidade do Sul de Santa Catarina

Sntese
Nesta unidade, aprendemos a criar estilos para um documento HTML. Atravs da utilizao das folhas de estilo, voc pode definir desde 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. Apesar de os navegadores atuais 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:
Tag
<STYLE> <LINK> <DIV>

Descrio
Define estilos CSS estilos internos Define uma referncia para um estilo externo Insere uma seo no documento

266

Linguagens de Programao I

Atividades de autoavaliao
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.

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://pt-br.html.net/tutorials/css/> <http://www.htmlhelp.com/reference/css/structure.html> (CSS structure and rules) <http://www.maujor.com/> (CSS para web design) 267

Unidade 9

Universidade do Sul de Santa Catarina

<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)

Tambm existem outras propriedades de recursos mais avanados para a utilizao em folhas de estilos que podero ser encontradas em:

<http://www.linhadecodigo.com.br/artigo.aspx?ID=82>.

268

UNIDADE 10

Criao de Formulrios
Objetivos de aprendizagem

Criar um formulrio. Aprender 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

Universidade do Sul de Santa Catarina

Para incio de estudo


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.

270

Linguagens de Programao I

Seo 1 - Criando um formulrio


Um formulrio uma seo da pgina HTML que contm elementos os quais permitem ao leitor introduzir dados numricos, textos curtos, textos extensos, selecionar elementos em uma lista com vrias escolhas, responder facilmente com respostas do tipo sim ou no, selecionar rapidamente uma opo em um pequeno grupo, etc. Nesta unidade, voc aprender a criar layouts do formulrio A criao de um formulrio envolve, em geral, duas etapas independentes: 1) a criao do layout do formulrio; 2) a criao de um programa de script no servidor para processar as informaes que voc obtm a partir de um 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

271

Universidade do Sul de Santa Catarina

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:

pelos usurios;

POST - os dados inseridos fazem parte do corpo da mensagem enviada para o servidor. Transfere-se grande quantidade de dados e os mesmos no so visualizados GET - os dados inseridos fazem parte da URL associada consulta enviada para o servidor. Suporta at 128 caracteres, e os dados podem ser vistos pelos usurios na

URL.

Os formulrios podem conter qualquer formatao - pargrafos, listas, tabelas, imagens - exceto outros formulrios. Em especial, colocamos dentro da tag <FORM> as formataes para campos
272

Linguagens de Programao I

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. Normalmente, 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

273

Universidade do Sul de Santa Catarina

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. Todos os elementos do formulrio do suporte s configuraes das folhas de estilo (CSS). 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>

274

Linguagens de Programao I

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. 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. O exemplo seguinte mostra um formulrio simples com dois elementos input:

Unidade 10

275

Universidade do Sul de Santa Catarina

<FORM action=processar.php method=post> Primeiro nome: <INPUT type=text name=primeiro_nome><br> ltimo nome: <INPUT type=text name=ltimo_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 ideia 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>

Gera-se, assim, um campo deste tipo:

276

Linguagens de Programao I

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

277

Universidade do Sul de Santa Catarina

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>

A visualizao deste exemplo a seguinte:


278

Linguagens de Programao I

Figura 10.5 Exemplo de caixa de texto com campo escondido.

Em alguns casos, 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 conhecida 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

279

Universidade do Sul de Santa Catarina

<FORM> Endereo: <INPUT TYPE=TEXT SIZE=35> </FORM>

A visualizao a seguinte:

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, em nmero de caracteres. 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>

280

Linguagens de Programao I

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.
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

281

Universidade do Sul de Santa Catarina

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>

282

Linguagens de Programao I

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.
283

Unidade 10

Universidade do Sul de Santa Catarina

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.

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:

284

Linguagens de Programao I

<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.
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.

Vejamos qual o efeito produzido por esses atributos:

Unidade 10

285

Universidade do Sul de Santa Catarina

<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:

286

Linguagens de Programao I

<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 esta 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:

Unidade 10

287

Universidade do Sul de Santa Catarina

estao=1

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.

288

Linguagens de Programao I

repare que s se pode selecionar uma das opes dadas. Elas excluem-se mutuamente. Se o usurio escolhe, supostamente, feminino, receberemos como resultado:
Sexo=feminino

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 de 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=rdio name=sexo value=masculino> Masculino<br> <input type=rdio name=sexo value=feminino checked> Feminino </form>

Vejamos o efeito:

Figura 10.15 - Exemplo de boto de seleo selecionado.

Unidade 10

289

Universidade do Sul de Santa Catarina

Seo 5 - Caixas de validao


As caixas de validao (checkboxes) ou verificao devem ser usadas sempre que desejamos 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.
290

Linguagens de Programao I

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

291

Universidade do Sul de Santa Catarina

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 deste boto o seguinte:

Figura 10.18 - Exemplo de boto de envio.

Quando o usurio clicar sobre o boto Enviar, as respostas 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:

292

Linguagens de Programao I

<form name=entrada action=pgina2.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

293

Universidade do Sul de Santa Catarina

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 frequentemente. 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 ss 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 frequente 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.

294

Linguagens de Programao I

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. Voc deve agora constru-lo, para ver se realmente entendem bem os temas sobre formulrios.
Nome E-mail Cidade Sexo Homem Mulher Frequncia 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

295

Universidade do Sul de Santa Catarina

A seguir, tambm mostraremos o cdigo fonte deste formulrio, importante para o seu olhar, 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:

296

Linguagens de Programao I

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. Estudos mais avanados de Java Script sero abordados em outras disciplinas do curso. 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=boto1 value=Teste a Informao onClick=Enviar(this.form)> </form>
Unidade 10

297

Universidade do Sul de Santa Catarina

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:

298

Linguagens de Programao I

Figura 10.23 Resultado da ao do boto.

O estudo de Javascript no faz parte da nossa disciplina, por isso, seguem, abaixo, alguns links para voc aprofundar seu estudo: <http://www.javascript-tutorial.com.br/> <http://www.cm-braganca.pt/document/448112/503209.pdf> <http://www.mozilla.org/js/> <http://pt.wikipedia.org/wiki/JavaScript>

Sntese
Caro(a) aluno(a)! 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, entre eles: Javascript, Php, Asp, etc.

Unidade 10

299

Universidade do Sul de Santa Catarina

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

Atividades de autoavaliao
1. Que tal, agora, voc criar um formulrio? Suponha que voc ir fazer uma pesquisa sobre o usurio do seu site. Pergunte nome, endereo, e-mail, profisso, sexo, e sugir uma lista de opes do que ele gostaria de visualizar no site. No se esquea de incluir um campo para comentrios. Publique na ferramenta EXPOSIO do ambiente on-line.

Saiba mais
Aprofunde os contedos estudados nesta unidade, ao consultar as seguintes referncias:

<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)

300

Para concluir o estudo


Caro(a) aluno(a)! Conhecer HTML imprescindvel para qualquer profissional que pretenda trabalhar com desenvolvimento web, sendo este 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-lo(a) 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 a pgina, como por exemplo, Php, Asp, Javascript, etc. Por isso, desejamos que voc no pare seus estudos aqui! Siga 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.

Universidade do Sul de Santa Catarina

Sites de Referncia
<http://www.abcdohtml.hpg.ig.com.br/html_intro.htm>

<http://www.intergate.com.br/supor te/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/>

304

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 autoavaliao


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.

Universidade do Sul de Santa Catarina

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.

Unidade 8
1) Resposta Pessoal. 2) Resposta Pessoal.

Unidade 9
1) Resposta Pessoal.

Unidade 10
1) Resposta Pessoal.

308

Biblioteca Virtual
Veja, a seguir, os servios oferecidos pela Biblioteca Virtual aos alunos a distncia:

Pesquisa a publicaes online www.unisul.br/textocompleto Acesso a bases de dados assinadas www. unisul.br/bdassinadas Acesso a bases de dados gratuitas selecionadas www.unisul.br/bdgratuitas Acesso a jornais e revistas on-line www. unisul.br/periodicos Emprstimo de livros www. unisul.br/emprestimos Escaneamento de parte de obra1

Acesse a pgina da Biblioteca Virtual da Unisul, disponvel no EVA e explore seus recursos digitais. Qualquer dvida, escreva para bv@unisul.br

1 Se voc optar por escaneamento de parte do livro, o sumrio da obra ser enviado primeiramente para que voc possa escolher os captulos que deseja solicitar a reproduo. Lembre-se que para no ferir a Lei dos direitos autorais (Lei 9610/98), at 10 % do total de pginas de um livro podem ser reproduzidos.

Vous aimerez peut-être aussi