(8829 - 29092) Livrocompletomidiateca

capa.
pdf 1 18/08/2016 09:52:53
Programação web Básica

Universidade do Sul de Santa Catarina
Este livro trata de detalhes técnicos para a criação
de sites WEB. Apresentado de forma introdutória
exemplos de como construir sites web e fornecer
suporte ao desenvolvimento de sistemas WEB. Os
dez capítulos do livro tratam sobre o que é a
internet, a linguagem HTML e sua estrutura, lista e
vínculos, formatação de texto e parágrafos,
Programação

imagens, tabelas, frames, folhas de estilo e
formulários. Além de iniciar o primeiro contato
web Básica
com JavaScript para ter alguma interação com o
usuário.
w w w. u n i s u l . b r
Programação
web Básica
UnisulVirtual
Palhoça, 2016
Livro completo.indb 1 18/08/2016 10:01:49

Créditos
Universidade do Sul de Santa Catarina – Unisul

Reitor
Sebastião Salésio Herdt
Vice-Reitor
Mauri Luiz Heerdt
Pró-Reitor de Ensino, de Pesquisa e de Extensão

Mauri Luiz Heerdt
Pró-Reitor de Desenvolvimento Institucional
Luciano Rodrigues Marcelino
Pró-Reitor de Operações e Serviços Acadêmicos
Valter Alves Schmitz Neto
Diretor do Campus Universitário de Tubarão

Heitor Wensing Júnior
Diretor do Campus Universitário da Grande Florianópolis
Hércules Nunes de Araújo
Diretor do Campus Universitário UnisulVirtual
Fabiano Ceretta
Campus Universitário UnisulVirtual

Diretor
Fabiano Ceretta
Unidade de Articulação Acadêmica (UnA) – Ciências Sociais, Direito, Negócios e Serviços

Amanda Pizzolo (coordenadora)
Unidade de Articulação Acadêmica (UnA) – Educação, Humanidades e Artes
Felipe Felisbino (coordenador)
Unidade de Articulação Acadêmica (UnA) – Produção, Construção e Agroindústria
Anelise Leal Vieira Cubas (coordenadora)
Unidade de Articulação Acadêmica (UnA) – Saúde e Bem-estar Social
Aureo dos Santos (coordenador)
Gerente de Operações e Serviços Acadêmicos

Moacir Heerdt
Gerente de Ensino, Pesquisa e Extensão
Roberto Iunskovski
Gerente de Desenho, Desenvolvimento e Produção de Recursos Didáticos
Márcia Loch
Gerente de Prospecção Mercadológica
Eliza Bianchini Dallanhol

Patrícia Gerent Petry
Osmar de Oliveira Braz Junior
Programação
web Básica
Livro didático
Designer instrucional
Simone Soares Haas Carminatti
UnisulVirtual
Palhoça, 2016

Copyright © Nenhuma parte desta publicação pode ser reproduzida por
UnisulVirtual 2016 qualquer meio sem a prévia autorização desta instituição.
Livro Didático
Professores conteudistas Diagramador(a)

Patrícia Gerent Petry Josué Lange
Revisor(a)
Designer instrucional Diane Dal Mago
Simone Soares Haas Carminatti Contextuar
Projeto gráfico e capa ISBN

Equipe UnisulVirtual 978-85-7817-985-4
e-ISBN
978-85-7817-986-1
P59
Petry, Patrícia Gerent
Programação web básica : livro didático / Patrícia Gerent Petry,
Osmar de Oliveira Braz Junior ; design instrucional Simone Soares Haas
Carminatti. – Palhoça : UnisulVirtual, 2016.
296 p. : il. ; 28 cm.
Inclui bibliografia.
ISBN 978-85-7817-985-4
e-ISBN 978-85-7817-986-1
1. Linguagem de programação (Computadores). 2. Programação para

internet. 3. HTML (Linguagem de programação de computadores). I. Braz
Júnior, Osmar de Oliveira. II. Carminatti, Simone Soares Haas. III. Título.
CDD (21. ed.) 005.133
Ficha catalográfica elaborada pela Biblioteca Universitária da Unisul

Sumário
Introdução | 7
Capítulo 1
A internet e o HTML | 9
Capítulo 2
Introdução a Linguagem HTML | 25
Capítulo 3
Listas e Vínculos | 53
Capítulo 4
Formatação de Texto | 83
Capítulo 5
Uso de Imagens, Painéis de Fundo e Arquivos de
Música | 103
Capítulo 6
Tabelas | 137
Capítulo 7
Frames | 177
Capítulo 8
Desenvolvendo Páginas Eficientes | 203
Capítulo 9
Folhas de Estilo | 225
Capítulo 10
Criação de Formulários | 255
Considerações Finais | 291
Referências | 293
Sobre os Professores Conteudistas | 295

Introdução
Você já deve ter passado boa parte de seu tempo explorando a web e é provável
que já esteja familiarizado com a maior parte do conteúdo deste livro. Com ele,
vamos aprender a desenvolver páginas para a web. Talvez você até já tenha
realizado isso em alguma outra oportunidade. Alguns conteúdos podem ser novos
e outros não. Mas não deixe de ler e participar, contribuindo, assim, para o bom
andamento da Unidade de Aprendizagem.
Neste material, você encontrará tudo que precisa para criar uma página
estática na web. Estática porque, aqui, ainda não aprenderemos a tornar as
páginas dinâmicas, como existem em muitos sites já visitados por você (por
exemplo, realizar um cadastro em um banco de dados, via web). Faremos
algumas simulações com JavaScript para se aproximar a páginas dinâmicas.
Utilizaremos o JavaScript também para realizar a validação de formulários. Apesar
de não desenvolver páginas dinâmicas, lembre-se de que as linguagens de
programação web, como Java, PHP, ASP e .NET, embutem o HTML para realizar
a interação com usuário. Também iremos aprender como criar uma página HTML,
disponibilizá-la na web, criar vínculos, folhas de estilos, incluir imagens etc.
Durante os estudos, você perceberá os detalhes técnicos básicos para a criação

de um site na web e aprenderá porque deve produzir um efeito em particular em
uma página, quando deve usá-lo e como. Também encontrará dicas, sugestões
e muitos exemplos de como estruturar seu conteúdo e não simplesmente o texto
em cada página. Ou seja, esta Unidade de Aprendizagem dará informações
fundamentais para uma boa apresentação de um site na web.
Trabalhar com desenvolvimento para a web é gratificante, pois sabemos que uma
das características mais interessantes da internet é a oportunidade que todas
as pessoas têm de disseminar informações. Portanto, disponibilizar informações
na web será o nosso foco. Esperamos que você anime-se e divirta-se bastante
enquanto estuda.
Bons estudos!

Capítulo 1
A internet e o HTML 1
A World Wide Web (Teia de Uma das características mais interessantes da

Alcance Mundial) é o nome dado Internet é a oportunidade que todos os usuários
à rede de servidores da Internet
que mantém documentos
têm de disseminar informações. Tanto um vencedor
hipermídia, interligados entre do prêmio Nobel quanto um estudante do primeiro
si por hiperlinks e que formam ano de faculdade contam com os mesmos canais
uma grande teia de informações
de distribuição para expressar suas ideias. Com
espalhadas pelo mundo. A
WWW foi a grande responsável o surgimento da World Wide Web, esse meio só
pela popularização da Internet, foi enriquecido. O conteúdo da rede ficou mais
oferecendo um método mais atraente com a possibilidade de incorporar imagens,
intuitivo de pesquisar e consultar
vídeos e sons. Um novo sistema de localização
informações na grande rede.
de arquivos criou um ambiente em que cada
informação tem um endereço único e pode ser
encontrada por qualquer usuário da rede.
A evolução da internet é constante. Atualmente, a evolução mais marcante é a

preconizada WEB 2.0, que melhorou muito o carregamento de páginas dinâmicas
com a substituição do simples HTML pelo XHTML(EXtensible HyperText Markup
Language) e a utilização de AJAX(Asynchronous Javascript and XML). Agora,
estamos com a WEB 3.0 e a internet das coisas. A WEB 3.0 propõe conteúdos
organizados de forma semântica e personalizados para cada usuário. Já a
internet das coisas tem como objetivo conectar os itens usados no dia a dia à
internet.
1 PETRY, Patrícia Gerent; BRAZ JUNIOR, Osmar de Oliveira. Programação Web Básica. Palhoça: UnisulVirtual,
2016 . págs. 09 - 24.

Capítulo 1
Na prática, não existe nenhuma diferença entre páginas de uma grande empresa
na WEB das páginas que você irá produzir. Ambas podem ser acessadas e
utilizadas com a mesma facilidade. A diferença principal é uma só: a criatividade.
Os conceitos citados anteriormente devem ser aprofundados à medida que se
necessita deles. Vamos entender, neste capítulo, um pouco mais sobre essas
tecnologias que servem de base para esse mundo.
Seção 1
O que é a Internet
Existem muitos termos que tentam definir a Internet. Superestrada da informação,
preferem os políticos. Rede de redes, insistem os cientistas. O certo é que cada
um desses grupos prefere ver a rede segundo seus próprios interesses. Para o
pessoal de negócios, uma nova fronteira de construção e investimentos coletivos
é um desafio. Já os cientistas, rigorosos em suas definições, enxergam a virtude
da Internet em conectar computadores de qualquer tipo em todo o globo.
As visões distintas da rede não param por aí. Há quem veja na Internet uma
perigosa fonte de pornografia. Outros têm todos os utensílios, instrumentos e
aparelhos de nosso dia a dia conectados. 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 história da Internet, foram os usuários que inventaram novos recursos e
novas aplicações. É um terreno fértil para boas ideias, ao mesmo tempo perigoso
quando utilizada para fins ilícitos.
Isso tudo porque a Internet é uma invenção muito simples. Nada mais é do que
uma forma fácil e barata de fazer com que computadores distantes possam se
comunicar. A partir daí, a revolução está nas mãos das pessoas.
Cada usuário recebe uma identificação única, conhecida como endereço. Com
esse endereço, ele pode se comunicar, enviando mensagens para outras pessoas.
É o que se chama de correio eletrônico. Graças aos esforços de instituições
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) - é possível conseguir programas de graça e
consultar bancos de dados públicos.
Hoje, com o sucesso da Internet, toda empresa se vê na obrigação de colocar

a cara na rede. Os serviços se multiplicam. Os bancos oferecem todas as suas
operações pelo computador. Notícias são distribuídas imediatamente. Pizzarias,
Floriculturas, Supermercados aceitam pedidos. Lojas vendem seus produtos.
10

Programação Web Básica
No entanto, boa parte do material da rede é produzido por indivíduos querendo

expressar ao mundo suas preferências. Um usuário reúne tudo que tinha sobre
Jornada nas Estrelas e coloca na Internet. Outro, com objetivos mais práticos,
escreve um currículo e espera que seus talentos sejam descobertos. Todo mundo
que um dia sentiu vontade de compartilhar suas façanhas agora pode fazer isso.
O tal terreno fértil da Internet tem um nome. Chama-se World Wide Web ou
apenas Web.
Seção 2
Como funciona a Web
O navegador é usado A Web funciona basicamente com dois tipos de
para exibir páginas programas: os clientes e os servidores. O cliente é o
da web e outras
informações disponíveis
programa utilizado pelos usuários para ver as páginas,
na world wide web e enquanto os servidores ficam responsáveis por armazenar
navegar por elas. e permitir o acesso ao conteúdo da rede. Aqui, chamamos
o programa cliente de navegador (browser, em inglês).
O que o navegador faz é requisitar um arquivo para
um servidor. Se a informação pedida estiver realmente
armazenada naquele servidor, o pedido será enviado de
volta e mostrado na tela do navegador.
Você tem ideia de como a informação na web é organizada?
A informação na Web é organizada na forma de páginas, que podem conter texto,

imagens, vídeos, sons e, mais recentemente, pequenos programas. Além disso,
as páginas da Web podem ser ligadas umas com as outras, formando o que se
chama de um conjunto de hipertextos. Assim, é possível, por exemplo, que um
trabalho de faculdade faça referência direta a um texto que serviu de base para
o estudo. O leitor interessado na fonte de pesquisa pode saltar imediatamente
para o texto original. Dessa forma, qualquer documento pode levar a um outro
texto que também esteja disponível na rede. A possibilidade de criar uma “malha”
de informação em torno do planeta deu origem ao nome World Wide Web, que
significa “teia de alcance mundial”.
A web é um sistema de informação em hipertexto. Os sistemas de ajuda on-line

utilizam hipertextos para apresentar informações. A Figura 1.1 a seguir mostra
um diagrama simples de como funciona esse tipo de sistema.
11

Capítulo 1
Figura 1.1 – Sistema de ajuda on-line
Fonte: Elaboração dos autores, 2016.
Hipertexto é um sistema para a visualização de informação cujos documentos contêm

referências internas para outros documentos (chamadas de hiperlinks ou, simplesmente, links),
e para a fácil publicação, atualização e pesquisa de informação. O sistema de hipertexto mais
conhecido atualmente é a World Wide Web. O hipertexto permite que você leia um texto,
navegue por ele e por informações visuais não lineares, com base nas informações que deseja
obter em seguida.
O Link ou Hiperlink é um dos principais elementos de um hipertexto, pois permite a conexão
de uma página com informações à outra previamente definida, geralmente contendo um
assunto correlato. Nas páginas WWW, os hiperlinks aparecem como palavras em destaque,
normalmente sublinhadas e de cor diferente do restante do texto, e são acionados clicando-se
sobre eles com o mouse.
A web é gráfica e fácil de ser navegada

Antes da web, o uso da internet envolvia conexões simples de textos. Você tinha
de navegar pelos vários serviços da internet utilizando interfaces de linha de
comandos e ferramentas rudimentares. Embora houvesse muitas informações
realmente interessantes na internet, ela não tinha um aspecto agradável.
A web fornece recursos de imagem, som e vídeo que podem ser incorporados
ao texto, e os softwares mais recentes oferecem novos recursos para multimídia
e aplicativos incorporados. E o mais importante é que a interface de todos esses
recursos é de fácil navegação – basta saltar de vínculo em vínculo, de página em
página, passando por sites e servidores.
12

Se a web incorpora muito mais do que texto, por que é chamada de

sistema de hipertexto? Não deveria ser um sistema de hipermídia? Muitos
autores discutem sobre o assunto. Muitos argumentam que a web
começou com um sistema de textos e que a maior parte de seu conteúdo
ainda é, basicamente, composta de textos, com partes extras de mídias.
A Web é distribuída
Sabemos que as informações ocupam muito espaço, especialmente quando você
inclui imagens, sons e vídeos. Para armazenar todas as informações que a web
fornece, você precisa de um espaço enorme em disco e seria quase impossível
gerenciá-las.
Site da web é um local na A web consegue fornecer um volume tão grande

web que divulga algum tipo
de informações porque elas estão distribuídas
de informação. Quando você
exibe uma página da web, o globalmente por milhares de sites, cada qual
seu navegador se conecta a contribuindo com o espaço necessário às informações
esse site da web para obter que divulga.
essas informações.
A web é dinâmica
Como as informações da web estão contidas no site que as divulgou, as pessoas
que as publicaram, originalmente, podem atualizá-las de forma instantânea,
a qualquer momento. Para obter informações atualizadas, basta usar o seu
navegador para navegar pelas informações e verificar o que há de novo.
A web é independente de plataforma

O termo independente de plataforma significa que você pode acessar as
informações disponíveis na web de igual forma, a partir de qualquer computador,
sistema operacional e monitor de vídeo.
13

Capítulo 1
Você tem acesso à web por meio 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
conexão com a internet, você terá alcançado seu objetivo. Você estará na web.
A ideia de que a web é independente de plataforma é sustentada por uns e por

outros não. Com a introdução de novos recursos, tecnologias e tipos de mídia, 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 público 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 vínculo e acessar outra página da web para
ir a outro local na web é uma forma de interatividade. Além disso, ela permite que
você se comunique com o autor das páginas que está lendo e com outros leitores
dessas páginas.
Os navegadores da Web
Os usuários circulam por essa teia com um programa chamado navegador, que
é o programa utilizado para exibir páginas pela world wide web. Esse programa
envia pedidos de páginas pela rede e as apresenta na tela do usuário. Existem
vários navegadores da web, praticamente para todas as plataformas que você
possa imaginar, desde sistemas baseados em Interface Gráfica com o Usuário
- GUI (Mac, Linux, Windows), a sistemas de textos para conexões UNIX. Os
navegadores mais conhecidos são Internet Explorer, Fire Fox e Google Chrome.
A opção de desenvolver programas para um navegador específico é conveniente

quando você sabe que o seu site da web vai ser visto por um público limitado.
Esse tipo de desenvolvimento é uma prática comum em intranets implementadas
em corporações.
Neste livro, os exemplos realizados foram utilizados com o navegador Internet

Explorer 11.
14

Os servidores Web
Para que uma página esteja permanentemente disponível pela Web, ela precisa
ter um endereço fixo, alojada em um servidor
Os pedidos dos navegadores são atendidos por uma combinação de

computadores e programas que formam os servidores. Esses computadores
e programas armazenam as páginas e podem exercer algum tipo de controle
sobre quais usuários podem acessá-las. Os servidores são máquinas potentes
instaladas em universidades, empresas e órgãos do governo, conectados
permanentemente à Internet. Também é possível 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 usuários possam requisitar as páginas a qualquer momento. A melhor
solução para montar um conjunto de páginas é procurar uma empresa que aluga
espaço em um servidor Web.
Existem vários provedores de espaço (hostings) gratuitos. Os provedores de

acesso à internet geralmente oferecem espaço para os sites de seus assinantes.
Sites com fins lucrativos são geralmente hospedados em provedores de espaço
pagos.
Definida a hospedagem, basta enviar para o provedor os arquivos de seu site, via
FTP ou por uma página de envio no próprio provedor de espaço, e suas páginas
já estarão disponíveis para visitas.
O que é uma URL

A Web permitiu que cada documento na rede tenha um endereço único,
indicando o nome do arquivo, diretório, nome do servidor e o método pelo qual
ele deve ser requisitado. Esse endereço foi chamado de URL (Uniform Resource
Locator, numa tradução literal, localizador uniforme de recursos). Toda URL
apresenta uma estrutura básica. Acompanhe tal estrutura em função do
exemplo seguinte:
15

Capítulo 1
Considere o seguinte URL:
http://www. unisul.br/aluno/aluno.html
Onde,
http:// é o método pelo qual ocorrerá a transação entre cliente

e servidor. HTTP (HyperText Transfer Protocol, ou protocolo
de transferência de arquivos de hipertexto) é o método utilizado
para transportar páginas de Web pela rede. Outros métodos
comuns são: ftp:// (para transferir arquivos), news:// (grupos de
discussão) e mailto:// (para enviar correio eletrônico).
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 diretório onde está o arquivo. Às vezes uma URL

indica apenas o diretório (ou o servidor). Nesse caso, o servidor
se encarrega de procurar e enviar o arquivo adequado.
aluno.html é o nome do arquivo. A extensão .html indica que

se trata de uma página Web. Uma URL pode indicar outras
extensões. Quando o navegador recebe um arquivo com a
extensão .txt, o arquivo é tratado como um texto comum. Em
outros casos, como nas extensões .zip (arquivo comprimido) e
.exe (um programa), o navegador abre uma janela perguntando
ao usuário o que fazer com o arquivo.
16

Esse endereço único de um documento pode ser utilizado pelo usuário para
localizar um arquivo com o navegador. Nesse caso, o usuário deve preencher
com o endereço uma janela do navegador conhecida como Endereço. A URL
será enviada até o servidor, que tentará localizar o arquivo e enviá-lo para o
usuário. Caso o arquivo não esteja disponível no servidor, o usuário receberá uma
mensagem de erro.
As URLs também são colocadas dentro de páginas de WWW para fazer referência
a outras informações disponíveis na Internet. Nesse caso, determinados itens
(trechos de texto ou imagens) da página, conhecidos como links, como já visto,
podem ser utilizados pelos usuários para saltar de um lugar a outro na rede. Os
links podem estabelecer ligação com qualquer tipo de arquivo. Essa ligação entre
os documentos é o que se chama de hipertexto.
Seção 3
Afinal o que é HTML?
Para você publicar informações acessíveis a todos, você precisa de uma
linguagem entendida mundialmente, algo parecido como uma linguagem padrão,
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 formatação de hipertexto).
O HTML é uma linguagem de marcação de texto ou dado relativamente simples

e que pode ser combinado com linguagens de programação como: JSP, PHP,
.NET, ASP etc.; podendo dar efeito dinâmico aos sites.
Atenção!
Não existem programas em HTML.
HTML não é uma linguagem de programação, mas de formatação.Portanto,
a rigor, não existem “programadores” de HTML.
Breve histórico do HTML

O HTML foi originalmente desenvolvido por Tim Berners-Lee, quando estava no
CERN, e tornou-se conhecido por meio do Mosaic, um browser desenvolvido em
NCSA. Durante os primórdios dos anos 90, expandiu-se com a enorme explosão
do crescimento da WWW.
17

Capítulo 1
Quando o HTML surgiu, a sua principal utilização era para descrever a informação,
sendo predominantemente usado no meio científico para partilhar documentos
de forma universal e facilmente legível. Parágrafos, listas, cabeçalhos, títulos (os
elementos principais do HTML) eram ideais para este tipo de documentação.
Posteriormente, o HTML foi expandido em vários caminhos. De 1990 a 1995, a

linguagem HTML sofreu uma série de extensões por parte de diversos grupos e
organizações: HTML 2.0 da IETF, HTML+, HTML 3.0.
Em 1996, os esforços 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 não a
original. Para acomodar os mais variados pedidos, as tags de apresentação (cor,
fonte e alinhamento) foram usadas e abusadas, quando o principal propósito da
linguagem era estruturar a informação. Muitos, em alguma fase, aproveitaram-
se das aparentes facilidades dessa versão do HTML e de browsers demasiado
permissivos a erros.
Muitas pessoas concordavam que os documentos HTML deveriam trabalhar bem

por meio de diferentes browsers e sistemas operacionais. Em 1997, surge o HTML
4.0, que é uma extensão do HTML 3.2, permitindo a utilização de folhas de estilo
(style sheets), mecanismos de scripts, frames, objetos incorporados, e alguns
mecanismos de acessibilidade para deficientes.
Em 1999, o HTML 4.01 fixa um certo número de erros e incongruências

encontradas na recomendação anterior.
Neste momento, em 1999, existe um consenso para a necessidade de se

voltar um pouco atrás, preparando ao mesmo tempo o futuro. Um exemplo é a
separação do conteúdo com a apresentação do documento, usando XHTML para
o conteúdo e deixando a apresentação do documento a cargo de Cascading
Style Sheets (CSS).
Esta linguagem (XHTML) foi desenvolvida e aprovada com a recomendação 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).
Em 2008, a W3C publica a especificação do HTML 5, ao qual está evoluindo,

sendo a versão atual. O HTML5 vem dar significado semântico às páginas
web, padronizar e facilitar o manuseio das sessões de páginas de um site pelos
navegadores.
18

O World Wide Web Consortium (W3C) é um consórcio de empresas de tecnologia

(atualmente, cerca de 500 membros) fundado por Tim Berners Lee, em 1994, para
levar a Web ao seu potencial máximo, por meio do desenvolvimento de protocolos
comuns e fóruns abertos, os quais promovam sua evolução e assegurem a sua
interoperabilidade. O W3C desenvolve tecnologias denominadas padrões da web
para a criação e a interpretação dos seus conteúdos. Sites desenvolvidos segundo
esses padrões podem ser acessados e visualizados por qualquer pessoa ou
tecnologia, independente de hardware ou software utilizados, como celular, PDA,
eletrodomésticos etc., independentemente da plataforma, de maneira rápida e
compatível com os novos padrões e tecnologias que possam surgir com a evolução
da internet.
Para alcançar seus objetivos, a W3C possui diversos comitês que estudam as
tecnologias existentes para a apresentação de conteúdo na Internet e criam
padrões de recomendação para utilizar essas tecnologias. Com a padronização, os
programas conseguem acessar facilmente os códigos e entender onde deve ser
aplicado cada conhecimento expresso no documento.
Apesar do W3C não ser muito conhecido no Brasil, padrões seus como HTML,
eXtensible Hypertext Markup Language (XHTML) e Cascading Style Sheets (CSS)
são muito populares. Contudo, em muitos casos são usados de forma errônea,
devido à falta de conhecimento de suas especificações.
É um dever de todo desenvolvedor Web respeitar e seguir os padrões do

W3C, pois, de outro modo, poderá estar impondo barreiras tecnológicas a diversas
pessoas e, com isso, desestimulando e, até mesmo, impedindo o acesso a suas
páginas.
O site oficial da W3C é http://www.w3c.org. Todas as atividades em

desenvolvimento estão em inglês, mas você encontrará uma grande parte das
especificações traduzida para outras línguas.
Em suma, hoje em dia, temos um HTML mais flexível, portátil e com um formato
prático para dar forma aos documentos de Internet, que pode ser combinado
com outras linguagens como Javascript, PHP e Java, tornando o documento
muito mais interativo.
19

Capítulo 1
Seção 4
Edição de documentos HTML
Agora que você conheceu um pouco da história do HTML e de suas novidades,
vamos aprender como editar um documento HTML, além de uma breve
introdução à linguagem HTML. Os documentos em HTML são como arquivos
ASCII (American Standard Code for Information Interchange) comuns, que podem
ser editados em vi (no linux), emacs (no linux), textedit, bloco de notas, ou
qualquer editor simples.
Para facilitar a produção de documentos, existem editores HTML específicos:
Editores de texto fonte - facilitam a inserção das etiquetas (tags, como

chamaremos), orientando o uso de atributos e marcações. Ex.: NotePad++,
HotDog, Crimson Editor, Sublime Text.
Figura 1.2 – Tela do Notepad++
Editores WYSIWYG - oferecem ambiente de edição com “um” resultado final

das marcações (pois o resultado final depende do browser usado para visitar a
página). Ex.: FrontPage, Namo Editor, Dreamweaver.
WYSIWYG é a acrônimo da expressão em inglês “What You See Is What You

Get”, que pode ser traduzido para “O que você vê é o que você recebe”. Trata-se
de um método de edição, no qual o usuário vê o objeto no momento da edição na
tela do computador, já com a aparência do produto final.
20

Um exemplo clássico 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 programação para internet, um dos editores mais conhecidos

atualmente é o Macromedia Dreamweaver, no qual qualquer pessoa, com o
mínimo de conhecimento em HTML, pode fazer muito rapidamente uma página
ou até um site inteiro para internet.
Figura 1.3 - Tela do namo editor
Além dos editores específicos para HTML, editores bastante utilizados, como o
Word, entre outros, permitem a exportação de seus documentos próprios para o
formato HTML.
O documento HTML produzido normalmente terá extensão .html ou .htm.
Existem muitos editores de HTML gratuitos, como:
•• Html beauty
•• PageBreeze
•• Web writer
21

Capítulo 1
Introdução à linguagem HTML

A linguagem HTML é fruto do “casamento” dos padrões HyTime e SGML. Esses
padrões são especificados a seguir.
HyTime - Hypermedia/Time-based Document Structuring Language
HyTime (ISO 10744:1992) – é o padrão para representação estruturada de

hipermídia e informação baseada em tempo. Um documento é visto como um
conjunto de eventos concorrentes, dependentes de tempo (áudio, vídeo etc.),
conectados por webs ou hiperlinks.
O padrão HyTime é independente dos padrões de processamento de texto em
geral. Ele fornece a base para a construção de sistemas hipertexto padronizados,
consistindo-se de documentos que aplicam os padrões de maneira particular.
SGML - Standard Generalized Markup Language
SGML é o padrão ISO 8879 de formatação de textos. Não foi desenvolvido

para hipertexto, mas torna-se conveniente para transformar documentos em
hiper-objetos e para descrever as ligações. O SGML não é aplicado de maneira
padronizada. Todos os produtos SGML têm seu próprio sistema para traduzir
as etiquetas para um particular formatador de texto. O SGML utiliza as regras
contidas em um arquivo DTD.
DTD - Document Type Definition - define as regras de formatação para uma

determinada classe de documentos. Um DTD ou uma referência para um DTD
deve estar contido em qualquer documento, conforme o padrão SGML.
Neste sentido, o HTML é definido segundo um DTD de SGML.
Todo documento HTML apresenta elementos entre < e >; esses elementos são
as etiquetas (doravante chamadas de tags) de HTML, que são os comandos de
formatação da linguagem, podem ser escritos em maiúscula ou minúscula. A
maioria das tags tem sua correspondente de fechamento:
<tag>...</tag>
Isso é necessário porque as tags servem para definir a formatação de uma porção
de texto e, assim, marcamos onde começa e termina o texto com a formatação
especificada por ela.
22

Alguns elementos são chamados “vazios”, pois não marcam uma região de texto,
apenas inserem alguma coisa no documento:
<tag>
Todos os elementos podem ter atributos:
<tag atributo1=valor1 atributo2=valor2>...</tag>
Os valores dos atributos devem estar entre aspas. Por exemplo:
<a href=”URL”>Texto</a>
Neste capítulo, revisamos alguns conceitos importantes como Internet, World

Wide Web, Cliente/Servidor, provedores(hostings), Navegadores, URL e Hiperlinks.
Também conhecemos os tipos de editores para produzir e editar documentos
HTML
Esses conceitos são importantes para conhecer melhor o ambiente em HTML.

Nos próximos capítulos, vamos aprofundar e tirar o máximo proveito dessa
linguagem para WEB.
23

Capítulo 1
24

Capítulo 2
Introdução a Linguagem HTML 1
Seção 1
Criação de páginas da web simples
Apesar da aparente sofisticação, as páginas web não passam de documentos de
texto simples. Você pode produzi-las com qualquer editor de texto, como o bloco
de notas do Windows. A diferença é que as páginas web contêm algumas
marcas especiais para determinar o papel de cada elemento dentro do
texto. Alguns elementos são marcados como títulos, outros como parágrafos.
As marcações são usadas, também, para indicar os links que levam a outros
documentos na rede. Essas marcas são chamadas de tags e estão especificadas
dentro da linguagem utilizada para criar as páginas web, HTML.
As tags de HTML apenas informam ao navegador o que são os elementos

que estão na página. Eles dizem, por exemplo, que um determinado trecho é o
título principal do documento e outro é um item de lista. A formatação do trecho
é deixada para o navegador. Cada navegador mostra a página de uma forma um
pouco diferente, o que dificulta o trabalho de programação visual na web.
Para complicar ainda mais, cada usuário pode modificar a configuração padrão
de seu navegador para que o seu programa mostre o texto na fonte (tipo de
caractere) que quiser.
Em compensação, é muito simples criar uma página básica para colocar na

internet com HTML. Neste capítulo, você estudará um exemplo enxuto, que, aos
poucos, ficará mais sofisticado.
2016 . págs. xxx-xxx.
25

Capítulo 2
Seção 2
Estruture sua HTML
Abaixo, o primeiro exemplo mostra vários trechos de texto marcados por códigos
colocados entre os caracteres < e >. Esses códigos, chamados de tags, são
responsáveis pela marcação do texto em função de seu papel dentro do
documento. O título principal é marcado com as tags <b> e </b>, enquanto os
parágrafos são separados pela tag <P>. Existem dois tipos de tags. Alguns
são formados aos pares, indicando o início e o fim do trecho afetado, como o
par <b> e </b>. Outros, podem ser colocados individualmente, como o <P>,
que simplesmente insere um espaço para dividir parágrafos. Mais adiante,
mostraremos que as tags também podem receber atributos.
Tags básicas
A estrutura básica de um documento HTML apresenta os seguintes tags:
<HTML>
<HEAD>
<TITLE>Título do Documento</TITLE>
</HEAD>
<BODY>
texto,
imagem,
links,
...
</BODY>
</HTML>
Observe que existem quatro pares de tags, que devem ser sempre
colocados na página.
26

O par de tags <HTML> e </HTML> deve englobar todo o conteúdo da página

(estar presente no início 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 cabeçalho 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 cabeçalho, não
aparecendo na página.
O elemento principal do cabeçalho é o título do documento, que deve ser

colocado entre o par <TITLE> e </TITLE>.
Os navegadores mostram o título na barra de título do programa e na área em

aparecem as páginas 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 não são sensíveis à 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 página em HTML é a <html>, a qual indica
que o conteúdo do arquivo encontra-se codificado na linguagem HTML.
Para que o computador reconheça que você está escrevendo um documento em
HTML, todo o seu conteúdo deverá ser delimitado pelas tags HTML de abertura e
fechamento, como no exemplo:
<HTML>
.... a sua página ...
</HTML>
27

Capítulo 2
<HEAD>
A tag <HEAD> e </HEAD> delimita o cabeçalho do documento. Geralmente há
poucas tags na parte <HEAD> da página. Você nunca deve incluir no cabeçalho
parte alguma do texto de sua página. Além do título da página (< TITLE> ... </
TITLE>), no cabeçalho são inseridas também tags utilizadas para indexação do
documento HTML e para relacionamento com documentos externos (javascript,
CSS etc.). Eis um exemplo típico de uso correto da tag <HEAD>:
<HTML>
<HEAD>
<TITLE> ESTE É MEU TÍTULO </TITLE>
</HEAD>
</HTML>
Campo <TITLE>
O elemento <TITLE>, por exemplo, define um título, que é mostrado no alto
da janela do navegador. Todo documento web deve ter um título; este título é
referenciado em buscas pela rede, dando uma identidade ao documento. Para
ver na prática a importância do título, se você adicionar uma página com título
aos seus Favoritos (Bookmarks), o título da página se torna a âncora de atalho
para ela. Por isso é sugerido que os títulos dos documentos sejam sugestivos,
evitando-se títulos genéricos, como “Introdução”. O título também é bastante
significativo para a listagem de uma página nos resultados de pesquisas nos
catálogos da internet.
As tags <TITLE> são sempre incluídas no cabeçalho da página, entre as tags

<HEAD> e </HEAD>, e descrevem o conteúdo dela mesma, como no exemplo
anterior. Você pode ter apenas um título na página e esse pode conter somente
texto simples, ou seja, não pode haver outras tags no título. Escolha um título
curto, mas que descreva o conteúdo da página.
28

Campo <META>
Além do título, <HEAD> contém outras informações de importância para os
“robôs” de pesquisa, indicadas nos campos <META>.
Os campos <META> têm dois atributos principais:
•• NAME, indicando um nome para a informação.
•• HTTP-EQUIV, que faz uma correspondência com campos de

cabeçalho do protocolo HTTP; a informação desse campo pode ser
lida pelos navegadores e provocar algumas ações.
Os atributos são partes extras das tags da HTML que contêm opções ou
outras informações sobre a tag em si.
A Sintaxe refere-se às Acompanhe a sintaxe seguinte, como modelo de uso

regras para a construção dos atributos <META> (NAME e HTTP-EQUIV):
de um comando ou
instrução.
<HEAD>
<TITLE>Título do Documento</TITLE>
<META NAME=”nome” CONTENT=”valor”>
<META HTTP-EQUIV=”nome” CONTENT=”valor”>
</HEAD>
Um documento, por exemplo, pode ter as seguintes informações:
29

Capítulo 2
<HEAD>
<META HTTP-EQUIV=”content-type” CONTENT=”text/html;

charset=iso-8859-1”>
<TITLE>Título da Janela</TITLE>
<META NAME= “Author” CONTENT=“Patrícia”>
<META NAME=”Description” CONTENT=”Livro de Linguagem de Programação

I”>
<META NAME=”KeyWords” CONTENT=”HTML, WWW, Web, Internet”>
<LINK REL=”stylesheet” HREF=”folhasestilos.css”>
</HEAD>
Alguns valores dos atributos META NAME são inseridos automaticamente

por alguns editores, por exemplo: Author. Os campos Description e KeyWords
ajudam a classificação da página em algumas ferramentas de busca. Essas
informações não têm qualquer efeito na apresentação da página, mas servem
como uma explicação ou documentação sobre as informações contidas nela.
Há poucos valores para META HTTP-EQUIV em uso. O mais comum é content-

type, que indica o conjunto de caracteres usados na página. Essa informação
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 mudança automática de páginas, atribuindo-lhe o valor Refresh. Veja
este exemplo:
<HEAD>
<TITLE> ... </TITLE>
<META HTTP-EQUIV=”Refresh” CONTENT=”segundos; URL= pagina.html”>
</HEAD>
30

onde:
pagina.html: é a página a ser carregada automaticamente.
segundos: é o número de segundos passados até que a página indicada seja

carregada.
Como comentado no exemplo, o efeito é interessante, mas para que serve?
Se não pensamos em uma finalidade útil para esse efeito, caímos na tentação
de usá-lo “à toa”. A aplicação mais utilizada é a atualização automática de
um documento que, por exemplo, tenha uma foto produzida por uma câmara
de vídeo. Você pode forçar, com o Refresh (atualizador), a atualização dessa
página, mostrando para o usuário sempre uma imagem mais atual de algum
evento focalizado pela câmara. Outra utilização é em “chats”, ou em páginas que
desviem a navegação por meio de documentos desenvolvidos para navegadores
avançados.
Saiba mais sobre o uso de META tags!
O uso de META tags não é obrigatório. Até poucos anos atrás, elas eram
consideradas essenciais para uma página ter bom posicionamento nos resultados
das pesquisas em catálogos da web.
Com o tempo, no entanto, os responsáveis pelos catálogos viram que os autores

de páginas abusavam das tags META, colocando palavras-chave em demasia para
enganar os critérios de catalogação.
Atualmente, nenhum dos catálogos mais conceituados considera as palavras-chave

contidas em META tags
Ainda no exemplo anterior, se você observar atentamente, além das tags TITLE
e META, a última tag utilizada no cabeçalho foi LINK. Essa tag tem a função de
fazer um relacionamento com algum documento externo.
<LINK REL=”stylesheet” HREF=”folhaestilo.css”>
31

Capítulo 2
O atributo REL é a identificação do tipo de formato do documento. O valor

“stylesheet” indica que se trata de folhas de estilo, poderiam ser outros valores,
como por exemplo “script”, que indicaria arquivo de funções java script.
HREF é o caminho físico do arquivo. Nesse caso, existe um arquivo chamado

folhaestilo.css no próprio diretório do HTML.
<BODY>
É o corpo do documento. Tudo que estiver contido em <BODY> será mostrado
na janela principal do seu navegador. <BODY> pode conter cabeçalhos,
parágrafos, listas, tabelas, links para outros documentos, imagens, formulários,
animações, vídeos, sons e scripts embutidos.
<BODY> </BODY>: essas duas tags delimitam todo o conteúdo do site. É aí que
aparecerão os textos, as imagens, o fundo de tela, entre outras coisas.
Dentro da tag <BODY> você conseguirá especificar os seguintes atributos,

conforme tabela que segue:
Atributos Descrição Exemplo
BACKGROUND Indica o URL da imagem a ser <body background=”imagem.

(configura a replicada no fundo da página, gif”>
imagem que como uma marca d'água. Para
Nesse exemplo, o arquivo de
você deseja efeitos de design, é possível fixar
imagem deve estar no mesmo
como fundo de a imagem de fundo, para que ela
diretório do arquivo HTML.
tela) não se mova junto com o texto ao
se rolar a página. Esse efeito não
é padrão e funciona no Internet
Explorer.
BGCOLOR (cor de A cor de fundo da tela. <body bgcolor=”cor”>
fundo) Quando não é indicada, o
O atributo “cor” pode ser
navegador irá mostrar uma cor
utilizado em todas as tags ,
padrão, geralmente o cinza ou
tanto pode ser o nome de uma
branco; alguns editores poderão
cor (RED, BLUE, BLACK, etc...)
estabelecer o branco para o fundo
ou a codificação da cor em
da página.
representação hexadecimal
(#FF00FF, #C42A1F, etc...).
TEXT (cor do A cor padrão de todo o texto da <body text=”cor”>

texto padrão) página. Cor dos textos da página
(padrão: preto).
32

LINK (cor dos Determina a cor de todos os links <body vlink=”cor”>

links) da página. Cor dos links (padrão:
azul).
VLINK (cor dos Determina a cor de todos os <body vlink=”cor”>

links visitados) links já visitados na página.
Cor dos links, depois de
visitados (padrão: azul escuro
ou roxo).
ALINK (cor dos Determina a cor dos links <body vlink=”cor”>
links ativos) ativos. Cor dos links, quando
acionados (padrão: vermelho)
Acompanhe a sintaxe seguinte, como modelo de uso dos atributos específicos do

<BODY>:
<BODY BACKGROUND=”imagem.gif” BGCOLOR=”cor” TEXT=”cor”

LINK=”cor” ALINK=”cor” VLINK=”cor”>
conteúdo
</BODY>
O exemplo seguinte determina que a cor de fundo do site seja amarela, o texto
seja preto, os links ainda não visitados sejam azuis, os links já visitados sejam
roxos, e os links ativos sejam verdes:
<BODY BGCOLOR=”yellow” TEXT=”black” LINK=”blue” VLINK=”purple”

ALINK=”green”>
conteúdo
</BODY>
33

Capítulo 2
Os valores das cores podem ser dados também em hexadecimal, equivalentes

a cores no padrão RGB (Red, Green, Blue). Existem tabelas de cores com esses
valores, mas grande parte dos editores já oferece uma interface bem amigável,
por meio da qual escolhemos as cores desejadas, sem nos preocuparmos com
números esdrúxulos, tais como #FF80A0.
O sistema hexadecimal é um sistema de numeração vinculado à informática, já

que os computadores interpretam as linguagens de programação em bytes, que
são compostos de oito dígitos. À medida que os computadores e os programas
aumentam a sua capacidade de processamento, eles funcionam com múltiplos de
oito, como 16 ou 32. Por este motivo, o sistema hexadecimal, de 16 dígitos, é um
standard na informática.
Como o nosso sistema de numeração só dispõe de dez dígitos, devemos incluir

seis letras para completar o sistema. Essas letras e o seu valor em decimal são: A =
10, B = 11, C = 12, D = 13, E = 14 e F = 15.
A utilização do sistema hexadecimal nos computadores, deve-se a que um dígito

hexadecimal representa quatro dígitos binários (4 bits), portanto, dois dígitos
hexadecimais representam oito dígitos binários (8 bits = 1 byte) que, como é sabido,
é a unidade básica de armazenamento de informação.
Fonte: <http://pt.wikipedia.org/wiki/Hexadecimal>
Navegadores que seguem a definição de HTML 3.2 em diante, também aceitam

16 nomes de cores, tirados da paleta VGA do Windows - por exemplo, podemos
escrever BGCOLOR=”BLUE”. Porém, os navegadores mais antigos não
apresentam as cores indicadas.
Criando uma página HTML

A melhor maneira de você aprender a escrever páginas de web é fazendo. Vamos
ao primeiro exemplo. Abra o bloco de notas e digite o código a seguir. Por ora,
não é necessário que você entenda todas as tags que ele apresenta e o que
significa. Você aprenderá tudo sobre elas mais adiante. Esse é só um exemplo
simples para você começar.
34

<HTML>
<HEAD>
<TITLE>Primeiro exemplo</TITLE>
</HEAD>
<BODY>
<b>Título principal</b> <p>
Este é o texto do primeiro exemplo.<p>
Este é o segundo parágrafo. <p>
<b>Título secundário</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>
Após criar seu arquivo HTML, grave-o em alguma pasta com seus trabalhos.
Lembre-se de gravar esses arquivos, escolhendo a opção Salvar Como. Existem
duas regras que você deverá seguir ao escolher um nome para o arquivo:
•• o nome do arquivo deverá ter uma extensão .html (ou .htm). Por
exemplo, meuarquivo.html ou principal.htm. A maioria dos softwares
exigirá que os seus arquivos tenham essa extensão. Por isso, crie
desde já o hábito de utilizá-la;
•• use nome simples e curtos. Não inclua espaços ou caracteres
especiais (marcadores, letras acentuadas etc.). Use apenas letras e
números.
35

Capítulo 2
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 extensão entre aspas duplas, por exemplo: “meuarquivo.html”.
Esse processo evitará que o arquivo seja gravado com a extensão txt
(meuarquivo.html.txt), confusão ocasionada conforme a configuração do
sistema operacional.
Visualizando o exemplo no navegador

Agora que você tem um arquivo em HTML, inicialize o seu navegador da web.
Você não precisa estar conectado com a rede, uma vez que não vai abrir páginas
armazenadas em outros sites.
No seu navegador, procure um comando no menu ou botão 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 página 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 padrão.
Se o que for apresentado na tela não se parecer com o que está ilustrado na
Figura 2.1, a seguir, então volte ao bloco de notas, abra o seu arquivo criado e
compare-o com exemplo apresentado acima. Verifique se todas as tags têm tags
de fechamento e se todas as tags estão descritas corretamente. Assim, basta
corrigir o arquivo e gravá-lo novamente com o mesmo nome. Para isso você não
precisa sair do navegador.
Figura 2.1 – Visualizando o primeiro exemplo no navegador
36

Em seguida, retorne ao navegador. Deve haver um item no menu ou botão

denominado Atualizar (recarregar). O navegador lerá a nova versão do seu arquivo
e, então, você poderá editar e visualizar o documento sucessivamente até que
tudo esteja correto.
Mas não esqueça também de verificar a extensão de seu arquivo, caso o seu
navegador apresente o texto HTML real. A extensão é importante.
Portanto, para escrever documentos HTML não é necessário mais do que

um editor de texto simples e conhecimentos dos códigos que compõem
a linguagem. Os códigos, conhecidos como tags, servem para indicar a
função de cada elemento da página na rede.
Quando uma página em HTML é analisada por um navegador, toda a formatação

feita manualmente – espaços, tabulações, quebras de parágrafos etc. – é
ignorada. O único elemento capaz de formatar uma página em HTML são as tags
de HTML. Se você passar horas editando cuidadosamente um arquivo de texto
simples para ter parágrafos e colunas de números bem formatados, mas se
esquecer de incluir as tags, quando for ler a página em um navegador HTML,
todo o texto fluirá em um único parágrafo. E todo o seu trabalho terá sido em vão.
A vantagem de todos os espaços em branco serem ignorados está no fato de
você incluir as suas tags onde desejar.
Atenção!
Há uma única exceção a essa regra: uma tag denominada <PRE>. Você aprenderá
sobre ela mais adiante.
Cabeçalho
Os cabeçalhos são usados para dividir seções do texto. A maneira mais fácil de
mudar o tamanho da fonte é utilizar as tags de cabeçalho. A HTML define 6 níveis
de cabeçalho. As tags de cabeçalho têm o seguinte formato:
<H1> texto do cabeçalho de nível 1 </H1>
37

Capítulo 2
Os números indicam os níveis de cabeçalho (de H1 a H6). Quando apresentados

na tela, eles aparecem em letras maiores, em negrito, centralizados, sublinhados
ou em letras maiúsculas, de alguma forma que os destaque do restante do
texto. O <H1> deixa a letra maior que o <H2> e assim por diante. Veja o seguinte
exemplo:
<H1>Este é um cabeçalho de nível 1</H1>
Lembre-se de que todas as tags acima devem estar dentro da BODY.
Esses cabeçalhos são mostrados da seguinte forma:
Figura 2.2 – Visualizando exemplo de cabeçalho
38

Aninhamento de cabeçalhos
Aninhamento é colocar Os cabeçalhos não podem ser aninhados, isto é, a
documentos dentro de outro
formatação pode produzir algum resultado próximo ao
documento. Em HTML,
aninhar é colocar tags uma desejado, como no exemplo abaixo.
dentro das outras.
<H2>Este é <H1>um cabeçalho de nível 1</H1> dentro de um

cabeçalho de nível 2</H2>
Figura 2.3 – Visualizando exemplo de não aninhamento de tag
Mas o mais comum é que os navegadores “entendam” a formatação anterior

como:
<H2>Este é</H2> <H1>um cabeçalho de nível 1</H1> dentro de um cabeçalho de

nível
2</H2>
39

Capítulo 2
Ou seja, os navegadores interpretam a formatação anterior como se estivesse

faltando uma etiqueta de fechamento de <H2> antes de <H1> e faltando uma
abertura de <H2> depois do fechamento de <H1>, oferecendo o seguinte
resultado:
Figura 2.4 – Visualizando exemplo de aninhamento de tag
Os editores WYSIWYG ‘naturalmente’ não permitem o aninhamento de

cabeçalhos.
Alinhamento dos cabeçalhos

Os cabeçalhos têm atributos de alinhamento:
<H2 ALIGN=“CENTER”>Cabeçalho centralizado</H2>
<H3 ALIGN=“RIGHT”>Cabeçalho alinhado à direita</H3>
<H4 ALIGN=“LEFT”>Cabeçalho alinhado à esquerda (default)</H4>
Verifique o resultado no seu navegador.
40

Seção 3
Separadores
Como você viu no primeiro exemplo, as quebras de linha do texto fonte não
são significativas na apresentação de documentos em HTML. Para organizar os
textos, você precisa, então, de separadores tal como os apresentados aqui.
Quebra de linha
Quando queremos mudar de linha, usamos o elemento <BR>. Isso só é
necessário 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, parágrafos ou itens de uma lista.
Essa tag não possui espaço 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 têm texto ao redor.
Parágrafos
Os parágrafos são digitados normalmente. A tag <P> serve para indicar o início
de um novo parágrafo. As tags <P> e </P> delimitam um parágrafo no texto. É
possível, neste caso, não fechar a tag <P>, ou seja, omitir o </P>, sem prejudicar,
o resultado final.
Ao contrário da quebra de linha, com o uso do <P> é deixada uma linha em

branco antes do próximo parágrafo. Quebra de linha não 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 parágrafo:
41

Capítulo 2
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 opção (ALIGN=“CENTER”). Por isso,
é preciso utilizar uma tag de fechamento (</P>) para indicar que apenas aquele
parágrafo receberá um alinhamento diferente.
Observe o exemplo 1, que aborda como inserir uma linha em branco entre
parágrafos:
Parágrafo 1;<P>Parágrafo 2.
Visualize na figura a seguir como ficou o resultado:
Figura 2.5 – Exemplo de uso de parágrafo
Acompanhe o exemplo 2, que combina a inserção de linha entre parágrafos e
42

quebras de linha:
Parágrafo 1;<br> linha 1 do parágrafo 1, <br>linha 2 do

parágrafo 1.<P>Parágrafo 2;<br> linha 1 do parágrafo 2,
<br>linha 2 do parágrafo 2.
O resultado da marcação acima no navegador é:
Figura 2.6 – Exemplo de parágrafo e quebra de linha
Veja o exemplo 3 sobre o alinhamento de parágrafos, além de inserção de linhas

entre parágrafos 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 provérbio chinês: “É melhor passar por

ignorante uma vez do que permanecer ignorante para sempre”.</P>
<P ALIGN=“LEFT”>Este é o alinhamento padrão (default),

por isso, não vou colocar nenhuma frase especial.</P>
Verifique o seguinte resultado no navegador:
43

Capítulo 2
Figura 2.7 – Exemplo de alinhamento de parágrafo
Linha horizontal
A tag <HR> é utilizado para colocar linhas horizontais em uma página. Essa
linha tem diversos atributos, oferecendo resultados diversos. As linhas (ou fios)
são excelentes para separar visualmente seções da página da web antes dos
cabeçalhos ou para separar o texto de uma lista de itens. Você pode determinar a
altura, a largura e o alinhamento da linha.
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 espaço horizontal disponível.
Align: determina o posicionamento da linha.
Noshade: indica sem efeito tridimensional.
44

Figura 2.8 – Visualizando uma linha horizontal centralizada no navegador
Considere o exemplo 2:
<HR WIDTH=30% ALIGN=“RIGHT” NOSHADE>
Com esses comandos, você insere uma linha de comprimento 30% (do espaço
horizontal disponível), alinhada à direita, sem efeito tridimensional. Verifique o
resultado no seu navegador.
Figura 2.9 – Exemplo de linha horizontal
45

Capítulo 2
Também veja o exemplo 3:
<HR SIZE=70 WIDTH=7 ALIGN=“LEFT”>
A utilização de aspas duplas nos valores dos atributos é opcional, porém, é

considerada uma boa prática.
Nesse caso, você insere uma linha de largura 70 (pixels), comprimento 2 (pixels),
alinhada à esquerda (o Netscape, aparentemente, não aceita esta formatação de
<HR>). No navegador, o resultado pode ser visualizado na figura a seguir:
Figura 2.10 – Exemplo de linha horizontal
Seção 4
Alinhamento de texto
Nesta seção, você aprenderá como alinhar um bloco de texto em sua página
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 página da web melhor.
Alinhamento de bloco de texto
As tags <DIV ALIGN=”…”> e </DIV> marcam uma divisão lógica de um

documento, formatação bastante usada atualmente, e configuram o alinhamento
de um bloco todo de texto.
46

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,
atingindo todas as tags e o texto contido entre as de abertura e fechamento.
Existem vantagens da utilização da tag <DIV> em vez do atributo ALIGN:
•• Essa tag precisa ser usada apenas uma vez, ao contrário do atributo
ALIGN, que tem de ser incluído em diversas tags.
•• A tag <DIV> pode ser usada para alinhar qualquer elemento
(cabeçalho, parágrafos, citações etc.). O atributo ALIGN encontra-se
disponível apenas em um número limitado de tags.
Veja e seguinte exemplo:
<DIV ALIGN=“LEFT”>
<H1>Exemplo de texto à esquerda</H1>
<p>Testando à esquerda</p>
</DIV>
No navegador o resultado é apresentado na figura a seguir:
Figura 2.11 – Exemplo de alinhamento de bloco de texto à esquerda
47

Capítulo 2
Centralização de texto
As tags <CENTER> e </CENTER> centralizam os elementos - textos, imagens,
tabelas - que estiverem dentro de sua marcação. A tag <CENTER> funciona de
maneira idêntica a <DIV ALIGN=“CENTER”>, centralizando todo o conteúdo
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>
No navegador o resultado é apresentado na figura a seguir:
Figura 2.12 – Exemplo de centralização de texto
48

Margem
Outro controle sobre o alinhamento dos elementos da página pode ser
conseguido por meio de mudança, de configuração, de margem. O texto sempre
começa a uma determinada distância da janela do navegador (um pouco
diferente em cada navegador). Às vezes, será necessário aumentar essa margem
e fazer com que o texto comece mais para dentro da página. 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>
O resultado é apresentado na figura a seguir.
Figura 2.13 – Exemplo de configuração de margem
A tag <BLOCKQUOTE> é utilizada, principalmente, na criação de citações.

Geralmente, as citações são destacadas em relação ao restante do texto, por
meio do recuo.
49

Capítulo 2
Atenção!
Se você não deseja aumentar a margem do texto, não utilize a tag

<BLOCKQUOTE>. Por padrão, os códigos HTML não têm margem definida.
Texto pré-formatado
Existe ainda uma outra forma de modificar o alinhamento. É a utilização do par de
tags <PRE> e </PRE>. Usando essas tags, todos os espaços e entradas de
parágrafo (o resultado da tecla ENTER) são respeitados. Em um texto normal,
qualquer espaço a mais entre duas palavras é ignorado pelo navegador. Com a
pré-formatação, pode-se controlar o espaçamento com a barra de espaço e
colocar o texto em, praticamente, qualquer lugar da página.
Uma fonte monoespaçada é aquela Apesar da vantagem dessa forma de
na qual todos os caracteres ocupam o
alinhamento arbitrário, a tag <PRE>
mesmo espaço horizontal, ao contrário
da fonte proporcional, na qual o “i” muda o tipo de caractere para uma fonte
ocupa menos espaço do que o “a”, por monoespaçada.
exemplo.
Uma vez que <PRE> mantém o texto original, não se deve forçar espaços com
essa marcação dentro de outra marcação que já apresente tabulações e espaços
específicos.
Acompanhe este exemplo:
<PRE>
Este texto está pré-formatado. A fonte é monoespaçada e as entradas de

parágrafo,
assim como os espaços adicionais, são respeitadas.
Nesse caso, a margem esquerda foi aumentada em cinco caracteres.</PRE>.
O texto normal recebe fonte proporcional e ignora a presença de espaços a mais no

meio do texto. Entradas de parágrafos adicionais também são ignoradas.
50

No navegador o resultado é apresentado a seguir:
Figura 2.14 – Exemplo de fonte monoespaçada
Neste capítulo, vimos que o HTML é uma linguagem de marcação de textos

usada para descrever documentos de hipertextos na WEB. Ela descreve uma
página e o seu conteúdo, mas não a sua aparência.
Aprendemos, neste capítulo, a estrutura básica de um documento HTML, como

criar e visualizar arquivos em HTML simples. Além de exemplos contendo
diversas outras tags, meta tags e atributos de tags.
51

Capítulo 2
52

Capítulo 3
Listas e Vínculos 1
Seção 1
Listas
Nesta seção, você estuda agora os três tipos de lista em HTML.
Todas as tags de lista possuem em comum estes elementos:
- a lista inteira é delimitada pelas tags de abertura e fechamento referentes ao tipo

da lista;
- cada item da lista tem sua própria tag.
2016 . págs. xxx-xxx.
53

Capítulo 3
Listas Numeradas ou Ordenadas
As listas numeradas são delimitadas pelas tags <OL>...</OL> e cada item da lista
começa com a tag <LI>, onde:
OL = Ordered List (lista ordenada)
LI = List Item (item de lista)
A tag <LI> é unilateral, você não precisa especificar a tag de fechamento. A

existência da próxima <LI> ou da tag de fechamento </OL> indica o final desse
item na lista.
Listas ordenadas Quando o navegador interpreta uma lista ordenada, ele

são aquelas em numera (e em geral recua) cada um dos elementos de
que cada item
tem um número. forma sequencial. Você não precisa numerá-los.
<HTML>
<HEAD><TITLE> </TITLE></HEAD>
<BODY>
<OL>
<LI>item de uma lista numerada
<LI>item de uma lista numerada, que pode ser tão grande

quanto se queira, sem que seja necessário se preocupar com a
formatação das margens de texto
<LI>item de lista numerada
</OL>
</BODY>
</HTML>
54

Visualize o resultado em seu navegador:
Figura 3.1 – Exemplo no navegador de uma lista ordenada
Utilize listas numeradas somente quando quiser indicar que os elementos

estão ordenados, ou seja, nos casos em que os itens deverão ser
apresentados nessa ordem específica.
As listas numeradas têm vários atributos que você pode utilizar para personalizar
sua apresentação no navegador. Esses atributos permitem controlar várias
características das listas, incluindo o esquema de numeração a ser usado e a
partir de que número se vai iniciar a contagem (se você não quiser iniciar em 1).
Você pode personalizar listas ordenadas de duas maneiras:
•• como elas são numeradas;

•• em que número a lista começa.
A HTML fornece o atributo TYPE, que pode assumir cinco valores para
definir o tipo de numeração a ser usado na lista:
“1” - especifica que os algarismos arábicos padrões devem ser usados para
numerar a lista (isto é, 1, 2, 3, 4 etc.);
“a” - especifica que as letras minúsculas devem ser usadas para numerar a lista (isto
é, a, b, c, d etc.);
55

Capítulo 3
“A” - especifica que as letras maiúsculas devem ser usadas para numerar a lista
(isto é, A, B, C, D etc.);
“i” - especifica que os algarismos romanos minúsculos devem ser usados para
numerar a lista (isto é, i, ii, iii, iv etc.);
“I” - especifica que os algarismos romanos maiúsculos devem ser usados para
numerar a lista (isto é, I, II, III, IV etc.).
Os tipos de numeração podem ser especificados na tag <OL>, como no exemplo

a seguir, que utiliza o padrão TYPE=“a”.
<HTML>
<BODY>
<OL TYPE=”a”>
<LI>item de uma lista numerada, que pode ser tão grande quanto se
queira, sem que seja necessário preocupar-se com a formatação das margens de
texto
</OL>
</BODY>
</HTML>
56

Visualize o seguinte resultado no navegador:
Figura 3.2 – Exemplo de lista ordenada personalizada
Os navegadores da web geralmente ignoram os atributos que não

entendem. Por exemplo, se um navegador não suportar o atributo TYPE da
tag OL, ele simplesmente vai ignorá-lo quando o encontrar.
O atributo TYPE também pode ser aplicado na tag <LI>, mudando

efetivamente o tipo de numeração no meio da lista. Quando o atributo
TYPE é usado na tag <LI>, ele afeta o item em questão e todas as entradas
que venham a seguir na lista.
Usando o atributo START, você pode especificar o número ou letra que inicia
sua lista. O ponto inicial padrão é 1, é claro. Usando START, você pode mudar
esse número. Por exemplo, <OL START=4> iniciaria a lista no número 4, enquanto
<OL TYPE=“a” START=3> iniciaria a numeração com ‘c’ e percorreria o alfabeto a
partir daí.
57

Capítulo 3
Veja o exemplo a seguir.
<HTML>
<BODY>
<OL TYPE=”a” START=”3”>
<LI>item de uma lista numerada, que pode ser tão grande quanto se
queira, sem que seja necessário se preocupar com a formatação das margens de
texto
</OL>
</BODY>
</HTML>
O navegador apresenta o seguinte resultado:
Figura 3.3 – Exemplo no navegador de uma lista ordenada personalizada
58

Assim como no atributo TYPE, você pode mudar o valor do número de uma
entrada em qualquer ponto da lista. Isso é feito usando-se o atributo VALUE
na tag <LI>. A atribuição de um VALUE em uma tag <LI> reinicia a numeração na
lista a partir da entrada afetada, como no exemplo a seguir:
<HTML>
<BODY>
<OL>
<LI>item 1
<LI>item 2
<LI>item 3
<LI VALUE=55>item 55
<LI>item 56
</OL>
</BODY>
</HTML>
Veja o resultado na Figura 3.4, a seguir:
Figura 3.4 – Exemplo no navegador de uma lista ordenada personalizada
59

Capítulo 3
Listas com Marcadores Não ordenados ou Não

numerados
Listas não ordenadas são aquelas em que os elementos podem ser apresentados
em qualquer ordem. Essas listas se assemelham às listas ordenadas na HTML. A
diferença é que a lista é indicada pelas tags <UL>...</UL>, em vez de <OL>. Os
elementos da lista são separados por <LI>, como nas listas ordenadas. Confira o
exemplo:
<HTML>
<BODY>
<UL>
<LI>item 1
<LI>item 2
<LI>item 3
<LI>item 4
<LI>item 5
</UL>
</BODY>
</HTML>
Visualize na figura a seguir como ficará:
Figura 3.5 – Exemplo no navegador de uma lista com marcadores
60

Listas não ordenadas são aquelas em que os itens são marcadores ou

outros símbolos.
Assim como as listas ordenadas, as listas não ordenadas podem ser

personalizadas. De acordo com a especificação HTML, o atributo TYPE pode
receber três valores possíveis, quando apresentados no navegador.
•• d
isc - configura um disco ou marcador (este é o padrão), na maioria
das vezes representa um círculo preenchido;
•• square - configura um quadrado;
•• c
ircle - este marcador gera um círculo não preenchido em
navegadores compatíveis.
Confira o exemplo:
<HTML>
<BODY>
<UL TYPE=”disc”>
<LI>Fita
<LI>CD
<LI>DVD
</UL>
<UL TYPE=”square”>
<LI>Fita
<LI>CD
<LI>DVD
</UL>
61

Capítulo 3
<UL TYPE=”circle”>
<LI>Fita
<LI>CD
<LI>DVD
</UL>
</BODY>
</HTML>
Esse exemplo é assim visualizado:
Figura 3.6 – Exemplo no navegador de uma lista personalizada com marcadores
Cada item de uma lista com marcadores não ordenados também pode ter seu
atributo específico, por meio do TYPE na tag <LI>:
<HTML>
<BODY>
<UL>
<LI TYPE=”disc”>um item
<LI TYPE=”circle”>mais um item
<LI TYPE=”square”>último item
</UL>
</BODY>
</HTML>
62

Veja o resultado na Figura 3.7 a seguir:
Figura 3.7 – Exemplo no navegador de uma lista personalizada com marcadores
As listas com marcadores em HTML são equivalentes às listas com marcadores

do Microsoft Word. A diferença entre o resultado da marcação HTML e do Word
está na mudança dos marcadores, distinção que veremos mais adiante.
Listas de Definição ou de Glossário

As listas de definição são também chamadas ‘listas de glossário’. Elas são um
pouco diferentes das outras listas. Cada item de uma lista de glossário tem
estes dois componentes:
•• um termo;
•• a definição do termo.
Uma lista de glossário permite incluir uma descrição de cada item listado. O
descritor <DL> e os descritores <DT> e <DD> fazem essa função.
Cada componente da lista de glossário possui sua própria tag:
•• <DT>: para o termo (Definition Term)

•• <DD>: para a respectiva definição (Definition Definition)
Essas tags são unilaterais e, em geral, apresentadas aos pares, embora a
maioria dos navegadores possa tratar <tratar o quê?> com definições ou termos
específicos. A lista de glossário inteira é indicada pelas tags <DL>...</DL>
(Definition List)
63

Capítulo 3
Eis um exemplo de uma lista de glossário:
<HTML>
<BODY>
<DL>
<DT>termo a ser definido
<DD>definição
<DD>definição
</DL>
</BODY>
</HTML>
Considere a seguinte visualização:
Figura 3.8 – Exemplo no navegador de uma lista de glossário
Este tipo de lista é muito utilizado para diversos efeitos de organização de

páginas, pois permite a tabulação do texto. Um exemplo de ocorrência desta lista
são os índices de navegação presentes em muitas páginas de tutoriais na web.
64

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.
<HTML>
<BODY>
<DL>
<DD>definição
<OL>
<UL>
<LI>item de uma lista
</UL>
</OL>
<DD>definição
</DL>
</BODY>
</HTML>
65

Capítulo 3
O recuo de listas aninhadas no próprio código HTML ajuda a mostrar no layout

final, o seguinte relacionamento entre as listas:
Figura 3.9 – Exemplo no navegador de listas aninhadas
Boa parte dos editores HTML (WYSIWYG ou não) insere marcações que não
existem em HTML. Exemplos típicos são </DD>, </DT>, e </LI>. Porém, como
essas tags não são reconhecidas pelos navegadores, elas não causam efeito
colateral algum nos documentos.
Um exemplo deste caso:
<HTML>
<BODY>
<UL>
<LI>Documentos básicos
<LI>Documentos avançados
<UL>
<LI>formulários
<UL>
66

<LI>formulários
<UL>
<LI>CGI
</UL>
<LI>contadores
<LI>relógios
</UL>
<LI>Detalhes sobre imagens
</UL>
</BODY>
</HTML>
Veja o resultado na figura a seguir.
67

Capítulo 3
Observe que essas mesmas listas também não apresentariam numeração em

formato 1.1, 1.2 etc., quando ordenadas e compostas:
1. Documentos básicos
2. Documentos avançados
»» formulários
»» CGI
»» contadores
»» relógios
3. Detalhes sobre imagens
Porém, por meio do atributo TYPE (HTML 3.2), pode-se lidar com a numeração
dos itens:
<HTML>
<BODY>
<OL TYPE=”I”>
<LI>Documentos básicos
<LI>Documentos avançados
<OL TYPE=”a”>
<LI >formulários
<OL TYPE=”i”>
<LI>CGI
</OL>
<LI>contadores
<LI>relógios
</OL>
<LI>Detalhes sobre imagens
</OL>
</BODY>
</HTML>
68

Abaixo o resultado apresentado no navegador do exemplo anterior.
Um outro exemplo de listas aninhadas são as listas de definição ou glossário.

Essas são definidas pela tag DL e seus itens por DT. A especificação dos itens é
feita pela tag DD. Abaixo um exemplo que mostra sua utilização.
<HTML>
<BODY>
<DL>
<DT>Imperadores do Brasil:
<DD>D. Pedro I
<DL>
<DD>Nome completo: Pedro de Alcântara Francisco Antônio

João Carlos Xavier de Paula Miguel Rafael Joaquim José Gonzaga Pascoal Cipriano
Serafim de Bragança e Bourbon
</DL>
<DD>D. Pedro II
<DL>
69

Capítulo 3
<DD>Nome completo: Pedro de Alcântara João Carlos

Leopoldo Salvador Bibiano Francisco Xavier de Paula Leocádio Miguel Gabriel
Rafael Gonzaga
</DL>
</DL>
</BODY>
</HTML>
Se você não está vendo diferença alguma entre as listas comuns e as que têm
atributos TYPE, isso se deve ao fato de seu navegador não estar reconhecendo
esses atributos como válidos. Trata-se de um navegador de versão antiga.
Deve-se pensar nisto quando usamos atributos mais recentes, pois nem todo
usuário poderá ver o resultado das novas marcações.
Seção 2
Comentários
Você pode incluir comentários em páginas em HTML para descrever a própria
página ou para fornecer alguma indicação de seu status. O texto inserido é
ignorado quando o arquivo em HTML é analisado. Os comentários nunca
são apresentados na tela – por isso são comentários. Eles têm um formato
semelhante ao seguinte:
<HTML>
<BODY>

</BODY>
</HTML>
70

Em versões mais atuais da HTML, você pode comentar também várias linhas
assim:
<HTML>
<BODY>

Aqui tem um exemplo de comentário!!
Ele não apareceu escrito!!
</BODY>
</HTML>
Visualize o resulta do exemplo acima na figura a seguir:
Figura 3.12 – Exemplo de comentário
71

Capítulo 3
Seção 3
‘Tudo’ sobre vínculos
Até agora, produzimos apenas um documento bastante simples, que poderia ser
composto com recursos muito mais sofisticados, em qualquer processador de
texto. Mas nessa seção, falaremos de documentos de hipertexto, que podem
fazer ligações com outros textos.
Com HTML é possível você fazer ligações de uma região de texto (ou imagem)
a um outro documento. O navegador destaca regiões e imagens do texto,
indicando que são ligações de hipertexto - também chamadas hypertext links
ou hiperlinks ou simplesmente links, como já apresentado nesta Unidade de
Aprendizagem.
Para criar um vínculo em HTML, você precisa de dois componentes:
•• o nome do arquivo (ou URL do arquivo) com o qual deseja

estabelecer o vínculo;
•• o
texto que será destacado no navegador e deverá ser selecionado
pelos usuários para acompanhar os vínculos.
Apenas este segundo componente estará visível na sua página. Quando você
clicar sobre o texto que aponto para o vínculo, o navegador reconhecerá o
primeiro componente como o local para onde deverá ‘ir’.
A tag de vínculo <A>

Para criar um vínculo em uma página em HTML, você deverá utilizar a tag de
vínculo <A>...</A>. Essa tag é chamada também de tag de âncora, pois pode
ser utilizada para criar âncoras para vínculos, como você aprenderá mais à frente.
No entanto, a tag de vínculo costuma ser mais utilizada, em geral, na criação de
vínculos com outras páginas. Dentro dessa tag, na forma de atributo, é colocada
a referência ao arquivo ligado. A referência indica a URL do documento. Quando
o usuário clicar sobre o trecho realçado pela âncora de hipertexto, o arquivo
ligado será requisitado ao servidor e mostrado na janela do navegador.
72

Atributos
A tag <A> tem vários atributos, utilizados conforme a ação associada ao link. Os
mais usados são:
•• HREF - indica o arquivo de destino da ligação de hipertexto ou o

endereço de uma página HTML.
•• TARGET - indica o frame em que será carregado o arquivo de
destino. NAME - marca um indicador, isto é, a região de um
documento como destino de uma ligação.
Veja o exemplo abaixo:
Neste exemplo, o texto ‘Acesse o Menu Principal’ aparece no navegador

realçado de alguma forma, normalmente, em uma cor diferente e sublinhado. O
cursor do mouse se transforma em uma mãozinha quando colocado sobre o texto
realçado. Ao clicar no link, o arquivo ‘menu.html’, do diretório ‘/cadastro/’ será
mostrado na tela.
Neste exemplo, as URLs não estão entre aspas. Caso elas apareçam entre aspas,
significa que o servidor vai considerar a diferença entre maiúsculas e minúsculas
(o que se chama de sensitivo à caixa) na hora de localizar o arquivo. Se, no
exemplo acima, o arquivo menu.html estivesse entre aspas e gravado no servidor
como MENU.html, o documento não seria localizado e o usuário receberia uma
mensagem de erro.
Referência de Hipertexto
Colocando uma URL no atributo HREF da tag <A>, pode-se ligar uma página com
qualquer outro documento disponível na internet, ou seja, é possível estabelecer
uma referência de hipertexto em função de Tags que criam links para outras
páginas da internet.
73

Capítulo 3
Pode-se fazer uma página com uma lista de páginas preferidas da rede com suas
devidas ligações de hipertexto.
Veja este modelo:
<HTML>
<BODY>
<a href=”http://enderecodapagina.htm”>Aqui vai o nome ou o endereço da página

para a qual você está apontando o link</a>
</BODY>
</HTML>
O resultado do exemplo anterior no navegador é apresentado a seguir: vamos

verificar o resultado no navegador?
Figura 3.13 – Exemplo de vínculo
Um visitante na sua página que clicar sobre o link UnisulVirtual será levado à
página principal do site.
Para criar um hiperlink em uma imagem, o código é muito semelhante, mas ao

invés de incluir um texto entre as tags <a>, incluímos uma imagem. No exemplo
abaixo foi criado um link para www.virtual.unisul.br na imagem iconeUnisulVirtual.
jpg. Mas poderia ser utilizado qualquer outra imagem para conter o link.
74

Veja este modelo:
<HTML>
<BODY>
<a href=”http://www.virtual.unisul.br”><img src=”iconeUnisulVirtual.jpg”></a>
</BODY>
</HTML>
No navegador ficará assim:
Figura 3.14 – Exemplo de vínculo em imagem
Links na mesma Página (âncora)

A tag <A> com o atributo NAME permite que você crie links internos na mesma
página, ou seja, faz com que a âncora indicada (por isso também chamado de
indicador) seja o destino de um link.
75

Capítulo 3
Observe este exemplo:
<HTML>
<BODY>
<A HREF=”#explicação”>Saiba mais sobre o meu site</A><P><hr>
Escrevendo um texto em HTML com vínculos.<P>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<A NAME=”explicação”>O meu site</A>
</BODY>
</HTML>
O exemplo acima, ‘Saiba mais sobre o meu site’ está vinculado à região chamada
‘O meu site’. Ou seja, quando um usuário clicar sobre ‘Saiba mais sobre o
meu site’, será levado para a região, na mesma página, chamada ‘Meu site’. O
caractere ‘#’ indica que se trata de um link em uma mesma página.
Como foi dito anteriormente, o atributo NAME permite indicar um trecho de

documento como ponto de chegada de uma ligação hipertexto.
Veja o resultado na Figura 3.15 a seguir:
Figura 3.15 – Exemplo de link na mesma página
76

No exemplo do navegador acima, quando o usuário clicar em “Saiba mais sobre

o meu site”, o link levará o usuário a mesma página, onde foi marcado o ponto de
chegada, nesse caso “O meu site”. Veja na Figura 3.16:
Figura 3.16 – Exemplo de link na mesma página
Quando construímos links para trechos determinados de outros documentos,

precisamos saber quais trechos do documento destino estão marcados para
ponto de chegada de um link.
Lembre-se de que os nomes das âncoras não contêm caracteres #.

Somente os vínculos correspondentes contêm esses caracteres.
Uma referência a uma outra parte do mesmo documento é particularmente útil

quando se está fazendo o índice de um texto. Vejamos um outro exemplo:
<A HREF=#cap1>Capítulo 1</A>
Enquanto o alvo do link fica dessa forma:
<A NAME=cap1>Capítulo 1</A>
Neste exemplo, quando o usuário clicar sobre o link <A HREF=#cap1>Capítulo 1</
A>, ele será remetido ao ponto onde está a referência <A NAME=cap1>Capítulo 1</
A>. A parte do texto que é referenciada (o alvo de um link) não fica realçada como
os hyperlinks. Além de ser invisível, não é obrigatório que exista um link apontando
para ele.
77

Capítulo 3
As âncoras fazem distinção entre maiúsculas e minúsculas. Por isso, se

o navegador não conseguir localizar o nome de uma âncora que tenha a
grafia exata, é possível que ele tente selecionar outro nome semelhante
contido na página. Isso varia em função do comportamento do navegador.
Link para e-mail

A tag <A> também permite que os visitantes mandem e-mail para o autor do site,
ao clicar no endereço. É possível esta ação a partir do seguinte modelo:
<A HREF=mailto:joao@unisul.br>Mande-me um e-mail</A>
Vínculos de Páginas Locais por meio de Nomes de Caminhos Absolutos e

Relativos
Aqui você verá exemplos de como estabelecer vínculos entre páginas que
estejam contidas na mesma página ou em diferentes pastas (ou diretórios) de
seu disco local (páginas 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 diretório em que está
armazenado o arquivo atual. Isso ocorre mesmo se o arquivo atual e o arquivo
com que se está estabelecendo o vínculo estejam armazenados em um servidor
localizado em algum outro ponto da rede. Os dois arquivos estão contidos
no mesmo diretório nesse servidor. Essa é a forma mais simples de nomear o
caminho relativo.
O caminho relativo pode ser usado sempre que queremos fazer referência a
um documento armazenado no mesmo servidor do documento atual.
O nome de um caminho relativo pode conter também o nome de diretório(s) ou

indicar o caminho que você tomaria para navegar até esse arquivo, se tivesse
partido do diretório ou pasta atual. Um nome de caminho pode conter, por
exemplo, as direções a serem percorridas para subir dois níveis de diretório e, em
seguida, descer outros dois para obter acesso ao arquivo.
78

Não esqueça!
Os nomes de caminhos relativos indicam os arquivos com base em sua
localização relativa, ou seja, na posição em que se encontram em relação
ao arquivo atual.
A tabela abaixo mostra alguns exemplos de nomes de caminhos relativos e seus

significados:
Nome do caminho Descrição

HREF=“arquivo.html” Arquivo.html está localizado na pasta atual.
HREF=“docs/arquivo.html” Arquivo.html está localizado na pasta (ou

diretório) docs e a pasta docs está localizada
na pasta atual.
HREF=“../arquivo.html” Arquivo.html está localizado na pasta situada

um nível acima da pasta atual (pasta ou
diretório superior)
HREF=“../../docs/arquivo.html” Arquivo.html está localizado na pasta docs,

sendo que essa pasta está localizada dois
níveis acima da pasta atual.
Veja o <A HREF=”exemplos/doc2.html”>exemplo de caminho relativo</A>.
A referência cruzada entre arquivos armazenados no mesmo computador, mas

em diretórios diferentes, merece bastante atenção. Digamos que existam dois
diretórios colocados no mesmo nível. Um chamado música e o outro comida. Um
arquivo chamado ‘rock.htm’, do diretório música deve fazer uma referência ao
arquivo ‘feijoada.htm’, do diretório comida. A âncora de hipertexto do documento
‘rock.htm’ deve ficar assim:
<A HREF=../comida/feijoada.htm>Tudo sobre feijoada</A>
Pode-se colocar referências do tipo <A NAME> em um documento longo, para

que outras pessoas que estejam navegando na web possam fazer ligações para
determinadas partes do texto.
Para citar uma determinada parte de outro texto, a referência é:
<A HREF=exemplo.htm#capitulo1>Capítulo 1 do Exemplo</A>
Nesse caso, ‘exemplo.htm’ é o nome do arquivo referenciado e ‘capítulo1’ é a

referência a uma parte daquele texto.
79

Capítulo 3
Para usar links com caminhos relativos é preciso, portanto, conhecer a estrutura
do diretório do servidor no qual estamos trabalhando. Quando há alguma dúvida,
o melhor é usar o caminho absoluto.
Caminho Absoluto
Utilize o caminho absoluto quando desejar referenciar um documento que esteja
em outro servidor.
No vínculo 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 essa mesma sintaxe, é possível escrever links para qualquer servidor de
informações da internet.
Veja este outro exemplo:
São Carlos é um <A HREF= “/ambiente/saocarlos/histprog.html#polo”>polo de

alta tecnologia</A>.
Nesse caso, foi produzido um link para um parágrafo marcado com <A
NAME=”polo”> no arquivo histprogr.html sobre a cidade de São Carlos, no
diretório /ambiente/saocarlos/.
Cores dos Hyperlinks

Da mesma forma que é possível 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 condição: visitados, nunca visitados e ativos. Assim, os
navegadores sabem quais foram os hyperlinks já visitados pelo usuário em um
determinado período de tempo. Por isso, a cor dos links já visitados deve ser
diferente da cor das referências nunca visitadas. Além disso, o link pisca em uma
cor ainda diferente dessas duas, logo depois que é clicado pelo usuário.
A cor dos links é definida no tag <BODY>, como já foi estudado nesta Unidade de
Aprendizagem.
<BODY LINK=”red” ALINK=”blue” VLINK=”green”>
80

Onde:
LINK - determina a cor dos links não 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 não confundir os usuários, a cor
dos links já visitados deve ser uma versão mais clara da cor das ligações ainda
não visitadas.
Chegando ao final deste capítulo, vimos como criar diferentes tipos de listas em
html. Elas servem para dispor itens em uma sequência organizada. Em outra
seção, aprendemos a comentar linhas e blocos de código em html, a fim de
registrar alterações e documentar o html.
Aprendemos também que vínculos podem existir de uma página para outra,
inclusive para páginas de outro site. Links podem ser utilizados inclusive dentro
de uma mesma página, podendo ser utilizado para ir para uma determinada área.
Tanto texto como imagem podem conter os links, tudo depende da criatividade e
necessidade.
81

Capítulo 3
82

Capítulo 4
Formatação de Texto
Seção 1
Estilos de Caracter
Neste capítulo, vamos aprender um pouco mais sobre o que a HTML oferece
no que diz respeito à formatação do texto e à elaboração do layout das páginas.
Veremos várias tags e atributos para a formatação. Não é necessário decorar as
tags, mas aprender os tipos e como se pode utilizar no HTML.
Quando você utiliza uma tag HTML em parágrafos, cabeçalhos ou listas, essas
tags afetam esse bloco de texto como um todo, alterando a fonte, o espaçamento
acima e abaixo da linha ou incluindo caracteres, como as listas com marcadores.
Os estilos de caracter são 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, por meio do negrito, sublinhado.
Há dois tipos de formatação em HTML:
•• as tags de estilo lógico;

•• e as tags de estilo físico.
Os efeitos de apresentação na tela, a partir desses dois tipos de formatação,
são os mesmos. O motivo da distinção entre eles se deve à ideia básica de
independência entre especificação e apresentação. Então, para alterar a
aparência de um conjunto de caracteres contidos no texto, você pode usar esses
dois estilos.
83

Capítulo 4
Estilos Lógicos
As tags de estilo lógico indicam como o texto destacado deverá ser utilizado
e não como será apresentado (formatado). Elas se assemelham às tags de
elementos comuns, utilizadas para parágrafos ou cabeçalhos. Essas tags podem
indicar uma definição, um segmento de código ou uma palavra enfatizada.
Quando formatamos um trecho de texto como cabeçalho de nível 1, não

explicitamos se esse tipo de cabeçalho deve apresentar alguma fonte
determinada, em um tamanho determinado, justificado à esquerda ou à direita, ou
centralizado. Esses detalhes de apresentação são deixados para o navegador, o
dispositivo de apresentação do documento, que pode ser configurado de acordo
com o usuário final.
Desse modo, além de facilitar enormemente o trabalho de quem escreve

os documentos, a linguagem garante a uniformidade de apresentação dos
cabeçalhos, parágrafos, listas etc.
A formatação lógica segue o significado lógico do texto marcado: um endereço

de e-mail, uma citação etc. Sua apresentação final varia conforme o navegador,
podendo oferecer resultados mais ricos.
Cada tag de estilo de caracter contém lados de abertura e de fechamento e afeta

o texto contido entre essas duas tags. Existem 8 tags padrão para esse estilo:
84

Tabela 4.1- Estilos Lógicos
Tag de
Definição Exemplo
Estilo Lógico
<CITE> Para títulos de livros, filmes, e <CITE>Assisti Guerra nas Estrelas
citações curtas. umas oito vezes!</CITE>
<P> Este trecho foi citado no livro X

<CITE>(Silva, 2006)</CITE></P>
<CODE> Para indicar trechos de código de <CODE>for (x=0); cl &&(!feof(stdin));

programas. x++)); </CODE>
<CODE>#include “teste.h”#</CODE>
<DFN> Indica definição de uma palavra <DFN>CERN: Centre d'Éstudes et

ou expressão. Em geral, apresenta Recherches Nucleaires </DFN>
o texto em itálico.
<EM> Ênfase. Indica que os caracteres É preciso pesquisar <EM>muito</

deverão ser enfatizados de EM> para encontrar o termo exato.
alguma forma. Em geral,
apresentada em itálico.
<KBD> Indica uma entrada via teclado, ou Para ler mensagens recebidas, digite
seja, o texto a ser digitado pelo <KBD> pine -i </KBD>
usuário.
<SAMP> Indica uma sequência de O resultado do primeiro applet
caracteres, por exemplo, uma é: <SAMP> Hello, World! </
mensagem de erro ou um SAMP>
resultado ou um texto de exemplo.
Semelhante a <CODE>.
<STRONG> Forte ênfase, mostrado Antes de enviar um e-mail,
normalmente em negrito. <STRONG> confira o campo
“Subject:”! </STRONG>
<VAR> Indica variáveis ou valores No campo Login, escreva <VAR>
que o usuário deverá escrever. guest. </VAR>
Geralmente mostrado em itálico
ou sublinhado.
Fonte: LEMAY, 1998.
85

Capítulo 4
Estilos Físicos
A formatação física especifica o estilo que se quer para o texto. Ou seja, existe
um conjunto de tags que altera realmente o estilo de apresentação de um texto:
itálico, grifado, negrito, espaçamento etc. Sua apresentação final não sofre
grandes variações. Assim como as tags de estilos de caracter lógico, cada tag de
formatação física contém uma tag de abertura e uma tags de fechamento. As tags
de estilo físico são as descritas abaixo:
Tabela 4.2 - Estilos Físicos
Tag de
Definição Exemplo
Estilo Físico
<B> Negrito (Quando disponível em <B>Texto em negrito</B>
alguns navegadores pode aparecer
sublinhado).
<I> Itálico. <I>Texto em itálico</I>
<TT> Fonte de máquina de escrever <TT>Texto monoespaçado </

com espaçamento uniforme TT>
(monoespaçada).
<U> Sublinhado. <U>Texto sublinhado</U>
<STRIKE> ou <S> Tachado. <S>Texto Tachado</S>
<BIG> Fonte maior que a do texto ao Testando a <BIG>fonte</BIG>
redor. maior.
<SMALL> 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.
Utilize a Tag <U> com cuidado, pois ela se confunde com a apresentação
de links.
As tags de estilo podem ser usadas umas sobre as outras, acumulando seus
efeitos. Você pode aninhar tags de caracter, como nos exemplos abaixo:
86

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<B><I>Texto em negrito e itálico</I></B><P>
<B><TT>Texto monoespaçado em negrito</TT></B><P>
<I><TT>Texto monoespaçado em itálico</TT></I><P>
<B><TT><I>Texto monoespaçado em negrito e itálico</I></TT></B>
</BODY>
</HTML>
Na figura abaixo vemos o código exibido no navegador:
Figura 4.1 – Exemplo de tags de estilo
Ao contrário de <PRE>, a tag <TT> ignora espaços em branco adicionais e

entradas de parágrafo no meio do texto. Em relação ao espaçamento, 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 não poderão ser representadas visualmente.
87

Capítulo 4
Seção 2
Caracteres Especiais
Não é recomendável que os documentos web contenham acentos. Ainda
que todos os navegadores existentes entendam a presença de um caractere
acentuado, existem ocasiões em que o texto em HTML pode ficar truncado.
Os arquivos HTML são textos ASCII que não devem conter formatação ou
ASCII (American caracteres especiais. Na verdade, os únicos caracteres que
Standard Code
deverão incluir nos seus arquivos HTML são os que constam
for Information
Interchange) é um no seu teclado. Se você tiver de pressionar qualquer tecla
que não seja a tecla SHIFT ou uma combinação complexa
conjunto de códigos
para o computador de teclas para produzir um único caracter, então você não
representar números,
poderá utilizá-lo no seu arquivo em HTML. Isso se aplica
letras, pontuação e
outros caracteres.também a caracteres que talvez você esteja acostumado a
usar, como travessões, por exemplo.
Mas, espere um instante! Sabemos o que você está pensando: se eu

posso digitar um caracter, como um marcador ou um ‘a’ acentuado no
meu teclado por meio de uma sequência 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, nesse caso, é que a codificação interna feita pelo seu computador
para produzir esse caracter, que permite a apresentação de forma apropriada
no seu arquivo em HTML e no seu navegador), provavelmente não poderá
ser convertida em outros computadores. Se uma outra pessoa estiver lendo
o seu arquivo HTML na internet com esse caracter especial, é provável que
acabe vendo outro caracter na tela, o que costumamos chamar de “lixo”. Ou,
dependendo de como a sua página for apresentada na internet, o caracter poderá
se perder antes de chegar ao computador em que o arquivo está sendo exibido.
E o que você pode fazer?
A HTML oferece uma solução razoável. Ela define um conjunto especial de

códigos, que são chamados de entidades de caracter. Você pode incluir essas
entidades nos seus arquivos em HTML para representar os caracteres que deseja
usar. Quando interpretadas pelo navegador, essas entidades são apresentadas
como caracteres apropriados para a plataforma e a fonte especificadas.
88

Por exemplo, quando alguém copia uma página web e a envia para outra pessoa
por meio de correio eletrônico. Para contornar esse problema, existe uma tabela
de códigos que substituem os acentos. Os navegadores transformam esses
códigos em caracteres acentuados e o documento poderá ser transmitido por
qualquer meio.
A linguagem HTML permite que caracteres especiais sejam representados por

sequências de escape, indicadas por três partes: um ‘&’ inicial, um ‘número’ ou
‘cadeia de caracteres’ correspondente ao caracter desejado, e um ‘;’ final. Dessa
forma, para usar a palavra “café” no seu arquivo HTML, você deveria usar:
Café
ou
Café
Na figura abaixo vemos o código exibido no navegador.
Figura 4.2 - Exemplo de visualização do uso de caracteres especiais
No exemplo acima, eacute e #233 equivale ao caracter e acentuado na tabela

ASCII.
Suponha agora que você queira incluir em um arquivo em HTML uma linha de
código semelhante a essa:
<CODE>se (x < 0) então</CODE>
89

Capítulo 4
A HTML não é capaz de representar essa linha da forma como foi digitada.
Por quê? O problema está relacionado ao caractere < (menor que). Para um
navegador HTML, esse caractere significa “este é o início de uma tag”. Como
nesse contexto o caractere < (menor que) não representa o início de uma tag,
o navegador ficará confuso. Outro problema trata da acentuação da palavra
“então”, que deverá ser substituída pela sequência correspondente. Dessa forma,
para ser gravada de forma correta para a HTML, essa linha de código deveria ser
apresentada da seguinte forma:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<CODE> se (x<0) então</CODE>
</BODY>
</HTML>
Acompanhe a visualização do texto em questão:
Figura 4.3 - Exemplo de visualização de uma linha de código de programa
90

Quatro caracteres ASCII (<, >, & e “) têm significados especiais em HTML e são
usados dentro de documentos seguindo esta correspondência:
Tabela 4.3 - Codificação Caracteres Especiais
Entidade Caracter
< <
> >
& &
" “
Outras sequências de escape suportam caracteres ISO Latin1(ASCII com

extensões para idiomas europeus). Aqui está uma tabela com os caracteres mais
utilizados em português:
Tabela 4.4 - Codificação caracteres acentuados
Entidade Caracter Entidade Caracter
á Á Á Á
â Â Â Â
à À À À
ã Ã Ã Ã
ç Ç Ç Ç
é É É É
ê Ê Ê Ê
í Í Í Í
ó Ó Ó Ó
ô Ô Ô Ô
õ Õ Õ Õ
ú Ú Ú Ú
ü Ü Ü Ü
91

Capítulo 4
Como vemos, as sequências de escape são sensíveis à caixa (alta ou baixa). Os

editores de HTML fazem essa tradução automaticamente.
Alguns editores, no entanto, mantêm a acentuação sem usar as entidades de

formatação. Quando isso acontece, deve-se inserir uma indicação do esquema
de codificação ISO Latin1, escrevendo:
<HTML>
<HEAD>
<TITLE>...</TITLE>
<META HTTP-EQUIV=”Content-Type”
CONTENT=”text/html; charset=ISO-8859-1”>
</HEAD>
</HTML>
Existem alguns símbolos que vêm sendo incorporados ao conjunto de caracteres

reconhecidos em HTML. Por exemplo:
•• © para o símbolo ©;

•• ® para ®, e;
•• § para §.
Por que usar essas formatações?

Por causa de um problema técnico relativo à transmissão dos caracteres especiais
de várias línguas.
Chama-se conjunto de caracteres uma representação digital de texto. O conjunto

de representação amplamente utilizado é o ASCII. O ASCII padrão tem 7 bits,
porém, são usadas versões particulares desse padrão - o ASCII americano, ASCII
português etc., que utilizam 8 bits.
Se você gera um texto em ASCII de 8 bits e, na transmissão, esse texto é tratado

por um sistema que “compreende” apenas o ASCII de 7 bits, então, os caracteres
especiais serão transformados em caracteres diferentes, pela perda do oitavo bit.
Por exemplo, como usuário da Internet, você já deve ter sofrido experiência
semelhante com mensagens de e-mail, que chegam com caracteres estranhos, ou
páginas da web com textos em japonês ou russo.
92

Seção 3
Formatação do Texto
A tag <FONT> é usada para controlar as características de determinado conjunto
de caracteres, que, por sua vez, não é representado pelos estilos de caracter
Lógico e Físico, como vimos na seção 1 deste capítulo. Originalmente, essa tag
era usada apenas para controlar o tamanho da fonte dos caracteres delimitados
por ela. Mas esta tag tem sido expandida no sentido de permitir que você altere a
própria fonte e a cor desses caracteres.
Tamanho da Fonte
O uso mais comum da tag <FONT> consiste em alterar o tamanho da fonte
de um caracter, palavra, frase ou qualquer texto. As tags <FONT> e </FONT>
delimitam o texto e o atributo <SIZE> indica o tamanho a ser atribuído à fonte.
Os valores desse atributo variam de 1 a 7 e o valor 3 corresponde ao tamanho
padrão. O modelo é o seguinte:
<FONT SIZE=tamanho_da_letra>Texto</FONT>
A formatação acima permite que o autor do documento altere o tamanho das

letras em trechos específicos de texto. Veja o exemplo a seguir:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<FONT SIZE=7>Texto</FONT>
</BODY>
</HTML>
93

Capítulo 4
Figura 4.4 – Exemplo de visualização de tamanho de fonte
Você pode também indicar o tamanho na tag <FONT> como um valor relativo,
por meio da utilização dos caracteres + ou - no valor do atributo SIZE. Como
o padrão é 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>
A tag <FONT> pode ser atribuída a qualquer parte do texto, com exceção dos
títulos. É possível também alterar o tamanho do texto. Para isso, utiliza-se o
atributo SIZE. Mas não existe nenhuma relação entre os valores no atributo SIZE
e o número de pontos (pixels - a unidade utilizada para medir os caracteres).
Portanto, o melhor é experimentar todos os tamanhos e avaliar o resultado no
navegador. Observe os exemplos:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
94

<FONT SIZE=7>Texto com FONT SIZE=7</FONT><P>
<FONT SIZE=1>Texto com FONT SIZE=1</FONT>
</BODY>
</HTML>
Acompanhe a visualização a seguir:
Figura 4.5 - Exemplo de visualização de vários tamanhos de fonte
Fonte: Elaboração dos autores, 2016
A tag <FONT> também pode ser utilizada com um atributo diferente para cada
letra. A aplicação mais óbvia é a colocação de uma capitular, aquela letra em
tamanho maior no início de um parágrafo.
95

Capítulo 4
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<FONT SIZE=7>T</FONT><FONT SIZE=4>exto</FONT>
</BODY>
</HTML>
Figura 4.6 – Exemplo de visualização de tamanho de fonte diferente entre os caracteres de um texto
Como alterar o tipo da fonte

O Internet Explorer, navegador da Microsoft lançado no segundo semestre de
1995, trouxe a novidade de permitir a mudança do tipo de caractere do texto.
96

Assim, o autor de uma página web pode definir com esse navegador qual será
o tipo de fonte de determinada parte do texto, mas o usuário 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 também 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 vírgulas. Quando um navegador
que oferece suporte ao atributo FACE interpretar uma página que o contém, ele
localizará no sistema cada um nos dos nomes de fonte especificados. Se não
conseguir encontrar o primeiro nome, procurará o segundo, depois, o terceiro,
e assim por diante, até localizar uma fonte que esteja instalada no sistema. Se
nenhuma das fontes especificadas for localizada, será utilizada a fonte padrão.
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.
Veja o exemplo a seguir:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<FONT face=”arial” SIZE=6 COLOR=”red”>O texto será escrito em

vermelho, com fonte arial e tamanho 6.</FONT>
</BODY>
</HTML>
97

Capítulo 4
Acompanhe a visualização na Fígura 4.7:
Figura 4.7 - Exemplo de visualização de formatação de texto
Cores diferentes
As cores são introduzidas por meio do elemento <FONT>, com o atributo COLOR,
usando o sistema RGB (red, green, blue) para cores, como já comentado na
seção 2 do capítulo 2:
<FONT COLOR=”#rrggbb”>Texto</FONT>
Assim, um trecho de texto pode ter uma cor diferente da definição geral de
cores, feita por meio dos atributos de <BODY>. Para alterar a cor, podemos
utilizar o sistema RGB, como escrever o nome da cor indicada (porém,
navegadores antigos não aceitam este último). Essas duas formas de mudar a cor
do texto apresentam o mesmo resultado no navegador.
<FONT COLOR=”ffffff”>Texto na cor branca</FONT>
ou
<FONT COLOR=”white”>Texto na cor branca</FONT>
98

Ainda, é possível ter texto de várias cores na mesma página.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<FONT COLOR=”white”>Texto em branco</FONT>,
<FONT COLOR=”blue”>azul</FONT>,
<FONT COLOR=”green”>verde</FONT> e <FONT COLOR=”red”>vermelho</

FONT>
</BODY>
</HTML>
Confira a visualização a seguir:
Figura 4.8 - Exemplo de visualização de formatação de cores em textos.
99

Capítulo 4
Também podemos realizar uma alteração simultânea 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.9 - Exemplo de visualização de formatação de caracteres
100

Seção 4
Endereços
A tag <ADDRESS> é utilizada para entidades de assinaturas em páginas da
web. Ela é usada para formatar endereços, e-mail e referências a autores de
documentos. As tags de endereço em geral são apresentadas na parte inferior
de cada página da web e utilizadas para indicar quem criou tal página. Veja o
exemplo:
<HTML>
<HEAD>
<TITLE>Décimo exemplo</TITLE>
</HEAD>
<BODY>
Envie suas dúvidas sobre a entrega de seu material para
<address>monitorvirtual@unisul.br</address>
</BODY>
</HTML>
No navegador, fica assim:
Figura 4.10 - Exemplo do uso de endereços no seu navegador
101

Capítulo 4
Vimos neste capítulo como utilizar a maioria das tags e atributos de formatação
de estilos de caracteres. Existem muitas combinações possíveis entre as tags
e os seus atributos, a sua criatividade e necessidade serão os guias na sua
utilização.
Por fim, lembre-se de ficar atento aos caracteres especiais e caracteres

acentuados, pois não é recomendado que se utilize estes caracteres em HTML.
102

Capítulo 5
Uso de Imagens, Painéis de

Fundo e Arquivos de Música
Seção 1
A Tag <Img> e seus atributos
O HTML torna muito fácil para você a tarefa de mostrar imagens dentro de
um documento. Porém, as imagens devem estar em formato específico.
Normalmente, as imagens mais utilizadas em páginas web têm as terminações:
.jpg, .gif ou .png. Cada extensão de imagem possui suas vantagens e
desvantagens.
O formato jpg (ou jpeg) pode trabalhar com esquema de cores de 24 bits,
aceitando assim 16,8 milhões de cores. A qualidade da imagem é boa, mas
também não permite transparência. O tamanho é bem reduzido, se comparado
com o .bmp, mas ainda é grande para páginas que utilizam muitas imagens.
Os gifs trabalham com apenas 256 cores, de forma que o tamanho é o menor
de todos os formatos, permitindo também transparência e animações. É um dos
formatos mais utilizados na web, justamente pela rapidez em carregar as imagens.
Porém, 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 milhões de cores, suportando também a transparência e com
tamanho menor que o formato .jpg, pois utiliza um algoritmo mais eficiente para
compressão da imagem. É um pouco maior que o .gif, por causa da qualidade da
imagem, que é bem superior. Atualmente, é um formato bastante utilizado.
103

Capítulo 5
Hoje em dia, existem muitos programas de edição de imagens, como por

exemplo, o Adobe Photoshop, Paint Shop Pro, CorelDraw etc., que fornecem
meios de promover a conversão entre formatos de imagens. Existem também
programas freeware e shareware para várias plataformas, destinados exatamente
à conversão entre formatos de imagens.
Alguns editores de imagens tentarão gravar os arquivos com extensões

compostas por letras maiúsculas (.GIF, .JPEG). Embora essas extensões sejam
corretas, há distinção entre letras maiúsculas e minúsculas nos nomes das
imagens, bem como nos nomes de arquivo em HTML. Por isso, GIF não é a
mesma extensão que gif. A grafia da extensão não é 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 possível, utilize letras minúsculas.
Graças aos formatos .jpg, .gif e .png, é possível utilizar imagens em diferentes
aplicações, até mesmo na definição de layout das páginas. A escolha do tipo
de imagem não pode ser arbitrária, deve ser levado em consideração todas
as vantagens e desvantagens, principalmente no que se refere à qualidade e
tamanho.
Um boa prática é utilizar .png ou .jpg para imagens fotográficas e .gif para
imagens criadas em computador ou desenhadas (ícones, botões etc.).
Os formatos de imagem explicados aqui são os mais utilizados e compatíveis

com os diversos tipos de navegadores, porém, existem vários outros tipos de
imagens, cada um com características e finalidades diferentes.
Para a inserção de imagens num documento, é necessário utilizar a tag <IMG>.

Essa tag tem conteúdo vazio, o que significa que ele apenas possui atributos e
não 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 página faz-se por meio do atributo
SRC, que é uma abreviação de “source” ou origem. Esse atributo indica o nome
e o local em que pode ser encontrada a pasta que contém a imagem que você
deseja incluir e deve ser digitado entre aspas. Esse é o atributo mais importante
da tag <IMG>.
A forma genérica mais simples de expressar a tag IMG e o seu atributo SRC é a
seguinte:
<IMG SRC=”url_imagem”>
104

Nesse caso, a url_imagem aponta para o local onde se encontra a pasta que
contém a imagem. Pode, também, ser referenciada uma imagem que esteja
em um outro servidor (o que, logicamente, não é conveniente). Por exemplo, se
quisermos mostrar o ícone que aparece na página da Unisul Virtual, devemos usar
o URL:
,https://minha.unisul.br/pa89prd/uni_imagens/topoEsquerda.gif>
Então, o código ficaria assim:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG SRC=”https://minha.unisul.br/pa89prd/uni_imagens/topoEsquerda.gif”>
</BODY>
</HTML>
A imagem será desenhada no local que corresponde à tag <IMG> dentro do

documento HTML, fazendo referência àquele servidor.
Figura 5.1 – Exemplo do uso de imagem por meio de uma página na internet
105

Capítulo 5
O exemplo seguinte ilustra um outro uso desta tag, onde o arquivo de imagem
“html.jpg” encontra-se na pasta imagens:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG SRG=”.imagens/html.jpg”>
</BODY>
</HTML>
Para visualizar o código acima no seu navegador, você precisa ter a figura
chamada html.jpg na pasta imagens, que está dentro da pasta onde está gravado
o código HTML acima. Na figura abaixo vemos o resultado no navegador.
Figura 5.2 - Exemplo do uso de imagem no seu código html
Observe que o nome de caminho referente ao arquivo utiliza as mesmas regras de

nomes de caminhos usadas pelo atributo HREF em vínculos. Por isso, um arquivo
GIF denominado “imagem.gif”, contido na mesma pasta que o arquivo HTML,
poderá usar a seguinte tag:
106

<IMG SRC=“imagem.gif”>
Para um arquivo de imagem que esteja localizado uma pasta acima da pasta atual,
utilize esta tag:
<IMG SRC=”../imagem.gif”>
E assim por diante! Use sempre as mesmas regras que utilizaria para nomes
de página na parte HREF da tag <A>, como já foi estudado nesta Unidade de
Aprendizagem.
Quando o caminho não está correto ou o nome da figura está errado, o que
aparecerá no visualizador será algo assim:
Figura 5.3 – Exemplo do uso de imagem com caminho ou nome errado
Atenção!
Se sua imagem não for carregada e o seu navegador apresentar um ícone
com um x no lugar dela, verifique, antes, se você especificou corretamente
o nome e o caminho para o arquivo no código HTML. Se não for isso,
examine o arquivo de imagem para verificar se ela está realmente no
formato GIF ou JPEG e se tem a extensão de arquivo apropriada.
107

Capítulo 5
Outros Atributos Básicos de Imagem

A seguir, você vê outros atributos básicos de imagem: ALT, TITLE, WIDTH e
HEIGHT, BORDER, ALIGN, HSPACE e VSPACE.
ALT
De nada adianta você caprichar na produção de uma imagem, se a pessoa
que vê as páginas utiliza um navegador incapaz de mostrar as imagens. Estes
navegadores existem e são bastante utilizados, principalmente o Lynx.
Outros usuários também ajustam o navegador para não carregar imediatamente as

imagens. Por causa de conexões 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 função do texto alternativo. Pode-se colocar o título ou a melhor
descrição possível de uma imagem utilizando o atributo ALT. Veja a sintaxe abaixo:
<IMG SRC=”URL_imagem” ALT=”descrição_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 gráficos, como já citado. É
recomendável que esteja sempre presente, pois esse texto será mostrado, em vez
da imagem, caso o navegador não conseguir apresentá-la.
É uma legenda alternativa para a imagem. Abaixo um exemplo de descrição

utilizando o atributo ALT para a imagem. Visualmente nada é renderizado.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG SRC=”https://minha.unisul.br/pa89prd/uni_imagens/topoEsquerda.gif”
ALT=”Ícone Unisul Virtual”>
</BODY>
</HTML>
108

O atributo ALT deve ter uma descrição daquilo que a imagem contém para que
seja possível compreender o seu conteúdo, mesmo sem vê-la. A utilização
do atributo ALT é recomendada porque melhora a acessibilidade das páginas.
Esse atributo pode ser lido em voz alta pelo software de leitura utilizado pelas
pessoas que têm deficiências visuais. Nesses casos, sem o atributo ALT o
conteúdo das imagens seria sempre um mistério.
Dessa forma,
<IMG SRC=”/icones/newred.gif” ALT=”Novo!”>
é apresentado nos navegadores gráficos assim:
New!
e nos navegadores de texto assim:
[Novo!]
Se a imagem estiver em um diretório, ou pasta, diferente do arquivo de texto,

como no exemplo acima, é preciso especificá-lo na referência. Recomenda-
se que as imagens sejam colocadas em um diretório separado para facilitar a
manutenção dos arquivos.
Se a imagem não existir ou o caminho estiver incorreto o texto do atributo ALT é

exibido.
Figura 5.4 – Exemplo de imagem não encontrada com o atributo alt
109

Capítulo 5
TITLE
O atributo TITLE é um atributo que exibe uma caixa de mensagem com uma
descrição para uma imagem. Diferente do atributo ALT que aparece somente em
determinadas situações, o TITLE, basta passar o mouse sobre a imagem que a
descrição é exibida.
A sintaxe do atributo TITLE é apresentada abaixo:
<IMG SRC=”URL_imagem” TITLE=”descrição_da_imagem”>
É um texto descritivo para imagem. Abaixo um exemplo de descrição utilizando o

atributo TITLE para a imagem.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG SRC=”https://minha.unisul.br/pa89prd/uni_imagens/topoEsquerda.gif”
TITLE=”Ícone Unisul Virtual”>
</BODY>
</HTML>
Veja na imagem abaixo a visualização do exemplo:
Figura 5.5 – Exemplo de imagem com o uso do atributo alt
110

WIDTH e HEIGHT
WIDTH e HEIGHT são atributos de dimensão da imagem em pixels. Grande parte
dos editores HTML coloca automaticamente os valores desses atributos, quando
indicam a inserção de uma imagem. Veja a sintaxe abaixo:
<IMG SRC=”imagem” ALT=”descrição” WIDTH=”largura” HEIGHT=”altura”>
No exemplo abaixo, definimos as dimensões da imagem, veja:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG SRC=”imagens/clip.jpg” TITLE=”Clip” ALT=”Clip” WIDTH=”150”

HEIGHT=”175”>
</BODY>
</HTML>
Na figura 5.6 você pode conferir a visualização do resultado no navegador:
Figura 5.6 – Exemplo de imagem com atributos width e height
111

Capítulo 5
Uma das vantagens de se usar esses atributos é que o navegador pode montar
mais rapidamente as páginas, por saber, de antemão, o espaço que deverá ser
reservado a elas. Por isso, se as dimensões da imagem forem colocadas na
referência, o usuário terá a impressão de que a página foi carregada mais rápido.
Fornecendo as dimensões, o navegador reserva o espaço para a imagem e segue
carregando o texto para que o usuário possa começar a ler. Depois de carregado
o texto, as imagens começam a ser mostradas.
BORDER
Com o atributo BORDER é possível colocar uma borda em volta da imagem. O
valor da borda é expresso em pixels.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
Aqui você vê uma imagem:<P>
<IMG SRC=”imagens/clip.jpg” BORDER=”2” WIDTH=”150” HEIGHT=”175”>
Note que a imagem...<P>
</BODY>
</HTML>
Veja o resultado na figura a seguir, importante lembrar de criar um arquivo de

imagem chamado clip.jpg em um editor de imagens, e colocar na pasta imagens.
Figura 5.7 - Exemplo da utilização de borda em imagens
112

ALIGN
A tag <IMG> contém também 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=”descrição” ALIGN=alinhamento>
A tabela a seguir apresenta os três valores básicos para o atributo ALIGN,

segundo o HTML 2.0.
Tabela 5.1 – Valores básicos do atributo ALIGN
ALIGN= Definição
Top alinha a parte superior da imagem com os elementos
que estão ao redor.
Middle alinha o centro da imagem com os elementos que
estão ao redor.
Bottom alinha a parte inferior da imagem com os elementos
que estão ao redor.
Vamos verificar os atributos de alinhamento e seus resultados, logo a seguir.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG SRC=”imagens/clip.jpg” BORDER= “2” ALIGN=”top” WIDTH=”150”

HEIGHT=”175”>Alinha o texto adjacente com o topo da imagem, embora com
linhas compridas o resultado não seja muito bom, pois, provavelmente, a próxima
linha do texto irá para a linha abaixo da imagem.
</BODY>
</HTML>
113

Capítulo 5
Observe na figura 5.8 o resultado do exemplo apresentado.
Figura 5.8 - Exemplo de alinhamento de texto e imagem
O exemplo a seguir trabalha com os dois códigos :
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG SRC=”imagens/clip.jpg” BORDER= “2” ALIGN=”middle” WIDTH=”150”

HEIGHT=”175”>Alinha o texto adjacente com o meio da imagem, embora com
linhas compridas o resultado não seja muito bom, poispois, provavelmente, a
próxima linha do texto irá para a linha abaixo da imagem.
</BODY>
</HTML>
114

A visualização ficará da seguinte forma:
No próximo código, a imagem está alinhada na parte inferior dos elementos que
estão ao seu redor.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG SRC=”imagens/clip.jpg” BORDER= “2” ALIGN=”botton” WIDTH=”150”

HEIGHT=”175”>Alinha o texto adjacente com a parte de baixo da imagem. Se
existir mais texto no parágrafo, ele irá pular para a linha imediatamente após a
imagem.</BODY>
</HTML>
115

Capítulo 5
Veja a seguir a visualização do exemplo utilizado:
Quando não especificado o atributo ALIGN, o padrão utilizado pelo navegador

é o bottom. A inclusão de uma imagem em uma linha funciona bem quando
você tem apenas uma linha de texto. Se você tiver várias 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 apresentados anteriormente.
E se você quiser promover o retorno automático de várias linhas de texto

ao redor de uma imagem?
Com a HTML 2.0 isso não é possível. Você está, então, 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 limitação, novos valores para o atributo ALIGN da tag <IMG>
foram incorporados na HTML 3.2, abaixo a tabela com estes atributos e sua
definição.
Tabela 5.2 – Valores adicionais do atributo ALIGN
ALIGN= Definição
Right alinha uma imagem na margem direita.

Left alinha uma imagem na margem esquerda.
116

Mas o uso desses atributos faz também com que todo o texto localizado após
a imagem seja apresentado no espaço à direita ou à esquerda dessa imagem,
dependendo do alinhamento da margem. Veja os exemplos a seguir:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG SRC=”imagens/clip.jpg” BORDER= “2” ALIGN=”right” WIDTH=”150”

HEIGHT=”175”>ALIGN=”right” Alinha a imagem à direita do texto, e tudo o que
houver ao redor (texto, outras imagens), a partir do topo da imagem.
</BODY>
</HTML>
Confira o resultado:
117

Capítulo 5
No próximo código, a imagem está alinhada à esquerda dos elementos que estão
ao seu redor.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG SRC=”imagens/clip.jpg” BORDER= “2” ALIGN=”left” WIDTH=”150”

HEIGHT=”175”>ALIGN=”left” Alinha a imagem à esquerda do texto, e tudo o que
houver ao redor (texto, outras imagens), a partir do topo da imagem.
</BODY>
</HTML>
Veja a seguir a visualização do exemplo apresentado:
118

Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:
<HTML>
<HEAD>
<TITLE>Décimo terceiro exemplo</TITLE>
</HEAD>
<BODY>
<IMG ALIGN=”left” SRC=”imagens/clip.jpg” BORDER= “2” WIDTH=”150”

HEIGHT=”175”><IMG ALIGN=”right” SRC=”imagens/clip.jpg” BORDER= “2”
WIDTH=”150” HEIGHT=”175”>...e agora você pode escrever à vontade entre as
imagens, o texto que você desejar, sem a linha ir para abaixo da imagem...
</BODY>
</HTML>
Isso resulta em:
Figura 5.13 - Exemplo de visualização de texto entre duas imagens
Você pode incluir qualquer texto HTML após uma imagem alinhada e será
promovido o retorno automático do texto no espaço existente entre a imagem e
a margem ou entre 2 imagens, como no exemplo anterior. O navegador preenche
o espaço com texto até a parte inferior da imagem e, em seguida, continua a
preencher com texto o espaço existente abaixo dela.
119

Capítulo 5
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 necessário
interromper o fluxo de texto ao lado da imagem, pode-se usar a tag <BR> com o
atributo CLEAR=ALL, conforme exemplo abaixo:
<HTML>
<HEAD>
<TITLE>Décimo quarto exemplo</TITLE>
</HEAD>
<BODY>
<IMG ALIGN=”left” SRC=”imagens/clip.jpg” BORDER=”2” WIDTH=”150”

HEIGHT=”175”><IMG ALIGN=”right” SRC=”imagens/clip.jpg” BORDER=”2”
WIDTH=”150” HEIGHT=”175”>...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.
</BODY>
</HTML>
Visualização:
Note que o texto está contornando as imagens, mas somente até determinado
ponto:<BR CLEAR=all>. A partir desse ponto, o texto é jogado para a próxima margem
livre, em qualquer um dos lados da janela.
120

HSPACE e VSPACE
Com a capacidade de promover o retorno automático do texto ao redor de uma
imagem, é possível que você queira também ajustar o espaço existente ao redor
dessa imagem. Você pode controlar o espaço em volta da imagem colocando o
valor em pixels da margem desejada. É possível definir as margens separadamente
ou em conjunto. Os atributos HSPACE e VSPACE, introduzidos na HTML 3.2,
permitem isso.
O atributo VSPACE controla o espaço acima e abaixo da imagem. Ou seja, os

textos que forem escritos ao redor da imagem não ficarão grudados nela. A sintaxe
é a seguinte:
<IMG SRC=”imagem” VSPACE=”espaçovertical”>
O atributo HSPACE controla o espaço à esquerda e à direita da imagem. Ou seja,

os textos que forem escritos ao redor da imagem não ficarão grudados nela. A
sintaxe é a seguinte:
<IMG SRC=”imagem” HSPACE=”espaçohorizontal”>
Esses atributos surgiram para melhorar ainda mais a apresentação das imagens
junto com os textos. Também são conhecidos como atributos de moldura.
O efeito desses atributos pode ser percebido nos textos abaixo. No primeiro, as
imagens não têm atributos de moldura, é fácil notar como o texto fica “grudado”
na imagem:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
...e agora você pode escrever<IMG ALIGN=”left” SRC=”imagens/clip.jpg” BORDER=”2”

WIDTH=”150” HEIGHT=”175”>à 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=”imagens/clip.jpg” BORDER=”2” WIDTH=”150”
HEIGHT=”175”>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.
</BODY>
</HTML>
121

Capítulo 5
Veja o resultado do código na Figura 5.15:
Nesse segundo texto são usadas, respectivamente, as seguintes formatações:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
...e agora você pode escrever<IMG ALIGN=”left” SRC=”imagens/clip.jpg”

BORDER=”2” WIDTH=”150” HEIGHT=”175” VSPACE=”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=”imagens/
clip.jpg” BORDER=”2” WIDTH=”150” HEIGHT=”175” VSPACE=”40”>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.
</BODY>
</HTML>
122

Neste segundo texto, a primeira imagem surgirá no texto com espaçamento vertical
em relação ao texto e a segunda imagem com espaçamento horizontal em relação ao
texto. Veja o resultado mostrado na Figura a seguir:
Vamos testar?
Que tal, agora, você utilizar os alinhamentos em conjunto como no exemplo
abaixo? Faça um teste no seu navegador. Crie uma imagem chamada imagem.jpg
e guarde na mesma pasta do seu arquivo que contém o código HTML abaixo:
É possível utilizar os alinhamentos em conjunto. No código de exemplo a seguir,

existe um arquivo de imagem chamado image.jpg sendo referenciado duas vezes
no html. Cada imagem possui o seu alinhamento.
123

Capítulo 5
<HTML>
<HEAD>
<TITLE>Décimo sétimo exemplo</TITLE>
</HEAD>
<BODY>
...e agora você pode escrever <IMG ALIGN=”left” SRC=”imagem.jpg” WIDTH=”100”

HEIGHT=”50” 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” WIDTH=”100”
HEIGHT=”50” VSPACE=”30” HSPACE=”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
visível o uso dos atributos HSPACE e VSPACE. Podemos observar que as imagens não
aparecem tão grudadas agora ao texto. Isso em função dos valores <BR CLEAR=”all”>
atribuídos aos atributos HSPACE e VSPACE utilizados em conjunto na mesma tag IMG.
Na imagem à direita foi colocado uma borda com espessura 3.
</BODY>
</HTML>
O resultado no navegador este:
Cada um desses atributos (HSPACE e VSPACE) adiciona espaço nas duas faces
da imagem (em cima e em baixo e à direita e à esquerda). Portanto, não há como
definir uma margem maior apenas à esquerda ou somente na parte inferior.
124

Seção 2
Referência de hipertexto com imagem
Uma imagem pode funcionar como um vínculo?
É evidente que sim! Se você incluir a tag <IMG> entre as partes de abertura
e de fechamento de uma tag de vínculo (<A>), essa imagem funcionará como
um ponto ativo (que pode ser selecionado com um clique) referente ao próprio
vínculo. A sintaxe é basicamente a seguinte:
<A href=”URL”>
<IMG src=”nome da imagem” >
</A>
Se uma frase é marcada como âncora de um link, então ela se apresenta

sublinhada; se uma imagem se faz de âncora, então ela ganha uma borda que
indica a sua condição. Nesse caso, em vez de colocar o link em um texto, você
estará colocando o link em uma imagem. Veja o exemplo:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY BGCOLOR=”black” TEXT=”yellow”>
Texto
<A HREF=”pagina2.html”>
<IMG ALIGN=”left” SRC=”imagens/clip.jpg” WIDTH=”150” HEIGHT=”175”>
</A>
</BODY>
</HTML>
125

Capítulo 5
Verifique o exemplo na figura a seguir:
Figura 5.18 – Exemplo de imagem com link
Se você quiser uma borda mais larga, siga o exemplo:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<IMG ALIGN=”left” SRC=”imagens/clip.jpg” WIDTH=”150” HEIGHT=”175”

BORDER=”4”>
</A>
</BODY>
</HTML>
126

E confira o resultado na Figura 5.19:
Figura 5.19 - Exemplo do uso de imagem como link
Porém, por questões de apresentação, nem sempre interessa termos essa borda
ao redor da imagem. Assim, com o atributo BORDER, você pode controlar esse
detalhe.
<HTML>
<HEAD>
<TITLE>Vigésimo exemplo</TITLE>
</HEAD>
<BODY>
<IMG ALIGN=”left” SRC=”imagens/clip.jpg” WIDTH=”150” HEIGHT=”175”

BORDER=”0”>
</A>
</BODY>
</HTML>
127

Capítulo 5
Assim aparecerá no navegador:
Figura 5.20 - Exemplo do uso de imagem sem borda
Portanto, a borda pode ser apresentada tanto em imagens que não são âncora de
links como em links.
Se você incluir uma imagem e um texto na âncora, a imagem e o texto se

tornarão pontos ativos que conduzirão à mesma página. Veja o exemplo:
<HTML>
<HEAD>
<TITLE>Vigésimo primeiro exemplo</TITLE>
</HEAD>
<BODY>
<A HREF=”htt://www.google.com”>
<IMG SRC=”imagens/clip.jpg” WIDTH=”150” HEIGHT=”175” BORDER=”0”>
Clique para ir para a página do Google
</A>
</BODY>
</HTML>
128

A visualização deve ser esta:
As imagens que são pontos ativos referentes a vínculos 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 ver os
conteúdos das páginas. Por isso, use-as com cuidado!
129

Capítulo 5
Seção 3
Painéis de fundo com imagens
Você já deve ter visto páginas na internet com imagens de fundo. Essa seção
consiste no desenvolvimento da capacidade de usar uma imagem como painel
de fundo para as suas páginas HTML, em vez de utilizar simplesmente um fundo
de determinada cor. Quando você usa uma imagem em um painel de fundo, ela é
apresentada “lado a lado”, ou seja, é repetida em fileiras para preencher a janela
do navegador.
Para criar um painel de fundo, você precisará de uma imagem que será repetida
para compor esse painel. De modo geral, ao criar uma imagem para essa
finalidade, você precisará verificar se o padrão escolhido flui harmoniosamente
quando disposto lado a lado.
Normalmente, você pode realizar com cautela algumas operações de edição

na imagem, por meio da utilização do seu programa preferido de edição de
imagens, para ter certeza de que as bordas estão alinhadas. O objetivo é que
as bordas coincidam perfeitamente umas com as outras, de modo a não haver
emendas entre as imagens quando você as apresentar lado a lado. Você também
pode experimentar usar pacotes de clip-art destinados a painéis de fundo ou
padrões lado a lado, que em geral são 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:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY BACKGROUND=”imagens/fundo.jpg”>
</BODY>
</HTML>
130

O resultado é visualizado assim:
Figura 5.22 - Exemplo de painel de fundo
Caso o desenvolvedor necessite colocar uma imagem de fundo sem que ela seja
repetida, utilizará técnicas de folhas de estilo (CSS) que permitem a configuração
visual de toda a página. O CSS será abordado, nos próximos capítulos desta
Unidade de Aprendizagem.
131

Capítulo 5
Seção 4
Sugestões para um melhor uso das imagens
O uso de imagens é hoje um dos assuntos mais discutidos entre usuários e
provedores de páginas da web. Todo aquele que deseja projetar páginas da web,
incluindo imagens maiores e mais claras para tirar maior proveito dos recursos
gráficos da web, deve estar ciente de que sempre existirá alguém com uma
conexão lenta de rede, que estará implorando por menos imagens para que seu
navegador não leve horas para carregar uma única página.
Ao desenvolver websites, você deve considerar esses aspectos: procure alcançar

o ponto de equilíbrio entre a criação de uma página da web bem estruturada e
colorida e a necessidade de transmitir as suas informações a todo o seu público.
Isso inclui, também, as pessoas que não têm acesso às suas imagens. Atente
paras as seguintes sugestões:
Você precisa realmente dessa imagem? - Para cada imagem que

você inserir na página da web, reflita sobre o motivo pelo qual a está
incluindo. Essa imagem acrescenta algo ao projeto da página? Ela
fornece informações que poderiam ser substituídas por texto? Ou
você simplesmente a incluiu porque gosta do resultado produzido?
Uma página simples com apenas algumas imagens de ícones costuma
produzir um efeito melhor do que uma página que apresenta uma
imagem enorme, sofisticados botões tridimensionais e marcadores
sombreados.
Mantenha as imagens pequenas! - Uma imagem pequena leva menos

tempo para ser transferida na internet. Por isso, o uso dela faz a página
da web ser carregada mais rapidamente e causa menos frustração aos
usuários que tentam lê-la em uma conexão lenta de rede. Para criar
imagens pequenas, você pode reduzir as dimensões físicas reais dessas
imagens na tela. Pode, também, criar tamanhos de arquivos menores
para as suas imagens, por meio da redução do número 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
conexão de 14,4 Kbps. Multiplique esse tempo pelo número de imagens
contidas na página da web e você verá que a carga dessa página pode
levar um tempo considerável.
132

Procure reutilizar imagens! - Procure reutilizar as mesmas imagens o máximo

possível, em páginas isoladas e em várias páginas. Se, por exemplo, você tiver
imagens como marcadores, use-as para todos os marcadores, em vez de usar
diversas imagens. A reutilização de imagens proporciona o projeto padronizado das
páginas, que faz parte da criação 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.
Forneça alternativas às imagens! - Se você ainda não estiver utilizando o

atributo ALT nas suas imagens, passe a usá-lo. Esse atributo é muito útil, pois
permite que a sua página da web seja lida por navegadores de texto.
Fonte: LEMAY, Laura. Aprenda em uma semana HTML 4. Tradução de João E.

N. Tortelo. Rio de Janeiro: Campus, 1998.
Seção 5
Música
Você pode incluir em sua página um som de fundo. Com isso, sempre que
alguém acessá-la, esse som será tocado. Dessa forma, você pode fazer seu site
ter mais recursos e personalidade.
Existem três maneiras de colocar músicas em seu site. A primeira é com a tag
<BGSOUND> que só é reconhecida pelo Internet Explorer. Para utilizar essa tag,
siga o exemplo:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY >
<BGSOUND src=”musica.mp3”>
Musica de fundo
</BODY>
</HTML>
133

Capítulo 5
Onde:
arquivo.mp3 é o arquivo de música.
Caso você queira que a música se repita, adicione o atributo loop=”infinite”.
A segunda maneira de adicionar música 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:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY >
<EMBED src=”musica.mp3”>
</BODY>
</HTML>
Essa tag também pode ser usada com alguns atributos. Veja o exemplo:
<caixa de destaque>
<EMBED src=”nome da música” autostart=”true” loop=10>
Onde:
Em “nome da musica”, você coloca o nome da música mp3, mid ou wav.
Em “loop”, você coloca o número de vezes que o som será repetido.
Em “autostart”, você define se quer que a música comece a tocar sozinha (atributo
TRUE). Caso contrário, você deve colocar “FALSE”, opção na qual o usuário terá que
clicar no botão de “play” para ouvir a música.
Se você quiser que a música fique se repetindo infinitamente, basta colocar “infinity”
no lugar de um número. Não é necessário colocar, “</embed>” nesse caso.
134

Atenção!
O Netscape e o Internet Explorer têm algumas diferenças em seu sistema e,
por isso, em algumas versões do Netscape o som pode não tocar.
É recomendado usar arquivos mid por serem bem menores que os wavs.
Por fim, no html 5 temos a tag AUDIO. Essa tag pode ser usada da seguinte
<HTML>
forma:
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<AUDIO src=”musica.mp3” type=”audio/mpeg” autoplay>
<p>Seu nevegador não suporta o elemento audio.</p>
</ AUDIO>
</BODY>
</HTML>
Onde:
Em type temos o tipo da música no caso áudio/mpeg.
Em “autoplay”, você define se quer que a música comece a tocar sozinha

(atributo TRUE).
Pode utilizar o atributo “controls” que mostra os controles padrão para o áudio.
O atributo loop irá fazer que o áudio se repita.
Entre as tags AUDIO uma mensagem caso o navegador do usuário não suporte a
tag.
Neste capítulo, vimos um dos principais recursos que fazem a WWW se destacar
em relação aos outros documentos de informação da internet, a capacidade dos
documentos da web em conter imagens e cores. Foi graças às imagens que a
web se tornou tão conhecida e utilizada tão rapidamente.
Essas imagens para serem inseridas em páginas da web precisam estar no

formato GIF ou JPEG e ter dimensões suficientemente reduzidas para poderem
ser carregadas rapidamente por download em uma conexão lenta. Também vimos
135

Capítulo 5
sobre as imagens, as quais podem conter links e que a tag IMG possui atributos
os quais dão suporte à acessibilidade.
Além das imagens, aprendemos a incluir painéis de fundo compostos por padrões
ou imagens lado a lado, por meio do atributo BACKGROUND, da tag <BODY>.
Por fim, vimos como são os arquivos de música em páginas HTML
136

Capítulo 6
Tabelas 1
Seção 1
Elementos básicos de tabelas
As tabelas são construções em HTML que permitem a você organizar texto,
imagens e outro tipo de conteúdo HTML em linhas e colunas, com ou sem
bordas. Elas podem ser usadas não apenas para apresentar dados em um
formato tabular, mas, também, para a definição do layout da página e para o
controle do posicionamento dos vários elementos HTML em uma página. As
tabelas tornaram-se tão conhecidas que a maioria dos principais navegadores
hoje oferece suporte para esse recurso.
A formatação de tabelas foi adotada bem antes de sua inclusão na definição de

HTML, e a sua manipulação, mesmo em editores, é trabalhosa. A maior diferença
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 não de colunas.
As tabelas podem conter textos, listas, parágrafos, imagens, formulários e várias
outras formatações, inclusive outras 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
código HTML de tabela. Por último, aprimore o aspecto visual da tabela por meio
de alinhamentos, bordas e células coloridas.
2016 . págs. 137 - 176.
137

Capítulo 6
Antes de entrarmos no código HTML propriamente dito para criar uma tabela,
permita-nos definir alguns termos para que você entenda o que será descrito.
•• Legenda: indica o assunto ao qual a tabela refere-se, como, por

exemplo, “Estatísticas das Eleições”. As legendas são opcionais.
•• Cabeçalhos da tabela: identificam as linhas, colunas ou ambas.
Em geral, os cabeçalhos da tabela são apresentados em uma fonte
maior ou com destaque, de alguma forma diferentes em relação ao
restante da tabela. Os cabeçalhos também são opcionais.
•• Dados da tabela: consistem nos valores que compõem a tabela.
A combinação dos cabeçalhos com os dados resulta na parte
essencial da tabela.
•• Células da tabela: são cada um dos quadrados que a compõe.
Uma célula pode conter dados comuns de tabela ou um cabeçalho
de tabela.
Feitas essas considerações preliminares, vamos aprender algumas tags próprias
para a formatação da tabela:
A tag <TABLE>
Para criar uma tabela em HTML, utilize as tags <TABLE>...</TABLE> que contêm
o código referente a uma legenda e o conteúdo da própria tabela.
O atributo mais comum da tag <TABLE> é o BORDER, que indica a apresentação

da borda. Veja o exemplo:
<TABLE BORDER=”borda”>
...
</TABLE>
Definir BORDER=0 significa que a borda não tem largura e, portanto, não é
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.
Além disso, se você omitir o atributo BORDER, os navegadores não deverão

apresentar uma borda. As tabelas sem borda são úteis quando você desejar
usar a estrutura da tabela para fins de layout, mas não quer, necessariamente,
apresentar a estrutura de uma tabela na página.
138

Linhas e células
Entre as tags <TABLE>...</TABLE>, você define o conteúdo da tabela. As tabelas
são especificadas linha por linha em HTML e a definição de cada linha contém
definições referentes a todas as células dessa linha. Por isso, para definir uma
tabela, você começa definindo a primeira linha e cada uma de suas células e, em
seguida, define a segunda, e suas respectivas células, e assim por diante. As
colunas são calculadas automaticamente, com base na quantidade de células de
cada linha.
Cada linha da tabela é indicada pela tag <TR> e termina com a tag de
fechamento </TR>. Cada linha da tabela, por sua vez, tem várias células, que são
indicadas pelas tags <TH>...</TH> (para células de cabeçalho) e <TD>...</TD>
(para células de dados).
Você pode ter quantas linhas quiser e quantas células forem necessárias em
cada linha para compor as suas colunas. Mas deve verificar se cada linha tem o
mesmo número de células para que as colunas fiquem alinhadas.
Legendas
As legendas de tabela informam ao leitor o assunto da tabela. Embora você possa
simplesmente usar um parágrafo normal ou um cabeçalho como um rótulo para a
sua tabela, a tag <CAPTION> tem justamente essa finalidade de legenda.
Mas o que fazer se você não quiser usar uma legenda?
Você não precisa incluí-la. As legendas são opcionais.
A tag <CAPTION> é incluída na tag <TABLE>, antes das linhas da tabela, e

contém o título da tabela. Ela é fechada pela tag </CAPTION>.
O atributo ALIGN da legenda determina o seu alinhamento. Por padrão, a legenda

é colocada na parte superior da tabela (ALIGN=top)
139

Capítulo 6
Vejamos o exemplo de uma tabela simples com legenda:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<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>
</BODY>
</HTML>
Visualize na figura a seguir o exemplo apresentado.
Figura 6.1 – Exemplo de visualização de tabela com legenda por coluna
140

A tag <TH> indica uma célula que também um cabeçalho da tabela e a tag <TD>
indica uma célula comum da tabela, lembrando que TD significa Table Data =
dados da tabela. Os cabeçalhos geralmente são apresentados de forma diferente
das células da tabela, como, por exemplo, em uma fonte em negrito.
O exemplo anterior mostra um cabeçalho apresentado na borda superior da

tabela, por meio da tag <TH> incluída na primeira linha. Para apresentar os
cabeçalhos na borda esquerda da tabela, inclua cada uma das tags <TH> na
primeira célula de cada linha, como neste exemplo:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<CAPTION>Segundo exemplo</CAPTION>
<TR>
<TH>Linha 1</TH>
<TD>linha 1, coluna 1</TD>
</TR>
<TR>
<TH>Linha 2</TH>
</TR>
</TABLE>
</BODY>
</HTML>
141

Capítulo 6
A visualização fica assim:
Figura 6.2 – Exemplo de visualização de tabela com legenda por linha
Os cabeçalhos e os dados da tabela podem conter qualquer texto, código

HTML ou ambos, incluindo vínculos, listas, formulários, imagens e outras
tabelas.
Células vazias
E se você quiser ter uma célula sem qualquer conteúdo?
Isso é simples. Basta definir uma célula com a tag <TH> ou <TD>, sem
especificar texto algum, como neste exemplo:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
142

<TR>
<TD></TD>
<TD>20</TD>
<TD>30</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Às vezes, uma célula vazia desse tipo é apresentada como se a célula não
existisse, conforme você pode observar na figura seguinte:
Figura 6.3 – Exemplo de visualização de tabela com a primeira célula inexistente
Se você quiser forçar a apresentação de uma célula vazia, pode incluir uma
quebra de linha, sem inserir texto algum.
143

Capítulo 6
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TR>
<TD><BR></TD>
<TD>20</TD>
<TD>30</TD>
</TR>
</TABLE>
</BODY>
</HTML>
No navegador ficará da forma apresentada a seguir.
Figura 6.4 – Exemplo de visualização de tabela com a primeira célula vazia
144

Seção 2
Alinhamento da tabela e das células
Nesta seção, você vai ver como as tags auxiliam no alinhamento da tabela e das
células.
Alinhamento da tabela
Os elementos dentro da tabela podem ser alinhados da mesma forma que um
parágrafo comum. Por padrão, as tabelas são apresentadas em uma linha no lado
esquerdo da página, com o restante do texto acima ou abaixo.
No entanto, ao usar o atributo ALIGN, você pode alinhar as tabelas na margem

esquerda ou direita e promover o retorno automático do texto ao redor delas,
exatamente como faria com as imagens.
As linhas e células podem ter alinhamentos definidos por meio dos atributos:
•• ALIGN = alinhamento horizontal;

•• VALIGN = alinhamento vertical.
Esses atributos devem ser usados dentro das tags <TR> e <TD> (além de <TH>,
se for o caso). Por padrão, as células de dados são alinhadas assim:
•• no sentido horizontal, com alinhamento à esquerda;

•• no sentido vertical, alinhamento no centro da célula.
Alinhamento da célula
Quando as suas linhas e células estiverem na posição adequada e a tabela estiver
alinhada corretamente na página, você poderá, ainda, alinhar os dados contidos
em cada célula para obter o melhor efeito possível com base no conteúdo da
sua tabela. As tabelas oferecem várias opções para o alinhamento dos dados
contidos nas células, tanto na horizontal como na vertical.
Alinhamento horizontal:
•• ALIGN=LEFT – alinha o conteúdo à esquerda.

•• ALIGN=RIGHT – alinha o conteúdo à direita.
•• ALIGN=CENTER – alinha o conteúdo ao centro.
145

Capítulo 6
Alinhamento vertical:
•• VALIGN=BASELINE – mantém 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 conteúdo no topo.
•• VALIGN=MIDDLE – alinha o conteúdo ao centro.
•• VALIGN=BOTTOM – alinha o conteúdo na base da célula.
Veja como esses alinhamentos funcionam nas células:
<TD ALIGN=alinhamento_horizontal>Texto da célula</TD>
<TD VALIGN=alinhamento_vertical>Texto da célula</TD>
O alinhamento pode ser resumido conforme o quadro a seguir :
Quadro 6.1 – Alinhamento em tabelas
ALIGN=LEFT ALIGN=CENTER ALIGN=RIGHT

Alinhamento Horizontal
VALIGN=TOP VALIGN=MIDDLE VALIGN=BOTTOM

Alinhamento Vertical
Atenção! A tabela acima foi feita especialmente para mostrar as diferenças

entre os alinhamentos. Ao construir uma tabela HTML, o conteúdo ajusta-
se ao tamanho de suas células.
A seguir, veja um exemplo em HTML com os alinhamentos.
146

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TR>
<TH>Alinhamento Horizontal</TH>
<TD ALIGN=”LEFT”>ALIGN=”LEFT”</TD>
<TD ALIGN=”CENTER”>ALIGN=”CENTER”</TD>
<TD ALIGN=”RIGHT”>ALIGN=”RIGHT”</TD>
</TR>
<TR>
<TH>Alinhamento Vertical</TH>
<TD VALIGN=”TOP”>VALIGN=”TOP” </TD>
<TD VALIGN=”MIDDLE”>VALIGN=”MIDDLE”</TD>
<TD VALIGN=”BOTTOM”>VALIGN=”BOTTOM”</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Confira a visualização na figura a seguir.
147

Capítulo 6
Figura 6.5 – Exemplo de uma tabela com alinhamento
Vamos utilizar um texto mais longo na segunda célula da segunda coluna para
demonstrar o alinhamento padrão.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TR>

<TH>Título 1</TH>
<TH>Título 2</TH>
</TR>
<TR>
<TD>Célula 1</TD>
<TD><B>Célula 2</B><P>
148

Quando existe um texto longo, a célula é expandida até a margem da janela do

navegador. Para controlar a apresentação de texto dentro da tabela, pode-se
modificar as dimensões da célula.
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
A visualização é esta:
Figura 6.6 – Exemplo de alinhamento de tabela
Observe que a largura da coluna da direita foi ampliada para que o texto da célula
2 aproveitasse o espaço até o final da margem do navegador. Se a largura da
janela do navegador for reduzida, a largura da segunda coluna também será.
Vamos, agora, melhorar a aparência da tabela ajustando a largura da célula

2 em 300 pixels. Assim, a largura de toda a segunda coluna será ajustada.
Aproveitamos este exemplo para alinhar o texto da célula 1 no topo e mudar a
largura da borda da tabela. Se você observar, as células de cabeçalho também
são centralizadas verticalmente e horizontalmente por padrão.
149

Capítulo 6
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TR>
<TH>Título 1</TH>
<TH>Título 2</TH>
</TR>
<TR>
<TD VALIGN=”TOP”>Célula 1</TD>
<TD WIDTH=”300”><B>Célula 2</B><P>
A largura de cada célula pode ser controlada individualmente utilizando-se

o atributo <tt>width</tt>.</TD>
</TR>
</TABLE>
</BODY>
</HTML>
150

Alinhamento combinado
Repare que uma mesma célula pode ter atributos ALIGN e VALIGN combinados:
<TD ALIGN=alinhamento_horizontal VALIGN=alinhamento_vertical>Texto da célula</

TD>
Veja algumas combinações no quadro a seguir.
Quadro 6.2 – Alinhamento combinado em tabelas
ALIGN=LEFT, ALIGN=CENTER, ALIGN=RIGHT,

Alinhamento
horizontal e vertical VALIGN=BOTTOM VALIGN=TOP VALIGN=MIDDLE
Alinhamento de linhas
Acima, você viu o alinhamento na tag TD. O alinhamento pode ser aplicado a
linhas inteiras na tag da linha TR, com a seguinte sintaxe:
<TR ALIGN=alin_horizontal VALIGN=alin_vertical>Texto da célula</TR>
Porém, o alinhamento declarado em uma célula prevalece sobre o alinhamento da

linha, como se vê no quadro na sequência.
Quadro 6.3 - Alinhamento de linhas
center center TD ALIGN=right

Alinhamento de linhas
em tabelas Center
Bottom TD VALIGN=top bottom bottom
151

Capítulo 6
No navegador, o resultado pode ser visto na figura a seguir.
Figura 6.7 – Exemplo de alinhamento combinado em tabela
Células que ocupam várias linhas ou colunas

Todas as tabelas criadas até o momento tinham um valor para cada célula e, às
vezes, uma célula vazia. Você também pode criar células que ocupem várias
linhas ou colunas da tabela.
Para criar uma célula que ocupe várias linhas ou colunas, você deve incluir o
atributo COLSPAN (para colunas) e ROWSPAN (para linhas) nas tags <TH> ou
<TD> junto com o número de linhas ou colunas que deseja que a célula ocupe.
O exemplo a seguir mostra uma tabela com duas linhas e duas colunas. O
número de colunas é definido pelo número de células presentes nas linhas. É
possível expandir as células para que elas ocupem o espaço de mais de uma
coluna.
152

<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TR>
<TD COLSPAN=”2”>Célula expandida</TD>
</TR>
<TR>
<TD>Célula 1</TD><TD>Célula 2</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Veja o resultado na Figura 6.8.
Figura 6.8 – Exemplo de célula expandida ou mesclada por linha
153

Capítulo 6
Agora, vamos expandir as células para que elas ocupem o espaço de mais de
uma linha.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TR>
<TD ROWSPAN=”2”>Célula expandida</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
Observe na figura a seguir a visualização do exemplo.
Figura 6.9 – Exemplo de célula expandida ou mesclada por coluna
154

A solução necessária para fazer uma célula expandida é diferente em cada

um dos exemplos anteriores. No caso da célula expandida na largura de duas
colunas, ela ficou em uma linha diferente das células 1 e 2. No segundo exemplo,
para deixar a célula expandida com a altura de duas linhas, foi preciso colocá-la
na mesma linha das células 1 e 2.
Podemos expandir colunas e linhas em uma mesma tabela. Os dados contidos

nessa célula preencherão a largura ou o comprimento das células combinadas,
como no exemplo a seguir.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<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>três linhas</TD></TR>
</TABLE>
</BODY>
</HTML>
O código acima pode ser visualizado na próxima figura.
155

Capítulo 6
Figura 6.10 – Exemplo de célula expandida
Neste exemplo, perceba que o cabeçalho Colunas 1 e 2 compreende duas colunas

(COLSPAN=2); o cabeçalho 3 linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).
A indentação no código HTML facilita a visualização de possíveis erros e até o entendimento

do código.
Indentação significa organizar o código HTML para o mesmo tornar-se legível, sabendo, por
exemplo, onde inicia e termina uma tag ou, ainda, sabendo quais tags ou textos estão dentro
de outras tags. Organizamos o código utilizando espaço ou a tecla TAB.
Outra maneira de “indentar” o código anterior poderia ser assim:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TR>
<TH COLSPAN=”2”>Colunas 1 e 2</TH>
156

</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>três linhas</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Quais das visualizações dos códigos em HTML para o exemplo acima

parecem ser mais “legíveis” a você?
Observe que os dois códigos representam a mesma coisa, ou seja, trazem como
resultado a mesma tela do navegador mostrado anteriormente.
157

Capítulo 6
Seção 3
Dimensões da tabela
Além de controlar a largura da borda (com o atributo BORDER), é possível definir
as dimensões (em pixels) de toda a tabela, espaço entre as células e as margens
dentro das mesmas. Todos esses controles são feitos por meio de atributos
dentro da tag <TABLE>.
Os atributos largura da tabela são:
•• WIDTH – para definir a largura da tabela;

•• HEIGHT – para definir a altura da tabela.
Os atributos de espaçamento são:
•• CELLPADDING – para definir a margem dentro das células;

•• CELLSPACING – para definir o espaço entre as células.
Acompanhe o seguinte exemplo:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”2” WIDTH=”400” HEIGHT=”200” CELLPADDING=”20”

CELLSPACING=”20”>
<TR>
<TD ROWSPAN=”2”>Célula expandida</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
158

A visualização é a seguinte:
Figura 6.11 – Exemplo do uso de tabela com dimensões alteradas
Os atributos WIDTH e HEIGHT também podem ser utilizados para definir o

tamanho de células específicas. Nesse 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 células ao
conteúdo. Por exemplo:
Figura 6.12 – Exemplo de tabela ajustada
159

Capítulo 6
Para apresentar uma tabela ocupando determinado espaço disponível na linha,

usamos o atributo WIDTH. Esse atributo também pode ser aplicado a linhas e
células.
Essa largura pode ser definida assim:
•• em porcentagem (do espaço disponível) – WIDTH=x%;

•• em pixels – WIDTH=x.
Segue o exemplo de uma tabela ocupando 50% do espaço disponível.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”2” WIDTH=”50%”>
<TR>
<TD>uva</TD>
<TD>abacaxi</TD>
<TD>goiaba</TD>
</TR>
<TR>
<TD>laranja</TD>
<TD>maça</TD>
<TD>morango</TD>
</TR>
</TABLE>
</BODY>
</HTML>
160

A visualização é como mostra a Figura 6.13.
Figura 6.13 – Exemplo de tabela ocupando 50% da janela
A seguir, um exemplo de tabela que ocupa 50% do espaço disponível, com uma
coluna que preenche 60% do espaço disponível.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TR>
<TD>janeiro</TD><TD WIDTH=”60%”>fevereiro</
TD><TD>março</TD>
</TR>
<TR>
<TD>abril</TD><TD WIDTH=”60%”>maio</TD><TD>junho</
TD>
</TR>
</TABLE>
</BODY>
</HTML>
161

Capítulo 6
Observe o resultado na figura seguinte:
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 à

dimensão de seu conteúdo. Ou seja, a tabela ocupará 50% do espaço disponível
com uma coluna de 1%. Os ajustes serão feitos de acordo com as outras colunas,
para a ocupação dos 50%:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TR>
<TD>janeiro</TD><TD WIDTH=”1%”>fevereiro</
TD><TD>março</TD>
</TR>
<TR>
<TD>abril</TD><TD WIDTH=”1%”>maio</TD><TD>junho</TD>
</TR>
</TABLE>
</BODY>
</HTML>
162

A visualização fica da seguinte maneira:
Figura 6.15 – Exemplo de ocupação de tabela em relação à janela e ajuste de

coluna
Atributos de espaçamento
Como você verificou nesta Unidade de Aprendizagem, existem dois atributos que
permitem o controle de espaçamento em tabelas:
•• CELLPADDING – que estabelece o espaço entre o texto e as

bordas da célula;
•• CELLSPACING – que determina o espaço entre as células.
Tomemos a mesma tabela simples já vista na Figura 6.12.
Agora, vamos alterar o espaço entre o texto e as bordas do exemplo anterior,

colocando na tag TABLE, o seguinte código:
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”2” CELLPADDING=”20”>
<TR>
<TD>uva</TD>
<TD>abacaxi</TD>
<TD>goiaba</TD>
163

Capítulo 6
</TR>
<TR>
<TD>laranja</TD>
<TD>maça</TD>
<TD>morango</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Observe que o texto afastou-se da borda:
Figura 6.16 – Exemplo de espaçamento do texto em relação às bordas da tabela
Vamos alterar, agora, também o espaço entre as células do exemplo anterior:
<HTML>
<HEAD>
<TITLE>Décimo sétimo exemplo</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”2” CELLSPACING=”20”>
164

<TR>
<TD>uva</TD>
<TD>abacaxi</TD>
<TD>goiaba</TD>
</TR>
<TR>
<TD>laranja</TD>
<TD>maça</TD>
<TD>morango</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Veja o espaçamento entre as células, cujo preenchimento foi afetado:
Figura 6.17 – Exemplo de preenchimento das bordas da tabela (afastamento entre as células)
Podemos, ainda, combinar os dois atributos, alterando o espaço entre texto e

bordas, além do espaço entre células, conforme o exemplo a seguir.
165

Capítulo 6
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”2” CELLPADDING=”20” CELLSPACING=”20”>
<TR>
<TD>uva</TD>
<TD>abacaxi</TD>
<TD>goiaba</TD>
</TR>
<TR>
<TD>laranja</TD>
<TD>maça</TD>
<TD>morango</TD>
</TR>
</TABLE>
</BODY>
</HTML>
166

A tabela é assim visualizada:
Figura 6.18 – Exemplo de espaçamento e preenchimento na tabela
Você, agora, já viu grande parte dos recursos disponíveis para manipular tabelas,
os quais permitem produzir bons efeitos de apresentação. Vamos, então, estudar
as cores em tabelas.
Seção 4
Cor em tabelas
Você vai estudar, nesta seção, como inserir cor de fundo e de borda em tabelas,
além de como combinar tais cores.
Cor de fundo
Para alterar a cor de fundo de uma tabela, de uma linha ou de uma célula contida
em uma linha, use o atributo BGCOLOR das tags <TABLE>, <TR>, <TD> ou <TH>.
167

Capítulo 6
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”5” CELLSPACING=”5” CELLPADDING=”10”

BGCOLOR=”#E1FFD9”>
<TR>
<TD>uva</TD>
<TD>abacaxi</TD>
<TD>goiaba</TD>
</TR>
<TR>
<TD>laranja</TD>
<TD>maça</TD>
<TD>morango</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Figura 6.19 – Exemplo da utilização de cores em tabela
168

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 página; o fundo de uma linha
anula o fundo da tabela e as cores das células anulam todas as outras cores.
Podemos colocar cor de fundo em células específicas da tabela.
Veja como no exemplo a seguir.
<HTML>
<HEAD>
<TITLE>Vigésimo exemplo</TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”5” CELLSPACING=”5” CELLPADDING=”10”>
<TR>
<TD BGCOLOR=”#E1FFD9”>janeiro</TD>
<TD>fevereiro</TD>
<TD BGCOLOR=”#E1FFD9”>março</TD>
</TR>
<TR>
<TD>abril</TD>
<TD BGCOLOR=”#E1FFD9”>maio</TD>
<TD>junho</TD>
</TR>
</TABLE>
</BODY>
</HTML>
169

Capítulo 6
A visualização é a seguinte.
Figura 6.20 – Exemplo do uso de cores de fundo em células alternadas
Cor de borda
Alguns navegadores permitem que você altere as cores dos elementos da borda
da tabela, por meio da utilização dos seguintes atributos:
•• BORDERCOLOR – define a cor da borda, anulando o aspecto

tridimensional da borda padrão;
•• BORDERCOLORLIGHT – define o componente claro de bordas
tridimensionais;
•• BORDERCOLORDARK – define o componente escuro de bordas
tridimensionais.
Acompanhe o exemplo.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>

BGCOLOR=”#E1FFD9” BORDERCOLOR=”#00FF00”>
<TR>
<TD BGCOLOR=”#E1FFD9”>janeiro</TD>
<TD>fevereiro</TD>
170

<TD BGCOLOR=”#E1FFD9”>março</TD>
</TR>
<TR>
<TD>abril</TD>
<TD BGCOLOR=”#E1FFD9”>maio</TD>
<TD>junho</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Veja o resultado do atributo BORDERCOLOR na Figura 6.21.
Figura 6.21 – Exemplo de borda com cor
Acompanhe também este outro exemplo.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
171

Capítulo 6
BORDERCOLOR=”#00FF00”>
<TR>
<TD bgcolor=”#E1FFD9”>janeiro</TD>
<TD>fevereiro</TD>
<TD bgcolor=”#E1FFD9”>março</TD>
</TR>
<TR>
<TD>abril</TD>
<TD bgcolor=”#E1FFD9”>maio</TD>
<TD>junho</TD>
</TR>
</TABLE>
</BODY>
</HTML>
A visualização é esta:
Figura 6.22 – Exemplo de formatação de tabela
172

Combinando cores
O Internet Explorer, navegador da Microsoft, permite atribuir cores diferentes
para o fundo de cada célula. Basta acrescentar o atributo BGCOLOR com a cor
desejada às tags de célula. Em algumas combinações de cores será necessário
também modificar a cor das letras. Isso é feito com o atributo COLOR, dentro da
tag <FONT>. Veja o exemplo.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<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>
</BODY>
</HTML>
A visualização do exemplo apresentado será a seguinte.
173

Capítulo 6
Figura 6.23 – Exemplo de formatação de tabela
Seção 5
Tabelas aninhadas
Nesta seção, será estudado como aninhar tabelas dentro de tabelas, ou seja,
inserir uma tabela dentro de outra.
Aninhar tabelas é muito útil, pois da mesma forma que podemos incluir listas
dentro de outras listas, tabelas também podem ser incluídas dentro de outras
tabelas. Para incluir uma tabela, basta considerar que cada célula é um espaço
que pode receber qualquer outro código HTML, inclusive uma tabela. Portanto, é
possível inserir outra tabela em uma célula e assim por diante. Dependendo da
quantidade de tabelas aninhadas, a complexidade aumenta, por isso é importante
manter um código bem indentado. Veja este exemplo.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TABLE BORDER=”3” BGCOLOR=”#EEFC5C”>
<TR ALIGN=”CENTER”>
<TD>
<TABLE BORDER=”1” BGCOLOR=”#5CFC6F”>
<TR>
174

<TD>11</TD><TD>12</TD>
</TR>
<TR>
<TD>13</TD><TD>14</TD>
</TR>
</TABLE>
</TD>
<TD>20</TD>
</TR>
<TR ALIGN=”CENTER”>
<TD>30</TD>
<TD>
<TABLE BORDER=”1” BGCOLOR=”#5CA7FC”>
<TR>
<TD>41</TD> <TD>42</TD>
</TR>
<TR>
<TD>43</TD> <TD>44</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
175

Capítulo 6
Perceba que, neste código, temos 3 tags TABLE. Na célula da coluna 1 da linha
1, temos uma tabela, e na célula da coluna 2 da linha 2, temos outra. Todos os
atributos de formatação continuam valendo. Sendo que as tabelas aninhadas
herdam as características da tabela em que ela estiver.
Figura 6.24 – Exemplo de tabela aninhada
Você viu anteriormente diversos atributos de formatação de tabela. Vale destacar

que, no HTML5, os atributos “align”, “bgcolor”, “border”, “cellpadding”,
“cellspacing” e “width” não são mais suportados.
Mas como fica a formatação de uma tabela?
No final deste capítulo, vimos diversos atributos para formatar uma tabela. Além
deles, é possível formatar uma tabela de maneira mais eficiente, com folhas, no
estilo cascata, conhecida em inglês como Cascading Style Sheets (CSS). Vimos,
também, como adicionar alguns atributos para tornar as tabelas acessíveis. Para
isso alguns atributos devem ser adicionados as tabelas como: o summary,
para uma pequena explicação sobre como deve ser feito a leitura da tabela; o
elemento caption para o título da tabela; para os dados da tabela começamos
com o thead que define o cabeçalho da tabela; no espaço dos dados, as
informações da tabela propriamente dito utilizando o tbody; e por fim o tfoot, que
especifica as informações de rodapé da tabela.
176

Capítulo 7
Frames 1
Seção 1
Frames
A especificação de frames está definida em HTML 4.01, mas não é suportada
no HTML5. Atualmente todos os navegadores ainda oferecem suporte a eles. O
primeiro navegador a dar suporte a ele foi o Netscape (a partir da versão 2.0).
Os frames são divisões da tela do navegador em diversas telas (ou “quadros”).

Com isso, torna-se possível apresentar mais de uma página 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 são bonitos e atrativos por serem diferentes
do padrão simples de páginas encontradas na web. Eles possibilitam dividir um
hipertexto em múltiplas janelas (os frames), nas quais podem ser carregados
diferentes documentos HTML.
Bookmark é um “atalho” que marca o É muito fácil colocar frames em páginas.
endereço de um site já acessado para
Porém, nem todos os usuários gostam deles,
agilizar ao ser acessado novamente.
Os navegadores possibilitam pois nem sempre a navegação é fácil, além
armazenar bookmarks ou favoritos, de poder haver problemas para a impressão
armazenando a URL dos sites e e a marcação dos documentos interiores dos
tornando fácil visitá-los novamente.
Portanto, é uma lista de endereços já
frames nos bookmarks. A alternativa natural
visitados anteriormente na internet. para os frames são as tabelas.
2016 . págs. 177 - 202.
177

Capítulo 7
Os frames mudam o conceito de página para o navegador e para você. Ao

contrário de todos os exemplos anteriores, que utilizam uma única página em
HTML para apresentar uma tela de informações, quando você cria sites na web,
por meio da utilização de frames, uma única tela é composta, na verdade, de
diversos documentos HTML separados, que interagem uns com os outros.
A próxima figura mostra que é necessário um mínimo de quatro documentos

distintos para criar uma tela, como a representada a seguir.
Figura 7.1 – Estrutura básica de frames
Os frames são gerados por meio de dois componentes básicos:
•• elemento FRAMESET – responsável pela divisão do documento em

campos separados;
•• elemento FRAME – que indica as páginas que devem ser
carregadas em cada uma dessas subdivisões.
O documento que implementa frames, no qual se define a estrutura das janelas,
é conhecido como Frame Document. É nele que se estabelece o número de
janelas desejado e a sua distribuição na tela. Dentro de um Frame Document,
as marcações <BODY> e </BODY> são substituídas por <FRAMESET> e </
FRAMESET>.
178

Construindo Frames com o elemento

FRAMESET
A tag <FRAMESET> divide um documento em diversas regiões. Para tal, ela faz
uso dos atributos COLS e ROWS, referentes a divisões verticais (como colunas
em uma tabela) e horizontais (como linhas) entre as janelas na tela. Os atributos
FRAMEBORDER, BORDER e BORDERCOLOR também podem ser utilizados para
modificar o layout dos frames. Veremos esses atributos mais adiante.
Observe que dentro de um FRAMESET não se pode utilizar nenhum outro

dos elementos válidos no corpo de um texto HTML comum.
Uma página com frames tem um texto fonte semelhante ao que veremos a seguir.
<HTML>
<HEAD><TITLE>Assunto X</TITLE></HEAD>
<FRAMESET COLS=”20%, 80%”>
<FRAME SRC=”indice1.html”>
<FRAME SRC=”texto.html” NAME=”principal”>
<NOFRAME>
<BODY>
<H2>Bem-vindo à página do assunto X!</h2>
<P>
Blablablá blablablá
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
179

Capítulo 7
Conforme o exemplo anterior, a parte FRAMESET define a divisão da página em

“quadros”. Nesse caso, a página será dividida em duas colunas, sendo a primeira
com 20% do tamanho da tela e a segunda coluna com os 80% restantes..
Nesse exemplo, não foi configurado o número de linhas (ROWS) do FRAMESET.

Como veremos a seguir, as composições de linhas e colunas seguem um padrão
diferenciado, de forma que não é possível a definição dos dois atributos (ROWS e
COLS) simultaneamente.
Observe que, dentro da formatação de FRAMESET, temos os FRAMES SRC, que

fazem referências às páginas que serão mostradas nos frames definidos.
O caminho das páginas a serem inseridas como frames (nos exemplos: indice1.
html e texto.html) seguem a mesma padronização para a inserção de imagens;
neste caso, os dois arquivos estão no mesmo diretório do frame document
(arquivo que contém a tag FRAMESET).
Assim, no código descrito anteriormente, a página indice1.html será mostrada na

primeira coluna (que ocupará 20% da tela) e a página texto.html será mostrada
na segunda, (ocupando 80% da tela).
O conteúdo do arquivo indice1.html é este apresentado na sequência.
<HTML>
<BODY>
TESTANDO FRAME... 20%
</BODY>
</HTML>
E o conteúdo do arquivo texto.html é o apresentado a seguir.
<HTML>
<BODY>
</BODY>
</HTML>
180

Assim, o resultado apresentado no navegador será igual ao descrito pela próxima

figura.
Figura 7.2 – Exemplo de visualização de um frame
A formatação de frames inclui também uma parte NOFRAME, que é mostrada

normalmente pelos navegadores que não suportam sua apresentação.
Seção 2
Links com frames
Sempre que se aciona um link dentro de uma página, é padrão que a página
referente a esse link seja carregada na mesma janela da página anterior.
Definindo a janela alvo por meio do Atributo Target
O atributo TARGET permite controlar em qual janela um link específico será

exibido quando o usuário clicar sobre ele. Por exemplo, pode-se ter uma janela
lateral com uma espécie de índice, em que vários links estarão disponíveis e
outra janela em que serão carregados os documentos referentes a esses links.
Para projetar um documento com essas características, é preciso que o atributo
TARGET seja utilizado, pois ele é responsável 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.
181

Capítulo 7
No exemplo a seguir, um link dentro da janela à direita faz com que a página apontada
seja mostrada, ocupando a janela da direita (coluna de 80%).
<HTML>
<HEAD><TITLE>Assunto X</TITLE></HEAD>
<FRAME SRC=”indice1.html”>
<FRAME SRC=”texto.html” NAME=”principal”>
<NOFRAME>
<BODY>
<H2>Bem-vindo à página do assunto X!</h2>
<P>
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
Veja que, no código fonte acima, o frame associado à apresenta.html tem um atributo
NAME. Nomear um frame permite que direcionemos o frame em que será
apresentado o documento de destino de um link.
No arquivo indice1.html, temos o seguinte conteúdo.
<HTML>
<BODY>
<a href=”apresenta.html” TARGET=”principal”>Exemplo nº.2</a>.
</BODY>
</HTML>
182

Deste modo, indica-se que se está definindo (pelo atributo target) o frame em que
a página de destino do link (apresenta.html) será mostrada.
No arquivo apresenta.html, temos o seguinte conteúdo.
<HTML>
<BODY>
Aqui, estamos vendo a apresentação de frames com link.
</BODY>
</HTML>
O resultado no navegador será assim.
Figura 7.3 – Exemplo de links com frames
Quando clicarmos no Exemplo n. 2, no frame da esquerda, o resultado será

mostrado no frame da direita, conforme figura a seguir.
183

Capítulo 7
Figura 7.4 – Exemplo de link já visitado com frame
Limpando a tela
Há, basicamente, dois efeitos possíveis para limpar a apresentação de frames, e
isso é feito com “targets” especiais, cujos atributos foram apresentados no item
Links com frames.
•• TARGET=”_top” limpa os frames que estiverem ativos,

apresentando a página de destino na tela inteira.
•• TARGET=”_blank” abre uma nova janela do navegador para
apresentar a página de destino.
184

Seção 3
Composição com frames
Como você já observou, a formatação Frameset tem atributos que definem a
divisão do espaço da janela do navegador em colunas ou linhas. Podemos utilizar
uma combinação de framesets para criar diversos modos de apresentação do
conteúdo de um site.
Antes de ver algumas composições, lembre-se de que os pontos-chave para o

mecanismo dos frames são os seguintes.
•• a nomeação dos frames; e

•• a declaração dos targets dos links, que definem o frame no qual as
páginas de destino serão mostradas.
Embora quase todos os editores Wysiwyg de Html deem suporte à criação de
frames, é necessário que o autor preocupe-se com os detalhes de nomeação de
frames e de direcionamento de links.
Veja, na simulação a seguir, como montar dois frames em coluna.
Figura 7.5 – Exemplo de frame em coluna
<FRAMESET COLS=”x, y”>
<FRAME SRC=”col1.html”>
</FRAMESET>
Na Figura 7.6, observe como montar dois frames em linha.
Figura 7.6 – Exemplo de frame em linha
<FRAMESET ROWS=”x, y”>
<FRAME SRC=”lin1.html”>
</FRAMESET>
185

Capítulo 7
Para montar a 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>
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 composições com mais de um frameset precisam ser bem planejadas

para funcionarem de maneira adequada.
186

Seção 4
Atributos de Frameset
Nesta seção, você estudará os seguintes atributos de Frameset: Rows, Cols,
Frameborder, Border e Bordercolor.
ROWS
Este atributo define divisões horizontais entre janelas. Vem sempre acompanhado
de valores que definem que espaço da tela será ocupado por cada janela. Cada
janela a ser criada deverá ter, portanto, um valor associado e esses, que devem
estar separados por vírgula. Veja a sintaxe.
(ROWS=”valor, valor, valor...”)
Cada valor poderá ser conforme mostra o quadro a seguir.
Quadro 7.1 - Atributo ROWS
Numérico em pixels Refere-se a quantos pixels cada frame (ou janela) deve ocupar.
(ROWS=”30,50”) A desvantagem dessa notação é que não é possível ter o
controle do valor total de pixels que o navegador do usuário
contém.
Percentual Corresponde a um valor percentual do tamanho da página,
(ROWS=”25%,25%,50%”) sempre somando um total de 100%. Esse é o método mais
simples.
Relativo Define o tamanho de uma janela em relação às outras. No
(ROWS=”*,*,2*”) exemplo seguinte, os dois primeiros frames vão ocupar um
quarto da tela e o terceiro frame ocupará dois quartos, ou seja,
metade da tela. Esse exemplo produz o mesmo resultado que
o exemplo anterior utilizado no Percentual.
No último caso, do valor relativo, o “ * “ funciona como uma variável: ao se somar

os valores de cada um dos campos em que será dividida a tela, deve-se obter 1
(um). No exemplo anterior, teríamos 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*).
187

Capítulo 7
Também é possível combinar os valores numéricos, percentuais e relativos, como

demonstram os exemplos a seguir.
Veja como dividir a tela do navegador em três janelas horizontais, com a do meio
mais larga do que as de cima e de baixo.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<FRAMESET ROWS=”30%, 40%, 30%”>
<FRAME NAME=”frame1” SRC=”exemplo1.html”>
</FRAMESET>
</HTML>
Figura 7.9 – Tela dividida em 3 frames em linha
Fonte:: Elaboração dos autores, 2016.
188

Se os arquivos exemplo1.html, exemplo2.html e exemplo3.html não

existirem, o resultado na tela naquele frame, que indica um dos arquivos
inexistente, aparecerá com a mensagem “A página não pode ser
exibida”.
Você também pode propor três janelas horizontais: a primeira e a última,

com altura fixa e o frame central ocupando o restante do espaço (é o próprio
navegador que define qual o tamanho do frame central, de acordo com o espaço
que sobra na tela após a definição do primeiro e do último frame).
<HTML>
<HEAD>
<TITLE> Frame Document </TITLE>
</HEAD>
<FRAMESET ROWS=”40, *, 40”>
<FRAME SCR=”exemplo1.html”>
<FRAME SRC=”exemplo2.html”>
<FRAME SCR=”exemplo3.html”>
</FRAMESET>
</HTML>
Visualize a tela dividida em frames na figura a seguir.
Figura 7.10 – Uso de frames em linha com o frame central mais largo
189

Capítulo 7
Na definição do Frame Document anterior, cada janela (frame) corresponde a um

elemento FRAME que indica, no mínimo, a URL que será associada a essa região
da tela, por meio do atributo SRC. O elemento FRAME e seus atributos serão
descritos em breve.
COLS
O atributo COLS funciona exatamente como a marcação anterior, inclusive no
que diz respeito ao modo de apresentação do campo “valor”. No entanto, este
atributo divide a tela em frames ou janelas verticais, assim como as colunas em
tabelas, conforme mostram os exemplos a seguir.
(COLS=”valor,valor,valor..”)
Acompanhe os exemplos na sequência.
Aqui, divide-se a tela em 3 colunas, sendo que a do meio é mais larga do que as
outras duas.
<HTML>
<HEAD>
<TITLE> Frame Document </TITLE>
</HEAD>
<FRAMESET COLS=”30%, 40% ,30%”>
</FRAMESET>
</HTML>
Vejamos o resultado do código HTML na Figura 7.11.
190

Figura 7.11 – Tela dividida em 3 frames em colunas
Da mesma maneira que nos exemplos das linhas (ROWS), o navegador irá definir
sozinho qual o tamanho da segunda célula do atributo COLS. Para intercalar
janelas verticais e horizontais, é necessário definir várias áreas FRAMESET. Para
cada área delimitada com FRAMESET, pode-se definir o número de linhas ou
colunas. Contudo, não é possível definir COLS e ROWS para uma mesma área
FRAMESET.
Para intercalar linhas e colunas, pode-se fazer como no exemplo a seguir.
<HTML>
<HEAD>
<TITLE>Quinto exemplo</TITLE>
</HEAD>

<FRAMESET ROWS=”30%,70%”>

<FRAMESET COLS=”50%,50%”>

</FRAMESET>
</FRAMESET>
</HTML>
191

Capítulo 7
Veja o resultado na próxima figura.
Figura 7.12 – Tela dividida em frames por linha e coluna
Fonte: Fonte: Elaboração dos autores, 2016.
FRAMEBORDER
Este atributo especifica se os frames do FRAMESET devem apresentar
uma borda ou não. Se ele for omitido, será usado o valor (“yes” ou “no”) do
FRAMESET mais externo. Se nenhum FRAMESET apresentar esse atributo, então,
o valor padrão (com bordas) será usado. Acompanhe o modelo seguinte.
(FRAMEBORDER=”yes”|”no”)
Eis um exemplo.
<FRAMEBORDER=”no”>
192

Podemos testar o exemplo a seguir utilizando o atributo FRAMEBORDER no

FRAMESET.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<FRAMESET COLS=”50%,50%” FRAMEBORDER=”no”>
</FRAMESET>
</HTML>
Veja o resultado do frame sem as bordas na figura que segue.
Figura 7.13 – Frame sem borda
193

Capítulo 7
BORDER
Este atributo especifica a largura da borda que os frames desse FRAMESET
devem apresentar. A sintaxe é a seguinte.
(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 de uma cor (nome-cor) quanto o
padrão RGB.
<BORDERCOLOR=blue>
194

Seção 5
Atributos de frame
Até este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e
NAME (para FRAME).
A tag <FRAME> define que página HTML será carregada em cada janela contida
em uma área FRAMESET. Ela aceita seis possíveis atributos, cuja utilização
depende das necessidades do criador da página (Frame Document). São eles:
•• SRC;
•• NAME;
•• MARGINWIDTH;
•• MARGINHEIGHT;
•• SCROLLING;
•• NORESIZE.
Vejamos agora 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 região em branco na tela. A sintaxe é a
apresentada na sequência.
(SRC=”url”)
...
<FRAME SRC=”indice.html”>
...
195

Capítulo 7
NAME
Este atributo é utilizado para associar um nome a uma das divisões do Frame
Document e deve ser usado quando se deseja especificar onde (em que janela)
os documentos devem ser carregados. É um atributo opcional. Por padrão, os
frames não têm nome, mas, quando acontece de se estabelecerem nomes para
janelas, estes devem começar com caractere alfanumérico. A sintaxe é a seguinte.
(NAME=”nome”)
Acompanhe o exemplo a seguir.
...
<FRAME SRC=”inicial.html” NAME=”navega”>
...
MARGINWIDTH
Este atributo controla as margens esquerda e direita de cada frame, ou seja, a
distância entre o conteúdo da página e as margens da janela. O valor associado
será expresso em valor absoluto em pixels, cujo menor valor aceito é 1. Este é
um atributo opcional e, caso não esteja definido, o navegador usará o seu padrão
para definir as margens dos frames ou janelas. A sintaxe é a seguinte.
(MARGINWIDTH=”valor”)
Observe o exemplo.
<FRAME SRC=”indice.html” MARGINWIDTH=”3”>
196

MARGINHEIGHT
Também é um atributo opcional e funciona exatamente como o anterior, só que
determina as margens superior/inferior de cada frame. Eis a sintaxe.
(MARGINHEIGHT=”valor”)
Veja o exemplo.
<FRAME SRC=”indice.html” MARGINHEIGHT=”4”>
SCROLLING
Novamente, temos um atributo opcional. Com o SCROLLING é definido se uma
janela deve possuir barra de rolagem ou não. Caso seja definido como “YES”, a
janela sempre possuirá uma barra de rolagem visível. Caso seja definido como
“NO”, nunca haverá barra de rolagem. E, finalmente, se vier como “AUTO”, o
navegador aplicará a barra quando necessário. Lembrando que “AUTO” é o
valor padrão. Portanto, se o atributo SCROLLING não for definido, o navegador
aplicará a barra de rolagem à janela em questão, automaticamente, toda vez que
o conteúdo da página HTML não couber completamente no frame. A sintaxe é a
seguinte.
(SCROLLING=”yes/no/auto”)
Observe o exemplo a seguir.
<FRAME SRC=”indice.html” SCROLLING=”yes”>
197

Capítulo 7
Para dispor o frame sem a barra de rolagem.
<FRAME SRC=”indice.html” SCROLLING=”no”>
<FRAME SRC=”apresenta.html” NAME=”principal”>
</FRAMESET>
...
A barra de rolagem de um frame fica sempre à direita, não é possível, atualmente,

mudar esta característica.
NORESIZE
NORESIZE é também opcional. Este atributo não possui valor associado; quando
ele não aparece, o usuário poderá alterar o tamanho da janela, arrastando a
sua borda com o mouse. Caso contrário, a janela terá sempre um tamanho
inalterável. Normalmente, todas as janelas podem ter seu tamanho alterado, já
que navegadores diferentes estarão sendo utilizados por diferentes pessoas, e as
páginas podem não caber na tela, impedindo que os usuários possam lê-las. Eis
um exemplo.
<FRAME SRC=”indice.html” NORESIZE>
198

Aqui está um exemplo de elemento FRAME acompanhado de alguns atributos.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<FRAMESET COLS=”200,*,*”>
<FRAME NAME=”frame1” SRC=”Exemplo1.html”>
<FRAME NAME=”frame2” SRC=”Exemplo2.html”
MARGINWIDTH=”3” MARGINHEIGHT=”4”
SCROLLING=”yes” NORESIZE>
</FRAMESET>
</HTML>
Figura 7.14 – atributos na tag FRAME
199

Capítulo 7
Seção 6
Tag noframes
Se existem navegadores que não suportam ou não 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 opção de navegação na página para quem não possui um navegador
que entenda frames. Isso é bastante recomendável! Essa marcação aparece no
documento inicial frame Document.
Quando o acesso for feito por meio de um navegador que não entenda frames,
os elementos FRAMESET e FRAME (e NOFRAMES também!) serão ignorados
pelo navegador e as marcações entre <NOFRAME> e </NOFRAME> serão
obedecidas, montando-se uma página alternativa. Por outro lado, os navegadores
que suportam frames ignoram todo conteúdo entre as marcações NOFRAMES.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<FRAMESET ROWS=”30%,70%”>
<FRAMESET COLS=”50%,50%”>
</FRAMESET>
</FRAMESET>

200

<NOFRAMES>
<FONT SIZE=4>
Esta parte do código só irá aparecer no seu navegador

caso o
mesmo não suporte o uso de frames.
</FONT>
</NOFRAMES>
</HTML>
Veja o resultado na Figura 7.15. Se ele suporta o uso de frames, surgirá algo
similar.
Figura 7.15 – Uso da tag NOFRAMES
201

Capítulo 7
Caso o seu navegador não suporte o uso de frames, surgirá a seguinte

mensagem na tela.
Figura 7.16 – Uso da tag NOFRAMES quando o navegador não aceita frame
Ao final deste capítulo, você tem os conhecimentos suficientes para a construção

de um website básico. Os frames são interessantes para apresentar conjuntos
de páginas com um índice fixo para a navegação. Além disso, com esse recurso
torna-se possível mostrar diversas páginas e/ou mídias em uma única janela do
navegador.
Tenha o cuidado de procurar controlar a navegação, evitando que o acionamento

de links leve o leitor a ver seu navegador criar frames dentro de frames, gerando
uma grande confusão. Previna essa inconveniente utilizando a tag TARGET, como
já vimos nesta Unidade de Aprendizagem.
202

Capítulo 8
Desenvolvendo Páginas
Eficientes 1
Seção 1
Uso das extensões HTML
No passado, antes de todas as empresas que produzem navegadores
começarem a introduzir suas próprias tags HTML, era fácil ser um projetista da
web. As únicas tags que você tinha que lidar eram aquelas da HTML 2.0 e a
maioria dos navegadores existentes na web era capaz de ler as suas páginas sem
qualquer problema. Hoje, ser um projetista da web é bem mais complicado. Você
precisa trabalhar com vários grupos de tags de diversas versões.
• Tags da HTML 2.0.
• Recursos da HTML 3.2 e 4, como, por exemplo, frames, tabelas, divisões,

painéis de fundos, cores e folhas de estilos, que contam com o suporte da
maioria, mas não de todos os navegadores.
• Tags específicas dos navegadores, que podem ou não se tornarem parte da

especificação 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.
1 PETRY, Patrícia Gerent; BRAZ JUNIOR, Osmar de Oliveira. Programação web Básica. Palhoça: UnisulVirtual,
2016 . págs. 203 - 224.
203

Capítulo 8
Se você considera essa situação confusa, saiba que não é o único. Os autores e
projetistas estão tentando esclarecer essa confusão e tomar decisões com base
no aspecto visual que desejam atribuir às suas páginas. As extensões HTML
oferecem maior flexibilidade no layout, mas limitam o público que pode ver essas
páginas da maneira que você deseja que elas sejam exibidas.
A escolha de uma estratégia para a utilização de extensões HTML é uma das

mais importantes decisões de projeto que você fará ao criar páginas da web. Se
o autor da web quer o maior público possível para as suas páginas da web, então
ele deve manter-se fiel às tags da HTML 2.0, conforme definidas pelo padrão.
Você pode criar um documento da web magnífico com as tags da HTML 2.0 e
esse documento tem uma grande vantagem em relação a muitos documentos
experimentais, pois ele é reconhecido sem qualquer dificuldade pela maioria
dos navegadores, atingindo, portanto, o maior público possível.
Se o autor da web, por outro lado, deseja ter, sobre o layout de páginas, o tipo
de controle que as mais avançadas tags proporcionam e está disposto a perder
boa parte de seu público para conseguir isso, então ele utilizará as mais novas
inserções propostas pela HTML 5. As páginas para esse autor são elaboradas
para poucos navegadores, são testadas somente nesses navegadores e é possível,
inclusive, que haja um aviso na página informando em qual navegador a página
deve ser lida. Na maioria das vezes, se você usar outro navegador para ler essas
páginas, o resultado poderá ser bem confuso, quando não for inteiramente ilegível.
A melhor posição a escolher entre um projeto refinado e um grande público

provavelmente é o equilíbrio entre os dois. Com algum conhecimento prévio
dos efeitos que as extensões HTML terão sobre as suas páginas, tanto em
navegadores que oferecem suporte para elas como em outros que não oferecem
esse suporte, você poderá promover pequenas modificações no seu projeto,
as quais permitirão tirar proveito dos dois aspectos mencionados. Assim, as
suas páginas continuarão legíveis e úteis em navegadores mais antigos e em
uma grande variedade de plataformas, mas poderão também tirar proveito dos
recursos avançados nos novos navegadores (LEMAY, 2001).
A estratégia mais importante que podemos sugerir para utilizar extensões e, ao

mesmo tempo, manter a compatibilidade com outros navegadores consiste em
testar os seus arquivos nesses navegadores. A maioria dos navegadores é
composta por programas freeware ou shareware e se encontra disponível para
download. Por isso, basta localizá-los e instalá-los. Ao testar as suas páginas,
você poderá ter uma noção de como os diversos navegadores interpretam as
diferentes tags e acabará percebendo quais extensões proporcionam maior
flexibilidade, quais delas exigem codificação especial para fornecer alternativas
em navegadores mais antigos e quais tags podem ser usadas livremente, sem
causar problema em outros navegadores.
204

Seção 2
Seu texto na web
A redação na web não é diferente da redação no “mundo real”. Mesmo que o
texto que você esteja redigindo para a web não seja apresentado em uma cópia
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 redação 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 informações na web, os leitores não terão muita

paciência se a sua página estiver cheia de erros de grafia ou desorganizada. Eles
certamente desistirão depois de lerem a segunda frase e passarão para a página
de outra pessoa. Afinal de contas, existem milhões de páginas na web. Não há
tempo a perder com páginas ruins.
Vai dizer que você nunca fez isso? Nunca visitou uma página carregada de
informações desorganizadas, sem um bom layout e, por esses motivos,
acabou desistindo?
Isso não significa que você tenha que se tornar um escritor profissional para criar
uma página apresentável na web, mas deve seguir algumas sugestões para tornar
a sua página mais legível e compreensível. A seguir, estão elas.
Redija com clareza e objetividade

Uma das melhores formas de tornar as suas páginas da web legíveis consiste em
redigir da maneira mais clara e objetiva possível, apresentando os seus pontos
de vista e nada mais. Se você colocar muitas informações adicionais, poderá
dificultar a compreensão das suas ideias por parte do leitor da sua página.
O critério de qualidade do texto vale tanto para a internet quanto para o papel.
Não há linguagem nova que desobrigue o texto na internet a ser bom, legível e
compreensível. O texto só passa a existir verdadeiramente quando é consumido
produtivamente pela pessoa que está do outro lado da tela.
205

Capítulo 8
Organize as suas páginas para uma rápida

consulta
Mesmo que você crie o texto mais sucinto e bem-estruturado jamais visto em
toda a web, os seus leitores não irão lê-lo com atenção do início ao fim.
Um texto para a internet tem que ter o tamanho que a informação exigir. Na
informação rápida, não se pode esquecer-se de um ponto crucial: o porquê. Se
nós entramos na internet, queremos saber o porquê dos fatos, não queremos
apenas rapidez. A velocidade tem que vir com peso, com qualidade. A internet
é a grande chance da humanidade para preservar sua cultura e, nesse sentido,
deve funcionar como um banco de dados e não apenas como um veículo de
informação.
A consulta, nesse contexto, é a primeira olhada dos leitores em cada página,

para ter uma noção geral de seu conteúdo. Dependendo das informações que
eles quiserem obter nas páginas, poderão ler as partes que mais chamam a
atenção (cabeçalhos, vínculos, palavras enfatizadas) e, talvez, alguns parágrafos
contextuais para, em seguida, continuar a leitura. Ao criar e organizar as suas
páginas para facilitar a “consulta”, você estará ajudando os leitores a obter, o
mais rapidamente possível, as informações que necessitam.
Assim, para facilitar a consulta à página, veja a seguir algumas recomendações

importantes.
• Utilize cabeçalhos para resumir os tópicos - se observar, verá que este

livro possui títulos e subtítulos para que você possa percorrer rapidamente na
busca da informação de maior interesse. O mesmo aplica-se às páginas da
web.
• Utilize listas - elas são excelentes para resumir itens relacionados.
• Não se esqueça dos menus de vínculos - eles consistem em uma espécie

de lista que, além de oferecer todas as vantagens das listas para a consulta,
funcionam como uma excelente ferramenta de navegação, por meio de links.
• Não esconda informações importantes no meio do texto - se tiver

alguma ressalva ou ponto a destacar, faça-o na parte superior da página ou no
início do parágrafo. Parágrafos longos são de difícil leitura e é mais complicado
obter informações neles. Quanto mais para dentro do parágrafo você colocar a
questão que deseja destacar, menor será a probabilidade desta ser lida.
206

• Destaque cada página - tenha o cuidado de criar páginas da web de modo

que cada uma delas seja autossuficiente. Por exemplo: se o leitor cair em uma
das páginas do seu site, a qual depende de uma página que ele não visitou,
deve ser dado um destaque nessa página visitada, de que ele precisa de
informações de outra página, ou criar um vínculo até a outra página.
• Utilize títulos descritivos - o título deverá fornecer informações sobre o

assunto abordado nessa página e também sobre o seu relacionamento com as
outras páginas da apresentação de que faz parte.
• Se uma página depender de outra anterior a ela, forneça um vínculo

de retorno à página anterior (de preferência, crie também um vínculo com a
página que ocupa o nível mais alto da hierarquia).
• Evite frases do tipo “você poderá evitar esses problemas fazendo...”,

“ao terminar isso, faça aquilo...”, “as vantagens desse método são...” que
disponham informações que serão apresentadas em outra página. Ao se
deparar logo de início com essas frases, o leitor poderá ficar confuso.
Fonte: LEMAY, 2001.
Não exagere na ênfase

Parágrafos com muitas informações em negrito e itálico ou palavras EM LETRAS
MAIÚSCULAS são de difícil leitura, especialmente se você as utiliza diversas
vezes em um mesmo parágrafo 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 vínculo constituem também uma forma de ênfase. Utilize uma única
palavra ou uma frase curta como texto de vínculo. Não use trechos ou parágrafos
inteiros como vínculos.
Não use termos específicos do navegador

Evite fazer referências a recursos específicos de determinados navegadores. Não
use, por exemplo, frases como estas a seguir.
207

Capítulo 8
• Dê um clique Aqui - e se o seu leitor estiver usando um navegador sem

mouse?
• Para gravar esta página, abra o menu Arquivo e selecione Salvar - cada
navegador tem um conjunto diferente de menus e maneiras específicas de
executar a mesma ação, além de idiomas diferentes. Sempre que possível, evite
fazer referência a operações específicas do navegador nas suas páginas da
web.
• Utilize o botão Voltar/Back para retornar à página anterior - como

no item anterior, cada navegador possui um conjunto de botões e métodos
específicos de “retorno”. Para que seus leitores consigam retornar facilmente a
uma página anterior ou acessar outra página específica, estabeleça um vínculo
direto com essas páginas.
Verifique a grafia e revise as suas páginas

Esse item parece óbvio, mas, em virtude da grande quantidade de páginas
que existem e que já visitamos, vale a pena mencioná-lo. A elaboração de um
conjunto de páginas da web e sua publicação correspondem ao processo de
publicação de um livro, à produção de uma revista ou ao lançamento de um
produto. Obviamente, é muito mais fácil publicar páginas na web do que livros,
revistas ou outros produtos. No entanto, o fato de ser mais fácil não significa que
o processo deve ser descuidado. Por isso, existem muitas páginas com muitos
erros, pois qualquer pessoa pode redigir um texto, mesmo sem ser um “expert”
em língua portuguesa, por exemplo.
Lembre-se de que qualquer pessoa poderá ler e explorar suas páginas da web.
Erros ortográficos ou gramaticais produzem uma impressão negativa sobre o
seu trabalho, você e as informações que estiver fornecendo. Uma redação 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 páginas da web. Se possível,

peça a alguém para lê-las. Quando outra pessoa lê, esta poderá detectar melhor
determinados erros que você, por ser o autor, muitas vezes não percebe. Uma
simples revisão poderá aprimorar muito as suas páginas, facilitando a leitura e a
navegação.
208

Seção 3
Projeto e layout da página
O melhor layout a ser seguido ao elaborar o projeto de cada página da web é
o seguinte: mantenha o projeto o mais simples possível; reduza o número de
elementos (imagens, cabeçalhos e linhas) e lembre-se sempre de chamar a
atenção para os pontos mais importantes da página, sem exagerar.
Use cabeçalho como cabeçalhos

Aqui estamos falando das tags de cabeçalhos <h1>, <h2>... Em navegadores
gráficos, os cabeçalhos são, em geral, representados em fontes maiores ou em
negrito. Por isso, somos sempre tentados a utilizar uma tag de cabeçalho para
fornecer algum tipo de advertência ou nota, ou mesmo enfatizar um texto normal.
Os cabeçalhos funcionam melhor quando utilizados realmente como cabeçalhos,

pois destacam o texto e indicam o início de um novo tópico. Se você desejar
enfatizar uma determinada seção do texto, considere a possibilidade de utilizar
uma imagem pequena, uma linha ou outra forma de ênfase.
Agrupe visualmente as informações

relacionadas
Agrupar informações relacionadas em uma página da web é uma tarefa de
criação e de projeto. Conforme já sugerido, você pode aumentar a capacidade
de consulta por meio do agrupamento de informações afins em cabeçalhos. Ao
separar visualmente as seções, você facilita a sua diferenciação e enfatiza a
relação existente entre as informações fornecidas.
Se uma página da web contiver diversas seções, separe-as visualmente,

utilizando, por exemplo, um cabeçalho ou uma linha horizontal, por intermédio da
tag <HR>.
209

Capítulo 8
Use um layout padronizado

Em um livro ou revista, as páginas e seções apresentam, em geral, o mesmo
layout (veja este livro, por exemplo). Os números das páginas, assim como a
primeira palavra apresentada nelas, estão sempre na posição padrão.
Esse tipo de layout padronizado funciona igualmente bem nas páginas da web.
A atribuição de uma única aparência e de um único comportamento a todas as
páginas da sua apresentação da web proporciona conforto aos leitores. Depois
da segunda ou terceira página, eles conhecerão os elementos de cada página
e saberão onde localizá-los. Assim, com um projeto padronizado, os seus
leitores podem localizar as informações de que necessitam e navegar pelas suas
páginas sem precisar parar em cada uma delas para saber onde encontrar essas
informações.
Dessa forma, entende-se que um layout padronizado deve conter os seguintes

itens.
•• Elementos de página padronizados - se você utilizar cabeçalhos

de segundo nível (<H2>), em uma página, para indicar os tópicos
principais, deverá utilizá-los também para os tópicos principais de
todas as outras páginas. Se tiver incluído um cabeçalho e uma linha
horizontal na parte superior da página, utilize esse mesmo layout em
todas as outras páginas.
•• Formas padronizadas de navegação - inclua os seus menus de
navegação na mesma posição em todas as páginas (em geral, na
parte superior ou inferior da página) e utilize a mesma quantidade de
menus. Se preferir usar ícones de navegação, lembre-se de utilizar
os mesmos ícones na mesma ordem em todas as páginas.
210

Seção 4
Uso de vínculos
Sem os vínculos, as páginas da web não teriam a menor graça e seria
praticamente impossível encontrar algo interessante na web. Sob vários aspectos,
a qualidade dos seus vínculos pode ser tão importante quanto a criação e o
projeto das páginas propriamente ditas. Considere as seguintes dicas que Lemay
(2001; 2002) coloca em seus livros.
Use menus de vínculos com texto descritivo

Conforme já comentado, quando você organiza os vínculos em listas ou em
outras estruturas semelhantes a menus, o seu leitor pode consultar rápida e
facilmente as opções oferecidas para a página.
No entanto, a simples organização dos vínculos em menus não é suficiente.

Ao organizá-los dessa forma, verifique se as suas descrições não estão
excessivamente reduzidas. Muitas vezes, somos tentados a usar menus de
nomes de arquivo ou de outros vínculos pouco descritivos.
Se os vínculos forem menus com nomes de arquivo, por exemplo, como

o leitor saberá quais as informações encontrará no outro lado do
vínculo? E assim, como o leitor poderá determinar se está ou não
interessado nessas informações, a partir das limitadas indicações
fornecidas? A maneira correta ofereceria um texto adicional que
descrevesse o conteúdo do arquivo ou simplesmente evitasse o uso de
nomes de arquivos (quem estaria interessado neles?).
Logo, descreva o conteúdo dos arquivos no menu, destacando o texto

apropriado.
Uso de vínculos no texto

A melhor maneira de fornecer vínculos no texto consiste em redigir antes o texto
sem os vínculos, como se você não pretendesse incluir vínculo algum nele;
para utilizá-lo, por exemplo, apenas como uma cópia impressa. Em seguida,
destaque as palavras apropriadas que funcionarão como o texto dos vínculos,
que conduzirão a outras páginas. Ao incluir um vínculo, verifique se este não está
interrompendo o fluxo da página.
211

Capítulo 8
A ideia de inclusão de vínculos no meio do texto torna-o autossuficiente. Dessa

forma, os vínculos fornecem informações 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 vínculos, considere a

possibilidade de usar um menu de vínculos, em vez de um parágrafo. Os leitores
encontrarão mais facilmente as informações que estiverem procurando. Em vez
de lerem o parágrafo inteiro, poderão simplesmente dar uma olhada nos vínculos
para identificar aqueles nos quais estão interessados.
Uma maneira de saber se você está incluindo vínculos no texto da forma

apropriada consiste em imprimir a página da web formatada no seu navegador.
Na cópia impressa, sem hipertexto, o parágrafo faz algum sentido?
Se a página ficar esquisita no papel, ficará esquisita também na web. De modo

geral, alguns ajustes na construção das frases podem tornar o texto mais legível e
mais útil tanto na web quanto na cópia impressa.
Evite a síndrome do “Aqui”

Um erro comum que muitos autores da web cometem ao criar vínculos no meio
do texto consiste no que costumamos chamar de “síndrome do aqui”. Essa
síndrome é a tendência de criar vínculos com uma única palavra (aqui) destacada
e descrever o vínculo em alguma outra parte do texto. Por exemplo:
Informações sobre o uso de vínculo clique aqui.
Uma opção muito melhor seria usar algo semelhante a isso:
Selecione este link para obter informações sobre o uso de vínculo.
212

Ou ainda:
O tutorial de HTML tem informações sobre o uso de vínculos.
Por estarem destacados na página da web, os vínculos “sobressaem-se”

visualmente mais do que o texto apresentado. Assim, o seu leitor verá o vínculo
antes de ler o texto. Experimente usar vínculos desse modo.
Use vínculos de retorno à origem

Considere a possibilidade de incluir, em cada uma das páginas da sua
apresentação, um vínculo com a página de nível mais alto ou com a home-
page. Esse vínculo permite que os leitores saiam rapidamente dos níveis mais
profundos do seu documento. Usar um vínculo de retorno à origem é bem mais
fácil do que tentar navegar de volta pela hierarquia das páginas ou utilizar o
recurso de retorno (voltar) de um navegador.
Vincular ou não vincular

A exemplo do que ocorre com as imagens gráficas, para todo vínculo criado,
você deverá considerar o motivo pelo qual está vinculando duas páginas ou
seções.
Esse vínculo é útil para os leitores? Ele fornecerá mais informações e os

deixará mais próximos de seus objetivos? Esse vínculo é relevante em
relação ao assunto corrente?
Cada vínculo deve ter uma finalidade, por isso tenha motivos razoáveis para
estabelecê-los. O simples fato de você mencionar a palavra “café” em uma
página referente a algum outro tópico não significa que tenha de vinculá-la com
um site referente ao café. Isso pode até parecer interessante, mas se um vínculo
não for útil para o assunto corrente, servirá apenas para confundir o leitor.
213

Capítulo 8
Existem algumas categorias de vínculos úteis em páginas da web. Vejamos.
•• Vínculos explícitos de navegação - são aqueles que indicam os

caminhos específicos que o leitor poderá tomar nas páginas da web:
para frente, para trás, para cima e para o início. Em geral, esses
vínculos são indicados por ícones de navegação.
•• Vínculos implícitos de navegação - são aqueles que apenas
sugerem, sem indicar de forma direta, a navegação entre as páginas.
Os menus de vínculos são o melhor exemplo de vínculos implícitos.
O destaque do texto de vínculo torna claro ao leitor que ele poderá
obter maiores informações sobre esse tópico ao selecionar um
vínculo correspondente. Mas isso não é indicado de forma explícita
no texto. Os vínculos implícitos de navegação podem também
conter estruturas de sumário ou outras estruturas de visão geral,
compostas inteiramente por vínculos.
•• Vínculos de definição - são palavras ou definições de conceitos
que podem tornar-se vínculos excelentes, especialmente se você
estiver criando grandes redes de páginas que contenham glossários.
Ao estabelecer um vínculo entre a primeira ocorrência de uma
palavra e a sua definição, você pode explicar o significado dessa
palavra aos leitores que não o conhecem, sem desviar a atenção
daqueles que já possuem esse conhecimento.
•• Vínculos de tangentes - são vínculos com informações tangentes
e relacionadas, úteis quando o conteúdo do texto pode desviar a
atenção do leitor do objetivo principal da página. Considere os
vínculos de tangente como as notas de rodapé ou as notas de
fim em um texto impresso. Eles podem referir-se a citações de
outras obras ou a informações adicionais que sejam interessantes,
mas que não sejam diretamente relacionadas àquelas que você
quer transmitir. Mas cuidado com os vínculos de tangente, pois é
possível você criar tantas tangentes a ponto de os leitores passarem
um tempo enorme acessando vínculos para outras páginas e não
conseguirem, por isso, retornar ao texto original. Resista à tentação
de criar todos os vínculos que puder e procure estabelecer vínculos
apenas para tangentes relevantes ao seu próprio texto. Evite
também duplicar a mesma tangente – por exemplo, estabelecer
vínculos com todas as ocorrências da palavra web na sua página.
214

Seção 5
Outras sugestões de bons hábitos
A seguir, algumas sugestões sobre os bons hábitos que você deve desenvolver
ao trabalhar com grupos de páginas da web.
Não divida os tópicos entre as páginas

As páginas da web funcionam melhor quando abrangem um único tópico
completamente, por esse motivo não divida os tópicos entre as páginas. Mesmo
que você crie vínculos entre elas, a transição pode ser confusa, e ficará ainda
mais se um leitor passar diretamente para a segunda ou a terceira página e não
souber o que está acontecendo.
Se você perceber que um tópico está ficando muito longo para uma única página,
considere a possibilidade de reorganizar o conteúdo para que possa dividi-
lo em vários subtópicos. Isso funciona especialmente bem em organizações
hierárquicas e permite que você determine exatamente o nível de detalhe de cada
“nível” da hierarquia que deve ser incluído, além do tamanho e da complexidade a
serem atribuídos a cada página.
Não crie páginas a mais ou a menos

Não existem regras para o número de páginas ou para o tamanho que as suas
apresentações da web devem ter. Você pode ter uma única página ou milhares
delas, dependendo do volume de informações que deseja transmitir e da forma
como as tiver organizado.
Suponha que você queira incluir todas as informações que deseja transmitir
em uma página grande e crie vários vínculos com as seções dessa página.
Então, você pode optar por um extremo ou por outro, cada qual com suas
vantagens e desvantagens.
215

Capítulo 8
Vantagens:
• A manutenção de um único arquivo é mais fácil e os vínculos contidos nele não

serão rompidos se você mover as informações ou atribuir novos nomes aos
arquivos vinculados.
• A estrutura é a mesma utilizada em documentos reais.
Desvantagens:
• Leva muito tempo para fazer download de um arquivo grande, especialmente

em conexões de rede lentas e se a página contém muitas imagens gráficas.
• Os leitores precisam rolar o texto várias vezes para localizar o que desejam.
O acesso a informações específicas pode tornar-se tedioso. A navegação
até outros pontos que não estejam localizados nem no início nem no final do
documento torna-se praticamente impossível.
• A estrutura é excessivamente rígida. Uma única página é, por natureza, linear.

Embora você possa passar diretamente de uma seção para outra, a estrutura
linear ainda reflete a da página impressa e não tira proveito da flexibilidade das
páginas menores vinculadas de forma não linear.
Ou, por outro lado, você pode criar um conjunto de páginas pequenas e
estabelecer vínculos entre elas.
Vantagens
• As páginas menores são carregadas rapidamente.
• Frequentemente, você pode apresentar a página inteira na tela. Dessa forma,

as informações contidas nessa página podem ser facilmente consultadas pelo
leitor.
Desvantagens
• A manutenção de todos esses vínculos pode tornar-se um pesadelo. A simples

inclusão de algum tipo de estrutura de navegação para essa grande quantidade
de páginas criaria milhares de vínculos.
• Se houver muitos vínculos entre as páginas, eles ficarão em desarmonia. É difícil

manter a continuidade da leitura quando o leitor passa mais tempo alternando
entre documentos do que propriamente lendo o texto.
216

Afinal, qual é a solução?
De modo geral, o assunto que você está escrevendo determinará o tamanho e

a quantidade de páginas que você precisará, especialmente se você seguir a
sugestão de usar um tópico por página. Se você testar as suas páginas da web
em uma grande variedade de plataformas e velocidades de rede, saberá se uma
única página é 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 páginas
Cada página deve conter algum tipo de informação na parte inferior, que funcione
como uma “assinatura”. A tag <ADDRESS> foi criada especificamente com esse
objetivo. A utilização dessa tag é útil nas suas páginas, pois informa:
•• Sobre como entrar em contato com o autor da página da web

ou com a pessoa responsável pela página, a quem chamamos de
webmaster. Essas informações devem conter pelo menos o nome e
o correio eletrônico dessa pessoa.
•• O status da página. Ela está completa? É um trabalho ainda em
andamento? Foi deixada propositalmente em branco?
•• A data da última revisão realizada na página. Isso é especialmente
importante no caso de páginas alteradas com muita frequência.
Inclua uma data em cada página para que as pessoas saibam há
quanto tempo ela foi criada e/ou atualizada.
•• Sobre os direitos autorais e as marcas registradas, quando
necessário.
•• O URL da página. A inclusão de um URL impresso de uma página
que pode ser localizada nesse mesmo URL pode parecer um pouco
exagerada. Mas, e se alguém imprimir a página e perder todas as
outras referências a ela no meio da pilha de papéis da mesa de
trabalho? De onde elas vieram?
Webmaster é a pessoa responsável pela criação e manutenção de um site na

web. Geralmente, as responsabilidades de um webmaster incluem responder a
mensagens de correio eletrônico, garantir a operação apropriada do site, criar e
atualizar páginas da web e manter a estrutura e o projeto do site. Muitas vezes, o
webmaster acumula a tarefa de administração de servidores na qual se alberga o
site.
217

Capítulo 8
A figura a seguir apresenta um ótimo exemplo de um bloco de endereço.
Figura 8.1 – Exemplo de assinatura para uma página web
Uma boa sugestão para a sua página da web é estabelecer um vínculo entre um
URL mailto e o texto que contém o endereço de correio eletrônico (e-mail) do
webmaster, como neste exemplo a seguir.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<br>
<i>Universidade do Sul de Santa Catarina - UNISUL</i><br>
<i>Copyright © UNISUL. All rights reserved.</i><br>
<i>Privacy Policy and Conditions for Use.(in Portuguese)</i><br>
<i><A HREF=”mailto:contato@unisul.br”><i>contato@unisul.br</i></A><br>
</BODY>
</HTML>
218

O endereço da figura anterior ficaria conforme apresentado na sequência.
Figura 8.2 – Exemplo de assinatura para uma página web com mailto
Tal procedimento permite aos leitores que tenham navegadores que ofereçam
suporte ao URL mailto, simplesmente selecionar o vínculo e enviar uma
correspondência para a pessoal responsável pela página, sem precisar digitar
novamente o endereço em seus programas de correio eletrônico.
Seção 6
Elementos e atributos obsoletos
No início, o HTML era a linguagem mais utilizada por cientistas. Eles não
precisavam de qualidade gráfica, diferentes formatações de textos e se
preocupavam muito mais com o conteúdo do que com a forma visual. Como as
páginas eram simples, qualquer navegador poderia ser utilizado para visualização.
Com a evolução dos navegadores que apresentam novas funcionalidades,

para atrair usuário e designers, surgiu a necessidade de criar páginas mais
interessantes e, ao mesmo tempo, mais complexas.
O design da página passou a ter a mesma importância que o conteúdo. Em

certo momento, o HTML passou a preocupar-se com ambas as necessidades
(conteúdo e design), mas não foi muito bem sucedido. As Web pages ficaram
cheias de tags desnecessárias, muitas tabelas agrupadas e outros truques para
fazer com que o HTML se comportasse como uma linguagem de design gráfico.
219

Capítulo 8
As páginas, então, passaram a ter uma codificação mais complexa e de difícil

manutenção e, por consequência, trouxeram problemas de exibição em certos
navegadores.
Foi aí que a W3C decidiu dar um basta nisso e resolveu tornar essas tags de
formatação de texto como obsoletas (deprecated), ou seja, essas tags de
formatação de texto e atributos estariam condenadas em futuras versões do
HTML e do XHTML.
A W3C, portanto, incorporou essas tags de formatação de texto/atributos ao CSS,

separando o que é conteúdo da estrutura. No CSS as tags básicas do HTML
definem os parágrafos, as listas, os cabeçalhos etc., e o CSS define como
o navegador irá mostrar as informações.
Algumas tags obsoletas do HTML 4.0 são apresentadas no quadro abaixo.
Quadro 8.1 – Tags obsoletas do HTML 4.0
TAG HTML Propriedade CSS
Center text-align:center
B font-weight:bold
I font-style:italic
U text-decoration: underline
Font e BaseFonte font-family:font name
S e Strike text-decoration:line-through
No quadro abaixo, veja alguns atributos obsoletos do HTML 4.0.
Quadro 8.2 – Atributos obsoletos do HTML 4.0
HTML Atributo Propriedade CSS
align text-align
background background-image:url(image)
bgcolor background-color
hspace padding
vspace padding
size font-size:
220

Nos exemplos a seguir, é apresentado o HTML sem as tags e os atributos

obsoletos. A formatação é feita utilizando o CSS.
Vamos começar pelo atributo Align. Esse atributo possui os seguintes valores:
align = left|center|right|justify
O exemplo abaixo apresenta o HTML obsoleto.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<H1 align=”center”> Cabeçalho Centralizado </H1>
</BODY>
</HTML>
O exemplo anterior utilizando CSS e fica da seguinte forma.
<HTML>
<HEAD><TITLE> </TITLE>
<STYLE type=”text/css”>
H1 { text-align: center}
</STYLE>
</HEAD>
<BODY>
<H1> Cabeçalho Centralizado </H1>
</BODY>
</HTML>
221

Capítulo 8
Essa mesma forma utilizada para formatar o texto do exemplo acima pode ser
feita com os atributos de tabelas. Com isso, você reduz o tamanho do código
HTML e padroniza a tabela.
Exemplo de tabela Obsoleta.
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>
<TR>
<TH><FONT SIZE=”8px” COLOR=”GREEN”>Comida</FONT></TH>
<TH><FONT SIZE=”8px” COLOR=”GREEN”>Bebida</FONT></TH>
</TR>
<TR>
<TD><FONT SIZE=”6px” COLOR=”RED”>Arroz</FONT></TD>
<TD><FONT SIZE=”6px” COLOR=”RED”>Vinho</FONT></TD>
</TR>
</TABLE>
</BODY>
</HTML>
222

Exemplo de tabela utilizando CSS.
<HTML>
<HEAD>
<TITLE> </TITLE>
TH { font-size: 48px;
color: GREEN}
TD { font-size: 32px;
color: RED}
</STYLE>
</HEAD>
<BODY>
<TR>
<TH>Comida</TH>
<TH>Bebida</TH>
</TR>
<TR>
<TD>Arroz</TD>
<TD>Vinho</TD>
</TR>
</TABLE>
</BODY>
</HTML>
223

Capítulo 8
A partir dos exemplos apresentados, é possível perceber que se outra tabela

for definida neste documento HTML, ele irá seguir o padrão definido no estilo.
Pesquise sobre folhas de estilo para mais detalhes de formatação.
As principais normas para o projeto e a elaboração de páginas da web,

apresentadas neste capítulo, foram as seguintes:
•• teste as suas páginas da web em vários navegadores.

•• redija as suas páginas de forma clara e concisa.
•• organize o texto da página para que os leitores possam consultar as
informações importantes.
•• crie páginas independentes de contexto, ou seja, que não
dependam de páginas anteriores ou posteriores.
•• não abuse na ênfase e nem utilize as tags de cabeçalho para dar
ênfase.
•• não use terminologias específicas de algum navegador.
•• revise e verifique a grafia das suas páginas, bem como a
concordância gramatical das frases.
•• utilize um layout padronizado e simples em todas as páginas.
•• use menus de vínculos.
•• não sobrecarregue a página com imagens bonitas, porém
desnecessárias.
Lembrando e aplicando essas orientações, você irá tirar o melhor proveito da web
e de documentos HTML.
224

Capítulo 9
Folhas de Estilo 1
Seção 1
O que são os estilos CSS
As tags que definem os elementos do HTML foram concebidas para definir
conteúdos. O autor do HTML nunca teve qualquer intenção de usar esta
linguagem para definir estilos gráficos para as páginas. As tags do HTML foram
idealizadas para declarar coisas como “Isto é um parágrafo”, ou “Isto é um
cabeçalho”. Para isso, colocavam-se tags como <P> ou <H1> ao redor do
texto. A forma como essa informação devia ser apresentada graficamente era
um problema que o navegador tinha que resolver tendo em consideração o
significado de cada tag.
Esse conceito perfeitamente racional era muito adequado enquanto o objetivo

das páginas era apenas a escrita e a partilha de textos na web, mas a rápida
aceitação da web fez com que as pessoas que davam importância ao design
também se interessassem por esse meio.
Esse interesse estimulou esforços para criar páginas graficamente elaboradas,

mais ao gosto dos designers. Um dos efeitos importantes foi a completa
adulteração do propósito de diversas tags. A tag <TABLE>, por exemplo, foi
concebida unicamente para apresentar tabelas com dados numéricos, mas
os designers passaram a usá-la para colocar as tags em diversos pontos das
páginas em arranjos cada vez mais complexos.
2016 . págs. 225 - 254.
225

Capítulo 9
Mas isso não foi suficiente, porque havia coisas que não podiam ser feitas
usando apenas as tags disponíveis. Para dar aos designers aquilo que eles
pediam, os criadores dos navegadores acharam que era boa ideia os primeiros
inventarem as suas próprias tags e acrescentarem atributos estilísticos as que
já existiam. Essas extensões permitiram usar o HTML para dar cores e estilos
diferentes ao texto e aplicar outras formatações.
As iniciativas dos criadores dessas novas tags e desses 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 importância ao
aspecto gráfico que produziam e não ao significado daquilo que continham.
Apesar de todas as contraindicações, a criação e a rápida disseminação de

tags conduziu a uma situação em que os conteúdos das páginas estavam
completamente misturados com os aspectos estilísticos. Esse contexto conduziu,
no final da década de 1990, o HTML a um estado em que era muito difícil criar
e fazer a manutenção de websites compostos por mais do que um número
reduzido de páginas. Os conteúdos das páginas não eram mais do que imensas
“sopas de tags” mal organizadas, cujo significado não era muito claro.
Esse problema começou a ser resolvido pelo World Wide Web Consortium
(W3C) com a criação dos padrões HTML 4, HTML 5, 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 conteúdos exprimem-se em HTML; e os estilos, em CSS.
As folhas de estilo permitem que você defina a aparência padrão 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
espaço em branco etc.
Esse novo paradigma para a criação de páginas é bem suportado por todos os
navegadores dominantes: Netscape/Mozila, Microsoft Internet Explorer, Opera,
Google Chrome etc.
Vantagens dos estilos CSS

As páginas que usam estilos CSS, além de serem mais fáceis de escrever, são
também mais leves e aparecem mais depressa no navegador.
Como já mencionado, as regras de estilos definem

A folha de estilo é um conjunto
de regras, normalmente definido o layout, a tipografia e os recursos de projeto de um
em um arquivo separado, que documento, separados da definição da estrutura
um navegador compatível utiliza do mesmo. Assim, a estrutura de um documento é
para representar o documento
estruturado, definido com o
definida por meio da utilização do HTML. Um autor
HTML. pode, então, definir a aparência e o projeto de sua
preferência usando uma folha de estilo.
226

Um navegador que não ofereça suporte para folhas de estilo ainda

pode representar o arquivo como um documento HTML padrão 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 são flexíveis. As
tags e os atributos, usados para aplicar folhas de estilo em um documento HTML,
não prendem os autores e fabricantes de navegadores a um tipo único de folha
de estilo.
Os estilos CSS definem o aspecto gráfico a dar às tags do HTML. Os estilos

podem ser definidos em uma folha de estilos, externa ou internamente, no próprio
documento HTML.
Quando definidos em uma pasta externa, os estilos podem ser compartilhados

por muitas páginas, o que permite alterar instantaneamente o aspecto gráfico de
todas as páginas, modificando apenas a pasta em que os estilos são definidos.
Quando você tinha que usar as técnicas antigas para fazer alterações no aspecto
gráfico de um website, você era obrigado a alterar todas as tags <FONT> e todas
as tabelas usadas para formatar as páginas. Isso tinha que ser feito em todas as
páginas.
Quando você utiliza estilos CSS, basta modificar um número reduzido de

definições em uma única folha de estilo para, instantaneamente, atualizar
centenas ou milhares de páginas com um esforço mínimo. Os erros ocorrem com
muito menos frequência e são muito mais fáceis de corrigir.
A facilidade com que as alterações agora são feitas dá mais flexibilidade ao

website e melhora o seu desempenho. As páginas ficam simultaneamente mais
ricas e mais leves.
O “mecanismo” de cascata
O termo cascata refere-se à sequência ordenada de estilos de formatação do
documento. As regras das folhas posteriores têm precedência sobre as anteriores.
A ordem de estilos aplicados é apresentada a seguir.
227

Capítulo 9
•• Um arquivo de folha de estilos separado que é vinculado - uma

folha de estilos externa.
•• Informações de estilos incorporados dentro da página - uma
folha de estilo interna.
•• Estilos aplicados diretamente a texto selecionado - um estilo
linear ou inline.
As folhas de estilos CSS dão-nos muita liberdade na forma de definir os estilos.
No mesmo documento, podemos utilizar uma ou mais pastas externas, definir
os estilos na secção <HEAD> do documento ou utilizar o atributo Style nas tags
do HTML. O navegador lê todas as definições de estilos que encontra e, quando
aparecem estilos repetidos, ele os combina em um só estilo, seguindo algumas
regras simples.
Uma das regras da cascata diz que, ao encontrar várias versões para o mesmo
estilo, o navegador guarda a última que encontrou. Outra regra diz que alguns
estilos são herdados pelas tags que se encontram dentro de outras tags.
Limitações dos navegadores atuais

As limitações associadas ao suporte que os navegadores atuais oferecem
devem estar sempre presentes na mente do criador de páginas baseadas em
CSS. Se você usar apenas as funcionalidades que são bem suportadas, que já
são muitas, não será preciso tomar muitas precauções. Se você decidiu utilizar
funcionalidades mais avançadas, definidas pelos padrões CSS, lembre-se de que
é preciso testar tudo de forma exaustiva em todos os navegadores relevantes
para não ter surpresas desagradáveis.
228

Seção 2
A sintaxe CSS
Agora, você está pronto para usar as folhas de estilo em cascata, as quais
utilizam uma sintaxe simples para definir a propriedade de estilo. A sintaxe das
definições CSS é composta por duas partes: uma tag e uma declaração.
Veja.
tag { propriedade: valor }
Os nomes de propriedade fazem parte da especificação CSS (color, background,

etc.). Os valores representam todos os valores válidos para a propriedade
específica. Veja um exemplo a seguir.
Tag Declaração
H1 { color: green }
Neste exemplo, a tag H1 diz que o estilo aplica-se a tags <h1> e a definição diz
que a cor do texto destas tags deve ser verde (“green”).
A declaração fica entre chaves ({...}) e pode conter várias definições. Cada
definição é formada por um par-propriedade: valor, que é separado da
propriedade pelo caractere dois pontos (:).
A declaração pode ser composta por uma lista de pares-propriedade: valores

separados por ponto e vírgula (;). Veja o exemplo a seguir.
Tag Declaração
P { color: green;
font-family: arial}
Essas listas podem ser usadas de várias 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.
Veja na sequência.
229

Capítulo 9
• Folhas de estilo inline – é uma definição de estilo que pode ser aplicada a
uma tag HTML específica, pela utilização do atributo Style.
• Folhas de estilo interna – é uma definição de estilo que pode ser criada
entre as tags <STYLE> e </STYLE> (isso deve estar no cabeçalho do
documento HTML). Esse tipo de definição estabelece um estilo para todas as
ocorrências de determinada tag HTML. Por exemplo, você pode definir todas
as ocorrências de cabeçalho <H1> para que sejam apresentadas em tipo
vermelho.
• Folhas de estilo externa – é uma folha de estilo que pode ser importada
de um arquivo externo, por meio da utilização de <LINK REL=stylesheet
HREF=”nome do arquivo de folha de estilo”>.
O ideal é remover toda a formatação das tags da linguagem e colocar em

folhas de estilo em cascata.
Seção 3
Tipos de definição de estilos
Quando o navegador encontra uma folha de estilos em um documento, ele a usa
para formatar os elementos desse documento. Existem três formas básicas e
diferentes para definir estilos e inseri-los em um documento.
1. Folhas de Estilo Inline

Usa-se um estilo inline quando a definição só precisa ser utilizada uma única vez.
A definição de estilos inline faz-se por meio do atributo Style colocado na tag
a qual queremos aplicar o estilo. A definição pode conter qualquer uma das
propriedades CSS. A sintaxe a seguir mostra como é a definição de um estilo
inline.
230

<tag STYLE=”propriedade: valor; propriedade: valor”>... </tag>
A definição de estilos utilizando o atributo Style faz-nos perder muitas das

vantagens das folhas de estilos, porque acabamos por misturar estilos com
conteúdos. 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 parágrafo.
<HTML>
</HEAD>
<BODY>
<P style=”color: blue; margin-left: 20px”>
Isto é um parágrafo formatado com o atributo style
</P>
<p> este parágrafo não tem estilo</P>
</BODY>
</HTML>
Aparece desta forma no navegador.
Figura 9.1 – Exemplo da criação de um estilo em parágrafo
231

Capítulo 9
Se desejarmos atribuir a uma propriedade um valor que contenha espaços,

devemos colocá-lo entre apóstrofos (‘). No exemplo seguinte, usaremos o tipo de
letra “sans serif” em um parágrafo, e “comic sans ms” em outro.
<HTML>
<HEAD><TITLE></TITLE>
</HEAD>
<BODY>
<P style=”font-family: ‘sans-serif’”>
Neste parágrafo, o tipo de letra é “sans-serif”
</P>
<P style=”font-family: ‘comic sans ms’”>
Neste parágrafo, o tipo de letra é “comic sans ms”
</P>
</BODY>
</HTML>
A visualização será da seguinte forma:
Figura 9.2 - Exemplo da criação de um estilo em parágrafos diferentes
232

2. Folhas de Estilos Internas

As folhas de estilos internas devem ser usadas quando as definições são
utilizadas por um único documento. Neste caso, as definições dos estilos são
colocadas dentro de uma tag <STYLE> no cabeçalho do documento HTML. Veja
o exemplo na sequência.
<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 estilo interna deve ser usada quando os estilos
são usados uma única vez. Neste caso, as definições são feitas dentro de uma
tag <STYLE>, que deve ser colocada dentro da tag <HEAD> da página HTML, da
seguinte maneira.
<HTML>
BODY { background-color: red }
P { margin-left: 20px }
</STYLE>
</HEAD>
<BODY>
</BODY>
</HTML>
233

Capítulo 9
O navegador lê as definições contidas na tag <STYLE> e faz a formatação dos

elementos da página aplicando essas definições. O exemplo seguinte permite a
você experimentar isso de imediato e ver seu resultado no navegador.
<HTML>
<style type=”text/css”>
H1 { color: green }
</style>
</HEAD>
<BODY>
<H1>Este cabeçalho tem cor verde</H1>
</BODY>
</HTML>
Veja na figura a seguir o resultado do exemplo apresentado.
Figura 9.3 – Exemplo de folha de estilo interno
234

Se o valor que queremos dar à propriedade tiver mais do que uma palavra, então
devemos colocá-lo entre aspas, como será mostrado a seguir.
<HTML>
P { font-family: “comic sans ms” }
</style>
</HEAD>
<BODY>
<P>
O texto deste parágrafo tem tipo de letra “comic sans ms”.
</P>
</BODY>
</HTML>
Visualize na Figura 9.4 o resultado.
Figura 9.4 – Exemplo de folha de estilo com propriedadecom mais de uma palavra
235

Capítulo 9
Dentro das chaves { e }, podemos colocar várias definições separadas pelo

caractere ponto e vírgula(“;”), conforme já comentado. O exemplo seguinte define
três propriedades para a tag <P>, que são o alinhamento, a cor do texto e o tipo
de letra.
<HTML>
P {
text-align: center;
color: green;
font-family: arial
</style>
</HEAD>
<BODY>
<P>
O texto deste parágrafo tem tipo de letra “arial”,
cor verde e está alinhado ao centro.
</P>
</BODY>
</HTML>
236

Observe como fica o exemplo na figura a seguir.
Figura 9.5 – Exemplo de folha de estilo com mais de uma definição
Para tornarmos mais legíveis as definições dos estilos, devemos colocar

cada definição em uma linha diferente, mas podemos também escrever
tudo na mesma linha.
O comportamento normal dos navegadores consiste em ignorar os elementos

cujo significado desconhecem. Isso significa que um navegador muito antigo,
que não suporta estilos CSS, ignorará a tag <STYLE>, mas não ignorará o texto
que está escrito lá dentro. Se for necessário evitar que esse navegador escreva
o texto das definições, devemos então ocultá-lo, colocando-o dentro de um
comentário do HTML, como mostraremos a seguir.
<HTML>

</style>
</HEAD>
<BODY>
...
</BODY>
</HTML>
Se o navegador suporta CSS, ele entenderá a aplicação da folha de estilo à tag

mencionada.
3. Folha de Estilos Externa
Uma folha de estilos externa é a solução mais indicada quando se pretende

aplicar os mesmos estilos a várias páginas. Este método de formatação permite-
nos alterar os estilos apenas na folha e, assim, aplicá-los a todas as páginas
imediatamente. Todas as páginas ficam atualizadas com as novas definições.
Para uma página poder usar uma folha de estilos, basta colocar, dentro do
cabeçalho (<HEAD>), uma tag <LINK> com uma referência para a folha de estilos
que contém as definições, como se ilustra a seguir.
238

<HTML>
<LINK rel=”stylesheet” type=”text/css” href=”meu_estilo.css”>
</HEAD>
<BODY>
...
</BODY>
</HTML>
A tag LINK associa um arquivo de folha de estilo externa ao documento corrente.

Dessa forma, um estilo padronizado para um site pode ser determinado pelo
gerente, por exemplo, e aplicado aos documentos criados por um autor de uma
organização. O atributo REL relaciona o link a uma folha de estilos externa.
A utilização de folha de estilos externa permite poupar tempo, ganhar flexibilidade

e aumentar a consistência das páginas que constituem um website. Quando
guardamos os estilos em uma pasta externa e os aplicamos a todas as páginas
de um website, a modificação de diversas qualidades do aspecto gráfico passa a
ser uma tarefa fácil.
O navegador lê as definições contidas na folha de estilos (meu_estilo.css) e faz a

formatação dos elementos do documento aplicando essas definições.
Mais uma vez, o caminho dos arquivos das folhas de estilo deve estar no mesmo
diretório da página ou ser definido o caminho absoluto ou relativo.
Para poder testar esse tipo de inserção de folhas de estilho, crie um arquivo texto
(pode ser editado no próprio bloco de notas do Windows) chamado “meu_estilo.
css”. Em seu conteúdo, escreva as formatações dos exemplos.
Sempre que alterar o valor de um estilo, basta salvar o arquivo CSS e atualizar
(F5) a página, sem a necessidade de nenhuma alteração no arquivo HTML.
Dentro do mesmo arquivo, pode haver a definição de layout de várias tags,

classes de forma que, com a abertura e fechamento das chaves {}, delimitam uma
declaração de outra.
239

Capítulo 9
Se você abrir o arquivo “meu_estilo.css”, irá reparar que a folha de estilos externa
é apenas um arquivo de texto que contém definições CSS. No seu conteúdo não
podem aparecer tags do HTML, pois só são permitidas definições CSS válidas.
Elementos de bloco e elementos inline

Todos os elementos visíveis em uma página escrita em HTML pertencem a um
destes dois tipos: bloco ou inline.
Os elementos de bloco, como por exemplo <div> ou <table>, começam em

uma nova linha e, ao terminarem, ocorre novamente uma mudança de linha. Os
elementos de bloco recebem larguras que são calculadas em função da largura
do bloco em que estão contidos.
Os elementos inline, como <b> ou <span> não dão início a uma nova linha e a
sua largura é determinada apenas pelo seu conteúdo. 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 definições. Para isso, escreva uns seguidos dos outros,
separados por vírgulas. No exemplo seguinte, todas as tags de <h1> até <h6>
partilham a mesma definição.
h1,h2,h3,h4,h5,h6
color: green
240

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, por meio da utilização do atributo Class. Apenas
as definições de estilo para esse elemento na classe específica serão aplicadas a
ele.
As definições de classes permitem-nos definir estilos diferentes que podem

ser aplicados à mesma tag. Imagine que você precisa ter dois tipos diferentes
de parágrafo no documento, um alinhado à direita e outro alinhado ao centro.
Vejamos como as classes tornam isso fácil.
<HTML>
<HEAD> <TITLE> </TITLE>
P.direita { text-align: right }
P.centro { text-align: center }
</style>
</HEAD>
<BODY>
<P class=”direita”>
Este parágrafo está alinhado à direita.
</P>
<P class=”centro”>
Este parágrafo está alinhado ao centro.
</P>
</BODY>
</HTML>
241

Capítulo 9
Visualize na figura que segue.
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. Por isso, o exemplo seguinte está errado.
<p class=”direita” class=”verde”>
Este parágrafo tem um erro causado pela utilização repetida do atributo Class.
</p>
As definições de classe também podem ser criadas sem colocarmos o nome de

uma tag no início da definição. Quando isso acontece, as definições 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>
.centro { text-align: center }
</style>
242

</HEAD>
<BODY>
<H2 class=”centro”>
Cabeçalho alinhado ao centro
</H2>
<P class=”centro”>
Este parágrafo também está alinhado ao centro.
</P>
</BODY>
</HTML>
Acompanhe a visualização a seguir.
Figura 9.7 – Exemplo de tag de classe em tags diferentes
Perceba que a definição de classes genéricas, que pode ser utilizada em qualquer
tag, necessita obrigatoriamente de um ponto (.) antes do nome da classe. Essa
metodologia é bem interessante, pois exige a possibilidade de reaproveitamento
de estilos, sempre que for necessário utilizar a referida formatação.
243

Capítulo 9
O critério de nomenclatura das classes é o apresentado a seguir.
Nome_da_tag.nome_da_classe .nome_da_classe
Utilizado para todas as tags Utilizado em qualquer tag em que se
definidas queira aplicar a classe
p.direta .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 página. As regras do HTML ditam
que os valores do atributo ID não podem repetir-se em uma mesma página. Daí
resulta que o número de elementos no documento com um determinado ID é um
ou é zero.
A regra de seleção 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.
244

<HTML>
P#para1 {
text-align: center;
color: red
</style>
</HEAD>
<BODY>
<P id=”para1”>
Este parágrafo está alinhado ao centro e
tem cor vermelha.
</P>
</BODY>
</HTML>
Visualize na figura a seguir.
Figura 9.8 – Exemplo de tag de ID
245

Capítulo 9
Se tentarmos aplicar esta regra a uma tag <DIV>, usando id=”para1”, veremos
que o navegador não a aceita, pois ele foi definido somente para a tag <P>.
<HTML>
P#para1 {
text-align: center;
color: red
</style>
</HEAD>
<BODY>
<div id=”para1”>
Este parágrafo está alinhado ao centro e
tem cor vermelha.
</div>
</BODY>
</HTML>
246

A visualização fica conforme mostrado a seguir.
Figura 9.9 – Exemplo de tag id utilizada em outra tag não definida
Se quisermos que a regra seja aplicada a qualquer tag que tenha o id=“para1”,
basta escrevê-la na forma que se segue.
#para1 {
text-align: center;
color: red
A regra acima é aplicável a qualquer tag que tenha o ID correto, porque não está
sendo definido para uma tag específica e sim para o ID que se aplica a todas as
tags. No exemplo seguinte, ela seria aplicada à tag <H1>.
<H1 id=”para1”>As músicas do Bonga são bué de fixes</H1>
247

Capítulo 9
Escrever Comentários em Folha de Estilos

Podemos inserir comentários nas definições CSS para explicar o código que
escrevemos tornando-o mais fácil de compreender. Ao voltarmos posteriormente
a uma folha de estilos ou se a partilharmos com outra pessoa, será mais fácil
perceber como funciona.
Para iniciar um comentário escreva a sequência de caracteres “/*”, depois, o

texto do comentário e, no fim, escreva “*/” para terminar o comentário. O
exemplo seguinte mostra como se faz.
P{
text-align: center;
/* Isto é um comentário */
color: black;
/* O MSIE 5 não reconhece os comentários!!! */
font-family: arial
Seção 4
A ordem da cascata
Quando um estilo é definido mais do que uma vez, qual das definições o
navegador deve escolher? A primeira? A última? Nenhuma delas? Para decidir,
o navegador aplica as seguintes regras (listadas por ordem crescente de
importância).
•• Estilos definidos por omissão: são aplicados sempre que não

existirem outros que se sobreponham a eles.
•• Estilos definidos em uma folha de estilos interna (dentro da tag
<STYLE>) ou em uma pasta externa.
•• Estilos inline: definidos por meio do atributo Style nas tags do
documento HTML.
248

Assim, temos que os estilos que são definidos na própria tag por intermédio do
atributo Style têm a prioridade mais elevada. As definições que o atributo Style
faz sobrepõem-se a qualquer definição que tenha sido feita antes.
Um documento HTML pode definir ou utilizar mais do que uma folha de

estilos. Quando isso acontece, é possível que algumas propriedades sejam
definidas em uma folha e definidas de novo em outra. Nestes casos, o
navegador deve aplicar as regras descritas para decidir qual das definições
é mais importante.
Suponha que uma folha de estilos externa defina as seguintes propriedades para
a tag h2.
H2 {
color: red;
text-align: left;
font-size: 8pt
Mas existe uma folha de estilos interna com as seguintes propriedades também
para a tag h2.
H2 {
text-align: right;
font-size: 20pt
Se a página que contém a folha de estilos interna usa a tag <link> para se
ligar à folha de estilos externa indicada antes, então as duas definições serão
249

Capítulo 9
combinadas para produzir a seguinte versão 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 substituídos pelas definições dadas na folha interna.
Herança de Estilos entre Elementos

Algumas propriedades CSS definidas para um elemento são automaticamente
aplicadas aos descendentes desse elemento. Quando isso acontece, diz-se que
as propriedades são herdadas. O exemplo seguinte mostra como funciona esse
mecanismo de “herança” de estilos.
250

<HTML>
div { color: blue }
</style>
</HEAD>
<BODY>
<div>
O texto dos elementos <div> tem cor azul.
<P>
Este parágrafo está dentro de um elemento

<div>.
Ele herda a cor azul.
</P>
</div>
<P>
Este parágrafo não está dentro de nenhum elemento que lhe

deixe
uma “herança”.
</P>
</BODY>
</HTML>
No exemplo anterior, a folha de estilos expressa que o texto das tags <DIV> deve
ter cor azul. O parágrafo que está dentro de uma tag <DIV> “herda” a cor azul
porque a propriedade color é “herdada” pelos descendentes de uma tag. Já o
segundo parágrafo não está dentro de nenhuma tag que lhe deixe uma “herança”
(que neste caso é a propriedade color) e por isso o seu texto tem a cor normal.
251

Capítulo 9
Acompanhe na figura a seguir a visualização do exemplo de “herança” de estilos.
Figura 9.10 – Exemplo de “herança” de estilos
Há outras propriedades que só afetam o elemento ao qual são aplicadas e não

se propagam aos seus descendentes. Diz-se que essas propriedades não são
“herdadas”. O exemplo seguinte é semelhante ao anterior com o acréscimo da
propriedade border, que não é “herdada”.
<HTML>
div {
color: blue;
border: solid thin red
</style>
</HEAD>
<BODY>
252

<div>
Os elementos <div> recebem uma linha de contorno
vermelha (border) e texto com cor azul.
<p>
Este parágrafo está dentro de um elemento <div>.
Ele herda a cor azul mas não herda a linha de
contorno (border).
</p>
<div>
Tal como o elemento <div> principal este
elemento <div> recebe a sua própria 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 não.
Figura 9.11 – Outro exemplo de “herança” de estilos
253

Capítulo 9
Neste capítulo, aprendemos a criar estilos para um documento HTML e, assim,

definir padrões para as páginas.
Por meio da utilização das folhas de estilo, você pode definir tudo que precisa
para uma página na web, de tipos de fonte para as diferentes tags da HTML até
cores de fontes, cores e imagens gráficas de fundo, margens, espaçamento,
estilo de tipo e muito mais. Basicamente, qualquer parte da aparência 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 atenção para o fato de ainda subsistirem alguns
problemas quando aplicamos técnicas avançadas de formatação baseadas
em CSS. Por isso, é necessário testar e aplicar os estilos para que você veja o
resultado em vários navegadores.
254

Capítulo 10
Criação de Formulários 1
Seção 1
Criando um formulário
Até agora, você viu a forma pela qual o HTML mostra a informação,
essencialmente mediante o texto, imagens e links. Até então, os leitores estão
sentados lendo as páginas, percorrendo vínculos e absorvendo as informações
que você apresentou.
Os formulários mudam inteiramente essa situação. O leitor passa a interagir

com o seu site por meio de uma grande quantidade de ações que podem ser
realizadas na web: comprar um artigo, preencher uma enquete, enviar um
comentário ao autor etc.
Você viu, anteriormente, que podemos, por intermédio dos links, entrar em
contato diretamente com um correio eletrônico. Entretanto, esta opção pode ser
pouco versátil em alguns casos, se o que desejamos é que o leitor nos envie uma
informação bem precisa pela página criada por você. Isso pode ser realizado por
meio do uso de formulários.
Os formulários são essas famosas caixas de texto e botões que podemos

encontrar em muitas páginas web. São muito utilizados para realizar buscas
ou também para introduzir dados pessoais, por exemplo, em sites de comércio
eletrônico. Os dados que o usuário introduz nos campos são enviados ao correio
eletrônico do administrador pelo formulário ou são processados automaticamente
por um programa.
2016 . págs. 255 - 290.
255

Capítulo 10
Usando HTML, você pode unicamente enviar o formulário a um correio eletrônico.

Se quiser processá-lo por intermédio de um programa, o processo pode ser um
pouco mais complexo, já que você terá que empregar algumas linguagens para
web, como ASP ou PHP, por exemplo, que permitirão, entre outras coisas, o
tratamento de formulários.
Um formulário é uma seção da página HTML que contém elementos que

permitem ao leitor introduzir dados numéricos, textos curtos, textos extensos,
selecionar elementos em uma lista com várias escolhas, responder facilmente
respostas do tipo “sim” ou “não”, selecionar rapidamente uma opção em um
pequeno grupo etc.
Neste capítulo, serão apresentadas a você as possibilidades para a criação de

layouts de formulário, que em geral, envolve duas etapas independentes:
1. a criação do layout do formulário;

2. a criação de um programa de script no servidor para processar
as informações que você obtém a partir de um formulário.
Para criar um formulário, você utiliza as tags <FORM>...</FORM>. A tag <FORM>
por si só não faz com que o navegador desenhe algo na página nem permite
inserir dados. Ela contém elementos que recolhem os dados (campos de texto,
botões 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 criação de formulários.
ACTION
Este atributo da tag <FORM> define o tipo de ação a ser realizado com o
formulário. Como já comentado anteriormente, existem duas possibilidades:
•• o formulário é enviado a um endereço de correio eletrônico;

•• o formulário é enviado a um programa ou script que processa seu
conteúdo, ou seja, uma URL.
256

No primeiro caso, o conteúdo do formulário é enviado ao endereço de correio

eletrônico especificado por meio da sintaxe abaixo.
<FORM ACTION=”mailto:endereço@correio.com”>...</FORM>
Se o que você deseja é que o formulário seja processado por um programa, deve
especificar o endereço do arquivo que contém tal programa. Nesse caso, a tag
ficaria da seguinte forma.
<FORM ACTION=”endereço do arquivo”>...</FORM>
A maneira de se expressar a localização do arquivo que contém o script é a

mesma já estudada no capítulo sobre vínculos.
METHOD
Este atributo da tag <FORM> encarrega-se de especificar a forma na qual o
formulário é enviado, ou seja, seleciona um método para acessar a URL de ação.
Os métodos usados atualmente são GET e POST. Ambos os métodos transferem
dados do navegador para o servidor, com a seguinte diferença básica.
•• POST - Os dados inseridos fazem parte do corpo da mensagem

enviada para o servidor. Transfere grande quantidade de dados, e os
mesmos não são visualizados pelos usuários.
•• 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 usuários na URL.
Os formulários podem conter qualquer formatação - parágrafos, listas, tabelas,
imagens - exceto outros formulários. Em especial, colocamos dentro da tag
<FORM> as formatações para campos de entrada de dados, que são três:
<INPUT>, <SELECT> e <TEXTAREA>.
Todos os campos de entrada de dados têm um atributo NAME, ao qual

associamos um nome, utilizado, posteriormente, pelo sistema para enviar os
dados. Normalmente, são usados “scripts”.
257

Capítulo 10
Os scripts organizam esses dados de entrada de todos os campos em um

conjunto de informações e realizam uma tarefa programada como, por exemplo,
enviar os dados do formulário para o seu e-mail.
Como a HTML não tem condições de fazer isso, é necessário utilizar scripts CGI,
PERL, ASP, JavaScript etc. para executar essas tarefas. Porém, esses tipos de
scripts necessitam de aprendizado mais dedicado para criar o que você deseja
e são muito mais complexos do que a linguagem HTML, pois eles processam
informações.
ENCTYPE
Este outro atributo da tag <FORM> indica a forma na qual a informação que for
mandada pelo formulário será enviada. No caso mais corrente, ao se enviar o
formulário por correio eletrônico, o valor deste atributo deve ser “TEXT/PLAIN”.
Assim, você consegue que o conteúdo do formulário seja enviado como texto
plano dentro do e-mail.
Se você deseja que o formulário seja processado automaticamente por um

programa, geralmente não se utiliza este atributo no seu valor padrão, ou seja,
não incluindo ENCTYPE dentro da tag <FORM>.
Assim, para o caso mais habitual - o envio do formulário por correio - a tag de
criação do formulário terá o seguinte aspecto.
<FORM ACTION=”mailto:endereço@correio.com (ou o nome do arquivo de script)”

METHOD=”post” ENCTYPE=”text/plain”>...</FORM>
Entre esta tag e seu fechamento, você colocará o resto de tags que darão forma
ao seu formulário, as quais serão vistas nas próximas seções. O HTML propõe
uma grande diversidade de alternativas na hora de criar os formulários. Elas vão
desde a clássica caixa de texto até a lista de opções, passando pelas caixas de
validação. Todos os elementos do formulário dão suporte às configurações das
folhas de estilo (CSS). Na sequência, você vai ver em que consiste cada uma
dessas modalidades e como pode implementá-las em seu formulário.
258

Seção 2
Campos de entrada de texto
Os campos “entrada de textos” ou simplesmente “caixa de texto” permitem ao
usuário digitar texto em um campo de única linha. A tag <INPUT> inicia a criação
de campos de dados ou caixas de texto. Esse é um dos elementos que mais
encontramos nos formulários.
A tag <INPUT> não tem tag de fechamento. O emprego destas caixas está
fundamentalmente destinado à tomada de dados breves: palavras ou conjuntos
de palavras de longitude relativamente curta. Para entrada de textos mais longos
existe uma outra tag que define outro campo chamado “área de texto longo”.
A tag <INPUT> possui vários atributos que permitem a criação de diferentes
campos de entrada de dados.
Atributo NAME
O nome do elemento do formulário é de grande importância para poder identificá-
lo em nosso programa de processamento ou no e-mail recebido. Sua sintaxe é a
seguinte.
<INPUT NAME=”nome_do_campo”>
Este atributo é especialmente usado para que você dê um nome ao campo. Ele
não aparece na página, 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 usuário preencheu em cada campo. Por exemplo, se você tem vários
campos de texto, cada um para um tipo de informação diferente, você usa o
atributo NAME para identificar o campo. Você sempre verá em todas as tags
INPUT que este atributo estará presente.
259

Capítulo 10
Atributo TYPE
Por outro lado, é importantíssimo indicar o atributo TYPE, já que existem outras
modalidades de formulário que usam essa 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”>
Neste exemplo, temos uma caixa de texto cujo conteúdo será referenciado pelo
identificador “nome”. O aspecto mais comum desse tipo de caixa de texto pode
ser visto a seguir.
Figura 10.1 – Caixa de texto
Quando INPUT não apresenta o atributo TYPE, assume-se TYPE= “text” como
padrão da formatação. O exemplo seguinte mostra um formulário simples com
dois elementos input.
<BODY>
<FORM ACTION=”processar.php” METHOD=”post”>
Primeiro nome: <INPUT TYPE=”text” NAME=”primeiro_nome”><BR>
Último nome: <INPUT TYPE=”text” NAME=”último_nome”>
</FORM>
</BODY>
</HTML>
260

Acompanhe o aspecto do formulário na figura a seguir.
Figura 10.2 – Exemplo de um formulário
Atributo VALUE
Em alguns casos, pode ser interessante atribuir um valor definido ao campo em
questão. Isso pode ajudar o usuário a preencher mais rapidamente o formulário
ou a dar alguma ideia sobre a natureza de dados que se deseja. O valor inicial do
campo pode ser expresso mediante o atributo VALUE. Vejamos seu efeito com
um exemplo simples.
<HTML>
<BODY>
<INPUT TYPE=”text” NAME=”nome” VALUE=”Ana Paula”>
</FORM>
</BODY>
</HTML>
261

Capítulo 10
Gera-se, assim, um campo conforme a figura que segue.
Figura 10.3 – Exemplo de caixa de texto com valor definido
Campo de entrada de texto em formato de

senha
O campo de dados texto, em formato senha, é uma entrada de texto na qual os
caracteres são escondidos por asteriscos. Podemos esconder o texto escrito por
meio de asteriscos de forma a fornecer certa confiabilidade. Esse tipo de campo
é análogo aos de texto com somente uma diferença: o atributo TYPE será igual
ao “password”.
<INPUT TYPE=”password” NAME=”nome”>
Nesse caso, pode ser comprovado que, ao escrever dentro do campo no lugar
de texto, serão vistos asteriscos. Esses campos são ideais para a introdução de
dados confidenciais, principalmente códigos de acesso, além de serem muito
usados para entradas de senhas, como se pode ver no exemplo a seguir.
262

<HTML>
<BODY>
Usuário: <INPUT TYPE=”text” NAME=”login”><BR>
Senha: <INPUT TYPE=”password” NAME=”senha”>
</FORM>
</BODY>
</HTML>
Acompanhe o resultado na Figura 10.4.
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 não
aparece no formulário para o visitante. Ele está lá no código, mas o visitante não
pode vê-lo ou alterá-lo, ou seja, ele é importante para você incluir informações que
ache necessárias, mas que não deseja que o visitante altere. Veja um exemplo:
263

Capítulo 10
<FORM>
<INPUT TYPE=”hidden” NAME=”Escondido” Value=”Sim”>
</FORM>
Aqui, o campo está escondido. O visitante não o vê, mas ele vai ser processado
pelo formulário. Você pode incluí-lo sem problemas junto com os outros elementos,
conforme o exemplo a seguir.
<HTML>
<BODY>
Usuário: <INPUT TYPE=”text” NAME=”login”><BR>
Senha: <INPUT TYPE=”password” NAME=”senha”>
<INPUT TYPE=”hidden” NAME=”Escondido” VALUE=”Sim”>
</FORM>
</BODY>
</HTML>
A visualização deste exemplo é a seguinte.
Figura 10.5 – Exemplo de caixa de texto com campo escondido
264

Em alguns casos, à parte dos próprios dados enviados pelo usuário, pode ser
prático enviar dados definidos por nós mesmos, que ajudem o programa em seu
processamento do formulário. Vejamos outro exemplo.
<INPUT TYPE=”hidden” NAME=”site” VALUE=”www.meusite.com”>
Essa tag, incluída dentro de nosso formulário, enviará um dado adicional ao

correio ou ao programa encarregado da gestão do formulário. Poderíamos, a
partir deste dado, tornar conhecido para o programa a origem do formulário ou
algum tipo de ação a ser realizada (um reendereçamento, por exemplo).
Atributo SIZE
O atributo SIZE define o tamanho da caixa em número de caracteres. Se, ao
escrever, o usuário chega ao final da caixa, o texto irá desfilando à medida que se
escreve fazendo desaparecer a parte de texto que fica à esquerda. Este atributo
também especifica o tamanho do espaço no vídeo para o campo do formulário.
Só é válido para campos TEXT e PASSWORD. O valor padrão é 20. Veja um
exemplo a seguir.
<HTML>
<BODY>
<FORM>
Endereço: <INPUT TYPE=”text” SIZE=”35”>
</FORM>
</FORM>
</BODY>
</HTML>
265

Capítulo 10
A visualização é a seguinte.
Figura 10.6 – Exemplo da utilização do atributo SIZE
Atributo MAXLENGTH
Este atributo indica o tamanho máximo do texto que pode ser “tomado” pelo
formulário. É importante não confundi-lo com o atributo SIZE. Enquanto este
define o tamanho aparente da caixa de texto, o MEXLENGTH indica o tamanho
máximo real do texto que pode ser escrito.
Podemos ter uma caixa de texto com um tamanho aparente (SIZE) que é menor
do que o tamanho máximo (MAXLENGTH). O que ocorrerá, neste caso, é que,
ao ser escrito, o texto irá desfilando dentro da caixa até que cheguemos ao seu
tamanho máximo, definido por MAXLENGTH. Neste momento, será impossível
continuar escrevendo. Este atributo só é válido para campos de entrada TEXT e
PASSWORD.
<HTML>
<BODY>
<FORM>
266

Dia do mês: <INPUT TYPE=”text” NAME=”dia” MAXLENGTH=”2”>
</FORM>
</FORM>
</BODY>
</HTML>
Figura 10.7 – Exemplo da utilização do atributo MAXLENGTH
No exemplo anterior, apenas 2 caracteres serão lidos pelo formulário e não será
possível digitar mais do que 2 caracteres no campo.
Quando você deseja utilizar elementos de formulário, deve escrevê-los sempre

entre as tags <FORM>...</FORM>. Caso contrário, os elementos serão vistos
perfeitamente no Internet Explorer, enquanto em outros navegadores podem não
ser.
É por isso que, para mostrar um campo de texto, não adianta colocar a tag
<INPUT> e sim, colocá-la dentro de um formulário, conforme você vai ver a seguir.
<FORM>
<INPUT TYPE=”text” NAME=”nome” VALUE=”Josefa Palotes”>
</FORM>
267

Capítulo 10
Área de texto longo

Se você deseja colocar à disposição do usuário um campo de texto, em que
possa escrever sobre um espaço composto de várias linhas, você tem, então,
que utilizar a tag <TEXTAREA> e seu fechamento correspondente.
Esses tipos de campos são práticos quando o conteúdo a ser enviado não é um
nome, telefone ou qualquer outro dado breve, e sim um comentário, opinião etc.
Dentro desta tag, você deve indicar o atributo NAME para associar o conteúdo a
um nome, que será semelhante a uma variável em linguagens de programação.
Além disso, você pode definir as dimensões do campo a partir dos seguintes
atributos:
•• ROWS: define o número de linhas do campo de texto;

•• COLS: define o número de colunas do campo de texto.
A tag fica desta forma.
<HTML>
<BODY>
<FORM>
<TEXTAREA NAME=”comentário” ROWS=”10” COLS=”40”>...</

TEXTAREA>
</FORM>
</FORM>
</BODY>
</HTML>
268

O resultado é o seguinte.
Figura 10.8 – Exemplo da utilização de área de texto
Mesmo assim, ainda é possível definir o conteúdo do campo. Para isso, você
não usará o atributo VALUE, e sim o conteúdo entre as tags que lhe desejamos
atribuir. Vejamos no exemplo que segue.
<HTML>
<BODY>
<FORM>
<TEXTAREA NAME=”comentário” ROWS=”10” COLS=”40”>Escreva seu
comentário....</TEXTAREA>
</FORM>
</BODY>
</HTML>
Você obtém o seguinte resultado.
269

Capítulo 10
Figura 10.9 – Exemplo da utilização de área de texto com conteúdo definido
Repare que, no atributo “COLS”, nós definimos o número de colunas para a

largura do campo de texto e, em “ROWS”, o número de linhas para o campo
de texto. Se o usuário 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 desses
atributos podem ser modificados à vontade de acordo com a sua necessidade.
Seção 3
Seleções e listas de opções
Efetivamente, os textos são uma forma muito prática para se fazer chegar à
informação do navegante. Porém, em muitos casos, os textos dificilmente são
adaptáveis a programas que possam processá-los devidamente ou pode ser,
também, que seu conteúdo não se ajuste ao tipo de informação que requeremos.
É por isso que, em determinados casos, pode ser mais efetivo propor uma
escolha ao navegante, a partir da exposição de uma série de opções.
Esse é o caso de, por exemplo, oferecer uma lista de países, o tipo de cartão de
crédito para um pagamento etc. Esses tipos de opções podem ser expressos de
diferentes formas.
As listas de opções são tipos de menus desdobráveis que nos permitem escolher
uma (ou várias) das múltiplas opções que nos propõem. Para construí-las,
utilizaremos uma tag com seu respectivo fechamento: <SELECT>.
Como para os casos já vistos, dentro dessa tag, definiremos seu nome por meio
do atributo NAME. Cada opção será incluída em uma linha precedida da tag
270

<OPTION>.
Veja, a partir destas diretrizes, a forma mais típica e simples desta tag.
<HTML>
<BODY>
<FORM>
<SELECT NAME=”estação”>
<OPTION>Primavera</OPTION>
<OPTION>Verão</OPTION>
<OPTION>Outono</OPTION>
<OPTION>Inverno</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
O resultado será igual ao apresentado na Figura 10.10:
Figura 10.10 – Exemplo de seleção
A tag SELECT pode ser vista modificada, principalmente a partir de outros dois
271

Capítulo 10
atributos: SIZE e MULTIPLE.
•• Atributo SIZE – indica o número de elementos da lista visíveis

no formulário. O resto pode ser visto por meio da barra lateral de
deslocamento. Segue um exemplo abaixo.
<HTML>
<BODY>
<FORM>
<SELECT NAME=”estação” SIZE=”3”>
</SELECT>
</FORM>
</BODY>
</HTML>
Visualize na figura a seguir.
Figura 10.11 – Exemplo de seleção com o atributo SIZE
272

•• Atributo MULTIPLE – permite a seleção de vários 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 possível, não utilize MULTIPLE. Não recomendamos o uso

dessa opção, já que o manejo das teclas CTRL ou SHIFT, para escolher
várias opções, pode ser desconhecido para o usuário. Evidentemente,
sempre cabe a possibilidade de explicar como funciona, apesar de ser uma
complicação a mais para o visitante.
Vejamos qual é o efeito produzido por esses atributos.
<HTML>
<BODY>
<FORM>
<SELECT NAME=”estação” SIZE=”3” MULTIPLE>
</SELECT>
</FORM>
</BODY>
</HTML>
273

Capítulo 10
A lista poderá ser selecionada dessa forma.
Figura 10.12 – Exemplo de seleção 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

não toma nenhum valor, a não ser o de simplesmente indicar que
a opção apresentada está escolhida por padrão. Este atributo é
aplicado à tag <OPTION>.
Assim, se mudarmos a linha do código anterior, teremos:
<HTML>
<BODY>
<FORM>
<SELECT NAME=”estação”>
274

<OPTION SELECTED>Outono</OPTION>
</SELECT>
</FORM>
</BODY>
</HTML>
O resultado será conforme mostrado na figura a seguir.
Figura 10.13 – Exemplo de seleção com o atributo SELECTED
•• Atributo VALUE – define o valor da opção que será enviada ao

programa ou ao correio eletrônico se o usuário escolhe essa opção.
Este atributo pode ser muito útil se o formulário for enviado a um
programa, visto que a cada opção se pode associar um número
ou letra, o qual se torna muito mais fácil de manipular do que uma
palavra ou texto. Poderíamos, assim, escrever linhas conforme as
apresentadas na sequência.
275

Capítulo 10
<OPTION VALUE=”1”>Primavera</OPTION>
Desse modo, se o usuário escolhe primavera, o que chegará ao programa (ou

ao correio) é uma variável chamada estação, que terá como valor 1. No correio
eletrônico, por exemplo, receberíamos:
estação=1
Seção 4
Botões de rádio
Os botões de rádio indicam uma lista de itens, dos quais apenas um pode ser
escolhido de cada vez. Os botões de rádio usam a tag <INPUT> com o atributo
TYPE igual a “radio”. Você indica os grupos de botões de rádio usando o mesmo
atributo NAME para cada um.
Além disso, cada um dos botões de rádio deve ter um atributo VALUE exclusivo,
indicando o valor da seleção. Veja o exemplo a seguir.
<HTML>
<BODY>
<FORM>
<INPUT TYPE=”radio” NAME=”sexo” VALUE=”masculino”>

Masculino<BR>
<INPUT TYPE=”radio” NAME=”sexo” VALUE=”feminino”> Feminino
</FORM>
</BODY>
</HTML>
276

Este é o aspecto do formulário quando visualizado em um navegador.
Figura 10.14 – Exemplo de botão de seleção
Repare que só é possível selecionar uma das opções dadas, pois elas excluem-
se mutuamente. Se o usuário escolhe, supostamente, feminino, receberemos
como resultado:
Sexo=”feminino”
Observe que a tag <input type=”radio”> somente coloca o campo para

clicar na página. Os textos que aparecem ao lado, assim como as quebras
de linha, devem ser dispostos com o correspondente texto no código da
página e com as tags HTML que necessitarmos.
Por padrão, os botões de rádio de um formulário vêm desativados, ou seja, não

selecionados. Isso pode ser visto na figura anterior. Para que um determinado
botão de rádio de um grupo venha selecionado, é necessária a utilização do
atributo CHECKED, da seguinte forma.
277

Capítulo 10
<HTML>
<BODY>
<FORM>
<INPUT TYPE=”radio” NAME=”sexo” VALUE=”masculino”>

Masculino<BR>
<INPUT TYPE=”radio” NAME=”sexo” VALUE=”feminino” CHECKED>

Feminino
</FORM>
</BODY>
</HTML>
Vejamos o efeito.
Figura 10.15 – Exemplo de botão de seleção selecionado
278

Seção 5
Caixas de validação
As caixas de validação (“checkboxes”) ou verificação devem ser usadas sempre
que queremos que o usuário aprove (ou não) itens dentro de um pequeno grupo.
É permitido validar mais do que uma opção simultaneamente, ou seja, as caixas
de verificação permitem a seleção de vários itens de uma lista.
Cada caixa pode estar ativada ou desativada (o padrão é desativada). A tag

<INPUT>, juntamente com o atributo TYPE, definem as caixas de validação
quando TYPE=“checkbox”. Observe o exemplo que segue.
<HTML>
<BODY>
<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>
</BODY>
</HTML>
Acompanhe o aspecto do formulário quando visualizado em um navegador.
Figura 10.16 – Exemplo de caixa de validação
279

Capítulo 10
Repare que você pode selecionar cada uma das opções de forma independente
da outra. Esses tipos de elementos podem ser ativados ou desativados pelo
usuário com um simples clique sobre a caixa em questão.
Da mesma forma que, para os botões de rádio, podemos ativar a caixa de

validação por meio do atributo CHECKED. Veja um exemplo.
<HTML>
<BODY>
<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>
</BODY>
</HTML>
Visualize o resultado na figura a seguir.
Figura 10.17 – Exemplo de caixa de validação selecionada
280

O tipo de informação que chegará ao nosso correio ou ao programa será do

tipomostrado a seguir.
patins=on (ou off dependendo se tiver sido ativada ou não)
Seção 6
Botão de envio
Os botões de envio orientam o navegador para que envie os dados do formulário
ao servidor. Você deverá incluir pelo menos um botão de envio em cada
formulário. Para criar um botão de envio, use “SUBMIT” como valor do atributo
em uma tag <INPUT>, da seguinte forma.
<INPUT TYPE=“submit”>
Você pode modificar o texto de rótulo do botão usando o atributo VALUE, como
neste exemplo.
<HTML>
<BODY>
<FORM>
<INPUT TYPE=”submit” VALUE=”Enviar”>
</FORM>
</BODY>
</HTML>
281

Capítulo 10
O aspecto desse botão é o seguinte.
Figura 10.18 – Exemplo de botão de envio
Quando o usuário clicar sobre o botão “Enviar”, as repostas e o texto inseridos

no formulário são enviados para processamento. O atributo action do elemento
<FORM> contém o endereço (URL) do recurso da web que está encarregado de
realizar esse processamento. É para lá que o conteúdo do formulário é enviado.
Veja este exemplo.
<HTML>
<BODY>
<FORM NAME=”entrada” ACTION=”página2.HTML” METHOD=”get”>
Nome:<INPUT TYPE=”text” NAME=”nome”>
<INPUT TYPE=”submit” VALUE=”Enviar”>
</FORM>
</BODY>
</HTML>
282

Observe o aspecto do formulário quando visualizado em um navegador.
Figura 10.19 – Exemplo de formulário
Os formulários, assim, não somente permitem captar uma informação do usuário

como também apresentam outra série de funções. Concretamente, os formulários
permitem-nos enviar informações por meio do seu botão de envio. Também pode
ser prático propor um botão ‘Apagar Campos’ ou, ainda, sugerir dados ocultos
que possam ajudar-nos em seu processamento.
Botão apagar campos

Este botão permite apagar o formulário por completo, caso o usuário deseje
refazê-lo desde o princípio. Sua estrutura sintática é igual à anterior, só que
utilizamos o atributo TYPE com o valor “reset”.
<INPUT TYPE=”reset” VALUE=”Apagar Campos”>
A diferença entre o botão de envio, indispensável em qualquer formulário, para

o botão de Apagar Campos é meramente optativa, já que este último não é
utilizado frequentemente. Tenha o cuidado de não colocá-lo muito perto do botão
de envio e de distinguir claramente um do outro.
283

Capítulo 10
Botões normais
Dentro dos formulários, também podemos colocar botões normais, clicáveis
como qualquer outro botão. Da mesma forma que ocorre com os campos
HIDDEN, estes botões por si só não têm muita utilidade, mas poderemos
necessitar deles para realizar ações no futuro. Sua sintaxe é a seguinte.
<HTML>
<BODY>
<FORM NAME=”entrada” ACTION=”página2.html” METHOD=”get”>
<INPUT TYPE=”button” VALUE=”Texto escrito no botão”>
</FORM>
</BODY>
</HTML>
A visualização ficaria desta maneira.
Figura 10.20 – Exemplo de botão
284

O uso mais frequente de um botão é na programação do cliente. Utilizando

linguagens como JavaScript, podemos definir ações a tomar quando um usuário
clica no botão de uma página web.
Seção 7
Exemplo completo de formulário
Com esta seção, você finaliza o estudo sobre formulários. Passaremos, agora, a
exemplificar todo o aprendido a partir da criação de um formulário, que consulta
o grau de satisfação dos usuários de uma linha de ônibus fictícia. O formulário
está construído de modo que se enviem os dados por correio eletrônico para um
e-mail determinado.
Figura 10.21 – Exemplo de um formulário completo
285

Capítulo 10
O código-fonte do formulário apresentado na figura anterior é apresentado a

seguir.
<HTML>
<BODY>
<FORM ACTION=”mailto:contato@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>
Frequência das viagens <BR>
<SELECT NAME=”utilizacao”>
<OPTION VALUE=”1”>Várias vezes por dia
<OPTION VALUE=”2”>Uma vez por dia
<OPTION VALUE=”3”>Vãrias vezes por semana
<OPTION VALUE=”4”>Vãrias vezes por mês
</SELECT>
<BR><BR>
Comentaários sobre sua satisfação pessoal<BR>
<TEXTAREA COLS=”30” ROWS=”7” NAME=”comentarios”></TEXTAREA>
286

<BR><BR>
<INPUT TYPE=”checkbox” NAME=”receber_info” CHECKED>
Desejo receber notificação das novidades nas linhas de ônibus.

<BR><BR>
<INPUT TYPE=”submit” VALUE=” Enviar Formulário”>
<INPUT TYPE=”Reset” VALUE=”Apagar tudo”>
</FORM>
</BODY>
</HTML>
Para finalizar, veja um modelo de correio eletrônico recebido pela empresa de

ônibus quando um usuário qualquer preenchesse este formulário e clicasse sobre
o botão de envio.
nome=Frederico Silvestre
e-mail=frede@unisul.com
cidade=Florianópolis
sexo=Masculino
utilizacao=2
comentarios=Acho que não é uma boa linha. Colocar mais ônibus.
receber_info=on
287

Capítulo 10
Seção 8
Exemplo de um formulário utilizando JavaScript
JavaScript é uma linguagem para páginas web. Os scripts escritos com
JavaScript podem ser colocados dentro das suas páginas HTML. Com JavaScript,
é possível, por exemplo, responder muito facilmente a eventos iniciados pelo
usuário. Desse modo, você pode criar páginas muito sofisticadas com a ajuda
desta linguagem.
Estudos mais avançados de JavaScript não são o foco desta Unidade de

Aprendizagem. Contudo, vamos ver um exemplo utilizando JavaScript.
Antes de qualquer coisa, vamos criar um script simples, que contém uma função
chamada Enviar(). A página HTML terá dois elementos textuais, um campo texto e
um botão para enviar os dados da caixa de texto para serem processados.
<HTML>
<HEAD>
<meta http-equiv=”Content-TYPE” content=”text/HTML; charset=UTF-8”>
<TITLE>Cadastro Pessoa</TITLE>
</HEAD>
<SCRIPT language=”JavaScript”>
function Enviar(form) {
saida = “Seu nome é: “+form.nome.value + “<BR>”;
saida = saida + “Sua idade é: “ + form.idade.value + “<BR>”;
document.write(saida);
</SCRIPT>
<BODY>
<FORM>
288

Digite o seu nome:<BR>
<INPUT TYPE=”text” NAME=”nome”><BR>
Digite a sua idade:<BR>
<INPUT TYPE=”text” NAME=”idade”>
<HR>
<INPUT TYPE=”button” NAME=”botao1” VALUE=”Teste a

Informação” onClick=”Enviar(this.form)”>
</FORM>
</BODY>
</HTML>
Vamos a uma rápida explicação. 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 funções JavaScript, como é o caso do exemplo anterior (foi utilizada a
função Enviar() com o parâmetro FORM). As funções são convocadas por eventos
iniciados pelo usuário. Elas são carregadas antes que o usuário possa fazer
alguma ação que chamará a função.
Quando executarmos o código anterior, surgirá no navegador a seguinte tela.
Figura 10.22 – Visualizando um formulário HTML
289

Capítulo 10
Digite o seu nome e a sua idade na caixa de texto e, posteriormente, clique no

botão “Teste a Informação”. Após o clique no botão (pelo atributo ONCLICK),
a função Enviar(form) será chamada. Dentro dessa função, temos o comando
document.write(), que escreve na tela alguma informação. Poderíamos substituir
este comando pelo comando alert(), que mostra a informação em uma janela.
Como desejamos mostrar na tela o nome e a idade que foram digitados na caixa
de texto, utilizamos o comando form.<nome da caixa de texto>.value para cada
campo que desejarmos exibir.
Então, o comando fica assim: form.nome.value, para pegar o valor da caixa de

texto chamada “nome”; e form.idade.value, para pegar o valor da caixa de texto
chamada “idade”. Os valores das caixas de texto foram concatenados na variável
saída e passados uma única vez para o comando document.write().
O resultado na tela, após o clique no botão, será conforme mostrado a seguir.
Figura 10.23 – Resultado da ação do botão
Perceba que não ocorreu a abertura de um novo documento html, somente

execução do conteúdo javascript que exibia os dados do formulário.
Recapitulando o que foi visto neste capítulo: ressaltamos que os formulários são
de extrema importância no HTML, uma vez que são responsáveis pela interação
entre um usuário e o servidor, possibilitando a troca de dados ou informações.
O uso de formulário é importante quando desejamos enviar os dados

cadastrados em um formulário para outra página ou pelo correio eletrônico.
Quando precisamos enviar dados para outra página, faz-se necessária a
utilização de outra linguagem de programação para tornar o processo dinâmico,
tais como Java, PHP, Ruby, ASP etc.
290

Considerações Finais
Com o estudo desta Unidade de Aprendizagem, você aprendeu vários tópicos

importantes exigidos no desenvolvimento de páginas estáticas web. Buscou-
se aqui, realizar também alguma interatividade com simulação e validação de
formulários, utilizando JavaScript.
Sabe-se que o desenvolvimento web não termina com as páginas estáticas. Mas,
sim, começa, pois as linguagens de programação web utilizam o HTML embutido
em seu código para gerar as interfaces e a interação com o usuário. Portanto,
é um requisito primordial no desenvolvimento de sistemas web e para todo
profissional de desenvolvimento.
Não se pretende esgotar o assunto referente ao HTML neste material. Mas você
pode
aprofundar os estudos com outros componentes do HTML, JavaScript e suas

bibliotecas, CSS e XML.
Foi um trabalho longo e de um nível técnico mais elevado, que exigiu de você o
conhecimento sobre programação. Outros conhecimentos serão necessário para

a programação web, mas, se você chegou até aqui, parte do desafio foi vencido.
Assim, esperamos que você tenha gostado deste material e desejamos sucesso
no curso.
Profs. Patrícia e Osmar
291

292

Referências
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 programação

para web. São Paulo: Editora Érica, 2005.
NIEDERST, Jennifer. Web design in a nutshell: a desktop quick reference.

Sebastopol: O’Reilly, 1998.
PRATES, Rubens. HTML: guia de consulta rápida. São Paulo: Editora Novatec,
1997.
PETRY, Patrícia Gerent. Linguagens de Programação I. 3. ed. rev.e atxual.

Palhoça: UnisulVirtual, 2010. 310 p.
RAMALHO, José Antônio Alves. HTML 4: prático e rápido. São Paulo: Editora
Berkeley, 1999.
REHDER, Wellington da Silva; PEREIRA, Marcelo Gino. HTML: hypertext markup

Language. São Paulo: Editora Viena, 2003.
WEINMAN, Lynda; WEINMAN, Bill. Design criativo com Html 2: um guia prático
e completo para design na web. Rio de Janeiro: Ciência Moderna, 2002.
WATRALL Ethan, SIARTO Jeff. Use a cabeça Web-Design. São Paulo: Alta
Books, 2009
293

Sobre os Professores
Conteudistas
Patrícia Gerent Petry
Graduada em Ciência da Computação pela Universidade Federal de Santa
Catarina (UFSC). Mestre em Ciência da Computação, área Informática e
Educação, pela UFSC, tendo como tema principal de sua dissertação “O
Processo de Ensino e Aprendizagem de Algoritmos”. Atuou como professora nas
instituições de ensino superior: UFSC, Universidade do Vale do Itajaí e Faculdades
Barddal. É Analista de Sistemas dos Correios/SC. Atuou por muitos anos nas
disciplinas de Programação I, Programação II, Laboratório de Informática e
Análise e Projeto de Sistemas I dos cursos de Sistema de Informação e Ciência
da Computação no ensino presencial da UNISUL. Na UnisulVirtual, atuou como
professora em Introdução à Internet, Lógica de Programação I e II, e Linguagem
de Programação I do curso de Tecnologia em Web Design e Programação.
Publicou diversos artigos científicos e capítulo de livro na área de Informática e
Educação.

Graduado em Ciências da Computação pela Universidade do Sul de Santa
Catarina (UFSC), em 1997, e mestre em Engenharia de Produção pela
Universidade Federal de Santa Catarina (2000). Atualmente é professor assistente
em cursos de graduação e pós-graduação da Universidade do Estado de
Santa Catarina (UDESC). Na Universidade do Sul de Santa Catarina (UNISUL),
é professor horista, atuando na graduação presencial e a distância, além da
pós-graduação. Tem experiência na área de Ciência da Computação e Sistema
de Informação, com ênfase em Banco de Dados e Engenharia de Software,
principalmente nos seguintes temas: Projeto de Software, Desenvolvimento de
Sistemas e Banco de Dados.
295

capa.pdf 1 18/08/2016 09:52:53

Este livro trata de detalhes técnicos para a criação
de sites WEB. Apresentado de forma introdutória
exemplos de como construir sites web e fornecer
suporte ao desenvolvimento de sistemas WEB. Os
dez capítulos do livro tratam sobre o que é a
internet, a linguagem HTML e sua estrutura, lista e
vínculos, formatação de texto e parágrafos,
Programação

imagens, tabelas, frames, folhas de estilo e
formulários. Além de iniciar o primeiro contato
web Básica
com JavaScript para ter alguma interação com o
usuário.
w w w. u n i s u l . b r

(8829 - 29092) Livrocompletomidiateca

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

(8829 - 29092) Livrocompletomidiateca

Hochgeladen von

Copyright:

Verfügbare Formate

capa.

pdf 1 18/08/2016 09:52:53

Programação web Básica

Programação web Básica

Livro completo.indb 1 18/08/2016 10:01:49

Universidade do Sul de Santa Catarina – Unisul

Pró-Reitor de Ensino, de Pesquisa e de Extensão

Diretor do Campus Universitário de Tubarão

Campus Universitário UnisulVirtual

Unidade de Articulação Acadêmica (UnA) – Ciências Sociais, Direito, Negócios e Serviços

Gerente de Operações e Serviços Acadêmicos

Livro completo.indb 2 18/08/2016 10:01:49

Livro completo.indb 3 18/08/2016 10:01:49

Professores conteudistas Diagramador(a)

Projeto gráfico e capa ISBN

1. Linguagem de programação (Computadores). 2. Programação para

CDD (21. ed.) 005.133

Ficha catalográfica elaborada pela Biblioteca Universitária da Unisul

Livro completo.indb 4 18/08/2016 10:01:49

Sobre os Professores Conteudistas | 295

Livro completo.indb 5 18/08/2016 10:01:49

Durante os estudos, você perceberá os detalhes técnicos básicos para a criação

Livro completo.indb 7 18/08/2016 10:01:49

A World Wide Web (Teia de Uma das características mais interessantes da

A evolução da internet é constante. Atualmente, a evolução mais marcante é a

Livro completo.indb 9 18/08/2016 10:01:49

Hoje, com o sucesso da Internet, toda empresa se vê na obrigação de colocar

Livro completo.indb 10 18/08/2016 10:01:49

No entanto, boa parte do material da rede é produzido por indivíduos querendo

Você tem ideia de como a informação na web é organizada?

A informação na Web é organizada na forma de páginas, que podem conter texto,

A web é um sistema de informação em hipertexto. Os sistemas de ajuda on-line

Livro completo.indb 11 18/08/2016 10:01:49

Figura 1.1 – Sistema de ajuda on-line

Fonte: Elaboração dos autores, 2016.

Hipertexto é um sistema para a visualização de informação cujos documentos contêm

A web é gráfica e fácil de ser navegada

Livro completo.indb 12 18/08/2016 10:01:49

Se a web incorpora muito mais do que texto, por que é chamada de

Site da web é um local na A web consegue fornecer um volume tão grande

A web é independente de plataforma

Livro completo.indb 13 18/08/2016 10:01:49

Você tem acesso à web por meio de um aplicativo denominado navegador

A ideia de que a web é independente de plataforma é sustentada por uns e por

A opção de desenvolver programas para um navegador específico é conveniente

Neste livro, os exemplos realizados foram utilizados com o navegador Internet

Livro completo.indb 14 18/08/2016 10:01:49

Os pedidos dos navegadores são atendidos por uma combinação de

Apesar de poderem ser instalados em, praticamente, todos os tipos de

Existem vários provedores de espaço (hostings) gratuitos. Os provedores de

O que é uma URL

Livro completo.indb 15 18/08/2016 10:01:49

Considere o seguinte URL:

http:// é o método pelo qual ocorrerá a transação entre cliente

www.unisul.br é o nome do servidor onde está armazenado o

/aluno/ é o diretório onde está o arquivo. Às vezes uma URL

aluno.html é o nome do arquivo. A extensão .html indica que

Livro completo.indb 16 18/08/2016 10:01:49

O HTML é uma linguagem de marcação de texto ou dado relativamente simples

Breve histórico do HTML

Livro completo.indb 17 18/08/2016 10:01:49

Posteriormente, o HTML foi expandido em vários caminhos. De 1990 a 1995, a

Em 1996, os esforços do grupo de trabalho do World Wide Web Consortium