EAD

Desenvolvimento Web

1. OBJETIVOS
Reconhecer as linguagens de marcao HTML e XHTML.
Identificar e interpretar os conceitos de Folha de Estilo em Cascata.

2. CONTEDOS
HTML e XHTML.
Folha de Estilo em Cascata.
Formulrios.

3. ORIENTAES PARA O ESTUDO DA UNIDADE

Antes de iniciar o estudo desta unidade, importante que voc leia as orientaes a se-
guir:
1) Para ampliar seus conhecimentos sobre Desenvolvimento Web, procure distribuir ra-
cionalmente os perodos de estudo: organize seu horrio de maneira que no fique
saturado e procure variar seu programa, alternando entre escrever, ler, refletir, parti-
cipar na Sala de Aula Virtual, realizar atividades etc.
2) Para solucionar problemas por meio da estrutura conhecida como Padres Web (Web
Standards), voc pode consultar as seguintes referncias:
WEB STANDARDS. Homepage. Disponvel em: <http://www.webstandards.org/>.
Acesso em: 6 dez. 2013.
 22 Desenvolvimento de Aplicaes Web com Java

TABLELESS. Homepage. Disponvel em: < http://www.tableless.com.br/>. Acesso

em: 6 dez. 2013.
MAUJOR. Homepage. Disponvel em: < http://www.maujor.com/>. Acesso em: 6
dez. 2013.

4. INTRODUO
Na unidade anterior voc aprendeu como funciona o processamento das pginas da Inter-
net pelos Servidores, cujos conceitos sero fundamentais para construo das Aplicaes Web.
Nesta unidade, sero apresentados os aspectos fundamentais para construo de pginas
para Internet. Para tanto, voc aprender como construir pginas utilizando a linguagem de
marcao HTML e XHTML. Tambm sero abordados conceitos sobre formatao das pginas
utilizando as Folhas de Estilos em Cascata (CSS).
Finalmente, vamos descobrir como desenvolver pginas utilizando Formulrios. Voc en-
tender que estes so a principal maneira de interao entre os usurios e a Aplicao Web.
Bons estudos!

5. HTML E XHTML
Como voc aprendeu na Unidade 1, o protocolo HTTP o principal canal de comunicao
entre os navegadores (browsers) e os Servidores Web.
A linguagem de marcao de hipertexto HTML (HyperText Markup Language) tem como
objetivo principal padronizar a maneira com que as informaes entre navegador e Servidor
so trocadas. Essa linguagem permite que qualquer navegador interprete os documentos HTML
enviados pelo Servidor.
O HTML foi proposto por Tim Bernes-Lee no incio da dcada de 90, com o objetivo de
transferir informaes de um computador para outro por meio de hipertexto utilizando a Inter-
net. Tim Bernes-Lee buscava uma maneira de compartilhar artigos entre seus colegas de traba-
lho do CERN (Conseil Europen pour la Recherche Nuclaire).

Informao!
Os documentos hipertexto tm como principal caracterstica a possibilidade de navegao por meio de hiperligaes
(hiperlinks).

A ideia proposta por Tim Bernes-Lee era criar um mecanismo que permitisse a visuali-
zao do contedo transferido. Naquela poca, a nica maneira de transferir arquivos era por
meio de FTP (File Transfer Protocol).
A primeira especificao do HTML (HTML 1.0) foi publicada em 1993, na IETF (Internet
Engineering Task Force). Nos anos seguintes, diversas modificaes foram realizadas at a ver-
so mais recente (HTML 4.01), publicada em 1999. Desde 1996 as especificaes do HTML so
mantidas pela W3C (World Wide Web Consortium).
Com objetivo de padronizar a linguagem de marcao HTML, a W3C vem trabalhando no
desenvolvimento da especificao XHTML (eXtensible Hypertext Markup Language). O XHTML
uma reformulao da linguagem HTML baseado em XML. O objetivo criar uma especificao
 U2 - Desenvolvimento Web 23

padronizada que permita a exibio das pginas Web em qualquer tipo de dispositivo, como
navegadores, celulares, eletrnicos, etc.
A sintaxe do XHTML mais rigorosa e menos confusa, como, por exemplo, os comandos
de marcao (tags), que precisam ser definidos com letras minsculas. Alm disso, o XHTML
utilizado apenas para marcao do contedo das pginas, pois as especificaes de formatao
so definidas por intermdio das Folhas de Estilo em Cascata.
Estes fatores tornam a especificao XHTML mais simples de ser processada e com isso
pode ser interpretada em qualquer dispositivo.

Ateno!
A W3C disponibiliza um servio para verificar se uma pgina Web foi construda com base nas especificaes
XHTML. O servio est disponvel em <http://validator.w3.org/>. Alguns editores de pginas Web, como o Macromedia
Dreamweaver, possuem essa ferramenta embutida.

A estrutura bsica de um documento XHTML baseado nas especificaes W3C definida

como se segue:

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

w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
2 <html xmlns=http://www.w3.org/1999/xhtml>
3 <head>
4 <meta http-equiv=Content-Type content=text/html;
5 charset=iso-8859-1 />
6 <title>Ttulo da Pgina</title>
7 </head>
8
9 <body>
10 <p> Contedo da Pgina </p>
11 </body>
12

Informao:
Os documentos HTML/XHTML possuem extenso .html ou .htm, como, por exemplo: <minhapagina.html>.

Observe que a tag <!DOCTYPE> (linha 1 e linha 2) utilizada para informar ao navegador
qual especificao est sendo utilizada no documento.
Nesse sentido, a padronizao W3C define trs tipos de documentos:
a) Strict: o padro mais rgido para elaborao de documentos XHTML. Essa especifica-
o no permite a utilizao de elementos no recomendados pela W3C.
b) Transitional: este modo permite uma maior flexibilidade para o desenvolvedor, uma
vez que so aceitos todos os tipos de elementos, tanto do HTML (todas as especifica-
es) at o novo padro XHTML.
c) Frameset: neste modo permitido todas as especificaes do padro Transitional,
alm disso, foram includos elementos para construo de pginas com Frames. Este
um modelo no recomendado pela W3C.
O exemplo a seguir apresenta as principais tags XHTML para apresentao de contedo:

Ateno!
No site Lorem Ipsum <http://www.lipsum.com/>, voc encontra uma ferramenta til para gerao de pargrafos
aleatrios. Ela interessante quando precisamos testar uma pgina e no temos o contedo para ser disponibilizado.
No site voc pode gerar pargrafos, palavras, bytes ou at mesmo listas. Vale a pena visitar!

Claretiano - Centro Universitrio

 24 Desenvolvimento de Aplicaes Web com Java

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

w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
2 <html xmlns=http://www.w3.org/1999/xhtml>
3 <head>
4 <meta http-equiv=Content-Type content=text/html; charset=iso-8859-1 />
5 <title>Ttulo da Pgina</title>
6 </head>
7
8 <body>
9 <h1> Elementos de Texto </h1>
10
11 <h2> Pargrafo </h2>
12 <p>
13 Lorem Ipsum has been the industrys standard dummy text ever
14 since the 1500s.
15 </p>
16
17 <h2> Quebra de Linha </h2>
18 <p>
19 Lorem Ipsum <br/>
20 has been the industrys standard <br/>
21 dummy text ever since the 1500s.
22 </p>
23
24 <h2> Rgua Horizontal </h2>
25 <p>
26 <hr/>
27 Lorem Ipsum
28 <hr/>
29 </p>
30
31 <h2> Texto Pr-Formatado </h2>
32 <p>
33 <pre>
34 Lorem Ipsum
35 has been the industrys standard
36 dummy text ever since the 1500s.
37 </pre>
38 </p>
39 </body>
40 </html>

No site W3Schools <http://www.w3schools.com/tags/default.asp>, voc encontra a lista completa das

tags permitidas na especificao XHTML. Alm disso, outras especificaes tambm esto disponveis,
como Javascript, CSS, PHP, dentre outras.

Um conceito importante para construo de pginas Web so as hiperligaes (tambm

conhecidas como hiperlinks ou ncoras), utilizadas para criar uma estrutura de navegao entre
as pginas Web.

Tag para criar hiperlinks

A tag utilizada para criar hiperlinks <a> ... </a>
Exemplo: <a href=nomedapagina.html> Clique aqui </a>

Existem dois tipos de hiperligaes:

Interna: quando uma pgina faz referncia outra pgina dentro do prprio site. Por
exemplo, a pgina 1 (pagina1.html) contm um link para pgina 2 (pagina2.html).
 U2 - Desenvolvimento Web 25

Externa: quando a referncia feita para uma pgina fora do site atual. Por exemplo, a
pgina 1 (pagina1.html) faz uma referncia para um endereo externo <www.google.
com.br>.

1 <body>
2 <h1> Hiperlinks (ncoras) : Internas (no mesmo site)</h1>
3
4 <h3> ncora dentro da mesma pasta </h3>
5
6 <a href=pagina2.html alt=Clique para visitar a pgina 2> Pgina 2 </a>
7 <br/>
8 <a href=pagina3.html alt=Clique para visitar a pgina 3> Pgina 3 </a>
9
10 <h3> ncora em outra pasta </h3>
11
<a href=paginas/pagina2.html alt=Clique para visitar a pgina 2>
12
Pgina 2 </a>
13 <br/>
<a href=paginas/pagina3.html alt=Clique para visitar a pgina 3>
14
Pgina 3 </a>
15
16 <h1> Hiperlinks (ncoras) : Externa </h1>
17
<a href=http://www.google.com alt=Clique para visitar a pgina do
18
Google> Google </a>
19 <br/>
<a href=http://www.yahoo.com target=_blank alt=Clique para visitar a
20
pgina do Yahoo> Yahoo </a>
21 </body>

J as Listas, que so recursos utilizados para apresentao de contedo em pginas Web,

permitem a exibio do contedo de maneira organizada.
Existem, portanto, dois tipos de Lista:
a) Ordenadas: em que os elementos so precedidos por uma letra ou nmero (linhas 3
at 6). Na propriedade type (veja linha 3) voc pode configurar o tipo da lista como
sendo: "1" para nmeros arbicos, "a" para letras minsculas, "A" para letras mais-
culas, "I" para nmeros romanos maisculos e "i" para nmeros romanos minsculos.
b) No-ordenadas: na qual os elementos so precedidos por smbolos (linhas 10 a 14).
Para esse tipo de lista a propriedade type representa o smbolo desejado: "disc" para
exibir um disco, "circle" para um crculo, "square" para um quadro ou "none" para
nenhum.
Observe:

1 <body>
2 <h1> Lista Ordenada (ol) </h1>
3 <ol type=1>
4 <li> primeiro item da lista </li>
5 <li> segundo item da lista </li>
6 </ol>
7

Claretiano - Centro Universitrio

 26 Desenvolvimento de Aplicaes Web com Java

8 <h1> Lista No-Ordenada (ul) </h1>

9
10 <ul type=square>
11 <li> primeiro item da lista </li>
12 <li> segundo item da lista </li>
13 <li> terceiro item da lista </li>
14 </ul>
15 </body>

Vale salientar que as pginas Web permitem a insero de Imagens por meio da tag <img>.
Os principais formatos de imagens utilizados em pginas Web so: JPEG, GIF e PNG.

1 <body>
2 <img src=minhaimagem.jpg alt=texto_da_imagem />
3 </body>

Outro recurso a ser utilizado so as Tabelas, as quais representam os recursos empregados

para exibio de contedos em pginas Web. O principal benefcio a possibilidade de controlar
a maneira com a qual as informaes sero exibidas.
Uma Tabela formada por linhas e clulas. As linhas so definidas pela tag <tr> e as clu-
las pela tag <td>. H, ainda, a possibilidade de mesclar clulas de uma mesma linha por meio da
propriedade colspan ou clulas de uma mesma coluna pela propriedade rowspan.
Uma Aplicao prtica das Tabelas na especificao da estrutura (ou layout) da pgina
Web.
Vejamos um exemplo de site definido por meio da estrutura, na qual o cdigo HTML refe-
rente apresentado a seguir:

1 <table border=1 width=700px>

2 <tr> <td colspan=2> Cabealho da Pgina</td> </tr>
3
4 <tr>
5 <td> Menu </td>
6 <td rowspan=4> Contedo da Pgina</td>
7 </tr>
8 <tr> <td> Item 1</td> </tr>
9 <tr> <td> Item 2</td> </tr>
10 <tr> <td> Item 3</td> </tr>
11
12 <tr> <td colspan=2> Rodap da Pgina</td> </tr>
13 </table>

Embora as Tabelas possam ser utilizadas facilmente para definir a estrutura de uma pgina
Web, sua utilizao no recomendada em todos os casos.
Por exemplo, nos casos em que a pgina visualizada em dispositivos como celulares, a
visualizao se torna prejudicada, uma vez que os navegadores para esses aparelhos so limi-
tados. Para solucionar esse problema, h uma nova tendncia para especificao de estrutura
conhecida como Padres Web (Web Standards).
 U2 - Desenvolvimento Web 27

6. FOLHAS DE ESTILO EM CASCATA (CSS)

As Folhas de Estilos em Castaca (Cascading Style Sheets) ou simplesmente CSS so pode-
rosas ferramentas para formatao da aparncia do contedo XHTML. A principal vantagem da
utilizao de CSS est na separao do contedo da formatao do documento XHTML.
Antes da utilizao do CSS, tanto a formatao quanto o contedo do documento eram
definidos em um nico arquivo (.html). Com esse modelo, os programadores enfrentavam pro-
blemas na manuteno da aparncia do site.
Com os Estilos em Cascata, possvel realizar alteraes na aparncia do site de forma
rpida e simples, uma vez que toda especificao pode ser definida em um nico arquivo (.css).
A especificao dos Estilos em Cascata mantida pelo W3C e pode ser consultada no en-
dereo <http://www.w3.org/Style/CSS/>. Da mesma forma que o XHTML, a W3C disponibiliza
um validador de cdigo CSS que pode ser visitado em <http://jigsaw.w3.org/css-validator/>.
As principais caractersticas do CSS so:
Organizao das tags para formatao do documento.
Simplicidade na definio da aparncia.
Clareza no cdigo fonte do documento XHTML, uma vez que as formataes ficam se-
paradas.
Os Estilos em Cascata so definidos baseados na seguinte regra:

seletor{
propriedade1 : valor1;
propriedade 2: valor2;
....
propriedadeN: valorN;
}

Na construo de documentos XHTML os Estilos em Cascata podem ser especificados (ou

codificados) de trs maneiras: codificao interna, codificao externa e codificao Inline.

Codificao interna
Quando as Folhas de Estilos so definidas internamente, todos os seletores de formatao
so especificaes dentro do prprio documento XHTML.
Esses seletores devem ser codificadores dentro do bloco <head> </head>.
Lembre-se de que, nesse caso, necessrio definir estilos para cada documento XHTML
presente no site:

1 <html>
2 <head>
3 <style type=text/css>
4 p{
5 color: blue;
6 }
7 </style>
8 </head>
9

Claretiano - Centro Universitrio

 28 Desenvolvimento de Aplicaes Web com Java

10 <body>
11 <p> Contedo da Pgina </p>
12 </body>
13 </html>

Note que no exemplo anterior a formatao do pargrafo presente no documento foi de-
finida com a cor azul.

Codificao externa
Quando as Folhas de Estilos so definidas externamente, um arquivo separado (arquivo.
css) utilizado para especificao da formatao.
Esse a maneira mais eficiente para construo e manuteno de sites:

1 <html>
2 <head>
3
4 <link rel=stylesheet type=text/css href=estilo.css />
5
6 </head>
7
8 <body>
9 <p>
10 Este pargrafo tem fonte
11 azul definida atravs de
12 um estilo em cascata
13 </p>
14 </body>
15 </html>

Voc pode notar na linha 4, a referncia a um arquivo externo com o nome de estilo.css.
Esse arquivo contm todas as formataes da aparncia do documento.
O contedo do arquivo de formatao apresentado a seguir:

1 p { color: blue; }

Codificao Inline
Os Estilos em Cascata tambm podem ser especificados dentro do corpo do documento
XHTML. Para isso utilizada a propriedade style presente em todas as tags XHTML. Entretanto,
essa maneira deve ser adotada apenas em ltimo caso:

1 <html>
2 <head>
3 </head>
4 <body>
5 <p style=color: blue;>
6 Este pargrafo tem fonte
 U2 - Desenvolvimento Web 29

7 azul definida atravs de um estilo

8 em cascata
9 </p>
10 </body>
11 </html>

Como voc aprendeu, os Estilos em Cascata so definidos por meio de seletores, os quais
podem ser de trs tipos: seletor tipo, seletor class e seletor ID.

Seletor tipo
Esse o tipo mais simples de seletor, no qual o nome do seletor igual ao nome de uma
tag <XHTML>. Por exemplo:

1 h1 {color: red;}

Nesse caso, todas as tags <h1> presentes no documento sero formatas com a cor verme-
lha.
Quando vrios seletores utilizam a mesma formatao, eles podem ser agrupados utilizan-
do vrgulas, por exemplo:

1 h1 { color: red }
2 h2 { color: red }
3 h3 { color: red }

Tambm pode ser definido da seguinte forma:

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

Seletor class
Os seletores do tipo classe, permitem associar estilos aos elementos do documento de
maneira independente. Nesse caso, podemos escolher qual elemento ser formatado com a
especificao do seletor.
Para isso, a especificao dos seletores de classe deve ser feita utilizando um ponto e a sua
utilizao no documento realizada por meio da propriedade class (presente em todas as tags).
No exemplo a seguir, ao invs de especificar uma formatao para todos os pargrafos do
documento, podemos definir estilos individuais:

1 <html>
2 <head>
3 <style type=text/css>
4 p.formato1 { color:green; }
5 p.formato2 { color:red; }
6 </style>
7 </head>
8

Claretiano - Centro Universitrio

 30 Desenvolvimento de Aplicaes Web com Java

9 <body>
10 <p class=formato1> Exemplo de pargrafo </p>
11 <p class=formato2> Exemplo de pargrafo </p>
12 </body>
13 </html>

Seletor ID
Os seletores do tipo ID tm as mesmas caractersticas dos seletores de classe. No entanto,
existem duas diferenas bsicas:
a associao do estilo a uma determinada tag feita por meio da propriedade ID;
a especificao do seletor precedida de #.
Vejamos:

1 <html>
2 <head>
3 <style type=text/css>
4 p#formato1 { color:green; }
5 p#formato2 { color:red; }
6 </style>
7 </head>
8
9 <body>
10 <p id=formato1> Exemplo de pargrafo </p>
11 <p id=formato2> Exemplo de pargrafo </p>
12 </body>
13 </html>

Voc pode utilizar a propriedade background para especificar as caractersticas do plano

de fundo dos elementos XHTML.
Com isso, as seguintes propriedades podem ser configuradas:
a) background-color: cor do fundo.
b) background-image: imagem do fundo.
c) background-repeat: determina a maneira de repetio da imagem na janela do nave-
gador. A imagem definida pode repetir no eixo X, no eixo Y, em todos os eixos (repeat)
ou, ainda, no repetir (no-repeat).
d) background_attachment: configura o rolamento (scroll) da imagem na janela do na-
vegador. Os parmetros possveis so scroll, que habilita o rolamento, ou fixed, que
torna a imagem esttica.
e) background-position: define a posio (local) em que a imagem dever ser posiciona-
da. Essa posio definida por meio das coordenadas X e Y.
O exemplo a seguir demonstra a utilizao da propriedade background-color. No exem-
plo, voc pode notar que a cor do fundo pode ser definida independentemente para cada tag
XHTML.
 U2 - Desenvolvimento Web 31

1 <html>
2 <head>
3 <style type=text/css>
4 body{background-color: #CCCCCC; }
5 h1{
6 background-color:#000000;
7 color:#FFFFFF;
8 }
9 p{ background-color:#FFFF99; }
10 </style>
11 </head>
12
13 <body>
14 <h1> Lorem Ipsum </h1>
15 <p>
16 Lorem Ipsum is simply dummy text of the
17 printing and typesetting industry.
18 Lorem Ipsum has been the industrys standard
19 dummy text ever since the 1500s.
20 </p>
21 </body>
22 </html>

No exemplo a seguir uma imagem utilizada como plano de fundo, alm disso, a
propriedade repeat-y foi utilizada para repetir a imagem no eixo Y:

Informao
Para o exemplo funcionar adequadamente, voc deve escolher um arquivo para o plano de fundo. O nome desse
arquivo deve ser imagem.jpg e ele precisa ser colocado no mesmo diretrio do arquivo XHTML.

1 <html>
2 <head>
3 <style type=text/css>
4 body{
5 background:#CCCCCC;
6 background-image:url(image.jpg);
7 background-repeat:repeat-y;
8 }
9
10 </style>
11 </head>
12
13 <body>
14 <h1> Lorem Ipsum </h1>
15 <p>
16 Lorem Ipsum is simply dummy
17 text of the printing and typesetting industry.
18 </p>
19 </body>
20 </html>

Claretiano - Centro Universitrio

 32 Desenvolvimento de Aplicaes Web com Java

Para definir os aspectos relacionados formatao dos tipos de letra de um documento

XHTML por meio das Folhas de Estilo em Cascata, voc pode utilizar as seguintes propriedades:
a) font-family: para definir qual o tipo de fonte utilizado na formatao. Exemplo: font-
-family: Arial;
b) font-size: para especificar o tamanho da fonte com base na unidade de medida esco-
lhida. Por exemplo:
Tamanho em pixels: font-size: 12px;
Tamanho em porcentagem: font-size: 150%;
Tamanho em centmetros: font-size: 2cm.
c) font-style: para determinar o estilo da letra. Exemplo: font-style: italic;
d) font-weight: utilizado para definir a espessura da letra. Por exemplo, para definir a
fonte em negrito, temos: font-weight: bold.
Para formatao do texto, as Folhas de Estilo em Cascata possuem um conjunto de pro-
priedades, que so:
a) color: para definir a cor da letra. Por exemplo, definio da cor do texto como azul:
color: blue;
b) letter-spacing: determina o espao entre os caracteres. Por exemplo, definio da dis-
tncia entre os caracteres com 1 (um) centmetro: letter-spacing: 1cm;
c) word-spacing: especifica o espao entre as palavras do texto. Por exemplo, determi-
nao da distncia de cinco pixels entre as palavras do texto: word-spacing: 1cm;
d) text-align: utilizado para definir o alinhamento do texto, que pode ser left (esquer-
da), right (direita), center (centralizado) ou justify (justificado). Exemplo: formatao
do texto justificado: text-align: justify;
As Web de Estilos em Cascata permitem a determinao da distncia entre os elementos
presentes no documento XHTML. Essa especificao realizada por meio das margens e, para
isso, quatro propriedades podem ser configuradas:
a) margin-lef: margem esquerda;
b) margin-right: margem direita;
c) margin-top: margem superior;
d) margin-bottom: margem inferior.
O exemplo a seguir demonstra a utilizao das margens na formatao dos documentos.
Voc pode notar facilmente a distncia das margens no pargrafo interno (as formataes so
definidas no seletor p.meuparagrafo).

1 <html>
2 <head>
3 <style type=text/css>
4 p{ text-align:justify; }
5 p.meuparagrafo{
6 background-color:#CCCCCC;
7 margin-left: 100px;
8 margin-right: 100px;
9 margin-top: 50px;
10 margin-bottom: 50px;
11 }
12 </style>
13
 U2 - Desenvolvimento Web 33

14 </head>
15 <body>
16 <p>
17 Lorem Ipsum has been the industrys standard dummy text
18 ever since the 1500s, when an unknown printer took a galley
19 of type and scrambled it to make a type specimen book.
20 </p>
21
22 <p class=meuparagrafo>
23 Lorem Ipsum has been the industrys standard dummy text ever
24 since the 1500s, when an unknown printer took a galley of type
25 and scrambled it to make a type specimen book.
26 </p>
27
28 <p>
29 Lorem Ipsum has been the industrys standard dummy text
30 ever since the 1500s, when an unknown printer took a galley
31 of type and scrambled it to make a type specimen book.
32 </p>
33 </body>
34 </html>

Outra propriedade interessante que pode ser definida por meio dos Estilos em Cascata so
as bordas. Elas so utilizadas para definir a aparncia do contorno dos elementos.
Para cada elemento, as quatro bordas podem ser definidas em:
a) border-left: borda esquerda;
a) border-right: borda direita;
b) border-top: borda superior;
c) border-bottom: borda inferior.
Alm disso, para cada borda trs propriedades podem ser especificadas:
color: para definir a cor da borda. Por exemplo, especificar a borda superior de um
elemento como sendo da cor azul: boder-top-color: blue;
style: para especificar o estilo da linha da borda.
width: utilizado para determinar a espessura da borda.
O exemplo a seguir demonstra as principais caractersticas relativas formatao de
bordas:

1 <html>
2 <head>
3 <style type=text/css>
4 p{
5 margin: 100px;
6 border-width: thin;
7
8 border-left-color:#FF0000;
9 border-left-style: solid;
10

Claretiano - Centro Universitrio

 34 Desenvolvimento de Aplicaes Web com Java

11 border-right-color:#FF0000;
12 border-right-style: solid;
13
14 border-top-color:#0000FF;
15 border-top-style:dashed;
16
17 border-bottom-color:#0000FF;
18 border-bottom-style:dashed;
19 }
20 </style>
21
22
23 </head>
24 <body>
25 <p>
26 Lorem Ipsum has been the industrys standard dummy text
27 ever since the 1500s, when an unknown printer took a galley
28 of type and scrambled it to make a type specimen book.
29 </p>
30 </body>
31 </html>

Os Estilos em Cascata tambm permitem a definio de uma distncia entre a borda do

elemento e seu contedo. Essa especificao realizada por meio dos espaamentos, tambm
conhecidos como padding, e que podem ser definidos em funo dos quatro limites do elemen-
to:
a) padding-left: espaamento esquerdo;
b) padding-right: espaamento direito;
c) padding-top: espaamento superior;
d) padding-bottom: espaamento inferior.
O exemplo a seguir demonstra a utilizao dos espaamentos, no qual possvel notar
uma distncia significativa entre a borda do elemento (em azul) e o contedo do pargrafo:

1 <html>
2 <head>
3
4 <style type=text/css>
5 p{
6 padding-bottom: 50px;
7 padding-left: 30px;
8 padding-right: 30px;
9 padding-top: 50px;

10

11 border-width: thin;
12 border-color:#0000FF;
13 border-style:ridge;
14
15 background-color:#CCCCCC;
 U2 - Desenvolvimento Web 35

16 }
17 body{ margin: 50px 50px 50px 50px; }
18 </style>
19 </head>
20
21 <body>
22 <p class=estilo1>
23 Lorem Ipsum has been the industrys standard dummy text
24 ever since the 1500s, when an unknown printer took a galley
25 of type and scrambled it to make a type specimen book.
26 </p>
27 </body>
28 </html>

A dimenso dos elementos que compem um documento XHTML pode ser controlada
pelas seguintes propriedades:
height: altura;
width: largura;
line-height: distncia entre as linhas de um texto.
No exemplo a seguir voc poder observar a utilizao das propriedades para controle de
dimenso dos elementos:

1 <html>
2 <head>
3 <style type=text/css>
4 p.duplo{
5 line-height: 200%;
6 }
7 img.pequeno {
8 height: 32px;
9 width: 32px;
10 }
11 img.normal {
12 height: auto;
13 width: auto;
14 }
15 img.grande {
16 height: 128px;
17 width: 128px;
18 }
19 </style>
20 </head>
21 <body>
22 <p class=duplo>
23 Lorem Ipsum has been the industrys standard
24 dummy text ever since the 1500s, when an unknown
25 printer took a galley of type and scrambled it to
26 make a type specimen book. Lorem Ipsum has been the
27 industrys standard dummy text ever since the 1500s,

Claretiano - Centro Universitrio

 36 Desenvolvimento de Aplicaes Web com Java

28 when an unknown printer took a galley of type and scrambled

29 it to make a type specimen book.
30 </p>
31 <img class=pequeno src=imagem.jpg />
32 <img class=normal src=imagem.jpg/>
33 <img class=grande src=imagem.jpg />
34 </body>
35 </html>

No exemplo apresentado anteriormente, inicialmente a distncia entre as linhas de um

pargrafo foi definida como duplo (200%). Em seguida, as propriedades de altura e largura fo-
ram utilizadas para exibir uma imagem em diferentes tamanhos.
Os Estilos em Cascata permitem a associao de efeitos especiais aos elementos XHTML.
Esses efeitos so conhecidos como pseudo-classes.
Dentre os efeitos disponveis com as pseudo-classes o mais utilizado a formatao dos
hiperlinks dos documentos (outros efeitos podem ser encontrados no site da W3C).
Para um hiperlink podemos associar quatro tipos de caractersticas:
a) a:link: determina a aparncia do hiperlink ainda no visitado;
b) a:visited: especifica a aparncia do hiperlink visitado;
c) a:hover: define a aparncia do hiperlink quando o ponteiro do mouse est sobre ele;
d) a:active: determina a aparncia quando o hiperlink selecionado (clicado).
No exemplo a seguir voc poder notar vrios tipos de efeitos que podem ser utilizados
em hiperlinks:

1 <html>
2 <head>
3 <style type=text/css>
4 a.estilo1:link {color: #ff0000}
5 a.estilo1:visited {color: #0000ff}
6 a.estilo1:hover {color: #ffcc00}
7
8 a.estilo2:link {color: #ff0000}
9 a.estilo2:visited {color: #0000ff}
10 a.estilo2:hover {font-size: 150%}
11
12 a.estilo3:link {color: #ff0000}
13 a.estilo3:visited {color: #0000ff}
14 a.estilo3:hover {background: #66ff66}
15
16 a.estilo4:link {color: #ff0000}
17 a.estilo4:visited {color: #0000ff}
18 a.estilo4:hover {font-family: fixedsys}
19
20 a.estilo5:link {color: #ff0000; text-decoration: none}
21 a.estilo5:visited {color: #0000ff; text-decoration: none}
22 a.estilo5:hover {text-decoration: underline}
23 </style>
24 </head>
 U2 - Desenvolvimento Web 37

25
26 <body>
27 <p>
28 Passe com o ponteiro do mouse sobre os hiperlinks e
29 veja como eles reagem de maneira diferente.
30 </p>
31 <p>
32 <a class=estilo1 href=#>Esta muda de cor</a><br/>
33 <a class=estilo2 href=#>Esta muda o tamanho das letras</a><br/>
34 <a class=estilo3 href=#>Esta muda a cor de fundo</a><br/>
35 <a class=estilo4 href=#>Esta muda o tipo de letra</a><br/>
36 <a class=estilo5 href=#>Esta muda a decorao do texto</a>
37 </p>
38 </body>
39 </html>

7. FORMULRIOS
Os formulrios so conjuntos de componentes que permitem a interao entre os usu-
rios e as Aplicaes Web. Por meio dos formulrios, os usurios podem enviar informaes para
as Aplicaes e tambm receber respostas.
Os formulrios so formados por um conjunto de controles, como campos de texto, bo-
tes de opo, caixas de seleo, com os quais os usurios podem interagir com sua Aplicao.
Para voc utilizar um formulrio na sua Aplicao Web necessrio utilizar a tag <form>,
que possui a seguinte sintaxe:

<form action= method=>

</form>

Note que a propriedade action define o endereo para o qual as informaes preenchidas
no formulrio sero enviadas. Se voc estiver desenvolvendo uma Aplicao com JavaServer
Pages a ao do formulrio ser uma pgina JSP (por exemplo cadastro.jsp).
Voc tambm pode definir a maneira que o navegador dever submeter os dados do for-
mulrio. Para isso, voc deve utilizar a propriedade method.
H duas maneiras para o envio de dados: GET e POST.

GET
No caso de dados do formulrio enviados por GET, sero encaminhados para o destino
(definido na propriedade action) por meio da URL. Voc, provavelmente, j deve ter notado que
determinados endereos na Internet possuem o seguinte formato: http://www.minhapagina.
com.br/index.html?usuario=joao&idade=22.
Observe que a URL demonstra que informaes foram enviadas para a pgina ndex.html
por meio do mtodo GET. Observe que o nome da pgina seguido por um ponto de interro-
gao.

Claretiano - Centro Universitrio

 38 Desenvolvimento de Aplicaes Web com Java

Os dados so enviados sempre seguindo o formato <nomedocampo>=<valor> e separa-

dos pelo smbolo &, em que <campo> representa o nome do controle do formulrio (por exem-
plo, uma caixa de texto) e <valor> a informao atribuda ao controle.
Se um nome de campo ou valor tiver um caractere especial, como um espao, um & ou al-
gum outro, esses caracteres so trocados por meios das regras de codificao de URL. A codifica-
o URL substitui espaos por um sinal de adio (+) e outros caracteres especiais por um valor
de espace, que comea com um smbolo de porcentagem seguido de dois dgitos hexadecimais.
Voc pode enviar as informaes de um formulrio por intermdio de uma mensa-
gem de e-mail. Para isso, basta substituir o endereo do campo action (linha 1) pelo termo:
mailto:usuario@dominio.com:

<form action=mailto:usuario@dominio.com?subject=Assunto&body=mensagem
1
method=get>
2 <h1> contato </h1>
3 Nome: <br/>
4 <input name=txtNome type=text size=60 /> <br/>
5
6 Telefone:<br/>
7 <input name=txtTelefone type=text />
8
9 <input name=btnEnviar type=submit value=enviar />
10 </form>

POST
Outra maneira de enviar os dados do formulrio o mtodo POST. Nesse caso, as informa-
es so codificadas no corpo da solicitao HTTP que o navegador envia para o Servidor Web.
O usurio no consegue visualizar as informaes que esto sendo transmitidas.
A tabela a seguir demonstra os principais controles que podem ser utilizados para criao
de formulrios:

CONTROLE EXEMPLO
Label <label> Nome: </label>
Text Input Boxes <input name=txtNome type=text size=60 />
Password Input Boxes <input name=txtSenha type=password size=8 />
<input name=grpSabor type=radio checked=checked />
Radio Buttons chocolate
<input name=grpSabor type=radio /> morango
<input name=grpSabor type=checkbox checked=checked />
Check Boxes chocolate
<input name=grpSabor type=checkbox /> morango
<select name=lstSabor>
<option> morango </option>
<option selected=selected>
List Boxes
chocolate
</option>
</select>
<textarea name=txtMensagem cols=30 rows=10>
Large Text Areas
</textarea>
Button <input name=btnComprar type=button value=Comprar />
 U2 - Desenvolvimento Web 39

CONTROLE EXEMPLO
Submit Button <input name=btnEnviar type=submit value=Enviar />
Reset Button <input name=btnLimpar type=reset value=Limpar />

8. QUESTES AUTOAVALIATIVAS
Sugerimos que voc faa uma pausa para uma auto-avaliao sobre os conceitos estuda-
dos nesta unidade. Tente responder para si mesmo as seguintes questes:
1) Quais as principais diferenas entre HTML e XHTML?

2) Para que so utilizados as Folhas de Estilos em Cascata?

3) Como possvel separar o contedo das pginas Web e quais os comandos utilizados para formatao?

9. CONSIDERAES
Nesta unidade aprendemos os principais conceitos para publicao de contedo na Inter-
net. Estudamos a linguagem de marcao HTML e sua evoluo, o XHTML. Alm disso, vimos
como apresentar dados na Internet utilizando as Folhas de Estilo em Cascata (CSS).
Finalmente, construmos formulrios para interao entre os usurios e as Aplicaes
Web.
Sabendo isso, vamos estudar, na Unidade 3, a plataforma Java no desenvolvimento de
Aplicaes Web e as formas de se construir Aplicaes Web do tipo Servlets.
At a prxima!

10. E-REFERNCIAS
GOOGLE. Homepage. Disponvel em: <www.google.com.br>. Acesso em: 6 dez. 2013.
LOREM IPSUM. Homepage. Disponvel em: <http://www.lipsum.com/>. Acesso em: 6 dez. 2013.
MAUJOR. Homepage. Disponvel em: <http://www.maujor.com/>. Acesso em: 6 dez. 2013.
TABLELESS. Homepage. Disponvel em: <http://www.tableless.com.br/>. Acesso em: 6 dez. 2013.
W3C. CSS validation service. Disponvel em: <http://jigsaw.w3.org/css-validator/>. Acesso em: 6 dez. 2013.
W3C. Homepage. Disponvel em: <http://validator.w3.org/>. Acesso em: 6 dez. 2013.
W3SCHOOLS. Homepage. Disponvel em: <http://www.w3schools.com/tags/default.asp>. Acesso em: 6 dez. 2013.
WEB STANDARDS. Homepage. Disponvel em: <http://www.webstandards.org/>. Acesso em: 6 dez. 2013.

11. REFERNCIAS BIBLIOGRFICAS

AMARA, G. L. Cascading style sheets: guia de consulta rpida. 2. ed. So Paulo: Novatec, 2006.
NIEDERAUER, J. XHTML guia de consulta rpida. So Paulo: Novatec, 2002.
SILVA, M. S. Construindo sites com CSS e (X)HTML. So Paulo: Novatec, 2007.

Claretiano - Centro Universitrio

Claretiano - Centro Universitrio