(https://md.claretiano.edu.

br/proweb-gs0070-

ago-2023-grad-ead/)

1. Introdução
Boas-vindas! Você iniciará o estudo de . Neste mo-
mento, você será inserido no deslumbrante universo de tecnologias para de-
senvolvimento de aplicações para internet.

Ao longo do seu estudo, você conhecerá a importância das tecnologias para

programação web e como elas devem ser utilizadas em conjunto na constru-
ção de aplicações.

Inicialmente, você estudará os conceitos fundamentais da programação web,

além da linguagem de marcação HTML. Aprenderá, ainda, as Folhas de Estilo
em Cascata (CSS), necessárias para a apresentação de conteúdo formatado na
internet.

Em seguida, começaremos nosso estudo pelas principais metodologias para

programação, tanto do lado do cliente – utilizando a linguagem JavaScript,
quanto do lado do servidor, com a linguagem PHP, ou seja, você aprenderá des-
de os aspectos fundamentais da linguagem PHP até a programação com ban-
co de dados.

2. Informações da Disciplina
Ementa
Programação para internet é uma área em constante evolução devido ao
avanço das tecnologias e o surgimento de novos frameworks e para diversos
�ns. Para capacitar o professor da área de Computação a acompanhar essa
evolução, esta disciplina apresenta os fundamentos da programação para web,
abordando os seguintes tópicos: paradigmas de desenvolvimento de aplica-
ções para web; desenvolvimento de interface para web utilizando HTML/CSS;
programação do lado do cliente com JavaScript; programação do lado do ser-
vidor com a linguagem PHP; conexão com banco de dados MySQL para arma-
zenamento e recuperação de dados.

Objetivo Geral
Os alunos de terão condições de construir aplicações
para internet utilizando as principais tecnologias disponíveis atualmente.

Objetivos Especí�cos
• Estudar os principais aspectos teóricos da programação web, desde os
conceitos de sites estáticos e dinâmicos até as principais tecnologias pa-
ra desenvolvimento.
• Conhecer a linguagem de marcação HTML, que é essencial para constru-
ção de páginas web.
• Conhecer as folhas de estilo em cascata, que representam um padrão pa-
ra formatação de conteúdo na web.
• Conhecer a linguagem JavaScript, muito utilizada para programação do
lado do cliente.
• Conhecer a linguagem para web denominada PHP, explorando conceitos
introdutórios da linguagem até a interação com banco de dados. Esta é
considerada uma linguagem extremamente abrangente, atualmente em-
pregada em grande parte dos projetos de construção de aplicações pa-
ra web.
 (https://md.claretiano.edu.br/proweb-gs0070-

ago-2023-grad-ead/)

Ciclo 1 – Paradigmas de Desenvolvimento Web

Objetivos
• Conhecer os fundamentos da programação para web.
• Aprender sobre sites estáticos e dinâmicos.
• Instalar e con�gurar um ambiente para desenvolvimento web.

Conteúdos
• Sites estáticos e dinâmicos.
• Tecnologias para desenvolvimento web.
• Servidores web.
• Softwares necessários para a programação web.

Problematização
Quais são os principais conceitos de sites estáticos e dinâmicos? Quais são as
principais tecnologias utilizadas para o desenvolvimento web? O que são e pa-
ra que servem os servidores web? Quais são as principais ferramentas para a
programação web? Quais são os conceitos básicos da linguagem HTML?
Como formatar textos com HTML? Como adicionar imagens em um documen-
to HTML?

Orientações para o estudo

O desenvolvimento de aplicações para web é uma área fascinante. Neste ciclo,
você estudará sobre os fundamentos da área, bem como os tipos de sites está-
ticos e dinâmicos. Aproveite a oportunidade para con�gurar o ambiente para
desenvolvimento dos exemplos dos ciclos seguintes.

Bons estudos!

1. Introdução
Neste primeiro ciclo, você compreenderá sobre alguns conceitos teóricos que
envolvem a programação para web. Esses conceitos serão fundamentais ao
longo dos próximos ciclos, por isso, muita atenção às informações apresenta-
das. Além disso, você conhecerá todos os softwares que serão necessários pa-
ra o desenvolvimento dos programas ao longo deste material.

Vamos lá?

2. Programação para web

Você já ouviu falar em site estático e site dinâmico, não é? Pois bem, agora vo-
cê conhecerá estes conceitos de uma maneira mais detalhada.

Os sites dinâmicos são os que oferecem algum tipo de interatividade com o

usuário e para isso são desenvolvidos utilizando linguagens de programação
para web. Estes sites, além de oferecerem interatividade, também possibilitam
a integração com o banco de dados. Dessa maneira, o usuário pode tanto rece-
ber quanto enviar informações por meio da internet. Este mecanismo, conhe-
cido como modelo de requisição/resposta, permite o �uxo bidirecional de in-
formações.

A principal diferença entre site dinâmico e estático consiste em que no site

estático as informações trafegam em um �uxo unidirecional, ou seja, do servi-
dor web para o cliente, o que signi�ca que o usuário não pode enviar informa-
ções para o servidor.

A Figura 1 ilustra as diferenças entre essas duas abordagens.

 Figura 1 Requisição de páginas estática (a) e dinâmica (b).

Para que uma página seja exibida no navegador (browser) do cliente, é neces-
sário fazer uma requisição ao servidor. Uma requisição é solicitada toda vez
que o usuário digita um endereço na barra de endereço do navegador e pressi-
ona <ENTER>, ou quando clica em um link para abrir outra página do site que
está visitando.

A requisição de uma página estática é enviada para o servidor que devolve o

código HTML para o browser. Este interpreta o código e exibe uma interface
para o usuário com imagens, texto, e tudo mais que compõe a página solicita-
da, como mostra a Figura1 (a).

Com páginas dinâmicas, a diferença consiste no fato de que as páginas requi-

sitadas não possuem somente conteúdo estático HTML (interpretado pelo na-
vegador), mas podem conter conteúdos dinâmicos ou somente ser formadas
por este tipo de conteúdo.

Os conteúdos dinâmicos que acessam banco de dados não são interpretados

pelo browser do cliente, mas pelo servidor. Neste caso, quando o usuário dese-
ja visualizar uma página com conteúdo dinâmico, a previsão do tempo para
hoje, por exemplo, o navegador envia a requisição para o servidor que inter-
preta o código dinâmico, acessa um banco de dados para obter essa informa-
ção atualizada, e gera uma página HTML antes de enviar para o navegador
(acompanhe o procedimento na Figura 1 (b)). A partir daí, o procedimento de
interpretar o HTML é feito normalmente pelo navegador do cliente.

3. Tecnologias para desenvolvimento web

De acordo com Deitel (2003), diversas tecnologias para desenvolvimento de
programas para web podem ser encontradas. Dentre elas, algumas merecem
destaque.

O Common Gateway Internet (CGI) foi a primeira tecnologia criada para pro-
gramação de sites dinâmicos. O CGI revolucionou a maneira como os usuários
utilizavam a internet, introduzindo o conceito de interatividade. Com base no
CGI, diversas tecnologias surgiram, e, atualmente, os programadores contam
com uma variedade de linguagens.

A linguagem ASP – Active Server Pages – é proprietária da plataforma

Microsoft, sendo muito empregada no desenvolvimento de conteúdo dinâmi-
co. Atualmente, esta linguagem tem sido substituída pela tecnologia ASP.NET,
que faz parte do framework.NET.

O trecho a seguir ilustra a linguagem ASP.

<%@Page Language="C#" CodeFile="olamundo.aspx.cs" Inherits="olamundo" %>

<html>

<head>

<title>Exemplo em ASP.NET</title>
</head>

<body>
<% Response.Write("<p> Olá Mundo </p>");
%>
</body>

</html>
A plataforma Java também permite a construção de páginas web com conteú-
do dinâmico. Para isso, a Sun Microsystems desenvolveu duas tecnologias:
Servletse JavaServer Pages (JSP).

O código a seguir ilustra uma página JSP.

<%@Page Language="C#" CodeFile="olamundo.aspx.cs" Inherits="olamundo" %>

<html>

<head>

<title>Exemplo em ASP.NET</title>
</head>

<body>
<% Response.Write("<p> Olá Mundo </p>");
%>
</body>

</html>

Outra tecnologia importante, que será o foco deste estudo, é o PHP. Esta é uma
linguagem de programação livre, interpretada e muito utilizada para constru-
ção de conteúdos dinâmicos. Suas principais características são a velocidade
e a portabilidade, uma vez que funciona independentemente da plataforma.

O trecho a seguir ilustra a linguagem PHP.

<html>

<head>
<title>Exemplo em PHP</title>
</head>

<body>
<?php
echo"<p>Olá Mundo</p>";
?>
</body>

</html>

Dessa forma, você pôde conhecer um pouco sobre as linguagens ASP, JSP e
PHP.
4. O que é necessário para programação web?
Para o desenvolvimento e a execução de aplicações web, é necessário que as
páginas sejam armazenadas em um servidor web.

Os servidores web exercem papel fundamental na construção de aplicações

para internet, pois recebem as solicitações enviadas pelos navegadores. Após
receber a solicitação, o servidor web executa a aplicação correspondente e
aguarda a resposta. A resposta, que usualmente consiste em um arquivo
HTML, é enviada para o navegador do cliente, utilizando o protocolo HTTP.
Caso haja erros durante o processamento da solicitação, o servidor web pode
enviar uma mensagem de erro para o cliente.

Para o desenvolvimento de aplicações com a linguagem PHP, o principal ser-

vidor web utilizado é o Apache. Este servidor pode ser obtido gratuitamente
na internet, por meio do endereço eletrônico disponível em: http://httpd.apa-
che.org/ (http://httpd.apache.org/). Acesso em: 4 jun. 2012.

Além disso, é necessária a instalação da linguagem PHP, que pode ser obtida
facilmente na internet, por meio do site disponível em: http://www.php.net/
(http://www.php.net/). Acesso em: 4 jun. 2012.

Informações detalhadas a respeito da instalação e con�guração podem ser

encontradas no endereço eletrônico disponível em: http://www.php.net/ma-
nual/pt_BR/install.php (http://www.php.net/manual/pt_BR/install.php).
Acesso em: 4 jun. 2012.

No decorrer do nosso estudo, a respeito da linguagem PHP, também será ne-

cessário que um Sistema de Gerenciamento de Banco de Dados (SGBD) seja
instalado. Você pode fazer download do banco de dados MySQL no endereço
eletrônico disponível em: http://dev.mysql.com/downloads/
(http://dev.mysql.com/downloads/). Acesso em: 4 jun. 2012.

Alguns programas oferecem um ambiente completo para desenvolvimento

web, contendo todas as tecnologias instaladas e perfeitamente con�guradas,
como, por exemplo:
 • Easy PHP: http://www.easyphp.org/ (http://www.easyphp.org/). Acesso
em: 4 jun. 2012.
• Vertrigo: http://vertrigo.sourceforge.net/ (http://vertrigo.sourceforge.net/).
Acesso em: 4 jun. 2012.

Agora, para aprofundar seus conhecimentos, sugerimos que assista ao vídeo a

seguir:

5. Instalação e con�guração de um ambiente

para programação web
Para desenvolver aplicações para web, existem diversas alternativas. Neste
material, sugerimos os seguintes programas:

• Notepad++ (https://notepad-plus-plus.org/): editor de texto com suporte à

codi�cação para as linguagens HTML, CSS, JavaScript e outras. Para sa-
ber mais como utilizar o Notepad++ na codi�cação de HTML, assista aos
seguintes vídeos:

https://youtu.be/RqDdvtzK4oc

• XAMPP (https://www.apachefriends.org/pt_br/index.html): ambiente de

desenvolvimento para PHP. Para aprender a instalar e con�gurar o
XAMPP, sugerimos o seguinte vídeo:
6. Considerações
Neste primeiro ciclo, foram apresentados os conceitos introdutórios sobre o
desenvolvimento de aplicações para web, como também os programas neces-
sários para construção de aplicações, os quais serão fundamentais para este
estudo. Assim, é fundamental que o seu ambiente de desenvolvimento esteja
devidamente instalado e con�gurado.
 (https://md.claretiano.edu.br/proweb-gs0070-

ago-2023-grad-ead/)

Ciclo 2 – Linguagem de Marcação HTML

Objetivos
• Utilizar a linguagem de marcação HTML na criação de páginas para in-
ternet.
• Aplicar as folhas de estilo em cascata CSS na formatação da aparência
das páginas.

Conteúdos
• Linguagem de marcação HTML.
• Estrutura básica de um documento.
• Tags.
• Folhas de estilo em cascata.
• Tipos de seletores e formatação.

Problematização
O que é HTML? Como utilizar a linguagem de marcação na programação web?
Como aplicar a formatação de páginas web por meio da implementação de fo-
lhas de estilo em cascata? Quais são os principais fundamentos das folhas de
estilo em cascata? Quais são os principais seletores? Como aplicar uma forma-
tação por meio de folhas de estilo em cascata?

Orientações para o estudo

Neste ciclo, você terá a oportunidade de codi�car as primeiras páginas web.
Para isso, tenha previamente instalado no seu computador um ambiente de
desenvolvimento. No ciclo anterior, foi sugerido o uso do editor Notepad++, po-
rém, �que à vontade para escolher o editor da sua preferência.

Bons estudos!

1. Introdução
Neste segundo ciclo, você aprenderá sobre a linguagem de marcação HTML e
como utilizar as tags para especi�cação de páginas web. Você conhecerá as
folhas de estilo em cascata e o seu potencial na formatação de conteúdo pa-
ra web.

Vamos lá!

2. Linguagem de marcação
Você sabe qual é o signi�cado de HTML? E para que serve uma linguagem de
marcação?

HTML (Hypertext Markup Language – Linguagem de Marcação de

Hipertexto) é a linguagem padrão adotada desde 1990 para criar e reconhecer
documentos na internet (DEITEL, 2003).

A linguagem de marcação caracteriza-se por dividir os documentos em duas

partes: o conteúdo do documento (textos, imagens, vídeos, grá�cos etc.) e as
tags (elementos especiais colocados ao início e ao �nal de determinados ele-
mentos da página).

A linguagem HTML segue o padrão SGML (Standard Generalized Markup

Language – Linguagem Padrão de Marcação Generalizada). Essa linguagem é
utilizada para de�nir tipos de documentos estruturados e linguagens de ano-
tação. SGML foi desenvolvido pela ISO (International Standards Organization
– Organização de Padrozinação Internacional) e continua muito utilizado co-
mo linguagem para padronização de documentos. No entanto, o sucesso da
HTML é devido ao fato de ela combinar características de SGML, além de ser
leve e simples de se trabalhar.
Com o objetivo de padronizar a linguagem de marcação HTML, a W3C (World
Wide Web Consortium) tem trabalhado no desenvolvimento da especi�cação
XHTML (eXtensible Hypertext Markup Language). O XHTML é uma reformu-
lação da linguagem HTML baseado em XML. O objetivo é criar uma especi�-
cação padronizada que permita a exibição das páginas web em qualquer tipo
de dispositivo, como navegadores, celulares, eletrônicos etc.

A sintaxe do XHTML é mais rigorosa e menos confusa, como, por exemplo, os

comandos de marcação (tags) precisam ser de�nidos com letras minúsculas.
Além disso, o XHTML é utilizado apenas para marcação do conteúdo das pági-
nas, pois as especi�cações de formatação são de�nidas por meio das Folhas
de Estilo em Cascata.

Estes fatores tornam a especi�cação XHTML mais simples de ser processada

e com isso pode ser interpretada em qualquer dispositivo.

Você certamente deve saber que os elementos de marcação da linguagem

HTML são denominados Tags. Uma tag é de�nida por meio de seu nome, mas
cercado pelos sinais menor (<) e maior (>) e, normalmente, há uma tag corres-
pondente para �nalização, com o mesmo nome e precedido por uma barra (/).

O formato genérico de uma tag é:

<nome da tag> elemento </nome da tag>

Há exceções a esse funcionamento, em que algumas tags não necessitam da

marcação de fechamento (</nome da tag>), por exemplo:

• <br/> para quebra de linha;

• <hr/> para régua horizontal.

3. Projeto de um site
Ao projetar um site, você deverá estruturar a informação de forma que a nave-
gação seja a mais intuitiva possível, pois assim sua apresentação web terá
mais chance de sucesso, para tanto, deve-se levar em conta o tipo de informa-
ção e o público-alvo. Outro ponto importante é a atualização das informações,
para que o visitante não perca o interesse pelo conteúdo do site.

A construção de um site, dependendo da �nalidade e da quantidade de conteú-

do, pode ser realizada por uma única pessoa ou por uma equipe de pessoas
formada por:

• responsáveis pela organização da informação.

• responsável pelo projeto grá�co.
• dependendo do tipo de site, são necessários programado-
res em HTML, Java, JavaScript, PHP, ASP, VRML etc.
• auxiliam o trabalho do Analista de Sistemas ou do Designer
Grá�co (ilustradores, digitadores etc.).

4. Estrutura básica de um documento HTML

Todo documento HTML deve começar com a tag <html> e terminar com o fe-
chamento dela no �nal do arquivo </html>. Esta é a estrutura básica de um
documento HTML, e você precisa ter noção dela.

O par de tags <head></head> é usado para de�nir o cabeçalho de um docu-

mento HTML. Ele contém as tags <title></ title>, que indicam o título da pági-
na que aparecerá na barra de títulos do navegador, e precede o conteúdo prin-
cipal do documento. Tudo que estiver contido em <body></ body> será exibido
na janela principal do navegador.

Veja o exemplo do Código 1 (DEITEL, 2003).

<html>
<head>

> </title>
<head>
<body>

</body>
</html>

A W3C recomenda a utilização da especi�cação XHTML para desenvolvimen-

to de páginas web e neste formato todas as tags de marcação devem ser escri-
tas em minúsculo.

De acordo com a W3C, um documento XHTML é formado por três partes prin-
cipais, denominadas:

• tipo do documento, ou simplesmente DOCTYPE;

• cabeçalho, de�nido pelas marcações <head> e </head>;
• conteúdo, ou corpo do documento, de�nido pelas marcações <body> e
</body>.

Com isso, a estrutura de uma página XHTML, conforme as recomendações da

W3C, é apresentada no Código 2, observe.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p> Conteúdo da Página </p>
</body>

</html>

Note que na primeira parte do documento a marcação <!DOCTYPE> informa ao

navegador qual o tipo do documento, em que três tipos podem ser utilizados:

• Strict – representa a especi�cação mais rígida de�nida pela W3C para

elaboração de documentos XHTML. Essa especi�cação não permite a uti-
lização de elementos não recomendados pela W3C, no entanto, a adequa-
ção do site a este padrão pode ser bem complexa.
• Transitional – permite uma maior �exibilidade na elaboração do site,
 uma vez que são aceitos todos os tipos de elementos, no entanto, a especi-
�cação deve seguir as regras da W3C.
• Frameset – permite a divisão da página em quadros denominados fra-
mes. No entanto, é um tipo não recomendado pela W3C.

Elementos do XHTML
Para demonstrar alguns dos principais elementos do XHTML, e como estes
elementos podem ser utilizados para confecção de páginas web, a seguir apre-
sentamos alguns exemplos:

Elemento para de�nição de parágrafos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>
<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
unknown printer took a galley of type and scrambled it to make a type specim
It has survived not only five centuries, but also the leap into electronic t
remaining essentially unchanged. It was popularised in the 1960s with the re
of Letraset sheets containing Lorem Ipsum passages, and more recently with d
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
<p> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
unknown printer took a galley of type and scrambled it to make a type specim
It has survived not only five centuries, but also the leap into electronic t
remaining essentially unchanged. It was popularised in the 1960s with the re
of Letraset sheets containing Lorem Ipsum passages, and more recently with d
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</body>

</html>

Acompanhe, na Figura 1, a visualização da página do navegador referente ao

Código 3.

Figura 1 Resultado da visualização da página no navegador.

Elementos para de�nição de cabeçalhos (ou títulos)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
head>
<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
unknown printer took a galley of type and scrambled it to make a type specim
<h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
unknown printer took a galley of type and scrambled it to make a type specim
<h3> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
unknown printer took a galley of type and scrambled it to make a type specim
<h4> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
unknown printer took a galley of type and scrambled it to make a type specim
<h5> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
unknown printer took a galley of type and scrambled it to make a type specim
<h6> Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s
unknown printer took a galley of type and scrambled it to make a type specim
</body>

</html>

Acompanhe, na Figura 2, a visualização da página do navegador, conforme o

Código 4.
 Figura 2 Resultado da visualização da página no navegador.

Elementos para de�nição de listas ordenadas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<ol>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
</ol>
</body>

</html>

Acompanhe, na Figura 3, a visualização da página do navegador descrita no

Código 5.
 Figura 3 Resultado da visualização da página no navegador.

O exemplo descrito no Código 6 permite a especi�cação do valor inicial da lis-

ta ordenada. Note que os elementos da lista começam a partir do número 50.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<ol>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
</ol>
</body>

</html>

Acompanhe, na Figura 4, a visualização da página do navegador conforme o

Código 6.
 Figura 4 Resultado da visualização da página no navegador.

Também é possível especi�car qual o tipo de numerados será empregado na

lista, por exemplo, letras do alfabeto em minúsculo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<ol type="a">
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
</ol>
</body>

Veri�que, na Figura 5, a visualização da página do navegador de acordo com

Código 7.
 Figura 5 Resultado da visualização da página no navegador.

É possível, também, utilizar algarismos romanos. Para isso, basta alterar a

propriedade para ou . A letra minúscula exibe os algarismos romanos
em minúsculo, enquanto a letra maiúscula produz o efeito contrário.
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<ol type="i">
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Ipsum has been the industry’s standard dummy text ever since the 150
printer took a galley of type and scrambled it to make a type specim
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Ipsum has been the industry’s standard dummy text ever since the 150
printer took a galley of type and scrambled it to make a type specim
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Ipsum has been the industry’s standard dummy text ever since the 150
printer took a galley of type and scrambled it to make a type specim
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Ipsum has been the industry’s standard dummy text ever since the 150
printer took a galley of type and scrambled it to make a type specim
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Ipsum has been the industry’s standard dummy text ever since the 150
printer took a galley of type and scrambled it to make a type specim
</ol>
</body>

O resultado do Código 8 é apresentado como a seguir.

 Figura 6 Resultado da visualização da página no navegador.

Elementos para de�nição de listas não ordenadas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<ul>
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
<li>Lorem Ipsum is simply dummy text of the printing and typesetting industr
Lorem Ipsum has been the industry’s standard dummy text ever since t
unknown printer took a galley of type and scrambled it to make a typ
</ul>
</body>

Veri�que, na Figura 7, a visualização da página do navegador de acordo com o

Código 9.
 Figura 7 Resultado da visualização da página no navegador.

A melhor forma para aprender a fazer páginas web é fazendo-as. Então, va-
mos a um exemplo mais complexo. Nele uma página web é construída com os
principais elementos disponíveis na linguagem HTML. Você pode notar a uti-
lização de parágrafos, títulos e listas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Título principal do texto </h1>
<p> Aqui você coloca o texto da sua página.
Para dividir os parágrafos, usa-se a tag &lt;p&gt;
</p>

<p>
Este é um novo parágrafo, o qual
pode ser formado por várias linhas.
</p>

<h2>Outro Título</h2>

Para inserir uma quebra de linha, usa-se a tag < br/>,

<br /> certo?
A tag <b> faz com que o texto envolvido fique destacado, ou negrito</
<p>
Para fazer uma lista, usa-se o par de tags < ul>
< /ul>, como segue:
</p>

<ul>
<li>Item 1 </li>
<li>Item 2 </li>
<li>Item 3 </li>
</ul>
</body>

</html>

Assim que o exemplo for salvo no editor de texto com a extensão .htm ou
.html, você poderá visualizá-lo em um browser e ver o resultado, como mostra
a Figura 8.
 Figura 8 Exemplo de uma página HTML.

Os browsers mais antigos não interpretam caracteres, como acentuação, pon-

tuação e outros símbolos ASCII. As notações em marcações desse tipo podem
ser representadas com notações especiais.

Essas notações especiais sempre se iniciam com & (e comercial) e encerram-

se com ; (ponto e vírgula).

A seguir, apresentamos o Quadro 1, com algumas destas notações.

Notações especiais.
É possível ainda utilizar facilidades de acentuação (padrão do Windows, por
exemplo) em documentos HTML.

No entanto, essa forma de acentuação somente poderá ser visualizada no

computador que reconhecer este padrão especí�co.

O Quadro 2 mostra-nos o padrão para acentuação – ISO Latin-1 alphabet – se-

melhante ao utilizado para exibir caracteres das marcações e que poderá ser
visualizado pela maioria das máquinas.

Padrão para acentuação.

&xacute; em que é uma letra qualquer, maiúscula ou

Acento agudo
minúscula

&xgrave; em que é uma letra qualquer, maiúscula ou

Acento grave
minúscula

&xcirc; em que é uma letra qualquer, maiúscula ou mi-

Acento circun�exo
núscula

&xtilde; em que é uma letra qualquer, maiúscula ou

Letra com til
minúscula

&xuml; em que é uma letra qualquer, maiúscula ou mi-

Letra com trema
núscula

Letras unidas &Aelig; = Æ e &aelig; = æ

Letra com argola &Aring; = Å e &aring = å

Cedilha &Ccedil; = Ç e &ccedil= ç

N com til &Ntilde; = Ñ e &ntilde; = ñ

O cortado &Oslash; = Ø e &oslash; = ø

thorn maiúsculo &THORN = Þ (Icelandic)

thorn minúsculo &thorn= þ (Icelandic)

eth minúsculo &eth ð (Icelandic)

eth maiúsculo &ETH;= Ð (Icelandic)

Caractere alemão &szlig = ß

5. Tags de formatação
Você pode formatar os elementos de suas páginas usando tags de formatação
para alterar a fonte, o tamanho, o alinhamento dos elementos e outras caracte-
rísticas. As tags HTML podem conter atributos. No entanto, é importante des-
tacar que a formatação de páginas utilizando HTML é obsoleta, uma vez que a
W3C recomenda a formatação com as folhas de estilo em cascata.

– atributo de alinhamento, e esses atributos podem conter valores, por

exemplo: justify – valor que indica justi�cado.

O alinhamento padrão, com o qual vêm con�gurados os browsers, é à esquer-

da. Você pode adicionar o atributo ALIGN dentro das tags que marcam os títu-
los, parágrafos etc.

Além disso, você verá no decorrer deste estudo que podemos alinhar também
�guras, tabelas, frames. Neste caso, sempre que você usar tag de fechamento,
esta deve corresponder à última tag de abertura não fechada, mesmo que você
esteja usando tags que não precisem de fechamento.

O Código 11 demonstra os principais tipos de alinhamentos que podem ser

aplicados em parágrafos, observe:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1> Alinhamento Padrão </h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. L
Ipsum has been the industry’s standard dummy text ever since the 1500s, when
printer took a galley of type and scrambled it to make a type specimen book.
survived not only five centuries, but also the leap into electronic typesett
essentially unchanged. It was popularised in the 1960s with the release of L
sheets containing Lorem Ipsum passages, and more recently with desktop publi
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1> Alinhamento Esquerda </h1>
<p align="left">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. L
Ipsum has been the industry’s standard dummy text ever since the 1500s, when
printer took a galley of type and scrambled it to make a type specimen book.
survived not only five centuries, but also the leap into electronic typesett
essentially unchanged. It was popularised in the 1960s with the release of L
sheets containing Lorem Ipsum passages, and more recently with desktop publi
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1> Alinhamento Centralizado </h1>
<p align="center">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. L
Ipsum has been the industry’s standard dummy text ever since the 1500s, when
printer took a galley of type and scrambled it to make a type specimen book.
survived not only five centuries, but also the leap into electronic typesett
essentially unchanged. It was popularised in the 1960s with the release of L
sheets containing Lorem Ipsum passages, and more recently with desktop publi
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1> Alinhamento Direita </h1>
<p align="right">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. L
Ipsum has been the industry’s standard dummy text ever since the 1500s, when
printer took a galley of type and scrambled it to make a type specimen book.
survived not only five centuries, but also the leap into electronic typesett
essentially unchanged. It was popularised in the 1960s with the release of L
sheets containing Lorem Ipsum passages, and more recently with desktop publi
 software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1> Alinhamento Justificado </h1>
<p align="justify">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. L
Ipsum has been the industry’s standard dummy text ever since the 1500s, when
printer took a galley of type and scrambled it to make a type specimen book.
survived not only five centuries, but also the leap into electronic typesett
essentially unchanged. It was popularised in the 1960s with the release of L
sheets containing Lorem Ipsum passages, and more recently with desktop publi
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>

</html>

Observe, na Figura 9, a visualização da página do navegador.

 Figura 9 Resultado da visualização da página no navegador.

Existem dois estilos de tags de formatação que são as de estilo lógico e as de

estilo físico.

• As indicam como o elemento envolvido deverá ser

utilizado, e não como ele deverá ser apresentado. O browser visualizará o
elemento contido nessas tags à sua própria maneira, ou seja, você não po-
derá ter certeza de que um texto em itálico será apresentado sempre em
itálico.
• As indicam exatamente como o texto em destaque
deverá ser apresentado para o visitante. Essas tags são absolutas, ou seja,
todos os browsers as interpretarão da mesma maneira. Se algum browser
não entender alguma dessas tags, ela será ignorada.

O par de tags <font></ font > pode conter atributos de formatação para alinha-
mento (align), tipo de fonte (face), cores (color) e tamanho dos textos (size)
contidos.

Você pode especi�car vários valores no atributo (face). Na falta de uma fonte,
o browser formatará o texto de acordo com a próxima opção. O valor para o
atributo (color) pode ser especi�cado com o nome da cor (em inglês) ou então
com o valor hexadecimal que representa a cor. Para tanto, observe os exem-
plos na tabela de cores a seguir.

Tabela de cores
As cores em HTML devem ser especi�cadas no formato RGB (Red, Green,
Blue), em hexadecimal, ou com o nome da cor, em inglês. Quando utilizar o va-
lor hexadecimal da cor, por exemplo: “#FFFFFF”, será a cor branca.

Quadro de cores.

#FFFFFF (Branco) #00FF00 (Verde) #00FFFF (Ciano) #C0C0C0 (Cinza)

 #FFFF00
#000000 (Preto) #0000FF (Azul) #BC8F8F (Pink)
(Amarelo)

#FF0000 #FF00FF #800000

#4F2F4F (Violeta)
(Vermelho) (Magenta) (Marrom)

O Código 12 demonstra algumas das principais propriedades da tag <font>,

bem como a de�nição de cores e tamanhos. Conforme descrito no Quadro 3, é
importante observar no exemplo as diversas maneiras para de�nição de co-
res.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<font color="red" face="Arial Black">
<h1>Exemplo 01 </h1>
</font>

<font color="blue" face="Arial" size="+2">

<p>
Lorem Ipsum is simply dummy text of the printing and typesetting ind
Ipsum has been the industry’s standard dummy text ever since the 150
printer took a galley of type and scrambled it to make a type specim
survived not only five centuries, but also the leap into electronic
essentially unchanged. It was popularised in the 1960s with the rele
sheets containing Lorem Ipsum passages, and more recently with deskt
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</font>

<font color="red" face="Arial Black">

<h1>Exemplo 02 </h1>
</font>
<font color="#0000FF" face="Verdana" size="+3">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting ind
Ipsum has been the industry’s standard dummy text ever since the 150
printer took a galley of type and scrambled it to make a type specim
survived not only five centuries, but also the leap into electronic
essentially unchanged. It was popularised in the 1960s with the rele
sheets containing Lorem Ipsum passages, and more recently with deskt
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</font>

<font color="red" face="Arial Black">

<h1>Exemplo 03 </h1>
</font>
<font color="#000000" face="Comic Sans MS" size="+1">
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting ind
Ipsum has been the industry’s standard dummy text ever since the 150
 printer took a galley of type and scrambled it to make a type specim
survived not only five centuries, but also the leap into electronic
essentially unchanged. It was popularised in the 1960s with the rele
sheets containing Lorem Ipsum passages, and more recently with deskt
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</font>
</body>

</html>

Observe, na Figura 10, a visualização da página do navegador.

 Figura 10 Resultado da visualização da página no navegador.

Ao escrever seus códigos, todos os espaços e os parágrafos que você iniciar se-
rão ignorados, caso você não use as tags que os representam.

O par de tags <pre></ pre >, utilizado para texto pré-formatado, faz com que to-
dos os espaços e parágrafos sejam respeitados. Com a pré-formatação, pode-se
controlar o espaçamento com a barra de espaço e colocar o texto em pratica-
mente qualquer lugar da página.
Apesar da vantagem dessa forma de alinhamento arbitrário, a tag < pre > mu-
da o tipo de caractere para uma fonte monoespaçada. O exemplo do Código 13
demonstra a utilização da tag <pre>.
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Parágrafo normal</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. L
Ipsum has been the industry’s standard dummy text ever since the 1500s, when
printer took a galley of type and scrambled it to make a type specimen book.
survived not only five centuries, but also the leap into electronic typesett
essentially unchanged. It was popularised in the 1960s with the release of L
sheets containing Lorem Ipsum passages, and more recently with desktop publi
software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
<h1>Parágrafo com pré-formatação</h1>
<pre>

Lorem Ipsum is simply dummy text of the

printing and typesetting industry.

Lorem Ipsum has been the industry’s standard

dummy text ever since the 1500s, when an unknown
printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only
five centuries, but also the leap into electronic
typesetting, remaining essentially unchanged.

was popularised in the 1960s with the release

of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem
Ipsum.
</pre>
</body>

</html>
 Figura 11 Resultado da visualização da página no navegador.

A seguir, veremos que uma fonte monoespaçada é aquela em que todos os ca-
racteres ocupam o mesmo espaço horizontal. Ao contrário da fonte proporcio-
nal, em que o ocupa menos espaço do que o , por exemplo.

O Código 14 apresenta um exemplo detalhado de formatação de texto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>TAGS DE FORMATAÇÃO </title>
</head>

<body bgcolor="#E1FDEC" leftMargin="0" topMargin="0">

<h3 align="center">
<font face="Verdana" color="green">

Apresentação
</font>
</h3>
<blockquote>
<p align="justify">
<font color="#000000" size="2" face="Verdana">
Este exemplo mostra como usar as principais <strong>
esteja com dificuldades, copie este exemplo no seu e
e salve-o com a extensão <b>.htm</b> ou <strong
página no seu navegador e depois mude o conteúdo des
que você achar conveniente. Se você ainda não começo
criar seu <em>site</em>.<br /> Aqui você pode coloca
com uma apresentação simples e em seguida...
cursos acadêmicos. Enfim... Você é o criador e pode
incrementar como quiser.
</font>
</p>
<p>
<font color="#00B789" size="2" face="Verdana"> <b> Você também pode
uma lista em sua página: </b></font>
</p>

<font face="Verdana" color="black" size="2">

<ul>
<li><b>Primeiro item de sua lista: </b> O que você gostaria
<li><b>Este é o segundo item: </b> Você pode colocar quantos
</ul>
</font>
</blockquote>
</body>

</html>

Após codi�car, a saída para este exemplo é demonstrada na Figura 12.

 Figura 12 Tags de formatação.

Neste tópico você teve a oportunidade de aprender sobre a aplicabilidade de

algumas tags. No tópico a seguir, serão apresentados hyperlinks e âncoras.

6. Hyperlinks e âncoras
Os pontos que ligam esses hipertextos são chamados de hyperlinks, links ou
âncoras de hipertexto. A tag que indica a região a ser tratada como um hyper-
link é o par <a></a>. Dentro dessa tag, na forma de atributo, é colocada a refe-
rência ao arquivo ligado. A referência indica a URL do documento. Quando o
visitante clicar sobre o trecho realçado pela âncora de hipertexto, o arquivo li-
gado será requisitado ao servidor e mostrado na janela do navegador.

Para criar um link com uma página, você pode usar a seguinte sintaxe:

<a href=http://www.claretiano.edu.br/biblioteca/biblio.htm>Biblioteca</a>

Nesse exemplo, o texto “Biblioteca” aparece no navegador, realçado de alguma

forma, normalmente em uma cor diferente e sublinhado (a maioria dos nave-
gadores utiliza o texto na cor azul e sublinhado). O cursor do mouse
transforma-se em uma mãozinha quando colocado sobre o texto realçado.
Esse tipo de cursor (mãozinha) pode ser diferente se o programador assim o
indicar. Ao clicar no link, o endereço URL será aberto.

Quando o link apontar para um arquivo, no mesmo servidor, não é necessário

colocar a URL completa, pode-se especi�car o caminho relativo ao documen-
to. Se o arquivo estiver no mesmo diretório, basta indicar o seu nome:

<a href="index.html"> Biblioteca </a>

O link desse exemplo, quando clicado, chamará o arquivo index.html, que deve
estar no mesmo diretório da página em que este link se encontra. Se o docu-
mento estiver em um subdiretório (nível abaixo), no qual está o arquivo que
contém o link, é preciso indicá-lo.

<a href="../biblioteca/index.html"> Biblioteca </a>

Dessa forma, descerá um nível de diretório corrente e abrirá o arquivo in-

dex.html, que, por sua vez, está no diretório biblioteca.

Você pode usar o atributo target para indicar como quer visualizar a página
direcionada pelo hyperlink.

• target=”_blank” – para abrir a página destino em outra janela.

• target=”_self” – para abrir a página destino na mesma janela do hyper-
link.

Você já ouviu falar em inserir âncora? Para que serve esse comando?

Suponhamos que se trate de uma página extremamente longa, com vários ca-
pítulos. É trabalhoso e cansativo para o usuário que está vendo a página �car
“rolando” com o mouse. Portanto, você poderá fazer uma referência (âncora) a
qualquer parte do documento, facilitando assim a navegação.

Nesse caso, você pode criar um índice, usando âncoras para cada capítulo. A
âncora para um texto no mesmo documento �ca assim:
<a href="#Ref">Referências Bibliográficas</a>

Enquanto o alvo do link �ca dessa forma:

<a name=Ref>Referencias Bibliográficas</a>

Nesse exemplo, quando o visitante clicar no link Referências Bibliográ�cas,

ele será remetido ao ponto onde está a referência
<a name=Ref>Referências Bibliográ�cas</a>. A parte do texto referenciada (o
alvo de um link) não �ca realçada como os hyperlinks. Além de ser invisível,
não é obrigatório que exista um link apontando para ela.

Existe ainda um recurso com o qual é possível criar um item na página, que,
ao ser selecionado, abre uma janela, permitindo que se envie uma mensagem
eletrônica para um endereço especí�co. Para isso, utiliza-se mailto.

Essa propriedade é bastante utilizada para inserir um e-mail de dúvidas em

sua página. A sintaxe �ca a seguinte:

<a href="mailto:[email protected]">contato</a>

Dessa forma, ao clicar em contato, será aberta uma janela para o visitante en-
viar um e-mail para o endereço [email protected].

Observe, a seguir, um exemplo prático.

Algumas pessoas gostam de criar um mapa para o site, com a �nalidade de

indicar as possibilidades de navegação que o visitante pode percorrer. É uma
boa ideia para você aprender a inserir hyperlinks em seu site. Talvez você
queira disponibilizar algum texto com vários capítulos. Neste caso, você pode
criar um sumário, no topo da página, “linkado” com cada capítulo. Observe co-
mo �ca:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>HYPERLINKS E ÂNCORAS</title>
</head>

<body bgcolor="#FFF4EC" leftMargin="0" topMargin="0" vlink="#C58707" alink="#FFCC00"

<blockquote>
<a name="topo"></a>
<p>&nbsp;</p>
<p align="center">
<font color="#FF6633" size="2" face="Verdana">
<strong> APRENDENDO A CONSTRUIR UM <em>SITE</em> </strong
</font>
</p>
<p align="justify">
<font color="#000000" size="2" face="Verdana"><strong>1.
<a href="#introducao">Introdução</a></strong
</p>
<p align="justify">
<font color="#000000" size="2" face="Verdana"><strong>2.
<a href="#objetivos">Objetivos</a></strong></
</p>
<p align="justify">
<font color="#000000" size="2" face="Verdana"><strong>3.
<a href="#resultados">Resultados Esperados</
</p>
<p align="justify">
<font color="#000000" size="2" face="Verdana"><strong>4.
<a href="#conclusao">Conclusão</a></strong></
</p>

<p align="justify"> &nbsp; </p>

<p align="justify">
<font color="#000000" size="2" face="Verdana, Arial, Helvetica,
sans-serif"><strong><a name="introducao"></a> 1. Introdução </strong>
</font>
</p>

<p align="justify">
<font color="#000000" size="2" face="Verdana">A computação e
a <em>Internet </em>estão presentes em nosso cotidiano de fo
transparente. Ferramentas e linguagens de programação evolue
e os profissionais desta área são, de certa forma, obrigados
conhecimentos constantemente.
</font>
</p>

<p align="justify">
 <font color="#000000" size="2" face="Verdana">Nesta disciplina
de PROGRAMAÇÃO WEB é introduzida a linguagem HTML como
primeira forma de criação de ambientes num universo virtual.
um profissional de computação que não conheça HTML ...
</p>

<p align="justify">
<font color="#000000" size="2" face="Verdana">...</font>
</p>
<p align="right"><a href="#topo">topo</a></p>
<p align="justify">
<font color="#000000" size="2" face="Verdana"><strong><a name
</p>
<p align="justify">
<font color="#000000" size="2" face="Verdana">O objetivo desta
disciplina é oferecer formação básica na criação de ambiente
aprimorar e enriquecer os conhecimentos do(a) aluno(a) e pre
próximas disciplinas que abordarão este tema mais a fundo.
</p>

<p align="justify">
<font color="#000000" size="2" face="Verdana">...</font>
</p>
<p align="right"><a href="#topo">topo</a></p>
<p align="justify">
<font color="#000000" size="2" face="Verdana"><strong><a name
Esperados</strong></font>
</p>

<p align="justify">
<font color="#000000" size="2" face="Verdana">Espera-se que ao
fim desse curso, você esteja familiarizado(a) com a linguage
para avançar na construção de ambientes virtuais para as pró
</p>

<p align="justify">
<font color="#000000" size="2" face="Verdana">Ah! Também não
se esqueça que seu trabalho final nesta disciplina será a en
</font>
</p>

<p align="justify">
<font color="#000000" size="2" face="Verdana">Vamos lá...</font
</p>

<p align="justify">
<font color="#000000" size="2" face="Verdana">...
aproveite esses exemplos para criar as páginas do seu
</p>

<p align="justify">
<font color="#000000" size="2" face="Verdana">...</font>
 </p>
<p align="right"><a href="#topo">topo</a></p>
<p align="justify">
<font color="#000000" size="2" face="Verdana, Arial">
<strong><a name="conclusao"></a>6. Conclusão</strong
</font>
</p>
<p align="justify">
<font color="#000000" size="2" face="Verdana">...</font>
</p>
<p align="justify">
<font color="#000000" size="2" face="Verdana">...</font>
</p>
<p align="right"><a href="#topo">topo</a></p>
</blockquote>
</body>

</html>

Observe a saída para esse exemplo na Figura 13.

 Figura 13 Hyperlink e âncoras.

Neste tópico, apresentamos como você deve criar hiperlinks e âncoras. A se-
guir, você aprenderá a inserir imagens no seu site para torná-lo mais interes-
sante.

7. Imagens
Você já reparou que imagens dão um toque especial a um site?

E já ouviu falar que uma imagem vale mais do que mil palavras?

Pois bem, uma imagem, quando usada corretamente, pode transmitir mais in-
formações do que várias linhas de um texto, na tentativa de explicar determi-
nado assunto. Para inserir uma imagem, você pode utilizar a tag <img> e seus
atributos.

<img src="endereço da imagem gravada no disco rígido" />

O uso de imagens como hiperlinks no Windows:

<img src="C:\meu_site\imagens\imagem.gif" />

É importante destacar que esse tipo de referência a uma imagem, em que é es-
peci�cado o caminho completo, não funciona adequadamente na prática. Para
isso, são indicados caminhos relativos, como apresentada a seguir.

Para indicar o caminho relativo, você deve proceder da seguinte maneira:

<img src="imagens\imagem.gif" />

Você pode acrescentar, como atributo de imagens, as seguintes opções:

• src = “caminho_imagem”. Indica o caminho para o local onde está grava-

da a imagem que você quer exibir.
• alt = “descrição da imagem”. É um texto alternativo para imagem. É utili-
zado para garantir a acessibilidade da imagem, além disso, é exibido
quando a imagem não pode ser carregada.
• title = “texto”. Texto que aparecerá ao passar o mouse sobre a imagem.
• width = “pixel ou %”. Sempre se referirá à largura; neste caso, especi�ca a
largura da imagem. A de�nição da largura (ou altura) em pixels leva em
conta a resolução do dispositivo de visualização (monitor). A unidade de
medida % (percentagem) de�ne o tamanho de um elemento em relação a
outro elemento, por exemplo, as bordas da página.
• heigth = “pixel ou %”. Este atributo também sempre fará referência à altu-
ra, neste caso, especi�ca a altura da imagem.
• align = (left, right ou center). Este atributo sempre fará referência ao ali-
nhamento do conteúdo de uma tag. Nesse caso, para personalizar o ali-
nhamento da imagem, você pode especi�car: left, right ou center. O
exemplo, descrito no Código 16, demonstra a utilização de alinhamento
para imagem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis ar
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, consectetur adipi
elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, pe
himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nas
ridiculus mus. Proin imperdiet vulputate justo, in lobortis lorem consectetu
</p>
<p align="center">
<img src="imagem.jpg" alt="descrição da imagem" />
</p>
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis ar
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, consectetur adipi
elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, pe
himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nas
ridiculus mus. Proin imperdiet vulputate justo, in lobortis lorem consectetu
</p>
</body>

</html>

O resultado da execução do Código 16 pode ser visualizado na Figura 14.

 Figura 14 Resultado da visualização da página no navegador.

É possível também alinhar a imagem lado a lado com o texto da página. O

exemplo, Código 17, demonstra este tipo de alinhamento.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis ar
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, consectetur adipi
elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, pe
himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nas
ridiculus mus. Proin imperdiet vulputate justo, in lobortis lorem consectetu
</p>
<p align="justify">
<img src="imagem.jpg" alt="Imagem" align="right" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis ar
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, consectetur adipi
elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, pe
himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nas
ridiculus mus. Proin imperdiet vulputate justo, in lobortis lorem consectetu
</p>
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis ar
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, consectetur adipi
elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, pe
himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nas
ridiculus mus. Proin imperdiet vulputate justo, in lobortis lorem consectetu
</p>
</body>

</html>

O resultado da execução do Código 17 pode ser visualizado na Figura 15.

 Figura 15 Resultado da visualização da página no navegador.

Você ainda pode utilizar nas suas imagens os atributos a seguir:

• border = “pixel”. Quando usado, conterá o valor em pixel para a espessura

da borda, tornando-se útil para inserir bordas nas imagens.
• vspace = “pixel”. Propriedade usada para especi�car o espaço que deve
ser deixado acima e abaixo da imagem.
• hspace = “pixel”. Espaço que deve ser deixado nas laterais da imagem. O
Código 18 é um exemplo que ilustra as propriedades de espaçamento para
imagens.
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis ar
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, consectetur adipi
elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, pe
himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nas
ridiculus mus. Proin imperdiet vulputate justo, in lobortis lorem consectetu
</p>
<p align="justify">
<img src="imagem.jpg" alt="Imagem" border="1" align="left" vspace="50"
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis ar
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, consectetur adipi
elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, pe
himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nas
ridiculus mus. Proin imperdiet vulputate justo, in lobortis lorem consectetu
</p>
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis ar
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, consectetur adipi
elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, pe
himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nas
ridiculus mus. Proin imperdiet vulputate justo, in lobortis lorem consectetu
</p>
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean convallis ar
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, consectetur adipi
elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, pe
himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nas
ridiculus mus. Proin imperdiet vulputate justo, in lobortis lorem consectetu
</p>
</body>

</html>

O resultado da execução do Código 18 pode ser visualizado na Figura 16.

 Figura 16 Resultado da visualização da página no navegador.

Os formatos mais utilizados para inserção de imagens em páginas web são

GIF e JPG.

Você pode inserir uma imagem como fundo de página. Neste caso, o atributo
background da tag <BODY> indica o nome e o caminho da imagem que deseja
ter como fundo.
<body background="endereço da imagem no disco rígido" />

Procure usar imagens simples, com poucas variações de tons. Para �xar a
imagem de fundo, experimente usar a propriedade �xed.

<body background="imagens/imagem.jpg" bgproperties="fixed" />

As imagens podem ser links para arquivos dentro de um site. Para isso, faz-se
semelhante aos links de texto que você conhece, indicando o caminho para a
imagem que deverá ser aberta. Observe:

<a href="imagens/logo.gif"> </a>

8. Tabelas
As tabelas foram os principais recursos utilizados para disposição de elemen-
tos em uma página. Hoje em dia, essa prática não é mais recomendada, uma
vez que pode trazer problemas relativos à acessibilidade.

A utilização de tabelas em páginas web é indicada quando se deseja apresen-

tar dados de maneira tabulada. Por exemplo, a apresentação de um conjunto
de informações sobre produtos, ou até mesmo a respeito de clientes.

Você sabe como uma tabela é composta?

As tabelas são compostas de linhas, dentro das quais são colocadas colunas,
ou células, como alguns preferem chamá-las. Dentro das colunas, você pode
colocar texto, imagens ou até mesmo outras tabelas. Uma tabela pode conter
várias linhas, e uma linha pode conter várias colunas.

Neste material, utilizaremos o termo coluna para especi�car uma coluna in-
teira (com várias células) e o termo célula para especi�car um ponto de inter-
secção entre uma linha e uma coluna.

As tags para construir uma tabela são:

<table> e </ table >: para indicar o início e o fim de uma tabela.
<tr> e </tr>: para indicar o início e o fim de uma linha.
<th> e </th>: para indicar o início e o fim de uma coluna.
<td> e </td>: para indicar o início e o fim de uma coluna.

A única diferença entre as tags <th> e <td> é que a tag <th> marca o texto con-
tido na célula com ênfase; já a tag <td> necessita da tag <b> para que o texto �-
que enfatizado. Essa ênfase é interpretada pelos navegadores como negrito.

Observe no exemplo, a seguir, como é construída uma tabela com duas linhas
e duas colunas.

<table>
<tr>
<td>célula 1</td>
<td>célula 2</td>
</tr>
<tr>
<td>célula 3</td>
<td>célula 4</td>
</tr>
</table>

Você se lembra do recurso de mesclar células do Word? Aquele com o qual vo-
cê pode selecionar duas células de uma tabela e expandi-las para uma única?
O exemplo seguinte mostra o atributo COLSPAN, o qual permite que você faça
isso em HTML.

<table>
<tr>
<td colspan=2>célula expandida</td>
</tr>
<tr>
<td>célula 2</td>
<td>célula 3</td>
</tr>
</table>

Você pode controlar a largura da tabela com o atributo WIDTH e a largura da

borda com o atributo BORDER.

Você pode, também, de�nir vários outros atributos para controlar as dimen-
sões de toda a tabela, os espaços entre células e as margens dentro delas.
Além disso, é possível utilizar atributos de alinhamento, para alinhar os ele-
mentos, dentro da tabela, da mesma forma que um parágrafo comum.

A seguir, apresentaremos uma relação dos atributos que você poderá utilizar
para formatar tabelas, linhas ou colunas. Com alguns deles, você já está fami-
liarizado, uma vez que os estudou anteriormente. Aproveite para experimentar
como �ca mais agradável o aspecto visual do site ao usar esses atributos nas
tabelas.

border = “pixel”. Usado como atributo da tag <table>.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Exemplo de borda 1</h1>
<table border="1">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aen
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, c
elit. Class aptent taciti sociosqu ad litora torquent per co
himenaeos. Cum sociis natoque penatibus et magnis dis partur
ridiculus mus. Proin imperdiet vulputate justo, in lobortis
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aen
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, c
elit. Class aptent taciti sociosqu ad litora torquent per co
himenaeos. Cum sociis natoque penatibus et magnis dis partur
ridiculus mus. Proin imperdiet vulputate justo, in lobortis
</td>
</td>
</table>
<h1>Exemplo de borda 2</h1>
<table border="5">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aen
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, c
elit. Class aptent taciti sociosqu ad litora torquent per co
himenaeos. Cum sociis natoque penatibus et magnis dis partur
ridiculus mus. Proin imperdiet vulputate justo, in lobortis
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aen
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, c
elit. Class aptent taciti sociosqu ad litora torquent per co
himenaeos. Cum sociis natoque penatibus et magnis dis partur
ridiculus mus. Proin imperdiet vulputate justo, in lobortis
</td>
</td>
</table>
 <h1>Exemplo de borda 3</h1>
<table border="15">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aen
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, c
elit. Class aptent taciti sociosqu ad litora torquent per co
himenaeos. Cum sociis natoque penatibus et magnis dis partur
ridiculus mus. Proin imperdiet vulputate justo, in lobortis
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aen
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, c
elit. Class aptent taciti sociosqu ad litora torquent per co
himenaeos. Cum sociis natoque penatibus et magnis dis partur
ridiculus mus. Proin imperdiet vulputate justo, in lobortis
</td>
</td>
</table>
<h1>Exemplo de borda 4</h1>
<table border="30">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aen
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, c
elit. Class aptent taciti sociosqu ad litora torquent per co
himenaeos. Cum sociis natoque penatibus et magnis dis partur
ridiculus mus. Proin imperdiet vulputate justo, in lobortis
</td>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aen
eget lectus bibendum ultrices. Lorem ipsum dolor sit amet, c
elit. Class aptent taciti sociosqu ad litora torquent per co
himenaeos. Cum sociis natoque penatibus et magnis dis partur
ridiculus mus. Proin imperdiet vulputate justo, in lobortis
</td>
</td>
</table>
</body>

</html>

O resultado da execução do Código 21 pode ser visualizado nas Figuras 17 e 18.

Figura 17 Resultado da visualização da página no navegador.
 Figura 18 Resultado da visualização da página no navegador.

O atributo cellpadding = “pixel” é usado para especi�car o espaço que deve ser
deixado entre as células de uma tabela. Também é usado na tag <table>. O
exemplo a seguir demonstra a utilização e o resultado da propriedade cellpad-
ding.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table border="1" cellpadding="30" bgcolor="#E8E8E8">
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
</tr>
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
</tr>
</table>
</body>

</html>

O resultado da execução do Código 22 pode ser visualizado na Figura 19.

 Figura 19 Resultado da visualização da página no navegador.

O valor do atributo cellspacing = “pixel” especi�ca o espaçamento dentro da

célula, o qual deverá ser inserido na tag <table>. O exemplo a seguir demons-
tra a utilização da tag cellspacing.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table border="1" cellspacing="30" bgcolor="#E8E8E8">
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
</td>
</tr>
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
</td>
</tr>
</table>
</body>

</html>

O resultado da execução do Código 24 pode ser visualizado na Figura 20.

 Figura 20 Resultado da visualização da página no navegador.

A seguir, apresentamos a utilização dos atributos bordercolor e colspan, obser-

ve:

• bordercolor = “nome ou valor hexadecimal”. Sempre que esse atributo for

usado, ele especi�cará a cor da borda.
• colspan = “valor numérico”. O atributo colspan é usado para colunas e
tem o mesmo efeito que a opção “mesclar células” do Word. O exemplo a
seguir demonstra a utilização da propriedade colspan.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table border="1">
<tr>
<td colspan="2" align="center">
<font face="Arial" color="red" size="+1">Mesclagem
de coluna</font>
</td>
</tr>
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="Arial" color="red" size="+1">Mesclagem
de coluna</font>
</td>
</tr>
</table>
</body>

</html>

O resultado da execução do Código 24 pode ser visualizado na Figura 21.

 Figura 21 Resultado da visualização da página no navegador.

O atributo rowspan = “valor numérico” é semelhante ao atributo colspan, só

que ele é utilizado para mesclar linhas. O exemplo a seguir demonstra a utili-
zação da propriedade rowspan.
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table border="1">
<tr>
<td rowspan="4" align="center">
<font face="Arial" color="red" size="+1">Mesclagem
linhas</font>
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
</td>
</tr>
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
</td>
</tr>
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
</td>
</tr>
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
</td>
</tr>
</table>
</body>

</html>

O resultado da execução do Código 25 pode ser visualizado na Figura 22.

 Figura 22 Resultado da visualização da página no navegador.

Para incrementar um pouco mais o seu site, você poderá utilizar os atributos a
seguir:

• background = “pixel ou imagem”. Este atributo é usado para inserir uma

imagem de fundo em uma célula ou tabela. Se você quiser, pode indicar
uma imagem como valor desse atributo e terá o efeito de moldura.
• bgcolor = “nome ou valor hexadecimal”. Este atributo indica uma cor de
fundo da tabela, da linha ou da célula.
• width = “pixel ou %”. Este atributo sempre se refere à largura, assim como
no caso de imagens, só que, desta vez, indica a largura da tabela ou da cé-
lula.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Largura da Tabela em Pixels</h1>
<table border="1" width="500px">
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
</tr>
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
</tr>
</table>
<h1>Largura da Tabela em Porcentagem</h1>
<table border="1" width="50%">
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
</tr>
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
 book.
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
</tr>
</table>
</body>

</html>

Observe, na Figura 23, o resultado da execução do Código 26.

 Figura 23 Resultado da visualização da página no navegador.

Para alinhar os dados da tabela, você poderá utilizar os seguintes atributos:

• height = “pixel ou %”. Indica a altura para uma tabela ou célula.

• align = “center, left, right, justify”. O atributo align sempre indicará alinha-
mento horizontal e, neste caso, pode referir-se ao alinhamento de uma ta-
bela inteira ou do conteúdo das células.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Alinhamento da Tabela - Esquerda</h1>
<table border="1" width="500px" align="left">
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
</tr>
</table>
<h1>Alinhamento da Tabela - Centralizado</h1>
<table border="1" width="500px" align="center">
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
</tr>
</table>
<h1>Alinhamento da Tabela - Direita</h1>
<table border="1" width="500px" align="right">
<tr>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
<td>Lorem Ipsum has been the industry’s standard dummy text ever sin
when an unknown printer took a galley of type and scrambled
book.
</td>
</tr>
 </table>
</body>

</html>

Na Figura 24, você poderá visualizar o resultado da página do navegador após

a execução do Código 27.

Figura 24 Resultado da visualização da página no navegador.

O atributo valign = “baseline, bottom, middle ou top” é utilizado para alinhar

verticalmente o conteúdo da célula.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Alinhamento Vertical</h1>
<table border="1" width="100%">
<tr>
<td valign="top">Lorem Ipsum has been the industry’s standard dummy
since the 1500s, when an unknown printer took a galley of ty
a type specimen book.
</td>
<td valign="middle">Lorem Ipsum has been the industry’s standard dum
since the 1500s, when an unknown printer took a galley of ty
a type specimen book.
</td>
<td valign="bottom">Lorem Ipsum has been the industry’s standard dum
since the 1500s, when an unknown printer took a galley of ty
a type specimen book.
</td>
</tr>
</table>
</body>

</html>

Observe, na Figura 25, o alinhamento vertical da coluna descrito no Código 28.

 Figura 25 Resultado da visualização da página no navegador.

Este exemplo detalhado não aborda todas as opções para a criação de tabelas.
Sinta-se à vontade para fazer em suas páginas o que julgar mais conveniente.
O Código 29 demonstra o uso das tabelas na estruturação das páginas.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Tabelas</title>
</head>

<body bgcolor="#000000" leftmargin="0" topmargin="0">

<table cellspacing="0" cellpadding="0" width="100%" border="0">
<tr>
<td height="446">
<table height="446" cellspacing="0" cellpadding="0"
<tr>
<td width="148" valign="top"><img height
</td>
<td width="602" valign="top"><img height
border="0"><br /><br
<table width="75%" border="0"
<tr>
<td>
<font

</td>
</tr>
</table> <br /><br /><br /><
<table width="89%" border="0"
<tr>
<td width="25%"

<td width="25%"

<td width="25%"

<td><img alt

</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

</html>

Se você salvar o Código 29 e visualizá-lo em um browser, verá a saída, confor-

me demonstrado na Figura 26.
 Figura 26 Tabelas.

O próximo exemplo, Código 30, demonstra o uso de tabelas na estruturação de

páginas. Neste exemplo, a estrutura de uma página é dividida em quatro par-
tes, denominadas: cabeçalho, menu, conteúdo e rodapé. É importante destacar
que, apesar de possível, a estruturação de páginas utilizando tabelas não é re-
comendada pela W3C. Este exemplo visa apenas demonstrar a aplicação de
tabelas com tal propósito.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table border="1" width="100%">
<tr>
<td colspan="2" align="center">
<font face="Verdana" size="+1">
Cabeçalho
</font>
</td>
</tr>
<tr>
<td width="12%" align="center" valign="top">
<font face="Verdana" size="+1">
Menu
</font>
</td>
<td>
<font face="Verdana" size="+1">
Conteúdo
</font>
<font face="Verdana" size="-1">
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adip
eget lectus bibendum ultrices. Lorem ipsum d
elit. Class aptent taciti sociosqu ad litora
himenaeos. Cum sociis natoque penatibus et m
ridiculus mus. Proin imperdiet vulputate jus
sodales tincidunt tincidunt. Donec ac massa
aptent taciti sociosqu ad litora torquent pe
Phasellus quam leo, accumsan quis porttitor
enim, ultricies in sagittis id, facilisis in
id molestie massa placerat.
</p>
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adip
eget lectus bibendum ultrices. Lorem ipsum d
elit. Class aptent taciti sociosqu ad litora
himenaeos. Cum sociis natoque penatibus et m
ridiculus mus. Proin imperdiet vulputate jus
sodales tincidunt tincidunt. Donec ac massa
 aptent taciti sociosqu ad litora torquent pe
Phasellus quam leo, accumsan quis porttitor
enim, ultricies in sagittis id, facilisis in
id molestie massa placerat.
</p>
</font>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<font face="Verdana" size="+1">
Rodapé
</font>
</td>
</tr>

</table>
</body>

</html>

Na Figura 27, você poderá visualizar o resultado do Código 30.

 Figura 27 Resultado da visualização da página no navegador.

Para construir um site contendo uma estrutura de navegação baseada em ta-

belas, é necessário que uma tabela seja inserida no interior da célula corres-
pondente ao menu. Caso contrário, a estrutura da tabela será prejudicada e o
menu não será exibido adequadamente. Para ilustrar essa implementação,
considere um site contendo três páginas, denominadas: index.html, pagi-
na1.html e pagina2.html. Os Códigos 31, 32 e 33 ilustram a elaboração de um
site, bem como a vinculação das páginas por meio de um menu associado a
uma estrutura de navegação baseada em hiperlinks.

No Código 31 é apresentada a implementação da página index.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table border="0" cellpadding="10" width="100%">
<tr>
<td colspan="2" align="center" bgcolor="blue">
<font face="Verdana" size="+1" color="white">
Cabeçalho
</font>
</td>
</tr>
<tr>
<td width="15%" align="center" valign="top" bgcolor="#CECECE"
<font face="Verdana" size="+1">
<p> <b>Menu</b> </p>
</font>

<table border="1" cellspacing="2" width="100%" bgcolor

<tr>
<td align="center">
<a href="pagina1.html">
Página 1
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="pagina2.html">
Página 2
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="index.html">
Index
</a>
</td>
</tr>
</table>
</td>
 <td>
<font face="Verdana" size="+3" color="black">
Index
</font>
<font face="Verdana" size="-1">
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adip
eget lectus bibendum ultrices. Lorem ipsum d
elit. Class aptent taciti sociosqu ad litora
himenaeos. Cum sociis natoque penatibus et m
ridiculus mus. Proin imperdiet vulputate jus
sodales tincidunt tincidunt. Donec ac massa
aptent taciti sociosqu ad litora torquent pe
Phasellus quam leo, accumsan quis porttitor
enim, ultricies in sagittis id, facilisis in
id molestie massa placerat.
</p>
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adip
eget lectus bibendum ultrices. Lorem ipsum d
elit. Class aptent taciti sociosqu ad litora
himenaeos. Cum sociis natoque penatibus et m
ridiculus mus. Proin imperdiet vulputate jus
sodales tincidunt tincidunt. Donec ac massa
aptent taciti sociosqu ad litora torquent pe
Phasellus quam leo, accumsan quis porttitor
enim, ultricies in sagittis id, facilisis in
id molestie massa placerat.
</p>
</font>
</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="blue">
<font face="Verdana" size="+1" color="white">
Rodapé
</font>
</td>
</tr>
</table>
</body>

</html>

Na Figura 28, você visualizará o resultado da página do navegador após a exe-

cução do Código 31.
Figura 28 Resultado da visualização da página no navegador.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table border="0" cellpadding="10" width="100%">
<tr>
<td colspan="2" align="center" bgcolor="blue">
<font face="Verdana" size="+1" color="white">
Cabeçalho
</font>
</td>
</tr>
<tr>
<td width="15%" align="center" valign="top" bgcolor="#CECECE"
<font face="Verdana" size="+1">
<p> <b>Menu</b> </p>
</font>

<table border="1" cellspacing="2" width="100%" bgcolor

<tr>
<td align="center">
<a href="pagina1.html">
Página 1
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="pagina2.html">
Página 2
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="index.html">
Index
</a>
</td>
</tr>
</table>
</td>
 <td>
<font face="Verdana" size="+3" color="black">
Página 1
</font>
<font face="Verdana" size="-1">
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adip
eget lectus bibendum ultrices. Lorem ipsum d
elit. Class aptent taciti sociosqu ad litora
himenaeos. Cum sociis natoque penatibus et m
ridiculus mus. Proin imperdiet vulputate jus
sodales tincidunt tincidunt. Donec ac massa
aptent taciti sociosqu ad litora torquent pe
Phasellus quam leo, accumsan quis porttitor
enim, ultricies in sagittis id, facilisis in
id molestie massa placerat.
</p>
<ol>
<li>Lorem ipsum dolor sit amet, consectetur
eget lectus bibendum ultrices. Lorem
<li>Lorem ipsum dolor sit amet, consectetur
eget lectus bibendum ultrices. Lorem
<li>Lorem ipsum dolor sit amet, consectetur
eget lectus bibendum ultrices. Lorem
<li>Lorem ipsum dolor sit amet, consectetur
eget lectus bibendum ultrices. Lorem
</ol>
</font>
</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="blue">
<font face="Verdana" size="+1" color="white">
Rodapé
</font>
</td>
</tr>
</table>
</body>

</html>

O resultado da codi�cação da página1.html é apresentado na Figura 29.

 Figura 29 Resultado da visualização da página no navegador.

E, por �m, o Código 33 implementa a pagina2.html, a qual contém algumas

imagens e parágrafos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table border="0" cellpadding="10" width="100%">
<tr>
<td colspan="2" align="center" bgcolor="blue">
<font face="Verdana" size="+1" color="white">
Cabeçalho
</font>
</td>
</tr>
<tr>
<td width="15%" align="center" valign="top" bgcolor="#CECECE"
<font face="Verdana" size="+1">
<p> <b>Menu</b> </p>
</font>

<table border="1" cellspacing="2" width="100%" bgcolor

<tr>
<td align="center">
<a href="pagina1.html">
Página 1
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="pagina2.html">
Página 2
</a>
</td>
</tr>
<tr>
<td align="center">
<a href="index.html">
Index
</a>
</td>
</tr>
</table>
</td>
 <td>
<font face="Verdana" size="+3" color="black">
Página 2
</font>
<br /><br />
<img src="http://www.claretiano.edu.br/imagens/logo-ead-smal
claretiano" />
<font face="Verdana" size="-1">
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adip
eget lectus bibendum ultrices. Lorem ipsum d
elit. Class aptent taciti sociosqu ad litora
himenaeos. Cum sociis natoque penatibus et m
ridiculus mus. Proin imperdiet vulputate jus
sodales tincidunt tincidunt. Donec ac massa
aptent taciti sociosqu ad litora torquent pe
Phasellus quam leo, accumsan quis porttitor
enim, ultricies in sagittis id, facilisis in
id molestie massa placerat.
</p>
<img src="http://www.claretiano.edu.br/imagens/logo-
claretiano" />
</font>
</td>
</tr>
<tr>
<td colspan="2" align="center" bgcolor="blue">
<font face="Verdana" size="+1" color="white">
Rodapé
</font>
</td>
</tr>
</table>
</body>

</html>

Para concluir este exemplo, observe na Figura 30 o resultado da visualização

da página do navegador.
 Figura 30 Resultado da visualização da página no navegador.

O próximo exemplo demonstra outra maneira de estruturação de uma página

web utilizando tabelas. Neste exemplo, a página tem um layout horizontal,
tanto na apresentação do conteúdo quanto na da estrutura de navegação.

Para exempli�car, imagine a elaboração de um site contendo cinco páginas

web denominadas: pagina1.html; pagina2.html; pagina3.html; pagina4.html e
pagina5.html. Além disso, o site contém uma página inicial chamada de in-
dex.html.

O Código 34 demonstra o conteúdo da página inicio.html.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table border="0" width="100%" cellpadding="20" cellspacing="0">
<tr bgcolor="#000080">
<td colspan="7">
<font color="#FFFFFF" face="Arial Black">
<h1 align="center">
Título da Página
</h1>
</font>
</td>
</tr>
<tr bgcolor="#6495ED" align="center">
<td><a href="pagina1.html" alt="Visite a página 1">Página 1</
<td><a href="pagina2.html" alt="Visite a página 2">Página 2</
<td><a href="pagina3.html" alt="Visite a página 3">Página 3</
<td><a href="pagina4.html" alt="Visite a página 4">Página 4</
<td><a href="pagina5.html" alt="Visite a página 5">Página 5</
<td>&nbsp;</td>
<td><a href="inicio.html" alt="Visite a página inicial">Início
</tr>
<tr bgcolor="#E8E8E8">
<td colspan="7">
<h2>Conteúdo</h2>
<p align="justify">
Lorem ipsum dolor sit amet, consectetur adipiscing e
lacinia nec porta in, fringilla ut metus. Pellentesq
condimentum fermentum eu lorem. Etiam lacus mi, soda
ac eros. Curabitur dignissim, erat vitae bibendum pr
vitae dignissim mauris eros at quam. Aliquam erat vo
consectetur. Sed dictum orci vehicula tortor vehicul
non diam dui, in posuere lectus. Aliquam arcu tortor
ac leo. Nullam non nisi id lorem sollicitudin hendre
sagittis consequat, nisi erat consectetur nulla, ac
quis ante mauris.
</p>
<p align="justify">
In eleifend egestas metus, a lacinia urna pretium ac
feugiat rhoncus. Integer nisl justo, lacinia eu tinc
Vestibulum ante ipsum primis in faucibus orci luctus
 Nullam id augue nunc, et vehicula elit. Donec mattis
ultrices adipiscing facilisis. Vivamus diam ante, su
semper eu odio. Suspendisse quis metus nisl, sit ame
orci eget ligula mollis gravida. Morbi lacinia diam
ligula malesuada odio tempor convallis eget at nisl.
Curabitur dignissim cursus nunc, in tempus justo cur
suscipit mi. Ut porttitor consectetur nulla, ut aliq
</p>
<p align="justify">
Nam placerat ultrices nibh nec condimentum. Aliquam
aliquam blandit dui commodo. Curabitur tellus lacus,
molestie eget augue. Aenean congue risus id lacus ve
neque, quis hendrerit justo. Nullam scelerisque mole
non mi varius ornare. Pellentesque mi tortor, sodale
eros. Donec et aliquet nibh. Nam mauris tortor, moll
arcu. Aliquam interdum tempor luctus. Vestibulum id
Nullam congue laoreet odio, non interdum sem element
elementum lobortis. Curabitur vulputate convallis an
congue rhoncus tortor a faucibus. Praesent tincidunt
sed justo et neque porttitor posuere in vel lacus. N
</p>
</td>
</tr>
</table>
</body>

</html>

Na Figura 31, você poderá visualizar a saída da execução do Código 34.

 Figura 31 Resultado da visualização da página no navegador.

A estruturação das demais páginas (pagina1.html até pagina5.html) deve se-

guir o mesmo padrão da página inicio.html. Assim, o Código 35 demonstra o
conteúdo da página “pagina1.html”.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table border="0" width="100%" cellpadding="20" cellspacing="0">
<tr bgcolor="#000080">
<td colspan="7">
<font color="#FFFFFF" face="Arial Black">
<h1 align="center">
Título da Página
</h1>
</font>
</td>
</tr>
<tr bgcolor="#6495ED" align="center">
<td><a href="pagina1.html">Página 1</a>
< <td><a href="pagina2.html" alt="Visite a página 2"
</td>
<td><a href="pagina3.html" alt="Visite a página 3">Página 3</
<td><a href="pagina4.html" alt="Visite a página 4">Página 4</
<td><a href="pagina5.html" alt="Visite a página 5">Página 5</
<td>&nbsp;</td>
<td><a href="inicio.html" alt="Visite a página inicial">Início
</tr>
<tr bgcolor="#E8E8E8">
<td colspan="7">
<h2>Página 1</h2>
<p align="justify">
<img src="imagem.jpg" alt="imagem" width="120px"
Lorem ipsum dolor sit amet, consectetur adipiscing e
lacinia nec porta in, fringilla ut metus. Pellentesq
condimentum fermentum eu lorem. Etiam lacus mi, soda
ac eros. Curabitur dignissim, erat vitae bibendum pr
vitae dignissim mauris eros at quam. Aliquam erat vo
consectetur. Sed dictum orci vehicula tortor vehicul
non diam dui, in posuere lectus. Aliquam arcu tortor
ac leo. Nullam non nisi id lorem sollicitudin hendre
sagittis consequat, nisi erat consectetur nulla, ac
quis ante mauris.
</p>
<ol>
<li>Nullam non nisi id lorem sollicitudin hendrerit.
 <li>Nullam non nisi id lorem sollicitudin hendrerit.
<li>Nullam non nisi id lorem sollicitudin hendrerit.
<li>Nullam non nisi id lorem sollicitudin hendrerit.
<li>Nullam non nisi id lorem sollicitudin hendrerit.
</ol>
<p align="justify">
Nam placerat ultrices nibh nec condimentum. Aliquam
aliquam blandit dui commodo. Curabitur tellus lacus,
molestie eget augue. Aenean congue risus id lacus ve
neque, quis hendrerit justo. Nullam scelerisque mole
non mi varius ornare. Pellentesque mi tortor, sodale
eros. Donec et aliquet nibh. Nam mauris tortor, moll
arcu. Aliquam interdum tempor luctus. Vestibulum id
Nullam congue laoreet odio, non interdum sem element
elementum lobortis. Curabitur vulputate convallis an
congue rhoncus tortor a faucibus. Praesent tincidunt
sed justo et neque porttitor posuere in vel lacus. N
</p>
</td>
</tr>
</table>
</body>

</html>

Na Figura 32, é possível visualizar a saída apenas da pagina1.html.

 Figura 32 Resultado da visualização da página no navegador.

9. Formulários
Durante seus estudos, você aprendeu que arquivos HTML são formados por
tags. Um formulário HTML pode conter diversas tags com atributos.

O principal par de tags em um formulário é <form></ form >, tudo o que estiver
entre elas fará parte do formulário.

< form name=“” action=“” method=“” enctype=“”>

(textos e tags próprias do formulário)
</ form>

Observe os principais atributos da tag FORM:

• name: é o identi�cador do formulário. É utilizado principalmente em lin-

guagens de scripts que rodam no cliente (JavaScript e VBScript).
• action: este parâmetro especi�ca o arquivo que deve ser chamado para
receber os dados do formulário ao ser submetido. Futuramente, você
aprenderá a tratar esses dados recebidos.
• method: método de envio dos dados, que pode ser: GET ou POST.
• enctype: formato em que os dados serão enviados. O default é urlencoded.
Se for utilizado um elemento do tipo upload de arquivo (�le), será preciso
usar o tipo multipart/form-data.

Para envio de dados (nome, endereço, telefone etc.) ao servidor, é preciso utili-
zar o protocolo HTTP (HyperText Transfer Protocol, ou Protocolo de
Transferência de Arquivos de Hipertexto), que é utilizado por sites para o trá-
fego de informações pela web. O protocolo HTTP provê dois métodos para o
envio dos dados: GET ou POST.
Método GET
O método GET envia as informações por meio da URL (Uniform Resource
Locator – endereços na internet) e pode ser utilizado por meio de um hiper-
link ou de formulários HTML. Você já deve ter observado, ao navegar por al-
gum site, que na barra de endereços aparece o endereço do site seguido por
uma interrogação (?) que separa o nome da página da lista de variáveis. Sinais
de & – “E comercial” separam variáveis.

http://www.terra.com.br/culinaria?id=meia_lua_de_nozes

Esta requisição do exemplo anterior solicita uma página passando como refe-
rência um identi�cador “meia_lua_de_nozes”.

Método POST
Se utilizasse o método POST para solicitar a receita “meia_lua_de_nozes”, não
seria possível visualizar na barra de títulos o exemplo anterior, pois os dados
seriam passados como o conteúdo de um formulário, e o usuário não poderia
observar “id=meia_lua_de_nozes”. No método GET as informações fazem par-
te da URL, todos os dados podem ser vistos pelo usuário, podendo ser extre-
mamente perigoso quando informações sigilosas estão envolvidas (senha, por
exemplo). Neste caso, o melhor é utilizar o método POST para enviar este tipo
de informações.

Caso tenha �cado com alguma dúvida em relação aos métodos GET e POST,
não se preocupe, pois você poderá entender melhor a diferença entre eles
quando voltarmos a tratar deste assunto no decorrer do estudo deste material.

Os elementos de um formulário são o <input>, o <select> </select> e <textarea>

</textarea> e podem ser utilizados nas variações, conforme descritas no
Quadro 4.

Elementos de um formulário.
Observe o Código 36, que mostra um formulário com as suas principais tags.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title> EXEMPLO DE FORMULÁRIO </title>
</head>

<body>
<form action="insere_dados.php" method="POST" name="exemplo1">
<table border="1" bordercolor="#111111" width="80%" align="center">
<tr>
<td>
<table width="100%" cellpadding="1" cellspacing="1">
<tr>
<td>
<font color="#CE6700" face="Verdana " size="2">
<p align="center"><b>FORMULÁRIO DE CONTATO</b></
</font>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="718" cellpadding="1" cellspacing="1" height="522">
<tr>
<td height="21" width="158">&nbsp;</td>
<td height="21" width="546">&nbsp;</td>
</tr>
<tr>
<td width="158" height="25">
<p align="right"><b>
<font color="#CE6700" face="Verdana" size="1"
</b></p>
</td>
<td width="546" height="25"><input type="text" name="Nome"
maxlength="50">
</td>
</tr>
<tr>
<td width="158" height="25">
<p align="right"><b>
<font color="#CE6700" face="Verdana" size="1"
Senha:&nbsp;&nbsp; </font>
</b></p>
</td>
<td width="546" height="25"><input type="password" name=
maxlength="8" class=></td>
</tr>
<tr>
 <td width="158" height="28">
<p align="right"><b>
<font color="#CE6700" face="Verdana" size="1"
Seleção:&nbsp;&nbsp; </font>
</b></p>
</td>
<td width="546" height="28">
<table width="100%">
<tr>
<td width="16%" align="center">
<input type="checkbox" name="preferencia1"
<font face="Verdana" size="2">C++</font>
</td>
<td width="16%" align="center">
<input type="checkbox" name="preferencia2"
<font face="Verdana" size="2">PHP</font>
</td>
<td width="16%" align="center">
<input type="checkbox" name="preferencia3"
<font face="Verdana" size="2">Delphi</font
</td>
<td width="20%" align="center">
<input type="checkbox" name="preferencia4"
<font face="Verdana" size="2">Visual Basic
</td>
<td width="16%" align="center">
<input type="checkbox" name="preferencia5"
<font face="Verdana" size="2">Assembly</
</td>
<td width="16%" align="center">
<input type="checkbox" name="preferencia6"
<font face="Verdana" size="2">Java</font
</td>
</tr>
</table>
</td>
</tr>

<tr>
<td>
<p align="right"><b>
<font color="#CE6700" face="Verdana" 88 size
89
Opção:&nbsp;&nbsp; </font>
</b></p>
</td>
<td>
<table width="100%">
<tr>
<td width="16%" align="center">
<input type="radio" name="preferencia" value
<font face="Verdana" size="2">C++</font>
 <td width="16%" align="center">
<input type="radio" name="preferencia" value
<font face="Verdana" size="2">PHP</font>
<td width="16%" align="center">
<input type="radio" name="preferencia" value
<font face="Verdana" size="2">Delphi</font
<td width="20%" align="center">
<input type="radio" name="preferencia" value
<font face="Verdana" size="2">Visual Basic
<td width="16%" align="center">
<input type="radio" name="preferencia" value
<font face="Verdana" size="2">Assembly</
<td width="16%" align="center">
<input type="radio" name="preferencia" value
<font face="Verdana" size="2">Java</font
</tr>
</table>
</tr>
<tr>
<td width="158" valign="top" height="192">
<p align="right"><b>
<font color="#CE6700" face="Verdana" size="1"
para múltiplas escolhas:&nbsp;&nbsp;</font
</b></p>
</td>
<td width="546" height="192">
<select name="D1" size="10" multiple>
<option value="bcb">C++Builder</option>
<option selected value="php">PHP</option>
<option value="delphi">Delphi</option>
<option value="vb">Visual Vasic</option>
<option value="asm">Assembly</option>
<option value="java">Java</option>
</select>
</td>
</tr>
<tr>
<td width="158" height="28">
<p align="right"><b>
<font color="#CE6700" face="Verdana" size="1"
para escolha única:&nbsp;&nbsp;</font>
</b></p>
</td>
<td width="546" height="28">
<select name="cursos">
<option value="bcb">C++Builder</option>
<option selected value="php">PHP</option>
<option value="delphi">Delphi</option>
<option value="vb">Visual Vasic</option>
<option value="asm">Assembly</option>
<option value="java">Java</option>
</select>
 </td>
</tr>
<tr>
<td width="158" valign="top" height="119">
<p align="right"><b>
<font color="#CE6700" face="Verdana" size="1"
extenso:</font>
</b><b>
<font color="#CE6700" face="Verdana" size="1"
&nbsp; </font>
</b></p>
</td>
<td width="546" height="119">&nbsp;<textarea name="opniao"
cols="40">Digite aqui sua msg...</textarea></td>
</tr>
<tr>
<td width="158" height="27">&nbsp;</td>
<td width="546" height="27">
<div align="center">
<input name="Submit" type="submit" class="botao"
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>

</html>

Observe, na Figura 33, a saída do Código 36.

 Figura 33 Formulário HTML com suas principais tags.

O conteúdo apresentado até o momento abordou os principais conceitos a res-

peito da elaboração de páginas web com a linguagem de marcação HTML.

A especi�cação mais atualizada da linguagem, denominada HTML 5, pode ser conferida no

material disponibilizado pela W3C, o qual pode ser acessado clicando aqui (https://educa-
frotech.educafro.org.br/documents/html5.pdf)!

10. Folhas de Estilo em Cascata

As Folhas de Estilo em Cascata, do inglês Cascading Style Sheets – CSS, são
um padrão para formatação da aparência de páginas web de�nido pela W3C
(World Wide Web Consortium).

Este padrão tem como principal vantagem a organização das páginas web,
uma vez que permite a separação do conteúdo da página (XHTML) da aparên-
cia (CSS).

Quando construímos páginas web sem a utilização das CSS, tanto a formata-
ção do documento quanto a de�nição da formatação são realizadas em um
único arquivo, como, por exemplo: minhapagina.html.
Com os estilos em cascata, é possível separar as informações de aparência do
conteúdo da página. Assim, podemos criar uma página com todo o conteúdo a
ser apresentado (minhapagina.html), e, também, um arquivo contendo os esti-
los que de�nem a aparência da página, por exemplo, estilo.css.

 Saiba mais sobre Cascading Style Sheets – CSS!

No site da W3C (http://www.w3.org/Style/CSS/), há informações detalha-

das a respeito da especi�cação das CSS. Além disso, os diversos tutoriais
podem auxiliar o aprendizado desse padrão.

Uma ferramenta importante fornecida pela W3C é o validador de código

CSS (http://jigsaw.w3.org/css-validator/), que permite veri�car se o códi-
go CSS é válido e segue os padrões da W3C (Figura 34).
 Figura 34 Validador de estilos em cascata.

Dentre as principais características das Folhas de Estilo em Cascata, podemos

citara organização das tags para formatação do documento; a simplicidade na
de�nição; a aparência e a clareza no código do documento XHTML, uma vez
que as formatações �cam separadas.

A seguir, aprenderemos a codi�car os estilos em cascata.

11. Codi�cação dos estilos em cascata

Uma das maneiras para de�nição de um estilo em cascata é a utilização de se-
letores. Estes seletores seguem regras bem de�nidas e são apresentados a se-
guir.

seletor{
propriedade1: valor1;
propriedade2: valor2;
.
.
.
propriedadeN: valorN;
}

Podemos utilizar estes seletores no interior dos arquivos HTML, sendo tal
abordagem conhecida como .

A regra principal para utilização desse tipo de seletor é codi�car todo o con-
teúdo de formatação dentro do bloco <head> e </head>. No entanto, para essa
de�nição, é necessário especi�car os estilos em cascata para cada página
HTML do site.

Observe o Código 37.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
margin: 50px;
}

img {
margin: 20px;
}

img.borda1 {
border-style: dotted;
border-width: 4px;
border-color: #FF0000;
}

img.borda2 {
border-left-style: dashed;
border-right-style: dashed;
border-top-style: double;
border-bottom-style: double;
border-width: 4px;
border-color: #FF0000;
}

img.borda3 {
border-style: groove;
border-width: 20px;
border-color: #FF0000;
}

img.borda4 {
background-color: #0000FF;
border-style: ridge;
border-width: 20px;
border-color: #FF0000;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
 <h1>Borda em imagens</h1>
<img class="borda1" src="imagem3.jpg" alt="imagem" />
<img class="borda2" src="imagem3.jpg" alt="imagem" />
<img class="borda3" src="imagem3.jpg" alt="imagem" />
<img class="borda4" src="imagem3.jpg" alt="imagem" />
</body>

</html>

Observe o resultado do Código 37 apresentado na Figura 34.

Figura 34 Exemplo de uma página web com estilo em cascata.

A maneira mais e�ciente e adequada de de�nição de estilos em cascata é a co-

di�cação em um arquivo externo, por exemplo, .A
de estilos em cascata é a abordagem mais prática para construção e manu-
tenção de sites.

Observe o Código 38.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
margin: 10px;
}

p.espacamento1 {
padding-top: 20px;
padding-right: 50px;
padding-bottom: 30px;
padding-left: 40px;
}

p.espacamento2 {
background-color: #0000FF;
color: #FFFFFF;
padding: 20px 30px;
}

p.espacamento3 {
border: dashed 3px #FF0000;
background-color: #0000FF;
color: #FFFFFF;
padding: 30px 50px;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p class="espacamento1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus. Nu
magna, nec suscipit sem porttitor ut.
</p>
<p class="espacamento2">
 In pellentesque nibh id sapien gravida facilisis. Sed augue tellus, ultricies non co
lectus. Aliquam sed lectus non ante interdum ultrices. Vestibulum ante ipsum primis
ultrices posuere cubilia Curae; Aliquam blandit adipiscing odio, non feugiat nisl ve
tincidunt augue. Fusce at sodales odio. Fusce fermentum diam ac velit sodales rutrum
nunc, a semper nibh dignissim ut. Sed sit amet justo nulla, quis iaculis enim. Nunc
luctus.
</p>
<p class="espacamento3">
Ut sed nunc et orci mollis consequat vel nec mauris. Cras vel faucibus justo. Vivamu
turpis, sit amet lacinia velit posuere quis. Cras eu augue sapien. Nullam diam nisl,
convallis et velit. Donec ornare dapibus ligula, aliquam scelerisque leo condimentum
sapien ac aliquet. Nunc dapibus, nisi vitae egestas mattis, mauris ipsum aliquam lor
augue. Etiam ut ante vel nisl mollis scelerisque. Donec lacus leo, tempor sed accums
in urna lorem, vitae pellentesque augue.
</p>
</body>

</html>

Note a linha 5, em que é realizada a referência a um arquivo externo com o no-

me de . Este arquivo contém todas as formatações da aparência do
documento. O conteúdo do arquivo é apresentado como se segue:

p { color: blue; }

Também é possível de�nir seletores CSS ao longo do arquivo HTML, sendo tal
abordagem conhecida como . Para isso, é utilizada a propri-
edade , disponível em todas as tags do HTML. Entretanto, é importante
observar que essa abordagem di�culta a manutenção do código.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
</head>

<body>
<p style="color: blue;">
Este parágrafo tem fonte azul definida através de um estilo em cascata
</p>
</body>

</html>
Resumindo, você pode de�nir estilos em cascata por meio dos seletores, os
quais são especi�cados de três maneiras: interna, externa e inline.

12. Tipos de seletores

Os seletores dos estilos em cascata são utilizados para especi�car a formata-
ção de um elemento da página web (DEITEL, 2003).

Existem três tipos de seletores:

• seletor tipo tag;

• seletor class;
• seletor id.

Observe, a seguir, a descrição de cada seletor.

Seletor tipo tag

O seletor tipo é o mais simples, no qual o nome do seletor é igual ao nome

de uma tag do HTML (ou XHTML). Por exemplo:

h1 { color: red; }

Como resultado, todas as tags <h1> presentes na página web serão formatadas
com a cor vermelha.

Para simpli�car a de�nição desse seletor, podemos agrupar formatações do

mesmo tipo, ou seja, quando vários seletores utilizam a mesma formatação,
eles podem ser agrupados por vírgula, por exemplo:

h1 { color: red; }
h2 { color: red; }
h3 { color: red; }

Simpli�cando, temos:

h1,h2,h3 { color: red; }

Seletor class
Os seletores do tipo permitem associar, de maneira independente, a for-
matação do estilo a uma tag do HTML. Com isso, é possível escolher qual ele-
mento será formatado com as especi�cações de�nidas no seletor.

Para de�nir esse tipo de seletor, sempre é necessário a utilização de um ponto

(.) antes do nome do seletor, por exemplo: .

A utilização desse seletor é realizada por meio da propriedade , disponí-

vel em todas as tags do HTML. No exemplo, a seguir, ao invés de utilizarmos
uma formatação única para todos os parágrafos (<p>) do documento, podemos
de�nir estilos individuais. A Figura 35 apresenta o resultado do Código 40.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
p.formato1 {
color: green;
}

p.formato2 {
color: red;
}
</style>

</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p class="formato1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="formato2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

O resultado pode ser visualizado na Figura 35.

 Figura 35 Resultado da visualização da página no navegador.

Seletor id
As formatações dos estilos em cascata também podem ser associadas por
meio dos seletores do tipo . Em termos práticos, esse tipo de seletor tem as
mesmas características que os seletores do tipo . No entanto, em geral,
esse seletor é utilizado para especi�car formatações relativas à estrutura do
documento.

Para associação desse tipo de seletor, é necessário utilizar a propriedade ,

disponível em todas as tags do HTML. Além disso, para especi�cação desse
estilo, o nome do seletor deve ser precedido do símbolo . Exemplo:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
#formato1 {
color: blue;
margin-left: 150px;
}

#formato2 {
color: red;
margin-top: 200px;
}
</style>

</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p id="formato1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p id="formato2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>
O resultado pode ser visualizado na Figura 36.

Figura 36 De�nição de seletores do tipo identi�cador em CSS.

Neste tópico, apresentamos os seletores dos estilos em cascata, a seguir, estu-

daremos a formatação de conteúdo com estilos em cascata.

13. Formatação de conteúdo com estilos em

cascata
Os estilos em cascata permitem a formatação de diversos tipos de conteúdo de
uma página, dentre eles os principais são (DEITEL, 2003):

• plano de fundo (background);

• tipos de letra e texto;
• margens;
• bordas;
• espaçamentos;
• dimensões;
• pseudoclasses;
• posicionamento de elementos.

Formatação de plano de fundo

As formatações de plano de fundo podem ser empregadas em diversos ele-
mentos do HTML. Para isso, as seguintes propriedades podem ser con�gura-
das, conforme demonstrado no Quadro 5.

Propriedades de formatação de plano de fundo.

background-color Especi�ca a cor do fundo.

background-image De�ne a imagem do fundo.

Determina a maneira de repetição da imagem na jane-

la do navegador. A imagem de�nida pode repetir no ei-
background-repeat
xo X, no eixo Y, em todos os eixos (repeat) ou ainda não
repetir (no-repeat).

Con�gura o rolamento (scroll) da imagem na janela do

background_attach- navegador. Os parâmetros possíveis são scroll, que ha-
ment bilita o rolamento, ou �xed, que torna a imagem estáti-
ca.

De�ne o local em que a imagem deverá ser posiciona-

background-
da. Essa posição é de�nida por meio das coordenadas
position
X e Y.
O Código 41 apresenta um exemplo de formatação de plano de fundo em CSS.
No exemplo, a cor do fundo é de�nida independentemente para cada elemento
HTML.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #CCCCCC;
}

h1 {
background-color: #000000;
color: #FFFFFF;
}

p {
background-color: #FFFF99;
}
</style>

</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Aliquam erat volutpat. Nullam imperdiet convallis consectetur. Sed dictum orci vehic
vulputate ut ut velit. Vestibulum non diam dui, in posuere lectus. Aliquam arcu tort
venenatis ac leo. Nullam non nisi id lorem sollicitudin hendrerit.</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

O resultado pode ser visualizado na Figura 37.

 Figura 37 Exemplo da formatação da cor do plano de fundo.

O Código 42 demonstra a utilização da propriedade background-image, em

que uma imagem pode ser inserida ao fundo de qualquer elemento da página.
Neste exemplo, a imagem é colocada como fundo do elemento body.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #CCCCCC;
background-image: url('imagem.jpg');
}
</style>

</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
 </p>
</body>

</html>

Na Figura 38, você pode visualizar o resultado do Código 42.

Figura 38 Resultado da visualização da página no navegador.

As imagens podem ser colocadas em qualquer elemento do documento.

Assim, diferentes imagens podem ser carregadas. No exemplo descrito no
Código 43, duas imagens são carregadas utilizando a propriedade
background-image, uma delas é inserida no elemento body, enquanto a outra
é carregada em um elemento do tipo parágrafo (<p>). Além disso, note, no
exemplo, que imagens de extensões diferentes são carregadas (.jpg e .png).
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #CCCCCC;
background-image: url('imagem1.jpg');
}

p.imagemfundo {
background-image: url('imagem2.png');
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="imagemfundo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
 arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

A Figura 39 demonstra o resultado da visualização da página que trata da pro-

priedade background-image, em que foram carregadas imagens para o fundo
da página (body) e para o parágrafo.

Figura 39 Resultado da visualização da página no navegador.

Você deve ter notado que as imagens colocadas no background dos elementos
são repetidas automaticamente. No entanto, o padrão de repetição das ima-
gens pode ser controlado por meio da propriedade background-repeat. Os
exemplos a seguir demonstram as possíveis con�gurações da propriedade
background-repeat:
Repeat-x – repetição no eixo x

O Código 44 demonstra a utilização da propriedade repeat-x. Acompanhe

atentamente.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #FFFFFF;
background-image: url('imagem3.jpg');
background-repeat: repeat-x;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
 </p>
</body>

</html>

Na Figura 40, você visualizará o resultado da execução do Código 44.

Figura 40 Resultado da visualização da página no navegador.

Repeat-y – repetição no eixo y.

O Código 45 ilustra a utilização da propriedade repeat-y. Neste código as ima-
gens são repetidas na vertical.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #FFFFFF;
background-image: url('imagem3.jpg');
background-repeat: repeat-y;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
 </p>
</body>

</html>

A Figura 41 demonstra a aplicação do Código 45. Observe.

Figura 41 Resultado da visualização da página no navegador.

No-repeat – sem repetição

O Código 46 ilustra a aplicação da propriedade no-repeat.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #FFFFFF;
background-image: url('imagem3.jpg');
background-repeat: no-repeat;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
 </p>
</body>

</html>

Na Figura 42 é possível notar a execução do Código 46, em que a imagem foi

incluída no fundo da página.

Figura 42 Resultado da visualização da página no navegador.

Caso não seja de�nido o padrão de repetição, a imagem de fundo será repetida
nos eixos X e Y.

Outra propriedade interessante do plano de fundo é a background-attachment,

que permite especi�car a relação entre a imagem de fundo e a informação
contida no elemento. Por padrão, essa propriedade é de�nida como scroll, cujo
resultado pode ser visualizado no exemplo descrito no Código 47. Para você
notar adequadamente o efeito citado, utilize a barra de rolagem vertical para
navegar ao longo do conteúdo da página.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #FFFFFF;
background-image: url('imagem3.jpg');
background-attachment: scroll;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

Para notar o efeito da propriedade, altere o valor do background-attachment

de scroll para �xed. A alteração no estilo em cascata pode ser visualizada no
trecho de código a seguir.

Para visualizar o efeito, utilize novamente a barra de rolagem horizontal. Veja

que a imagem de�nida como background do elemento body permanece �xa
enquanto a página é rolada.

O posicionamento da imagem de fundo também pode ser de�nido por meio da

propriedade background-position. Essa propriedade aceita como parâmetro
dois valores que especi�cam a posição da imagem em função dos eixos X e Y.

Para de�nirmos o posicionamento da imagem no canto superior direito da pá-

gina, utilizamos o Código 48 como exemplo.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #FFFFFF;
background-image: url('imagem3.jpg');
background-repeat: no-repeat;
background-position: top right;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
 Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

A seguir, você poderá visualizar a saída para o Código 47. Observe a localiza-
ção da imagem.
 Figura 43 Resultado da visualização da página no navegador.

Podemos, por exemplo, de�nir a imagem no canto inferior esquerdo, conforme

apresentado no Código 49.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #FFFFFF;
background-image: url('imagem3.jpg');
background-repeat: no-repeat;
background-position: bottom left;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
 Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

Observe, na Figura 44, a saída do Código 49 e veja a localização da imagem.

 Figura 44 Resultado da visualização da página no navegador.

Um efeito interessante pode ser obtido combinando as propriedades

background-attachment e background-position. Para isso, você deve con�gu-
rar o atachamento da imagem como �xo (�xed) e o posicionamento da ima-
gem como centralizado. Além disso, é necessário que o conteúdo da página
seja extenso, a �m de habilitar a barra de rolagem vertical; caso contrário, o
efeito não poderá ser visualizado.

O Código 50 demonstra como criar esse efeito na página.

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #FFFFFF;
background-image: url('imagem1.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
 Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
 </p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

A Figura 45 demonstra a saída do Código 50, em que houve a combinação de

duas propriedades de imagens.
 Figura 45 Resultado da visualização da página no navegador.

Formatação de tipos de letra e texto

Veremos as propriedades de formação de tipos de letra e texto.

Formação de tipos de letra

As formatações de tipo de letra são empregadas nas tags utilizadas para apre-
sentação de conteúdo textual, como, por exemplo: <p>, <h1> etc. Estas proprie-
dades são indicadas para substituir a tag <font> e diversas formatações po-
dem ser de�nidas.

Observe o Quadro 6.

Propriedades de formatação de fonte.

Para de�nir qual o tipo de fonte utilizado na formata-

ção.
font-family
Exemplo: font-family: "Arial".
 Para especi�car o tamanho da fonte com base na uni-
dade de medida escolhida. Exemplos:
· Tamanho em pixels: font-size: 12px;

font-size
· Tamanho em porcentagem: font-size: 150%;

· Tamanho em centímetros: font-size: 2cm.

Para determinar o estilo da letra.

font-style Exemplo: font-style: italic.

É utilizado para de�nir a espessura da letra.

Exemplo, para de�nir a fonte em negrito, temos: font-
font-weight
weight: bold.

A propriedade font-family é utilizada para especi�car o tipo de letra de um

elemento da página. Essa propriedade pode ser con�gurada em qualquer ele-
mento capaz de apresentar um conteúdo textual. Caso o navegador não en-
contre o tipo especi�cado, ele utilizará fonte padrão (de�nida nas con�gura-
ções do navegador). Para minimizar esse problema, caso não exista a fonte es-
peci�cada, é possível de�nir uma lista de fontes, por exemplo:

p{ p{font-family:"Times New Roman", Times, serif;}

Assim, caso o navegador não encontre a fonte Times New Roman, ele tentará
encontrar a fonte Times, e por �m, caso não encontre a Times, o navegador
utilizará a fonte serif.

O exemplo a seguir (Código 51) demonstra a aplicação da propriedade font-

family em alguns elementos da página capazes de exibir conteúdo do tipo tex-
to.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #FFFFFF;
}

h1.titulo1 {
font-family: "Arial Black";
}

h2.titulo2 {
font-family: "Arial";
}

p.fonte1 {
font-family: "Times New Roman";
}

p.fonte2 {
font-family: "Georgia";
}

p.fonte3 {
font-family: "Verdana";
}

p.fonte4 {
font-family: "Courier New";
}

p.fonte5 {
font-family: "Lucida Console";
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1 class="titulo1">Título 1</h1>
<p class="fonte1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
 metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h2 class="titulo2">Título 2</h2>
<p class="fonte2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="fonte3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="fonte4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="fonte5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>
As Figuras 46 e 47 demonstram a execução do Código 51. Observe:

Figura 46 Resultado da visualização da página no navegador.

 Figura 47 Resultado da visualização da página no navegador.

Com a propriedade font-size, é possível especi�car o tamanho do texto. As

Folhas de Estilo em Cascata permitem que as dimensões de elemento sejam
de�nidas em função de algumas unidades de medida, como em pixels (px); em
porcentagem (%); em centímetros (cm), dentre outras.

Quando você não especi�ca o tamanho da fonte de um elemento do tipo pará-

grafo, por exemplo, o navegador utiliza o valor padrão de 16px. O tamanho po-
de variar de navegador para navegador, assim, o tamanho visualizado pelo
usuário também pode ser diferente. Existe uma unidade de medida especí�ca,
de�nida pela W3C (e fortemente recomendada), que é denominada em. Essa
unidade de medida não sofre problemas de tamanho em função dos diversos
tipos de navegadores. O exemplo a seguir demonstra diversas maneiras de de-
�nição do tamanho da fonte de parágrafos utilizando a propriedade font-size.
É importante destacar, que o tamanho da fonte pode ser aplicado para qual-
quer elemento capaz de apresentar informações textuais.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #FFFFFF;
}

p.tamanho1 {
font-size: 16px;
}

p.tamanho2 {
font-size: 24px;
}

p.tamanho3 {
font-size: 36px;
}

p.tamanho4 {
font-size: 100%;
}

p.tamanho5 {
font-size: 150%;
}

p.tamanho6 {
font-size: 200%;
}

p.tamanho7 {
font-size: 1em;
}

p.tamanho8 {
font-size: 1.3em;
}

p.tamanho9 {
font-size: 2.2em;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Tamanho da fonte em pixels</h1>
<h2>16 pixels (padrão)</h2>
<p class="tamanho1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h2>24 pixels</h2>
<p class="tamanho2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h2>36 pixels</h2>
<p class="tamanho3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h1>Tamanho da fonte em porcentagem</h1>
<h2>100% (padrão)</h2>
<p class="tamanho4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h2>150%</h2>
<p class="tamanho5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h2>200%</h2>
<p class="tamanho6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h1>Tamanho da fonte em <i>em</i></h1>
<h2>1 em (padrão)</h2>
<p class="tamanho7">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h2>1.3 em</h2>
<p class="tamanho8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h2>2.2 em</h2>
<p class="tamanho9">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
 Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

A execução do Código 52 pode ser visualizada nas Figuras 48, 49 e 50.

Figura 48 Resultado da visualização da página no navegador.

Figura 49 Resultado da visualização da página no navegador.
 Figura 50 Resultado da visualização da página no navegador.

A propriedade font-style permite a con�guração do estilo da fonte que, por pa-

drão, é de�nida como normal, mas também é possível con�gurar o estilo em
itálico. O exemplo do Código 53 apresenta a utilização da propriedade font-
style.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #FFFFFF;
}

p.estilo1 {
font-style: normal;
}

p.estilo2 {
font-style: italic;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Texto normal</h1>
<p class="estilo1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h1>Texto itálico</h1>
<p class="estilo2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>
</html>

A Figura 51 ilustra o resultado da página no navegador.

Figura 51 Resultado da visualização da página no navegador.

Para de�nir a espessura, ou mais especi�camente o peso da letra, é utilizada a

propriedade font-weight. Essa propriedade de�ne tanto a espessura mais sim-
ples (ou �na) quanto a espessura mais grossa. Em outras palavras, ela permite
de�nir o estilo negrito.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
background-color: #FFFFFF;
}

p.estilo1 {
font-weight: normal;
}

p.estilo2 {
font-weight: bold;
}

p.estilo3 {
font-weight: bolder;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Texto normal</h1>
<p class="estilo1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h1>Texto negrito (bold)</h1>
<p class="estilo2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
 Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h1>Texto mais negrito (bolder)</h1>
<p class="estilo3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

A Figura 52 apresenta o resultado da visualização da página no navegador.

 Figura 52 Resultado da visualização da página no navegador.

Formatação de texto

Os estilos em cascata também podem ser empregados para formatação do

texto, os quais são de�nidos pelas propriedades apresentadas no Quadro 7.

Propriedades para formatação de texto.

De�ne a cor da letra.

Exemplo: de�nição da cor do texto como azul: color:
Color
blue.

Determina o espaço entre os caracteres.

Exemplo: de�nição da distância entre os caracteres
Letter-spacing
com 1 (um) centímetro: letter-spacing: 1cm.

Especi�ca o espaço entre as palavras do texto.

Exemplo: determinação da distância de 5 pixels entre
Word-spacing
as palavras do texto: word-spacing: 5px.

De�ne o alinhamento do texto, que pode ser left (es-

querda), right (direita), center (centralizado) ou justify
(justi�cado).
Text-align
Exemplo: formatação do texto justi�cado: text-align:
justif.

Especi�ca a distância entre as linhas dos parágrafos.

Line-height Exemplo: line-height: 150%.
 Permite a de�nição de alguns tipos de decorações às
informações textuais, como o efeito sublinhado.
Text-decoration
Exemplo: text-decoration: underline.

Determina a indentação das informações do parágrafo.

Text-indent Exemplo: text-indent: 10px.

Controla como as letras dos elementos da página são

apresentadas.
Text-transform
Exemplo: text-transform: lowercase.

Especi�ca o alinhamento vertical das informações.

Vertical-align Exemplo: vertical-align: top.

Especi�ca como os espaços em branco das informa-

ções textuais contidas nos elementos da página serão
White-space apresentados.
Exemplo: white-space: nowrap.

A propriedade color é utilizada para a especi�cação da cor das informações

textuais dos elementos da página. Esta propriedade é aplicada em qualquer
elemento que permita a apresentação de texto, utilizando os mesmos critérios
para a especi�cação de cor da propriedade background-color.

Em linhas gerais, a propriedade color de�ne a cor da frente, também conheci-

da como foreground, enquanto a propriedade background-color especi�ca a
cor do plano de fundo, também denominado background. O Código 55 de-
monstra as diversas maneiras que podem ser utilizadas para a especi�cação
de cores em elementos da página.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
h1.cor1 {
background-color: #0000FF;
color: #FFFFFF;
}

p.cor1 {
color: blue;
}

p.cor2 {
color: rgb(255, 0, 0);
}

p.cor3 {
color: #00FF00;
}

p.cor4 {
background-color: #FF0000;
color: #FFFFFF;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1 class="cor1">Manipulação de cores</h1>
<p class="cor1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="cor2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
 metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="cor3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="cor4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

A Figura 53 apresenta o resultado da visualização da página no navegador.

 Figura 53 Resultado da visualização da página no navegador.

O espaçamento entre caracteres é um recurso muito utilizado para formatação

do conteúdo textual dos elementos da página. Esta propriedade é denominada
letter-spacing. O exemplo, a seguir, demonstra algumas das principais utiliza-
ções do espaçamento entre caracteres. Observe, no Código 56, que o espaça-
mento pode ser de�nido com base em diversas unidades de medida suporta-
das pelos padrões da W3C.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
p.espacamento1 {
letter-spacing: 10px;
}

p.espacamento2 {
letter-spacing: 0.2em;
}

p.espacamento3 {
letter-spacing: 1.0cm;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Espaçamento entre caracteres</h1>
<p class="espacamento1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor,
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibend
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam im
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non d
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lo
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla,
Nulla quis ante mauris.
</p>
<p class="espacamento2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor,
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibend
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam im
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non d
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lo
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla,
Nulla quis ante mauris.
</p>
<p class="espacamento3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor,
 metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibend
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam im
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non d
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lo
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla,
Nulla quis ante mauris.
</p>
</body>

</html>

A Figura 54 apresenta o resultado da visualização da página no navegador.

Figura 54 Resultado da visualização da página no navegador.

Enquanto a propriedade letter-spacing especi�ca a distância entre caracteres,

a propriedade word-spacing permite a con�guração da distância entre pala-
vras. O Código 57 demonstra a utilização da propriedade word-spacing. Note
que as mesmas unidades de medida utilizadas no exemplo da propriedade
letter-spacing também são suportadas.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
p.espacamento1 {
word-spacing: 10px;
}

p.espacamento2 {
word-spacing: 2.2em;
}

p.espacamento3 {
word-spacing: 3cm;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Espaçamento entre palavras</h1>
<p class="espacamento1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="espacamento2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="espacamento3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
 metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

A Figura 55 apresenta o resultado da visualização da página no navegador.

Observe.

Figura 55 Resultado da visualização da página no navegador.

Os elementos HTML permitem que o alinhamento das informações seja espe-

ci�cado por meio de uma propriedade denominada align. As diretrizes da
W3C recomendam que todas as formatações dos elementos da página sejam
de�nidas com as Folhas de Estilo em Cascata. O estilo que determina o alinha-
mento das informações na página é chamado de text-align. O exemplo a se-
guir (Código 58) demonstra a utilização das principais formatações. Por pa-
drão, os navegadores alinham as informações da página à esquerda, assim,
não é necessário especi�car a propriedade text-aling como left (esquerda).
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
p.alinhamento1,
h2.alinhamento1 {
text-align: left;
}

p.alinhamento2,
h2.alinhamento2 {
text-align: center;
}

p.alinhamento3,
h2.alinhamento3 {
text-align: right;
}

p.alinhamento4,
h2.alinhamento4 {
text-align: justify;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Alinhamento das Informações</h1>
<h2 class="alinhamento1">Esquerda</h2>
<p class="alinhamento1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h2 class="alinhamento2">Centralizado</h2>
<p class="alinhamento2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
 metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h2 class="alinhamento3">Direita</h2>
<p class="alinhamento3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<h2 class="alinhamento4">Justificado</h2>
<p class="alinhamento4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

As Figuras 56 e 57 apresentam os resultados da visualização da página no na-

vegador.
Figura 56 Resultado da visualização da página no navegador.
 Figura 57 Resultado da visualização da página no navegador.

O Código 59 demonstra como alinhar imagens utilizando a propriedade text-

align.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
p.esquerda {
text-align: left;
}

p.centralizado {
text-align: center;
}

p.direita {
text-align: right;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Alinhamento de Imagens</h1>
<p class="esquerda">
<img src="imagem3.jpg" alt="imagem" />
</p>
<p class="centralizado">
<img src="imagem3.jpg" alt="imagem" />
</p>

<p class="direita">
<img src="imagem3.jpg" alt="imagem" />
</p>
</body>

</html>

A Figura 58 apresenta o resultado da visualização da página no navegador.

 Figura 58 Resultado da visualização da página no navegador.

A propriedade line-height permite a determinação da distância, ou espaça-

mento, entre as linhas das informações textuais. Essa propriedade pode ser
utilizada para criar efeitos de espaçamento simples, espaçamento duplo, ou
qualquer outro tipo de espaçamento, da mesma maneira que é possível deter-
minar o espaçamento em editores de texto, como, por exemplo, no Microsoft
Word.

O Código 60 demonstra a utilização da propriedade de espaçamento entre li-

nhas.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
p.espacamentosimples {
line-height: 100%;
}

p.espacamento_um_e_meio {
line-height: 150%;
}

p.espacamentoduplo {
line-height: 200%;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Espaçamento entre linhas</h1>
<p class="espacamentosimples">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="espacamento_um_e_meio">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="espacamentoduplo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
 metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

A Figura 59 apresenta o resultado da visualização da página no navegador.

Note o espaçamento entre linhas.
 Figura 59 Resultado da visualização da página no navegador.

Com a propriedade text-decoration, diversos efeitos (ou decorações) podem

ser de�nidos nos elementos textuais das páginas. O exemplo a seguir, descrito
no Código 61, demonstra as principais utilizações dessa propriedade.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
p.sublinhado {
text-decoration: underline;
}

p.sublinhadosuperior {
text-decoration: overline;
}

p.tachado {
text-decoration: line-through;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Espaçamento entre linhas</h1>
<p class="sublinhado">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="sublinhadosuperior">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="tachado">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
 metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

A Figura 60 apresenta o resultado da visualização da página no navegador.

 Figura 60 Resultado da visualização da página no navegador.

Para especi�car a indentação da primeira linha de um parágrafo, é possível

utilizar a propriedade text-ident. O Código 62 demonstra a utilização dessa
propriedade.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
p.identacao1 {
text-align: justify;
text-indent: 20px;
}

p.identacao2 {
text-align: justify;
text-indent: 100px;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Indentação do texto</h1>
<p class="identacao1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="identacao2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>
A Figura 61 apresenta o resultado da visualização da página no navegador.

Figura 61 Resultado da visualização da página no navegador.

A propriedade text-transform pode ser utilizada para alterar a maneira com

que as informações textuais são apresentadas. No Código 63, observe atenta-
mente as diversas con�gurações dessa propriedade.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
}

p.capitalizado {
text-transform: capitalize;
}

p.maiusculas {
text-transform: uppercase;
}

p.minusculas {
text-transform: lowercase;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Transformação do texto</h1>
<p class="capitalizado">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
<p class="maiusculas">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
 Nulla quis ante mauris.
</p>
<p class="minusculas">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus tortor, lacinia
metus. Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Etiam
scelerisque mollis, eleifend ac eros. Curabitur dignissim, erat vitae bibendum preti
magna, vitae dignissim mauris eros at quam. Aliquam erat volutpat. Nullam imperdiet
dictum orci vehicula tortor vehicula vulputate ut ut velit. Vestibulum non diam dui,
arcu tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem soll
Curabitur bibendum, dui ac sagittis consequat, nisi erat consectetur nulla, ac dictu
Nulla quis ante mauris.
</p>
</body>

</html>

A Figura 62 apresenta o resultado da visualização da página no navegador.

 Figura 62 Resultado da visualização da página no navegador.

O alinhamento vertical das informações é um recurso bastante empregado em

tabelas, pois permite a determinação do alinhamento das informações. O
Código 64 demonstra como utilizar essa propriedade em tabelas. Note que es-
sa propriedade também pode ser empregada em outros elementos como, por
exemplo, nos divisores (<div>).
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
}

td.topo {
vertical-align: top;
}

td.centro {
vertical-align: middle;
}

td.inferior {
vertical-align: bottom;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Alinhamento Vertical</h1>
<table border="1" width="100%" height="500px">
<tr>
<td class="topo">Pellentesque id orci eget enim sodales condimentum fermentum eu
dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem sollicitu
</td>
<td class="centro">Pellentesque id orci eget enim sodales condimentum fermentum
tortor, dapibus ac volutpat ut, venenatis ac leo. Nullam non nisi id lorem s
</td>
<td class="inferior">
Pellentesque id orci eget enim sodales condimentum fermentum eu lorem. Aliqu
volutpat ut, venenatis ac leo. Nullam non nisi id lorem sollicitudin hendrer
</td>
</tr>
</table </body>

</html>

A Figura 63 apresenta o resultado da visualização da página no navegador.

 Figura 63 Resultado da visualização da página no navegador.

A propriedade white-space permite que o desenvolvedor controle como os es-

paços em branco serão apresentados na página. O padrão do navegador espe-
ci�ca a propriedade white-space como Além disso, duas outras con�-
gurações são possíveis: pre – que permite a apresentação do texto da mesma
maneira com que as informações são de�nidas no código da página; nowrap –
em que o texto é apresentado sem quebra de linhas. O Código 65 traz a utiliza-
ção dessa propriedade, bem como das suas respectivas con�gurações. Note
que a con�guração nowrap faz com que o texto seja apresentado sem quebra
de linhas, assim, a barra de rolagem horizontal do navegador �ca habilitada.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
}

p.normal {
white-space: normal;
}

p.predefinido {
white-space: pre;
}

p.semquebralinha {
white-space: nowrap;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Espaços em Branco</h1>
<p class="normal">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus. Nu
magna, nec suscipit sem porttitor ut. Phasellus rhoncus sapien sit amet est lacinia
Etiam diam risus, vulputate nec consequat a, condimentum vel turpis. Donec mi lacus,
volutpat quis lectus. Nam id felis in elit commodo lacinia. Ut mi ante, congue vel l
mi. Morbi ac bibendum justo. Aliquam erat volutpat.
</p>
<p class="predefinido">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Proin blandit facilisis dolor, ut fermentum augue lacinia eget. In
nec lorem eu turpis dictum congue eget vitae est. Suspendisse commodo est sed augue
molestie nec viverra ante egestas. Nam dapibus nisl sit amet tellus pulvinar pulvina
Vivamus volutpat, ipsum ac scelerisque ultricies, nibh ligula pulvinar mauris, vel p
 erat eget sapien. Sed hendrerit sem at neque commodo nec sagittis neque sollicitudin
vitae elit vitae dui fringilla feugiat. Nulla turpis ante, luctus ac hendrerit in, d
</p>
<p class="semquebralinha">
Ut sed nunc et orci mollis consequat vel nec mauris. Cras vel faucibus justo. Vivamu
turpis, sit amet lacinia velit posuere quis. Cras eu augue sapien. Nullam diam nisl,
convallis et velit. Donec ornare dapibus ligula, aliquam scelerisque leo condimentum
sapien ac aliquet. Nunc dapibus, nisi vitae egestas mattis, mauris ipsum aliquam lor
augue. Etiam ut ante vel nisl mollis scelerisque. Donec lacus leo, tempor sed accums
in urna lorem, vitae pellentesque augue. Nulla hendrerit, velit pharetra adipiscing
est, ac facilisis odio quam a nibh. Sed non felis vel nisi porttitor laoreet. Nullam
posuere. Aliquam quam velit, bibendum vel luctus eu, porttitor sed dolor
</p>
</body>

</html>

A Figura 64 apresenta o resultado da visualização da página no navegador.

 Figura 64 Resultado da visualização da página no navegador.

Margens
Os estilos em cascata também permitem a de�nição da distância entre os ele-
mentos da página. Essa especi�cação é realizada por meio das margens, as
quais possuem as seguintes propriedades:

Propriedades para especi�cação de margens entre os elementos da

página.

Margin-left Margem esquerda.

Margin-right Margem direita.

Margin-top Margem superior.

Margin-bottom Margem inferior.

O Código 66 demonstra a utilização da propriedade margem, em que a mar-
gem esquerda de dois elementos da página (<p> e <h1>) foi con�gurada.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
}

p.margemesquerda {
margin-left: 100px;
}

h1.margemesquerda {
margin-left: 250px;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Margens</h1>
<h1 class="margemesquerda">Lorem ipsum dolor adipiscing elit.</h1>
<p class="margemesquerda">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus. Nu
magna, nec suscipit sem porttitor ut. Phasellus rhoncus sapien sit amet est lacinia
Etiam diam risus, vulputate nec consequat a, condimentum vel turpis. Donec mi lacus,
volutpat quis lectus. Nam id felis in elit commodo lacinia. Ut mi ante, congue vel l
mi. Morbi ac bibendum justo. Aliquam erat volutpat.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Proin blandit facilisis dolor, ut fermentum augue lacinia eget. In
nec lorem eu turpis dictum congue eget vitae est. Suspendisse commodo est sed augue
molestie nec viverra ante egestas. Nam dapibus nisl sit amet tellus pulvinar pulvina
Vivamus volutpat, ipsum ac scelerisque ultricies, nibh ligula pulvinar mauris, vel p
erat eget sapien. Sed hendrerit sem at neque commodo nec sagittis neque sollicitudin
vitae elit vitae dui fringilla feugiat. Nulla turpis ante, luctus ac hendrerit in, d
</p>
</body>

</html>

A Figura 65 apresenta o resultado da visualização da página no navegador.

Figura 65 Resultado da visualização da página no navegador.

Neste próximo exemplo (Código 67), as margens da esquerda e da direita da
página são con�guradas. Note que a cor do fundo foi alterada para facilitar a
visualização da área do elemento.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
}

p.margem1 {
background-color: #0000FF;
color: #FFFFFF;
margin-left: 50px;
margin-right: 30px;
}

p.margem2 {
background-color: #FF0000;
color: #FFFFFF;
margin-left: 120px;
margin-right: 120px;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Margens</h1>
<p class="margem1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus. Nu
magna, nec suscipit sem porttitor ut. Phasellus rhoncus sapien sit amet est lacinia
Etiam diam risus, vulputate nec consequat a, condimentum vel turpis. Donec mi lacus,
volutpat quis lectus. Nam id felis in elit commodo lacinia. Ut mi ante, congue vel l
mi. Morbi ac bibendum justo. Aliquam erat volutpat.
</p>
<p class="margem2">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Proin blandit facilisis dolor, ut fermentum augue lacinia eget. In
nec lorem eu turpis dictum congue eget vitae est. Suspendisse commodo est sed augue
 molestie nec viverra ante egestas. Nam dapibus nisl sit amet tellus pulvinar pulvina
Vivamus volutpat, ipsum ac scelerisque ultricies, nibh ligula pulvinar mauris, vel p
erat eget sapien. Sed hendrerit sem at neque commodo nec sagittis neque sollicitudin
vitae elit vitae dui fringilla feugiat. Nulla turpis ante, luctus ac hendrerit in, d
</p>
</body>

</html>

A Figura 66 apresenta o resultado da visualização da página no navegador.

Note a alteração da cor de fundo.
 Figura 66 Resultado da visualização da página no navegador.

Note que, no exemplo anterior, existe uma distância prede�nida entre os pará-
grafos. Essa distância é especi�cada automaticamente (por padrão) pelo nave-
gador. No entanto, é possível con�gurar essa distância conforme desejado.
Além disso, caso seja necessário, é possível removê-la. Para tanto, basta mani-
pularmos a margem superior e a inferior dos elementos. O Código 68 demons-
tra essa con�guração, e o resultado pode ser visualizado na Figura 67.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
}

p.margem1 {
background-color: #0000FF;
color: #FFFFFF;
margin-left: 50px;
margin-right: 30px;
margin-bottom: 0px;
}

p.margem2 {
background-color: #FF0000;
color: #FFFFFF;
margin-left: 120px;
margin-right: 120px;
margin-top: 0px;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Margens</h1>
<p class="margem1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus. Nu
magna, nec suscipit sem porttitor ut. Phasellus rhoncus sapien sit amet est lacinia
Etiam diam risus, vulputate nec consequat a, condimentum vel turpis. Donec mi lacus,
volutpat quis lectus. Nam id felis in elit commodo lacinia. Ut mi ante, congue vel l
mi. Morbi ac bibendum justo. Aliquam erat volutpat.
</p>
<p class="margem2">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
 ridiculus mus. Proin blandit facilisis dolor, ut fermentum augue lacinia eget. In
nec lorem eu turpis dictum congue eget vitae est. Suspendisse commodo est sed augue
molestie nec viverra ante egestas. Nam dapibus nisl sit amet tellus pulvinar pulvina
Vivamus volutpat, ipsum ac scelerisque ultricies, nibh ligula pulvinar mauris, vel p
erat eget sapien. Sed hendrerit sem at neque commodo nec sagittis neque sollicitudin
vitae elit vitae dui fringilla feugiat. Nulla turpis ante, luctus ac hendrerit in, d
</p>
</body>

</html>

A Figura 67 apresenta o resultado da visualização da página no navegador. É

importante observar que a distância entre os parágrafos foi removida.
 Figura 67 Resultado da visualização da página no navegador.

O próximo exemplo (Código 69) apresenta diversas con�gurações de margens

que podem ser aplicadas aos elementos da página. Note que até mesmo o ele-
mento body permite a con�guração da margem.
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
2 <html xmlns="http://www.w3.org/1999/xhtml">
3
4 <!-- CABEÇALHO DA PÁGINA ------------- -->
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
7 <title>Título da Página</title>
8
9 <!-- ESTILOS EM CASCATA ------------- -->
10 <style type="text/css">
11 body{
12 text-align: justify;
13 margin: 0px;
14 background-color: #99CCFF;
15 }
16 h1.margem1{
17 background-color: #0000FF;
18 color: #FFFFFF;
19 margin: 0px 50px;
20 }
21 p.margem1{
22 background-color: #82ADFF;
23 color: #FFFFFF;
24 margin-left: 50px;
25 margin-right: 50px;
26 margin-bottom: 0px;
27 margin-top: 0px;
28 }
29 p.margem2{
30 background-color: #3647FF;
31 color: #FFFFFF;
32 margin-left: 120px;
33 margin-right: 120px;
34 margin-top: 20px;
35 }
36 </style>
37 </head>
38
39 <!-- CORPO DA PÁGINA ----------------- -->
40 <body>
41 <h1 class="margem1">Margens</h1>
42 <p class="margem1">
43 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
44 </p>
45 <p class="margem2">
46 Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
47 ridiculus mus. Proin blandit facilisis dolor, ut fermentum augue lacinia eget. In
48 nec lorem eu turpis dictum congue eget vitae est. Suspendisse commodo est sed augue
49 molestie nec viverra ante egestas. Nam dapibus nisl sit amet tellus pulvinar pulvina
50 Vivamus volutpat, ipsum ac scelerisque ultricies, nibh ligula pulvinar mauris, vel p
51 erat eget sapien. Sed hendrerit sem at neque commodo nec sagittis neque sollicitudin
52 vitae elit vitae dui fringilla feugiat. Nulla turpis ante, luctus ac hendrerit in, d
53 </p>
54 </body>
55 </html>

A Figura 68 apresenta o resultado da visualização da página no navegador.

Figura 68 Resultado da visualização da página no navegador.

O Código 70 demonstra a utilização das margens em páginas web. Neste

exemplo, é possível notar as distâncias entre os parágrafos.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
margin: 20px;
}

p.margem1 {
background-color: #CCCCCC;
margin-left: 100px;
margin-right: 100px;
margin-top: 50px;
margin-bottom: 50px;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Margens</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus. Nu
magna, nec suscipit sem porttitor ut. Phasellus rhoncus sapien sit amet est lacinia
</p>
<p class="margem1">
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur
ridiculus mus. Proin blandit facilisis dolor, ut fermentum augue lacinia eget. In
nec lorem eu turpis dictum congue eget vitae est. Suspendisse commodo est sed augue
molestie nec viverra ante egestas. Nam dapibus nisl sit amet tellus pulvinar pulvina
Vivamus volutpat, ipsum ac scelerisque ultricies, nibh ligula pulvinar mauris, vel p
erat eget sapien. Sed hendrerit sem at neque commodo nec sagittis neque sollicitudin
vitae elit vitae dui fringilla feugiat. Nulla turpis ante, luctus ac hendrerit in, d
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
 faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus. Nu
magna, nec suscipit sem porttitor ut. Phasellus rhoncus sapien sit amet est lacinia
</p>
</body>

</html>

A Figura 69 apresenta o resultado da visualização da página no navegador.

 Figura 69 Exemplo da de�nição de margens entre elementos da página.

Bordas
Diversos elementos do HTML permitem a de�nição das bordas. Para tanto, os
estilos em cascata possuem um conjunto de propriedades que podem ser utili-
zadas. Veja no Quadro 9.

Propriedades de de�nição de bordas.

Border-left Borda esquerda.

Border-right Borda direita.

Border-top Borda superior.

Border-bottom Borda inferior.

Para de�nir a cor da borda. Por exemplo, especi�car a

Border-color borda superior de um elemento como da cor azul:
border-top-color: blue.
Border-style Para especi�car o estilo da linha da borda.

Border-width É utilizado para determinar a espessura da borda.

O Código 71 ilustra as principais características relativas à formatação de bor-
das, ou seja, estilo, largura e cor.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
margin: 50px;
}

h1.borda3d {
background-color: #FF0000;
border-style: groove;
border-width: 16px;
border-color: #FF0000;
color: #FFFFFF;
}

p.bordapontilhada {
border-style: dotted;
border-width: 4px;
border-color: #FF0000;
color: #0000FF;
}

p.bordatracejada {
border-style: dashed;
border-width: 4px;
border-color: #FF0000;
color: #0000FF;
}

p.bordasolida {
border-style: solid;
border-width: 4px;
border-color: #FF0000;
color: #0000FF;
}

p.bordadupla {
border-style: double;
border-width: 8px;
border-color: #FF0000;
color: #0000FF;
}
 p.borda3Dgroove {
border-style: groove;
border-width: 8px;
border-color: #FF0000;
color: #0000FF;
}

p.borda3Dridge {
border-style: ridge;
border-width: 8px;
border-color: #FF0000;
color: #0000FF;
}

p.borda3Dinset {
border-style: inset;
border-width: 8px;
border-color: #FF0000;
color: #0000FF;
}

p.borda3Doutset {
border-style: outset;
border-width: 8px;
border-color: #FF0000;
color: #0000FF;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1 class="borda3d">Estilos da propriedade borda</h1>
<p class="bordapontilhada">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus.
</p>
<p class="bordatracejada">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus.
</p>
<p class="bordasolida">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus.
</p>
<p class="bordadupla">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus.
</p>
<p class="borda3Dgroove">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus.
</p>
<p class="borda3Dridge">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus.
</p>
<p class="borda3Dinset">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus.
</p>
<p class="borda3Doutset">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus.
</p>
</body>

</html>

As Figuras 70, 71 e 72 apresentam o resultado da visualização da página no

navegador, conforme execução do Código 71.

Figura 70 Resultado da visualização da página no navegador.

Figura 71 Resultado da visualização da página no navegador.
 Figura 72 Resultado da visualização da página no navegador.

A propriedade “borda” também pode ser con�gurada para outros elementos da

página, como, por exemplo, para imagens. O Código 72 demonstra a utilização
da propriedade borda em imagens.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
margin: 50px;
}

img {
margin: 20px;
}

img.borda1 {
border-style: dotted;
border-width: 4px;
border-color: #FF0000;
}

img.borda2 {
border-left-style: dashed;
border-right-style: dashed;
border-top-style: double;
border-bottom-style: double;
border-width: 4px;
border-color: #FF0000;
}

img.borda3 {
border-style: groove;
border-width: 20px;
border-color: #FF0000;
}

img.borda4 {
background-color: #0000FF;
border-style: ridge;
border-width: 20px;
border-color: #FF0000;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Borda em imagens</h1>
<img class="borda1" src="imagem3.jpg" alt="imagem" />
<img class="borda2" src="imagem3.jpg" alt="imagem" />
<img class="borda3" src="imagem3.jpg" alt="imagem" />
<img class="borda4" src="imagem3.jpg" alt="imagem" />
</body>

</html>

A Figura 73 apresenta o resultado da visualização da página no navegador.

 Figura 73 Exemplo da de�nição de bordas em elementos da página.

Espaçamentos
Outro conjunto de propriedades muito interessante dos estilos em cascata é o
espaçamento entre os elementos. Esta especi�cação permite a de�nição entre
a distância de um elemento e seu conteúdo, a qual é con�gurada pela proprie-
dade . As seguintes propriedades podem ser de�nidas:

Propriedades de espaçamento em branco entre os elementos.

Padding-left Espaçamento esquerdo.

Padding-right Espaçamento direito.

Padding-top Espaçamento superior.

Padding-bottom Espaçamento inferior.

O Código 73 ilustra a utilização de espaçamento em páginas web. Neste exem-
plo é possível notar a distância signi�cativa entre a borda e o conteúdo do pa-
rágrafo, conforme ilustrado na Figura 74. A cor de plano de fundo foi colocada
nos parágrafos apenas para facilitar a visualização dos espaçamentos.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
margin: 10px;
}

p.espacamento1 {
padding-top: 20px;
padding-right: 50px;
padding-bottom: 30px;
padding-left: 40px;
}

p.espacamento2 {
background-color: #0000FF;
color: #FFFFFF;
padding: 20px 30px;
}

p.espacamento3 {
border: dashed 3px #FF0000;
background-color: #0000FF;
color: #FFFFFF;
padding: 30px 50px;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p class="espacamento1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus. Nu
magna, nec suscipit sem porttitor ut.
</p>
<p class="espacamento2">
 In pellentesque nibh id sapien gravida facilisis. Sed augue tellus, ultricies non co
lectus. Aliquam sed lectus non ante interdum ultrices. Vestibulum ante ipsum primis
ultrices posuere cubilia Curae; Aliquam blandit adipiscing odio, non feugiat nisl ve
tincidunt augue. Fusce at sodales odio. Fusce fermentum diam ac velit sodales rutrum
nunc, a semper nibh dignissim ut. Sed sit amet justo nulla, quis iaculis enim. Nunc
luctus.
</p>
<p class="espacamento3">
Ut sed nunc et orci mollis consequat vel nec mauris. Cras vel faucibus justo. Vivamu
turpis, sit amet lacinia velit posuere quis. Cras eu augue sapien. Nullam diam nisl,
convallis et velit. Donec ornare dapibus ligula, aliquam scelerisque leo condimentum
sapien ac aliquet. Nunc dapibus, nisi vitae egestas mattis, mauris ipsum aliquam lor
augue. Etiam ut ante vel nisl mollis scelerisque. Donec lacus leo, tempor sed accums
in urna lorem, vitae pellentesque augue.
</p>
</body>

</html>
 Figura 74.

O exemplo a seguir demonstra a relação entre as propriedades margem (mar-

gin), borda (border) e espaçamento (padding). Note no exemplo, que a borda do
corpo da página foi de�nida como 0 (zero). Além disso, as con�gurações dos
elementos de parágrafo especi�cam exatamente cada uma das propriedades
descritas anteriormente.
 Figura 75 Exemplo da formatação de bordas em CSS.

Dimensões dos elementos

Além dos estilos apresentados anteriormente, os estilos em cascata permitem
a con�guração das dimensões dos elementos que compõem o documento.
Neste contexto algumas propriedades podem ser especi�cadas. Conheça as
propriedades analisando o Quadro 11.

Propriedades de dimensionamento de elementos.

Height Altura.

Width Largura.
O Código 74 ilustra as propriedades descritas no Quadro 11.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
}

p.dimensao1 {
width: 300px;
height: 400px;
border: solid 1px #0000FF;
}

p.dimensao2 {
width: 500px;
background-color: #CECECE;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p class="dimensao1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus. Nu
magna, nec suscipit sem porttitor ut.
</p>
<p class="dimensao2">
Ut sed nunc et orci mollis consequat vel nec mauris. Cras vel faucibus justo. Vivamu
turpis, sit amet lacinia velit posuere quis. Cras eu augue sapien. Nullam diam nisl,
convallis et velit. Donec ornare dapibus ligula, aliquam scelerisque leo condimentum
sapien ac aliquet. Nunc dapibus, nisi vitae egestas mattis, mauris ipsum aliquam lor
augue. Etiam ut ante vel nisl mollis scelerisque. Donec lacus leo, tempor sed accums
in urna lorem, vitae pellentesque augue.
</p>
</body>

</html>
A Figura 76 apresenta o resultado da visualização da página no navegador.

Figura 76 Resultado da visualização da página no navegador.

Quando utilizamos as propriedades para controle das dimensões dos elemen-

tos, podemos enfrentar problemas em que a informação contida no elemento é
maior do que a área de�nida nas dimensões. Este problema pode ser visuali-
zado no exemplo do Código 75. Note que as informações dos parágrafos são
sobrepostas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body{
text-align: justify;
margin: 20px;
}
p.dimensao1{
width: 500px;
height: 100px;
border: solid 1px #0000FF;
color: #FF0000;
}
p.dimensao2{
width: 500px;
background-color: #CECECE;
}

</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<p class="dimensao1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, a
</p>
<p class="dimensao2">
Ut sed nunc et orci mollis consequat vel nec mauris. Cras vel faucibus justo
</p>
</body>
</html>

A Figura 77 apresenta o resultado da visualização da página no navegador, em

que houve a sobreposição do texto.
 Figura 77 Resultado da visualização da página no navegador.

Uma solução para esse problema é a utilização de outra propriedade denomi-

nada over�ow. Essa propriedade permite controlar o que ocorrerá com a infor-
mação contida no elemento, quando as dimensões deste forem excedidas.

A propriedade over�ow permite a utilização de quatro con�gurações:

1. Visible – que apresenta a informação como ela realmente deve ser (este é
o valor padrão do navegador).
2. Hidden – que não apresenta (ou esconde) as informações que excedem as
dimensões do elemento.
3. Scroll – que habilita uma barra de rolagem para navegação pelo conteúdo
excedido.
4. Auto – que determina automaticamente se há (ou não) a necessidade de
uma barra de rolagem para exibição das informações do elemento.

O exemplo descrito no Código 76 demonstra a utilização da propriedade over-

�ow em conjunto com as propriedades de dimensionamento dos elementos.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
text-align: justify;
margin: 20px;
}

p.controle1 {
width: 500px;
height: 100px;
overflow: hidden;
color: #FF0000;
border: dashed 2px #0000FF;
}

p.controle2 {
width: 300px;
height: 200px;
background-color: #00CC00;
overflow: scroll;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Controle das dimensões do elemento</h1>
<p class="controle1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur, arcu quis
mauris tempor neque, et bibendum erat justo quis nulla. Morbi vitae diam dolor, vel
faucibus, massa non laoreet auctor, quam libero tincidunt diam, et tristique nisi nu
eros ut sapien tempus interdum fermentum enim tempor. Integer pulvinar varius orci,
quis. Ut purus ante, dictum non vehicula sed, volutpat at nulla. Proin tempor nisi u
tellus mollis. Donec eget tellus sit amet purus tempus rutrum et sit amet lectus. Nu
magna, nec suscipit sem porttitor ut.
</p>
<p class="controle2">
Ut sed nunc et orci mollis consequat vel nec mauris. Cras vel faucibus justo. Vivamu
turpis, sit amet lacinia velit posuere quis. Cras eu augue sapien. Nullam diam nisl,
convallis et velit. Donec ornare dapibus ligula, aliquam scelerisque leo condimentum
sapien ac aliquet. Nunc dapibus, nisi vitae egestas mattis, mauris ipsum aliquam lor
 augue. Etiam ut ante vel nisl mollis scelerisque. Donec lacus leo, tempor sed accums
in urna lorem, vitae pellentesque augue. Lorem ipsum dolor sit amet, consectetur adi
consectetur, arcu quis faucibus pharetra, turpis mauris tempor neque, et bibendum er
vitae diam dolor, vel tincidunt erat. Vivamus faucibus, massa non laoreet auctor, qu
tristique nisi nunc in ligula. Morbi pulvinar eros ut sapien tempus interdum ferment
pulvinar varius orci, at vestibulum metus semper quis. Ut purus ante, dictum non veh
nulla. Proin tempor nisi ut sem porttitor in porttitor tellus mollis. Donec eget tel
rutrum et sit amet lectus. Nullam condimentum scelerisque magna, nec suscipit sem po
</p>
</body>

</html>

A Figura 78 apresenta o resultado da visualização da página no navegador ao

utilizar a propriedade over�ow em conjunto com as propriedades de dimensi-
onamento dos elementos.

Figura 78 Resultado da visualização da página no navegador.

O controle de dimensões pode ser aplicado a qualquer elemento da página. O
exemplo a seguir (Código 77) demonstra a utilização das propriedades largura
(width) e altura (height) no controle das dimensões de uma imagem. Observe
que o mesmo arquivo de imagem foi incluído três vezes na página, e o dimen-
sionamento das imagens foram realizadas por meio das propriedades de di-
mensionamento.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA ------------- -->

<style type="text/css">
body {
margin: 20px;
}

img.pequeno {
width: 32px;
height: 32px;
}

img.normal {
width: auto;
height: auto;
}

img.grande {
width: 600px;
height: 600px;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Controle das dimensões de uma imagem</h1>
<h3>tamanho da imagem = pequeno (32x32 pixels)</h3>
<img class="pequeno" src="imagem1.jpg" alt="exemplo de imagem" />
<h3>tamanho da imagem = normal (300x300 pixels)</h3>
<img class="normal" src="imagem1.jpg" alt="exemplo de imagem" />
<h3>tamanho da imagem = grande (600x600 pixels)</h3>
<img class="grande" src="imagem1.jpg" alt="exemplo de imagem" />
</body>

</html>

O resultado pode ser visualizado na Figura 79.

Figura 79 Exemplo do dimensionamento de elementos em CSS
As listas são um recurso muito empregado para apresentação de informações
em página web. Anteriormente, você aprendeu como criar listas e como
con�gurá-las por meio de propriedades da linguagem HTML.

Propriedades para formatação de listas.

Permite a inserção de uma imagem como marcador

List-style-image
da lista.

De�ne o posicionamento das informações da lista em

List-style-position
função dos marcadores.

Especi�ca o tipo de marcador da lista, e pode ser apli-

List-style-type cado tanto para listas ordenadas quanto para listas
não ordenadas.
As Folhas de Estilo em Cascata fornecem diversos mecanismos para formata-
ção de listas. Com isso, não há necessidade de utilizar propriedades da lingua-
gem HTML para formatação. Essa estratégia é muito recomendada pela W3C.

O Código 78 demonstra como é possível formatar listas por meio das proprie-
dades das Folhas de Estilos em Cascata. Além disso, são apresentados os prin-
cipais tipos de marcadores que podem ser aplicados para as listas ordenadas e
não ordenadas. Neste exemplo também é possível notar a de�nição múltipla
de um conjunto de estilos para dois seletores. Este tipo de especi�cação é co-
di�cada na linha 15, em que os seletores ul e ol recebem o mesmo conjunto de
estilos.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA -------- -->

<style type="text/css">
h1 {
border-top: solid 2px #0000FF;
border-bottom: solid 2px #0000FF;
}

ul,
ol {
border-bottom: dashed 1px #CECECE;
margin: 0px;
padding-top: 10px;
padding-bottom: 10px;
}

/*--- Lista não ordenda ----- */

ul.nenhum {
list-style-type: none;
}

ul.disco {
list-style-type: disc;
}

ul.circulo {
list-style-type: circle;
}

ul.quadrado {
list-style-type: square;
}

/*--- Lista ordenda ----- */

ol.decimal {
list-style-type: decimal;
}

ol.decimalcomzero {
list-style-type: decimal-leading-zero;
}

ol.letraminuscula {
 list-style-type: lower-alpha;
}

ol.letramaiuscula {
list-style-type: upper-alpha;
}

ol.romanosminuscula {
list-style-type: lower-roman;
}

ol.romanosmaiuscula {
list-style-type: upper-roman;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Listas não-ordenadas</h1>
<ul class="nenhum">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas blandit massa massa, in dictum urna.</li>
<li>Integer elementum ultricies orci, in pharetra nulla aliquam scelerisque.
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
</ul>
<ul class="disco">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas blandit massa massa, in dictum urna.</li>
<li>Integer elementum ultricies orci, in pharetra nulla aliquam scelerisque.
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
</ul>
<ul class="circulo">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas blandit massa massa, in dictum urna.</li>
<li>Integer elementum ultricies orci, in pharetra nulla aliquam scelerisque.
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
</ul>
<ul class="quadrado">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas blandit massa massa, in dictum urna.</li>
<li>Integer elementum ultricies orci, in pharetra nulla aliquam scelerisque.
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
 </ul>

<h1>Listas ordenadas</h1>
<ol class="decimal">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas blandit massa massa, in dictum urna.</li>
<li>Integer elementum ultricies orci, in pharetra nulla aliquam scelerisque.
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
</ol>
<ol class="decimalcomzero">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas blandit massa massa, in dictum urna.</li>
<li>Integer elementum ultricies orci, in pharetra nulla aliquam scelerisque.
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
</ol>
<ol class="letraminuscula">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas blandit massa massa, in dictum urna.</li>
<li>Integer elementum ultricies orci, in pharetra nulla aliquam scelerisque.
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
</ol>
<ol class="letramaiuscula">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas blandit massa massa, in dictum urna.</li>
<li>Integer elementum ultricies orci, in pharetra nulla aliquam scelerisque.
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
</ol>
<ol class="romanosminuscula">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas blandit massa massa, in dictum urna.</li>
<li>Integer elementum ultricies orci, in pharetra nulla aliquam scelerisque.
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
</ol>
<ol class="romanosmaiuscula">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas blandit massa massa, in dictum urna.</li>
<li>Integer elementum ultricies orci, in pharetra nulla aliquam scelerisque.
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
</ol>
</body>
</html>

A Figura 80 apresenta o resultado da visualização da página no navegador em

que utiliza listas não ordenadas e a propriedade list-style-type.

Figura 80 Resultado da visualização da página no navegador.

E a Figura 81 apresenta o resultado da visualização da página no navegador
em que utiliza listas ordenadas.
 Figura 81 Resultado da visualização da página no navegador.

Os marcadores da lista também podem ser con�gurados com imagem. O

Código 79 demonstra este tipo de formatação.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css">
ul.imagem {
list-style-type: none;
list-style-image: url('icone.png');
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Listas com imagens</h1>
<ul class="imagem">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Maecenas blandit massa massa, in dictum urna.</li>
<li>Integer elementum ultricies orci, in pharetra nulla aliquam scelerisque.
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
<li>Duis laoreet auctor lorem, id eleifend ligula tempus posuere.</li>
<li>Aenean pharetra elementum lectus, vitae hendrerit enim varius sit amet.</
<li>Aenean nec urna dolor, vel ornare eros.</li>
</ul>
</body>

</html>

A Figura 82 apresenta o resultado da visualização da página no navegador em

que os marcadores de lista foram utilizados para con�gurar imagens.
 Figura 82 Resultado da visualização da página no navegador.

O posicionamento do marcador, ou item da lista, em relação ao texto também

pode ser con�gurado. O Código 80 demonstra os tipos de con�gurações que
podem ser de�nidos.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css">
ul.dentro {
list-style-type: disc;
list-style-position: inside;
}

ul.fora {
list-style-type: disc;
list-style-position: outside;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Listas e posicionamento</h1>
<ul class="dentro">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna non metus
laoreet orci. Integer ornare pulvinar odio, nec vestibulum odio laoreet ut. Aene
risus, vel semper velit hendrerit vitae. Donec molestie lacinia mollis. Aliquam
adipiscing accumsan. Nulla porttitor urna id libero suscipit sit amet dictum qua
fermentum gravida viverra. Ut blandit porttitor metus, in semper lorem laoreet q
viverra. Integer sollicitudin sem a sem dictum luctus. </li>
<li>Vivamus eu tellus eu diam sodales sollicitudin sit amet lobortis erat. Fusce aug
porta ut, suscipit ut nunc. Aenean auctor dui eget nisi cursus quis posuere sapi
eros ut risus tincidunt hendrerit. Etiam ac nisi id justo dignissim ullamcorper
risus, in consequat tortor. Duis tristique rutrum diam vitae lacinia. Proin soda
consectetur, nisl justo pretium lectus, non pharetra dui lacus ac magna. Nullam
</ul>
<ul class="fora">
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac magna non metus
laoreet orci. Integer ornare pulvinar odio, nec vestibulum odio laoreet ut. Aene
risus, vel semper velit hendrerit vitae. Donec molestie lacinia mollis. Aliquam
adipiscing accumsan. Nulla porttitor urna id libero suscipit sit amet dictum qua
fermentum gravida viverra. Ut blandit porttitor metus, in semper lorem laoreet q
viverra. Integer sollicitudin sem a sem dictum luctus. </li>
<li>Vivamus eu tellus eu diam sodales sollicitudin sit amet lobortis erat. Fusce aug
porta ut, suscipit ut nunc. Aenean auctor dui eget nisi cursus quis posuere sapi
eros ut risus tincidunt hendrerit. Etiam ac nisi id justo dignissim ullamcorper
risus, in consequat tortor. Duis tristique rutrum diam vitae lacinia. Proin soda
 consectetur, nisl justo pretium lectus, non pharetra dui lacus ac magna. Nullam
</ul>
</body>

</html>

O resultado da visualização da página no navegador pode ser observado na

Figura 83.
 Figura 83 Resultado da visualização da página no navegador.

As listas são comumente utilizadas para de�nição de menus de navegação em

páginas web. O Código 81 demonstra como criar um menu vertical por meio
de uma lista.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css">
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

li {
text-align: center;
border: solid 1px #0000FF;
background-color: #CECECE;
margin: 3px 0px;
width: 80px;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h3>Menu</h3>
<ul>
<li><a href="inicio.html">Início</a></li>
<li><a href="pagina1.html">Página 1</a></li>
<li><a href="pagina2.html">Página 2</a></li>
<li><a href="pagina3.html">Página 3</a></li>
<li><a href="pagina4.html">Página 4</a></li>
<li><a href="pagina5.html">Página 5</a></li>
</ul>
</body>

</html>

A Figura 84 apresenta o resultado da visualização da página no navegador em

que foi criado um menu vertical por meio de uma lista.
 Figura 84 Resultado da visualização da página no navegador.

É possível visualizar o menu horizontalmente apenas con�gurando uma pro-

priedade denominada �oat com o valor left. O exemplo a seguir (Código 82)
demonstra um menu de navegação horizontal.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css">
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

li {
text-align: center;
border: solid 1px #0000FF;
background-color: #CECECE;
margin: 3px 0px;
width: 80px;
float: left;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h3>Menu</h3>
<ul>
<li><a href="inicio.html">Início</a></li>
<li><a href="pagina1.html">Página 1</a></li>
<li><a href="pagina2.html">Página 2</a></li>
<li><a href="pagina3.html">Página 3</a></li>
<li><a href="pagina4.html">Página 4</a></li>
<li><a href="pagina5.html">Página 5</a></li>
</ul>
</body>

</html>

A Figura 85 apresenta o resultado da visualização da página no navegador em

que foi utilizado o menu de visualização horizontal.
 Figura 85 Resultado da visualização da página no navegador.

As Folhas de Estilos em Cascata podem ser utilizadas para formatação de ta-

belas. Neste contexto, as propriedades do CSS fornecem mecanismos para es-
peci�car o estilo das bordas, das linhas e das células de uma tabela.

O Código 83 demonstra a utilização das propriedades do CSS para estilizar a

borda de uma tabela. Observe que as formatações foram aplicadas ao elemen-
to <table>, bem como ao elemento <td> (responsável pela de�nição de uma cé-
lula). O elemento <th> de�ne a primeira linha da tabela, também denominado
cabeçalho da tabela.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css">
table,
th,
td {
border-width: 1px;
border-style: solid;
border-color: #000000;
}

table {
width: 100%;
}

th {
background-color: #CECECE;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th>Telefone</th>
</tr>
<tr>
<td>João da Silva</td>
<td>Rua Salvador Andrade, 1234</td>
<td>(11) 3323-2233</td>
</tr>
<tr>
<td>Carlos Antônio</td>
<td>Rua Campo Belo, 4325</td>
<td>(11) 4432-4587</td>
</tr>
<tr>
<td>Marcos Francisco</td>
<td>Avenida Major Francisco, 932</td>
 <td>(11) 7644-6654</td>
</tr>
<tr>
<td>Ana Maria</td>
<td>Rua Euripedes da Silva, 3939</td>
<td>(11) 3425-6632</td>
</tr>
<tr>
<td>Cleber dos Santos</td>
<td>Avenida Leais Paulista, 392</td>
<td>(11) 2342-4336</td>
</tr>
<tr>
<td>Felipe Melo</td>
<td>Rua Amador Bueno, 423</td>
<td>(12) 8452-4333</td>
</tr>
<tr>
<td>Antônio Garcia</td>
<td>Avenida Presidente Castelo Branco, 3323</td>
<td>(12) 3332-2345</td>
</tr>
<tr>
<td>José Carlos</td>
<td>Rua Virgílio Sallata, 2834</td>
<td>(12) 8342-4432</td>
</tr>
</table>
</body>

</html>

A Figura 86 apresenta o resultado da visualização da página no navegador.

 Figura 86 Resultado da visualização da página no navegador.

Note, no exemplo da Figura 86, que, apesar da de�nição de uma borda sólida, o
resultado é uma borda dupla. Este efeito ocorre por conta das con�gurações
padronizadas dos navegadores. Para que a borda seja apresentada adequada-
mente, é necessário con�gurar uma propriedade das Folhas de Estilo em
Cascata denominada border-collapse. As alterações no código-fonte da pági-
na, bem como o resultado são apresentados a seguir. Você pode notar a con�-
guração da propriedade na linha 18 do Código 84.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css">
table,
th,
td {
border-width: 1px;
border-style: solid;
border-color: #000000;
}

table {
width: 100%;
border-collapse: collapse;
}

th {
background-color: #CECECE;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<table>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th>Telefone</th>
</tr>
<tr>
<td>João da Silva</td>
<td>Rua Salvador Andrade, 1234</td>
<td>(11) 3323-2233</td>
</tr>
<tr>
<td>Carlos Antônio</td>
<td>Rua Campo Belo, 4325</td>
<td>(11) 4432-4587</td>
</tr>
<tr>
<td>Marcos Francisco</td>
 <td>Avenida Major Francisco, 932</td>
<td>(11) 7644-6654</td>
</tr>
<tr>
<td>Ana Maria</td>
<td>Rua Euripedes da Silva, 3939</td>
<td>(11) 3425-6632</td>
</tr>
<tr>
<td>Cleber dos Santos</td>
<td>Avenida Leais Paulista, 392</td>
<td>(11) 2342-4336</td>
</tr>
<tr>
<td>Felipe Melo</td>
<td>Rua Amador Bueno, 423</td>
<td>(12) 8452-4333</td>
</tr>
<tr>
<td>Antônio Garcia</td>
<td>Avenida Presidente Castelo Branco, 3323</td>
<td>(12) 3332-2345</td>
</tr>
<tr>
<td>José Carlos</td>
<td>Rua Virgílio Sallata, 2834</td>
<td>(12) 8342-4432</td>
</tr>
</table>
</body>

</html>

A Figura 87 apresenta o resultado da visualização da página no navegador.

 Figura 87 Resultado da visualização da página no navegador.

Podemos elaborar formatações so�sticadas para as tabelas utilizando as pro-

priedades das Folhas de Estilo em Cascata que aprendemos até o momento. O
exemplo a seguir demonstra como aplicar essas propriedades na formatação
de uma tabela. Observe o Código 85.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css">
body {
font-family: "Comic Sans MS";
}

table {
width: 100%;
border-collapse: collapse;
}

table,
th,
td {
border-width: 2px;
border-style: solid;
border-color: #0000FF;
padding: 5px;
}

th {
background-color: #0000FF;
color: #FFFFFF;
}

tr.linhapar {
background-color: #FFFFFF;
}

tr.linhaimpar {
background-color: #CECECE;
}

td.centralizado {
text-align: center;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
 <table>
<tr>
<th>Nome</th>
<th>Endereço</th>
<th>Telefone</th>
</tr>
<tr class="linhapar">
<td>João da Silva</td>
<td>Rua Salvador Andrade, 1234</td>
<td class="centralizado">(11) 3323-2233</td>
</tr>
<tr class="linhaimpar">
<td>Carlos Antônio</td>
<td>Rua Campo Belo, 4325</td>
<td class="centralizado">(11) 4432-4587</td>
</tr>
<tr class="linhapar">
<td>Marcos Francisco</td>
<td>Avenida Major Francisco, 932</td>
<td class="centralizado">(11) 7644-6654</td>
</tr>
<tr class="linhaimpar">
<td>Ana Maria</td>
<td>Rua Euripedes da Silva, 3939</td>
<td class="centralizado">(11) 3425-6632</td>
</tr>
<tr class="linhapar">
<td>Cleber dos Santos</td>
<td>Avenida Leais Paulista, 392</td>
<td class="centralizado">(11) 2342-4336</td>
</tr>
<tr class="linhaimpar">
<td>Felipe Melo</td>
<td>Rua Amador Bueno, 423</td>
<td class="centralizado">(12) 8452-4333</td>
</tr>
<tr class="linhapar">
<td>Antônio Garcia</td>
<td>Avenida Presidente Castelo Branco, 3323</td>
<td class="centralizado">(12) 3332-2345</td>
</tr>
<tr class="linhaimpar">
<td>José Carlos</td>
<td>Rua Virgílio Sallata, 2834</td>
<td class="centralizado">(12) 8342-4432</td>
</tr>
</table>
</body>

</html>

A Figura 88 apresenta o resultado da visualização da página no navegador.

 Figura 88 Resultado da visualização da página no navegador.

Assim, você conheceu as principais formatações que podem ser realizadas

em tabelas por meio das Folhas de Estilo em Cascata.

Pseudoclasses
As pseudoclasses permitem que efeitos especiais sejam de�nidos nos elemen-
tos HTML. Existem diversos efeitos especi�cados pela W3C, no entanto, mui-
tos deles ainda não podem ser visualizados no navegador.

Um destes efeitos bastante utilizado é a formatação de hiperlinks entre docu-

mentos. Para este efeito, quatro características podem ser con�guradas.
Observe-as no Quadro 13.

Propriedades de pseudoclasses para formatação de hiperlinks.

Determina a aparência do hiperlink ainda não visita-

a:link
do.
a:visited Especi�ca a aparência do hiperlink visitado.

Especi�ca a aparência do hiperlink quando o pontei-

a:hover
ro do mouse está sobre ele.

Determina a aparência quando o hiperlink é selecio-

a:active
nado (clicado).
O Código 86 ilustra a utilização de pseudoclasses por meio dos estilos em cas-
cata.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

<head>
<title>Formatação em CSS </title>
<style type="text/css">
a.estilo1:link {
color: #ff0000
}

a.estilo1:visited {
color: #0000ff
}

a.estilo1:hover {
color: #ffcc00
}

a.estilo2:link {
color: #ff0000
}

a.estilo2:visited {
color: #0000ff
}

a.estilo2:hover {
font-size: 150%
}

a.estilo3:link {
color: #ff0000
}

a.estilo3:visited {
color: #0000ff
}

a.estilo3:hover {
background: #66ff66
}

a.estilo4:link {
color: #ff0000
}

a.estilo4:visited {
color: #0000ff
}

a.estilo4:hover {
font-family: fixedsys
 }

a.estilo5:link {
color: #ff0000;
text-decoration: none
}

a.estilo5:visited {
color: #0000ff;
text-decoration: none
}

a.estilo5:hover {
text-decoration: underline
}
</style>
</head>

<body>
<p>
Passe com o ponteiro do mouse sobre os hiperlinks e
veja como eles reagem de maneira diferente.
</p>
<p>
<a class="estilo1" href="#">Esta muda de cor</a><br />
<a class="estilo2" href="#">Esta muda o tamanho das letras</a><br />
<a class="estilo3" href="#">Esta muda a cor de fundo</a><br />
<a class="estilo4" href="#">Esta muda o tipo de letra</a><br />
<a class="estilo5" href="#">Esta muda a decoração do texto</a>
</p>
</body>

</html>

A Figura 89 apresenta o resultado da visualização da página no navegador em

que foi utilizada uma pseudoclasse.
 Figura 89 Exemplo de formatação de hiperlinks com pseudoclasses.

As pseudoclasses para formatação de hiperlinks podem ser associadas às lis-

tas com objetivo de criar barras de navegação (ou menus). O Código 87 é um
exemplo que demonstra como aplicar esses conceitos em conjunto, para pro-
duzir uma barra de navegação so�sticada e estilizada.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css">
body {
font-family: "Comic Sans MS";
}

ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

a:link,
a:visited {
background-color: #0000FF;
color: #FFFFFF;
display: block;
text-align: center;
text-decoration: none;
width: 150px;
padding-top: 5px;
padding-bottom: 5px;
}

a:hover,
a:active {
background-color: #FF0000;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h3>Menu</h3>
<ul>
<li><a href="inicio.html">Início</a></li>
<li><a href="pagina1.html">Página 1</a></li>
<li><a href="pagina2.html">Página 2</a></li>
<li><a href="pagina3.html">Página 3</a></li>
<li><a href="pagina4.html">Página 4</a></li>
<li><a href="pagina5.html">Página 5</a></li>
 </ul>
</body>

</html>

A Figura 90 apresenta o resultado da visualização da página no navegador.

Figura 90 Resultado da visualização da página no navegador.

Para transformar a barra de navegação vertical, apresentada na Figura 90, em

uma barra de navegação horizontal, é necessário realizarmos algumas altera-
ções nas Folhas de Estilo em Cascata. O Código 88 apresenta as alterações ne-
cessárias.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css">
body {
font-family: "Comic Sans MS";
}

ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

a:link,
a:visited {
background-color: #0000FF;
color: #FFFFFF;
display: block;
text-align: center;
text-decoration: none;
width: 150px;
padding-top: 5px;
padding-bottom: 5px;
}

a:hover,
a:active {
background-color: #FF0000;
}

li {
float: left;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h3>Menu</h3>
<ul>
<li><a href="inicio.html">Início</a></li>
<li><a href="pagina1.html">Página 1</a></li>
 <li><a href="pagina2.html">Página 2</a></li>
<li><a href="pagina3.html">Página 3</a></li>
<li><a href="pagina4.html">Página 4</a></li>
<li><a href="pagina5.html">Página 5</a></li>
</ul>
</body>

</html>

A Figura 91 apresenta o resultado da visualização da página no navegador

com a barra horizontal.

Figura 91 Resultado da visualização da página no navegador.

Posicionamento dos elementos

As Folhas de Estilo em Cascata conseguem estruturar o posicionamento dos
elementos das páginas web. Para isso, são utilizadas as propriedades do CSS
relativas ao posicionamento e espaçamento. Além disso, para organização da
página, é necessário usar um elemento não visual denominado .

Em linhas gerais, o elemento permite a criação de divisões no interior de

uma página web. Esta metodologia de estruturação vem sendo amplamente
utilizada pelos desenvolvedores web, pois segue os padrões de�nidos pela
W3C. Além disso, essa metodologia substitui os frames, que não são recomen-
dados pela W3C.

O exemplo a seguir demonstra como criar a estrutura de uma página web uti-
lizando Folhas de Estilos em Cascata e o elemento . No exemplo, é criada
uma página web, seguindo o layout tradicional, o qual divide a página em: ca-
beçalho, menu, conteúdo e rodapé.

Para facilitar a codi�cação do exemplo, crie uma página web nomeada pagi-
na.html, conforme apresentado no Código 89. Crie também um arquivo para
Folha de Estilo em Cascata, denominado estilo.css, conforme ilustrado no
Código 88.

Neste exemplo, descrito no Código 89, as Folhas de Estilo em Cascata estão de-
�nidas em um arquivo externo denominado estilo.css. E a estrutura da página
é de�nida com seletores do tipo ID (#).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xh
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título do Documento</title>
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<div id="tudo">
<div id="topo">
<h1>
Título da Página
</h1>
</div>
<div id="navegacao">
<h3>Menu</h3>
<ul>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</div>

<div id="principal">
<h3> Conteúdo</h3>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus
augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales pu
blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcor
ipsum. Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan,
ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenati
metus auctor fringilla. Curabitur interdum augue a pede.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus
augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales pu
blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcor
ipsum. Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan,
ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenati
metus auctor fringilla. Curabitur interdum augue a pede.
</p>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus
augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales pu
blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcor
ipsum. Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan,
ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenati
metus auctor fringilla. Curabitur interdum augue a pede.
</p>
</div>
 <div id="rodape">
Rodapé da página
</div>
</div>

<body>
</body>

</html>

O Código 90 apresenta o conteúdo do arquivo estilo.css, em que são de�nidas

as formatações do conteúdo da página, bem como as especi�cações da estru-
tura do documento.
 body {
margin: 0px;
padding: 0px;
font: 12px Arial, Helvetica, sans-serif;
background: #ffe;
text-align: center;
}

h3 {
text-align: center;
}

#tudo {
width: 760px;
text-align: left;
margin: 0 auto;
background-color: #6495ED;
}

#topo {
padding: 10px;
text-align: center;
background-color: #000080;
color: #FFFFFF;
}

#navegacao {
width: 170px;
background-color: #6495ED;
float: left;
}

#principal {
border-left: dashed 1px #696969;
padding: 0px 5px;
width: 579px;
background-color: #D3D3D3;
float: right;
}

#rodape {
clear: both;
text-align: center;
background-color: #000080;
color: #FFFFFF;
}

A Figura 92 apresenta o resultado da visualização da página no navegador.

 Figura 92 Exemplo de formatação de uma página com divisores (div) e estilos em cascata.

14. Desenvolvendo um site XHTML/CSS na

prática
Para demonstrar a utilização dos principais conceitos da linguagem de mar-
cação HTML e sua variação XHTML, bem como das Folhas de Estilo em
Cascata (CSS), vamos construir um projeto de um web site completo.

As etapas para elaboração do site serão demonstradas passo a passo. As infor-

mações contidas no site são �ctícias e serão utilizadas apenas para exempli�-
car os conceitos.

Inicialmente, para organizar nosso projeto, vamos criar uma pasta denomina-
da e dentro desta pasta criaremos mais três pastas nomeadas como ,
e . Visualmente estas pastas podem ser representadas como
se segue:
 Figura 93.

Todas as páginas terão as mesmas formatações de�nidas em um arquivo de

estilos chamado , que deverá ser armazenado na pasta . Você já
pode criar este arquivo, no entanto, codi�caremos os estilos mais tarde.

O site será composto por cinco páginas para apresentação de conteúdo, além
de uma página principal denominada . As cinco páginas que com-
põem o site podem ser de�nidas como: pagina1.html, pagina2.html, pagi-
na3.html, pagina4.html e pagina5.html. Estas, por sua vez, devem ser armaze-
nadas na pasta página. Já a página principal deverá ser armazenada na pasta
base ( ).

Com isso, a estrutura da pasta e os arquivos que compõem o projeto do site são
apresentados como se segue:

Figura 94.

Vamos começar a construção do projeto de�nindo a estrutura do site. Para is-

so, utilizaremos os divisores apresentados anteriormente, bem como as pro-
priedades de posicionamento das Folhas de Estilo em Cascata. Criaremos
também um menu de navegação utilizando as pseudoclasses e as listas.
A estrutura das páginas pode ser visualizada na Figura 95.

Figura 95 Resultado da visualização da página no navegador Firefox.

Esta estrutura ou layout da página funciona perfeitamente em outros navega-

dores, como o Internet Explorer e o Google Chrome. Observe, nas Figuras 96 e
97, os resultados destes navegadores.

Figura 96 Resultado da visualização da página no navegador Internet Explorer.

 Figura 97 Resultado da visualização da página no navegador Google Chrome.

Vamos começar codi�cando a página inicial do nosso site; o Código 91 apre-

senta o conteúdo do arquivo . Por padronização, o nome da página
inicial de um site é de�nido como index, uma vez que representa um índice
para navegação para as outras páginas do site.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<div id="tudo">
<!-- CABEÇALHO DO SITE -->
<div id="cabecalho">
<h1>Título da Página</h1>
</div>

<!-- BARRA DE NAVEGAÇÃO -->

<div id="barranavegacao">
<ul class="menu">
<li class="menu"><a class="menu" href="paginas/pagina1.html">página 1
<li class="menu"><a class="menu" href="paginas/pagina2.html">página 2
<li class="menu"><a class="menu" href="paginas/pagina3.html">página 3
<li class="menu"><a class="menu" href="paginas/pagina4.html">página 4
<li class="menu"><a class="menu" href="paginas/pagina5.html">página 5
<li class="menu"><a class="menu" href="index.html">início </a></li>
</ul>
&nbsp;
</div>

<!-- CONTEÚDO DO SITE -->

<div id="conteudo">
<h2>Página Inicial </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi est arcu, ves
imperdiet ac lectus. Aenean mattis tortor tortor. Sed scelerisque nibh digni
consectetur. Donec magna felis, molestie id ullamcorper id, venenatis non ma
aliquam elit commodo euismod. Maecenas ut risus vel nisi varius convallis. Q
malesuada mauris pharetra non ullamcorper est tempus. Duis diam tortor, curs
facilisis in lectus. Aliquam erat volutpat. Ut porta nunc et nisl dignissim
Nullam quam arcu, imperdiet blandit consectetur eu, ornare nec augue. Morbi
euismod quis, varius vitae ante. Sed semper, nisi ultrices condimentum variu
vitae suscipit felis sapien non augue. Maecenas non quam elit. Vestibulum ac
 </p>
<p class="citacao">
Sed sit amet cursus velit. Donec et mi arcu, vitae bibendum augue. Donec ult
facilisis ac cursus nunc accumsan. Maecenas quis tellus orci, sed facilisis
sed dapibus nibh. Mauris risus nisl, dignissim vitae posuere aliquam, elemen
dictum, ante et fermentum eleifend, eros orci aliquam lorem, eu dictum felis
leo, malesuada non pharetra at, ullamcorper in velit. Curabitur ac velit eu
Fusce quis massa odio. Aliquam sagittis cursus turpis, id lacinia lorem iacu
placerat vehicula.
</p>
</div>

<!-- RODAPÉ DO SITE -->

<div id="rodape">
rodapé da página
</div>
</div>
</body>

</html>

Os estilos em cascata que de�nem toda a formatação e a estruturação do site

foram especi�cados no arquivo . As páginas do site incorporam esse
arquivo por meio da tag , que pode ser visualizada no cabeçalho das pági-
nas. O conteúdo do arquivo é apresentado no trecho de código a se-
guir.
body{
font-family: Verdana;
margin: 0px;
background-color: #CECECE;
}

/*----- ESTRUTURA DO SITE -----*/

#tudo{
width: 100%;
height: 100%;
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
}
#cabecalho{
margin-left: 10%;
margin-right: 10%;
background-color: #6495ED;
color: #FFFFFF;
border-left: solid 5px #000080;
border-top: solid 5px #000080;
border-right: solid 5px #000080;
border-bottom: dashed 1px #000080;
}
#barranavegacao{
margin-left: 10%;
margin-right: 10%;
padding-bottom: 10px;
background-color: #000080;
border-left: solid 5px #000080;
border-right: solid 5px #000080;
border-bottom: dashed 1px #000080;
}
#conteudo{
margin-left: 10%;
margin-right: 10%;
background-color: #FFFFFF;
border-left: solid 5px #000080;
border-right: solid 5px #000080;
text-align: justify;
font-size: 0.9em;
padding: 2px 10px;
}
#rodape{
margin-left: 10%;
margin-right: 10%;
padding: 10px;
background-color: #6495ED;
color: #FFFFFF;
border-left: solid 5px #000080;
border-top: dashed 1px #000080;
border-right: solid 5px #000080;
border-bottom: solid 5px #000080;
}
/*-----------------------------*/

/*----- BARRA NAVEGACAO -----*/

ul.menu{
list-style-type: none;
margin: 0px;
padding: 0px;
}
a.menu:link, a.menu:visited{
background-color: #000080;
color: #FFFFFF;
display: block;
text-align: center;
text-decoration: none;
width: 100px;
font-weight: bold;
padding: 5px 0px;
}
a.menu:hover, a.menu:active{
background-color: #FF0000;
}
li.menu{
float:left;
}
/*---------------------------*/

p{
text-indent: 40px;
}
p.citacao{
padding: 0px 40px;
font-style: italic;
}

En�m, você pode visualizar a página inicial do site na Figura 98.

 Figura 98 Resultado da visualização da página no navegador.

Note que uma barra de navegação foi criada com as pseudoclasses e as listas.
A formatação da barra de navegação muda sempre que o usuário passa o
mouse sobre a barra. Veja, na Figura 99, a mudança na formatação indicada
pela seta.
 Figura 99 Resultado da visualização da página no navegador.

O Código 92 apresenta o conteúdo do arquivo denominado . Neste

arquivo foi utilizada uma imagem de 300x300 pixels, armazenada na pasta
. A imagem foi nomeada como .

Nesta página note que algumas formatações especí�cas foram de�nidas por
meio de estilos internos. Observe também o bloco no cabeçalho da página de-
nominado <style> ... </style>.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<link href="../css/estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#conteudo {
background-image: url('../imagens/imagem.jpg');
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<div id="tudo">
<!-- CABEÇALHO DO SITE -->
<div id="cabecalho">
<h1>Título da Página</h1>
</div>

<!-- BARRA DE NAVEGAÇÃO -->

<div id="barranavegacao">
<ul class="menu">
<li class="menu"><a class="menu" href="pagina1.html">página 1 </a></
<li class="menu"><a class="menu" href="pagina2.html">página 2 </a></
<li class="menu"><a class="menu" href="pagina3.html">página 3 </a></
<li class="menu"><a class="menu" href="pagina4.html">página 4 </a></
<li class="menu"><a class="menu" href="pagina5.html">página 5 </a></
<li class="menu"><a class="menu" href="../index.html">início </a></li
</ul>
&nbsp;
</div>

<!-- CONTEÚDO DO SITE-->

<div id="conteudo">
<h2>Página 1 </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi est arcu, ves
imperdiet ac lectus. Aenean mattis tortor tortor. Sed scelerisque nibh digni
consectetur. Donec magna felis, molestie id ullamcorper id, venenatis non ma
aliquam elit commodo euismod. Maecenas ut risus vel nisi varius convallis. Q
malesuada mauris pharetra non ullamcorper est tempus. Duis diam tortor, curs
 facilisis in lectus. Aliquam erat volutpat. Ut porta nunc et nisl dignissim
Nullam quam arcu, imperdiet blandit consectetur eu, ornare nec augue. Morbi
euismod quis, varius vitae ante. Sed semper, nisi ultrices condimentum variu
vitae suscipit felis sapien non augue. Maecenas non quam elit. Vestibulum ac
</p>
</p>
</div>

<!-- RODAPÉ DO SITE-->

<div id="rodape">
rodapé da página
</div>
</div>
</body>

</html>

A Figura 100 apresenta o resultado da visualização da página no navegador,

conforme descrito no Código 92.

Figura 100 Resultado da visualização da página no navegador.

A página 2 relembra alguns conceitos relativos à especi�cação de listas, tanto
do tipo ordenada quanto do tipo não ordenada. Uma lista em que os marcado-
res são ícones também é criada. A imagem (ou ícone), utilizada como marca-
dor da lista, �ca armazenada na pasta , tem o tamanho de 22x22 pi-
xels e foi nomeada como . O conteúdo do arquivo é
apresentado no Código 93.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<link href="../css/estilo.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
ul.quadrado{
list-style-type: square;
color: #FF0000;
}
ul.numeros{
list-style-type: decimal;
}
li.impar{
background-color: #CECECE;
}
ul.imagem{
list-style-type: none;
list-style-image: url('../imagens/icone.png');
}

</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<div id="tudo">
<!-- CABEÇALHO DO SITE -->
<div id="cabecalho">
<h1>Título da Página</h1>
</div>

<!-- BARRA DE NAVEGAÇÃO -->

<div id="barranavegacao">
<ul class="menu">
<li class="menu"><a class="menu" href="pagina1.html"
<li class="menu"><a class="menu" href="pagina2.html"
<li class="menu"><a class="menu" href="pagina3.html"
<li class="menu"><a class="menu" href="pagina4.html"
<li class="menu"><a class="menu" href="pagina5.html"
<li class="menu"><a class="menu" href="../index.html
</ul>
&nbsp;
</div>

<!-- CONTEÚDO DO SITE -->

<div id="conteudo">
 <h2>Página 2 </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mor
</p>
<ul class="quadrado">
<li>Lorem ipsum dolor sit amet, consectetur adipisci
<li>In pellentesque arcu eu risus congue rhoncus.
<li>Ut tincidunt tellus a urna scelerisque malesuada
<li>Nam rutrum feugiat ipsum, id imperdiet eros ultr
</ul>
<ol class="numeros">
<li class="impar">Lorem ipsum dolor sit amet, consec
<li>In pellentesque arcu eu risus congue rhoncus.
<li class="impar">Ut tincidunt tellus a urna sceleri
<li>Nam rutrum feugiat ipsum, id imperdiet eros ultr
<li class="impar">Lorem ipsum dolor sit amet, consec
</ol>
<ul class="imagem">
<li>Lorem ipsum dolor sit amet, consectetur adipisci
<li>In pellentesque arcu eu risus congue rhoncus.
<li>Ut tincidunt tellus a urna scelerisque malesuada
<li>Nam rutrum feugiat ipsum, id imperdiet eros ultr
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mor
</p>
</div>
<!-- RODAPÉ DO SITE -->
<div id="rodape">
rodapé da página
</div>
</div>
</body>
</html>

A Figura 101 apresenta o resultado da visualização da página no navegador.

 Figura 101 Resultado da visualização da página no navegador.

Na página 3 são demonstrados diversos conceitos de formatação de tabelas,

da mesclagem de células (rowspan) à formatação da borda. Nessa página os
arquivos de imagens utilizados anteriormente são reaproveitados. Veja na cé-
lula mesclada o arquivo , e no interior da célula central da tabela o
arquivo . O conteúdo do arquivo é apresentado no
Código 94.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<link href="../css/estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
table {
width: 100%;
border-collapse: collapse;
}

table,
th,
td {
border-style: solid;
border-width: 1px;
border-color: #FF0000;
}

th {
background-color: #FF0000;
color: #FFFFFF;
}

td {
padding: 5px;
}

td.vertical {
background-image: url('../imagens/icone.png');
background-repeat: repeat-y;
padding-left: 20px;
vertical-align: top;
text-align: justify.
}

td.imagem {
background-image: url('../imagens/imagem.jpg');
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<div id="tudo">
<!-- CABEÇALHO DO SITE -->
<div id="cabecalho">
<h1>Título da Página</h1>
</div>

<!-- BARRA DE NAVEGAÇÃO -->

<div id="barranavegacao">
<ul class="menu">
<li class="menu"><a class="menu" href="pagina1.html">página 1 </a></
<li class="menu"><a class="menu" href="pagina2.html">página 2 </a></
<li class="menu"><a class="menu" href="pagina3.html">página 3 </a></
<li class="menu"><a class="menu" href="pagina4.html">página 4 </a></
<li class="menu"><a class="menu" href="pagina5.html">página 5 </a></
<li class="menu"><a class="menu" href="../index.html">início </a></li
</ul>
&nbsp;
</div>

<!-- CONTEÚDO DO SITE -->

<div id="conteudo">
<h2>Página 3 </h2>
<table>
<tr>
<th colspan="2">Informações detalhadas</th>
</tr>
<tr>
<td class="vertical" rowspan="4">Lorem ipsum dolor sit amet, consectetur
vehicula, nulla sed elementum posuere, lacus massa tincidunt erat, a
enim.</td>
</tr>
<tr>
<td>Suspendisse rhoncus, quam a fringilla lacinia, mi enim feugiat est,
quis magna. Fusce suscipit semper lacus a consectetur. Nulla facilis
pellentesque arcu sit amet consectetur. Nulla vehicula, nulla sed el
tincidunt erat, auctor rutrum arcu tortor sed enim. Nullam sodales d
bibendum, nunc a sagittis gravida, quam ipsum dictum sapien, in lobo
Donec vitae dolor eget nunc porttitor viverra vitae vitae enim. Maec
vitae nunc nec mauris viverra euismod eget ut metus. Ut egestas tell
</td>
</tr>
<tr>
<td class="imagem">Suspendisse ullamcorper, nunc eu eleifend mattis, nun
ultrices neque nunc non enim. Aenean pulvinar sem sit amet neque fac
ornare. Aliquam interdum enim eget sem gravida fermentum ut ut ante.
Nunc a neque sed tellus pellentesque placerat. Fusce ultrices mauris
euismod massa adipiscing. Fusce dui est, semper id pharetra vitae, s
turpis odio, mollis non convallis at, fringilla et lectus. Ut volutp
mattis. Proin orci tortor, feugiat mattis aliquet in, adipiscing vit
</tr>
 <tr>
<td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc nulla
sed, adipiscing nec lacus. Pellentesque eu massa sit amet urna ornar
scelerisque volutpat molestie. Nulla ullamcorper molestie vehicula.
semper a bibendum a, lobortis sed felis. Proin rhoncus consectetur e
eu eros et lacus ultricies viverra a in enim. Maecenas vel velit jus
porttitor in malesuada rhoncus, interdum ac turpis. Aliquam quis urn
Proin adipiscing mi sed lectus bibendum at interdum diam fringilla.
</tr>
</table>
</div>

<!-- RODAPÉ DO SITE -->

<div id="rodape">
rodapé da página
</div>
</div>
</body>

</html>

A Figura 102 apresenta o resultado da visualização da página no navegador.

 Figura 102 Resultado da visualização da página no navegador.

Na página 4 são ilustrados conceitos interessantes de formatação de formulá-

rios, em que campos e até mesmo botões são estilizados com o uso de CSS. O
Código 95 apresenta o arquivo
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<link href="../css/estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
td.rotulos {
text-align: right;
vertical-align: top;
}

input.campo,
select.campo,
textarea.campo {
background-color: #FFFFE0;
border-style: solid;
border-width: 1px;
border-color: #000000;
}

input.botao {
width: 100px;
background-color: #F0F8FF;
font-weight: bold;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<div id="tudo">
<!-- CABEÇALHO DO SITE -->
<div id="cabecalho">
<h1>Título da Página</h1>
</div>

<!-- BARRA DE NAVEGAÇÃO -->

<div id="barranavegacao">
<ul class="menu">
<li class="menu"><a class="menu" href="pagina1.html">página 1 </a></
<li class="menu"><a class="menu" href="pagina2.html">página 2 </a></
<li class="menu"><a class="menu" href="pagina3.html">página 3 </a></
<li class="menu"><a class="menu" href="pagina4.html">página 4 </a></
<li class="menu"><a class="menu" href="pagina5.html">página 5 </a></
 <li class="menu"><a class="menu" href="../index.html">início </a></li
</ul>
&nbsp;
</div>

<!-- CONTEÚDO DO SITE -->

<div id="conteudo">
<h2>Página 4 </h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi est arcu, ves
imperdiet ac lectus. Aenean mattis tortor tortor. Sed scelerisque nibh digni
consectetur.
</p>
<h3>Formulário</h3>
<table>
<tr>
<td class="rotulos">Nome: </td>
<td><input class="campo" type="text" size="60" /></td>
</tr>
<tr>
<td class="rotulos">Telefone: </td>
<td><input class="campo" type="text" size="15" /></td>
</tr>
<tr>
<td class="rotulos">Usuário:</td>
<td>
<select class="campo">
<option selected=”selected”>Aluno</option>
<option>Funcionário</option>
<option>Professor</option>
</select>

</td>
</tr>
<tr>
<td class="rotulos">Mensagem:</td>
<td><textarea class="campo" cols="40" rows="10"></textarea></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>
<input class="botao" type="submit" value="enviar" />
<input class="botao" type="reset" value="limpar" />
</td>
</tr>
</table>
</div>

<!-- RODAPÉ DO SITE -->

<div id="rodape">
rodapé da página
</div>
 </div>
</body>

</html>

A Figura 103 apresenta o resultado da visualização da página no navegador.

Figura 103 Resultado da visualização da página no navegador.

Por �m, o conteúdo da página 5 demonstra como alinhar imagens e conteúdo

textual utilizando elemento do HTML e as Folhas de Estilo em Cascata. A ima-
gem utilizada nessa página está armazenada na pasta e foi nomeada
como . O conteúdo do arquivo é apresentado no
Código 96.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- ESTILOS EM CASCATA --------- -->

<link href="../css/estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">
p.capitalizado {
text-transform: capitalize;
}

p.sublinhado {
text-decoration: underline;
}

img {
border-style: groove;
border-width: 10px;
border-color: #FF0000;
margin: 10px;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<div id="tudo">
<!-- CABEÇALHO DO SITE -->
<div id="cabecalho">
<h1>Título da Página</h1>
</div>

<!-- BARRA DE NAVEGAÇÃO -->

<div id="barranavegacao">
<ul class="menu">
<li class="menu"><a class="menu" href="pagina1.html">página 1 </a></
<li class="menu"><a class="menu" href="pagina2.html">página 2 </a></
<li class="menu"><a class="menu" href="pagina3.html">página 3 </a></
<li class="menu"><a class="menu" href="pagina4.html">página 4 </a></
<li class="menu"><a class="menu" href="pagina5.html">página 5 </a></
<li class="menu"><a class="menu" href="../index.html">início </a></li
</ul>
&nbsp;
</div>
 <!-- CONTEÚDO DO SITE -->
<div id="conteudo">
<h2>Página 5 </h2>
<p class="capitalizado">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi est arcu, ves
imperdiet ac lectus. Aenean mattis tortor tortor. Sed scelerisque nibh digni
consectetur. Donec magna felis, molestie id ullamcorper id, venenatis non ma
aliquam elit commodo euismod.
</p>
<table>
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi est a
in, imperdiet ac lectus. Aenean mattis tortor tortor. Sed scelerisqu
suscipit consectetur. Donec magna felis, molestie id ullamcorper id,
cursus lectus aliquam elit commodo euismod. Lorem ipsum dolor sit am
elit. Morbi est arcu, vestibulum vel commodo in, imperdiet ac lectus
tortor. Sed scelerisque nibh dignissim velit suscipit consectetur. D
id ullamcorper id, venenatis non magna. Donec cursus lectus aliquam
</td>
<td>
<img src="../imagens/imagem.jpg" alt="imagem" />
</td>
</tr>
</table>
<p class="sublinhado">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi est arcu, ves
imperdiet ac lectus. Aenean mattis tortor tortor. Sed scelerisque nibh digni
consectetur. Donec magna felis, molestie id ullamcorper id, venenatis non ma
aliquam elit commodo euismod.
</p>
</div>
<!-- RODAPÉ DO SITE -->
<div id="rodape">
rodapé da página
</div>
</div>
</body>

</html>

A Figura 104 apresenta o resultado da visualização da página no navegador.

 Figura 104 Resultado da visualização da página no navegador.

Com isso, terminamos o projeto do site. Esse exemplo demonstrou a utilização

dos principais conceitos da linguagem de marcação HTML e a formatação do
conteúdo por meio das Folhas de Estilo em Cascata. É fundamental que você
codi�que esse exemplo para aprofundar seu aprendizado. Para facilitar o de-
senvolvimento, você pode substituir o conteúdo textual das páginas por outras
informações de seu interesse.

 Quer entender melhor sobre CSS?

Para tanto, recomendamos que realize a leitura do documento Curso

W3C Escritório Brasil (https://educafrotech.educafro.org.br/documents
/css-web.pdf). Bons estudos!
15. Considerações
Neste ciclo, você aprendeu sobre os conceitos fundamentais a respeito da lin-
guagem de marcação HTML. Além disso, foram descritas diversas tags da lin-
guagem, bem como suas principais propriedades. Você aprendeu também so-
bre as folhas de estilo em cascata, um recurso muito importante para formata-
ção da aparência das páginas web.
 (https://md.claretiano.edu.br/proweb-gs0070-

ago-2023-grad-ead/)

Ciclo 3 – Linguagem Script e Interação com Interface

Grá�ca

Objetivos
• Conhecer a linguagem de programação JavaScript.
• Aprender como realizar a validação de formulários com JavaScript.

Conteúdos
• Introdução à linguagem JavaScript.
• Codi�cação de script em páginas web.
• Caixas de diálogo e interação com o usuário.
• Validação de formulários.

Problematização
Qual é a importância da linguagem JavaScript para a programação web?
Como realizar a codi�cação de script em páginas web? Como inserir caixas de
diálogo em uma página HTML? Como realizar interação com o usuário por
meio da linguagem JavaScript? Qual é a forma mais habitual de realizar a va-
lidação de formulários?

Orientações para o estudo

Neste ciclo, você estudará a linguagem de programação JavaScript. Para exe-
cutar adequadamente os exemplos que serão apresentados, é necessário pu-
blicar os arquivos codi�cados no servidor web.
No primeiro ciclo, foi sugerida a instalação do ambiente XAMPP, o qual dispo-
nibiliza o servidor web Apache. Se você instalou o XAMPP, publique os arqui-
vos na pasta , a qual pode ser encontrada no diretório de instalação do
XAMPP.

1. Introdução
Neste terceiro ciclo de aprendizagem, você aprenderá sobre a lingua-
gem JavaScript. Esta linguagem é utilizada para criação de scripts do lado do
cliente, ou seja, que serão executados diretamente no navegador do usuário.

Bons estudos!

2. Linguagem JavaScript
Os códigos JavaScript podem ser inseridos em uma página web de dois mo-
dos:

• dentro do contexto da página com o elemento do HTML <script>

... </script>;
• em um arquivo separado, que pode ser referenciado por meio do
elemento <link>.

O trecho a seguir ilustra a codi�cação de um scriptJavaScriptcom a aborda-

gem interna. Note que todo o trecho do código deve ser de�nido entre os ele-
mentos <script> e </script>.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">
document.writeln("<h1> Estou programando " +
" com JavaScript </h1>");
</script>
</head>

<body>
</body>

</html>

Veja a Figura 1 a seguir.

Figura 1 Exemplo de um programa JavaScript em uma página web.

O mesmo resultado pode ser obtido por meio da codi�cação externa. Neste ca-
so, um arquivo do tipo JavaScript, com extensão , deve ser criado, e o con-
teúdo a seguir deve ser inserido no arquivo:

document.writeln("<h1> Estou programando com JavaScript 3 </h1>");

O conteúdo do documento HTML é apresentado no trecho a seguir. Note que a

vinculação com o arquivo JavaScript externo é realizada na linha 4.
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Programando com JavaScript</title>
<script type="text/javascript" src="script.js">
</script>
</head>
<body>
</body>
</html>

3. Fundamentos da linguagem JavaScript

Como em outras linguagens de programação, a linguagem JavaScript oferece
suporte às principais estruturas de controle, tanto de seleção (if e swit-
ch)quanto de repetição (for, while e do...while). Os exemplos,a seguir,demons-
tram a utilização das estruturas de controle. Você verá que serão apresentados
os códigos e, em seguida,as �guras que demonstram os resultados da visuali-
zação da página do navegador.

• Estrutura condicional .
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

var operacao = '+';

var num1 = 10;
var num2 = 20;
var resultado;

if (operacao = '+') {
resultado = (num1 + num2);
} else {
if (operacao = '-') {
resultado = (num1 - num2);
} else {
if (operacao = '*') {
resultado = (num1 * num2);
} else {
if (operacao = '/') {
if (num2 != 0)
resultado = (num1 / num2);
Else
resultado = 0;
}
}
}
}

document.writeln("<h1> Resultado </h1>");

document.writeln("<h2> " + num1 + " " + operacao + " " + num2 + " = " + resultado);

</script>
</head>

<body>
</body>

</html>
 Figura 2 Resultado da visualização da página no navegador.

• Estrutura condicional .
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

var operacao = '*';

var num1 = 10;
var num2 = 20;
var resultado;

switch (operacao) {
case "+":
resultado = (num1 + num2);
break;
case "-":
resultado = (num1 - num2);
break;
case "*":
resultado = (num1 * num2);
break;
case "/":
if (num2 != 0)
resultado = (num1 / num2);
Else
resultado = 0;
break;
default:
resultado = "Operação inválida";
}

document.writeln("<h1> Resultado </h1>");

document.writeln("<h2> " + num1 + " " + operacao + " " + num2 + " = " + resultado);

</script>
</head>

<body>
</body>

</html>
 Figura 3 Resultado da visualização da página no navegador.

• Estrutura de repetição .

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

var numero = 5;

document.writeln("<h1> Tabuada </h1>");

document.writeln("<h2> Número = " + numero + " </h2>");
document.writeln("<table border='1' width='200px'>");
for (var i = 1; i <= 10; i++) {
document.writeln("<tr><td> " + i + " </td><td> " + (i * numero) + " </td></tr>"
}
document.writeln("</table>");

</script>
</head>

<body>
</body>

</html>
 Figura 4 Resultado da visualização da página no navegador.

Figura 5 Resultado da visualização da página no navegador.

• Estrutura de repetição .
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

var num = 27;

var i = 1;

document.writeln("<h1>Lista</h1>");
document.writeln("<ol style='list-style-type:upper-alpha' ");
while (i < num) {
document.writeln("<li> Lorem ipsum dolor sit amet, " +
"consectetur adipiscing elit. Curabitur vel fringilla felis. " +
"Nullam nisl arcu, tristique sit amet ullamcorper quis, mollis " +
"a ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
"Curabitur vel fringilla felis. Nullam nisl arcu, tristique sit amet "
" ullamcorper quis, mollis a ipsum. Lorem ipsum dolor sit amet, " +
"consectetur adipiscing elit. Curabitur vel fringilla felis. " +
"Nullam nisl arcu, tristique sit amet ullamcorper quis, mollis a ipsum. "
"</li>");
i++;
}
document.writeln("</ol>");

</script>
</head>

<body>
</body>

</html>
 Figura 6 Resultado da visualização da página no navegador.

Figura 7 Resultado da visualização da página no navegador.

• Estrutura de repetição .
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

var num = 10;

var i = 1;

document.writeln("<h1>Lista</h1>");
document.writeln("<ol style='list-style-type:upper-roman' ");
do {
document.writeln("<li> Lorem ipsum dolor sit amet, " +
"consectetur adipiscing elit. Curabitur vel fringilla felis. " +
"Nullam nisl arcu, tristique sit amet ullamcorper quis, mollis " +
"a ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
"Curabitur vel fringilla felis. Nullam nisl arcu, tristique sit amet "
" ullamcorper quis, mollis a ipsum. Lorem ipsum dolor sit amet, " +
"consectetur adipiscing elit. Curabitur vel fringilla felis. " +
"Nullam nisl arcu, tristique sit amet ullamcorper quis, mollis a ipsum. "
"</li>");
i++;
} while (i < num);
document.writeln("</ol>");

</script>
</head>

<body>
</body>

</html>
 Figura 8 Resultado da visualização da página no navegador.

Figura 9 Resultado da visualização da página no navegador.

A linguagem JavaScript também permite o uso de conceitos de programação

modular para elaborar os scripts. Dessa maneira, você pode utilizar funções
para organizar determinados blocos da sua aplicação. Estes módulos podem
ser identi�cados nos códigos como , e o exemplo a seguir apresenta,
detalhadamente, como utilizar as funções.
1
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

var num = 5;

document.writeln("<h1>Funções</h1>");
document.writeln("<h4><i>Este exemplo demonstra " +
"a utilização de funções (function) na " +
"linguagem JavaScript. </i></h4>");

document.writeln("<table style='width:300px; border:solid'>");

document.writeln("<tr><td>Número</td> " +
"<td>Quadrado</td> " +
"<td>Cubo</td></tr>");
for (var i = 1; i <= 10; i++) {
document.writeln("<tr> " +
"<td>" + i + "</td>" +
"<td>" + quadrado(i) + "</td>" +
"<td>" + cubo(i) + "</td>" +
"</tr>");
}
document.writeln("</table>");

/*
Função para calcular o quadrado de um número
Parâmetro: Número
*/
function quadrado(num) {
return num * num;
}

/*
Função para calcular o cubo de um número
Parâmetro: Número
*/
function cubo(num) {
return num * num * num;
}

</script>
</head>

<body>
</body>
</html>

Figura 10 Resultado da visualização da página no navegador.

 Figura 11 Resultado da visualização da página no navegador.

O objeto fornece suporte completo às principais operações matemáticas

e pode ser utilizado facilmente, ao longo do script. Este objeto possui um con-
junto de constantes prede�nidas, tais como:

• Math.PI – retorna valor de PI;

• Math.LN2 – retorna o logaritmo natural da base 2;
• Math.LN10 – retorna o logaritmo natural da base 10.

Além disso, o objeto Mathcontém um conjunto de métodos capazes de execu-

tar diversas operações matemáticas e trigonométricas. Por exemplo:

1. Math.abs(num) – retorna o valor absoluto de num.

2. Math.ceil(num) – retorna o valor arredondado num para cima.
3. Math.cos(num) – retorna o cosseno num.
4. Math.exp(num) – retorna o exponencial de num.
5. Math.�oor(num) – retorna o valor arredondado num para baixo.
6. Math.log(num) – retorna o valor do logaritmo natural de num.
7. Math.max(num1,num2) – retorna o maior valor entre num1 e num2.
8. Math.min(num1,num2) – retorna o menor valor entre num1 e num2.
 9. Math.pow(num1,num2) – retorna o valor de num1 elevado a num2.
10. Math.random() – retorna um número aleatório entre 0 e 1.
11. Math.round(num) – retorna o valor arredondado de num para o valor in-
teiro mais próximo.
12. Math.sin(num) – retorna o seno num.
13. Math.sqrt(num) – retorna a raiz quadrada de num.
14. Math.tan(num) – retorna a tangente de num.

O Código 7 demonstra a utilização dos principais métodos do objeto Math.

1
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

var num;

document.writeln("<h1>Objeto <i>Math</i></h1>");

document.writeln("<h3><i>Constantes</i></h3>");
document.writeln("Valor de PI = " + Math.PI + " <br/>");
document.writeln("Valor do número de Euler (E) = " + Math.E + " <br/><br/>");

document.writeln("<h3><i>Métodos</i></h3>");
num = -15.66;
document.writeln("O valor absoluto de " + num + " é igual a " + Math.abs(num) +
num = 6.85;
document.writeln("O valor " + num + " arredondado para cima é igual a " + Math
document.writeln("O valor " + num + " arredondado para baixo é igual a " + Math
document.writeln("O valor " + num + " arredondado para o inteiro mais próximo é igua
num = Math.PI;
document.writeln("O cosseno de PI é igual a " + Math.cos(num) + "<br/>");
document.writeln("O seno de PI é igual a " + Math.sin(num) + "<br/>");
document.writeln("A tangente de PI é igual a " + Math.tan(num) + "<br/>");
document.writeln("O arco do cosseno de PI é igual a " + Math.acos(num) + "<br/>"
document.writeln("O arco do seno de PI é igual a " + Math.asin(num) + "<br/>"
document.writeln("O arco da tangente de PI é igual a " + Math.atan(num) + "<br/><br/
num = 9;
document.writeln("O exponencial de " + num + " é igual a " + Math.exp(num) +
document.writeln("O logaritmo natural de " + num + " é igual a " + Math.log(num) +
document.writeln("A raiz quadrada de " + num + " é igual a " + Math.sqrt(num) +

var n1 = 2;
var n2 = 3;
document.writeln("O maior valor entre " + n1 + " e " + n2 + " é igual a " +
document.writeln("O menor valor entre " + n1 + " e " + n2 + " é igual a " +
document.writeln("O valor " + n1 + " elevado a " + n2 + " é igual a " + Math

document.writeln("Número aleatório entre 0 e 1 é igual a " + Math.random() +

document.writeln("Número aleatório entre 0 e 10 é igual a " + (Math.random() *
document.writeln("Número aleatório entre 0 e 100 é igual a " + (Math.random() *
document.writeln("Número aleatório entre 0 e 1000 é igual a " + (Math.random() *

</script>
</head>

<body>
</body>

</html>

O exemplo codi�cado produz como saída as seguintes informações:

Figura 12 Resultado da visualização da página no navegador.

 Figura 13 Resultado da visualização da página no navegador.

Para conversão de valores, a linguagem JavaScript fornece duas funções es-

pecí�cas, que são:

• – recebe como parâmetro um argumento do tipo string e con-

verte o valor para ponto �utuante. Caso o argumento informado não pro-
duza uma conversão correta, o resultado da função será um (Not a
Number);
• – recebe como parâmetro um argumento do tipo string e conver-
te o valor para inteiro. Caso não seja possível, a função retorna um .

O exemplo, descrito no Código 8, ilustra as funções para conversão de valores

da linguagem JavaScript.
1
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

var num;

document.writeln("<h1>Conversão de Valores </h1>");

document.writeln("<h4><i>Este exemplo demonstra " +
"a utilização das funções de conversão do JavaScript</i></h4>");

document.writeln("<ul><li>para FLOAT (parseFloat) </li></ul>");

num = 5;
document.writeln("O valor " + num + " convertido é igual a " + parseFloat(num) +
num = "5";
document.writeln("O valor " + num + " convertido é igual a " + parseFloat(num) +
num = "5.66";
document.writeln("O valor " + num + " convertido é igual a " + parseFloat(num) +
num = "X";
document.writeln("O valor " + num + " convertido é igual a " + parseFloat(num) +

document.writeln("<ul><li>para INTEIRO (parseInt) </li></ul>");

num = 5;
document.writeln("O valor " + num + " convertido é igual a " + parseInt(num) +
num = "5";
document.writeln("O valor " + num + " convertido é igual a " + parseInt(num) +
num = "5.66";
document.writeln("O valor " + num + " convertido é igual a " + parseInt(num) +
num = "X";
document.writeln("O valor " + num + " convertido é igual a " + parseInt(num) +

document.writeln("<ul><li>teste de conversão </li></ul>");

num = "5.66";
res = parseInt(num);

if (isNaN(res)) {
document.writeln("Erro na conversão de " + num + " para inteiro <br/>");
} else {
document.writeln("A conversão de " + num + " para inteiro foi realizada com suce
}

num = "X";
res = parseInt(num);

if (isNaN(res)) {
document.writeln("Erro na conversão de " + num + " para inteiro <br/>");
} else {
document.writeln("A conversão de " + num + " para inteiro foi realizada com suce
 }

</script>
</head>

<body>
</body>

</html>

Este exemplo produz como saída.

Figura 14 Resultado da visualização da página no navegador.

 Figura 15 Resultado da visualização da página no navegador.

Neste tópico, apresentamos os fundamentos da linguagem JavaScript, a se-

guir estudaremos como criar caixas de diálogo por meioda linguagem
JavaScript.

4. Caixas de diálogos
A linguagem JavaScript permite a criação de caixas de diálogo para interação
com o usuário. Estas caixas podem ser utilizadas tanto para exibição de men-
sagensquanto para entrada de dados.

O exemplo descrito no Código 9 ilustra a utilização de uma caixa de diálogo

para exibição de mensagens. Esta caixa é criada por meio da instrução
.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">
window.alert("Estou programando JavaScript");
</script>
</head>

<body>
</body>

</html>

Observe, na Figura 16, a ilustração da caixa de diálogo.

Figura 16 Exemplo de caixa de diálogo.

Um exemplo mais elaborado pode ser desenvolvido com o uso da caixa de diá-
logo para entrada de dados. Esta caixa é criada por meio da instrução
. Observe no Código 10.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">
var nome;
nome = window.prompt("Informe seu nome: ");
window.alert("Olá, " + nome + " seja bem-vindo!");
</script>
</head>

<body>
</body>

</html>

Na Figura 17 é possível visualizar a caixa de diálogo para entrada de informa-

ções.

Figura 17 Exemplo de caixa de diálogo para entrada de informações.

Como resultado, a seguinte caixa de diálogo é exibida, conforme demonstrado

na Figura 18.
 Figura 18 Exemplo de caixa de diálogo.

Neste tópico, apresentamos a criação de caixas de diálogo, no próximo tópico

veremos a validação de formulários.

5. Validação de formulários
Uma das principais aplicações da linguagem JavaScript na construção de pá-
ginas web é a validação de formulários. Como a linguagem permite o controle
total sobre os elementos do documento, ela é essencial na validação das infor-
mações disponibilizadas pelos usuários.

Para ilustrar a validação de formulários com JavaScript, vamos criar um for-

mulário simples de login.

O conteúdo da página é apresentado no exemplo do Código 11.

1
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

/*
função para verificar se os campos do formulário
foram devidamente preenchidos
*/
function validarForm() {
var usuario;
var senha;

usuario = document.getElementById("txtUsuario");
senha = document.getElementById("txtSenha");

if (usuario.value == "") {
window.alert("Usuário não informado.");
usuario.focus();
} else {
if (senha.value == "") {
window.alert("Senha não informada.");
senha.focus();
} else {
//enviar informações do formulário
document.forms["formLogin"].submit();
}
}
}

/*
funcao para limpar os campos do formulário
*/
function limparForm() {
document.getElementById("txtUsuario").value = "";
document.getElementById("txtSenha").value = "";
}

</script>
</head>

<body>
<h1> Login </h1>
<form id="formLogin" action="">
<h2>
Usuário:
<input id="txtUsuario" type="text" size="15" />
</h2>
 <h2>
Senha:
<input id="txtSenha" type="password" size="15" />
</h2>
<input id="btnOk" type="button" value=" Ok " onclick="validarForm()" />
<input id="btnLimpar" type="button" value=" Limpar " onclick="limparForm()"
</form>
</body>

</html>

O resultado pode ser visualizado na Figura 19.

Figura 19 Formulário de login.

Devemos destacar
no código a instrução JavaScript
, que permite a manipulação de qualquer elemento da
página. Note que para utilizar essa função é necessário de�nir a propriedade
do elemento.

6. Manipulando os elementos da página

A linguagem JavaScript permite o controle de todos os elementos que com-
põem uma página web. Estes elementos podem ser referenciados de três ma-
neiras:
 • ;
• ;
• .

Os exemplos, a seguir, ilustram as formas de referências aos elementos das

páginas web. Eles demonstram como é possível alterar a aparência dos ele-
mentos da página por meio da linguagem JavaScript.

• – faz uma referência ao elemento especi�ca-

do pela propriedade id. Observe o Código 12.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

function alterarP1() {
var p = document.getElementById("p1");
p.style.color = "#FFFFFF";
p.style.backgroundColor = "#0000FF";
p.style.textAlign = "justify";
}

function alterarP2() {
var p = document.getElementById("p2");
p.style.border = "3px solid #FF0000";
p.style.margin = "20px 80px 20px 80px";
p.style.textAlign = "justify";
}

</script>
</head>

<body>
<p id="p1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a urna id odio mollis r
vitae metus nulla, eu egestas libero. Pellentesque accumsan malesuada enim ut interd
id luctus semper, ipsum leo eleifend arcu, vulputate dignissim turpis dui ut tellus.
sem. Ut malesuada cursus ipsum in condimentum. Nam dapibus congue eros quis porta. S
placerat nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, p
at erat nec purus sollicitudin vestibulum et at sem.
</p>
<input type="button" onclick="alterarP1()" value="alterar" />

<p id="p2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam a urna id odio mollis r
vitae metus nulla, eu egestas libero. Pellentesque accumsan malesuada enim ut interd
id luctus semper, ipsum leo eleifend arcu, vulputate dignissim turpis dui ut tellus.
sem. Ut malesuada cursus ipsum in condimentum. Nam dapibus congue eros quis porta. S
placerat nibh. Class aptent taciti sociosqu ad litora torquent per conubia nostra, p
at erat nec purus sollicitudin vestibulum et at sem.
</p>
<input type="button" onclick="alterarP2()" value="alterar" />
</body>

</html>

Na Figura 20, você pode visualizar a manipulação de elementos da página

com o uso do JavaScript. Saiba que, para visualizar o resultado, o usuário de-
verá clicar no botão alterar.

Figura 20 Manipulação de elementos da página utilizando JavaScript.

• – faz uma referência a todos os ele-

mentos especi�cados com a propriedade name. Acompanhe, atentamen-
te, a descrição do Código 13.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

function alterar() {
var par = document.getElementsByName("par");
var impar = document.getElementsByName("impar");

for (var i = 0; i < par.length; i++) {

par[i].style.color = "#FFFFFF";
par[i].style.backgroundColor = "#FF0000";
}

for (var i = 0; i < impar.length; i++) {

impar[i].style.color = "#FFFFFF";
impar[i].style.backgroundColor = "#0000FF";
}

</script>
</head>

<body>
<ul>
<li name="impar"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </
<li name="par"> Phasellus lobortis sodales dui, non mattis libero congue sed.
<li name="impar"> Proin consectetur condimentum leo, ac tincidunt velit elementum at
<li name="par"> Quisque sed erat ac arcu pulvinar consectetur. </li>
<li name="impar"> Phasellus et ligula ac nulla fringilla accumsan. </li>
<li name="par"> Mauris venenatis nulla malesuada magna convallis suscipit. </
<li name="impar"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </
<li name="par"> Phasellus lobortis sodales dui, non mattis libero congue sed.
<li name="impar"> Proin consectetur condimentum leo, ac tincidunt velit elementum at
<li name="par"> Quisque sed erat ac arcu pulvinar consectetur. </li>
<li name="impar"> Phasellus et ligula ac nulla fringilla accumsan. </li>
<li name="par"> Mauris venenatis nulla malesuada magna convallis suscipit. </
</ul>
<input type="button" onclick="alterar()" value="alterar" />
</body>

</html>

Para visualizar o resultado, o usuário deverá clicar no botão alterar. Veja a de-
monstração na Figura 21.
 Figura 21 Manipulação de elementos da página utilizando JavaScript.

• – faz referências a todas as tags do

documento especi�cadas como parâmetros. Veri�que o Código 14.
1
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Programando com JavaScript</title>
<script type="text/javascript">

function localizar() {
var tag = document.getElementsByTagName("p");
var palavra = document.getElementById("txtPalavra").value;

for (var i = 0; i < tag.length; i++) {

//conteúdo do parágrafo
texto = tag[i].innerHTML;
token = texto.split(" ");

//remover elementos HTML

token = removerHTML(token);

texto = "";
for (var j = 0; j < token.length; j++) {
if (token[j].toLowerCase() == palavra.toLowerCase()) {
token[j] = "<b>" + token[j] + "</b>";
}
texto = texto + token[j] + " ";
}
tag[i].innerHTML = texto;
}
}

/*
Função auxiliar capaz de remover todas as tags HTML
de uma string. Para isso, é utilizado o conceito de
expressões regulares.
*/
function removerHTML(str) {
var re = /(<([^>]+)>)/gi;
for (i = 0; i < str.length; i++) {
str[i] = str[i].replace(re, "");
}
return str;
}

</script>
</head>

<body>
<h4>
 Informe a palavra e clique no botão localizar
</h4>
<input id="txtPalavra" type="text" value="Lorem" />
<input type="button" onclick="localizar()" value="localizar" />

<p>
Ipsum dolor sit amet, consectetur adipiscing elit. Curabitur semper, erat lorem tinc
sagittis ligula, in tincidunt lorem orci a lacus. Lorem nisl ipsum, pharetra vel pel
libero. In hac habitasse platea dictumst. Nunc porta tristique ultricies. Praesent s
scelerisque id adipiscing massa semper. Curabitur tristique purus nec orci porttitor
et tellus vulputate pretium. Sed semper neque a risus tincidunt quis interdum dolor
lorem pharetra lorem a vel augue. Duis eleifend nunc vitae ante vestibulum lobortis.
porta consectetur. Ut libero tellus, lacinia sit amet gravida id, varius id augue. P
In et nibh ac lorem luctus scelerisque et a urna. lorem quis erat sit amet lorem lao
fermentum quam, vel porta orci feugiat eget. Curabitur ornare, metus ac consectetur
diam, ac bibendum mi lorem quis lorem. lorem eleifend felis vel elit tincidunt molli
lacus at hendrerit.
</p>

<p>
Vestibulum consectetur lorem risus, non iaculis mi ornare id. Morbi augue lorem, pos
risus. Ut id quam at justo fermentum tristique sit amet quis tortor. Lorem tortor mi
mattis eu felis. Donec imperdiet quam nec justo tincidunt eget rutrum nulla adipisci
tincidunt gravida. Nunc pharetra semper quam, vel auctor ante facilisis at. Sed vita
condimentum semper. Suspendisse non lorem sed odio euismod tempus. Curabitur lacus a
eu, lorem a odio. Proin porttitor eleifend nunc id blandit.
</p>

<p>
Vivamus lorem erat, pharetra quis interdum ac, auctor aliquam sem. Lorem aptent taci
per conubia nostra, per inceptos himenaeos. Nam ornare elit a leo interdum quis aliq
mattis sapien. Vivamus at nunc urna. Suspendisse tincidunt, velit sit amet sagittis
dictum ligula, ultricies tempor velit augue ornare purus. Morbi mollis lobortis lacu
odio, vulputate id blandit vel, laoreet ac tellus. In eget leo dolor, eu posuere lac
rhoncus sed pharetra placerat, lorem tristique eros. In risus erat, gravida nec vari
Mauris non nunc ut odio tincidunt accumsan.
</p>

</body>

</html>

A Figura 22 demonstra a manipulação de elementos, conforme descrito no

Código 14.
 Figura 22 Manipulação de elementos da página utilizando JavaScript.

Neste tópico, estudamos a manipulação de elementos em uma página web,

por meio da linguagem JavaScript.

7. Asynchronous JavascriptAnd XML – AJAX

A linguagem de programação JavaScript fornece ao desenvolvedor um con-
junto de instruções e estruturas para a programação de páginas do lado do cli-
ente. Essa linguagem fornece, ainda, suporte a uma metodologia conhecida
como Asynchronous JavaScript and XML, ou simplesmente AJAX.

O termo AJAX serve para representar o uso de metodologias de programação,

tais como JavaScript e XML, com o objetivo de tornar a navegação do usuário
mais interativa. O aumento da interatividade é alcançado por meio de chama-
das assíncronas no servidor.

Em uma página web convencional, todas as vezes que o usuário interage com
algum elemento da página, por exemplo, clicando em um hyperlink ou sub-
metendo as informações de um formulário, este procedimento gera uma re-
quisição, fazendo com que os dados sejam enviados ao servidor. Por sua vez, o
servidor processa a interação do usuário e retorna os dados por meio de uma
resposta. Para que a resposta seja apresentada ao usuário,é necessário que o
navegador atualize a página.

Essa experiência de navegação, apesar de funcionar perfeitamente, torna o

uso de aplicações web menos parecido com a utilização de aplicações desk-
top. Em aplicações desktop, todas as interações do usuário são prontamente
processadas pelo formulário (ou janela), sem a necessidade de atualização dos
dados.

Para que as aplicações web se tornem totalmente parecidas com as aplicações

desktop, é fundamental que a interatividade seja tratada da mesma maneira.
Para isso, os desenvolvedores de aplicações web podem utilizar a metodologia
conhecida como AJAX.

As aplicações web que utilizam a metodologia AJAX têm um objeto da lingua-

gem JavaScript denominado , para gerenciar todo o processo
de comunicação entre o navegador do cliente e o servidor web. Este objeto é
responsável por solicitar ao servidor as requisições disparadas pelo cliente de
maneira assíncrona, ou seja, sem a necessidade de atualizar a página do nave-
gador.

De acordo com Deitel (2003), o processo de comunicação de uma aplicação

web, baseada em AJAX, é dividido em sete etapas, descritas a seguir:

1. Quando o usuário interage com a página, o navegador cria um objeto

XMLHttpRequest para gerenciar a solicitação.
2. O objeto envia a solicitação ao servidor e espera a resposta. As solicita-
ções são assíncronas, de modo que o usuário continua interagindo com a
página enquanto o servidor processa a solicitação.
3. Outras solicitações do usuário podem ser realizadas e também são geren-
 ciadas pelo objeto XMLHttpRequest.
4. Quando o servidor responde à solicitação (ou solicitações), o objeto
XMLHttpRequest chama uma função do lado do cliente para processar a
resposta do servidor. Essa função é conhecida como call-back.
5. Outras respostas podem ser enviadas pelo servidor e serão processadas
pela função call-back.
6. A página do cliente é atualizada com as informações enviadas pelo servi-
dor.
7. O objeto XMLHttpRequest continua o monitoramento das interações do
cliente, bem como o recebimento das respostas enviadas pelo servidor.

Para demonstrar o uso da metodologia AJAX na construção de aplicações

web, apresentamos um exemplo com esses conceitos. Vamos criar, então, um
arquivo denominado . O Código 15 descreve esta aplicação.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- JAVASCRIPT/AJAX ------------- -->

<script type="text/javascript" src="ajax.js">
</script>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css">
div {
width: 500px;
height: 600px;
background-color: #CECECE;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h3>Requisição Assíncrona (chamada via Ajax)</h3>
<p>
<a href="#" onclick="requisicao('conteudo.html','conteudo')"> Clique aqui para fazer
a metodologia AJAX</a>
</p>
<h3>Resposta (exibição do resultado)</h3>
<div id="conteudo">
</div>
</body>

</html>

A Figura 23 demonstra a saída do código anterior.

 Figura 23 Resultado da visualização da página no navegador.

Note que o arquivo incorpora um arquivo JavaScript denominado . Este

arquivo é responsável pelas requisições assíncronas ao servidor, bem como-
pela apresentação das respostas após o processamento. Observe oCódigo 16,
que possui diversos comentários para facilitar seu entendimento.
/*----------------------------------------------------------
* AJAX
*----------------------------------------------------------
* Este script permite a realização de chamadas assíncronas
* ao servidor Web. Para isso, a metodologia denominada AJAX
* foi utilizada.
*
* Autor: João da Silva
----------------------------------------------------------*/

var obj; // variável do objeto XMLHttpRequest

var elem; // variável que receberá o conteúdo

//--------------------------------------
// FUNCAO: requisicao
// Cria um objeto do tipo XMLHttpRequest e realiza uma
// chamada assíncrona no servidor web.
//
// Parâmetros:
// - endereco: localização (ou URL) do conteúdo dinâmico
// que pode ser qualquer arquivo armazenado
// no servidor.
// - elemento: id do elemento da página que receberá a
// resposta da chamada assíncrona
function requisicao(endereco, elemento) {
try {
//-- Importante-----------------------
// Este tipo de criação, por meio do objeto XMLHttpRequest,
// funciona em todos os navegadores mais recentes, tais
// como Internet Explorer 7 (ou superior), Mozilla Firefox,
// Google Chrome, Safari e Opera.
//
// Navegadores mais antigos como, por exemplo, Internet
// Explorer 6 ou 5, utilizam um objeto do tipo ActiveX e
// a criação é realizada da seguinte maneira:
// obj = new ActiveXObject("Microsoft.XMLHTTP");
//----------------------------------
obj = new XMLHttpRequest();

//especifica qual elemento receberá a

//resposta da chamada assíncrona
elem = elemento;

//registra a função responsável por

//tratar a resposta do servidor
obj.onreadystatechange = resposta;

//--Configuração da solicitação ------

// O método open recebe três parâmetros
// - método....: que pode ser GET ou POST
// - endereço..: localização do conteúdo
// - assíncrono: que especifica se a
 // requisiçao do conteúdo
// será assíncrona (true) ou
// síncrona (false).
obj.open('GET', endereco, true);
//------------------------------------

//envia a solicitação
obj.send();

} catch (exception) {
alert('Falha na requisição');
}
}
//--------------------------------------
// FUNCAO: resposta
// Apresenta os dados recebidos por meio da requisicao
// assíncrona.
function resposta() {
//--Importante --------------------
// Quando uma requisição é enviado ao servidor, o cliente
// precisa checar quando o servidor terminou de processar
// a requisição. Este estado significa que a resposta da
// solicitação já está pronta e pode ser apresentada para
// o cliente. Os tipos de estados suportados são:
//0: significa que a requisição não foi enviada
//1: significa que a conexão com o servidor foi estabelecida
//2: significa que a requisição foi recebida pelo servidor
//3: significa que a requisição está sendo processada
//4: significa que a requisição foi processada e a resposta
// esta pronta.
//
// Além disso é possível verificar o status da requisição que
// em geral pode receber dois valores.
//200: quando o conteúdo requerido está disponível
//400: quando a página do conteúdo não foi encontrada
//-----------------------------------
if (obj.readyState == 4) {
//Adiciona a resposta ao componente passado como parâmetro
//Note que o nome do elemento HTML que recebe a resposta
//foi informado no método requisicao
document.getElementById(elem).innerHTML = obj.responseText;
}
}

Para demonstrar que a codi�cação com o uso da metodologia AJAX é simples,

o código anterior (Código 16) do arquivo é apresentado sem os comen-
tários. Note que o mesmo código tem pouco mais de 20 linhas (Código 17).
var obj;
var elem;

function requisicao(endereco, elemento) {

try {
obj = new XMLHttpRequest();
elem = elemento;
obj.onreadystatechange = resposta;
obj.open('GET', endereco, true);
obj.send();
} catch (exception) {
alert('Falha na requisição');
}
}

function resposta() {
if (obj.readyState == 4) {
document.getElementById(elem).innerHTML = obj.responseText;
}
}

Por �m, um arquivo denominado será utilizado para demons-

trar as chamadas assíncronas no servidor. Assim, quando o usuário clicar no
link disponível no arquivo (Clique aqui para fazer uma chamada
assíncrona com a metodologia AJAX), o conteúdo do arquivo
será apresentado no elemento div. O conteúdo do arquivo é apresentado no
Código 18.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in pellentesque ju
lectus, ac pulvinar magna condimentum sed. Nulla lectus justo, gravida vitae sagittis eg
orci. Nulla facilisi. Cras et arcu est. Fusce fringilla sapien eu nibh aliquet congue. V
pulvinar tortor. Proin auctor porttitor odio. Aliquam erat volutpat. Integer pellentesqu
dapibus justo purus. Proin mauris augue, feugiat quis sodales in, consectetur sit amet l
lacus feugiat laoreet. Donec in lectus ac sapien rutrum imperdiet non vitae mauris.
</p>

<p>
Nunc vitae nisi et lorem dignissim congue vel at enim. Vivamus venenatis mauris eget fel
diam. Donec felis sem, dapibus vel pellentesque in, feugiat sit amet tellus. Curabitur p
pretium, lorem libero volutpat purus, ut viverra ante nisl at est. Phasellus id quam qua
nulla. Nam odio felis, sagittis nec tempor id, varius et lorem. Quisque non dui risus. C
in egestas a, consequat semper tortor. Mauris interdum lorem at diam feugiat scelerisque
tellus vitae elementum. In suscipit, nulla eget molestie hendrerit, nunc velit fringilla
ligula non dolor. Morbi a enim ut ligula auctor porta ut quis velit. Sed quis lorem sed
varius luctus arcu. Nullam et neque ac urna eleifend iaculis in vitae erat. Maecenas non
luctus vitae aliquet neque.
</p>

Para entender este exemplo, visualize a página no navegador e

clique no link indicado; o resultado é apresentado conforme demonstra a
Figura 24.
 Figura 24 Resultado da visualização da página no navegador.

Para demonstrar a versatilidade das chamadas assíncronas por meio da me-

todologia AJAX, apresentaremos um exemplo mais detalhado em que diver-
sos conteúdos podem ser carregados em função das interações do usuário.
Para isso, crie um arquivo HTML denominado e codi�que o
conteúdo apresentado no Código 19.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- JAVASCRIPT/AJAX ------------- -->

<script type="text/javascript" src="ajax.js">
</script>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css">
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

a:link,
a:visited {
background-color: #000080;
color: #FFFFFF;
display: block;
text-align: center;
text-decoration: none;
width: 100px;
font-weight: bold;
padding: 5px 0px;
}

a:hover,
a:active {
background-color: #FF0000;
}

li {
float: left;
}

/*-- Estilos para os conteúdos que serão carregados --*/

p {
text-align: justify;
}

p.estilo1 {
color: #FF0000;

}
 p.estilo2 {
background-color: #CECECE;
color: #0000FF;
font-style: italic;
height: 200px;
overflow: scroll;
}

table {
border-collapse: collapse;
}

table,
th,
td {
border: solid 1px #0000FF;
}
</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Exemplo de AJAX</h1>
<ul>
<li><a href="#" onclick="requisicao('pagina1.html','conteudo')">página 1 </a
<li><a href="#" onclick="requisicao('pagina2.html','conteudo')">página 2 </a
<li><a href="#" onclick="requisicao('pagina3.html','conteudo')">página 3 </a
<li><a href="#" onclick="requisicao('pagina4.html','conteudo')">página 4 </a
<li><a href="#" onclick="requisicao('pagina5.html','conteudo')">página 5 </a
</ul>
<br />
<h2>Resultado</h2>
<div id="conteudo">
</div>
</body>

</html>

Na Figura 25, podemos ver a saída do exemplo anterior.

 Figura 25 Visualização da página no navegador.

Para o exemplo funcionar adequadamente, precisaremos de quatro arquivos

HTML. Note que o menu possui cinco opções, no entanto, a última opção será
utilizada para você visualizar a mensagem de erro gerada durante a requisi-
ção de um conteúdo inexistente. Observe os códigos a seguir e as �guras com
os respectivos resultados das páginas que serão utilizadas durante as requisi-
ções assíncronas:

O Código 20 possibilita a criação da pagina1.html.

<p class="estilo1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus tellus vel ri
congue. Mauris eget quam rutrum nisl fringilla accumsan. Morbi sed nunc dignissim sem co
In eros tellus, aliquet bibendum lacinia sed, pulvinar vitae tellus. Pellentesque habita
et netus et malesuada fames ac turpis egestas. Nam ut ipsum vel nisi ultrices eleifend.
ultrices. Pellentesque et felis nec lorem vulputate molestie nec sit amet tellus.
</p>
<p class="estilo2">
Sed tortor velit, euismod ac faucibus ut, blandit a diam. Morbi nisi justo, gravida vel
sed ante. Donec tincidunt sem et eros placerat ac tempus metus consectetur. Curabitur eu
blandit velit faucibus eu. Nullam ornare risus et felis aliquam tristique. Aenean vitae
mauris. Etiam tempus porttitor lobortis. Vestibulum mauris orci, sodales et luctus ut, t
in magna ut dui pulvinar mollis sit amet at libero. Suspendisse turpis mauris, blandit n
sem. Quisque vulputate enim vitae mauris vestibulum in volutpat ligula bibendum. Donec a
Maecenas diam ipsum, rhoncus eu tincidunt eu, dictum mattis odio. Aenean neque risus, ph
viverra et felis. Etiam consectetur mattis lorem, at sodales ante mollis vitae. Donec an
blandit, placerat sit amet ipsum. Quisque dapibus, magna in placerat congue, nulla nulla
lorem lorem sed tortor. Nam elit sapien, aliquet quis consequat quis, ultricies a enim.
pharetra. Nunc molestie pulvinar commodo. Cras quam quam, vestibulum sit amet aliquet a,
interdum tortor consequat dui dapibus at scelerisque mi cursus. Praesent nisl ipsum, ali
aliquam, mollis sed lacus. Class aptent taciti sociosqu ad litora torquent per conubia n
himenaeos. Pellentesque commodo ultricies mauris non lobortis. Donec ante velit, mattis
placerat sit amet ipsum. Quisque dapibus, magna in placerat congue, nulla nulla tempus t
lorem sed tortor. Nam elit sapien, aliquet quis consequat quis, ultricies a enim. Vivamu
pharetra. Nunc molestie pulvinar commodo. Cras quam quam, vestibulum sit amet aliquet a,
interdum tortor consequat dui dapibus at scelerisque mi cursus. Praesent nisl ipsum, ali
aliquam, mollis sed lacus. Class aptent taciti sociosqu ad litora torquent per conubia n
himenaeos. Pellentesque commodo ultricies mauris non lobortis.
</p>
<p class="estilo1">
Curabitur quam est, luctus tristique scelerisque et, luctus in sapien. Duis rhoncus diam
gravida. Nulla purus tellus, fringilla nec scelerisque id, ultricies a lacus. Nam conval
erat. Ut sit amet arcu nisi, facilisis rutrum quam. Nam venenatis dui quis massa eleifen
adipiscing. Fusce at lorem non enim congue sollicitudin quis ut mi. Integer varius quam
Ut ultrices lectus eu lacus cursus pellentesque. Vivamus eu lorem vitae lorem tempus mol
semper hendrerit eget vitae lectus. Suspendisse imperdiet varius ligula, nec vehicula au
felis orci. Aenean sed erat arcu. Aenean lacinia diam volutpat nisi lacinia vitae tincid
Aliquam condimentum neque ut lectus tincidunt ac vulputate orci egestas. Aenean imperdie
porttitor. Mauris ultrices nunc eu dolor congue condimentum. Integer blandit volutpat ma
eleifend neque in risus dapibus molestie.
</p>
 Figura 26 Visualização da página no navegador utilizando a tecnologia Ajax.

O Código 21 apresenta o conteúdo do arquivo pagina2.html.

<ol>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Suspendisse ac ante turpis, eu faucibus diam.</li>
<li>Curabitur vitae nisl sit amet risus pellentesque sodales eu ac urna.</li>
<li>Sed placerat mi posuere leo imperdiet tincidunt.</li>
<li>Pellentesque lacinia facilisis nibh, non molestie odio auctor sit amet.</li>
<li>Cras pharetra enim eu ante faucibus varius.</li>
<li>Curabitur fermentum malesuada leo, molestie imperdiet diam consequat non.</li
<li>Etiam at ipsum vel dolor vulputate bibendum.</li>
<li>Nullam non mi semper mauris condimentum laoreet.</li>
<li>Sed vel elit justo, ac aliquet arcu.</li>
<li>Curabitur a mauris ac est tincidunt fringilla.</li>
<li>In vitae justo vel urna aliquam molestie sit amet ut leo.</li>
<li>Nam malesuada neque eget erat ornare vehicula.</li>
<li>Nullam ac libero eu urna sagittis pellentesque nec eu odio.</li>
<li>Donec non ipsum eros, vel aliquet risus.</li>
<li>Nam cursus aliquam lacus, non semper ligula sagittis quis.</li>
<li>Donec sed urna sem, nec dignissim metus.</li>
<li>Sed bibendum bibendum velit, scelerisque ultrices felis consequat vitae.</li
<li>Nunc ut eros nec libero dignissim tincidunt.</li>
<li>Proin dictum ullamcorper sapien, vel sagittis libero rutrum a.</li>
<li>Vivamus nec risus risus, nec egestas neque.</li>
<li>Donec nec libero vel tellus bibendum auctor.</li>
<li>Proin imperdiet mauris eu metus semper at imperdiet velit tincidunt.</li>
<li>Nunc auctor eros ac eros condimentum facilisis.</li>
<li>Aliquam fermentum neque et massa fermentum imperdiet.</li>
</ol>
 Figura 27 Visualização de uma estrutura de listas no navegador por meio da tecnologia Ajax.

O código 22 exibe o conteúdo do arquivo pagina3.html.

1 <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent faucibus tellus vel ri
congue. Mauris eget quam rutrum nisl fringilla accumsan. Morbi sed nunc dignissim sem co
In eros tellus, aliquet bibendum lacinia sed, pulvinar vitae tellus. Pellentesque habita
et netus et malesuada fames ac turpis egestas. Nam ut ipsum vel nisi ultrices eleifend.
ultrices. Pellentesque et felis nec lorem vulputate molestie nec sit amet tellus.
</p>
<img src="imagem.jpg" alt="imagem" />
<p>
Curabitur quam est, luctus tristique scelerisque et, luctus in sapien. Duis rhoncus diam
gravida. Nulla purus tellus, fringilla nec scelerisque id, ultricies a lacus. Nam conval
erat. Ut sit amet arcu nisi, facilisis rutrum quam. Nam venenatis dui quis massa eleifen
adipiscing. Fusce at lorem non enim congue sollicitudin quis ut mi. Integer varius quam
Ut ultrices lectus eu lacus cursus pellentesque. Vivamus eu lorem vitae lorem tempus mol
semper hendrerit eget vitae lectus.
</p>
 Figura 28 Resultado da visualização da página no navegador.

O Código 23 apresenta o conteúdo do documento pagina4.html.

<table>
<tr>
<th>ID</th>
<th>Descricao</th>
</tr>
<tr>
<td>001</td>
<td>Nunc commodo, mi eleifend condimentum laoreet, tellus augue iaculis ligula, quis
tortor. Nam volutpat, odio eu dapibus sollicitudin, purus metus lacinia sem, ege
ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur r
facilisis neque. Quisque at mi id urna accumsan facilisis. Pellentesque nisl orc
cursus at, elementum a nisl. Nullam eu sapien lectus. Maecenas aliquet eros id m
</tr>
<tr>
<td>002</td>
<td>Morbi ut iaculis nibh. Praesent vel elementum est. Cras ac dui vitae sapien eges
enim. Aenean sem leo, ultrices vel bibendum et, fringilla vel justo. Mauris in e
euismod, purus in semper venenatis, nulla urna aliquet tellus, a pretium nisi es
ultricies tincidunt ultricies. Mauris vitae velit sed odio vestibulum placerat.
lacus suscipit accumsan. Nam eget posuere metus.</td>
</tr>
<tr>
<td>003</td>
<td>Aenean consequat erat eu dui eleifend nec tristique odio vehicula. Cras sodales
congue. Duis scelerisque, elit ut hendrerit tempor, lacus orci suscipit turpis,
sapien. Nunc tellus sem, placerat in dictum at, rhoncus vel libero. Aliquam sit
turpis. Fusce adipiscing tempor est, sit amet imperdiet ipsum sodales nec. Curab
id ultrices non, malesuada sed erat. Sed consectetur diam eu ante vestibulum fer
ornare sit amet dapibus eget, ornare tincidunt augue. Aliquam sed elit justo, ve
</tr>
<tr>
<td>004</td>
<td>Duis viverra aliquet leo, commodo tempor nibh pretium a. Nunc blandit nunc ac do
Sed quis est eu tellus fringilla laoreet id nec ante. Quisque non purus ut purus
Pellentesque fermentum, magna ut consectetur egestas, elit ligula ultricies odio
non nunc. Morbi sit amet mi sit amet neque suscipit pharetra.</td>
</tr>
<tr>
<td>005</td>
<td>In ultrices nunc placerat ante lacinia posuere ut non magna. In varius nisl a le
magna a diam sagittis aliquet quis nec risus. Praesent ut libero nisl, eget eges
pretium ut hendrerit id, sollicitudin at felis. Praesent arcu elit, vehicula et
imperdiet et augue. In nec nunc sapien. Sed tincidunt lacus id lectus rutrum ves
pharetra. </td>
</tr>
</table>
Figura 29 Visualização de uma tabela no navegador por meio da tecnologia Ajax.
Quando você clicar sobre o link da página 5, será exibida a seguinte mensa-
gem “Falha na requisição”. Este erro ocorre porque o arquivo não
existe. Com isso, não é possível realizar a requisição e o processamento. O erro
é gerado pelo método do arquivo , dentro da instrução .
Você pode visualizar a instrução logo após a instrução .

Figura 30 Caixa de diálogo exibida quando uma página não pode ser carregada.

Com o uso das chamadas assíncronas do AJAX, também podemos carregar

arquivos XML. Para isso, é preciso realizar algumas alterações no arquivo
. Além disso, é necessário aprimorar o método que apresenta as infor-
mações da resposta, uma vez que o arquivo XML contém diversas informa-
ções marcadas pelas tags.

Para demonstrar a utilização de AJAX no processamento de arquivos XML,

crie um arquivo denominado . O conteúdo do arquivo é apresentado
no Código 24.
 <?xml version="1.0" encoding="ISO-8859-1"?>
<CADASTRO>
<FUNCIONARIO>
<codigo>001</codigo>
<nome>João da Silva</nome>
<salario>R$ 850,00</salario>
<informacoes>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fauci
tellus vel risus dictum ac gravida mi congue. Mauris eget quam rutrum nisl fring
accumsan. Morbi sed nunc dignissim sem convallis posuere at sed odio. In eros te
aliquet bibendum lacinia sed, pulvinar vitae tellus. Pellentesque habitant morbi
tristique senectus et netus et malesuada fames ac turpis egestas. Nam ut ipsum v
ultrices eleifend. Pellentesque auctor viverra ultrices. Pellentesque et felis n
vulputate molestie nec sit amet tellus.</informacoes>
</FUNCIONARIO>
<FUNCIONARIO>
<codigo>002</codigo>
<nome>Carlos Francisco</nome>
<salario>R$ 1200,00</salario>
<informacoes>Nunc vitae nisi et lorem dignissim congue vel at enim. Vivamus venenati
eget felis ultricies accumsan ut nec diam. Donec felis sem, dapibus vel pellente
feugiat sit amet tellus. Curabitur pharetra, tellus vel pulvinar pretium, lorem
volutpat purus, ut viverra ante nisl at est. Phasellus id quam quam, sit amet
condimentum nulla. Nam odio felis, sagittis nec tempor id, varius et lorem. Quis
dui risus. Curabitur enim enim, bibendum in egestas a, consequat semper tortor.
interdum lorem at diam feugiat scelerisque.</informacoes>
</FUNCIONARIO>
<FUNCIONARIO>
<codigo>003</codigo>
<nome>Ana Maria</nome>
<salario>R$ 1380,00</salario>
<informacoes>Nullam interdum molestie ligula vestibulum bibendum. Nulla facilisi. Al
aliquam libero. Donec et mi vitae augue placerat interdum. Vivamus eu sapien nec
semper porttitor at id justo. Nullam diam metus, tincidunt et ornare vel, elemen
auctor neque. Proin aliquam, tortor ac molestie viverra, tellus dui convallis sa
sit amet ultrices lectus odio non mi. Integer nec justo diam, eget pretium dui.
est, varius a suscipit sollicitudin, sagittis faucibus neque. Donec risus diam,
facilisis quis convallis sed, pretium at urna.</informacoes>
</FUNCIONARIO>
<FUNCIONARIO>
<codigo>004</codigo>
<nome>Flávio Alessandro</nome>
<salario>R$ 900,00</salario>
<informacoes>Curabitur facilisis justo ac odio vulputate scelerisque. Integer a leo
Proin cursus massa quis tortor porta eu eleifend magna molestie. Pellentesque an
ligula, cursus consequat dapibus at, dapibus vel nunc. Donec aliquet tellus non
adipiscing vitae placerat purus ornare. Nam aliquam hendrerit libero a lacinia.
ultrices massa ac libero iaculis interdum vel vitae quam. Mauris rutrum dignissi
accumsan. Mauris nisi sem, viverra quis molestie in, gravida ut risus. Vestibulu
enim, accumsan nec faucibus molestie, scelerisque non odio. Integer non ultricie
Ut mattis bibendum semper. </informacoes>
</FUNCIONARIO>
<FUNCIONARIO>
 <codigo>005</codigo>
<nome>Maria Francisca</nome>
<salario>R$ 980,00</salario>
<informacoes>Donec feugiat metus sit amet libero aliquet venenatis. Aenean neque ero
varius nec feugiat in, consectetur et ante. Donec eleifend, diam a scelerisque m
nunc mi consequat augue, sit amet malesuada quam odio ac dolor. Aenean venenatis
eget nisl dictum gravida. Vivamus vitae posuere purus. Duis vel arcu mauris. Sed
tincidunt risus a sem dictum posuere. Nunc tincidunt bibendum risus convallis fe
Phasellus sed feugiat enim. Pellentesque adipiscing tempor eleifend</informacoes
</FUNCIONARIO>
</CADASTRO>

As alterações realizadas no arquivo foram necessárias para processar

as informações do arquivo XML. Para organizarmos os exemplos, crie um no-
vo arquivo denominado . O conteúdo é apresentado no Código 25.
Note que o tratamento da resposta do servidor é realizado por meio do método
.
 var obj; // variável do objeto XMLHttpRequest
var elem; // variável que receberá o conteúdo

function requisicao( endereco , elemento)

{
try{
obj = new XMLHttpRequest();
elem = elemento;
obj.onreadystatechange = resposta;
obj.open('GET',endereco,true);
obj.send();
}catch(exception){
alert('Falha na requisição');
}
}
function resposta()
{
if ( obj.readyState == 4)
{
str = obj.responseXML.documentElement.getElementsByTagName("FUNCIONA

//-- Processar XML ---------------

tab = "<table>";
tab = tab + "<tr><th>Código</th><th>Nome</th>"
tab = tab + "<th>Salário</th><th>Informações</th></tr>";
for(i = 0; i < str.length; i++)
{
tab = tab + "<tr>";

cod = str[i].getElementsByTagName("codigo")[0].firstChild.n
nome = str[i].getElementsByTagName("nome")[0].firstChild.nod
sal = str[i].getElementsByTagName("salario")[0].firstChild.
inf = str[i].getElementsByTagName("informacoes")[0].firstCh

tab = tab + "<td class='codigo'>" + cod +"</td>";

tab = tab + "<td class='nome'>" + nome +"</td>";
tab = tab + "<td class='salario'>" + sal +"</td>";
tab = tab + "<td>" + inf +"</td>";

//alert(cod);
tab = tab + "</tr>";
}
tab = tab + "</table>";
//--------------------------------
document.getElementById(elem).innerHTML = tab;
}
}

Por �m, crie um documento HTML para realizar as chamadas dos arquivos
externos com o uso do Ajax. Este arquivo pode ser nomeado como
. As chamadas são realizadas por meio da função , em que é
necessário especi�car o nome do arquivo e o elemento do documento que re-
ceberá o retorno.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/

<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- JAVASCRIPT/AJAX ------------- -->

<script type="text/javascript" src="ajaxxml.js"> </script>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css"> table{ border-collapse: collapse; width: 100%; } table
border: solid 1px #0000FF; vertical-align: top; } th{ background-color:
#FFFFFF; } td.codigo{ text-align: center; } td.nome{ width: 100px; } td.salario
80px; } </style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Exemplo de AJAX com XML</h1>
<input type="button" value="carregar XML"
onclick="requisicao('dados.xml','conteudo')" />
<div id="conteudo"> </div>
</body>
</html>

A Figura 31 demonstra a saída do Código 26.

 Figura 31 Visualização das informações por meio de uma tabela.

As chamadas assíncronas podem ser realizadas a partir de qualquer tipo de

interação do usuário. O próximo exemplo demonstra como realizar as chama-
das com o uso do evento .

Para demonstrar a utilização deste evento com as chamadas assíncronas, crie

um arquivo HTML denominado , conforme o Código 27.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- JAVASCRIPT/AJAX ------------- -->

<script type="text/javascript" src="ajax.js"> </script>

<!-- ESTILOS EM CASCATA --------- -->

<style type="text/css"> table{ border-collapse: collapse; width: 500px; } table
border: groove 10px #FF0000; vertical-align: top; } td{ text-align: center;
20px; } h4{ font-style: italic; color: #FF0000; } p{ width: 600px; } p.conteudo1
#00BFFF; } p.conteudo2{ color: #DAA520; } p.conteudo3{ color: #DC143C; }
color: #32CD32; } p.conteudo5{ color: #C0C0C0; } </style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<h1>Exemplo de AJAX com Evento OnMouseOver</h1>
<h4>Passe o mouse sobre as imagens para
visualizar o conteúdo</h4>
<table>
<tr>
<td><img src="imagens/imagem1.png" alt="imagem 1"
onmouseover="requisicao('conteudo1.html','conteudo')" onmouseout
<td><img src="imagens/imagem2.png" alt="imagem 2"
onmouseover="requisicao('conteudo2.html','conteudo')" onmouseout
<td><img src="imagens/imagem3.png" alt="imagem 3"
onmouseover="requisicao('conteudo3.html','conteudo')" onmouseout
<td><img src="imagens/imagem4.png" alt="imagem 4"
onmouseover="requisicao('conteudo4.html','conteudo')" onmouseout
<td><img src="imagens/imagem5.png" alt="imagem 5"
onmouseover="requisicao('conteudo5.html','conteudo')" onmouseout
</tr>
</table>
<br />
<div
id="conteudo"> </div>
</body>
</html>
 Figura 32 Exibição de imagens por meio de chamadas utilizando Ajax.

Cada imagem da página carrega um arquivo de conteúdo, tais como:

• Conteúdo do documento HTML nomeado como conteudo1.html. O resul-

tado da visualização do arquivo no navegador é apresentado na Figura
33.
<p class="conteudo1">
orem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies cursus porta. Mor
nibh, accumsan id dignissim sit amet, pellentesque et sapien. Nullam ornare lobortis mas
sagittis. Curabitur viverra molestie risus id malesuada. Etiam eros sem, lobortis eget t
sit amet, vestibulum in lectus. Fusce justo sapien, scelerisque quis pulvinar vitae, int
sed sapien. Praesent at erat cursus lorem ullamcorper adipiscing quis et orci. Proin lao
pulvinar nunc sit amet molestie. Sed ornare felis vel nibh cursus euismod. Class aptent
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam tempor adipi
cursus. Aliquam id dolor ut lacus suscipit faucibus. Etiam posuere orci eget turpis orna
ultricies porta purus tincidunt. Fusce accumsan malesuada enim, eu vehicula urna vehicul
lacinia. Aliquam sem metus, gravida sed pharetra sed, porttitor vitae sapien.
/p>
p class="conteudo1">
urabitur eget tellus lacinia eros commodo tempor. Duis nisi sapien, tempus id malesuada
venenatis at ante. Quisque non nunc felis. Cras ligula tellus, pellentesque sed euismod
commodo sit amet libero. In at orci congue mauris semper euismod a ut odio. Nam quis dia
turpis elementum ornare ac ac lacus. Ut magna arcu, laoreet eu hendrerit ut, hendrerit i
Suspendisse nec mi erat. Nam consectetur scelerisque lorem, eget suscipit nibh congue qu
Praesent at elit id lacus venenatis sagittis. Fusce sollicitudin ultrices augue cursus m
Nulla lobortis pretium rutrum. Pellentesque volutpat quam non lacus rutrum elementum ut
Integer a dui at justo pretium pellentesque. Donec nulla urna, lacinia nec euismod in, e
at tellus. Nunc nulla est, iaculis id semper a, iaculis et justo.
/p>
p class="conteudo1">
ullam interdum molestie ligula vestibulum bibendum. Nulla facilisi. Aliquam eu aliquam l
Donec et mi vitae augue placerat interdum. Vivamus eu sapien nec nisl semper porttitor a
justo. Nullam diam metus, tincidunt et ornare vel, elementum auctor neque. Proin aliquam
ac molestie viverra, tellus dui convallis sapien, sit amet ultrices lectus odio non mi.
nec justo diam, eget pretium dui. In lorem est, varius a suscipit sollicitudin, sagittis
faucibus neque. Donec risus diam, facilisis quis convallis sed, pretium at urna.
</p>
 Figura 33 Resultado da visualização do conteúdo do documento no navegador.

• Conteúdo do documento HTML nomeado como conteudo2.html. A visua-

lização do documento é apresentada na Figura 34.
<p class="conteudo2">
Nulla augue enim, tristique nec tristique a, mollis eu lacus. Nullam ante diam, ultricie
pharetra in, commodo ut lorem. Cras id tellus ac justo feugiat sodales nec dignissim era
Integer commodo lectus ut libero faucibus faucibus. In in justo eu ante mattis rhoncus s
consequat ligula. Sed sollicitudin, enim vitae cursus pharetra, urna velit rutrum arcu,
tempor lacus libero at dolor. Sed in mi arcu. Quisque vel ligula ac quam mollis semper.
pulvinar nunc id risus lacinia et tincidunt turpis vestibulum. Nam sit amet justo metus,
fringilla mi. In fermentum diam quis leo pharetra ac pretium nisi molestie. Nam lacinia,
viverra faucibus, libero velit porttitor enim, non tincidunt neque leo sed nulla. Quisqu
pretium odio et metus semper venenatis aliquam diam semper. In laoreet laoreet sem et fa
Aenean aliquam, quam eu iaculis ullamcorper, arcu leo lacinia mauris, sit amet mattis fe
purus hendrerit dui.
</p>
<p class="conteudo2">
Curabitur facilisis justo ac odio vulputate scelerisque. Integer a leo nisi. Proin cursu
quis tortor porta eu eleifend magna molestie. Pellentesque ante ligula, cursus consequat
at, dapibus vel nunc. Donec aliquet tellus non leo adipiscing vitae placerat purus ornar
aliquam hendrerit libero a lacinia. Nullam ultrices massa ac libero iaculis interdum vel
quam. Mauris rutrum dignissim accumsan. Mauris nisi sem, viverra quis molestie in, gravi
risus. Vestibulum quam enim, accumsan nec faucibus molestie, scelerisque non odio. Integ
ultricies quam. Ut mattis bibendum semper. Duis mattis varius nisi. In posuere eleifend
tincidunt.
1) </p>
 Figura 34 Apresentação da página no navegador.

• Conteúdo do documento HTML nomeado como conteudo3.html. O resul-

tado da apresentação do documento no navegador pode ser visualizado
na Figura 35.
<p class="conteudo3">
Proin auctor venenatis lacus. Nunc et sapien quis nisl eleifend viverra sit amet sit ame
Phasellus ultricies pretium risus, quis viverra metus luctus cursus. Suspendisse tincidu
faucibus diam. Donec tempor porttitor pulvinar. Vestibulum eleifend mi ut arcu pretium a
quam placerat. Quisque sed semper erat. Donec nec velit lectus, vel aliquam arcu. Quisqu
vestibulum nulla. Nulla facilisi. Nullam risus neque, mattis vel gravida et, volutpat eg
In sit amet risus vel felis hendrerit placerat vitae nec nisl.
</p>
<p class="conteudo3">
Nulla suscipit pharetra erat in blandit. Mauris sed dictum nunc. Ut condimentum enim ac
mollis quis ullamcorper nisl venenatis. Pellentesque habitant morbi tristique senectus e
et malesuada fames ac turpis egestas. Nam accumsan ante eu diam accumsan iaculis. Cras r
nulla, mollis id laoreet ac, consequat quis lectus. Proin id dolor quis magna lacinia he
Nam nulla erat, pretium vitae laoreet vel, accumsan in leo. Proin ut massa non tellus fa
placerat. Quisque vestibulum imperdiet justo, non mattis odio dapibus sit amet. Quisque
in sapien malesuada egestas. Sed tincidunt, erat a cursus varius, nibh dolor laoreet lac
sodales justo massa sed dui. In sit amet mi ac massa blandit fermentum id sit amet leo.
</p>
<p class="conteudo3">
Maecenas lacinia, metus a auctor sagittis, urna ligula dictum magna, sed laoreet mi lacu
diam. In hac habitasse platea dictumst. Quisque tellus dui, faucibus ut feugiat at, susc
ante. Sed fermentum libero non augue aliquam id vehicula ligula luctus. Praesent sit ame
justo, nec malesuada neque. Vivamus eget est enim. Etiam et massa nibh, ac volutpat mass
Vivamus lobortis tempor tortor ut auctor. Duis consequat, lacus vitae convallis aliquam,
dolor pharetra augue, eget pharetra erat justo ut arcu. Aliquam turpis enim, imperdiet a
fringilla eu, porttitor ut urna. Sed non urna tellus. Morbi fringilla cursus mi, a lacin
porttitor at.
</p>
 Figura 35 Resultado da visualização no navegador.

• Conteúdo do documento HTML nomeado como conteudo4.html. As infor-

mações do arquivo podem ser visualizadas na Figura 36.

<p class="conteudo4">
Donec feugiat metus sit amet libero aliquet venenatis. Aenean neque eros, varius nec feu
consectetur et ante. Donec eleifend, diam a scelerisque mattis, nunc mi consequat augue,
amet malesuada quam odio ac dolor. Aenean venenatis quam eget nisl dictum gravida. Vivam
posuere purus. Duis vel arcu mauris. Sed tincidunt risus a sem dictum posuere. Nunc tinc
bibendum risus convallis feugiat. Phasellus sed feugiat enim. Pellentesque adipiscing te
eleifend. Phasellus suscipit urna quis erat aliquet at viverra turpis commodo. Curabitur
hendrerit semper felis posuere suscipit. Maecenas fringilla, quam eu consectetur porttit
risus lorem volutpat nisi, et faucibus neque nulla et mi. Phasellus auctor, neque sit am
ornare luctus, arcu neque dictum turpis, ac condimentum purus arcu quis est. Fusce iacul
sed tortor placerat vehicula. Praesent ipsum arcu, eleifend eget auctor id, laoreet eget
Cras rutrum porttitor mi. Nunc ac quam sem. Aenean nec nulla velit, eu rutrum neque.
</p>
 Figura 36 Resultado da visualização no navegador.

• Conteúdo do documento HTML nomeado como conteudo5.html. O resul-

tado da visualização do arquivo é apresentado na Figura 37.
<p class="conteudo5">
Nulla consectetur, nisl eget congue pellentesque, mi elit vestibulum massa, vel euismod
augue semper risus. Cras a massa velit. Quisque nisi libero, dictum nec venenatis fermen
tincidunt sit amet felis. Sed massa felis, interdum et aliquam vel, egestas sed ante. Cu
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin accumsa
ultricies arcu et lobortis. Sed erat nulla, dapibus in vestibulum vel, molestie nec lect
Curabitur in lacus diam, vitae adipiscing lacus. Phasellus rhoncus dui eu velit vulputat
aliquet. Vivamus congue diam in quam venenatis non pellentesque libero laoreet. Fusce ut
quam. Etiam vehicula porttitor mattis.
</p>
<p class="conteudo5">
Nullam rhoncus, elit a vehicula rhoncus, diam nibh interdum mauris, eu varius arcu erat
lacus. Aliquam diam erat, faucibus et ultrices scelerisque, viverra id odio. Aenean quis
id nunc ultrices accumsan vel quis tellus. Curabitur eget magna id sapien feugiat ullamc
Suspendisse ullamcorper purus a massa gravida et porta tellus consequat. Vivamus quis sa
magna fringilla tristique. Quisque dictum dolor vestibulum tortor posuere eu congue leo
ullamcorper. Donec imperdiet dui vitae velit ornare luctus. Nullam vestibulum, metus sed
elementum sodales, ante turpis viverra dolor, vitae sagittis ante sem a nulla. Phasellus
tortor lorem, vitae rhoncus ipsum. Cum sociis natoque penatibus et magnis dis parturient
nascetur ridiculus mus. Sed porta laoreet tellus, a aliquam lectus viverra faucibus. Ves
nec facilisis quam. Fusce tellus lectus, consectetur et molestie egestas, molestie eu me
Pellentesque eget libero felis, id pretium enim. Aliquam risus mi, elementum nec iaculis
amet, mollis non ligula. Morbi blandit, mauris vel dictum aliquet, quam diam cursus eros
condimentum nulla urna et quam.
</p>
<p class="conteudo5">
Nunc ac cursus lectus. Suspendisse quis est eu sem cursus molestie vel at neque. Phasell
mi, consequat in ullamcorper nec, scelerisque ut enim. Nulla tincidunt odio ut enim fauc
vitae accumsan odio eleifend. Donec diam turpis, sagittis eu pellentesque at, condimentu
lorem. Mauris risus mi, fermentum porta ullamcorper vel, ultrices ut nunc. Integer tinci
enim eleifend tortor pretium luctus. Cras nisl ligula, volutpat vitae fermentum at, dict
ligula. Phasellus fringilla eros vitae leo luctus interdum. Curabitur aliquet arcu nec e
sagittis auctor. In bibendum, risus eget iaculis dapibus, ante sapien lacinia enim, in t
orci nibh non libero.
</p>
 Figura 37 Visualização do arquivo no navegador.

No arquivo , foi adicionada uma função capaz de limpar o conteúdo da

div quando o usuário posiciona o mouse fora da área da imagem. Essa função
foi nomeada . Note que este evento é disparado em no ar-
quivo . O conteúdo atualizado do arquivo AJAX é apresentado no
Código 33.
var obj; // variável do objeto XMLHttpRequest
var elem; // variável que receberá o conteúdo

function requisicao(endereco, elemento) {

try {
obj = new XMLHttpRequest();
elem = elemento;
obj.onreadystatechange = resposta;
obj.open('GET', endereco, true);
obj.send();
} catch (exception) {
alert('Falha na requisição');
}
}

function resposta() {
if (obj.readyState == 4) {
document.getElementById(elem).innerHTML = obj.responseText;
}
}

function limpar() {
document.getElementById('conteudo').innerHTML = "";
}

Com isso, terminamos a apresentação da tecnologia Ajax e do seu uso no de-

senvolvimento de aplicações para web.

8. Desenvolvendo um site XHTML/CSS com

AJAX na prática
Para demonstrar a aplicabilidade das tecnologias estudadas até o momento,
vamos construir um site completo com todas as funcionalidades. Neste proje-
to construiremos um site para uma empresa de informática, cujo objetivo é
apresentar informações a respeito de seus principais produtos.

Como no projeto do ciclo anterior, vamos começar criando a estrutura para ar-
mazenamento dos arquivos do site:
 Figura 38.

Veja que a pasta armazena um conjunto de arquivos que represen-

tam as imagens dos produtos comercializados no site. As imagens utilizadas
neste exemplo são apresentadas a seguir.

Figura 39 Imagens utilizadas como exemplo para construção do site.

O site contém um único arquivo HTML denominado . Este arquivo

realiza chamadas assíncronas com o uso do AJAX, para recuperar e apresen-
tar os dados dos produtos. Veri�que o conteúdo da página principal no Código
34.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- CABEÇALHO DA PÁGINA ------------- -->

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Título da Página</title>

<!-- JAVASCRIPT/AJAX ------------- -->

<script type="text/javascript" src="js/ajaxxml.js"></script>

<!-- ESTILOS EM CASCATA --------- -->

<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<!-- CORPO DA PÁGINA ----------------- -->

<body>
<div id="cabecalho">
<h1>
<a href="index.html">
<img class="logo" src="imagens/logo.png" />
</a>
[email protected]
<br />
</h1>
</div>
<div id="principal">
<div id="barranavegacao">
<ul class="menu">
<li class="menu"><a class="menu" href="#"
onclick="requisicao('dados/produtos.xml','ACESSORIO','conteudo')"
<li class="menu"><a class="menu" href="#"
onclick="requisicao('dados/produtos.xml','COMPUTADOR','conteudo')"
<li class="menu"><a class="menu" href="#"
onclick="requisicao('dados/produtos.xml','IMPRESSORA','conteudo')"
<li class="menu"><a class="menu" href="#"
onclick="requisicao('dados/produtos.xml','MONITOR','conteudo')"
<li class="menu"><a class="menu" href="#"
onclick="requisicao('dados/produtos.xml','NOTEBOOK','conteudo')"
</ul>
</div>
<div id="conteudo">
<h3>Seja bem-vindo!</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor
euismod, orci quam posuere purus, in viverra felis tellus in sapien. Nunc po
 semper erat ullamcorper at. Vivamus dapibus cursus pellentesque. Praesent ad
dignissim dolor tincidunt eget. Phasellus a justo ut lorem pellentesque cong
vehicula feugiat facilisis. Nullam auctor lobortis mattis. Duis commodo luct
pulvinar non. Sed vel mauris neque, at fringilla est. Ut pharetra commodo te
porttitor nibh eu blandit. Morbi blandit mattis gravida. Vivamus arcu magna,
et, feugiat eu nisi. Proin vitae nisi sed nulla sodales rutrum. Sed id lectu
tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada
Maecenas consectetur, erat nec ultricies pharetra, metus lectus porta nisi,
massa.
</p>
<p>
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cub
convallis dictum. Fusce varius tellus vitae sapien eleifend pharetra. Ut sus
pharetra condimentum. Aliquam hendrerit lacinia pretium. Etiam aliquam elit
Cras volutpat erat vel sem sollicitudin congue ac vel metus. Aenean non ipsu
faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eu
pulvinar quis id orci. Curabitur ac turpis est, ac blandit arcu.
</p>
</div>
</div>
<div id="rodape">
&copy; [email protected] - Sua loja 24 horas na Internet
</div>

</body>

</html>

Os estilos em cascata foram utilizados para formatar a estrutura do site, bem

como para estilização dos conteúdos apresentados. O arquivo de estilos, deno-
minado , foi armazenado na pasta e é descrito no Código 35.
body {
font-family: Tahoma;
margin: 0px;
background-color: #FFFFFF;
}

/*----- ESTRUTURA DO SITE -----*/

#cabecalho {
padding: 10px 20px;
text-align: left;
background-color: #0047B2;
color: #E6F0FF;

#principal {
width: 100%;
}

#barranavegacao {
width: 160px;
background-color: #FFFFFF;
float: left;
}

#conteudo {
padding: 20px 20px;
margin-left: 160px;
}

#rodape {
margin-top: 10px;
text-align: center;
background-color: #0047B2;
color: #E6F0FF;
padding: 20px 0px;
}

/*-----------------------------*/

/*----- BARRA NAVEGACAO -----*/

ul.menu {
list-style-type: none;
margin: 0px;
padding: 0px;
padding-left: 10px;
color: #FFFFFF;
font-weight: bold;

}
a.menu:link,
a.menu:visited {
background-color: #E6F0FF;
color: #0047B2;
display: block;
text-align: left;
text-decoration: none;
width: 130px;
font-weight: bold;
padding: 5px 5px;
}

a.menu:hover,
a.menu:active {
background-color: #0047B2;
color: #FFFFFF
}

/*---------------------------*/

p {
text-align: justify;
text-indent: 40px;
}

img.logo {
width: 80px;
height: 80px;
vertical-align: middle;
border: none;
}

h3 {
padding-left: 10px;
color: #000080;
}

table.produto {
width: 100%
}

td.imagem {
width: 20%;
text-align: center;
vertical-align: top;
padding: 20px;
}

td.nome {
font-size: 16px;
font-weight: bold;
 text-align: center;
height: 20%;
padding: 20px;
}

td.descricao {
padding: 20px;
text-indent: 40px;
text-align: justify;
}

td.preco {
text-align: center;
}

span.preco {
margin: 0px 30px;
font-size: 20px;
color: #0047B2;
}

input.comprar {
padding: 5px;
width: 100px;
border: solid 1px #0047B2;
background-color: #E6F0FF;
color: #0047B2;
}

Note na estrutura de arquivos que uma pasta foi adicionada para armazenar
os arquivos JavaScript, a pasta é denominada . O conteúdo do arquivo
é apresentado no Código 36.
var obj; // variável do objeto XMLHttpRequest
var elem; // variável que receberá o conteúdo
var grp; // grupo de informações que serão recuperadas

function requisicao(endereco, grupo, elemento) {

try {
obj=new XMLHttpRequest();
elem=elemento;
grp=grupo;
obj.onreadystatechange=resposta;
obj.open('GET', endereco, true);
obj.send();
}

catch(exception) {
alert('Falha na requisição');
}
}

function resposta() {
if (obj.readyState==4) {
prod=obj.responseXML.documentElement.getElementsByTagName(grp);
tab="<table class='produto' border='0'>";

for(i=0; i < prod.length; i++) {

imagem=prod[i].getElementsByTagName("IMAGEM")[0].firstChild.
nome=prod[i].getElementsByTagName("NOME")[0].firstChild.node
descricao=prod[i].getElementsByTagName("DESCRICAO")[
preco=prod[i].getElementsByTagName("PRECO")[0].firstChild.no

tab=tab+"<tr>";
tab=tab+"<td class='imagem' rowspan='3'>";
tab=tab+"<img src='imagens/"+imagem+"' alt='Imagem do produt
tab=tab+"</td> ";

tab=tab+"<td class='nome'>"+nome+"</td>";
tab=tab+"</tr>";

tab=tab+"<tr>";
tab=tab+"<td class='descricao'>"+descricao+"</td>";
tab=tab+"</tr>";

tab=tab+"<tr>";
tab=tab+"<td class='preco'>";
tab=tab+"Preço: <span class='preco'>"+preco+"</span>"
tab=tab+"<input class='comprar' type='button' value='comprar
tab=tab+"<br/><br/></td>"
tab=tab+"</tr>";
}

tab=tab+"</table>";
//--------------------------------
 document.getElementById(elem).innerHTML=tab;
}
}

function comprar() {
alert('Parabéns! \n\n A sua compra foi realizada comsucesso.');
}

Os dados dos produtos estão organizados em um arquivo XML denominado

, que está armazenado na pasta . Tais dados podem ser ar-
mazenados em um banco de dados, e as informações podem ser recuperadas
por meio de uma linguagem de programação dinâmica, como, por exemplo, a
linguagem PHP. O conteúdo do arquivo é apresentado no Código 37.
<pre class="hljs"
style="display: block; overflow-x: auto; padding: 0.5em; background: rgb(51, 51, 51); co
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class="hljs-name"

<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class

<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span

<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class

<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
 <span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
 <span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span

<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class

<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
Notebook LG R490-5100 c/ Intel® Core i3 330M 2.13GHz 4GB 500GB DVD-RW Webcam 1.3MP e
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
Notebook HP Pavilion dv4-2040BR c/ Intel® Core i3 330M 2.13GHz 4GB 500GB DVD-RW Webc
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
 <span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span

<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class

<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span class="hljs-name
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
Multifuncional Officejet J4660 <span class="hljs-tag" style="color: rgb(98, 200, 243
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;<span class
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
 <span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span
<span class="hljs-tag" style="color: rgb(98, 200, 243);">&lt;/<span class="hljs-name
</pre>

As �guras a seguir demonstram o resultado �nal deste projeto.

Figura 40 Visualização da página inicial do site no navegador.

 Figura 41 Visualização dos itens da página de acessórios.

Figura 42 Visualização dos itens da página de computadores.

Figura 43 Visualização dos itens da página de computadores em que é possível visualizar o botão relativo à compra

de novos produtos.

Figura 44 Visualização dos itens da página de impressoras.

Figura 45 Visualização dos itens da página de impressoras em que é possível notar a diversidade de modelos de equi-

pamentos.
 Figura 46 Visualização dos itens da página de monitores.

Figura 47 Visualização dos itens da página de monitores com detalhes nos modelos de LCD.
 Figura 48 Visualização dos itens da página de notebooks.

Figura 49 Visualização dos itens da página de notebooks.

Dessa forma, concluímos a construção de um projeto completo com o uso das

principais tecnologias para desenvolvimento web.

 Saiba mais sobre a linguagem de programação JavaScript!

 (https://developer.mozilla.org/pt-BR/docs/Web/JavaScript
/Guide) para complementar o conteúdo sobre a linguagem de programa-
ção JavaScript!

9. JavaScript na prática
Para conhecer todo o poder da linguagem de programação JavaScript, assista
ao seguinte vídeo:

Os frameworks JavaScript são muito importantes na programação para web.

Assim, para que você possa aprofundar seu conhecimento a respeito de al-
guns desses frameworks, indicamos os seguintes vídeos:
10. Considerações
Neste ciclo, você aprendeu sobre a linguagem de script JavaScript. Esta lin-
guagem é muito utilizada na programação web, pois permite ao desenvolve-
dor controlar elementos do lado do cliente.
 (https://md.claretiano.edu.br/proweb-gs0070-

ago-2023-grad-ead/)

Ciclo 4 – Linguagem do lado do Servidor

Objetivos
• Conhecer os comandos básicos da linguagem de programação PHP.
• Codi�car e executar aplicações em PHP.

Conteúdos
• Sintaxe básica de documentos escritos em linguagem PHP.
• Conceitos de variáveis, constantes e tipos de dados utilizados na lingua-
gem PHP.
• Seus operadores lógicos, estruturas de controle.

Problematização
Quais são os principais símbolos da linguagem PHP? Quais são os principais
comandos básicos suportados pela linguagem PHP?

Orientações para o estudo

Neste ciclo, você aprenderá sobre a linguagem de programação PHP. Para im-
plementar e executar exemplos de código em PHP, é necessário que você te-
nha instalado no seu computador o XAMPP. Caso tenha dúvidas sobre este
processo, retorne ao conteúdo do Ciclo 1.

Bons estudos!
1. Introdução
A linguagem de programação PHP é uma das principais tecnologias para de-
senvolvimento de aplicações para web. O PHP permite o desenvolvimento de
aplicações do lado do servidor. Neste quarto ciclo, você aprenderá tudo sobre
essa linguagem.

Vamos lá?

2. Linguagem de programação PHP

Para o estudo da linguagem, utilizaremos como base a obra PHP na prática (2014), da autora
Júlia Marques Carvalho da Silva, que está disponível na . Conforme o an-
damento de seus estudos, mencionaremos os capítulos e as páginas que deverão ser estu-
dados de acordo com cada conteúdo abordado. Fique atento(a)!

Como indicado anteriormente, para executar os códigos na linguagem PHP, é

necessário o ambiente XAMPP. Se você estiver com dúvidas sobre como utili-
zar o XAMPP, sugerimos que assista ao seguinte vídeo:

Variáveis na linguagem PHP

Começaremos aprendendo sobre a declaração e o uso de variáveis na lingua-
gem PHP. Para isso, você deverá realizar a leitura do ,
, da obra indicada – PHP na prática (2014), disponível na
Minha Biblioteca. Com esse estudo, você poderá notar que o PHP possui algu-
mas peculiaridades sobre as variáveis.
Operadores da linguagem PHP
Os operadores da linguagem PHP são muito semelhantes a outras linguagens
de programação. Para saber mais sobre como utilizar operadores, você deverá
realizar a leitura e a codi�cação dos exemplos disponíveis também
no da obra indicada, só que agora na .

3. Estruturas de controle
As estruturas de controle são fundamentais em qualquer projeto de site dinâ-
mico. Elas permitem a especi�cação de condicionais (if) e de repetições
(for, while e do..while).

Para entender melhor sobre estrutura de controle no PHP, faça a leitura e a co-
di�cação dos exemplos disponíveis no da obra indicada, especi�ca-
mente da seção .

4. Obtendo informações do usuário

A interação entre o usuário nas aplicações web é algo essencial. Para isso, a
linguagem de marcação HTML possui uma tag denominada <form> que per-
mite a coleta de dados fornecidos pelo usuário. Esses dados podem ser proces-
sados utilizando a linguagem PHP.

Para compreender sobre como obter dados do usuário e processar com PHP,
realize a leitura e codi�cação dos exemplos disponíveis no da obra
indicada, especi�camente da
.

5. Arrays
Segundo Silva (2014, p. 22),
 Os arrays são estruturas que permitem o armazenamento de várias informações
em uma variável. Diferentemente das outras linguagens de programação, o PHP
permite que diferentes tipos de dados sejam armazenados em um único array.

Para aprender como utilizar arrays em PHP, faça a leitura e a codi�cação dos
exemplos disponíveis no da obra indicada, especi�camente da
.

6. Considerações
Neste ciclo, você aprendeu os conceitos introdutórios a respeito da linguagem
PHP. Além disso, foram descritos aspectos referentes à codi�cação, bem como
as principais estruturas de programação, tais como: estruturas condicionais e
estruturas de repetição.

Até o próximo ciclo!

 (https://md.claretiano.edu.br/proweb-gs0070-

ago-2023-grad-ead/)

Ciclo 5 – Conexão com Banco de Dados SQL

Objetivos
• Apresentar os comandos básicos para manipulação de dados no MySQL
(ou MariaDB) via PHP.
• Aprender como criar tabelas e inserir dados.
• Recuperar e alterar informações no banco.

Conteúdo
• Integração da linguagem PHP com banco de dados.

Problematização
Como estabelecer a conexão com o SGBD MySQL por meio da linguagem PHP?
Como criar tabelas no MySQL? Como recuperar dados oriundos dos usuários?

Orientações para o estudo

Durante o estudo deste ciclo, você deverá complementar seus estudos aces-
sando os links indicados, pois neles você terá acesso a artigos, vídeos, home-
pages etc. É fundamental que você acesse esses links e estude todos os con-
teúdos disponíveis, pois eles serão imprescindíveis para seus estudos.

Vamos lá! Bons estudos!

1. Introdução
Neste ciclo, você aprenderá sobre a integração do PHP com o banco de dados
MySQL, ou, alternativamente, o banco de dados MariaDB. Você encontrará, no
decorrer do conteúdo, todas as orientações sobre como instalar o banco de da-
dos no seu computador.

2. Conexão com banco de dados SQL

Segundo Silva (2014, p. 60),

Os bancos de dados são estruturas formadas por tabelas que permitem armazenar
informações de uma forma organizada. Os dados lá guardados podem ser acessa-
dos pelas diversas páginas e não são perdidos, mesmo após encerrar o seu uso.

Para aprender sobre como utilizar o PHP na integração com o banco, você pre-
cisa, primeiramente, instalar o banco de dados. Conforme indicado, você pode
utilizar o MySQL ou o MariaDB. Veja os passos de instalação para cada um de-
les nos seguintes vídeos:
Agora sim podemos começar!

Para iniciar o estudo sobre a integração da linguagem de programação PHP

com banco de dados, você deverá realizar a leitura do ,
, da obra de Silva (2014), PHP na prática, a mes-
ma que você utilizou no ciclo anterior. Essa obra, como você já sabe, está dis-
ponível na Minha Biblioteca.

Vale lembrar que o banco de dados MySQL tem sido substituído pelo MariaDB,
uma vez que ele, mesmo tendo código fonte opensource, não pode ser utilizado
comercialmente. A instalação do ambiente XAMPP já conta com o banco de
dados MariaDB, e os comandos da linguagem PHP para o MySQL são compatí-
veis com ele.

Você pode aprofundar o seu conhecimento sobre o MariaDB assistindo ao se-

guinte vídeo:

Para aproveitar ao máximo a integração do PHP com o banco de dados, é fun-

damental explorar os recursos dos formulários web. No ciclo anterior, foi apre-
sentado como usar esse recurso, mas, para um estudo mais avançado, é im-
portante que você faça a leitura e codi�cação dos exemplos disponíveis
no , da obra de Walace Soares
(2013), intitulada PHP 5: conceitos, programação e integração com banco de
dados. Essa obra também está disponível na Minha Biblioteca.
3. mysqli
Segundo Wallace (2013, p. 421), “Para a versão 4.1 (4.1.3) ou maior do MySQL,
dispomos no PHP de uma nova interface chamada mysqli (improved MySQL
Extension, ou extensão aperfeiçoada (melhorada) do MySQL)”. Essa interface
de programação possui um conjunto de funções para integração do PHP com
o banco de dados.

Para aprender como utilizar esta interface, você deverá realizar a leitura
do da obra de Soares (2013), PHP 5: conceitos, programação e inte-
gração com banco de dados, indicada anteriormente, especi�camente da se-
ção .

4. Considerações
Com isso, chegamos ao �m deste ciclo. Como em qualquer material de progra-
mação, é fundamental a codi�cação dos exemplos para aprofundar o seu co-
nhecimento. Caso queira estudar mais sobre este conteúdo, acesse os livros
indicados na bibliogra�a.

5. Considerações �nais
Finalizamos o conteúdo de . O aprendizado é um pro-
cesso constante, assim, não se esqueça de sempre consultar as bibliogra�as
apresentadas para aprofundar o seu conhecimento.

Sucesso e até uma próxima!