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

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

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.

4
EADDCC023 - Programação para Web I

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

5
EADDCC023 - Programação para Web I

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

6
EADDCC023 - Programação para Web I

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

7
EADDCC023 - Programação para Web I

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.

8
EADDCC023 - Programação para Web I

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.

9
EADDCC023 - Programação para Web I

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

10
EADDCC023 - Programação para Web I

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:

11
EADDCC023 - Programação para Web I

<HTML> Início do documento HTML

<HEAD> Cabeçalho: nesta parte do documento são
<TITLE>Tópicos I </TITLE> armazenadas informações como título, versão do
</HEAD> 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>

12
EADDCC023 - Programação para Web I

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

13
EADDCC023 - Programação para Web I

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 />

14
EADDCC023 - Programação para Web I

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; Alinhamento à Direita.

Direita.</p>
<p align="center">Terceiro parágrafo, centralizado e Alinhamento centralizado e uso
<br> com quebra de linha.</p> 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>

15
EADDCC023 - Programação para Web I

 <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>

16
EADDCC023 - Programação para Web I

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
ao caractere 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

17
EADDCC023 - Programação para Web I

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

18
EADDCC023 - Programação para Web I

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.

19
EADDCC023 - Programação para Web I

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.

20
EADDCC023 - Programação para Web I

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

21
EADDCC023 - Programação para Web I

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:

22
EADDCC023 - Programação para Web I

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.

23
EADDCC023 - Programação para Web I

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:

24
EADDCC023 - Programação para Web I

<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: [email protected]">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>

25
EADDCC023 - Programação para Web I

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.

26
EADDCC023 - Programação para Web I

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>

27
EADDCC023 - Programação para Web I

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.

28
EADDCC023 - Programação para Web I

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

29
EADDCC023 - Programação para Web I

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>

30
EADDCC023 - Programação para Web I

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

31
EADDCC023 - Programação para Web I

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.

32
EADDCC023 - Programação para Web I

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.

33
EADDCC023 - Programação para Web I

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.

34
EADDCC023 - Programação para Web I

 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

35
EADDCC023 - Programação para Web I

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.

36
EADDCC023 - Programação para Web I

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ções são: "TOP", "MIDDLE" e "BOTTOM".
Exemplo: <input type="text" align="top">

37
EADDCC023 - Programação para Web I

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.

38
EADDCC023 - Programação para Web I

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>

39
EADDCC023 - Programação para Web I

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>

40
EADDCC023 - Programação para Web I

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.

41
EADDCC023 - Programação para Web I

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" Campos texto (nome, cpf,
size="49"> </p> nascimento e cidade) com
<p>CPF:<input type="text" name="cpf" nome e tamanho definidos.
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>
<p>Estado: Apresenta uma lista de
<select size="1" name="estado"> estados para que o usuário
<option value="AC">Acre</option> selecione um dentre os
<option value="AL">Alagoas</option> estados listados.
......... O estado escolhido como
<option selected value="MG">Minas default é Minas Gerais.
Gerais</option> Ao selecionar um estado,
......... automaticamente o valor
<option value="TO">Tocantins</option> (value) da opção selecionada
</select></p> é 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: Área de texto, chamada
<textarea rows="5" name="descricao" descrição, com 5 linhas e 54
cols="54"></textarea> colunas de visualização, mas
</p> com o auxílio da barra de
rolagem o usuário pode digitar
um texto maior.
<p>Dados P&uacute;blicos?: Dois botões como o mesmo
<input type="radio" name="acesso" nome (acesso) para o usuário
value="livre" checked >Livre escolher um. Inicialmente a
<input type="radio" name="acesso" opção “Livre” aparece
value="restrito">Restrito selecionada (checked). Ao
</p> selecionar a opção “Restrito” a
variável acesso recebe o valor
restrito.

42
EADDCC023 - Programação para Web I

.... continuação
Código Fonte Observações
<p align="center"> Definição dos botões para:
<input id="enviar" type="submit" - Enviar o formulário (submit)
value="Enviar Dados" name="enviar"> para o endereço especificado
<input id="limpa" type="reset" no action.
value="Limpar Dados" name="limpa"> - Limpar os campos do
</p> 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">

43
EADDCC023 - Programação para Web I

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.

44
EADDCC023 - Programação para Web I

45
EADDCC023 - Programação para Web I

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 oferece vá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:

46
EADDCC023 - Programação para Web I

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>

47
EADDCC023 - Programação para Web I

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,

48
EADDCC023 - Programação para Web I

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

49
EADDCC023 - Programação para Web I

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

50
EADDCC023 - Programação para Web I

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% }

51
EADDCC023 - Programação para Web I

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) }

52
EADDCC023 - Programação para Web I

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.

53
EADDCC023 - Programação para Web I

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>

54
EADDCC023 - Programação para Web I

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>

55
EADDCC023 - Programação para Web I

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>

56
EADDCC023 - Programação para Web I

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>

57
EADDCC023 - Programação para Web I

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>

58
EADDCC023 - Programação para Web I

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!

59
EADDCC023 - Programação para Web I

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>

60
EADDCC023 - Programação para Web I

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

61
EADDCC023 - Programação para Web I

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

62
EADDCC023 - Programação para Web I

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

63