(7694 - 23745) Linguagens - de - Programacao - I PDF

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
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
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
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
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
(Secretria de Ensino)
Giane dos Passos
(Secretria Acadmica)
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 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
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
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

(Coord. Ext/DAD)
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
Relacionamento com o Mercado

Eliza Bianchini Dallanhol Locks
Walter Flix Cardoso Jnior
Gerncia de Produo
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
Gerncia Servio de Ateno

Integral ao Acadmico
James Marcel Silva Ribeiro (Gerente)
Gerncia de Logstica
Jeferson Cassiano A. da Costa

(Gerente)
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)
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
Patrcia Gerent Petry
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
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!
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.
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.
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.
12
Identificar as tags e a estrutura geral de uma pgina

HTML.
Elaborar um layout adequado para as suas pginas em

HTML.
Criar formulrios.
Verificar elementos e atributos HTML obsoletos.
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
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
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
Atividades obrigatrias
Demais atividades (registro pessoal)
16
unidade 1
Conceitos bsicos pertinentes

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

Caro(a) aluno(a), antes de voc iniciar seus estudos sobre
linguagem de programao I, vamos relembrar alguns conceitos
j estudados.
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.
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.
Seo 1 - O que a Internet

Muito provavelmente, voc j estudou a internet. Antes de iniciar
os estudos, escreva aqui: O que voc entende por internet?
18
Existem muitos termos que tentam definir a Internet.

Superestrada da informao, preferem os polticos. Rede de
redes, insistem os cientistas. O certo que cada um desses
grupos prefere ver a rede segundo seus prprios interesses. Para
os polticos, uma nova fronteira de construo e investimentos
coletivos um desafio. J os cientistas, rigorosos em suas
definies, enxergam a virtude da Internet em conectar
computadores de qualquer tipo em todo o globo.
As vises distintas da rede no param por a. H quem veja
na Internet uma perigosa fonte de pornografia. As indstrias
sonham com o dia em que podero vender diretamente aos
consumidores, sem nenhum intermedirio. Empresas de
comunicao esperam o meio que rena rdio, TV e televiso em
um mesmo sistema de produo. Pais de estudantes no exterior
matam as saudades pelo monitor, e paqueras virtuais acontecem a
toda hora, em cada canto da rede.
A Internet tudo isso ao mesmo tempo e, com certeza, muito
mais. A rede o que cada pessoa quiser que ela seja. Em toda
a histria da Internet, foram os usurios que inventaram novos
recursos e novas aplicaes. um terreno frtil para boas ideias,
e, ao mesmo tempo, perigoso, quando utilizado para fins ilcitos.
Unidade 1
19
Isso tudo porque a Internet uma inveno muito simples.

Nada mais do que uma forma fcil e barata de fazer com que
computadores distantes possam se comunicar. A partir da, a
revoluo est nas mos das pessoas.
Cada usurio recebe uma identificao nica, conhecida
como endereo. Com esse endereo, ele pode se comunicar,
enviando mensagens para outras pessoas. o que se chama
de correio eletrnico. Graas aos esforos de instituies como
Universidades e empresas ligadas pesquisa, dispostas a investir
dinheiro e pessoal para criar e manter os pontos principais da
rede - os servidores (computadores de alto desempenho) -
possvel conseguir programas de graa e consultar bancos de
dados pblicos.
Hoje, com o sucesso da Internet, toda empresa se v na obrigao
de colocar a cara na rede. Os servios se multiplicam. Os bancos
oferecem todas as suas operaes pelo computador. Notcias so
distribudas imediatamente. Pizzarias aceitam pedidos. Livrarias
e lojas de discos vendem seus produtos.
No entanto boa parte do material da rede 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
O navegador usado para

exibir pginas da web e outras
informaes disponveis na world
wide web e navegar por elas.
20
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
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.
Um exemplo de pginas
que utilizam hipertextos
pode ser visualizados em:
<http://pt.wikipedia.org/
wiki/Internet>. Acesso em
1mar.2010.
A web um sistema de informao em hipertexto. Os sistemas de

ajuda on-line utilizam hipertextos para apresentar informaes.
A figura 1.1 a seguir mostra um diagrama simples de como
funciona esse tipo de sistema.

Figura 1.1 Sistema de ajuda on-line.
Unidade 1
21
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
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
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
GUI = Interface Grfica com o Usurio
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.
24
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
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
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.
Unidade 1
27
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
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
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
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
PageBreeze: http://www.pagebreeze.com/
Web writer: http://www.webwriter.dk/english/index.htm
Introduo linguagem HTML

A linguagem HTML fruto do casamento dos padres
HyTime e SGML. Estes padres so especificados a seguir.
HyTime - Hypermedia/Time-based Document

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

elementos so as etiquetas (doravante chamadas de tags) de
HTML, que so os comandos de formatao da linguagem, 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
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
Sintaxe
Exemplo
Tag
<tag>
<BR>
Texto
<tag>texto</tag>
<B>texto</B>
Atributo
<tag NOME_ATRIBUTO=valor>texto</tag>
<A HREF=url>texto</A>
Nas prximas unidades, voc estudar outros elementos do

HTML, que lhe possibilitaro, com alguma imaginao, fazer
um bom website.
At l!
34
Atividades de 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
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

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

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

Nos exemplos a seguir, voc ir verificar vrios trechos de texto
marcados por cdigos colocados entre os caracteres < e >. Esses
cdigos, chamados de tags, so responsveis pela marcao do
texto em funo de seu papel dentro do documento. O ttulo
principal de um documento, por exemplo, pode ser marcado
com as tags <b> e </b> (coloca o texto em negrito), enquanto os
pargrafos so separados pela tag <P>. Existem dois tipos de
tags. Algumas so formadas aos pares, indicando o incio e o
fim do trecho afetado, como o par <b> e </b>. 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
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
<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> ...
</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
de uso correto da tag <HEAD>:

<HTML>
<HEAD>

<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
Campo <META>
Alm do ttulo, <HEAD> contm outras informaes de
importncia para os robs de pesquisa, indicadas nos campos
<META>.
Os campos <META> tm dois atributos principais:
NAME ,
indicando um nome para a informao;
HTTP-EQUIV,
que faz uma correspondncia com campos

de cabealho do protocolo HTTP; a informao deste
campo pode ser lida pelos navegadores e provocar
algumas aes.
Os atributos so partes extras das tags da HTML que

contm opes ou outras informaes sobre a tag em si.
A Sintaxe refere-se s regras para

a construo de um comando ou
instruo.
Acompanhe a sintaxe seguinte, como modelo de uso dos

atributos <META> (NAME e HTTP-EQUIV):
<HEAD>
<TITLE>Ttulo do Documento</TITLE>
<META NAME=nome CONTENT=valor>
<META HTTP-EQUIV=nome CONTENT=valor>
</HEAD>
42
Um documento, por exemplo, pode ter as seguintes informaes:
<HEAD>
<META HTTP-EQUIV=content-type CONTENT=text/html; charset=iso-8859-1>
<TITLE>Ttulo da Janela</TITLE>
<META NAME= Author CONTENT=Patrcia>
<META NAME=Description CONTENT=Livro de Linguagem de Programao I>
<META NAME=KeyWords CONTENT=HTML, WWW, Web, Internet>
<LINK REL=stylesheet HREF=folhasestilos.css>
</HEAD>
Alguns valores dos atributos META NAME so inseridos

automaticamente por alguns editores, por exemplo: Author. Os
campos Description e KeyWords ajudam a classificao da pgina
em algumas ferramentas de busca. Essas informaes no tm
qualquer efeito na apresentao da pgina, mas servem como uma
explicao ou documentao sobre as informaes contidas nela.
H poucos valores para META HTTP-EQUIV em uso. O
mais comum content-type, que indica o conjunto de caracteres
usados na pgina. Essa informao ajuda o navegador a exibir
corretamente os caracteres especiais que estiverem presentes no
texto. Um exemplo de uso comum do atributo HTTP-EQUIV
promover a mudana automtica de pginas, atribuindo-lhe o
valor Refresh. Veja este exemplo:
<HEAD>
<TITLE> ... </TITLE>
<META HTTP-EQUIV=Refresh CONTENT=segundos; URL= pagina.html>
</HEAD>
Unidade 2
43
Onde diz:
pagina.html : a pgina a ser carregada
automaticamente;
segundos : o nmero de segundos passados at que a
pgina indicada seja carregada.
Como comentado no exemplo, o efeito interessante, mas para

que serve? Se no 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
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
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
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
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
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
Unidade 2
49
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
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
deixa a letra maior que o <H2> e assim por diante. Veja o

seguinte exemplo:
<H1>Este um cabealho de nvel 1</H1>

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.
52
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?
<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
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
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
Verifique se o resultado no seu navegador ficou prximo deste:
Figura 2.5 Exemplo de uso de pargrafo.
Acompanhe o exemplo 2, que combina a insero de linha entre

pargrafos e quebras de linha:
Pargrafo 1;<br> linha 1 do pargrafo 1, <br>
linha 2 do pargrafo 1.<P>Pargrafo 2;<br>
linha 1 do pargrafo 2, <br>
linha 2 do pargrafo 2.
O resultado da marcao acima no navegador :
Figura 2.6 Exemplo de pargrafo e quebra de linha.
56
Veja o exemplo 3 sobre o alinhamento de pargrafos, alm de

insero de linhas entre pargrafos e quebra de linha:
<P ALIGN=CENTER>Assim como os trens, as boas 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
Observe o exemplo 1:
<HR SIZE=8 ALIGN=center WIDTH=75%>
Onde:
Size: configura a espessura da linha, no exemplo insere uma
linha de largura de 8 pixels.
Width: configura a largura da linha (pode ser em porcentagem
ou em pixels). No exemplo, insere uma linha que ocupa 75% do
espao horizontal disponvel.
Align: determina o posicionamento da linha.
Noshade: indica sem efeito tridimensional.
Figura 2.8 Visualizando uma linha horizontal centralizada no navegador.
Considere o exemplo 2:
<HR WIDTH=30% ALIGN=RIGHT NOSHADE>
Com estes comandos, voc insere uma linha de comprimento

30% (do espao horizontal disponvel), alinhada direita, sem
efeito tridimensional. Verifique o resultado no seu navegador.
58
Figura 2.9 Exemplo de linha horizontal.
Tambm veja o exemplo 3:
<HR SIZE=70 WIDTH=7 ALIGN=LEFT>
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
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
<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
Figura 2.12 - Exemplo de alinhamento de bloco de texto centralizado.
Margem
Outro controle sobre o alinhamento dos elementos da pgina
pode ser conseguido atravs de mudana, de configurao, de
margem. O texto sempre comea a uma determinada distncia
da janela do navegador (um pouco diferente em cada navegador).
s vezes, ser necessrio aumentar essa margem e fazer com
que o texto comece mais para dentro da pgina. O par de tags
<BLOCKQUOTE> e </BLOCKQUOTE> serve para aumentar
a margem. O efeito dessa tag pode ser acumulado para conseguir
margens maiores.
Veja os exemplos:
<BLOCKQUOTE>Texto com mais margem</BLOCKQUOTE>

<BLOCKQUOTE><BLOCKQUOTE>Texto com mais margem
ainda</BLOCKQUOTE></BLOCKQUOTE>
62
O resultado no seu navegador parece-se com este da figura abaixo?
Figura 2.13 Exemplo de configurao de margem.
A tag <BLOCKQUOTE> utilizada, principalmente, na criao

de citaes. Geralmente, as citaes so destacadas em relao ao
restante do texto atravs do recuo.
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 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.
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.
Unidade 2
63
Acompanhe este exemplo:
<PRE>
Este texto est pr-formatado. A fonte monoespaada e
as entradas de pargrafo, assim como os espaos adicionais,
so respeitadas.
Neste caso, a margem esquerda foi aumentada em cinco
caracteres.</PRE>
O texto normal recebe fonte proporcional e ignora a
presena de espaos a mais no meio do texto. Entradas de
pargrafos adicionais tambm so ignoradas.
Vamos ver o resultado no navegador?
Figura 2.14 Exemplo de fonte monoespaada.
64
Sntese
Como voc aprendeu, a HTML uma linguagem de marcao
de texto usada para descrever documentos de hipertexto na
WWW, que descreve uma pgina e o seu contedo, no a sua
aparncia.
Nesta unidade, voc tambm aprendeu a estrutura bsica de um
documento HTML, como criar e visualizar arquivos em HTML
simples. Aprendeu ainda a usar as tags de HTML apresentadas
na tabela abaixo.
TAG
USO
<HTML>...</HTML>
Toda a pgina em HTML
<HEAD>...</HEAD>
O cabealho, o prlogo da pgina em HTML
<BODY>...</BODY>
Todo o restante do contedo da pgina em HTML
<TITLE>...</TITLE>
O ttulo da pgina
<H1>...</H1>
Ttulo de nvel 1
<H2>...</H2>
Ttulo de nvel 2
<H3>...</H3>
Ttulo de nvel 3
<H4>...</H4>
Ttulo de nvel 4
<H5>...</H5>
Ttulo de nvel 5
<H6>...</H6>
Ttulo de nvel 6
<BR>
Nova linha
<P>
Pargrafo
<CENTER>...</CENTER>
Alinhar o texto ao centro
<PRE>
Pr-formatao
<BLOCKQUOTE>...</
BLOCKQUOTE>
Margem
<HR>
Linha Horizontal
<DIV>...</DIV>
Alinhamento de bloco de texto
Unidade 2
65
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
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
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

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:
70
a lista inteira delimitada pelas tags de abertura e

fechamento referentes ao tipo da lista;
cada item da lista tem sua prpria tag.
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.
Listas ordenadas so
aquelas em que cada item
tem um nmero.
<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>
Visualize o resultado em seu navegador:
Figura 3.1 Exemplo no navegador de uma lista ordenada.
Unidade 3
71
Utilize listas numeradas somente quando quiser

indicar que os elementos esto ordenados, ou seja,
nos casos em que os itens devero ser apresentados
nessa ordem especfica.
As listas numeradas tm vrios atributos que voc pode utilizar

para personalizar sua apresentao no navegador. Esses atributos
permitem controlar vrias caractersticas das listas, incluindo o
esquema de numerao a ser usado, e a partir de que nmero se
vai iniciar a contagem (se voc no quiser iniciar em 1).
Voc pode personalizar listas ordenadas de duas maneiras:
como elas so numeradas; e
em que nmero a lista comea.
A HTML fornece o atributo TYPE, que pode assumir cinco valores para definir
o tipo de numerao a ser usado na lista:
1 - especifica que os algarismos arbicos padres devem

ser usados para numerar a lista (isto : 1, 2, 3, 4, etc.);
a - especifica que as letras minsculas devem ser usadas
para numerar a lista (isto : a, b, c, d, etc.);
A - especifica que as letras maisculas devem ser usadas
para numerar a lista (isto : A, B, C, D, etc.);
i - especifica que os algarismos romanos minsculos devem
ser usados para numerar a lista (isto : i, ii, iii, iv, etc.);
I - especifica que os algarismos romanos maisculos
devem ser usados para numerar a lista (isto : I, II, III,
IV, etc.).
Os tipos de numerao podem ser especificados na tag <OL>,

como no exemplo a seguir, que utiliza o padro TYPE=a.
72
<OL TYPE=a>
<LI>item de uma lista numerada, que pode ser to grande quanto se queira,
sem que seja necessrio preocupar-se com a formatao das margens de texto
</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
Veja o exemplo a seguir:

<OL TYPE=a START=3>
<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
</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
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
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
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
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

<DD>definio
</DL>
Considere a seguinte visualizao:
78
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
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
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>

<DD>definio
<OL>

<UL>

<LI>item de uma lista
</UL>
</OL>

<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
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
Um exemplo deste caso:

<UL>
<LI>Documentos bsicos
<LI>Documentos avanados
<UL>

<LI>formulrios
<UL>
<LI>CGI
</UL>
<LI>contadores
<LI>relgios
</UL>
<LI>Detalhes sobre imagens
</UL>
Veja o resultado no navegador:
Observe que estas mesmas listas tambm no apresentariam

numerao em formato 1.1, 1.2, etc., quando ordenadas e
compostas:
1. Documentos bsicos
2. Documentos avanados
Unidade 3
83
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
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
Seo 2 - Comentrios
Voc pode incluir comentrios em pginas em HTML para
descrever a prpria pgina ou para fornecer alguma indicao
de seu status. O texto inserido ignorado, quando o arquivo em
HTML analisado. Os comentrios nunca so apresentados na
tela por isto so comentrios. Eles tm um formato semelhante
ao seguinte:

Em verses mais atuais da HTML, voc pode comentar tambm

vrias linhas assim:

Aqui tem um exemplo de comentrio!!
Ele no apareceu escrito!!
Visualize o exemplo acima no seu navegador:
Figura 3.13 - Exemplo de comentrio.
86
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
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
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
Unidade 3
89
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
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
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
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
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:
94
Nome do caminho
Descrio
HREF=arquivo.html
Arquivo.html est localizado na pasta atual.
HREF=docs/arquivo.html
Arquivo.html est localizado na pasta (ou diretrio) docs e a

pasta docs est localizada na pasta atual.
HREF=../arquivo.html
Arquivo.html est localizado na pasta situada um nvel acima

da pasta atual (pasta ou diretrio superior).
HREF=../../docs/arquivo.
html
Arquivo.html est localizado na pasta docs, sendo que esta

pasta est localizada dois nveis acima da pasta atual.

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
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
<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
Sintaxe
Exemplo
Ordenada
<OL>contedo</OL>
<OL>
<LI>item</LI>
</OL>
<UL>contedo</UL>
<UL>
<LI>item</LI>
</UL>
<DL>contedo</DL>
<DL>
<DT>termo</DT>
<DD>definio</DD>
</DL>
No Ordenada
Definio
Voc tambm aprendeu como criar vnculos de uma pgina

outra na internet, atravs da tag <A> com o atributo HREF.
Unidade 3
97
Tipo de vnculo
Sintaxe
Exemplo
Localizao
HREF=LOCALIZAO
<A HREF=http://link.da/pagina.html> texto</A>
Abrir Nova
Janela
TARGET=_BLANK
<A HREF=http://link.da/pagina.html TARGET=_

BLANK>texto</A>
Mail
HREF=mailto:MAIL
<A HREF=mailto:mail@sub.dominio> texto</A>
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
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

n
Especificar o aspecto visual dos caracteres.
Incluir caracteres especiais.
Alterar a fonte e o tamanho da fonte.
Sees de estudo
Seo 1 Estilos de Caractere
Seo 2 Caracteres Especiais
Seo 3 Formatao do Texto
Seo 4 As Tags <blink> e <marquee>
Seo 5 Endereos

Voc j aprendeu os conceitos bsicos da HTML, que abrangem
vrios elementos bsicos da pgina e vnculos. Com esse
conhecimento, voc est agora preparado(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
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
Tabela 4.1 - Estilos Lgicos
Tag de
Estilo lgico
Definio
Exemplo
<CITE>
Para ttulos de livros, filmes e

citaes curtas.
<CITE>Assisti Guerra nas Estrelas umas

oito vezes!</CITE>
<P> Este trecho foi citado no livro X
<CITE>(Silva, 2006)</CITE></P>
<CODE>
Para indicar trechos de cdigo de

programas.
<CODE>for (x=0); cl &&(!feof(stdin));

x++)); </CODE>
<CODE>#include teste.h#</CODE>
<DFN>
Indica definio de uma palavra ou

expresso. Em geral apresenta o
texto em itlico.
<DFN>CERN: Centre d`studes et

Recherches Nucleaires </DFN>
<EM>
nfase. Indica que os caracteres

devero ser enfatizados de alguma
forma. Em geral, apresentada em
itlico.
preciso pesquisar <EM>muito</EM>

para encontrar o termo exato.
<KBD>
Indica uma entrada via teclado,

ou seja, o texto a ser digitado pelo
usurio.
Para ler mensagens recebidas, digite

<KBD> pine -i </KBD>
Indica uma sequncia de caracteres,

por exemplo, uma mensagem de
erro ou um resultado ou um texto
de exemplo. Semelhante a <CODE>.
O resultado do primeiro applet :

<SAMP> Hello, World! </SAMP>
Forte nfase, mostrada

normalmente em negrito.
Antes de enviar um e-mail, <STRONG>

confira o campo Subject:! </STRONG>
Indica variveis ou valores

que o usurio dever escrever.
Geralmente mostrado em itlico ou
sublinhado.
No campo Login, escreva <VAR> guest.

</VAR>
<SAMP>
<STRONG>
<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
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
Definio
Exemplo
<B>
Negrito (Quando disponvel

em alguns navegadores, pode
aparecer sublinhado).
<B>Texto em negrito</B>
<I>
Itlico.
<I>Texto em itlico</I>
<TT>
Fonte de mquina de escrever

com espaamento uniforme
(monoespaada).
<TT>Texto monoespaado </TT>
<U>
Sublinhado.
<U>Texto sublinhado</U>
Tachado.
<S>Texto Tachado</S>
Fonte maior que a do texto ao

redor.
Testando a <BIG>fonte</BIG> maior.
Fonte menor.
Testando a <SMALL> fonte </SMALL>

menor.
<SUB>
Subscrito.
Frase em estilo ndice, como em H2O.
<SUP>
Sobrescrito.
Frase em estilo expoente, como em Km2.
<STRIKE>
ou <S>
<BIG>
<SMALL>
Fonte: LEMAY, 1998.
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
<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
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.
ASCII (American Standard

Code for Information
Interchange) um
conjunto de cdigos
para o computador
representar nmeros,
letras, pontuao e outros
caracteres.
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.
Unidade 4
105
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é
Ou
Café
Acompanhe como fica esta palavra em seu navegador:
Figura 4.2 - Exemplo de visualizao do uso de caracteres especiais.
No exemplo acima, eacute e #233 equivale ao 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
<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<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
Caractere
<
<
Unidade 4
107
ISO Latin1: ASCII com extenses para

idiomas Europeus
108
>
>
&
&
"
Outras sequncias de escape suportam caracteres ISO Latin1.

Aqui est uma tabela com os caracteres mais utilizados em
portugus:
Entidade
Caractere
á
â
à
ã
ç
é
ê
í
ó
ô
õ
ú
ü
Entidade
Caractere
Á
Â
À
Ã
Ç
É
Ê
Í
Ó
Ô
Õ
Ú
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:
© para o smbolo ;
® para ; e
§ para .
Unidade 4
109
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
<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
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=1>Texto com FONT SIZE=1</FONT>
112
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
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
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>
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
<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
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
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
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
Definio
Exemplo
BGCOLOR
cor de fundo
BGCOLOR =#FFFFFF
BEHAVIOR
comportamento do texto
BEHAVIOR =scroll ou slide

ou alternate
DIRECTION
direo do texto
DIRECTION =right ou left
LOOP
quantidade de vezes de repetio

do texto
LOOP =nombre ou infinite
HSPACE
espao entre
o texto e a marquee
HSPACE =10
VSPACE
espao entre
as linhas da marquee
VSAPCE =5
HEIGHT
altura em pixels
HEIGHT =200
WIDTH
largura em pixels
WIDTH =300
Unidade 4
119
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
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
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
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
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

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
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
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
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
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
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
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
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
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
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=
Definio
top
alinha a parte superior da imagem com a parte superior

da linha.
middle
alinha o centro da imagem com a parte central da linha.
bottom
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
<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:
134
<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:
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=
Definio
right
alinha uma imagem na margem direita.
left
alinha uma imagem na margem esquerda.
Unidade 5
135
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:
<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:
Para ter duas imagens, uma em cada margem, numa mesma

136
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
Visualizao:
Note que o texto est contornando as imagens, mas somente at

determinado ponto:<BR CLEAR=all>. A partir deste ponto, o
texto jogado para a prxima margem livre, em qualquer um dos
lados da janela.
HSPACE e VSPACE
Com a capacidade de promover o retorno automtico do texto
ao redor de uma imagem, possvel que voc queira tambm
ajustar o espao existente ao redor dessa imagem. Voc pode
controlar o espao em volta da imagem, colocando o valor
em pixels da margem desejada. possvel definir as margens
separadamente, ou em conjunto. Os atributos HSPACE e
VSPACE (introduzidos na HTML 3.2) permitem isso.
O atributo VSPACE controla o espao acima e abaixo da
imagem. Ou seja: os textos que forem escritos ao redor da
imagem no ficaro grudados nela. A sintaxe a seguinte:
<IMG SRC=imagem VSPACE=espaovertical>
O atributo HSPACE controla o espao esquerda e direita

da imagem. Ou seja: os textos que forem escritos ao redor da
imagem no ficaro grudados nela. A sintaxe a seguinte:
<IMG SRC=imagem HSPACE=espaohorizontal>
138
Esses atributos surgiram para melhorar ainda mais a apresentao

das imagens junto com os textos. Tambm so conhecidos como
atributos de moldura.
O efeito desses atributos pode ser percebido nos textos a seguir.
No primeiro texto, as imagens no tm atributos de moldura (
fcil notar como o texto fica grudado na imagem):
...e agora voc pode escrever<IMG align=left SRC=imagem.
jpg alt=imagem WIDTH=138 HEIGHT=65> vontade entre as
imagens! O texto que voc desejar, sem a linha ir para abaixo da
imagem...... ter um texto posicionado no ponto em que a margem
<IMG align=right SRC=imagem.jpg alt=imagem WIDTH=110
HEIGHT=71>direita fica livre, com ou no ponto em que a margem
esquerda fica livre, com. Mas agora eu quero interromper essa linha e
jogar abaixo das imagens.
Veja o resultado do cdigo acima no seu navegador:
Neste segundo texto so usadas, respectivamente, as seguintes

formataes:
<IMG align=left SRC=imagem.jpg alt=imagem
WIDTH=138 HEIGHT=65 VSPACE=30>
e
<IMG align=right SRC=imagem.jpg alt=imagem
WIDTH=110 HEIGHT=71 HSPACE=40>
Unidade 5
139
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:
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
O resultado no navegador do Internet Explorer este:
Cada um desses atributos (HSPACE e VSPACE) adiciona

espao nas duas faces da imagem (em cima e em baixo e direita
e esquerda). Portanto no h como definir uma margem maior
apenas esquerda ou somente na parte inferior.
Seo 2 - Referncia de hipertexto com imagem

Uma imagem pode funcionar como um vnculo? evidente que
sim! Se voc incluir a tag <IMG> entre as partes de abertura
e de fechamento de uma tag de vnculo (<A>), essa imagem
funcionar como um ponto ativo (que pode ser selecionado com
um clique) referente ao prprio vnculo. A sintaxe basicamente
a seguinte:
<A href=URL>
<IMG src=nome da imagem >
</A>
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
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
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
Unidade 5
143
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:
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
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
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
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
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
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
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
Sintaxe
Exemplo
Localizao
SRC=localizao
<IMG SRC=linkdaimagem.tipo>
Comprimento
WIDTH=tamanho (em pixels

ou % da pgina)
<IMG SRC=linkdaimagem.tipo WIDTH=10>
Altura
HEIGHT=tamanho (em pixels

ou % da pgina)
<IMG SRC=linkdaimagem.tipo HEIGHT=20>
Borda
BORDER=tamanho (em
pixels)
<IMG SRC=linkdaimagem.tipo BORDER=2>
Alternativa
ALT=texto (usa-se em caso de

no aparecer a imagem)
<IMG SRC=linkdaimagem.tipo ALT=Minha Foto>
Alinhamento
ALIGN=tipo (o modo como

a imagem ser posicionada
verticalmente em relao ao
texto existente ao redor)
<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
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
Definir tabelas em HTML.
Criar legendas, clulas de cabealho e de dados.
Modificar o alinhamento da clula.
Criar clulas que ocupam vrias linhas ou colunas.
Trabalhar com cores nas tabelas.
Elaborar tabelas nos seus documentos da web.
Sees de estudo
Seo 1 Elementos bsicos de tabelas
Seo 2 Alinhamento da tabela e das clulas
Seo 3 Dimenses da tabela
Seo 4 Cor em tabelas

As tabelas so construes avanadas em HTML, que permitem
a voc organizar um texto, imagens e outro tipo de contedo
HTML em linhas e colunas, com ou sem bordas. Elas podem
ser usadas no apenas para apresentar dados em um formato
tabular, mas tambm para a definio do layout da pgina e para
o controle do posicionamento dos vrios elementos HTML em
uma pgina. As tabelas tornaram-se to conhecidas que a maioria
dos principais navegadores hoje oferece suporte para esse recurso.
A formatao de tabelas foi adotada bem antes de sua incluso
na definio de HTML. A manipulao de tabelas, mesmo
em editores, trabalhosa. A maior diferena entre tabelas em
HTML e em editores como o MS Word, entretanto, o fato das
tabelas em HTML serem definidas apenas em termos de linhas,
e no de colunas. Mas 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
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
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
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
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>
</TR>
</TABLE>
A visualizao fica assim:
Figura 6.2 Exemplo de visualizao de tabela com legenda por linha.
158
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
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
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
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
O alinhamento pode ser assim resumido no quadro abaixo:

Alinhamento
Horizontal
Alinhamento
Vertical
ALIGN=LEFT
ALIGN=CENTER
ALIGN=RIGHT
VALIGN=TOP
VALIGN=MIDDLE
VALIGN=BOTTOM
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
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
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=RIGHT,
VALIGN=MIDDLE
ALIGN=LEFT,
VALIGN=BOTTOM
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
Center
center
center
TD ALIGN=right
TD VALIGN=top
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>

</TR>
</TABLE>
166
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>
</TR>
<TR>

</TR>
</TABLE>
Observe no seu navegador:
Figura 6.9 Exemplo de clula expandida ou mesclada por coluna.
Unidade 6
167
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
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>


</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
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:
CELLSPACING:
para definir a margem dentro das clulas.
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>
</TR>
<TR>

</TR>
</TABLE>
170
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
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
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
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
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
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
Cada cor de fundo anula a cor de fundo do elemento em que est

contida. O fundo de uma tabela, por exemplo, anula o fundo da
pgina; o fundo de uma linha anula o fundo da tabela; e as cores
das clulas anulam todas as outras cores.
Podemos colocar cor de fundo em clulas especficas da tabela.
Verifique o exemplo a seguir:
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10>

<TR>

<TD BGCOLOR=#E1FFD9>janeiro</TD>
<TD>fevereiro</TD>
<TD BGCOLOR=#E1FFD9>maro</TD>
</TR>
<TR>

<TD>abril</TD>
<TD BGCOLOR=#E1FFD9>maio</TD>
<TD>junho</TD>
</TR>
</TABLE>
Figura 6.21 Exemplo do uso de cores de fundo em clulas alternadas.
Unidade 6
177
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.
<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
<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
<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
Sntese
Para melhor auxiliar voc nos seus estudos, segue abaixo uma
sntese das tabelas com os atributos de tabela, coluna e linha:
Sintaxe
Definio
<TABLE>...</TABLE>
define a tabela
<CAPTION>...</CAPTION>
define o ttulo da tabela
<TR>...</TR>
delimita uma linha
<TH>...</TH>
define um cabealho para colunas

ou linhas (dentro de <TR>)
<TD>...</TD>
delimita um elemento ou clula

(dentro de <TR>)
Eis um resumo para a tag <TABLE>:

Tipo
Sintaxe
Exemplo
Alinhamento
ALIGN=LEFT|RIGHT|CENTER
<TABLE ALIGN=CENTER>texto</TABLE>
Borda
BORDER=TAMANHO (em pixels)
<TABLE BORDER=1>texto</TABLE>
Comprimento
WIDTH=TAMANHO (em pixels ou

% da pagina)
<TABLE WIDTH=20%>texto</TABLE>
Altura
HEIGHT=TAMANHO (em pixels ou

<TABLE HEIGHT=20%>texto</TABLE>
% da pagina)
Cor de fundo
BGCOLOR=COR
<TABLE BGCOLOR=blue>texto</TABLE>
Cor da borda
BORDERCOLOR=COR
<TABLE BORDERCOLOR=orange>texto</TABLE>
Cor da borda
escura
BORDERCOLORDARK=COR
<TABLE BORDERCOLORDARK=red>texto</TABLE>
Cor da borda clara BORDERCOLORLIGHT=COR
Unidade 6
<TABLE BORDERCOLORLIGHT=yellow>texto</TABLE>
181
Para a tag <TR>:

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

Tipo
Sintaxe
Exemplo
Alinhamento
ALIGN=LEFT|RIGHT|CENTER e
VALIGN=TOP|MIDDLE|BOTTOM
<TD ALIGN=CENTER>texto</TD>
Colunas que
ocupa
COLSPAN=NMERO
<COLSPAN=2>texto</TD>
Linhas que
ocupa
ROWSPAN=NMERO
<ROWSPAN=2>texto</TD>
Cor de fundo
BGCOLOR=COR
<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.
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
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
<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
Construir Frames.
Utilizar os atributos de FRAMESET.
Utilizar os atributos para FRAME.
Definir a janela alvo atravs do atributo TARGET.
Sees de estudo
Seo 1 Links com frames
Seo 2 Composio com frames
Seo 3 Atributos de FRAMESET
Seo 4 Atributos de FRAME
Seo 5 Tag NOFRAMES

A especificao de frames em HTML 3.2 ainda est em
andamento, e nem todos os navegadores oferecem suporte a eles.
O Netscape foi o primeiro a implementar 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.
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
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.
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:

FRAMESET - responsvel pela diviso do documento em
campos separados;
elemento
FRAME - que indica as pginas que devem ser carregadas

em cada uma dessas subdivises.
elemento
O documento que implementa frames, em que se define a

estrutura das janelas, conhecido como Frame Document.
nele que se estabelece o nmero de janelas desejado e a
sua distribuio na tela. Dentro de um Frame Document,
as marcaes <BODY> e </BODY> so substitudas por
<FRAMESET> e </FRAMESET>.
Unidade 7
187
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
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>
</HTML>
Assim, o resultado apresentado no navegador ser:
Unidade 7
189
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
<HTML>
<HEAD><TITLE>Assunto X</TITLE></HEAD>
<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>
<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
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
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):
limpa os frames que estiverem ativos,

apresentando a pgina de destino na tela inteira.
TARGET="_top
abre uma nova janela do browser para

apresentar a pgina de destino.
TARGET="_blank
Seo 2 - Composio com Frames

Como voc j observou, a formatao FRAMESET tem
atributos que definem a diviso do espao da janela do browser
em colunas ou linhas. Podemos utilizar uma combinao
de framesets para criar diversos modos de apresentao do
contedo de um site.
Antes de ver algumas composies, lembre-se de que os pontoschave para o mecanismo dos frames so estes, mostrados no item
anterior:
nomeao dos frames; e
declarao dos targets dos links, que definem o frame no

qual as pginas de destino sero mostradas.
Embora quase todos os editores WYSIWYG de HTML 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
Veja como montar dois frames em coluna:

<FRAMESET COLS=x, y>
<FRAME SRC=col1.html>
Figura 7.5 Exemplo de
FRAME em coluna.
</FRAMESET>
Como montar dois frames em linha:

<FRAMESET ROWS=x, y>
<FRAME SRC=lin1.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:
Figura 7.7 - Exemplo de
dois FRAMES em coluna e dois
FRAMES em linha.
</FRAMESET>
</FRAMESET>
194
Para montar a estrutura abaixo, crie primeiro dois frames em

linha e componha a segunda linha com dois frames em coluna:

Figura 7.8 - Exemplo de dois
FRAMES em linha e dois
FRAMES em coluna.
</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:
Unidade 7
195
(ROWS=valor, valor, valor...)
Cada valor poder ser:
Numrico em pixels
(ROWS=30,50)
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.
Percentual
(ROWS=25%,25%,50%)
Corresponde a um valor percentual do

tamanho da pgina, sempre somando um
total de 100%. Esse o mtodo mais simples.
Relativo
(ROWS=*,*,2*)
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.
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
<HTML>
<HEAD>
<TITLE> Documento Frame</TITLE>
</HEAD>
<FRAMESET ROWS=30%, 40%, 30%>
<FRAME SRC=exemplo1.html>
<FRAME SCR=exemplo2.html>
</FRAMESET>
</HTML>
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
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>
</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
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>
</HEAD>
<FRAMESET COLS=30%, 40% ,30%>
</FRAMESET>
</HTML>
Vejamos o resultado do cdigo HTML acima, no seu navegador.
Unidade 7
199
Figura 7.11 Exemplo da tela dividida em 3 FRAMES em coluna.
Aqui se divide a tela em duas verticais:

<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS=200,*>
</FRAMESET>
</HTML>
Vejamos o resultado no seu navegador:
Figura 7.12 Exemplo da tela dividida em 2 FRAMES em coluna.
200
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>
</HEAD>

<FRAMESET ROWS=30%,70%>

<FRAMESET COLS=50%,50%>
</FRAMESET>
</FRAMESET>
</HTML>
Unidade 7
201
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
Podemos testar o exemplo a seguir utilizando o atributo

FRAMEBORDER no FRAMESET:
<HTML>
<HEAD>
</HEAD>
<FRAMESET COLS=200,*
FRAMEBORDER=no>
</FRAMESET>
</HTML>
Veja o resultado do frame sem as bordas no seu navegador:
Figura 7.14 Exemplo de FRAME sem borda.
Unidade 7
203
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
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
NAME
Esse atributo utilizado para associar um nome a uma das
divises do Frame Document. Deve ser usado quando se
deseja especificar onde (em que janela) documentos devem ser
carregados. um atributo opcional. Por padro, os frames no
tm nome, mas, quando acontece de se estabelecerem nomes
para janelas, estes devem comear com caractere alfanumrico. A
sintaxe a seguinte:
(NAME=nome)
<FRAME SRC=inicial.html NAME=navega>
MARGINWIDTH
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
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
Para dispor o frame sem a barra de rolagem:

<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
<HTML>
<HEAD>
</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>
Figura 7.15 Exemplo de atributos na tag FRAME.
Unidade 7
209
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%>
</FRAMESET>
</FRAMESET>

<NOFRAMES>
<FONT SIZE=4>
210
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
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.
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
Rodap.html
212
Principal.html
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
<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

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

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
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
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
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
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
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
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
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
Resposta:
224
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
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
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
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
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
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
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
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
232
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.
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.
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.
O status da pgina. Ela est completa? um trabalho

ainda em andamento? Foi deixada propositalmente em
branco?
Unidade 8
233
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
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
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
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
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
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
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

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
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
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 HTML4, CSS,
XML e XHTML. Para o W3C, o HTML deve ser usado em
conjunto com estilos CSS (folhas de estilo em cascata), sendo
que os contedos se exprimem em HTML e os estilos em CSS.
As folhas de estilo permitem que voc defina a aparncia padro
de diferentes partes de seu documento. E precisamente esse
o objetivo das folhas de estilo em cascata. Com elas, voc pode
controlar a cor e o estilo de fontes, ajustar o espao em branco, etc.
Este novo paradigma para a criao de pginas bem suportado
por todos os navegadores dominantes: 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
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
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
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
Declarao
H1
{ 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
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
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
Assim fica no navegador:
Figura 9.1 Exemplo da criao de um estilo em pargrafo.
Se desejarmos atribuir a uma propriedade um valor que contm

espaos, devemos coloc-lo entre apstrofos (). No exemplo
seguinte, usaremos o tipo de letra sansserif a um pargrafo e
comicsansms a outro:
<html>
<body>
<p style=font-family: sans-serif>
Neste pargrafo o tipo de letra sans-serif</p>
<p style=font-family: comic sans ms>
Neste pargrafo o tipo de letra comic sans ms
</p>
</body>
</html>
A visualizao esta:
Figura 9.2 - Exemplo da criao de um estilo em pargrafos diferentes.
248
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
{ margin-left: 20px }
</STYLE>
</HEAD>
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
<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>
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.
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>
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
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>
<!-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
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
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
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
<html>
<head>
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
<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>
.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>
Unidade 9
257
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
<html>
<head>
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
<html>
<head>
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
#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
}
Unidade 9
261
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
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
<html>
<head>
div { color: blue }
</style>
</head>
<body>
<div>O texto dos elementos <div> tem cor azul.

<p>
Este pargrafo est dentro de um elemento
<div>. Ele herda a cor azul.

</p>
</div>
<p>
Este pargrafo no est dentro de nenhum
elemento que lhe deixe uma herana.
</p>
</body>
</html>
No exemplo acima, a folha de estilos expressa que o texto das tags

<DIV> deve ter cor azul. O pargrafo que est dentro de uma
tag <DIV> herda a cor azul, porque a propriedade color herdada
pelos descendentes de uma tag. J o segundo pargrafo no est
dentro de nenhuma tag que lhe deixe uma herana (que neste
caso a propriedade color), e, por isto, o seu texto tem a cor
normal.
Visualizao:
Figura 9.10 Exemplo de herana de estilos.
264
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>
div
{ color: blue;
border: solid thin red
}
</style>
</head>
<body>
<div>
Os elementos <div> recebem uma linha de contorno

vermelha (border) e texto com cor azul.
<p>
Este pargrafo est dentro de um elemento <div>.
Ele herda a cor azul mas no herda a linha de contorno (border).
</p>
<div>
Tal como o elemento <div> principal este elemento <div>
recebe a sua prpria linha de contorno.
</div>
</div>
</body>
</html>
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
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:
266
Tag
Descrio
<STYLE>
Define estilos CSS estilos internos
<LINK>
Define uma referncia para um estilo externo
<DIV>
Insere uma seo no documento
1. Crie uma folha de estilo externa para seu documento HTML. Utilize as
mais variadas propriedades em tags como <BODY>, <P>, <DIV> etc.
Veja as referncias para consultar as propriedades e seus valores em
sites apropriados.
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)
Unidade 9
267
<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
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

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
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
No primeiro caso, o contedo do formulrio enviado ao

endereo de correio eletrnico especificado por meio da sintaxe
abaixo:
<FORM action=mailto:endereo@correio.com>...</FORM>
Se o que o que voc deseja que o formulrio seja processado por

um programa, voc deve especificar o endereo do arquivo que
contm tal programa. Neste caso, a tag ficaria da seguinte forma:
<FORM action=endereo do arquivo>...</FORM>
A maneira de se expressar a localizao do arquivo que contm o

script a mesma j estudada na unidade sobre vnculos.
METHOD
Este atributo da tag <FORM> encarrega-se de especificar
a forma na qual o formulrio enviado, ou seja, seleciona
um mtodo para acessar a URL de ao. Os mtodos usados
atualmente so GET e POST. Ambos os mtodos transferem
dados do navegador para o servidor, com a seguinte diferena
bsica:
POST - os dados inseridos fazem parte do corpo da

mensagem enviada para o servidor. Transfere-se grande
quantidade de dados e os mesmos no so visualizados
pelos usurios;
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
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
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
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
<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
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
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
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
<FORM>
Endereo: <INPUT TYPE=TEXT SIZE=35>
</FORM>
Figura 10.6 - Exemplo da utilizao do atributo SIZE.
Atributo MAXLENGTH
Este atributo indica o tamanho mximo do texto que pode ser
tomado pelo formulrio. importante no confundi-lo com o
atributo SIZE. Enquanto o primeiro define o tamanho aparente
da caixa de texto, o MEXLENGTH indica o tamanho mximo
real do texto que pode ser escrito, 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
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
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
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.
Unidade 10
283
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.
284
Atributo SIZE indica o nmero de elementos da lista,

visveis no formulrio. O resto pode ser visto por meio da
barra lateral de deslocamento. Exemplo:
<SELECT name=estao size=3>

</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
<SELECT name=estao size=3 MULTIPLE>

</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
<SELECT name=estao>
<option SELECTED>Outono</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
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
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
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
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
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
<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
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
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
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
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
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
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
Veja, a seguir, um breve relato dos elementos estudados nesta

unidade.
Elementos para Formulrios

Elemento
Descrio
<form>
Define um formulrio
<input>
Insere um campo para introduzir dados
<textarea>
Define uma rea de texto (permite inserir texto com vrias

linhas e um nmero ilimitado de caracteres)
<select>
Define uma lista com vrias opes selecionveis
<option>
Insere uma opo a mais numa lista com vrias opes

selecionveis
<button>
Define um boto que pode ser pressionado
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
<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.
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>
304
<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/>
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
Unidade 4
Unidade 5
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>
</tr>
<tr>
</tr>
</table>
</body>
Unidade 7
1) 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
Unidade 9
Unidade 10
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.

(7694 - 23745) Linguagens - de - Programacao - I PDF

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

(7694 - 23745) Linguagens - de - Programacao - I PDF

Enviado por

Direitos autorais:

Formatos disponíveis

Universidade do Sul de Santa Catarina

Secretaria Executiva e Cerimonial

Jeerson Amorin Oliveira

Coordenao dos Cursos

Secretaria de Ensino a Distncia

Giane dos Passos

Alessandro Alves da Silva

Gerncia de Ensino, Pesquisa

Bruno Augusto Zunino

Carolina Hoeller da S. Boeing

Silvana Souza da Cruz (Coord. Grad.)

Relacionamento com o Mercado

Arthur Emmanuel F. Silveira (Gerente)

Gerncia Servio de Ateno

Jeferson Cassiano A. da Costa

Fabiano Ceretta (Gerente)

Patrcia Gerent Petry

Copyright UnisulVirtual 2010

Edio Livro Didtico

Ficha catalogrfica elaborada pela Biblioteca Universitria da Unisul

o Espao UnisulVirtual de Aprendizagem (EVA);

as atividades de avaliao (complementares, a

Universidade do Sul de Santa Catarina

Apresentar o funcionamento da web.

Descrever os principais conceitos referentes HTML.

Conhecer alguns editores de HTML.

Definir o que so tags HTML.

Aprender a criar listas.

Aprender a criar vnculos em HTML.

Proporcionar formataes em pargrafos e textos

Trabalhar com imagens em pginas da web.

Proporcionar a criao de folhas de estilos.

Identificar as tags e a estrutura geral de uma pgina

Elaborar um layout adequado para as suas pginas em

Verificar elementos e atributos HTML obsoletos.

Universidade do Sul de Santa Catarina

Unidade 5 Uso de Imagens, Painis de Fundo e Arquivos de udio

Unidade 10 Criao de Formulrios

Agenda de atividades/ Cronograma

Verifique com ateno o EVA, organize-se para acessar

Universidade do Sul de Santa Catarina

Demais atividades (registro pessoal)

Conceitos bsicos pertinentes

Rever conceitos importantes sobre Internet.

Conhecer alguns editores de HTML existentes.

Universidade do Sul de Santa Catarina

Para incio de estudo

A World Wide Web (Teia de Alcance

Uma das caractersticas mais interessantes da Internet

Seo 1 - O que a Internet

Existem muitos termos que tentam definir a Internet.

Universidade do Sul de Santa Catarina

Isso tudo porque a Internet uma inveno muito simples.

Seo 2 - Como funciona a web

O navegador usado para

A web funciona basicamente com dois tipos de programas:

requisitar um arquivo para um servidor. Se a informao pedida

A informao na web organizada na forma de pginas,

A web um sistema de informao em hipertexto. Os sistemas de

Figura 1.1 Sistema de ajuda on-line.

Universidade do Sul de Santa Catarina

A web grfica e fcil de ser navegada

Se a web incorpora muito mais do que texto, por que