Ambientes Web

Prévia do material em texto

www.esab.edu.br
Ambientes WebDE INFORMAÇÃO
Ambientes Web
Vila Velha (ES)
2013
Escola Superior Aberta do Brasil
Diretor Geral 
Nildo Ferreira
Diretora Acadêmica
Beatriz Christo Gobbi
Coordenadora do Núcleo de Educação a Distância
Beatriz Christo Gobbi
Coordenadora do Curso de Administração EAD
Rosemary Riguetti
Coordenador do Curso de Pedagogia EAD
Claudio David Cari
Coordenador do Curso de Sistemas de Informação EAD
David Gomes Barboza
Produção do Material Didático-Pedagógico
Delinea Tecnologia Educacional / Escola Superior Aberta do Brasil
Diretoria Executiva
Charlie Anderson Olsen
Larissa Kleis Pereira
Margarete Lazzaris Kleis
Conteudista
Marcelo Medeiros
Coordenação de Projeto
Patrícia Battisti
Líderança Técnica Design Educacional
Renata Oltramari
Supervisão de Revisão Gramatical
Andréa Borges Minsky
Supervisão de Design Gráfico
Laura Martins Rodrigues
Design Educacional
Roberta de Fatima Martins
Simone Dias
Revisão Gramatical
Bárbara Seger Zeni
Daniela Piantola
Hellen Melo Pereira
Michela Silva Moreira
Tiago Costa Pereira
Design Gráfico
Fernando Andrade
Neri Gonçalves Ribeiro
Diagramação
Karina Silveira
Equipe Acadêmica da ESAB
Coordenadores dos Cursos
Docentes dos Cursos
Copyright © Todos os direitos desta obra são da Escola Superior Aberta do Brasil.
www.esab.edu.br
Av. Santa Leopoldina, nº 840
Coqueiral de Itaparica - Vila Velha, ES
CEP 29102-040
Apresentação
Caro estudante,
Você já deve conhecer um pouco de internet, a rede mundial de computadores que 
cativa a todos. De acesso público e ilimitado, a internet trouxe uma grande evolução a 
praticamente todos os segmentos da nossa sociedade. Hoje já não se consegue mais 
imaginar o mundo atual, bem como o futuro, sem a internet. A maioria das empresas 
tem um site na web, e não precisa ser uma grande empresa e nem fazer grandes 
investimentos financeiros para divulgar seus produtos ou serviços nessa rede.
Diante disso, vemos que é fundamental para o profissional que deseja ser um 
especialista em Tecnologia da Informação ter habilidades e competências que 
lhe permitam maximizar o uso da rede mundial de computadores em prol das 
instituições.
E você, como nosso aluno, pode estar interessado nessa área, em saber como planejar, 
desenvolver e publicar páginas na web, certo? Talvez tenha um interesse específico 
na área de desenvolvimento web, talvez queira entender para uso no seu trabalho ou 
apenas com a intenção de criar um meio de divulgar suas informações.
Nesta disciplina, tendo como base os autores Lemay (2002) e Nielsen e Loranger 
(2007), você conhecerá os conceitos básicos associados ao ambiente web; as fases 
de desenvolvimento do projeto; as técnicas de modelagem e desenvolvimento que 
auxiliam na manutenção e atualização de websites; e, principalmente, entenderá 
a linguagem de marcação para internet, o HyperText Markup Language (HTML), 
compreendendo também como aplicar folhas de estilo – chamadas Cascanding Style 
Sheets (CSS) – para deixar os sites mais atrativos e profissionais; e, por fim, verá ainda 
como codificar rotinas em JavaScript no seu site.
Assim, esta disciplina possibilitará que você entenda, projete, desenvolva e valide 
aplicações web. Esperamos que você possa aproveitar ao máximo o conteúdo desta 
disciplina.
Bom estudo!
Objetivo
Apresentar de maneira prática e didática os temas mais relevantes aos sistemas 
computacionais em ambiente web e o contexto em que eles se aplicam. Os 
assuntos serão abordados do ponto de vista da estrutura de um documento 
web, a sua organização e integração com o usuário, apresentando as principais 
características da linguagem HTML e JavaScript, integradas às regras de estilização 
em CSS.
Habilidades e competências
• Desenvolver aplicações web utilizando a linguagem HTML.
• Desenvolver aplicações web personalizadas e padronizadas por meio de estilos CSS.
• Desenvolver aplicações web com a integração de JavaScript. 
• Analisar, validar, testar e homologar aplicações web.
• Analisar as aplicações web estruturadas e organizadas. 
• Analisar, planejar, projetar, desenvolver e testar sistemas em ambientes web.
Ementa
Definição do site: concepção, planejamento, estrutura e desenvolvimento web. 
Construção do site: design gráfico (criação do layout web). Uso da linguagem HTML 
para a descrição da estrutura de uma página de hipertexto. Uso de folha de estilo 
(CSS). Recursos avançados do HTML: frames, imagens mapeadas e recursos de 
estilo, layout com tabelas. A linguagem JavaScript.
Sumário
1. Introdução ao website .....................................................................................................7
2. Processo de desenvolvimento de website ......................................................................14
3. Definição da estrutura do site ........................................................................................21
4. Padrão de desenvolvimento de projetos web – parte 1 ................................................28
5. Padrão de desenvolvimento de projetos web – parte 2 ................................................33
6. Ferramentas de desenvolvimento web .........................................................................38
7. Ferramentas de depuração de aplicações web ..............................................................46
8. Introdução à linguagem HTML ......................................................................................52
9. Estrutura de um documento HTML ...............................................................................59
10. Construindo uma página HTML na prática ....................................................................68
11. Introdução à Cascading Style Sheets ..............................................................................78
12. Estrutura de um documento com base em CSS .............................................................85
13. Como formatar o texto da página HTML com CSS ..........................................................95
14. Construindo uma página HTML com formatações de texto .........................................103
15. Como formatar as cores da página HTML com CSS ......................................................112
16. Como definir as cores de fundo da página HTML com CSS ...........................................117
17. Construindo uma página HTML colorida .....................................................................123
18. Componente visual para lista de valores em HTML ......................................................131
19. Como formatar e estilizar as listas em HTML com o uso de CSS ..................................139
20. Como criar uma seleção de valores nas páginas HTML ................................................149
21. Construindo uma página HTML com listas e seleção ...................................................157
22. Como navegar entre as páginas HTML .........................................................................164
23. Melhorando as páginas HTML com uso de menus utilizando CSS ................................172
24. Como desenvolver menus com imagens utilizando CSS ..............................................182
25. Navegando entre páginas HTML com uso de menus e links .........................................194
26. Capturando dados do usuário com uso de formulários ................................................201
27. Como controlar o acesso aos dados dos formulários ....................................................212
28. Criando um formulário de contato usando CSS e HTML ...............................................220
29. Como estilizar os formulários ......................................................................................227
30. Criando um formuláriode cadastro de cliente usando HTML e CSS .............................234
31. Como tabelar os dados apresentados nas páginas HTML .............................................243
32. Propriedades de uma tabela .......................................................................................249
33. Estilizando uma tabela ................................................................................................257
34. Criando uma tabela com horário das aulas ..................................................................265
35. Introdução ao layout de páginas HTML com CSS .........................................................271
36. Definição de bordas do documento HTML ...................................................................277
37. Definição de margens do documento HTML ...............................................................284
38. Definição do espaço interno da página HTML e do tamanho dos elementos ...............290
39. Definição da posição dos objetos na página HTML ......................................................297
40. Exibindo e ocultando objetos da página HTML ............................................................308
41. Criando uma página HTML com layout personalizado ................................................314
42. Introdução ao JavaScript .............................................................................................324
43. Comandos de seleção e repetição em JavaScript .........................................................334
44. Como criar caixas de diálogo em JavaScript ................................................................347
45. Como criar mensagens na página HTML em JavaScript ...............................................355
46. Criando uma página HTML que utilize comandos em JavaScript .................................361
47. Como criar janelas em JavaScript ................................................................................367
48. Criando um formulário HTML com validação de campos em JavaScript ......................374
Glossário ............................................................................................................................387
Referências ........................................................................................................................395
www.esab.edu.br 7
1 Introdução ao website
Objetivo
Apresentar os conceitos de web espaço, website, homepage, 
hipertextos, hipermídia, intranet, extranet, internet, site e portal.
Para que você possa compreender o que é e como funciona um ambiente 
web, é necessário conhecer alguns conceitos fundamentais da área. Assim, 
nesta unidade vamos ver, conforme os autores Lemay (2002) e Nielsen 
e Loranger (2007), conceitos introdutórios e essenciais, como o recurso 
imprescindível para qualquer aplicação em ambiente web: a internet.
Vamos começar pensando no seguinte: internet e web são a mesma coisa? 
Apesar de muita gente usar esses termos como sinônimos, a resposta é 
não. Então, vamos conhecer as diferenças entre esses dois conceitos.
Muitas pessoas acreditam que internet e web são sinônimas, no entanto 
o que chamamos de web é uma abreviação de World Wide Web e, 
segundo Lemay (2002), é a teia, ou rede, virtual de alcance mundial, que 
ficou conhecida também como “www”. Destacamos que o termo virtual 
representa algo que não é físico, mas conceitual, algo que não é concreto, 
tudo aquilo que não é palpável. No caso da internet, há uma grande rede 
interligando os computadores, mas ela não é palpável, visível, por isso 
chamada de rede virtual.
A web foi criada em 1991, na Suíça, pelo físico Timothy John Berners-
Lee (1955- ), para a apresentação de textos. Já a internet é muito maior 
e mais complexa que a web. Esta se utiliza de softwares que permitem às 
pessoas e empresas compartilharem textos, figuras, mídias por meio da 
internet. Ou seja, ela é apenas uma parte da internet.
www.esab.edu.br 8
Podemos entender que a web é uma coleção cada vez maior de páginas 
que se interligam por meio de um software, executado através da 
internet, chamado navegador, que nos permite visualizá-las na tela, 
navegando na internet. 
Assim, a web é baseada na tecnologia de hipertexto. Segundo Lemay 
(2002), o hipertexto é um texto em formato digital que se utiliza de 
recursos de hipermídia (blocos de textos, imagens, ícones e sons). Criado 
na década de 1960 por Theodore Holm Nelson, esse modelo rompeu 
com o de leitura e escrita ao utilizar uma forma não linear de interação 
com o usuário, possibilitando o processo de leitura dos textos na ordem 
que melhor lhe agradar. Ou seja, o processo de interação se dá em várias 
direções, um único texto possibilita ao usuário navegar por outros textos, 
cabe a ele usar essa liberdade para definir quais documentos serão visitados. 
Cada texto disponibiliza um conjunto de outros documentos que podem 
ser acessados, uma estrutura em rede. Este processo é mais atrativo, já que 
no processo linear, o usuário navega sempre para o próximo ou documento 
anterior, sem caminhos alternativos. Essa tecnologia será mais detalhada 
nas próximas unidades. Por enquanto, hipertexto pode ser entendido 
como meio que permite a navegação entre os documentos utilizando-se de 
ligações chamadas web links, ou simplesmente links. 
Podemos pensar na internet como uma rede de computadores 
conectados entre si por meio de cabos ou outros tipos de hardwares, que 
trocam dados. É importante sempre lembrarmos que a internet é um 
local público, isto é, não pertence a nenhuma empresa. 
Figura 1 – Internet como rede de computadores.
Fonte: <www.123rf.com>.
www.esab.edu.br 9
Entretanto, há instituições responsáveis pela orientação do crescimento e 
sua padronização. Vamos ver quais são as principais?
• World Wide Web Consortium (W3C): o W3C consiste na 
principal organização de padronização da World Wide Web. Portanto, 
sua responsabilidade é definir padrões para a criação de conteúdos 
para a web, como sites pessoais ou de empresas. O profissional 
de desenvolvimento para web deve sempre seguir os padrões 
fundamentados da W3C.
• International Network Information Center (InterNIC): criada 
pela Fundação Nacional de Ciência dos Estados Unidos, país em 
que a internet foi inventada, essa organização é responsável pela 
atribuição de nomes e endereços da internet, conhecidos como 
domínios. Os domínios são nomes que servem para identificar 
e representar páginas web na internet, sendo parte da Uniform 
Resource Locator (URL) – o endereço que digitamos no navegador 
para acessar uma página. Existem dois tipos de domínios: o 
institucional e o geográfico. Por exemplo, os domínios “.gov”, 
“.edu” e “.org” são domínios institucionais; já domínios como “.uk” 
e “.br” são geográficos.
• Internet Society: pode-se dizer que esta é a que mais se aproxima 
de uma administradora da internet. Trata-se de uma entidade que se 
baseia no trabalho voluntário de seus integrantes com a finalidade 
de exercer o mínimo de controle necessário para manter a internet 
em funcionamento. É seu papel realizar as recomendações de caráter 
tecnológico, operacional e até filosófico, assegurando que a rede seja 
acessível a todos, da forma mais democrática possível.
Como vimos, a internet é mundial, virtual e pública, e a tendência é que 
seu acesso alcance cada vez mais pessoas, pois ainda hoje uma grande 
parcela da população mundial não possui acesso à internet, ficando à 
margem da informação e da expansão das redes digitais. Há um número 
grande de pessoas no mundo que não possuem acesso à internet, extensas 
camadas das sociedades que ficaram à margem do fenômeno da sociedade 
da informação e da expansão das redes digitais. Esse aspecto da internet 
permite que novas redes sejam conectadas, o que explica seu contínuo 
crescimento,que nos últimos anos tem aumentado vertiginosamente 
www.esab.edu.br 10
devido ao grande interesse das empresas em usá-la como meio de 
divulgação e comercialização de seus produtos e serviços. 
Estudo complementar
Em 1995, foi criado o Comitê Gestor da 
Internet no Brasil, que conta com o Ministério 
das Comunicações, o Ministério da Ciência 
e Tecnologia, as operadoras de telefonia, 
os provedores de internet, as comunidades 
acadêmicas e alguns representantes da sociedade. 
Esse Comitê objetiva gerenciar o desenvolvimento 
dos serviços de internet no Brasil, recomendar 
padrões e procedimentos técnicos e coordenar e 
monitorar o registro de domínios. Disponível aqui.
Desde a sua criação, a rede mundial vem crescendo muito, a ponto de 
passar a ser gerenciada por algumas instituições, que têm a finalidade de 
definir e manter os padrões e a qualidade dos serviços e, principalmente, 
o acesso democrático. E com esse crescimento e a consequente 
popularização da internet, tem se exigido um maior conhecimento dos 
termos mais comuns utilizados na internet.
Um termo muito comum é URL, que representa um endereço 
localizador de um recurso (computador, arquivo ou equipamento) 
disponível em uma rede local ou externa. A conexão com os recursos da 
web pode acontecer por meio de uma rede interna ou uma rede externa, 
conhecidas respectivamente como intranet e extranet.
A intranet é uma internet interna, isto é, normalmente seu acesso se 
restringe aos colaboradores de uma instituição, sendo uma rede fechada 
para a empresa com a disponibilização de informações corporativas, de 
propriedade da organização. Mesmo sendo uma rede interna, utiliza os 
mesmos programas e equipamentos utilizados na internet – servidores e 
navegadores web. As intranets têm baixo custo e são fáceis de implantar e 
gerenciar, por isso são muito utilizadas pelas empresas.
www.esab.edu.br 11
Quando as intranets de duas ou mais empresas se interligam, elas 
formam uma extranet. Isso é muito comum quando há um consórcio de 
empresas que fazem negócios entre si e necessitam da troca constante de 
informações.
Outro conceito fundamental da internet é o website, ou site, que é um 
conjunto de páginas web que funcionam sob um mesmo domínio. Uma 
variação desse conceito, muito comum na atualidade, ocorre quando 
os sites têm por finalidade divulgar informações gerais e possibilitar a 
interação com o usuário, então são chamados portais. 
Independentemente de se tratar de um site ou de um portal, a primeira 
página é chamada de homepage e tem o objetivo de apresentar os temas 
e assuntos que serão abordados em todas as outras páginas. Portanto, 
esta página deve transmitir sua mensagem de forma rápida e simples, 
visando a reter a atenção do usuário e permitir que ele veja rapidamente 
os assuntos de seu interesse.
Outro conceito fundamental está relacionado à estrutura necessária 
para que os sites sejam disponibilizados para acesso público. Eles ficam 
hospedados em computadores conectados permanentemente à internet, 
os quais recebem o nome de host (hospedeiro).
Para visualizar toda a informação disponível em um site é necessário um 
programa de computador chamado browser (navegador), responsável 
pela formatação e apresentação dos documentos web. Cada documento 
é um arquivo criado em uma linguagem de programação que possa ser 
interpretada pelos navegadores.
Você sabe como ocorre essa comunicação entre navegador e computador? 
Pois bem, para realizar essa comunicação entre os computadores que estão 
conectados à internet, os navegadores podem acessar vários protocolos – 
como o HiperText Transfer Protocol (HTTP - Protocolo de Transferência 
de Hipertexto), o File Transfer Protocol (FTP – Protocolo de Transferência 
de Arquivos) e o HiperText Transfer Protocol Secure (HTTPS – Protocolo 
Seguro de Transferência de Hipertexto). É importante destacar que 
esses protocolos definem as regras de comunicação entre os dispositivos 
www.esab.edu.br 12
conectados. Para que você entenda melhor a utilização de cada protocolo, 
observe o quadro a seguir. 
Protocolo Utilização
HiperText Transfer Protocol (HTTP)
Esse é o principal protocolo de comunicação da web, é 
responsável pela transferência de documentos entre os 
computadores. 
File Transfer Protocol (FTP)
Foi desenvolvido para transmissão de mensagens, por 
isso tornou-se a forma mais rápida para troca de arquivos 
entre computadores.
HiperText Transfer Protocol Secure 
(HTTPS)
Segue a mesma definição do HTTP, porém com 
integração de regras de segurança de acesso aos dados, 
como criptografia de dados, autenticação de servidor, 
integridade de mensagem e autenticação de cliente.
Quadro 1 – Tipos de protocolo.
Fonte: Elaborado pelo autor (2013).
Para divulgar páginas na internet, você precisará também de um servidor 
web (que é um software) executado em um computador dedicado a 
ser servidor, responsável por atender às solicitações de arquivos feitas 
pelo navegador. Isto é, um servidor web é responsável por gerenciar as 
requisições das páginas acessadas pelos usuários através do navegador 
de internet e devolver corretamente os dados solicitados. Veja na figura 
a seguir o processo básico de comunicação entre um navegador e um 
servidor web.
Servidor web
Navegador se conecta a um servidor
e solicita uma página HTML.
Servidor web desenvolve a página
HTML solicitada.
Internet
Figura 2 – Conexão do navegador com o servidor web.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 13
Analisando todos os conceitos apresentados anteriormente, podemos 
notar que a internet está produzindo um novo mundo, virtual e sem 
território, pois os limites deixaram de existir. Esse mundo virtual não tem 
local definido, e por isso é cheio de possibilidades. Esse novo contexto 
é identificado como um web espaço, e está cada vez mais difícil não 
fazermos parte dele.
Para sua reflexão
Este mundo virtualizado, sem territórios e 
limites não resultará em espaços sem identidade 
cultural, mudando o comportamento das pessoas 
e as tornando todas iguais, uma única tribo. 
Partindo desse pressuposto, você acha que tal 
rede virtual pode transformar drasticamente o 
comportamento das pessoas, gerando uma nova 
identidade para elas?
A resposta a essa reflexão forma parte de sua 
aprendizagem e é individual, não precisando ser 
comunicada ou enviada aos tutores.
Na próxima unidade, veremos qual é o processo necessário para 
desenvolver um website de modo profissional, entendendo desde o 
processo de análise até a publicação e a manutenção.
www.esab.edu.br 14
2 Processo de desenvolvimento de website
Objetivo
Conhecer os processos de análise, concepção, estruturação, 
desenvolvimento, publicação e manutenção de um site.
Na unidade anterior, vimos o que é o ambiente web e os seus conceitos 
fundamentais. Agora chegou o momento de verificarmos, com base 
nos autores Lemay (2002) e Nielsen e Loranger (2007), o processo de 
construção de um site desde o seu planejamento até a publicação e a 
utilização, o que podemos chamar de projeto web.
Desenvolver um projeto web tornou-se uma tarefa importante, 
complexa e essencial para a vida financeira de qualquer instituição, em 
qualquer lugar do mundo, pois o ambiente em que essas instituições se 
encontram está muito mais competitivo. Além disso, com o acesso cada 
vez mais democrático à internet, os limites geográficos deixam de existir, 
aumentando a concorrência entre as empresas, que apostam em sites cada 
vez mais interessantes, criativos e interativos.
Desse modo, a elaboração de um site deve envolver todos os aspectos da 
sua construção, desde o desenho da estrutura de navegação e a forma de 
disponibilização da informação até a elaboração do projeto gráfico. A 
construção de um site deve ser entendida como um projeto, composto defases e desenvolvido por um grupo de pessoas, cada uma delas com uma 
responsabilidade específica.
As fases que compõem a elaboração de um site são:
• organização da informação;
• definição da estrutura de navegação;
• montagem do site;
• testes.
www.esab.edu.br 15
Na organização da informação, alguns pontos são fundamentais e devem 
ser discutidos por toda a equipe envolvida no processo de construção. 
Esses pontos são:
• a quem se destina o site;
• o que fazer para que o usuário entre no site;
• o que fazer para que o usuário retorne ao site.
Conforme Nielsen e Loranger (2007), os visitantes de sites possuem um 
perfil bastante impaciente, gastando em média 27 segundos na visita a 
cada site. Ainda segundo os autores, “a maioria passa grande parte do 
tempo em sites que já provaram ser úteis. Os usuários escolhem os sites 
com base nas suas experiências anteriores, por isso, um projeto de site 
deve primar por mensagens extremamente simples e diretas.” 
Fica claro, portanto, que esses poucos segundos fazem da homepage uma 
parte de grande importância no site, pois é a responsável por cativar 
o visitante. Segundo Nielsen e Loranger (2007), os objetivos de uma 
homepage são:
• apresentar o site a que os usuários chegaram;
• mostrar os benefícios que a empresa oferece;
• informar sobre a empresa, sobre os produtos e serviços recentes;
• apresentar aos usuários opções que os direcionem para seções mais 
relevantes, específicas, de acordo com o que eles procuram.
A organização da informação exige uma análise criteriosa do material que 
deverá compor o site. Nesse ponto, devemos ter cuidado com a relevância 
das informações e também com a origem dos dados, a veracidade 
das informações e, principalmente, precisamos criar mecanismos de 
atualização dos materiais. É importante organizar e criar processos para a 
coleta de informações: dados gerais da empresa, o mercado em que atua, 
as estratégias de comunicação e marketing já utilizadas pela empresa, seu 
público-alvo, entre outros. 
www.esab.edu.br 16
Como fonte para esses dados, você pode solicitar à empresa seus materiais 
institucionais (catálogo de produtos, banners, impressos) para que 
sejam analisados, dando assim subsídios à concepção do site. Lembre-
se também de que o pessoal responsável pelo marketing e a diretoria da 
instituição devem aprovar o conteúdo que será disponibilizado.
Com a definição das informações que serão utilizadas na concepção 
do site, o próximo passo é estruturar de que forma essas informações 
serão apresentadas e organizadas nele. Nesta etapa de estruturação, é 
fundamental a apresentação da proposta do projeto, de forma ampla e 
completa, contendo todas as informações aliadas a um estudo estético 
compatível com a necessidade e a imagem da empresa. Uma boa técnica 
é a apresentação por meio de fluxogramas que identifiquem as principais 
partes do site.
Uma característica fundamental para o sucesso de um site é fazer com que 
os usuários, ao interagirem com as páginas, façam-no de forma intuitiva, 
isto é, de modo natural e lógico, esperado. Isso porque, ao visitar um 
site, o usuário traz um modelo mental criado a partir de interações com 
outros sites que ele considera navegáveis e atrativos, esperando que o 
novo site siga o mesmo modelo. Se isso for proposto pelo site, a chance de 
agradar e convencer o usuário a visitá-lo outras vezes é muito grande.
O gráfico a seguir apresenta as áreas das páginas que são mais visitadas 
pelos usuários, sendo que as áreas normalmente utilizadas para navegação 
são: parte superior da página, colunas da esquerda ou da direita, centro 
da página.
Rodapé
Coluna direita
Coluna esquerda
Topo da página
Área de conteúdo
Figura 3 – Distribuição das áreas visitadas na página.
Fonte: Adaptada de Nielsen e Loranger (2007).
www.esab.edu.br 17
Para fazer um site atrativo e funcional, procure dispor o conteúdo nessas 
áreas seguindo esse padrão de visitas, garantindo que o usuário navegue 
intuitivamente. Para isso, divida o conteúdo em tópicos, inicialmente 
sem importar-se com a ordem. Essa é uma das formas mais fáceis de 
começar a organizar as informações, mas tome o cuidado para não 
criar uma lista muito extensa de tópicos, afinal, tantas opções podem 
representar uma complicação para o usuário do site.
Para organizar esses tópicos, basearemo-nos nos modelos oferecidos pela 
arquitetura de informação: arquitetura hierárquica, linear, em malha 
ou em rede (PRESSMAN, 2006). O modelo baseado na arquitetura 
hierárquica facilita o entendimento por parte do usuário, possibilitando 
que ele saiba, a qualquer momento, em que parte da estrutura ele se 
encontra. Nesse modelo, a homepage fornece uma visão geral de todo o 
conteúdo do site e mostra os vínculos às páginas do mesmo nível e do 
nível imediatamente inferior, o que o torna muito diferente de outro 
modelo utilizado: o de arquitetura linear.
Na arquitetura linear, a homepage apresenta apenas a sua estrutura e o 
link com a página seguinte, obrigando o visitante a passar página por 
página. É uma arquitetura utilizada quando o visitante deve passar por 
determinada página antes de outra, como ocorre quando desenvolvemos 
sites de tutoriais.
Como solução para o planejamento de um website, é possível utilizar 
uma estrutura que possibilite ao usuário navegar tanto horizontalmente 
como verticalmente entre as páginas. É a chamada arquitetura em malha, 
por meio da qual o usuário poderá navegar de uma página para outra 
sem qualquer problema, independentemente da relação entre elas. É 
muito interessante para estruturar conteúdos que podem ser divididos 
e acessados, por exemplo, por meio de coleções, álbuns, autor, título, a 
exemplo dos repositórios de obras públicas.
Por fim, temos também a arquitetura em rede, que é a mais aberta para a 
navegação, uma vez que nesse tipo de estrutura o visitante pode navegar 
conforme sua necessidade, pois ela não possui níveis hierárquicos nem 
impõe qualquer obrigatoriedade na ordem de acesso às páginas. 
www.esab.edu.br 18
Desse modo, a estrutura em rede é a que melhor promove a 
hipertextualidade, conceito em que a web é baseada e que a caracteriza. 
Segundo Lemay (2002), uma web é um conjunto de documentos com 
pouca ou nenhuma estrutura real: a única coisa que vincula cada página 
é um link. Os visitantes vão de documento para documento seguindo os 
links que encontram.
A figura a seguir representa as arquiteturas: hierárquica, linear, em malha 
e em rede. Acompanhe.
arquitetura em malha
Homepage
arquitetura em rede
Homepage
Homepage
arquitetura linear
Homepage
arquitetura hierárquica
Figura 4 – Tipos de arquitetura de websites.
Fonte: Adaptada de Pressman (2006).
www.esab.edu.br 19
Note que a arquitetura da informação é uma base para estruturar e 
organizar as informações, tornando-as mais acessíveis. Cada estrutura 
que vimos pode ser mais adequada a determinado conteúdo, como vimos 
no caso da arquitetura linear para desenvolvimento de tutoriais. Desse 
modo, pensando no projeto web conforme uma estrutura, a organização 
do conteúdo será mais fácil.
Com a definição da estrutura da página planejada, a próxima etapa 
consiste em determinar o conteúdo, os tópicos, a ideia básica de cada 
página e as ligações entre elas, procurando sempre manter o contexto. A 
disposição das imagens, dos vídeos, textos, tipos de fontes, tamanho das 
fontes, enfim, de tudo o que você deseja inserir na página deve ser de 
forma a agradar ao usuário.
Para que os resultados desejados com o site sejam alcançados, é necessário 
construir um projeto de site no qual a comunicação com o visitante 
ocorra de forma rápida, objetiva e justificada, convencendo o visitante 
a interagir com o site. Cada página de um site deve ter um motivo 
para estar ali e transmitir de forma quase instantâneaas informações 
procuradas por quem a visita.
Agora que você já conhece os processos de definição e estruturação de 
um site, vamos conhecer a próxima fase, que é o desenvolvimento. Essa 
etapa não possui uma “receita de bolo”, é um processo interativo e de 
gestão que depende muito do contato e da comunicação entre o cliente e 
a equipe que produz o site. Mas, apesar de não haver uma receita, existem 
etapas que fazem parte do processo. São elas:
• determinar os recursos técnicos: definição da linguagem de 
programação usada; se o site utilizará um banco de dados ou não; e 
quais interações existirão entre o site e os usuários;
• definir o layout e codificar: criação do design; codificação dos 
arquivos em formato HTML; e programação de scripts em 
JavaScript, os quais são pequenos blocos de programas que serão 
executados, no servidor ou no navegador do usuário final, para 
produzir e permitir as interações no site;
www.esab.edu.br 20
• aplicar testes de qualidade e usabilidade: verificação do código-
fonte para garantir a sua qualidade, portanto a funcionalidade; 
e testes de usabilidade do site. Aqui, o processo é interativo e 
as adaptações são feitas à medida que o usuário experimenta 
e acompanha a evolução do site, resultando em manutenções 
corretivas (que tratam de danos atuais, recém-encontrados, e não dos 
iminentes) e preventivas (a manutenção planejada ou periódica que 
previne erros durante o uso e, consequentemente, a recorrência de 
manutenção corretiva);
• publicação: como temos visto, o site é uma coleção de arquivos 
digitais, que inclui arquivos de texto com extensões do tipo “.html”, 
“.css”, “.js”; de imagem, animações; de conexão a banco de dados 
etc., e para que ele possa ser acessado, esses arquivos devem ser 
publicados em um servidor web.
Podemos ver que o processo de desenvolvimento de um site necessita de 
muito planejamento e muita organização, aliados aos conhecimentos 
técnicos em linguagens de programação, modelagem de sistemas e 
bancos de dados. Para entender melhor como planejar e organizar 
adequadamente um projeto web, na próxima unidade você terá contato 
com as boas práticas de desenvolvimento para que o site tenha uma 
grande aceitação pela comunidade web.
www.esab.edu.br 21
3 Definição da estrutura do site
Objetivo
Conhecer e analisar as boas práticas para definição da estrutura do 
website.
Agora que já vimos o básico sobre o projeto web, por meio do qual 
o desenvolvimento será conduzido e conhecemos como ocorre esse 
desenvolvimento estudando desde a análise até a manutenção de um 
site, nesta unidade você conhecerá, com base nos autores Lemay (2002) 
e Nielsen e Loranger (2007), as boas práticas que devem nortear o 
desenvolvimento do projeto web para que o site tenha a aceitação 
desejada por parte da comunidade web e de seus usuários.
Com o aumento do acesso à web e a sua popularização, hoje muito 
mais pessoas acessam a internet e utilizam-na para divulgação, como 
uma ferramenta de negócio, o que gera competitividade e consequente 
aumento da qualidade das informações, do design e do funcionamento 
dos websites. Como resultado disso, os usuários da web tornaram-se mais 
exigentes, portanto menos tolerantes ao tipo de material exposto. 
Assim, notamos que nesses últimos anos a web e os seus usuários 
mudaram rapidamente, e hoje a tecnologia é muito mais confiável, tem 
um custo menor e uma gama de serviços, de modo que as barreiras já 
não são tanto técnicas, de infraestrutura ou recursos físicos, mas sim 
relacionadas à definição de projeto. 
Como vimos nas unidades anteriores, a chance de um site atrair novos 
clientes e de mantê-los depende da sua qualidade e da facilidade de 
uso durante a visita inicial. Por isso, a usabilidade tornou-se um item 
fundamental para o sucesso de um projeto web, pois ela torna o site mais 
fácil e mais agradável, de forma que as pessoas não se sintam oprimidas 
ao acessá-lo, independentemente do seu grau de conhecimento de acesso 
à web e de navegação. É assim que o site oferece suporte ao negócio da 
empresa, ajudando-a a aumentar os lucros. 
www.esab.edu.br 22
De acordo com Nielsen e Loranger (2007), usabilidade se refere à 
capacidade de um produto qualquer ser utilizado por seus usuários de 
maneira que eles atinjam seus objetivos com eficiência e satisfação. E, 
como vimos, os usuários escolhem os sites com base nas suas experiências 
anteriores, por isso um projeto de site deve primar por passar mensagens 
de forma extremamente simples e diretas, começando pela apresentação 
da homepage. Ainda segundo os autores, além dos objetivos da homepage 
que vimos na unidade 2, ela tem como objetivo principal direcionar 
os usuários a outros locais; e quanto maior o número de pessoas que 
entendem a página, menos esta será examinada. Para Nielsen e Loranger 
(2007), os usuários leem substancialmente mais conteúdo nas páginas 
internas de um site do que na homepage.
Desta forma, como o interesse é fazer com que o visitante interaja com o 
site por completo, visitando as páginas internas, alguns cuidados devem 
ser tomados. Os autores classificam esses cuidados como diretrizes que 
devem ser obedecidas. São elas:
a. Informar aos usuários onde eles estão e como podem prosseguir para 
as outras partes do site incluindo estes três elementos de design em 
cada página:
• o nome ou logotipo da empresa no canto superior esquerdo;
• um link com um único clique direto para a homepage;
• máquina de busca, localizada preferivelmente no canto superior 
direito.
b. Orientar o usuário quanto ao restante do site. Se o site possuir uma 
arquitetura hierárquica de informações, a melhor maneira de manter 
o usuário informado é disponibilizar um conjunto de links que 
indiquem a localização atual do usuário no contexto da hierarquia. 
Pode ser utilizado o que chamamos de breadcrumb (trilha de 
migalhas), ou seja, uma sequência de links que geralmente aparece 
horizontalmente no topo da página, indicando o caminho que o 
usuário percorreu até chegar à página em que ele se encontra.
c. Não pressupor que os usuários sigam um caminho reto para chegar à 
página desejada.
www.esab.edu.br 23
Assim como a homepage, as páginas internas são importantíssimas para 
um site, pois o visitante, ao deparar com essas páginas, passa mais tempo 
lendo o conteúdo do que interagindo por meio dos links de navegação, 
por isso é fundamental disponibilizar poucos links, mas eficientes. 
Pelo fato de nos últimos anos a web ter se aprimorado com o avanço 
tecnológico, hoje em dia parece haver uma melhoria das interfaces de 
interação com o usuário e cuidados cada vez maiores por parte daqueles 
que criam websites. Apesar disso, há ainda muitas falhas e algumas delas 
são básicas, mas continuam se repetindo nos portais web. Para evitar 
problemas de usabilidade, alguns pontos de falha devem ser observados:
• links que não mudam de cor quando visitados;
• botão “Voltar” que não existe ou não funciona;
• novas janelas que abrem no navegador;
• janelas pop-up usadas sem necessidade;
• itens ou elementos de design que parecem anúncios;
• conteúdo vago ou muito extenso.
Vamos ver esses problemas de forma mais detalhada para que você saiba 
melhor como lidar com eles.
3.1 Links que não mudam de cor quando visitados
A base da web é o acesso a hipertextos – isto é, textos que se conectam – 
e a possibilidade de navegação por esses conteúdos. Por isso, o princípio 
básico de qualquer página acessada na internet é mostrar ao usuário onde 
ele está, onde esteve e para onde pode ir. Quando o usuário sabe quais 
páginas já visitou, fica muito mais fácil evitar que as revisite por engano, 
produzindo a sensação de desorientação, que é muito negativa.
www.esab.edu.br 24
3.2 Botão “Voltar” que não existe ou não funciona
Outro ponto importante é dar ao usuário a possibilidadede desfazer uma 
ação, e é esse o papel do botão “Voltar” que vemos nos sites. Ele produz 
a sensação de conforto ao usuário, pois caso ele cometa algum erro ou 
acesse um conteúdo não desejado, poderá refazer o caminho. A função 
disponibilizada por esse botão possibilita que o usuário retorne ao lugar 
desejado. 
Na maioria dos navegadores de internet, encontramos o botão “Voltar” 
representado por uma seta que aponta para a esquerda, a qual possibilita 
o acesso ao histórico de navegações ou a determinada página já visitada. 
Mesmo que as páginas contenham um link para acessar outra, a maioria 
dos usuários utiliza esse botão para voltar, mesmo que isso exija mais 
interações (cliques). 
Assim, o botão “Voltar” sempre deve estar disponível ao usuário, na 
mesma localização e realizando sempre a mesma função, de modo a 
garantir que o usuário saiba sempre como navegar pelos sites, sem a 
necessidade de procurar links na página. Então, evite utilizar técnicas 
que desabilitem o botão “Voltar”, mesmo que o navegador permita esses 
truques de codificação.
3.3 Novas janelas que abrem no navegador
Segundo Nielsen e Loranger (2007) um problema muito comum ao 
acessar um site é a opção de abrir novas janelas no navegador. Essa 
técnica foi criada com a intenção de o usuário se manter conectado no 
site principal em vez de abrir uma nova página no lugar da antiga quando 
um botão ou link é clicado. Essas janelas que abrem “sobre” a página 
principal são chamadas de pop-up, e em vez de prender o visitante no site, 
têm provocado outro resultado: a irritação do visitante a ponto de fazê-lo 
sair do site. 
www.esab.edu.br 25
Ainda seguindo Nielsen e Loranger (2007), os principais problemas que 
as janelas pop-up têm trazido para os sites são:
• poluição visual do site;
• obrigação de o visitante agir indesejadamente, uma vez que ele 
precisa interagir com essas páginas para fechá-las;
• travamento do sistema devido ao consumo exagerado de memória 
principal para carregar e manter essas várias janelas;
• impedimento de o usuário retornar à página anterior, pois as novas 
janelas não geram um histórico de páginas visitadas e desabilitam o 
botão “Voltar”;
• irritação do usuário, pois essas janelas o desconcentram, tirando sua 
atenção do conteúdo da página principal.
Portanto, evite o uso da abertura de novas janelas no desenvolvimento do projeto 
web, pois o resultado provavelmente será negativo, dispersando o interesse do 
usuário ao visitar o site e fazendo com que ele perca o foco de sua visita 
(NIELSEN; LORANGER, 2007).
3.4 Itens ou elementos de design que parecem 
anúncios
Um dos meios mais utilizados para a publicidade na web são os banners, 
uma ferramenta publicitária muito comum que remunera o proprietário 
pela inclusão do banner no seu site. Portanto, quanto mais banners 
um site tiver, maior será a sua rentabilidade, e por isso eles são muito 
utilizados em sites com grande tráfego de visitantes. 
A intenção do banner é atrair a atenção do usuário, fazendo com que 
ele acesse outra página. Contudo, o uso exagerado dessa ferramenta 
publicitária tem implicado um resultado negativo: o usuário irrita-se, 
tenta esquivar-se desses meios de divulgação ou ignora esses objetos e seu 
www.esab.edu.br 26
conteúdo. Isso tem feito com que o usuário ignore não só os banners, mas 
também tudo aquilo que possa lembrar esse tipo de publicidade. Assim, 
qualquer coisa que seja muito colorida e muito grande, principalmente se 
incluir animação, tende a ser ignorada pelo usuário do site.
Portanto, evite o desenvolvimento de páginas com um layout que lembre 
os banners publicitários. Se desejar que os conteúdos da página sejam 
realmente lidos, tenha certeza de que o conteúdo não se pareça com 
propaganda, pois as pessoas tendem a desviar a atenção daquilo que 
lembra um banner ou uma propaganda.
Podemos notar que esse e os outros pontos problemáticos vistos até aqui 
são referentes ao layout do site e aos mecanismos de interação com o 
usuário. Mas não é somente disso que um site sobrevive, certo? Então, é 
chegado o momento de acrescentarmos a todo esse contexto os cuidados 
com a definição do conteúdo do site, tão importantes quanto as regras de 
navegabilidade e apresentação da página.
3.5 Conteúdo vago ou muito extenso
É imprescindível que, na elaboração do projeto web, procuremos criar 
conteúdos que informem ao visitante de modo rápido e eficiente o que 
o site oferece. Quanto mais elaborados e extensos esses conteúdos, maior 
a probabilidade de o usuário desistir da visita ao site. Os conteúdos 
extensos e os textos rebuscados sem necessidade são as principais 
causas de repúdio a sites, pois anunciam ao visitante que ele terá um 
árduo trabalho para filtrar todas as informações que realmente deseja 
saber, o que toma muito do seu tempo. Portanto, lembre-se que usar 
termos muito técnicos, que apenas os usuários internos da empresa 
estão habituados a usar, provavelmente afastará os visitantes do site de 
divulgação da empresa, por exemplo.
Na edição do conteúdo web, diferentemente dos outros conteúdos 
midiáticos, há a necessidade de prender a atenção do usuário 
rapidamente, portanto procure começar o texto já apresentando os 
resultados obtidos, os pontos positivos, o que a empresa tem a oferecer, e 
depois apresente os processos que podem levar a esses resultados.
www.esab.edu.br 27
Fórum
Caro estudante, dirija-se ao Ambiente Virtual de 
Aprendizagem da Instituição e participe do nosso 
Fórum de discussão. Lá você poderá interagir com 
seus colegas e com seu tutor de forma a ampliar, 
por meio da interação, a construção do seu 
conhecimento. Vamos lá?
www.esab.edu.br 28
4 Padrão de desenvolvimento de projetos web – parte 1
Objetivo
Apresentar a importância do padrão de desenvolvimento de 
softwares e as vantagens e benefícios da sua adoção em projetos web.
Na unidade anterior, vimos como definir a estrutura e o conteúdo de um 
site para que ele seja bem organizado e produza uma boa experiência para 
o usuário. Mas, além de uma boa definição de estrutura, para criarmos 
um bom site, devemos ter cuidados durante todo o desenvolvimento. 
Por isso, nesta unidade veremos os aspectos importantes e relevantes para 
a construção de um projeto web que facilite não somente o processo 
de desenvolvimento, mas também as etapas de testes e manutenção, 
possibilitando a utilização dos recursos da internet de forma ampla 
e acessível a um grande número de usuários e uma variedade de 
dispositivos e plataformas.
O uso de aplicações para web tem se tornado o diferencial para muitas 
empresas, fazendo a web crescer comercialmente e exigindo cada vez 
mais recursos para a publicação de materiais, algo com que os primeiros 
projetos para a web não se preocupavam.
www.esab.edu.br 29
Para sua reflexão
As empresas estão usando a web como um 
diferencial de crescimento, exigindo cada vez mais 
recursos para publicação de materiais.
Como essas mesmas empresas estão se 
preocupando com o uso dos dispositivos móveis 
para divulgação de seus produtos e serviços? 
Será que esses projetos web foram projetados 
para novas tecnologias de interação com os seus 
clientes? Qual a sua opinião?
A resposta a essa reflexão forma parte de sua 
aprendizagem e é individual, não precisando ser 
comunicada ou enviada aos tutores.
Inicialmente, na década de 1990, os projetos web se fundamentavam 
essencialmente na apresentação visual das informações, deixando 
em segundo plano a preocupação com as regras de negócio 
(funcionalidades), bem como o uso otimizado dos recursos 
disponibilizados pelo computador. Essa metodologia valorizava em 
demasia a apresentação, as telas – conhecidas como graphic user interface 
(GUI) –, deixando de priorizar a qualidade do código-fonte produzido, 
o que resulta em muitas manutenções corretivas,que são as manutenções 
posteriores (ou seja, feitas após o site já estar sendo visitado) para corrigir 
erros encontrados pelo cliente ou pelos usuários.
Nessa época, os próprios navegadores de internet não possuíam um 
padrão de reconhecimento dos códigos que interpretavam. Mas isso 
começou a mudar por volta de 1995 com a criação do World Wide Web 
Consortium (W3C), que comentamos na unidade 1.
De forma geral, os primeiros projetos web estruturavam os sites em um 
conjunto de comandos, tabelas, funções e scripts (rotinas de programação) 
muitas vezes incompreensíveis, e para fazer uma alteração no site era 
necessário alterar todos os arquivos, um a um. Essa forma de trabalho, 
como podemos imaginar, resultava em diversos problemas, tais como:
www.esab.edu.br 30
• dificuldade de desenvolvimento e manutenção;
• código-fonte incompreensível;
• falta de padrão;
• rotinas de formatação visual e funcionamento do site implementadas 
na mesma estrutura.
Como essa forma de trabalho se mostrou ineficiente conforme os 
projetos web evoluíram e sua complexidade aumentou, foi necessária 
a definição de um modelo de desenvolvimento que priorizasse a 
manutenção, a qualidade e a organização do código-fonte produzido. 
Esses padrões web são um conjunto de normas, diretrizes e 
recomendações produzidas pelo W3C e destinadas a orientar fabricantes, 
desenvolvedores e projetistas para o uso de práticas que possibilitem 
a criação de uma web acessível a todos, independentemente dos 
dispositivos usados ou de suas necessidades especiais. 
Por que utilizar esses padrões de desenvolvimento? Alguns motivos são:
• manter o código-fonte limpo, organizado e correto, separando o 
conteúdo da apresentação;
• facilitar o desenvolvimento, a compreensão do código-fonte e 
a manutenção por meio do uso de HTML semântico e bem 
estruturado; 
• reduzir custos e retrabalhos desnecessários por meio do 
desenvolvimento de um código-fonte simples e organizado;
• garantir compatibilidade com as leis e diretrizes de acessibilidade 
sem comprometer a estética, o desempenho e a sofisticação do site;
• tornar o site adaptável para que possa ser visto em diferentes 
navegadores e dispositivos, sem que para isso seja necessário 
desenvolver versões diferentes;
• garantir o carregamento rápido da página por meio da redução de 
HTML, o que diminui o tamanho dos arquivos a serem carregados.
www.esab.edu.br 31
Na prática, o padrão resulta em um projeto web que deve ser 
desenvolvido de forma estruturada e em camadas, separando em cada 
uma dessas camadas as suas responsabilidades dentro de todo o contexto. 
Cada camada deverá funcionar de forma independente, porém, uma 
completará a outra.
Temos essencialmente três camadas em um projeto web:
• conteúdo;
• apresentação;
• comportamento.
O desenvolvimento deve começar pela camada de conteúdo, que são 
as informações a serem apresentadas pela página, pois todo o processo 
de desenvolvimento dependerá de como o conteúdo será estruturado. 
Portanto, é importante que o conteúdo seja bem estruturado, 
caso contrário as camadas a serem desenvolvidas posteriormente e 
que dependerão do conteúdo serão afetadas, dificultando todo o 
desenvolvimento e a manutenção do site. 
Para estruturarmos bem o conteúdo, temos as linguagens de marcação, 
como é o caso do HTML, do Extensible Markup Language (XML) e do 
Extensible HyperText Markup Language (XHTML), que se trata de uma 
reformulação da linguagem HTML com base no XML. Essas linguagens 
são compostas de marcadores, chamados tags, que servem para “anotar” 
a formatação da página ou adicionar informações de modo que o código 
fique mais organizado.
Por meio de uma dessas linguagens, a camada de conteúdo deve 
ser elaborada de forma que a leitura das informações das páginas 
ocorra de maneira organizada, em uma sequência e estrutura lógicas, 
independentemente dos estilos de apresentação aplicados.
www.esab.edu.br 32
Algumas linguagens possuem o que chamamos de semântica de 
apresentação. Isso quer dizer que esse tipo de linguagem indica como 
o dado estruturado será exibido, ou seja, ela possui uma especificação 
que determina para que o dado deve ser usado. Uma dessas linguagens 
é o HTML, que possui semântica e por isso permite a construção de 
códigos mais bem estruturados, melhorando a sua qualidade. Já o XML 
é uma linguagem de marcação mais simples cuja especificação não tem 
semântica de apresentação.
Por isso, recomenda-se usar basicamente HTML para construção 
do conteúdo das páginas, deixando para o JavaScript (script para 
implementação de rotinas escutáveis dentro das páginas) e CSS as rotinas 
de validação e  estilização das páginas. O ideal é que não haja a necessidade 
de uso de recursos gráficos extras para acessar o conteúdo e que ele funcione 
perfeitamente sem uso de scripts ou imagens para apresentação, que 
dificultariam o acesso de usuários com deficiências visuais às informações.
Mesmo que o desenvolvimento se proponha a criar páginas web 
sofisticadas, procure dividir seu conteúdo em várias partes, cada uma com 
funções específicas, pois isso facilita o processo de manutenção. Se a página 
for gerada a partir de um único conteúdo que concentra todo o código, a 
sua atualização será mais difícil, porque se torna complexo identificar cada 
parte dentro de um só documento. Além disso, aumenta o risco de perder 
uma seção (parte) do documento ou de desordenar as seções. 
Podemos dizer que o principal benefício em se programar a camada 
de conteúdo é possibilitar que as alterações no layout das páginas não 
alterem os conteúdos apresentados.
Agora que já sabemos o básico sobre padronização de projetos web e os 
principais problemas que devemos tratar, na próxima unidade daremos 
continuidade aos estudos de padrões de desenvolvimento web com foco 
nas camadas de apresentação e comportamento. Bons estudos!
www.esab.edu.br 33
5 Padrão de desenvolvimento de projetos web – parte 2
Objetivo
Apresentar a importância do padrão de desenvolvimento de 
softwares e as vantagens e benefícios da sua adoção em projetos web.
Nesta unidade, daremos continuidade aos estudos do padrão de 
desenvolvimento para projetos web, com base nos autores Lemay 
(2002) e Nielsen e Loranger (2007). Focaremos, agora, nas camadas 
de apresentação dos dados e na camada de regras de negócios, a 
camada de comportamento – responsável por todo o controle e regras 
de funcionamento do site. Vamos iniciar, então, com a camada de 
apresentação, que é a parte visual do conteúdo.
5.1 Camada de apresentação
É frequente a necessidade de mudar as telas de aplicações web sem que o 
seu funcionamento tenha de mudar, portanto é fundamental que alterações 
de telas sejam executadas de forma independente das funções do sistema, 
evitando que pequenos ajustes se transformem em grandes problemas.
A camada de apresentação, sendo a parte visual do conteúdo, deve 
ser construída após a camada de conteúdo. Para desenvolvermos essa 
camada, utilizamos a linguagem Cascading Style Sheets (CSS), usada para 
formatar documentos HTML, XML e HTML, e devemos primar pela 
simplicidade e clareza na apresentação dos dados.
Essa parte é, portanto, a responsável pela estética, pois é por meio dela 
que o programador de computador define o layout de uma aplicação 
web. Procure construí-la em arquivos separados, independentes da 
camada de conteúdo, para facilitar atualizações posteriores sem correr o 
risco de acabar mexendo em outras partes do código, o que poderia gerar 
problemas nas funcionalidades.
www.esab.edu.br 34
No desenvolvimento da camada de apresentação, é importante também 
pensarmos que hoje em dia temos diversos dispositivos com acesso à 
internet – tablet, netbook, smartphone, celular – e diferentes navegadores. 
Por isso, devemos evitar o uso de propriedades de layout quecausem 
problemas de visualização das páginas em outras plataformas ou 
dispositivos. Para tanto, as páginas devem ser testadas em diversos 
navegadores, principalmente nos mais usados. 
Como podemos ver, o objetivo da camada de apresentação de um site 
é possibilitar a interação com o usuário seguindo as regras de negócio 
que foram programadas na camada de comportamento (que veremos 
a seguir). A separação dessas camadas possibilita o que chamamos de 
desenvolvimento paralelo: que o responsável pelo design das páginas 
possa trabalhar sem interferir nas tarefas do responsável pela programação 
de funcionalidades do site, de modo que ambos testem e validem suas 
rotinas sem que um afete o trabalho do outro. 
Essa boa prática, além de garantir o desenvolvimento em paralelo, 
permite que a manutenção preventiva e a corretiva sejam feitas de forma 
mais rápida e organizada.
5.2 Camada de comportamento
Essa camada, a terceira e mais complexa do projeto web, pode ser também 
a mais desafiadora e interessante de se desenvolver, pois ela possibilita a 
criação de páginas dinâmicas que permitem interações com os usuários. 
Ela é utilizada para modificar o comportamento dos elementos presentes 
na camada de conteúdo, visando a melhorar a experiência do usuário, e é 
construída utilizando-se linguagens de script (como JavaScript) e modelos 
de objeto – ou Document Object Model (DOM). Vale destacar que o 
conteúdo não é modificado, porém novos recursos como validação da 
entrada de dados, cálculos matemáticos, integração com sistemas de bancos 
de dados, podem ser codificados nessa camada.
Escrever código script na camada de comportamento melhora a 
utilização do site sem congestionar o documento HTML em que é 
aplicado, mesmo que os usuários tenham desabilitado a opção de 
execução de script do navegador. 
www.esab.edu.br 35
Agora que já conhecemos as camadas e sabemos os motivos para 
desenvolvê-las separadamente, vamos retomar um pouco a elaboração 
de um projeto web para termos uma visão geral de seu desenvolvimento 
e também para entendermos as vantagens de se aplicar os padrões 
estabelecidos.
Nos projetos web, os seguintes passos devem ser executados:
• comece produzindo o conteúdo no formato HTML. Essa é a 
camada de base que qualquer visitante, usando qualquer tipo de 
navegador, deve ser capaz de ver;
• concentre-se em melhorar a aparência do site adicionando a camada 
de apresentação desenvolvida por meio de CSS;
• por fim, use JavaScript para introduzir uma camada de interatividade 
e comportamento dinâmico, que tornará o site mais fácil de usar em 
navegadores equipados com JavaScript.
Lembre-se de manter o projeto com o código HTML, o CSS e o 
JavaScript separados, dessa forma será mais fácil garantir que a camada 
de conteúdo permaneça legível em ambientes de navegação em que as 
camadas de apresentação ou comportamento não consigam operar. Veja 
no quadro a seguir a separação em camadas e a ferramenta que deve ser 
utilizada para desenvolver cada uma delas.
Camada Tecnologia
Conteúdo HTML
Apresentação CSS
Comportamento JavaScript
Quadro 2 – Tecnologia disponibilizada para cada camada.
Fonte: Elaborado pelo autor (2013).
Com o aumento da complexidade dos sites, essa arquitetura em camadas 
tem como foco dividir um grande problema em vários problemas 
menores e de menor complexidade. Por exemplo, no desenvolvimento 
de rotinas de cadastramento no banco de dados, a técnica de desenvolver 
vários módulos com funções predeterminadas, como: inserir, remover, 
www.esab.edu.br 36
alterar e consultar dados, facilita a manutenção do sistema, pois em caso 
de erro no seu funcionamento, cada rotina possui uma regra de negócio 
simples e específica, evitando que o programador tenha de analisar todas 
as rotinas para encontrar o foco do problema. 
Dessa forma, o desenvolvimento e as alterações que podem ser 
necessárias em uma das camadas dificilmente vai interferir no restante 
dos arquivos e códigos. Isso agiliza o desenvolvimento e facilita a divisão 
de tarefas entre equipes, desde a atualização de layout até a alteração de 
regras de negócios, ou seja, de funcionalidades, bem como da adição de 
novos recursos ou funções. 
Como vimos, existem boas práticas e alguns padrões a serem seguidos no 
desenvolvimento web e a aplicação deles resulta em diversas vantagens. 
As principais são:
• uniformidade: documentos criados segundo os padrões web podem 
utilizar uma estrutura comum, permitindo que documentos sejam 
manipulados facilmente por mecanismos de apresentação;
• simplicidade: a eliminação de elementos desnecessários com a 
utilização do HTML torna simples a estruturação dos documentos, 
ignorando a sua apresentação, que pode ser aplicada depois com o 
desenvolvimento da camada de apresentação. A simplicidade dos 
documentos resulta em melhores tempos de acesso;
• separação de estrutura funcional e apresentação: essa é a maior 
vantagem na utilização dos padrões, pois essa separação faz com 
que cada documento restrinja-se ao seu conteúdo específico, o que 
facilita modificar cada camada sem implicar problemas em outra; 
• acessibilidade: permite que as páginas sejam vistas e utilizadas 
em tipos de ambientes que não sejam determinado navegador, 
o que evita a duplicação de conteúdo e facilita a utilização geral 
dos documentos. A acessibilidade auxilia pessoas que possuem 
deficiências físicas melhorando a manipulação das páginas por teclas 
de atalhos.
www.esab.edu.br 37
Por fim, é importante que estejamos conscientes dos benefícios trazidos 
pelas boas práticas e padrões web. Com a aplicação deles, você e a 
empresa para a qual trabalha (ou trabalhará) terão resultados vantajosos, 
pois pouparão tempo e recursos financeiros e deixarão o cliente e os 
usuários satisfeitos. Além disso, dedicar-se aos estudos para compreender 
o funcionamento e as particularidades dessa arquitetura certamente 
ajudará você a ser um excelente profissional de desenvolvimento web. 
Nas próximas unidades, conheceremos as ferramentas de 
desenvolvimento das camadas de conteúdo, apresentação e 
comportamento.
Estudo complementar
O governo brasileiro lançou em 2010 uma 
cartilha com padrões e boas práticas para o 
desenvolvimento de conteúdo web. Para saber 
mais sobre o assunto, acesse esse conteúdo 
clicando aqui.
www.esab.edu.br 38
6 Ferramentas de desenvolvimento web
Objetivo
Apresentar as principais ferramentas para o desenvolvimento web: 
NetBeans, Eclipse e o Notepad++.
Nesta unidade, caro aluno, você verá as principais ferramentas de 
desenvolvimento web, conhecidas como Integrated Development 
Environment (IDE), ou simplesmente ambiente integrado para 
desenvolvimento, que aceleram o processo de criação de um projeto web, 
pois permitem a codificação, a aplicação de testes e a organização de 
forma simples e intuitiva. 
Veremos aqui, com base nas informações de seus desenvolvedores, as 
ferramentas NetBeans (da Oracle), Eclipse (da Eclipse Foundation) e 
Notepad++ (que está sob a licença GPL), todas gratuitas e, por isso, 
amplamente utilizadas para o desenvolvimento web. E talvez você já 
esteja se perguntando qual seria a melhor ferramenta para se trabalhar 
com desenvolvimento web. Entre as três que veremos aqui, podemos 
dizer que todas são muito boas, e cada uma possui as suas vantagens. 
Vamos ver!
6.1 NetBeans
Segundo a Oracle (2013), responsável por este IDE, o NetBeans é um 
ambiente de desenvolvimento integrado gratuito, de código aberto e por 
isso está em constante evolução. 
Essa ferramenta pode ser instalada nos sistemas operacionais Windows, 
Linux e MacOS. Os passos a seguir apresentam uma introdução à 
plataforma, orientando você na instalação da ferramenta. 
www.esab.edu.br 39
Primeiramente, acesse o endereço <http://netbeans.org/downloads> para 
iniciar o downloadda ferramenta. Em seguida, faça o download da versão 
completa e, para executar a instalação, realize os seguintes passos:
1. Para instalar no Windows, o arquivo executável do instalador tem a 
extensão “.exe”. Na pasta em que o arquivo baixado foi salvo, clique 
no arquivo do instalador para executá-lo.
2. Clique em “Avançar” na página de boas-vindas do assistente de 
instalação.
3. Na página “Contrato de Licença”, clique na caixa de seleção e, em 
seguida, clique em “Avançar”.
4. Na página “Contrato de licença do JUnit” apenas clique em 
“Avançar”.
5. Aceite a instalação padrão do JDK para utilizar com o “NetBeans”.
6. Se a página de instalação do GlassFish for aberta, clique em 
“Avançar”.
7. Se estiver instalando o Apache Tomcat, em sua página de instalação, 
clique em “Próximo”.
8. Clique em “Instalar” para iniciar a instalação.
9. Na página “Configuração concluída”, clique em “Finalizar”.
Após a instalação, será criado na área de trabalho um ícone semelhante à 
figura a seguir:
Figura 5 – Ícone do IDE Netbeans.
Fonte: Oracle Corporation.
www.esab.edu.br 40
Clicando nesse ícone, você terá acesso ao ambiente do NetBeans, 
representado na figura a seguir:
Figura 6 – Tela principal do IDE Netbeans.
Fonte: Oracle Corporation.
Dica
Para compreender melhor como instalar e 
trabalhar com o NetBeans, acesse os seguintes 
endereços:
• Página do NetBeans
• Tutorial em vídeo
• Blog Protocolo TI
• Portal iMasters
6.2 Eclipse
Conforme seu fabricante, o Eclipse é uma plataforma de 
desenvolvimento de software livre e extensível baseada em Java. 
Embora a maioria dos seus usuários utilize-o como um ambiente de 
desenvolvimento integrado Java, seu uso não se limita a essa linguagem. 
www.esab.edu.br 41
Estão disponíveis suportes para linguagens de programação como 
Personal Home Page (PHP) – uma linguagem de script muito utilizada 
para o desenvolvimento de aplicações web – C, C++ e HTML. 
Para saber como instalar o eclipse, acesse o site (clicando aqui) e procure a 
opção “Downloads”. Baixe a versão Eclipse IDE for Java EE Developers, 
pois essa é a mais completa. Após finalizar o download, descompacte o 
arquivo na pasta de sua preferência e a ferramenta já estará pronta para 
ser usada.
Agora que já temos a ferramenta instalada, vamos executar o Eclipse para 
dar início às configurações dos outros aplicativos. Acesse a pasta em que 
descompactou o Eclipse e execute o arquivo executável “eclipse.exe” para 
abrir a ferramenta. O Eclipse não precisa ser instalado e essa é uma das 
grandes vantagens dele, pois você pode ter essa ferramenta configurada, 
cheia de plugins e armazená-la em seu pendrive, por exemplo, para usá-la 
em qualquer lugar.
Figura 7 – Tela principal do IDE Eclipse.
Fonte: The Eclipse Foundation.
www.esab.edu.br 42
Dica
Para saber mais sobre como utilizar o Ecplise, 
acesse os endereços:
• Java Magazine
• Blog Programero
• Texto introdutório (UFPE) 
• Tutorial em vídeo
6.3 NotePad++
Conforme descrito no site da ferramenta, o NotePad++ é um editor de 
texto e códigos-fonte completo que suporta as mais diversas linguagens 
de programação. Assim, é uma ótima alternativa ao bloco de notas do 
Windows, que é a ferramenta mais simples para criação de sites. 
O NotePad++ possui suporte às linguagens C, C++, Java, C#, XML, 
HTML, PHP, JavaScript e muitas outras. Também tem, assim como o 
NetBeans e o Eclipse, a função de autocompletar, o sistema de busca e 
substituição, a interface funcional e a navegação por abas. No entanto, 
se comparado às ferramentas anteriores, é bem mais simples e fácil 
de utilizar, sendo o ideal para projetos de criação de páginas HTML, 
JavaScript e CSS.
Entre os outros recursos que o Notepad++ oferece, estão: numeração de 
linhas, marca-texto de variáveis de programação, possibilidade de abrir 
vários documentos em abas. Todos esses recursos são úteis para que a 
codificação seja mais rápida.
Vamos ver como instalar esse programa? Primeiramente, acesse (clicando 
aqui) e, em seguida, clique na opção “Download”, localizada no menu 
da esquerda. Um pequeno menu com as versões disponíveis será 
aberto. Escolha uma, preferencialmente a mais recente, e clique sobre o 
link. Você será direcionado a uma nova página. Nela, clique na opção 
“Download”, como mostra a figura a seguir:
www.esab.edu.br 43
Figura 8 – Link para download da ferramenta NotePad++.
Fonte: Elaborada pelo autor (2013).
Depois de ter baixado o software, é necessário executar o arquivo. Para 
isso, acesse a página em que o arquivo foi baixado e dê um duplo clique 
no ícone do programa. Na primeira tela, escolha o local da instalação 
clicando em “Browser” e, em seguida, selecionando a pasta para guardar 
o Notepad++. Selecionada a pasta, clique em “Install”. O programa será 
instalado no local que você escolheu. Em seguida, clique em “Finish” e o 
programa estará instalado.
Para executar o programa, clique no ícone criado na área de trabalho do 
computador, que deverá ser semelhante ao ícone da figura a seguir:
Figura 9 – Ícone da ferramenta NotePad++.
Fonte: <http://notepad-plus-plus.org>.
A tela do NotePad++ é muito parecida com a tela do bloco de notas do 
Windows, como você pode ver na figura a seguir:
www.esab.edu.br 44
Figura 10 – Tela principal do NotePad++.
Fonte: <http://notepad-plus-plus.org>.
Nesta unidade você pôde conhecer as principais ferramentas de 
desenvolvimento de sites, muito utilizadas por serem gratuitas e estarem 
em constante evolução, com novas funcionalidades e amplo suporte nos 
sites dos fabricantes. A escolha pela ferramenta que você julgar ideal está 
sujeita às suas preferências pessoais e aos recursos de computador. 
O editor NotePad++ se caracteriza por ser uma ferramenta muito leve, 
que requer pouco recurso de memória principal e processador, por 
isso utilizaremos como ferramenta-padrão para criação dos exemplos 
e exercícios práticos. Já as ferramentas NetBeans e Eclipse possuem 
muitos recursos que no momento não serão utilizados, pois exigem 
computadores mais potentes e processos de instalação mais complexos.
www.esab.edu.br 45
Resumo
Ao longo destas unidades, você entendeu o que é a web e qual a 
diferença entre internet e web. Teve a oportunidade de aprender um 
conjunto de termos que são utilizados por profissionais especializados em 
desenvolvimento para web e também verificou que alguns conceitos são 
utilizados de forma equivocada por algumas pessoas, como é o caso do 
uso de homepage e website para indicar a mesma coisa. 
Você aprendeu, também, que para criar aplicações web é fundamental 
um planejamento de quais ações o site deverá realizar e qual o seu 
público-alvo, de forma que antes de qualquer codificação todos os 
requisitos tenham sido levantados e validados com o cliente o usuário 
final. Viu que planejar é essencial para que se tenha um produto que 
atenda às expectativas dos usuários e se diminua a manutenção corretiva, 
aquela que não traz nada de positivo para o site, principalmente 
financeiramente.
Por fim, você teve um contato inicial com algumas ferramentas que 
auxiliam no desenvolvimento de sites, tornando o processo mais 
produtivo e rápido. Além disso, aprendeu que desenvolver um site exige 
técnicas com as quais as telas, as regras de negócio e as conexões com 
banco de dados possam ser ajustadas sem muito custo ao sistema.
www.esab.edu.br 46
7 Ferramentas de depuração de aplicações web
Objetivo
Apresentar a ferramenta Firebug para identificação e eliminação de 
erros de programação e monitoramento de CSS e HTML.
Após ver, nas unidades anteriores, como acontece o desenvolvimento de 
um site por meio do projeto web, quais os padrões e as boas práticas a 
serem seguidas, nesta unidade você conhecerá o Firebug, uma importante 
ferramenta para serutilizada durante o processo de desenvolvimento de 
projetos web que é compatível com o navegador Firefox.
Saiba que essa ferramenta tem grande importância para lidar com as 
grandes dificuldades de validação do site durante sua produção, pois ela 
possibilita que a equipe envolvida visualize e teste o site em diferentes 
tipos de navegadores a fim de encontrar bugs, validando e homologando 
o que foi produzido antes da entrega ao usuário final. 
Mas talvez você esteja se perguntando: “para que isso?”. Bem, quando 
visualizamos uma página em um navegador, na verdade estamos vendo o 
resultado da montagem que o navegador faz dos códigos em HTML, CSS 
ou JavaScript, escritos pelo desenvolvedor. Com a utilização do Firebug, 
podemos visualizar no navegador não só a página (resultado do código 
implementado), mas também a estrutura do código e, caso existam, os 
erros – os quais são comandos que o navegador não conseguiu interpretar.
A finalidade dessa ferramenta é mostrar o código que está por trás 
da página visualizada de forma que você possa enxergar onde os 
problemas estão ou em que par do código será necessária alteração. E 
para um desenvolvedor isso se torna bastante interessante para corrigir 
erros, especialmente quando ele precisa dar continuidade ou fazer a 
manutenção no código que foi escrito por outro programador.
www.esab.edu.br 47
Para sua reflexão
Mesmo com novas técnicas de programação, 
ferramentas de desenvolvimento cada vez 
mais eficientes e profissionais cada vez mais 
qualificados, os projetos de Tecnologia da 
Informação ainda apresentam uma alta taxa de 
incompatibilidade com as necessidades levantadas 
pelos clientes. 
Será que o problema está na definição do 
projeto? Ou será que está no levantamento dos 
requisitos e funcionalidades, e não no processo de 
desenvolvimento? O que você pensa sobre isso?
A resposta a essa reflexão forma parte de sua 
aprendizagem e é individual, não precisando ser 
comunicada ou enviada aos tutores.
Por isso, o Firebug é conhecido como ferramenta de análise e depuração de 
códigos HTML, CSS e JavaScript. Segundo a empresa criadora, Mozilla 
(2013), o Firebug integra-se com o navegador Firefox para disponibilizar ao 
usuário, enquanto navega, um conjunto de ferramentas de desenvolvimento. 
Você pode editar (no seu navegador), depurar e monitorizar CSS, HTML e 
JavaScript em tempo real e em qualquer página web. 
Em outras palavras, o que torna o Firebug tão importante é a 
possibilidade de atualizar as páginas em tempo real, conforme a 
codificação é feita. Esse recurso facilita muito a atualização e, como já 
dito, a correção de erros no HTML, CSS ou JavaScript de um site.
Saiba mais
O Firebug é uma ferramenta para o Firefox, porém 
existem outras ferramentas que podem ajudar o 
programador durante a criação de um site. Para 
saber mais, clique aqui e aqui.
www.esab.edu.br 48
É importante que você conheça as principais funcionalidades do Firebug, 
que são:
• inspect: possibilita mostrar o código que cria determinado 
componente de tela, bastando, para isso, que o componente seja 
selecionado;
• editor de CSS: exibe as modificações do código em tempo real, 
no navegador, e permite a visualização rápida e prática de tabelas, 
margens e bordas da página;
• monitor de atividades: analisa cada elemento da página e apresenta o 
tempo de duração para carregá-lo, identificando as rotinas que estão 
tornando o site lento em seu desempenho no navegador.
Agora que você já conhece a finalidade, as funcionalidades e as vantagens 
do Firebug, vamos acompanhar a sequência dos passos para a instalação 
da ferramenta.
Como vimos, essa é uma ferramenta para o navegador Firefox, por isso, 
caso você não o tenha, faça o download, acessando o site (clicando aqui), 
para a pasta de sua preferência. Depois de concluído o download, execute 
o arquivo FireFoxSetup.exe.
Com o navegador devidamente instalado, abra-o, clique na barra de 
ferramentas e selecione a opção Complementos, conforme mostra a 
imagem a seguir. Será aberta uma nova janela.
www.esab.edu.br 49
Figura 11 – Opção Complementos do Firefox.
Fonte: Mozilla Foundation.
Na nova tela, clique no campo de busca, localizado no canto superior 
direito, e digite a palavra Firebug. Em seguida, tecle Enter ou clique 
na lupa à direita do campo de busca, conforme ilustra a figura a seguir. 
Serão listados todos os nomes de complementos que contenham a 
palavra Firebug, seguidos de um conjunto de números que indica a 
versão do complemento.
Figura 12 – Busca pelo complemento Firebug.
Fonte: Mozilla Foundation.
Procure pela opção Firebug, cujo ícone é semelhante ao apresentado na 
imagem a seguir, e clique em Instalar.
Figura 13 – Resultado da busca por Firebug.
Fonte: Mozilla Foundation.
www.esab.edu.br 50
Aguarde a instalação do complemento. Você pode acompanhá-la por 
meio do botão Recebendo, que será apresentado na tela, como mostra a 
figura a seguir.
Figura 14 – Instalação do complemento Firebug.
Fonte: Mozilla Foundation.
Quando os botões Desativar e Excluir aparecerem, como na figura 
seguinte, o procedimento foi finalizado e o complemento está instalado.
Figura 15 – Opções para desativar ou excluir o Firebug.
Fonte: Mozilla Foundation.
Após a instalação, você poderá fechar a janela de complementos. Ao 
voltar para o navegador, haverá um novo botão no canto superior direito 
da janela, próximo aos botões de minimizar, maximizar e fechar. 
Você poderá ver, como mostra a figura a seguir, que se trata de um 
botão com o ícone do Firebug e uma seta ao lado para acessar e utilizar 
a ferramenta.
Figura 16 – Botão de acesso ao Firebug.
Fonte: Mozilla Foundation.
Clique na seta e selecione a opção “Ativar todos os painéis”, conforme a 
Figura 17, a seguir:
www.esab.edu.br 51
Figura 17 – Opção “Ativar todos os painéis” do Firebug.
Fonte: Mozilla Foundation.
Agora, para ver como o Firebug funciona, acesse uma página de internet 
e depois clique no botão do Firebug. Uma nova janela será apresentada 
mostrando o código que constrói a página carregada pelo endereço que 
você selecionou. A figura a seguir apresenta essa janela, acompanhe.
Figura 18 – Janela de monitoramento do Firebug.
Fonte: Firebug Working Group.
Selecionando as opções CSS ou Script, na janela aberta, você poderá 
visualizar, respectivamente, os estilos e as rotinas codificadas para a página.
Como você pode ver, o complemento Firebug poderá ajudar você 
no processo de construção e validação das páginas web de forma 
rápida, organizada e estruturada. Com essa ferramenta, integrada às 
de desenvolvimento apresentadas na unidade 6, você já tem todos os 
recursos necessários para começar a construir um site.
Então, chegou o momento de conhecer a linguagem de programação 
HTML, base de qualquer site na web, que começaremos a ver na 
próxima unidade. 
www.esab.edu.br 52
8 Introdução à linguagem HTML
Objetivo
Apresentar a linguagem HTML, a utilização das tags, a edição de 
documentos em HTML e o seu comportamento quando carregados 
pelo navegador de internet.
Agora que já conhecemos e vimos as ferramentas mais importantes e 
toda a base para começarmos a desenvolver um site, nesta unidade você 
verá as principais características da linguagem HTML. Você pode estar 
se perguntando: mas afinal, quais são essas características? Pois bem, 
a linguagem HTML pode ser interpretada por qualquer navegador 
de Internet, pois utiliza comandos na forma de marcações que dizem 
exatamente como o documento foi construído, especificando a posição, 
tamanho das figuras, cor do texto e do documento, tamanho da fonte, 
etc. Além disso, o HTML permite criar ligações entre arquivos, os links 
que possibilitam a navegação virtual, ou seja, ao serem clicados permitem 
acessar outro arquivo, que é o código básico para construirqualquer site. 
É importante lembrarmos que, como vimos na unidade 3, essa 
linguagem deve ser utilizada na camada de conteúdo do projeto web, 
garantindo, dessa forma, o acesso às informações independentemente do 
navegador e dos padrões de apresentação implementados.
De acordo com Silva (2008, p. 28),
HTML é a abreviação para HyperText Markup Language, grafia em inglês que, no 
jargão da internet, foi traduzida para Linguagem de Marcação para Hipertexto e que 
se destina a escrever documentos que possam ser lidos por softwares genericamente 
chamados de agentes de usuário. 
Aqui, vamos considerar como agente do usuário o navegador. Ainda 
conforme Silva (2008, p. 29), “[...] browser vem do verbo to browse, que 
significa folhear casualmente as páginas de um livro”. 
www.esab.edu.br 53
O termo browser ou navegador são costumamente utilizados para referenciar os 
programas de computador que permitem visualizar o conteúdo dos sites.
A linguagem HTML possui uma estrutura bem simples, constituída de 
elementos e atributos. Esses elementos utilizam nomes que indicam a sua 
finalidade dentro da página web, o que torna o seu significado e seu uso 
bastante intuitivos. Por exemplo, para apresentar uma tabela na página, 
utiliza-se o elemento table, que significa tabela em inglês.
Manzano e Toledo (2008, p. 36) destacam que “no caso da linguagem 
HTML, o programa é um texto escrito por meio de comandos 
específicos da linguagem, denominados tags, obedecendo à estrutura e às 
regras sintáticas dessa linguagem”.
Uma característica importante dessa linguagem é o fato de que os 
códigos não são compilados (transformados em linguagem de máquina), 
como acontece em programas escritos em C e Pascal. No HTML, os 
comandos são interpretados pelo navegador e “desenhados” na tela, 
assim, caso o comando seja escrito de forma errada, o navegador não 
conseguirá interpretá-lo e nenhuma mensagem será apresentada. 
Como enfatizam Manzano e Toledo (2008, p. 36), “quando o browser 
acessa um programa (página escrita em HTML), ele procura os 
comandos da linguagem (que são as tags) e os interpreta”. É desse modo 
que conseguimos ver os sites no navegador.
Lemay (2002, p. 45) acrescenta que “os navegadores web, além de 
fornecerem funções de rede para recuperar páginas da web, atuam como 
formatadores de HTML. [...] o navegador interpretará, ou analisará 
sintaticamente, as tags HTML e formará o texto e as imagens na tela”.
Por todas essas características, o HTML é conhecido como uma 
linguagem de marcação. Mas que tipo de linguagem é essa? Lemay 
(2002, p. 47) explica que “[...] uma linguagem de marcação significa 
que você começa com o texto da sua página e acrescenta tags especiais 
envolvendo palavras e parágrafos. As tags indicam diferentes partes da 
página e produzem diferentes efeitos no navegador”.
www.esab.edu.br 54
Quando uma página HTML é carregada por um navegador, todas as 
formatações do texto – como mudanças de linhas, tabulações e muitas 
outras – são ignoradas, pois os únicos comandos que um navegador 
interpreta são as tags e os caracteres. Portanto, se você utilizar um arquivo 
de texto já formatado, com parágrafos, pulos de linha e espaçamentos, 
e tentar carregá-lo no navegador sem o uso de tags, o arquivo será 
apresentado como um único parágrafo, sem formatação alguma.
A figura a seguir apresenta, na parte superior, um arquivo de texto 
comum, criado e formatado com o Microsoft Word e, na parte 
inferior, o carregamento desse arquivo pelo navegador Google Chrome. 
Acompanhe qual é o resultado, no navegador, de um texto formatado e 
sem tags HTML.
Figura 19 – Aparência do texto sem tags HTML quando carregado no navegador.
Fonte: Elaborada pelo autor (2013).
Assim, como qualquer linguagem de programação, o HTML possui um 
conjunto de palavras reservadas e você não pode criar as suas próprias 
tags, mas deverá saber como utilizar de forma estruturada e organizada 
essas tags. Atualmente o HTML possui 91 tags.
Saiba que a versão mais atual do HTML é conhecida como HTML5, no 
entanto ela ainda não é totalmente suportada pelos navegadores e não 
alcançou o status de recomendação do W3C, embora seja candidata a 
tal. Já o HTML 4.0 é a versão suportada pela maioria dos navegadores e 
reconhecida e recomendada pelo W3C. 
www.esab.edu.br 55
Para entender melhor como foi a evolução do HTML até chegar a 
sua versão mais recente e versátil, acompanhe o quadro a seguir, que 
apresenta um histórico da linguagem.
Ano Acontecimento
1996
O W3C define o HTML como linguagem-padrão para o desenvolvimento para web, 
acabando com as versões proprietárias.
1997
O W3C recomenda o HTML 3.2 oficialmente, incorporando à linguagem o uso de 
tabelas e applets (aplicativos executados pelo navegador). Atualmente, os applets estão 
em desuso e devem ser evitados. 
Ainda neste ano, o HTML 4.0 passa a ser oficialmente recomendado pelo W3C.
1998 Os estudos começam a caminhar no sentido da integração do HTML com o XML.
1999 São oficialmente lançadas as versões 1.0 e 1.1 do XHTML.
2000 A versão 1.0 do XHTML é recomendada pelo W3C.
2001 A versão 1.1 do XHTML é recomendada pelo W3C.
2008
É divulgada a primeira versão pública do HTML5. Trata-se de uma versão básica, mas 
que teve partes implementadas em alguns browsers, embora sua especificação não 
tenha alcançado o status final de recomendação.
2012 O HTML5 é candidato a recomendação pelo W3C.
Quadro 3 – Histórico de evolução do HTML.
Fonte: Adaptado de Silva (2008).
Podemos notar que o HTML exigiu reformulações na sua estrutura, 
decorrentes do surgimento de novas tecnologias e equipamentos. 
Conforme afirmou Lemay (2002, p. 49), “o futuro da internet precisa de 
uma linguagem de marcação que seja mais extensível e portátil do que o 
HTML. O caminho está levando ao uso do XML, que permite que tags 
personalizadas sejam processadas. E aqui entra o XHTML 1.0”.
Em 1996, na criação do HTML, seria muito difícil prever páginas web 
sendo acessadas em dispositivos móveis e outros tipos de equipamentos 
eletrônicos, mas, por outro lado, isso se tornou uma realidade rápido 
demais, tornando a estrutura do HTML, em alguns casos, ultrapassada, 
obsoleta.
www.esab.edu.br 56
Visando a uma maior integração do HTML com os novos recursos 
tecnológicos, a linguagem evoluiu para se integrar com as linguagens 
extensíveis (XML e XHTML), o que já ocorre na versão 4.0 do HTML. 
As estruturas de comandos da linguagem XHTML são as mesmas do 
HTML 4.0, por isso adotar essa versão é uma boa prática para quem está 
começando a criar páginas para web. 
Mas talvez você esteja pensando: por que se fez a integração entre ambas? 
E qual é a diferença entre elas?
Como vimos anteriormente, a linguagem XHMTL é uma reformulação 
da HTML. Ela combina as tags de marcação com sentido semântico dessa 
linguagem com as regras de XML. Desse modo, temos uma linguagem 
padronizada que pode ser interpretada por diversos dispositivos, em 
diferentes plataformas, melhorando a acessibilidade à web.
Silva (2008) destaca as diferenças entre as duas linguagens, sendo que 
para o XHTML:
• os documentos devem ser bem formatados;
• todas as tags devem ser escritas em letra minúscula;
• as tags devem estar convenientemente alinhadas;
• o uso de tags de fechamento é obrigatório;
• os elementos vazios devem ser fechados;
• há diferença na sintaxe dos atributos.
As diferenças se referem, em sua maioria, a uma padronização do código 
que facilita o reconhecimento dos comandos pelo navegador e também a 
programação e a manutenção das páginas. 
As páginas escritas em HTML são arquivos em formato texto, qualquer 
editor que suporte textos pode ser utilizado para a criação de páginas 
web, porém, como visto na unidade 6, há ferramentas que podem 
auxiliar o programador e o designer nesse processo. 
www.esab.edu.br57
Nesta disciplina, utilizaremos, para o desenvolvimento, uma ferramenta 
simples e leve, que não exige muitos recursos do computador: o 
NotePad++. E também usaremos a sintaxe do HTML 4.0 como 
linguagem de programação. 
Quanto à gravação de arquivos HTML, o nome do arquivo pode ser 
formado por qualquer sequência de caracteres, sendo uma boa prática 
adotar que a primeira página do site deva ser denominada index.html. 
A extensão desses arquivos deve ser .html. Os navegadores reconhecem 
também a extensão .htm, pois esse era o formato utilizado quando os 
sistemas operacionais reconheciam apenas três letras para extensão, mas 
optaremos aqui pela mais recente. 
Ao iniciar um projeto, procure dividir a estrutura do site em diretórios 
e pastas, isso lhe ajudará a organizar os arquivos utilizados. Veja um 
modelo na figura a seguir.
Figura 20 – Estrutura de diretórios para desenvolvimento de um site.
Fonte: Elaborada pelo autor (2013).
Perceba que foram usados nomes sugestivos para cada diretório, 
separando as páginas criadas em HTML das imagens e das rotinas de 
programação: na pasta documentos são armazenadas as páginas HTML e 
as folhas de estilo (em CSS); na pasta imagens ficam as figuras, as imagens 
e os ícones utilizados no site; e, por fim, na pasta códigos são armazenados 
os scripts escritos em JavaScript, que são as rotinas de programação.
Agora que você foi apresentado à linguagem HTML vendo um pouco 
de seu histórico e sua evolução e aprendeu como o arquivo HTML 
é carregado pelo navegador, o próximo passo será conhecer os seus 
comandos e a sua sintaxe, assunto da próxima unidade.
www.esab.edu.br 58
Tarefa dissertativa
Caro estudante, convidamos você a acessar o 
Ambiente Virtual de Aprendizagem e realizar a 
tarefa dissertativa.
www.esab.edu.br 59
9 Estrutura de um documento HTML
Objetivo
Apresentar a estrutura de um documento HTML, os conceitos de tipo 
de documento, cabeçalho e corpo do documento.
Na unidade anterior, você acompanhou como e por que a linguagem 
HTML nasceu e evoluiu. Sabemos que a HTML é uma linguagem para 
desenvolvimento de sites e que, para podermos ver um site, o navegador lê 
e interpreta o código escrito pelo desenvolvedor. Nesta unidade, você verá 
como criar esse código conhecendo os comandos e a sintaxe da linguagem 
HTML que permitirão desenvolver e visualizar as páginas web.
A linguagem HTML, até a versão 4.0, é considerada uma linguagem 
de criação de documentos estáticos, já que não possui recursos de ações 
lógicas na sua estrutura, sendo ideal para a publicação de documentos na 
web. Sabendo disso, é importante destacar que os documentos estáticos, 
depois de criados, não possuem funcionalidades que permitam mudar 
seus conteúdos a partir de interações com os usuários.
Para começar a escrever uma página HTML, você necessita apenas de um 
editor de texto e um navegador de internet. Essa página é um documento 
simples, baseado em marcas – as tags. 
As tags são palavras reservadas da linguagem que, ao serem carregadas 
pelo navegador, definem a forma de apresentação a ser realizada por 
ele. Elas são identificadas pelo navegador de forma rápida e eficiente, 
pois são compostas pelo sinal menor que (<) e maior que (>), entre os 
quais fica o nome de cada tag. Normalmente, são usadas em dupla: uma 
para marcar o início da estrutura e outra para fechá-la, sendo que a tag 
de fechamento é precedida por uma barra (/). Entre as tags, fica o que 
queremos apresentar na página, que é o que chamamos de valor. Essa é a 
estrutura mais básica de tag dupla. 
www.esab.edu.br 60
Para compreender melhor, veja a figura a seguir. 
<tag>
Tag de início
Valor
Tag de
fechamento
</tag>
Figura 21 – Sintaxe básica de tag dupla em HTML 4.0.
Fonte: Elaborada pelo autor (2013).
Veja que entre os sinais < e >, temos o nome da tag, e entre as tags de 
início e fechamento, temos o conteúdo. No entanto, dentro das tags 
podemos ter também o que chamamos de atributos, elementos que 
ficam logo após o nome da tag e definem como o objeto se comportará 
ao ser interpretado pelo navegador. Assim, dizemos que os atributos 
são elementos que definem a estrutura de uma classe – um conjunto 
de objetos com características e propriedades parecidas. E essa definição 
acontece por meio do valor do atributo. 
Mas como isso fica no código? A única diferença é que acrescentamos, 
após o nome da tag, o nome do atributo seguido do sinal de igualdade 
(=) e, então, o valor do atributo entre aspas duplas. Temos, portanto, a 
sintaxe de uma tag dupla com atributos, representada na figura a seguir.
<tag atributo=”valor do atributo”>
Tag de início
Valor
Tag de
fechamento
</tag>
Figura 22 – Sintaxe de tag dupla com atributo em HTML 4.0.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 61
Vamos ver um exemplo? Suponha que precisemos criar um formulário 
de contato, aquele do tipo “Fale conosco” que encontramos em sites de 
empresas e nos quais precisamos colocar nossos dados para obtermos 
uma resposta. Nesse caso, temos o campo Sobrenome. No código, 
teremos o seguinte:
01 <form name=“formulario1”>
02 <input type=“text” name=“sobrenome” nome_
do_atributo=“valor do atributo”>
03 </form>
Note que para a tag <form> temos o atributo name, que tem valor 
foramulario1, indicando a classe do objeto (formulário). Na linha 
de código seguinte, temos a tag input, indicando que ali haverá uma 
entrada de dados, e o atributo type com valor text, pois o tipo de dado 
a ser colocado no campo será do tipo texto; o atributo name com valor 
sobrenome, indicando que o nome do campo é sobrenome; e temos 
também um novo atributo, representando a sintaxe para inserção de 
atributos nas tags.
É importante notar que o nome da tag utilizado no fechamento é o 
mesmo usado na inicialização. Muitas vezes, uma tag não fechada 
corretamente compromete toda a visualização, pois o navegador acaba 
tendo dificuldades para interpretar o código. 
Mas também existem algumas tags que não possuem a tag de 
fechamento, são as chamadas tags órfãs. Estas devem ser escritas como se 
fossem uma tag de início, mas com a barra de fechamento ao final, como 
podemos ver na figura a seguir.
<nome da tag Atributos />
Figura 23 – Sintaxe da tag órfã.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 62
As tags, sejam duplas ou simples, podem ser escritas com letras 
maiúsculas ou minúsculas, ou seja, elas não são case sensitive, termo do 
inglês que significa sensível ao tamanho, ou sensível à caixa – caixa-alta 
é a letra maiúscula e caixa-baixa, minúscula. Porém, como boa prática 
deve-se adotar a escrita de comandos em minúsculas, exceto nos casos em 
que a linguagem de programação exija os comandos em maiúsculas.
Os documentos escritos em HTML possuem uma estrutura básica 
de formatação formada pelas tags <html>, <head>, <body> e <title>. 
Acompanhe no quadro a seguir qual é a sintaxe e para que serve cada 
uma dessas tags.
Tag Sintaxe Para que serve
HTML <html> </html>
Este par de tags é utilizado para marcar o início e o final do 
documento HTML inteiro. É a tag principal de definição da 
estrutura do documento, pois informa ao navegador que o 
documento está escrito em HTML. Por isso, é obrigatória.
HEAD <head> </head>
Este par de tags define a área de cabeçalho do documento. É 
opcional e suas informações não são visualizadas no navegador, 
mas seu uso é altamente recomendado por questões de 
organização e para facilicar que a página seja encontrada nos 
casos de busca, pois essas tags são utilizadas para definir o título 
da página (apresentado na barra de títulos do navegador) e os 
metadados (utilizados pelos mecanismos de busca na internet), 
como estudaremos mais à frente.
BODY <body> </body>
Este par de tags define a área visível do documento, ou seja, 
isso é o queaparecerá “desenhado” no navegador quando 
acessarmos por meio da URL.
TITLE <title> </title>
Este par de tags define o valor do título da página e, por isso, 
deve ser informado dentro do par de tags <head></head>.
Quadro 4 – Lista de tags básicas de estrutura do HTML.
Fonte: Elaborado pelo autor (2013).
Para facilitar a compreensão de como escrever essa estrutura básica 
contida em todos os sites que utilizam HTML, vamos ver, a seguir, como 
fica o código-fonte que cria um arquivo HTML com essa estrutura.
www.esab.edu.br 63
Algoritmo 1 – Estrutura do documento em HTML
01 <html>
02 <head>
03 <title> Aqui é o título da página </title> int 
main(void)
04 <meta http-equiv=Content-Type content=”text/html; 
charset=utf-8”>
05 </head>
06 <body>
07 Aqui é o corpo da página
08 </body>
09 </html>
Fonte: Elaborado pelo autor (2013).
Note que a estrutura do documento começa na tag <html>, na linha 1, 
e se encerra na tag </html>, na linha 9. Essas marcas definem o início e 
final de todo o documento HTML que será carregado pelo navegador. 
O cabeçalho, que começa na linha 2 com a tag <head>, é formado por 
um título (entre as tags <title> e </title>) e por metadados (tag simples 
<meta>), terminando na linha 5 com a tag </head>. 
Agora, olhe novamente esse algoritmo e repare na formatação do código. 
Veja que as tags <head> estão mais à direita que as <html>, e as <body> 
estão ainda mais à direita. Isso é o que chamamos de indentação. 
Podemos dizer que as tags estão encaixadas de um modo que as une. 
Começamos pela tag <html> porque ela é a essencial, uma vez que define 
o tipo de linguagem utilizada no documento que estamos criando e 
em todas as outras páginas do site, e por isso também é a última a ser 
fechada. Em seguida, temos já um pouco mais à direita a tag <head>, que 
forma o cabeçalho, também a ser usado nas outras páginas. E, por fim, 
temos, endentada mais à direita da <head>, a tag <body>, que delimita 
o início e o fim do corpo da página e conterá informações específicas 
desta. Trata-se de um modo de organização que envolve uma espécie de 
hierarquia e a lógica, pois uma tag poderá ter tags-filhas, indicando qual 
parte do site fica dentro de outra – como no caso de uma tabela ficar 
dentro de outra, por exemplo.
www.esab.edu.br 64
Se você está se perguntando por que escrever um código com indentação, 
vamos imaginar a seguinte situação: você está desenvolvendo um portal 
e seu código já possui muitas linhas, mas agora será necessário fazer 
uma correção de um atributo em uma tag que está dentro de outra tag 
no corpo da página. Você pode utilizar a funcionalidade de pesquisa 
da ferramenta de desenvolvimento, no entanto, só terá certeza de qual 
é a tag cujo atributo necessita de correção se souber qual é a relação 
entre ela e as outras tags. E aí a indentação facilita muito, pois você verá 
facilmente qual parte está dentro de outra.
A indentação é uma boa prática e muito importante de ser seguida, 
pois não só deixa o código bonito e bem apresentável, mostrando a 
responsabilidade que você tem com seu trabalho, mas também torna 
muito mais simples e rápido encontrar o que você precisa, além de 
facilitar o acesso quando é necessário que outro programador ou designer 
trabalhe no seu código.
Outra boa prática é sempre utilizar as tags <head></head>, que permitem 
a incorporação dos metadados por meio da tag simples <meta />, também 
conhecida como meta tag. Os metadados utilizados informam ao navegador 
que será usada a codificação de caracteres UTF-8, a qual permitirá que 
o navegador apresente palavras com acentos. E por se tratar de um 
item interno da tag <head>, o comando meta http-equiv=Content-Type 
content=”text/html;charset=utf-8” não será apresentado no navegador, sendo 
um elemento invisível. Já o corpo da página possui a mensagem Aqui é o 
Corpo da Página, informada entre as tags <body> e </body>, nas linhas 6 e 
8.
A figura a seguir apresenta o resultado do carregamento desses comandos 
no navegador. Por enquanto, estamos apenas na estrutura básica, 
essencial para qualquer site. Em breve, você verá como formatar o texto e 
deixar a página mais rica em conteúdo visual.
www.esab.edu.br 65
Figura 24 – Página com a estrutura básica carregada no navegador Google Chrome.
Fonte: Elaborada pelo autor (2013).
As tags responsáveis por armazenar os metadados são também chamadas 
de meta tags <meta />, como a que foi utilizada na linha 4 do algoritmo 
anterior. Ela é uma tag simples que tem como finalidade passar 
informações do site aos serviços de busca da internet e definir o idioma 
que será utilizado na página. Por isso, deve ser definida na primeira 
página do site, que é executada antes das outras páginas. Assim, não é 
necessário definir uma meta tag em cada página.
Como você pôde ver na linha 4 do Algoritmo 1, uma meta tag é muito 
importante para que a codificação de caracteres do documento HTML 
seja claramente indicada. Desse modo, os dispositivos do cliente podem 
facilmente mapear e apresentar os caracteres corretamente em qualquer 
idioma. A meta tag pode ser utilizada para definição do protocolo HTTP, 
atributo http-equiv, ou tipos de controles para a página, atributo name. 
O atributo http-equiv está relacionado às chamadas do navegador 
que utilizam o protocolo HTTP, isto é, está relacionado ao próprio 
carregamento da página pelo browser. Ele permite definir a data de 
expiração da página, indicar em qual idioma a página foi desenvolvida 
ou informar quais os tipos de caracteres que poderão ser carregados na 
página. Os valores para este atributo são: http-equiv, content e charset. 
O segundo tipo de atributo, name, está relacionado com outros tipos de 
controle que não os das chamadas HTTP. Ele permite definir dados do 
site que são invisíveis ao usuário – como autor do site, título da página, 
descrição, entre outros –, mas importantes para os mecanismos de busca 
da internet, que com essas informações podem classificar melhor as 
páginas, tornando o site mais fácil de ser encontrado.
www.esab.edu.br 66
O quadro a seguir apresenta a sintaxe e a estrutura dessas meta tags, com 
os valores que podem ser utilizados:
Sintaxe Valores utilizáveis
<meta http-equiv = “valor” 
content =“descrição”/>
expires: indica a data e a hora em que a página expira.
content-type: informa ao navegador qual o conjunto de caracteres 
que será usado para a apresentação das mensagens no corpo da 
página.
content: indicação do formato da linguagem a ser utilizada, 
que pode ser text/html (html), application/xml (apenas xml) ou 
application/xhtml+xml (xhtml com xml). No content deve ser 
informado também o código de caracteres, chamado de charset.
charset: indica a codificação do conteúdo da página. Os tipos mais 
comuns de codificação utilizados são iso-8859-1 e UTF-8.
refresh: avisa ao navegador que a página deve ser atualizada 
automaticamente após determinado tempo.
content-language: indica o idioma utilizado no conteúdo do corpo 
da página.
window-target: indica a janela com o nome da página atual.
<meta name = “valor” 
content = “descrição” />
title: indica, para os sites de pesquisa, o título da página.
description: aponta para os sites de pesquisa o conteúdo do site em 
uma breve descrição.
keywords: indica aos buscadores as palavras-chaves relacionadas ao 
conteúdo do site.
author: aponta quem desenvolveu o site.
owner: informa o responsável pelo site.
language: informa o idioma utilizado no site.
robots: define se a página estará ou não visível aos sites de busca.
rating: define o conteúdo do site com relação à sua improbidade, 
ou seja, para classificá-lo por censura, como nos casos em que há 
conteúdos impróprios para menores de 18 anos.
Quadro 5 – Sintaxe da meta tag.
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 67
Estudocomplementar
Para saber mais sobre os conjuntos de caracteres e 
seu uso no desenvolvimento, acesse dois textos da 
W3C:
• Introdução a conjuntos de caracteres e 
codificações
• Escolha e uso de codificação de caracteres
Você pode verificar que a sintaxe da meta tag é bem variada, possuindo 
diversos atributos, mas não se preocupe em decorá-los, eles se tornarão 
comuns e intuitivos à medida que você começar a utilizá-los. Muitos dos 
atributos que podem ser usados na sintaxe da meta tag são opcionais e 
não representam uma restrição para a criação das páginas HTML.
Quanto mais você praticar, mais intuitivo será escrever os códigos, achar 
soluções para o desenvolvimento e fazer sites mais criativos e otimizados. 
Portanto, vamos começar, na próxima unidade, a pôr em prática tudo o 
que você aprendeu até agora!
Atividade
Chegou a hora de você testar seus conhecimentos 
em relação às unidades 1 a 9. Para isso, dirija-se 
ao Ambiente Virtual de Aprendizagem (AVA) e 
responda às questões. Além de revisar o conteúdo, 
você estará se preparando para a prova. Bom 
trabalho!
www.esab.edu.br 68
10 Construindo uma página HTML na prática
Objetivo
Possibilitar o desenvolvimento e a visualização de uma página HTML 
utilizando os comandos básicos de marcação – tags.
Na unidade anterior, você estudou as tags básicas do HTML: <html>, 
<head>, <title> e <body>, e as meta tags , responsáveis por definir a 
estrutura básica da página. Mas existem muitas outras tags que podem 
ser utilizadas para a construção da página, e é isso que vamos ver agora, 
colocando em prática tudo o que estamos aprendendo.
Para criar uma página HTML, execute o aplicativo NotePad++. 
Neste momento, não se preocupe com a finalidade de cada comando, 
apenas preste atenção na estrutura, pois os comandos serão explicados 
detalhadamente em outro momento. Com o Notepad++ aberto, escreva 
o seguinte algoritmo, o qual chamaremos de olamundo.html:
Algoritmo 2 – olamundo.html
01 <html>
02 <head>
03 <meta http-equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>Básica HTML</title>
05 </head>
06 <body>
07 <p> Olá mundo </p>
08 </body>
09 </html>
Fonte: Elaborado pelo autor (2013).
Agora, salve o arquivo com o nome olamundo.html. Para isso, acesse 
a opção de menu Arquivo e clique na opção Salvar. Uma nova janela 
será aberta. Escolha a pasta em que você quer salvar o arquivo. Escreva 
o nome do arquivo no campo Nome, localizado na parte inferior central 
www.esab.edu.br 69
da janela, e no campo Tipo, logo a seguir, escolha a opção HyperText 
Markup Language file. Em seguida, clique em Salvar. 
Note que as tags mudaram de cor para azul e seus atributos, para a cor 
vermelha, enquanto os valores permanecem na cor preta. Essa é mais 
uma técnica para manter a visualização do código limpa e organizada e 
facilitar a localização.
Agora, precisamos ver como nossa primeira página vai ficar no 
navegador, certo? Para visualizar como as páginas serão apresentadas, 
selecione a opção de menu Executar. Serão apresentadas opções para 
mostrar a página nos principais navegadores. A figura a seguir mostra 
essas opções:
 
Figura 25 – Opções de execução em navegador.
Fonte: <http://notepad-plus-plus.org>.
Clique na opção do navegador em que você deseja visualizar a página. O 
resultado será algo semelhante à figura a seguir:
Figura 26 – Página olamundo.html visualizada no navegador Google Chrome.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 70
Caso a acentuação não seja apresentada corretamente na sua página, 
retire as instruções da linha 3, do código, dependendo das configurações 
do seu sistema operacional, estas instruções são desnecessárias. Mas, se 
mesmo com isso, os caracteres especiais não foram mostrados, a solução 
é utilizar o padrão de “escape” de caracteres especiais, as chamadas 
“entidades” do HTML. Por exemplo, o símbolo “É” é representado por 
“&Eacute”.
Saiba mais
A lista dos caracteres de escape e suas 
representações podem ser conhecidas clicando aqui.
É importante lembrar que a visualização de páginas mais complexas, com 
elementos de estilo, dificilmente será igual em diferentes navegadores. 
Por isso, quando começamos o projeto web é interessante definir para 
qual navegador a página será desenvolvida, isto é, com qual navegador 
a página deverá ter total compatibilidade. No entanto, durante o 
desenvolvimento, é importante testar o carregamento da página em 
outros navegadores e tentar deixar a página bem apresentável em todos, 
pois sempre haverá acesso por diferentes browsers.
www.esab.edu.br 71
Para sua reflexão
As páginas desenvolvidas em HTML podem ser 
apresentadas de forma diferente nos navegadores 
de internet. A maioria dos dispositivos móveis do 
tipo smartphone possui navegador de internet.
Como será que essas páginas serão apresentadas 
nesses novos equipamentos? Mesmo aquelas 
páginas que eram apresentadas perfeitamente 
no computador, como serão visualizadas nesses 
dispositivos. Não é hora dos projetos web se 
preocuparem com essas novas plataformas? 
A resposta a essa reflexão forma parte de sua 
aprendizagem e é individual, não precisando ser 
comunicada ou enviada aos tutores.
Por exemplo, a Universidade Federal de Santa Catarina (UFSC) constatou 
recentemente que o acesso às suas páginas é feito principalmente por meio 
do navegador Firefox, por isso a reformulação de seu portal está sendo 
feita pensando nisso, a fim de melhorar a acessibilidade e a experiência 
dos usuários. Apesar disso, nada impede o acesso e a navegação por meio 
do Internet Explorer, do Chrome e do Safari, bem como por dispositivos 
que usam outros sistemas operacionais.
Agora, vamos rever a estrutura que utilizamos para o código da nossa 
página recém-criada, aliando a teoria ao que fizemos na prática. A seguir, 
apresentamos o que faz cada linha do algoritmo olamundo.html.
www.esab.edu.br 72
01 <html> Tag de início do documento HTML.
02 <head> Tag de início do cabeçalho.
03 <meta http-equiv=”Content-
Type” content=”text/html” 
charset=”UTF-8”>
Definição da Meta Tag, formatando o 
documento em HTML e acentuação 
usando UTF-8.
04 <title>Básica HTML</title> Tag que cria o título da página. O valor 
do título deve ficar entre as tags “title” 
de início e fechamento, que devem ser 
escritas dentro das tags de marcação do 
cabeçalho (head).
05 </head> Tag de fechamento do cabeçalho.
06 <body> Tag que marca o início do corpo da 
página.
07 <p> Olá mundo </p> A tag “p” cria um parágrafo para o 
conteúdo “Olá mundo”. Isso permite que 
os conteúdos sejam apresentados em 
várias linhas.
08 </body> Tag que define o final do corpo da página.
09 <html> Tag de fechamento do documento HTML.
Quadro 6 – Algoritmo olamundo.html
Fonte: Elaborado pelo autor (2013).
Você deve ter reparado que utilizamos a tag <p>, a qual ainda não 
tínhamos visto. Essa é uma tag dupla responsável pela criação de 
parágrafos, que são essenciais para a apresentação dos textos nas 
páginas HTML. No algoritmo a seguir, são definidos dois parágrafos 
com conteúdos para o corpo da página. Vamos aproveitar para treinar 
a codificação novamente e aprender essa nova tag. Do mesmo modo 
que você fez anteriormente, crie um novo documento no NotePad++ 
e escreva o Algoritmo 3, que chamaremos de exemploparagrafo.html. 
Portanto, salve o arquivo com o nome exemploparagrafo.html e, em 
seguida, execute-o no navegador de sua preferência.
www.esab.edu.br 73
Algoritmo 3 – exemploparagrafo.html
01 <html>
02 <head >
03 <meta http - equiv =”Content - Type” content =”text/
html” charset=”UTF-8”>
04 <title >Quebra Linha Parágrafo </title >
05 </head>
06 <body>
07 <p> Texto longo para demonstrar como é a quebra
08 de linha automática de um parágrafo nas páginas HTML.
09 Isto é garantidopelo uso da tag “p”
10 </p>
11 <p>
12 Aqui é forçada uma quebra <br> de linha usando a tag 
“br”
13 </p>
14 </body>
15 </html >
Fonte: Elaborado pelo autor (2013).
Veja que nesse algoritmo temos dois parágrafos de texto marcados com a 
dupla de tags <p></p>. Além disso, foi acrescentada a tag <br> em meio 
ao segundo parágrafo, forçando uma quebra de linha, ou seja, sempre 
que o navegador encontrar essa tag, ele colocará a sequência do texto 
na próxima linha. Como se trata de uma tag órfã, a sua sintaxe é apenas 
<br>.
No caso da tag <p>, mesmo que o texto seja escrito em várias linhas 
ou em uma linha muito longa, ele será apresentado de acordo com o 
tamanho da janela do navegador, que define quantos caracteres cabem 
em cada linha, pois seu conteúdo é gerenciado pelas marcas <p> e </
p>. Isso não acontece quando forçamos a quebra de linha utilizando a 
tag <br>, por isso é necessário ter cuidado ao usá-la para que o texto não 
fique mal formatado.
Faça um teste: execute o algoritmo exemploparagrafo.html e redimensione 
a largura do navegador. Veja que as linhas do primeiro parágrafo mudarão 
de acordo com a nova dimensão, sendo quebradas em lugares diferentes 
conforme o tamanho da janela. Já o parágrafo com a tag <br> sempre terá 
essa quebra de linha, como é possível ver na figura a seguir.
www.esab.edu.br 74
Dimensão A
Dimensão B
Figura 27 – Redimensionamento das janelas e uso de parágrafos.
Fonte: Elaborada pelo autor (2013).
Perceba que a Figura 27 apresenta a janela em dimensões distintas, e é 
possível visualizar que o parágrafo <p> é quebrado em lugares diferentes, 
mas a quebra <br> acontece sempre na mesma posição.
Assim como em um livro, uma página HTML pode conter uma 
hierarquia de títulos para estabelecer uma divisão de seu conteúdo. Para 
conseguir realizar essa tarefa, utilizamos as tags de cabeçalho h1, h2, 
h3, h4, h5 e h6. Vale destacar que essas tags podem ser utilizadas em 
qualquer parte do documento para dar destaque ao texto. O algoritmo 
a seguir demonstra o uso desses títulos. Crie um novo arquivo no 
aplicativo NotePad++ e escreva o código. Em seguida, salve-o e execute-o 
no navegador de sua preferência para ver a diferença de cada título.
www.esab.edu.br 75
Algoritmo 4 – exemplotitulos.html
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text / 
html” charset =”UTF-8”>
04 <title >Exemplo de cabeçalhos </title>
05 </head>
06 <body >
07 <h1>Titulo 1</h1>
08 <h2>Titulo 2</h2>
09 <h3>Titulo 3</h3>
10 <h4>Titulo 4</h4>
11 <h5>Titulo 5</h5>
12 <h6>Titulo 6</h6>
13 </body>
14 </html>
Fonte: Elaborado pelo autor (2013).
Veja que cada título é marcado por uma tag <h número> e </h número>, 
sendo que esse número varia de 1 a 6, e quanto maior o número, menor 
será o tamanho do texto apresentado.
Logo no início dos estudos, vimos que a web é baseada na tecnologia de 
hipertexto, que, segundo Lemay (2002), é um texto em formato digital 
que se utiliza de recursos de hipermídia (blocos de textos, imagens, 
ícones e sons). O modelo hipertextual caracteriza-se por permitir a leitura 
e a interação não linear, e para isso os links são essenciais. 
Portanto, vamos dar sequência aos estudos vendo como fazer links entre 
páginas. Crie um novo documento no NotePad++ e escreva o seguinte 
algoritmo:
Algoritmo 5 – Navegando.html
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =” text 
/ html”charset =”UTF-8”>
04 <title>Visitando Outras Páginas</title>
05 </head >
06 <body >
07 <p><a href =”alomundo.html”>Primeiro exemplo </a></p>
www.esab.edu.br 76
08 <p><a href =”exemploparagrafo.html”>Segundo exemplo</
a></p>
09 <p><a href =”exemplotitulos.html”>Terceiro exemplo </
a></p>
10 <p><a href =”http://www.esab.edu.br”>Página da ESAB 
</a></p>
11 </body>
12 </html>
Fonte: Elaborado pelo autor (2013).
Salve o arquivo com o nome navegando.html e execute-o em um 
navegador. Veja que no arquivo foram criados quatro links para as páginas 
criadas por você anteriormente e para uma página externa, na internet. A 
diferença entre o redirecionamento para uma página externa e a página 
interna é a utilização do “http://” antes do endereço da página externa. 
Com a finalidade de colocar cada atalho em uma linha diferente, 
utilizamos a tag <p>. Dentro de cada parágrafo, temos uma âncora com 
o uso da tag <a>. Uma âncora é formada pela tag <a>; pelo atributo 
“href”; pelo endereço da página que será visitada, que é o valor do 
atributo; e pelo texto correspondente ao link que será apresentado ao 
usuário. Assim, a sintaxe para criação da âncora é:
01 <a href=“endereço”> texto </a>
Na linha 7 do código, foi utilizada essa sintaxe para definir que o texto 
“Primeiro exemplo”, ao ser clicado, realizará o direcionamento para a 
página “olamundo.html”. Acompanhe na figura a seguir como foi o uso 
dessa sintaxe:
<a href= “alomundo.html”> Primeiro exemplo
Página que 
será visitada
Tag de início
da âncora
Tag de fechamento
da âncora
Texto apresentado
ao usuário
</a>
Figura 28 – Sintaxe para criação de links.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 77
É importante notarmos que as tags que aprendemos a usar até agora 
são bastante amigáveis, pois são baseadas nas palavras (em inglês) que 
definem a sua função. Por exemplo, a tag <head>, que define o cabeçalho, 
é relativa à palavra header, que é cabeçalho em inglês. A tag <p>, que tem 
como função definir parágrafos, corresponde à primeira letra da palavra 
paragraph, que em inglês significa parágrafo. Do mesmo modo, a tag <br> 
refere-se à expressão break line, que em inglês significa quebra de linha, 
exatamente a função da tag. Fazendo essas associações, ficará muito mais 
fácil para você escrever códigos, pois o uso das tags será bastante intuitivo.
Bem, nesta unidade você teve o primeiro contato com os comandos 
básicos do HTML responsáveis pela definição dos conteúdos que serão 
apresentados nas páginas e pelo direcionamento para outras páginas. 
Mas isso não é tudo! Nas próximas unidades, você terá contato com as 
técnicas de apresentação com uso de CSS para que as páginas fiquem 
visualmente mais interessantes.
Dica
Todas as linguagens recomendadas pela W3C 
possuem a sua especificação, que é a sua descrição 
detalhada, e podem ser acessadas pelo site dessa 
organização. Para tirar dúvidas sobre a HTML, seja 
nos seus estudos ou durante a vida profissional, 
acesse a especificação da linguagem no site da 
W3C clicando aqui.
www.esab.edu.br 78
11 Introdução à Cascading Style Sheets
Objetivo
Apresentar o conceito de estilização de páginas, as regras de uso e a 
sintaxe dos comandos em CSS.
Até esta unidade, utilizamos os elementos HTML sem modificar o 
estilo visual do conteúdo. Nas unidades anteriores, os elementos foram 
utilizados de forma a garantir a exibição da página com a formatação-
padrão do navegador, a qual pode variar. Os navegadores seguem as 
sugestões do W3C, porém, isso não impede erros de interpretação da 
especificação em HTML, já que o W3C pode sugerir, mas não obrigar, 
que todos os navegadores tenham o mesmo comportamento. Portanto, 
como já dito, é importante formatar cada elemento da página HTML 
para que o efeito visual seja o mesmo em diferentes navegadores.
A linguagem HTML disponibiliza algumas tags para a formatação visual, 
como a tag <font>, que permite especificar as propriedades das fontes 
(cor, tamanho, tipo de fonte, alinhamento), porém de forma muito 
limitada, do mesmo modo como ocorre com os comandos para definição 
de layout da página. Nesta disciplina serão estudadas as técnicas para 
definição do layout, por enquanto considere layout como sendo a forma 
de apresentação dos elementos no documento HTML.
Por isso, e para termos um código mais limpo e bem organizado, a 
alteração do visualdos elementos do HTML, seguindo as recomendações 
do W3C, deve ser realizada com o uso de CSS, folhas de estilo em cascata.
Silva (2008, p. 49) destaca que a
[...] folha de estilo em cascata é um mecanismo simples para adicionar estilos (por 
exemplo: fontes, cores, espaçamentos) aos documentos web. [...] A HTML foi criada 
para ser uma linguagem exclusivamente de marcação e estruturação de conteúdo. 
[...] não cabe à HTML fornecer informação ao agente do usuário (navegador) sobre a 
apresentação dos elementos.
www.esab.edu.br 79
Portanto, a camada de apresentação da página web deve ser desenvolvida 
em CSS, e não em HTML, como ocorria há alguns anos. Conforme 
vimos na unidade 5, sobre a padronização de projetos web, cabem ao 
CSS todas as funções de apresentação de um documento.
Saiba que podemos aplicar o CSS de três modos em um documento 
HTML:
1. inline: definindo as propriedades CSS diretamente no elemento 
HTML, ou seja, dentro das tags, por meio do atributo style. Por 
exemplo: <p style=“color: blue”> valor </p>. Nesse caso, o texto do 
parágrafo fica na cor azul;
2. interno: definindo as regras CSS dentro da tag <head> com a tag 
<style>. Nesse caso, ao contrário do anterior, você declara os estilos 
uma vez, no cabeçalho da página, e eles serão usados em toda essa 
página;
3. externo: definindo as regras CSS em arquivo à parte do documento 
HTML. Esse é o modo mais indicado e que nos auxilia a tirar o 
melhor proveito do CSS. Para criar um arquivo CSS separado, 
basta criar um novo arquivo no seu editor e salvá-lo com extensão 
.css. Depois, na página com o código HTML, você deverá escrever 
o comando que chamará o arquivo CSS, aplicando os estilos para 
todas as páginas. Para isso, basta você acrescentar dentro da tag 
<head> a seguinte tag de comando: <link rel=“stylesheet” type=“text/
css” href=“nomedoarquivo.css”/>, em que o valor do atributo “href” 
deve ser o nome do arquivo CSS que você criou.
Veremos mais detalhadamente cada um desses métodos mais à frente, na 
unidade 12. Por enquanto, vamos nos ater a como escrever o código em 
CSS. O comando em CSS possui a sintaxe baseada na regra CSS, que é 
o menor código escrito em CSS capaz de produzir um estilo na página 
HTML. Para Silva (2008), “Regra CSS é a unidade básica de uma folha 
de estilo. Entenda-se como a unidade básica a menor porção de código 
capaz de produzir um efeito de estilização”.
www.esab.edu.br 80
A figura a seguir apresenta a sintaxe para escrever uma regra em CSS. 
Acompanhe.
Seletor
Propriedade Valor
Corpo Bloco de declaração
p {
font-size : 40px ;
}
Figura 29 – Sintaxe da regra CSS.
Fonte: Elaborada pelo autor (2013).
Escrevemos a regra formando o que chamamos de corpo, que se refere 
a todo o código CSS, contendo o(s) seletor(es) e o bloco de declarações. 
O seletor é o alvo da regra CSS – é a tag do elemento de marcação ou 
uma entidade capaz de definir com precisão em qual lugar do código será 
aplicada a regra. Em outras palavras, o seletor é um tipo de expressão 
correspondente que declara em qual elemento de marcação o estilo 
será aplicado. No nosso exemplo da Figura 29, o seletor p seleciona os 
parágrafos, ou seja, é neles que o estilo definido será aplicado. Como 
visto na definição da sintaxe da regra CSS, esta é associada a um 
elemento HTML, que é estilizado de acordo com as suas propriedades. 
Neste caso, a regra é associada ao elemento <p>, não importando quantas 
vezes e onde ele foi utilizado no documento, todos serão estilizados.
No bloco de declarações, que deve ser aberto e fechado com chaves ({ }), 
temos dois elementos: a propriedade e o valor da propriedade. A 
propriedade define qual será a característica do elemento que é alvo do 
seletor. Voltando ao exemplo, temos a propriedade font-size, indicando 
que o estilo aplicado se refere ao tamando da fonte dos parágrafos, que é 
o elemento-alvo do seletor p.
www.esab.edu.br 81
Por fim, temos o valor da propriedade, que define a quantidade ou 
qualidade do estilo. Em nosso exemplo, o valor é 40px, indicando que 
esse será o tamanho da fonte dos parágrafos.
Veja que a sintaxe da regra exige que a propriedade seja seguida de dois-
pontos (:) para só então termos o valor, que é fechado com ponto e 
vírgula (;). Uma regra CSS pode conter mais de uma declaração de estilo, 
separadas pelo símbolo ponto e vírgula (;). No exemplo a seguir, a regra 
CSS tem por finalidade definir, respectivamente, a cor preta para o texto, 
a cor de fundo verde, o negrito para a fonte e o alinhamento à direita 
para um parágrafo (p) em um documento HTML. Veja como fica a 
sintaxe do seguinte comando:
Algoritmo 6 - Definição do estilo da fonte 
01 p { 
02 color: red; 
03 background-color: #228B22; 
04 font-style: bold; 
05 text-align: right
06 }
Fonte: Elaborado pela autor (2013).
Procure editar a regra CSS em arquivos separados, com a extensão .css, 
isso permitirá que a regra seja utilizada em mais de um documento 
HTML, poupando trabalho. Essa prática. basicamente consiste em 
escrever a regra CSS em um arquivo texto, dar um nome para a regra, e 
salvar o arquivo com a extensão “.css”.
A regra CSS pode ser escrita com cada propriedade e seu valor uma ao 
lado da outra, porém o mais recomendado é escrevê-la colocando cada 
propriedade e seu valor em linhas separadas. O resultado será o mesmo, a 
vantagem é a legibilidade do código.
As propriedades são escritas em inglês e definem a característica que 
será estilizada, por isso, assim como ocorre com as tags HTML, com o 
tempo o uso das propriedades torna-se intuitivo. Isso pode ser verificado 
na linha 1 do código anterior, que define a cor do texto por meio da 
propriedade color (cor em inglês); na linha 2, que define a cor de fundo 
www.esab.edu.br 82
pela propriedade background-color (cor de fundo, em inglês); na linha 
3, com a propriedade font-style (estilo da fonte); e na linha 4, com a 
propriedade text-align (alinhamento do texto).
Do mesmo modo que no HTML, a sintaxe utilizada na Regra CSS não é 
sensível ao tamanho da caixa de fonte, por essa razão, pode ser escrita em 
maiúsculas ou minúsculas, mas procure escrevê-las em minúsculas.
Para facilitar a compreensão do que a regra CSS deve fazer, você pode 
adotar a boa prática de fazer comentários. Essa é uma atitute muito 
interessante principalmente quando estão envolvidas regras mais 
complexas, assim, quando outro desenvolvedor precisar ver ou trabalhar 
com seu código, ou se você necessitar rever um código mais antigo, será 
mais simples entendê-lo. 
Para inserir um comentário, você pode utilizar os símbolos /* e */ para 
marcar, respectivamente, o início e final do comentário. A figura a seguir 
mostra como inserir comentários na regra de definição do parágrafo, 
apresentada anteriormente.
Figura 30 – Uso de comentários em CSS.
Fonte: Elaborada pelo autor (2013).
Para um conjunto de regras de CSS, convencionou-se chamar de folha de 
estilo. Já que se trata de uma técnica que possibilita a definição de vários 
estilos para um documento HTML, em cascata, um após o outro. Como 
vimos anteriormente, podemos definir as regras CSS formando uma folha 
de estilo em um arquivo à parte; e para usá-la no documento HTML, 
indicamos dentro da tag <head> qual o arquivo que contém as regras CSS 
utilizando a tag <link>. Veja o exemplo a seguir, que aplica o estilo no 
parágrafo no arquivo olamundo.html, criado na unidade anterior:
www.esab.edu.br 83
Algoritmo 7 – Aplicando a folha de estilo
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <link rel=”stylesheet” type=”text/css” href=”folha_
estilo_paragrafo.css”>
05 <title>Básica HTML</title>
06 </head>
07 <body>
08 <p> Ola mundo </p>
09 </body>
10 </html>
Fonte: Elaborado pelo autor (2013).
Na linha 4, foi inserido umlink para o arquivo “folha_estilo_paragrafo.
css”. Esse arquivo é aquele que salvamos com o conteúdo da regra que 
define o estilo do parágrafo no início desta unidade. Ele deve ficar no 
mesmo diretório do arquivo “olamundo.html”, como mostra a estrutura 
de arquivos apresentada na figura a seguir:
 
Figura 31 – Disposição dos arquivos.
Fonte: Elaborada pelo autor (2013).
O atributo “rel” declara ao navegador que o arquivo a ser utilizado são 
folhas de estilo. E veja que o link criado possui uma propriedade que 
define o tipo de arquivo (type) com o valor text/css, indicando que os 
comandos são regras CSS. 
A figura a seguir mostra o resultado do carregamento da página 
olamundo.html com a aplicação de folhas de estilo pelo navegador.
www.esab.edu.br 84
Figura 32 – Exemplo de aplicação de CSS.
Fonte: Elaborada pelo autor (2013).
Saiba mais
Em CSS há mais três funções para definir uma 
cor: rgba(), hsl() e hsla(). A função hsl() define 
as cores por intermédio da matiz, saturação e 
luminosidade (hue, saturation e lightness). Essa 
função possui três parâmetros: hsl(H, S, L), em que 
H pode variar de 0 a 360; e S e L variam de 0% a 
100%. As funções rgba(R, G, B, A) e hsla(H, S, L, A) 
possuem um último parâmetro, chamado alpha, 
que está relacionado à opacidade da cor e cujo 
valor varia de 0 a 1 com passo de 0.1.
Agora que já conhecemos melhor a regra CSS e como aplicá-la, na 
próxima unidade, veremos as boas práticas de uso do CSS e da estrutura 
de um documento CSS, bem como o uso dos atributos e valores.
www.esab.edu.br 85
12 Estrutura de um documento com base em CSS 
Objetivo
Apresentar a estrutura de um documento com base em CSS, os 
conceitos de atributo e valor e as boas práticas que facilitam a 
legibilidade e compreensão dos comandos em CSS.
Já estudamos o básico sobre como escrever e utilizar arquivos CSS para 
o desenvolvimento de sites. Nesta unidade, vamos explorar com mais 
propriedade a sintaxe dos comandos, ou regras, em CSS. 
Como estamos lidando com uma linguagem de programação, é 
importante que você adote uma forma-padrão de escrever os códigos, 
a fim de facilitar as manutenções corretivas e adaptativas. Para isso, 
algumas convenções são importantes.
1. Procure escrever as regras CSS colocando um espaço em branco 
entre o seletor e o caractere de abre-chaves ({). Para facilitar a 
compreensão, considere o espaço em branco representado pelo 
símbolo β. Vamos ver como fica a sintaxe aplicando esta primeira 
regra:
01 seletor β { propriedade: valor }
2. Insira também um espaço em branco antes de iniciar a escrita do 
bloco de declarações. Veja a sintaxe com esta convenção:
01 seletor β { β propriedade: valor }
3. Coloque um espaço em branco entre o bloco de declarações e o 
caractere de fecha-chave (}), que indica o final do bloco. Aplicando 
essas três regras, teremos a seguinte sintaxe:
01 seletor β { β propriedade: valor β }
www.esab.edu.br 86
4. Utilize a forma estendida de declarar as propriedades em linhas 
distintas, como vimos nas unidades anteriores. Assim, temos:
01 seletor β {β
02 propriedade: valor;
03 propriedade2: valor;
04 β}
5. Utilize o sinal de ponto e vírgula após todas as propriedades, mesmo 
que o último seja opcional, pois isso evitará que você esqueça de 
colocá-lo ao inserir uma nova propriedade.
6. Existindo mais de um seletor para a mesma propriedade e valor, 
agrupe esses seletores. Aplicando essa regra, temos:
01 seletor1 { 
02 propriedadeA: valorB 
03 }
04 seletor2 {
05 propriedadeA: valorB
06 }
Então podemos agrupar os seletores, tendo a sintaxe da seguinte forma:
01 seletor1, seletor2 {
02 propriedade1: valor2 
03 }
Essas convenções representam um conjunto de boas práticas que 
trazem muitos benefícios, poupando tempo posteriormente. Elas não 
são obrigatórias, por isso cabe a você decidir se deve ou não segui-las, 
entretanto, é importante saber que elas são amplamente adotadas no 
mercado de trabalho.
Na unidade anterior, vimos que após a criação de um arquivo específico 
com as folhas de estilo, é necessário vinculá-lo ao documento HTML, ou 
seja, informar à página web onde se encontram as regras CSS que serão 
carregadas pelo navegador. 
www.esab.edu.br 87
Mas vimos também que as folhas de estilo podem ser escritas no próprio 
documento HTML onde serão aplicadas. Assim, a vinculação do CSS ao 
HTML pode se dar por três métodos: inline, interno (por incorporação 
no código) ou externo (link entre os arquivos externos que contém as 
regras CSS e o arquivo HTML).
No método inline, o mais simples dos três, utilizamos a marcação style 
junto ao comando em HTML que cria um elemento, ou seja, como diz o 
nome do método, definimos o estilo na linha de comando. Por exemplo, 
para a definição de um parágrafo em HTML usa-se a tag <p> com a 
seguinte sintaxe: <p> texto </p>. Para que o parágrafo seja visualizado com 
o texto em cor vermelha, utilizando o método inline, basta acrescentar 
na tag de abertura do parágrafo a cláusula style seguida do símbolo “=”, e 
então a definição da propriedade e seu valor. O comando ficará: 
01 <p style=“color:red;”> texto </p>.
Vamos ver na prática? Abra um novo arquivo no NotePad++, escreva o 
código a seguir, salve o arquivo e execute-o no navegador.
Algoritmo 8 – Codificação do CSS inline
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>CSS InLINE</title>
05 </head>
06 <body>
07 <p style=”color:red;”> Texto em vermelho - CSS INLINE 
</p>
08 </body>
09 </html>
Fonte: Elaborado pelo autor (2013).
Veja que, na linha 7, o CSS está sendo aplicado por meio do método 
inline para definir a cor em vermelho (red) ao texto do parágrafo. O 
resultado deve ser algo semelhante ao mostrado na figura a seguir.
www.esab.edu.br 88
Figura 33 – Site com estilo utilizando CSS inline.
Fonte: Elaborada pelo autor (2013).
A grande desvantagem desse modelo refere-se à manutenção, pois 
havendo a necessidade de alteração da folha de estilo, o programador 
deverá fazer as modificações diretamente na página em HTML e em 
todas as linhas em que o parágrafo foi definido pelo modelo inline.
O método inline e o interno (por incorporação) são semelhantes, pois 
em ambos o estilo é definido no próprio documento HTML. Entretanto, 
no método interno as regras são todas definidas antes, no cabeçalho, isto 
é, na tag dupla <head>. Veja o exemplo no código a seguir:
Algoritmo 9 – CSS utilizando estilos incorporados
01 <html>
02 <head>
03 <meta http-equiv =”Content-type” content =”text/html” 
charset =”UTF-8”>
04 <title>CSS estilos incorporados</title>
05 <style type=”text/css” media=”screen”>
06 body {
07 color: green; /* green – cor verde */
08 font-size: 20px;
09 font-family: arial; /* tipo de fonte arial */
10 } 
11 </style>
12 </head>
13 <body> 
14 Documento formatado no estilo SCREEN para o corpo da 
página
15 </body>
16 </html>
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 89
Na linha 5, dentro da tag <head> é criado um estilo para definir a 
apresentação do documento HTML, que poder ser visualizado em 
monitores de computadores de mesa, notebooks e netbooks, por isso a 
propriedade media (mídia) recebe o valor screen (tela). Como o navegador 
precisa ser avisado que há regras CSS a serem carregadas, o tipo de 
documento foi definido por meio da propriedade content como text/css.
Na linha 6 está sendo definido para qual parte do documento o estilo 
será aplicado, no caso, o corpo da página, por isso o seletor body. Pelas 
propriedades, nas linhas 7, 8 e 9, respectivamente, vemos que no corpo 
da página o texto terá fonte em cor verde, com tamanho correspondente 
a 20 pixels e será do tipo Arial. As unidades de medidas utilizadas 
em CSS e tipos de fontes, serão estudadas com maior propriedadenesta disciplina, por enquanto, considere pixels a medida padrão para 
representação do tamanho texto e Arial o tipo da fonte.
Para ver o resultado desse código quando carregado pelo navegador, salve 
o arquivo com nome estiloincorporado.html e execute-o no navegador 
de sua preferência. Você verá uma página semelhante à da figura a seguir:
Figura 34 – Site com estilo utilizando CSS inline.
Fonte: Elaborada pelo autor (2013).
Agora, vamos acrescentar mais uma regra nesse código, definindo a cor 
azul (blue), junto com o tamanho de 30 pixels (px) e o tipo de fonte 
Times New Roman para os elementos parágrafos. Acesse o arquivo 
estiloincorporado.html que você acabou de criar e tente escrever essa 
regra sozinho, somente depois veja o código a seguir. Isso ajudará você a 
internalizar a sintaxe e as propriedades do CSS.
www.esab.edu.br 90
Lembre-se de que, depois de escrever a nova regra, você deverá acrescentar 
no código HTML uma linha de parágrafo para ver a aplicação da regra. 
Para isso, vamos utilizar, aqui, a frase “Documento em estilo incorporado 
para o parágrafo”. Depois de acrescentar a nova regra e a linha HTML, 
seu código deve estar semelhante ao código a seguir. Acompanhe.
Algoritmo 10 – CSS utilizando estilos incorporados
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>CSS Estilos Incorporados</title>
05 <style type=”text/css” media=”screen”>
06 body{
07 color:green;
08 font-size:20px;
09 font-family:arial; 
10 } 
11 p {
12 color:blue;
13 font-size:30px;
14 font-family: times new roman; 
15 } 
16 </style>
17 </head>
18 <body> 
19 Documento formatado no estilo SCREEN para o corpo da 
página.
20 <p> Documento em estilo incorporado para o parágrafo </
p>
21 </body>
22 </html>
Fonte: Elaborado pelo autor (2013).
Note que iniciamos a nova regra na linha 11 com o seletor p, indicando 
que as declarações definirão o estilo dos parágrafos, seguido do símbolo 
de abertura do bloco de declarações ({). Na linha 12, a propriedade color 
indica que a cor da fonte será azul; na linha 13 a propriedade font-size 
define o tamanho de fonte 30px; e na linha 14, define-se o tipo de fonte 
Times New Roman por meio da propriedade font-family. Na linha 15, 
fechamos o bloco de declarações utilizando o símbolo de fecha-chave (}).
www.esab.edu.br 91
No código HTML, temos, na linha 19, um texto que faz parte do corpo 
da página, mas sem formatação de parágrafo. Esse é o texto que tínhamos 
da versão anterior do código. E na linha 20, acrescentamos um texto com 
formatação de parágrafo. Assim, quando a página for apresentada no 
navegador, os textos dos parágrafos serão diferentes dos textos do corpo 
da página por causa das regras definidas nos códigos.
Vamos ver como ficará nossa página? Salve o arquivo com os novos 
códigos, deixando a extensão como .html, e execute-o em um navegador. 
O resultado será algo semelhante ao mostrado na figura a seguir:
Figura 35 – Site com estilo utilizando CSS interno.
Fonte: Elaborada pelo autor (2013).
A vantagem desse modelo é a localização dos estilos que foram criados, 
pois todos ficarão em um bloco de código dentro do cabeçalho da 
página. Porém, com as regras de CSS escritas dentro do documento 
HTML, nos casos de manutenção, o desenvolvedor deverá editar cada 
arquivo de cada página que use o estilo que deve ser alterado.
Ambos os métodos que vimos aqui podem ser úteis na sua vida 
profissional, no entanto, o método externo é o mais eficiente. Isso 
porque as regras são editadas em um único documento, separado do 
arquivo HTML, e carregadas nas páginas por meio da tag <link>. 
Assim, o desenvolvedor poderá aplicar os mesmos estilos em diversas 
páginas apenas inserindo o link para o documento CSS, e havendo 
necessidades de ajustes no estilo, apenas esse documento será modificado, 
o que facilita a manutenção e a inserção de melhorias no projeto web, 
reduzindo o tempo investido para isso.
www.esab.edu.br 92
Essa técnica foi utilizada na unidade anterior e a sua sintaxe é bem simples. 
Na tag <head> do código HTML, deve ser acrescentada a seguinte tag:
01 <link rel= “stylesheet” type= “text/css” href= 
“nome_do_arquivo_com_as_regras_css.css” media= 
“all” >
Vamos rever como aplicar esse método? No NotePad++, crie um arquivo 
e escreva a regra de CSS apresentada a seguir e salve o arquivo com nome 
exemplo.css em uma nova pasta. 
Algoritmo 11 – Formatando o parágrafo com CSS
01 p {
02 font-family:sans -serif,serif,monospace;/* fontes que 
podem ser utilizadas */
03 font-size:5px; /* tamanho da fonte*/
04 font-style:italic ; /* estilo da fonte*/
05 font-variant:small - caps ; /* formato da fonte : 
maiúsculo*/
06 font-weight:bold ; /* estilo da fonte: negrito */
07 }
Fonte: Elaborado pelo autor (2013).
Para podermos aplicar o CSS, precisaremos de um arquivo HTML, 
portanto, abra um novo arquivo no Notepad++ e escreva o código a 
seguir. Depois, salve o arquivo com o nome de sua preferência na mesma 
pasta em que está o arquivo com as regras CSS a serem aplicadas aqui.
Algoritmo 12 – Página HTML de exemplo
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>Exemplo</title>
05 <link rel= “stylesheet” type= “text/css” href= 
“exemplo.css” media= “all”>
06 </head>
07 <body> 
08 <p> Exemplo de Parágrafo Formatado usando o modelo de 
Arquivos Lincados</p>
09 </body>
10 </html>
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 93
Perceba que na linha 5 do código está sendo criado o vínculo entre 
o documento HTML e o arquivo com as regras CSS por meio da 
tag <link>. O atributo “rel” indica que o arquivo a ser chamado (ou 
utilizado) é uma folha de estilos, enquanto o atributo “type” informa que 
essa folha de estilos é do tipo CSS. O atributo “href” mostra o caminho 
para encontrar este arquivo e, por fim, o atributo media indica que os 
estilos serão apresentados em todos os tipos de tela.
Depois de salvar o arquivo com o nome de sua preferência, execute-o em 
um navegador. O resultado será algo semelhante à figura a seguir:
Figura 36 – Site com estilo utilizando CSS vinculado a arquivo externo.
Fonte: Elaborada pelo autor (2013).
Agora que já vimos o básico sobre o uso de CSS e suas boas práticas, 
bem como os métodos de inserção dos estilos no arquivo HTML, na 
próxima unidade seguiremos aprendendo os comandos de formatação 
de texto em CSS.
www.esab.edu.br 94
Resumo
Nestas unidades, você pôde verificar a importância do uso da ferramenta 
Firebug para o desenvolvimento, a validação e os testes em projetos web. 
Também viu a estutura dos documentos em HTML, que é formada por 
um cabeçalho – criado pela tag <head></head> – e pelo corpo – criado 
pela tag <body></body>. A HTML é uma linguagem de marcação, 
ou seja, seu papel principal é representar o conteúdo das páginas, sem 
formatação ou estilos. Na codificação, ela é identificada pelo navegador 
pela tag <html></html>, que marca o início e o fim do documento. Essa 
linguagem está em constante evolução por meio da integração com a 
linguagem XML, a fim de dar maior dinamismo às páginas web. 
Para definição de layout dos projetos web, deve-se usar as folhas de 
estilo, conhecidas como CSS. Você pôde verificar que o código CSS é 
composto pelo que chamamos de regra CSS, cuja sintaxe se compõe 
de seletor, propriedade e valor da propriedade. Por se tratar de uma 
linguagem de programação, codificar em CSS exige a adoção de boas 
práticas para manter a estrutura de comandos organizados e legíveis. Por 
fim, também estudamos que as regras CSS integram-se às páginas web 
por meio de um dos métodos até hoje desenvolvidos: inline, interno (ou 
incorporado) ou externo.
www.esab.edu.br 95
13 Como formatar o texto da página HTML com CSS
ObjetivoApresentar a sintaxe dos comandos de text e font do CSS e como 
podem ser utilizados na formatação de textos nas páginas HTML. 
Na unidade anterior, você acompanhou como integrar as regras CSS nos 
documentos em HTML com ênfase na técnica de definição das regras 
CSS escritas em arquivos externos salvos com a extensão “.css”. Lembre-
se de que uma regra CSS atua formatando um elemento HTML, que 
nada mais é do que uma marcação entre < e >. Nesta unidade, veremos 
como estilizar um texto com uso de regras de CSS para alinhar e 
formatar um bloco de textos, definindo propriedades como: tamanho da 
fonte, tipo e famílias.
Você pode achar que a tarefa de especificação da fonte que será utilizada 
pelo site é simples e básica, porém não é. Isso porque cada dispositivo 
de usuário, ou seja, o monitor do computador, o celular, ou o tablet, 
que carrega uma página HTML, trata de forma completamente 
diferente a fonte especificada pelo programador. As aplicações web 
possuem comportamentos diferentes para dispositivos diferentes. Uma 
página será apresentada de uma forma quando carregada no monitor 
do computador, mas não terá a mesma forma de apresentação quando 
carregada em um celular com acesso à internet, ou em tablets, que 
possuem dimensões de tela reduzidas, por isso a escolha do estilo da 
fonte é essencial para que a usabilidade seja garantida.
Segundo Silva (2008, p. 95):
Tipografia é a marca da escrita. Marca como o sentido de assinalar, indicar, cunhar ou 
estruturar fisicamente. Tipografia é também a arte de escolher fontes e dimensionar a 
escrita para criar textos que sejam visualmente agradáveis. 
www.esab.edu.br 96
Neste sentido, iniciaremos os estudos desta unidade com foco nos 
conceitos de tipografia e em como utilizá-los na definição da fonte 
utilizada no site.
Existem inúmeras fontes disponíveis, algumas pagas, outras gratuitas, 
que podem ser adquiridas pelo programador diretamente na internet. 
Porém, esta disponibilidade resulta em uma falta de padrão e na 
incompatibilidade com os diversos sistemas operacionais. Ou seja, não há 
garantia de que a fonte utilizada para definição da apresentação do texto 
no site possa ser carregada pelo navegador.
Para que este problema de incompatibilidade seja minimizado, procure 
utilizar fontes seguras, pois, assim, a possibilidade de disponibilização 
pelos diferentes sistemas operacionais será maior.
Silva (2008, p. 98) destaca: “Na prática, a escolha de tais fontes assegura 
que a maioria dos usuários visualize a tipografia do nosso site, tal como 
ela foi projetada”. As fontes seguras, totalizando nove, são:
Arial;
Arial Black;
Comic Sans MS;
Courier New;
Georgia;
Impact;
Times New Roman;
Trebuchet MS; e
Verdana.
Uma vez que a quantidade de fontes que por padrão são previamente 
instaladas nos computadores é mínima, você pode utilizar uma 
técnica importante para solução deste problema de incompatibilidade: 
defina e organize as fontes em famílias, pois caso uma delas não seja 
encontrada no computador que acessa a página, outras serão buscadas 
automaticamente, garantindo a apresentação do texto. 
www.esab.edu.br 97
Você precisa adotar uma regra CSS que informará ao navegador um 
conjunto de fontes que devem ser carregadas em ordem de prioridade. 
Ou seja, se a primeira (fonte A) não for encontrada no sistema 
operacional, a segunda (fonte B) será carregada, e assim, sucessivamente 
até chegar à última (fonte N). 
A última opção deve ser uma fonte genérica, presente em qualquer 
dispositivo. Silva (2008, p. 99), destaca: “O W3C define um conjunto 
de cinco fontes, à quais denominou de fontes genéricas e que se destinam 
a servir como última opção para o caso de falha nas escolhas do autor”. 
Vale salientar que, nesse caso, autor é o programador ou designer do site.
As cinco fontes genéricas são conhecidas como famílias de fontes, e são 
listadas a seguir.
Serif, composta pelas fontes Times New Roman, Times, 
Georgia, Garamond, Book Antiqua, Palatino e Bodoni.
Sans-Serif, composta pelas fontes Arial, Verdana, 
Tahoma, Futura, Gill Sans, Helvetica e Geneva.
Cursive, composta pelas fontes Lucida Handwriting, 
Monotype Corsiva, Vivaldi, Brush Script, Caflisch Script, 
Ex Ponto e Snell Roundhand.
Fantasy, composta pelas fontes Jokerman, Chiller, 
Alpha Geometrique, Critter, Cottonwood, fb Reactor e Studz.
A sintaxe da regra CSS para definição de uma família de fontes é: {font-
family: fonte A, fonte B, fonte C;}, onde fonte A, fonte B e fonte C 
representam as fontes que farão parte da família, seguindo uma ordem de 
prioridade. Quando o nome da fonte for composto, como, por exemplo, 
Times New Roman, deve ficar entre aspas, duplas (“) ou simples (‘). Você 
pode acompanhar na Figura 37 um exemplo de definição de uma família 
de fontes:
www.esab.edu.br 98
{font-family:”Times New Roman”,Verdana,Arial,sans-serif;}
Prioridade
1
2
3
Figura 37 – Regra CSS para definição da família de fonte.
Fonte: Elaborada pelo autor (2013).
Note que, na Figura 37, o item 1 representa a cláusula font-family, 
informando assim ao navegador a existência de uma lista de fontes; no 
item 2, há uma fonte com nome composto, e por isso utilizamos aspas 
duplas (“) no início e no fim do nome da fonte. Já no último item (3), 
utilizamos uma família genérica de fontes, sans-serif. 
Vimos como definir as fontes que serão utilizadas no documento 
HTML. Agora, veremos as propriedades de definição dos efeitos no 
texto, tais como:
• font-family: define a família de fontes a ser utilizada;
• font-size: define o tamanho da fonte;
• font-style: define o estilo de fonte;
• font-variant: define se a fonte será utilizada no formato small-caps 
ou não;
• font-weight: define a espessura dos traços de uma fonte;
• font: define todas as propriedades de fonte em uma única linha.
A propriedade font-family define uma família de fontes para os textos 
do documento, como vimos anteriormente. Revisando sua sintaxe, você 
vai perceber que é bem simples: {font-family: fonteA, fonteB,...,FonteN;}. 
É importante terminar o comando de definição da regra com o ponto e 
vírgula (;), essa ação é facultativa, mas deve ser utilizada para separar as 
propriedades de uma regra das demais regras. Entenda o “;” como um 
final de comando. Você pode escrever os nomes das fontes em maiúsculo 
www.esab.edu.br 99
ou minúsculo, mas deve terminar a lista das fontes com uma fonte 
genérica. A seguir, apresentamos alguns exemplos de definição da regra 
CSS de font-family:
1. p {font-family:Verdana,serif;} – neste exemplo, a regra CSS define 
a família de fontes aceitas no elemento parágrafo do documento 
HTML;
2. body {font-family: “Lúcida Handwriting”, “Monotype Corsiva”, 
Arial, Sans-Serif;} – neste exemplo, a regra CSS define a família de 
fontes para o corpo do documento HTML, elemento BODY;
3. h1 {font-family:Impact,Arial,Courier,cursive;} – neste exemplo a 
regra CSS está definindo o conjunto de fontes para o elemento H1.
 
A propriedade font-size permite definir o tamanho da fonte. Os valores 
podem ser: um valor absoluto, um valor relativo, uma medida CSS 
de comprimento ou um valor em percentual. Os valores absolutos são 
predefinidos e representados pelas cláusulas: xx-small, x-small, small, 
medium, large, x-large, xx-large. A sintaxe de definição dessa propriedade 
é: {font-size: tamanho da fonte;}. A figura a seguir ilustra os tamanhos de 
cada valor absoluto, em ordem. São eles xx-small, x-small, small, medium, 
large, x-large, xx-large:
Texto em xx-small
Texto em x-small
Texto em small
Texto em medium
Texto em large
Texto em x-large
Texto em xx-large
Figura 38 – Tamanhos de fonte com valor absoluto.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 100
Você pode definir o tamanho da fonte por meio de um valor relativo: 
smaller ou larger.Outra forma muito utilizada para definição do 
tamanho da fonte é o uso do valor em percentual. A seguir, você verá 
alguns exemplos dessa definição, acompanhe:
1. p {font-size:100%;} – tamanho da fonte para o elemento parágrafo 
(p) em 100%;
2. h2 {font-size:200%;} – tamanho da fonte para o elemento título 
(h2) em 200%;e 
3. body {font-size:50%;} – tamanho da fonte para o elemento corpo 
(body) em 200%.
A propriedade font-style é responsável por definir o estilo da fonte, em 
itálico, normal e oblíquo. Os valores possíveis são italic, normal e oblique. 
A sintaxe para definição dessa propriedade é: {font-style: tipo de estilo;}. 
A seguir, você verá exemplos do uso dessa definição, acompanhe:
1. body {font-style:normal;} – define o estilo do corpo da página como 
normal;
2. body {font-style:italic;} – define o estilo do corpo da página como 
itálico; e
3. body {font-style:oblique;} – define o estilo do corpo da página como 
oblíquo.
A propriedade font-variant modifica a apresentação do texto, mudando 
as letras de minúsculas para maiúsculas. Os valores aceitos para esta 
propriedade são: normal e small-caps. A sintaxe de uso da propriedade 
é: {font-variant: tipo;}. A seguir, você verá exemplos de uso dessa 
propriedade, acompanhe:
1. p {font-variant: normal;} – define o parágrafo com fonte normal;
2. body {font-variant: small-caps;} – define que os textos serão 
apresentados em maiúsculo no corpo da página.
www.esab.edu.br 101
A última propriedade de definição do estilo da fonte é font-weight. Essa 
propriedade define a espessura da linha que desenha a fonte. Para essa 
propriedade, os valores aceitos são: normal, bold, bolder, lighter e valores 
inteiros de 100 a 900, em intervalos de 100 em 100, resultando em 
nove valores aceitos chamados de pesos, sendo eles: 100, 200, 300, 400, 
500, 600, 700, 800 e 900. A sintaxe para definição dessa propriedade 
é: {font-weight: valor;}. A seguir, veja alguns exemplos de definição da 
propriedade font-weight, acompanhe:
1. body {font-weight:900;} – define o peso da fonte do corpo da página 
em 900;
2. p {font-weight:bold;} – define o peso da fonte do parágrafo como 
sendo bold; e
3. h5 {font-weight:normal;} – define o peso da fonte do título como 
sendo normal.
Para declarar todas as propriedades estudadas anteriormente, você pode 
utilizar a propriedade font, cuja sintaxe é: {font: font-style font-variant 
font-weight font-size font-family}. A ordem dos valores da propriedade font 
é pré-estabelecida: font-style font-variant font-weight font-size font-family.
A seguir, veja um exemplo do uso da propriedade font:
• body {font: italic small-caps bold 20px sans-serif,serif,monospace;} – 
define o formato da fonte que será aplicado a todo corpo da página 
HTML.
Existem outras propriedades para formatação de documentos HTML, 
que não agem na fonte, mas no texto como um todo, por isso são 
chamadas de propriedades de texto. São elas: 
• color - define a cor do texto;
• direction - define a direção do texto;
• letter-spacing - define o espaçamento entre as letras do texto;
• line-height - define a altura das linhas de um texto;
www.esab.edu.br 102
• text-align - define o alinhamento horizontal do texto;
• text-decoration - define uma decoração ou efeito para um texto;
• text-indent - define a indentação da primeira linha de um bloco de 
texto;
• text-transform- define e transforma os caracteres do texto. Pode 
transformar todos os caracteres de maiúsculo ou minúsculo (e vice-
versa) ou apenas o primeiro caractere do texto. Esta transformação é 
chamada de capitalização do texto;
• vertical-align - define o alinhamento vertical do texto;
• white-space - define como os espaços do texto serão tratados.
Estudo complementar
Para complementar os estudos de estilização de 
fontes em CSS, clique aqui e acesse um tutorial 
que apresenta a sintaxe dos comandos e exemplos 
de como utilizá-los.
Chegamos ao encerramento de mais uma unidade na qual vimos as 
principais propriedades de formatação de fontes no CSS. Na próxima 
unidade, veremos como aplicar estas regras na prática, criando alguns 
exemplos. Vamos lá?
www.esab.edu.br 103
14 Construindo uma página HTML com formatações de texto
Objetivo
Possibilitar o desenvolvimento e a visualização de uma página HTML 
com formatos diferentes de textos com a aplicação de comandos text 
e font.
Vimos, na unidade anterior, as principais propriedades de formatação de 
fontes no CSS. Nesta unidade, vamos desenvolver alguns exercícios práticos 
de aplicação dessas regras de formatação de fontes e textos em CSS. 
Inicialmente, vamos adotar alguns padrões de comunicação para 
facilitar a compreensão do exercício. Utilizaremos como ferramenta o 
NotePad++, que será referenciado no texto como editor, então, quando 
surgir alguma especificação de tarefa a ser executada no editor, deve 
executá-la no NotePad++. 
Lembre-se de que os arquivos criados com as regras CSS deverão ser 
salvos com a extensão “.css”, e os arquivos com documentos em HTML, 
salvos com a extensão “.html”. Por fim, quando houver a solicitação 
para executar o arquivo HTML, significa que você deverá executar no 
NotePad++, no navegador de sua preferência.
Vamos começar a primeira prática, que tem como finalidade criar as 
regras para apresentação dos seguintes elementos da página HTML: 
body, p, h1 e h2. No editor, lembre-se de que você deverá utilizar o 
NotePad++. Escreva o código a seguir:
www.esab.edu.br 104
Algoritmo 13 – Prática CSS 1
01 body{
02 font-family: Arial,Verdana,Tahoma,Sans-Serif;
03 color: blue;
04 font-size: 12px;
05 }
06 p{
07 line-height: 20px;
08 text-align: justify;
09 }
10 h1{
11 font-size: 24px;
12 color:green;
13 text-transform: uppercase;
14 }
15 h2{
16 font-size: 14px;
17 padding: 5px;
18 background-color: black;
19 color: red;
20 }
Fonte: Elaborado pelo autor (2013).
Salve o arquivo CSS com o nome “pratica1.css”. Vamos analisar as 
propriedades mencionadas?
• font-family: define a família de fontes que serão usadas para formatar 
o texto. A fonte principal é a Arial, mas na sua falta, será utilizada 
a fonte Verdana. No caso da falta da Verdana, a Tahoma e, não 
existindo essa, será utilizada qualquer fonte Sans-Serif;
• font-size: define o tamanho da fonte utilizada no texto fonte;
• color: define a cor do texto. As cores podem ser definidas utilizando 
o nome da cor, em inglês, como: red, black e yellow (vermelho, preto 
e amarelo, respectivamente). Outra forma é criar uma cor com a 
combinação das cores vermelho, verde e azul, por meio da função 
RGB (as iniciais de red, green e blue). O princípio dessa função 
é bem simples.: é como se você colocasse estas três cores em um 
recipiente e começasse, com um pincel, a misturá-las, acrescentado 
a quantidade de cada uma dessas cores à sua vontade. Por fim, 
outra forma de definir a cor é por meio da sua representação em 
www.esab.edu.br 105
Hexadecimal. A cor vermelha, por exemplo, pode ser definida pelo 
nome red, ou RGB (255,0,0) ou em hexadecimal FF0000;
• line-height: Define a altura da linha. É uma propriedade importante 
porque deixa o texto mais espaçado entre as linhas, tornando a 
leitura mais agradável;
• text-transform: Define o estilo do texto. Os valores possíveis são: 
uppercase (caixa alta), lowercase (caixa baixa), capitalize (primeira 
letra maiúscula e o restante minúscula) e none (o texto é mostrado 
como foi digitado); e
• text-align: Define o alinhamento do texto dentro do parágrafo. 
Os valores aceitos são: left - texto alinhado à esquerda, center - 
texto centralizado, right - texto alinhado à direita e justify - texto 
justificado.
Agora, vamos criar um documento HTML, a fim de utilizarmos as regras 
criadas anteriormente. Edite o código a seguir:
Algoritmo 14 - Documento HTML Prática101 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”ISO-8859-1”>
04 <title>Pratica-1</title>
05 <link rel= “stylesheet” type= “text/css” href= 
“pratica1.css” media= “all”>
06 </head>
07 <body> 
08 Texto do corpo da página, sem parágrafos, escrito 
diretamente no corpo da página.
09 Este texto será estilizado pela regra CSS para o 
elemento BODY.
10 <p> Este texto está dentro de um parágrafo, será 
formatado pela regra CSS para o elemento P </p>
11 <h1> Este texto será formatado pela regra CSS do 
elemento h1.</h1>
12 <h2> Este texto será formatado pela regra CSS do 
elemento h2.</h2>
13 </body>
14 </html>
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 106
Salve o arquivo com nome “pratica1.html” e execute-o para ver o 
resultado no navegador.
Ao abrir o arquivo no navegador, o documento será apresentado com o 
texto do parágrafo (O texto que está dentro do parágrafo, será formatado 
pela regra CSS para o elemento P) com tamanho da fonte em 20 pixels, 
alinhamento justificado, resultado da regra CSS identificada como “p”, no 
Algoritmo 13, linha 6. Assim, a regra determinou que todo elemento p 
(parágrafo) existente no documento HTML fosse estilizado dessa forma.
O texto do elemento H1 (Este texto será formatado pela regra CSS do 
elemento h1) será apresentado com fonte em tamanho de 24 pixels, em 
verde e convertido para maiúsculo, resultado da estilização identificada 
como “h1” no Algoritmo 13, na linha 10.
Por fim, o texto do elemento h2 (Este texto será formatado pela regra 
CSS do elemento h2), do documento HTML será apresentado com 
fundo preto, com as fontes em vermelho e texto em tamanho de 14 pixels, 
resultado da regra identificada como “h2”, no Algoritmo 13, na linha 15.
Vamos para a segunda prática?
Nesse exercício, definiremos as regras CSS para o corpo da página (body) 
e uma indentação para o parágrafo. Na sequência, apresentaremos o 
código CSS que deverá ser editado por você:
Algoritmo 15 – Prática CSS 2
01 body {
02 background-color: green;
03 color: yellow; 
04 margin: 50px;
05 font-family: Verdana, Geneva, Arial, sans-serif;
06 font-size: small;
07 line-height: 180%;
08 }
09 p {text-indent: 3em;}
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 107
Nessa regra utilizamos as propriedades já conhecidas, com a inclusão 
de outras duas: a margin, que específica o espaço da margem esquerda, 
direita, topo e base do documento, todas com mesmo valor, e a text-
indent, que específica o espaço entre a margem e o início do parágrafo. 
A unidade de medida “3em” informa ao documento HTML que a 
medida do texto será três vezes a medida do corpo da página. É uma 
medida variável, por exemplo, se o corpo da página tiver tamanho de 
10 pixels, o tamanho do texto endentado como “em” será de 30 pixels. 
Se o tamanho do texto do corpo da página mudar, a endentação muda 
automaticamente.
Para usar essa regra, salve o documento com nome “pratica2.css” e edite um 
novo documento, em HTML. O código da página é apresentado a seguir:
Algoritmo 16 – Documento HTML Prática 2
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”=”ISO-8859-1”>
04 <title>Pratica-2</title>
05 <link rel= “stylesheet” type= “text/css” href= 
“pratica2.css” media= “all”>
06 </head>
07 <body> 
08 Texto do corpo da página, sem parágrafos, escrito 
diretamente no corpo da página.
09 Este texto será estilizado pela regra CSS para o 
elemento BODY.
10 <p> Este texto está dentro de um parágrafo, será 
formatado pela regra CSS para o elemento P com 
indentação </p>
11 </body>
12 </html>
Fonte: Elaborado pelo autor (2013).
Salve o arquivo com nome “pratica2.html” e execute-o para ver o 
resultado no navegador.
O texto do corpo da página será apresentado na cor amarela com fundo 
verde, usando uma fonte pequena, verdana, geneva, arial ou sans-serif. 
Essa regra foi definida no Algoritmo 15, nas linhas 1 a 7. O elemento 
www.esab.edu.br 108
parágrafo será endentado em um espaçamento de “3 em”, conforme a 
definição da regra CSS criada na linha 8 do Algoritmo 15.
Na próxima prática, a de número três, você vai aprender a editar as 
propriedades de alinhamento do texto, diretamente no arquivo HTML. 
Para tanto, edite o seguinte documento:
Algoritmo 17 – Documento HTML Prática 3
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset==”ISO-8859-1”>
04 <title>Alinhando Textos com CSS – Prática 3</title>
05 </head>
06 <body>
07 <h3>Exemplos da Propriedade CSS text-align.</h3>
08 <p>
09 A propriedade text-align define o tipo de alinhamento 
do texto em um bloco.
10 </p>
11 <p style=”text-align: left;”>
12 Este texto está alinhado à ESQUERDA.
13 </p>
14 <p style=”text-align: right;”>
15 Já este está alinhado à DIREITA.
16 </p>
17 <p style=”text-align: center;”>
18 Este outro está alinhado de forma CENTRALIZADA.
19 </p>
20 </body>
21 </html>
Fonte: Elaborado pelo autor (2013).
Salve o documento com nome “pratica3.html” e execute-o no navegador.
O Algoritmo 17 cria quatro parágrafos que compõem o corpo da 
página. O primeiro parágrafo, definido nas linhas 8 a 10, deverá ser 
apresentado sem alinhamento, já que nenhum estilo foi informado no 
código. Já o segundo parágrafo, definido no código das linhas 11 a 13, 
será apresentado com alinhamento à esquerda, resultado da instrução 
style=”text-align: left;”. Os dois próximos parágrafos serão apresentados 
www.esab.edu.br 109
com alinhamento à direita e ao centro, respectivamente, resultados das 
instruções style=”text-align: right;” e style=”text-align: center;”.
Analisando o código, você verá que foi utilizado o método inline para 
definição de regras CSS diferentes para cada um dos parágrafos, a partir 
da propriedade text-align, que poderá ter como valores: center, left e right 
e justify.
Vamos para a quarta prática, que apresentará o uso da propriedade 
text-decoration, responsável por decorar o texto no formato sublinhado, 
superlinhado, linha cortando o texto, piscante e normal. O valor piscante 
não é suportado pelos navegadores Internet Explorer e Google Chrome, 
por isso procure testar o código no Firefox para ver este efeito. Escreva o 
seguinte código:
Algoritmo 18 – Prática CSS 4
01 h1{
02 color: blue; 
03 font-family: Verdana, Geneva, Arial, sans-serif;
04 font-size: large;
05 line-height: 180%;
06 text-decoration:underline; /* sublinhado*/
07 }
08 h2{
09 color: black; 
10 font-family: Verdana, Geneva, Arial, sans-serif;
11 font-size: large;
12 line-height: 180%;
13 text-decoration:overline; /* superlinhado */
14 }
15 h3{
16 color: green; 
17 font-family: Verdana, Geneva, Arial, sans-serif;
18 font-size: large;
19 line-height: 180%;
20 text-decoration:line-through; /* texto cortado*/
21 }
22 h4{
23 color: red; 
24 font-family: Verdana, Geneva, Arial, sans-serif;
25 font-size: large;
26 line-height: 180%;
27 text-decoration:blink; /* piscante*/
www.esab.edu.br 110
28 }
29 h5{
30 color: yellow; 
31 font-family: Verdana, Geneva, Arial, sans-serif;
32 font-size: large;
33 line-height: 180%;
34 text-decoration:none; /* normal*/
35 }
Fonte: Elaborado pelo autor (2013).
Ao analisarmos o código, para os elementos h1, h2, h3, h4 e h5, vimos 
que foi definido um tipo de decoração, além das propriedades de fontes: 
família, tamanho, espaço entre as linhas e cor do texto.
Para testar as propriedades criadas anteriormente, crie um documento 
HTML com o seguinte código:
Algoritmo 19 – Documento HTML Prática 4
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=utf-8”>
04 <title>Decorando o Texto – Prática 4</title>
05 <link rel= “stylesheet” type= “text/css” href= 
“pratica4.css” media= “all”>
06 </head>
07 <body>
08 <h1>TextDecoration UNDERLINE - sublinhado.</h1>
09 <h2>Text Decoration OVERLINE - superlinhado.</h2>
10 <h3>Text Decoration LINE-THROUGH - cortado.</h3>
11 <h4>Text Decoration BLINK - piscante.</h1>
12 <h5>Text Decoration NONE - normal.</h1>
13 </body>
14 </html>
Fonte: Elaborado pelo autor (2013).
Finalmente, salve o documento com nome “pratica4.html” e execute-o 
no navegador.
www.esab.edu.br 111
Nesta unidade, você teve a oportunidade de criar algumas páginas 
HTML com formatação de textos e fontes. Nas práticas anteriores, 
usamos algumas regras CSS de definição de cor do documento HTML 
como: color e background-color. Na próxima unidade, serão apresentadas 
outras regras CS para definição de cor. 
www.esab.edu.br 112
15 Como formatar as cores da página HTML com CSS
Objetivo
Apresentar a sintaxe da propriedade color e a sua utilização na 
formatação da cor dos textos das páginas em HTML.
Na unidade anterior, você teve a oportunidade de criar algumas páginas 
HTML com formatação de textos e fontes. Vimos também algumas 
regras CSS de definição de cor do documento HTML como: color e 
background-color.
Nesta unidade, veremos como definir a cor de apresentação de textos em 
documentos HTML por meio da propriedade color e alguns cuidados 
que devemos ter para não afetar a usabilidade do site.
As cores em CSS podem ser definidas de três formas: valores em 
hexadecimal, valor em RGB ou palavras-chave. A sintaxe da propriedade 
color é definida por: {color: valor da cor;}.
Dica
RGB é a sigla do sistema de cores aditivas formado 
pelas iniciais das cores em inglês Red, Green e Blue, 
que significam em português respectivamente, 
vermelho, verde e azul. As cores são obtidas por 
meio da mistura dessas três cores, em quantidades 
determinadas. Cada uma das cores obtidas está 
enquadrada em uma escala que varia de 0 a 255. 
Quando a mistura das três cores está no valor 
mínimo (0, 0, 0), o resultado é a cor preta. Quanto 
está no máximo (255, 255, 255), resulta na cor 
branca.
www.esab.edu.br 113
A notação mais comum para definição de cores é o valor em 
hexadecimal, representado por um sinal de sustenido (#) a frente do 
valor, que é composto por uma combinação de letras (A, B, C, D, E, 
F) e números (de 0 a 9), em tamanho máximo de seis hexadecimais. 
Por exemplo, a cor branca em hexadecimal é representada pelos valores 
#FFFFFF. A combinação destas letras e números é livre, sendo que os 
dois primeiros hexadecimais representam a quantidade de vermelho 
(RED), os dois valores seguintes, a quantidade de cor verde (GREEN) e 
os dois últimos, a quantidade de cor azul (BLUE). 
A Figura 39 ilustra essa estrutura:
# Letras e/ou
números
Figura 39 – Estrutura das cores em hexadecimal.
Fonte: Elaborada pelo autor (2013).
Acessando o site no endereço <www.html-color-codes.info/Codigos-
de-Cores-HTML>, você pode selecionar uma cor na tabela de cores. 
Fazendo isso, você será apresentado ao código em hexadecimal para esta 
cor. Essa é uma ferramenta útil, pois facilita a escolha de cores a serem 
utilizadas em um site. Existem muitos outros sites que apresentam uma 
tabela de cores, faça uma pesquisa na internet por: tabela de cores 
HTML e comprove.
A seguir, apresentaremos exemplos da sintaxe da propriedade color 
usando valores em hexadecimal:
• {color: #FFFFFF;}: texto em branco;
• {color: #000000;}: texto em preto;
• {color: #33FF33;}: texto em verde;
• {color: #0000FF;}: texto em azul;
• {color: #FF0000;}: texto em vermelho.
Você também pode definir a cor do texto usando a notação em RGB, que 
cria a cor a partir da combinação de três valores entre 0 e 255, colocados 
www.esab.edu.br 114
entre parênteses e separados por vírgula. Nesse caso, o primeiro valor 
representa a quantidade da cor vermelha, o valor do meio a quantidade 
de cor verde, e o último valor a quantidade de cor azul.
Você pode perceber essa estrutura na Figura 40:
, , Números
0...255
RGB ( )
Figura 40 – Estrutura das cores em RGB.
Fonte: Elaborada pelo autor (2013).
A seguir, apresentaremos exemplos da sintaxe da propriedade color 
usando valores em RGB:
• {color: RGB(255,255,255);}: texto em branco;
• {color: RGB(0,0,0,);}: texto em preto;
• {color: RGB(51,255,51);}: texto em verde;
• {color: RGB(0,0,255);}: texto em azul;
• {color: RGB(255,0,0);}: texto em vermelho.
A propriedade color permite ainda definirmos a cor pelo uso de palavras-
chave. No quadro a seguir, você será apresentado às palavras-chave 
permitidas, acompanhe: 
Aqua azul-claro
Black Preto
Blue Azul
fuchsia Magenta
Gray Cinza
Green Verde
Lime verde-claro
maroon Marrom
Navy azul-marinho
Olive verde-oliva
purple Roxo
www.esab.edu.br 115
red Vermelho
Silver Prata
Teal Petróleo
White Branco
yellow Amarelo
Quadro 7 – Listagem das cores padrão.
Fonte: Elaborado pelo autor (2013).
Além dessas 16 cores padrão, você pode utilizar mais 124 cores, 
totalizando 140 cores diferentes. A apresentação das cores, entretanto, 
pode mudar de acordo com o navegador utilizado, isto porque nem 
todos os navegadores suportam as 140 cores.
A seguir, apresentaremos exemplos da sintaxe da propriedade color 
usando palavras-chave:
• {color: white;}: texto em branco;
• {color: black;}: texto em preto;
• {color: green;}: texto em verde;
• {color: blue;}: texto em azul;
• {color: red;}: texto em vermelho.
Saiba mais
Existem algumas ferramentas computacionais que 
auxiliam o programador na definição das cores, 
clique aqui e conheça uma. Você pode criar suas 
cores que a ferramenta mostra o valor da mesma 
em RGB ou hexadecimal.
Ao escolhermos as cores a serem utilizadas no site, devemos nos 
preocupar com o uso de cores contrastantes entre o fundo da página 
e a fonte utilizada, de forma a evitar que o usuário tenha dificuldades 
de visualização. Devemos evitar utilizar cores escuras para o fundo 
das páginas de conteúdo onde serão exibidos textos. Para esses casos, 
recomendamos o uso da cor branca. Você pode utilizar pequenos 
www.esab.edu.br 116
elementos de cor sobre um fundo predominantemente claro para separar 
conteúdos, delimitando suas áreas.
Nielsen e Loranger (2007, p. 240) destaca: “[...] vermelho mostra-se 
muito eficiente quando usado nas interfaces para chamar a atenção ou 
sinalizar algum perigo, porém seu uso deve ser evitado em áreas amplas 
ou como cor de fundo, pois se trata de uma cor dominante”. 
Portanto, não basta que você escolha a cor ideal, você precisa estudar as 
possíveis combinações entre elas e decidir qual será, definitivamente, a 
mais adequada ao site. E o problema não é a escolha de uma cor, mas 
a escolha de uma combinação de cores de tal modo que se encaixem 
confortavelmente umas nas outras.
Dica
Uma boa prática que você deve adotar é evitar 
utilizar elementos que restrinjam o conteúdo, 
como o tamanho de fonte, fonte especificada e 
cores nas fontes, por exemplo. Esses elementos 
podem ser conflitantes com relação ao padrão 
visual do usuário. Algumas opções de formatação 
são universalmente aceitas, como: negrito, itálico, 
sublinhado, e os títulos (h1, h2, h3, h4, h5 e h6). 
Essas opções são mais do que suficientes para 
destacar e formatar o texto, além disso, elas 
asseguram que seu texto terá uma formatação 
eficiente em diferentes dispositivos (computador, 
celular, tablets), pois a maioria dos sistemas tem 
uma configuração padrão para essas opções. 
Nesta unidade, você aprendeu sobre a sintaxe de definição de cores para 
o texto do documento em HTML e os cuidados que precisa ter quanto 
ao seu uso. Na próxima unidade, você será apresentado à propriedade de 
definição de cor para o fundo da página. Até breve!
www.esab.edu.br 117
16 Como definiras cores de fundo da página HTML com CSS
Objetivo
Apresentar a sintaxe do comando background e sua utilização na 
formatação da cor de fundo da página.
Na última unidade, aprendemos sobre a sintaxe de definição de cores 
para o texto do documento em HTML e os cuidados que precisa ter 
quanto ao seu uso, você se lembra? Já nesta unidade, veremos como 
definir a cor de fundo dos documentos HTML por meio da propriedade 
background e suas variações. 
A regra CSS para definição da cor de fundo de um documento HTML 
segue o mesmo padrão utilizado para definição da cor do texto, como visto 
na unidade anterior, ou seja, pode ser definida por valores em hexadecimal, 
RGB ou palavras-chave. Porém, podemos utilizar também o valor 
transparente. O que muda em se tratando da cor de fundo é a regra a ser 
utilizada, chamada de background que, além de definir a cor de fundo, pode 
definir também uma imagem de fundo para qualquer elemento HTML. 
Você deve utilizar as seguintes propriedades para formatação do fundo: 
background-color, background-image, background-repeat, background-
position, background-attachment e background.
A propriedade background-color define a cor de fundo de um elemento 
(corpo da página, parágrafo, título etc.) em HTML e sua sintaxe é 
definida por: {background-color: valor da cor;}. Veja, nos códigos a seguir, 
exemplos de uso desta propriedade:
1. body {background-color: green;}
2. h1 {background-color: #00ff00;}
3. h2 {background-color: transparent;}
4. p {background-color: rgb (250, 0,0);}
www.esab.edu.br 118
A sintaxe do exemplo de número 1 especifica a cor de fundo em verde 
usando valor por palavra-chave (green) no elemento body (corpo da 
página). O exemplo de número 2 define a cor de fundo para o elemento 
h1 (título), na cor verde, em hexadecimal (#00ff00). O exemplo de 
número 3 determina a cor transparente (transparent) para o fundo do 
elemento h2 (título). O último exemplo, número 4, especifica a cor de 
fundo vermelha para o elemento parágrafo (p), usando a notação em 
RGB para gerar esta cor (quantidade de vermelho em 250, quantidade de 
verde em 0 e quantidade de azul e 0). 
A Figura 41 representa o resultado dessa operação. 
Figura 41 – Estilizando fundo em CSS.
Fonte: Elaborada pelo autor (2013).
A propriedade background-image define uma imagem de fundo para 
um elemento HTML. Recomendamos que, além da imagem, você 
defina também uma cor de fundo para o elemento, para os casos em 
que a imagem não for carregada pela página. A imagem a ser carregada 
é identificada por um endereço, chamado de URL (Uniform Resource 
Localization – localização universal de recursos), que deve ficar entre 
aspas, duplas (“) ou simples(‘). 
A sintaxe a seguir exemplifica como definir uma imagem como fundo da 
página:
01 {background-image: 
02 url(“http://us.cdn4.123rf.com/168nwm/nirots/nirots1206/
nirots120600063/14126166-eye-of-brazil-concept-brazil-
world-cup-2014.jpg”);
03 }
www.esab.edu.br 119
Note que o endereço da imagem a ser carregada deve ser precedido da 
cláusula URL, e o endereço deve estar entre parênteses e aspas.
A sintaxe da regra background-image é: {background-image:url(“endereço 
na web”);}
O exemplo a seguir ilustra como definir uma imagem como fundo da 
página, para o elemento body:
01 body {background-image: 
02 url(“http://www.sxc.hu/pic/s/n/na/nandoserpa/1399198_
sunrise_in_joo_pessoa.jpg”);
03 }
Quando carregado pelo navegador, o resultado da regra anterior será algo 
semelhante ao alcançado na Figura 42.
Figura 42 – Estilizando fundo com imagem em CSS.
Fonte: Elaborada pelo autor (2013).
A propriedade background-repeat define como a imagem se repetirá na 
apresentação. Os valores aceitos para essa propriedade são: no-repeat, repeat, 
repeat-x, repeat-y. A Figura 43 ilustra o que representa cada um desses 
valores no momento da apresentação da imagem e a regra de repetição.
www.esab.edu.br 120
No-repeatrepeat-yrepeat-x
x x
yy
repeat
Figura 43 – Formas de repetição da imagem.
Fonte: Elaborada pelo autor (2013).
Se você definir uma forma de repetição da imagem, a mesma será 
repetida a partir do canto superior esquerdo, tanto na horizontal quanto 
na vertical, ou seja, por padrão uma imagem de fundo do elemento é 
repeat. Se você definir como forma de apresentação a opção no-repeat, 
a imagem será posicionada no canto superior esquerdo. Se a opção for 
repeat-x, a imagem será repetida no sentido horizontal, se for repeat-y, 
será repetida na vertical.
A propriedade background-position determina a posição inicial da imagem 
de fundo. Os valores possíveis para esta propriedade são: left (esquerda), 
right (direita), top (em cima), bottom (embaixo) e center (centro). A 
sintaxe dessa propriedade é: 
01 {background-position: valor1 valor2;}. 
A ordem em que são declarados os valores é indiferente. Porém, quando 
você declarar apenas um valor, o outro valor será por padrão center.
Os exemplos a seguir ilustram como definir a posição da imagem no 
elemento HTML:
1. body {background-position: left center;}
2. p {background-position: right top ;}
3. h1 {background-position: center top ;}
www.esab.edu.br 121
O primeiro exemplo define a imagem no centro e à esquerda (left center) 
para o elemento body. No segundo exemplo, a imagem ficará no centro 
e em cima (right top), para a imagem do elemento parágrafo. No terceiro 
exemplo, a imagem ficará ao centro (center top) para o elemento h1. 
Para facilitar a definição da posição da imagem, você pode utilizar as 
palavras-chave como valor da propriedade background-position. No 
quadro a seguir, apresentamos estas palavras-chave:
Palavra-Chave Posição
left top Esquerda em cima
top left Esquerda em cima
right top Direita em cima
top right Direita em cima
left bottom Esquerda embaixo
bottom left Esquerda embaixo
right bottom Direita embaixo
bottom right Direita embaixo
center top Centro em cima
top center Centro em cima
Top Centro em cima
center right Centro à direita
right center Centro à direita
Right Centro à direita
center bottom Centro embaixo
bottom center Centro embaixo
bottom Centro embaixo
center left Centro à esquerda
left center Centro à esquerda
Left Centro à esquerda
center center No centro
center No centro
Quadro 8 – Palavras-chave para definição da posição da imagem.
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 122
A propriedade background-attachment determina se a imagem ficará fixa 
ou não em relação à área de apresentação da imagem. Ou seja, caso o 
usuário faça uma rolagem da tela do navegador, a imagem acompanhará 
a rolagem da tela ou se manterá no mesmo espaço. Para essa propriedade, 
os valores podem ser: scroll ou fixed. 
A sintaxe da regra é: {background-attchment: valor;}.
A propriedade background possibilita declarar todas as propriedades 
do fundo em uma única regra. Você não precisa declarar todas as 
propriedades, porém as ausentes terão o valor padrão. A sintaxe da regra 
background é:
01 { background:
02 background-color
03 background-image 
04 background-repeat
05 background-attchment
06 background-position
07 }
A seguir, você verá a propriedade background para o corpo da página do 
documento HTML:
01 body{
02 background-color: green;
03 background-image: 
04 url(“http://www.sxc.hu/pic/s/n/na/nandoserpa/1399198_
sunrise_in_joo_pessoa.jpg”);
05 background-repeat: no-repeat;
06 background-attachment:fixed;
07 background-position:top center;
08 }
Chegamos ao final de mais uma unidade e agora você conhece a sintaxe 
de definição do fundo do documento, em HTML. Na próxima unidade, 
você poderá desenvolver uma página para praticar as regras apresentadas 
anteriormente.
www.esab.edu.br 123
17 Construindo uma página HTML colorida
Objetivo
Possibilitar o desenvolvimentoe a visualização de uma página HTML 
com cores de fundo personalizadas com uso do comando background.
Na última unidade, você aprendeu a sintaxe de definição do fundo 
do documento, em HTML. Agora, você poderá desenvolver algumas 
páginas HTML com formatação do fundo. Utilizaremos o editor de 
texto NotePad++ para edição das regras em CSS e das páginas HTML, 
bem como para a execução do arquivo no navegador.
Começaremos utilizando a formatação de cor do fundo, por meio da 
regra background-color com valores utilizando palavras-chave. Para tanto, 
no editor de texto, escreva o algoritmo a seguir:
Algoritmo 20 – Regras usando background-color
01 body{
02 color:black;
03 background-color: green;
04 }
05 p{
06 color:black;
07 background-color: blue;
08 }
09 h1{
10 color:black;
11 background-color: red;
12 } 
Fonte: Elaborado pelo autor (2013).
Salve a regra CSS com o nome: “corfundo01.css.”
www.esab.edu.br 124
A regra especifica o padrão de cor de fundo (background-color) e cor do 
texto (color) para os elementos BODY, P e H1. Para testar a regra, vamos 
criar uma página HTML com os elementos BODY, P e H1. No editor, 
escreva o seguinte código:
Algoritmo 21 – Página cor de fundo - color
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>Exemplo</title>
05 <link rel= “stylesheet” type= “text/css” href= “ 
corfundo01.css” media= “all”>
06 </head>
07 <body> 
08 Texto do Corpo da Página
09 <p> Texto no Parágrafo da Página</p>
10 <h1> Texto em H1 </h1>
11 </body>
12 </html>
Fonte: Elaborado pelo autor (2013).
Salve o código com o nome “corfundo01.html”.
Note que na linha 5 o comando href=”corfundo01.css” faz a ligação entre 
o documento HTML e a regra CSS que será carregada. Atenção! Caso 
você tenha salvado o arquivo de regras CSS com outro nome, diferente 
de “corfundo01. css”, mude o valor do href para o nome que você deu 
para o arquivo, por exemplo, href=”nomequevocedeu01.css”. 
Agora, execute o arquivo “corfundo01.html”, o resultado deve ser algo 
semelhante à figura a seguir:
www.esab.edu.br 125
Figura 44 – Resultado do carregamento do arquivo corfundo01.html.
Fonte: Elaborada pelo autor (2013).
Vamos agora gerar um novo documento HTML com cores para os 
elementos BODY, P e H1. Porém, utilizaremos o formato da cor 
usando a função RGB. Crie um novo documento no editor e escreva o 
seguinte código:
Algoritmo 22 – Página cor de fundo – color com RGB
01 body{
02 color:green;
03 background-color: RGB(0,0,0);
04 }
05 p{
06 color:black;
07 background-color:RGB(255,30,120);
08 }
09 h1{
10 color:blue;
11 background-color:RGB(255,10,10);
12 }
Fonte: Elaborado pelo autor (2013).
Salve a regra CSS com o nome de “corfundo02.css.”
Não vamos criar um novo arquivo HTML, vamos apenas mudar a 
cor do arquivo “corfundo01.html”, do exercício anterior. Para isso, 
abra o arquivo e altere a linha 5 do arquivo, mudando a propriedade 
href= “corfundo01.css” para href= “corfundo02.css”. Salve o arquivo, 
www.esab.edu.br 126
se o navegador não mostrar a página com os efeitos dessas alterações, 
pressione a tecla F5 para atualização do documento, caso contrário será 
necessário executar o arquivo. O resultado será semelhante à Figura 45:
Figura 45 – Resultado do carregamento do arquivo corfundo01.html usando RGB.
Fonte: Elaborada pelo autor (2013).
Note que esta é uma grande vantagem do uso do CSS: uma vez mudada 
a regra de referência no arquivo HTML, todos os elementos afetados 
pela regra são automaticamente estilizados, sem a necessidade de alterar 
o documento linha por linha. Além de mudar as cores de fundo, as cores 
dos textos também foram alteradas no arquivo “corfundo02.css”.
Agora que você já sabe como mudar as cores do documento HTML, 
vamos inserir a imagem de fundo para toda a página?
A imagem que será carregada no documento HTML se encontra no 
endereço: <http://us.cdn1.123rf.com/168nwm/wikki/wikki1105/
wikki110500084/9626507-collection-of-vector-eggs.jpg>.
Crie um novo documento no editor e escreva a seguinte regra CSS:
Algoritmo 23 – Colocando imagem de fundo
01 body{
02 background-color: black;
03 background-image:url(“http://us.cdn1.123rf.com/168nwm/
wikki/wikki1105/wikki110500084/9626507-collection-of-
vector-eggs.jpg”);
04 }
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 127
Na definição da regra anterior, caso a imagem não seja carregada pelo 
navegador, a página terá o fundo em preto, definido por backgroud-color: 
black. Por se tratar de uma imagem da internet, o endereço deve ser 
informado entre aspas, dentro de parênteses e seguido da cláusula URL, 
conforme demonstrado na linha 3.
Salve o arquivo com nome “imagemfundo01.css”.
No próximo passo, vamos criar um arquivo HTML que carregue essa 
regra, apresentando a imagem no fundo de todo o documento, pois a 
imagem foi definida para o elemento BODY. Crie um novo documento 
no editor, e codifique o seguinte algoritmo:
Algoritmo 24 – Página HTML com imagem de fundo
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>Exemplo Com Imagem</title>
05 <link rel= “stylesheet” type= “text/css” href= 
“imagemfundo01.css” media= “all”>
06 </head>
07 <body> 
08 Texto do Corpo da Página
09 </body>
10 </html>
Fonte: Elaborado pelo autor (2013).
Na linha 5, na propriedade href=”imagemfundo01.css”, é realizada a 
ligação entre o documento HTML e o arquivo CSS. Você deve salvar 
o arquivo com o nome “paginacomimagem.html” e depois executá-lo. 
Como não foi definido um padrão para a repetição das imagens, ela será 
repetida em toda a página. No próximo exemplo, vamos tratar a forma 
de repetição da imagem.
www.esab.edu.br 128
O resultado da apresentação da página será semelhante à figura a seguir:
Figura 46 – Arquivo HTML com imagem de fundo.
Fonte: Elaborada pelo autor (2013).
Vamos acrescentar à regra CSS salva como imagemfundo01.css do 
exercício anterior, a propriedade para que a imagem não se repita na página 
HTML. Para isso, abra o arquivo imagemfundo01.css e acrescente a seguinte 
linha: background-repeat:no-repeat. O algoritmo terá a seguinte estrutura:
Algoritmo 25 – Imagem não repetida
01 body{
02 background-color: RGB(0,0,0);
03 background-image:url(“http://us.cdn1.123rf.com/168nwm/
wikki/wikki1105/wikki110500084/9626507-collection-of-
vector-eggs.jpg”);
04 background-repeat:no-repeat;
05 }
Fonte: Elaborado pelo autor (2013).
Salve o arquivo paginacomimagem.html e execute-o. A imagem carregará 
novamente, porém, sem repeti-la. A figura a seguir ilustra como ficará a 
página ao ser carregada no navegador:
www.esab.edu.br 129
Figura 47 – Arquivo HTML com imagem de fundo sem repetição.
Fonte: Elaborada pelo autor (2013).
Vamos criar uma regra CSS que defina ao mesmo tempo a imagem a ser 
carregada, a forma de repetição, a cor do fundo e a imagem como fixa, 
mesmo que a página seja rolada para cima ou para baixo. Abra o editor e 
crie um novo arquivo com a regra do Algoritmo 26.
Algoritmo 26 – Propriedade Background Completa
01 body{
02 background-color: green;
03 background- 
04 image:url(“http://us.cdn1.123rf.com/168nwm/wikki/
wikki1105/wikki110500084/9626507- 
05 collection-of-vector-eggs.jpg”);
06 background-repeat: repeat-x;
07 background-attachment:fixed;
08 background-position:center;
09 }
Fonte: Elaborado pelo autor (2013).
Salve o arquivo com nome “background.css”.
www.esab.edu.br 130
Para testar a regra, crie um novo arquivo HTML com o seguinte código:
Algoritmo 27 – Página com Background
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>Exemplo Com Imagem</title>
05 <link rel= “stylesheet” type= “text/css” href=“background.css” media= “all”>
06 </head>
07 <body> 
08 Texto do Corpo da Página
09 </body>
10 </html>
Fonte: Elaborado pelo autor (2013).
Salve o arquivo com nome “paginabackground.html” e o execute.
As imagens serão repetidas no centro da página, porque a regra 
background-repeat está como horizontal (repeat-x) e a propriedade 
background-position está como “center “.
E este é o último exercício desta unidade. Você pôde exercitar as 
propriedades de definição de cores e fundo dos documentos HTML. 
Além disso, pôde refazer os exercícios mudando os valores das cores, a 
imagem a ser carregada e as formas de repetição da imagem, para fixar os 
conceitos apresentados. Na próxima unidade, aprenderemos a criar listas 
de valores para páginas HTML.
Tarefa dissertativa
Caro estudante, convidamos você a acessar o 
Ambiente Virtual de Aprendizagem e realizar a 
tarefa dissertativa.
www.esab.edu.br 131
18 Componente visual para lista de valores em HTML
Objetivo
Apresentar a sintaxe do comando list e sua utilização na criação de 
lista de valores nas páginas em HTML.
Na unidade anterior, você pôde exercitar as propriedades de definição 
de cores e fundo dos documentos HTML. Pôde também refazer os 
exercícios mudando os valores das cores, a imagem a ser carregada e as 
formas de repetição da imagem para fixar os conceitos apresentados. 
Assim, complementando nossos estudos nesta disciplina, daremos início 
ao estudo da implementação de listas de valores nas páginas HTML. 
Essas listas compreendem desde a apresentação de valores no corpo das 
páginas, até a criação de menus. As listas podem ser utilizadas para a 
apresentação de valores não ordenados, valores ordenados e definições.
As listas não ordenadas são marcadas pelas tags <ul> e </ul>. Os itens 
que compõem a lista são marcados pelas tags <li> e </li>. A figura a 
seguir ilustra a estrutura de um elemento UL, no qual os itens não 
possuem indicadores de ordem, como números ou letras:
Lista
<ul>
</ul>
<li>
<li>
<li>
</li>
</li>
</li>
Figura 48 – Estrutura da lista não ordenada.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 132
Os elementos da lista não ordenada, quando carregados pelo navegador, 
são apresentados com uma marca antes de cada item, como você pode 
ver na figura a seguir:
Item 1
Item 2
Item 3
Figura 49 – Apresentação da lista não ordenada.
Fonte: Elaborada pelo autor (2013).
Para criar uma lista não ordenada, usaremos a sintaxe a seguir:
<ul>
 <li> </li>
</ul>
Para cada item da lista, você deve inserir um valor entre as tags <li> 
e </li>. No exemplo a seguir, criaremos uma lista não ordenada para 
apresentação dos valores Uva, Maçã e Banana.
Algoritmo 28 – Exemplo de Lista Não Ordenada
01 <ul>
02 <li> Uva </li>
03 <li> Maça </li>
04 <li> Banana </li>
05 </ul>
Fonte: Elaborado pelo autor (2013).
Em HTML, você pode escrever a tag <li> sem o fechamento </li>, 
porém isso deve ser evitado. A boa prática orienta que sempre se procure 
fechar a tag ao abri-la; nos documentos padrão XML o fechamento da 
tag é obrigatório. Fechando a tag, você terá um documento padronizado 
tanto para HTML, quanto para variações do XML (XHTML). 
www.esab.edu.br 133
Os valores informados como itens de uma lista podem ser números ou 
letras, maiúsculas ou minúsculas, veja o exemplo a seguir:
Algoritmo 29 – Exemplo de Lista Não Ordenada – Tipos de Itens
01 <ul>
02 <li> Uva R$ 3,50</li>
03 <li> Maça R$ 2,40</li>
04 <li> BANANA R$ 0,80 </li>
05 </ul>
Fonte: Elaborado pelo autor (2013).
Para criação de listas ordenadas, você deve usar a tag <ol> e </ol> 
para definir o início e final da lista. Os itens da lista continuam sendo 
marcados por meio das tags <li> e </li>. Os itens que fazem parte da lista 
ordenada são apresentados com uma marca sequencial e crescente, para 
identificação da ordem dos elementos.
Para criar uma lista ordenada, usaremos a sintaxe a seguir:
<ol>
 <li> </li>
</ol>
No exemplo a seguir, você verá uma lista ordenada para os itens Uva, 
Maçã e Banana.
Algoritmo 30 – Exemplo de Lista Ordenada
01 <ol>
02 <li>Uva</li>
03 <li>Maça</li>
04 <li>Banana</li>
05 </ol>
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 134
Quando carregado pelo navegador, o resultado será tal qual apresentado 
na Figura 50.
1. Uva
2. Maçã
3. Banana
Figura 50 – Lista ordenada.
Fonte: Elaborada pelo autor (2013).
Note que os valores da lista não são ordenados nem classificados, o que 
temos é um identificador (número) crescente para cada item da lista.
A lista de definições possibilita a criação de listas de termos e significados. 
A lista é marcada pelas tags <dl> e </dl>, os termos que compõem a lista 
são marcados pelas tags <dt> e </dt> e as explicações de cada termo, pelas 
tags <dd> e </dd>.
A figura a seguir ilustra essa estrutura:
<dl>
 <dt>termo</dt>
 <dd>de�nição</dd>
</dl>
Lista
Figura 51 – Estrutura da lista de definições.
Fonte: Elaborada pelo autor (2013).
A sintaxe para criação de listas de definição é:
<dl>
 <dt> </dt>
 <dd> </dd>
 <dt> </dt>
 <dd> </dd>
</dl>
Figura 52 – Estrutura da lista de definição.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 135
O exemplo a seguir criará uma lista de definições para montar a seguinte 
estrutura:
Lista Não Ordenada
 São as listas marcadas pelas tags UL
Lista Ordenadas
 São as listas marcadas pelas tags OL
Lista de De�nição
 São as listras marcadas pelas tags DL, DT, DD
Figura 53 – Lista de definições.
Fonte: Elaborada pelo autor (2013).
Para tanto, vamos considerar os textos “Lista Não Ordenada”, “Lista 
Ordenada” e “Lista de Definição” como títulos da lista, portanto, 
definidos pela tag <dt>. Os textos “São as listas marcadas pelas tags UL”, 
”São as listas marcadas pelas tags OL” e “São as listas marcadas pelas tags 
DL, DT e DD” são definições de conteúdo, por isso, marcados pela tag 
<dd>. Como os títulos e definições fazem parte dos itens que compõem 
uma lista de definições, todos eles devem ser marcados pelas tags <dl>.
A sintaxe completa para criação dessa lista de definições é:
Algoritmo 31 – Exemplo de Lista de Definições
01 <dl>
02 <dt>Lista Não Ordenada</dt>
03 <dd>São as listas marcadas pelas tags UL</dd>
04 <dt>Lista Ordenada</dt>
05 <dd>São as listas marcadas pelas tags OL</dd>
06 <dt>Lista de Definição</dt>
07 <dd>São as listas marcadas pelas tags DL, DT e DD</dd>
08 </dl>
Fonte: Elaborado pelo autor (2013).
Nas listas de definição, os textos são apresentados com um recuo em 
relação ao título da definição.
www.esab.edu.br 136
Você pode combinar cada um dos tipos de listas vistos anteriormente 
e formar o que chamamos de listas mistas. O exemplo a seguir 
implementa uma página HTML com listas ordenadas e não ordenadas, 
ou seja, uma lista mista. Acompanhe:
Algoritmo 32 – Exemplo de Lista Mista
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>Exemplo Com Imagem</title>
05 </head>
06 <body> 
07 <ul>
08 <li>Livro</li>
09 <ul>
10 <li>Capítulo 1</li>
11 <ol>
12 <li>Unidade 1</li>
13 <li>Unidade 2</li>
14 </ol>
15 <li>Capítulo 2</li>
16 <ol>
17 <li>Undidade A </li>
18 <li>Undidade B </li>
19 <li>Undidade C </li>
20 </ol>
21 </ul>
22 </ul>
23 </body>
24 </html>
Fonte: Elaborado pelo autor (2013).
Como resultado, a lista, ao ser carregada pelo navegador, apresentará 
layout conforme a Figura 54, veja:
www.esab.edu.br 137
Livro
 Capítulo 1
 1. Unidade 1
 2. Unidade 2
 Capítulo 2
 1. Unidade A
 2. Unidade B
 3. Unidade C
Figura 54 – Apresentação dalista mista.
Fonte: Elaborada pelo autor (2013).
Você conheceu nesta unidade os comandos HTML para criação de listas. 
Na continuação de nossos estudos, você será apresentado à regra CSS list-
style-type, possibilitando estilizar as listas, dando a elas uma apresentação 
mais elegante.
Atividade
Chegou a hora de você testar seus conhecimentos 
em relação às unidades 10 a 18. Para isso, dirija-
se ao Ambiente Virtual de Aprendizagem (AVA) e 
responda às questões. Além de revisar o conteúdo, 
você estará se preparando para a prova. Bom 
trabalho!
www.esab.edu.br 138
Resumo
Nestas unidades, você pôde verificar a importância da definição de 
cores na apresentação do site, nos textos e fundo da página. Mais do 
que conhecer a sintaxe das regras CSS text, font e background, é essencial 
que você se preocupe com o resultado final da apresentação da página 
HTML, para que o site seja útil e agradável.
Você aprendeu que a regra background possibilita a formatação do fundo 
da página com cores e imagens. Lembre-se de que, quando definir uma 
imagem para o fundo da página, é importante definir também a cor do 
fundo da página considerando o caso de a imagem não ser carregada pelo 
navegador, assim a página terá um padrão de layout definido por você.
Nas unidades 14 e 17 você pôde criar alguns documentos HTML com 
regras CSS de estilo para a cor do texto e fundo da página, procure 
refazê-los com novos estilos de cores, fundos, imagens, dando asas à sua 
imaginação.
Finalmente, na última unidade, apresentamos a regra CSS para criação 
de listas, um recurso muito utilizado nos documentos HTML, que 
permite a elaboração de listas ordenadas, não ordenadas e de definição. A 
sintaxe de criação das listas é muito simples, seguindo uma estrutura de 
marcação da lista e dos itens que a compõem.
www.esab.edu.br 139
19 Como formatar e estilizar as listas em HTML com o uso de CSS 
Objetivo
Apresentar a sintaxe do comando list-style e a sua utilização na 
criação de lista de valores estilizada nas páginas em HTML.
Na última unidade, aprendemos sobre a regra CSS para estilizar as listas, 
que podem ser ordenadas ou não ordenadas, um recurso muito utilizado 
nos documentos HTML, que permite a elaboração de listas ordenadas, 
não ordenadas e de definição, você se lembra? 
Assim, complementando nossos estudos, nesta unidade apresentaremos 
a regra CSS para estilização de menus e das listas, um elemento muito 
utilizado em documentos HTML para formatação de links (atalhos para 
outras páginas HTML), por meio da propriedade list-style-type. Faremos 
isso a partir da abordagem de Silva (2008).
A sintaxe da regra CSS list-style-type é: {list-style-type: tipo;}.
Essa propriedade permite que você faça a estilização da lista com a 
apresentação em três formas diferentes: glifos, sistema numérico e 
sistema alfabético. Dois desses três tipos de apresentação foram vistos na 
unidade anterior, na formação das listas não ordenadas, que usa glifos, e 
listas ordenadas, que usa sistema numérico. 
Os marcadores do tipo glifo podem ser: disc (bolinha pintada), circle 
(bolinha vazia) e square (quadrado). É importante que você saiba que a 
aparência dos glifos depende do navegador, e cada nível da lista utiliza 
um tipo de glifo. A lista que utiliza glifos é a lista não ordenada, que por 
padrão é do tipo disc.
www.esab.edu.br 140
A Figura 55 ilustra os três tipos de glifos:
Item 1
Item 2
Item 1
Item 2
Item 1
Item 2
Disc Circle Square
Figura 55 – Tipos de glifos.
Fonte: Elaborada pelo autor (2013).
A seguir, você verá a aplicação da regra CSS para criação de uma lista 
estilizada:
Algoritmo 33 – Lista estilizada
01 ul{
02 list-style-type:square;
03 }
Fonte: Elaborado pelo autor (2013).
Na linha 1 do código anterior, você tem o elemento HTML que será 
estilizado, a lista não ordenada <UL>. Já na linha 2, é definido o tipo de 
glifo que será utilizado na apresentação da lista. Para aplicar essa regra é 
necessário que ela seja salva em um arquivo texto com o nome lista01.css 
e posteriormente seja incorporado ao documento HTML. No Algoritmo 
34, você verá um documento HTML formatado para essa regra CSS. Note 
que, na linha 5 do algoritmo, o arquivo lista01.css é referenciado.
www.esab.edu.br 141
Algoritmo 34 – Página HTML com lista estilizada
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>Exemplo</title>
05 <link rel= “stylesheet” type= “text/css” href= 
“lista01.css” media= “all”>
06 </head>
07 <body> 
08 <ul>
09 <li> Florianópolis -SC </li>
10 <li> Palhoça - SC</li>
11 <li> São José - SC </li>
12 </ul>
13 </body>
14 </html>
Fonte: Elaborado pelo autor (2013).
Na linha 5, temos a associação do documento HTML à regra “lista01.
css”, que contém a estilização da lista do tipo não ordenada (UL). Para 
efeito da regra, basta que no documento, da linha 8 a 12, existam listas 
do tipo UL (linha 8), e a formatação será automática. A regra CSS é 
aplicada automaticamente ao encontrar o elemento da regra (seletor) no 
documento.
A Figura 56 representa o layout da lista quando carregada no navegador:
Florianópolis - SC
Palhoça - SC
São José - SC
Figura 56 – Lista não ordenada com glifo square.
Fonte: Elaborada pelo autor (2013).
Para a lista ordenada, devemos utilizar marcadores numéricos, cujos 
tipos são apresentados no Quadro 9, acompanhe:
www.esab.edu.br 142
Tipo Aparência
Decimal Numeração decimal iniciando em 1.
decimal-leading-zero Numeração decimal iniciando em 1 com zero para as unidades.
lower-roman Algarismos romanos em minúsculo.
upper-roman Algarismos romanos em maiúsculo.
Georgian Algarismos georgianos.
Armenian Algarismos armênios.
Quadro 9 – Tipos de marcadores numéricos.
Fonte: Elaborado pelo autor (2013).
A Figura 57 ilustra cada um desses tipos de marcadores numéricos, veja:
Figura 57 – Tipos de marcadores numéricos.
Fonte: Elaborada pelo autor (2013).
Você deve ficar atento, pois nem todos os navegadores suportam todos 
esses tipos de marcadores, entre eles, o Internet Explorer é o que mais 
apresenta problemas com essas marcações.
www.esab.edu.br 143
Observe como o Algoritmo 35 demonstra como criar uma lista ordenada 
utilizando números romanos maiúsculos como marcador, acompanhe:
Algoritmo 35 – Lista ordenada com números romanos maiúsculos
01 ol{ 
02 list-style-type:upper-roman;
03 }
Fonte: Elaborado pelo autor (2013).
Note que, na linha 1, o elemento HTML utilizado foi <OL>, que indica 
listas ordenadas.
As listas ordenadas também podem ser construídas com itens 
identificados por marcadores alfanuméricos. Os valores que definem esse 
tipo de marcador são apresentados no Quadro 10:
Tipo Aparência
lower-alpha Letras minúsculas.
lower-latin Letras minúsculas.
upper-alpha Letras maiúsculas.
upper-latin Letras maiúsculas.
Lower-greek Letras gregas.
Quadro 10 – Tipos de marcadores alfanuméricos.
Fonte: Elaborado pelo autor (2013).
Você pode ver na Figura 58 cada um dos tipos de marcadores 
alfanuméricos:
www.esab.edu.br 144
a. Item A
b. Item B
c. Item C
d. Item D
e. Item E
A. Item A
B. Item B
C. Item C
D. Item D
E. Item E
α. Item A
β. Item B
γ. Item C
δ. Item D
ε. Item E
lower-alpha
lower-latin
upper-alpha
upper-latin
lower-greek
Figura 58 – Tipos de marcadores alfanuméricos.
Fonte: Elaborada pelo autor (2013).
Assim como é possível definir o tipo de marcador, seja ele um glifo, 
numérico ou alfanumérico, é possível também retirar o marcador da lista; 
para tanto, você precisa utilizar a sintaxe: {list-style-type: none;}.
A seguir, você verá no exemplo a regra CSS que retira o marcador para as 
listas ordenadas <OL> e não ordenadas <UL>:
Algoritmo 36 – Definindo listas sem marcador
01 ul{ 
02 list-style-type:none;03 }
04 ol{ 
05 list-style-type:none;
06 }
Fonte: Elaborado pelo autor (2013).
Uma possibilidade muito interessante para definição de marcadores 
é personalizá-lo com uso de imagens, em substituição ao marcador 
padrão da lista utilizada. Para criar seu marcador, você deve utilizar 
a propriedade list-style-image, e sua sintaxe é: {list-style-image: 
url(“caminho para o arquivo de imagem”);}. É válido utilizar somente 
o nome do arquivo se a imagem estiver no mesmo diretório em que se 
encontra o documento HTML que faz referência a este arquivo com a 
imagem. Por exemplo, caso o arquivo nomeado imagem.bmp esteja no 
mesmo diretório do documento HTML, a URL ficará com a sintaxe url 
(“imagem.bmp”). Mas se a imagem estiver em um diretório chamado, 
por exemplo, de minhas_imagens, é preciso indicar o caminho e o nome 
do arquivo, dessa forma:
www.esab.edu.br 145
“../minhas_imagens/imagem.bmp”
Onde: “../” indica que o diretório “minhas_imagens” se encontra no 
mesmo diretório em que se encontra o documento HTML.
Como a intenção é utilizar esse marcador em substituição ao marcador 
padrão, você deve utilizar também a propriedade list-style-type com o 
valor none.
No Algoritmo 37, você tem o código com a regra CSS que define a 
imagem do arquivo “ícone.png” como marcador a ser utilizado na lista 
não ordenada:
Algoritmo 37 – Definindo imagem do marcador
01 ul{ 
02 list-style-type:none;
03 list-style-image:url(“icone.png”);}
04 }
Fonte: Elaborado pelo autor (2013).
Na linha 1, informamos o elemento HTML que será estilizado, <UL>, 
ou seja, listas não ordenadas. Na linha 2, por meio da propriedade list-
style-type, com valor none, o marcador é retirado da lista. Por fim, na 
linha 3, é atribuída à imagem “ícone.png” como marcador da lista.
O arquivo “ícone.png” possui o seguinte layout:
Figura 59 – Imagem do marcador.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 146
O código que cria a página HTML possui a seguinte estrutura:
Algoritmo 38 – Página HTML com lista estilizada
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>Exemplo</title>
05 <link rel= “stylesheet” type= “text/css” href= 
“lista01.css” media= “all”>
06 </head>
07 <body> 
08 <ul>
09 <li> Florianópolis -SC </li>
10 <li> Palhoça - SC</li>
11 <li> São José - SC </li>
12 </ul>
13 </body>
14 </html>
Fonte: Elaborado pelo autor (2013).
A Figura 60 representa como ficará a lista ao ser carregada no navegador.
Florianópolis - SC
Palhoça - SC
São José - SC
Figura 60 – Marcador com imagem.
Fonte: Elaborada pelo autor (2013).
O posicionamento do item da lista está relacionado à propriedade list-
style-position, cujos valores podem ser: inside e outside. A sintaxe de 
utilização da regra é: {list-style-position: valor;}.
www.esab.edu.br 147
A Figura 61 ilustra as posições outside e inside em relação à página 
HTML, acompanhe:
Página
Recuo
Lista
Posição
inside
Posição
outside
Figura 61 – Posição da lista.
Fonte: Elaborada pelo autor (2013).
Note que a posição inside representa um recuo em relação à posição 
outside.
Você também pode informar as propriedades de estilização da lista por 
meio da propriedade list-style, que possui a seguinte sintaxe:
{list-style: valor da list-style-type valor da list-style-position valor list-
style-image;}
O Quadro 11 demonstra o uso dessa propriedade:
Forma Normal Forma Abreviada
ul { 
 list-style-type:square;
 list-style-position:outside;
 list-style-image:url(“icone.png”);
}
ul { 
 list-style: square outside url(“icone.png”);
}
Quadro 11 – Comparativo do comando list-style.
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 148
Nesta unidade, você conheceu as regras CSS para estilização das listas. 
Continuaremos o estudo das listas na próxima unidade, acrescentando 
novas propriedades para identificá-las e posteriormente transformá-las 
em menus. Vamos lá?!
Fórum
Caro estudante, dirija-se ao Ambiente Virtual de 
Aprendizagem da Instituição e participe do nosso 
Fórum de discussão. Lá você poderá interagir com 
seus colegas e com seu tutor de forma a ampliar, 
por meio da interação, a construção do seu 
conhecimento. Vamos lá?
www.esab.edu.br 149
20 Como criar uma seleção de valores nas páginas HTML
Objetivo
Apresentar a sintaxe dos comandos seletor id e seletor class e como 
aplicá-los na construção de caixas de seleção para páginas HTML.
Na unidade anterior, você conheceu as regras css para estilização das 
listas. Nesta unidade, detalharemos a função do seletor na regra css e as 
duas principais formas de identificá-los, por número ou por nome.
Antes de começarmos a estudar os seletores id e class, é importante que 
você lembre que seletor é o alvo da regra css, ou seja, o elemento de 
marcação (tag) que define o local da página HTML no qual a regra terá 
efeito, como vimos na unidade 11
Utilizamos esse conceito na definição de todas as regras css implementadas 
até aqui, como por exemplo, quando definimos o seletor <p> parágrafo 
com textos na cor azul, conforme veremos no código a seguir:
Algoritmo 39 – Regra de Cor do Texto no Parágrafo
01 p {
02 color : blue ;
03 }
Fonte: Elaborado pelo autor (2013).
Na linha 1, a regra css especifica o seletor <p> como elemento que será 
afetado pela estilização que está sendo criada.
Nesse exemplo, e nos demais desenvolvidos até aqui, utilizaremos uma 
das formas mais simples para determinar o seletor da regra, utilizando 
uma tag HTML em cada regra, porém os seletores podem ser diversos 
elementos ou uma combinação deles, por exemplo: p,h1,h2{background-
color:blue;}, em que a mesma regra é aplicada aos elementos parágrafos 
(p) e títulos (h1 e h2).
www.esab.edu.br 150
Nem sempre o uso da tag como elemento da regra CSS permite que você 
compreenda o que está sendo codificado. Para compreender o que cada 
tag faz, é necessário saber o seu significado. Portanto, além de conhecer 
as propriedades e sintaxes de uma regra, é necessário conhecer o que 
significa exatamente cada tag em HTML.
Para deixar a legibilidade da regra mais fácil, você pode apelidar os 
elementos HTML, dando um nome bem significativo para o que a regra 
se propõe a executar. Ao ato de dar um apelido, ou nome para o seletor, 
chamamos aplicar uma classe ao elemento. A maioria dos elementos 
HTML permite a aplicação de uma ou mais classes. 
A sintaxe utilizada para aplicação da classe ao elemento HTML consiste no 
uso do ponto (.) seguido do nome da classe. No exemplo a seguir, criaremos 
uma regra css com nome de ”paragrafo_azul”, com a propriedade “color: 
blue”. A opção pelo nome da regra se chamar “paragrafo-azul” é intencional, 
de forma que o nome indique a finalidade da regra.
Algoritmo 40 – Seletor do tipo classe
01 . paragrafo_azul {
02 color : blue;
03 }
Fonte: Elaborado pelo autor (2013).
Note que o seletor começa pelo ponto (.), como demonstrado na linha 1.
No exemplo a seguir, será inserida mais uma regra css com nome de 
“parágrafo_verde”, com a propriedade “color: green”. Utilizaremos o 
arquivo anterior; veja como ficará o código das regras:
Algoritmo 41 – Seletor do tipo classe
01 . paragrafo_azul {
02 color : blue;
03 }
04 . paragrafo_verde {
05 color : green;
06 }
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 151
Vimos, na unidade 12, que por se tratar de um arquivo com regras 
css e para que tenha efeito na página HTML, essa regra precisa ser 
incorporada e referenciada. O código a seguir apresenta a criação da 
página HTML com dois parágrafos que serão apresentados em cores 
diferentes:
Algoritmo 42 – Página HTML com cores diferentes no parágrafo
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content 
=”text/html” charset=”UTF-8”>
04 <title>Exemplo Classes </title>
05 <link rel= “stylesheet” type= “text/css” href= 
“teste.css” media= “all”>
06 </head>
07 <body> 
08 <p class =”paragrafo_azul”> Este texto ficará em 
AZUL. </p>
09 <p class =”paragrafo_verde”> Este texto ficará em 
VERDE. </p>
10 </body>
11 </html>
Fonte: Elaborado pelo autor (2013).
Na linha 5, como você pôde perceber, criamos a ligação entre o arquivo 
HTML e o arquivo de regras CSS, chamado “teste.css”, que possui 
a definição de cores dos parágrafos. Na linha 8 do código, inserimos 
um elemento <p> que será estilizado pela classe chamada “paragrafo_
azul”, na atribuição class=”paragrafo_azul”. Já na linha 9, criamos um 
novo parágrafo estilizado pela classe “paragrafo_verde”. A sintaxe para 
definição de um regra CSS para um elemento do documento HTML é 
bem simples: <elemento html class=”nome da classe css”>.
Um elemento pode ser estilizado por mais de uma classe; e quando isso 
acontecer, os nomes das classes devem ser separados por um espaço em 
branco, dessa forma: <elemento html class=”nome1 nome2”>.
No exemplo a seguir são criadas duas regras: a primeira regra define a cor 
da fonte, em branco; já a segunda, a cor de fundo, em verde:
www.esab.edu.br 152
Algoritmo 43 – Regras usando seletor de classe
01 .cor_branca{
02 color:white;
03 }
04 .fundo_verde {
05 background-color:green;
06 }
Fonte: Elaborado pelo autor (2013).
O código a seguir apresenta a criação de uma página HTML. Essa página 
apresentará um parágrafo que será estilizado com as regras anteriores:
Algoritmo 44 – Página HTML com elemento com duas classes
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>Exemplo Classes </title>
05 <link rel= “stylesheet” type= “text/css” href= “teste.
css” media= “all”>
06 </head>
07 <body> 
08 <p class =”cor_branca fundo_verde”> Este texto BRANCO 
e VERDE </p>
09 </body>
10 </html>
Fonte: Elaborado pelo autor (2013).
Perceba que, na linha 8 do código, inserimos um elemento <p> que será 
estilizado pelas classes chamadas “cor_branca” e “fundo_verde”, por isso 
a sintaxe ficou <p class =”cor_branca fundo_verde”> . Note também que 
os dois nomes de classes estão separados por um espaço em branco.
Uma forma opcional e complementar de criação de seletores de classe 
é especificar o tipo de marcador HTML antes do sinal de ponto (.) de 
nome da classe, conforme o código do exemplo a seguir. Observe.
www.esab.edu.br 153
Algoritmo 45 – Classes definidas com elemento e nome
01 p.modelo_um {background-color: yellow;}
02 p.modelo_dois {background-color:blue;}
03 ul.lista_quadrado{list-style-type:square;}
04 ul.lista_circulo{list-style-type:cricle;}
Fonte: Elaborado pelo autor (2013).
O uso do elemento antes do ponto garante maior legibilidade da regra 
que está sendo criada, pois destaca em qual elemento será aplicada.
Para usar a classe na definição do elemento na página HTML, salve 
um arquivo texto com o conteúdo do Algoritmo 45; nomeie seu 
arquivo como: teste.css. Crie um novo arquivo texto para criação do 
algoritmo que incorpora a regra CSS do documento teste.css, conforme 
mostraremos no código a seguir. Acompanhe:
Algoritmo 46 – Página HTML com utilização de seletor do tipo classe
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>Exemplo Classes </title>
05 <link rel= “stylesheet” type= “text/css” href= “teste.
css” media= “all”>
06 </head>
07 <body> 
08 <p class =”modelo_um”> Este texto ficará com p1 </p> 
09 <p class =”modelo_dois”> Este texto ficará com p2 </
p> 
10 <ul class=”lista_quadrado”>
11 <li> item 1 </li>
12 <li> item 2 </2>
13 </ul>
14 <ul class=”lista_circulo”>
15 <li> item 1 </li>
16 <li> item 2 </2>
17 </ul>
18 </body>
19 </html>
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 154
Salve arquivo como nome algoritmo46.html e execute-o no navegador 
de sua preferência. Note que, nas instruções em que se define a classe de 
estilização do elemento HTML, nas linhas 8, 9, 10 e 14, usamos somente o 
nome da classe.
O seletor id, muito utilizado em css, significa identificador. Um seletor 
id e seu respectivo nome só podem ser associados a um único elemento, 
garantindo que seu uso referencie um único elemento em todo o 
documento HTML.
A sintaxe de definição de um seletor id é:#nome do identificador. O 
uso do nome do elemento HTML junto ao nome do identificador é 
opcional.
Você verá no Quadro 12 um comparativo entre um seletor de classe com 
um seletor de id, acompanhe:
Seletor de Classe Seletor de Id
.seletor_classe{
 color:green;
}
#seletor_id{
 color:green;
}
Quadro 12 – Comparativo da sintaxe dos seletores.
Fonte: Elaborado pelo autor (2013).
Lembre-se de que: um seletor id é único, sendo aplicado uma única 
vez no arquivo de criação da regra css.
No próximo exemplo, veremos dois seletores id; o primeiro usa apenas 
o nome do identificador e o segundo, o elemento HTML e o nome do 
identificador:
www.esab.edu.br 155
Algoritmo 47 – Exemplo de seletor id
01 #topo{
02 background-color:#ccc;
03 padding:1em
04 }
05
06 p#base{
07 background-color:red;
08 font-weight:bold;
09 }
Fonte: Elaborado pelo autor (2013).
Salve esse algoritmo com o nome de testeid.css.
Para fazer a referência do tipo de seletor que será aplicado no elemento 
HTML, devemos incluir o termo id = “nome do seletor”, com a 
seguinte sintaxe: <elemento html id=”nome da classe css”>, conforme o 
exemplo a seguir:
Algoritmo 48 – Página HTML com seletor id
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text/
html” charset =”UTF-8”>
04 <title>Exemplo Classes </title>
05 <link rel= “stylesheet” type= “text/css” href= 
“testeid.css” media= “all”>
06 </head>
07 <body> 
08 <p id=”topo”> Este texto ficará com TOPO </p> 
09 <p id=”base”> Este texto ficará com BASE </p>
10 </body>
11 </html>
Fonte: Elaborado pelo autor (2013).
Salve esse algoritmo com o nome algoritmo48.html e execute-o no 
navegador de sua preferência.
www.esab.edu.br 156
Note que, nas linhas 8 e 9, acrescentamos o termo id seguido do nome 
do seletor com a regra css aplicada. O seletor id pode ser aplicado à 
maioria dos elementos HTML.
Chegamos ao final de mais uma unidade, estudamos recursos CSS muito 
utilizados: os seletores id e class. Na próxima unidade, vamos construir 
listas e caixas de seleção utilizando os conteúdos vistos até agora.
www.esab.edu.br 157
21 Construindo uma página HTML com listas e seleção
Objetivo
Possibilitar o desenvolvimento e a visualização de uma página HTML 
com caixas de seleção.
Nesta unidade, vamos praticar os conhecimentos estudados até este 
momento visando à utilização de listas ordenadas e não ordenadas, aplicando 
o seletor de classe e de identificador, estudados na unidade anterior. 
Vamos começar criando uma regra css que implementa quatro tipos de 
listas não ordenadas, com os formatos: sem marcador, com marcador em 
forma de disco (disc), círculo (circle) e quadrado (square). Assim, abra o 
editor de texto e escreva o código do Algoritmo 49.
Algoritmo 49 – Criando uma regra css de listas não ordenadas
01 ul.none { /* cria uma lista não ordenada sem marcador */
02 list-style-type: none;
03 }
04 ul.disc {/* cria uma lista não ordenada com marcador em 
forma de disco */
05 list-style-type: disc;
06 }
07 ul.circle {/* cria uma lista não ordenada em forma de 
círculo */
08 list-style-type: circle;
09 }
10 ul.square {/* cria uma lista não ordenada em forma de 
quadrado */
11 list-style-type: square;
12 }
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 158
Para melhor compreensão do código foram inseridos alguns comentários,que são os textos entre /* e */. Os comentários não são interpretados e 
apresentados pelo navegador, seu objetivo é facilitar a compreensão em 
relação à finalidade daquela instrução.
Agora, salve o arquivo com o nome exemplo1-unid21.css.
As listas criadas estão identificadas por um seletor de classe, no formato 
do elemento html, ponto (.) e nome da classe, como na linha 4, na 
instrução ul.none.
No código a seguir, vamos criar a página HTML que implementará as 
listas não ordenadas, estilizadas por identificadores de classe da regra CSS 
anterior. Por isso, no editor de texto, crie um novo arquivo e escreva o 
seguinte código:
Algoritmo 50 – Página HTML com listas não ordenadas
01 <head>
02 <meta http - equiv =”Content - Type” content =”text/
html” charset=”UTF-8”>
03 <link rel= “stylesheet” type= “text/css” href= 
“exemplo1-unid21.css” media= “all”>
04 <title>Exemplo Listas - Unidade 21</title >
05 </head>
06 <body>
07 Fornecedores:
08 <ul>
09 <li> Empresa A</li>
10 <li> Empresa B</li>
11 <li> Empresa C</li>
12 </ul>
13 Clientes:
14 <ul>
15 <li> Cliente A</li>
16 <li> Cliente B</li>
17 <li> Cliente C</li>
18 </ul>
19 Produtos:
20 <ul>
21 <li> Produto A</li>
22 <li> Produto B</li>
23 <li> Produto C</li>
www.esab.edu.br 159
24 <li> Produto D</li>
25 </ul>
26 Prazos de entrega:
27 <ul>
28 <li> 30 dias</li>
29 <li> 60 dias</li>
30 <li> 90 dias</li>
31 </ul> 
32 </body>
33 </html>
Fonte: Elaborado pelo autor (2013).
Salve o arquivo com o nome pagina1-unid21.html e execute-o no 
navegador.
O resultado será semelhante à Figura 62:
Empresa A
Empresa B
Empresa C
Fornecedores:
Produto A
Produto B
Produto C
Produto D
Produtos:
Cliente A
Cliente B
Cliente C
Clientes:
30 dias
60 dias
90 dias
Prazos de entrega:
Figura 62 – Carregamento das páginas no navegador.
Fonte: Elaborada pelo autor (2013).
Note que todas as listas apresentam o mesmo marcador, disco, já que por 
padrão este é o marcador da lista não ordenada.
Vamos alterar o código do exemplo anterior para que a primeira lista 
fique sem marcador; a segunda use o marcador disco; a terceira use o 
marcador círculo; e a última use o quadrado. Assim:
www.esab.edu.br 160
• para que a primeira lista fique sem marcador, na linha 8, altere o 
conteúdo <ul> para <ul class=”none”>, dessa forma a lista usará a 
regra chamada ul.none;
• na linha 14, altere o conteúdo <ul> para <ul class=”disc”>, para que 
a lista use o marcador em forma de disco;
• altere, na linha 20, o conteúdo <ul> para <ul class=”circle”>;
• por fim, altere, na linha 27, o conteúdo <ul> para <ul 
class=”square”>.
Salve o arquivo com essas alterações e execute-o no navegador.
No próximo passo, criaremos outra regra CSS, agora com estilização de 
lista e usando o seletor de identificador e listas ordenadas. Crie um novo 
documento no editor de textos, com a seguinte codificação:
Algoritmo 51 – Regra CSS com listas ordenadas
01 ol#decimal {
02 list-style-type: decimal;
03 }
04 ol#minusroman {
05 list-style-type: lower-roman;
06 }
07 ol#maiusroman {
08 list-style-type: upper-roman;
09 }
10 ol#minusalfa {
11 list-style-type: lower-alpha;
12 }
13 ol#maiusualfa {
14 list-style-type: upper-alpha;
15 }
Fonte: Elaborado pelo autor (2013).
Nas linhas 1, 4, 10 e 13, estão declaradas as regras CSS com seletor de 
identificação. A primeira regra declara o marcador numérico (linha 1); 
a segunda, um marcador em números romanos minúsculos (linha 4); a 
terceira, um marcador em números romanos maiúsculos (linha 10); e a 
última regra, um marcador em alfanumérico em maiúsculo (linha 13).
www.esab.edu.br 161
Criamos essas regras com o nome do elemento HTML, seguido do 
símbolo “#“ mais o nome do identificador.
Agora, salve o arquivo com o nome exemplo2-unid21.css.
No código do Algoritmo 52, vamos criar a página HTML que 
implementa as listas ordenadas, estilizadas pelas regras CSS do tipo 
identificador da regra CSS anterior. No editor de texto, crie um novo 
arquivo e escreva o seguinte código:
Algoritmo 52 – Página HTML com listas ordenadas
01 <html>
02 <head >
03 <meta http - equiv =”Content - Type” content =”text/html” 
charset=”UTF-8”>
04 <link rel= “stylesheet” type= “text/css” href= “exemplo2-
unid21.css” media= “all”>
05 <title>Exemplo Listas Ordenadas - Unidade 21</title >
06 </head>
07 <body>
08 <ol id=”decimal”>
09 <li>Item um</li>
10 <li>Item dois</li>
11 </ol>
12 <ol id=”minusroman”>
13 <li>Item um</li>
14 <li>Item dois</li>
15 </ol>
16 <ol id=”maiusroman”>
17 <li>Item um</li>
18 <li>Item dois</li>
19 </ol>
20 <ol id=”minusalfa”>
21 <li>Item um</li>
22 <li>Item dois</li>
23 </ol>
24 <ol id=”maiusalfa”>
25 <li>Item um</li>
26 <li>Item dois</li>
27 </ol>
28 </body>
29 </html >
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 162
Salve o arquivo com o nome pagina2-unid21.html e execute-o no 
navegador.
Vamos realizar, agora, a estilização da lista não ordenada, com uso de 
uma imagem como marcador. 
No editor de texto, desenvolva o seguinte documento:
Algoritmo 53 – Regra CSS com listas não ordenada com imagem
01 ul{
02 list-style-type: none;
03 }
04 li{
05 background-image: url(“http://www.bmfbovespa.com.br/img/
IconeBandeiraBrasil.gif”);
06 background-repeat: no-repeat;
07 vertical-align: top;
08 }
Fonte: Elaborado pelo autor (2013).
Na regra anterior, na linha 2, a lista é definida sem marcador. Já na linha 
5, é definido que cada item da lista será marcado pela imagem indicada 
na URL, sem repetição e alinhada ao topo. Os tipos de listas foram 
estudados na unidade 18.
Salve o arquivo com o nome exemplo3-unid21.css.
No próximo código, vamos criar a página HTML que implementa 
as listas não ordenadas, estilizadas pelos identificadores da regra CSS 
anterior. No editor de texto, crie um novo arquivo e escreva o seguinte 
código:
www.esab.edu.br 163
Algoritmo 54 – Página HTML com listas não ordenadas com imagem
01 <html>
02 <head >
03 <meta http - equiv =”Content - Type” content =”text/html” 
charset=”UTF-8”>
04 <link rel= “stylesheet” type= “text/css” href= “exemplo3-
unid21.css” media= “all”>
05 <title>Exemplo Listas Não Ordenadas - Unidade 21</title >
06 </head>
07 <body>
08 <ul>
09 <li>Primeiro Elemento</li>
10 <li>Segundo Elemento</li>
11 <li>Terceiro Elemento</li>
12 </ul>
13 </body>
14 </html >
Fonte: Elaborado pelo autor (2013).
Salve o arquivo com o nome pagina3-unid21.html e execute-o no 
navegador.
Quando você chegar ao final da execução do arquivo e quando ele for 
carregado pelo navegador, você terá um layout semelhante ao apresentado 
na Figura 63:
Primeiro Elemento
Segundo Elemento
Terceiro Elemento
Figura 63 – Lista não ordenada com imagem.
Fonte: Elaborada pelo autor (2013).
Após a criação e visualização das páginas apresentadas, vamos conhecer, 
na próxima unidade, as técnicas de criação de mecanismos de navegação 
entre as páginas HTML. Vamos lá?
www.esab.edu.br 164
22 Como navegar entre as páginas HTML
Objetivo
Apresentar a sintaxe dos comandos de estilização de links seletores: 
link, hover, visited e active.
Na unidade anterior, tivemos a oportunidade de praticar os conhecimentos 
estudados até este momento visando à utilização de listas ordenadas e não 
ordenadas, aplicando o seletor de classe e de identificador. Nesta unidade, 
vamos conhecer o elemento âncora que permite a criação de hiperlinks 
(links) nas páginas HTML, tomando como referência Silva (2008). 
Esse elemento é essencial para que o usuário do site possa navegar pelos 
conteúdos apresentados na web. A propriedade desse elemento que atribui 
a ele a capacidade de criar um link é chamada href.
A sintaxe para criação da âncora de link é: <a href=”endereço da página”> 
descrição</a>.
O endereço referenciado na propriedade hrefpoderá ser, então, 
direcionado para uma página local do próprio site (interno) ou de outro 
site (externo).
Geralmente, um link poderá ter dois estados: o visitado e o não 
visitado. O link não visitado é apresentado pelo navegador com a cor 
em azul; o visitado, com a cor púrpura e sublinhado. A Figura 64 
ilustra essas duas situações:
Visitado
Não Visitado
Site Exemplo 1
Site Exemplo 2
Figura 64 – Estados dos links de navegação.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 165
As ações representam uma interação do usuário com o link da página, o 
momento em que um evento será realizado. Essas ações podem ser: over, 
quando o usuário passa o ponteiro do mouse sobre o link; e ativo, quando 
o usuário clica sobre o link.
Esses estados e ações de um link são chamados de pseudoclasses. O 
Quadro 13 apresenta esses estados e ações em detalhes, acompanhe:
Pseudoclasse O que representa
Link Link no estado inicial.
Visited Link visitado.
Hover Quando usuário passa o ponteiro do mouse sobre o link.
Active Quando o usuário clica no link.
Quadro 13 – Subclasses do link.
Fonte: Silva (2008).
Com base nessas subclasses, é possível definir um ciclo de funcionamento 
dos links com os seguintes estados: link, visited, active e hover. 
Acompanhe a distinção entre esses estados.
• Link: representa a situação inicial de um link, quando ainda não 
houve interação com o usuário. 
• Visited (visitado): quando o usuário clica em um link. Assim o 
estado passa de “Link” para “Visited”. Na maioria das vezes, o link, 
ao ser clicado, a cor muda para azul e ele fica sublinhado. 
• Active: significa que o mesmo está habilitado, ativo e, se clicado, 
executará alguma ação.
• Hover: representa o estado no momento em que o usuário posiciona 
o ponteiro do mouse sobre o link.
A garantia dessa sequência de estados resultará em um funcionamento 
padronizado dos links, permitindo ao usuário do site saber se o link foi 
ou não visitado.
www.esab.edu.br 166
Para estilizar os links, é utilizada a regra text-decoration, com a seguinte 
sintaxe: {text-decoration: valor;}.
Os valores para essa regra podem ser: none (nenhum), underline 
(sublinhado), overline (sobrelinhado), line-through (riscado no meio) e 
blink (piscante).
A figura a seguir apresenta os quatro primeiros valores de link:
None Underline Overline Line Through
Figura 65 – Exemplo dos valores de links.
Fonte: Elaborada pelo autor(2013).
Dica
O valor blink não é reconhecido pela maioria dos 
navegadores, por isso evite utilizá-lo. 
Você verá a seguir um exemplo de sintaxe para retirar o sublinhado do 
link; para isso, use o valor none: {text-decoration: none;}. Essa regra 
resultará na retirada do recurso sublinhado, no estado over (o que 
ocorrerá quando o usuário passa o ponteiro do mouse sobre o link) e 
no estado ativo (quando o usuário clica no link), se este ainda não foi 
clicado anteriormente. No estado visitado, o sublinhado continuará, pois 
é um padrão do navegador de internet, independentemente de fabricante 
ou versão, para que um usuário com necessidades especiais possa 
identificar a existência de um link na página. O quadro a seguir apresenta 
esse contexto com relação ao valor none:
text-decoration:none Over Visitado Ativo Visitado Ativo Não-Visitado
Sublinhado Não Sim Sim Não
Quadro 14 – Estados do link sem sublinhado.
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 167
O código a seguir exemplifica o uso da regra text-decoration:none 
associado ao link:
Algoritmo 55 – Regra CSS para retirada do sublinhado do link
01 a:link {
02 text-decoration:none;
03 }
Fonte: Elaborado pelo autor (2013).
Nesse algoritmo foi utilizada uma sintaxe nova. Essa sintaxe associa 
o elemento que será tratado e o estado desse elemento. Nesse caso, o 
elemento é a âncora e o estado é o link, ou seja, a regra será aplicada 
ao elemento âncora, porém, somente quando ele estiver no seu estado 
inicial, ou seja, não foi visitado ainda. A sintaxe para definição do 
elemento HTML e seu estado é: < elemento html: estado>.
A regra descrita anteriormente define que o funcionamento do link terá 
como base as regras descritas no Quadro 14, por isso a associação do 
elemento âncora <a> ao estado link.
No código do Algoritmo 56, você verá um exemplo do uso da regra text-
decoration:none associado ao link, porém o sublinhado será removido de 
todos os estados.
Algoritmo 56 – Regra CSS para retirada do sublinhado do link em todos estados
01 a {
02 text-decoration:none;
03 }
Fonte: Elaborado pelo autor (2013).
Note que a regra valerá para todo o elemento âncora <a>.
Já o próximo código exemplifica o uso da regra text-decoration para 
trazer o sublinhado de volta ao link quando o usuário passar o ponteiro 
do mouse sobre o link.
www.esab.edu.br 168
Algoritmo 57 – Regra CSS para sublinhar o link
01 a:hover {
02 text-decoration:underline;
03 }
Fonte: Elaborado pelo autor (2013).
Note que a regra valerá para todo elemento âncora <a>, porém, somente 
no estado de hover, ou seja, quando o usuário posicionar o ponteiro 
do mouse sobre o link, uma vez que a sintaxe utilizada foi a:hover 
(elemento:estado). Sendo assim, quando o usuário posicionar o ponteiro 
do mouse sobre o link, um sublinhado será apresentado.
A Figura 66 ilustra o estado inicial do link, sem o sublinhado, e o estado 
over, com o sublinhado, quando o ponteiro do mouse sobre o link:
Estado Normal
Estado Over
Site Exemplo 1
Site Exemplo 2
Site Exemplo 1
Site Exemplo 2
Figura 66 – Link sem sublinhado – estado normal e over.
Fonte: Elaborada pelo autor (2013).
No próximo quadro, apresentaremos a sintaxe para criação de outros 
valores de text-decoration. O resultado de cada um destes efeitos pode 
ser visto na Figura 64, retorne a ela e acompanhe.
Observe:
Tipo Sintaxe
Underline { text-decoration:underline;}
Overline { text-decoration:overline;}
Line-through { text-decoration: line-through;}
Blink { text-decoration: blink;}
Quadro 15 – Sintaxe dos valores de text-decoration.
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 169
Um efeito muito interessante que você poderá aplicar é mudar a cor 
de fundo do link no momento em que o usuário colocar o ponteiro do 
mouse sobre ele. Esse efeito é chamado de rollover (reflexo). E, para criá-
lo, definiremos uma cor de fundo e cor da fonte no estado inicial do 
link; tão logo o usuário coloque o ponteiro do mouse sobre o link, vamos 
trocar as cores, isto é, o que era cor de fundo será cor de texto, e o que 
era cor de texto, será cor de fundo. Vamos ver?
No código do exemplo a seguir, é criado um efeito de rollover com as 
cores preto e verde:
Algoritmo 58– Regra CSS para rollover
01 a:link{
02 color:black;
03 background-color:green;
04 }
05 a:hover{
06 color:green;
07 background-color:black;
08 }
Fonte: Elaborado pelo autor (2013).
O código que cria a página HTML que utiliza essa regra é apresentado 
no exemplo a seguir:
Algoritmo 59 – Página HTML com rollover
01 <html>
02 <head >
03 <meta http - equiv =”Content - Type” content =”text/html” 
charset=”UTF-8”>
04 <link rel= “stylesheet” type= “text/css” href= 
“exemplorollover.css” media= “all”>
05 <title>Rollover</title >
06 </head>
07 <body>
08 <a href=”ExemploA.html”> Site Exemplo 1 </a><br>
09 <a href=”ExemploB.html”> Site Exemplo 2 </a><br>
10 </body>
11 </html >
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 170
O resultado no carregamento do arquivo pelo navegador é apresentado 
na Figura 67, observe:
Site Exemplo 1
Site Exemplo 2
Figura 67 – Uso de rollover.
Fonte: Elaborada pelo autor (2013).
Para diferenciar o link entre uma página interna do site ou para outro site, 
você deve usar no endereço do link, propriedade href, o http ou HTTPS.Isso indica o uso de outro endereço na web. A sintaxe do elemento âncora, 
a seguir, aponta para um site externo, veja: <a href=“http://www.esab.
edu.br”> ESAB</a>. Se o link fosse para uma página interna, não seria 
necessário colocar o http:// ou https:// antes do endereço, pois ele será 
acessado na mesma pasta do computador em que está a página com o link.
Você também pode criar um link para um e-mail. Para isso, deve 
usar o elemento HTML âncora que possibilite a criação de um link 
acrescentado o termo mailto: no início do valor da propriedade href. 
No exemplo a seguir, apresentamos a sintaxe do link para o e-mail 
marcelo.marmed@gmail.com: <a href=”mailto:marcelo.marmed@gmail.
com”> E-mail do Autor </a>.
Quando o usuário clicar no link do e-mail, será aberto o programa 
padrão de envio de e-mail com o endereço do destinatário já com o 
e-mail informado em mailto. A Figura 68 ilustra essa operação. Veja:
www.esab.edu.br 171
Figura 68 – Link para e-mail.
Fonte: Elaborada pelo autor (2013).
Caso o elemento âncora seja referenciado para um documento – um 
arquivo –, quando o usuário clicar no link, abrirá uma janela de 
interação, com a opção para abrir ou fazer o download do arquivo. Caso 
o computador possua um aplicativo que carregue o arquivo selecionado, 
este abrirá automaticamente. No exemplo a seguir, o elemento âncora 
possui como referência (href ), ou seja, um documento chamado 
exemplo.pdf: <a href=”exemplo.pdf”> Documento Exemplo - Clique 
para Baixar </a>.
Encerramos esta unidade reforçando a importância dos links para um 
site. Os links são a principal ferramenta de interação com o usuário, 
pois permitem que este navegue pelos documentos do próprio site 
(links internos) ou documentos de outros sites (links externos). Mais do 
que isso, os links permitem o envio de um e-mail e acesso a arquivos 
disponibilizados no site. 
Por fim, vimos as regras CSS que possibilitam a estilização dos links. 
Lembramos que é preciso ter o maior cuidado na sua formatação, 
uma vez que esse elemento possui regras padronizadas (cores dos links 
visitados e não visitados) a fim de garantir a acessibilidade e usabilidade 
do site. Na próxima unidade, estudaremos mais um elemento importante 
na construção dos sites: a construção de menus estilizados. Até a próxima!
www.esab.edu.br 172
23 Melhorando as páginas HTML com uso de menus utilizando CSS
Objetivo
Apresentar a sintaxe do comando tableless para criação de menus 
drop-down vertical e horizontal.
Na unidade anterior, conhecemos o elemento âncora que permite a 
criação de hiperlinks (links) nas páginas HTML. Você viu como esse 
elemento é essencial para que o usuário do site possa navegar pelos 
conteúdos apresentados na web. 
Nesta unidade, vamos estudar as técnicas de construção de menus, úteis 
na apresentação de muitos links na página HTML. Estudaremos também 
a possibilidade de tornar o layout mais moderno e atraente. Essa técnica, 
chamada de “tableless”, não utilizará elementos de construção de tabelas 
para apresentação dos dados. Vamos lá?
A base para construção dos menus são os elementos HTML que definem 
as listas ordenadas <ol>, não ordenadas <ul> ou de definição <dl>. Na 
verdade, qualquer elemento pode ser utilizado para construção dos 
menus, porém as listas apresentam uma estrutura mais flexível e fácil de 
ser utilizada.
A seguir, você verá as principais vantagens no uso das listas para 
formatação e criação do menu, segundo Silva (2008).
• São padronizadas mesmo sem estilização em CSS, com estrutura 
consistente e independente de recursos adicionais. Podemos 
construir listas funcionais apenas com marcadores em HTML, e a 
visualização do documento sem a aplicação da folha de estilo será 
exibida de forma conveniente.
www.esab.edu.br 173
• Possuem quatro elementos para estilização: div, ul, li e a. Isso 
possibilita uma variação na formatação dos elementos do menu. A 
tag <div> é um recurso utilizado para organizar os dados na página 
em blocos ou divisões no documento. Uma div cria um bloco no 
documento HTML que pode conter e agrupar outros elementos. 
Quando renderizado pelo navegador, essa tag não apresenta nenhum 
efeito gráfico diferenciado, apenas agrupa os elementos em áreas 
dentro da página, na forma de divisões.
• Possibilitam a construção de menus na horizontal e vertical.
• São facilmente ajustadas para inclusão ou remoção de itens.
O exemplo a seguir apresenta um código padrão muito utilizado para 
apresentação de menu, com elementos como: ul, li, e a. Observe:
Algoritmo 60 – Regra CSS para construção de menu
01 <html>
02 <head >
03 <meta http - equiv =”Content - Type” content =”text/html” 
charset=”UTF-8”>
04 <link rel= “stylesheet” type= “text/css” href= “exemplo1-
unid23.css” media= “all”>
05 <title>MENU</title >
06 </head>
07 <body>
08 <div>
09 <ul class=”semmarcador”>
10 <li><a href=”home.html”>Home</a></li>
11 <li><a href=”empresa.html”>Institucional</a></li>
12 <li><a href=”produtos.html”>Produtos</a></li>
13 <li><a href=”servicos.html”>Serviços</a></li>
14 <li><a href=”contato.html”>Contato</a></li>
15 </ul>
16 </div>
17 </body>
18 </html >
Fonte: Elaborado pelo autor (2013).
Salve o arquivo com nome algoritmo60.html.
www.esab.edu.br 174
Esse código é simples e a regra cria um menu com links para as páginas 
que fazem parte do site. O identificador de classe “semmarcador” (linha 
9) aplica o estilo list-style-type: none para toda a lista. 
Note que a classe nomeada “semmarcador” não foi criada no Algoritmo 
60, mas é referenciada na linha 4 deste algoritmo, com a seguinte 
instrução: exemplo1-unid23.css. Portanto, faz-se necessário a criação de 
um arquivo chamado “exemplo1-unid23.css” que implemente essa regra. 
Para tanto, crie um arquivo texto com a seguinte instrução: .semmarcador 
{list-style: none;}, não esqueça do ponto antes da palavra sem marcador, 
pois se trata de uma regra do tipo classe. Salve esse arquivo com nome de 
exemplo1-unid23.css.
O resultado do menu, quando carregado no navegador, será o layout da 
figura a seguir:
Home
Institucional
Produtos
Serviços
Contato
Figura 69 – Menu de opções.
Fonte: Elaborada pelo autor (2013).
Este é o primeiro passo para criação do menu estilizado, pois agora temos 
um menu de opções estruturado. O próximo passo é aplicar técnicas que 
darão forma e visual a esse menu. Assim, o menu apresentará, na tela, 
cores, efeitos e layout mais atrativos. O documento HTML que cria o 
menu de opções não será mais modificado. Criaremos um conjunto de 
regras CSS. Cada uma dessas regras serão incorporadas a uma regra de 
estilização específica.
Podemos pensar no menu como um elemento formado por várias 
camadas, as quais podem ser visualizadas na figura a seguir:
www.esab.edu.br 175
Home
Institucional
Produtos
Serviços
Contato
div
ul
li
Figura 70 – As camadas do menu de opções.
Fonte: Elaborada pelo autor (2013).
Note que os elementos da estrutura estão bem definidos. O elemento 
<div> é formado por um elemento <ul>, o qual por sua vez é formado 
por elementos <li>. Cada elemento <li> é formado por um elemento 
âncora que referencia uma página HTML. Não tão visível, mas não 
podemos esquecer, há entre cada elemento <li> um espaço separador.
Para construção do menu, vamos formatar cada um desses elementos, 
seguindo cinco passos:
1. definir a cor para o elemento <div>;
2. definir a largura e altura do elemento <div>;
3. definir a cor para o elemento <ul>;
4. definir a cor para os elementos <li>;
5. definir o estilo do link dos elementos <a>.
www.esab.edu.br 176
Na sequência, apresentamos o código de formatação do elemento <div>, 
que corresponde ao primeiro e segundo passos de estilização do menu:
Algoritmo 61 – Regra CSS para o elemento <div>
01 div.menu {
02 width:154px;
03 background:gray;04 padding:5px;
05 border:3px inset blue;
06 }
Fonte: Elaborado pelo autor (2013).
A regra cria um identificador de classe, chamado menu, com as seguintes 
propriedades: largura do menu em 154px (width:154px); cor de fundo 
do menu em cinza (background:gray); espaço entre os elementos do 
menu em 5px (padding:5px); borda do menu em 3px, interna e na 
cor azul (border:3px inset blue). Essas propriedades serão aplicadas ao 
elemento DIV. O uso do nome ”menu” tem como finalidade deixar mais 
claro o objetivo da regra CSS.
O resultado do menu, quando carregado pelo navegador, é ilustrado na 
Figura 71:
Home
Institucional
Produtos
Serviços
Contato
Figura 71 – Estilização do elemento <div>.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 177
Vamos agora estilizar a lista não ordenada <ul>, que é o terceiro passo para 
estilização do menu. O código para formatação possui a seguinte estrutura:
Algoritmo 62 – Regra CSS para o elemento <ul>
01 ul.lista {
02 width:130px;
03 background: black;
04 padding:6px;
05 border:3px outset white;
06 margin:0; 
07 }
Fonte: Elaborado pelo autor (2013).
A regra cria um identificador de classe, chamado lista, com as 
propriedades: largura do menu em 130px (width:130px); cor de fundo 
da lista em preto (background:black); espaço entre os elementos da lista 
em 6px (padding:6px); borda da lista em 3px, externa e na cor branca 
(border:3px outset white). A regra será aplicada no elemento HTML ul 
(uma lista não ordenada), criada na linha 8 do Algoritmo 60.
A lista será criada com espaço 0 (zero) entre a sua margem e a margem 
do elemento <div>. A lista está inserida no elemento DIV, para que as 
regras da DIV sejam diferentes das regras da lista <ul>.
O layout do menu com essa nova regra apresentará a seguinte forma:
Home
Institucional
Produtos
Serviços
Contato
Figura 72 – Estilização do elemento <ul>.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 178
Na próxima regra, formataremos os elementos que compõem a lista, 
marcados pela tag <li>. Este é o quarto passo para estilização do menu. O 
código a seguir formata os elementos da lista:
Algoritmo 63 – Regra CSS para o elemento <li>
01 li.opcoes {
02 list-style: none;
03 padding:3px;
04 Background:gray;
05 margin-bottom:2px;
06 font: 12px verdana, arial, sans-serif;
07 }
Fonte: Elaborado pelo autor (2013).
A regra cria um identificador de classe, chamado opcoes, com as 
seguintes propriedades: largura do menu em 130px (width:130px); cor 
de fundo da lista em cinza (background:black); espaço entre os elementos 
em 3px (padding:3px); borda da parte inferior da lista em 2px; fonte 
em tamanho 12; fonte verdana (font: 12px verdana, arial, sans-serif ). A 
propriedade list-style: none remove os marcadores dos itens da lista.
O resultado do menu com mais essa regra é apresentado na figura a seguir:
Home
Institucional
Produtos
Serviços
Contato
Figura 73 – Estilização do elemento <li>.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 179
Neste último passo, veremos a regra para estilizar o elemento âncora.
O código de estilização dos links é apresentado a seguir:
Algoritmo 64 – Regra CSS para o âncora <a>
01 a {
02 display:block;
03 color: white;
04 text-decoration: none;
05 }
06 a:hover {
07 color: black;
08 background-color:white;
09 }
Fonte: Elaborado pelo autor (2013).
A regra cria uma estrutura de bloco para cada elemento âncora, 
fazendo com que um retângulo seja apresentado em cada um dos 
elementos quando o ponteiro do mouse for posicionado sobre o 
bloco(display:block). Cada elemento será apresentado com a fonte na cor 
branca (color:white) e sem sublinhado (text-decoration:none). Quando 
o ponteiro do mouse for posicionado sobre o link, a cor da fonte será o 
preto e o fundo em branco (color:black, background-color:white).
O código a seguir apresenta a regra completa de criação de layout do menu:
Algoritmo 65 – Regra CSS para formatação de menu
01 div.menu {
02 width:154px;
03 background:gray;
04 padding:5px;
05 border:3px inset blue;
06 }
07 ul.lista {
08 widht:130px;
09 background: black;
10 padding:6px;
11 border:3px outset white;
12 margin:0; 
13 }
14 li.opcoes {
www.esab.edu.br 180
15 list-style: none;
16 padding:3px;
17 background:gray;
18 margin-bottom:2px;
19 font: 12px verdana, arial, sans-serif;
20 }
21 a {
22 display:block;
23 color: white;
24 text-decoration: none;
25 }
26 a:hover {
27 color: black;
28 background-color:white;
29 }
30 .semmarcador{list-style:none;}
Fonte: Elaborado pelo autor (2013).
Altere o arquivo exemplo1-unid23.css, acrescentando as instruções das 
linhas 1 a 29, que são os códigos criados nos passos 1 a 5 para estilização 
do menu. Note que na linha 30 do Algoritmo 65 está a primeira regra 
criada, que remove os marcadores da lista. Não se esqueça de salvar o 
arquivo com essas novas instruções.
O próximo passo é acrescentar no algoritmo 60, que cria o documento 
HTML, as chamadas para as regras CSS.
Para tanto, alteraremos o arquivo Algoritmo60.html, que está repetido a 
seguir – porém com o acréscimo das regras CCS sugeridas – fazendo com 
que ele tenha o seguinte código:
Algoritmo 66 – Regra CSS para construção de menu atualizado
01 <html>
02 <head >
03 <meta http - equiv =”Content - Type” content =”text/html” 
charset=”UTF-8”>
04 <link rel= “stylesheet” type= “text/css” href= “exemplo1-
unid23.css” media= “all”>
05 <title>MENU</title >
06 </head>
07 <body>
08 <div class=”menu”>
www.esab.edu.br 181
09 <ul class=”semmarcador lista”>
10 <li class=”opcoes”><a class=”hover” href=”home.
html”>Home</a></li>
11 <li class=”opcoes”><a class=”hover” href=”empresa.
html”>Institucional</a></li>
12 <li class=”opcoes”><a class=”hover” href=”produtos.
html”>Produtos</a></li>
13 <li class=”opcoes”><a class=”hover” href=”servicos.
html”>Serviços</a></li>
14 <li class=”opcoes”><a class=”hover” href=”contato.
html”>Contato</a></li>
15 </ul>
16 </div>
17 </body>
18 </html >
Fonte: Elaborado pelo autor (2013).
Nesta unidade, você pôde estudar os comandos HTML e as regras CSS 
que permitem a criação de menus. Na próxima unidade, conheceremos 
as técnicas para inclusão de imagens nos menus. Esperamos você lá!
www.esab.edu.br 182
24 Como desenvolver menus com imagens utilizando CSS
Objetivo
Apresentar as técnicas para inclusão de imagens nos menus criados 
por meio do comando tableless.
Na unidade anterior, você pôde estudar os comandos HTML e regras 
CSS que permitem a criação de menus. Daremos sequência aos nossos 
estudos e, nesta unidade, estudaremos a criação de menus utilizando 
o css, com base na técnica tableless, ou seja, o desenvolvimento sem 
o uso de tabelas em HTML. Utilizaremos como técnica a construção 
do elemento <div> contendo uma lista não ordenada <ul>, e itens 
posicionados em blocos. 
Como na unidade anterior você pôde criar um menu estilizado, porém, 
sem imagens, nesta unidade, daremos sequência utilizando o mesmo 
algoritmo, inserindo nele as regras de estilização de imagem.
Primeiramente, vamos rever o código css que cria o menu. O código 
a seguir , apresenta a repetição da regra completa de criação do layout 
construído no Algoritmo 65 da unidade 23, salvo como: exemplo1-
unid23.css. 
Você pode abrir o seu arquivo e analisar juntamente com o código 
apresentado a seguir. Para facilitar a compreensão, acrescentaremos os 
comentários ao código:
Algoritmo 67 – Regra CSS para formatação de menu
01 div.menu { /* cria as regras de definição do bloco principal 
do menu*/
02 width:154px;
03 background:gray;
04 padding:5px;
05 border:3px inset blue;
www.esab.edu.br 183
06 }
07 ul.lista {/* cria as regras de definição do bloco de itens 
do menu*/
08 widht:130px;
09 background: black;
10 padding:6px;
11 border:3pxoutset white;
12 margin:0; 
13 }
14 li.opcoes {/* cria as regras de definição de cada item do 
menu*/
15 list-style: none;
16 padding:3px;
17 background:gray;
18 margin-bottom:2px;
19 font: 12px verdana, arial, sans-serif;
20 }
21 a {/* cria as regras de definição do link de cada item do 
menu*/
22 display:block;
23 color: white;
24 text-decoration: none;
25 }
26 a:hover {/* cria as regras de efeito para quando o usuário 
posicionar o mouse na opção do menu*/
27 color: black;
28 background-color:white;
29 }
30 .semmarcador{list-style:none;}/* remove o marcador da 
lista*/
Fonte: Elaborado pelo autor (2013).
Daremos sequência à criação do menu com imagens, acrescentando 
novas regras a esse arquivo. Deixe o arquivo disponível para que você vá 
editando e salvando a cada nova instrução implementada.
Lembre-se que de, além do arquivo das regras css, precisamos manipular 
o arquivo do documento HTML, que deverá incorporar estas regras. No 
final da unidade 23, apresentamos o código completo do algoritmo60.
html. Este algoritmo, por sua vez, apresenta o menu para o usuário.
No código a seguir, você verá os comandos em HTML do arquivo 
algoritmo60.html, que como dissemos, traz a apresentação do menu:
www.esab.edu.br 184
Algoritmo 68 – Página HTML com menu
01 <html>
02 <head >
03 <meta http - equiv =”Content - Type” content =”text/html” 
charset=”UTF-8”>
04 <link rel= “stylesheet” type= “text/css” href= “exemplo1-
unid23.css” media= “all”>
05 <title>MENU</title >
06 </head>
07 <body>
08 <div class=”menu”>
09 <ul class=”lista”>
10 <li class=”opcoes”><a href=”home.html”>Home</a></li>
11 <li class=”opcoes”><a href=”empresa.
html”>Institucional</a></li>
12 <li class=”opcoes”><a href=”produtos.html”>Produtos</
a></li>
13 <li class=”opcoes”><a href=”servicos.html”>Serviços</
a></li>
14 <li class=”opcoes”><a href=”contato.html”>Contato</
a></li>
15 </ul>
16 </div>
17 </body>
18 </html >
Fonte: Elaborado pelo autor (2013).
Até aqui, não criamos nada de novo, apenas revisamos os arquivos que 
criam as regras de estilização do menu e o documento HTML que 
apresenta esse menu.
Só agora começaremos a estilização do menu com a inserção de 
imagens. O primeiro passo para criação do menu com as imagens é 
definirmos quais imagens serão utilizadas para cada opção. Utilizamos 
algumas imagens bem simples que você pode criar facilmente para 
acompanhamento dos estudos.
Na Figura 74, apresentamos as imagens que serão carregadas no menu, 
observe:
www.esab.edu.br 185
Contatos Desabilitado Empresa Home Produtos
Figura 74 – Menu de opções.
Fonte: Elaborada pelo autor (2013).
O objetivo desta unidade é que cada imagem seja apresentada como 
um ícone da opção do menu que foi criado na unidade 23. O layout da 
Figura 75 demonstra como ficará o menu com a inserção das imagens, 
acompanhe:
Home
Institucional
Produtos
Serviços
Contato
Figura 75 – Menu de opções.
Fonte: Elaborada pelo autor (2013).
Cada item do menu será associado à imagem com o mesmo nome 
da opção. Quando o ponteiro do mouse for colocado sobre a opção, 
o arquivo de imagem com o nome “desabilitado”, por exemplo, será 
carregado. Por exemplo, quando o usuário posicionar o ponteiro do 
mouse sobre a opção Home, que contempla a imagem do retângulo em 
verde, também chamado Home, a imagem será substituída por outra, 
chamada “desabilitado”, dando o efeito de que a opção Home do menu 
foi selecionada.
Para isso, você deverá alterar o código do arquivo exemplo1-unid23.css. 
de forma que cada elemento da lista <li> tenha uma imagem associada. 
Na Figura 76, você poderá obervar que o arquivo exemplo1-unid23.css, 
nas linhas 14 a 20, estiliza os elementos da lista, mas não há uma imagem 
associada a cada item da lista, marcados pela tag <li>, veja:
www.esab.edu.br 186
Figura 76 – Regra do elemento <li>.
Fonte: Elaborada pelo autor (2013).
Para acrescentar uma imagem a cada opção do menu, teremos que 
modificar o arquivo, desta forma cada elemento da lista terá uma regra 
única, diferente do código da Figura 76, que formata todos os elementos 
<li> com as mesmas regras. Será preciso criar uma regra para cada item 
que possua as mesmas propriedades da regra “li.opcoes”, acrescentando 
a imagem que será carregada. Devemos ainda mudar o nome da regra 
para o nome da opção, deixando mais claro onde esta regra será aplicada. 
Por exemplo, para transformar o código da regra nomeada “li.opcoes” 
na regra especifica da opção de menu com o título Home, copiaremos 
todo o código da regra “li.opcoes”, da linha 14 até a linha 20. Feito isso, 
devemos colar o código selecionado no final do arquivo “exemplo1-
unid23.css”. Depois, é preciso alterar o nome da regra para “li.home” 
e acrescentar a instrução background: gray url(home.jpg) no-repeat, 
definindo, assim, a imagem desta opção.
O código a seguir apresenta a regra de estilização para o primeiro 
elemento do menu, a opção Home, já com as alterações, acompanhe:
Algoritmo 69 – Regra CSS da opção de menu Home
01 li.home {
02 list-style: none;
03 padding:3px;
04 margin-bottom:2px;
05 font: 12px verdana, arial, sans-serif;
06 background: gray url(home.jpg) no-repeat
07 }
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 187
Remova do arquivo “exemplo1-unid23.css” todo o código que cria a 
regra “li.opcoes”, pois não precisaremos mais dela. A partir de agora, para 
cada item da lista, vamos copiar o código que cria a regra “li.home” e 
colá-lo no final do arquivo. Feito isso, mudamos o nome da regra para 
“li.opção do menu”. Também mudaremos a instrução background: gray 
url(home.jpg) no-repeat, para a imagem associada à opção. O importante 
é criarmos uma regra para cada item do menu e modificarmos o arquivo 
da imagem desses itens. A regra de cada item será identificada por um 
seletor de classe chamado home, institucional, produtos, serviços ou 
contatos, A propriedade background será associada à imagem específica 
para cada item, e não deverá se repetir no elemento (no-repeat).
O quadro a seguir apresenta como ficará o código da regra background 
de cada elemento do menu<li>, observe:
Item Imagem Código
Nome do Seletor 
de Classe
Institucional empresa.jpg
background: gray url(empresa.jpg) no-
repeat
Institucional
Produtos produtos.jpg
background: gray url(produtos.jpg) no-
repeat
Produtos
Serviços serviços.jpg
background: gray url(servicos.jpg) no-
repeat
Serviços
Contatos contatos.jpg
background: gray url(contatos.jpg) no-
repeat
Contatos
Quadro 16 – Regras dos itens do menu.
Fonte: Elaborado pelo autor (2013).
Ao final desta operação de copiar, colar e alterar a regra ”li.home” para o 
contexto de cada item do menu, o arquivo “exemplo1-unid23.css” terá a 
seguinte estrutura:
www.esab.edu.br 188
Algoritmo 70 – Regra css para formatação de menu
01 div.menu { 
02 width:154px;
03 background:gray;
04 padding:5px;
05 border:3px inset blue;
06 }
07 ul.lista { 
08 width:130px;
09 background: black;
10 padding:6px;
11 border:3px outset white;
12 margin:0; 
13 }
14 a {
15 display:block;
16 color: white;
17 text-decoration: none;
18 }
19 a:hover {
20 color: black;
21 background-color:white;
22 }
23 .semmarcador{list-style:none;}
24 li.home {
25 list-style: none;
26 padding:3px;
27 margin-bottom:2px;
28 font: 12px verdana, arial, sans-serif;
29 background: gray url(home.jpg) no-repeat
30 }
31 li.institucional {
32 list-style: none;
33 padding:3px;
34 margin-bottom:2px;
35 font: 12px verdana, arial, sans-serif;
36 background: gray url(empresa.jpg) no-repeat
37 }
38 li.produtos {
39 list-style: none;
40 padding:3px;
41 margin-bottom:2px;
42 font: 12px verdana, arial, sans-serif;
43 background: gray url(produtos.jpg) no-repeat
44 }
45 li.servicos {
www.esab.edu.br 189
46 list-style:none;
47 padding:3px;
48 margin-bottom:2px;
49 font: 12px verdana, arial, sans-serif;
50 background: gray url(servicos.jpg) no-repeat
51 }
52 li.contatos{
53 list-style: none;
54 padding:3px;
55 margin-bottom:2px;
56 font: 12px verdana, arial, sans-serif;
57 background: gray url(contatos.jpg) no-repeat
58 }
Fonte: Elaborado pelo autor (2013).
O próximo passo será alterar o evento, quando o usuário posicionar o 
ponteiro do mouse sobre a opção do menu. O código atual, presente no 
algortimo60.html, já atualizado, é apresentado na figura a seguir:
Figura 77 – Evento over.
Fonte: Elaborada pelo autor (2013).
Acrescentaremos uma imagem a ser carregada quando o usuário 
posicionar o ponteiro do mouse sobre o item do menu. Para tanto, 
precisaremos acrescentar a instrução background: white url(desabilitado.
jpg) no-repeat. Incluiremos uma margem superior inferior de 2 pixels e 
um espaçamento de 3 pixels, para produzir o efeito de aumento da opção 
do menu. O código com essas alterações ficará assim:
Algoritmo 71 – Evento over com imagem
01 a:hover {
02 color: black;
03 padding:3px;
04 margin-bottom:2px;
05 background: white url(desabilitado.jpg) no-repeat
06 }
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 190
A seguir, apresentaremos o código completo da regra css para construção 
do menu com as alterações produzidas. Acompanhe:
Algoritmo 72 – Regra css completa do menu
01 div.menu { 
02 width:154px;
03 background:gray;
04 padding:5px;
05 border:3px inset blue;
06 }
07 ul.lista { 
08 width:130px;
09 background: black;
10 padding:6px;
11 border:3px outset white;
12 margin:0; 
13 }
14 a {
15 display:block;
16 color: white;
17 text-decoration: none;
18 }
19 a:hover {
20 color: black;
21 padding:3px;
22 margin-bottom:2px;
23 background: white url(desabilitado.jpg) no-repeat
24 }
25 .semmarcador{list-style:none;}
26 li.home {
27 list-style: none;
28 padding:3px;
29 margin-bottom:2px;
30 font: 12px verdana, arial, sans-serif;
31 background: gray url(home.jpg) no-repeat
32 }
33 li.institucional {
34 list-style: none;
35 padding:3px;
36 margin-bottom:2px;
37 font: 12px verdana, arial, sans-serif;
38 background: gray url(empresa.jpg) no-repeat
39 }
40 li.produtos {
41 list-style: none;
42 padding:3px;
www.esab.edu.br 191
43 margin-bottom:2px;
44 font: 12px verdana, arial, sans-serif;
45 background: gray url(produtos.jpg) no-repeat
46 }
47 li.servicos {
48 list-style: none;
49 padding:3px;
50 margin-bottom:2px;
51 font: 12px verdana, arial, sans-serif;
52 background: gray url(servicos.jpg) no-repeat
53 }
54 li.contatos{
55 list-style: none;
56 padding:3px;
57 margin-bottom:2px;
58 font: 12px verdana, arial, sans-serif;
59 background: gray url(contatos.jpg) no-repeat
60 }
Fonte: Elaborado pelo autor (2013).
Salve essa regra no arquivo exemplo1-unid23.css, para que este tenha as 
atualizações das novas propriedades.
Antes de testar, é preciso que você modifique o conteúdo do arquivo 
algoritmo60.html, pois anteriormente os itens da lista eram estilizados 
pela regra “li.opcoes”, e agora, como você viu, cada item deve ser 
estilizado por uma regra única.
Por fim, apresentamos, a seguir, o código da página HTML com a 
referência aos novos seletores de classe, veja: 
Algoritmo 73 – Regra CSS completa do menu com referência aos novos seletores
01 <html>
02 <head >
03 <meta http - equiv =”Content - Type” content =”text/html” 
charset=”UTF-8”>
04 <link rel= “stylesheet” type= “text/css” href= “exemplo1-
unid23.css” media= “all”>
05 <title>MENU</title >
06 </head>
07 <body>
08 <div class=”menu”>
www.esab.edu.br 192
09 <ul class=”lista”>
10 <li class=”home”><a href=”home.html”>Home</a></li>
11 <li class=”institucional”><a href=”empresa.
html”>Institucional</a></li>
12 <li class=”produtos”><a href=”produtos.
html”>Produtos</a></li>
13 <li class=”servicos”><a href=”servicos.
html”>Serviços</a></li>
14 <li class=”contatos”><a href=”contato.html”>Contato</
a></li>
15 </ul>
16 </div>
17 </body>
18 </html >
Fonte: Elaborado pelo autor (2013).
Após atualizar e salvar o arquivo, execute-o no navegador de sua 
preferência, o resultado será um menu com imagens e efeitos visuais, 
quando o usuário posicionar o mouse sobre a opção do menu.
Nesta unidade, você pôde conhecer as técnicas para construção de um 
menu, revisando os conteúdos da unidade anterior e complementando 
com as regras para inclusão de imagens. Na próxima unidade, 
construiremos um menu com operações que permitam navegar entre as 
páginas do site.
www.esab.edu.br 193
Resumo
Na unidade 19, você foi apresentado à sintaxe do comando list-style e 
suas variações: list-style-image, para definir uma imagem como marcador 
da lista; list-style-position, para definir onde o marcador da lista é 
posicionado; list-style-type, para formatar o tipo do marcador da lista; e 
list-style, uma maneira abreviada para todas essas propriedades.
Já na unidade 20, você conheceu os conceitos de seletor e as diferenças 
entre o seletor de classe e o seletor de identificação. Você viu também que 
o seletor de classe é representado por um ponto (.) e é aplicado a todo 
elemento no qual o atributo class tenha o mesmo nome da classe. Viu 
ainda que o seletor id é representado por um sinal de jogo da velha (#) e 
é aplicado a todos os elementos com um determinado valor de atributo 
id, com o mesmo nome do identificador. Também foi possível utilizar 
a estrutura das listas não ordenadas, que possibilitaram a construção de 
menus dinâmicos.
Na unidade 22, você foi apresentado à sintaxe da criação de links 
seletores: link, hover, visited e active. Estudou ainda as propriedades: 
a:link, que define o estilo do link no estado inicial; a:visited, responsável 
pelo formato do estilo do link visitado; a:hover, que define o estilo do 
link quando o usuário do site posiciona o ponteiro do mouse sobre ele; e 
a:active, que define o estilo do link ativo (que já foi visitado).
Por fim, nas unidades 23 e 24, você pôde construir um menu utilizando 
as regras CSS e determinados comandos HTML que envolvem a 
estrutura das listas, elementos <ul>,<li>, e <a>, sem a utilização de tabelas 
para formatação e apresentação dos dados, técnica chamada de tableless.
www.esab.edu.br 194
25 Navegando entre páginas HTML com uso de menus e links
Objetivo
Possibilitar o desenvolvimento e a visualização de uma página HTML 
com menus drop-down que, ao serem selecionados, possibilitem a 
navegação para outras páginas HTML. 
Na unidade anterior, nós revisamos os conteúdos da unidade 23 e os 
complementamos com as regras para inclusão de imagens. Você também 
conheceu as técnicas para construção de um menu. Nesta unidade, você 
poderá criar um menu com estilos em CSS, que permita navegar entre 
páginas HTML. Para que você possa compreender cada uma das etapas 
realizadas e os resultados esperados, a criação do menu foi dividida em 
setes passos.
Ao final, esperamos que você obtenha o layout do formulário, que 
apresentamos na Figura 78.
Figura 78 – Menu drop-down.
Fonte: Elaborada pelo autor (2013).
Passos para criação de um menu com estilos em CSS com navegação entre 
páginas HTML
Passo 1 – Neste primeiro passo, vamos construir a estrutura básica do 
menu, com as opções que serão apresentadas aos usuários. Abra o editor 
de texto e escreva o código a seguir:
www.esab.edu.br 195
Algoritmo 74 – Código de criação da estrutura do menu
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>Exemplo MENU</title>
05 </head>
06 <body>
07 <ul>
08 <li><a href=”#” title=”Home”>Home</a></li>
09 <li><a href=”#” title=”Sobre”>Sobre</a></li>
10 <li><a href=”#” title=”Serviços”>Serviços</a>
11 <ul>
12 <li><a href=”#” title=”Suporte”>Suporte</a></li>
13 <li><a href=”#” 
title=”Desenvolvimento”>Desenvolvimento</a></li>14 <li><a href=”#” title=”Manutenção”>Manutenção</a></
li>
15 </ul>
16 </li>
17 <li><a href=”#” title=”Porftolio”>Clientes</a></li>
18 <li><a href=”#” title=”Contato”>Contato</a></li>
19 </ul>
20 </body>
21 </html>
Fonte: Elaborado pelo autor (2013).
Para organizar os itens do menu, iremos utilizar uma lista não ordenada 
para tal tarefa. O objetivo é transformar cada item da lista em um item 
do menu. Para tanto, os elementos do menu foram criados a partir de 
uma lista não ordenada, como você pode ver no Algoritmo 74, nas 
instruções das linhas 7 à linha 18. Cada elemento da lista foi definido 
pelo elemento HTML <li> único, com exceção aos itens da opção de 
Serviços, que foram criados pelo elemento <ul> dentro de um elemento 
<li>. Você perceberá que essa estrutura apresentará o menu com cinco 
opções: Home, Sobre, Serviços, Cliente e Contatos. A opção Serviços 
terá um menu de subopções, sejam elas: Suporte, Manutenção e 
Desenvolvimento.
www.esab.edu.br 196
A Figura 79 apresenta esse layout. Observe:
Home
Sobre
Serviços
Clientes
Contato
Suporte
Desenvolvimento
Manutenção
Figura 79 – Opções do menu.
Fonte: Elaborada pelo autor (2013).
Passo 2 – Agora, formataremos o menu de forma que os marcadores 
dos itens da lista sejam retirados (regra list-style:none), e o menu fique 
agrupado e posicionado à esquerda (float:left) da tela e com uma borda 
sólida com tamanho de 1 pixel na cor cinza (border: 1px solid #c0c0c0). 
O código que formatará o menu com essas propriedades tem as seguintes 
instruções:
Algoritmo 75 – Regra CSS do menu
01 .menu {list-style:none; margin:20px 0 0 350px; border:1px 
solid #c0c0c0; float:left; }
Fonte: Elaborado pelo autor (2013).
Passo 3 – Neste terceiro passo, criaremos uma regra para definição 
da área em que as opções do menu serão apresentadas Essas regras 
serão utilizadas para formatação do submenu. Usaremos um 
posicionamento dos elementos à esquerda (float:left) e de forma relativa 
(position:relative), para que a apresentação dos dados se mantenha 
padronizada, independente das resoluções de tela do computador do 
usuário. O item utilizará uma borda à direita, sólida, com tamanho de 
1 pixel na cor cinza (border-right:1px solid #c0c0c0). O código que 
formatará os itens do menu com essas regras possui a seguinte estrutura:
www.esab.edu.br 197
Algoritmo 76– Regra CSS dos Itens do menu
01 .menu li{position:relative; float:left; border-right:1px 
solid #c0c0c0;}
Fonte: Elaborado pelo autor (2013).
Passo 4 – Consiste na criação do efeito de sombra para quando o usuário 
posicionar o ponteiro do mouse sobre a opção do menu. Essa regra 
aumentará a fonte utilizada nos links do menu em 1.3em, mudando a cor 
da fonte para cinza escuro (#333), texto sem efeito (negrito, itálico ou 
sublinhado) e apresentação na forma de um bloco. Você pode visualizar 
essa regra na linha 1 do algoritmo77.
Para dar o efeito de sombra, quando o usuário posicionar o ponteiro 
do mouse sobre a opção do menu, o fundo ficará com a cor da fonte 
(background:#333) e a cor do texto ficará em vermelho (#FFF). Foram 
utilizadas regras css para formatação de blocos: moz-box-shadow, webkit-
box-shadow e text-shadow para efeitos específicos de sombreamento. 
Essa regra pode ser visualizada na linha 2 do algoritmo 77. A seguir o 
código completo do algoritmo 77.
Algoritmo 77 – Regra CSS para efeito de sombra no menu
01 .menu li a{font-size:1.3em; color:#333; text-
decoration:none; padding:5px 10px; display:block;}
02 .menu li a:hover{background:#333; color:#fff; -moz-box-
shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 
#ccc; text-shadow:0px 0px 5px #fff; }
Fonte: Elaborado pelo autor (2013).
Passo 5 – Agora definiremos a posição do submenu. Você deverá 
formatá-la como posição absoluta, ou seja, para que sua apresentação 
fique limitada à área da opção Serviços. Nessa etapa, também definiremos 
a cor do plano de fundo dos itens do submenu. Quando o ponteiro do 
mouse passar sobre os itens do menu (hover), a lista de submenu será 
mostrada. Para que isto seja possível, a regra css fará um posicionamento 
absoluto dos subitens do menu, a partir da posição do ponteiro do 
mouse sobre o item principal selecionado no menu, produzindo o layout 
apresentado na Figura 78, na qual a opção Serviço, por exemplo, quando 
www.esab.edu.br 198
selecionada, apresentará as subopções Suporte, Desenvolvimento e 
Manutenção. O código que você deverá utilizar para criar essas regras é 
apresentado no algoritmo 78. Acompanhe:
Algoritmo 78 – Regra CSS para efeito e posicionamento do submenu
01 .menu li ul{position:absolute; top:23px; left:-20px; 
background-color:#fff; display:none; }
02 .menu li:hover ul ul{display:none;}
03 .menu li:hover ul, .menu li ul li:hover ul, .menu li.over 
ul, .menu li ul li.over ul{display:block;}
04 .menu li ul li{border:1px solid #c0c0c0; display:block; 
width:110px;}
Fonte: Elaborado pelo autor (2013).
Observe que, na linha 3, utilizamos a regra “display:block”, a fim de 
definirmos a apresentação dos elementos da lista como um retângulo, 
dando destaque ao item selecionado. Na unidade 39, você verá com mais 
detalhes como posicionar os elementos nas páginas HTML e construir 
páginas mais atrativas.
Passo 6 – Nesta penúltima etapa, definiremos o layout do corpo da 
página. A regra utilizada para tanto, você pode ver no algoritmo a seguir. 
Algoritmo 79 – Regra CSS para corpo da página
01 body{ line-height:1; font-size:62.5%; background:#fff; 
font-family:Arial, Helvetica, sans-serif;}
Fonte: Elaborado pelo autor (2013).
Passo 7 – Neste último passo, você deve fazer a integração da regra css 
com o arquivo HTML e aplicar as regras nos elementos do menu. Para 
tanto, inclua a referência do arquivo HTML no cabeçalho da página, 
fazendo com que o itens do menu tenham o layout conforme mostrado 
na Figura 79. Depois de concluir essa tarefa, você pode dar o comando e 
executar e testar a página com o menu. No algoritmo 80, apresentamos 
o código completo da regra css e, logo em seguida, no algoritmo 81, o 
código completo da página HTML. Acompanhe:
www.esab.edu.br 199
Algoritmo 80 – Regra CSS completa
01 body{line-height:1; font-size:62.5%; background:#fff; font-
family:Arial, Helvetica, sans-serif;}
02 .menu{list-style:none; margin:20px 0 0 350px; border:1px 
solid #c0c0c0; float:left; }
03 .menu li{position:relative; float:left; border-right:1px 
solid #c0c0c0;}
04 .menu li a{font-size:1.3em; color:#333; text-
decoration:none; padding:5px 10px;display:block;}
05 .menu li a:hover{background:#333; color:#fff; -moz-box-
shadow:0 3px 10px 0 #CCC; -webkit-box-shadow:0 3px 10px 0 
#ccc; text-shadow:0px 0px 5px #fff; }
06 .menu li ul{position:absolute; top:23px; left:-20px; 
background-color:#fff; display:none; }
07 .menu li:hover ul ul{display:none;}
08 .menu li:hover ul, .menu li ul li:hover ul, .menu li.over 
ul, .menu li ul li.over ul{display:block;}
09 .menu li ul li{border:1px solid #c0c0c0; display:block; 
width:110px;}
10 li.border0{border:0;} /* remove as bordas dos itens da 
lista */
Fonte: Elaborado pelo autor (2013).
Salve o arquivo com as regras CSS, com nome: cssMenu.css.
Algoritmo 81 – Código da página HTML completa
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <link rel=”stylesheet” type=”text/css” href=”cssMenu.
css” media=”all”>
05 <title>Exemplo MENU</title>
06 </head>
07 <body>
08 <ul class=”menu”>
09 <li><a href=”#” title=”Home”>Home</a></li>
10 <li><a href=”#” title=”Sobre”>Sobre</a></li>
11 <li><a href=”#” title=”Serviços”>Serviços</a>
12 <ul>
13 <li ><a href=”#” title=”Suporte”>Suporte</a></li>
14 <li><a href=”#” 
title=”Desenvolvimento”>Desenvolvimento</a></li>
www.esab.edu.br 200
15 <li><a href=”#” title=”Manutenção”>Manutenção</a></li>
16 </ul>
17 </li>
18 <li><a href=”#” title=”Porftolio”>Clientes</a></li>
19 <li><a href=”#” title=”Contato”>Contato</a></li>
20 </ul>
21 </body>
22 </html>
Fonte: Elaborado pelo autor (2013).
Salve o arquivo HTML e execute-o para ver o resultado do menu 
estilizado.
Nesta unidade, você pôde desenvolver um menu com estilo, o que 
garante um layout mais interessante para o usuário que visita o site. Na 
próxima unidade, você iniciará os estudos sobre o formulário, outro 
elemento muito importante para o bom desempenho dos sites.
www.esab.edu.br 201
26 Capturando dados do usuário com uso de formulários
Objetivo
Apresentar a sintaxe do comando form para criação de formulários 
para páginas em HTML.
Você aprendeu, em nossa última unidade, como desenvolver um menu 
com estilo, garantindo, assim, um layout mais interessante para o usuário 
que visita o site. Nesta unidade, trabalharemos com a elaboração de 
formulários, um elemento fundamental de interação do site com o 
usuário, visando à captura de dados. 
Segundo Silva (2008, p. 195), “[...] formulários são seções específicas 
de um documento HTML, projetados para coletar dados fornecidos 
pelo usuário [...]”. O formulário web é constituído por um conjunto de 
elemento de integração com os usuários, chamados de controles web, 
ou simplesmente, controles. Os tipos de controles de um formulário 
podem ser: botões, caixa de entrada de texto, caixas de seleção única 
(radio Button), caixas de seleção múltiplas (checkbox) e caixas de seleção 
(menu). Cada elemento possui uma sintaxe própria em HTML para 
criação do controle, conforme veremos posteriormente. 
O Quadro 17 apresenta as principais propriedades de cada um dos 
controles que podem ser usados em um formulário.
www.esab.edu.br 202
Controle Propriedades Representação
CheckBox
Caixa de seleção que permite múltipla seleção 
de valores.
RadioButton
Caixa de seleção que permite uma única 
seleção de valores.
Menu
Apresenta uma lista de valores com a 
possibilidade de seleção de um único valor.
Entrada de 
textos
Permite o cadastro de textos em uma única 
linha ou múltiplas linhas.
Seleção de 
arquivos
Apresenta um botão que, quando clicado, 
abre uma janela para seleção de arquivos nos 
diretórios do computador. O nome do arquivo 
selecionado é apresentado em uma entrada 
de texto.
Quadro 17 – Comparativo dos controles.
Fonte: Elaborado pelo autor (2013).
Os controles são criados dentro de um formulário, que funciona como 
um repositório de controles, chamado de container. Um formulário é 
composto por: controles, ação, método e codificação. Os controles são 
os elementos HTML inseridos no formulário para entrada e saída de 
dados. A ação define o programa que receberá os dados do formulário 
que realizará o processamento dos dados. Por exemplo, um formulário 
HTML pode ser responsável por requisitar os dados do cadastro de um 
funcionário e enviá-lo para um programa escrito em outra linguagem, 
como PHP ou Java. A linguagem diferente, por sua vez, fará a validação 
e o armazenamento dos dados em um sistema gerenciador de banco de 
dados, como MySQL. O método define como os dados serão enviados 
para esse programa e a codificação formata como os caracteres serão 
transmitidos (acentuados ou não). Além dos controles, dentro de 
um formulário podemos inserir quaisquer elementos HTML, como 
parágrafos, listas, títulos etc. Um formulário é criado pelas tags <form></
form>, e entre essas duas marcações, inserimos os controles e elementos 
HTML. No exemplo do algoritmo 82, você será apresentado ao código 
HTML para criação do formulário.
www.esab.edu.br 203
Algoritmo 82 – Página HTML com formulário
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>Exemplo</title>
05 </head>
06 <body>
07 <h1>Exemplo</h1>
08 <form>
09 <p>Formulário de Cadastro</p>
10 </form>
11 </body>
12 </html>
Fonte: Elaborado pelo autor (2013).
Note que o corpo da página é formado por um título <h1> e um 
formulário. O formulário é marcado pelas tags <form>, na linha 8, e 
</form>, na linha 10. O formulário é composto por um parágrafo, 
marcado, na linha 9, pela tags <p> e </p>.
O primeiro controle que estudaremos se chama input e representa 
os elementos que têm como função principal a entrada de dados no 
formulário. A entrada de dados pode se dar por uma caixa de texto, caixa 
de texto de senha, seleção múltipla, seleção única, seleção de arquivo, 
botão e imagem. O que define qual o tipo do elemento de entrada de 
dados é a propriedade type do controle input. Com o Quadro 18, você 
poderá aprender sobre os valores do atributo type e a função do elemento.
www.esab.edu.br 204
Type Função do Elemento
Text Criar uma caixa de entrada de texto com uma única linha.
Password
Criar uma caixa de entrada de texto com uma única linha. Quando é 
digitada qualquer tecla, o valor será apresentado como asterisco (*). Apesar 
disso, o valor informado na caixa continua sendo o valor digitado.
Checkbox Criar uma seleção de múltiplos valores.
Radio Criar uma seleção de um único valor.
File Criar uma seleção de arquivo, com botão e caixa de entrada de texto.
Hidden
Criar um elemento que existe no formulário, mas não pode ser visualizado 
pelo usuário.
Submit
Criar o botão de ENVIAR para o formulário. Envia os dados do formulário 
para o programa que irá processá-lo.
Reset Criar um botão de LIMPAR o formulário, limpando todos os campos.
Button Criar um botão que será associado a algum evento.
Image Criar um botão com uma imagem.
Quadro 18 – Valores da propriedade type.
Fonte: Elaborado pelo autor (2013).
A sintaxe HTML para criação de um controle do tipo input é: 
01 <input type= “tipo” name= “nome do controle” ></input>. 
A Figura 80 apresenta a estrutura do formulário que será construído em 
HTML.
Figura 80 – Formulário com controle do tipo input.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 205
No formulário, utilizamos:
• elementos input do tipo text, para cadastro do nome e e-mail;
• um input do tipo password para cadastro da senha;
• um elemento radio para entrada do valor do sexo (M ou F);
• um elemento checkbox para escolha do tipo de linguagem (java, 
html, php e css); 
• um input do tipo file para seleção do arquivo com a foto;
• um botão submit para enviar os dados;
• um botão reset para limpar os campos do formulário.
O código do Algoritmo 83 apresenta as instruções em HTML que 
implementam esse formulário. Acompanhe:
Algoritmo 83 – Página HTML com controles do tipo input
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>Exemplo</title>
05 </head>
06 <body>
07 <form>
08 Nome:<input type=”text” name=”ednome”></input></br>
09 E-mail:<input type=”text” name=”edemail”></input></br>
10 Senha:<input type=”password” name=”edsenha”></input>
</br>
11 Sexo:
12 <input type=”radio” name=”rbsexo”>M</input>
13 <input type=”radio” name=”rbsexo”>F</input></br>
14 Linguagens Conhecidas:</br>
15 <input type=”checkbox” name=”cbjava”>Java</input></br>
16 <input type=”checkbox” name=”cbphp”>PHP</input></br>
17 <input type=”checkbox” name=”cbhtml”>HTML</input></br>
18 <input type=”checkbox” name=”cbcss”>CSS</input></br>
19 Foto:<input type=”file” name=”edfoto”></input></br>
20 <input type=”reset” name=”btlimpar”></input></br> 
21 <input type=”submit” name=”btenviar”></input></br> 
22 </form>
23 </body>
24 </html>
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 206
Em algumas instruções, foram acrescentadas a tag </br>, que significa 
“pular linha”. Essa tag faz com que o item do formulário seja apresentado 
na próxima linha, fazendo com que os dados do formulário sejam 
apresentados um acima do outro. Analisando os intervalos entre aslinhas 
8 a 10 e 13 a 21, podemos notar que no final de cada elemento HTML foi 
inserida a tag <br>. A propriedade name servirá para que, no momento do 
processamento, seja possível identificar o valor de cada campo. 
Por exemplo, se você deseja saber qual é o valor do nome informado 
pelo usuário, basta recuperar o valor do texto inserido no componente 
chamado “ednome”. Note que cada elemento possui um valor de name 
único, com exceção aos componentes do tipo radio. Você percebeu que 
ambos (linhas 12 e 13 do Algoritmo 83) se chamam “rbsexo”? Isto porque 
se trata de uma seleção única e, nesses casos, os componentes devem ter 
o mesmo nome porque, ao marcar um, o outro necessariamente precisa 
ser desmarcado. Você também pode usar o controle Button para criar 
os botões que são apresentados no formulário. Esse controle cria botões 
muito semelhantes aos criados pelo controle input. Porém, os botões 
do input não permitem que sejam especificados os títulos dos botões, 
diferente do controle Button, que permite esta funcionalidade. 
Como, na maioria das vezes, o botão deve ter um título mais específico 
e, claro, você deve adotar como uma boa prática o uso do controle 
Button para criação de botões. A sintaxe HTML para criação de botões 
é:<Button type=”tipo”></Button>. Os tipos de botões podem ser: 
submit (enviar), reset (limpar) e Button (associar-se), mantendo, então, 
as mesmas funcionalidades do botão do input. O Quadro 19 apresenta 
as instruções para a criação de botões, usando o controle input e button. 
Acompanhe e perceba as diferenças do código utilizado no Algoritmo 83, 
nas linhas 20 e 21, e como estes ficariam usando a tag Button.
www.esab.edu.br 207
Usando o controle Input
<input type=”reset” name=”btlimpar”></input></br>
<input type=”submit” name=”btenviar”></input></br>
Usando o controle Button
<button type=”reset” name=”btlimpar”>LIMPAR</button></br>
<button type=”submit” name=”btenviar”>ENVIAR</button></br>
Quadro 19 – Criação de botão por input e button.
Fonte: Elaborado pelo autor (2013).
Note que, na criação de botões por input, não é informado o título 
do botão. Já no caso do controle Button, foram informados os títulos 
LIMPAR e ENVIAR, na linha 20 e 21, respectivamente.
Os elementos que permitem a criação de caixas de seleção de valores, 
ou menus, nos documentos HTML são chamados de controles, que 
podem ser de dois tipos: select ou optgroup. O controle select apresenta 
uma lista de valores, normalmente sem dados em comum, diferente 
do controle optgroup que permite agrupar os valores com naturezas 
idênticas. Cada item da lista, de select ou optgroup, é criado pelo 
elemento option. A figura a seguir apresenta dois menus: o da esquerda, 
do tipo select; o da direita, do tipo optgroup.
Figura 81 – Tipos de menus.
Fonte: Elaborada pelo autor (2013).
As instruções HTML, que apresentamos no código do algoritmo 84, 
criam a estrutura do menu do tipo select.
www.esab.edu.br 208
Algoritmo 84 – Página HTML com menu select
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>Exemplo</title>
05 </head>
06 <body>
07 <form>
08 <select>
09 <option> Brasil </option>
10 <option> Argentina </option>
11 <option SELECTED > Alemanha </option>
12 <option> Austrália </option>
13 <option> Itália</option>
14 </select>
15 </form>
16 </body>
17 </html>
Fonte: Elaborado pelo autor (2013).
O menu é criado pelas tags <select> , na linha 8, e </select>, na linha 
14. Os elementos internos do menu são criados pelas tags <option></
option>, nas linhas de 10 a 13. O elemento select está inserido em 
um formulário, criado pelas tags <form>, na linha 7, e </form>, na 
linha 15. Cada elemento deve, obrigatoriamente, ser marcado pelas 
tags <option></option>. Observe que na linha 11 acrescentamos a 
cláusula SELECTED ao elemento <option> Alemanha </option>. Essa 
instrução define como sendo o valor padrão da caixa de seleção a opção 
“Alemanha”. Quando a caixa de seleção é apresentada ao usuário, essa 
opção é o valor padrão marcado na caixa.
www.esab.edu.br 209
O código do Algoritmo 85 representa a criação do menu do tipo 
optgroup. Observe: 
Algoritmo 85 – Página HTML com menu optgroup
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>Exemplo</title>
05 </head>
06 <body>
07 <form>
08 <select>
09 <optgroup label=”América”>
10 <option> Brasil </option>
11 <option> Argentina </option>
12 </optgroup>
13 <optgroup label=”Europa”>
14 <option> Alemanha </option>
15 <option> Itália </option>
16 </optgroup>
17 <optgroup label=”Oceania”>
18 <option> Austrália </option>
19 </optgroup>
20 </select>
21 </form>
22 </body>
23 </html>
Fonte: Elaborado pelo autor (2013).
O menu é criado pelas tags <select>, na linha 8, e </select>, na linha 
20, do formulário e criado pelas tags <form> e </form>, nas linhas 7 
e 21, respectivamente. Cada conjunto de elementos de um grupo é 
identificado por um marcador <optgroup>, e </optgroup>. O valor 
atribuído ao label é apresentado no menu como separador dos valores de 
cada grupo. Esses valores são marcados pela tag <option> e </option>, na 
forma de um nome para o grupo que foi criado. Por exemplo, na linha 
17, foi criado o grupo nomeado pelo elemento label como “Oceania”. O 
item que compõe esse grupo é o elemento “Austrália”. O que delimita os 
itens desse grupo são as tags <optgroup> e </optgroup>.
www.esab.edu.br 210
Existem dois controles que são muito utilizados nos formulários: o 
componente label, que apresenta rótulos, textos, na página HTML. Os 
controles que já possuem a propriedade label, como o optgroup, não 
necessitam desse elemento. O outro controle é o textarea, que cria um 
campo de entrada de dados com múltiplas linhas.
Na Figura 82, apresentamos um formulário com um label e um textarea:
Label Label
TextArea
Figura 82 – Label e textarea.
Fonte: Elaborada pelo autor (2013).
O código do Algoritmo 86 apresenta as instruções HTML que criam o 
formulário apresentado na Figura 71.
Algoritmo 86 – Página HTML com label e textarea
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>Exemplo</title>
05 </head>
06 <body>
07 <form>
08 <label>Sugestão:</label></br>
09 <textarea rows=”10” cols=”50”></textarea>
10 </form>
11 </body>
12 </html>
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 211
Note que, na linha 8, é criado o label com rótulo com o valor 
“Sugestão”. O elemento TextArea, quando criado, necessita que sejam 
especificados os números de linhas (rows) e colunas (cols) suportados 
pelo componente. Por exemplo, na linha 9 do Algoritmo 86 podemos 
observar que foram definidas 10 linhas (rows=”10”) e 50 colunas 
(cols=”50”) para o elemento. Ou seja, essa caixa comporta até 500 
caracteres (10 X 50).
Nesta unidade, você pôde conhecer os diferentes controles que podem 
ser utilizados em um formulário HTML. Há uma grande variedade de 
componentes, a escolha de cada um deles deve estar associada ao formato 
dos dados que serão cadastrados no site e a usabilidade do sistema, 
garantindo a facilidade de uso por parte do usuário. Lembre-se de que 
os controles são elementos de um formulário. Portanto, não devem ser 
utilizados sem a marcação <form> e </form> para delimitá-los. Caso 
contrário, o formulário não fará o gerenciamento dos componentes, 
como, por exemplo, ao clicar no botão de reset, os controles não serão 
limpos, pois não estão sob a gerência do formulário.
Em algumas situações, alguns campos do formulário não podem ser 
alterados ou acessados. Para conseguir realizar essa operação, devemos 
utilizar os atributos disabled e readonly, temas da nossa próxima unidade. 
Tarefa dissertativa
Caro estudante, convidamos você a acessar oAmbiente Virtual de Aprendizagem e realizar a 
tarefa dissertativa.
www.esab.edu.br 212
27 Como controlar o acesso aos dados dos formulários
Objetivo
Apresentar como as propriedades disabled e readonly podem ser 
aplicadas em formulários HTML.
Na unidade anterior, você conheceu os diferentes controles que podem ser 
utilizados em um formulário HTML. Viu que existem diferentes tipos de 
componentes, e que a escolha por um deles deve estar associada ao formato 
dos dados que serão cadastrados no site e a usabilidade do sistema. 
Assim, nesta unidade, daremos continuidade aos estudos sobre 
formulários em páginas HTML, acrescentando duas novas propriedades 
que permitem desabilitar componentes dos formulários (enabled) e/ou 
criar campos que não podem ser editados (readonly). 
Propriedade Disabled
Você pode utilizar a propriedade disabled para desabilitar algumas ações 
que podem ser realizadas pelo usuário na interação com um formulário. 
Essa propriedade pode ser inserida no comando de criação de um 
elemento HTML do formulário, permitindo que este seja, ou não, 
selecionado pelo usuário. A seguir, destacamos algumas dessas ações. 
Acompanhe. 
1. Desabilitar o uso da tecla tab para alternar entre os campos do 
formulário. O uso da tecla tab é muito comum entre os usuários de 
computadores, para trocar de campo nos formulários.
2. Desabilitar o foco do controle, não permitindo que o usuário 
interaja com o componente.
www.esab.edu.br 213
3. Controle com atributo disabled é ignorado pelo formulário, seu 
dado não é transmitido para o programa que fará o processamento. 
Ou seja, o componente aparece na tela, mas seu valor não é 
transmitido pelo formulário para o programa que deverá processar os 
dados recebidos. Assim, é como se o componente não existisse para 
o formulário.
Nem todos os controles do formulário podem ser desabilitados. Você só 
poderá desabilitar os seguintes controles: button, input, optgroup, select, 
option, select e textarea. Para que esses componentes sejam desabilitados, 
você deve acrescentar ao comando HTML de criação a cláusula disabled 
= “disabled”. O código do Algoritmo 87 demonstra como desabilitar um 
controle input, observe:
Algoritmo 87 – Desabilitando controle por disabled
01 <html>
02 <head>
03 <title>Exemplo</title>
04 </head>
05 <body>
06 <form>
07 <input type=”text” disabled=”disabled” 
value=”teste”></input>
08 </form>
09 </body>
10 </html>
Fonte: Elaborado pelo autor (2013).
Perceba que, na linha 7, foi acrescentado o atributo disabled=“disabled”, 
essa cláusula fará com que o componente seja apresentado na tela, de 
forma que não possa ser editado. O atributo value=“teste”, também 
na linha 7, preencherá o campo com o valor “teste”, facilitando a 
visualização do componente desabilitado. Em alguns navegadores, os 
campos desabilitados ficarão na cor cinza.
www.esab.edu.br 214
A Figura 83 apresenta o resultado do formulário carregado nos 
navegadores Firefox e Google Chrome:
Figura 83 – Formulário de cadastro de veículo.
Fonte: Elaborada pelo autor (2013).
Propriedade Readonly
O atributo readonly faz com que o controle permita a leitura dos dados, 
mas não permita a edição, e é muito semelhante ao atributo disabled, as 
diferenças estão na ação do atributo readonly, que:
1. não desabilita o uso tecla tab para alternar entre os campos do 
formulário;
2. não desabilita o foco do controle;
3. o controle com atributo readonly não é ignorado pelo formulário, 
seu dado é transmitido para o programa que fará o processamento. 
Diferente da propriedade disabled, a propriedade readonly tem 
seu valor lido e processado pelo formulário, e em seguida enviado 
para o programa que deverá processar a informação. Ou seja, ele 
não pode ser editado, mas tem seu valor acessado pelo formulário e 
transmitido para o programa que fará o processamento;
4. no cadastro de dados em um formulário, todos os campos estão 
habilitados e são editáveis. Mas também é comum que alguns 
dados não possam ser editados, isso acontece quando os dados 
são disponibilizados para alteração e consultas. Por exemplo, o 
formulário Apresentado na Figura 84 permite o cadastro de veículos 
para um sistema de controle de estacionamento.
www.esab.edu.br 215
Figura 84 – Formulário de cadastro de veículo.
Fonte: Elaborada pelo autor (2013).
O formulário de nosso exemplo é um cadastro de veículos e de seu 
respectivo proprietário. Os veículos serão identificados pela placa, pois é 
um dado único, ou seja, não existem dois veículos com a mesma placa. 
Os campos de cadastro estão todos disponíveis para registro dos dados. 
Porém, por se tratar de um dado imprescindível, uma vez que o sistema 
identifica cada veículo a partir desse dado, a placa não pode ser alterada. 
Assim, o formulário de alteração de dados não deve permitir que esse 
campo seja editado. 
A Figura 85 apresenta o mesmo formulário com o campo de edição da 
placa desabilitado:
Figura 85 – Formulário de cadastro de veículo: campo placa desabilitado.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 216
Note que o valor do campo é visualizado, mas não pode ser editado, pois 
o campo está desabilitado. Podemos pensar como outra regra do sistema 
que o nome do proprietário também não possa ser alterado. Então, esse 
campo também poderia ser desabilitado, garantindo que os dados da 
placa e do proprietário não seriam alterados.
Para que esses componentes não possam ser editados, basta acrescentar ao 
comando HTML de criação a cláusula readonly = “readonly”. O código a 
seguir cria um controle input desabilitado por meio do atributo readonly. 
Algoritmo 88 – Desabilitando controle por readonly
01 <html>
02 <head>
03 <title>Exemplo</title>
04 </head>
05 <body>
06 <form>
07 <input type=”text” readonly=”readonly” 
value=”teste”></input>
08 </form>
09 </body>
10 </html>
Fonte: Elaborado pelo autor (2013).
Assim como no atributo disabled, os controles com atributo readonly, 
em alguns navegadores, também ficam na cor cinza.
Como os atributos disabled e readonly influenciam a forma de navegação 
do formulário, uma vez que os campos desabilitados perdem o foco, 
não podem ser selecionados por meio da tecla tab: os campos readonly 
podem receber o foco, mas não podem ser editados. Isso pode gerar 
insatisfação no usuário, uma vez que ao selecionar campos ele não poderá 
editá-los. 
www.esab.edu.br 217
Dica
Você pode adotar como prática indicar qual a 
ordem de vista dos campos, quando o usuário 
pressionar a tecla tab. 
Por exemplo, no formulário a seguir, ao pressionar a tecla tab, quando 
o cursor estiver no campo placa, o usuário será direcionado para o 
componente modelo (como mostrado na figura a seguir). A ordem em 
que os campos serão visitados, após a tecla “tab” ser pressionada, pode 
ser configurada de acordo com as necessidades do formulário HTML. 
Neste exemplo, a ordem de vista é a mesma ordem da apresentação dos 
componentes do formulário.
Observe que o campo placa não pode ser editado, por isso está na cor 
cinza. Isto porque este campo é o identificador do veículo e não pode 
ser modificado.
Figura 86 – Formulário de cadastro de veículo: ordem da tecla tab.
Fonte: Elaborada pelo autor (2013).
Para você incluir a regra de direcionamento do cursor, deve usar o 
atributo tabindex na criação do controle. Esse atributo deve receber um 
valor inteiro em 0 e 32767. Os controles com valores menores recebem 
o foco primeiro que os controles com valores maiores, ou seja, sai do 
www.esab.edu.br 218
controle com menor valor para o controle de valor subsequente mais 
próximo. O código do Algoritmo 89 define o tabindex do controle que 
cria a placa do automóvel (do nosso exemplo) com valor 1, o controle 
de cadastro da marca do carro, com tabindex 3 e, por fim, o controle decadastro do modelo do carro, com tabindex valendo 2. Veja o código:
Algoritmo 89 – Ordem dos campos
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>Exemplo</title>
05 </head>
06 <body>
07 <form>
08 <label>Placa:</label> </br>
09 <input tabindex=”1” name=”edplaca” type=”text”></
input></br>
10 <label>Marca:</label> </br>
11 <select input tabindex=”3” name=”selectmarca”>
12 <option> FORD </option>
13 <option> VOLKSWAGEN </option>
14 <option> RENAULT </option>
15 </select>
16 </br>
17 <label>Modelo:</label> </br>
18 <select input tabindex=”2” name=”selectmodelo”>
19 <option> KA </option>
20 <option> FOCUS </option>
21 <option> CLIO </option>
22 </select>
23 </br>
24 <label>Proprietário:</label> </br>
25 <input tabindex=”4” input name=”edproprietario” 
type=”text”></input></br>
26 <button tabindex=”5” name=”btEnviar” 
type=”submit”>Enviar</button>
27 </form>
28 </body>
29 </html> 
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 219
Nesta unidade, conhecemos dois importantes atributos: disabled e 
readonly. Ambos fundamentais para a formatação do formulário, que, 
em conjunto com o atributo tabindex, possibilitam a construção de 
interfaces gráficas que facilitam o uso do sistema e a integração com 
o usuário. Temos uma preocupação constante com a construção de 
projetos, visando à valorização da usabilidade do site.
Na próxima unidade, você poderá colocar em prática os comandos de 
criação de formulário e seus controles. Até lá!
Atividade
Chegou a hora de você testar seus conhecimentos 
em relação às unidades 19 a 27. Para isso, dirija-
se ao Ambiente Virtual de Aprendizagem (AVA) e 
responda às questões. Além de revisar o conteúdo, 
você estará se preparando para a prova. Bom 
trabalho!
www.esab.edu.br 220
28 Criando um formulário de contato usando CSS e HTML
Objetivo
Possibilitar o desenvolvimento e a visualização de uma página HTML 
com um formulário para cadastro de dados.
Na unidade anterior, você conheceu dois importantes atributos: disabled 
e readonly. Aprendeu também que esses dois atributos são fundamentais 
para a formatação do formulário, que, em conjunto com o atributo 
tabindex, possibilitam a construção de interfaces gráficas que facilitam o 
uso do sistema e a integração com o usuário. 
Nesta unidade, você poderá criar um formulário de contato utilizando os 
comandos estudados nas unidades anteriores. A criação do formulário foi 
dividida em seis passos, para que você possa compreender cada uma das 
etapas realizadas.
Passos para a criação de um formulário de contato 
Passo 1 – Vamos construir a estrutura da página que conterá o 
formulário. Para isso, abra o editor de texto e edite o seguinte código:
Algoritmo 90 – Passo 1: estrutura da página
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>FALE CONOSCO</title>
05 </head>
06 <body>
07 <form>
08 </form>
09 </body>
10 </html>
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 221
Na linha 2, o elemento <meta> é fundamental para que os valores e 
mensagens com acento sejam apresentados corretamente na página, por 
isso a presença do atributo charset=”UTF-8”. O título da página será 
“FALE CONOSCO” (linha 4), pois a intenção é criar um formulário de 
contato com o cliente. O formulário está sendo marcado nas linhas 8 e 9, 
com as tags <form> e </form> respectivamente.
Passo 2 – Agora, vamos criar um componente de seleção única, para 
que o cliente possa especificar o motivo do contato, que pode ser: 
Informação, Reclamação ou Sugestão. Para tanto, criaremos 3 controles 
do tipo “radio”. Veja o código:
Algoritmo 91 – Passo 2: objetivo da mensagem
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>FALE CONOSCO</title>
05 </head>
06 <body>
07 <form>
08 <fieldset>
09 <legend> Objetivo da Mensagem </legend>
10 <input type=”radio” name=”radmotivo”>Informação</
input>
11 <input type=”radio” name=”radmotivo”>Reclamação</
input>
12 <input type=”radio” name=”radmotivo”>Sugestão</
input>
13 </fieldset>
14 </form>
15 </body>
16 </html>
Fonte: Elaborado pelo autor (2013).
Nas linhas 10, 11 e 12, criamos os controles de input, do tipo radio, 
todos com o nome “radmotivo”, pois apenas um deles poderá ser 
selecionado. Para que o layout fique mais elegante, os componentes foram 
inseridos dentro de um <fieldset>, marcado nas linhas 8 e 13, e também 
incluímos um elemento <legend>, na linha 9, para informar a que se 
refere esse campo de cadastro. O resultado do <fieldset> e <legend> é 
mostrado na figura a seguir, com um layout mais atrativo e elegante.
www.esab.edu.br 222
Figura 87 – Uso de legend e fieldset.
Fonte: Elaborada pelo autor (2013).
A finalidade do fieldset é organizar os elementos do formulário. 
Um elemento Fieldset pode conter outros elementos HTML, como 
tabelas, inputs, imagens. Os elementos inseridos no Fieldset passam 
a ser agrupados nele, resultando em uma apresentação gráfica mais 
organizada. Observe que o Fieldset organiza os elementos e a Legend dá 
nome ao agrupamento.
Passo 3 – Nesta etapa, criaremos uma caixa de seleção, do tipo select, 
que apresentará aos usuários as quatro cidades com filiais da empresa: 
Florianópolis, São José, Joinville e Blumenau. O código de criação da 
caixa de seleção é:
Algoritmo 92 – Passo 3: caixa de seleção de filial
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>FALE CONOSCO</title>
05 </head>
06 <body>
07 <form>
08 <fieldset>
09 <legend> Objetivo da Mensagem </legend>
10 <input type=”radio” name=”radmotivo”>Informação</
input>
11 <input type=”radio” name=”radmotivo”>Reclamação</
input>
12 <input type=”radio” name=”radmotivo”>Sugestão</input>
13 </fieldset>
14 <fieldset>
15 <legend> Filial </legend>
16 <select name=”selectfilial”>
17 <option>Florianópolis</option>
18 <option>São José</option>
www.esab.edu.br 223
19 <option>Joinville</option>
20 <option>Blumenau</option>
21 </select>
22 </fieldset>
23 </form> 
24 </body>
25 </html>
Fonte: Elaborado pelo autor (2013).
Utilizamos novamente o controle Fieldset (nas linhas 8, 13, 14 e 22) e 
Legend (nas linhas 9 e 15) para marcar os elementos da lista de filiais, que 
criamos no controle select, de nome “selectfilial” (nas linhas 16 e 21). 
Passo 4 – Agora, criaremos uma caixa de texto com uma linha para o 
usuário informar o motivo do assunto, e uma caixa de texto para cadastro 
da descrição do motivo do contato. Veja o código a seguir:
Algoritmo 93 – Passo 4: caixa de entrada de dados
01 <html>
02 ...
03 <body>
04 <form>
05 <fieldset>
06 ... <!-- codigo de criação dos RADIO !-->
07 </fieldset>
08 <fieldset>
09 ...<!—código de criação dos SELECTS !-->
10 </fieldset>
11 <fieldset>
12 <legend> Motivo do Contato </legend>
13 <label>Assunto:</label></br>
14 <input type=”text” name=”edassunto” size=”30”/></
input></br>
15 <label>Motivo:</label></br>
16 <textarea name=”edmotivo” rows=”5” cols=”60”></
textarea></br>
17 </fieldset>
18 </form>
19 </body>
20 </html> 
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 224
Para que o código não ficasse tão extenso, as instruções que já foram 
codificadas nos exemplos anteriores foram trocadas por três pontos (...), 
isso significa que você não precisa mudá-las nessas linhas. Você apenas 
tem que acrescentar as novas instruções, da linha 11 à 17 desse novo 
código, antes da tag que fecha o formulário </form>. Essas instruções 
estão criando o elemento de apresentação de texto (label) e as caixas 
de entrada de dados. Os labels ou rótulos têm por objetivo informar 
ao usuário qual a finalidade de um campo. Um formulário sem labels 
dificilmente será utilizadopelo usuário, pois a sua usabilidade estará 
afetada. Na linha 12, definimos o título do agrupamento por meio 
do elemento Legend, neste caso, “Motivo do Contato”. Cada campo 
de edição, elementos “input” e “textarea” são associados a um label 
com um título que possa indicar ao usuário os dados que devem ser 
informados, por exemplo, “Assunto” e “Motivo”. Para maior organização 
dos elementos (label, input, textarea), eles foram agrupados no Fieldset 
definido nas linhas 11 até 16.
Passo 5 – Nesta penúltima etapa, criaremos os campos de identificação 
do cliente que acessou o formulário. O layout desses campos é 
apresentado na Figura 88, observe:
Figura 88 – Identificação do cliente.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 225
O código que cria esses campos é apresentado no Algoritmo 94:
Algoritmo 94 – Passo 5: dados de contato
01 <html>
02 <head>
03 ...
04 </head>
05 <body>
06 <form>
07 ...
08 <fieldset>
09 <legend> Contato </legend>
10 <label>Telefone:</label></br>
11 <input type=”text” name=”edfone” size=”15”/></
input></br>
12 <label>E-mail:</label></br>
13 <input type=”text” name=”edemail” size=”40”/></
input></br>
14 <label>Nome:</label></br>
15 <input type=”text” name=”ednome” size=”50”/></
input></br>
16 </fieldset>
17 </form>
18 </body>
19 </html>
Fonte: Elaborado pelo autor (2013).
Passo 6 – Finalmente, criaremos os dois botões para envio e limpeza dos 
campos do formulário. O código para criação desses botões é apresentado 
no Algoritmo 95, acompanhe:
Algoritmo 95 – Passo 5: botões do formulário
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>FALE CONOSCO</title>
05 </head>
06 <body>
07 <form>
08 ...
09 <button name=”btenviar” type=”submit”>Enviar 
Formulário</button>
www.esab.edu.br 226
10 <button name=”btlimpar” type=”reset”>Limpar 
Formulário</button>
11 </form>
12 </body>
13 </html>>
Fonte: Elaborado pelo autor (2013).
Com esses seis passos, criamos o formulário. Quando ele for executado 
no editor, a apresentação no navegador terá o seguinte layout:
Figura 89 – Formulário de contato.
Fonte: Elaborada pelo autor (2013).
Nesta unidade, criamos um formulário utilizando os comandos 
HTML. Você deve ter notado que o layout do formulário não apresenta 
uma interface muito atrativa. Por isso, na próxima unidade, daremos 
continuidade aos nossos estudos, conhecendo as regras de CSS que 
podem ser aplicadas para estilizar os formulários.
www.esab.edu.br 227
29 Como estilizar os formulários
Objetivo
Apresentar técnicas que permitam criar formulários mais atrativos 
com o uso de CSS.
Na unidade anterior, criamos um formulário utilizando os comandos 
HTML. Nesta unidade, vamos estudar como aplicar as regras de CSS 
para o desenvolvimento de formulários estilizados, deixando-os mais 
organizados e visualmente mais atraentes. 
Os formulários criados em HTML não possuem nenhuma estilização 
de fonte, cores, formatação e alinhamento de textos, contendo apenas 
os controles para o cadastramento dos dados. Com a utilização do CSS, 
é possível estilizar o formulário, com posicionamento dos controles, 
alinhamento dos campos, mudar a cor de fundo dos agrupamentos de 
elementos etc.
Vamos começar por uma estrutura de formulário com o layout, 
apresentada na Figura 90.
Figura 90 – Formulário de cadastro de cliente.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 228
Apresentamos, no algoritmo 96, o código que cria esse formulário.
Algoritmo 96 – Código de criação do formulário de cadastro de aluno
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>Cadastro</title>
05 </head>
06 <body>
07 <form>
08 <fieldset>
09 <legend>Cadastro de Alunos</legend>
10 <label>Nome:</Label></br>
11 <input type=”text” name=”ednome” size=”50”></input>
12 <label>Matrícula:</Label>
13 <input type=”text” name=”edmatricula” size=”10”></
input>
14 <label>Curso:</Label>
15 <input type=”text” name=”edcurso” size=”50”></input>
16 </fieldset> 
17 <fieldset>
18 <legend>Endereço</legend>
19 <label>Logradouro:</Label></br>
20 <input type=”text” name=”edlogradouro” size=”80”></
input>
21 <label>Tipo:</Label>
22 <select name=”selecttipo”>
23 <option>Rua</option>
24 <option>Avenida</option>
25 <option>Servidão</option>
26 </select>
27 </br>
28 <label>Cidade:</Label>
29 <input type=”text” name=”edcidade” size=”50”></input>
30 <label>Bairro:</Label>
31 <input type=”text” name=”edbairro” size=”45”>
32 <label>UF:</Label>
33 <input type=”text” name=”eduf” size=”02”>
34 <label>CEP:</Label>
35 <input type=”text” name=”edcep” size=”09”>
36 </fieldset> 
37 <fieldset>
38 <legend>Telefones</legend> 
39 <label>DDD:</Label>
www.esab.edu.br 229
40 <input type=”text” name=”eddddcelular” size=”03”></
input>
41 <label>Celular:</Label>
42 <input type=”text” name=”edcelular” size=”10”></
input></br>
43 <label>DDD:</Label>
44 <input type=”text” name=”eddddresidencial” 
size=”03”></input>
45 <label>Residencial:</Label>
46 <input type=”text” name=”edresidecial” size=”10”></
input></br>
47 </fieldset> 
48 <fieldset>
49 <button name=”btenviar” type=”submit”>Enviar</button>
50 <button name=”btlimpar” type=”reset”>Limpar</button>
51 </fieldset>
52 </form> 
53 </body>
54 </html>
Fonte: Elaborado pelo autor (2013).
Basicamente, a estrutura da página está dividida em: <form>, <fieldset> 
e <legend>. Os códigos dos algoritmos 96 a 100 apresentam as regras 
CSS para estilização de cada um desses elementos que, no conjunto, 
estilizarão toda a página.
A primeira regra formatará o formulário, nas seguintes propriedades: 
tamanho da fonte (font-size), estilo da fonte (font-weight), cor da fonte 
(color). O código que cria essa regra CSS tem a seguinte formatação:
Algoritmo 97 – Regra de formatação do formulário
01 .regra_formulario{
02 font-size:1.3em;
03 font-weight:bold;
04 color:black;
05 }
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 230
No algoritmo 97, a fonte está sendo estilizada em um tamanho 1.3 em. 
Esse tamanho representa uma variável de 30% do tamanho do corpo do 
documento em que o formulário será inserido. Se o tamanho da fonte 
do corpo da página for 10 pixels, por exemplo, o formulário terá um 
tamanho de 13 pixels (10 x 1.3 = 13).
Na Figura 91, você tem o resultado do carregamento dessa regra pelo 
navegador.
Figura 91 – Formulário de cadastro de cliente: campos em negrito.
Fonte: Elaborada pelo autor (2013).
A próxima regra formatará as marcações <fieldset>, definindo as 
propriedades: cor de fundo (background), estilo da borda (border) e 
espaçamento das margens (padding). O código que cria essa regra CSS 
tem a seguinte formatação:
Algoritmo 98 – Regra de formatação do fieldset
01 .regra_fieldset{
02 background:DarkOrange;
03 border: 1px solid DimGrey;
04 padding: 0 0.5em;
05 }
Fonte: Elaborado pelo autor (2013).
A regra define na linha 3 uma borda ao redor do formulário com 
espessura de 1 pixel, sólida e na cor cinza escuro. Na linha 3, definimos 
também um espaçamento entre os elementos do formulário. Já na linha 
2 definimos a cor de fundo do formulário.
www.esab.edu.br 231
O resultado do carregamento dessa regra pelo navegador você pode ver 
na figura a seguir.
Figura 92 – Formulário de cadastro de cliente: cor de fundo.
Fonte: Elaborada pelo autor (2013).
A próxima regra formatará as marcações <legend>, definindo as 
propriedades: cor de fundo (background), estilo da borda (border) e 
espaçamento das margens (padding), cor da fonte (color). O código que 
cria essa regra CSS tem a seguinte formatação:
Algoritmo 99 – Regra de formatação da legenda
01 .regra_legend{
02 background:MistyRose;
03 color:blue;
04 padding: 0 0.5em;
05 border: 1px solid green; 
06 }
Fonte:Elaborado pelo autor (2013).
Na linha 1, o código estiliza a legenda na cor de fundo MistyRose, Já 
na linha 2, estilizamos a cor da fonte em azul. Na linha 4, estilizamos 
o espaçamento entre os elementos do formulário e por fim, na linha 5, 
definimos uma borda sólida, em verde de tamanho 1 pixel.
Na figura a seguir, apresentamos o resultado do carregamento dessa regra 
pelo navegador.
www.esab.edu.br 232
Figura 93 – Formulário de cadastro de cliente: formatação da legenda.
Fonte: Elaborada pelo autor (2013).
O arquivo com as regras CSS possui a estrutura apresentada no 
Algoritmo 100.
Algoritmo 100 – Regra de formatação completa
01 .regra_formulario{
02 font-size:1.3em;
03 font-weight:bold;
04 color:black;
05 }
06 .regra_fieldset{
07 background:#EEC591;
08 border: 1px solid #90;
09 padding: 0 0.5em;
10 }
11 .regra_legend{
12 background:#FFF8DC;
13 color:blue;
14 padding: 0 0.5em;
15 border: 1px solid green; 
16 }
Fonte: Elaborado pelo autor (2013).
Agora, precisamos fazer a referência de cada elemento <form>,<fieldset> 
e <legend> com as regras criadas anteriormente. O código com as 
alterações necessárias para que as regras sejam interpretadas pelo 
navegador, você pode ver no Algoritmo 101.
www.esab.edu.br 233
Algoritmo 101 – Página HTML estilizada pelas regras CSS
01 <html>
02 <head>
03 <link rel=”stylesheet” type=”text/css” href=”regrasForm.
css” media=”all”>
04 </head>
05 <body>
06 <form class=”regra_formulario”>
07 <fieldset class=”regra_fieldset”>
08 <legend class=”regra_legend”>Cadastro de Alunos</
legend>
09 ...
10 </fieldset> 
11 <fieldset class=”regra_fieldset”>
12 <legend class=”regra_legend”>Endereço</legend>
13 ...
14 </fieldset> 
15 <fieldset class=”regra_fieldset”>
16 <legend class=”regra_legend”>Telefones</legend> 
17 ...
18 </fieldset> 
19 <fieldset class=”regra_fieldset”>
20 ...
21 </fieldset>
22 </form>
23 </body>
24 </html>
Fonte: Elaborado pelo autor (2013).
Nesta unidade, você pôde estudar como integrar os comandos HTML 
com as regras CSS. Essa técnica é importantíssima para a criação de 
formulários com layouts mais modernos e atrativos. Por isso, lembre-
se sempre de garantir a usabilidade do site, facilitando a interação do 
usuário com os formulários, usando nomes de campos que representem 
os dados que serão cadastrados, identificando o objetivo do formulário 
e campos obrigatórios. Na próxima unidade, você poderá criar um 
formulário estilizado passo a passo. Vamos lá?
www.esab.edu.br 234
30 Criando um formulário de cadastro de cliente usando HTML e CSS 
Objetivo
Possibilitar o desenvolvimento e a visualização de uma página HTML 
com um formulário para cadastro dos dados.
Na unidade anterior, você estudou como integrar os comandos HTML 
com as regras CSS. Viu que essa é uma técnica importantíssima para 
a criação de formulários com layouts mais modernos e atrativos. Nesta 
unidade, você poderá criar um formulário de cadastro, com nome, 
sobrenome, e-mail, cidade, unidade federativa e uma lista de times 
de futebol, utilizando os comandos HTML e regras CSS. A criação 
do formulário foi dividida em cinco (5) passos, para que você possa 
compreender cada uma das etapas realizadas e os resultados esperados.
Passos para criação de um formulário de cadastro
O layout do formulário é apresentado na Figura 94.
Figura 94 – Formulário de cadastro de cliente.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 235
Passo 1 – Em primeiro lugar, construiremos a estrutura da página que 
conterá o formulário. Abra o editor de texto e edite o seguinte código:
Algoritmo 102 – Página de pesquisa em HTML
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>Cadastro</title>
05 </head>
06 <body>
07 <div>
08 <h1>Formulário Exemplo</h1>
09 <hr/> /* criar uma linha horizontal no formulário */
10 <form>
11 <fieldset >
12 <legend>Pesquisa Times de Futebol</legend>
13 <ol>
14 <li>
15 <label>Nome:</label>
16 <input type=”text” name=”ednome” size=”25”/>
17 </li>
18 <li>
19 <label>Sobrenome:</label>
20 <input type=”text” name =”edsobrenome” size=”30”/>
21 </li>
22 <li>
23 <label>E-mail:</label>
24 <input type=”text” name =”edemail” size=”40”/>
25 </li>
26 <li>
27 <label>Cidade:</label>
28 <input type=”text” name =”edcidade” size=”30”/>
29 </li>
30 <li>
31 <label >UF:</label>
32 <input type=”text” name =”eduf” size=”02”/>
33 </li>
34 <li>
35 <label>Seu Time:</label>
36 </li>
37 </ol>
38 <button type=”submit” name =”enviar”>Gravar</button>
39 <button type=”reset” name =”limpar”>Cancelar</button>
40 </fieldset>
41 </form>
www.esab.edu.br 236
42 </div>
43 </body>
44 </html>
Fonte: Elaborado pelo autor (2013).
A estrutura da página foi criada utilizando como marcador principal 
a tag <div>, para que o formulário (tag <form>) fique dentro de uma 
divisão da página, como uma seção do documento HTML. O formulário 
possui um único elemento por um <fieldset>, com o título “Pesquisa 
Times de Futebol” (linha 12). Por sua vez, o <fieldset> é composto por 
uma lista não ordenada <ol>, ou seja, para organizar os campos e labels 
no formulário iremos utilizar uma lista não ordenada para tal tarefa. 
Cada elemento <li> da lista é formado por controle de label, seguido de 
outro controle de input (como você pode visualizar no código das linhas 
15 e 16, 19 e 20, 23 e 24, 27 e 28, 31 e 32).
Na linha 35, foi criado um label com o título “Seu Time” e está faltando 
o controle composto pela lista de times que o usuário poderá selecionar. 
No próximo passo, será construído um controle <select> composto pelos 
itens com nomes de times.
Passo 2 – Nesta etapa, construiremos a estrutura da página que 
apresentará as opções de times para o usuário. Abra o editor de texto e 
edite o seguinte código:
Algoritmo 103 – Caixa de seleção de times
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <title>Cadastro</title>
05 </head>
06 <body>
07 <div>
08 ...
09 <form>
10 <fieldset >
11 <legend>Pesquisa Times de Futebol</legend>
12 ...
13 <li>
www.esab.edu.br 237
14 <label>Seu Time:</label>
15 <select name=”selecttime”>
16 <option>Atlético Mineiro</option>
17 <option>Atlético Paranaense</option>
18 <option>Bahia</option> 
19 <option>Botafogo</option>
20 <option>Corinthians</option>
21 <option>Coritiba</option>
22 <option>Criciúma</option>
23 <option>Cruzeiro</option>
24 <option>Flamengo</option>
25 <option>Fluminense</option>
26 <option>Goiás</option>
27 <option>Grêmio</option>
28 <option>Internacional</option>
29 <option>Náutico</option>
30 <option>Ponte Preta</option>
31 <option>Portuguesa</option>
32 <option>Santos</option>
33 <option>São Paulo</option>
34 <option>Vasco da Gama</option>
35 <option>Vitória</option>
36 <option>Outro</option>
37 </select>
38 </li>
39 ....
40 </ol>
41 ...
42 </fieldset>
43 </form>
44 </div>
45 </body>
46 </html>.
Fonte: Elaborado pelo autor (2013).
Passo 3 – Vamos implementar as regras CSS para os elementos criados 
na página HTML. Para isso, abra um novo arquivo no editor, edite 
o código (que apresentamos no Algoritmo 104) e salve-o com nome 
“regrasExemplo.css”.
www.esab.edu.br 238
Algoritmo 104 – Regras CSS para elementos da página HTML
01 .form {width: 20em; font-size: 1.6em;}
02 .form_fieldset {background:#LightYellow; border: 1px solid 
PaleGoldenrod; padding: 0 0.5em;}
03 .form_legend {background: LightYellow; padding: 0 0.5em; 
border: 1px solid blue;}
04 .form_fieldset_ol {list-style: none; margin: 0; padding: 0;}
05 .form_label { display: block;}
06 .form_ol_li { margin: 0.5em 0;}
07 .form_input { color:green;}
Fonte: Elaborado pelo autor (2013).
Com a instrução dada na linha 1, criamos a regra de formatação do 
tipo classe, intitulada “form”, que será aplicadano formulário. A regra 
especifica o tamanho do formulário (width) e o tamanho da fonte 
(font-size). Na linha 2, a regra nomeada como “form_fieldset”, define 
as propriedades do controle fieldset (cor de fundo/background, borda / 
border e cor da borda #666). Na linha 3, a regra de classe “form_legend” 
define a cor de fundo (background), espaçamento (padding), borda 
(border) e cor da borda em azul (blue). Na linha 4, a regra do tipo classe, 
chamada “form_fieldset_o” remove os marcadores da lista não ordenada 
(list-syle:none). A regra “form_label”, que criamos na linha 5, define 
o formato de apresentação do label em bloco. A regra “form_ol_li”, da 
linha 6, formata cada elemento da lista com margens de altura e largura 
em 0.5 cm e 0. Por fim, a regra “form_input”, da linha 7, formata todos 
os controles de input com a fonte na cor verde.
O próximo passo é incorporar as regras de CSS ao arquivo HTML.
Passo 4 – Nesta etapa, faremos com que o arquivo HTML incorpore 
as regras CSS do arquivo “regrasExemplo.css”. Para isso, inclua no 
arquivo HTML , entre as tags <head> e </head>, a seguinte linha de 
código: <link rel=”stylesheet” type=”text/css” href=”regrasExemplo.css” 
media=”all”>, como apresentado na linha 4 do Algoritmo 101.
A próxima tarefa será associar cada elemento à sua regra CSS.
www.esab.edu.br 239
Passo 5 – Neste último passo, a finalidade é fazermos a associação de 
todas as regras criadas com os respectivos elementos da página HTML. 
O elemento formulário <form> será associado à regra “form”, e assim 
por diante. Para os demais elementos da página, (como demonstrado no 
Quadro 20) será feita essa relação do elemento e de como ficará o código 
que associa a regra. Para cada elemento, após o nome do elemento, inclua a 
cláusula “class” seguida do nome da classe. Por exemplo, tínhamos na linha 
11 (do algoritmo 100) a instrução <fieldset>. Porém, com a inclusão da 
regra CSS de classe associada, esta ficará <fieldset class =”form_fieldset”>. 
Essa alteração deve ser feita para todos os elementos <fieldset>.
O Quadro 20 demonstra a relação do elemento e de como ficará o 
código que associa a regra, observe:
Elemento Instrução HTML
Form <form class=”form” action=””>
Fieldset <fieldset class =”form_fieldset”>
Legend <legend class=”form_legend”>
OL <ol class=”form_fieldset_ol” >
LI <li class=”form_ol_li”>
LABEL <label class=”form_label”>
INPUT <input class=”form_input” type=”text” ...
Quadro 20 – Associação das regras ao elemento HTML.
Fonte: Elaborado pelo autor (2013).
Salve o arquivo com as alterações e execute-o.
O código do algoritmo 105 apresenta o código da página HTML com 
todas as alterações realizadas nos passos anteriores, acompanhe:
www.esab.edu.br 240
Algoritmo 105 – Código da página HTML
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=UTF-8”>
04 <link rel=”stylesheet” type=”text/css” 
href=”regrasExemplo.css” media=”all”>
05 <title>Cadastro</title>
06 </head>
07 <body>
08 <div>
09 <h1>Formulário Exemplo</h1>
10 <hr/>
11 <form class=”form” action=””>
12 <fieldset class =”form_fieldset”>
13 <legend class=”form_legend”>Pesquisa Times de 
Futebol</legend>
14 <ol class=”form_fieldset_ol” >
15 <li class=”form_ol_li”>
16 <label class=”form_label”>Nome:</label>
17 <input class=”form_input” type=”text” name=”ednome” 
size=”25”/>
18 </li>
19 <li class=”form_ol_li”>
20 <label class=”form_label”>Sobrenome:</label>
21 <input class=”form_input” type=”text” 
name=”edsobrenome” size=”30”/>
22 </li>
23 <li class=”form_ol_li”>
24 <label class=”form_label”>E-mail:</label>
25 <input class=”form_input” type=”text” name=”edemail” 
size=”40”/>
26 </li>
27 <li class=”form_ol_li”>
28 <label class=”form_label”>Cidade:</label>
29 <input class=”form_input” type=”text” name=”edcidade” 
size=”30”/>
30 </li>
31 <li class=”form_ol_li”>
32 <label class=”form_label”>UF:</label>
33 <input class=”form_input” type=”text” name=”eduf” 
size=”02”/>
34 </li>
35 <li class=”form_ol_li”>
36 <label class=”form_label”>Seu Time:</label>
37 <select name=”selecttime”>
38 <option>Atlético Mineiro</option>
39 <option>Atlético Paranaense</option>
www.esab.edu.br 241
40 <option>Bahia</option> 
41 <option>Botafogo</option>
42 <option>Corinthians</option>
43 <option>Coritiba</option>
44 <option>Criciúma</option>
45 <option>Cruzeiro</option>
46 <option>Flamengo</option>
47 <option>Fluminense</option>
48 <option>Goiás</option>
49 <option>Grêmio</option>
50 <option>Internacional</option>
51 <option>Náutico</option>
52 <option>Ponte Preta</option>
53 <option>Portuguesa</option>
54 <option>Santos</option>
55 <option>São Paulo</option>
56 <option>Vasco da Gama</option>
57 <option>Vitória</option>
58 </select>
59 </li>
60 </ol>
61 <button type=”submit” name=”enviar”>Gravar</button>
62 <button type=”reset” name=”limpar”>Cancelar</button>
63 </fieldset>
64 </form>
65 </div>
66 </body>
67 </html>
Fonte: Elaborado pelo autor (2013).
Nesta unidade, você pôde criar um formulário utilizando os comandos 
HTML com estilização em CSS. Na próxima unidade, você será 
apresentado a outro componente muito utilizado nas páginas HTML: 
a tabela.
www.esab.edu.br 242
Resumo
Nas últimas unidades, você pôde desenvolver um menu com estilo, o que 
garante um layout mais interessante para o usuário que visita o site. 
Conheceu também os diferentes controles que podem ser utilizados 
em formulários HTML. Há uma grande variedade de componentes 
chamados de controles e que podem ser utilizados no formulário.
Em algumas situações, alguns controles do formulário não podem ser 
alterados ou acessados. Para isso, são utilizados os atributos disabled e 
readonly, fundamentais na formatação do formulário que, em conjunto 
com o atributo tabindex, possibilitam a construção de interfaces gráficas 
que facilitem o uso do sistema e a integração com o usuário.
Como forma de reforçar os conhecimentos, você criou um formulário 
utilizando os comandos HTML e aprendeu a integrar os comandos 
com as regras CSS. Essa técnica é importantíssima para a criação 
de formulários com layouts mais modernos e atrativos. Gostaríamos 
de ressaltar que o mais importante é garantir a usabilidade do site, 
facilitando a interação do usuário com os formulários, usando nomes de 
campos que representem os dados que serão cadastrados e identificando 
o objetivo do formulário e campos obrigatórios. 
www.esab.edu.br 243
31 Como tabelar os dados apresentados nas páginas HTML
Objetivo
Apresentar a sintaxe do comando table para criação de tabelas nas 
páginas em HTML. 
Na unidade anterior, você criou um formulário utilizando os comandos 
HTML com estilização em CSS. Nesta unidade, será apresentado 
quando e como utilizar as tabelas no desenvolvimento de sites. 
Manzano e Toledo (2008, p. 149) apresentam a tabela como: “[...] 
uma estrutura formada por um conjunto de linhas e colunas, sendo o 
encontro de uma linha com uma coluna denominado célula”.
Vejamos agora a Figura 95, que apresenta o layout de uma tabela criada 
em HTML, com duas linhas e duas colunas, sendo a primeira linha 
formada pelos títulos das colunas.
Figura 95 – Tabela HTML.
Fonte: Elaborada pelo autor (2013).
Saber utilizar corretamente as tabelas é muito importante se você 
deseja desenvolver um site moderno e que atenda às regras de layout e 
usabilidade preconizadas pela W3C.
Segundo Silva (2008, p. 235), “[...] a tabela é renderizada em um 
navegador gráfico, como uma espécie de grade, composta de colunas, 
linhas e células, podendo conter textos, imagem, link, script ou qualquer 
outro conteúdo”.
www.esab.edu.br 244
As tabelas foram criadas para dados tabulares, mas, por serem elementos 
de fácil utilização para organizar a estrutura de uma página, foram, e 
ainda são, muito utilizadas para a construçãodo layout do site. Silva 
(2008, p. 235) destaca que “[...] o elemento table foi introduzido como 
o HTML 2.0 em 1994 com a finalidade de apresentar dados tabulares 
[...]”. O elemento table é a tag HTML para marcação de tabelas.
Você deve saber que no desenvolvimento de sites, independentemente da 
complexidade, é fundamental a organização dos conteúdos. O uso das 
tabelas atende a essa necessidade, por isso se tornou um elemento muito 
utilizado na formatação de todos os conteúdos das páginas.
Em um contexto geral, podemos pensar em uma inversão no uso das 
tabelas, uma vez que foram criadas para apresentar dados tabulados e 
passaram a “tabular” os dados para que estes fossem apresentados em forma 
de tabelas, para facilitar a manutenção do código. Esse fenômeno se justifica 
devido à facilidade na utilização das tabelas para formatação dos conteúdos. 
Mas há outras características que colaboraram para esse uso incorreto do 
elemento table, como destaca Silva (2008). 
• Facilidade de leitura e entendimento da marcação, o que torna a 
tarefa de manutenção mais rápida e eficiente.
• Marcação clara, concisa e que, por conter apenas a estrutura do 
documento, não interfere com a apresentação.
• Código muito menor em quantidade de caracteres na marcação, 
resultando em tempo de carregamento reduzido.
Entretanto, essa técnica não é recomendada pela W3C como uma boa 
prática, tanto que resultou no conceito de Tableless, sem tabela em 
inglês. Diferentemente do que você possa pensar, isso não significa que as 
tabelas devem ser banidas de documentos HTML, mas sim que devem 
ser usadas dentro de uma proposta de criação de dados tabulares. 
Para Silva (2008, p. 235), “[...] o conceito tableless ganhou força na 
comunidade brasileira de desenvolvedores e foi interpretado literal e 
distorcidamente como se tabelas fossem proibidas. Para o autor, elas “[...] 
são legais e devem ser usadas para os fins a que se destinam”. E destaca 
www.esab.edu.br 245
ainda que: destaca ainda: “[...] tabelas são por excelência o identificador 
e o grande diferencial entre a marcação HTML ultrapassada e a moderna 
marcação de websites” (SILVA, 2008, p. 235).
Manzano e Toledo (2008, p. 149) referem-se ao uso das tabelas em 
documentos HTML: 
[...] devem apenas ser usadas para apresentar dados dispostos e organizados em 
forma tabular. Esse recurso não deve ter outra utilidade. Muitas pessoas, ao longo dos 
últimos anos, usaram tabelas inclusive para organizar layout de um documento. [...] 
segundo a recomendação do consórcio W3C, devem ser usadas apenas para dispor e 
apresentar dados e nada mais. 
Por tudo isso, as tabelas são consideradas as vilãs dos sites, fato disseminado 
principalmente pela interpretação errônea do termo tableless. 
Como o termo transmite uma ideia de que as tabelas devem ser banidas, 
melhor é usá-lo no sentido de que as tabelas devem ser utilizadas para 
apresentação de conteúdo, assim como todo elemento HTML, e a 
organização e estilização são incumbências do CSS. 
Estudo complementar
Aprofunde seus conhecimentos com mais 
informações contidas no artigo “Web Stantards vs. 
Tableless”, de Diego Elis, disponível aqui.
Para a definição da tabela no documento HTML, devemos usar as tags 
<table> e </table> para determinar o início e o final da tabela, delimitando 
a área que é gerenciada por esse elemento. Essas duas tags não constroem 
a tabela, apenas demarcam sua área, caso sejam utilizadas sem outras 
tags específicas, que serão apresentadas posteriormente. As tags, ao serem 
renderizadas pelo navegador, terão como resultado uma área vazia, sem 
elemento algum. Para que a tabela seja apresentada, é preciso que sejam 
definidas as linhas e as colunas que a compõem. Esses elementos (linhas e 
colunas) são criados na área delimitada pelas tags <table> e </table>.
www.esab.edu.br 246
No código HTML a seguir, está sendo delimitada a área de uma tabela:
Algoritmo 106 – Página com elemento table
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=ISO-8589-1”>
04 </head>
05 <body>
06 <table>
07 <!-- Aqui devem ficar as tags de estrutura da tabela!-->
08 </table>
09 </body>
10 </html>
Fonte: Elaborado pelo autor (2013).
Note que nas linhas 6 e 8 as tags que demarcam a área da tabela estão 
sendo definidas no documento HTML, porém, as linhas e colunas da 
tabela não foram definidas. Portanto, podemos entender que há uma 
definição da área da tabela no documento HTML, mas sua estrutura 
não possui especificação de quantas linhas e colunas existirão na tabela. 
Todavia, a estrutura de uma tabela vai além de linhas e colunas, podendo 
conter um título (atributo caption), responsável por fornecer uma breve 
descrição da finalidade da tabela, que é renderizada pelo navegador 
(visível na página), por exemplo. 
A descrição da tabela pode ser mais detalhada. Para isso, você pode usar 
o atributo summary (sumário), que não resulta em texto apresentado na 
página, mas que pode ser acessado pelo usuário por tecnologias assistivas.
www.esab.edu.br 247
Saiba mais
De acordo com o Comitê de Ajudas Técnicas 
(CAT), instituído no âmbito da Secretaria dos 
Direitos Humanos (SDH), da Presidência da 
República, adota-se como conceito de Tecnologia 
Assistiva (ajudas técnicas ou produtos de apoio): 
produtos, recursos, metodologias, estratégias, 
práticas e serviços que objetivam promover 
a funcionalidade, relacionada à atividade e 
à participação, de pessoas com deficiência, 
incapacidades ou mobilidade reduzida, visando à 
sua autonomia, independência, qualidade de vida 
e inclusão social. Conheça mais sobre esse comitê 
acessando o site clicando aqui.
Ainda em relação à estrutura das tabelas, as linhas podem ser agrupadas 
em seções de cabeçalho (atributo thead), de rodapé (atributo tfoot) ou de 
corpo (atributo tbody). Já as células contidas na tabela (encontro de uma 
linha com uma coluna) podem conter um cabeçalho (elemento th) ou 
dados (elemento td). 
Todas essas propriedades definem um modelo de tabela que permite rotular 
cada célula. Esse é um mecanismo importante, principalmente, no auxílio 
para os usuários com incapacidades visuais e que utilizam outros meios de 
acesso aos sites, como agentes não visuais. Os agentes visuais emitem sons 
com os textos da página quando o usuário posiciona o ponteiro do mouse 
sobre o elemento HTML. Para auxiliar pessoas com dificuldades visuais, 
a maior acessibilidade da tabela está diretamente relacionada à quantidade 
de elementos descritos que podem ser lidos por estes agentes não visuais. 
Nesta unidade, apresentamos a você todo um contexto de uso da tabela 
e fizemos uma introdução das possíveis composições para a sua estrutura. 
Lembramos que as tags <table> e </table> definem a área de apresentação 
da tabela no documento HTML, com suas características (como rodapés e 
títulos) para, posteriormente, ter sua estrutura de linhas e colunas definida. 
Para a definição das linhas e colunas, são usadas as tags <TR> e <TD> 
respectivamente. Mas, isso é assunto para a próxima unidade.
www.esab.edu.br 248
Fórum
Caro estudante, dirija-se ao Ambiente Virtual de 
Aprendizagem da Instituição e participe do nosso 
Fórum de discussão. Lá você poderá interagir com 
seus colegas e com seu tutor de forma a ampliar, 
por meio da interação, a construção do seu 
conhecimento. Vamos lá?
www.esab.edu.br 249
32 Propriedades de uma tabela
Objetivo
Apresentar a sintaxe dos comandos TR e TD para criação de linhas e 
colunas nas tabelas das páginas em HTML.
Na unidade anterior, você foi apresentado a todo um contexto de uso 
da tabela e teve uma introdução das possíveis composições para a sua 
estrutura. Nesta unidade, daremos continuidade ao estudo do elemento 
table, agora com a inclusão dos elementos <tr> e <td> para definição das 
linhase colunas, que representam a estrutura básica de uma tabela.
Na unidade anterior, você estudou as tags que definem uma tabela 
(<table> e </table>). Continuaremos utilizando esses comandos, pois 
eles informam ao navegador o tipo de elemento que será apresentado.
As tags <tr> e </tr> indicam o início e o fim, respectivamente, de uma 
linha da tabela. Portanto, devem ser repetidas para cada linha. Já as tags 
<td> e </td> definem as células da tabela – lembrando que célula é o 
encontro de uma linha com uma coluna. Uma linha da tabela pode ter 
várias células. Assim, para delimitar uma célula, você precisa informar as 
tags <td> e </td>. 
O código a seguir cria uma tabela em HTML com 2 linhas e 3 colunas, 
resultando em seis células. Acompanhe:
Algoritmo 107 – Página com tabela
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=ISO-8589-1”>
04 </head>
05 <body>
06 <table border=”1”>
07 <tr><!--Linha 1 !-->
www.esab.edu.br 250
08 <td> Linha 1 Coluna 1 (célula)</td>
09 <td> Linha 1 Coluna 2 (célula)</td>
10 <td> Linha 1 Coluna 3 (célula)</td>
11 </tr>
12 <tr>><!--Linha 2 !-->
13 <td> Linha 2 Coluna 1 (célula)</td>
14 <td> Linha 2 Coluna 2 (célula)</td>
15 <td> Linha 2 Coluna 3 (célula)</td>
16 </tr>
17 </table>
18 </body>
19 </html>
Fonte: Elaborado pelo autor (2013).
Comentando o código, note que nas linhas 6 e 17 são utilizadas as tags 
para definição da área da tabela. Foi utilizado o atributo border=”1” 
para que a borda tenha espessura de tamanho 1 e seja apresentada no 
navegador, facilitando a visualização da tabela. Quanto maior o valor, 
mais espessa será a borda. Por padrão, a tabela é construída sem bordas.
A Figura 96 apresenta a tabela com border=“1” e sem o atributo border 
(sem borda). 
Figura 96 - Exemplo 1 de tabela HTML. 
Fonte: Elaborada pelo autor (2013).
As linhas 7 e 11 delimitam a área da primeira linha, por meio das tags 
<tr> e </tr>. Nas linhas 8, 9 e 10 são definidas as células dessa primeira 
linha, cada célula é marcada pelas tags </td> e </td>. As linhas 12 a 16 
possuem instruções semelhantes, porém o conteúdo de cada célula tem 
um texto diferente.
www.esab.edu.br 251
Note que a tabela possui colunas e linhas, porém, não há uma 
identificação do que são os dados apresentados nas células. Para resolver 
esse problema, podemos utilizar as tags <th> e </th>, que determinam os 
títulos das colunas, apresentando-os em negrito e centralizados. As tags 
<TH> e </TH>, abreviação de Table Header, têm a mesma função das 
tags TD, mas nas tags <TH> e </TH> o texto é exibido em centralizado 
e em negrito.
Para exemplificar, iremos acrescentar ao código anterior instruções para a 
criação de uma linha com três colunas, com os títulos: Coluna A, Coluna 
B e Coluna C.
Algoritmo 108 – Página com tabela com título
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=ISO-8589-1”>
04 </head>
05 <body>
06 <table border=”1”>
07 <tr> <!--Títulos das Colunas !-->
08 <th> Coluna A</th>
09 <th> Coluna B</th>
10 <th> Coluna C</th>
11 </tr>
12 <tr><!--Linha 1 !-->
13 ...
14 </tr>
15 <tr><!--Linha 2 !-->
16 ...
17 </tr>
18 </table>
19 </body>
20 </html>
Fonte: Elaborado pelo autor (2013). 
Note que não alteramos os demais dados. Nesse código, somente 
acrescentamos as tags <tr> e </tr> para definição de uma nova linha e 
acrescentamos três títulos para a tabela, com o uso das tags <th> e </
th>. As instruções que criam toda essa estrutura começam na linha 7 do 
código e terminam na linha 11. Verifique.
www.esab.edu.br 252
A figura a seguir apresenta o resultado do novo layout da tabela.
Figura 97 - Exemplo 2 de tabela HTML.
Fonte: Elaborada pelo autor (2013).
É possível melhorar o layout da tabela com a inclusão de um elemento 
caption. A tabela, então, apresentará um texto na parte superior. Para 
definição dessa legenda superior, são utilizadas as tags <caption> e 
</caption>. 
A Figura 98 apresenta o código-fonte de criação da tabela com as colunas 
A, B e C, com uma legenda (caption) chamada “Exemplo - Tabela”.
Figura 98 - Exemplo 3 de tabela HTML.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 253
Ao ser carregada pelo navegador, a tabela terá o seguinte layout (mostrado 
na Figura 99):
Figura 99 - Exemplo 4 de tabela HTML.
Fonte: Elaborada pelo autor (2013).
Com a finalidade de melhorar a acessibilidade do site, podemos inserir 
o atributo summary na criação da tabela. Entretanto, o texto desse 
elemento não é apresentado na tela, mas, sim, acessado por tecnologias 
assistivas. O código do Algoritmo 109, a seguir, exemplificará o uso 
do atributo summary no código construído até este momento: <table 
border=”1” summary=”tabela construída como exemplo para a disciplina 
de Ambientes Web da ESAB.”>
É importante ressaltarmos que os comandos utilizados para a criação da 
tabela têm como finalidade apresentar o conteúdo ao usuário, sendo que 
em nenhum momento houve a preocupação com layout ou estilização 
da tabela, como cor de fundo, cor dos textos, alinhamentos etc. Esse 
processo é essencial para garantir que o uso da tabela atenda às regras do 
consórcio W3C, as quais preconizam que tabelas são para apresentação 
de conteúdo, dados tabulados e nada mais.
Podemos melhorar a estrutura das tabelas, agrupando suas linhas. Essa ação 
é muito útil quando as tabelas são muitas extensas, com muitos dados ou 
ocupam mais de uma página do site. Quando as tabelas apresentam essas 
características – ou seja, são grandes, com muita informação ou ocupam 
mais de uma página –, o agrupamento das linhas faz com que os títulos 
das colunas se repitam em todas as páginas, garantindo uma visualização 
dos dados com qualidade. A estrutura da tabela pode ser dividida em 
cabeçalho, corpo e rodapé. Essa técnica é muito utilizada para apresentação 
da tabela em dispositivos móveis, como smartphones e tablets, já que o 
título e o rodapé da página se mantêm fixos, e apenas o corpo da página se 
movimenta durante a interação com o usuário.
www.esab.edu.br 254
Para tanto, você deve utilizar as tags: <thead> (cabeçalho da tabela), 
<tfoot> (rodapé da tabela) e <tbody> (todo o conteúdo da tabela). Essas 
tags criam grupos de linhas que servem para agrupar partes da tabela que 
tenham a mesma finalidade. Essas tags são opcionais, mas possibilitam o 
desenvolvimento de documentos HTML mais atrativos. 
O cabeçalho da tabela deve ser composto dentro da tag THEAD, e deve 
vir antes do corpo de dados da tabela, representado pela tag TBODY. Toda 
THEAD deve conter pelo menos uma tag TR e uma tag TD ou TH. 
A tag TBODY define o corpo de dados de uma tabela; a tabela pode 
possuir mais de uma TBODY. O uso de TBODY é obrigatório sempre 
que utilizado a THEAD ou TFOOT. Entretanto, pode ser omitido 
quando não forem definidos os cabeçalhos e os rodapés da tabela, mas 
existir um corpo de dados.
O rodapé de tabela deve ser composto dentro da tag TFOOT. A tag 
TFOOT, deve vir depois do corpo de dados da tabela e a tag THEAD, 
antes do corpo da tabela, para que ambas possam ser processadas antes 
que sejam apresentadas as linhas do corpo de dados da tabela, na tag 
TBODY. Toda TFOOT deve conter pelo menos uma tag TR e uma tag 
TD ou TH.
Veja no exemplo a seguir: acrescentamos as tags <thead>, <tfoot> e 
<tbody> ao código que cria a tabela com as colunas A, B e C.
Algoritmo 109 – Agrupamento dos elementos da tabela
01 <html>
02 <head>
03 ...
04 </head>
05 <body>
06 <table border=”1” summary=”tabela construída como exemplo 
para a disciplina de Ambientes Web da ESAB”>
07 <caption> Exemplo - Tabela </caption> 
08 <thead> <!--Agrupamento de Cabeçalho !-->
09 <tr> <!--Títulos das Colunas !-->
10 <th> Coluna A</th>
11 <th> Coluna B</th>
12 <th> Coluna C</th>
www.esab.edu.br 255
13 </tr>14 </thead>
15 <tfoot>
16 <tr><!-- Agrupamento dos Elementos do Rodapé !-->
17 <td>Itens - A</td>
18 <td>Itens - B</td>
19 <td>Itens - C</td>
20 </tr> 
21 </tfoot> 
22 <tbody> <!-- Agrupamento dos Elementos do Corpo da 
tabela !-->
23 <tr> <!--Linha 1 !-->
24 <td> Linha 1 Coluna 1 (célula)</td>
25 <td> Linha 1 Coluna 2 (célula)</td>
26 <td> Linha 1 Coluna 3 (célula)</td>
27 </tr>
28 <tr> <!--Linha 2 !-->
29 <td> Linha 2 Coluna 1 (célula)</td>
30 <td> Linha 2 Coluna 2 (célula)</td>
31 <td> Linha 2 Coluna 3 (célula)</td>
32 </tr>
33 <tbody>
34 </table>
35 </body>
36 </html>
Fonte: Elaborado pelo autor (2013).
A estrutura da tabela não mudou com a utilização das tags de 
agrupamento; o que realizamos foi uma organização dos dados, de forma 
a deixar evidenciados quais os itens do cabeçalho das tabelas, os itens do 
corpo da tabela e os elementos do rodapé. 
Os comandos que definem uma tabela possuem sintaxes simples, assim 
como a própria estrutura da tabela. A complexidade dos comandos não 
está na definição das instruções de criação e estruturação, mas nas regras 
que devem ser obedecidas para a construção. Manzano e Toledo (2008) 
apresentam algumas dicas importantes para marcação de tabelas. 
• Procure criar tabelas simples. Estude alternativas para uma tabela 
complexa e não descarte a possibilidade de subdividir uma tabela em 
duas ou três mais simples.
www.esab.edu.br 256
• Tabelas simples e pequenas (com um nível de cabeçalhos) podem ser 
marcadas somente com o elemento th.
• Tabelas muito extensas devem ser marcadas com elementos thead, 
tfoot e tbody.
Vimos, nesta unidade, que o comando Table define apenas a área da 
tabela no documento HTML. Para definição da sua estrutura, há um 
conjunto de comandos que visam a formatar a tabela e garantir uma 
melhor usabilidade do sistema. As tags que permitem a formatação da 
tabela são: <tr>, <td>, <th>, <caption>, <summary>, <thead>, <tbody>, 
<tfoot>. A propriedade border facilita a visualização da tabela. Vimos 
também que esses comandos formatam o conteúdo, sem nenhuma 
estilização. Na próxima unidade, veremos como aplicar o CSS para que 
as tabelas tenham um layout mais atrativo e bonito.
www.esab.edu.br 257
33 Estilizando uma tabela
Objetivo
Apresentar técnicas que permitam criar tabelas mais atrativas com o 
uso de CSS. 
Na unidade anterior, você viu que o comando Table define apenas a área 
da tabela no documento HTML. Viu ainda que para a definição da sua 
estrutura há um conjunto de comandos que visam a formatar a tabela 
e garantir uma melhor usabilidade do sistema. As tags que permitem 
a formatação da tabela são: <tr>, <td>, <th>, <caption>, <summary>, 
<thead>, <tbody>, <tfoot>. A propriedade border facilita a visualização 
da tabela. Por fim, estudou que esses comandos formatam o conteúdo, 
sem nenhuma estilização. 
Nesta unidade, veremos algumas técnicas para estilização das tabelas, 
com a finalidade de mudar o layout padrão gerado pelos comandos 
HTML, que é pouco atrativo. Nesse sentido, serão criadas regras CSS 
para estilização de cores do texto e do fundo da tabela, posicionamento e 
alinhamento dos elementos das células e formatação das bordas.
A Figura 100 apresenta a estrutura da tabela que será estilizada. 
Figura 100 – Tabela de veículos.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 258
O código-fonte em HTML que cria a tabela é apresentado a seguir:
Algoritmo 110 – Tabela de veículos
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=ISO-8589-1”>
04 </head>
05 <body>
06 <table border=”1” summary=”Lista de Veículos”>
07 <caption>Lista de Veículos Usados</caption>
08 <thead>
09 <thead>
10 <tr>
11 <th>Placa</th>
12 <th>Modelo</th>
13 <th>Marca</th>
14 <th>Preço</th>
15 </tr>
16 </thead>
17 <tbody>
18 <tr>
19 <td>AAA-1234</td>
20 <td>Fusca</td>
21 <td>Volkswagen</td>
22 <td>R$ 8.000,00 </td>
23 </tr>
24 <tr>
25 <td>AAC-4321</td>
26 <td>GOL</td>
27 <td>Volkswagen</td>
28 <td>R$ 12.000,00 </td>
29 </tr>
30 <tr>
31 <td>BBA-1122</td>
32 <td>CLIO</td>
33 <td>Renault</td>
34 <td>R$ 28.000,00 </td>
35 </tr>
36 </tbody>
37 </table>
38 </body>
39 </html>
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 259
Vamos criar algumas regras CSS que depois serão carregadas pela tabela. 
A regra a seguir servirá para estilizar as bordas da tabela.
Algoritmo 111 – Regra de estilização da borda
01 /* borda da tabela */
02 table{border: 2px solid black;}
03 /* borda dos elementos internos */
04 tr td, tr th{border: 1px solid black;}
Fonte: Elaborado pelo autor (2013).
A linha 2 cria um estilo de borda externa sólida, na cor preta, com 
tamanho de 2 pixels. Já, na linha 4, a regra estiliza as células formadas 
pela combinação das tags <TR> e <TD> e <TR> e <TH>. Observe que, 
na linha 4 do código, utilizamos a vírgula para separar dois grupos de 
atuação da regra css. O primeiro grupo compreende a combinação dos 
elementos TR e TD, e o segundo grupo, a combinação de TR e TH. 
Ainda na linha 4, definimos uma borda “solid” (sólida). Essa cláusula é 
opcional, uma vez que, por padrão, a borda é sempre sólida. Entretanto, 
é importante você saber que se trata de uma boa prática deixar as 
instruções bem explícitas.
Para que as margens sejam estilizadas, é importante que na definição 
da tabela você indique zero para o valor do atributo “cellspacing”, que 
corresponde ao espaço entre os elementos da tabela. Assim, o comando 
que define a tabela ficará com a seguinte instrução: <table border=”1” 
summary=”Lista de Veículos” cellspacing=”0”>.
Na próxima regra, definiremos o padrão da fonte que será utilizada pelos 
elementos do corpo da tabela. O código da regra é:
Algoritmo 112 – Regra de estilização do corpo da página
01 tbody{ font:70% Arial,Times, Sans-Serif, color:blue;}
Fonte: Elaborado pelo autor (2013).
A regra define o tamanho da fonte em 70% do tamanho da fonte do 
elemento na qual a tabela será inserida. Nesse caso, a tabela será inserida 
no corpo da página, elemento body, portanto seu tamanho será de 70% 
www.esab.edu.br 260
da fonte desse elemento. A cor da fonte será blue (azul), com tipo de 
fonte Arial ou Times ou Sans Serif.
A próxima regra fará a formatação dos elementos caption e thead da 
tabela. Seu código é apresentado a seguir.
Algoritmo 113 – Regra de estilização do caption
01 caption{
02 text-align:center;
03 font:bold 90% Arial, Sans-Serif;
04 color:red 
05 } 
Fonte: Elaborado pelo autor (2013).
A linha 2 define o alinhamento do texto no centro, já o código da linha 
3 define a fonte em tamanho 90%, na cor red e estilo de fonte Arial ou 
Sans Serif. 
A próxima regra tem como finalidade criar uma tabela com cores 
alternadas, conforme ilustra a Figura 101.
Figura 101 – Tabela de veículos.
Fonte: Elaborada pelo autor (2013).
Para isso, criaremos duas regras CSS de classe, com cores diferentes, que 
serão utilizadas alternadamente para cada linha da tabela.
www.esab.edu.br 261
Algoritmo 114 – Regra de estilização da cor de fundo das linhas
01 .cor1{
02 background:green;
03 }
04 .cor2{
05 background:blue;
06 }
Fonte: Elaborado pelo autor (2013).
Por fim, para a estilização da página, criaremos regras para carregamento 
de imagens para cada um dos títulos da tabela. O código possui a 
seguinte estrutura:
Algoritmo 115 – Regra de estilização de imagem para títulos
01 .icone_placa{
02 background:url(placa.png) no-repeat right ;
03 }
04 .icone_marca{
05 background:url(marca.png) no-repeat right ;
06 }
07 .icone_modelo{
08 background:url(modelo.png) no-repeat right ;
09 }
10 .icone_preco{
11 background:url(preco.png) no-repeat right ;
12 }
Fonte: Elaborado pelo autor (2013).
As imagens serão carregadas sem repetição e alinhadas à direita para cada 
título da tabela.www.esab.edu.br 262
O código completo de estilização da tabela de veículos é apresentado a 
seguir. 
Algoritmo 116 – Regra de estilização completa
01 table{
02 border: 2px solid black;
03 }
04 tr td, tr th{
05 border: 1px solid black;
06 }
07 tbody{
08 font:70% Arial,Times, Sans-Serif, color:blue;
09 }
10 caption{
11 text-align:center;
12 font:bold 90% Arial, Sans-Serif;
13 color:red
14 }
15 .cor1{
16 background:green;
17 }
18 .cor2{
19 background:blue;
20 }
21 .icone_placa{
22 background:url(placa.png) no-repeat right ;
23 }
24 .icone_marca{
25 background:url(marca.png) no-repeat right ;
26 }
27 .icone_modelo{
28 background:url(modelo.png) no-repeat right ;
29 }
30 .icone_preco{
31 background:url(preco.png) no-repeat right ;
32 }
Fonte: Elaborado pelo autor (2013).
O resultado final da apresentação da tabela com as regras de CSS é 
mostrado na Figura 102. 
www.esab.edu.br 263
Figura 102 – Tabela de veículos.
Fonte: Elaborada pelo autor (2013).
A seguir, apresentamos o código do Algoritmo 117, o mesmo do início 
desta unidade, com as alterações que resultarão no layout apresentado na 
Figura 101.
Algoritmo 117 – Documento HTML com a integração da regra CSS
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=ISO-8859-1”>
04 <link rel=”stylesheet” type=”text/css” 
href=”algoritmo114.css”>
05 </head>
06 <body>
07 <table border=”1” summary=”Lista de Veículos”>
08 <caption>Lista de Veículos Usados</caption>
09 <thead>
10 <thead>
11 <tr>
12 <th class=”icone_placa”>Placa</th>
13 <th class=”icone_modelo”>Modelo</th> 
14 <th class=”icone_marca”>Marca</th> 
15 <th class=”icone_preco”>Preço</th> 
16 </tr>
17 </thead>
18 <tbody>
19 <tr class=”cor1”>
20 <td>AAA-1234</td>
21 <td>Fusca</td>
22 <td>Volkswagen</td>
23 <td>R$ 8.000,00 </td>
24 </tr>
25 <tr class=”cor2”>
26 <td>AAC-4321</td>
27 <td>GOL</td>
28 <td>Volkswagen</td>
www.esab.edu.br 264
29 <td>R$ 12.000,00 </td>
30 </tr>
31 <tr class=”cor1”>
32 <td>BBA-1122</td>
33 <td>CLIO</td>
34 <td>Renault</td>
35 <td>R$ 28.000,00 </td>
36 </tr>
37 </tbody>
38 </table>
39 </body>
40 </html>
Fonte: Elaborado pelo autor (2013).
Nesta unidade, apresentamos algumas técnicas que possibilitam a criação 
de tabelas com layout mais atrativo com o uso de CSS. Na próxima 
unidade, criaremos uma tabela com estilização, com instruções passo a 
passo, de forma que sejam colocados em prática os assuntos relacionados 
com o elemento table.
www.esab.edu.br 265
34 Criando uma tabela com horário das aulas
Objetivo
Possibilitar o desenvolvimento e a visualização de uma página HTML 
com uma tabela contendo os dias da semana e as aulas que são 
ministradas nestes horários.
Na unidade anterior, apresentamos algumas técnicas que possibilitam a 
criação de tabelas com layout mais atrativo com o uso de CSS. Já nesta 
unidade, você poderá criar uma tabela de horário das aulas por período 
utilizando os comandos estudados nas unidades anteriores. A criação da 
tabela foi dividida em seis passos, para que você possa compreender cada 
uma das etapas realizadas.
Para a construção da página, utilize o editor de texto de sua preferência.
Passos para criação de uma tabela 
Passo 1 – Construiremos o código da página, utilizando somente os 
comandos HTML para produção do conteúdo da tabela. O código de 
criação da tabela é apresentado a seguir.
Algoritmo 118 – Tabela de horários
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=ISO-8589-1”>
<link rel=”stylesheet” type=”text/css” 
href=”algoritmo121.css” media=”all”>
04 </head>
05 <body>
06 <table border=”1” summary=”tabela de horários das 
aulas.”>
07 <caption> Horário de Aulas </caption> 
08 <thead> <!--Agrupamento de Cabeçalho !-->
09 <tr> <!--Títulos das Colunas !-->
10 <th> Período </th>
www.esab.edu.br 266
11 <th> Segunda-Feira</th>
12 <th> Terça-Feira </th>
13 <th> Quarta-Feira </th>
14 <th> Quinta-Feira </th>
15 <th> Sexta-Feira </th>
16 <th> Sábado </th>
17 </tr>
18 </thead>
19 </tfoot>
20 <tbody> <!-- Agrupamento dos Elementos do Corpo da tabela 
!-->
21 <tr>
22 <td>Matutino</td>
23 <td>Java</td>
24 <td>Java</td>
25 <td>Banco de Dados</td>
26 <td>Estrutura de Dados</td>
27 <td>UML</td>
28 <td>Livre</td>
29 </tr>
30 <tr>
31 <td>Vespertino</td>
32 <td>Java</td>
33 <td>Java</td>
34 <td>TCC</td>
35 <td>TCC</td>
36 <td>Compiladores</td>
37 <td>Livre</td>
38 </tr>
39 <tr>
40 <td>Noturno</td>
41 <td>Cálculo A</td>
42 <td>Sistemas Operacionais</td>
43 <td>Livre</td>
44 <td>Livre</td>
45 <td>POO</td>
46 <td>Livre</td>
47 </tr>
48 <tbody>
49 </table>
50 </body>
51 </html>
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 267
Começaremos a criar as regras CSS. Salve as regras no arquivo com o 
nome algoritmo115.css. A cada atualização da regra, regrave o arquivo.
Passo 2 – Vamos criar a regra CSS para formatação da tabela com 
definição da cor de fundo e da espessura da borda. O código tem a 
seguinte estrutura:
Algoritmo 119 – Formatação da tabela
01 table {
02 background:gray;
03 border:1px solid;
04 }
Fonte: Elaborado pelo autor (2013).
Passo 3 – Nesta etapa, criaremos a regra CSS para a formatação do 
caption, com definição da cor de fonte, do tipo da fonte, do tamanho da 
fonte e texto em maiúsculas. O código tem a seguinte estrutura:
Algoritmo 120 – Formatação do caption
01 caption {
02 color: blue;
03 font:700 18px Georgia, “Times New Roman”, Times, serif; 
/* 700 torna a fonte negrito */
04 padding:6px 4px 8px 0px;
05 text-transform:uppercase;
06 }
Fonte: Elaborado pelo autor (2013).
Observe que na linha 3 utilizamos o valor 700 na definição da fonte. Esse 
valor corresponde ao peso da fonte ou font-weight, que define quanto 
negrito será a fonte, variando de 100 a 900, em intervalos de 100 e 100. 
Saiba que quanto maior o valor, mais negrito terá a apresentação da fonte.
Passo 4 – No quarto e penúltimo passo, criaremos a regra CSS para 
a formatação do título da tabela, com definição da cor de fundo, do 
tamanho da fonte e da margem de topo. Nessa mesma regra, definiremos 
o alinhamento dos valores apresentados no corpo da tabela. O código 
tem a seguinte estrutura:
www.esab.edu.br 268
Algoritmo 121 – Formatação do título e do corpo da tabela
1 thead th {
2 background:gray;
3 font-weight:700;
4 padding-top:3px;
5 }
6 tbody th, tbody td {
7 text-align:left;
8 vertical-align:top;
9 }
Fonte: Elaborado pelo autor (2013).
Passo 5 – Criaremos, agora, a regra CSS para a formatação das cores dos 
textos da tabela. Na regra, quando o usuário posicionar o ponteiro do 
mouse sobre o elemento da tabela, a linha toda mudará de cor. O código 
tem a seguinte estrutura:
Algoritmo 122 – Formatação de cores da tabela
01 table, thead th, tfoot th, tbody tr:hover, td, th {
02 border-color: blue;
03 }
04
05 thead th, tfoot th, tbody tr:hover {
06 color: red
07 }
Fonte: Elaborado pelo autor (2013).
Passo 6 – Finalmente, mas não menos importante, criaremos a regra 
CSS para formatação do tipo de linha da borda, mudando a borda para 
pontilhada. O código tem a seguinte estrutura:
Algoritmo 123 – Formatação do tipo de borda
01 td, th {
02 border:1px dotted; /* borda pontilhada */
03 padding:5px;
04 }
Fonte: Elaborado pelo autor (2013).
Após a finalização dos seis passos, a regra CSS completa ficou assim:
www.esab.edu.br 269
Algoritmo 124 – Regra CSS completa
01 table {
02 background: gray;
03 border:1px solid;
04 }
05 caption {
06 color: blue;
07 font:700 18px Georgia, “Times New Roman”, Times, serif;
08 padding:6px 4px 8px 0px;
09 text-transform:uppercase;
10 }
11 thead th {
12 background: gray;
13 font-weight:700;
14 padding-top:3px;
15 }
16 tbody th, tbody td {
17 text-align:left;
18 vertical-align:top;19 }
20 table, thead th, tfoot th, tbody tr:hover, td, th {
21 border-color:blue;
22 }
23
24 thead th, tfoot th, tbody tr:hover {
25 color: red;
26 }
27 td, th {
28 border:1px dotted;
29 padding:5px;
30 }
Fonte: Elaborado pelo autor (2013).
Executando o arquivo que cria o documento HTML, incorporado pelas 
regras CSS que implementamos anteriormente, o resultado da tabela é 
mostrado na Figura 103. Acompanhe:
www.esab.edu.br 270
Figura 103 – Tabela estilizada.
Fonte: Elaborada pelo autor (2013).
Nesta unidade, você pôde criar uma tabela utilizando os comandos 
HTML e estilizá-la com as regras CSS, o que resulta em uma tabela com 
layout mais agradável e atrativo.
Na próxima unidade, vamos trabalhar a estrutura do layout de um 
documento HTML com o uso de CSS, definindo bordas, margens, 
espaçamentos internos e dimensionamento de elementos da página.
www.esab.edu.br 271
35 Introdução ao layout de páginas HTML com CSS
Objetivo
Apresentar a estrutura do layout de um documento HTML com uso 
de CSS: bordas, margens, espaçamento interno, dimensionamento 
de objetos, posicionamento, elementos flutuantes e exibição de 
elementos.
Na unidade anterior, você criou uma tabela utilizando os comandos 
HTML, fez sua estilização com as regras CSS, resultando em uma 
tabela com layout mais agradável e atrativo, certo? Nesta unidade, 
apresentaremos as técnicas para a construção do layout da página, que é a 
forma como os dados serão estruturados e apresentados. 
Porém, antes de iniciarmos os estudos sobre os layouts das páginas 
HTML, é preciso que você compreenda as unidades de medidas 
utilizadas na definição de elementos dos documentos HTML. 
As unidades registradas com medidas “em” dependem da fonte e podem 
ser diferentes para cada elemento no documento. A medida “em” é o 
tamanho da fonte. A unidade pixel (px) não é uma medida constante, 
mas algo que depende do tipo de dispositivo. Essa unidade é utilizada 
especificamente para CSS. O “px”, frequentemente, é uma boa unidade 
para você usar, especialmente se o estilo requer alinhamento do texto 
com imagens. A unidade pixel (px) é proporcional ao dispositivo que está 
sendo usado, e a unidade de medida “em” determina a quantidade de 
vezes que se deve aumentar o tamanho da letra para que fique nítida.
Começaremos apresentando a você uma representação de layout da 
página. Acompanhe: 
www.esab.edu.br 272
Conteúdo Menu
Rodapé
Título
Figura 104 – Layout da página web.
Fonte: Elaborada pelo autor (2013).
Os layouts podem ser elaborados a partir da largura da página, que pode 
ter largura fixa, líquida, elástica ou híbrida. Por padrão, as colunas da 
página têm largura fixa, definidas em pixel (px), para que, mesmo 
que as resoluções de tela mudem, os elementos de tela mantenham o 
seu tamanho. Silva (2008, p. 312), em relação ao uso de larguras fixas, 
destaca: “As larguras normalmente empregadas em sites que usam esta 
técnica são valores em torno de 760px para contemplar resoluções e 
800×600 ou em volta de 1000px para resoluções de 1024×760”. As 
resoluções de tela mais utilizadas têm 800×600, 1024×768 e 1280×1024 
pixels. O uso do layout com larguras fixas possibilita ao programador o 
completo gerenciamento dos componentes que são posicionados na tela, 
já que as dimensões e posicionamentos não serão alterados. Esse layout 
possibilita que a página seja visualizada sem alterações de forma. Assim, 
você deve usar como padrão 800×600, de área útil em torno de 760×410 
pixels, e não deve colocar barras de rolagem.
A figura a seguir simula um layout fixo com diferentes resoluções de tela, 
gerando apresentações sem barras de rolagem para tela.
www.esab.edu.br 273
Tela 800x600 Tela 1024x768
Figura 105 – Layout da página web – fixo.
Fonte: Elaborada pelo autor (2013).
As páginas com layout líquido têm as medidas definidas em percentual, 
ou seja, adaptam-se de acordo com o tamanho e a largura da página. 
Porém, requerem um cuidado maior por parte do programador, no 
caso você, pois os elementos da página serão reorganizados de acordo 
com as suas dimensões. Nesse caso, o layout se ajusta horizontalmente e 
verticalmente, independentemente da resolução da tela. 
Normalmente, esses layouts são utilizados em páginas que devem ser 
vistas por inteiro, ocupando toda a área útil da janela do navegador, 
sem reduções de escala. A Figura 106 apresenta uma página com layout 
líquido carregado por resoluções diferentes que ocuparão, em ambos os 
casos, toda a área da tela.
Tela 800x600 Tela 1024x768
Figura 106 – Layout da página web – líquido.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 274
No layout elástico, com medidas na unidade “em”, a largura da 
página é ajustada com base no tamanho da fonte (tamanho de letra) 
do navegador, ao invés do tamanho da janela do browser. Utilizamos 
esse layout normalmente para a criação de páginas com a finalidade de 
garantir a acessibilidade a usuários com necessidades especiais, já que os 
comprimentos das linhas de textos não serão alterados se a resolução da 
tela mudar, como ocorreria no layout líquido. A Figura 107 exemplifica 
dois layouts elásticos, que são redimensionados de acordo com as 
dimensões dos textos.
FONTE FONTE
Figura 107 – Layout da página web – elástico.
Fonte: Elaborada pelo autor (2013).
O layout híbrido combina os layouts fixo, líquido e elástico, de forma 
que são utilizadas unidades “em” para a área de conteúdo e unidades “px” 
para áreas que devem ser redimensionadas, com menus, imagens etc. Ao 
se definir o tamanho em px, o tamanho é redimensionado de acordo com 
a resolução do monitor.
Mesmo com todas essas possibilidades de definição do layout da página, 
com a grande variedade de resoluções de monitores que surgem a cada ano, 
fica cada vez mais complexo definirmos um layout que possa garantir a 
visualização correta do site em qualquer monitor. Diante disso, uma técnica 
que adotamos é centralizar o layout, independentemente da resolução 
do monitor, o que pode ser feito definindo as margens esquerda e direita 
com tamanho automático (auto). Essa técnica consiste em calcular de 
forma automática o espaço das margens esquerda e direita do conteúdo da 
página. A figura a seguir apresenta essa técnica de centralização.
www.esab.edu.br 275
Rodapé
Título
MenuConteúdo
70% 35%35%
Figura 108 – Layout da página web – centralizado por margens automáticas.
Fonte: Elaborada pelo autor (2013).
Como o conteúdo ocupa 70% do tamanho de área da página, as 
margens esquerda e direita, a partir do posicionamento relativo, serão 
automaticamente dimensionadas em partes iguais com o restante da área 
da página que não é ocupada pelo conteúdo, sobrando, assim, 30% da 
tela para utilizada pelas margens esquerda e direita. Para que isso seja 
possível, o corpo da página (elemento body) deve ter tamanho definido 
em percentual por intermédio da propriedade width, propriedade margin 
como auto e propriedade text-align como left.
A outra técnica para alinhamento central do layout é a definição da 
posição do corpo da página na posição relativa (relative) e margem com 
valor negativo. A figura a seguir apresenta essa técnica.
Margem
esquerda
Margem
esquerda
Margem
de recuo
Corpo da
página
Corpo da
página
Figura 109 – Layout da página web – centralizado por margens negativas.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 276
A regra CSS que centraliza com margens negativas é apresentada a seguir:
Algoritmo 125 – Regra CSS que centraliza as margens negativas
01 body{
02 width: 70%;
03 position: relative;
04 left:50%;
05 margin-left:-40%;
06 }
Fonte: Elaborado pelo autor (2013).
Estudo complementar
Nesta página, você pode, por meio do artigo que 
é apresentado, construir um layout CSS de duas 
colunas, passo a passo. É outratécnica muito 
utilizada para definição de layout de páginas 
HTML.
Nesta unidade, você conheceu as técnicas para organização do conteúdo 
das páginas HTML com o posicionamento dos objetos internos. Na 
próxima unidade, daremos continuidade ao estudo com as técnicas de 
formatação da borda dos documentos HTML.
Tarefa dissertativa
Caro estudante, convidamos você a acessar o 
Ambiente Virtual de Aprendizagem e realizar a 
tarefa dissertativa.
www.esab.edu.br 277
36 Definição de bordas do documento HTML
Objetivo
Apresentar a sintaxe em CSS para definição da propriedade border em 
documentos HTML.
Na unidade anterior, você conheceu as técnicas para organização do 
conteúdo das páginas HTML com o posicionamento dos objetos 
internos. Nesta unidade, vamos estudar como utilizar as bordas em 
CSS para deixar a aparência do site mais amigável e interessante, sem 
a necessidade de inserir imagens que o deixam muito pesado para ser 
carregado. Para a estilização da borda, são utilizados dois atributos: 
border, que define a borda; e padding, que define a distância entre o 
texto e a borda. 
A borda é um recurso aplicado a outro elemento do documento HTML.
As principais propriedades da borda são: 
• border: estiliza a borda, com três propriedades: largura, estilo e cor;
• border-top: define as propriedades da borda superior;
• border-bottom: define as propriedades da borda inferior;
• border-left: define as propriedades da borda da esquerda;
• border-right: define as propriedades da borda da direita.
A regra CSS a seguir apresenta as instruções para a definição da borda 
para o corpo do documento HTML.
www.esab.edu.br 278
Algoritmo 126 – Definição da borda da página
01 body {
02 border:1px solid Lavender;
03 border-bottom:1px solid DimGray; 
04 border-right:1px solid DimGray;
05 padding-bottom:5px;
06 padding-right:5px;
07 }
Fonte: Elaborado pelo autor (2013).
Na linha 2, é definida a borda geral, sólida, com espessura de 1 pixel, na 
cor cinza. Na linha 3, a borda inferior da página é estilizada na cor cinza 
escuro, com espessura de 1 pixel e sólida. Na linha 4, a borda da direita 
é estilizada com os mesmos parâmetros da borda inferior. As bordas 
inferior e da direita terão um espaçamento entre o texto e a borda em 5 
pixels. As linhas 5 e 6 determinam essas configurações.
No exemplo anterior, utilizamos a borda no formato sólido, mas é 
possível a construção de bordas com a linha pontilhada, por meio do 
atributo dotted. O código a seguir apresenta a criação de uma borda no 
estilo pontilhado na cor verde e espaçamento em 5 pixels:
Algoritmo 127 – Definição da borda pontilhada
01 body{
02 border:2px dotted green; 
03 padding:5px; 
04 } 
Fonte: Elaborado pelo autor (2013).
A propriedade dashed cria uma borda com linhas tracejadas. O código a 
seguir exemplifica uma regra CSS que estiliza uma borda tracejada para o 
elemento H1. 
www.esab.edu.br 279
Algoritmo 128 – Definição da borda tracejada
01 h1{
02 border:2px dashed blue; 
03 padding:5px; 
04 } 
Fonte: Elaborado pelo autor (2013).
Outro estilo de borda que você pode utilizar é o duplo, que cria duas 
linhas de borda. A regra a seguir apresenta o exemplo de criação de uma 
borda dupla para o elemento parágrafo <p>. 
Algoritmo 129 – Definição da borda dupla
01 p{
02 border:6px double red; 
03 padding:6px; 
04 } 
Fonte: Elaborado pelo autor (2013).
Você pode criar bordas com o formato de moldura, normal, invertida, 
alto-relevo e baixo-relevo. A propriedade ridge cria a moldura; a groove 
cria uma moldura invertida; a outset, a moldura em alto-relevo; e o valor 
inset, a moldura em baixo-relevo.
A Figura 110 apresenta os resultados de cada uma dessas molduras 
quando renderizadas pelo navegador. 
Figura 110 – Tipos de molduras.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 280
A regra que cria essas quatro formas de moldura é apresentada a seguir. 
Algoritmo 130 – Definição dos tipos de molduras
01 h2{
02 border:4px ridge DimGray; 
03 padding:4px; 
04 } 
05 h3{
06 border:4px groove DimGray; 
07 padding:4px; 
08 } 
09 h4{
10 border:4px outset DimGray; 
11 padding:4px; 
12 }
13 h5{
14 border:4px inset DimGray; 
15 padding:4px; 
16 } 
Fonte: Elaborado pelo autor (2013).
Se for atribuído o valor hidden (escondido) para uma borda, ela será 
removida.
Podemos também criar bordas com formatos diferentes, na ordem: 
superior, direita, inferior e esquerda. O código a seguir cria uma borda 
com quatro formatos diferentes. 
Algoritmo 131 – Moldura com formatos diferentes
01 p{
02 border:3px red;
03 border-style:
04 dotted /* superior */
05 solid /* direita */
06 double /* inferior */
07 dashed; /* esquerda */
08 padding:5px; 
09 } 
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 281
A Figura 111 apresenta o resultado da regra quando renderizada pelo 
navegador. 
Figura 111 – Moldura mista.
Fonte: Elaborada pelo autor (2013).
Com o uso de CSS, você pode criar também bordas arredondadas para os 
documentos HTML, como demonstra a Figura 112, a seguir:
Parágrafo com Borda
Figura 112 – Bordas arredondadas.
Fonte: Elaborada pelo autor (2013).
O código a seguir exemplifica um código de formatação de bordas 
arredondadas para um elemento parágrafo. 
Algoritmo 132 – Bordas arredondadas
01 p{
02 width:150px; /* largura da área */
03 height:50px; /* altura da área */
04 background-color:green; /* cor da área */
05 border-radius: 10px; /* ângulo da borda para 
arredondamento da mesma*/
06 color:white; /* cor do texto */
07 }
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 282
Nesta unidade, estudamos as técnicas de utilização da borda, que 
possibilitam criar um layout mais elegante para os documentos HTML. Na 
próxima unidade, daremos sequência ao estudo das técnicas de definição 
do layout do documento HTML com o uso da propriedade margin.
Atividade
Chegou a hora de você testar seus conhecimentos 
em relação às unidades 28 a 36. Para isso, dirija-
se ao Ambiente Virtual de Aprendizagem (AVA) e 
responda às questões. Além de revisar o conteúdo, 
você estará se preparando para a prova. Bom 
trabalho!
www.esab.edu.br 283
Resumo
Nestas últimas unidades, você foi apresentado a todo um contexto 
sobre quando deve utilizar a tabela em sites. Você teve uma introdução 
das possíveis composições para a estrutura da tabela, com o uso dos 
elementos table, tr, td e th. O elemento table define apenas a área da 
tabela no documento HTML. Para definição da sua estrutura, há um 
conjunto de comandos que visam a formatar a tabela e garantir uma 
melhor usabilidade do sistema. As tags que permitem a formatação da 
tabela são: <tr>, <td>, <th>, <caption>, <summary>, <thead>, <tbody>, 
<tfoot>. O uso de CSS na definição do layout possibilita a criação de sites 
e tabelas mais atrativas e modernas, com a organização do conteúdo e 
posicionamento dos objetos internos. Porém, seu uso deve ser comedido, 
sempre garantindo a usabilidade e acessibilidade do site.
Vimos ainda que a definição do layout permite a estruturação do 
documento HTML com a definição de bordas, margens, espaçamento 
interno, dimensionamento de objetos, posicionamento, elementos 
flutuantes e exibição de elementos. Para tanto, o posicionamento dos 
elementos pode usar de um layout fixo, líquido, elástico ou híbrido. Esses 
layouts formatam basicamente a altura (height) e largura (width) das 
páginas HTML e como os elementos serão posicionados no site. 
www.esab.edu.br 284
37 Definição de margens do documento HTML 
Objetivo
Apresentar a sintaxe em CSS para definição da propriedade margin 
em documentos HTML.
Na unidade anterior, estudamos as técnicas de utilização da borda, que 
possibilita criar um layout mais elegante para os documentosHTML. 
Nesta unidade, vamos conhecer as regras CSS que permitem a criação do 
Box Model, a partir da abordagem de Silva (2008). 
Silva (2008, p. 73) descreve Box Model como: “[...] elementos 
contidos na árvore do documento e apresentados segundo o modelo de 
formatação visual”. Ou seja, podemos pensar no Box Model como uma 
caixa produzida por um documento HTML. Essa caixa define os limites 
dos elementos que circundam os conteúdos. Define também como tais 
elementos serão desenhados na página quando carregada pelo navegador.
Os elementos são estes: margin, border (estudado na unidade anterior) e 
padding que, em conjunto, possibilitam a definição do layout da página 
HTML.
www.esab.edu.br 285
A figura a seguir apresenta o Box Model criado em CSS.
 Margin
Top
Border
Padding
Right
Conteúdos...
Bottom
width
height
Left
Figura 113 – Box Model CSS.
Fonte: Silva (2008). 
Analisando a figura, a área interna destacada em branco representa o 
espaço no qual os conteúdos da página HTML são renderizados, cujas 
dimensões são definidas pela largura (width) e pela altura (height). 
O espaço entre o conteúdo e a borda (border) é chamado de padding 
(enchimento). As margens representam o espaço entre a borda e as 
extremidades do elemento HTML. A área das margens é sempre 
transparente, já as áreas específicas da borda e dos conteúdos podem 
ter as cores de fundo alteradas pela propriedade background, bastante 
utilizada nos exemplos desenvolvidos anteriormente. 
Para exemplificar o conceito de Box Model no documento HTML, a 
página a seguir possui dois elementos, um título e um parágrafo, criados 
pelo código a seguir.
www.esab.edu.br 286
Algoritmo 133 – Página com título e parágrafo
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=ISO-8859-1”>
04 <title>Box Model</title>
05 </head>
06 <body>
07 <h1>Título</h1>
08 <p> Texto de apresentação no parágrafo.<br>
09 Exemplo prático de representação do Box Model no 
Documento.<br>
10 Página com dois elementos, título e parágrafo.<br>
11 </p>
12 </body>
13 </html>
Fonte: Elaborado pelo autor (2013).
O documento será renderizado pelo navegador, apresentando os 
elementos nas margens padrão, esquerda (0), topo (0), e espaço entre os 
elementos de acordo com título (h1). A figura a seguir mostra esse layout.
Espaço entre elementos
Esquerda
Título
Texto de apresentação no parágrafo
Exemplo prático de representação do
Box Model no documento.
Página com dois elementos, títulos e parágrafos.
Figura 114 − Espaçamento padrão.
Fonte: Elaborada pelo autor (2013).
Você pode informar os valores das margens em pixels (px), em 
porcentagem (%) ou em “em”. Antes, lembramos que a palavra “em” vem 
da tipografia impressa. Essa palavra faz referência à dimensão da letra 
M maiúscula para um determinado tipo de fonte. Destacamos que o 
navegador usará o espaço padrão de espaçamento para a margem quando 
o valor informado for 0 (zero). Isso significa que, se o valor for 0px, o 
navegador não colocará espaço entre a margem e os elementos internos; 
já se for 5 px, o navegador colocará um espaço de 5 pixels. 
www.esab.edu.br 287
Saiba que os valores expressos em percentagem são relativos a outro valor 
anteriormente declarado. Esse valor anterior é obtido pela definição do 
elemento pai do componente. Por exemplo, se você criar um elemento 
parágrafo <p> dentro de um elemento <div>, o elemento pai é a div, e o 
tamanho da borda em percentual corresponderá a um valor proporcional 
em relação a esse elemento pai. Ou seja, se o tamanho da margem do 
elemento pai, a div, é 10 pixels, a margem com tamanho 80% para o 
elemento filho, parágrafo <p>, será 8 pixels (80% de 10 pixels).
A regra CSS a seguir mudará o espaço das margens dos elementos, 
resultando em um novo layout para a página. As dimensões do corpo 
da página body, ou seja, o local onde ficam todos os demais elementos 
de conteúdo do documento HTML e, neste caso, o elemento <p> e 
o elemento <h1>, são definidas pela resolução da tela. A maioria dos 
usuários de computador usam monitores com largura 1024 pixels por 
768 pixels de altura, portanto, as dimensões do corpo da página podem 
variar. Mas, existem técnicas para que o layout da página se mantenha 
padronizado e estruturado, mesmo com essas mudanças. Fique tranquilo, 
você estudará estas técnicas na unidade 39. Na ocasião, estudará sobre o 
posicionamento de elementos da página. 
Algoritmo 134 – Definição de margens para <H1> e <P>
01 h1{
02 margin-top: 100px;
03 margin-right:100px;
04 margin-bottom:100px;
05 margin-left:100px;
06 background-color:green;
07 }
08 p{
09 margin-top: 50px;
10 margin-right:50px;
11 margin-bottom:50px;
12 margin-left:50px;
13 background-color:blue;
14 }
Fonte: Elaborado pelo autor (2013).
O resultado da página após o carregamento pelo navegador é mostrado 
na figura a seguir. 
www.esab.edu.br 288
Texto de apresentação do parágrafo.
Exemplo prático de representação do 
Box Model no Documento.
Página com dois elementos, título e parágrafo.
Título
Boxmodel
Boxmodel
Figura 115 – Box Model dos elementos.
Fonte: Elaborada pelo autor (2013).
Cada lado do Box Model é identificado pelas propriedades: topo 
(top), direita (right), inferior (bottom) e esquerda (left). Essa ordem é 
utilizada para definição das características de cada um dos lados do Box 
Model. Lembre-se de que utilizamos essa ordem, na unidade anterior, 
para definirmos a moldura com extremidades de tipos diferentes. Cada 
elemento HTML, <H1>, em verde, e <P>, em azul, está inserido em um 
box model com as propriedades das margens pré-definidas nas regras do 
algoritmo131. As margens de um Box Model não precisam ter as mesmas 
medidas. No exemplo a seguir, a regra CSS cria um Box Model com essa 
configuração:
Algoritmo 135 – Definição de margens
01 body{
02 margin-top:10px;
03 margin-right:15px;
04 margin-bottom:20px;
05 margin-left:25px;
06 }
Fonte: Elaborado pelo autor (2013).
Na linha 2, a margem do topo está sendo definida com o tamanho 10 
pixels. Na linha 3, a margem da direita é estilizada com o tamanho 15 
pixels. As margens inferior e esquerda são definidas nas linhas 4 e 5, 
respectivamente.
www.esab.edu.br 289
Há uma forma abreviada para uso da propriedade margin, na qual o 
programador informa os valores para cada uma delas, na ordem superior, 
direita, inferior e esquerda. O código a seguir exemplifica o uso da forma 
abreviada. Acompanhe.
Algoritmo 136 – Definição de margens, forma abreviada
01 body{
02 margin: 20px 10px 25px 30px; /* superior, direita, 
inferior e esquerda*/
03 }
Fonte: Elaborado pelo autor (2013).
Essa regra declara que a margem superior terá um tamanho de 20 pixels, 
a margem da direita de 10 pixels, a margem inferior de 25 pixels e a 
margem esquerda de 30 pixels. Você não precisa informar a qual margem 
o valor está associado, já que a ordem dos valores é pré-definida.
Caso as margens tenham os mesmos tamanhos, basta informar uma 
única vez o valor. O código a seguir exemplifica essa forma de definição 
da regra CSS. 
Algoritmo 137 – Definição de margens, forma abreviada e única
01 body{
02 Margin: 40px; /* superior, direita, inferior e esquerda, 
todas com mesmo valor*/
03 }
Fonte: Elaborado pelo autor (2013).
Nesta unidade, você pôde estudar e conhecer a propriedade margin e as 
sintaxes que podem ser utilizadas para sua definição. Essa propriedade 
é um dos elementos que definem um Box Model, lembrando que 
anteriormente já havíamos estudado a propriedade border. Agora, 
falta conhecer a propriedade padding para concluirmos os estudos do 
layout do Box Model. Desse modo, na próxima unidade estudaremos o 
elemento padding e como utilizá-lo no documento HTML. Até lá!
www.esab.edu.br 29038
Definição do espaço interno da 
página HTML e do tamanho dos 
elementos
Objetivo
Apresentar a sintaxe em CSS para definição das propriedades 
padding, width e height.
Você estudou, na unidade anterior, a propriedade margin e as sintaxes 
que podem ser utilizadas para sua definição. Sabemos que essa 
propriedade é um dos elementos que definem um Box Model. Nesta 
unidade, daremos continuidade aos estudos das demais propriedades que 
definem o Box Model. 
Já neste novo estudo, veremos como utilizar o elemento padding 
(“enchimento”), responsável por formatar o espaçamento entre o 
conteúdo e as bordas dos elementos HTML.
Para Silva (2008, p. 76), “[...] a propriedade padding define as dimensões 
do enchimento (ou espessura) entre o conteúdo e a borda”.
A propriedade padding constitui-se de quatro extremidades: superior, 
direita, inferior e esquerda. 
O quadro a seguir apresenta essas extremidades e como são declaradas 
em CSS.
www.esab.edu.br 291
Extremidade Representação em CSS Função
Topo padding-top Define o espaçamento superior.
Direita padding-right Define o espaçamento da direita.
Inferior padding-bottom Define o espaçamento inferior.
Esquerda padding-left Define o espaçamento da esquerda.
Quadro 21 − Extremidades do elemento padding.
Fonte: Elaborado pelo autor (2013).
Como você pode ver, cada extremidade do padding é identificada por um 
nome, mas o uso desse nome não é obrigatório. Assim, caso os valores 
para cada item sejam informados sem a associação a uma extremidade 
específica, a ordem dos valores será: superior (top), direita (right), 
inferior (bottom) e esquerda (left). Essa ordem é utilizada para definição 
das características de cada um dos lados de forma abreviada.
No Quadro 22, você verá a estilização de um elemento do tipo parágrafo 
<p>, que cria uma regra para definir a propriedade padding. Acompanhe.
Extremidade Valor
Topo 20px
Direita 10px
Inferior 8px
Esquerda 12px
Quadro 22 − Dimensões da propriedade padding.
Fonte: Elaborado pelo autor (2013).
Apresentamos, no Algoritmo 138, o código que define as regras de padding.
Algoritmo 138 – Formatação com padding
01 p{
02 padding-top:20px;
03 padding-right:10px;
04 padding-bottom:8px;
05 padding-left:12px;
06 }
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 292
Essa é a forma padrão de definição das extremidades da propriedade 
padding, com um grau de legibilidade muito alto, já que a associação do 
valor a cada extremidade é explícita. 
O próximo código apresenta a estilização do elemento parágrafo <p>, 
utilizando a forma abreviada de definição do padding, com as mesmas 
dimensões do exemplo anterior:
Algoritmo 139 – Formatação com padding – sintaxe abreviada
01 p{
02 padding: 20px 10px 8px 12px;
03 }
Fonte: Elaborado pelo autor (2013).
Note que as extremidades que compõem a propriedade padding não 
foram referenciadas, sendo declarada somente a cláusula padding; a 
ordem, porém, é predefinida: top, right, bottom e left.
O código a seguir cria um documento HTML que contém um elemento 
parágrafo, que será formatado pela regra do Algoritmo 139, e um texto 
escrito diretamente no corpo da página. 
Algoritmo 140 – Aplicação da regra do Algoritmo 139
01 <html>
02 <head>
03 <meta http-equiv=”Content-Type” content=”text/html; 
charset=ISSO-8859-1”>
04 <link rel=”stylesheet” type=”text/css” href=”algoritmo139.
css”>
05 </head>
06 <body>
07 <p>Texto formatado pela Regra de Padding - Espaçamentos</
p>
08 Novo texto,sem formatação.
09 </body>
10 </html>
Fonte: Elaborado pelo autor (2013).
www.esab.edu.br 293
Se não forem informados os quatro valores na definição abreviada 
dos valores das extremidades do padding, a regra funcionará como a 
apresentada no Quadro 23. 
Propriedade Valores Informados Funcionamento
Padding Valor 1 valor 2 
O espaçamento superior e inferior terá valor 1 e os 
espaçamentos direito e esquerdo terão valor 2. 
Padding Valor 1 valor 2 Valor 3
O espaçamento superior terá valor 1, os 
espaçamentos direito e esquerdo terão valor 2 e 
espaçamento inferior terá valor 3. 
Quadro 23 − Dimensões da propriedade padding.
Fonte: Elaborado pelo autor (2013).
O código a seguir exemplifica a criação de uma regra CSS para o 
elemento div <div>, com espaçamento superior e inferior em 100 pixels, 
e espaçamentos esquerdo e direito em 50 pixels. Lembre-se de que a 
DIV tem por finalidade criar divisões e áreas internas, dentro de um 
documento HTML. Nessas áreas, podemos inserir outros elementos 
HTML agrupados nessa DIV, facilitando assim a definição de layout e 
posicionamento. Você deve utilizar o elemento DIV como um recipiente 
que define uma seção ou divisão de um documento HTML, para 
agrupar elementos em bloco. 
Algoritmo 141 – Formatação com padding – sintaxe abreviada simples
01 div{
02 padding: 100px 50px;
03 }
Fonte: Elaborado pelo autor (2013).
Como não foram informados os quatro valores, o primeiro valor formata 
as extremidades inferior e superior em 100px, e as extremidades da 
esquerda e direita em 50 pixels.
No próximo código, apresentamos a criação de uma regra CSS para o 
elemento div <div> com espaçamento superior e inferior em 100 pixels, 
espaçamentos esquerdo e direito em 150 pixels e espaçamento inferior 
em 80 pixels. No quadro 23, apresentamos a regra de definição das 
www.esab.edu.br 294
propriedades. Essa regra tem a definição de três valores e determina a 
ordem deles, sejam eles: superior (primeiro valor), esquerdo e direito 
(segundo valor) e inferior (terceiro valor). Essa é uma sintaxe mais 
complexa e não tão clara. Você precisa conhecê-la, mas, na medida do 
possível, deve evitar usá-la. 
Algoritmo 142 – Formatação com Padding – sintaxe abreviada complexa
01 div{
02 padding: 100px 150px 80px;
03 }
Fonte: Elaborado pelo autor (2013).
Caso a propriedade padding possua todas as extremidades com o mesmo 
valor, você não precisa repeti-lo, basta referenciá-lo uma única vez. O 
código do Algoritmo 143 exemplifica a criação de um padding com 
todas as extremidades em 200 pixels, acompanhe:
Algoritmo 143 – Formatação com Padding – sintaxe abreviada, valores iguais
01 p{
02 padding: 20px;
03 }
Fonte: Elaborado pelo autor (2013).
Note que, na medida em que o comando vai diminuindo em número de 
valores informados, menor a legibilidade da instrução, dificultando que 
profissionais pouco habituados com as regras CSS possam entendê-las. 
Por isso, antes de usar a forma abreviada, avalie o perfil do profissional 
que usará as regras nas páginas HTML. Quanto mais clara, legível e fácil 
de compreender for a instrução, mais rápida será a manutenção corretiva.
Além do padding, margens e bordas, um elemento Box Model é 
composto por duas importantes propriedades, a altura e a largura, 
representadas pelas cláusulas height e width, respectivamente. Essas duas 
propriedades possibilitam a definição da altura e da largura para um 
elemento HTML. A propriedade width define a largura de um elemento. 
No exemplo do Algoritmo 144, você verá o uso da propriedade width 
para formatação da largura do elemento <h1>, em 200 pixels:
www.esab.edu.br 295
Algoritmo 144 – Formatação da largura width
01 h1{
02 width: 200px;
03 }
Fonte: Elaborado pelo autor (2013).
No código do Algoritmo 144, a altura foi determinada para o conteúdo 
inserido no elemento <h1>. Agora, para definir a altura de um elemento, 
usaremos a propriedade height. No próximo exemplo, Algoritmo 145, será 
definida a altura, propriedade height, para o elemento <h1> em 400px:
Algoritmo 145 – Formatação da largura height
01 h1{
02 height: 400px;
03 }
Fonte: Elaborado pelo autor (2013).
Com o estudo dessas duas últimas propriedades, você conheceu todos 
os elementos que compõem um Box Model, e suas respectivas sintaxes. 
No