Apostila do Curso

Prévia do material em texto

UNIVERSIDADE FEDERAL DE JUIZ DE FORA 
INSTITUTO DE CIÊNCIAS EXATAS 
DEPARTAMENTO DE CIÊNCIA DA COMPUTAÇÃO 
 
LICENCIATURA EM COMPUTAÇÃO 
 
 
 
 
 
 
 
 Programação para Web I 
 
 
 
 
 
 
 
 
 
Elaborado por: 
Daves Marcio Silva Martins 
Eduardo Barrére 
 
 
 
 
 Maio de 2012 
Sumário 
 
2 
1. Introdução ............................................................................................................................................ 4 
1.1. Funcionamento de uma requisição web........................................................................................ 5 
2. Introdução ao HTML ........................................................................................................................... 7 
2.1. Características Gerais do HTML ..................................................................................................... 7 
2.2. Nomes dos Arquivos ..................................................................................................................... 9 
2.3. Como se cria uma página web? ..................................................................................................... 9 
2.4. Estrutura de um documento HTML ............................................................................................. 10 
3. Elementos Básicos............................................................................................................................ 13 
3.1. Cabeçalhos.................................................................................................................................. 13 
3.2. Separadores................................................................................................................................ 14 
3.3. Formatação de Textos................................................................................................................. 15 
3.4. Caracteres especiais.................................................................................................................... 17 
3.5. Cores e fontes............................................................................................................................. 18 
3.6. Imagens ...................................................................................................................................... 20 
3.7. Exercícios.................................................................................................................................... 22 
3.8. Projeto........................................................................................................................................ 23 
4. Elementos de Ligação ...................................................................................................................... 24 
4.1. Âncoras (links) ............................................................................................................................ 24 
4.2. Exercícios.................................................................................................................................... 26 
4.3. Projeto........................................................................................................................................ 26 
5. Elementos de Lista............................................................................................................................ 27 
5.1. Lista com marcadores ................................................................................................................. 27 
5.2. Lista numerada ........................................................................................................................... 28 
5.3. Lista sem marcadores ................................................................................................................. 28 
5.4. Exercícios.................................................................................................................................... 29 
5.5. Projeto........................................................................................................................................ 29 
6. Tabelas............................................................................................................................................... 30 
6.1. Exercícios.................................................................................................................................... 33 
6.2. Projeto........................................................................................................................................ 33 
7. Formulários ........................................................................................................................................ 34 
7.1. INPUT <input>............................................................................................................................. 37 
7.2. TEXTAREA <textarea>...</textarea> ............................................................................................ 38 
7.3. SELECT <select>...</select> ......................................................................................................... 38 
7.4. Exemplos .................................................................................................................................... 39 
7.5. Exemplo Completo...................................................................................................................... 41 
7.6. Exercícios.................................................................................................................................... 44 
7.7. Projeto........................................................................................................................................ 44 
8. Folha de Estilo (CSS) ....................................................................................................................... 46 
8.1. O que o CSS pode fazer? ............................................................................................................. 46 
8.2. Adicionando Estilo a Sua Página .................................................................................................. 47 
8.3. Regras, Declarações e Seletores .................................................................................................. 49 
8.4. CSS e Fontes................................................................................................................................ 50 
8.5. CSS e Cores ................................................................................................................................. 52 
8.6. CSS e Layers ................................................................................................................................ 53 
8.7. Exemplo de CSS........................................................................................................................... 59 
8.8. Outro Exemplo de CSS................................................................................................................. 61 
Referências:................................................................................................................................................. 63 
 
EADDCC023 - Programação para Web I 
4 
1. Introdução 
 
 Atualmente a Internet tornou-se uma ferramenta mundial, auxiliando as pessoas 
em diversas atividades. Com a Internet podemos nos comunicar com as pessoas, 
localizar informações sobre educação, política, esporte, economia, enfim qualquer tema 
que precisar. Pela Internet também podemos fazer amigos, divulgar trabalhos, fazer 
conferências, bater papo, expressar ideias, comprar, vender e divulgar negócios. Se 
formos descrever Internet, a melhor formaé definirmos como Comunicação. 
 Muitas pessoas confundem a internet como sendo apenas a parte da navegação 
em sites. Esse é apenas um dos serviços oferecidos pela internet. Conhecido como 
www, ou World Wide Web (ou apenas Web), a Internet e a Web são duas coisas 
separadas, embora relacionadas. 
A Web é apenas uma das maneiras pelas quais a informação pode ser 
disseminada pela Internet. A Internet, não a Web, é utilizada ainda para e-mail, 
Newsgroups, Mensagens Instantâneas, FTP, entre outras funcionalidades. Portanto a 
Web é apenas uma parte da Internet. 
A internet é uma gigantesca rede de redes que conecta milhões de 
computadores no mundo inteiro, formando uma rede em que qualquer computador 
pode se comunicar com qualquer outro computador, desde que, ambos estejam 
conectados à Internet e configurados para tal ação. 
A Web é uma maneira de acessar informação por meio da Internet. É um modelo 
de compartilhamento de informações construído sobre a Internet. A Web usa o 
protocolo HTTP, que é apenas uma das linguagens utilizadas na Internet, para 
transmitir informações, e os browsers, como o Internet Explorer, Chrome, entre outros, 
para acessar documentos chamados páginas (home pages), que estão ligados uns aos 
outros por meio de âncoras (hyperlinks). Documentos Web também podem conter 
gráficos, sons, textos e vídeos. 
 
 
EADDCC023 - Programação para Web I 
5 
1.1. Funcionamento de uma requisição web 
 
O que acontece quando digitamos um endereço no nosso navegador? 
 
FIGURA 1 – Endereço Web 
De forma simplificada e para facilitar o entendimento, quando digitamos um 
endereço “www.enderecosite.com.br”, ele representa a identificação (nome relacionado 
a um endereço IP) de uma máquina em algum lugar do mundo. A primeira tarefa é 
identificar onde está essa maquina. 
Ao digitarmos esse endereço no browser, o mesmo se encarrega de iniciar um 
trabalho para que esse nome possa ser traduzido (resolvido) em um número IP. Os 
responsáveis por essa tradução são os servidores DNS (Domain Name Server). Na 
disciplina de Fundamentos de Redes de Computadores temos uma descrição de como 
essa tradução acontece. 
Uma vez feita essa tradução, sabemos onde encontrar a máquina que 
desejamos nos comunicar. No caso da web, essas máquinas são conhecidas como 
servidores Web, que tem como função, receber uma requisição ou uma solicitação e 
devolver um arquivo solicitado. A Figura 2 ilustra o funcionamento de um servidor Web. 
 
FIGURA2 – Servidor web 
EADDCC023 - Programação para Web I 
6 
Portanto, toda vez que acessamos um site a partir de nosso Navegador web 
(Browser), a pagina que você visualiza é o resultado de um arquivo, imagens, sons 
vindos do servidor até a sua máquina. 
Então, você deve se perguntar. Como é feito? Como elas se propagam? 
Todas estas páginas possuem um código fonte elaborado numa linguagem 
chamada HTML (Linguagem de Marcação de Hipertexto ou Hyper Text Markup 
Language). Por isso é necessário que tenhamos um conhecimento mínimo sobre 
HTML. A Figura 3 ilustra uma solicitação html. 
 
FIGURA 3 – Solicitação de uma página html 
 
EADDCC023 - Programação para Web I 
7 
2. Introdução ao HTML 
 
Nesta primeira parte vamos falar sobre a linguagem HTML. É importante 
aprendermos o HTML para trabalharmos futuramente com outras linguagens para web. 
A linguagem HTML é utilizada para estabelecer regras de formatação e 
conteúdos dos arquivos manipulados pelos navegadores. Seu conteúdo é armazenado 
num arquivo texto, no formato ASCII. 
Apesar de ser coisa do passado por vários programadores, sem a linguagem 
HTML não é possível montar uma página web. Atualmente, a linguagem HTML é 
normalmente utilizada em conjunto com alguma outra linguagem (Java Script, PHP, 
DHTML - Dynamic HTML, etc.) e seu futuro está na nova versão, HTML5, que 
contempla diversos recursos dinâmicos à linguagem. 
2.1. Características Gerais do HTML 
As principais características da linguagem HTML são: 
 É uma linguagem de marcação (utiliza rótulos – tags). 
 Documentos HTML são arquivos escritos em ASCII - texto. 
 Podem ser criados em qualquer editor de texto ( vi, emacs, edit, notepad) 
 Existem editores específicos para várias plataformas 
 Existem conversores de vários formatos, por exemplo, .doc para .html 
 A unidade mínima de informação é a “página” 
 HTML não faz diferença entre maiúsculas e minúsculas 
 Utilizar as extensões ".html" ou ".htm" para que os navegadores possam 
reconhecer o seu arquivo como sendo html. 
 Procure usar nomes significativos, que remetam ao conteúdo do arquivo. 
 Não utilizem caracteres especiais, como: ~,’,´,`,^, ç, entre outros. Pois 
alguns servidores e navegadores terão dificuldade em interpretá-los! 
A linguagem de marcação HTML é derivada da linguagem SGML (Standard 
Generalized Markup Language ou Linguagem Padrão de Marcações Genéricas - ISO 
8879, publicado em 1986). A SGML define as regras gerais para uma linguagem de 
EADDCC023 - Programação para Web I 
8 
marcação e as linguagens oriundas deste padrão especificam as regras de marcadas 
para uma determinada aplicação, como é o caso de HTML para a exibição de 
informações na web. Outra linguagem de marcação muito conhecida é a XML. 
Um arquivo HTML pode ser gerado através de qualquer editor de texto, desde 
que se salve o documento como formato HTML (.html ou .htm). Vários editores, como o 
Word, possuem recurso para salvar/exportar um documento ou página em HTML. Já 
para exibir um documento HTML é necessário ter instalado um navegador web 
(browser) em seu computador. Os navegadores mais comuns são o Internet Explorer, o 
Firefox e o Chrome. 
Quando pensamos no conteúdo de um arquivo HTML, é necessário 
entendermos o conceito de tags, etiquetas ou rótulos, que são as marcações padrões 
de um documento. Essas tags aparecem sempre entre os sinais de “menor que” (<) e 
“maior que” (>). Geralmente são utilizados em pares, sendo que a tag de finalização de 
um comando é precedida de uma barra (/). Exemplo: 
 <html> ............................................. </html> 
A palavra escrita na tag serve para o navegador identificar o tipo de informação 
que está colocada entre as tags de início e fim. Repare que a diferença entre a tag de 
início e fim é o uso da barra(/). Tenha especial atenção: 
 NUNCA esquecer um sinal de “<” ou de “>”, no início ou no fim da tag; 
 Não usar espaços no tag (no interior dos sinais “<” e “>”). Exemplos: 
 </ html> ERRADO!!! 
 </ht m l> NUNCA!!!! 
São elementos de um projeto web: 
 Página Web - Arquivo de texto formatado com HTML. 
 Home Page - Página pessoal ou página inicial do site. 
 Web Site - Sítio, lugar; conjunto de páginas HTML que contém informações 
relacionadas. Também podem fazer parte de um Web Site arquivos de texto, 
programas, imagens, etc. 
 
EADDCC023 - Programação para Web I 
9 
2.2. Nomes dos Arquivos 
As extensões “.html" ou ".htm" são importantes quando o servidor Web 
está identificando o arquivo. Usaremos a extensão ".html" como convenção para os 
nossos trabalhos. Já os nomes dos arquivos devem seguir as seguintes regras: 
 Os nomes devem iniciar com uma letra obrigatoriamente; 
 Pode-se utilizar caracteres como "-" e "_"; 
 Não utilize acentuação nos nomes, pois em alguns servidores web esses 
caracteres acentuados (especiais) são interpretados de maneiras 
diversas; 
 Evite utilizar o caracter espaço “ “ no nome do arquivo, pois também 
podemos ter problemas com ele; 
 Procure usar nomes significativos, que remetam ao conteúdo do arquivo. 
 
2.3. Como se cria uma página web? 
Uma página Web é composta de textos e comandos especiais(tags) de HTML. 
Essa linguagem é bastante simples e tem como finalidade básica formatar o texto 
exibido e criar ligações entre as páginas da Web, criando assim documentos com o 
conceito de hipertexto. 
Para que o conteúdo de um documento HTML possa ser formatado e exibido, o 
navegador solicita ao servidor web e posteriormente lê o conteúdo do arquivo, 
interpreta os comandos e exibe sua página. 
O código pode ser escrito usando o mais simples editor de texto, como o bloco 
de notas do Windows. Porém a forma mais prática e produtiva é utilizar um editor 
HTML. Há vários no mercado como: HotDog Professional (www.sausage.com), o 
SiteAid (baixado do site www.siteaid.com), o FrontPage da Microsoft, NotePad ++ 
(http://notepad-plus-plus.org/) etc. 
 
PRATIQUE: Procure um editor que lhe proporcione produtividade, 
quanto mais funções ele tiver mais rápido será o seu 
desenvolvimento. 
EADDCC023 - Programação para Web I 
10 
2.4. Estrutura de um documento HTML 
Um documento HTML é formado por tags conforme exemplo abaixo: 
Exemplo: 
<BODY> 
.... corpo do documento ... 
</BODY> 
(define o início e o fim do corpo do documento HTML) 
Algumas tags admitem de atributos (parâmetros) que alteram a maneira como o 
navegador deve interpretá-la e normalmente são colocados na tag inicializadora. 
Exemplo: <BODY bgcolor=”red”> .... corpo do documento </BODY> (define que 
o documento HTML terá como fundo a cor vermelha ) 
Todo Documento html deve possuir as seguintes tags ilustradas na Figura 4: 
 
FIGURA 4 – Estrutura de um documento HTML 
Vamos criar nosso primeiro exemplo de código HTML. Nesta apostila iremos 
adotar o editor BlueFish, um editor Open-source que possui versão para linux e 
Windows (http://bluefish.openoffice.nl/index.html). 
EADDCC023 - Programação para Web I 
11 
 
FIGURA 5 – BlueFish Editor Html 
O código acima será interpretado pelo Internet Explorer (navegador utilizado 
neste exemplo) conforme ilustra a Figura 6. Para visualizar esse exemplo em outro 
navegador, basta digitar na barra de endereço, o local onde se encontra o arquivo. 
 
 
FIGURA 6 – Resultado da Página Html 
Algumas tags são utilizadas para definir os elementos básicos de um documento 
HTML. São elas: HTML, HEAD e BODY. Veja o exemplo a seguir: 
EADDCC023 - Programação para Web I 
12 
<HTML> Início do documento HTML 
<HEAD> 
<TITLE>Tópicos I </TITLE> 
</HEAD> 
Cabeçalho: nesta parte do documento são 
armazenadas informações como título, versão do 
editor HTML utilizado, scripts em Javascript,entre 
outras informações. 
<BODY> Início do Corpo do Documento 
<p>Hello World!</p> Parágrafo a ser exibido. 
</Body> Final do Corpo do Documento 
</HtMl> Fim do documento HTML 
 
O resultado visual deste documento segue abaixo, mas preste maior atenção 
aos itens em vermelho. 
<HTML> 
<HEAD> 
<TITLE>Tópicos I </TITLE> 
</HEAD> 
<BODY> 
<p>Hello World!</p> 
</BODY> 
 
</HTML> 
 
 
 
 
 
 
 
 
 
 
 
EADDCC023 - Programação para Web I 
13 
3. Elementos Básicos 
 
A grande maioria das tags é utilizada dentro do corpo do documento, delimitado 
pela tag BODY. Algumas destas tags são apresentadas aqui e outras iremos aprender 
durante a nossa disciplina. 
3.1. Cabeçalhos 
Utilizamos os cabeçalhos para títulos e subtítulos de um texto na página HTML. 
A linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto 
menor o nível, maior será o destaque. Em geral, os cabeçalhos são exibidos em letras 
maiores e em negrito, e o HTML adiciona uma linha em branca antes e depois dos 
cabeçalhos. A Figura 7 ilustra o uso das Tag de cabeçalho. 
 
FIGURA 7 – Exemplo do uso das tag de cabeçalho 
 
 
 
EADDCC023 - Programação para Web I 
14 
A tabela a seguir apresenta o código do arquivo HTML apresentado na Figura 7 
e as respectivas observações. 
Arquivo Fonte Observações 
<HTML> 
<HEAD> 
<TITLE>Tópicos I</TITLE> 
</HEAD> 
<BODY> 
 
<H1>Cabeçalho de nível 1</H1> A fonte utilizada é maior e o alinhamento 
utilizado é o default, à esquerda. 
<H2 align="center">Cabeçalho de nível 2</H2> Neste exemplo utilizamos o alinhamento 
Centralizado. 
<H3 align="right">Cabeçalho de nível 3</H3> Alinhamento à direita. 
<H4 align="justify">Cabeçalho de nível 4</H4> Alinhamento à esquerda. 
<H5>Cabeçalho de nível 5</H5> Alinhamento default. 
<H6>Cabeçalho de nível 6</H6> Alinhamento default. 
</BODY> 
</HTML> 
 
 
3.2. Separadores 
Para separar o texto entre uma linha e outra podemos utilizar as tags <P> e 
<BR>, mas elas têm atuações um pouco distintas. Vejamos o exemplo: 
 
FIGURA 8 – Exemplo do uso das tag Separadores <p> e <br /> 
EADDCC023 - Programação para Web I 
15 
Observe a diferença entre as distâncias entre os parágrafos (em vermelho) e a 
distância quando se utiliza a tag <BR> (em azul). 
Arquivo Fonte Observações 
<HTML> 
<HEAD> 
<TITLE>Tópicos I</TITLE> 
</HEAD> 
<BODY> 
 
<p>Primeiro Parágrafo.</p> Alinhamento default. 
<p align="right">Segundo Parágrafo, alinhado &agrave; 
Direita.</p> 
Alinhamento à Direita. 
<p align="center">Terceiro parágrafo, centralizado e 
<br> com quebra de linha.</p> 
Alinhamento centralizado e uso 
do separador <BR>. Observe que 
após o BR o alinhamento do 
parágrafo continua valendo. 
<p>Quarto Parágrafo. </p> Alinhamento default, à esquerda. 
</BODY> 
</HTML> 
 
 
 
OBSERVAÇÃO: 
Se você reparar bem, verá que para exibir caracteres acentuados, no caso do exemplo 
anterior “à”, é necessário utilizar uma codificação especial para tal (&agrave;). Mais 
adiante iremos aprender o que isso significa. Nossa sorte é que os editores HTML 
fazem de forma automática a substituição de um caracter acentuado para o seu código 
correspondente!!! 
 
 
3.3. Formatação de Textos 
Conforme a evolução da linguagem HTML, novas tags são utilizadas para 
representar a formatação de partes de um documento. Aqui iremos citar as principais 
tags e suas atuações. 
Dentro da tag BODY, você escreve todo o texto da sua página. E é neste texto 
que vamos nos concentrar agora. As principais tags para a formatação de texto são: 
 <P>Cria um parágrafo</P> 
 <CENTER>Centraliza o texto</CENTER> 
 <B>Textos em negrito</B> 
EADDCC023 - Programação para Web I 
16 
 <I>Textos em itálico</I> 
 <U>Textos sublinhados</U> 
 <TT>Textos no estilo da máquina de escrever</TT> 
 <SUB>Texto subscrito</SUB> 
 <SUP>Texto sobrescrito</SUP> 
 <BR />Quebra de linha 
 <!--Esta tag foi feita para comentários e é ignorada pelo browser --> 
 <DD>Esta tag é usada para criar parágrafo (o espaço para a primeira linha). 
Se você quiser um parágrafo maior ou menor é necessário o uso de espaços 
através do caractere &nbsp; 
 
 
Não é difícil, com o tempo você irá memorizar o nome de cada tag!! 
 
 
 
 <HTML> 
<HEAD> 
<TITLE>Tópicos I</TITLE> 
</HEAD> 
<BODY> 
1 <CENTER>Centraliza o 
texto</CENTER> 
2 <br><B>Textos em negrito</B> 
<br><strong>Textos em negrito</strong> 
3 <br><I>Textos em itálico</I> 
<br><em>Textos em itálico</em> 
4 <br><U>Textos sublinhados</U> 
5 <br><TT>Textos no estilo da máquina de 
escrever</TT> 
6 <br><br>Texto:<SUB>subscrito</SUB> 
7 <br><br>Texto:<SUP>sobrescrito</SUP> 
 </BODY> 
</HTML> 
 
 
EADDCC023 - Programação para Web I 
17 
3.4. Caracteres especiais 
A linguagem HTML faz uso do conjunto básico de caracteres da tabela ASCII, ou 
seja, os caracteres sem acentuação, números e símbolos padrão da escrita inglesa. 
Outros símbolos a serem representados, devem seguir uma regra de sintaxe 
específica, a saber: um & inicial, um número ou cadeia de caracteres correspondente 
aocaractere desejado e um ; final. Exemplo: &nbsp; que representa o caractere de 
espaço:` `. 
Alguns outros exemplos: 
Entidade Caractere Entidade Caractere 
&aacute; á &Aacute; Á 
&acirc; â &Acirc; Â 
&agrave; à &Agrave; À 
&atilde; ã &Atilde; Ã 
&ccedil; ç &Ccedil; Ç 
&eacute; é &Eacute; É 
&ecirc; ê &Ecirc; Ê 
&iacute; í &Iacute; Í 
&oacute; ó &Oacute; Ó 
&ocirc; ô &Ocirc; Ô 
&otilde; õ &Otilde; Õ 
&uacute; ú &Uacute; Ú 
&uuml; ü 
 
&Uuml; Ü 
 
Se você digitar os caracteres acentuados normalmente (sem o uso do recurso 
de representação) provavelmente eles aparecerão normalmente no seu navegador, 
mas quando sua página for acessada por computadores configurados para outras 
línguas, esses caracteres aparecerão modificados! Veja o exemplo: 
 
FIGURA 9 – Exemplos do uso de caracteres especiais 
EADDCC023 - Programação para Web I 
18 
Ao utilizarmos os editores HTML, eles já fazem a conversão entre o que você 
digita na área de design e o código gerado. Desta forma, eles nos facilitam a vida. 
Outro recurso normalmente utilizado pelos editores HTML é colocar a informação no 
próprio arquivo HTML de qual conjunto de caracteres deve ser utilizado. 
 
<HTML> 
<HEAD> 
<TITLE>...</TITLE> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1"> 
</HEAD> 
... 
 
 
3.5. Cores e fontes 
A definição de qual fonte ou cor será utilizada no texto pode ser realizada de 
várias formas a mais simples é utilizar a tag FONT e seus atributos. 
 
<FONT COLOR="#rrggbb" SIZE=tamanho_da_letra 
FACE="fonte_da_letra">Texto</FONT> 
 
 
O mais complicado é o uso da cor. Ela é formada por 3 componentes: R 
(vermelho), G (verde) e B (azul). Desta forma, todos os caracteres a serem exibidos 
são compostos por valores de 00 a FF (255) de cada cor, sendo as cores básicas: 
 FFFFFF = branco 
 000000 = preto 
 FF0000 = vermelho 
 00FF00 = verde 
 0000FF = azul 
 FFFF00 = amarelo 
 
 
 
 
 
EADDCC023 - Programação para Web I 
19 
Vejamos um exemplo da tag font: 
 
FIGURA 10 – Exemplos do uso das cores 
 
<HTML> 
<HEAD> 
<TITLE>Tópicos I</TITLE> 
</HEAD> 
<BODY> 
 
<p><font COLOR="#FF0000">Dica Importante:</font> 
 <font COLOR="#00FF00">Cuidado com o uso de caracteres 
especiais!</font></p> 
 
<p><font COLOR="#FF0000" size=+2>Dica Importante:</font> 
 <font COLOR="#FFFF00">Cuidado com o uso de caracteres 
especiais!</font></p> 
 
<p><font FACE="Courier New" COLOR="#FF0000">Dica Importante:</font> 
<font COLOR="#0000FF">Cuidado com o uso de caracteres especiais! 
</font></p> 
 
</BODY> 
</HTML> 
 
DESAFIO: Pesquise na internet sobre a paleta de cores 
suportada para navegação web. 
 
 
EADDCC023 - Programação para Web I 
20 
3.6. Imagens 
Para incluir uma imagem na página, utilize a tag <IMG>. Alguns atributos desta 
tag: 
 SRC: local da imagem. Este atributo especifica o local onde está a imagem e 
o seu nome. 
 ALT: legenda. Fornece o texto que aparece no espaço da imagem quando o 
navegador não pode abrir ou após o seu carregamento. 
 ALIGN: Alinhamento. LEFT, RIGHT, TOP, MIDDLE ou BOTTOM. 
 HEIGHT: altura da imagem (em pixels) 
 WIDTH: largura da imagem (em pixels) 
 
Exemplo: 
 
<html> 
<head> 
<title>Tópicos I</title> 
</head> 
<body> 
<p><img src="imagens/green.gif" alt="Bola 
Verde"></p> 
 
<p align="right"><img src="imagens/green.gif" 
alt="Bola Verde" width="14" height="14"> </p> 
 
<p align="center"><img src="imagens/green.gif" 
alt="Bola Verde" width="28" height="28"></p> 
</body> 
</html> 
 
Algumas observações importantes: 
 Se não definirmos os atributos width e height, é utilizado o tamanho 
default da imagem. Neste exemplo: 14 x 14; 
 Para aumentar a largura ou altura de uma imagem basta alterar um dos 
atributos: width ou height; 
 No exemplo, a figura se situa num subdiretório chamado imagens. É 
comum e aconselhável colocar todas as imagens num subdiretório 
específico. Isto ajuda a organizar os arquivos e padronizar o seu projeto 
web. 
 
 
EADDCC023 - Programação para Web I 
21 
Também podemos utilizar uma imagem como fundo da página. Este é mais um 
atributo da tag <BODY>. Veja os exemplos: 
 
<html> 
<head> 
<title>Tópicos I</title> 
</head> 
<body bgcolor="#0000FF"> 
<h1>Manipulando o background</h1> 
</body> 
</html> 
 
<html> 
<head> 
<title>Tópicos I</title> 
</head> 
<body 
background="imagens/logoufjf.jpg"> 
<h1>Manipulando o background</h1> 
</body> 
</html> 
 
Na internet existem vários sites que disponibilizam imagens gratuitas para serem 
usadas em nossos sites, vejam os sites: icon finder (http://www.iconfinder.com/) e icon 
archive (http://www.iconarchive.com). 
DESAFIO: Procure na internet um banco de imagens free, e 
selecione aquelas que lhe chamarem a atenção (essas 
imagens serão utilizadas em nosso projeto portal). 
EADDCC023 - Programação para Web I 
22 
 
3.7. Exercícios 
Esse tópico tem por objetivos propiciar aos alunos a prática necessária para o 
prosseguimento da disciplina. 
1) Criar uma página que conte uma história engraçada de sua vida. Utilize as 
formatações aprendidas acima. 
2) Reproduza a página abaixo: 
 
 
 
 
 
 
EADDCC023 - Programação para Web I 
23 
3.8. Projeto 
Esse Tópico tem por objetivo permitir que o aluno crie um projeto continuado de 
um web site, ou seja, esse projeto será um portal, um site que irá evoluindo conforme 
formos avançado na disciplina. 
 
1ª Tarefa 
Crie uma página com seu currículo, experiências profissionais, cursos, etc. 
Adicione algumas fotos. Procure usar todos os conceitos vistos até o momento. 
 
 
 
EADDCC023 - Programação para Web I 
24 
4. Elementos de Ligação 
 
4.1. Âncoras (links) 
A tag âncora (A) é muito importante para linguagem HTML, pois é a partir dela 
que temos acesso a outras páginas HTML, localizadas no mesmo servidor ou não. As 
âncoras (links) podem ser externas ou internas. Começamos com as externas. 
 
<A HREF="URL">Texto que aparece no link</A> 
URL – endereço da outra página a ser aberta 
 
 
O atributo HREF determina a localização do arquivo da sua página ou do local 
da WEB a que o link se referencia. Sendo que o texto entre as tags aparecerá 
sublinhado, indicando que é um link de hipertexto. Os navegadores utilizam formas 
padrões para representar um hiperlink, mas você pode alterá-las nos atributos do 
BODY. Vejamos alguns exemplos: 
<html> 
 <head> 
 <title>HTML</title> 
 </head> 
 <body> 
 <p><a href="http://www.ufjf.br" target="_blank"> >UFJF</a> <p /> 
 <p><a href="index.php">Página Inicial</a> <p /> 
 </body> 
</html> 
 
Observe que no primeiro link fazemos referência a um site externo e no segundo 
fazemos referência a uma página que se encontra no mesmo servidor e no mesmo 
diretório que a página atual. Outro ponto importante é o uso do atributo TARGET, que 
indica em qual local o documento do link deve ser aberto. Se o hyperlink deve ser 
aberto na própria janela use (target:”_self”) ou se a URL do link deve ser aberta em 
outra janela do seu browser use (target=”_blank”). Essa é a única função do atributo 
target e é basicamente tudo o que precisar saber sobre ele. Veja o exemplo a seguir: 
EADDCC023 - Programação para Web I 
25 
 
<a href="slide.html" target="_self">slide 1.</a> 
<a href="slide.html" target="_blank">slide 2.</a> 
 
Neste nosso exemplo a página a ser chamada deve ser exibida numa nova 
janela. 
<html> 
 <head> 
 <title>HTML</title> 
 </head> 
 <body link="#FF0000" vlink="#0000FF" alink="#00FF00"> 
 <p><a href="http://www.ufjf.br" target="_blank">>UFJF</a> <p /> 
 <p><a href="index.php">Página Inicial</a> <p /> 
 </body> 
</html> 
 
Neste exemplo, atribuímos cores diferentes na tag BODY para os links, sendo 
elas assim definidas: 
 LINK - a cor dos links (padrão: azul). 
 ALINK - cor dos links, quando acionados (padrão: vermelho). 
 VLINK - cor dos links, depois de visitados (padrão: azul escuro ou roxo). 
Se quiser colocar um link um e-mail, utilize: 
 
<A HREF="mailto: meuemail@meusite.com.br">Entre em contato </A> 
 
 
Para utilizar uma âncora interna, ou seja, dentro da própria página. Utilize a 
seguinte técnica: 
 No local que você quer acessar digite: 
<A NAME="nome da área de texto">Texto que você quer acessar</A> 
 Para ir até esta área digite: 
<A HREF="#nome-da-área-de-texto">Link</A> 
 
EADDCC023 - Programação para Web I 
26 
Veja exemplo a seguir: 
<HTML> 
<HEAD> 
<TITLE>Tópicos I</TITLE> 
</HEAD> 
<BODY link="#FF0000" vlink="#0000FF" alink="#00FF00"> 
<A NAME="topo"> 
 
…………………….<< HTML >> 
 
 
<a href="#topo">Inicio da Página</a> 
 
</BODY> 
</HTML> 
 
4.2. Exercícios 
 
1) Criar uma página que contenha todos seus links favoritos 
2) Crie uma página com perguntas e respostas. Primeiro devem vir as 
perguntas que darão acesso às respostas, colocadas dentro da própria 
página. 
4.3. Projeto 
 
2ª Tarefa 
Com base na sua página anterior crie um link para o site de cada empresa e 
escola que tenha trabalhado. Crie outra página que fale de seus hobbies, utilize 
imagens para ilustrar. Faça um link entre as páginas. 
 
 
 
EADDCC023 - Programação para Web I 
27 
5. Elementos de Lista 
 
Outro recurso importante para a formatação de textos em HTML é o uso das 
Listas. Existem três formas básicas: lista com marcadores, lista numerada e lista sem 
marcador. Vamos aprender cada uma delas. 
5.1. Lista com marcadores 
São listas não-numeradas, sendo exibidas com marcadores à frente. Para criar 
uma lista primeiramente você abre a lista com a tag <UL>. Depois, quando você quiser 
incluir um item dentro da lista é só usar a tag <LI> para cada item incluído. Não se 
esqueça de fechar a lista: </UL>. 
O atributo TYPE é usado para indicar qual o tipo de marcador será exibido, os 
valores possíveis são CIRCLE, SQUARE e DISC (default). 
<HTML> 
<HEAD> 
<TITLE>Tópicos I</TITLE> 
</HEAD> 
<BODY > 
 <h1>Rotina diária</h1> 
 
 <ul> 
 <li>Acordar ir para o colégio</li> 
 <li>Fazer exercício de casa</li> 
 <li>Ir para aula de futebol</li> 
 </ul> 
 
</BODY> 
</HTML> 
 
 
<HTML> 
<HEAD> 
<TITLE>Tópicos I</TITLE> 
</HEAD> 
<BODY > 
 <h1>Rotina diária</h1> 
 
 <ul type="square" > 
 <li>Acordar ir para o colégio</li> 
 <li>Fazer exercício de casa</li> 
 <li>Ir para aula de futebol</li> 
 </ul> 
 
</BODY> 
</HTML> 
EADDCC023 - Programação para Web I 
28 
 
5.2. Lista numerada 
Nesta lista os marcadores são números ou letras. Para abrir a lista use a tag 
<OL>, para cada item use novamente <LI>, fechando a lista com </OL>. Para escolher 
o tipo de marcador use o seguinte atributo: 
TYPE="A" (A, B, C...); 
"a" (a, b, c...); 
"I" (I, II, III...); 
"i" (i, ii, iii...); 
"1" (1, 2, 3...). 
START= "número": indica o marcador inicial. 
 
<HTML> 
<HEAD> 
<TITLE>Tópicos I</TITLE> 
</HEAD> 
<BODY > 
 <h1>Rotina diária</h1> 
 
 <ol> 
 <li>Acordar ir para o colégio</li> 
 
 <li>Fazer exercício de casa</li> 
 <li>Ir para aula de futebol</li> 
 </ol> 
 
</BODY> 
</HTML> 
 
 <ol type="I"> 
 <li>Acordar ir para o colégio</li> 
 <li>Fazer exercício de casa</li> 
 <li>Ir para aula de futebol</li> 
 </ol> 
 
5.3. Lista sem marcadores 
Se você quiser usar uma lista sem marcadores, use a tag <DL> para abrir a lista, 
<DT> para cada item desejado e <DD> para cada subitem. 
EADDCC023 - Programação para Web I 
29 
<HTML> 
<HEAD> 
<TITLE>Tópicos I</TITLE> 
</HEAD> 
<BODY > 
 <h1>Rotina diária</h1> 
 
<dl > 
 <dd>Acordar ir para o colégio</dd> 
 <dd>Fazer exercício de casa</dd> 
 <dd>Ir para aula de futebol</dd> 
 </dl> 
</BODY> 
</HTML> 
 
5.4. Exercícios 
 
1. Inserir uma lista como a seguinte: 
Pais 
o João Silva 
o Maria Silva 
Irmãos 
o João Silva Jr. 
o Maria Aparecida Silva 
o José Silva 
Primos 
Nenhum 
Cores Favoritas 
1. Preto 
2. Branco 
3. Cinza 
 
5.5. Projeto 
3ª Tarefa 
Crie uma nova página que conterá os cursos que deseja fazer, utilize uma lista 
com square. Pinte de vermelho os cursos de maior importância. Link essa nova página 
no restante do projeto. 
EADDCC023 - Programação para Web I 
30 
6. Tabelas 
Uma forma de organizar uma página é fazer o uso de tabelas. A tag <TABLE> 
define o conteúdo que deve ser organizado na forma de tabela. 
Primeiramente, vamos para o código principal da tabela, que é: 
<table> </table> 
Em tabelas, existem linhas e colunas, como no Excel. O código para linhas é: 
<tr> </tr> 
e o para colunas é: 
<td> </td> 
 
<table width="100" border="1"> 
 <tr> 
 <td>v1</td> 
 <td>1</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td>v2</td> 
 <td>3</td> 
 <td>4</td> 
 </tr> 
</table> 
Ainda existem alguns atributos que auxiliam na personalização da tabela. Um 
exemplo é a cor de fundo, onde usamos a tag bgcolor='COR' 
<table border=1 bgcolor='yellow'> 
<tr> 
 <td>1ª coluna - 1ª linha</td> <td bgcolor='#aaddbb'>2ª coluna - 
1ª linha</td> 
</tr> 
<tr> 
 <td>1ª coluna - 2ª linha</td> <td>2ª coluna - 2ª linha</td> 
</tr> 
</table> 
EADDCC023 - Programação para Web I 
31 
Note que estamos utilizando o atributo bgcolor='yellow' tanto na tag <table> 
como na tag <td>. Neste atributo, tanto podemos usar o NOME da cor em INGLÊS 
como o código dela em HEXADECIMAL. 
 
<table width="100%" border="1"> 
 <tr> 
 <td>v1</td> 
 <td>1</td> 
 <td>2</td> 
 </tr> 
 <tr> 
 <td>v2</td> 
 <td>3</td> 
 <td>4</td> 
 </tr> 
</table> 
 
<table width="100%" border="1"> 
 <tr> 
 <td bgcolor="#0000FF">v1</td> 
 <td>1</td> 
 <td>2</td> 
 </tr> 
 <tr bgcolor="#FF0000"> 
 <td >v2</td> 
 <td >3</td> 
 <td >4</td> 
 </tr> 
</table> 
 
Para a formatação da tabela podem ser colocados junto da tag <TABLE> os 
seguintes atributos: 
 ALIGN=(LEFT/CENTER/RIGHT): Alinhamento da tabela em relação ao documento. 
 BGCOLOR: Define uma cor para o segundo plano da tabela. 
 BORDER: n. Coloca uma borda com espessura n. 
 CELLSPACING: n. Espaçamento entre as células. 
 CELLPADING: n. Espaçamento entre a borda de uma célula e seu conteúdo. 
 COLS: n. Número de colunas de uma tabela. 
 WIDTH: n. Largura da tabela em pixels ou porcentagem da área do navegador. 
 height - altura da tabela ou coluna 
 rowspan - especifica quantas linhas a célula será mesclada 
 colspan - especifica quantas colunas a célula será mesclada 
EADDCC023 - Programação para Web I 
32 
Um exemplo de Rowspan e Colspan: 
<h1>Tabelas</h1> 
 
Rowspan 
<table border=1 bgcolor='yellow'> 
 <tr> 
 <td rowspan=2>1ª coluna - 1ª linha + 2ª linha</td> 
 <td>2ª coluna - 1ª linha</td> 
 <td>3ª coluna - 1ª linha</td> 
 </tr> 
 <tr> 
 <td>2ª coluna - 2ª linha</td> 
 <td>3ª coluna - 2ª linha</td> 
 </tr> 
</table> 
Colspan 
<table border=1 bgcolor='yellow'> 
 <tr> 
 <td colspan=2>1ª + 2ª coluna - 1ª linha</td> 
 </tr> 
 <tr> 
 <td>1ª coluna - 2ª linha</td> 
 <td>2ªcoluna - 2ª linha</td> 
 </tr> 
</table> 
 
Outro Exemplo: 
 
<table width="100%" border="0"> 
 <tr> 
 <td width="23%" bgcolor="#FFFFFF"><img 
src="imagens/logoufjf.jpg" width="191" height="72"></td> 
 <td width="77%"><h1 align="center">Minha P&aacute;gina 
</h1></td> 
 </tr> 
</table> 
 
Esta última tabela é uma forma clássica de se organizar o cabeçalho de uma 
página HTML. 
EADDCC023 - Programação para Web I 
33 
6.1. Exercícios 
 
1. Crie as tabelas a seguir: 
 
 
 
6.2. Projeto 
 
4ª Tarefa 
Crie uma tabela com todos os seus contatos, crie uma coluna para o nome, 
outra para o telefone, e outra para o dia e mês de aniversário. Mude a cor a coluna de 
aniversário. Link esta nova página em seu projeto. 
 
EADDCC023 - Programação para Web I 
34 
7. Formulários 
 
Os formulários são de grande utilidade na Web, pois permitem a interatividade 
entre o usuário e o Servidor Web, coletando dados fornecidos pelo usuário. Podendo 
com isso, ler e gravar informações em Banco de Dados, gerando enormes 
possibilidades de uso para a Internet. O esquema de ações disparadas por um 
formulário HTML é visto na figura abaixo. 
 
FIGURA 11 – Servidor web 
 
Estas ações podem ser assim descritas: 
 PASSO 1: O usuário preenche os dados do formulário e aciona o botão Submit 
(post, enviar ou outro nome utilizado). 
 PASSO 2: O navegador pega os dados do formulário. 
 PASSO 3: Se tiverem scripts (javascript) associados ao formulário, estes são 
executados. 
 PASSO 3.5: Dependendo do script, o navegador poderá alertar o usuário de algum 
erro de preenchimento e voltamos ao PASSO 1. 
 PASSO 4: O navegador envia os dados para o servidor de páginas (servidor 
WWW) via Internet, através de uma requisião HTTP, solicitando como resposta 
uma página. 
EADDCC023 - Programação para Web I 
35 
 PASSO 5: Os dados do formulário chegam ao servidor e são manipulados pelo 
servidor de páginas que os repassa à página mencionada no campo action do 
formulário. 
 PASSO 6: Caso a página que recebeu os dados do formulário contenha algum 
script, o servidor o executa. 
 PASSO 7: Caso o script necessite dados de/para o banco de dados, é feito esse 
acesso. 
 PASSO 8: O servidor de páginas envia para o computador a página solicitada. 
 PASSO 9: O computador recebe a página solicitada pelo formulário. 
 PASSO 10: O navegador exibe os dados da página recebida. 
Alguns aspectos importantes sobre um formulário: 
1) Delimita-se uma área de interação através das tags <form> e </form>; 
2) Os atributos ACTION (pra quem) e METHOD (como) devem ser definidos; 
3) Dentro do form, são colocados os elementos de interação da HTML, formando 
assim os campos do formulário; 
4) Este formulário deve conter um botão que ative a ação de enviar (“postar”) o 
formulário, ou seja, enviar os dados preenchidos pelo usuário para que o script (cgi, 
asp, php, jsp, etc.) possa processar esses dados e retornar um resultado, conforme 
programação pré-estabelecida no script. 
 
Primeiro Exemplo: 
 
<form method="POST" action="processa.php"> 
<p> 
 <input type="text" name="T1" size="20"> 
 <input type="submit" value="Submit" name="B1"> 
 <input type="reset" value="Reset" name="B2"> 
</p> 
</form> 
 
 
Resultado: 
 
Observação: Na maioria dos editores HTML, o contorno pontilhado define a área 
do FORM. 
O atributo ACTION indica a localização (URL) do script que irá receber e 
interpretar os dados enviados pelo formulário. No nosso exemplo será chamado o 
script processa.php que se encontra no mesmo diretório da página HTML que contém 
EADDCC023 - Programação para Web I 
36 
formulário. Outra forma de indicar esse script seria colocar o endereço completo do 
script: http://www.meusite.com.br/sistema1/processa.php. 
O atributo METHOD indica o formato no qual os dados serão enviados. Pode 
assumir os valores "GET" (indica como os dados serão passados pelo script) ou 
"POST" (envia os dados para entrada padrão do sistema operacional), ambos são 
métodos do protocolo HTTP. O padrão, se omitido, é "GET". 
Se usarmos "GET" ou omitirmos o atributo, o navegador junta os valores de 
todos os controles no formulário e uma cadeia de consulta e a anexa ao URL da página 
sendo solicitada. Por meio desse método, os dados constantes no formulário são 
primeiramente transmitidos ao software servidor e este, por sua vez, armazena os 
dados temporariamente numa variável de contexto denominada QUERY_STRING. 
Quando um formulário HTML utiliza o método GET, o fluxo de dados é separado do 
endereço URL que chama o script através de um ponto de interrogação (?). Esta forma 
de endereçamento e separação pode ser observada no campo de endereços do 
navegador, logo após o formulário ter sido enviado. Por exemplo: 
http://www.meusite.com/meuscript.cgi?nome=Maria&id=123 
O método POST faz com que os dados do formulário sejam diretamente 
transmitidos ao endereço que constar da diretiva action=. O script precisa extrair os 
dados através da entrada padrão (standard input) para poder obter os dados 
transmitidos pelo formulário. 
De um modo geral, você deveria usar o método POST em todos os seus 
formulários HTML. Existem limites impostos pelo navegador e servidor quanto ao 
comprimento da cadeia URL, pois anexar uma cadeia de consulta longa pode provocar 
um overflow e alguns dos valores podem ficar truncados. Também, a cadeia de 
consulta aparece na barra de endereços do navegador e em todos favoritos e links 
gravados. Isto não apenas é feio, mas também expõe valores que você pode não 
querer que apareçam na solicitação HTTP, quando ela passa para Web, ou quando ela 
aparece nos seus e em outros arquivos de log do servidor en-route. Valores dentro dos 
cabeçalhos de solicitação HTTP são menos visíveis e não aparecem em arquivos de 
log. 
EADDCC023 - Programação para Web I 
37 
Deve-se estar ciente quanto a um pequeno detalhe: com o método POST, os 
valores em um formulário não persistem. Quando um usuário recarrega um <FORM>, 
os valores estão em branco e têm que ser reinseridos. No entanto, quando anexados 
ao URL que é armazenado como um link ou favorito, eles persistem, portanto 
aparecerão em todas as solicitações para aquela combinação URL/cadeia de consulta. 
Isto pode ser uma vantagem ou desvantagem, dependendo de sua aplicação. 
7.1. INPUT <input> 
A tag input indica um objeto (campo texto, checkbox, etc) que permite a 
interação dentro do formulário. Seus atributos são: 
 TYPE: especifica que tipo de objeto deve ser: "TEXT", "PASSWORD", 
CHECKBOX", "HIDDEN", "RADIO", BUTTON", "SUBMIT" e "RESET". Exemplo: 
<input type="text"> 
 NAME: indica o nome do objeto. Este nome não será exibido para o usuário. Ele é 
utilizado pelo script associado ao formulário para a manipulação de suas 
informações. Exemplo: <input type="text" name="endereco"> 
 VALUE: armazena o conteúdo inicial do objeto. Dependendo do tipo de objeto (ex.: 
caixas de texto) o conteúdo pode ser manipulado pelo usuário. Exemplo: <input 
type="text" value="Rio de Janeiro"> 
 SIZE: indica o número de caracteres visíveis (“tamanho” do campo) de um objeto 
tipo "TEXT" (caixa de texto). Exemplo: <input type="text" size="40"> 
 MAXLENGTH: indica o número máximo de caracteres permitido como conteúdo de 
um objeto tipo "TEXT". Exemplo: <input type="text" size="40" maxlength="60"> 
 CHECKED: determina qual a opção padrão (default) para objetos tipo "RADIO". 
Para objetos tipo "CHECKBOX", sua presença determina que ele está, como 
default, assinalado. Exemplo: <input type="checkbox" checked> 
 ALIGN: determina o comportamento dos objetos em relação a textos e imagens 
presentes na mesma linha. As opçõessão: "TOP", "MIDDLE" e "BOTTOM". 
Exemplo: <input type="text" align="top"> 
EADDCC023 - Programação para Web I 
38 
7.2. TEXTAREA <textarea>...</textarea> 
Permite ao usuário espaço para a digitação de múltiplas linhas de texto. 
Exemplo: <textarea rows="3" cols="50" name="objeto">Área para texto</textarea> 
Seus atributos: 
 NAME: indica o nome do objeto. Este nome não será exibido para o usuário. Ele é 
utilizado pelo script associado ao formulário para a manipulação de suas 
informações. 
 ROWS: indica o número de linha que a área de texto deve possuir. 
 COLS: indica o número de colunas que a área de texto deve possuir. 
 
7.3. SELECT <select>...</select> 
Permite ao usuário selecionar uma opção, dentre uma lista de opções possíveis. 
As opções são criadas através da tag <OPTION>. Exemplo: 
<select name="opcoes" size="1"> 
 <option selected>Texto A</option> 
 <option>Texto B</option> 
</select> 
Além dos atributos já apresentados anteriormente, pode conter o atributo 
MULTIPLE. Se presente, indica que mais de uma opção poderá ser escolhida. 
A tag OPTION deve ser usada dentro da área de influência de "SELECT". Ela 
define as diversas opções disponíveis ao usuário. Seus atributos: 
 VALUE: define o valor da opção, que será enviado ao script correspondente caso 
esta seja selecionada. 
 SELECTED: define que a opção será selecionada como default. 
 
EADDCC023 - Programação para Web I 
39 
7.4. Exemplos 
 
One-Line Text Box 
<form method="POST" action="_URL_"> 
 <input type="text" name="T1" size="20"> 
 <input type="submit" value="Submit" name="B1"> 
 <input type="reset" value="Reset" name="B2"> 
</form> 
 
 
 
Scolling Text Box 
<form method="POST" action="_URL_"> 
 <textarea rows="2" name="S1" cols="20"></textarea> 
 <input type="submit" value="Submit" name="B1"> 
 <input type="reset" value="Reset" name="B2"> 
</form> 
 
 
 
Check Box 
<form method="POST" action="_URL_"> 
 <input type="checkbox" name="C1" value="ON"> 
 Tópico 1 
 <input type="submit" value="Submit" name="B1"> 
 <input type="reset" value="Reset" name="B2"> 
</form> 
 
 
 
 
EADDCC023 - Programação para Web I 
40 
CHECKED 
<form method="POST" action="--WEBBOT-SELF--"> 
 <input type="checkbox" name="C1" value="ON" checked> 
 <input type="submit" value="Submit" name="B1"> 
 <input type="reset" value="Reset" name="B2"> 
</form> 
 
 
 
Radio Button 
<form method="POST" action="_URL_"> 
 <input type="radio" value="V1" checked name="R1"> 
 Tópico 1 
 <input type="submit" value="Submit" name="B1"> 
 <input type="reset" value="Reset" name="B2"> 
</form> 
 
 
Drop-Down Menu 
<form method="POST" action="_URL_"> 
 <select name="D1" size="1"> 
 <option selected 
value="http://www.xyz.com.br/topico1">Tópico 1</option> 
 <option value="http://www.xyz.com.br/topico1">Tópico 
2</option> 
 </select> 
 <input type="submit" value="Submit" name="B1"> 
 <input type="reset" value="Reset" name="B2"> 
</form> 
 
 
EADDCC023 - Programação para Web I 
41 
 
Push Button 
<form method="POST" action="_URL_"> 
 <input type="button" value="Button" name="B1"> 
</form> 
 
 
7.5. Exemplo Completo 
 
O exemplo apresentado a seguir ilustra um formulário básico para cadastro de 
usuários. Algumas considerações importantes: 
 O atributo action faz referência a um arquivo chamado verifica.php, que deve estar 
no mesmo diretório do formulário. 
 A validação dos dados do formulário é feita através de javascript, que iremos 
aprender na próxima unidade. Portanto, por razões didáticas, as validações foram 
retiradas deste formulário. 
 
 
EADDCC023 - Programação para Web I 
42 
Código Fonte Observações 
<html> 
<head> 
<title>Topicos I</title> 
</head> 
<body bgcolor="#CCCCCC"> 
<form name = "form1" method='POST' 
action="verifica.php"> 
<p align="center"> <font color="#0000FF" 
size="6">Ficha de Cadastro de Cliente 
</font></p> 
 
<p>Nome: <input type="text" name="nome" 
size="49"> </p> 
<p>CPF:<input type="text" name="cpf" 
size="20"></p> 
<p>Nascimento: <input type="text" 
name="nascimento" size="19"> (dd/mm/aaaa)</p> 
<p>Cidade: <input type="text" name="cidade" 
size="38"> </p> 
Campos texto (nome, cpf, 
nascimento e cidade) com 
nome e tamanho definidos. 
<p>Estado: 
<select size="1" name="estado"> 
<option value="AC">Acre</option> 
<option value="AL">Alagoas</option> 
......... 
<option selected value="MG">Minas 
Gerais</option> 
......... 
<option value="TO">Tocantins</option> 
</select></p> 
Apresenta uma lista de 
estados para que o usuário 
selecione um dentre os 
estados listados. 
O estado escolhido como 
default é Minas Gerais. 
Ao selecionar um estado, 
automaticamente o valor 
(value) da opção selecionada 
é atribuído à variável estado 
(name) 
<p>Cep: <input type="text" name="cep" 
size="20"></p> 
<p><font size="5">Outros Dados:</font></p> 
 
<p>Observa&ccedil;&otilde;es: 
 <textarea rows="5" name="descricao" 
cols="54"></textarea> 
</p> 
Área de texto, chamada 
descrição, com 5 linhas e 54 
colunas de visualização, mas 
com o auxílio da barra de 
rolagem o usuário pode digitar 
um texto maior. 
<p>Dados P&uacute;blicos?: 
 <input type="radio" name="acesso" 
value="livre" checked >Livre 
 <input type="radio" name="acesso" 
value="restrito">Restrito 
</p> 
Dois botões como o mesmo 
nome (acesso) para o usuário 
escolher um. Inicialmente a 
opção “Livre” aparece 
selecionada (checked). Ao 
selecionar a opção “Restrito” a 
variável acesso recebe o valor 
restrito. 
 
 
 
 
 
 
 
 
EADDCC023 - Programação para Web I 
43 
.... continuação 
Código Fonte Observações 
<p align="center"> 
 <input id="enviar" type="submit" 
value="Enviar Dados" name="enviar"> 
 <input id="limpa" type="reset" 
value="Limpar Dados" name="limpa"> 
</p> 
Definição dos botões para: 
- Enviar o formulário (submit) 
para o endereço especificado 
no action. 
- Limpar os campos do 
formulário (reset) 
</form> 
</body> 
</html> 
 
 
DICAS: 
1. O conteúdo dos formulários podem ser manipulados por scripts em JavaScript. 
2. Cada campo deve ter um nome. Portanto, utilize nomes que lembram o que o 
campo significa, como: cep, cpf, rua, etc. 
3. Se quiser facilitar a disposição física dos campos e labels (rótulos) do formulário, 
insira uma tabela dentro do FORM, normalmente com borda (border=”0”) e distribua 
os campos pelas células da tabela. 
4. Campos do tipo "Hidden" (ocultos): podemos definir campos não visíveis que 
estarão passando parâmetros para o script a ser executado. 
<INPUT TYPE="hidden" NAME="nome-do-campo" Value="valor"> 
 
 
 
 
 
 
 
 
 
 
 
EADDCC023 - Programação para Web I 
44 
7.6. Exercícios 
1. Crie os formulários abaixo 
a) 
 
b) 
 
 
c) 
 
7.7. Projeto 
 
5ª Tarefa 
Crie o formulário abaixo e coloque-o em seu projeto. 
 
 
 
 
EADDCC023 - Programação para Web I 
45 
 . 
EADDCC023 - Programação para Web I 
46 
8. Folha de Estilo (CSS) 
 
Se você se interessa pela criação de home pages já deve ter ouvido falar 
em Cascading Style Sheets, ou CSS apenas. Trata-se de um padrão de formatação 
para páginas web que vai além das limitações impostas pelo html. Proposto pelo W3 
Consortium <http://www.w3.org> - uma espécie de comitê que define os padrões de 
programação para a WWW - o CSS foi introduzido pela primeira vez pela Microsoft, no 
lançamento do Internet Explorer 3.0. 
O Cascading Style Sheet permite uma versatilidade maior na programação do 
layout de páginas web sem aumentar o seu tamanho em Kb, pois oferecevárias 
possibilidades que antes só eram conseguidas com a utilização de gifs e jpgs. 
Basicamente, o CSS permite ao designer um controle maior sobre os atributos 
tipográficos de uma home page, como tamanho e cor das fontes, espaçamento entre 
linhas e caracteres, margem do texto, entre outros. Introduziu também às páginas a 
utilização de layers “Div”, permitindo a sobreposição de texto sobre texto ou texto sobre 
figuras. 
8.1. O que o CSS pode fazer? 
 
O CSS formata a informação entregue pelo HTML. Essa informação pode ser 
qualquer coisa: imagem, texto, vídeo, áudio ou qualquer outro elemento criado. Grave 
isso: CSS formata a informação. Essa formatação na maioria das vezes é visual. 
Utilizando uma boa combinação de tags do código de programação html, como 
<B>, <I>, <H1> e <FONT>, podemos criar páginas interessantes sob o ponto de vista 
do design. Entretanto, as possibilidades que elas oferecem são bastante limitadas se 
comparadas às oferecidas pelo CSS. 
Comandos de Style Sheets podem ser aplicados a toda e qualquer tag, 
modificando seus atributos. Até mesmo a tag <P> possui um </P> opcional e permite 
que você defina os atributos de tudo o que ficar compreendido entre as duas. 
Você pode, por exemplo, trocar os atributos de uma tag <B>, que 
tradicionalmente adiciona negrito a uma palavra: 
EADDCC023 - Programação para Web I 
47 
Este e <b>o negrito normal</b>. 
Agora vamos trocar os atributos da tag para mostrar o negrito em uma cor 
diferente: 
Este é o <b style=”color:green”>resultado final em CSS</b>. 
Não esqueça de que você só vai visualizar este exemplo se estiver utilizando um 
browser que suporte CSS. 
O Style Sheets permite a você, por exemplo, configurar todos os comandos <B> 
em uma página ou em um site inteiro de uma só vez. 
8.2. Adicionando Estilo a Sua Página 
Um estilo pode ser utilizado de três maneiras diferentes: local (modificando uma 
tag específica da página), geral (modificando determinados atributos para toda a 
página) ou global (num modelo que será aplicado a várias páginas simultaneamente). 
Exemplos: 
 Local: <h1 style="font-size: 12px"> título </h1> 
 Geral: 
<style type="text/css"> 
<!-- 
.style1 {font-size: 12px} 
--> 
</style> 
......... 
<h1 class="style1" > título </h1> 
 Global: 
<META> 
<LINK REL="stylesheet" 
 TYPE= “text/css” 
HREF="http://meusite/estilo.css"> 
........ 
<h1 class="style1" > título </h1> 
 
 
EADDCC023 - Programação para Web I 
48 
A ordem adotada para a aplicação do estilo é a seguinte: 
 Primeiro se aplica o estilo local; 
 Caso não tenha o local aplica-se o geral; 
 E por último, caso não se tenha os outros dois estilos, aplica-se o estilo global. 
 
O CSS permite um controle absoluto da aparência da página, o que não se tem 
com o HTML. Pode-se colocar uma imagem em qualquer lugar da página (até fora 
dela), usando técnicas de posicionamento absoluto ou relativo. Pode-se escolher a 
posição exata da imagem de background e fazê-la combinar com algo no foreground. 
As dimensões e posições são exatas e dadas em unidades conhecidas no mundo da 
tipografia como pixels, pontos, paicas, milímetros. Com folhas de estilo é possível criar 
muitas páginas com um layout sofisticado que antes só era possível usando imagens, 
tecnologias como Flash ou applets Java. Estas páginas eram sempre mais pesadas, 
pois precisavam carregar imagens, componentes, programas. Com CSS é possível 
definir texto de qualquer tamanho, posicioná-lo por cima de outros objetos, ao lado ou 
por cima de texto e conseguir efeitos sofisticados a um custo (banda de rede) baixo. É 
possível ainda importar fontes (que o usuário talvez não tenha). 
Uma folha de estilos serve para toda uma coleção de páginas, podendo ser 
usada para dar um estilo consistente a todo o site. Sendo aplicada em separado da 
informação e estrutura, não precisará ser atualizada todas as vezes que a informação 
for mudada. A página pode ser atualizada em um editor HTML ou gerador de HTML 
simples, sem recursos de cor ou alinhamento, e ser formatada na hora em que for 
carregada pelo browser. É possível também fazer o contrário: mudar o estilo sem 
alterar a informação, como ter uma página que sempre carrega com um estilo diferente. 
O uso das folhas de estilo depende da boa estrutura do HTML. A linguagem 
CSS, por ser uma linguagem declarativa, trabalha com os elementos tratando-os como 
"objetos". Cada parágrafo <P>, cada <H1>, cada <IMG> é um objeto. Objetos podem 
ser agrupados de várias formas. A cada objeto ou grupo de objetos podem ser 
atribuídas propriedades de estilo definidas em regras. Por exemplo, considere a 
seguinte regra: "todo objeto P da classe 'editorial' será azul, terá tamanho de 12 
pontos, espaçamento duplo, alinhamento pela direita e usará a família de fontes Arial, 
EADDCC023 - Programação para Web I 
49 
ou, se esta não existir, Helvetica, ou então a fonte sem-serifa default do sistema". Um 
arquivo CSS com apenas a regra acima conteria o texto: 
P.editorial { 
 color: 0000ff; 
 font-size: 12pt; 
 line-height: 24pt; 
 text-align: right; 
 font-family: arial, helvetica, sans-serif 
 } 
Se a folha de estilos acima for aplicada a uma página que possua parágrafos 
<P> rotulados com o nome "editorial" (atributo 'CLASS=editorial'), eles serão 
formatados de acordo com as propriedades especificadas. 
 
8.3. Regras, Declarações e Seletores 
 
A estrutura dos estilos é bastante simples. Consiste de uma lista de regras. 
Cada regra possui um bloco, entre chaves ({ e }), de uma ou mais declarações 
aplicáveis a um ou mais seletores. Um seletor é algo no qual pode-se aplicar um estilo. 
Pode ser um descritor HTML, uma hierarquia de descritores ou um atributo que 
identifique um grupo de descritores. Uma folha de estilos consiste de uma ou mais 
linhas de regras, da forma: 
seletores { declarações } 
As regras podem estar dentro de um arquivo de texto (ISO Latin1 ou ASCII 8-bit) 
com extensão ".css" ou embutidas em um arquivo HTML (as várias maneiras de aplicar 
estilos a um arquivo HTML serão vistas na seção seguinte). Um exemplo de folha de 
estilos com apenas uma regra foi mostrada na seção anterior: 
H1 { font-size : 48pt} 
 Propriedade : valor 
EADDCC023 - Programação para Web I 
50 
Observe que se usa dois-pontos (:) e não igual (=) para aplicar um valor a uma 
propriedade. Pode haver mais de uma declaração de estilo para um seletor. Isto pode 
ser feito em outro bloco. Cada linha acrescenta ou sobrepõe declarações feitas em 
linhas anteriores: 
H1 { font-size: 24pt } 
H1 { color: blue } 
H1 { font-size: 18pt } 
Ou 
H1 {font-size: 24pt; color: blue; font-size: 18pt } 
No trecho acima, o texto marcado com <H1> será azul e terá tamanho de 18pt, 
porque a regra H1 { font-size: 18pt } ocorreu depois da regra H1 { font-size: 24pt }. 
 
8.4. CSS e Fontes 
 
Alguns comandos para manipular fontes: 
 font-family: indica a fonte a ser utilizada: 
P { font-family: Trebuchet MS, Arial, Helvetica } 
No exemplo acima, tudo o que estiver entre as tag <P> e </P> no seu 
documento html será visualizado em Trebuchet MS. A razão de definir mais de 
uma fonte deve-se ao fato de que nem todos os computadores possuem as 
mesmas fontes instaladas. No caso, se o computador não possuir a Trebuchet 
MS, automaticamente passará para a segunda opção e mostrará o texto em Arial. 
 font-size: define o tamanho da fonte. Há três formas básicas para definição de 
tamanho: 
1. pontos, pixels, cm e outras unidades de medida; 
2. palavras-chave; 
3. percentagem 
EADDCC023- Programação para Web I 
51 
Ponto é uma medida familiar para designers, e pode ser usada para definir o 
tamanho de um elemento em uma página html. Tem sido a medida mais utilizada na 
programação em CSS, pois funcionam bem em todos os browsers e plataformas 
operacionais. Uma linha de comando geral em CSS parecerá assim: 
P { font-size: 20pt } para pontos 
ou: 
B { font-size: 20px } para pixels. 
 
As unidades de medida que podem ser utilizadas são: 
- pt: pontos 
- px: pixels 
- in: inches 
- cm: centímetros 
- mm: milímetros 
- pc: picas 
- em: sem 
- ex: x-weight 
Pixel é uma medida familiar aos web designers. Pode dar uma boa noção do 
tamanho que a fonte aparecerá na tela, mas infelizmente a utilização dessa medida 
tem causado problemas para na impressão das páginas em papel. 
Palavras-chave é outra maneira de determinar tamanhos de fonte em CSS. A 
seguir, a lista de comandos em ordem crescente: xx-small, x-small, small, médium, 
large, x-large, xx-large. Esses tamanhos pré-configurados deixam o browser decidir 
qual o tamanho exato de fonte apropriado para cada palavra-chave 
Percentagem: O tamanho das fontes também pode ser determinado segundo 
regras de percentagem: 
P { font-size: 12pt } 
I { font-size: 200% } 
EADDCC023 - Programação para Web I 
52 
No exemplo acima, todo o texto que estiver compreendido entre as tags <P> e 
</P> no corpo da página será mostrado em 12 pontos, assim como todas as palavras 
em itálico entre as duas tags serão apresentadas em um tamanho duas vezes maior. 
 font-weight é o comando CSS que controla a propriedade bold (negrito) de uma 
tag: 
H1 { font-weight: bold } 
No exemplo acima, todas as palavras da página que estiverem compreendidas 
entre as tags <H1> e </H1> serão mostradas em negrito. Da mesma forma você pode 
configurar "font-weight : normal" se quiser desativar todos os bolds de uma página. 
Podemos também especificar as características do negrito através de valores 
numéricos: 100, 200, 300...400 é o valor normal de uma fonte sem negrito. 900 é o 
valor máximo de negrito disponível. Para uma fonte Arial, por exemplo, um browser 
com apenas a versão normal e a versão bold poderá mostrar a versão normal para 
valores de 100 à 600 e a versão bold para valores de 700 à 900. 
 font-style é o comando CSS que controla a propriedade italic de uma tag. 
H1 { font-style: italic } 
No exemplo acima o browser irá procurar uma versão itálica da fonte para 
apresentar o texto compreendido entre as tags <H1> e</H1>. Algumas fontes têm uma 
versão chamada "oblique" em lugar de "italic". Nesse caso, use a palavra oblique. 
8.5. CSS e Cores 
Para mudar a cor de um texto utilizamos o color: Podemos aplicar cores a 
qualquer elemento de uma página html. Para tanto, utilizamos nomes ou números 
hexadecimais da mesma forma que na programação em html básico. A novidade em 
CSS é que podemos utilizar diretamente valores RGB para definir a cor. Exemplo: 
itálicos em vermelho podem ser definidos por: 
Nome: I { color: red } 
Valor numérico: I { color: #FF0000 } 
Código RGB: I { color: rgb (255, 0, 0) } 
 
EADDCC023 - Programação para Web I 
53 
8.6. CSS e Layers 
A maior inovação introduzida pelo CSS foi a utilização de layers. Sabemos que 
posicionamento utilizando o tradicional código html é algo delicado. Mesmo com a 
utilização de tabelas, certas vezes alguns problemas de posicionamento e alinhamento 
podem quebrar a cabeça do mais experiente programador. Style Sheets chegou para 
acabar com essas limitações. 
Os comandos position, left e top são utilizados para posicionar os elementos na 
página html. O comando left determina a distância entre o elemento e a margem 
esquerda da página. O Comando top determina a distância até a parte superior da 
mesma. 
Podemos utilizar valores de percentagem ou unidades de medida para 
determinar a posição do elemento através desses comandos. As unidades que podem 
ser utilizadas são as mesmas da manipulação do tamanho da fonte. 
O comando position determina se o posicionamento dos elementos será 
absoluto ou relativo. Posicionamento absoluto significa que cada elemento terá sua 
posição determinada individualmente, através de coordenadas. Já no posicionamento 
relativo temos a posição de cada elemento determinada em relação aos outros. 
Qualquer elemento pode ter sua posição determinada em Style Sheets: imagens, 
vídeos, parágrafos ou uma única letra. 
O comando Width determina largura e só pode ser aplicado a elementos com 
posicionamento absoluto em uma página. O tamanho pode ser especificado em valores 
de percentagem ou unidades de medida. 
O comando z-index, através do posicionamento absoluto, possibilita sobrepor 
vários elementos, definindo em que ordem eles serão visualizados. 
Alguns exemplos de layers são apresentados a seguir. 
 
 
 
 
EADDCC023 - Programação para Web I 
54 
 
Exemplo 1: 
 
 
<HTML> 
<STYLE TYPE="text/css"> 
<!-- 
 .exemplo1 { position: absolute; left: 200; top: 100; } 
 --> 
</STYLE> 
<HEAD> 
 <TITLE>ZAZ - Estilo de Vida Web</TITLE> 
</HEAD> 
<BODY BGCOLOR="#ffffff" LINK="#003366" VLINK="#003366" 
TEXT="#000000" ALINK="#003366"> 
<DIV CLASS="exemplo1"> 
 <FONT FACE="Trebuchet MS, Arial, Helvetica" SIZE="5" 
COLOR="#003366"><B>Exemplo 
 de posicionamento absoluto</B></FONT> 
 <P> <FONT FACE="Trebuchet MS, Arial, Helvetica">O canto superior 
esquerdo deste par&aacute;grafo est&aacute; posicionado exatamente 
a 200 pixels da margem esquerda e a 100 pixels do topo da 
p&aacute;gina. O texto flui normalmente ao chegar &agrave; 
extremidade direita da tela, mesmo quando redimencionamos a janela 
do browser. Mais adiante veremos como controlar a largura de um 
par&aacute;grafo que utiliza o comando position. </FONT></P> 
 <P><FONT FACE="Trebuchet MS, Arial, Helvetica">Recomendamos 
utilizar uma especifica&ccedil;&atilde;o geral de Style Sheets para 
o comando position. O IE4 algumas vezes apresenta problemas quando 
aplicamos esse comando localmente. O uso do comando <A 
HREF="tutorial_css_parte1.htm#class">CLASS</A> &eacute; uma boa 
solu&ccedil;&atilde;o para evitar problemas. </FONT><FONT 
FACE="Trebuchet MS, Arial, Helvetica"> 
 </FONT></P> 
 </DIV> 
</body> 
</html> 
 
EADDCC023 - Programação para Web I 
55 
 
 
Exemplo 2: 
 
 
<HTML> 
 
<HEAD> 
 <TITLE>ZAZ - Estilo de Vida Web</TITLE> 
</HEAD> 
 
<BODY BGCOLOR="#ffffff" LINK="#003366" VLINK="#003366" 
TEXT="#000000" ALINK="#003366"> 
 
<BLOCKQUOTE> 
 <P><FONT FACE="Trebuchet MS, Arial, Helvetica"> </FONT><FONT 
FACE="Trebuchet MS, Arial, Helvetica" SIZE="5" 
COLOR="#E29C72"><B><FONT COLOR="#003366">Exemplo 
 de posicionamento relativo</FONT></B></FONT> </P> 
 <P><FONT FACE="Trebuchet MS, Arial, Helvetica">Na &uacute;ltima 
das figuras 4 figuras abaixo determinamos um posicionamento 
relativo de 10 pixels do topo e 10 pixels a partir da esquerda de 
onde a imagem normalmente deveria iniciar:</FONT> 
 </P> 
 <P> 
<IMG SRC="verso2.gif" WIDTH="60" HEIGHT="60"><IMG SRC="verso.gif" 
WIDTH="60" HEIGHT="60"><BR> 
 <IMG SRC="verso.gif" WIDTH="60" HEIGHT="60"><IMG 
STYLE="position: relative; left: 10px; top: 10px" 
SRC="verso2.gif" WIDTH="60" HEIGHT="60"> 
</P> 
 
</BLOCKQUOTE> 
</body> 
</html> 
 
 
 
EADDCC023 - Programação para Web I 
56 
Exemplo 3: 
 
 
<HTML> 
 
<STYLE TYPE="text/css"> 
<!-- 
 .exemplo3 { position: absolute; left: 30%; top: 100px; 
width:200px } 
 --> 
</STYLE> 
 
<HEAD> 
 <TITLE>ZAZ - Estilo de Vida Web</TITLE> 
</HEAD> 
 
<BODY BGCOLOR="#ffffff" LINK="#003366" VLINK="#003366" 
TEXT="#000000" ALINK="#003366"> 
 
 
 
<DIV CLASS="exemplo3"> 
 <FONT FACE="Trebuchet MS, Arial,Helvetica" SIZE="5" 
COLOR="#003366"><B>width</B></FONT> 
 <P> <FONT FACE="Trebuchet MS, Arial, Helvetica">O Este 
par&aacute;grafo est&aacute; localizado a 30% do espa&ccedil;o 
horizontal e a 100 pixels da parte superior da p&aacute;gina. O 
comando width determina que o par&aacute;grafo ter&aacute; uma 
largura m&aacute;xima de 200 pixels.</FONT><FONT FACE="Trebuchet 
MS, Arial, Helvetica"> 
 </FONT></P> 
 </DIV> 
 
</body> 
</html> 
 
EADDCC023 - Programação para Web I 
57 
Exemplo 4: 
 
<HTML> 
 
<STYLE TYPE="text/css"> 
<!-- 
 .layer1 { font-family: Trebuchet MS, Arial, Helvetica; font-
size: 60pt; font-weight: bold; color: yellow; position: absolute; 
left: 210px; top: 110px;} 
 
 .layer2 { font-family: Trebuchet MS, Arial, Helvetica; font-
size: 60pt; font-weight: bold; color: blue; position: absolute; 
left: 220px; top: 120px;} 
 
 .layer3 { font-family: Trebuchet MS, Arial, Helvetica; font-
size: 60pt; font-weight: bold; color: green; position: absolute; 
left: 230px; top: 130px;} 
 
 .layer4 { font-family: Trebuchet MS, Arial, Helvetica; font-
size: 60pt; font-weight: bold; color: red; position: absolute; 
left: 240px; top: 140px;} 
 --> 
</STYLE> 
 
<HEAD> <TITLE>ZAZ - Estilo de Vida Web</TITLE> </HEAD> 
 
<BODY BGCOLOR="#ffffff" LINK="#003366" VLINK="#003366" 
TEXT="#000000" ALINK="#003366"> 
 
<DIV CLASS="layer1"> LAYERS </DIV> 
 
<DIV CLASS="layer2"> LAYERS </DIV> 
 
<DIV CLASS="layer3"> LAYERS </DIV> 
 
<DIV CLASS="layer4"> LAYERS </DIV> 
 
</body> 
</html> 
 
 
EADDCC023 - Programação para Web I 
58 
Exemplo 5: 
 
 
<HTML> 
 
<STYLE TYPE="text/css"> 
<!-- 
 .layer1 { font-family: Trebuchet MS, Arial, Helvetica; font-
size: 60pt; font-weight: bold; color: yellow; position: absolute; 
left: 210px; top: 110px; z-index: 4 } 
 
 .layer2 { font-family: Trebuchet MS, Arial, Helvetica; font-
size: 60pt; font-weight: bold; color: blue; position: absolute; 
left: 220px; top: 120px; z-index: 3 } 
 
 .layer3 { font-family: Trebuchet MS, Arial, Helvetica; font-
size: 60pt; font-weight: bold; color: green; position: absolute; 
left: 230px; top: 130px; z-index: 1 } 
 
 .layer4 { font-family: Trebuchet MS, Arial, Helvetica; font-
size: 60pt; font-weight: bold; color: red; position: absolute; 
left: 240px; top: 140px; z-index: 2 } 
 --> 
</STYLE> 
 
<HEAD> <TITLE>ZAZ - Estilo de Vida Web</TITLE> </HEAD> 
 
<BODY BGCOLOR="#ffffff" LINK="#003366" VLINK="#003366" 
TEXT="#000000" ALINK="#003366"> 
 
<DIV CLASS="layer1"> LAYERS </DIV> 
 
<DIV CLASS="layer2"> LAYERS </DIV> 
 
<DIV CLASS="layer3"> LAYERS </DIV> 
 
<DIV CLASS="layer4"> LAYERS </DIV> 
 
</body> 
</html> 
 
 
EADDCC023 - Programação para Web I 
59 
8.7. Exemplo de CSS 
 
A figura abaixo ilustra todos os três códigos apresentados a seguir, ou seja, eles 
geram o mesmo efeito visual. 
 
A página com CSS LOCAL: 
<html> 
<head> 
<title>Exemplo de CSS</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1"> 
</head> 
<body style="background-color:#CCCCCC; border:'border-width:thick' 
'border-style:solid' 'color:#CC3300'"> 
<p style="font-size: 24px; text-align:center; color:#0000FF"> 
T&iacute;tulo</p> 
<p style="font-size: 12px; text-align:left; color:#FF0000">Texto 
Um. Primeiro Par&aacute;grafo</p> 
<p style="font-size: 12px; text-align:left; color:#FF0000">Texto 
Um. Segundo Par&aacute;grafo</p> 
<p style="font-size: 16px; text-align:right; color:#FF9900">Texto 
Dois. Primeiro Par&aacute;grafo</p> 
<p style="font-size: 16px; text-align:right; color:#FF9900">Texto 
Dois. Segundo Par&aacute;grafo</p> 
</body> 
</html> 
Observações: Para alterar a cor do “texto um” ou do “texto dois” temos que fazer a 
alteração nos dois parágrafos referentes ao texto. Imagine isso numa página com 
muitos parágrafos! 
 
 
EADDCC023 - Programação para Web I 
60 
A página com CSS GERAL: 
<html> 
<head> 
<title>Exemplo de CSS</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1"> 
<style type="text/css"> 
<!-- 
.fundo {background-color:#CCCCCC; border:'border-width:thick' 
'border-style:solid' 'color:#CC3300';} 
.titulo{font-size: 24px; text-align:center; color:#0000FF;} 
.t1{font-size: 12px; text-align:left; color:#FF0000;} 
.t2{font-size: 16px; text-align:right; color:#FF9900;} 
--> 
</style> 
</head> 
<body class="fundo"> 
<p class="titulo">T&iacute;tulo</p> 
<p class="t1">Texto Um. Primeiro Par&aacute;grafo</p> 
<p class="t1">Texto Um. Segundo Par&aacute;grafo</p> 
<p class="t2">Texto Dois. Primeiro Par&aacute;grafo</p> 
<p class="t2">Texto Dois. Segundo Par&aacute;grafo</p> 
</body> 
</html> 
Observações: Para alterar a cor do “texto um”, basta alterar no estilo “t1”. 
 
A página com CSS GLOBAL: 
ARQUIVO: meus_estilos.css 
/* Meus Estilos */ 
body {background-color:#CCCCCC; border:'border-width:thick' 
'border-style:solid' 'color:#CC3300';} 
#titulo {font-size: 24px; text-align:center; color:#0000FF;} 
#t1 {font-size: 12px; text-align:left; color:#FF0000;} 
#t2 {font-size: 16px; text-align:right; color:#FF9900;} 
 
ARQUIVO: exemplo.html 
<html> 
<head> 
<title>Exemplo de CSS</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1"> 
<link rel="stylesheet" href="meus_estilos.css" type="text/css" /> 
</head> 
<body> 
EADDCC023 - Programação para Web I 
61 
<div id="titulo"><p>T&iacute;tulo</p></div> 
<div id="t1"> 
<p>Texto Um. Primeiro Par&aacute;grafo</p> 
<p>Texto Um. Segundo Par&aacute;grafo</p> 
</div> 
<div id="t2"> 
<p>Texto Dois. Primeiro Par&aacute;grafo</p> 
<p>Texto Dois. Segundo Par&aacute;grafo</p> 
</div> 
</body> 
</html> 
Observações: 
 Os estilos declarados no arquivo “meus_estilos.css” podem ser utilizados em 
todas as minhas páginas e não somente na página na qual eles foram descritos. 
 Na folha de estilos, declaramos o nome da tag e seus estilos (no nosso 
exemplo: body) ou o nome do container (DIV ou SPAN) antecedido do caractere 
‘#’, no nosso exemplo: titulo, t1 e t2. 
 
8.8. Outro Exemplo de CSS 
 
 
ARQUIVO: meus_novosestilos.css 
/* Meus Estilos */ 
body {background-color:#CCCCCC; border:'border-width:thick' 
'border-style:solid' 'color:#CC3300';} 
#t1 {color:#FF0000;} 
#t1 p {font-size: 12px;} 
#t1 h1 {font-size: 24px;} 
 
ARQUIVO: exemplo2.html 
<html> 
<head> 
<title>Exemplo de CSS</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-
8859-1"> 
<link rel="stylesheet" href="meus_novosestilos.css" 
type="text/css" /> 
</head> 
EADDCC023 - Programação para Web I 
62 
 
<body> 
<div id="t1"> 
 <h1>TAG H1, fonte 24</h1> 
 <p>TAG P, fonte 12</p> 
</div> 
</body> 
</html> 
Observações: Ao criar um estilo para um container podemos definir propriedades 
para todo o container ou estipular propriedades para tags em específico. 
 
 
EADDCC023 - Programação para Web I 
63 
Referências: 
 
1. Centro Regional RNP - Brasília - CR/DF (Tutorial - Autoria em World Wide Web 
Parte I -Hypertext Markup Language (HTML) - Básico). 
2. ftp://ftp.cr-df.rnp.br/pub/netinfo/training/rnp/kit-bsb/html/guia1./ (acesso em 
dezembro de 2011). 
3. http://www.codigofonte.net/dicas/html/127_criando-tabelas-em-html (acesso em 
janeiro de 2012). 
4. http://gmgall.sites.uol.com.br/apostilacss/tutorial_css_parte1.htm (acesso em 
janeiro de 2012). 
5. http://www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf (acesso em dezembro 
de 2011).