Ambientes Web

Ambientes Web
www.esab.edu.br
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 Design Educacional

Charlie Anderson Olsen Roberta de Fatima Martins
Larissa Kleis Pereira Simone Dias
Margarete Lazzaris Kleis Revisão Gramatical
Conteudista Bárbara Seger Zeni
Marcelo Medeiros Daniela Piantola
Coordenação de Projeto Hellen Melo Pereira
Patrícia Battisti Michela Silva Moreira
Tiago Costa Pereira
Líderança Técnica Design Educacional
Renata Oltramari Design Gráfico
Fernando Andrade
Supervisão de Revisão Gramatical Neri Gonçalves Ribeiro
Andréa Borges Minsky
Diagramação
Supervisão de Design Gráfico Karina Silveira
Laura Martins Rodrigues
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ário de 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
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 7
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 8
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 9
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 10
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 11
conectados. Para que você entenda melhor a utilização de cada protocolo,
observe o quadro a seguir.
Protocolo Utilização
Esse é o principal protocolo de comunicação da web, é
HiperText Transfer Protocol (HTTP) responsável pela transferência de documentos entre os
computadores.
Foi desenvolvido para transmissão de mensagens, por
File Transfer Protocol (FTP) isso tornou-se a forma mais rápida para troca de arquivos
entre computadores.
Segue a mesma definição do HTTP, porém com
HiperText Transfer Protocol Secure integração de regras de segurança de acesso aos dados,
(HTTPS) 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.
Internet
Servidor web
Navegador se conecta a um servidor

e solicita uma página HTML.
Servidor web desenvolve a página
HTML solicitada.
Figura 2 – Conexão do navegador com o servidor web.
Fonte: Elaborada pelo autor (2013).
www.esab.edu.br 12
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 13
Processo de desenvolvimento de
2 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 de
fases 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 14
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 15
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 16
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 17
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.
Homepage Homepage
arquitetura hierárquica arquitetura linear
Homepage
arquitetura em malha
Homepage
arquitetura em rede
Figura 4 – Tipos de arquitetura de websites.

Fonte: Adaptada de Pressman (2006).
www.esab.edu.br 18
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ânea as 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 19
• 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 20
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 21
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 22
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 23
3.2 Botão “Voltar” que não existe ou não funciona
Outro ponto importante é dar ao usuário a possibilidade de 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 24
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 25
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 26
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 27
Padrão de desenvolvimento de
4 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 28
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?
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 29
• 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 30
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 31
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 32
Padrão de desenvolvimento de
5 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 33
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 que causem
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 34
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.

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 35
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 36
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 37
Ferramentas de desenvolvimento
6 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 38
Primeiramente, acesse o endereço <http://netbeans.org/downloads> para
iniciar o download da 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 39
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 40
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 41
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 42
Figura 8 – Link para download da ferramenta NotePad++.
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 43
Figura 10 – Tela principal do NotePad++.
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 44
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 45
Ferramentas de depuração de
7 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 ser utilizada 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 46
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?
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 47
É 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 48
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.

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.

www.esab.edu.br 49
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.

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.

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.

Clique na seta e selecione a opção “Ativar todos os painéis”, conforme a

Figura 17, a seguir:
www.esab.edu.br 50
Figura 17 – Opção “Ativar todos os painéis” do Firebug.
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 51
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 construir qualquer 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 52
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 53
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.

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 54
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
O W3C define o HTML como linguagem-padrão para o desenvolvimento para web,
1996
acabando com as versões proprietárias.
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
1997 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.
É divulgada a primeira versão pública do HTML5. Trata-se de uma versão básica, mas
2008 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 55
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.br 56
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.

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 57
Tarefa dissertativa
Caro estudante, convidamos você a acessar o
Ambiente Virtual de Aprendizagem e realizar a
tarefa dissertativa.
www.esab.edu.br 58
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 59
Para compreender melhor, veja a figura a seguir.
<tag> Valor </tag>
Tag de
Tag de início
fechamento
Figura 21 – Sintaxe básica de tag dupla em HTML 4.0.

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”> Valor </tag>
Tag de início Tag de

fechamento
Figura 22 – Sintaxe de tag dupla com atributo em HTML 4.0.

www.esab.edu.br 60
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ã.

www.esab.edu.br 61
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

Este par de tags é utilizado para marcar o início e o final do
documento HTML inteiro. É a tag principal de definição da
HTML <html> </html>
estrutura do documento, pois informa ao navegador que o
documento está escrito em HTML. Por isso, é obrigatória.
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
HEAD <head> </head>
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.
Este par de tags define a área visível do documento, ou seja,
BODY <body> </body> isso é o que aparecerá “desenhado” no navegador quando
acessarmos por meio da URL.
Este par de tags define o valor do título da página e, por isso,
TITLE <title> </title>
deve ser informado dentro do par de tags <head></head>.
Quadro 4 – Lista de tags básicas de estrutura do HTML.

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 62
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>
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 63
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 64
Figura 24 – Página com a estrutura básica carregada no navegador Google Chrome.
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 65
O quadro a seguir apresenta a sintaxe e a estrutura dessas meta tags, com
os valores que podem ser utilizados:
Sintaxe Valores utilizáveis

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
<meta http-equiv = “valor” informado também o código de caracteres, chamado de charset.
content =“descrição”/>
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.
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.
<meta name = “valor” author: aponta quem desenvolveu o site.
content = “descrição” /> 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.

www.esab.edu.br 66
Estudo complementar
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 67
Construindo uma página HTML na
10 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>
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 68
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.

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.

www.esab.edu.br 69
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 70
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?
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 71
01 <html> Tag de início do documento HTML.
02 <head> Tag de início do cabeçalho.
03 <meta http-equiv=”Content- Definição da Meta Tag, formatando o
Type” content=”text/html” documento em HTML e acentuação
charset=”UTF-8”>
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

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 72
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 é garantido pelo 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 >
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 73
Dimensão A
Dimensão B
Figura 27 – Redimensionamento das janelas e uso de parágrafos.

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 74
Algoritmo 4 – exemplotitulos.html
01 <html>
02 <head>
03 <meta http - equiv =”Content - Type” content =”text /
04 <title >Exemplo de cabeçalhos </title>
05 </head>
06 <body >
07 <h1>Titulo 1</h1>
13 </body>
14 </html>
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 75
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>
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:
Página que Texto apresentado
será visitada ao usuário
<a href= “alomundo.html”> Primeiro exemplo </a>
Tag de início Tag de fechamento

da âncora da âncora
Figura 28 – Sintaxe para criação de links.
www.esab.edu.br 76
É 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 77
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 visual dos 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 78
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 79
A figura a seguir apresenta a sintaxe para escrever uma regra em CSS.
Acompanhe.
Seletor
Propriedade Valor
p {
font-size : 40px ;
}
Corpo Bloco de declaração
Figura 29 – Sintaxe da regra CSS.

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

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 82
Algoritmo 7 – Aplicando a folha de estilo
01 <html>
02 <head>
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>
Na linha 4, foi inserido um link 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.

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 83
Figura 32 – Exemplo de aplicação de CSS.
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 84
Estrutura de um documento com
12 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 85
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 86
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>
04 <title>CSS InLINE</title>
05 </head>
06 <body>
07 <p style=”color:red;”> Texto em vermelho - CSS INLINE
</p>
08 </body>
09 </html>
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 87
Figura 33 – Site com estilo utilizando CSS inline.
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>
www.esab.edu.br 88
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 propriedade
nesta 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.

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

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 91
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 }
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>
04 <title>Exemplo</title>
“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>
www.esab.edu.br 92
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.

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 93
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 94
Como formatar o texto da página
13 HTML com CSS
Objetivo
Apresentar 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 95
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 96
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 97
2
{font-family:”Times New Roman”,Verdana,Arial,sans-serif;}
1 3
Prioridade
Figura 37 – Regra CSS para definição da família de fonte.
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 98
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.
www.esab.edu.br 99
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 100
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 101
• 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 102
Construindo uma página HTML com
14 formatações de texto
Objetivo
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 103
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 }
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 104
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ática1

01 <html>
02 <head>
html” charset =”ISO-8859-1”>
04 <title>Pratica-1</title>
“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>
www.esab.edu.br 105
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ê:

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;}
www.esab.edu.br 106
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>
html” charset =”=”ISO-8859-1”>
04 <title>Pratica-2</title>
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>
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 107
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:

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

01 h1{
02 color: blue;
04 font-size: large;
06 text-decoration:underline; /* sublinhado*/
07 }
08 h2{
09 color: black;
13 text-decoration:overline; /* superlinhado */
14 }
15 h3{
16 color: green;
20 text-decoration:line-through; /* texto cortado*/
21 }
22 h4{
23 color: red;
27 text-decoration:blink; /* piscante*/
www.esab.edu.br 109
28 }
29 h5{
30 color: yellow;
34 text-decoration:none; /* normal*/
35 }
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:

01 <html>
02 <head>
charset=utf-8”>
04 <title>Decorando o Texto – Prática 4</title>
06 </head>
07 <body>
08 <h1>Text Decoration 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>
Finalmente, salve o documento com nome “pratica4.html” e execute-o

no navegador.
www.esab.edu.br 110
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 111
Como formatar as cores da página
15 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 112
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.

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 113
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:
RGB ( , , )
Números
0...255
Figura 40 – Estrutura das cores em RGB.


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 114
red Vermelho
Silver Prata
Teal Petróleo
White Branco
yellow Amarelo
Quadro 7 – Listagem das cores padrão.

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.

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 115
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 116
Como definir as cores de fundo da
16 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 117
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.

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

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 119
x x
y y
repeat repeat-x repeat-y No-repeat

Figura 43 – Formas de repetição da imagem.
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 120
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.

www.esab.edu.br 121
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{
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 122
Construindo uma página HTML
17 colorida
Objetivo
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;
04 }
05 p{
06 color:black;
07 background-color: blue;
08 }
09 h1{
10 color:black;
11 background-color: red;
12 }
Salve a regra CSS com o nome: “corfundo01.css.”
www.esab.edu.br 123
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>
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>
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 124
Figura 44 – Resultado do carregamento do arquivo corfundo01.html.
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 }
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 125
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.

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 }
www.esab.edu.br 126
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>
04 <title>Exemplo Com Imagem</title>
“imagemfundo01.css” media= “all”>
06 </head>
07 <body>
09 </body>
10 </html>
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 127
O resultado da apresentação da página será semelhante à figura a seguir:
Figura 46 – Arquivo HTML com imagem de fundo.

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 }
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 128
Figura 47 – Arquivo HTML com imagem de fundo sem repetição.
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{
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 }
Salve o arquivo com nome “background.css”.
www.esab.edu.br 129
Para testar a regra, crie um novo arquivo HTML com o seguinte código:
Algoritmo 27 – Página com Background

01 <html>
02 <head>
“background.css” media= “all”>
06 </head>
07 <body>
09 </body>
10 </html>
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
www.esab.edu.br 130
Componente visual para lista de
18 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>
<li> </li>
<li> </li>
<li> </li>
</ul>
Figura 48 – Estrutura da lista não ordenada.

www.esab.edu.br 131
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.

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>
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 132
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>
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>
www.esab.edu.br 133
Quando carregado pelo navegador, o resultado será tal qual apresentado
na Figura 50.
1. Uva
2. Maçã
3. Banana
Figura 50 – Lista ordenada.
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> Lista
<dt>termo</dt>
<dd>definição</dd>
</dl>
Figura 51 – Estrutura da lista de definições.
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.
www.esab.edu.br 134
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 Definição
São as listras marcadas pelas tags DL, DT, DD
Figura 53 – Lista de definições.

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>
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 135
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>
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>
Como resultado, a lista, ao ser carregada pelo navegador, apresentará

layout conforme a Figura 54, veja:
www.esab.edu.br 136
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 da lista mista.
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
em relação às unidades 10 a 18. Para isso, dirija-
se ao Ambiente Virtual de Aprendizagem (AVA) e
trabalho!
www.esab.edu.br 137
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 138
Como formatar e estilizar as listas
19 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 139
A Figura 55 ilustra os três tipos de glifos:
Item 1 Item 1 Item 1

Item 2 Item 2 Item 2
Disc Circle Square
Figura 55 – Tipos de glifos.

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 }
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 140
Algoritmo 34 – Página HTML com lista estilizada
01 <html>
02 <head>
“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>
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.

Para a lista ordenada, devemos utilizar marcadores numéricos, cujos

tipos são apresentados no Quadro 9, acompanhe:
www.esab.edu.br 141
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.

A Figura 57 ilustra cada um desses tipos de marcadores numéricos, veja:
Figura 57 – Tipos de marcadores numéricos.

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

Você pode ver na Figura 58 cada um dos tipos de marcadores

alfanuméricos:
www.esab.edu.br 143
a. Item A A. Item A α. Item A
b. Item B B. Item B β. Item B
c. Item C C. Item C γ. Item C
d. Item D D. Item D δ. Item D
e. Item E E. Item E ε. Item E
lower-alpha upper-alpha
lower-greek
lower-latin upper-latin
Figura 58 – Tipos de marcadores alfanuméricos.
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{
06 }
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 144
“../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{
03 list-style-image:url(“icone.png”);}
04 }
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.

www.esab.edu.br 145
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>
“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>
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.

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 146
A Figura 61 ilustra as posições outside e inside em relação à página
HTML, acompanhe:
Página
Lista
Posição
inside
Posição
outside
Recuo
Figura 61 – Posição da lista.
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; ul {
list-style-position:outside; list-style: square outside url(“icone.png”);
list-style-image:url(“icone.png”); }
}
Quadro 11 – Comparativo do comando list-style.

www.esab.edu.br 147
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
www.esab.edu.br 148
Como criar uma seleção de valores
20 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 }
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 149
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 }
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 }
www.esab.edu.br 150
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>
“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>
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 151
Algoritmo 43 – Regras usando seletor de classe
01 .cor_branca{
02 color:white;
03 }
04 .fundo_verde {
05 background-color:green;
06 }
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>
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>
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 152
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;}
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>
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>
www.esab.edu.br 153
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{ #seletor_id{
color:green; color:green;
} }
Quadro 12 – Comparativo da sintaxe dos seletores.

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 154
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 }
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>
“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>
Salve esse algoritmo com o nome algoritmo48.html e execute-o no

navegador de sua preferência.
www.esab.edu.br 155
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 156
Construindo uma página HTML com
21 listas e seleção
Objetivo
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 }
www.esab.edu.br 157
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>
html” charset=”UTF-8”>
“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 158
24 <li> Produto D</li>
25 </ul>
26 Prazos de entrega:
27 <ul>
28 <li> 30 dias</li>
31 </ul>
32 </body>
33 </html>
Salve o arquivo com o nome pagina1-unid21.html e execute-o no

navegador.
O resultado será semelhante à Figura 62:
Fornecedores: Clientes:
Empresa A Cliente A
Empresa B Cliente B
Empresa C Cliente C
Produtos: Prazos de entrega:
Produto A 30 dias
Produto B 60 dias
Produto C 90 dias
Produto D
Figura 62 – Carregamento das páginas no navegador.

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 159
• 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 }
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 160
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”
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>
15 </ol>
16 <ol id=”maiusroman”>
17 <li>Item um</li>
19 </ol>
20 <ol id=”minusalfa”>
21 <li>Item um</li>
23 </ol>
24 <ol id=”maiusalfa”>
25 <li>Item um</li>
27 </ol>
28 </body>
29 </html >
www.esab.edu.br 161
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 }
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 162
Algoritmo 54 – Página HTML com listas não ordenadas com imagem
01 <html>
02 <head >
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 >

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.

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 163
Como navegar entre as páginas
22 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 href poderá 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:
Site Exemplo 1 Visitado

Site Exemplo 2 Não Visitado
Figura 64 – Estados dos links de navegação.

www.esab.edu.br 164
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 165
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.

www.esab.edu.br 166
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 }
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 }
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 167
Algoritmo 57 – Regra CSS para sublinhar o link
01 a:hover {
02 text-decoration:underline;
03 }
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:
Site Exemplo 1 Site Exemplo 1

Site Exemplo 2 Site Exemplo 2
Estado Normal
Estado Over
Figura 66 – Link sem sublinhado – estado normal e over.
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.

www.esab.edu.br 168
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;
04 }
05 a:hover{
06 color:green;
07 background-color:black;
08 }
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 >
“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 >
www.esab.edu.br 169
O resultado no carregamento do arquivo pelo navegador é apresentado
na Figura 67, observe:
Site Exemplo 1
Site Exemplo 2
Figura 67 – Uso de rollover.

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 170
Figura 68 – Link para e-mail.
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 171
Melhorando as páginas HTML com
23 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 172
• 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 >
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 >
Salve o arquivo com nome algoritmo60.html.
www.esab.edu.br 173
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.

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 174
div
ul
Home
Institucional
Produtos li
Serviços
Contato
Figura 70 – As camadas do menu de opções.

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

www.esab.edu.br 176
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 }
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>.

www.esab.edu.br 177
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 }
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>.

www.esab.edu.br 178
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 }
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;
06 }
07 ul.lista {
08 widht:130px;
10 padding:6px;
12 margin:0;
13 }
14 li.opcoes {
www.esab.edu.br 179
16 padding:3px;
17 background:gray;
20 }
21 a {
22 display:block;
23 color: white;
25 }
26 a:hover {
27 color: black;
29 }
30 .semmarcador{list-style:none;}
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 >
06 </head>
07 <body>
08 <div class=”menu”>
www.esab.edu.br 180
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 >
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 181
Como desenvolver menus com
24 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;
www.esab.edu.br 182
06 }
07 ul.lista {/* cria as regras de definição do bloco de itens
do menu*/
08 widht:130px;
10 padding:6px;
12 margin:0;
13 }
14 li.opcoes {/* cria as regras de definição de cada item do
menu*/
16 padding:3px;
17 background:gray;
20 }
21 a {/* cria as regras de definição do link de cada item do
menu*/
22 display:block;
23 color: white;
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;
29 }
30 .semmarcador{list-style:none;}/* remove o marcador da
lista*/
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 183
Algoritmo 68 – Página HTML com menu
01 <html>
02 <head >
06 </head>
07 <body>
09 <ul class=”lista”>
10 <li class=”opcoes”><a href=”home.html”>Home</a></li>
11 <li class=”opcoes”><a href=”empresa.
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 >
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 184
Contatos Desabilitado Empresa Home Produtos
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

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 185
Figura 76 – Regra do elemento <li>.
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 {
03 padding:3px;
06 background: gray url(home.jpg) no-repeat
07 }
www.esab.edu.br 186
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:
Nome do Seletor
Item Imagem Código
de Classe
background: gray url(empresa.jpg) no-
Institucional empresa.jpg Institucional
repeat
background: gray url(produtos.jpg) no-
Produtos produtos.jpg Produtos
repeat
background: gray url(servicos.jpg) no-
Serviços serviços.jpg Serviços
repeat
background: gray url(contatos.jpg) no-
Contatos contatos.jpg Contatos
repeat
Quadro 16 – Regras dos itens do menu.

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 187
Algoritmo 70 – Regra css para formatação de menu
01 div.menu {
02 width:154px;
03 background:gray;
04 padding:5px;
06 }
07 ul.lista {
08 width:130px;
10 padding:6px;
12 margin:0;
13 }
14 a {
15 display:block;
16 color: white;
18 }
19 a:hover {
20 color: black;
22 }
24 li.home {
26 padding:3px;
30 }
31 li.institucional {
33 padding:3px;
36 background: gray url(empresa.jpg) no-repeat
37 }
38 li.produtos {
40 padding:3px;
43 background: gray url(produtos.jpg) no-repeat
44 }
45 li.servicos {
www.esab.edu.br 188
47 padding:3px;
50 background: gray url(servicos.jpg) no-repeat
51 }
52 li.contatos{
54 padding:3px;
57 background: gray url(contatos.jpg) no-repeat
58 }
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.

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;
05 background: white url(desabilitado.jpg) no-repeat
06 }
www.esab.edu.br 189
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;
06 }
07 ul.lista {
08 width:130px;
10 padding:6px;
12 margin:0;
13 }
14 a {
15 display:block;
16 color: white;
18 }
19 a:hover {
20 color: black;
21 padding:3px;
23 background: white url(desabilitado.jpg) no-repeat
24 }
26 li.home {
28 padding:3px;
32 }
33 li.institucional {
35 padding:3px;
38 background: gray url(empresa.jpg) no-repeat
39 }
40 li.produtos {
42 padding:3px;
www.esab.edu.br 190
45 background: gray url(produtos.jpg) no-repeat
46 }
47 li.servicos {
49 padding:3px;
52 background: gray url(servicos.jpg) no-repeat
53 }
54 li.contatos{
56 padding:3px;
59 background: gray url(contatos.jpg) no-repeat
60 }
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 >
06 </head>
07 <body>
www.esab.edu.br 191
09 <ul class=”lista”>
10 <li class=”home”><a href=”home.html”>Home</a></li>
11 <li class=”institucional”><a href=”empresa.
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 >
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 192
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 193
Navegando entre páginas HTML
25 com uso de menus e links
Objetivo
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.

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 194
Algoritmo 74 – Código de criação da estrutura do menu
01 <html>
02 <head>
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>
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 195
A Figura 79 apresenta esse layout. Observe:
Home
Sobre
Serviços
Suporte
Desenvolvimento
Manutenção
Clientes
Contato
Figura 79 – Opções do menu.

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; }
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 196
Algoritmo 76– Regra CSS dos Itens do menu
01 .menu li{position:relative; float:left; border-right:1px
solid #c0c0c0;}
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; }
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 197
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;}
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;}
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 198
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 */
Salve o arquivo com as regras CSS, com nome: cssMenu.css.
Algoritmo 81 – Código da página HTML completa

01 <html>
02 <head>
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 199
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>
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 200
Capturando dados do usuário com
26 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 201
Controle Propriedades Representação
Caixa de seleção que permite múltipla seleção
CheckBox
de valores.
Caixa de seleção que permite uma única
RadioButton
seleção de valores.
Apresenta uma lista de valores com a
Menu
possibilidade de seleção de um único valor.
Entrada de Permite o cadastro de textos em uma única
textos linha ou múltiplas linhas.
Apresenta um botão que, quando clicado,
abre uma janela para seleção de arquivos nos
Seleção de
diretórios do computador. O nome do arquivo
arquivos
selecionado é apresentado em uma entrada
de texto.
Quadro 17 – Comparativo dos controles.

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 202
Algoritmo 82 – Página HTML com formulário
01 <html>
02 <head>
charset=UTF-8”>
05 </head>
06 <body>
07 <h1>Exemplo</h1>
08 <form>
09 <p>Formulário de Cadastro</p>
10 </form>
11 </body>
12 </html>
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 203
Type Função do Elemento
Text Criar uma caixa de entrada de texto com uma única linha.
Criar uma caixa de entrada de texto com uma única linha. Quando é
Password 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.
Criar um elemento que existe no formulário, mas não pode ser visualizado
Hidden
pelo usuário.
Criar o botão de ENVIAR para o formulário. Envia os dados do formulário
Submit
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.

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.

www.esab.edu.br 204
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>
charset=UTF-8”>
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>
www.esab.edu.br 205
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 as linhas
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 206
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.

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.

As instruções HTML, que apresentamos no código do algoritmo 84,

criam a estrutura do menu do tipo select.
www.esab.edu.br 207
Algoritmo 84 – Página HTML com menu select
01 <html>
02 <head>
charset=UTF-8”>
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>
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 208
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>
charset=UTF-8”>
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>
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 209
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.

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>
charset=UTF-8”>
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>
www.esab.edu.br 210
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
www.esab.edu.br 211
Como controlar o acesso aos dados
27 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 212
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>
04 </head>
05 <body>
06 <form>
07 <input type=”text” disabled=”disabled”
value=”teste”></input>
08 </form>
09 </body>
10 </html>
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 213
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.

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 214
Figura 84 – Formulário de cadastro de veículo.
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.

www.esab.edu.br 215
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>
04 </head>
05 <body>
06 <form>
07 <input type=”text” readonly=”readonly”
value=”teste”></input>
08 </form>
09 </body>
10 </html>
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 216
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.

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 217
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 de
cadastro do modelo do carro, com tabindex valendo 2. Veja o código:
Algoritmo 89 – Ordem dos campos

01 <html>
02 <head>
charset=UTF-8”>
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>
www.esab.edu.br 218
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
trabalho!
www.esab.edu.br 219
Criando um formulário de contato
28 usando CSS e HTML
Objetivo
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>
charset=UTF-8”>
04 <title>FALE CONOSCO</title>
05 </head>
06 <body>
07 <form>
08 </form>
09 </body>
10 </html>
www.esab.edu.br 220
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>
charset=UTF-8”>
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>
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 221
Figura 87 – Uso de legend e fieldset.
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>
charset=UTF-8”>
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 222
19 <option>Joinville</option>
20 <option>Blumenau</option>
21 </select>
22 </fieldset>
23 </form>
24 </body>
25 </html>
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 ... 
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>
www.esab.edu.br 223
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á utilizado pelo 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.

www.esab.edu.br 224
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>
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>
charset=UTF-8”>
05 </head>
06 <body>
07 <form>
08 ...
09 <button name=”btenviar” type=”submit”>Enviar
Formulário</button>
www.esab.edu.br 225
10 <button name=”btlimpar” type=”reset”>Limpar
Formulário</button>
11 </form>
12 </body>
13 </html>>
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.

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

www.esab.edu.br 227
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>
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 228
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>
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;
04 color:black;
05 }
www.esab.edu.br 229
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.

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

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;
05 border: 1px solid green;
06 }
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 231
Figura 93 – Formulário de cadastro de cliente: formatação da legenda.
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;
04 color:black;
05 }
06 .regra_fieldset{
07 background:#EEC591;
08 border: 1px solid #90;
10 }
11 .regra_legend{
12 background:#FFF8DC;
13 color:blue;
15 border: 1px solid green;
16 }
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 232
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>
12 <legend class=”regra_legend”>Endereço</legend>
13 ...
14 </fieldset>
16 <legend class=”regra_legend”>Telefones</legend>
17 ...
18 </fieldset>
20 ...
21 </fieldset>
22 </form>
23 </body>
24 </html>
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 233
Criando um formulário de cadastro
30 de cliente usando HTML e CSS
Objetivo
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.

www.esab.edu.br 234
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>
charset=UTF-8”>
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 235
42 </div>
43 </body>
44 </html>
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>
charset=UTF-8”>
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 236
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>.
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 237
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;}
Com a instrução dada na linha 1, criamos a regra de formatação do

tipo classe, intitulada “form”, que será aplicada no 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 238
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.

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 239
Algoritmo 105 – Código da página HTML
01 <html>
02 <head>
charset=UTF-8”>
04 <link rel=”stylesheet” type=”text/css”
href=”regrasExemplo.css” media=”all”>
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>
20 <label class=”form_label”>Sobrenome:</label>
21 <input class=”form_input” type=”text”
name=”edsobrenome” size=”30”/>
22 </li>
24 <label class=”form_label”>E-mail:</label>
25 <input class=”form_input” type=”text” name=”edemail”
size=”40”/>
26 </li>
28 <label class=”form_label”>Cidade:</label>
29 <input class=”form_input” type=”text” name=”edcidade”
size=”30”/>
30 </li>
32 <label class=”form_label”>UF:</label>
33 <input class=”form_input” type=”text” name=”eduf”
size=”02”/>
34 </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 240
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>
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 241
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 242
Como tabelar os dados
31 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.

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 243
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ção do 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 244
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 245
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>
charset=ISO-8589-1”>
04 </head>
05 <body>
06 <table>
07 
08 </table>
09 </body>
10 </html>
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 246
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 247
Fórum
www.esab.edu.br 248
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
linhas e 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>
04 </head>
05 <body>
06 <table border=”1”>
07 <tr>
www.esab.edu.br 249
08 <td> Linha 1 Coluna 1 (célula)</td>
11 </tr>
12 <tr>>
16 </tr>
17 </table>
18 </body>
19 </html>
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.

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 250
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>
04 </head>
05 <body>
06 <table border=”1”>
07 <tr> 
08 <th> Coluna A</th>
09 <th> Coluna B</th>
10 <th> Coluna C</th>
11 </tr>
12 <tr>
13 ...
14 </tr>
15 <tr>
16 ...
17 </tr>
18 </table>
19 </body>
20 </html>
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 251
A figura a seguir apresenta o resultado do novo layout da tabela.

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

www.esab.edu.br 252
Ao ser carregada pelo navegador, a tabela terá o seguinte layout (mostrado
na Figura 99):

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 253
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> 
10 <th> Coluna A</th>
11 <th> Coluna B</th>
12 <th> Coluna C</th>
www.esab.edu.br 254
13 </tr>
14 </thead>
15 <tfoot>
16 <tr>
17 <td>Itens - A</td>
18 <td>Itens - B</td>
19 <td>Itens - C</td>
20 </tr>
21 </tfoot>
22 <tbody> 
23 <tr> 
27 </tr>
28 <tr> 
32 </tr>
33 <tbody>
34 </table>
35 </body>
36 </html>
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 255
• 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 256
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.

www.esab.edu.br 257
O código-fonte em HTML que cria a tabela é apresentado a seguir:
Algoritmo 110 – Tabela de veículos

01 <html>
02 <head>
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>
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>
www.esab.edu.br 258
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;}
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;}
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 259
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 }
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.

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 260
Algoritmo 114 – Regra de estilização da cor de fundo das linhas
01 .cor1{
02 background:green;
03 }
04 .cor2{
05 background:blue;
06 }
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 }
As imagens serão carregadas sem repetição e alinhadas à direita para cada

título da tabela.
www.esab.edu.br 261
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{
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 }
O resultado final da apresentação da tabela com as regras de CSS é

mostrado na Figura 102.
www.esab.edu.br 262
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>
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>
23 <td>R$ 8.000,00 </td>
24 </tr>
26 <td>AAC-4321</td>
27 <td>GOL</td>
www.esab.edu.br 263
29 <td>R$ 12.000,00 </td>
30 </tr>
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>
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 264
Criando uma tabela com horário
34 das aulas
Objetivo
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>
<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> 
10 <th> Período </th>
www.esab.edu.br 265
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> 
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>
www.esab.edu.br 266
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 }
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 }
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 267
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 }
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 }
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 }
Após a finalização dos seis passos, a regra CSS completa ficou assim:
www.esab.edu.br 268
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 }
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 269
Figura 103 – Tabela estilizada.
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 270
Introdução ao layout de páginas
35 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 271
Título
Conteúdo Menu
Rodapé
Figura 104 – Layout da página web.

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 272
Tela 800x600 Tela 1024x768
Figura 105 – Layout da página web – fixo.
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.
www.esab.edu.br 273
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.

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 274
35% 70% 35%
Título
Conteúdo Menu
Rodapé
Figura 108 – Layout da página web – centralizado por margens automáticas.

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 Corpo da Margem Corpo da

esquerda página esquerda página
Margem
de recuo
Figura 109 – Layout da página web – centralizado por margens negativas.
www.esab.edu.br 275
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 }
Estudo complementar
Nesta página, você pode, por meio do artigo que
é apresentado, construir um layout CSS de duas
colunas, passo a passo. É outra té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
www.esab.edu.br 276
Definição de bordas do documento
36 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 277
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 }
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 }
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 278
Algoritmo 128 – Definição da borda tracejada
01 h1{
02 border:2px dashed blue;
03 padding:5px;
04 }
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 }
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.

www.esab.edu.br 279
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 }
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 }
www.esab.edu.br 280
A Figura 111 apresenta o resultado da regra quando renderizada pelo
navegador.
Figura 111 – Moldura mista.

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.

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 }
www.esab.edu.br 281
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
trabalho!
www.esab.edu.br 282
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 283
Definição de margens do
37 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 documentos HTML.
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 284
A figura a seguir apresenta o Box Model criado em CSS.
Top
Margin
Border
Padding
Conteúdos...
height
Left Right
width
Bottom
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 285
Algoritmo 133 – Página com título e parágrafo
01 <html>
02 <head>
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>
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.
Título
Espaço entre elementos
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.
Esquerda
Figura 114 − Espaçamento padrão.
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 286
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;
05 margin-left:100px;
07 }
08 p{
09 margin-top: 50px;
13 background-color:blue;
14 }
O resultado da página após o carregamento pelo navegador é mostrado

na figura a seguir.
www.esab.edu.br 287
Título Boxmodel
Texto de apresentação do parágrafo.

Exemplo prático de representação do
Boxmodel
Box Model no Documento.
Página com dois elementos, título e parágrafo.
Figura 115 – Box Model dos elementos.
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;
06 }
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 288
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 }
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 }
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 289
Definição do espaço interno da
38 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 290
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.

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.

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 }
www.esab.edu.br 291
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 }
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>
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>
www.esab.edu.br 292
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

O espaçamento superior e inferior terá valor 1 e os
Padding Valor 1 valor 2
espaçamentos direito e esquerdo terão valor 2.
O espaçamento superior terá valor 1, os
Padding Valor 1 valor 2 Valor 3 espaçamentos direito e esquerdo terão valor 2 e
espaçamento inferior terá valor 3.
Quadro 23 − Dimensões da propriedade padding.

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 }
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 293
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 }
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 }
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 294
Algoritmo 144 – Formatação da largura width
01 h1{
02 width: 200px;
03 }
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 }
Com o estudo dessas duas últimas propriedades, você conheceu todos

os elementos que compõem um Box Model, e suas respectivas sintaxes.
No próximo exemplo, a regra CSS aplicará para um elemento parágrafo
<p> todos estes seguintes itens: border, padding, margin, height e width.
Acompanhe.
Algoritmo 146 – Formatação o Box Model

01 p{
02 border:solid blue 20px; /* bordas */
03 margin:20px 0px 0px 20px; /* margens */
04 padding:10px 0px 10px 0px; /* padding */
05 width:200px; /* width */
06 height:150px; /* height */
07 }
Para exemplificar o resultado da formatação do Box Model, com as

propriedades border, margin, padding, width e height, o código a seguir
apresenta o Algoritmo 140, com uma alteração. Antes o algoritmo
incorporava as regras do Algoritmo 141, agora, fará o uso da regra do
algorimo146. Esta alteração pode ser verificada na linha 04, quando
definimos o atributo href. Acompanhe:
www.esab.edu.br 295
Algoritmo 147 – Algoritmo 140 com aplicação da regra do Algoritmo 146
01 <html>
02 <head>
charset=ISSO-8859-1”>
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>
A Figura 116 a seguir apresenta o resultado da página quando carregada

pelo navegador:
Margem
Texto formatado pela Regra de Borda

Padding - Espaçamentos
height
Padding
width
Novo texto, sem formatação
Figura 116 –Resultado do Algortimo 146.

Nesta unidade, você pôde complementar os estudos relacionados à

formatação dos elementos que compõem um Box Model, conhecendo
a estrutura e sintaxe da propriedade padding. Na próxima unidade,
estudaremos como posicionar os elementos em um documento HTML,
definindo para cada um deles uma posição exata na página. Essa técnica
abre a possibilidade para de criação de layouts precisos e avançados. Até lá!
www.esab.edu.br 296
Definição da posição dos objetos na
39 página HTML
Objetivo
Apresentar a sintaxe em CSS para definição das propriedades position
e float.
Vimos, na unidade anterior, a formatação dos elementos que compõem

um Box Model, conhecendo a estrutura e sintaxe da propriedade padding.
Nesta unidade, vamos conhecer um recurso muito importante do HTML
e CSS que é o posicionamento dos elementos na página HTML.
Porém, antes de conhecermos as propriedades position e float, é

importante compreendermos que a página HTML pode ser entendida
como uma tela com coordenadas que permitem informar o local em que
um elemento deve ser apresentado.
A figura a seguir apresenta a tela do navegador, como um mapa em que

as coordenadas, em pixel, representam os pontos para posicionamento
dos elementos.
Figura 117 – Mapa de coordenadas do navegador.

www.esab.edu.br 297
Dessa forma, usando as regras CSS, você pode posicionar qualquer
elemento da tela informando as suas coordenadas, combinando as
informações dos deslocamentos (superior, inferior, esquerda e direita),
integrados a três esquemas possíveis de posicionamento: normal, float
(flutuante) e absoluto.
A seguir, a Figura 118 demonstra o posicionamento do elemento

HTML na página, tendo como referência as coordenadas de tela e o
deslocamento do objeto.
Figura 118 – Posicionamento do elemento na página HTML.

Existem três definições de posicionamento de um elemento em uma

página HTML. Para determinar cada um deles, usamos a propriedade
position. Acompanhe os possíveis valores.
• Absolute: o posicionamento absolute será definido pelas margens

superior e esquerda da tela. Também chamado de absoluto, tem a
posição fixa.
• Relative: é caracterizado quando o posicionamento é definido
pela margem inferior em relação ao último elemento e a margem
esquerda da tela. Também chamado de relativo.
• Static: é caracterizado quando o posicionamento é definido pelo
próximo espaço disponível no canto esquerdo da tela, também
conhecido como estático.
www.esab.edu.br 298
Quando você quiser posicionar um elemento de forma absoluta, deve
definir a propriedade position com o valor absolute. Em seguida, deve
definir, deve definir também o uso dos atributos: left (esquerda), right
(direita), top (superior), e bottom (inferior). Esses atributos definirão as
coordenadas e posicionarão o elemento. Segundo Silva (2008), a declaração
position: absolute;, quando usada, em conjunto com as propriedades left,
top, right e bottom, movimentam o bloco da sua posição inicial a uma
distância definida pelos valores declarados em tais propriedades.
Essa técnica de posicionamento especifica uma posição absoluta em pixel

de um elemento HTML que será renderizado no local exato, mesmo
quando a tela do navegador for redimensionada. O código a seguir
apresenta a regra CSS que define três tipos de posicionamentos absolutos
para o elemento parágrafo <p>.
Algoritmo 148 – Posicionamento absoluto

01 .p1{
02 background:blue;
03 position:absolute;
04 left:50px;
05 top: 50px;
06 height:30px;
07 width: 200px;
08 }
09 .p2{
12 left:50px;
13 top: 82px;
14 height:30px;
15 width: 200px;
16 }
17 .p3{
18 background:red;
20 left:50px;
21 top: 120px;
22 height:30px;
23 width: 200px;
24 }
www.esab.edu.br 299
A Figura 119 demonstra o carregamento das regras CSS por uma página
HTML com três parágrafos, cada um deles formatados por uma regra.
Item A - forma P1
Item B - forma P2
Item C - forma P3
Figura 119 – Posicionamento do elemento na página HTML – absoluto.

O quadro em azul, chamado de Item A, está formatado pela regra P1.

Esse bloco possui um posicionamento fixo, absoluto, ou seja, o quadro
azul será posicionado em relação ao seu elemento pai, ou seja, o elemento
body. Portanto, as medidas top, left, height e width desse elemento
têm como referência as dimensões do elemento body. Assim, como o
bloco azul, os blocos verde e vermelho possuem a mesma posição da
esquerda em 50 pixels, você percebeu como os blocos possuem a mesma
margem à esquerda? Observe. Para um bloco ficar abaixo do outro,
a propriedade top de cada elemento possui valores diferentes, sejam
elas: 50, 82 e 120 (azul, verde e vermelho, respectivamente), definida a
posição de apresentação de cada elemento com base na margem superior
do elemento body. Assim, o bloco azul, por exemplo, está a 52 pixels da
margem superior do elemento body. Todos os blocos possuem o mesmo
tamanho (largura) devido à propriedade width, que é 200 pixels para os três
elementos e a mesma altura, que é 30 pixels para cada elemento.
Para posicionar um elemento de forma relativa à propriedade position,

ela deve ser definida com o valor relative, seguido também das formas
de deslocamento (top, left, right e bottom). Na posição relativa, o
elemento irá ocupar o próximo espaço disponível abaixo do último
elemento. Especificando a posição como “relative”, você pode utilizar as
propriedades top ou bottom, right ou left para posicionar os elementos
na página em relação ao lugar que ele ocuparia normalmente no
documento, ou seja, ele possui uma posição padrão com a posição
relative e você pode deslocar esse elemento em relação à posição padrão,
movimentando os elementos para cima ou para baixo, para a esquerda ou
para a direita.
www.esab.edu.br 300
O código a seguir apresenta a regra CSS que define três tipos de
posicionamentos relativos para o elemento parágrafo <p>.
Algoritmo 149 – Posicionamento relativo

01 .p1{
02 background:blue;
03 }
04 .p2{
06 position:relative;
07 left:70px;
08 top: 82px;
09 height:30px;
10 width: 200px;
11 }
12 .p3{
13 background:red;
14 position:relative;
15 left:80px;
16 top: 120px;
17 height:30px;
18 width: 200px;
19 }
A figura a seguir apresenta o resultado do carregamento da página pelo

navegador.
Item A - forma P1
left Item B - forma P2
left Item C - forma P3
Figura 120 – Posicionamento do elemento na página HTML – relativo.

Observe que o item A , em azul, representa a posição padrão do elemento.

Esse item está posicionado no fluxo padrão de desenho de elemento
HTML na página, ou seja, na posição padrão, sem ajustes. Já os quadros
em verde (item B) e vermelho (item C) foram posicionados mais à
esquerda, devido à propriedade left, junto ao posicionamento relativo.
www.esab.edu.br 301
A posição estática, definida por meio da propriedade position: static, insere
o elemento no espaço disponível mais próximo sem nenhuma característica
especial aplicada a ele, fazendo com que ocupe o canto superior esquerdo,
independentemente dos valores das propriedades top e/ou left.
O código a seguir apresenta a regra CSS que define três tipos de

posicionamentos estáticos para o elemento parágrafo <p>.
Algoritmo 150 – Posicionamento estático

01 .p1{
02 background:blue;
03 position:static;
04 left:100px;
05 top: 50px;
06 height:30px;
07 width: 200px;
08 }
09 .p2{
11 position:static;
12 left:200px;
13 top: 82px;
14 height:30px;
15 width: 200px;
16 }
17 .p3{
18 background:red;
19 position:static;
20 left:300px;
21 top: 120px;
22 height:30px;
23 width: 200px;
24 }
www.esab.edu.br 302
A Figura 121 apresenta o resultado do carregamento da página pelo
navegador.
Item A - forma P1
Item B - forma P2
Item C - forma P3
Figura 121 – Posicionamento do elemento na página HTML – estático.
Observe que, mesmo com os valores left de cada item, os elementos

foram posicionados na mesma margem à esquerda. Isso porque usamos
a propriedade static. Essa propriedade representa o valor default para
todo elemento HTML, ou seja, significa que o elemento não tem
posicionamento definido e seu fluxo ocorre normalmente no documento
HTML. Por este motivo, não é necessário definir position:static para os
elementos da página pois esse é o valor padrão.
Outra forma que você pode utilizar para posicionar os elementos na

página HTML é o esquema float de posicionamento e seus valores: left,
right e none (nenhum). O quadro a seguir apresenta a finalidade de cada
um desses valores, acompanhe:
Valores Função
None Define que o elemento não deve flutuar para lado algum.
Faz o elemento flutuar à esquerda, deixando qualquer outro elemento à direita
Left
desse elemento.
Faz o elemento flutuar à direita, deixando qualquer outro elemento à esquerda
Right
desse elemento.
Quadro 24 – Valores possíveis da propriedade float.

Silva (2008, p. 286) destaca que “[...] segundo as regras deste esquema, o
box é retirado de sua posição normal do fluxo do documento e flutuado
para direita ou para esquerda”. Isso significa que o elemento inserido
continua a fazer parte do fluxo da página, e se os elementos ao seu redor
www.esab.edu.br 303
mudarem, a página será reorganizada. Isso difere da página onde os
elementos são posicionados de forma absoluta, na qual estes possuem
posições fixas e, portanto, não são reajustados. Ou seja, o elemento
HTML pode ser movimentado à esquerda ou à direita com uso da
propriedade float, fazendo com que o box model e seu conteúdo sejam
deslocados para a direita ou para a esquerda do documento. A área que
era ocupada por este elemento, será utilizada por outro elemento do
documento, reajustando os elementos na página.
O código a seguir apresenta a regra CSS para criação de dois elementos

HTML.
Algoritmo 151 – Elementos verde e azul
01 .estilo1{
02 width:60px;
03 height:50px;
05 float: none;
06 }
07 .estilo2{
08 width:60px;
09 height:50px;
10 background:blue;
11 float: none;
12 }
Quando carregada pelo navegador, a regra CSS aplicada nos dois

elementos <div>, com alinhamento float: none produzirá o seguinte layout:
Figura 122 – Elementos div.

www.esab.edu.br 304
Observe que os dois elementos DIV, representados pelos blocos em
duas cores, serão posicionados à esquerda na mesma posição e serão
apresentados um acima do outro, devido à ordem em que o primeiro
DIV foi criado (verde) e depois o DIV em azul, seguindo o fluxo normal
de definição dos elementos, já que a propriedade float é none, nas linhas
5 e 11 do algoritmo.
O código a seguir apresenta o algoritmo que cria o documento HTML

que será formatado pela regra do Algoritmo 151, bem como as demais
regras a serem criadas.
Algoritmo 152 – Documento HTML com duas DIV

01 <html>
02 <head>
charset=UTF-8”>
css”>
05 </head>
06 <body>
07 <div class=”estilo1”> </div>
08 <div class=”estilo2”> </div>
09 </body>
10 </html>
O código a seguir aplica o alinhamento flutuante à esquerda nos dois

elementos:
Algoritmo 153 – Alinhamento à esquerda com layout flutuante

01 .estilo1{
02 width:60px;
03 height:50px;
05 float:left;
06 }
07 .estilo2{
www.esab.edu.br 305
08 width:60px;
09 height:50px;
10 background:blue;
11 float:left;
12 }
Quando carregada pelo navegador, a regra CSS do Algoritmo 153,

aplicada nos dois elementos <div> criados no Algoritmo 152 produzirá o
seguinte layout:
Figura 123 – Elementos div flutuando à esquerda.

Isso ocorre porque o primeiro elemento DIV será deslocado para a

esquerda, linhas 5 e 11 do algoritmo, deixando o espaço que ocupava
disponível para o próximo elemento que será criado na página HTML.
O segundo DIV será posicionado à esquerda do primeiro elemento.
O código a seguir aplica o alinhamento flutuante à direita nos dois

elementos.
Algoritmo 154 – Alinhamento à direita com layout flutuante

01 .estilo1{
02 width:60px;
03 height:50px;
05 float:right;
06 }
07 .estilo2{
08 width:60px;
09 height:50px;
10 background:blue;
11 float:right;
12 }
www.esab.edu.br 306
Quando carregada pelo navegador, a regra CSS do Algoritmo 154,
aplicada nos dois elementos <div> do Algoritmo 152 produzirá o
seguinte layout:
Figura 124 – Elementos div flutuando à direita.

Observe que a primeira DIV (em verde) é deslocada para a direita,

deixando um espaço que será ocupado pela segunda DIV, em azul.
Como ambas estão com alinhamento float à direita (right), linhas 5 e 11,
os dois blocos ficam unidos. Entretanto, se você mudar, por exemplo, o
posicionamento float à esquerda (left) da segunda DIV, os dois blocos
ficarão separados, conforme apresentamos na Figura 125. Veja:
Figura 125 – Elementos div flutuando à direita e esquerda.

Nesta unidade, você aprendeu como flutuar e posicionar elementos nos

documentos HTML. Esses dois recursos possibilitam a construção de
layouts dos sites sem o uso das tabelas (tableless), agilizando o processo de
manutenção do site e de validação das interfaces gráficas que são criadas.
Na próxima unidade, vamos estudar a propriedade display, que define

a forma de apresentação dos elementos quando renderizados pelo
navegador.
www.esab.edu.br 307
Exibindo e ocultando objetos da
40 página HTML
Objetivo
Apresentar a sintaxe em CSS para definição da propriedade display.
Você aprendeu como flutuar e posicionar elementos nos documentos

HTML, na unidade anterior. Viu que esses dois recursos possibilitam a
construção de layouts dos sites sem o uso das tabelas (tableless), agilizando
o processo de manutenção do site e validação das interfaces gráficas que são
criadas. Já nesta unidade, vamos estudar a propriedade display que define a
forma de apresentação dos elementos quando renderizados pelo navegador.
A propriedade display é responsável por definir a forma de apresentação

do elemento HTML na página, que pode ser inline (em linha) ou block
(em bloco).
Alguns elementos HTML já possuem um modelo de apresentação

padrão, inline ou block e, por isso, não necessitam de estilização por
parte do programador, no caso você.
Elementos de visualização inline são aqueles que ocupam apenas a

própria largura e não geram uma quebra de linha, como um elemento
âncora <a> ou itálico <i>.
Já os elementos de visualização block são elementos que ocupam toda a

largura da página e geram quebra de linha, como uma <div> ou um <p>,
conforme veremos mais adiante.
Voltemos à propriedade inline, que é padrão para a maioria dos

elementos HTML.
www.esab.edu.br 308
A seguir, o código HTML exemplifica a propriedade display inline que
define um texto para ser apresentado em negrito. Veja:
Algoritmo 155 – Página com texto em negrito

01 <html>
02 <head>
charset=UTF-8”>
04 </head>
05 <body>
06 <b> Texto em Negrito </b> Texto Normal.
07 </body>
08 </html>
A Figura 126 apresenta o resultado da página após o carregamento pelo

navegador.
Figura 126– Texto com display inline.

Os principais elementos inline são: span, a, img, td, label, input, select
e textarea.
Já os elementos de visualização block são elementos que ocupam toda a

largura da página e geram quebra de linha, como uma <div> ou um <p>.
Outros elementos de bloco são: Form, p, ul, ol, h1 até h6 etc..
Entretanto, usando a propriedade display, você pode definir a forma

de visualização dos elementos HTML, por exemplo, se aparecerá como
inline ou block. Assim, mudará a visualização de um elemento que por
padrão seria em linha para em bloco.
A propriedade display pode conter os seguintes valores:
www.esab.edu.br 309
Valores Descrição
None O elemento não será mostrado.
O elemento será mostrado como um objeto em bloco, com quebras de linha
Block
antes ou depois, como, por exemplo, a tag div, form, h1, h2, h3 etc..
O elemento será mostrado como um objeto em linha, sem quebra de linha antes
Inline
ou depois, como, por exemplo, a tag b, i etc..
Quadro 25 – Valores da propriedade display.

O valor none define que o elemento não aparecerá na tela . Assim,

por exemplo, uma vez que você atribua o valor none para determinado
elemento, ele não aparecerá na tela.
O código a seguir cria uma regra CSS que, se aplicada a um elemento

HTML, ele não será apresentado na tela.
Algoritmo 156 – Escondendo elemento HTML

01 .esconder{
02 display:none;
03 }
Vimos que o valor block define que o elemento se comporte com um

elemento em bloco, fazendo com que contenha outros elementos para
dividi-los e organizá-los, e ocupe toda a linha da página.
O código a seguir cria uma regra CSS que, ao ser aplicada a um elemento
HTML, fará com que ele seja apresentado na tela na forma de um bloco.
Algoritmo 157 – Elemento HTML em bloco

01 .mudar_para_bloco{
02 display:block;
03 }
www.esab.edu.br 310
A Figura 127 apresenta o elemento na forma inline e depois como block.
Figura 127– Texto com display block.

A regra CSS fez com que o elemento <b> (negrito) fosse apresentado na
forma de um bloco, o qual ocupa toda linha do navegador e possibilita
que novos elementos sejam inseridos nesse bloco.
No próximo código, a regra CSS transformará um elemento div> – que,

por padrão, é em bloco – em um elemento inline.
Algoritmo 158 – Elemento HTML em linha

01 div{
02 display:inline;
03 }
No exemplo do Algoritmo 158, a regra CSS transforma os elementos ou

itens da lista em um elemento inline, para que estes sejam apresentados
na horizontal, já que, por padrão, elementos <li> são em bloco, gerando
quebra de linha.
Algoritmo 159 – Elemento HTML em linha no elemento

01 li {
02 padding: 20px 20px 20px 20px;
03 background-color:lightblue;
04 border: 2px solid blue;
05 margin:2px;
06 display:inline;
07 }
www.esab.edu.br 311
A Figura 128 apresenta o layout de uma lista formatada pela seguinte regra:
Figura 128– Lista com display inline.

Observe na Figura 128 que os elementos <li>, representados pelos

textos Opção 1 até Opção 4, foram renderizados na página um ao
lado do outro, em blocos com dimensões de 20 pixels de espaçamento
(padding), na cor azul-claro como fundo e azul mais escuro como borda.
O espaçamento entre cada opção foi definido na propriedade margin.
O que renderiza cada um desses elementos um ao lado do outro é a
propriedade display:inline.
No exemplo do Algoritmo 160, a regra CSS transforma o elemento

âncora que, por padrão, é inline em um elemento block, para que este
seja apresentado como um bloco.
Algoritmo 160 – Elemento HTML em bloco no elemento <a>

01 a {
02 display:block;
03 width:250px;
04 height:100px;
05 border:1px solid black;
06 }
www.esab.edu.br 312
A figura a seguir apresenta o layout de um link formatado pela seguinte
regra:
Figura 129 – Lista com display block.

Note que o link passou a ter uma área maior, e se o usuário clicar em
qualquer parte do quadrado que delimita o link, a página da ESAB será
redirecionada. Por padrão, um link possui a estrutura inline, sendo que a
ação do link só é executada quando o usuário clica exatamente no texto
que representa o link.
Nesta unidade, você estudou as variações de aplicação da propriedade

display, essencial para a construção de interfaces gráficas mais modernas
e atrativas. Na próxima unidade, você poderá aplicar os conhecimentos
adquiridos até o momento em relação às propriedades margin, border,
padding, width, height, position e float.
www.esab.edu.br 313
Criando uma página HTML com
41 layout personalizado
Objetivo
com layout que utilize as propriedades: bordas (border), margem
(margin), espaçamento interno (padding), dimensionamento de
objetos (width e height), posicionamento (position), elementos
flutuantes (float), exibir e ocultar objetos ou elementos (display).
Na unidade anterior, você estudou as variações de aplicação da

propriedade display, essencial para a construção de interfaces gráficas
mais modernas e atrativas. Nesta unidade, você aprenderá como fazer o
layout de um website sem utilizar tabelas (tableless) e utilizando <div>,
posicionamento com float, margens, bordas e espaçamentos para
construção de um layout com topo, corpo e rodapé.
O corpo desse website será dividido em cinco partes: uma barra de

menu à esquerda, um espaço para conteúdo e uma barra lateral à
direita, um espaço para o cabeçalho e outro para o rodapé. Dividimos o
desenvolvimento desse website em oito passos.
Utilize o editor de sua preferência para criação da página, e salve o

arquivo com as regras CSS com o nome de algoritmo162.css.
www.esab.edu.br 314
A Figura 130 apresenta o layout que será criado.
Aqui pode ser uma imagem

Logo
de background e um texto
Principal
Seção 1
Empresa Seção 1
Produtos
Seção 2
Serviços
Seção 2
Contato Seção 3
Seção 3
Endereço
Figura 130 – Layout.

O código que cria a página HTML é apresentado no algoritmo a seguir.
Algoritmo 161 – Elemento HTML

01 <html>
02 <head>
charset=UTF-8”>
href=”algoritmo158.css” />
05 <title>Unidade 41</title>
06 </head>
07 <body>
08 <div>
09 <div>
10 <div>Logo</div>
11 Aqui pode ser uma imagem de background e um texto.
www.esab.edu.br 315
12 </div>
13 <div>
14 <div>
15 <div>
16 <div>Principal</div>
17 <div>Empresa</div>
18 <div>Produtos</div>
19 <div>Serviços</div>
20 <div>Contato</div>
21 </div>
22 </div>
23 <div>
24 <div>Seção 1</div>
27 </div>
28 <div>
31 </div>
33 <div></div>
34 </div>
35 <div>
36 <div>
37 Endereço
38 </div>
39 </div>
40 </div>
41 </body>
42 </html>
A figura a seguir apresenta o resultado da página após o carregamento

pelo navegador.
www.esab.edu.br 316
Figura 131– Conteúdo da página após o carregamento.
Note que o conteúdo da página é apresentado sem layout e os dados são

apresentados no posicionamento padrão. Os próximos passos, usando
as regras CSS, farão a estilização da página, garantindo um layout mais
agradável e moderno. Acompanhe.
Passos para o desenvolvimento do website

Passo 1 – Abra o editor de texto e crie a seguinte regra CSS para a
formatação do corpo da página. Para melhor compreensão, cada linha foi
comentada com um texto explicativo com o objetivo da instrução.
Algoritmo 162 – Estilização do corpo da página

01 body {
02 margin:0px; /* sem margens */
03 background: #cccccc; /* cor de fundo*/
04 font-family:”Trebuchet MS”, Tahoma, Arial, Verdana; /*
tipo de fonte*/
05 font-size:12px; /* tamanho da fonte*/
06 color:#000; /* cor do texto */
07 }
www.esab.edu.br 317
Passo 2 – No editor de texto, atualize a regra CSS do Algoritmo 162,
acrescentando a regra para formatação do conteúdo da página, que será
utilizado no elemento <div> principal. Para melhor compreensão, cada
linha foi comentada com um texto explicativo com o objetivo da instrução.
Lembre-se de salvar o arquivo depois da inclusão dessa nova regra CSS.
Algoritmo 162 – Estilização do conteúdo da página

01 #tprincipal {
02 position: relative; /* posicionamento relativo */
03 width: 750px; /* largura da área*/
04 border: 1px solid black; /* borda com espessura de 1
pixel, sólida, em preto*/
05 margin:0px auto; /* sem margem, largura e altura
automática*/
06 background: white; /* cor de fundo em branco*/
07 }
Passo 3 – Agora, no editor de texto, atualize a regra CSS do Algoritmo

162 acrescentando a regra para formatação do conteúdo do topo da
página, que será utilizado no elemento <div> de apresentação do topo da
página e meio da página:
Algoritmo 162 – Estilização do topo da página

01 #topo {
02 position: relative; /* posicionamento relativo */
04 height: 100px; /* altura da área */
05 border: 2px solid red; /* borda em vermelho, sólida, com
espessura em 2 pixels*/
06 }
07 #meio {
08 position: relative; ; /* posicionamento relativo */
10 min-height: 400px;/* altura mínima */
11 background: #eeeeee; /* cor de fundo*/
12 }
Lembre-se de salvar o arquivo depois da inclusão dessa nova regra CSS.
www.esab.edu.br 318
Passo 4 – Neste quarto passo, utilize o editor de texto e atualize o
código da regra CSS do Algoritmo 162 com a inclusão do código para
formatação do conteúdo da coluna da esquerda, meio e da direita, que
será utilizado no elemento <div> de apresentação do menu, seções do
meio das páginas e seções ao lado direito da página. Essa regra criará as
três colunas entre o topo e o rodapé.
Algoritmo 162 – Estilização dos elementos seção e menu da página

01 #esquerda {
02 float: left; /* posicionamento flutuante à esquerda */
04 min-height: 400px; /* altura mínima da área*/
05 border: 2px solid green; /* borda */
06 }
07 #miolo {
08 float: left; /* posicionamento flutuante à esquerda */
11 border: 2px solid blue; /* borda */
12 }
13 #direita {
14 float: right; /* posicionamento flutuante à direita */
17 border: 2px solid yellow; /* borda */
18 }
Passo 5 – Ainda, no editor de texto, inclua a seguinte regra CSS para

formatação do conteúdo do menu e itens do menu no código do
Algoritmo 162.
www.esab.edu.br 319
Algoritmo 162 – Estilização do menu da página
01 #menu {
04 }
05 .itemMenu {
08 background: lightyellow; /* cor de fundo */
09 padding: 3px 0px 0px 10px; /* espaçamento */
10 border-bottom: 1px solid black; /* borda */
11 }
Passo 6 – No sexto passo, você ainda vai utilizar o editor de texto, agora
para incluir a seguinte regra CSS no Algoritmo 162 para formatação do
conteúdo do rodapé da página:
Algoritmo 162 – Estilização do rodapé da página

01 #rodape {
04 border: 2px solid brown; /* borda */
05 }
06 #rodape_direita {
07 float: right; /* posicionamento flutuante à direita */
09 text-align: right; /* alinhamento do texto à direita */
10 margin: 5px 10px 0px 0px; /* margem */
11 }
Passo 7 – No penúltimo passo, no editor de texto inclua a seguinte regra

CSS no Algoritmo 162 para formatação do conteúdo das seções do meio
e da direita da página:
www.esab.edu.br 320
Algoritmo 162 – Estilização dos conteúdos das seções
01 .secao_miolo {
03 height: 150px;/* altura da página*/
04 text-align: center; /* texto alinhado ao centro */
05 background: #cccccc; /* cor de fundo */
06 margin: 2px 5px 4px 5px; /* margens */
07 }
08 .secao_direita {
10 height: 100px; /* altura da página*/
11 text-align: center; /* texto alinhado ao centro */
12 background: #cccccc; /* cor de fundo */
13 margin: 4px 5px 4px 5px; /* margens */
14 }
A figura a seguir apresenta os locais da página e as respectivas regras que

serão aplicadas:
www.esab.edu.br 321
1
Aqui pode ser uma imagem
Logo 3
de background e um texto
Principal
4 Seção 1
Empresa
Seção 1
Produtos Seção 2
6 7
2 Serviços
Seção 2 Seção 3
Contato 8
9
5 10
11 Seção 3
12 13 Endereço
1 Body 5 Equerda 9 Seção da Direita 12 Rodapé

2 Div Principal 6 Miolo 10 Menu 13 Rodapé da Direita
3 Topo 7 Direita 11 Itens do Menu
4 Meio 8 Seção do Meio
Figura 132 – Áreas que serão estilizadas na página HTML.

Passo 8 – Finalmente, com base na imagem anterior, o código do

Algoritmo 161 que cria a página terá o seguinte código com a referência
às regras CSS:
Algoritmo 161 – Definição dos elementos da página

01 <html>
02 <head>
03 <meta http-equiv=”Content-type” content=”text/
html;charset=UTF-8” />
04 <title>Layout Personalizado</title>
href=”algoritmo162.css” />
06 </head>
07 <body>
08 <div id=”principal”>
www.esab.edu.br 322
09 <div id=”topo”>
10 <div>Logo</div>
11 Aqui pode ser uma imagem de background e um texto.
12 </div>
13 <div id=”meio”>
14 <div id=”esquerda”>
15 <div id=”menu”>
16 <div class=”itemMenu”>Principal</div>
17 <div class=”itemMenu”>Empresa</div>
18 <div class=”itemMenu”>Produtos</div>
19 <div class=”itemMenu”>Serviços</div>
20 <div class=”itemMenu”>Contato</div>
21 </div>
22 </div>
23
24 <div id=”miolo”>
25 <div class=”secao_miolo”>Seção 1</div>
28 </div>
29
30 <div id=”direita”>
31 <div class=”secao_direita”>Seção 1</div>
34 </div>
35 <div style=”clear: both;”></div>
36 </div>
37 <div id=”rodape”>
38 <div id=”rodape_direita”>
39 Endereço
40 </div>
41 </div>
42 </div>
43 </body>
44 </html>
Execute o arquivo Algoritmo 161 no navegador de sua preferência para

visualizar o layout criado.
Nesta unidade, você pôde praticar e reforçar os estudos realizados nas

unidades anteriores construindo um layout personalizado. Na próxima
unidade, apresentaremos a linguagem de programação JavaScript, que
possibilitará criar páginas mais dinâmicas e funcionais.
www.esab.edu.br 323
42 Introdução ao JavaScript
Objetivo
Apresentar um histórico da linguagem JavaScript, sua sintaxe, como
os códigos são inseridos nas páginas HTML e como os dados são
armazenados nas variáveis, e como elementos HTML podem ser
acessados por comandos em JavaScript.
Em nossos estudos da unidade anterior, você pôde praticar e reforçar

os estudos realizados em unidades antecedentes construindo um layout
personalizado. Nesta unidade você estudará o JavaScript, uma linguagem
de programação que inserida no documento HTML possibilita a criação
e execução de funcionalidades, como: validação de campos obrigatórios,
cálculos matemáticos, rotinas de entrada e saída de dados etc., que
tornam as páginas web mais dinâmicas.
Podemos dizer que JavaScript é uma extensão do HTML, uma vez

que sua utilização se dá na forma de rotinas que são chamadas em
linhas da página HTML. Por exemplo, ao clicar no botão enviar em
um formulário, as rotinas em JavaScript podem ser chamadas para que
validem e certifiquem que todos os campos obrigatórios do formulário
foram preenchidos, antes dos dados serem enviados para outro programa
de computador que fará o processamento das informações.
www.esab.edu.br 324
Para sua reflexão
A linguagem JavaScript permite a implementação
de rotinas simples e complexas em projetos web ,
porém, exige muito tempo de análise, codificação
e testes por parte do programador. Uma forma de
diminuir o tempo de desenvolvimento dos projetos
web é a utilização de bibliotecas externas, que
possuem muitas rotinas prontas para envio de
e-mail, sms, validação de CPF, CNPJ etc.
Por um lado, essas ferramentas aceleram o
desenvolvimento de projetos, mas por outro será
que não os deixam presos a uma solução que
pode.ser descontinuada no futuro, inviabilizando o
projeto? O que você acha?
Segundo Manzano e Toledo (2008, p. 30), “[...] a linguagem de

programação JavaScript tornou-se padrão de linguagens de script para
programas de navegação na internet”.
O código em JavaScript pode ser inserido em qualquer parte do código

HTML e são identificados pelas tags <script> e </script>. Mas, por
convenção, para facilitar a manutenção dos códigos e garantir que foram
declarados antes de serem chamados nas páginas, você deve colocar todos
os códigos no início do documento, na área de cabeçalho da página,
entre as tags <head> e </head>.
Isso porque, para que o código JavaScript seja executado na página,

ele precisa ter sido declarado anteriormente. Outra forma é declarar o
código diretamente no elemento body da página. Para isto, os comandos
em JavaScript devem ser colocados entre as tags <script type=”text/
javascript”> e </script>.
www.esab.edu.br 325
O código a seguir exemplifica a estrutura de declaração e uso de
JavaScript nas páginas HTML.
Algoritmo 163 – HTML com JavaScript

01 <html>
02 <head>
03 <title>código em JavaScript</title>
04 
05 </head>
06 <body>
07 <script type=”text/javascript”>
08 /* aqui as rotinas são chamadas e executadas.*/
09 </script>
10 </body>
11 </html>
Em JavaScript, como na maioria das linguagens de programação, os

dados são armazenados em variáveis que podem ser criadas e inicializadas
em qualquer parte do programa. As variáveis declaradas fora das
funções são chamadas de globais, e são visíveis para todas as funções
implementadas. As variáveis declaradas dentro das funções só podem ser
acessadas por estas, definidas pela cláusula “var”, chamadas de locais. Nas
definições de variáveis locais, é obrigatória a utilização da instrução “var”.
A figura a seguir apresenta graficamente o contexto das variáveis locais e

globais.
Programa JavaScript
variável a;
variável b;
Função Xpto
variável c;
Figura 133 – Variáveis globais e locais.

www.esab.edu.br 326
As variáveis a e b são globais, declaradas dentro do programa JavaScript,
sendo visíveis e acessadas pela função chamada “Xpto”. Já a variável c
é local, declarada dentro da função, sendo acessada apenas pela função
“Xpto”. Caso o programa tente utilizar a variável “c”, esta não será
reconhecida, pois só existe para a função “Xpto”.
Para declarar uma variável, os nomes das variáveis devem começar por uma
letra ou pelo caractere sublinhado “_”, o restante da definição do nome
pode conter qualquer letra ou número. A linguagem JavaScript é case-
sensitive, portanto, letras maiúsculas são diferente de letras minúsculas,
ou seja, a variável de nome idade é diferente da variável de nome IDADE.
Portanto, muito cuidado quando for definir o nome das variáveis.
Com relação ao tipo de dados em JavaScript, existem três tipos de

variáveis: numéricas, boolean (lógicas) e strings.
As variáveis numéricas são assim chamadas, pois armazenam números,

reais ou inteiros. Já as booleanas armazenam valores lógicos (true ou
false). Finalmente, as strings, uma sequência de caracteres. As strings
podem ser delimitadas por aspas simples (‘) ou duplas (“).
O JavaScript reconhece ainda um outro tipo de variável, o null. Esse

valor é utilizado para a manipulação de variáveis não inicializadas sem
que ocorra um erro no programa. Quando uma variável possui o valor
null, significa dizer que ela possui um valor desconhecido ou nulo.
Comentários no código podem ser formulados de duas maneiras:
• para comentários longos de várias linhas ou blocos de comentários,

usamos: /* (barra-asterisco) que inicia um bloco de comentário,
pode conter várias linhas e todo o texto após o barra asterisco é
ignorado, até que */ (asterisco-barra) seja encontrado;
• para introduzir comentários de apenas uma linha, usamos a barra
dupla (//).
O código a seguir demonstra o uso de comentários em JavaScript.
www.esab.edu.br 327
Algoritmo 164 – Comentário em JavaScript
01 <HTML>
02 <HEAD>
03 <TITLE>Código em JavaScript</TITLE>
04 
05 </HEAD>
06 <BODY>
07 <SCRIPT type=”text/javascript”>
08 /* Comentário
09 com várias
10 linhas
11 */
12 //comentário de uma linha
13 </SCRIPT>
14 </BODY>
15 </HTML>
O processamento básico executado por um programa JavaScript possui

três etapas: entrada de dados, processamento e saída de dados. Manzano
e Toledo (2008, p. 246) explicam que
[...] entrada de dados é a tarefa que possibilita alimentar um programa com

elementos para que algum tipo de processamento de dados ocorra. Processamento
de dados é etapa em que um determinado dado é transformado. E a saída de dados, a
etapa em que é possível obter por meio do processamento as respostas desejadas.
Esse processamento é chamado de programação sequencial.
Há duas sintaxes para declaração de variáveis em JavaScript.
A primeira:
var nome_da_variável= valor da variável;

A clausula “var” é opcional.
A outra sintaxe é:
nome_da_variável= valor;
www.esab.edu.br 328
Mesmo sendo opcional, o uso da cláusula deixará o código mais legível e
facilitará sua interpretação. Sendo assim, você pode adotar essa cláusula
como uma boa prática.
O script do Algoritmo 165, a seguir, cria duas variáveis: nome e idade. A

variável nome armazenará uma string com o nome, que será informado
pelo usuário por meio do comando prompt (), que abre uma janela de
edição. A variável idade armazenará a idade informada pelo usuário,
também por meio de uma janela de edição. Os dados cadastrados serão
apresentados na tela por meio do comando document.write (), que
imprime uma mensagem na página. O código possui a seguinte estrutura:
Algoritmo 165 – Estrutura sequencial

01 <html>
02 <head>
03 <title>código em javascript</title>
04 <meta http-equiv=”content-type” content=”text/html;
05 
06 </head>
07 <body>
09 var nome; /* declaração da variável nome */
10 var idade; /* declaração da variável idade */
11 nome = prompt (“informe o seu nome:”); /* Entrada de
Dados*/
12 idade = prompt (“informe a sua idade:”); /* Entrada de
Dados*/
13 document.write (“o ” + nome + “ tem “ + idade + “
anos.”); /* Saída de Dados*/
14 </script>
15 </body>
16 </html>
Observe que na linha 13 é realizada a concatenação da letra “O” com

o valor da variável nome; concatenado assim com a frase “tem”, com o
valor da variável idade e, por sua vez, concatenado com a frase “anos”.
Supondo que o nome seja “Marcelo” e a idade 42, o resultado desta
concatenação será um literal (ou seja, uma mensagem) com a seguinte
estrutura; “O Marcelo tem 42 anos”. A figura a seguir apresenta as telas
na sequência do processamento da página.
www.esab.edu.br 329
Figura 134 – Processamento sequencial.
O próximo script cria um programa para cálculo da área de um

triângulo:
Algoritmo 166 – Cálculo da área do triângulo

01 <html>
02 <head>
04 <title>Cálculo de área de um triângulo</title>
05 </head>
06 <script language=”JavaScript”>
07 function calcular(form) {
08 var base = parseFloat(form.idbase.value);
09 var altura = parseFloat(form.idaltura.value);
10 var area = base * altura/2;
11 form.edresultado.value = area;
12 }
13 </script>
14 <body>
15 <form name=”frmcalcular”>
16 Base : <input type=”text” name=”idbase” /><p/>
17 Altura:<input type=”text” name=”idaltura” /><p/>
18 <input type=”button” value=”Calcular”
onClick=”calcular(this.form)” />
www.esab.edu.br 330
19 <input type=”reset” value=”Limpar” /><p/>
20 Resultado: <input type=”text” name=”edresultado” />
21 </form>
22 </body>
23 </html>
Nas linhas 7 a 12, criamos uma função em JavaScript que calcula a área
do triângulo. Na linha 7, demonstramos o cabeçalho do formulário,
com o nome do método, calcular, que recebe como parâmetro um
objeto do tipo form (formulário). Essa técnica possibilita ao método
manipular os elementos do formulário, recuperando, assim, os valores
de cada componente, chamados idBase e idAltura (declarados nas linhas
16 e 17 do código). Possibilita ainda, atualizar o valor do componente
edResultado, declarado na linha 20.
Na linha 8, a instrução form.idbase.value acessa, do formulário chamado

frmcalcular e acessado pelo parâmetro “form”, o elemento chamado
idbase e seu valor, que foi preenchido pelo usuário. O método parseFloat
converte o valor para real para depois armazená-lo na variável base. A
linha 9 apresenta a instrução (var altura = parseFloat(form.idaltura.value)
de armazenamento do valor informado no elemento chamado idaltura,
do formulário frmcalcular. Este formulário, por sua vez, é acessado pelo
parâmetro form, na variável altura. Na linha 10, a instrução var area =
base * altura/2; calcula e armazena na variável area o resultado do cálculo.
Na linha 11, a instrução form.edresultado.value = area; faz com que o

resultado da variável area seja apresentado no elemento edresultado do
formulário.
O formulário é criado nas instruções das linhas 15 a 21, e na linha 18 o

evento onClick representa o momento em que o usuário clica no botão
calcular, chamando o método calcular, que passa como parâmetro o
formulário (this.form) com todos os elementos que o compõe para a
função calcular().
www.esab.edu.br 331
Nesta unidade, você pôde conhecer a estrutura de um programa em
JavaScript, as formas de declaração das variáveis e como integrar
os algoritmos e suas regras ao documento HTML. Neste primeiro
momento, os programas executados seguiram um processamento
sequencial. Entretanto, a linguagem JavaScript permite a execução do
processamento com comandos de tomada de decisão e laços de repetição,
que serão apresentados na próxima unidade.
www.esab.edu.br 332
Resumo
Nas unidades anteriores, estudamos e utilizamos a propriedade margin

e as sintaxes utilizadas para a sua definição. A propriedade margin é
um dos elementos que compõem um Box Model, que, por sua vez, são
elementos contidos na árvore do documento e apresentados segundo o
modelo de formatação visual.
O outro elemento do Box Model é o padding, responsável por formatar

o espaçamento entre o conteúdo e as bordas dos elementos HTML.
Em complemento ao processo de formatação do Box Model para

definição do layout de apresentação dos conteúdos nas páginas HTML,
você aprendeu a posicionar os elementos flutuando-os (float) ou fixando-
os nos documentos HTML. Você viu que esses dois recursos possibilitam
a construção dos layouts de sites sem o uso das tabelas (tableless),
agilizando o processo de manutenção do site e de validação das interfaces
gráficas que são criadas.
Além do posicionamento, a forma de apresentação dos dados na página

HTML pode ser estilizada por meio da propriedade display. Essa
propriedade é essencial para a construção de interfaces gráficas mais
modernas e atrativas, possibilitando a definição da forma de apresentação
dos dados, em linha ou em bloco.
O JavaScript é uma linguagem de programação que, inserida no

documento HTML, possibilita a criação e execução de funcionalidades,
como: validação de campos obrigatórios, cálculos matemáticos, rotinas
de entrada e saída de dados etc.. O uso dessa linguagem possibilita,
então, que as páginas web sejam mais dinâmicas. Podemos dizer que
JavaScript é uma extensão do HTML, uma vez que sua utilização se dá
na forma de rotinas, chamadas de linhas da página HTML.
www.esab.edu.br 333
Comandos de seleção e repetição
43 em JavaScript
Objetivo
Apresentar a sintaxe dos comandos de seleção (if e else) e repetição
(for e while) em JavaScript e como são inseridos nas páginas HTML.
Na unidade anterior, você conheceu a estrutura de um programa em

JavaScript, as formas de declaração das variáveis, como integrar os
algoritmos e suas regras ao documento HTML.
Nesta unidade, veremos as estruturas de controle que permitem

modificar o fluxo de execução de um programa em JavaScript. Essas
estruturas permitem executar o código a partir de condições lógicas ou de
um número determinado de repetições.
Manzano e Toledo (2008, p. 260) destacam: “[...] uma das mais

importantes ações realizadas por um programa é a capacidade de tomar
decisões com base em alguma condição. Sabe-se que só é possível tomar
uma decisão quando uma condição é imposta”.
Os comandos de decisão são representados pelos comandos if, if e else,

e switch(), que serão explicados a seguir. A forma mais simples para
que um programa tome uma decisão é por meio da instrução if (em
português, se), cuja finalidade é tomar uma decisão e efetuar um desvio
condicional, quando a condição é verdadeira, na execução dos processos.
A sintaxe do comando if é: if (condição) {instruções}.
As instruções associadas a um comando if são executadas somente se a

condição for verdadeira. A Figura 135 apresenta o fluxo das instruções de
um programa com uso do comando if:
www.esab.edu.br 334
Início
SE
condição Instrução 1
Instrução 2
Fim
Figura 135 – Comando if.

A “instrução 1” somente será executada se a condição do comando if

for verdadeira. Já a “instrução 2” será executada sempre, pois não está
associada a uma decisão.
No código 167, o programa em JavaScript faz a entrada de um

determinado valor, por meio da caixa de entrada de dados, chamada
“prompt”: caso esse valor seja par, a mensagem “número par” será
enviada para tela. Para a impressão da mensagem, será utilizada a
instrução document.write(). Esses dois comandos, prompt e document.
write (0, serão detalhados na próxima unidade. Por isso, neste momento,
o principal são suas funções de entrada e saída de dados, respectivamente.
Considera-se um número par aquele que dividido por 2 (dois) tem resto
zero (0). Por exemplo, 4 dividido por 2 tem resto 0.
Algoritmo 167 – Teste de números pares

01 <html>
02 <head>
04 <title>Unidade 43 - exemplo 1</title>
05 </head>
06 <body>
www.esab.edu.br 335
08 var numero = parseInt(prompt(“Entre com valor
qualquer:”));
09 var resto = numero % 2;
10 if(resto == 0){ /* se o resto for zero, entra no comando
IF */
11 document.write(“Número PAR”);
12 }
13 </script>
14 </body>
15 </html>
Fonte: Elaborado pelo autor(2013).
Observe que, na linha 8 do código, precisamos utilizar a função parseInt.

Essa função recebe um valor qualquer na forma de um literal cadastrado
por meio da função prompt, pois a variável declarada como número é do
tipo inteiro e o valor cadastrado é do tipo literal. Nessa linha, primeiro
é executada a função prompt, que solicita ao usuário um valor qualquer,
posteriormente esse valor é repassado à função parseInt. A função
parselnt, por sua vez, devolve o valor na forma de um valor inteiro.
Finalmente, o valor é armazenado na variável número.
Lembre-se de que a tag <script> informa ao navegador o que será

interpretado como comando html e o que deverá ser interpretado
como javascript. Lembre-se também que tudo que estiver entre
<script> e </script> será interpretado como javascript. O atributo
“language” especifica qual é a linguagem do script que será utilizada.
A tag <script> pode aparecer em qualquer lugar da página, inclusive
na área de cabeçalho <head> </head>. A diferença, neste caso, é que,
quando incluído na área de cabeçalho, o script será executado antes do
documento começar a ser exibido pelo navegador. Na sequência, porém
a sua execução segue o fluxo normal do documento, o comando HTML
ou JavaScript que for encontrado primeiro terá prioridade de execução.
No próximo código, criaremos um algoritmo que verificará se o número

informado pelo usuário é igual ao valor que será sorteado pelo programa.
Basicamente, o usuário informa um valor qualquer e o sistema gera
um número aleatório por meio de uma função específica da linguagem
JavaScript, chamada Math.random(). Se o valor sorteado for igual ao
www.esab.edu.br 336
valor informado pelo usuário, a mensagem “ACERTOU” será escrita
na página. A mensagem “FIM DO PROGRAMA” será escrita sempre,
pois não depende de nenhuma condição para ser executada; a mensagem
avisará ao usuário que o programa foi encerrado. Caberá ao comando de
decisão if verificar se o valor gerado pela função Math.random() é igual
ao valor informado pelo usuário.
Algoritmo 168 – Sorteio de números

01 <html>
02 <head>
05 </head>
06 <body>
08 var numero = parseInt(prompt(“Entre com valor qualquer
entre 1 e 10:”));
09 var sorte = Math.round((Math.random() * 9)+1);
10 if(sorte == numero){
11 document.write(“ ACERTOU “);
12 }
13 document.write(“FIM DO PROGRAMA”);
14 </script>
15 </body>
16 </html>
A função Math.random() gera um valor real entre 0 e o número ao

qual será multiplicado. Nesse algoritmo, o valor da função está sendo
multiplicado por 9, o que resultará em um valor qualquer entre 0 e 9. A
intenção é que o resultado fique entre 1 e 10, por isso é adicionado em 1,
gerando um valor entre 1 e 10. O resultado da função Math.random() é
um número real, ou seja, com casas decimais.
A função round() arredonda um valor real para mais ou para menos,

retirando as casas decimais. Por exemplo: se o valor for 1.9278, a função
round (1.9278) retornará o valor 2; se o valor for 1.33, o resultado será 1.
www.esab.edu.br 337
Na linha 9 do algoritmo, há um encadeamento de funções. A função
Math.round recebe como valor para arredondamento o resultado da
função Math.random(). Primeiro é executada a função Random(), só
depois é repassado o valor resultante para a função Round().
Por essa razão, o algoritmo utiliza a função random() para gerar o valor e
a função round() para convertê-lo para um inteiro, que será comparado
com o valor que o usuário informou.
Para decisões mais complexas, com mais de uma condição associada a

uma operação que será executada, devemos usar a instrução if...else. Essa
estrutura de decisão não permite que duas condições sejam verdadeiras
ao mesmo tempo, caso uma seja verdadeira a outra não será executada.
Note que o comando if é executado quando a condição for verdadeira.

Caso contrário, o programa segue seu fluxo sequencial. Porém, na
maioria dos casos, os testes a serem executados são bem mais complexos,
com várias condições a serem validadas, e para esses tipos de testes
devem-se utilizar as instruções if e else.
A figura a seguir apresenta o fluxo de instruções com o uso dos

comandos if e else.
Início
Falso SE Verdadeiro
Instrução 2 condição Instrução 1
Instrução 3
Fim
Figura 136 – Comando if e else.

www.esab.edu.br 338
A “instrução 1” será executada se a condição do comando if for
verdadeira. Se não, a “instrução 2” será executada. A “instrução 3”
é executada sempre, pois não está associada a uma decisão, sendo
executada após a “instrução 1” ou “instrução 2”.
No caso da condição if e else, os testes são exclusivos: se a condição

if é verdadeira, a condição else não é testada. A condição else só será
executada caso a condição do IF seja falsa. Importante: não existe else
sem if, mas pode existir if sem else.
A sintaxe do comando if e else é:
Algoritmo 169 – Sintaxe do comando if e else

01 if(condição) {
02 instruções do comando if;
03 }else{
04 instruções do comando else;
05 }
Para auxiliar na compreensão do comando if e else, vamos contextualizar

o seguinte problema: um sistema deve receber como dados de entrada
nome, sexo e altura de uma pessoa. O sistema deve mostrar na tela o
nome da pessoa informada, seu sexo e peso ideal. Como a condição de
sexo é exclusiva – ou seja, se for masculino será realizado um cálculo e se
for do sexo feminino, outro cálculo diferente –, utilizaremos a sintaxe do
if com else.
Para cálculo do peso ideal é utilizada a regra apresentada no quadro a

seguir:
Sexo Fórmula
Masculino (72,7*altura)-58.
Feminino (62,1*altura)-44,7.
Quadro 26 – Regra do peso ideal.

www.esab.edu.br 339
O código a seguir apresenta uma solução para esse problema.
Algoritmo 170 – Cálculo do peso ideal a partir do sexo informado

01 <html>
02 <head>
charset= ISO-8589-1”>
04 <title>Unidade 43 – exemplo 3</title>
05 </head>
06 <body>
07 <script>
08 /* Entrada do Nome*/
09 var nome = prompt(“Informe seu Nome:”);
10 /* Entrada da Altura como String e convertida para
Float*/
11 var altura = parseFloat(prompt(“Informe a sua Altura
em Metros:”));
12 /* Entrada do Sexo*/
13 var sexo = prompt(“Informe seu Sexo M ou F:”);
14 /* Variável que armazenará o resultado do cálculo*/
15 var pesoideal = 0;
16 /* Se sexo for masculino*/
17 if(sexo == ‘M’ || sexo == ‘m’){
18 pesoideal = (72.7*altura)-58;
19 }
20 else{ /* senão */
21 pesoideal = (62.1*altura)-44.7;
22 }
23 document.write(“Nome:” + nome + “<br>”);
24 document.write(“Sexo:” + sexo + “<br>”);
25 /* toFixed() define a quantidade de casas decimais */
26 document.write(“Peso Ideal:” + pesoideal.toFixed(2) +
“<br>”);
27 </script>
28 </body>
29 </html>
Observe que na linha 26 utilizamos a função toFixed(2). Isso porque

o peso ideal é um número real, ou seja, formado por uma parte inteira
e uma parte decimal. Como esse valor pode ser algo como 98.789
(resultado do cálculo), essa função formatará o número com duas casas
decimais, ficando 98.78. Caso o número seja exato, por exemplo 98, a
função toFixed(2) retornará o valor 98.00.
www.esab.edu.br 340
Nas linhas 9 a 13, são declaradas e preenchidas as variáveis do programa,
para armazenamento do nome, altura e sexo. A entrada de dados da
altura, o string, precisa ser convertida para o tipo real, por isso o uso da
função de conversão parseFloat(). Como o usuário pode informar a letra
M (maiúscula) ou m (minúscula) para representar o sexo, foi usado o
operador lógico ou, símbolo “||”, já que basta que uma das condições
seja verdadeira para que o comando if seja executado (instruções da
linha 18). Caso o sexo não seja masculino (diferente de M e diferente
de m), o bloco else será executado (instrução da linha 21). As instruções
das linhas 23 a 26 apresentam o resultado na página, com a utilização
da tab <br> para que seja quebrada a linha ao final de cada mensagem.
Cada mensagem foi gerada com a concatenação (combinação de texto e
variáveis) na estrutura mostrada na figura a seguir.
“Nome:” + nome + “<br>”

Texto Variável tag HTML
Figura 137 – Concatenação da mensagem.
Saiba mais
O JavaScript possui uma variedade de operadores,
incluindo operadores aritméticos, lógicos, bit a
bit, de atribuição e também alguns operadores
diversificados. Para conhecê-los, acesse a página
do Internet Explorer.
Em alguns casos, há um conjunto grande de condições que torna

os comandos if e else muito extensos e com uma legibilidade muito
complexa. Para esses casos, você pode usar o comando de decisão
sequencial, chamado switch.
No código a seguir, criamos um algoritmo que acessa a data do sistema

operacional (var hoje = new Date()), pega a o dia da semana da data
(hoje.getDay()) e mostra na tela o nome do dia da semana em português.
www.esab.edu.br 341
Algoritmo 171 – Dia da semana
01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 /* Data e Hora do Sistema Operacional */
09 var hoje = new Date();
10 /* Função que retorna o dia da Semana */
11 /* 0:Domingo 1:Segunda 2:Terça 3-Quarta 4-Quinta
5-Sexta 6-Sábado */
12 var mes = hoje.getDay();
13 switch(mes){
14 case 0:document.write(“Domingo”);break;
15 case 1:document.write(“Segunda-Feira”);break;
16 case 2:document.write(“Terça-Feira”);break;
17 case 3:document.write(“Quarta-Feira”);break;
18 case 4:document.write(“Quinta-Feira”);break;
19 case 5:document.write(“Sexta-Feira”);break;
20 case 6:document.write(“Sábado”);break;
21 }
22 </script>
23 </body>
24 </html>
O comando switch verifica qual condição – para o valor da variável

informada entre parentes, switch(mes) – é atendida. Assim que uma das
condições for atendida, a instrução switch se encerra na instrução break.
A Figura 138 representa o fluxo de execução quando o valor do mês

é o numeral 2. O comando switch compara o case 0, 1 e 2 e sairá do
comando, pois a condição do case valendo 2 foi atendida.
www.esab.edu.br 342
Início
case: 0 break
SWITCH case: 1 break
case: 2 break
case: 6 break
Figura 138 – Fluxo do comando switch.

Sintaxe do comando de laço
Nos exemplos anteriores, quando da execução dos programas, as instruções

são executadas uma única vez. Entretanto, na maioria das vezes as mesmas
instruções precisam ser executadas várias vezes. Para tanto, o JavaScript
disponibiliza comandos que realizam a repetição das instruções, que
podem ser laços condicionais (while) ou laços iterativos (for).
www.esab.edu.br 343
Sintaxe do comando de laço condicional em JavaScript
A figura a seguir apresenta a estrutura dos laços de repetição condicional,

while.
Início
Instrução 3 Instrução 1
Falso Verdadeira
while
(condição)
Fim Instrução 2
Figura 139 – Fluxo do comando while.

Enquanto a condição for verdadeira, as instruções 1 e 2 são executadas

até que a condição se torne falsa. Ao sair do laço, quando a condição for
falsa, a instrução 3 é executada e o programa se encerra. A sintaxe do
comando de laço condicional em JavaScript é:
Algoritmo 172 – Sintaxe do comando de laço condicional em JavaScript

01 while(codição){
02 comandos do bloco while;
03 }
Sintaxe do comando de laço iterativo em JavaScript
Os laços exatos – diferentemente dos laços condicionais while, que

executam a repetição até que a condição se torne falsa – executam uma
repetição com número de repetições conhecidas, exatas. A Figura 140
apresenta a estrutura dos laços de repetição iterativos for:
www.esab.edu.br 344
Início
Instrução 3 Instrução 1
Falsa Verdadeira
para X
de 1 a 10
Instrução 2
Fim
Incrementa X
Figura 140 – Fluxo do comando for.

As instruções 1 e 2 são executadas várias vezes até que o valor de X

alcance o valor 10, começando em 1. Cada vez que o laço é executado,
o valor de X é incrementado em 1. Um laço for pode ser incremental
(passa do menor valor para o maior valor) ou decremental (passa do
maior valor para o menor valor).
A sintaxe do comando de laço iterativo em Javascript é apresentada a

seguir.
Algoritmo 173 – Sintaxe do comando de laço iterativo em JavaScript

01 for(var incio;condição;passo){
02 comandos do bloco for;
03 }
Estudo complementar
Para saber um pouco mais sobre os comandos de
laço da linguagem de programação JavaScript,
acesse o site Expert.Net.
www.esab.edu.br 345
Nesta unidade, você pôde conhecer a estrutura dos comandos de entrada,
saída, laços condicionais simples e complexos, bem como os comandos
de repetição condicional e iterativo. Esses comandos possibilitam criar
rotinas que tornam as páginas HTML mais dinâmicas e interativas.
Na próxima unidade, daremos sequência aos estudos da linguagem

sintaxe, com ênfase nos comandos de entrada e saída que utilizam caixas
de diálogo e a integração com os comandos de laço.
www.esab.edu.br 346
Como criar caixas de diálogo em
44 JavaScript
Objetivo
Apresentar a sintaxe dos comandos alert, prompt e confirm em
JavaScript e como utilizá-los nas páginas HTML.
Na unidade anterior, você conheceu a estrutura dos comandos de

entrada, saída, laços condicionais simples e complexos, bem como os
comandos de repetição condicional e iterativo. Você aprendeu que esses
comandos permitem a criação de rotinas que tornam as páginas HTML
mais dinâmicas e interativas.
Nesta unidade, estudaremos as caixas de diálogo de mecanismos de

integração do usuário com a página, em processos de entrada e saída de
dados. As caixas de diálogo disponibilizadas pela linguagem JavaScript
são: alert, prompt e confirm.
Caixas de diálogo prompt
O comando prompt possui a seguinte sintaxe: prompt(label, valor). O

parâmetro label se refere a um texto que será apresentado ao usuário,
como forma de identificar a finalidade da caixa de diálogo. Por exemplo,
caso a caixa tenha como finalidade receber o nome de uma cidade natal,
uma boa prática é especificar na mensagem do label algo como “Informe
a sua Cidade Natal:”.
O parâmetro valor é opcional e representa o valor inicial que aparecerá

na caixa de diálogo quando for apresentado ao usuário.
O código a seguir apresenta um caixa de diálogo prompt com o label

“Qual a sua cidade” e o valor inicial “Florianópolis”, acompanhe:
www.esab.edu.br 347
Algoritmo 174 – Caixa de diálogo prompt
01 <html>
02 <head>
04 <title>Unidade 44- exemplo 1</title>
05 </head>
06 <body>
07 <script>
08 var suacidade = prompt(“Qual sua cidade:,
“Florianópolis”);
09 document.write(“Sua cidade é:” + suacidade);
10 </script>
11 </body>
12 </html>
A figura a seguir apresenta o resultado da execução do programa.
Figura 141 – Caixa de diálogo prompt.

Caixas de diálogo alert
O comando alert mostra uma caixa com uma mensagem seguida do

botão de OK. Sua sintaxe é: alert (mensagem).
O código a seguir apresenta um caixa de diálogo alert com a mensagem

“ISTO É UM ALERT”.
www.esab.edu.br 348
Algoritmo 175 – Caixa de diálogo alert
01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 alert(“ISTO É UM ALERT”);
09 </script>
10 </body>
11 </html>
Figura 142 – Caixa de diálogo alert.

Fonte: Elaborada pelo autor(2013).
Caixas de diálogo confirm
A caixa de diálogo confirm mostra uma caixa de diálogo com a mensagem

passada como parâmetro, com os botões de OK e Cancelar, retornando
um valor verdadeiro, se o usuário escolher ou clicar na opção OK.
O código a seguir apresenta uma caixa de diálogo confirm com a

mensagem “Deseja Sair do Programa?”.
www.esab.edu.br 349
Algoritmo 176 – Caixa de diálogo confirm
01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 var escolha = confirm(“Deseja sair do Programa?”);
09 </script>
10 </body>
11 </html>
Figura 143 – Caixa de diálogo confirm.

Uso das caixas de diálogos
Para auxiliar na compreensão do uso das caixas de diálogo, vamos pensar

no seguinte problema: um sistema deve receber como dados de entrada
o nome e o sexo de várias pessoas. Para encerrar o cadastro de pessoas, o
usuário deve informar que deseja encerrar o programa. O sistema deve
mostrar na tela a quantidade de homens e mulheres informada.
www.esab.edu.br 350
Algoritmo 177 – Cadastro de pessoas
01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 var continua = true;
09 var masc = 0; /* total de homens */
10 var fem = 0; /* total de mulheres */
11 while(continua){ // enquanto continua vale TRUE o laço
se repete
12 var nome = prompt(“Informe seu Nome:”,””);
13 var sexo = prompt(“Informe o Sexo M ou F:”,”M”);
14 if(sexo == ‘M’ || sexo ==’m’){
15 masc = masc + 1; /* incrementa total de homens */
16 }
17 else{
18 fem = fem +1; /* incrementa total de mulheres */
19 }
20 continua = confirm(“Continuar o Cadastro?”);
21 }
22 alert(“Total de Homens:” + masc + “ Total de Mulheres:”
+ fem);
23 document.write(“Final do Programa”);
24 </script>
25 </body>
26 </html>
O algoritmo repete o laço até que o usuário clique no botão Cancelar,

na caixa de diálogo confirm, com a mensagem “Continuar o Cadastro?”,
que armazenará na variável continua o valor false. Caso o valor da
variável sexo seja “M” ou “m”, o contador de homens, a variável “masc”
é incrementada em 1, caso contrário, a variável “fem” é incrementada
em 1. Ao encerrar o laço, o programa mostra a quantidade informada
de homens e mulheres. Ou seja, a regra do algoritmo pode ser resumida
como: o laço se repetirá até que o usuário responda à pergunta
“Continuar o Cadastro?” clicando no botão “cancelar”. Cada vez que
o laço é executado, o usuário informa o seu nome e o sexo. Caso o
sexo informado seja “M” ou “m”, a variável numérica “masc” será
incrementada em um (somada em 1), caso contrário, a variável numérica
www.esab.edu.br 351
“fem” será incrementada em 1. Ao final do programa, a variável “masc”
contém a quantidade de homens cadastrados e a variável “fem”, a
quantidade de mulheres cadastradas.
No código a seguir, vamos mostrar a soma de todos os valores entre dois

números informados pelo usuário. Acompanhe.
Algoritmo 178 – Somatório de números

01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 var soma = 0;
09 var primeiro = parseInt(prompt(“Informe o Valor
Inicial:”));
10 var ultimo = parseInt(prompt(“Informe o Valor
Final:”));
11 for (var i= primeiro; i<=ultimo;i=i+1){
12 soma = soma + i;
13 /* Imprimir na tela o valor da variável I e da soma a
cada passo do laço*/
14 document.write(“Valor de I: “+ i + “ valor da soma: “
+ soma);
15 }
16 alert(“Total:” + soma);
18 </script>
19 </body>
20 </html>
O programa receberá dois valores inteiros, informados por meio da caixa

de diálogo prompt, que retorna um valor string (literal), que é convertido
para inteiro por meio da função parseInt(). O laço iterativo é controlado
pela variável i, que inicia com o primeiro valor informado pelo usuário
e termina no último valor informado pelo usuário, pulando de 1 em
1 (i=i+1). Após encerrar o laço, o programa mostrará o resultado da
soma dos valores entre o primeiro e último valor informado, gerado na
instrução: soma = soma+1.
www.esab.edu.br 352
No código a seguir, a finalidade é mostrar os números pares entre 0 e 10.
Algoritmo 179 – Números pares

01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 for (var i= 0; i<=10;i=i+2){
09 alert(“i vale:” + i);
10 }
12 </script>
13 </body>
14 </html>
Note que o comando de laço for inicia com a variável “I”, começando
em 0 até chegar ao valor 10, incrementado de 2 em 2 (i = i + 2). Dessa
forma, “I” valerá: 0, 2, 4 , 6, 8, e 10, que são mostrados pela caixa de
diálogo alert.
O fatorial de um número natural n (maior ou igual a zero), representado

por n!, é o produto de todos os inteiros positivos menores ou iguais a n.
Por exemplo, o fatorial de 5 é 5 × 4 × 3 × 2 × 1 = 120. O código a seguir
cria um algoritmo para calcular o fatorial do número informado pelo
usuário.
Algoritmo 180 – Cálculo do fatorial

01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 /* valor a ser fatorado */
www.esab.edu.br 353
09 var num = parseInt(prompt(“Informe um Valor Inteiro
Qualquer:”));
10 /* valor inicial do fatorial */
11 var fat = 1;
12 for (var i=num;i>=1;i=i-1){
13 fat = fat * i;
14 }
15 /* resultado do fatorial */
16 alert(“Fatorial de “ + num + “ é:” +fat);
18 </script>
19 </body>
20 </html>
Nesta unidade, você pôde estudar a sintaxe dos comandos que criam as
caixas de diálogo da linguagem JavaScript, e integrá-las aos comandos
de repetição while e for. Na próxima unidade, estudaremos com maior
propriedade a instrução document.write(), que já foi utilizada nos
programas para imprimir um texto em páginas HTML.
www.esab.edu.br 354
Como criar mensagens na página
45 HTML em JavaScript
Objetivo
Apresentar a sintaxe de utilização do objeto document do JavaScript e
como escrever e mudar a cor do texto que será apresentado na página
HTML.
Na unidade anterior, você pôde estudar a sintaxe dos comandos que

criam as caixas de diálogo da linguagem JavaScript, e integrá-las aos
comandos de repetição while e for. Nesta unidade, estudaremos com
maior propriedade a instrução document.write(). Vamos lá?
O arquivo HTML que aparece na janela do navegador é tratado pela

linguagem JavaScript como um documento. Esse arquivo é representado
pelo objeto, ou seja, pelo tipo de dado que encapsula propriedades e
ações document.
Cada objeto JavaScript possui um conjunto de métodos ou funções. Para

o objeto document, há o método “escrever”, representado pela instrução
write(), que pode imprimir no documento HTML uma mensagem,
o resultado de uma variável ou até mesmo comandos em HTML. As
mensagens escritas por intermédio desse método aparecerão na posição
do documento HTML em que o comando for inserido.
A sintaxe básica do comando document.write() é: document.

write(mensagem), na qual a mensagem é um literal, isto é, um conjunto
de caracteres ou o nome de uma variável.
No código do Algoritmo 188, que solicita ao usuário o nome da

disciplina e suas três notas, a finalidade da instrução document.write()
é mostrar o resultado da variável média, formatado para duas casas
decimais. Acompanhe:
www.esab.edu.br 355
Algoritmo 181 – Cálculo da média
01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 var disciplina = prompt(“Nome da
Disciplina:”,”Ambientes WEB”);
09 var nota1 = parseFloat(prompt(“Primeira Nota:”));
10 var nota2 = parseFloat(prompt(“Segunda Nota:”));
11 var nota3 = parseFloat(prompt(“Terceira Nota:”));
12 media = (nota1 + nota2 + nota3)/3;
13 document.write(media.toFixed(2));
14 </script>
15 </body>
16 </html>
O comando document.write() pode ser utilizado para enviar comandos

em HTML para a página. Por exemplo, o código a seguir complementa
o algoritmo anterior, porém inserimos a opção de mostrar o texto em
vermelho (caso a média do aluno seja menor que 7) ou em azul (caso a
média seja maior ou igual a 7). Para formatação do texto foi utilizada a
tag HTML font color.
Algoritmo 182 – Texto formatado

01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 var disciplina = prompt(“Nome da
Disciplina:”,”Ambientes WEB”);
09 var nota1 = parseFloat(prompt(“Primeira Nota:”));
10 var nota2 = parseFloat(prompt(“Segunda Nota:”));
11 var nota3 = parseFloat(prompt(“Terceira Nota:”));
12 media = (nota1 + nota2 + nota3)/3;
www.esab.edu.br 356
13 if(media < 7){
14 document.write(“<font color = ‘red’>”);
16 document.write(“</font>”);
17 }
18 else{
19 document.write(“<font color = ‘blue’>”);
21 document.write(“</font”);
22 }
23 </script>
24 </body>
25 </html>
Note que, na linha 14, o comando document.write() envia uma

mensagem para o navegador. Essa mensagem é uma tag que define a
cor da fonte em vermelho. Para o navegador, o que será carregado é a
tag <font color=’red’>; o comando document.write() é apenas o modo
pelo qual a instrução HTML foi enviada para a página. A principal
vantagem desta técnica é informar os comandos HTML no momento
que o documento é carregado, possibilitando que as páginas sejam mais
dinâmicas, gerando layouts diferentes de acordo com as regras de quando
um comando será ou não enviado para a página.
O comando document.write() pode ser utilizado para criar elementos

HTML (como no próximo exemplo que monta um elemento <table>)
com o resultado da tabuada de 10 do valor informado pelo usuário.
Algoritmo 183 – Tabela formatada

01 <html>
02 <head>
05 </head>
06 <body>
07 <table border=1>
08 <script>
09 var num = parseInt(prompt(“Informe um número:”));
10 var res = 0;
11 for(var i=1;i<=10;i=i+1){
www.esab.edu.br 357
12 res = num * i;
13 document.write(“<TR><TD>”);
14 document.write(num+”*”+i+”=”+res);
15 document.write(“</TD></TR>”);
16 }
17 </script>
18 </table>
19 </body>
20 </html>
O programa executa a multiplicação do valor informado pelo usuário

pelos valores de i (que varia de 1 a 10) e os armazena na variável res
(declarada na linha 10 do código e utilizada na linha 12), quando esta
recebe o resultado da multiplicação da variável num vezes a variável i. O
comando document.write() escreve as marcações HTML para definição
da linha da tabela <TR> e coluna <TD> cada vez que passa no laço
iterativo for. Note que, na linha 7, em HTML, definimos o início da
tabela, e na linha 18, o fechamento da tabela. Porém, os itens TR e TD,
o corpo da tabela, são gerados dinamicamente no laço for, com uso do
comando document.write().
A figura a seguir mostra o resultado da execução do programa, caso o

usuário informe o valor 7 para execução da tabuada.
Figura 144 – Tabuada e tabela HTML.

www.esab.edu.br 358
O código a seguir apresenta uma mensagem no documento HTML de
acordo com a hora atual. A função data = new Date(), linha 8, retorna à
data e hora do sistema operacional, no momento em que a instrução foi
executada, e o método getHours() retorna à hora em um valor entre 0 e
23. O comando document.write() escreve um texto no documento em
negrito <b> e formato de título <h1>, de acordo com essa hora.
Algoritmo 184 – Mensagem de bem-vindo

01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 var data=new Date(); /* Data e Hora Atual*/
09 hora=data.getHours(); /* Hora */
10 if (hora <12){
11 document.write(“<b><h1> Bom dia </b></h1> <br>”);
12 }
13 else{
14 if (hora <18){
15 document.write(“<b><h1> boa tarde </b></h1>”);
16 }
17 else{
18 document.write(“<b><h1> boa noite </b></h1>”);
19 }
20 }
21 </script>
22 </body>
23 </html>
A instrução verifica o valor da variável hora: se for menor que 12, será
escrita a mensagem “Bom dia”, em negrito e no formato título 1; caso
contrário, um novo teste será feito e se o valor for menor que 18, a
mensagem “boa tarde” será escrita; a última opção será “boa noite”, pois
o valor da hora é maior que 18.
www.esab.edu.br 359
Nesta unidade, você pôde conhecer a sintaxe do comando document.
write() e as suas formas de utilização, que lhe permitem desenvolver um
layout dinâmico para as páginas, com tags HTML que podem ser escritas
de acordo com condições que são testadas.
Na próxima unidade, você poderá praticar o uso da linguagem

JavaScript, para criação de páginas com mensagens escritas em JavaScript,
e a abertura de janelas de alert, confirm e prompt.
www.esab.edu.br 360
Criando uma página HTML que
46 utilize comandos em JavaScript
Objetivo
com mensagens escritas em JavaScript e a abertura de janelas de
alert. confirm e prompt.
Na unidade anterior, você pôde conhecer a sintaxe do comando

document.write() e as suas formas de utilização, que permitirão a você
desenvolver um layout dinâmico para as páginas, com tags HTML que
podem ser escritas de acordo com condições que são testadas.
Nesta unidade, vamos desenvolver três programas utilizando a linguagem

JavaScript para reforçar os conteúdos estudados nas unidades anteriores.
No primeiro exercício, será desenvolvido um programa para converter

uma temperatura em grau Celsius para Fahrenheit, e vice-versa. O usuário
informará a temperatura e o tipo de conversão que deseja executar. No
final, o programa mostrará o valor de entrada e o resultado da conversão. A
entrada de dados será realizada por meio do comando prompt e a saída de
dados por meio da instrução alert. Para desenvolver esse exercício, escolha
o editor de sua preferência e escreva o seguinte código:
Algoritmo 185 – Conversor de temperatura

01 <html>
02 <head>
04 <title>Unidade 46 - Exercício 1</title>
05 </head>
06 <body>
07 <script>
08 /* tipo de conversão */
09 var opcao = prompt(“ Tecle C - Converter para
Celsius\nTecle F para Converter para Fahrenheit”);
10 /* temperatura a ser convertida */
11 var temp = 0;
www.esab.edu.br 361
12 /* resultado da conversão */
13 var res = 0;
14 var mensagem=””;
15 if(opcao ==’C’ | opcao == ‘c’) { //converte de
Fahrenheit para Celsius
16 temp = parseFloat(prompt(“Informe a Temperatura em
graus Fahrenheit:”));
17 res= (temp - 32)/1.8;
18 mensagem = res.toFixed(2) + “ graus Celsius = “ +
temp.toFixed(2) + “ graus Fahrenheit.”;
19 }
20 else{//converte de Celsius para Fahrenheit
21 temp = parseFloat(prompt(“Informe a Temperatura em
graus Celsius:”));
22 res = temp * 1.8 + 32;
23 mensagem = res.toFixed(2) + “ graus Fahrenheit = “ +
temp.toFixed(2) + “ graus Celsius.”;
24 }
25 alert(mensagem); //Mostra o resultado final da
conversão
26 </script>
27 </body>
28 </html>
Salve o arquivo com a extensão “.html” e execute-o no navegador de sua

preferência.
No próximo exercício, o usuário deverá informar sua altura e peso, e

o programa deverá calcular o seu índice de massa corporal, conhecido
como IMC. O programa também vai mostrar, na tela, a condição desse
índice com base no quadro a seguir.
Índice Situação
Abaixo de 18,5 Abaixo do peso
Entre 18,5 e 25 Peso normal
Entre 25 e 30 Acima do peso
Acima de 30 Obeso
Quadro 27 – Índices IMC.

www.esab.edu.br 362
Como há quatro condições a serem testadas no programa para definir a
situação do índice IMC, o algoritmo utilizará os comando if e else para
definir qual mensagem será apresentada ao usuário, de acordo com o
quadro acima. A fórmula para cálculo do IMC é: peso dividido pela
altura ao quadrado (IMC = peso / altura2).
Algoritmo 186 – Cálculo do IMC

01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 var peso = parseFloat(prompt(“Informe o seu Peso
em Quilos:”));
09 var altura = parseFloat(prompt(“Informe a sua Altura
em Metros:”));
10 var imc=0;
11 var mensagem=””;
12 imc = peso / (altura * altura);
13 if(imc < 18.5){
14 mensagem = “Abaixo do Peso.”;
15 }
16 else{
17 if(imc < 25){
18 mensagem = “Peso Normal.”;
19 }
20 else{
21 if(imc<30){
22 mensagem = “Acima do Peso.”;
23 }
24 else{
25 mensagem = “Obeso.”;
26 }
27 }
28 }
29 alert(mensagem);
30 </script>
31 </body>
32 </html>
www.esab.edu.br 363
Salve o arquivo com a extensão “. html” e execute-o no navegador de sua
preferência.
Para a resolução do próximo exercício, imagine o seguinte problema:

uma empresa fez uma pesquisa de satisfação com seus clientes
perguntando a opinião deles em relação à qualidade dos serviços.
Quando questionado, o cliente tinha como opção de respostas: A
(ótimo), B (muito bom), C (regular), D (ruim) e E (péssimo). O
programa deve cadastrar as respostas efetuadas pelos clientes e mostrar o
resultado da pesquisa com a quantidade de respostas para cada uma das
opções de resposta.
O código a seguir apresenta a solução para o problema.
Algoritmo 187 – Pesquisa de satisfação

01 <html>
02 <head>
05 </head>
06 <body>
07 <script>
08 var totala=0;
09 var totalb=0;
10 var totalc=0;
11 var totald=0;
12 var totale=0;
13 var continua = true;
14 var mensagem = “”;
15 var opcao =””;
16 while(continua){
17 opcao = prompt(“Qual a sua opinião dos nossos
serviços:\n” +
18 “A-Ótimo\nB-Bom\nC-Regular\nD-Ruim\nE-Péssimo”);
19 opcao = opcao.toUpperCase();
20 switch(opcao){
21 case “A”:totala=totala+1;break;
22 case “B”:totalb=totalb+1;break;
23 case “C”:totalc=totalc+1;break;
24 case “D”:totald=totald+1;break;
25 case “E”:totale=totale+1;break;
26 }
www.esab.edu.br 364
27 continua = confirm(“Cadastrar mais um cliente?”);
28 }
29 mensagem = “Resultado:”+
30 “\nÓtimo:”+totala +
31 “\nBom:”+totalb +
32 “\nRegular:”+totalc +
33 “\nRuim:”+totald +
34 “\nPéssimo:”+totale;
35 alert(mensagem);
36 </script>
37 </body>
38 </html>
Para armazenar a quantidade de respostas para cada opção, foram criadas

as variáveis totala, totalb, totalc, totald e totale. As variáveis são iniciadas
com valor 0. A variável contínua serve para controlar quantas vezes o
laço será executado. A cada passo, a variável solicita ao usuário, por
meio do comando prompt, a opção que ele escolhe (A, B, C, D ou E). A
instrução opcao = opcao.toUpperCase() tem como finalidade guardar,
na variável opção, o valor que o usuário informou, convertido para
maiúsculo. O comando toUpperCase() converte um valor literal (string)
para maiúsculo. A variável opção recebe o valor dela mesma, mas
convertido para maiúsculo.
Na instrução switch(opcao), é verificado qual a opção que o usuário do

programa escolheu. Em caso de condição case verdadeira, o contador de
cada opção é incrementado em 1.
Na instrução contínua = confirm(“Cadastrar mais um cliente?”) a

caixa de diálogo que se abre pergunta ao usuário se ele deseja ou não
continuar. Caso o usuário clique no botão “OK”, a variável contínua
recebe o valor true, caso contrário, armazenará o valor false.
As instruções das linhas 29 a 34 servem para armazenar, na variável

mensagem, os valores de cada variável “contador de cada opção” (totala,
totalb, totalc, totald e totale). Esses valores, guardados nas variáveis totala,
totalb, totalc, totald e totale serão apresentados na caixa de diálogo alert.
www.esab.edu.br 365
Salve o arquivo com a extensão “. html” e execute-o no navegador de sua
preferência.
Nesta unidade, você pôde praticar os comandos na linguagem JavaScript.

Na próxima unidade, apresentaremos a sintaxe de utilização do objeto
window, que possibilita abrir novas janelas no projeto web.
www.esab.edu.br 366
47 Como criar janelas em JavaScript
Objetivo
Apresentar a sintaxe de utilização do objeto window do JavaScript e
como abrir novas janelas no projeto web.
Na unidade anterior, você pôde praticar os comandos na linguagem

JavaScript. Nesta unidade, você aprenderá a usar o JavaScript para abrir,
fechar e escrever na janela.
Para abrir uma janela em JavaScript, usamos o comando window.open().

A sintaxe geral desse comando é window.open (“url”, “título”, “opções”),
na qual: url é o endereço de internet da janela que será aberta; o título
é o nome que aparecerá no topo da janela; e opções são as propriedades
que definem as características dessa janela.
As opções para abertura da janela são apresentadas no quadro a seguir.
Propriedade Finalidade Parâmetros

Abre uma janela com opções de voltar (back) e avançar
Toolbar yes ou no
(forward).
Location Abre uma janela com a opção de localização. yes ou no
Abre uma janela com as barras de rolamento vertical e
Scrollbars yes ou no
horizontal.
Menubar Abre uma janela com a barra de menu. yes ou no
Resizable Permite ao usuário redimensionar a janela. yes ou no
Width Especifica a largura da janela, em pixels.
Height Especifica a altura da janela, em pixels.
Quadro 28 – Opções de abertura da janela.

www.esab.edu.br 367
As opções são informadas separadas por vírgulas e sem espaços em
branco entre elas.
Para testar as opções de abertura de janela em JavaScript, a página terá

um único botão que, ao ser clicado, abrirá a janela com as configurações
que foram realizadas. A figura a seguir apresenta o layout da página que
será criada.
Figura 145 – Página de teste com abertura de janelas.

O código que cria essa página é apresentado a seguir.
Algoritmo 188 – Página de teste com abertura de janelas

01 <html>
02 <head>
03 <title>Unidade 47 - Exemplo 1</title>
04 </head>
05 <body>
06 <input type=”button” value=”Abrir Janela””/>
07 </body>
08 </html>
www.esab.edu.br 368
O código do Algoritmo 189 cria uma função em JavaScript para abrir
uma janela que recebe como parâmetro a url, o título da janela, as
propriedades e o conteúdo da página, de forma que seja possível criar
tipos variados de janelas com a mesma função.
Algoritmo 189 – Função para abrir janela

01 function abrirJanela(url,titulo,propriedades,conteudo){
02 nova = window.open(url,titulo,propriedades) ;
03 nova.document.open();
04 if(conteudo != null) nova.document.write(conteudo);
05 nova.document.close();
06 }
Na linha 3, a instrução nova.document.open() abrirá uma nova janela com:
• o endereço da página utilizando o parâmetro URL;

• título passado para o parâmetro chamado título;
• as propriedades definidas no parâmetro nomeado propriedade.
Essa estrutura da nova janela foi definida na linha 2, por meio do
comando window.open(). Na linha 4, a instrução verifica se o conteúdo
passado como parâmetro não está vazio, para que ele seja apresentado
no corpo da nova janela. Por fim, a linha 5 habilita a opção fechar para a
nova janela.
O comando window.open() abre uma nova janela com o título e

propriedades passadas como parâmetro e armazena, na variável nova,
essa janela. O comando document.write() escreve, na nova página, o
conteúdo que é passado como parâmetro na função.
Por exemplo, para criar uma janela sem url, título ‘Exemplo 1’,
com largura de 800 pixels, altura de 600 pixels, sem conteúdo, a
função será chamada da seguinte forma: abrirJanela(‘ ’,’Exemplo
1’,’width=800,height=600’,’ ’). Note que os valores dos parâmetros
são passados entre aspas simples (‘), por serem do tipo literal. As
propriedades da janela são informadas separadas por vírgula, sem espaços
em branco (‘width=800,height=600’).
www.esab.edu.br 369
O conteúdo só será escrito na página caso ele seja diferente de vazio, por
isso a condição conteudo != null.
A figura a seguir apresenta o layout da nova janela que será aberta quando
o usuário clicar no botão Nova Janela da página.
Figura 146 – Abrindo janela com JavaScript.

Na página HTML, será associada ao evento “onClick” (quando o usuário

clica no botão) a chamada da função com os parâmetros de definição
da página. A Figura 147 apresenta o código completo da página, com a
declaração da função em JavaScript e a associação no evento do botão.
Figura 147 – Declaração e uso da função.

www.esab.edu.br 370
O código do Algoritmo 190 apresenta a instrução para que a página seja
aberta com as propriedades location e scrollbars habilitadas, o conteúdo
da nova janela em azul com a mensagem “Texto da Nova Janela” e o
título da janela valendo “Unidade 47 – Exemplo 2”.
Algoritmo 190 – Página com nova janela com texto em azul

01 </html>
02 <html>
03 <head>
04 <title>Unidade 47 - Exemplo 2</title>
06 function
abrirJanela(url,titulo,propriedades,conteudo){
07 nova = window.open(url,titulo,propriedades) ;
08 nova.document.open();
09 if(conteudo != null) nova.document.write(conteudo);
10 nova.document.close();
11 }
12 </script>
13 </head>
14 <body>
15 <input type=”button” value=”Abrir Janela”
16 onclick=”abrirJanela(‘ ‘,’Unidade 47 - Exemplo
2’,’location=yes,scrollbars=yes’,
17 ‘<font color = blue> Texto da Nova Janela </font>’);”
18 />
19 </body>
20 </html>
É importante destacar que toda regra de negócio da aplicação está na

chamada da função abrirJanela() nas linhas 16 e 17, em que são passados
os parâmetros da url vazia (‘ ‘), o título da nova janela (‘Unidade 47 -
Exemplo 2’), as propriedades da janela (‘location=yes,scrollbars=yes’) e as
tags em HTML que mudam a fonte do texto da nova janela para a cor
azul (<font color = blue> Texto da Nova Janela </font>’).
Como o conteúdo não é vazio, na linha 9, a instrução “if(conteudo !=

null) nova.document.write(conteudo)” será executada escrevendo, no
documento da nova página, o texto formatado pelas tags informadas no
parâmetro conteúdo.
www.esab.edu.br 371
Como não foi alterada a propriedade width e height da nova janela, esta
será aberta ocupando toda a área do navegador, escondendo a página
que contém o botão com o título “Abrir Janela”. Entretanto, quando essa
janela for fechada, o navegador voltará para a página com esse botão.
Nos exemplos anteriores, para fechar a nova janela que foi aberta, o
usuário precisava clicar no botão de fechamento da janela, aquele no
topo, lado direito da janela, na forma de um “x”. Mas isso pode ser
melhorado, criando uma função que fecha a janela, chamando-a em um
botão. Dessa forma, a janela poderá ser fechada pela opção padrão da
janela e por meio do botão que será criado, como é mostrado no código
da figura a seguir.
Figura 148 – Método para abrir e fechar a janela.

A figura a seguir apresenta o resultado da execução do código anterior, e,

caso o usuário clique no botão fechar, a janela será fechada.
www.esab.edu.br 372
Figura 149 – Janela com botão fechar.
Nesta unidade, você pôde estudar a sintaxe e uso dos comandos window.
open() e window.close(), os quais permitem abrir e fechar janelas,
respectivamente. Saiba que a janela é um elemento de interação com o
usuário muito importante em um projeto web e deve ser utilizado com
cuidado para não afetar a usabilidade e o acesso aos dados. Com isso,
você já pode criar janelas dinâmicas que escrevem o conteúdo em tempo
de execução, dependendo da ação que foi executada na página.
Na próxima unidade, vamos construir um formulário HTML e criar

rotinas em JavaScript para validação dos dados, uma necessidade
constante nos sites atuais.
Tarefa dissertativa
www.esab.edu.br 373
Criando um formulário HTML com
48 validação de campos em JavaScript
Objetivo
com um formulário de cadastro com rotinas em JavaScript para
validação dos campos informados.
Na unidade anterior, você pôde estudar a sintaxe e uso dos comandos

window.open() e window.close(), os quais permitem abrir e fechar
janelas, respectivamente.
Nesta última unidade, você poderá construir um formulário HTML

com a validação dos campos de cadastro. Essa função é muito comum
na programação JavaScript porque evita o direcionamento do usuário
para uma página com a apresentação de mensagens de erro. Isso porque a
validação será realizada via navegador, ou seja, o resultado da validação é
exibido em uma janela de alerta.
A figura a seguir apresenta o layout da página com o formulário de

cadastro que será criada e validada.
Figura 150 – Formulário de cadastro.

www.esab.edu.br 374
Quando o usuário clicar no botão “cadastrar”, o formulário será
validado por meio da função validar, que criaremos logo em seguida.
Se não houver problemas na validação, ele será enviado com sucesso.
Caso contrário, uma mensagem de alerta será apresentada ao usuário,
indicando os erros. Para que isso seja possível, o formulário terá seu
evento onsubmit (quando o botão de submit é clicado) associado à
função validar.
O código do Algoritmo 191 apresenta as instruções em HTML

que criam o formulário. Note que na linha 7 (sete) definimos que o
formulário terá o evento “onsubmit”, recebendo assim o retorno da
função validar(this), na qual a cláusula “this” representa justamente o
formulário. Acompanhe:
Algoritmo 191 – Formulário de cadastro

01 <html>
02 <head>
04 <title> Unidade 48 - Validação</title>
05 </head>
06 <body>
07 <form onsubmit=”return validar(this);”>
08 Nome: <input type=”text” name=”nome”><br><br>
09 E-mail: <input type=”text” name=”email”><br><br>
10 Idade: <input type=”text” name=”idade” maxlength=”2”
size=”2”><br><br>
11 Senha: <input type=”password” name=”senha”> (Mínimo: 8
caracteres)<br><br>
12 Confirmação de Senha: <input type=”password”
name=”confsenha”><br><br>
13 <input type=”submit” value=”Cadastrar”>
14 <input type=”reset” value=”Limpar”>
15 </form>
16 </body>
17 </html>
O evento submit() é executado quando o usuário clica no botão enviar.

O papel desta função é carregar todos os dados do formulário e enviá-
lo para outra página HTML ou programa que fará o processamento
dos dados. No Algoritmo 191, antes de enviar o formulário, a função
www.esab.edu.br 375
verificará se todos os campos foram corretamente preenchidos, caso isto
seja verdadeiro, os dados do formulário serão enviados. Caso contrário,
serão informadas quais informações precisam ser editadas corretamente.
A função validar() recebe como parâmetro o formulário e sua estrutura

básica é apresentada no código a seguir.
Algoritmo 192 – Função de validação

01 <script>
02 function validar(form) {
03 //instruções
04 }
05 </script>
Esse método acessará cada elemento HTML do formulário (form),

passado como parâmetro, verificando se as regras foram contempladas.
O quadro a seguir apresenta o componente do documento HTML e as

regras que serão validadas.
Elemento Regra
Nome Deve ser preenchido.
“Deve ser preenchido e conter um símbolo de @ e pelo menos um
E-mail
ponto “.”. Exemplo: teste@email.br.
Idade Deve ser preenchida e deve conter apenas números.
Senha Deve ser preenchida e conter 8 símbolos.
Confirmação de
Deve ser preenchida de maneira igual ao elemento senha.
Senha
Quadro 29 – Regras de validação.

A primeira validação que será criada verifica se os campos foram

preenchidos. Para tanto e primeiramente, na instrução em JavaScript,
vamos pegar cada elemento do formulário, usando a instrução form.
NOME_ELEMENTO, na qual o nome é o valor da propriedade name
de cada elemento na página HTML.
www.esab.edu.br 376
A figura a seguir apresenta o código e o nome de cada elemento,
sublinhado:
Figura 151 – Nome dos componentes HTML.

Para recuperar o elemento que cadastra o valor da senha, por exemplo,

a instrução ficará assim: form.senha. Agora que sabemos como pegar o
componente do formulário, o próximo passo é pegar o valor informado
no componente. Para tanto, usaremos a propriedade “value”. Essa
propriedade armazena o valor inserido pelo usuário naquele campo
de dedicação do tipo <input>, da seguinte forma: form.NOME_
ELEMENTO_INPUT.value. Por exemplo, para pegar o valor do campo
nome, a instrução será: form.nome.value.
Caso a propriedade “value”, que é um literal (ou string), contenha o valor

“” (duas aspas duplas), significa que o campo não foi preenchido.
O Código da função “validar” para verificar se os campos foram

preenchidos é apresentado a seguir.
www.esab.edu.br 377
Algoritmo 193 – Campos obrigatórios
01 <script>
02 function validar(form){
03 valor = form.nome.value; /* valor do nome informado */
04 mensagem = “ATENÇÃO\n”; /* mensagem que será
apresentada em caso de erro */
05 erro = false; /* armazena a situação do teste,s e
houve erro */
06 if(valor == “”){
07 mensagem = mensagem + “Preencha o campo NOME!\n”;
08 erro = true;
09 }
10 valor = form.email.value;
11 if(valor == “”){
12 mensagem = mensagem + “Preencha o campo E-MAIL!\n”;
13 erro = true;
14 }
15 valor = form.idade.value;
16 if(valor == “”){
17 mensagem = mensagem + “Preencha o campo IDADE!\n”;
18 erro = true;
19 }
20 valor = form.senha.value;
21 if(valor == “”){
22 mensagem = mensagem + “Preencha o campo SENHA!\n”;
23 erro = true;
24 }
25 valor = form.confsenha.value;
26 if(valor == “”){
27 mensagem = mensagem + “Preencha o campo CONFIRMAÇÃO
DE SENHA!\n”;
28 erro = true;
29 }
30 if(erro==true){ /* houve pelo menos um erro */
31 alert(mensagem);
32 }
33 }
A figura a seguir apresenta a tela de mensagem de erro, caso nenhum

campo seja preenchido.
www.esab.edu.br 378
Figura 152 – Alerta de erro.
No próximo código, vamos verificar se o e-mail informado contém

um sinal de @ e um ponto (.), usando a função indexOf(termo) do
JavaScript. Essa função retorna a posição do termo dentro da string (um
conjunto de caracteres), sendo que a primeira posição de uma string
é zero (0). Por exemplo, supondo que a variável nome contém o valor
“Marcelo”, a função nome.indexOf(“M”) retornará o valor 0 (zero),
já que a letra “M“ é a primeira da string. Caso a instrução seja nome.
indexOf(“r”) o resultado será 2, pois a letra “r” está na posição 2.
A figura a seguir representa o armazenamento da palavra “Marcelo” na

variável nome.
posição 0 1 2 3 4 5 6
variável nome M a r c e l o
Figura 153 – Armazenamento de string.

Caso não exista o item na string, a função retornará o valor -1, por
exemplo, a instrução nome.indexOf(“Z”) retornará ao -1, pois o nome
“Marcelo” não contém a letra “Z”.
Para validar se o e-mail contém o símbolo de @ e o ponto (.), usaremos a

função indexOf(“@”) e indexOf(“.”), se o indexOf(“@”) ou indexOf(“.”)
retornar -1, significa que o e-mail não contém os símbolos esperados,
www.esab.edu.br 379
portanto uma mensagem será apresentada ao usuário. O código que
valida o e-mail é apresentado a seguir.
Algoritmo 194 – Validar e-mail

01 if( (form.email.value.indexOf(“@”)==-1) || (form.email.
value.indexOf(“.”)==-1)) {
02 alert(“Por favor, informe um e-mail válido.”);
03 erro = true;
04 }
Para validar se a senha contém a quantidade de oito caracteres, usaremos

a função length que retorna o número de símbolos da string. Usando o
mesmo exemplo anterior, do nome que contém a palavra “Marcelo”, a
função length retornará 7, que é a quantidade de caracteres informados.
Além de validar a quantidade de caracteres, vamos verificar se a senha e
confirmação de senha são iguais.
O código que cria a rotina de validação da senha e confirmação de senha

é apresentado a seguir.
Algoritmo 195 – Validação da senha

01 /* verificar a senha e confirmação de senha */
02 if(form.senha.value.length!=8){
03 alert(“A senha deve ter oito caracteres!”);
04 }
05 if(form.senha.value != form.confsenha.value){
06 alert(“A senha e confirmação de senha devem ter os mesmos
valores!”);
07 }
Na linha 2 do Algoritmo 195, a condição se (if ) está buscando o

elemento form, deste form; o campo de edição <input> chamado senha;
e, deste elemento, o valor informado. Como este valor é um literal, a
função length retornará quantos caracteres foram informados. Caso o
valor seja zero, significa que ele está vazio.
www.esab.edu.br 380
Por fim, vamos validar a idade informada, verificando se apenas
números foram digitados. Para tanto, a lógica a ser aplicada percorrerá
cada caractere informado no campo idade, verificando se algum deles
não é um número: se a condição for verdadeira, a idade é inválida.
Para recuperar cada caractere do campo idade, será usada a função
charAt(posição), que retorna o caractere que está na posição informada.
No caso da variável nome, que contém o valor “Marcelo”, a instrução
nome.charAt(4) retornará “e”, que é a letra da posição 4.
Estudo complementar
Você pode conhecer esse e outros comandos de
manipulação de string utilizados pela linguagem
JavaScript acessando o site Imaster. Confira!
O código para validação da idade é apresentado a seguir.
Algoritmo 196 – Validação da idade

01 erro = false; /* inicializa erro com falso */
03 /* percorre cada caractere informado no campo idade */
04 /* valor.length retorna a quantidade de caracteres digitados
*/
05 for(var posicao=0;posicao < valor.length;posicao = posicao
+ 1){
06 /* verifica se o caractere não é um número entre 0 e 9 */
07 if(valor.charAt(posicao) != ‘0’ && valor.charAt(posicao)
!= ‘1’ &&
08 valor.charAt(posicao) != ‘2’ && valor.charAt(posicao)
!= ‘3’ &&
!= ‘5’ &&
!= ‘7’ &&
!= ‘9’){
12 erro = true;
13
14 break; // comando para sair do laço, não precisa
continuar já houve erro
15 }
16 }
www.esab.edu.br 381
17 if(erro==true){ /* se erro vale true, a condição if foi
executada */
18 alert(“Informe apenas números na idade”);
19 }
Com isso, toda a regra de validação do formulário está criada.
Todo o código da função deve ser inserido no cabeçalho da página, entre

as tags <head> e </head>, seguindo a estrutura do algoritmo função de
validação, substituindo o comentário //instruções pelo código completo.
A figura a seguir apresenta essa tarefa de inserção e atualização do código.
01 <script>
03 //instruções
04 }
05 </script>
Figura 154 – Rotina completa.

www.esab.edu.br 382
O código a seguir apresenta todo o algoritmo de validação do formulário:
Algoritmo 197 – Validação completa

01 <script>
03 valor = form.nome.value; /* valor do nome informado */
04 mensagem = “ATENÇÃO\n”; /* mensagem que será
apresentada em caso de erro */
05 erro = false; /* armazena a situação do teste,s e houve
erro */
06 if(valor == “”){
07 mensagem = mensagem + “Preencha o campo NOME!\n”;
08 erro = true;
09 }
10 valor = form.email.value;
11 if(valor == “”){
12 mensagem = mensagem + “Preencha o campo E-MAIL!\n”;
13 erro = true;
14 }
16 if(valor == “”){
17 mensagem = mensagem + “Preencha o campo IDADE!\n”;
18 erro = true;
19 }
20 valor = form.senha.value;
21 if(valor == “”){
22 mensagem = mensagem + “Preencha o campo SENHA!\n”;
23 erro = true;
24 }
25 valor = form.confsenha.value;
26 if(valor == “”){
27 mensagem = mensagem + “Preencha o campo CONFIRMAÇÃO DE
SENHA!\n”;
28 erro = true;
29 }
30 if(erro==true){ /* houve pelo menos um erro */
31 alert(mensagem);
32 }
33 }
34 if( (form.email.value.indexOf(“@”)==-1) || (form.email.
value.indexOf(“.”)==-1)) {
35 alert(“Por favor, informe um e-mail válido.”);
36 erro = true;
37 }
38 /* verificar a senha e confirmação de senha */
39 if(form.senha.value.length!=8){
40
www.esab.edu.br 383
41 alert(“A senha deve ter oito caracteres!”);
42 }
43 if(form.senha.value != form.confsenha.value){
44 alert(“A senha e confirmação de senha devem ter os mesmos
valores!”);
45 }
46 erro = false; /* inicializa erro com falso */
48 /* percorre cada caractere informado no campo idade */
49 /* valor.length retorna a quantidade de caracteres digitados
*/
50 for(var posicao=0;posicao < valor.length;posicao = posicao
+ 1){
51 /* verifica se o caractere não é um número entre 0 e 9 */
52 if(valor.charAt(posicao) != ‘0’ && valor.charAt(posicao)
!= ‘1’ &&
!= ‘3’ &&
!= ‘5’ &&
!= ‘7’ &&
!= ‘9’){
57 erro = true;
58
59 break; // comando para sair do laço, não precisa
continuar já houve erro
60 }
61 }
62 if(erro==true){ /* se erro vale true, a condição if foi
executada */
63 alert(“Informe apenas números na idade”);
64 }
Nesta unidade, você criou uma rotina de validação de formulário em

JavaScript utilizando funções de manipulação de strings, ou literais,
juntamente com os comandos de decisão (if e else) e comandos de
laço (for). Esse conjunto de instruções possibilita a criação de rotinas
simples, mas fundamentais para que cadastros tenham seus dados
tratados e validados.
www.esab.edu.br 384
Atividade
trabalho!
www.esab.edu.br 385
Resumo
Na unidade 43, conhecemos a estrutura dos comandos de entrada e saída,

laços condicionais simples (if) e complexos (if e else, switch), bem como
os comandos de repetição condicional (while) e iterativo (for). Esses
comandos possibilitam criar rotinas que tornam as páginas HTML mais
dinâmicas e interativas. Já na unidade 44, você foi apresentado à sintaxe
dos comandos que criam as caixas de diálogo da linguagem JavaScript e
aprendeu ainda como integrá-las aos comandos de repetição while e for.
Viu também que as caixas de diálogo podem ser criadas por meio dos
comandos prompt (entrada de dados), alert (para saída de dados) e confirm
(confirmação de dados com botões de interação com usuário).
Na unidade 45, por meio do comando document.write() e as suas

formas de utilização, compreendemos os processos de desenvolvimento
de layouts dinâmicos para as páginas HTML. Na unidade 47, você foi
apresentado à sintaxe e uso dos comandos window.open() e window.
close(), que permitem abrir e fechar janelas, respectivamente. Em um
projeto web, a janela é um elemento de interação com o usuário muito
importante e, por isso, deve ser utilizado com cuidado para não afetar a
usabilidade e o acesso aos dados.
Finalmente, nas unidades 46 e 48 você pôde praticar os conhecimentos

apresentados nestas seções, com a criação de algoritmos em JavaScript.
www.esab.edu.br 386
Glossário
Aleatório
Geração de valores que depende de fatores incertos, não pode ser previsto.
R
Algoritmo
Processo de resolução de um problema constituído por uma sequência
ordenada e bem definida de passos que, em tempo finito, conduzem à
solução do problema ou indicam que não existem soluções. R
Arquitetura de informação
É um campo de estudos que trata da arte e ciência de organizar e rotular
dados e conteúdos por meio de técnicas e modelos de estrutura da área.
R
Bug
Palavra em inglês que significa inseto. É um termo originário da época
dos primeiros computadores com válvulas, que queimavam ao contato
com os insetos. Atualmente, representa um erro no funcionamento de
um software, normalmente associado à falha na lógica. R
Cascading Style Sheets (CSS)

É uma linguagem de programação utilizada para definir a apresentação
de páginas web que adota as linguagens de marcação HTML, XML,
XHTML. R
www.esab.edu.br 387
Codificação de caracteres
Os caracteres em um conjunto são armazenados como um ou mais
bytes em um computador. Cada byte ou sequência de bytes representa
um determinado caractere. Uma codificação de caracteres é a chave que
mapeia um byte em especial ou uma sequência de bytes de caracteres que
a fonte transforma em texto (ISHIDA, 2010). R
Concatenação
É a técnica de gerar uma nova cadeia de caracteres juntando várias
cadeias de caracteres, utilizando o operador de adição (+). Por exemplo: a
concatenação de ‘Marcelo’ + ‘ ‘ + ‘Medeiros’ resultará na nova cadeia de
caracteres ‘Marcelo Medeiros’. R
Container
No contexto da web, container é um elemento do site que contém outros
componentes internos, organizando-os e formatando-os. R
Coordenadas
Elementos que servem para determinar a posição de um ponto sobre
uma superfície, ou no espaço, em relação a um sistema de referência. R
Dados tabulares
São dados apresentados em formato de tabela, exibidos e organizados em
linhas e colunas. R
Depuração
Trata-se da eliminação de falhas de um software. R
Desvio condicional
As instruções de um programa de computador são executadas
sequencialmente. Entretanto, quando essas execuções são associadas
a uma condição que possibilita o desvio, sem considerar a sequência,
as instruções não são realizadas. Ou seja, o programa não executará
www.esab.edu.br 388
as instruções, pois foram desviadas do processo sequencial. A decisão
possibilita implementar esses desvios condicionais escolhendo qual
comando ou conjunto de comandos serão executados. R
Drop-down (menu)
É um componente da tela de interação com usuário semelhante a uma
lista de valores. R
Fatorial
O fatorial de um número que pertence ao conjunto dos números
naturais é o produto de todos os seus antecessores, incluindo o próprio
número e excluindo o zero. R
Foco do controle
É a ação quando o usuário seleciona um determinado componente
de tela, usando a tecla TAB ou o ponteiro do mouse. Quando um
componente está desabilitado, a seleção desse componente não é possível.
R
Glifo
Em tipografia, é uma figura que dá um tipo de característica particular a
um símbolo específico. R
Grau Celsius
Escala que adota para o ponto de fusão de gelo o valor 0 (zero) e para o
ponto de ebulição da água o valor 100 (cem). A escala divide o intervalo
obtido entre os pontos fixos em 100 partes iguais, em que cada parte
corresponde a uma unidade da escala e foi denominada de grau Celsius,
cujo símbolo é o °C. R
HyperText Markup Language (HTML)

Linguagem de programação, em formato de script, para criação de
páginas web. R
www.esab.edu.br 389
HTML semântico
É a marcação HTML usada de modo que reforce o significado da
informação, e não para apenas definir a sua apresentação na página.
Desse modo, otimiza-se o código para ser encontrado por buscadores,
bem como organiza e deixa clara a informação. R
Ícone
É uma representação gráfica de um objeto, conceito ou ação. É um
elemento de interface visual para criar interação com o usuário. Passou
a ser muito conhecido com o surgimento dos sistemas operacionais
com interface gráfica, como Windows e MacOs (Macintosh Operating
System). R
Indentação
Ato ou efeito de endentar. É o encaixe de tags feito para organizar o
código em que tags do interior de outras ficam mais à direita, isto é, têm
um espaçamento maior do início da linha. R
Iterativo
É o processamento que se repete várias vezes para se chegar a um
resultado final. R
JavaScript
É uma linguagem inventada pela Netscape que pouco tem a ver com
a linguagem de programação Java, da Oracle. Os scripts escritos em
JavaScript são incluídos no meio do código HTML das páginas web para
torná-las dinâmicas e são interpretados pelo browser. R
Label
É um rótulo ou identificador para um determinado valor apresentado
na tela da aplicação. Por exemplo, é de boa prática que ao lado de um
campo de cadastro de CPF exista um rótulo identificando o que ali deve
www.esab.edu.br 390
ser cadastrado, facilitando a identificação da finalidade daquele campo
pelo usuário. R
Layout
É uma apresentação ou esboço que mostra a distribuição e o tamanho de
elementos como texto, gráficos ou figuras, em um determinado espaço.
R
Menu
Lista de comandos ou opções que podem ser selecionados no programa
de computador. R
Palavras reservadas
São palavras de uso exclusivo da gramática, pois têm um significado
especial dentro da linguagem e são predefinidas na sua especificação. R
Pop-up
Trata-se de um tipo de janela que abre no navegador como nova janela
ao clicar em um link. Geralmente é utilizada para informações extras ou
para propagandas. R
Posição absoluta
É quando um elemento é deslocado de seu lugar original dentro do
documento e colocado exatamente na posição que foi determinada. R
Protocolo
Não é um computador nem um programa, trata-se de algo abstrato, um
conjunto de regras, padrões e especificações que permite a comunicação
perfeita entre os computadores. R
Renderizada
É o resultado do método pelo qual um processamento digital é
apresentado ao usuário. R
www.esab.edu.br 391
Rotinas
Conjunto de instruções, em um código, que é capaz de executar uma
tarefa. R
Script
São sequências de comandos que, quando executados por ferramentas
computacionais, trazem informações que são processadas e
transformadas. R
Sequencial
Representa o processamento em que a execução da instrução, rotina ou
tarefa acontece. R
Sistema Hexadecimal
É um sistema de numeração vinculado à informática. Os computadores
interpretam as linguagens de programação em bytes, que, por sua vez,
são compostos de oito dígitos. Na medida em que os computadores e os
programas aumentam a sua capacidade de processamento, funcionam
com múltiplos de 8, como 16 ou 32. Por este motivo, o sistema
hexadecimal, de 16 dígitos, é um padrão na informática. R
Small-Caps
É o termo utilizado na programação de computadores para representar a
forma de conversão de uma letra na tela do computador, small indica a
letra em minúsculo e caps em maiúsculo, portanto, o termo informa que
uma letra em minúsculo será convertida para maiúsculo. R
Tecla Tab
A tecla Tab, normalmente representada por duas setas para esquerda e
à direita ou pela palavra Tab, faz com que, ao ser pressionada dentro de
um controle, como uma caixa de texto, o foco seja mudado para outro
controle. Sua origem vem da palavra tabulação. R
www.esab.edu.br 392
Timothy John Berners-Lee
Também conhecido como Tim Berners-Lee, é um cientista da
computação e físico britânico, professor do Massachussetts Institute of
Technology (MIT) e diretor do W3C. Ele criou a World Wide Web em
1990, com a ajuda de Robert Cailliau, quando implementou a primeira
conexão bem-sucedida entre um protocolo HTTP e um servidor
utilizando a internet. R
Tipografia
É a impressão dos tipos, é o estudo da formação dos tipos de fontes.
A tipografia é o principal elemento da página impressa. Hoje em dia, a
tipografia alcança alta prioridade no mundo do design, pois há muitos
layouts nos quais as palavras ocupam um espaço importante na sua
definição. R
Tipos de dados
Os tipos de dados determinam quais valores serão aceitos por uma
variável. Por exemplo, variáveis do tipo numérica aceitam apenas
números, já variáveis do tipo booleano permitem dois valores, true
(verdadeiro) ou false (falso). Em algumas linguagens, não existe o tipo
booleano, sendo usado o tipo inteiro, no qual 1 representa verdadeiro e 0
representa falso, como no caso da linguagem C. R
Theodore Holm Nelson

Conhecido como Ted Nelson, é um filósofo e sociólogo nascido nos
Estados Unidos da América que foi pioneiro na área de Tecnologia
da Informação (TI). Foi ele quem criou, em 1963, os conceitos de
hipertexto e hipermídia – essenciais para qualquer pessoa que trabalhe
na área de TI –, e também os termos “transclusão”, “transcopyright” e
“virtualidade”. R
Unidade de medida
Especificação da quantidade de determinada grandeza que serve de
padrão para eventuais comparações e para outras medidas. R
www.esab.edu.br 393
Usabilidade
É um termo para definir a facilidade com que podemos utilizar um
produto e a sua eficiência. Na TI, refere-se à simplicidade e facilidade
de navegação de uma interface. Uma das áreas de estudos da usabilidade
é a engenharia de usabilidade, em que se estudam boas práticas de
desenvolvimento e padrões que melhoram a navegação e a experiência do
usuário. R
Valor do atributo
Elemento que fica logo após o atributo (do qual é separado por dois-
pontos) e define o estado desse atributo. Por exemplo, o valor red pode
definir a cor vermelha para o atributo color. R
Variáveis
São elementos básicos manipulados por um programa de computador.
Variável é o espaço que foi reservado dentro da memória de um
computador com o objetivo de armazenar determinado tipo de dado.
Os nomes das variáveis existem para que você possa referenciá-las ou
modificá-las quando necessário. Muitas linguagens de programação
exigem que os programas contenham declarações que especifiquem de
que tipo são as variáveis que ele utilizará e, às vezes, se estas têm um valor
inicial. No caso do JavaScript, o valor atribuído à variável determina seu
tipo de dado. R
www.esab.edu.br 394
Referências
ECLIPSE. Disponível em: <http://www.eclipse.org>. Acesso em: 20 jan. 2013.
FIREBUG. Disponível em: <http://getfirebug.com/>. Acesso em: 04 mar. 2013.
LEMAY, L. Aprenda a criar páginas web com HTML e XHTML em 21 dias.

São Paulo: Pearson Education do Brasil, 2002.
MANZANO, J. A. N. G.; TOLEDO, S. A. de. Guia de orientação e

desenvolvimento de sites: HTML, XHTML, CSS e JavaScript/JScript. São
Paulo: Érica, 2008.
NETBEANS. Disponível em: <http://www.netbeans.org>. Acesso em: 20 jan.

2013.
NIELSEN, J.; LORANGER, H. Usabilidade na web: projetando Websites com

Qualidade. Rio de Janeiro: Campus, 2007.
NOTEPADPLUSPLUS. Disponível em: <http://www.notepadplusplus.org>.

Acesso em: 20 jan. 2013.
ORACLE. Netbeans IDE. Disponível em: <https://netbeans.org>. Acesso em:

20 jan. 2013.
PRESSMAN, R. Engenharia de Software. 6. ed. Sao Paulo: McGraw-Hill,

2006.
SILVA, M. S. Construindo sites com CSS e (X) HTML. São Paulo: Novatec,
2008.
www.esab.edu.br 395

Idioma

Ambientes Web

Enviado por

Dados do documento

Descrição:

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Descrição:

Direitos autorais:

Formatos disponíveis

Ambientes Web

Enviado por

Descrição:

Direitos autorais:

Formatos disponíveis

Ambientes Web

Vila Velha (ES)

Produção do Material Didático-Pedagógico

Diretoria Executiva Design Educacional

Você já deve conhecer um pouco de internet, a rede mundial de computadores que

Para que você possa compreender o que é e como funciona um ambiente

Vamos começar pensando no seguinte: internet e web são a mesma coisa?

Muitas pessoas acreditam que internet e web são sinônimas, no entanto

Assim, a web é baseada na tecnologia de hipertexto. Segundo Lemay

Podemos pensar na internet como uma rede de computadores

Figura 1 – Internet como rede de computadores.

• World Wide Web Consortium (W3C): o W3C consiste na

Como vimos, a internet é mundial, virtual e pública, e a tendência é que

Desde a sua criação, a rede mundial vem crescendo muito, a ponto de

Um termo muito comum é URL, que representa um endereço

A intranet é uma internet interna, isto é, normalmente seu acesso se

Outro conceito fundamental da internet é o website, ou site, que é um

Independentemente de se tratar de um site ou de um portal, a primeira

Outro conceito fundamental está relacionado à estrutura necessária

Para visualizar toda a informação disponível em um site é necessário um

Você sabe como ocorre essa comunicação entre navegador e computador?

Quadro 1 – Tipos de protocolo.

Para divulgar páginas na internet, você precisará também de um servidor

Navegador se conecta a um servidor

Para sua reflexão

Na próxima unidade, veremos qual é o processo necessário para

Na unidade anterior, vimos o que é o ambiente web e os seus conceitos

Desenvolver um projeto web tornou-se uma tarefa importante,

Desse modo, a elaboração de um site deve envolver todos os aspectos da

As fases que compõem a elaboração de um site são:

• a quem se destina o site;

Conforme Nielsen e Loranger (2007), os visitantes de sites possuem um

• apresentar o site a que os usuários chegaram;

A organização da informação exige uma análise criteriosa do material que

Com a definição das informações que serão utilizadas na concepção

Uma característica fundamental para o sucesso de um site é fazer com que

Figura 3 – Distribuição das áreas visitadas na página.

Para organizar esses tópicos, basearemo-nos nos modelos oferecidos pela

Na arquitetura linear, a homepage apresenta apenas a sua estrutura e o

Como solução para o planejamento de um website, é possível utilizar

A figura a seguir representa as arquiteturas: hierárquica, linear, em malha

arquitetura hierárquica arquitetura linear

Figura 4 – Tipos de arquitetura de websites.

Com a definição da estrutura da página planejada, a próxima etapa

Para que os resultados desejados com o site sejam alcançados, é necessário

Agora que você já conhece os processos de definição e estruturação de

• determinar os recursos técnicos: definição da linguagem de

Podemos ver que o processo de desenvolvimento de um site necessita de

Com o aumento do acesso à web e a sua popularização, hoje muito

Assim, notamos que nesses últimos anos a web e os seus usuários

Como vimos nas unidades anteriores, a chance de um site atrair novos

b. Orientar o usuário quanto ao restante do site. Se o site possuir uma

• links que não mudam de cor quando visitados;

3.1 Links que não mudam de cor quando visitados

Na maioria dos navegadores de internet, encontramos o botão “Voltar”

Assim, o botão “Voltar” sempre deve estar disponível ao usuário, na

3.3 Novas janelas que abrem no navegador

• poluição visual do site;

Portanto, evite o uso da abertura de novas janelas no desenvolvimento do projeto

3.4 Itens ou elementos de design que parecem