LivroHTMLTotal V16jan2006

Índice
1 A Internet e suas características....................................................................................................................1

1.1 Introdução.........................................................................................................................................1
1.2 O que é a Internet?............................................................................................................................1
1.3 Tipos de acesso à Internet.................................................................................................................1
1.4 Os recursos da Internet......................................................................................................................2
1.5 Como funciona a Web......................................................................................................................2
1.6 Os servidores.....................................................................................................................................2
1.7 O que é uma URL.............................................................................................................................3
1.8 O navegador......................................................................................................................................4
1.9 O que é HTML..................................................................................................................................4
2 Criando uma página.......................................................................................................................................5

2.1 Introdução.........................................................................................................................................5
2.2 Como o HTML Funciona.................................................................................................................5
2.3 Entendendo os principais elementos de uma página.........................................................................5
2.4 Inserindo tags HTML básicas...........................................................................................................6
2.5 Meta tags...........................................................................................................................................6
2.6 Adicionando atributos às tags...........................................................................................................7
2.7 Alterando a cor de fundo da página..................................................................................................7
2.8 Visualizando sua primeira página.....................................................................................................8
2.9 Exercício Proposto............................................................................................................................8
3 Formatando o Texto.....................................................................................................................................10
3.1 Introdução.......................................................................................................................................10
3.2 Formatando o texto.........................................................................................................................10
3.3 Criando títulos e sub−títulos...........................................................................................................11
3.4 Alterando a formatação da fonte.....................................................................................................11
3.5 Fazendo parágrafos.........................................................................................................................12
3.6 Trabalhando com texto pré−formatado...........................................................................................13
3.7 Inserindo uma linha horizontal.......................................................................................................13
3.8 Listas...............................................................................................................................................13
3.9 Marquee..........................................................................................................................................14
3.10 Exercício Proposto........................................................................................................................16
4 Trabalhando com Imagens...........................................................................................................................17

4.1 Introdução.......................................................................................................................................17
4.2 Gráficos da Web.............................................................................................................................17
4.3 Inserindo imagens...........................................................................................................................17
4.4 Inserindo imagens de fundo............................................................................................................18
4.5 Centralizando a imagem.................................................................................................................18
4.6 Exibindo textos alternativos............................................................................................................18
4.7 Ajustando o tamanho da imagem....................................................................................................18
4.8 Formatando imagens com textos....................................................................................................19
4.9 Exercício Proposto..........................................................................................................................19
5 Links...............................................................................................................................................................20
5.1 Introdução.......................................................................................................................................20
5.2 O que é e como funciona................................................................................................................20
5.3 Links relativos e links absolutos.....................................................................................................20
5.4 Links para uma seção da página.....................................................................................................22
5.5 Imagens como links........................................................................................................................23
5.6 Links para e−mail...........................................................................................................................24
5.7.1 Exercício 1:............................................................................................................................24
i
Índice
6 Tabelas...........................................................................................................................................................25
6.1 Introdução.......................................................................................................................................25
6.2 Apresentando o conteúdo com tabelas............................................................................................25
6.3 Inserindo uma tabela.......................................................................................................................25
6.4 Adicionando conteúdo a uma célula da tabela................................................................................26
6.5 Exibindo e definindo propriedades da tabela..................................................................................27
6.6 Exibindo e definindo propriedades de célula, linha e coluna.........................................................28
6.7 Redimensionando tabelas................................................................................................................28
6.8 Mesclando células...........................................................................................................................30
6.10 Aninhando tabelas.........................................................................................................................32
6.11 Utilizando tabelas para trabalhar com imagens fatiadas...............................................................33
7 Formulários...................................................................................................................................................35
7.1 Introdução.......................................................................................................................................35
7.2 Entendendo o funcionamento dos formulários...............................................................................35
7.3 Conhecendo os objetos dos formulários.........................................................................................35
7.4 Criando um formulário...................................................................................................................37
7.5 Utilizando os campos do formulário...............................................................................................37
7.6 Inserindo caixas de seleção e botões de rádio.................................................................................39
7.7 Inserindo listas e menus..................................................................................................................40
7.8 Adicionando botões de formulário..................................................................................................42
7.9 Inserindo um objeto image..............................................................................................................43
7.10 Adicionando o objeto file..............................................................................................................43
8 Frames............................................................................................................................................................45
8.1 Introdução.......................................................................................................................................45
8.2 O que são frames.............................................................................................................................45
8.3 Decidindo se as molduras devem ser usadas..................................................................................45
8.4 Criando páginas da web com molduras..........................................................................................46
8.5 Redimensionando molduras em um conjunto de molduras............................................................47
8.6 Editando o conteúdo de uma moldura............................................................................................47
8.7 Controlando o conteúdo de uma moldura com links......................................................................48
8.8 Inserindo frames inline...................................................................................................................49
9 Recursos de Multimídia................................................................................................................................51
9.1 Introdução.......................................................................................................................................51
9.2 Inserindo áudio................................................................................................................................51
9.3 Inserindo vídeo................................................................................................................................52
9.4 Inserindo animações em Flash........................................................................................................52
10 CSS − Folhas de Estilo................................................................................................................................54

10.1 Introdução.....................................................................................................................................54
10.2 Entendendo as folhas de estilo......................................................................................................54
10.3 Criando estilos..............................................................................................................................54
10.4 Estilos incorporados......................................................................................................................55
10.5 Estilos inline.................................................................................................................................56
10.6 Estilos vinculados.........................................................................................................................57
10.7 Exercício Proposto........................................................................................................................57
10.8 Tags personalizadas......................................................................................................................58
10.9 Aplicando estilo de formatação em Texto....................................................................................61
ii
Índice
11 Anexo − Código de Cores RGB..................................................................................................................66
iii
1 A Internet e suas características
1.1 Introdução
Internet − O foco do assunto abordado nesta obra, ou melhor, como produzir informações para este meio de
comunição, nos leva a refletir sobre os objetivos desta grande rede de computadores, que hoje se destaca
como a maior fonte de pesquisa do planeta.
A dimensão ocupada por esta mídia é tão extensa e difusa, que nos permite permanecer horas perdidos entre
as milhares de páginas espalhadas por todos os quatro cantos do mundo.
Veremos no decorrer destas páginas como funciona a Internet dos bastidores, podendo ao final da leitura, nos
aventurar por este submundo virtual, tanto fazendo uso de seus intermináveis assuntos, como também, sendo
parte deles.
Para isso, devemos compreender o funcionamento de um dos elementos da base da Internet: a linguagem
HTML. E este será nosso objetivo. Este trabalho está direcionado para a parte de programação de sites,
procurando construir um embasamento que será fundamental para a produção de páginas para a Internet,
podendo interagir em um segundo momento com linguagens de script Cliente e Servidor. Temas como design
de páginas, criação de animações e tratamento de imagens não serão abordados neste livro.
1.2 O que é a Internet?

A Internet é uma grande rede de computadores interligados, compartilhando diversos tipos de informações,
através de vários tipo de canais de reprodução, espalhados por toda a superfície terrestre e acessada por nós.
A princípio pode parecer desordenado e confuso, e realmente é, mas a Internet funciona sobre uma estrutura
de protocolos denominada TCP/IP, aos quais couberam a responsabilidade de tornar esta bagunça algo
relativamente fácil de usar.
Esta tecnologia surgiu em 1969, dentro das trincheiras militares dos Estados Unidos. Tinha o objetivo de
difundir informações de forma rápida pelo território americano, sem que elas pudessem se perder durante um
eventual combate, onde os meios de comunicação são os alvos principais. A Arpanet, como foi chamada no
início, conseguiu então, interligar vários computadores em diversas partes dos Estados Unidos, trafegando as
informações de forma completamente livre, ou seja, cada ponto da rede podia mandar e receber os dados, e
repassá−los para outros computadores sem ter ninguém gerenciando tudo isso. Dessa forma as informações
conseguiam coexistir em várias fontes, eliminando assim, o risco de se perderem.
Com o passar dos anos, isso tudo foi sendo disseminado e com o avanço da tecnologia, criação de
computadores menores e mais baratos, a Internet se tornou o que é hoje. Segundo dados das Nações Unidas
ONU, em pesquisa realizada no ano 2000, existiam 13,5 milhões de brasileiros conectados a Internet.
1.3 Tipos de acesso à Internet

Hoje em dia, existem várias formas de se conectar à Internet. Vejamos algumas:
• Acesso Dial Up este tipo de acesso é feito através de linha telefônica convencional. É necessário
estar conectado a um provedor de serviços que fará a ligação com a rede. É uma conexão instável e
provê baixas taxas de transmissão.
• ADSL(Asymetric Digital Subscriber Line) o acesso ADSL é a grande onda do momento. Além de
não ocupar a linha telefônica, permite acessos superiores a 6 Mbps(download) e conexão estável
durante 24 horas por dia.
1 A Internet e suas características 1

$LOGOIMAGE 1 A Internet e suas características
• TV a Cabo este acesso, quando realizado em cabeamento bidirecional, permite boas taxas de
transmissão e acesso 24 horas por dia.
• Rádio Freqüência o acesso via rádio é uma conexão wireless. Muito utilizado em edifícios, provê
acessos de até 10 Mbps e conexão 24 horas. É necessário a instalação de uma antena parabólica para a
conexão com o provedor de serviços.
• Satélite é uma conexão limitada, sujeita às variações do tempo e custo de equipamentos muito
caros. A taxa de transmissão pode atingir 500 Kbps.
1.4 Os recursos da Internet

A Internet não é só páginas com imagens e links. A Internet permite você se comunicar com outros usuários
através de e−mails e mais, por que não realizar esta comunicação em tempo real? Os chats estão aí pra isso.
Poderíamos acessar Listas de Discussões ou nos informar através de Newsgroups. É possível enumerar várias
outras formas de usufruir da Internet, inclusive criar outras maneiras de disseminar informações.
Vejamos algumas dessas formas:
• Correio Eletrônico: os e−mails, sem dúvida são a forma mais utilizada de se comunicar dentro da
grande rede. Cada pessoa pode ter o seu próprio endereço eletrônico e utilizá−lo para enviar
mensagens para quem desejar.
• Listas de Discussão: como o próprio nome enfoca, são páginas que dispõem de fórums para divulgar
opiniões e debater sobre os mais variados temas.
• Usenet Newsgroup: Muito parecido com as Listas de Discussão, funcionando sobre o protocolo
NNTP e sendo necessário o acesso a um servidor de News e um Messenger.
• FTP (File Transfer Protocol): o FTP, é utilizado para a transferência de arquivos. É através deste
serviço que podemos enviar os arquivos do nosso site para o servidor e vice−versa.
• Telnet: o telnet é um serviço que permite a conexão com outras máquinas em qualquer lugar. É como
se o usuário estivesse na própria máquina a qual se conectou, mas com acesso limitado, podendo
apenas visualizar arquivos em forma de texto.
• WWW: a World Wide Web, ou simplesmente Web, é onde passamos a maior parte do tempo quando
estamos conectados a Internet. A WWW é a grande responsável pela popularização da Internet. É
onde está toda a fonte de informação devidamente apresentada através de páginas, que se interligam
em uma malha sem início e fim.
1.5 Como funciona a Web

A Internet não possui um dono. Existe apenas um órgão que define regras para que haja uma harmonia de
funcionamento na rede. Este órgão é o W3C http://www.w3c.org.
O W3C regulamenta e rege a forma de como a Web deve se comportar e que padrões deve seguir para prover
serviços de forma totalmente compatível com as mais diversas tecnologias e sistemas existentes no mercado.
São através desses padrões estabelecidos que se garante a operacionalidade da Internet.
Basicamente, existem protocolos e linguagens padrões, que ao interagirem produzem este espaço virtual. A
base de todos os protocolos é o TCP/IP e a base de todas as linguagens de construção de Hipertexto é o
SGML, do qual o HTML é o subconjunto mais utilizado.
1.6 Os servidores
Quando digitamos no nosso navegador um determinado endereço de algum site, começa uma viagem muito
longa e rápida entre o nosso computador e os servidores de páginas.
1.4 Os recursos da Internet 2

Isso quer dizer que, ao escrevermos o endereço estamos solicitando um determinado arquivo que se encontra
no servidor. Suponhamos que queremos acessar a página da Sistemas Abertos.
Para isso, informarmos o endereço ao navegador, que é www.sistemasabertos.com.br. Neste instante, é feita
uma requisição ao servidor que contém a página. Se o arquivo existir neste servidor, então é encaminhado um
documento codificado ao browser, que o reproduzirá na tela do usuário. Caso o arquivo não exista, uma
mensagem de que a página não foi encontrada será enviada.
Os servidores mais utilizados para a finalidade de disponibilizar páginas web são:
• Apache®: sem dúvida é o servidor mais utilizado no mundo. É um software multiplataforma e

gratuito, embora o par Apache/Linux seja o mais comum, pela característica de serem softwares do
tipo OpenSource.
• IIS®: o IIS é o servidor web da Microsoft, possuindo características opostas ao seu concorrente, como
rodar apenas em ambiente Windows, embora não menos eficiente.
1.7 O que é uma URL

O endereço que digitamos agora há pouco, quando falamos dos servidores, é chamado de URL (Uniform
Resource Location). A URL é única para cada página que tentamos acessar e existe basicamente para facilitar
a lembrança dos inúmeros sites que acessamos.
Cada URL está ligada á um código de identificação que somente os servidores Web podem decifrar. É a
organização da rede. Esse código é chamado de TCP/IP.
O protocolo TCP/IP é um conjunto de 4 grupos de números, responsáveis por identificar cada

host(computador) dentro de uma rede. Em outras palavras, a URL é um apelido que damos para o
servidor(representado por um endereço IP). Isso é excelente porque podemos nos referir a um site sem ter que
nos preocuparmos em decorar um código numérico para cada um que queiramos acessar.
Vamos agora explorar ao máximo uma determinada URL:
http://www.sistemasabertos.com.br/news/noticias.php?id_not=25&titulo=HTML
Vamos separar este endereço em algumas partes:
• http:// − esta parte da URL representa o protocolo HTTP Hypertext Transfer Protocol, que é
responsável pela transferência de hipertextos pela rede. Hipertextos são outro nome que podemos dar
a páginas.
• www.sistemasabertos.com.br o endereço aqui representado, exatamente na forma como
costumamos digitar, na verdade é o servidor que contém a nossa página. Quando digitamos o
endereço acima, o servidor pesquisa qual é o endereço IP que possui aquele apelido e faz a pesquisa
nele.
• /news é um diretório virtual do servidor que irá conter o arquivo que queremos acessar.
• noticias.php é o próprio arquivo.
• ?id_not=25&titulo=HTML esta parte do endereço talvez possa parecer um pouco confusa, mas se
torna muito importante conhecê−la, a partir do momento que queremos trabalhar com outras
linguagens de script Cliente e Servidor. O ponto de interrogação(?) indica que estamos enviando para
o arquivo noticias.php, variáveis que serão necessárias para o carregamento perfeito da página. Quais
seriam essas variáveis? A primeira vem logo a seguir e é representada pelo nome id_not e possui o
valor 25. Temos na seqüência um e comercial(&), que informa que queremos passar nova variável.
Esta nova variável é chamada de titulo e possui o valor HTML.
1.7 O que é uma URL 3

A URL citada no exemplo não existe, mas vocês podem testar por exemplo, fazendo uma consulta em algum
site de busca. Verifiquem na URL mostrada após a pesquisa, alguns dos detalhes que acabamos de ver. Não se
preocupem com o entendimento sobre variáveis agora. Só será necessário a partir do momento que você
escolher uma linguagem para dinamizar o conteúdo do seu site.
1.8 O navegador
Falaremos agora um pouco sobre os navegadores.
Os navegadores são os programas Cliente que utilizamos para visualizar as páginas web. São eles que
conseguem se comunicar com os servidores de páginas e reproduzi−las no seu computador. Eles conseguem
entender todo o código HTML que compõem as páginas.
Os browsers, como também são chamados, mais utilizados são: Netscape Navigator, Internet Explorer,
Mozilla e Opera. Temos um outro grande número desses programas, cada um com suas características e
funções, mas sempre tendo como base a linguagem dos hipertextos. Neste livro usaremos um navegador de
sua preferência para testarmos todo o código que iremos produzir.
1.9 O que é HTML

Finalmente chegamos ao tópico principal deste livro: a linguagem HTML Hypertext Markup Language.
Muitos dizem que o HTML não é propriamente uma linguagem de programação, por não possuir estruturas de
controle, repetição ou armazena dados. Mas o fato é que, o HTML é composto de vários comandos
denominados tags que ao se unirem dentro de uma determinada lógica, produz um documento codificado
assim como qualquer outra linguagem.
Essa linguagem de marcação de hipertexto, como a tradução nos informa, é a base de toda representação
visual existente na Internet. Qualquer página, seja ela estática ou dinâmica, apresentará algum tipo de
formatação HTML.
Poderíamos dizer que sem o HTML não haveria informação na rede. Haveriam sim, muitos dados, mas sem
formatação, sem diagramação ou apresentação. Apenas texto puro. E convenhamos, não existiria esse fascínio
que possui hoje, fazendo com que seja a maior fonte de informação e comunicação do planeta.
A partir de agora começaremos a entender melhor tudo isso que falamos. Iremos construir páginas,
procurando trabalhar todas as possibilidades que a linguagem possa nos oferecer. E, dependeremos
exclusivamente de nossa criatividade para criarmos o nosso site. Bons estudos e nos vemos no Capítulo 2.
1.8 O navegador 4
2 Criando uma página
2.1 Introdução
Neste capítulo aprenderemos a escrever a nossa primeira página, utilizando comandos HTML. Veremos como
se deve estruturar um documento, suas partes principais, tags básicas e seus atributos. Para isso iremos utilizar
um editor de textos simples, como o notepad para escrevermos o código e um navegador de sua preferência,
para a visualização da página.
Lembre−se de salvar os seus arquivos somente como texto puro, sem nenhuma formatação específica do
editor que você esteja utilizando. Salve−o também com a extensão .htm ou .html.
2.2 Como o HTML Funciona

A linguagem de marcação de hipertexto, ou simplesmente HTML, é baseada em pares de comandos chamados
de tags.
As tags são comandos, aninhados dentro de sinais <>. Elas demarcam o início de uma determinada ação e
muitas vezes necessitam de uma outra tag, para sinalizar o fim da interação do comando. Essa tag de
finalização é uma cópia da tag de abertura, exceto pela barra que precede o comando. Veja:
Um exemplo de tag poderia ser o par de abertura e finalização de um documento HTML. Toda página web
possui um único par desses, sem exceção:
<HTML></HTML>
Ao escrevermos vários desses comandos, formatando e diagramando conteúdo, estamos produzindo páginas
para a Web.
As tags também possuirão atributos que poderão ter o valor modificado para melhor atender ao objetivo de
um determinado comando.Algumas tags não têm necessidade do seu par de fechamento. Neste caso, elas não
estariam realizando nenhuma ação específica, devendo então acrescentar algo ao conteúdo, como uma
imagem.Outras, não deverão fazer efeito, dependendo do navegador que o usuário esteja utilizando. Portanto,
é necessário fazermos uso das tags mais simples e comuns, para evitar que partes da nossa página não consiga
ser visualizada.
2.3 Entendendo os principais elementos de uma página

Como vimos no tópico anterior, possuímos a tag <HTML> </HTML> para demarcarmos todo o nosso código.
Mas o que estamos demarcando? Um documento HTML é composto de duas partes: cabeçalhos e o corpo da
página.
Os cabeçalhos armazenam informações sobre a página, como o título da página, meta−dados(veremos mais
sobre isso), estilos CSS e até scripts de outras linguagens.
Já a parte do corpo da página, irá representar tudo aquilo que for visível ao usuário. Todos os nossos textos,
imagens, links, tabelas e formulários estarão contidos neste bloco. A parte que permitirá a interação com o seu
visitante será declarada aqui.
2 Criando uma página 5

$LOGOIMAGE 2 Criando uma página
2.4 Inserindo tags HTML básicas

Vamos criar nossa primeira página. Iniciem um novo documento no editor de textos e o salvem com o nome
de PrimeiraPagina.htm. Lembrem−se de salvá−lo sem nenhuma formatação, somente como tipo texto.
Digitem o código abaixo para que possamos conhecer novos comandos. Acompanhem a seqüência passo a
passo logo abaixo do exemplo.
<HTML>
<HEAD>
<TITLE>Minha primeira página!!!</TITLE>
</HEAD>
</HTML>
Acompanhem agora, uma seqüência explicando passo a passo o código descrito acima.
Iniciamos o código com a tag <HTML> para informar que o documento é do tipo página para a Internet.
Logo em seguida utilizamos a tag <HEAD> para declarar os cabeçalhos que serão utilizados no
documento.
A tag <TITLE> representa o título da página e deve estar descrita dentro da tag de cabeçalhos. Abram o
documento no navegador e verifiquem o título da janela que está sendo exibido. É exatamente aquilo que foi
declarado na tag de títulos. Precisamos dizer ao código onde o título termina. Para isso utilizamos a tag de
fechamento </TITLE>, assim poderemos prosseguir com o resto do código.
Se não houverem mais cabeçalhos, então informamos o fim da declaração destes, escrevendo a tag
</HEAD> .
Finalmente, encerramos a nossa primeira página com o comando </HTML> .
2.5 Meta tags

Vimos no exercício acima, a declaração de cabeçalhos HTML, em especial o título da página. Como foi dito
anteriormente, a tag <HEAD> armazena diversos tipos de cabeçalho. Entre eles estão as meta tags.
Meta tags são pequenas informações úteis para indexar e categorizar páginas para serviços de busca. Possuem
ainda informações sobre o tipo de padrão W3C utilizado para construir a página e ainda pode fazer
direcionamentos e atualizar sua página de acordo com os parâmentros especificados.
Vamos alterar o exercício anterior para testarmos algumas meta tags.
<HTML>
<HEAD>
<TITLE>Minha primeira página!!!</TITLE>
<META name="Author" content="Nome do autor">
<META name="Description" content="Descrição da página">
<META name="Keywords" content="Palavras chave">
<META http−equiv="refresh" content="9;URL=http://www.sistemasabertos.com.br">
</HEAD>
<BODY>
Nosso endereço mudou. Aguarde uns instantes para acessar a nova página.
</BODY>
</HTML>
Agora vamos entender o que foi feito acima..
2.4 Inserindo tags HTML básicas 6

Já sabemos que devemos iniciar nossos códigos com a tag <HTML>. Se houverem cabeçalhos em nossa
página, eles deverão estar contidos dentro do bloco <HEAD>.
Incluímos no exercício algumas meta tags. As meta tags não possuem fechamento. Elas possuem atributos
que informam ao navegador exatamente o que ele precisa saber. Os atributos deve ser declarados no corpo da
meta tag e seu conteúdo deve estar entre aspas.
A primeira meta tag tem a propriedade name com valor Author. Isso significa que o conteúdo existente
na propriedade content terá informações sobre o autor da página, ou a pessoa que escreveu o código.
Logo em seguida, temos a meta tag Description. Seu conteúdo guardará uma breve descrição sobre o
assunto da página. Isso será muito útil para os serviços de busca.
A meta tag Keywords tem comportamento semelhante à meta Description. Só que agora
armazenamos palavras chaves que irão facilitar as buscas realizadas na Internet. Seu site será encontrado com
maior precisão através dessas keywords.
Finalmente temos a meta tag Refresh. Aqui temos uma ação a ser realizada pelo browser. Informamos que
ao passar de 9 segundos, a página será direcionada para o endereço descrito. Se quisermos apenas que a
página seja recarregada em certos intervalos de tempo, eliminamos a parte que se refere à URL. É um recurso
muito utilizado em sites de notícias, que atualizam suas informações freqüentemente. Observe também que a
propriedade name foi substituidada pela http−equiv informando ao navegador que esta propiedade é um
cabeçalho Http.
Temos também uma outra tag codificada no exercício. A tag <BODY> representa tudo aquilo que será
visível ao usuário. Colocamos um texto para testar a meta tag Refresh. É dentro da tag <BODY> que se
concentrará o conteúdo deste livro.
Para encerrrarmos a página, precisamos lembrar de fechar todas as tags abertas.
Abram esta página no seu navegador e aguarde alguns segundos para ser redirecionado para a página
especificada.
2.6 Adicionando atributos às tags

As tags HTML, às vezes precisam de informações extras que poderão variar de acordo com a formatação
desejada em cada seção da página. A essas informações damos o nome de propriedades.
Cada tag poderá ter um conjunto de propriedades que lhe proporcionará melhor caracterização. Essas
propriedades devem ser declaradas junto com a inicialização da tag e seus valores estarão acondicionados
entre aspas.
Veja o exemplo:
<BODY bgcolor="#FF0000">
...
</BODY>
2.7 Alterando a cor de fundo da página

Vamos acrescentar alguns atributos ao exercício. Altere a tag <BODY> com os atributos abaixo e verifique
como ela se comportará.
<BODY bgcolor="#FFFF00" text="#0000FF">
2.6 Adicionando atributos às tags 7

No caso descrito acima, alteramos a cor de fundo da página propriedade bgcolor para ser visualizada com
a cor: #FF0000 e também dissemos que a cor dos textos existentes no corpo do documento terão a cor
#0000FF.
As cores que utilizamos na nossa página estão em código hexadecimal. Cada cor tem o seu próprio código e o
padrão de cores RGB. Veja no final do livro, o anexo sobre cada cor e seu respectivo código hexadecimal. As
cores mais comuns podem ser escritas com o seu nome equivalente em inglês. Veja o exemplo:
<BODY bgcolor="yellow" text="blue">
A tag <BODY> suporta várias outras propriedades, mas só veremos no decorrer do livro, quando
aprenderemos quando elas poderão ser utilizadas. Observe a descrição de cada uma:
<BODY link="#333333" vlink="#009966" alink="#FF0000">

<BODY leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
As propriedades link, vlink e alink dizem quais cores os links assumirão quando eles estiverem no estado
inicial, quando for um link que já foi visitado e quando ele estiver ativo, respectivamente.
Já as propriedades leftmargin, topmargin, marginwidth e marginheight representam as margens esquerda,

superior, direita e inferior a serem utilizadas na página. As margens deve ser especificadas em pixels.
Podemos utilizar todas essas propriedades juntas ou somente aquelas que precisarmos efetivamente.
Agora altere as cores de fundo da página e dos textos. Acrescente mais texto dentro da tag <BODY> e altere
também as margens. Verifique o resultado.
2.8 Visualizando sua primeira página

Para visualizar páginas de Internet, precisamos de um navegador que irá interpretar os código escritos em
HTML. Os arquivos de páginas deve ter a extensão .htm ou .Html.
Como nossas páginas ainda não estão no servidor, precisamos carregar o arquivo no browser. Clique em
arquivo e depois abrir. Selecione o arquivo desejado e clique em ok. Não é necessário repetir essa operação a
cada alteração da página. Os navegadores possuem comandos para atualizar a página corrente sem a
necessidade de abrir o arquivo novamente. Verifique a melhor forma de executar esta atualização no seu
navegador.
2.9 Exercício Proposto

− Digite o código abaixo e salve−o como ex1.htm.
<HTML>
<HEAD>
<TITLE>Documento com fundo azul!!</TITLE>
</HEAD>
<BODY bgcolor="#0000FF" text="#00FF00">
Página com fundo e texto coloridos!
</BODY>
</HTML>
− Agora faça as seguintes alterações:
• Altere a cor de fundo

• Altere a cor do texto
2.8 Visualizando sua primeira página 8

• Utilize meta tags e direcione a página para um site qualquer

• Retire a tag </BODY>
2.8 Visualizando sua primeira página 9

3 Formatando o Texto
3.1 Introdução
No Capítulo 2, aprendemos como deve ser a estrutura de um documento HTML, que deve ser composta por
dois blocos de códigos: os cabeçalhos, representados pela tag <HEAD>, e o corpo do documento, utilizando a
tag <BODY>. Aprendemos também, como declarar uma tag e suas propriedades, que poderão ser definidas de
acordo com a necessidade de formatação.
Agora veremos como trabalhar com texto dentro da página. Formatação do texto, alinhamento e listas serão
algumas das tags que trabalharemos neste capítulo.
A partir de agora, será exibida uma lista com as propriedades de cada tag e suas funções. Os exercícios não
deverão contemplar todas, mas você pode e deve testar o maior número de opções possíveis, para aprimorar
seus conhecimentos da linguagem.
3.2 Formatando o texto

Podemos inserir textos nas nossas páginas apenas escrevendo−os diretamente no código, sempre dentro da tag
body, como fizemos no Capítulo 2. Dessa forma possuiremos um texto simples, sem formatação especial,
alinhamento ou cor. Não poderíamos destacar uma determinada parte do texto, indicando um título, por
exemplo.
Vamos utilizar agora, tags que podem ser muito úteis quando queremos exibir um certo destaque ao nosso
texto:
Tags − comandos Formatação

<b></b> negrito
<strong></strong> negrito
<i></i> italico
<em></em> italico
<s></s> riscado
<u></u> sublinhado
<sub></sub> nota inferior − exibe o texto em forma de nota de "rodapé"
nota superior
<sup></sup> − exibe o texto em forma de potência
O HTML possui várias outras tags de formatação de texto, mas um pouco menos comuns. Antes de
trabalharmos as novas tags que acabamos de aprender, precisamos abrir um parênteses sobre como funciona a
diagramação do texto dentro da página.
As quebras de linhas e espaços inseridos atráves do uso das teclas ENTER ou SPACE do seu teclado não
terão efeito visual na página.
A linguagem HTML interpreta apenas um espaço entre cada palavra ou caracter ou outro elemento da
linguagem. Se quisermos inserir mais de um espaço temos uma tag especial para isso. É a tag . Cada
significa um espaço visual na página.
Assim acontece também com as quebras de linha. O uso de ENTER com a intenção de quebra de linha não
terá efeito na diagramação da página. Para fazer isso utilize a tag <br>. Cada <br> dentro do código
representará uma quebra de linha. Detalhe, esta tag não possui seu par de fechamento.
3 Formatando o Texto 10
$LOGOIMAGE 3 Formatando o Texto
Monte o exemplo a seguir e visualizem no seu web browser como texto está sendo apresentado. Salve o
arquivo, atribua o nome de conteudo.htm.
<HTML>
<HEAD>
<TITLE>Formatando o texto!!!</TITLE>
</HEAD>
<BODY>
<strong>HTML − <s>Sistemas Abertos</s></strong><br>
<br>
Esta é a página do Curso de HTML<sup>1</sup>.<br>
O <u>HTML</u> é a linguagem para a construção de páginas
para a <i>Internet</i>.<br>
<br>
<b>HTML</b>: Hypertext Markup Language
</BODY>
</HTML>
Observem o aninhamento de tags, sempre lembrando de finalizar cada uma delas, de acordo com a sua
exigência. Modifiquem o exemplo inserindooutras tags ao texto. Depois verifiquem o resultado.
3.3 Criando títulos e sub−títulos

Na linguagem HTML existem tags que, ao serem aplicadas no texto, caracteriza o mesmo em formato de
títulos. Podemos formatar um texto para assumir o status de título, utilizando a seguinte tag:
• <hn></hn> − onde n é o nível do título ou sub−título, lembrando que o título de maior expressão é o
primeiro(<h1>), e o de menor, o último(<h6>).
<h2>Isto é um título de nível 2</h2>
Vejamos agora uma nova tag que posiciona um determinado elemento HTML, seja ele texto, imagem, tabela
ou qualquer outro, na região central da página.
Como estamos trabalhando com textos, nosso exemplo será baseado na centralização desse elemento. A tag
em questão é a:
• <center></center> − centraliza o elemento contido entre as tags.
3.4 Alterando a formatação da fonte

Já aprendemos como inserir textos nas nossas páginas, como informar que uma parte desse texto deve assumir
uma determinada característica e também como dizer se o texto é um título.
Porém, tudo isso ainda é pouco se quisermos uma página mais apresentável. Parar escolher o tipo de fonte que
queremos utilizar, seu tamanho e suas cores,basta utilizar a tag <font>. Esta tag possui algumas propriedades,
exatamente aquelas que acabamos de mencionar. Vejamos alguns exemplos:
<font face="Verdana" size="3" color="#FF0000">Texto</font>

<font face="Verdana, Arial" color="#FF00FF">Texto</font>
<font color="#C4C4C4">Texto</font>
onde:
• face a propriedade face define qual é a fonte que queremos utilizar no nosso texto. Neste caso
utilizamos a fonte Verdana. Poderíamos especificar mais de uma, separando−as por uma vírgula. Caso
3.3 Criando títulos e sub−títulos 11

não seja possível ao seu web browser utilizar a primeira, a especificação no HTML de uma segunda
opção, permitiria o uso desta e assim por diante. Lembre−se de sempre utilizar fontes mais comuns e
padrão, para evitar que sua página sofra uma descaracterização pelo fato do sistema usuário não
possuir determinada fonte.
• size com esta propriedade informamos qual é o tamanho da fonte a ser utilizada no nosso texto. O
size varia de 1 a 7 e funciona de forma inversa aos tamanhos dos títulos. Aqui a menor fonte é a de
tamanho 1 e a maior, tamanho 7, seu tamanho real depende do browser .
• color como o nome sugere, podemos definir qual a cor assumida pelo texto, expressada
preferencialmente em código hexadecimal.
Se quisermos inserir uma certa identação ao texto, para que ele fique a uma certa distância do elemento que o
contém, no nosso caso a própria página, utilizamos a tag <blockquote>.
<blockquote>Texto identado</blockquote>
Coloque em prática o que aprendemos, modificando o exemplo anterior, de forma que ele se apresente mais
interessante aos olhos do usuário.
<HTML>
<HEAD>
<TITLE>Formatando o texto!!!</TITLE>
</HEAD>
<BODY bgcolor="#FFFFCC">
<center><h3>HTML − Sistemas Abertos</h3></center>
<blockquote>
<font face="Verdana" size="3" color="#000000">
Esta é a página do
<font color="#FF0000">Curso de HTML</font>
<sup>1</sup>.<br>
O <u>HTML</u> é a linguagem para a
construção de páginas para a
<i>Internet</i>.<br>
<br>
<b>HTML</b>: Hypertext Markup Language
</font>
</blockquote>
</BODY>
</HTML>
3.5 Fazendo parágrafos

Os parágrafos no HTML têm a mesma função que em um texto digitado em um editor de textos qualquer.
Podemos visualizar a disposição do texto entre vários parágrafos, a principal função deles no Html será o
alinhamento do texto.
A tag <p> nos diz que o texto inserido dentro dela e de seu par de fechamento é um parágrafo. Este parágrafo
possui uma propriedade que é o alinhamento (align). O alinhamento pode ser centralizado (center), à esquerda
(left), à direita (right) e justificado (justify). Observe:
<p align="left">
Utilizando Parágrafos
</p>
<p align="justify">
O texto inserido aqui será apresentado com alinhamento
justificado. Podemos utilizar outros três tipos de alinhamento:
centralizado, utilizando o valor center para a propriedade
3.5 Fazendo parágrafos 12

align, alinhado à esquerda, com o valor left para a mesma
propriedade, e se quisermos, podemos ainda alinhar o texto à
direita, informando o valor right para a propriedade align.
</p>
<p align="right">
Veja o texto alinhado à direita!!!
</p>
3.6 Trabalhando com texto pré−formatado

Como foi mencionado anteriormente, o HTML não interpreta os vários espaços e as quebras de linhas quando
utilizamos as teclas SPACE e ENTER. Quando queríamos mostrar visualmente esses elementos, utilizávamos
a tag para cada espaço pretendido e a tag <br> para cada quebra de linha.
Porém, existe uma tag que imprime o texto na tela exatamente como o digitamos no código,respeitando todos
os espaços, tabulações e quebras de linha, sem que para isso seja necessário utilizar as tags descritas acima.
Estamos falando da tag <pre>. Esta tag não altera a formatação dos textos do documento, apenas preserva sua
diagramação de acordo com a forma que foi digitada.
− <pre>
− Ao utilizarmos a tag pre,
− podemos escrever da forma
− como queremos ver na tela,
− sem nos preocuparmos com espaços
− ou quebras
− de linha, ou
− tabulações.
− </pre>
3.7 Inserindo uma linha horizontal

Para inserirmos uma linha horizontal, que poderá ser utilizada como separador entre várias partes do texto,
declaramos a tag <hr>.
A tag <hr> possui alguns parâmetros como comprimento, espessura, cor, sombra.
<hr align="center" width="400" size="10" noshade color="#0000FF">
Neste exemplo utilizamos vários atributos que serão explicados agora.
• align posiciona a linha de acordo com os valores dados: pode ser center, right ou left.
• width representa o comprimento da linha, podendo ser expressado em pixels ou porcentagem
relativa ao tamanho da tela ou ao elemento que contém a linha horizontal.
• size define a espessura da linha, neste caso especial, 10 pixels.
• color é a cor da linha, sempre dando preferência às cores expressas em código hexadecimal.
• noshade neste caso, queremos dizer não haverá sombreamento na linha. Caso o queiramos, basta
omitirmos esta propriedade.
3.8 Listas
O conceito de listas em HTML significa estar diagramando tópicos em formatos de marcadores. Temos três
tipos de listas: numeradas, não numeradas e uma lista de definição de termos. Vamos entender cada uma
delas:
3.6 Trabalhando com texto pré−formatado 13

• Listas numeradas: esta lista exibe os tópicos com marcadores numéricos. A tag de declaração de
listas numeradas é <ol> e cada tópico é uma tag <li>.
• Listas não numeradas: as listas não numeradas são declaradas com a tag <ul>, e também possui um
<li> para cada tópico desta lista.
Observação: a tag <li> deve estar contida dentro da tag <ol> ou <ul>, formando uma certa hierarquia na
declaração.
• Listas de definição de termos: esta lista trabalha com a idéia de que um certo termo textual possui um
significado que deve ser apresentado ao usuário. A tag que declara uma lista de definição de termos é
a <dl>. Cada termo é representado pela tag <dt> e o seu significado é dado pela tag <dd>.
Escreva o exercício abaixo para visualizar o funcionamento de cada uma das listas acima.
<HTML>
<HEAD>
<TITLE>Trabalhando com listas!!!</TITLE>
</HEAD>
<p><b>Carreira Desenvolvedor Web − Programa</b></p>
<ol>
<li>Lógica de Programação</li>
<li>HTML</li>
<li>JavaScript</li>
<li>PHP</li>
<li>PHP Avançado</li>
</ol>
<p><b>Curso de HTML Total − Programa</b></p>
<ul>
<li>Dia 1 − Introdução</li>
<li>Dia 2 − Links e Tabelas</li>
<li>Dia 3 − Frames</li>
<li>Dia 4 − Formulários</li>
<li>Dia 5 − CSS</li>
</ul>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>PHP</dt>
<dd>Hypertext Pre Processor</dd>
<dt>CSS</dt>
<dd>Cascade Style Sheets</dd>
</dl>
</BODY>
</HTML>
3.9 Marquee
Existem algumas tags HTML que são restritas a um browser específico. Isso quer dizer que, quando as
usamos podem não funcionar em alguns navegadores. A tag marquee é um desses casos.
Ao utilizarmos esta tag, estamos informando ao navegador, que o texto que ela contém terá um movimento de
deslizar pela tela. Atenção: a tag <marquee> só funciona no Internet Explorer.
A característica do movimento e suas direções são definidas pelas propriedades a seguir:
• behavior a propriedade behavior pode ter três valores, admitindo que ainda não declaramos a
propriedade direction:
♦ alternate o texto começa o seu movimento da direita para a esquerda e continua até
alcançar o lado esquerdo, retornando à direita novamente em um vai e vem sem fim.
3.9 Marquee 14
♦ scroll o valor scroll para a propriedade behavior, indica que o movimento iniciará do lado
direito e atravessará o lado esquerdo, reaparecendo novamente no lado direito, realizando
aquilo que podemos dizer, ser uma trajetória circular.
♦ slide utilizando este valor, o texto iniciará seu movimento pela direita e será executado até
atingir a borda direita, onde deverá parar.
• direction esta propriedade define a direção que o texto deverá seguir quando iniciar seu movimento.
Temos quatro direções possíveis:
♦ down o texto deslizará de cima para baixo.
♦ left o movimento será da direita para a esquerda.
♦ right o movimento será da esquerda para a direita.
♦ up o texto deslizará de baixo para cima.
• width a propriedade width representa o comprimento da área de deslizamento. Pode ser expressa em
pixels ou porcentagem, neste caso, sempre em relação ao local que contiver o texto.
• height define a espessura ou a altura da área de deslizamento. Também pode ser expressa em pixels
ou porcentagem, porém é mais comum a primeira opção.
• bgcolor é a cor de fundo da área imaginária onde o texto estará deslizando. É recomendável a
utilização das cores em formato hexadecimal.
Antes de colocarmos em prática estes novos elementos, é de bom tom, apresentar−lhes um concorrente da tag
<marquee>. É necessário dizer que esta nova tag só terá efeitos no Netscape. Estamos falando da tag <blink>.
A tag <blink> mostra o texto piscando na tela. Sua sintaxe é a seguinte:
<blink>Texto piscando!!!</blink>
Como dissemos anteriormente, é muito importante utilizarmos fontes que sejam comuns e possam ser
encontradas facilmente. Esta observação serve também para os casos em que determinadas tags não se
aplicam de forma geral.
Ao utilizarmos um código padrão, estamos garantindo que nossas páginas poderão ser visualizadas
corretamente em qualquer navegador.
Vamos exercitar um pouco a tag marquee.
<HTML>
<HEAD>
<TITLE>Utilizando o Marquee!!!</TITLE>
</HEAD>
<center>
<marquee behavior="scroll" direction="up" width="50%" height="60" bgcolor="#00000
<font face="Verdana" size="3"
color="#FFFF00">
Isto é um exemplo da tag Marquee
</font>
</marquee>
</center>
</BODY>
</HTML>
Modifique o exemplo, coloque suas preferências visuais.
3.9 Marquee 15

− Escreva o código necessário para a construção da figura abaixo, salve−o como ex2.htm e:
• Transforme a lista em uma lista ordenada

• Teste diferentes atributos das linhas horizontais
• Teste diferentes atributos do marquee
3.10 Exercício Proposto 16

4 Trabalhando com Imagens
4.1 Introdução
Trabalhando com imagens será o capítulo onde aprenderemos como utilizar racionalmente a inclusão de
imagens dentro das nossas páginas.
As imagens devem ser utilizadas com muita cautela dentro de um site, porque podem tornar o acesso muito
demorado e cansativo aos olhos do usuário. Na programação atual, muitos dos efeitos produzidos pelas
imagens, foram cedendo espaço para a utilização das folhas de estilo (veremos em capítulo mais adiante), por
fazerem parte da programação e não sobrecarregar a visualização de páginas muito pesadas.
Com o recurso do uso de Tabelas, veremos em capítulo mais adiante, podemos fatiar uma imagem muito
grande de forma que ela seja carregada em partes.
4.2 Gráficos da Web

Os browsers suportam apenas alguns tipos de imagens, sendo os mais comuns: gif, jpeg e png.
Isso significa que todos os gráficos(imagens) que forem utilizadas nas nossas páginas deverão estar em um
desses formatos.
4.3 Inserindo imagens

A tag de inserção de imagens que o HTML possui é a seguinte:
<img src="nome da imagem">
Veremos então, quais as propriedades que nos permitirão um maior controle deste elemento.
• src define o nome da imagem e a localização dentro da árvore de diretórios do site.

• width especifica a largura da imagem.
• height especifica a altura da imagem.
• alt exibe um texto informartivo ao se passar o mouse sobre a imagem.
• border define a borda da imagem.
• align alinhamento da imagem (align = left/right) ou do texto em relação à imagem (align =
top/middle/bottom)
• lowsrc o Netscape e o Internet Explorer, conseguem carregar uma imagem alternativa, em baixa
resolução para resolver o problema do carregamento de imagens muito grandes.
Vamos inserir nossa primeira imagem dentro da nossa página. Escrevam o código abaixo e visualizem no
navegador.
<HTML>
<HEAD>
<TITLE>Trabalhando com imagens!!!</TITLE>
</HEAD>
<img src="logosa.gif">
</BODY>
</HTML>
4 Trabalhando com Imagens 17

$LOGOIMAGE 4 Trabalhando com Imagens
4.4 Inserindo imagens de fundo

No Capítulo 2(ArtigoCriandoUmaPagina), vimos que a tag <body> tinha uma propriedade que permitia que
uma imagem fosse inserida como background da página. Acrescentem o código abaixo para colocarmos uma
imagem como fundo da nossa página.
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="#FFFFCC" background="img_back.gif">
<img src="logosa.gif">
</BODY>
</HTML>
4.5 Centralizando a imagem

Para termos a imagem centralizada em relação à página, só precisamos colocá−la entre as tags
<center></center>.
<HTML>
<HEAD>
</HEAD>
<center><img src="logosa.gif"></center>
</BODY>
</HTML>
4.6 Exibindo textos alternativos

Todos já devem ter observado que ao passarmos o mouse em cima de alguma imagem, imediatamente aparece
um pequeno retângulo amarelo com alguma informação sobre a imagem. Esse efeito é devido ao uso da
propriedade alt. Modifique o exercício anterior e depois testem no navegador.
<HTML>
<HEAD>
</HEAD>
<center>
<img src="logosa.gif" alt="Texto informativo">
</center>
</BODY>
</HTML>
4.7 Ajustando o tamanho da imagem

Ao inserirmos uma imagem ná página, ela irá se mostrar exatamente do tamanho que ela é. Às vezes isso se
torna um pouco incômodo, principalmente se temos várias imagens para o usuário carregar.
Podemos então, criar thumbnails(imagens reduzidas) para facilitar o carregamento de todas as imagens e
ainda dar uma opção ao usuário, de ao clicar em cima da imagem que ele quer ver, essa imagem seja então
carregada no tamanho natural. Isso é feito com o auxílio das propriedades width e height.
A redução ou o aumento forçado de uma imagem pode causar uma certa deformação na mesma. Lembre−se
de reduzí−la ou aumentá−la proporcionalmente.
4.4 Inserindo imagens de fundo 18

$LOGOIMAGE 4 Trabalhando com Imagens
<HTML>
<HEAD>
</HEAD>
<center>
<img src="img_aurora.jpg" alt="Imagem reduzida"
width="115" height="100"><br><br>
<img src="img_aurora.jpg" alt="Imagem normal">
</center>
</BODY>
</HTML>
4.8 Formatando imagens com textos

Até aprendermos a utilizar tabelas no HTML, precisaremos utilizar recursos que a tag <img> fornece, para
podermos alinhar textos em relação às nossas imagens, o que poderia se tornar uma tarefa indigesta se não os
possuíssemos. Escrevam o código abaixo.
<HTML>
<HEAD>
</HEAD>
<img src="logosa.gif" width="161" height="26"
alt="Sistemas Abertos"><br><br>
align="right">
Imagem à direita do texto<br><br>
<img src="logosa.gif" border="1">
Imagem com borda<br><br>
align="middle">
Texto alinhado ao meio<br><br>
</BODY>
</HTML>

− Digite o código abaixo, salve−o como ex3.htm e:
• Selecione imagens no formato jpeg ou gif e substitua os nomes "figura" colocados nas tags <img>
• Combine diferentes atributos para as imagens
• Escreva os atributos de cada figura
<HTML>
<HEAD>
<TITLE>Utilizando figuras!</TITLE>
</HEAD>
<BODY bgcolor="#C0C0C0">
<img src="FIGURA">
<br><br>
<img src="FIGURA">
<br><br>
<img src="FIGURA">
<br><br>
<img src="FIGURA">
<br><br>
</BODY>
</HTML>
4.8 Formatando imagens com textos 19

5 Links
5.1 Introdução
Já vimos que a Internet é uma imensidão de páginas interligadas em uma teia de documentos. E mais, essas
ligações não possuem em um ponto final, onde seria possível dizer: a Internet acaba aqui. Tudo isso é devido
a uma característica da linguagem HTML, que são os hyperlinks ou simplesmente links..
Os links são ligações de uma página para outra ou até mesmo um link para ela mesma. E essas páginas que
foram requisitadas por um link, também possuirá vários outros links que levarão a novas páginas e assim por
diante. É uma navegação que nunca acaba. Quanto mais navegamos, mais a Internet se agiganta.
5.2 O que é e como funciona

Os links são tags comuns HTML. Eles possuem uma tag de abertura e outra de fechamento. Sua principal
característica é uma propriedade onde podemos especificar o local para onde o usuário irá quando ele clicar
no link.
Sua sintaxe básica é a seguinte, <a href=local de destino>Nome do link</a> onde href é a propriedade que
armazena a página de destino do usuário, e o Nome do link, o texto clicável que será a chamada do
link:Vamos praticar um pouco.
<HTML>
<HEAD>
<TITLE>Trabalhando com links!!!</TITLE>
</HEAD>
<center>
Clique aqui para visitar o site da
<a href="http://www.sistemasabertos.com.br">
Sistemas Abertos
</a>
</center>
</BODY>
</HTML>
Observação: na propriedade href podemos ligar tanto páginas externas ao nosso servidor, como o exercício
acima faz, como também arquivos da nossa própria página e até arquivos para downloads. Veremos como isso
irá influir na declaração do código no tópico seguinte.
5.3 Links relativos e links absolutos

Quando falamos em links relativos ou links absolutos, estamos nos referindo a como expressar o valor de href
se tivermos que ligar páginas do nosso próprio site, ou páginas que se encontram fora do nosso site.
Os links absolutos servem para fazermos uma chamada a uma página que está fora do nosso site, como por
exemplo, o exercício anterior. Neste caso, é necessário especificarmos o link por completo, desde o protocolo
http. Se colocarmos apenas www.sistemasabertos.com.br, não estará correto.
Já quando o destino for uma página que pertence à nossa própria página, e estiver armazenado no próprio
servidor, basta que o nome do arquivo e seu caminho seja referenciado. Precisamos entender melhor como
funciona a nossa estrutura de diretórios.
Imaginem a seguinte árvore de diretórios:
5 Links 20
$LOGOIMAGE 5 Links
• /www/
♦ nosso_site/
◊ imagens/
◊ scripts/
◊ index.htm
◊ ex1.htm
◊ ex2.htm
◊ news/
⋅ news.htm
Queremos que nossa página principal, chamada de index.htm, tenha um link para a página ex2.htm. Observem
que eles estão no mesmo nível na árvore de diretórios. Neste caso, para criarmos o link, basta especificarmos
o nome do arquivo que queremos chamar. Veja a sintaxe a seguir (este código deverá ser colocado na página
index.htm):
<a href="ex2.htm">Link para a página Ex2</a>
Agora, suponhamos que a página ex2.htm tenha um link para a página news.htm. A página de origem e a
página de destino não estão no mesmo nível. Temos que acessar o diretório news para ver a página. É preciso
informar todo o caminho para o link.
Atenção: páginas web não trabalham com letras de unidades, como a sintaxe seguinte. Os servidores web não
aceitam essa declaração: c:\www\nosso_site\news\news.htm. Então como deve ser feito? Observem agora:
<a href="news/ex2.htm">Link para a página Ex2</a>
Da mesma forma, o caminho inverso também requer que o endereço seja declarado nestes termos. Agora, a
página news.htm, tem um link para a página ex1.htm. Utilizaremos um duplo ponto para informar que
estamos saindo do diretório news, e aí sim, poderemos acessar a página ex1.htm.
<a href="../ex1.htm">Link para a página Ex1</a>
Vamos então criar alguns arquivos para podermos trabalhar com links. É recomendável salvar os arquivos
com os mesmos nomes utilizados aqui, para que o código seja executado com perfeição.
pagina1.htm(salvem no diretório de trabalho)
<HTML>
<HEAD>
</HEAD>
<b><i><font face="Verdana" size="2">
Trabalhando com links − PÁGINA 1
</font></i></b>
<br><br>
<a href="pagina2.htm">Página 2</a><br>
<a href="links/pagina3.htm">Página 3</a><br>
</BODY>
</HTML>
pagina2.htm(salvem no diretório de trabalho)
<HTML>
<HEAD>
</HEAD>
5 Links 21
$LOGOIMAGE 5 Links
</font></i></b>
<br><br>
</BODY>
</HTML>
pagina3.htm(criem um diretório chamado links e salvem a pagina3.htm dentro dele)
<HTML>
<HEAD>
</HEAD>
</font></i></b>
<br><br>
<a href="../pagina1.htm">Página 1</a><br>
</BODY>
</HTML>
Abram no navegador o arquivo pagina1.htm e utilizem os links criados para acessar todas as páginas.
5.4 Links para uma seção da página

Os links não ligam apenas outras páginas, sejam elas pertencentes ao nosso site ou simplesmente uma página
externa ao nosso servidor. Os links também podem levar a uma determinada parte da própria página que o
chama.
Essas seções específicas que são chamadas pelos links têm o nome de âncoras. Para utilizarmos as âncoras,
temos que aprender uma nova propriedade da tag <a>:
• name utilizamos esta propriedade para dar um nome à seção que queremos linkar. A âncora deve
ser criada da seguinte forma:
<a name="nome_secao">
Quando a âncora estiver criada, agora precisamos criar o link que a chamará. É só acrescentar o sinal # na
frente do nome da âncora:
<a href="#nome_secao">Clique aqui para ir para a seção desejada</a>
Se for uma âncora de um outro arquivo, precisaremos chamar o arquivo e a âncora juntas:
<a href="pagina.htm#nome_secao">
Clique aqui para ir para a seção desejada
no arquivo pagina.htm
</a>
Vamos editar os exercícios pagina2.htm e pagina3.htm, que fizemos anteriormente. Teremos que acrescentar
conteúdo suficiente para que seja criado uma certa barra de rolagem e possamos navegar na própria página.
Para isso, acrescentem várias vezes a tag <br> ou texto, para forçar a situação desejada:
pagina2.htm
5.4 Links para uma seção da página 22

$LOGOIMAGE 5 Links
<HTML>
<HEAD>
</HEAD>
</font></i></b>
<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a name="fim">Fim da Página</a>
</BODY>
</HTML>
pagina3.htm
<HTML>
<HEAD>
</HEAD>
</font></i></b>
<br><br>
<a href="#fim">Clique aqui para ir ao fim desta página</a>
<a href="../pagina2.htm#fim">Clique aqui para ir ao fim
do exercício pagina2.htm
</a>
<a name="fim">Fim da Página</a>
</BODY>
</HTML>
5.5 Imagens como links

Vocês já viram que alguns links nas inúmeras páginas que já navegaram, não eram texto, como estamos
trabalhando, e sim imagens. Isso mesmo! As imagens do nosso site também pode ser utilizadas como links.
Ao inserirmos imagens ao invés do texto dentro da tag <a>, temos então, uma imagem que também é um link.
Vamos editar o arquivo pagina1.htm.
pagina1.htm
<HTML>
<HEAD>
</HEAD>
</font></i></b>
<br><br>
<a href="links/pagina3.htm">Página 3</a><br><br>
5.5 Imagens como links 23

$LOGOIMAGE 5 Links
Clique na imagem para visitar a Sistemas Abertos<br><br>
</a>
</BODY>
</HTML>
5.6 Links para e−mail

Finalmente, temos uma certa característica da tag <a> que induz o link a chamar um programa cliente de
e−mail, como Evolution ou Outlook Express e preencherá o campo de destinatário, com o valor da
propriedade href.
Este tipo de sintaxe, embora muito utilizado, não é recomendável. Uma vez que a maioria das pessoas
utilizam webmail, este link apenas chamará o programa de e−mail e muitas vezes não estará configurado para
o envio de e−mails.
Atenção: este link não envia e−mails, apenas carrega o programa cliente de e−mails com o nome do
destinatário especificado na declaração da tag.
Vamos agora finalizar este capítulo colocando em prática este novo recurso que aprendemos. Podemos alterar
o arquivo pagina1.htm para que ele tenha um link para e−mail.
<HTML>
<HEAD>
</HEAD>
</font></i></b>
<br><br>
<a href="links/pagina3.htm">Página 3</a><br><br>
<a href="mailto:atendimento@sistemasabertos.com.br">
Clique aqui para enviar um email
</a>
<br><br>
Clique na imagem para visitar a Sistemas Abertos<br><br>
</a>
</BODY>
</HTML>

5.7.1 Exercício 1:
• Crie um arquivo index.html, ex1.html e ex2.html;
• Crie links com imagens no arquivo index.html que apontem para ex1.html e ex2.html;
• Modifique os arquivos ex1.html e ex2.html, criando as seções: INICIO, MEIO e FIM
• Crie um índice interno em ex1.html e ex2.html que aponte para as suas secoes
• Adicione um link para e−mail em index.html
5.6 Links para e−mail 24

6 Tabelas
6.1 Introdução
Você já deve ter notado que a diagramação de elementos dentro da página HTML, é muito limitada. Até agora
só conseguimos alinhar textos e imagens, um ao lado do outro e linha por linha.
Em HTML, as tabelas são o único recurso para se obter uma boa diagramação e organização do conteúdo das
páginas. Com o seu uso, é possível promover a junção de qualquer conteúdo, sem que a página ocupe mais
espaço que o definido previamente, causando imperfeição na visualização.
6.2 Apresentando o conteúdo com tabelas

A disposição dos elementos utilizados dentro de uma tabela é muito simples. Uma tabela é composta de linhas
e colunas. Cada ponto de interseção entre uma linha e uma coluna é chamado de célula. São nas células que
inserimos o nosso conteúdo.
Uma boa prática de programação é definir todas as margens da página com tamanho zero e incluir uma tabela
que servirá como container para todo o resto da página.
Essa tabela terá apenas uma célula. Se as margens estão zeradas e a tabela principal ocupa exatamente o
tamanho que queremos, então não fica difícil distribuir os objetos da forma desejada.Assim que a tabela
principal estiver desenhada, basta que imaginemos o resultado final e acrescentar o conteúdo, sempre dentro
de novas tabelas. Vamos entender melhor.
6.3 Inserindo uma tabela

A tag que representa uma tabela na linguagem HTML, é a <table>. Uma <table> tem linhas, que é um <tr>, e
as células, que é a tag <td>.
Devemos seguir uma certa hierarquia para não desenharmos uma tabela errada. Uma célula ou <td> deve estar
sempre dentro de uma linha ou <tr>, que por sua vez, deve ser descrita dentro de uma tabela ou <table>.
Podemos ter quantas linhas(<tr>) e quantas células(<td>) quanto desejarmos.
Podemos ainda ter tabelas dentro de outras tabelas, o que chamamos de aninhamento de tabelas, assim como
fazemos com as outras tags. Mas esta etapa será visualizada nos tópicos seguintes, quando estivermos mais a
vontade na criação de tabelas.
Vejam o exemplo abaixo. Nele iremos construir uma tabela simples, apenas para exercitar a sintaxe. Esta
tabela terá apenas um célula, conseqüentemente, uma linha e uma coluna.
<HTML>
<HEAD>
<TITLE>Trabalhando com tabelas!!!</TITLE>
</HEAD>
<table border="1">
<tr>
<td>O conteúdo vem aqui!!!</td>
</tr>
</table>
</BODY>
</HTML>
6 Tabelas 25
$LOGOIMAGE 6 Tabelas
Notem que usamos a propriedade border com valor 1. Esse valor representa a espessura da borda da tabela. Se
utilizarmos o valor 0, estamos omitindo a borda, senda esta sua declaração padrão.
6.4 Adicionando conteúdo a uma célula da tabela

Vamos agora alterar o exemplo e incluir novas células e mais conteúdo.
<HTML>
<HEAD>
</HEAD>
<table border="1">
<b>Campeonato de F1</b><br><br>
<tr>
<td><b>Classificação Final</b></td>
</tr>
<tr>
<td>1º − Ayrton Senna</td>
</tr>
<tr>
<td>2º − Nigel Mansell</td>
</tr>
<tr>
<td>3º − Alain Prost</td>
</tr>
</table>
</BODY>
</HTML>
Agora temos várias linhas na nossa tabela e uma célula por linha. Em cada célula temos um conteúdo.
Tentamos dar um aspecto de título na primeira célula, por isso usamos a tag de negrito para dar esse realce.
Queremos mostrar que o aninhamento de outras tags dentro da tabela é permitido e muito útil.
Mas podemos economizar algum código se utilizarmos tags específicas para título da tabela e título das
colunas. Substituam no exemplo anterior conforme o código abaixo.
<HTML>
<HEAD>
</HEAD>
<table border="1">
<caption>Campeonato de F1</caption>
<tr>
<th>Classificação Final</th>
</tr>
<tr>
<td>1º − Ayrton Senna</td>
</tr>
<tr>
<td>2º − Nigel Mansell</td>
</tr>
<tr>
<td>3º − Alain Prost</td>
</tr>
</table>
</BODY>
</HTML>
A tag <caption> exibe o título da tabela. E onde quisermos utilizar títulos para as colunas, trocamos o <td>
pelo <th>.
6.4 Adicionando conteúdo a uma célula da tabela 26

6.5 Exibindo e definindo propriedades da tabela

Mas as funcionalidades das tabelas são muitas, observem as propriedades das tabelas:
• border determina uma borda na tabela em pixels. Caso esse atributo não apareça, a tabela não terá
bordas.
• width especifica a largura da tabela. Pode ser expressa em pixels ou em porcentagem, em relação a
onde a tabela está contida.
• height define a altura da tabela, também podendo utilizar pixels e porcentagem como medidas.
• cellpading com esta propriedade, dizemos qual a distância entre as bordas da célula e o conteúdo
devem ficar.
• cellspacing o cellspacing define qual a distância entre cada uma das células da tabela.
• align − define o alinhamento horizontal da tabela. Pode ser à esquerda, left, centralizado, center, e
alinhada à direita, right.
• valign controla como será o alinhamento vertical da tabela em relação à página web. Pode ser no
alto, top, no centro, middle ou no final, bottom.
• bgcolor a propriedade bgcolor, configura a cor de fundo da tabela, de preferência utilizando o
código hexadecimal de cores.
• bordercolor aqui temos a cor da borda da tabela, seguindo a mesma declaração das cores de fundo.
• background se quisermos inserir uma imagem como fundo da tabela, então devemos utilizar esta
propriedade.
• rules finalmente, podemos especificar se queremos mostrar as bordas internas das linhas ou das
colunas, ou se ambas ou nenhuma.
Para mostrarmos todas as bordas internas, utilizamos o valor all. Se não quisermos exibir nenhuma borda
interna, o valor a ser fixado é o none. Para mostrarmos apenas as linhas, declaramos o atributo rules como
rows. E se quisermos apenas as linhas das colunas, utilizamos cols.Escrevam o código do exemplo abaixo e
visualizem no navegador.
<HTML>
<HEAD>
</HEAD>
<table border="1" width="30%" align="center"
cellspacing="5" bordercolor="#000000" rules="rows">
<caption>BOLETIM ESCOLAR</caption>
<tr>
<th>Alunos</th>
<th>Notas</th>
</tr>
<tr>
<td>Fulano</td>
<td>9.5</td>
</tr>
<tr>
<td>Cicrano</td>
<td>5.7</td>
</tr>
<tr>
<td>Beltrano</td>
<td>7.8</td>
</tr>
</table>
</BODY>
</HTML>
Observem agora que temos duas células por linha, embora o atributo rules não permita a visualização das
bordas internas das colunas.
6.5 Exibindo e definindo propriedades da tabela 27

6.6 Exibindo e definindo propriedades de célula, linha e

coluna
Assim como a tabela, as linhas e as colunas(células) também possuem muitas propriedades. Observem as
propriedades das células(<td>):
• align alinha o conteúdo dentro da célula(center, right e left).

• valign alinha verticalmente o conteúdo dentro da célula(top, middle e bottom).
• bgcolor define a cor de fundo da célula.
• background determina uma imagem como background da célula.
• nowrap esta propriedade faz com que não haja quebra de linha dentro da célula.
• width define a largura da célula, podendo ser expressa em pixels ou porcentagem.
• height define a altura da célula, seguindo as mesmas características da propriedade anterior.
• colspan define quantas colunas uma célula poderá abranger, este atributo será melhor explorado no
decorrer do capítulo.
• rowspan define quantas linhas uma célula poderá abranger, este atributo será melhor explorado no
decorrer do capítulo.
Agora observem as propriedades das linhas(<tr>):
• align alinha o conteúdo dentro da linha(center, right e left).

• valign alinha verticalmente o conteúdo dentro da linha (top, middle e bottom).
• bgcolor define a cor de fundo da linha.
Agora vamos aplicar algumas destas propriedades no exemplo anterior.
<HTML>
<HEAD>
</HEAD>
<table border="1" width="30%" align="center"
cellspacing="5" bordercolor="#000000" rules="rows">
<caption>BOLETIM ESCOLAR</caption>
<tr>
<th>Alunos</th>
<th>Notas</th>
</tr>
<tr>
<td>Fulano</td>
<td align="center" bgcolor="#0099FF">9.5</td>
</tr>
<tr>
<td>Cicrano</td>
<td align="center" bgcolor="#CC3333">5.7</td>
</tr>
<tr>
<td>Beltrano</td>
<td align="center" bgcolor="#0099FF">7.8</td>
</tr>
</table>
</BODY>
</HTML>
6.7 Redimensionando tabelas

O redimensionamento de tabelas exige que o programador já possua uma certa prática ou tenha dominado o
que foi explicado desde o início do capítulo.
6.6 Exibindo e definindo propriedades de célula, linha e coluna 28

Contudo não é uma tarefa difícil, basta que façamos passo a passo para não haver uma anomalia na tabela.
Imaginem uma tabela com duas linhas e duas células, como na figura abaixo:
Vejam o código para esta tabela:
<HTML>
<HEAD>
</HEAD>
<BODY>
<table border="1" width="10%" align="center">
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</BODY>
</HTML>
Como nossa tabela possui duas linhas e duas células, temos obrigatoriamente que ter duas tags <td>, células,
para cada tag <tr>, linhas, que serão duas ao final.
A tag , que define um espaço visual, dentro de cada célula, representa um preenchimento imaginário
para a célula, não possuindo nenhum efeito, podendo inclusive, ser omitida do código. Foi colocada apenas
por questão de didática.
Agora, queremos que nossa tabela tenha mais um célula por linha, conforme a nova figura:
Para obtermos esta nova tabela, precisamos inserir uma nova coluna. Essa nova coluna, assim como as outras
é possuidora de duas células, uma por linha. Então, basta acrescentarmos um novo <td> (célula), em cada um
dos <tr> (linha), que possuimos.
Vamos ver como ficará o nosso código:
<HTML>
<HEAD>
</HEAD>
<BODY>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
6.6 Exibindo e definindo propriedades de célula, linha e coluna 29

</tr>
</table>
</BODY>
</HTML>
Agora que aprendemos a inserir uma nova coluna, então vamos aprender a inserir uma nova linha. Como
sabemos, as linhas da nossa tabela, possuem três células cada. Para obtermos uma tabela com três linhas e três
colunas, partindo do exemplo anterior, basta acrescentarmos um novo <tr> (linha), e dentro dele, inserirmos
três <td>, que representa o número de células que vamos precisar.
A tabela que vamos criar tem o seguinte aspecto:
Para finalizarmos este tópico, vamos dar um pouco de vida à nossa tabela, definindo a propriedade bgcolor de
cada célula com uma cor diferente. O fica a critério do leitor a escolha dessas cores, porém, vamos utilizar
algumas, para que o resultado final seja obtido corretamente. Então, mãos à obra.
<HTML>
<HEAD>
</HEAD>
<BODY>
<tr>
<td bgcolor="#FF0000"> </td>
<td bgcolor="#000000"> </td>
<td bgcolor="#00FF33"> </td>
</tr>
<tr>
<td bgcolor="#FF6600"> </td>
<td> </td>
<td bgcolor="#3333FF"> </td>
</tr>
<tr>
<td bgcolor="#FF99CC"> </td>
<td bgcolor="#990066"> </td>
<td bgcolor="#FFFF00"> </td>
</tr>
</table>
</BODY>
</HTML>
6.8 Mesclando células

Para aqueles que já utilizaram alguma planilha eletrônica, já precisaram alguma vez promover a junção de
duas ou mais células e transformá−las em apenas uma. Essa junção de células em apenas uma chama−se
mesclagem de células.
A mesclagem de células pode acontecer de duas formas:
• por colunas a mesclagem por colunas acontece quando as células que queremos mesclar são
colunas de uma mesma linha. Neste caso, utlizaremos a propriedade colspan indicando quantas
células serão mescladas.
• por linhas a mesclagem por linhas deverá ser usada quando quisermos unir células que ocupam
várias linhas. Para mesclarmos as células de várias linhas, definimos a propriedade rowspan com o
número de células desejadas.
6.8 Mesclando células 30

Seguindo a linha de raciocínio do redimensionamento de tabelas, vamos trabalhar a mesclagem de células
passo a passo.
Em princípio, criaremos uma tabela com três linhas e três colunas. Podemos utilizar o exemplo anterior, mas
antes removam as propriedades de cor de fundo de cada célula, apenas para melhorar a visualização.
Alterem também a propriedade width para 30%. O resultado deve se parecer com isto:
Primeiramente vamos mesclar as três primeiras células da linha 1, onde iremos colocar um texto qualquer que,
ao final do exemplo, ocupará toda a linha conforme a figura abaixo:
células mescladas
Agora observem o código que produziu esta tabela.
<HTML>
<HEAD>
</HEAD>
<BODY>
<tr>
<td colspan="3" align="center">
células mescladas
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</BODY>
</HTML>
Vamos acompanhar o raciocínio. Queríamos mesclar as três células da primeira linha, tornando−a apenas uma
célula única. Então definimos a propriedade colspan da primeira célula com o valor 3, que representa o
número de células que serão mescladas.
Ao fazermos isso, nossa linha conterá apenas uma célula e não precisaremos mais escrever o código para as
outras duas que existiam antes.
As outras linhas continuam com três células cada uma, ou seja, três <td> para cada <tr>.
Agora queremos mesclar duas células da 2ª e 3ª linhas, produzindo a seguinte saída:
3 células
6.8 Mesclando células 31

2
células
A primeira linha não será modificada. As 2ª e 3ª células das 2ª e 3ª linhas também não serão alteradas. Apenas
a 1ª célula da 2ª linha será mesclada com a 1ª célula da 3ª linha, que deixará de existir, tornando−se uma única
célula. Vamos ao código:
<HTML>
<HEAD>
</HEAD>
<BODY>
<tr>
<td colspan="3" align="center">3 células</td>
</tr>
<tr>
<td rowspan="2" align="center">2 células</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
</BODY>
</HTML>

− Escrevam um código que deverá produzir aproximadamente, a seguinte tabela:
6.10 Aninhando tabelas

O aninhamento de tabelas consiste em inserir uma tabela dentro de outra tabela. Sabemos que devemos
armazenar o conteúdo da nossa tabela dentro das células, que são representadas pela tag <td>.
Portanto, se o objetivo é colocar uma nova tabela dentro de outra tabela, essa nova tabela deve também estar
dentro de uma célula. Observem a seguinte imagem:
Agora, o código:
<HTML>
<HEAD>

</HEAD>
<BODY>
<table border="1" width="40%" align="center" cellpadding="10">
<tr>
<td align="center" width="50%" bgcolor="#FFFFCC">
<table border="1" width="75%" bgcolor="#99FFFF">
<tr><td> </td></tr>
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
</td>
<td width="50%">
A cor de fundo da tabela interna
sobrepõe a cor de fundo da tabela
principal
</td>
</tr>
</table>
</BODY>
</HTML>
6.11 Utilizando tabelas para trabalhar com imagens

fatiadas
Um recurso muito utilizado hoje é o fatiamento de imagens para auxiliar no carregamento da página. Se existe
uma imagem muito grande dentro da página, divide−se essa imagem em pedaços menores, que serão
carregados mais rapidamente, dando a impressão de que a página não é tão pesada.
Após esse fatiamento, utilizamos as tabelas para juntar a imagem novamente para que ela tenha a aparência
normal.
O detalhe é colocarmos o espaçamento entre as células com valor 0 e depois colocar cada pedaço da imagem
dentro de uma célula.
<HTML>
<HEAD>
</HEAD>
<BODY>
<table border="0" align="center" cellspacing="0">
<tr>
<td>
<img src="pordosol1.gif">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
6.11 Utilizando tabelas para trabalhar com imagens fatiadas 33

</BODY>
</HTML>
6.11 Utilizando tabelas para trabalhar com imagens fatiadas 34

7 Formulários
7.1 Introdução
Para aqueles que desejam prosseguir na programação web, aprendendo posteriormente linguagens de script
cliente e servidor, devem entender os formulários e suas funcionalidades.
Os formulários são essenciais para que haja uma interação entre o usuário que acessa nossa página. Isso quer
dizer que os elementos declarados dentro da tag <form>, são a principal fonte de feedback ou entrada de
dados da máquina cliente, que serão armazenados no servidor ou enviados por email para o administrador do
site.
7.2 Entendendo o funcionamento dos formulários

Como adiantamos na introdução deste capítulo, a tag <form> é a responsável pela declaração de uso de um
formulário dentro de nossa página. Dentro desta tag serão inseridos todos os objetos que farão a interação com
o usuário.
A tag <form> possui algumas propriedades importantes que devemos entender:
• action esta propriedade define qual programa ou script deverá analisar e processar os dados que
serão enviados para o servidor.
• method os métodos de envio podem ser dois:
♦ get a diferença básica entre esses dois métodos é o fato de que, ao usarmos o método get,
todos os dados a serem enviados serão passados diretamente na URL. Embora ligeiramente
codificados, esses dados são passíveis de entendimento pelo usuário. Caso os dados possuam
certa discrição, torna−se incompatível o seu uso.
♦ post já o método post, submete os dados de forma oculta, não alterando a URL. Deve ser
utilizado em casos de autenticação de usuários, consultas de bancos de dados e onde haja
tráfego de informações que não devem se tornar públicas.
• enctype com esta propriedade informamos qual é o tipo de mídia ou dado que está transitando pelos
nossos formulários. O tipo mais comum e default é o application/x−www−form−urlencoded,
responsável pela transmissão de dados típicos de formulários, ou melhor, pelos valores que esses
elementos estão assumindo. Há uma excessão no caso de transmissão de arquivos, como em um
upload. Neste caso, o enctype a ser usado é o multipart/form−data. E se os dados forem enviados
diretamente por e−mail, o valor a ser utilizado é o text/plain.
• name é a propriedade que define o nome de acesso ao nosso objeto em questão, o formulário.
Nos tópicos a seguir, veremos a declaração e uma implementação progressiva do uso de formulários.
7.3 Conhecendo os objetos dos formulários

Os objetos dos formulários são vários e iremos estudá−los um de cada vez. Eles possuirão características
comuns e talvez funcionalidades comuns, dependendo da forma que serão utilizados. Mas todos eles devem
estar declarados dentro das tags <form></form>. Caso algum deles esteja fora dessas tags, eles não serão
enviados ao servidor.
Vejamos agora uma lista de objetos que podemos usar:
7 Formulários 35
$LOGOIMAGE 7 Formulários
• text o objeto text é uma caixa de texto, limitando o tamanho do texto a 255 caracteres ou de acordo
com a propriedade maxlength.
• password campo texto destinado à inserção de valores de senha. É igual ao objeto text, porém o
texto digitado pelo usuário aparece em forma de asteriscos ou marcadores para ocultar a senha.
• textarea também permite a entrada de texto, porém de forma livre, sem um limite de caracteres
pré−estabelecido.
• hidden o objeto hidden armazena um determinado valor, pré−estabelecido ou não, de forma oculta
ao usuário.
• checkbox a checkbox permite que o usuário decida se quer ou não aceitar uma determinada cláusula
estabelecida na página, como receber e−mails de propaganda ou newsletters.
• radio os botões de rádio permitem que o usuário escolha apenas uma entre várias alternativas
exibidas na página, como por exemplo o campo sexo em um cadastro qualquer. Sabemos que é uma
escolha de uma única resposta.
• select o objeto select se parece muito com as combo box de outras linguagens de programação. É
dado ao usuário uma lista com várias opções e ele pode escolher apenas uma.
• select multiple a sintaxe é igual ao objeto select, exceto pela cláusula multiple, que permitirá ao
usuário selecionar uma ou mais opções, utilizando as teclas shift ou ctrl para a seleção múltipla.
• image muitas páginas utilizam imagens como botões. Isso poderia ser feito com o auxílio de uma
linguagem de script cliente, como o JavaScript. Porém o HTML fornece o objeto image, que tem a
mesma funcionalidade.
7 Formulários 36
• file o objeto file somente será aproveitável com o auxílio de uma outra linguagem que poderá tratar
o dado que foi submetido, no caso um arquivo. Este objeto é composto de uma caixa de texto e um
botão, que ao ser clicado abre a árvore de diretórios da máquina do usuário.
• submit este é um botão que já vem com uma tarefa específica: enviar todos os dados para o
programa ou script que irá tratar esses dados, que foi definido na propriedade action da tag <form>.
• reset este também é um botão com tarefa pré−definida: limpar os valores de todos os objetos
incluídos no formulário.
• button este último botão não tem atividade pré−programada. A programação dele depende de outra
linguagem de script, como o JavaScript. Essa programação dependerá do objetivo desejado, como por
exemplo processar uma determinada informação.
7.4 Criando um formulário

Para se criar um formulário, basta inserir a tag form com suas respectivas propriedades. Vamos iniciar aqui,
uma declaração que será aproveitada até o final do capítulo em todos os exemplos. Vamos trabalhar também
com tabelas, para organizarmos nossos objetos e também treinarmos um pouco mais.
<HTML>
<HEAD>
<TITLE>Trabalhando com formulários!!!</TITLE>
</HEAD>
<center>Currículo ON−Line</center><br><br>
<form action="" method="get" enctype="multipart/form−data">
</form>
</BODY>
</HTML>
Estaremos utilizando a propriedade enctype com valor multipart/form−data apenas para fins didáticos, já que
não faremos nenhum envio de formulário, conforme consta na propriedade action do formulário. Após a
visualização deste exemplo, você ainda não poderá ver nada do formulário, porque ainda não declaramos
nenhum objeto. Faremos isso nos tópicos seguintes.
7.5 Utilizando os campos do formulário

Conforme o texto inicial da página, iremos montar, ao final de todo o capítulo, um formulário para cadastro de
currículos, porém sem nenhuma funcionalidade. O HTML produz apenas páginas estáticas, que não podem
interagir com o usuário.
Vamos então inserir algumas caixas de texto para obter os dados do usuário, como nome e endereço.
<HTML>
<HEAD>
7.4 Criando um formulário 37

</HEAD>
<table width="50%" align="center" border="0">
<tr>
<td align="right">Nome:</td>
<td>
<input type="text" name="nome" size="40"
maxlength="50">
</td>
</tr>
<tr>
<td align="right">Endereço:</td>
<td>
<input type="text" name="ende" size="40"
maxlength="100">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Vamos entender agora a declaração e as propriedades das caixas de texto. As caixas de texto são tags <input>
com tipo text:
<input type="text name=nome size=ì0 maxlength=í0>
• type define o tipo do objeto input, neste caso, uma caixa de texto(text).
• name é o nome pelo qual outras linguagens acessarão o valor deste objeto.
• size define um tamanho para o objeto, baseado em números de caracteres desejados.
• maxlength limita o tamanho do texto, conforme o valor estabelecido.
O exemplo será alterado agora, para que o usuário possa inserir uma senha de acesso ao seu currículo.
Estamos falando do objeto password. O password também é um objeto input, só que com o tipo password.
Veja a declaração:
<input type=password name=senha size=é5 maxlength=î>
Agora observe como ficará o código:
<HTML>
<HEAD>
</HEAD>
<tr>
<td>
<input type="text" name="nome" size="40" maxlength="50">
</td>
</tr>
<tr>
<td align="right">Endereço:</td>
<td>
<input type="text" name="ende" size="40" maxlength="100">
</td>
</tr>
7.4 Criando um formulário 38

<tr>
<td align="right">Senha:</td>
<td>
<input type="password" name="senha" size="15" maxlength="6">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
As propriedades de password são as mesmas do objeto text. Todos os objetos tem ainda uma propriedade que
contém o valor do objeto. Nas caixas de texto não é comum usá−la, pois espera−se que o usuário insira algum
texto. Somente em casos particulares seu uso pode ser útil, como por exemplo induzir a entrada com um
determinado formato.
7.6 Inserindo caixas de seleção e botões de rádio

A funcionalidade que vamos declarar agora é a caixa de seleção ou checkbox. O checkbox é um objeto input
do tipo checkbox.
Vamos perguntar ao usuário se ele quer que seus dados sejam públicos.
<input type=checkbox name=publicar value=sim checked>
Procurem o final da última linha e acrescentem o novo código:
<HTML>
<HEAD>
</HEAD>
.
.
.
<tr>
<td align="right"> </td>
<td>
<input type="checkbox" name="publicar" value="sim" checked>
Quero que meu currículo seja público.
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Vamos entender as propriedades do objeto checkbox:
• type o tipo do objeto será checkbox.

• name é o nome pelo qual outras linguagens poderão acessar o checkbox.
• value define o valor que será enviado caso o usuário marque a checkbox. Caso não seja declarada, o
valor default será on se estiver marcado.
• checked informa que o checkbox inicia já marcado. Caso queira dar essa opção ao usuário, é só
omitir esta cláusula.
Perguntaremos o sexo do usuário utilizando o objeto de escolha radio. Sua sintaxe de declaração é a seguinte:
7.6 Inserindo caixas de seleção e botões de rádio 39

<input type=radio name=sexo value=Masculino>
Vejam o código:
<HTML>
<HEAD>
</HEAD>
.
.
.
<tr>
<td align="right">Sexo:</td>
<td>
<input type="radio" name="sexo" value="Masculino">Masculino<br>
<input type="radio" name="sexo" value="Feminino">Feminino
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Vamos entender as propriedades deste objeto:
• type o tipo deste input é radio.

• name é nome pelo qual este objeto será acessado por outras linguagens de programação. No caso de
objetos radio, que podem ser vários, todos aqueles que pertencerem a um mesmo grupo de informação
deverão ter o mesmo nome. Do contrário, mais de uma opção poderá ser selecionada. Não é o que
queremos. Sexo só poderá ser Masculino ou Feminino, nunca os dois.
• value valor que será enviado de acordo com a seleção do usuário.
• checked permite definir se uma determinada opção já iniciará com valor checkado ou não. Se esta
cláusula for declarada, deverá ser feita diretamente na opção preterida. Se não existir em nenhuma das
opções, a opção ficará em branco para o usuário escolher.
7.7 Inserindo listas e menus

Agora vamos perguntar ao usuário qual é o seu nível de escolaridade. Esta pergunta também só poderá ter
uma única resposta. Um objeto que pode nos auxiliar com esta questão é o select. Vamos ver como ficará o
código e logo ao final estaremos discutindo sua declaração e propriedades:
<HTML>
<HEAD>
</HEAD>
.
.
.
<tr>
<td align="right">Escolaridade:</td>
<td>
7.7 Inserindo listas e menus 40

<select name="escolaridade">
<option value="sup">Superior</option>
<option value="2">2º Grau</option>
<option value="1">1º Grau</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Vamos entender a declaração deste objeto. Cada opção que o usuário terá deverá estar dentro das tags
<select></select>. Estamos falando das tags
• name é o nome pelo qual este objeto será acessado por outras linguagens de programação.
• value como termos várias opções para o usuário, é conveniente que cada uma delas tenha um valor
diferente. Após a submissão deste formulário teremos um objeto select com apenas um valor, aquele
que foi selecionado pelo usuário.
Queremos que o usuário também informe quais as tecnologias que ele domina. Como podem ser várias,
precisamos de um objeto que possa permitir a seleção de uma ou mais opções. Este objeto é o mesmo select
visto no exemplo anterior, mas agora, com uma cláusula multiple, que habilitará este objeto para que seja
possível um seleção múltipla com auxílio das teclas shift e ctrl.
Vejam o código e no final a explicação da declaração e propriedades deste objeto:
<HTML>
<HEAD>
</HEAD>
.
.
.
<tr>
<td align="right">Tecnologia:</td>
<td>
<select name="tecnologias" multiple size="3">
<option value="php">PHP</option>
<option value="html">HTML</option>
<option value="js">Javascript</option>
<option value="java">Java</option>
</select>
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Como vimos, a declaração é exatamente igual ao objeto select, exceto pela cláusula multiple. Vejamos que
propriedades este objeto possui:
• name nome pelo qual outros linguagens de programação poderão acessar este objeto.
• size define quantas opções serão mostradas ao usuário sem criar barras de rolagem no objeto. Caso
o número de opções seja superior ao informado, uma barra de rolagem é automaticamente inserida.
• value são os valores que serão transmitidos após a submissão. Como podem ser vários, este objeto
7.7 Inserindo listas e menus 41

será interpretado como um array no script que irá processar este formulário. Isso será melhor
entendido em um curso de JavaScript ou PHP.
• multiple permite que seja selecionados várias opções ao mesmo tempo.
7.8 Adicionando botões de formulário

O formulário terá que ter botões para que ele possa ser enviado e dar a opção ao usuário para limpar os
campos caso deseje reiniciar o preenchimento.
Vamos começar com o botão de submissão. O input de tipo submit, é o responsável pelo envio dos dados para
o script ou programa de processamento. Observe a sintaxe:
<input type=submit name=enviar value=Enviar>
Veja como ficará no exemplo:
<HTML>
<HEAD>
</HEAD>
.
.
.
<tr>
<td align="center" colspan="2">
<input type="submit" name="enviar" value="Enviar">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
Vamos entender as propriedades do botão submit:
• type é o tipo deste input, que é submit, ou seja, um botão que tem a função de submeter o
formulário.
• name nome pelo qual este objeto será acessado por outras linguagens de programação.
• value é o valor que será exibido no botão para informar ao usuário, qual a função do mesmo.
Aproveitaremos o código acima para adicionar um botão que tem a tarefa de limpar todos os campos que
estão declarados dentro das tags form></form>.
Escrevam na mesma célula do botão submit.
<HTML>
<HEAD>
</HEAD>
.
.
.
7.8 Adicionando botões de formulário 42

<tr>
<td align="center" colspan="2">
<input type="submit" name="enviar" value="Enviar">

<input type="reset" name="limpar" value="Limpar">
</td>
</tr>
</table>
</form>
</BODY>
</HTML>
As propriedades para o botão reset são as mesmas do botão submit. Apenas o tipo de input é diferente: como a
função deste botão é limpar o conteúdo dos campos do formulário, então seu tipo é reset.
Não vamos inserir um input do tipo button, porque não teríamos funcionalidade para ele, uma vez que não
possuímos conhecimento para acrescentar−lhe uma funcionalidade. Suas propriedades também são idênticas
aos botões submit e reset, apenas seu tipo será button. Vejamos apenas sua sintaxe de declaração:
<input type=button name=processar value=Processar>
7.9 Inserindo um objeto image

O objeto image pode ser visto como uma interface mais amigável de um botão. Este objeto tem a função
default igual ao botão submit, ou seja, ao ser clicado, enviará o formulário conforme a propriedade action do
formulário.
Como já utilizamos botões no exemplo acima, vamos entender apenas a sintaxe de declaração e as
propriedades deste objeto:
<input type=image src=enviar.gif name=enviar border=è>
Observe agora uma explicação sobre essas propriedades:
• type este é um input do tipo image.

• src define o nome e o caminho da imagem a ser utilizada como botão.
• name nome de acesso para outras linguagens.
• border define se o botão terá ou não borda.
• width como o objeto em questão é uma imagem, podemos manipular seu comprimento através desta
propriedade.
• height o valor aqui estabelecido definirá a altura do objeto.
7.10 Adicionando o objeto file

Com este objeto podemos dar a opção do usuário selecionar um arquivo de seu computador e enviá−lo para o
servidor, desde que haja um programa ou script de processamento para este formulário.
Como ainda não aprendemos a processar os valores recebidos do usuário, trabalharemos apenas com a
declaração e propriedades deste formulário:
<input type=file name=arquivo>
Este é um input de tipo file. A propriedade name permitirá que o programa ou script que irá receber este
arquivo saiba qual objeto está acessando. Entretanto, a propriedade mais importante, o value, só será definida
quando o usuário selecionar um arquivo para enviá−lo.
7.9 Inserindo um objeto image 43

Como vimos em todo o capítulo, os formulários são a principal fonte de interação entre nossas páginas e o
usuário. Embora este formulário de currículo não seja processado, a sua codificação foi muito importante para
entendermos cada objeto de formulário e sabermos onde usar cada um deles.
O entendimento deste capítulo será de fundamental importância quando vocês estiverem aprendendo as
linguagens de script que tanto falamos.
7.9 Inserindo um objeto image 44

8 Frames
8.1 Introdução
A navegação na Internet ficou muito mais fácil de usar após o advento dos frames ou molduras. O fato de
determinadas partes da página poderem ter seu conteúdo atualizado sem que toda a página o tenha sido,
mudou a maneira de se utilizarem menus, apressou a navegação e melhorou a organização do site. Podemos
agora estabelecer regiões do nosso site que poderão ou não serem recarregadas com um novo conteúdo, sem
afetar todo o resto.
8.2 O que são frames

Pensem em uma página e depois a dividam em várias partes como se fosse uma tabela. Cada célula desta
tabela seria uma nova página com todas as características que aprendemos. O único detalhe é que cada uma
dessas páginas seriam gerenciadas pela página mãe, assim como as células são gerenciadas pela tabela.
Observem a página a seguir:
A página acima na verdade é composta por outras duas páginas que representam efetivamente o conteúdo. A
página principal é chamada de frameset.
O frameset é quem define o formato das molduras e quais páginas serão carregadas em cada uma delas.
Quando usamos frames, omitimos a tag <body> do código, uma vez que o frameset não tem conteúdo e sim
suas páginas internas.
8.3 Decidindo se as molduras devem ser usadas

Conforme foi explicado acima, as molduras trouxeram muitas vantagens e algum desconforto para os
WebDesigners, que se incomodam com algumas barras de rolagem que acabam aparecendo no meio das
páginas.
8 Frames 45
$LOGOIMAGE 8 Frames
De fato, causam uma certa poluição visual. Eis a questão: usar ou não usar frames?
Hoje observamos algumas tendências no desenvolvimento de sites. Muitos sites preferem chamar várias
páginas independentes, carregando novamente cada parte da página que poderia estar fixa no layout. Isso pode
ser ligeiramente mais lento, mas sua interferência fica próxima da nulidade. Porém, há casos em que não há
como fugir das molduras. Alguns sites, têm como única solução o seu uso.
De forma alguma, estamos desmerecendo esta funcionalidade. Existem várias formas de se contornar as barras
de rolagem. Com o uso de folhas de estilo, por exemplo, pode−se dar novas formas e cores às barras de
rolagem, suavizando o seu aparecimento.
Queremos dar todas as possibilidades para que você possa estar escolhendo a melhor hora e o melhor layout
para o seu site.
8.4 Criando páginas da web com molduras

A sintaxe de declaração de um frameset é a seguinte. Estaremos declarando sua forma mais simples, para
iniciar os estudos:
<HTML>
<HEAD>
<TITLE>Trabalhando com frames!!!</TITLE>
</HEAD>
<FRAMESET cols="20%, *">
<frame src="pag1.htm" name="pagina1">
</FRAMESET>
</HTML>
Com a declaração <frameset> estamos informando o uso das molduras. A propriedade cols da forma como foi
declarada, indica que serão duas molduras verticais ocupando a página. A primeira moldura será carregada
com a página pag1.htm e ocupará 20% do frameset. A segunda moldura será carregada com a página
pag2.htm e ocupará todo o resto do frameset, conforme a declaração do asterisco(*).
A tag <frame> se refere a cada uma das páginas que foram estabelecidas no frameset. O parâmetro src deve
ser preenchido com o nome da página que se deseja carregar, juntamente com o caminho completo, caso esta
página não se encontre no mesmo diretório do frameset. A propriedade name, será o nome com que cada
frame será referenciado através de links e outras linguagens que venham acessar esta página.
Vejamos agora as propriedades do <frameset>:
• rows define se teremos a página dividida em linhas. O seu valor pode ser declarado em pixels ou
porcentagem e devem ser separados por vírgula.
• cols semelhante ao rows, porém divide a página em colunas.
• frameborder define se o frameset terá ou não bordas, caracterizando as divisões da página. Pode
conter os valores: "yes" ou "no".
• border o valor aqui atribuído mostrará a espessura da borda.
• bordercolor aqui especificamos a cor que a borda deverá assumir, de preferência utilizando cores
no formato hexadecimal.
Os frames, por sua vez possuem algumas outras propriedades:
• src é o nome da página que será carregada.

• name nome pelo qual os links poderão localizar seu destino dentro do frameset.
• scrolling define se haverá ou não barras de rolagem, caso o conteúdo ultrapasse o tamanho da
janela. Pode ter como valores: "yes", "no" ou "auto".
8.4 Criando páginas da web com molduras 46

$LOGOIMAGE 8 Frames
• noresize define se as molduras poderão ou não ser redimensionadas pelo usuário.
• marginwidth define a margem entre as laterais do frame e seu conteúdo.
• marginheigth da mesma forma que marginwidth, este atributo define uma distância de margem,
que neste caso é a margem superior e inferior do frame.
Agora, visualizem o resultado no navegador.
Surpresa! Duas páginas não puderam ser localizadas. É preciso criar os arquivos mencionados: pag1.htm e
pag2.htm. Então, crie−os sem código algum, apenas para o navegador poder chamar o frameset corretamente.
Executem novamente e observem o resultado.
Agora sim temos três páginas carregadas. O frameset que gerencia os frames, que são cada uma das páginas
que estamos vendo.
8.5 Redimensionando molduras em um conjunto de

molduras
Vamos trabalhar com outros exemplos de molduras. Dividiremos a página em dois frames horizontais.
<HTML>
<HEAD>
</HEAD>
<FRAMESET rows="20%, *">
</FRAMESET>
</HTML>
Será que podemos utilizar linhas e colunas para moldar nossa página? A resposta é afirmativa, basta
combinarmos as propriedades cols e rows como no exemplo abaixo:
<HTML>
<HEAD>
</HEAD>
<FRAMESET rows="20%, *">
<FRAMESET cols="20%,*">
</FRAMESET>
</FRAMESET>
</HTML>
O exemplo acima é um exemplo especial. Nele definimos que nossa página será constituída de três frames. O
primeiro frameset informa que serão duas linhas, ocupando a primeira 20%, e a segunda, todo o resto da
página. Declaramos o primeiro frame normalmente e logo em seguinda, ao invés de declararmos o segundo
frame, dizemos que ele será um novo frameset, agora dividido em duas colunas. A primeira coluna, ocupará
20% do segundo frameset e será carregada com a página pag2.htm. A segunda coluna terá todo o resto do
segundo fremeset para carregar a página pag3.htm.
8.6 Editando o conteúdo de uma moldura

Até agora, aprendemos apenas a criar as molduras. Vamos então inserir algum conteúdo para obtermos
resultados mais amigáveis. Para evitar que mensagens de páginas não encontradas fossem exibidas, criamos
os arquivos de frames sem nenhum código. O ponto chave da inserção de conteúdo, é que este será sempre
8.5 Redimensionando molduras em um conjunto de molduras 47

$LOGOIMAGE 8 Frames
declarado nos frames e nunca no frameset.
Vamos criar aqui três arquivos. Tomaremos o exemplo do primeiro frameset que estudamos:
<HTML>
<HEAD>
</HEAD>
<FRAMESET cols="20%, *" frameborder="yes" border="1">
</FRAMESET>
</HTML>
Agora vamos criar o arquivo pag1.htm:
<HTML>
<HEAD>
</HEAD>
<a href="http://www.globo.com">Globo</a><br><br>
<a href="http://www.pop.com.br">POP</a><br>
<a href="http://www.bol.com.br">BOL</a><br>
<a href="http://www.terra.com.br">Terra</a><br>
<a href="http://www.yahoo.com.br">Yahoo</a><br>
<a href="http://www.google.com.br">Google</a><br>
</BODY>
</HTML>
O código do arquivo pag2.htm
<HTML>
<HEAD>
</HEAD>
<br><br>
<center>
<font face="Verdana" color="#0000FF" size="3">
Nos tópicos seguinte aprenderemos como carregar os links ao lado, aqui, neste fra
</font>
</center>
</BODY>
</HTML>
Visualizem agora no navegador. Lembre−se de abrir o arquivo do frameset. É ele quem se encarregará de
chamar os frames internos.
8.7 Controlando o conteúdo de uma moldura com links

Uma das propriedades mais utilizadas quando estamos trabalhando com frames é a name. É com o valor
declarado nesta propriedade, que conseguimos dizer aos links onde queremos que eles sejam carregados.
Aproveitando o exemplo que acabamos de fazer, cliquem nos vários links que criamos. Nenhum deles foi
carregado no frame da direita, como queríamos. Precisamos informar isso. O faremos através da propriedade
target da tag <a>, responsável pela criação dos links.
• target é propriedade da tag <a> que armazena o local de destino da página que foi referenciada. O
seu valor deve ser preenchido com os nomes que demos aos frames na declaração do frameset. Se
8.7 Controlando o conteúdo de uma moldura com links 48

$LOGOIMAGE 8 Frames
queremos carregar as páginas no frame da direita, veremos na declaração do frameset qual o seu
nome.
Alterem o código do arquivo pag1.htm para que os links passem a suportar esta propriedade.
<HTML>
<HEAD>
</HEAD>
<a href="http://www.globo.com" target="pagina1">Globo</a>
<br>
<a href="http://www.pop.com.br" target="pagina1">POP</a>
<br>
<a href="http://www.bol.com.br" target="pagina1">BOL</a>
<br>
<a href="http://www.terra.com.br" target="pagina1">Terra</a>
<br>
<a href="http://www.yahoo.com.br" target="pagina1">Yahoo</a>
<br>
<a href="http://www.google.com" target="pagina1">Google</a>
<br>
</BODY>
</HTML>
Como queremos carregar todas essas páginas no frame da direita, devemos referenciar seu nome na
propriedade target dos links. Agora verifique se realmente essas páginas estão sendo carregadas no seu devido
lugar.
Se quisermos que outra janela se abra quando cliquemos, basta inserirmos na propriedade target um nome que
não foi declarado, porém o mais utilizado é escrever _blank. Utilizando _top, o link será aberto na
mesma janela dos frames. Por default, se não especificarmos nada, a página será carregada de onde ela foi
chamada ou seja, se o link estiver na pagina1, ele será aberto na própria pagina1, seria a mesma coisa de
atribuirmos o valor _self na propriedade target dos links.
8.8 Inserindo frames inline

Os frames inline ou iframes, são frames que não estão dentro de um frameset. Eles são inseridos em qualquer
parte de uma página comum, com o tamanho que quisermos.
Observe algumas de suas propriedades:
• src define qual página será carregada no iframe.

• name nome pelo qual podemos referenciar este iframe.
• frameborder especifica se haverá ou não borda no iframe.
• scrolling define se as barras de rolagem deverão existir.
• width é a largura do iframe, definida em pixels ou porcentagem
• height é a altura do iframe, seguindo as mesmas medidas da largura.
Alterem o arquivo pag2.htm com o seguinte código. No parâmetro src, criem um novo arquivo sem nenhum
código..
<HTML>
<HEAD>
<TITLE>Trabalhando com iframes!!!</TITLE>
</HEAD>
<br><br>
<center>
8.8 Inserindo frames inline 49

$LOGOIMAGE 8 Frames
Trabalhando com iframes<br><br>
<iframe src="exerc.htm" frameborder="1" scrolling="no" width="300" height="300"
name="framei">
</iframe>
<br><br>
Os links abaixo serão carregados no iframe
<br><br>
<a href="http://www.globo.com" target="framei">Globo</a>
<br>
<a href="http://www.pop.com.br" target="framei">POP</a>
<br>
<a href="http://www.bol.com.br" target="framei">BOL</a>
<br>
<a href="http://www.terra.com.br" target="framei">Terra</a>
</center>
</BODY>
</HTML>
Observem que agora o target dos links está com o valor do name do iframe.

− Reproduza a seguintes molduras definidas na figura com base no que foi explicado e:
• Crie um iframe no frame superior, crie links e os teste

• Divida o frame central com frames verticais
• Crie e teste diversos links para serem utilizados nos frames criados, inclusive no iframe criado

9 Recursos de Multimídia
9.1 Introdução
A atratividade da Internet se deve em certa parte, pelas inúmeras formas de informações que podem ser
expressadas através de recursos multimídia.
Sons ou músicas, vídeos e animações em Flash são amplamente utilizadas para a disseminação de conteúdo na
rede. Embora seu uso acrescente um certo peso no carregamento das páginas, se feito com simplicidade e
adequando−o aos objetivos do site, torna−se uma solução interessante.
Os arquivos de som e vídeo são, geralmente, muito grandes, o que torna demorado o seu carregamento no
navegador do usuário. Por isso é comum em algumas páginas, que esses arquivos não sejam carregados
automaticamente, e sim, através de um link específico, para que o internauta escolha se quer ou não acessá−lo.
A inserção desses elementos em uma página é relativamente simples e neste capítulo aprenderemos como
faze−la.
9.2 Inserindo áudio

O uso de sons e músicas em uma página é um pouco limitado mas têm−se como padrão dois formatos básicos:
as extensões wav e midi são aceitas quando estivermos falando apenas de HTML. Hoje sabemos que o uso de
áudio na web não se limita a só isso. Rádios online, mp3 outras tecnologias fazem parte desse universo, mas
necessitam de maior conhecimento de outras linguagens para auxiliar nesta tarefa.
O que faremos aqui será apenas a declaração de um elemento que fará o carregamento e o controle de
execução de um arquivo de mídia. A tag para esta tarefa é a <embed>. Ela possui algumas propriedades que
iremos entender agora:
• src aqui declaramos o arquivo de mídia, neste caso específico de áudio, que será carregado.
• autostart podemos definir com esta propriedade se o arquivo será executado automaticamente pela
página logo após o seu carregamento. Em caso afirmativo, declaramos como true o valor desta
propriedade, caso contrário, o usuário terá a opção de iniciar a execução quando ele quiser. O valor
então desta propriedade seria false.
• loop define quantas vezes a execução da mídia será repetida.
• hidden define se o controle de execução será visível ao usuário. Se for visível, o valor de hidden
será false, se não for visível, true. Lembre−se de colocar a propriedade autostart como true, caso
deseje um controle invisível.
• width se o controle for vísivel, podemos definir qual será o tamanho que ele ocupará na tela. Aqui
definimos sua largura, em pixels, de preferência.
• height da mesma forma que a propriedade anterior, definimos a altura do controle de execução com
esta propriedade.
Procurem o arquivo flourish.mid e copiem−no para o seu diretório de trabalho para iniciarmos o exercício a
seguir.
<HTML>
<HEAD>
<TITLE>Trabalhando com áudio!!!</TITLE>
</HEAD>
<center>
<embed src="flourish.mid" autostart="false" hidden="false" width="300" height="15
</center>
9 Recursos de Multimídia 51
$LOGOIMAGE 9 Recursos de Multimídia
</BODY>
</HTML>
No exercício acima definimos um elemento de áudio, que deverá ser inicializado pelo usuário. Observem o
status false da propriedade autostart. Controles de play, pause, stop e até volume serão exibidos para ele
decidir como quer que seja executado, uma vez que a propriedade hidden também está com status false.
Vamos mudar um pouco a declaração de código para obtermos uma execução no momento em que a página
for carregada. Os controles também não estarão disponíveis para o usuário.
<HTML>
<HEAD>
</HEAD>
<center>
<embed src="flourish.mid" autostart="true" loop="2" hidden="true">
</center>
</BODY>
</HTML>
Agora também definimos que esta mídia será executada duas vezes. Fizemos isso através da propriedade loop.
9.3 Inserindo vídeo

Além do uso de sons pela rede, temos também a possibilidade de assistir vídeos em nossas páginas. Hoje
tornou−se possível até assistirmos televisão pela web.
O uso de vídeos também tem suas limitações quanto ao formato. Deve−se utilizar formatos que possam ser
lidos na web. Neste caso o formato padrão é o mpeg. Se forem utilizados formatos como avi e mov, deverá
existir na máquina cliente, programas que possam ler e executar estes arquivos.
A tag para o uso de vídeos pela rede é a mesma que usamos para a inserção de sons: <embed>. As
propriedades também são idênticas, exceto pelo fato de não podermos atribuir à propriedade hidden o valor
true. Caso façamos isso, estaremos ocultando o controle de execução e conseqüentemente não veríamos as
imagens.
Copiem o arquivo clock.avi para a pasta de trabalho que estejam utilizando e escrevam o exercício abaixo:
<HTML>
<HEAD>
</HEAD>
<center>
<embed src="clock.avi" autostart="true">
</center>
</BODY>
</HTML>
Caso as propriedades de tamanho sejam omitidas, prevalecerá o tamanho original do arquivo de vídeo.
Cuidado para não definir estas propriedades com tamanho inferior ao original.
9.4 Inserindo animações em Flash

As animações em Flash são a grande onda do momento. Desde animações de apresentação do site até sites
completos feitos com essa ferramenta.
9.3 Inserindo vídeo 52

$LOGOIMAGE 9 Recursos de Multimídia
De fato, o Flash é muito atrativo, mas caímos novamente no detalhe do peso da página. Assim como sons e
vídeos, ele pode se tornar uma inconveniência, caso não seja usado corretamente. A sintaxe é idêntica ao uso
dos elementos multimídia que usamos até o momento.
Copiem o arquivo banner01.swf para o seu diretório de trabalho e codifiquem o exercício abaixo:
<HTML>
<HEAD>
</HEAD>
<center>
<embed src="banner01.swf" width="458" height="95">
</center>
</BODY>
</HTML>
Quando utilizamos flash em nossas páginas, é necessário que o usuário possua instalado em sua máguina o
plugin para a execução das animações. É conveniente acrescentar à tag <embed> propriedade que armazenará
o local de download e o solicitará automaticamente caso não seja identificado sua presença na máquina
cliente. Esta propriedade é a pluginspage e deve conter a url de donwload do plugin.
Observem a declaração do exercício acima com esta propriedade:
<HTML>
<HEAD>
</HEAD>
<center>
<embed src="banner01.swf" width="458" height="95" pluginspage="http://www.macrome
download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</center>
</BODY>
</HTML>
Tudo isso que acabamos de aprender é muito interessante e com certeza prendem a atenção dos usuários. Mas
deve−se analisar a necessidade de uso desses elementos, porque páginas muito pesadas − que demoram a ser
carregadas pelo browser − costumam ser dispensadas antes mesmo de terem seu conteúdo completamente
visualizado na tela.
Faça suas páginas com simplicidade e criatividade, procurando utilizar todos os recurso disponíveis desde que
eles se encaixem da forma mais correta no objetivo e público alvo do seu site.
9.3 Inserindo vídeo 53

10 CSS − Folhas de Estilo
10.1 Introdução
Neste capítulo estaremos aprendendo a usar CSS. As folhas de estilo ou Cascade Style Sheets são uma
pré−declaração de possíveis formatações que venhamos precisar no nosso site.
A partir do momento que identificamos como o código deverá se aplicar ao design da página, o uso das folhas
de estilo irá tornar extremamente fácil nossa programação.
Imaginem que todos os parágrafos da nossa página utilizem como fonte Verdana e o tamanho dessa fonte seja
12 pixels. Imaginem também que temos muitos parágrafos nesta página. Bom, pelo que aprendemos até agora,
teríamos que declarar para cada parágrafo uma tag <p> e além disso aplicar a formatação que queremos em
cada um deles com a tag <font>. Isso seria um grande trabalho, não?
Agora, imaginem se pudéssemos dizer ao browser que todas as tags <p>, ao serem declaradas, já assumissem
a formatação desejada?
Seria excelente! As folhas de estilo podem fazer esse trabalho para nós. Assim identificamos uma primeira
vantagem no seu uso: precisamos programar menos. E se um determinado momento, acharmos que o tamanho
da fonte está muito pequeno e tenhamos que mudá−lo !
Isso seria muito trabalhoso se nosso código fosse somente HTML. Teríamos que ir em cada tag <font> e
alterar o tamanho. Mas lembrem−se que estamos utilizando CSS e declaramos isso apenas uma vez. Então
precisamos apenas alterar o estilo que foi estabelecido? Isso mesmo. A manutenção do site se tornará muito
mais fácil e rápida de ser feita.
Essas e outras vantagens estaremos aprendendo agora.
10.2 Entendendo as folhas de estilo

As folhas de estilo são declaradas apenas uma vez, e a formatação estabelecida será assumida por todos os
elementos em que forem aplicadas.
Possuímos três formas de declaração de estilos:
• estilos inline a declaração que é feita dentro da própria tag HTML é chamada inline. Seu efeito
estará restrito a essa única tag.
• estilos vinculados ou externos neste caso, um arquivo contendo toda a formatação das folhas de
estilo é criado e podemos chamá−lo de qualquer página do nosso site. Este arquivo deverá ter
extensão .css e é a declaração mais utilizada, pois centraliza todos os estilos do site.
• estilos incorporados os estilos incorporados são declarados no corpo do documento HTML e seu
efeito figura apenas na página que foi declarado. Sua declaração é feita dentro do escopo da tag
<head>.
10.3 Criando estilos

A declaração de estilos possui uma sintaxe básica que deverá ser seguida para cada estilo que queiramos
utilizar:
elemento {
p1: v1;
p2: v2;
10 CSS − Folhas de Estilo 54

$LOGOIMAGE 10 CSS − Folhas de Estilo
.
.
.
pn: vn
}
Vamos entender como funciona essa sintaxe:
O elemento é a tag ou objeto HTML no qual o estilo será aplicado. Veremos que esse elemento poderá ser
ainda uma classe que poderá ser aplicada em várias tags ou objetos HTML. P1 e p2 são as propriedades que
serão aplicadas no elemento declarado. E v1 e v2, os valores que essas propriedades deverão assumir ao
elemento.
Observem a declaração do estilo imaginado na introdução do capítulo. Queremos que todos os parágrafos
tenham fonte Verdana e tamanho 12px.
p {
font−family: Verdana;
font−size : 12px;
}
No exemplo acima, estamos dizendo que, onde for inserida uma tag <p>, de parágrafo, no nosso código, ela
deverá assumir a formatação especificada na declaração do CSS, que é fonte Verdana e tamanho 12px.
Voltando ainda na imaginação do exemplo, achamos que esta fonte precisar ser um pouco maior. Vejam que
simples. Se esse estilo será assumido por todos os parágrafos, basta que eu altere sua declaração, inclusive
acrescentar novos efeitos:
p {
font−size : 16px;
color : #0000FF;
}
10.4 Estilos incorporados

Os estilos incorporados são declarados dentro das tags de cabeçalho ou <head>. Isso significa que todo o
código terá acesso às formatações ali especificadas.
Precisamos ainda informar que iremos utilizar CSS dentro das páginas. Faremos isso através da tag <style>.
Vamos à prática. Seguindo nosso primeiro exemplo, codifique o exercício abaixo e visualizem o resultado no
navegador.
<HTML>
<HEAD>
<TITLE>Trabalhando com CSS!!!</TITLE>
<style type="text/css">
p {
font−size : 16px;
color : #0000FF;
}
</style>
</HEAD>
<p>
Estes parágrafos estão pré−formatados de acordo com
10.4 Estilos incorporados 55

as regras de estilo definidas no cabeçalho da
página. Todos os parágrafos possuirão essa mesma
formatação.
</p>
<p>
As <b>folhas de estilo</b> permitem uma codificação
mais organizada, o que reflete no <b>tempo de
programação</b> e <b>manutenção do site</b>,
economizando tempo nestas tarefas.
</p>
</BODY>
</HTML>
Observem no navegador que os nossos parágrafos estão com a cor azul, fonte e tamanhos diferentes do
padrão, sem sequer termos inserido nenhuma tag <font>. Tudo isso foi definido através do CSS no cabeçalho
da página.
No exercício, existem também três expressões em negrito, mas esteticamente, não ficaram muito bem
destacadas.
Vamos inserir um novo estilo para que onde houver uma tag de negrito, o texto assuma a cor vermelha, sem
perder é claro, a formatação do estilo de parágrafo.
<HTML>
<HEAD>
p {
font−family : Verdana;
font−size : 16px;
color : #0000FF;
}
b { color : #FF0000 }
</style>
</HEAD>
<p>
Estes parágrafos estão pré−formatados de acordo com
as regras de estilo definidas no cabeçalho da
página. Todos os parágrafos possuirão essa mesma
formatação.
</p>
<p>
As <b>folhas de estilo</b> permitem uma codificação
mais organizada, o que reflete no <b>tempo de
programação</b> e <b>manutenção do site</b>,
economizando tempo nestas tarefas.
</p>
</BODY>
</HTML>
10.5 Estilos inline

Os estilos inline são declarados na própria tag que se deseje alterar. Talvez seja o tipo de declaração menos
utilizada pelo fato de não poder ser reaproveitada no decorrer do código.
Observem o código abaixo:
<HTML>
<HEAD>
10.5 Estilos inline 56

</HEAD>
<BODY>
<center>
<img src="logosa.gif" style="cursor: hand">
</center>
</BODY>
</HTML>
A declaração dos estilos inline, como vimos, deve estar dentro da tag. No exemplo acima, mudamos o cursor
do mouse (seta) com o valor hand para que quando o mouse passe em cima da imagem, seja substituido pelo
cursor de link (imagem da mãozinha).
Observem a declaração do estilo inline. Deve ser feita com se fosse uma propriedade da tag, mas sempre
seguindo a sintaxe padrão de declaração de estilos: propriedade e valor.
10.6 Estilos vinculados

Estilos vinculados existem em um arquivo com extensão .css e não necessitam da tag <style> na sua
declaração.
Simplesmente colocamos os estilos no código e chamamos este arquivo da página que precisará dele.
Vamos criar um arquivo com o nome estilo.css e acrescentar alguns estilos. Digitem exatamente como está
abaixo:
td {
background−color: #FFFFCC;
}
input {
border : 2px solid #0000FF;
font−size : 9px;
color : #000099;
}
O código acima define os estilos que iremos utilizar em nossa página.
O primeiro estilo, diz que, onde houver uma célula de uma tabela, ela deverá ter a cor de background com o
valor #FFFFCC. Já o estilo da tag input, diz que qualquer input, neste caso, é preferível uma caixa de texto,
terá borda de 2 pixels com o formato solid e cor #0000FF. O texto digitado dentro desta caixa de texto será
com a fonte Verdana, tamanho 9 pixels e cor #000099.
Para fazermos uma chamada a este arquivo de estilos, devemos declarar da seguinte forma:
<link rel=stylesheet href=estilo.css>
Essa declaração deve ser feita dentro da tag <head>.

− Dado o código:
<HTML>
<HEAD>
<link rel="stylesheet" href="estilo.css" type="text/css">
</HEAD>
10.6 Estilos vinculados 57

<BODY>
<table align="center" border="0" width="40%">
<tr>
<td>
<input type="text" size="50" name="nome">
</td>
</tr>
</table>
</BODY>
</HTML>
• Acrescente novas linhas à tabela e também outras caixas de texto, para certificar que o estilo esteja
sendo aplicado corretamente em todos os elementos.
10.8 Tags personalizadas

Até o momento, estivemos trabalhando com as tags originais da linguagem HTML. O uso de CSS também
nos permite criar tags personalizadas.
Existem algumas variações de declaração para o uso dessas tags pessoais. Podemos criar vários estilos para
uma mesma tag HTML. Isso é muito útil quando utilizamos um único arquivo de estilos para todo o site.
Temos os estilos que são padrão a todas as páginas e outros estilos que podem ser aplicados apenas em
algumas, porém eles estão se referindo a uma mesma estrutura do HTML.
Para iniciarmos nossos trabalhos, precisamos entender como esses estilos serão aplicados nos elementos, se
existem vários estilos para um único elemento.
Primeiramente, devemos informar que a aplicação dos estilos está baseada no conceito de classes. Uma classe
funcionará como um atributo da tag que desejamos alterar com as configurações de CSS.
Esse atributo é o class. O valor que lhe será atribuído será o nome da classe declarada. No exercício a seguir,
estaremos utilizando vários links com um determinado estilo. Logo em seguida, criaremos uma variação do
estilo utilizado e o atribuíremos somente em alguns dos links existentes.
Observem: teremos dois estilos diferentes, aplicados em em um mesmo elemento HTML, ao mesmo tempo.
<HTML>
<HEAD>
a {
font−size : 12px;
color : #0000FF;
text−decoration : none;
}
a.links {
font−size : 12px;
color : #FF0000; −
text−decoration : none;
}
p {
text−align : center;
}
</style>
</HEAD>
10.8 Tags personalizadas 58

<p>
<a href="http://www.globo.com">Globo</a>
</p>
<p>
<a href="http://www.terra.com.br">Terra</a>
</p>
<p>
<a href="http://www.uol.com.br">Uol</a>
</p>
</BODY>
</HTML>
A declaração de uma classe, neste caso, deve ser feita com o nome da tag que se deseja aplicar o estilo,
seguida de um ponto . e o nome da class, que é definido pelo programador. No exemplo acima, temos o
estilo da tag <a> e uma classe para esta mesma tag <a>, que é a.links.
Você deve estar se perguntando: todos os links estão iguais? Correto, ainda não dissemos ao programa que ele
deve usar a classe que declaramos. Acrescentem ao link do site Terra o seguinte código, de forma que ele se
pareça com o seguinte:
<a href=http://www.terra.com.br class=links>Terra</a>
Agora visualize novamente a página e verá que este link assumiu as características do estilo definido pela
classe links da tag <a>.
Veremos a seguir, outra forma de declarar classes.
No exercício de estilos vinculados, criamos um estilo para o elemento input, com o intuito de aplicá−lo em
caixas de texto.
Sabemos que os elementos input têm vários tipos: caixas de texto, checkbox, botões entre outros. Se
tivéssemos declarados outros objetos input, além das caixas de texto, o resultado poderia não ser o esperado.
Então como declarar um estilo somente para as caixas de texto se os objetos input podem ser de vários tipos?
A resposta é simples: com o uso de classes.
Mas ainda assim se criarmos uma classe para o elemento input, assim como fizemos na tag , esse estilo será
aplicado a todas as variações do input.
Correto, a diferença estará na forma de declaração da classe. Não mais ligaremos a classe ao objeto. A
declaração da classe será feita da seguinte forma:
.classe {propriedade: valor}
Para exercitarmos essas novas possibilidades, abram o exercício Currículo Online, que fizemos no capítulo 7.
Insiram no cabeçalho do exercício, os seguintes estilos:
.texto {
font−size : 11px;
color : #333333;
text−align : right;
}
.cxtexto {
font−size : 11px;
color : #000066;

width : 200px;
border : 2px groove;
}
</style>
Ao declararmos estas classes, queremos que os texto informativos assumam as características da classe texto.
Para isso devemos aplicar essa classe nas células ou tags <td> que possuam os textos.
A classe cxtexto deverá ser aplicada somente nas caixas de texto, ou seja, em todos os elementos input de tipo
text e password. Os outros elementos input deverão permanecer da forma original e não devem conter essa
declaração.
Agora, vamos aplicar essas classes nos lugares desejados. Observe as linhas destacadas:
− <HTML>
− <HEAD>
− <TITLE>Trabalhando com formulários!!!</TITLE>
− <style type="text/css">
− .texto {
− font−family : Verdana;
− font−size : 11px;
− color : #333333;
− text−align : right;
− }
− .texto2 {
− color : #333333;
− }
− .cxtexto {
− color : #000066;
− width : 200px;
− border : 2px groove;
− }
− select {
− color : #000066;
− width : 200px;
− }
− </style>
− </HEAD>
− <BODY bgcolor="#FFFFCC">
* <center class="texto">Currículo ON−Line</center><br><br>
− <form action="" method="get" enctype="multipart/form−data">
− <table width="50%" align="center" border="0">
− <tr>
* <td align="right" class="texto">Nome:</td>
− <td>
* <input type="text" name="nome" size="40" maxlength="50" class="cxtexto">
− </td>
− </tr>
− <tr>
* <td align="right" class="texto">Endereço:</td>
− <td>
* <input type="text" name="ende" size="40" maxlength="100" class="cxtexto">
− </td>
− </tr>
− <tr>
* <td align="right" class="texto">Senha:</td>

− <td>
* <input type="password" name="senha" size="15" maxlength="6" class="cxtexto"
− </td>
− </tr>
− <tr>
− <td align="right"> </td>
* <td class="texto2">
− <input type="checkbox" name="publicar" value="sim" checked>
− Quero que meu currículo seja público.
− </td>
− </tr>
− <tr>
* <td align="right" class="texto">Sexo:</td>
* <td class="texto2">
− <input type="radio" name="sexo" value="Masculino">Masculino<br>
− <input type="radio" name="sexo" value="Feminino">Feminino
− </td>
− </tr>
− <tr>
* <td align="right" class="texto">
− Escolaridade:
− </td>
− <td>
− <select name="escolaridade">
− <option value="sup">Superior</option>
− <option value="2">2º Grau</option>
− <option value="1">1º Grau</option>
− </select>
− </td>
− </tr>
− <tr>
* <td align="right" class="texto">
− Tecnologias:
− </td>
− <td>
− <select name="tecnologias" multiple size="3">
− <option value="php">PHP</option>
− <option value="html">HTML</option>
− <option value="js">Javascript</option>
− <option value="java">Java</option>
− </select>
− </td>
− </tr>
− <tr>
− <td align="center" colspan="2">
− <input type="submit" name="enviar" value="Enviar">
−
− <input type="reset" name="limpar" value="Limpar"> −
− </tr>
− </table>
− </form>
− </BODY>
− </HTML>
As caixas de seleção ou <select> assumem o estilo declarado sem que haja necessidade de uso de classe, uma
vez que usamos a própria tag para a declaração.
10.9 Aplicando estilo de formatação em Texto

E quanto aos textos do site? Os textos não precisam de tags para serem declarados. No entanto eles precisam
de formatação e às vezes o uso de CSS será bem−vindo.
Mas como aplicar os estilos dessa forma?
10.9 Aplicando estilo de formatação em Texto 61

Existem duas tags que podem envolver os textos, de forma que, se aplicarmos os estilos nessas tags eles
também terão efeito naquilo que elas envolvem.
Estamos falando das tags <div> e <span>. A tag <span> é comumente utilizada para dar características a
pequenos trechos de texto ou alguns caracteres.
Após sua declaração, a classe responsável pela caracterização do texto ou o uso de estilos diretamente na
tag(estilos inline), deverá ser atribuído à tag <span>. Como esta tag envolve o texto que queremos aplicar o
estilo, todas as características declaradas serão automaticamente repassadas ao texto.
Observe o exercício abaixo. Declaramos uma classe de nome texto e definimos que o tamanho da fonte deverá
ser de 2pt ou 2 pontos. Nosso estilo ainda converterá todos os caracteres que estiverem escritos em minúsculas
para maiúsculas. A propriedade que fará essa conversão é a text−transform, e o valor para esta tarefa é o
uppercase.
Essa propriedade também suporta os seguintes valores: capitalize, que ao ser aplicado transforma as primeiras
letras de todas as palavras para maiúsculas. E ainda, lowercase, que muda para minúsculas todos os caracteres
do texto estilizado.
<HTML>
<HEAD>
.texto {
font−size : 10pt;
text−transform : uppercase;
}
</style>
</HEAD>
<span class="texto">
O texto aqui impresso deverá estar todo em LETRAS MAIÚSCULAS.
</span>
</BODY>
</HTML>
Observe o exempo a seguir:
O exemplo acima usou como solução, uma classe com propriedade font−weight com valor bold. A tag <div>
tem funcionalidade idêntica à tag <span>. A sintaxe de declaração e o objetivo final também são os mesmos,
porém convencionou−se que a tag <div> deveria ser utilizada para estilizar seqüências definidas de textos ou
elementos, blocos inteiros que possuiriam as mesmas características.

A princípio, você pode usar qualquer uma delas da forma que desejar, tanto em pequenos trechos de
caracteres como em blocos completos, mas é muito interessante que seu código possa seguir os padrões
definidos por programadores mais experientes da rede.
Vejamos alguns exemplos da tag <div>.
<HTML>
<HEAD>
.texto {
width : 370px;
border−style : dashed;
border−width : thin;
border−color : #FF0000;
}
</style>
</HEAD>
<center>
<div class="texto">
A tag div serve para a aplicação de estilos
CSS em blocos de texto que deverão assumir
as mesmas características, como esse que
acabamos de escrever.
</div>
<center>
</BODY>
</HTML>
A tag <div> também pode ser utilizada para formatar uma determinada área da página. Essa área estilizada
será chamada de layer.
As layers ou camadas, são muito utilizadas para a construção de menus, banners, e também quando há a
necessidade de se estipular uma área da página que obedecerá a certas interações do usuário.
No exemplo a seguir, construiremos uma layer que, ao ser visualizada, terá o aspecto de um menu. A
princípio, ela estará com um estilo invisível e somente quando o usuário passar o mouse em cima de um
botão, ela se tornará visível. Porém, para conseguirmos este efeito, teremos que aplicar um pequeno código
Javascript, mas você não deve se preocupar com isso neste curso.
O objetivo deste exercício será apenas apresentar ao leitor, possibilidades no uso das folhas de estilo.
Vamos ao exemplo:
<HTML>
<HEAD>
.botao {
background−color : #0000FF;
color : #FFFFFF;
}
</style>
</HEAD>
<div id="menu" style="position: absolute;
visibility: hidden; left: 104px; top: 11px;

width: 91px; height: 98px; border: 1px;
background−color : #99CCCC;">
<p><a href="http://www.globo.com">Globo</a></p>
<p><a href="http://www.terra.com.br">Terra</a></p>
<p><a href="http://www.uol.com.br">UOL</a></p>
</div>
<input type="button" value="Menu CSS" name="menu" class="botao"
onMouseOver="document.getElementById('menu').style.visibility='visible'">
</BODY>
</HTML>
Vamos entender o exercício.
Declaramos uma classe botao que foi aplicada ao input de tipo button. Isso significa que o botão terá cor de
fundo #0000FF e cor da fonte #FFFFFF.
Definimos um div que terá o aspecto de uma layer. O estilo foi inserido diretamente na tag <div> e contempla
as seguintes características:
• position com esta propriedade definimos que a layer não ocupará nenhum espaço dentro da página.
Funcionará como se estivesse flutuando sobre os outros elementos.
• visibility define se a layer será ou não visível ao usuário.
• left posição da margem esquerda ao início da visualização da layer.
• top posição da margem superior ao início da visualização da layer.
• width largura da layer.
• height altura da layer.
• border borda da layer.
• background−color cor de fundo da layer.
O menu só deverá aparecer quando o usuário passar com o mouse por sobre o botão, por isso sua propriedade
visibility está com valor hidden(oculta).
Declaramos um botão para servir de ponto de referência da layer, e ser o objeto de inicialização do menu
através do uso de Javascript. O código onMouseOver utilizado é da linguagem Javascript. Esse código é
correspondente ao movimento do mouse sobre o objeto onde foi declarado. Quando esse evento ocorre, então
o código declarado é executado. No caso do exercício, atribui−se o valor visible a layer e ela se tornará
visível.
A tabela a seguir ilustra alguns dos estilos utilizados neste livro e alguns outros muito úteis:
Estilo Valores
Verdana, Arial, Helvética, Times New Roman, Courier
font−family tipo da fonte
entre outras.
Pode ser expresso em pontos(pt), pixels(px), polegadas(in),
font−size tamanho da fonte
centímetros(cm), milímetros(mm) entre outros.
Deve ser utilizado preferencialmente, o código hexadecimal
color cor da fonte
de cores.
font−style estilo da fonte Pode ser italic, oblique ou normal.
font−weight peso da fonte Pode ser: bold, bolder, normal, ligther entre outros.
text−decoration decoração da fonte Pode ser: none, underline, overline, line−through, blink.
text−transform define o caso da fonte Pode ser capitalize, uppercase, lowercase ou none.
background−color define a cor de fundo Utilizar preferencialmente código hexadecimal de cores
text−align alinhamento do texto Pode ser left, right, center ou justify.
width largura de um elemento


height altura de um elemento
Pode ser: dashed, dotted, double, groove, hidden, inset,
border−style define o estilo de borda
none, outset, ridge e solid.
border−color cor da borda Utilizar preferencialmente código hexadecimal de cores
border−width espessura da borda
letter−spacing define o espaçamento entre Pode ser expresso em pontos(pt), pixels(px), polegadas(in),
caracteres centímetros(cm), milímetros(mm) entre outros.
position define a posição do elemento com
Pode ser absolute ou relative.
relação a outros elementos da página
visibility visibilidade do elemento Poder ser visible ou hidden.
left distância da margem esquerda ao elemento Pode ser expresso em pontos(pt), pixels(px), polegadas(in),
que foi estilizado centímetros(cm), milímetros(mm) entre outros.
top distância da margem superior ao Pode ser expresso em pontos(pt), pixels(px), polegadas(in),
elemento que foi estilizado centímetros(cm), milímetros(mm) entre outros.
list−style−type define o estilo dos Pode ser: circle, disc, square, decimal, lower−roman,
marcadores de uma lista upper−roman, lower−alpha, upper−alpha e none.
As propriedades descritas acima são apenas algumas das mais comuns. Com certeza, são inúmeras e quanto
mais conhecê−las, maior o número de possibilidades teremos.
Como vimos no decorrer deste capítulo, as folhas de estilo se tornaram essenciais no mundo da construção de
páginas para a web. Seu uso constante produz resultados dos mais simples até os mais refinados estilos.
Além de tudo, gera economia na codificação e facilita imensamente a manutenção e o gerenciamento das
páginas.

11 Anexo − Código de Cores RGB
Abaixo encontra−se uma tabela com inúmeras cores e seus respectivos códigos hexadecimais:
Código de Cores RGB

White Red Green Magenta Cyan
#FFFFFF #FF0000 #00FF00 #FF00FF #00FFFF
Yellow Black Aquamarine Baker's Chocolate Blue Violet
#FFFF00 #000000 #70DB93 #5C3317 #9F5F9F
Brass Bright Gold Brown Bronze Bronze 2
#B5A642 #D9D919 #A62A2A #8C7853 #A67D3D
Cadet Blue Cool Copper Copper Coral Corn Flower Blue
#5F9F9F #D98719 #B87333 #FF7F00 #42426F
Dark Brown Dark Green Dark Green Copper Dark Olive Green Dark Orchid
#5C4033 #2F4F2F #4A766E #4F4F2F #9932CD
Dark Purple Dark Slate Blue Dark Tan Dark Turquoise Dark Wood
#871F78 #2F4F4F #97694F #7093DB #855E42
Dim Grey Dusty Rose Feldspar Firebrik Forest Green
#545454 #856363 #D19275 #8E2323 #238E23
Gold Goldenrod Grey Green Copper Green Yellow
#CD7F32 #DBDB70 #C0C0C0 #527F76 #93DB70
Hunter Green Indian Red Khaki Light Blue Light Grey
#215E21 #4E2F2F #9F9F5F #C0D9D9 #A8A8A8
Light Steel Blue Light Wood Lime Green Mandarian Orange Maroon
#8F8FBD #E9C2A6 #32CD32 #E47833 #8E236B
Medium Aquamarine Medium Blue Medium Forest Green Medium Goldenrod Medium Orchid
#32CD99 #3232CD #6B8E23 #EAEAAE #9370DB
Medium Sea Green Medium Slate Blue Medium Spring Green Medium Turquoise Medium Violet Red
#426F42 #7F00FF #7FFF00 #70DBDB #DB7093
Medium Wood Midnight Blue Navy Blue Neon Blue Neon Pink
#A68064 #2F2F4F #23238E #4D4DFF #FF6EC7
New Midnight Blue New Tan Old Gold Orange Orange Red
#00009C #EBC79E #CFB53B #FF7F00 #FF7F00
Orchid Pale Green Pink Plum Quartz
#DB70DB #8FBC8F #BC8F8F #EAADEA #D9D9F3
Semi−Sweet
Rich Blue Salmon Scarlet Sea Green
Chocolate
#5959AB #6F4242 #8C1717 #238E68
#6B4226
Sienna Silver Sky Blue Slate Blue Spicy Pink
#8E6B23 #E6E8FA #3299CC #007FFF #FF1CAE
Spring Green Steel Blue Summer Sky Tan Thistle
#00FF7F #236B8E #38B0DE #DB9370 #D8BFD8
Turquoise Very Dark Brown Very Light Grey Violet Violet Red
#ADEAEA #5C4033 #CDCDCD #4F2F4F #CC3299
11 Anexo − Código de Cores RGB 66

LivroHTMLTotal V16jan2006

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

LivroHTMLTotal V16jan2006

Enviado por

Direitos autorais:

Formatos disponíveis

Índice

1 A Internet e suas características....................................................................................................................1

2 Criando uma página.......................................................................................................................................5

4 Trabalhando com Imagens...........................................................................................................................17

10 CSS − Folhas de Estilo................................................................................................................................54

1.2 O que é a Internet?

1.3 Tipos de acesso à Internet

1 A Internet e suas características 1

1.4 Os recursos da Internet

Vejamos algumas dessas formas:

1.5 Como funciona a Web

1.4 Os recursos da Internet 2

Os servidores mais utilizados para a finalidade de disponibilizar páginas web são:

• Apache®: sem dúvida é o servidor mais utilizado no mundo. É um software multiplataforma e

1.7 O que é uma URL

O protocolo TCP/IP é um conjunto de 4 grupos de números, responsáveis por identificar cada

Vamos agora explorar ao máximo uma determinada URL:

Vamos separar este endereço em algumas partes:

1.7 O que é uma URL 3

1.9 O que é HTML

2.2 Como o HTML Funciona

2.3 Entendendo os principais elementos de uma página

2 Criando uma página 5

2.4 Inserindo tags HTML básicas

Finalmente, encerramos a nossa primeira página com o comando </HTML> .

2.5 Meta tags

Vamos alterar o exercício anterior para testarmos algumas meta tags.

Agora vamos entender o que foi feito acima..

2.4 Inserindo tags HTML básicas 6

Para encerrrarmos a página, precisamos lembrar de fechar todas as tags abertas.

2.6 Adicionando atributos às tags

2.7 Alterando a cor de fundo da página

<BODY bgcolor="#FFFF00" text="#0000FF">

2.6 Adicionando atributos às tags 7

<BODY bgcolor="yellow" text="blue">

<BODY link="#333333" vlink="#009966" alink="#FF0000">

Já as propriedades leftmargin, topmargin, marginwidth e marginheight representam as margens esquerda,

2.8 Visualizando sua primeira página

2.9 Exercício Proposto

− Agora faça as seguintes alterações:

• Altere a cor de fundo

2.8 Visualizando sua primeira página 8

• Utilize meta tags e direcione a página para um site qualquer

2.8 Visualizando sua primeira página 9

3.2 Formatando o texto

Tags − comandos Formatação

3.3 Criando títulos e sub−títulos

<h2>Isto é um título de nível 2</h2>

• <center></center> − centraliza o elemento contido entre as tags.

3.4 Alterando a formatação da fonte

<font face="Verdana" size="3" color="#FF0000">Texto</font>

3.3 Criando títulos e sub−títulos 11

3.5 Fazendo parágrafos

3.5 Fazendo parágrafos 12

3.6 Trabalhando com texto pré−formatado

3.7 Inserindo uma linha horizontal

<hr align="center" width="400" size="10" noshade color="#0000FF">

Neste exemplo utilizamos vários atributos que serão explicados agora.

3.6 Trabalhando com texto pré−formatado 13

A característica do movimento e suas direções são definidas pelas propriedades a seguir:

A tag <blink> mostra o texto piscando na tela. Sua sintaxe é a seguinte:

Vamos exercitar um pouco a tag marquee.

Modifique o exemplo, coloque suas preferências visuais.