Você está na página 1de 95

Indicao de cones

Os cones so elementos grficos utilizados para ampliar as formas de


linguagem e facilitar a organizao e a leitura hipertextual.
Ateno: indica pontos de maior relevncia no texto.

Saiba mais: oferece novas informaes que enriquecem o


assunto ou curiosidades e notcias recentes relacionadas ao
tema estudado.
Glossrio: indica a definio de um termo, palavra ou expresso
utilizada no texto.
Mdias integradas: sempre que se desejar que os estudantes
desenvolvam atividades empregando diferentes mdias: vdeos,
filmes, jornais, ambiente AVEA e outras.
Atividades de aprendizagem: apresenta atividades em diferentes
nveis de aprendizagem para que o estudante possa realiz-las e
conferir o seu domnio do tema estudado.

Tecnologia da Informtica

Sumrio

Aula 1 Como a internet funciona?


1.1 Como tudo comeou

15
15

1.2 Princpios de funcionamento

17

1.3 O que se pode fazer com a internet?

20

Aula 2 Design para web


2.1 O que design?

29
29

2.2 Web design

29

2.3 Planejamento e organizao de informaes

31

2.4 Layout e aparncia

35

2.5 Anatomia de um site

37

Aula 3 Introduo linguagem de marcao


3.1 HTML a linguagem para escrever pginas para web

41
41

3.2 Estrutura bsica de uma pgina HTML

43

3.3 Elementos que no so interpretados

44

3.4 Formatao de pargrafos e blocos de texto

45

3.5 Formatao de fonte

47

3.6 Como uma pgina publicada

52

Aula 4 Ligaes de hipertexto e de imagens


4.1 Hiperlinks

55
55

4.2 Imagens

58

4.3 Caminhos relativos e absolutos

60

Aula 5 Tabulao de dados


5.1 Listas
5.2 Tabelas

65
65
67

Aula 6 Interao com formulrios


6.1 Introduo ao uso de formulrios web
6.2 Tipos de controles
Aula 7 Introduo s folhas de estilo em cascata
7.1 Estrutura e estilo

75
75
78
85
85

7.2 Regras, seletores e declarao sintaxe CSS

87

7.3 Acoplando CSS em HTML

88

7.4 Classes, identificadores e pseudoclasses

89

7.5 Propriedades

91

7.6 Unidades de medida

92

Aula 8 Camadas
8.1 O modelo de camadas (box model)

95
95

8.2 Marcaes lgicas

97

8.3 Fatiando um layout

98

Referncias

104

Currculo do professor-autor

105

Apresentao da disciplina
A disciplina de Fundamentos de Desenvolvimento Web se prope a ofertar
elementos ao aluno para o desenvolvimento e a organizao de pginas web.
Inicialmente, sero abordados aspectos histricos e conceituais que originaram e sustentam as tecnologias utilizadas para a publicao de materiais no
ambiente web.
Ao longo da disciplina, duas abordagens sero aprofundadas: a estruturao
de informaes e a formatao de contedo. No primeiro caso, conheceremos uma linguagem para marcao e interligao de textos largamente
difundida no mundo web: HTML (Hypertext Markup Language). O objetivo
principal nessa etapa preparar o discente para utilizar a linguagem HTML,
estruturando, adequadamente, os contedos que sero apresentados na web.
Em um segundo momento, a inteno da disciplina ofertar ao estudante
instrumentos para que ele possa dar forma ao contedo web, aplicando estilos
grficos que enriqueam sua visualizao (cores, formas, bordas, etc.). Para
tanto, ser apresentada uma linguagem de construo de estilos o CSS
(Cascading Style Sheets) e, por meio de exemplos, suas opes podero
ser exploradas.
Aliando tcnicas de organizao de informaes e de distribuio de contedo,
espera-se que, ao final da disciplina, o aluno esteja qualificado para unir o
melhor das duas linguagens, desenvolvendo materiais e disponibilizando-os
na web. Tambm, esperamos que os contedos abordados, ao longo desta
disciplina, habilitem o discente a permanecer, constantemente, atento a novas
tecnologias que potencializem as opes que a web nos oferece.

11

Aula 1 Como a internet funciona?


Objetivos
Contextualizar o surgimento da internet.
Apresentar os principais conceitos envolvidos no funcionamentoda internet.
Conhecer a finalidade e o funcionamento da internet.

1.1 Como tudo comeou


Antes de falarmos sobre web ou sobre desenvolvimento para web, precisamos
falar de internet. E, embora muitos utilizem os dois termos (web e internet) de
forma indiscriminada, eles no so sinnimos. Quando falamos de internet,
estamos nos referindo a uma grande rede de dispositivos computadorizados
de alcance mundial, podemos entend-la como uma grande infraestrutura
em rede. A web (uma derivao abreviada para a expresso World Wide Web)
apenas uma das funcionalidades da internet no caso especfico, navegar
atravs do hipertexto.
Antes da internet se tornar o que conhecemos hoje, houve um grande percurso na evoluo dos computadores e das tecnologias de telecomunicaes.
Assim como muitas das descobertas da humanidade, a internet tambm teve
forte motivao militar. Durante o perodo ps-guerra (anos 60 do sculo XX),
especialmente na Guerra Fria (EUA Rssia), havia um grande temor em
relao a possveis ataques nucleares. Pesquisas buscavam desenvolver uma
cadeia de comunicaes onde no existisse um ponto central que, ao ser destrudo, colocaria em colapso todo o sistema de comunicaes (COMER, 2007).
Em meados de 1962, os Estados Unidos criaram a Cadeia de Comunicao
Distribuda (CCD), que era composta por vrios computadores interligados
por vrias linhas telefnicas diferentes. A partir de tal estrutura, objetivava-se
dividir o volume de dados a ser trafegado entre os computadores em pequenos
pacotes, despachando-os por meio das diferentes linhas telefnicas at um
computador de destino. Observe que, neste modelo, na eventual falha de
um dos pacotes por meio de um dos caminhos, o sistema poderia utilizar um

Aula 1 - Como a internet funciona?

15

hipertexto
O termo hipertexto (hipertext) foi
criado por Theodore Nelson, na
dcada de 60, para denominar
a forma de escrita/leitura no
linear. Pode ser entendido como
uma espcie de texto onde
alguns trechos se intercalam com
referncias a outros textos.

caminho equivalente, ou seja, no h um ponto nico de falha. Uma eventual


interrupo em alguma linha de transmisso no interrompe completamente
o sistema (COMER, 2007).
Na Figura 1.1, pode-se observar o funcionamento da internet atravs de
uma estrutura de interconexo fsica. Suponha que um computador da casa
A queira enviar uma mensagem para o computador destino F. O caminho
natural entre A e F est bloqueado (indisponvel). No entanto, a casa A pode
enviar sua mensagem para casa D que, por sua vez, envia para a casa E que,
finalmente, entregaria para o destino F. Outra opo tambm seria realizar o
caminho A B C E F, e ainda haveria outras opes.

Figura 1.1: Exemplo de comunicao distribuda


Fonte: Autores

Em 1966, o Departamento de Defesa dos EUA, por meio da ARPANET (Advanced Research Projects Agency Agncia de Projetos e Pesquisas Avanadas),
instalou, em 17 locais diferentes, computadores conectados s linhas telefnicas que, a partir de 1969, tornaram-se uma rede de computadores apenas
para uso militar. A partir de ento, as pesquisas desenvolvidas at aquele
momento, que deram origem a cadeia de comunicao distribuda, passaram
a ser chamadas de ARPANET (MANZANO; TOLEDO, 2008).
Nos anos seguintes, algumas agncias do governo e universidades subordinadas ao Departamento de Defesa dos EUA comearam a fazer uso restrito
da ARPANET com fins de pesquisa. Naquele perodo, algumas universidades
e empresas de grande porte, inspiradas nas ideias da ARPANET, comearam
a criar suas prprias solues para interligar suas redes de computadores.

16

Fundamentos de Desenvolvimento Web

A internet, como a conhecemos hoje, fruto de constantes otimizaes


e de novas tecnologias que se incorporaram s ideias iniciais da ARPANET.
Merece destaque, nesse cenrio, o desenvolvimento do protocolo TCP/IP
(Transmission Control Protocol/Internet Protocol) adotado pela ARPANET em
1982 e que, posteriormente, foi liberado para utilizao civil e, at hoje, tem
se mostrado uma das melhores alternativas para comunicao entre computadores. Com a adoo de um protocolo nico e padronizado, tornou-se vivel
conectar computadores de diferentes fabricantes em redes com diferentes
meios de distribuio, potencializando ainda mais a utilizao da internet.

protocolo
Um protocolo de rede
um conjunto de regras que
definem a forma como dois
sistemas se comunicam.
uma espcie de lngua falada
entre os dispositivos. Se ambos
falam o mesmo protocolo
ento a comunicao pode ser
estabelecida.

1.2 Princpios de funcionamento


Como vimos anteriormente, a internet uma rede de computadores de
acesso pblico e ilimitado (sem um dono) que utiliza a infraestrutura de
telecomunicaes. Embora no exista um dono, existem consrcios internacionais, como o W3C (World Wide Web Consortium), com a tarefa de
agregar empresas filiadas na tentativa de, em conjunto, desenvolver padres
para a internet.
O acesso internet se d, normalmente, por meio de um ISP (Internet Service
Provider ou Provedor de Servio de Internet) e utiliza-se de, pelo menos, trs
componentes (CPE, Rede de Acesso e POP) ilustrados na Figura 1.2.

Figura 1.2: Acesso internet


Fonte: CTISM, adaptado dos autores

CPE (Customer Premises Equipment) o equipamento que conecta o


dispositivo rede de acesso (exemplo: modem).

Rede de acesso o tipo de infraestrutura que liga o dispositivo ao provedor de internet (exemplos: cabos de cobre, fibra tica, Wi-Fi).

Aula 1 - Como a internet funciona?

17

O W3C tem como misso


conduzir a World Wide Web para
que atinja todo seu potencial,
desenvolvendo protocolos e
diretrizes que garantam seu
crescimento de longo prazo. Para
saber mais sobre a W3C, acesse:
http://www.w3.org
ou o escritrio no Brasil
disponvel em:
http://www.w3c.br

CPE
A sigla CPE cuja traduo seria
algo como equipamento dentro
das instalaes do cliente
um termo tcnico genrico
utilizado por fornecedores de
servios de comunicao. Sua
definio est atrelada ao
contexto em que utilizada.
Por exemplo, para uma empresa
de telefonia, o CPE pode ser
o aparelho de telefone (no
caso dos servios de voz) ou o
modem (para servios de dados).
J no caso de uma operadora
de telefonia mvel, o CPE
o telefone celular. Qualquer
equipamento que seja necessrio
para um cliente receber o
servio de comunicao um
CPE (roteadores, cable modem,
receptor de ondas de rdio, etc.).

POP (Point of Presence) o ponto de presena do provedor onde esto


os equipamentos que atribuem ao dispositivo um endereo IP, dando-lhe
acesso internet.
Como pde ser observado, para que um computador possa se conectar
internet e se comunicar com outros computadores, faz-se necessrio que
este receba um nmero de identificao esse nmero conhecido como
endereo IP (Internet Protocol). Para entender a importncia de um endereo
IP, podemos fazer uma analogia com o sistema de telefonia: para que duas
pessoas conversem entre si, ambas precisam de um nmero telefnico (origem
e destino). O mesmo se aplica aos computadores conectados internet: cada
um, no momento em que se conecta a um provedor de acesso, recebe um
nmero (nmero IP) a partir do qual pode realizar chamada (conexes) com
outros computadores que tambm estejam conectados internet.

No Brasil, a entidade responsvel


pela coordenao da atribuio
de endereos de internet
o Comit Gestor da Internet
no Brasil cgi.br. Suas outras
atribuies so estabelecer
diretrizes estratgicas
relacionadas ao uso e
desenvolvimento da internet
no Brasil e coletar, organizar e
disseminar informaes sobre os
servios de internet, incluindo
indicadores e estatsticas.

Cabe ressaltar que qualquer dispositivo conectado internet, independente


de ser um computador, um celular/smartphone, uma impressora ou mesmo
uma geladeira, dever possuir um endereo IP. Normalmente, os provedores de servios de internet adquirem/locam, de agncias reguladoras, faixas
de endereos IP que so atribudas a seus usurios quando conectados
internet. Um usurio domstico de internet, cada vez que se conecta, pode
receber um endereo IP diferente. No entanto, usurios coorporativos (como
empresas) podem adquirir endereos IP fixos (permanecendo os mesmos a
cada conexo).
Um endereo de internet, IP na verso 4, um nmero escrito em quatro partes (octetos), cada uma variando de 0 a 255 por exemplo: 200.132.39.115.
importante ressaltar que um endereo IP no identifica, necessariamente,
um equipamento individual, mas sim uma conexo. Podemos encontrar equipamentos (gateways) conectados a vrias redes que possuem mais de um
endereo IP (um para cada conexo).
Ento, para que um recurso seja acessado na internet, precisamos conhecer
um nmero IP que nos leve at ele. Para facilitar a memorizao dos endereos,
foi implementado um sistema de nomes de domnio DNS (Domain Name
System) atravs do qual possvel traduzir um endereo, como www.mec.
gov.br, em um endereo que nos remeta at a rede desejada nesse caso, a
do MEC (Ministrio da Educao). O DNS um sistema hierrquico que passou
a ser utilizado em 1984, fundamentado em uma base de dados distribuda
hierarquicamente na qual os equipamentos realizam consultas para descobrir
o endereo IP dos computadores que precisam se conectar (COMER, 2007).

18

Fundamentos de Desenvolvimento Web

O endereo de um recurso, na internet, , normalmente, dividido por sees


separadas por . (ponto). As sees mais direita, comumente, identificam
um nome de um domnio dentro do sistema de DNS. A Figura 1.3 ilustra a
diviso do endereo www.mec.gov.br: o termo br remete a pesquisa
para a base de nomes de domnio hospedados no Brasil; o termo gov
indica que endereo categorizado como governamental; o termo mec
remete a conexo para a rede do Ministrio da Educao, no qual existe um
computador de nome www que responder pela requisio. A partir de
pesquisas nas bases DNS, o endereo www.mec.gov.br ser convertido em
um endereo IP.

Figura 1.3: Sistema de nomes de domnio


Fonte: CTISM, adaptado dos autores

Agora que entendemos como o endereo de um recurso na internet convertido em um endereo IP, podemos compreender, tambm, o significado do
termo URL Uniform Resource Locator ou localizador-padro de recursos. URL
o termo correto que devemos utilizar quando nos referimos a um endereo
na internet. Ela nos remete a um destino nico (uma pgina, um vdeo, um
documento, um servio, etc.). A partir de uma URL, temos todas as informaes
necessrias para encontrar e para acessar uma informao na internet (protocolo utilizado, endereo do dispositivo, caminho para o recurso e o recurso
propriamente dito). A Figura 1.4 ilustra as partes de uma URL hipottica:

Figura 1.4: URL


Fonte: CTISM, adaptado dos autores

Aula 1 - Como a internet funciona?

19

Com o aumento exponencial


de dispositivos conectados
a internet, o nmero de
combinaes possveis de
um endereo IP em sua
verso 4 est praticamente
esgotado. Tal situao motivou
o desenvolvimento de uma
nova gerao de endereos
IP, conhecida como IPv6, cuja
representao se d utilizandose de oito grupos com 4
dgitos hexadecimais (exemplo:
2001:0db8:85a3:08d3:1319:8
a2e:0370:7344), aumentando,
substantivamente, a
possibilidade de combinaes e,
consequentemente, a quantidade
de dispositivos que podem estar
conectados internet.

Para saber mais sobre a lista


de nomes de domnio de
primeiro nvel (DPNS), acesse:
http://registro.br
(site responsvel pelo registro
de nomes de domnio para
materiais hospedados noBrasil).

1.3 O que se pode fazer com a internet?


Muitos estudiosos consideram a internet uma das maiores revolues pela
qual a humanidade passou e vem passando em um curto espao de tempo.
Entre tantas opes que temos ao utilizar a internet, podemos classificar
alguns servios clssicos que, de uma forma ou de outra, serviram de base ou
fundamento para o surgimento de outras formas de aplicao.
Em geral, as aplicaes que funcionam sobre a internet obedecem a um
mecanismo conhecido como cliente/servidor (client/server), por meio do qual
duas aplicaes conversam entre si atravs de um protocolo predefinido. O
modelo de aplicao cliente/servidor prev que, em um dispositivo, exista uma
aplicao (denominada de aplicao servidora ou server application) responsvel por aceitar requisies de aplicaes clientes. As requisies enviadas pelas
aplicaes clientes so como solicitaes ou pedidos que demandam alguma
ao por parte das aplicaes servidoras.
Geralmente, as aplicaes clientes preocupam-se mais com requisitos de apresentao das informaes e coleta de dados de entrada, enquanto as aplicaes
servidoras preocupam-se com o desempenho, a disponibilidade e a segurana.
Nesse modelo, um cliente no compartilha de seus recursos, apenas solicita
o contedo do servidor. As sees so iniciadas pelos clientes. Os servidores,
por sua vez, esperam as solicitaes de entrada.
A seguir, abordaremos alguns aspectos de servios clssicos que podemos
encontrar na internet e que, de certa forma, influenciaram outros tantos
surgidos posteriormente, estendendo, assim, suas funcionalidades.

1.3.1 Correio eletrnico


O correio eletrnico tambm conhecido como e-mail um servio atravs
do qual podemos explorar a comunicao de forma off-line, ou seja, sem que
ambos os interessados estejam conectados. Podemos fazer uma analogia ao
correio tradicional, no qual as correspondncias enviadas por um remetente
a um destinatrio somente sero lidas se este ltimo se dirigir at sua agncia
de correio para retirar o material remetido (considerando, nesse exemplo, a
inexistncia do carteiro).
Por meio do servio de correio eletrnico, uma aplicao (cliente de e-mail) oferece ao utilizador alguns campos para preenchimento (destinatrios, assunto,
texto da mensagem, etc.) que iro compor uma mensagem. Aps a submisso
da mensagem a uma aplicao servidora (servidor de e-mail), esta se encar-

20

Fundamentos de Desenvolvimento Web

rega de encaminh-la s caixas de correio de cada um dos destinatrios (que


ficam armazenadas em aplicaes servidoras). O usurio que deseja verificar
se existem novas mensagens, realiza uma requisio por meio de seu cliente
de e-mail, o qual consulta, no respectivo servidor, a existncia ou no de mensagens. Se existirem, as mesmas so apresentadas ao destinatrio na forma
como foram concebidas.
Um endereo de e-mail composto, basicamente, por duas partes que so
separadas pelo sinal de @ (que em ingls lido como at em). A Figura
1.5 ilustra um endereo de e-mail, evidenciando o nome do usurio (nome da
caixa postal eletrnica) e o endereo da aplicao servidora responsvel pelo
recebimento e pelo envio de mensagens eletrnicas.

Figura 1.5: Anatomia de um endereo de e-mail


Fonte: Autores

1.3.2 Transferncia de arquivos


O servio de transferncia de arquivos baseado em um protocolo especfico
denominado de FTP (File Transfer Protocol). Por meio desse servio, uma
aplicao cliente pode realizar duas operaes bsicas:
Download quando um arquivo originalmente localizado no equipamento servidor copiado para o equipamento do cliente. O termo baixar um arquivo est diretamente associado operao de download.
Upload quando um arquivo que est localizado no equipamento do
usurio submetido para a aplicao servidora de forma que uma cpia
do mesmo seja realizada. Nesse caso, a expresso equivalente seria de
subir um arquivo, embora no seja muito utilizada.
Um cliente de FTP uma aplicao que oferece uma interface, normalmente,
composta por duas visualizaes: na primeira, apresentada a estrutura de
pastas do computador do usurio e, na segunda, a estrutura de pastas do

Aula 1 - Como a internet funciona?

21

computador servidor. Tal aplicao oferece a possibilidade de navegar pela


estrutura de pastas at encontrar o local exato em que o upload ser efetivado
ou onde o download ser descarregado.
por meio de um cliente de FTP que, normalmente, as pginas desenvolvidas
so enviadas para o computador responsvel por sua publicao. A Figura
1.6 ilustra a janela de um cliente de FTP. Observe que, do lado esquerdo, so
exibidos os arquivos locais (do equipamento do usurio) e, do lado direito,
so exibidos os arquivos remotos (no servidor de arquivos).
Embora existam servios de FTP annimo, no qual no necessria a identificao do usurio, normalmente, por questes de segurana, os servidores
exigem a informao de um nome de usurio (login) e de uma senha.

Figura 1.6: Exemplo de aplicativo para transferncia de arquivos


Fonte: http://filezilla-project.org/images/screenshots/fz3_osx_main-small.png

1.3.3 Conversa em tempo real


Conhecida e popularizada como chat, a conversa em tempo real, diferentemente do servio de correio eletrnico, exige que ambas as partes interessadas
estejam conectadas (on-line) ao mesmo tempo. Existem diferentes formas de
apresentao do servio de chat. Algumas utilizam protocolos e aplicativos
especficos. Nesses casos, necessrio que o usurio esteja cadastrado junto
ao servio de mensagens instantneas e, medida em que se conecta a ele,
outros usurios, previamente autorizados, podem enviar e receber mensagens.

22

Fundamentos de Desenvolvimento Web

Outro formato bastante difundido so as salas de bate-papo, nas quais o usurio


se conecta a um servidor especfico (que geralmente no exige cadastro prvio,
apenas uma identificao de usurio), escolhe uma sala (geralmente atrelada
a um tema) e pode se comunicar com todos os usurios presentes na mesma.
Nesse formato, tambm possvel que os usurios se comuniquem diretamente
sem que a mensagem seja exibida a todos os participantes da conversa.
Independente do formato, a conversa em tempo real utiliza-se do modelo
cliente/servidor. Uma aplicao cliente responsabiliza-se por apresentar as mensagens recebidas da aplicao servidora e direcionadas ao usurio utilizador,
alm de coletar e de submeter as mensagens do usurio para a aplicao
servidora de forma que esta se encarregue de disponibiliz-las aos destinatrios.

1.3.4 Acesso remoto


Acessar remotamente um recurso significa ter controle total sobre tal dispositivo, como se estivesse sentado diante dele, porm a distncia. Essa uma
aplicao muito comum desde os primrdios da internet. Atravs de um
acesso remoto, um usurio pode controlar, por exemplo, seu computador
a quilmetros de distncia. O equipamento que o usurio est operando
conecta-se com o recurso remoto que por sua vez envia as aes que esto
sendo executadas para a tela do equipamento do usurio.
Existem diferentes aplicativos para a realizao de acessos remotos. Em alguns
deles, somente possvel acessar terminais em modo caractere (modo texto,
no grfico), em outros, possvel receber toda a tela do computador remoto
e interagir, inclusive, utilizando dispositivos apontadores como o mouse, por
exemplo. Esse tipo de aplicao/servio muito utilizado por equipes de suporte
ao usurio, que conseguem ter acesso aos computadores dos usurios sem a
necessidade de um deslocamento fsico (nesse caso, pressupondo que o problema a ser resolvido no est relacionado conectividade do equipamento).

1.3.5 Navegao no hipertexto


A navegao entre pginas , especialmente, o contedo que mais nos interessa. Ao final deste material, objetiva-se que voc esteja apto a construir
pginas, formatando e disponibilizando contedos. Certamente, essa atividade, possibilitada pela internet, pode ser considerada a mais importante ou
a de maior impacto entre a sociedade. Muito do que se faz hoje, na internet,
est fortemente apoiado nos fundamentos da navegao pela web (ou grande
teia, como tambm conhecida).

Aula 1 - Como a internet funciona?

23

O princpio de navegao pelo hipertexto foi pensado, inicialmente, por Tim


Berners-Lee, um britnico que, em meados dos anos 90, trabalhava no ncleo
de computao do CERN (Organizao Europeia de Pesquisa Nuclear). Tim
Berners-Lee buscava uma forma de organizar, eletronicamente, os textos e as
pesquisas dos cientistas do CERN (e tambm de outras partes do mundo) de forma
que os documentos produzidos pudessem ser interligados e compartilhados.
Partindo-se desse anseio, Tim Berners-Lee desenvolveu um software prprio
e um protocolo para recuperar hipertextos que foi denominado de HTTP
(Hypertext Transfer Protocol). O formato do texto criado para ser transportado
pelo protocolo foi chamado de HTML (Hypertext Markup Language) e consiste
de uma linguagem de marcao pela qual possvel, por meio de comandos
(tags), incluir ligaes entre textos inclusive entre materiais publicados em
diferentes locais. Boa parte do que estudaremos neste material est diretamente relacionada s ideias de Tim Berners-Lee.
Alm de um protocolo (conjunto de regras para que dois dispositivos conversem) e de uma linguagem de marcao (para permitir que os usurios se
expressem), era necessrio um software que, utilizando-se do protocolo desenvolvido, conseguisse obter os documentos escritos em HTML, interpret-los e
exibi-los. Por meio deste software, esperava-se que o usurio navegasse pelo
hipertexto, ou seja, ao encontrar no texto uma ligao com outro material, com
um simples clique, o usurio seria direcionado para uma nova pgina/contedo.
Diante de tal necessidade, Tim Berners-Lee criou um prottipo daquele que
viria a ser um dos softwares mais indispensveis para quem deseja utilizar a
internet: o navegador (ou browser). O primeiro navegador foi, inicialmente,
nomeado de World Wide Web, mas, posteriormente, para evitar confuso
com a expresso World Wide Web, foi renomeado para Nexus. A Figura
1.7 demonstra a interface do primeiro navegador (SILVA, 2007).

24

Fundamentos de Desenvolvimento Web

Figura 1.7: Prottipo World Wide Web um navegador primitivo


Fonte: Silva, 2007

Assim como os principais servios que estudamos anteriormente, a navegao


pelo hipertexto obedece aos princpios dos sistemas cliente-servidor. Um documento HTML, ao qual podemos chamar de pgina, est hospedado em um
servidor web (web server) que, nesse caso, desempenha o papel de aplicao
servidora. Um servidor web recebe requisies de documentos por meio de
URLs e as entrega por meio do protocolo HTTP. Pelo lado cliente, temos o
navegador ou browser cuja funo principal submeter uma requisio no
formato de uma URL e, aps receber o resultado, na forma de um documento
HTML, interpret-lo e apresent-lo ao utilizador.
Observe que, quando o navegador recebe a resposta do servidor web, o
documento HTML retornado no apresentado tal como foi recebido. O
documento passa por um processo de interpretao e o resultado de tal
etapa o que mostrado ao usurio. Atualmente, no comum que uma
mesma pgina seja exibida de forma diferente em navegadores concorrentes.
Por isso, muito importante que voc, que est comeando a desenvolver
pginas e aplicaes para a internet, preocupe-se sempre em seguir padres
estabelecidos, minimizando esse tipo de problema.
Alm de disponibilizar contedo atravs de pginas interligadas, os conceitos difundidos pelas ideias de Tim Berners-Lee evoluram. Hoje, em muitas
situaes, o contedo a ser apresentado gerado dinamicamente. Isso
possvel atravs do desenvolvimento de aplicaes web, ou seja, programas
de computador executados no servidor web e produtores de contedo que
enviado para interpretao e apresentao pelo navegador. Esse tipo de

Aula 1 - Como a internet funciona?

25

aplicao, normalmente, faz uso de servidores de banco de dados e de outros


recursos comuns em sistemas de informao. A Figura 1.8 ilustra os principais
elementos presentes em um cenrio de navegao pela internet.

Figura 1.8: Elementos de navegao pelo hipertexto


Fonte: CTISM, adaptado dos autores

Resumo
Nesta aula, estudamos um pouco da histria e das motivaes que levaram
ao surgimento da internet. Tambm, abordamos algumas tecnologias que
balizam seu funcionamento, entre elas os conceitos de protocolo, nmero IP,
sistema de nomes de domnio, etc. De forma sucinta, tratamos de algumas
coisas que podemos fazer com a internet, como transferir documentos entre
dispositivos separados fisicamente, conversar com outras pessoas tanto
de forma on-line como off-line , acessar recursos remotos e navegar pela
grande teia de informaes.

Atividades de aprendizagem
1. Qual a principal motivao dos cientistas para desenvolver a internet?
2. O que voc entende por URL?
3. Imagine a seguinte situao: voc precisa enviar para Belo Horizonte
(MG) uma cpia de um documento (certido de nascimento, por exemplo) e o prazo que voc tem muito curto para enviar a cpia impressa
pelo correio. Uma alternativa seria enviar o material por FAX, mas o nico
aparelho ao qual voc tinha acesso parou de funcionar. Descreva com
suas palavras uma alternativa para o envio do documento, utilizando
recursos computacionais.

26

Fundamentos de Desenvolvimento Web

4. Muito do que se desenvolve para a internet baseado no modelo cliente/


servidor. Explique com suas palavras como esse tipo de aplicao funciona.
5. Teste seus conhecimentos sobre internet (no somente aqueles abordados durante a aula), respondendo V (para verdadeiro) ou F (para falso)
no quiz a seguir:
(

) Um mecanismo de busca responsvel por distribuir endereos na


internet.

) Navegadores web, como o Internet Explorer e o Mozilla Firefox, podem


ser usados para acessar servidores, atravs dos quais se pode fazer a
leitura e o envio de e-mails, conhecidos como servidores de webmail.

) E-mails podem ser lidos e enviados no somente por meio de computadores, mas tambm a partir de telefones celulares e PDAs (computadores
de mo) com acesso internet.

) A seguinte sequncia de caracteres possui uma estrutura tpica de URL


de pginas da web brasileira: www.com.empresa.bra.

) A internet uma ferramenta de utilizao privada, sendo que o servio


principal de comunicao de dados est nos EUA.

) So exemplos de ferramentas que permitem que duas pessoas conversem


em tempo real pela internet: chat, MSN e Skype.

) Browser (ou navegador) o software utilizado para iniciar a conexo do


computador com a rede que d acesso internet.

) Um e-mail deve ser direcionado para uma nica pessoa.

) Todo endereo comea com a palavra www que significa (World Wide
Web Rede de Alcance Mundial).

) Para acessar um recurso na internet (seja ele uma pgina ou um arquivo),


precisamos do seu endereo: uma URL.

) Todas as pessoas que recebem um mesmo e-mail sempre conseguem


saber quais outras pessoas tambm o receberam.

Aula 1 - Como a internet funciona?

27

) O contedo dos materiais disponveis na web pode ser interligado por


links (ou hiperlinks).

) Fazer um download significa enviar um arquivo do seu computador para


outro atravs da internet.

28

Fundamentos de Desenvolvimento Web

Aula 2 Design para web


Objetivos
Oportunizar a reflexo acerca dos conceitos inerentes rea de
design em especial o design para web.
Estruturar informaes explorando a anatomia de pgina web.
Diferenciar os elementos presentes em uma pgina web.

2.1 O que design?


O termo design, como utilizado na lngua portuguesa, um estrangeirismo apropriado do substantivo ingls design (significando propsito, objetivo, inteno) e do verbo ingls design (significando projetar/esquematizar) (NIELSEN;
LORANGER, 2007). O design uma importante ferramenta de agregao de
valor. Podemos aplicar suas tcnicas em diferentes reas como a construo
civil, o automobilismo, as mdias impressas, as embalagens, os produtos, etc.
Como rea, o design multidisciplinar e trata, em outras palavras, de escolher
a melhor forma de apresentar uma ideia. Dependendo da mdia ou do alvo em
que se deseja trabalhar, certas tcnicas de design sero mais apropriadas do
que outras. A diagramao de um cartaz convidando a populao para uma
festa, certamente, ser diferente de uma chamada na televiso ou mesmo
de um site de divulgao. As mdias oferecem possibilidades diferentes que
o profissional deve estar apto para explorar.

2.2 Web design


O advento da web abriu espao para uma nova forma de planejamento de
transmisso de ideias/objetivos em materiais publicados em ambientes on-line:
web design. Tais tcnicas consistem da estruturao adequada de informaes,
utilizando recursos apropriados para veiculao em pginas web, de maneira
que o usurio possa alcanar seu objetivo de forma direta e agradvel.

Aula 2 - Design para web

29

site
Um site ou website um
conjunto formado por uma ou
mais pginas web vinculadas.
pginas web
Uma pgina web se constitui
num documento, normalmente,
codificado, atravs de uma
linguagem de marcao que, em
conjunto com outros elementos
(figuras, por exemplo), pode ser
acessado atravs da internet por
meio de uma URL.

O design para web no como o design de impresso. A web um meio


nico que, por sua natureza, fora os profissionais a desistir do controlar coisas
que eles, tradicionalmente, eram responsveis por controlar (NIEDERST, 2002).
Elementos, como cores, fontes e disposio, podem ser determinados pelo
usurio (ou por seu software navegador) e no h garantias de que todos iro
visualizar uma pgina da mesma forma como foi projetada e desenvolvida.
Projetar para o desconhecido consiste na principal atividade de um profissional
que trabalha com web design. Como profissional, importante que voc
tenha um bom entendimento sobre o ambiente web e consiga planejar-se
para o desconhecido. Em seu livro Aprenda web design, Niederst (2002)
nos alerta sobre alguns itens, que podem ser desconhecidos, para os quais
devemos estar preparados.
Navegadores desconhecidos atualmente, existe uma grande variedade de softwares, denominados de browsers ou navegadores, cujo intuito de nos fornecer acesso web. Alm disso, um mesmo navegador
pode ter inmeras verses. Evite instrues ou recursos que, sabidamente, so especficos de um ou de outro browser. Procure sempre utilizar
linguagens ou notaes padronizadas pela W3C esta uma garantia
de que seu site ir se comportar da mesma maneira independente do
software utilizado para exib-lo.

cookies
Um cookie um pequeno
arquivo de texto que trocado
entre o navegador e o servidor
de pginas durante a conexo.
Por meio de um cookie, uma
aplicao web poderia gravar
informaes sobre a navegao
na mquina do usurio. So,
normalmente, utilizados para
relembrar opes de escolha do
usurio e novas visitas feitas ao
mesmo site.

Plataformas desconhecidas assim como temos uma vasta gama de


navegadores, o mesmo tambm ocorre com as plataformas de hardware
e de software que so utilizadas. No temos como saber se os usurios de
nossas pginas utilizam plataformas MS Windows, Linux ou MAC OS (ou
ainda outra). Evite, dessa forma, recursos muito especficos que possam
no estar disponveis em plataformas concorrentes. frustrante quando
encontramos um site com o contedo que buscvamos e recebemos a
informao de que o contedo incompatvel com nossa plataforma ou,
ento, que, para utilizar a pgina, necessria a instalao de softwares
adicionais. Normalmente, nessa situao, o usurio desiste da pgina.
Preferncias de usurios desconhecidas em um ambiente web, no
conhecemos nosso usurio, no sabemos que tipos de recursos ele tem
disponveis ou habilitados para uso. Dessa forma, importante prever
que, por exemplo, um usurio possa ter desabilitado as permisses sobre gravao de cookies. Nesse caso, recursos muito especficos e que
dependem de preferncias pessoais dos usurios devem ser utilizados de
forma opcional.

30

Fundamentos de Desenvolvimento Web

Tamanho de janela desconhecido no sabemos se a tela de nosso


usurio grande ou pequena, certo? Com a popularizao acelerada de
dispositivos mveis, essa varivel torna-se ainda mais crucial. Este um
dos aspectos mais incmodos do design web, mas no podemos perd-lo
de vista. Procure desenvolver a pgina de forma que esta ocupe todo o
espao disponvel e, quando isso no for possvel, avise seu usurio (para
melhor visualizar essa pgina recomendamos a seguinte resoluo...).
Velocidade de conexo desconhecida uma pgina excessivamente
pesada pode impedir que muitos de seus usurios a visitem ou, ento,
no suportem a demora em carreg-la e desistam. Nesse sentido, os
maiores viles so os elementos grficos. Utilize, adequadamente, formatos de imagem de acordo com a quantidade de cores e mantenha-os
com o menor tamanho possvel.

2.3 Planejamento e organizao de informaes


Design e projeto so termos intimamente ligados. Isto evidencia a necessidade
de nos planejarmos antes de qualquer ao. Antes de comear a criar um
site, preciso planejar sua estrutura (pgina principal e pginas adjacentes),
definindo de forma clara e coerente a sequncia das informaes que se
deseja apresentar (MANZANO; TOLEDO, 2008).
Independente do tamanho ou do objetivo do que se pretende publicar ou
desenvolver para web, faz-se necessrio, inicialmente, desenvolver a ideia e
a motivao em torno do que se quer apresentar. No necessrio se apegar
a ferramentas ou a tecnologias para criar um esboo. O mais importante
organizar objetivos e criar estratgias para alcan-los. Uma forma interessante
de alcanar tais estratgias se questionar acerca do que se pretende fazer.
Nessa etapa, so comuns questionamentos como: o que voc espera realizar
ou o que pretende oferecer com o site? A que pblico o site se destina? Quem
ser o responsvel pela gerao do contedo original e com que frequncia
tais informaes sero atualizadas? Que tipo de aparncia ou sensao voc
espera para o site? Observe que a lista de questionamentos pode ser ampliada,
mas o mais importante compreender exatamente onde se deseja chegar e
de que forma (isto o planejamento).
Uma vez que os objetivos esto claros, o passo seguinte criar e organizar o
contedo. Certamente, ao longo de sua trajetria profissional, voc ir ouvir
expresses como: A pior parte definir o contedo! ou D-me o contedo

Aula 2 - Design para web

31

resoluo
O termo resoluo utilizado
para determinar o tamanho
mximo que uma tela pode
exibir informaes. A resoluo
de uma tela medida em
pontos (pixels) e cada usurio,
em funo do tamanho de
monitor disponvel, pode utilizar
diferentes configuraes.

e deixe o resto comigo!. De fato, o contedo a parte mais importante de


uma pgina web. ele o fator determinante em relao quo atrativo ou
no ser o material a ser publicado. Aparncia agradvel e bem acabada ajuda,
mas um site bonito e sem contedo no faz com que o visitante retorne a ele.
A definio do contedo a ser apresentado determinada por dois fatores
muito importantes e diretamente relacionados: a criao (concepo) e o
design das informaes (LEMAY, 2002). Em relao criao, importante
deixar claro quem ser o responsvel por tal concepo. comum encontrarmos boas ideias, mas, quando vamos olhar mais de perto, elas so vazias,
no tm contedo. Isto vale tambm para quando voc estiver desenvolvendo
um site para algum cliente. importante que ele lhe oferea, explicitamente,
o contedo que deseja apresentar de forma on-line e que se estabelea uma
poltica de atualizao de tal contedo.
Estruturar informaes para um material on-line tambm ser uma atividade
desafiadora. Esse processo, conhecido como design de informaes, consiste
em organizar e planejar a melhor maneira de apresentar o contedo produzido. Aqui, cabe lembrar que cada material tem suas especificidades, ou seja,
a forma de abordar um contedo em um cartaz ou em um manual no a
mesma que em uma pgina para internet ou em um programa de televiso.
comum que o demandante de uma pgina web lhe entregue um folder
impresso com as informaes que ele deseja colocar em seu site. Da mesma
forma, na medida em que voc solicita maiores informaes, para extrair
mais contedo, recebe um manual com 100 pginas. Observe que o trabalho
nessa etapa tentar organizar as informaes de forma que seu contedo
seja adaptado para a web e se torne atrativo em tal plataforma.
Quando tratamos de design de informaes, temos que levar em conta tambm o pblico-alvo que ir visitar nossas pginas. Em geral, o pblico usurio
da internet tem pressa e est procura de informaes instantneas. Da
mesma forma, na medida em que encontra o que procura, este mesmo pblico
pode sentir a necessidade de se aprofundar. Precisamos tirar proveito dessas
situaes e dos recursos que temos em um ambiente on-line, adequando
nossos contedos.
Materiais excessivamente extensos em ambientes on-line geram alguns inconvenientes, como o tempo que levam para ser carregados e formatados ou,
ainda, por cansar o usurio que, conforme j mencionamos, est procura

32

Fundamentos de Desenvolvimento Web

de informao instantnea. Por outro lado, contedos muito reduzidos no


conseguem transmitir a informao de forma imediata e a necessidade de
ficar clicando, interminavelmente, para chegar at a informao desejada
tambm cansa e irrita os visitantes. Para evitar ambas as situaes, precisamos
fazer uso do que de melhor a web nos oferece: ligaes, vnculos ou links
que nos interligam com contedos novos ou anteriores, permitindo a livre
navegao por parte do usurio.
O resultado do design de informaes , em geral, um diagrama que revela
a organizao das interligaes entre as pginas. H diferentes formas de
organizao, cada uma adequada a uma determinada situao. As principais
tcnicas so: organizao sequencial (rgida ou flexvel) e organizao em
rvore (MANZANO; TOLEDO, 2008).
A apresentao de textos longos, comumente, utiliza a tcnica de organizao sequencial. A Figura 2.1 ilustra duas estruturas de sites empregando
a organizao sequencial. Na primeira parte da figura, observamos uma
organizao sequencial rgida, na qual as pginas possuem, basicamente, dois
elos: o prximo contedo e o contedo anterior. Esse tipo de abordagem
til quando a navegao obedece a um fluxo de informaes bem definido
(etapa1, etapa2, etapaN), como um formulrio de pesquisa ou um processo
de compra.

Figura 2.1: Organizao sequencial de pginas


Fonte: CTISM, adaptado de Manzano e Toledo, 2008

Aula 2 - Design para web

33

Ainda, na Figura 2.1, podemos observar uma forma mais flexvel de organizao sequencial. Nesse caso, ligaes (links) so empregadas para acrescentar
informaes complementares (em alguns casos elementos grficos: figuras,
diagramas, fotos, etc.). Tal tcnica , normalmente, utilizada na estruturao
de textos longos ou de contedos especficos que so desenvolvidos em torno
de um assunto principal.
Quando um site aborda diferentes assuntos ou se utiliza de tpicos individuais, aconselha-se o emprego da organizao em rvore, conforme pode
ser visualizado na Figura 2.2. Nesse caso, a caracterstica mais marcante
a utilizao de uma pgina raiz (homepage), contendo um ndice ou menu
com os temas de cada assunto abordado. A partir de ento, os temas so
relacionados s suas respectivas pginas por meio de ligaes de hipertexto
e cada pgina do site se relaciona com outras subpginas.

Figura 2.2: Organizao em rvore


Fonte: CTISM, adaptado de Manzano e Toledo, 2008

A web um espao bastante democrtico e as tcnicas discutidas para estruturao do contedo no so, necessariamente, utilizadas de forma rgida e
inflexvel. Pelo contrrio, o que se observa na prtica so estruturas mistas,
ou seja, organizao dos vnculos entre as pginas de forma lgica dando
ao usurio a liberdade de navegar e de se aprofundar de acordo com sua
necessidade, permitindo, inclusive, comear do princpio a qualquer momento.

34

Fundamentos de Desenvolvimento Web

2.4 Layout e aparncia


Layout (ou leiaute) a forma pela qual os itens esto dispostos/diagramados,
em outras palavras, refere-se ao design grfico e a aparncia visual. Durante o
desenvolvimento de pginas para internet o projeto de layout uma atividade
crtica e importante que esteja definido de forma consistente e prioritria,
pois a partir dele o restante do trabalho ser colocado em prtica.
Na etapa de especificao do layout, devem ser definidos os itens que iro
compor a identidade visual do site, como o esquema de cores, a tipografia,
o estilo das imagens (fotos ou ilustraes, por exemplo) e a ergonomia. A
matria-prima para essa atividade , normalmente, uma relao de elementos grficos e alguns manuscritos que indicam o que deve ser utilizado. No
entanto, voc ir perceber que tambm no so raras as situaes onde o
profissional necessita captar essas informaes e fazer a proposio de
algo novo (NIEDERST, 2002).
Em geral, a definio de um layout segue alguns princpios bsicos (CARRION,
2006): hierarquia das informaes, foco/nfase, equilbrio, relacionamento dos
elementos e unidade/integrao. A hierarquia das informaes determina qual
a disposio da informao, baseando-se em sua importncia em relao aos
demais elementos visuais. De acordo com esse princpio, precisamos definir
a informao mais importante para posicion-la em um lugar estratgico,
porque o usurio interage de imediato com aquilo que ele v primeiro.
O princpio do foco/nfase nos auxilia na disposio dos elementos mais
prioritrios, utilizando os espaos mais nobres do layout. Determinar o foco
envolve identificar a ideia central, ou o ponto focal do material a ser publicado. Aspectos culturais, assim como decises do projeto de uma pgina na
web, influenciam diretamente esse princpio. Em geral, informaes mais
importantes devem estar localizadas no canto superior esquerdo, sendo o
incio ou a base da tela os melhores locais para mostrar informaes sobre
orientaes que devem estar sempre visveis.
O equilbrio dos elementos e das informaes de um site afeta, diretamente,
a forma como o layout compreendido. Mistura de assuntos sem conexo
lgica ou mistura de elementos grficos (sem deixar claro onde um comea e
outro termina) so os principais problemas que podem afetar o equilbrio. Um
tpico exemplo de falta de equilbrio em um layout a mistura de contedo
com anncios. Isso passa para o usurio uma sensao de estar sendo enganado ou persuadido. A falta de estrutura e de equilbrio torna uma pgina
na web mais difcil de ser entendida pelo usurio.

Aula 2 - Design para web

35

tipografia
a arte e o processo de criao
na composio de um texto,
fsica ou digitalmente. Seu
objetivo dar ordem estrutural
e forma aos sinais grficos
utilizados.
ergonomia
Consiste no entendimento
das interaes entre seres
humanos e outros elementos
de um sistema. A ergonomia
a qualidade da adaptao de
um dispositivo a seu operador
e tarefa que ele realiza. No
projeto de uma interface web,
a ergonomia objetiva facilitar e
otimizar o trabalho do usurio
junto ao computador.

De forma complementar, o princpio de relacionamento entre os elementos


prega que estes precisam estar agrupados, categorizados, conduzindo a um
fluxo de navegao lgico. A utilizao de elementos visuais pode ajudar
a comunicar uma relao/conexo especfica de uma pgina com o site do
qual ela faz parte. Da mesma forma, a utilizao de esquemas de cores pode
potencializar a relao entre diferentes elementos do layout.
Por fim e no menos importante, um layout deve se traduzir em uma unidade
integrada de elementos. Esse princpio evidencia-se, especialmente, quando,
em um grande projeto, h necessidade de manter subpginas visualmente
unificadas com o projeto de layout principal. Isso facilita a navegao uma
vez que oferece um ambiente consistente, integrado e previsvel.
Alm desses princpios que norteiam a organizao de um layout, precisamos
observar algumas propriedades ou qualidades que potencializam a experincia
positiva com o site, especialmente a usabilidade e a navegabilidade. Tambm,
no podemos nos distanciar da legibilidade, pois de nada adianta ser bonito
se no pode ser compreendido. E, por fim, destacamos a relevncia da acessibilidade, permitindo um acesso universal e democrtico s informaes.
Usabilidade um atributo de qualidade relacionado facilidade de uso de
algo. Refere-se rapidez com que os usurios podem apreender e utilizar algo
e o quanto lhes agradam utiliz-la. Se um recurso no pode ser utilizado ou
no utilizado por seus usurios, ento, ele no precisa existir.
Navegabilidade uma propriedade da organizao das informaes que nos
remete capacidade de navegao, ou seja, nos permite percorrer intuitivamente os caminhos virtuais que nos so propostos de forma que saibamos
onde estamos, de onde viemos e quais so nossas possibilidades futuras.
A legibilidade uma qualidade que determina a facilidade de leitura de alguma
coisa; mede o quo legvel esta se apresenta ao leitor.
Acessibilidade, no contexto da internet, a propriedade que um site tem para
permitir que portadores de necessidades especiais se utilizem dos recursos
que oferece. Dependendo como os elementos grficos so utilizados no site,
eles inviabilizam qualquer tentativa de um deficiente visual, por exemplo,
conseguir acessar as informaes disponibilizadas pelo site.

36

Fundamentos de Desenvolvimento Web

2.5 Anatomia de um site


Em funo dos princpios discutidos at ento, estudiosos da rea de web
design tm experimentado diferentes formas de organizao de layouts.
Certamente, enquanto usurio da internet, voc j deve ter tido boas e ms
experincias. Contudo, observamos que h uma espcie de padro ou de
roteiro com bastante aceitao e altamente difundido entre grandes e pequenos sites. Tal modelo composto por alguns elementos de contedo que
podem ser visualizados na Figura 2.3, na forma de um esquema numerado.

Figura 2.3: Anatomia de uma pgina web


Fonte: Autores

1. Logotipo o logotipo ou logomarca do site, normalmente, ocupa o


espao mais nobre, onde, comumente, a visualizao ocorre primeiro
(canto superior esquerdo).
2. Banner padro, rea de busca, anncios externos este , tambm,
um espao nobre que, frequentemente, explorado com um banner.
Nessa rea, recomenda-se a utilizao de uma ferramenta de busca ou de
um mapa do site (para simplificar e agilizar a localizao de informaes).
3. Menu administrativo o menu administrativo uma opo importante,
no entanto deve ser discreto. nele que colocamos informaes sobre a
empresa, identificao (login) ou cadastro de usurios, contato, ajuda, etc.
4. Menu de navegao categorizao das informaes disponibilizadas
pelo site. comumente encontrado de forma horizontal, como o menu

Aula 2 - Design para web

37

administrativo. importante que as categorias ou opes do menu sejam


curtas e claras, indicando ao usurio, rapidamente, a opo que ele deve
escolher (excessivas opes tambm no so recomendadas).
5. rea de destaque nesse espao, recomenda-se enfocar algo de maior
importncia dentro do contexto do site. Um site de comrcio eletrnico
poderia divulgar uma promoo; um site de notcias poderia noticiar o
fato mais marcante do dia; um site pessoal poderia remeter para a atividade mais recente ou ltima postagem.
6. Contedo rea de contedo o lugar onde so exibidas as informaes na medida em que navegamos pelo site.
7. Anncios a barra lateral, da direita, pode ser utilizada para divulgao
de atividades afins ao site, como anncios ou links para outras pginas.
8. Rodap o rodap , normalmente, utilizado para informaes sobre
o portal. No , necessariamente, usada por visitantes comuns, mas sim
por aqueles com algum interesse especfico (como anunciar, trabalhe conosco, poltica de privacidade, termos de uso, etc.).
A Figura 2.4 sobrepe a imagem de um portal (www.brasil.gov.br), utilizando o esquema numerado da Figura 2.3 de forma que, atravs de um
exemplo real, possamos visualizar os elementos de uma pgina web e sua
anatomia.

Figura 2.4: Elementos de uma pgina web


Fonte: Autores

38

Fundamentos de Desenvolvimento Web

Cabe ressaltar que os elementos discutidos at ento so aqueles comumente


encontrados. De acordo com o propsito da pgina, ela poder no utilizar
todos os elementos ou ainda adaptar a posio dos mesmos, segundo o que
seu projeto de design considerou mais importante. A Figura 2.5 ilustra um
dos sites mais famosos e que, certamente, para muitos de ns serve como
porta de entrada para a web. Observe como a simplicidade de detalhes,
aliada ao propsito do site (busca de informaes), oferece uma sensao de
equilbrio e de integrao entre seus elementos.

Figura 2.5: Pgina do mecanismo de busca Google


Fonte: www.google.com

Resumo
Nesta aula, discutimos alguns princpios e tcnicas que nos orientam a organizar contedos para publicao em ambientes on-line, bem como noes
de como organiz-los em uma proposta de layout. No decorrer da aula,
conhecemos alguns conceitos chaves que precisam ser aprofundados, mas
que nos do uma noo do que significa desenvolver sites e aplicaes para
a internet. importante salientar que a web um espao muito democrtico
sempre aberto a inovaes, no entanto existem alguns princpios e tcnicas
largamente discutidos e que, quando seguidos, oferecem ao usurio uma
melhor experincia.

Atividades de aprendizagem
1. Explique por que uma das principais atividades do profissional que trabalha com web design projetar para o desconhecido?

Aula 2 - Design para web

39

2. Considere a necessidade de desenvolver um site para operacionalizar


uma votao eletrnica. Nesse contexto, qual das tcnicas de organizao de informaes seria mais indicada? Justifique sua resposta.
3. Que tipos de iniciativas podem habilitar um site a oferecer acessibilidade
a seus usurios?
4. Acesse o endereo da Enciclopdia Livre Wikipedia (www.wikipedia.org),
descreva de que forma as informaes apresentadas esto estruturadas e
quais os elementos que esto sendo utilizados.
5. Que tipo de qualidade/caracterstica est faltando em um site cuja principal reclamao dos usurios a dificuldade de utilizao?
6. Faa um esboo para o layout de um site cujo objetivo a divulgao
de anncios de veculos usados. Considere que diferentes revendas/garagens ou at mesmo pessoas fsicas podem publicar seus anncios. Os
anncios podem ser pagos (nesse caso ganhando maior destaque) ou
gratuitos, ficando disponveis no sistema de busca. Questione-se acerca
do que precisa ser divulgado e de que forma.

40

Fundamentos de Desenvolvimento Web

Aula 3 Introduo linguagem


de marcao
Objetivos
Possibilitar a compreenso da estrutura bsica de uma pgina.
Entender o conceito de tags.
Utilizar tags para formatar blocos de texto.
Entender como as pginas so disponibilizadas na web.

3.1 HTML a linguagem para escrever


pginas para web
Antes de comearmos a dar vida aos layouts que aprendemos a planejar e a
estruturar na aula anterior, precisamos nos instrumentalizar. O primeiro passo
consiste em entender de que forma um documento ou layout deve ser codificado para que seja entendido por um software navegador. Parte dessa introduo j foi abordada em nossa primeira aula, no entanto, naquele momento,
no foi possvel aprofundarmos os conhecimentos.
Os documentos disponveis na internet, independentemente da temtica que
abordem (notcias, entretenimento, cincia, comrcio, etc.), so estruturados
atravs de uma Linguagem de Marcao de Hipertexto conhecida como HTML
(Hypertext Markup Language). Uma linguagem de marcao um mecanismo
para adicionar marcas com algum significado a um texto. Tais marcas so
omitidas na verso do texto que apresentada ao usurio (NIEDERST, 2002).
Certamente, com um exemplo ficar mais simples de entender e apresentar os
conceitos subsequentes. Utilizando um editor de texto no formatado (como
bloco de notas ou gedit), digite o bloco de texto ilustrado na Figura 3.1 que
representa a estrutura bsica de uma pgina HTML. Aps digitar, salve o arquivo
com o nome exemplo.html.

Aula 3 - Introduo linguagem de marcao

41

Existem inmeros softwares que permitem a construo de pginas HTML sem


que seu utilizador conhea a fundo os detalhes da linguagem. No entanto,
recomendado que, neste momento, voc utilize um editor de textos sem
recursos para formatao para que conhea e se aproprie dos conceitos bsicos
da linguagem de marcao para poder explor-los, futuramente, com maior
profundidade, utilizando-se de um editor que ir lhe facilitar muito o trabalho.

Figura 3.1: Estrutura bsica de uma pgina HTML


Fonte: Autores

O arquivo exemplo.html, se aberto por um navegador (browser), apresentar o resultado conforme pode ser visualizado na Figura 3.2. Observe que
a maior parte do texto digitado (comandos ou tags) suprimida, de forma
que apenas o contedo entre as marcas visualizado.

Figura 3.2: Visualizao de uma pgina HTML em um navegador


Fonte: Autores

A partir desse primeiro exemplo, podemos dar continuidade s nossas discusses. A linguagem HTML utilizada para trabalhar a estrutura de um
site. verdade que ela tambm permite que se atue sobre a apresentao
desta, embora no seja essa sua especialidade. Observe que, no exemplo
anterior, apenas dois itens so visveis aps o processamento do browser: o
ttulo, Minha Pgina, e a informao Essa minha primeira pgina. O

42

Fundamentos de Desenvolvimento Web

restante do texto serviu apenas para informar de que forma o browser deve
apresentar a informao.
As marcas utilizadas para dar significado ao texto so conhecidas como tags,
cuja traduo literal seria algo como etiqueta. A maior parte das tags
do tipo container, ou seja, h uma marca inicial que delimita o comeo da
instruo e outra de fechamento, encerrando o efeito da instruo sobre o
contedo. A marca de fechamento tem o mesmo nome da marca inicial e
se diferencia desta apenas por comear com uma barra (/). Algumas tags,
no entanto, so independentes, ou seja, no h necessidade de uma marca
para fechamento. As tags podem conter tambm atributos, como caso da
tag <body> que delimita o incio do corpo da pgina e utiliza-se do atributo
bgcolor para definir a cor de fundo da rea de contedo. O valor de um
atributo sempre colocado entre aspas.
A especificao atual da linguagem HTML a verso 5 e padronizada pelo
consrcio W3C. Contudo, ao longo dos nossos exemplos, procuraremos
utilizar instrues compatveis entre as diferentes verses. No perca de vista,
entretanto, os avanos e os recursos disponveis a partir de novas verses.
importante que voc esteja sempre atualizado e disponvel para aprender.

3.2 Estrutura bsica de uma pgina HTML


A Figura 3.1 ilustrou um tpico exemplo de uma estrutura bsica para uma
pgina HTML. Observe que a tag <html> delimita o incio e trmino do
documento HTML (ela a primeira tag a ser aberta e a ltima a ser fechada).
Observe, tambm, que as tags podem se apresentar de forma hierrquica, ou
seja, umas dentro das outras. Este o caso das tags <head> e <body> que
demarcam, respectivamente, a rea de cabealho e de corpo do documento.
A seo de cabealho no produz informaes visuais e utilizada como uma
seo de configurao, na qual podemos indicar comandos que devem ser
lidos antes de se carregar o contedo que ser apresentado. nessa seo
que indicamos, por exemplo, o ttulo da pgina (tag <title>) e tambm
metadados, como o autor da pgina (author), descrio (description), palavras chave (keywords), idioma (language), entre outros. A utilizao da tag
de cabealho <head> opcional.
Aps a seo de cabealho, inicia-se, obrigatoriamente, o corpo da pgina
a tag <body>. O corpo da pgina define a rea que ser apresentada

Aula 3 - Introduo linguagem de marcao

43

metadados
So informaes sobre os
dados, ou seja, dados que
descrevem de que forma os
dados referenciados devem ser
interpretados ou categorizados.

Para saber mais sobre outras


opes da tags de metadados,
acesse a referncia oficial
do site da W3C:
http://www.w3.org/wiki/HTML/
Elements/meta

como contedo, ou seja, a rea visvel da pgina. a partir da tag <body>


que o documento HTML ser estruturado. Alguns atributos da tag <body>
permitem, por exemplo, alterar a cor de fundo (bgcolor) ou, ento, utilizar
uma imagem de fundo (background).

3.3 Elementos que no so interpretados


Antes de dar sequncia estruturao de contedos a partir de documentos
HTML, importante que tenhamos claro que algumas de nossas aes podem
vir a ser ignoradas pelo browser. Para entender melhor, vamos a mais um
exemplo. Digite o bloco de texto ilustrado na Figura 3.3, salve-o como um
arquivo html e abra-o a partir do navegador.

Figura 3.3: Cdigo com exemplo de marcas/caracteres ignorados pelo navegador


Fonte: Autores

O resultado da interpretao do cdigo da Figura 3.3 pode ser visualizado


na Figura 3.4. Observe, por exemplo, que as quebras de linhas e os mltiplos espaos ou tabulaes so ignoradas pelo navegador no momento
em que interpreta o cdigo. Da mesma forma tags no conhecidas, como
a tag <abraco>, tambm so ignoradas pelo navegador. Por fim, quando
se deseja realizar anotaes no cdigo da pgina sem que as mesmas sejam
apresentadas, podemos utilizar de um conceito denominado de comentrio.
Um comentrio uma anotao feita sobre um cdigo que ignorado no
momento em que interpretado. Os comentrios em HTML devem ser colocados entre os sinais de <!-- e --> (conforme pode ser visualizado na Figura
3.3, na frase No se esqueam de que isso pode cair na avaliao).

44

Fundamentos de Desenvolvimento Web

Figura 3.4: Visualizao de uma pgina com elementos que so ignorados pelo navegador
conforme Figura 3.3
Fonte: Autores

3.4 Formatao de pargrafos e blocos de texto


Agora que j entendemos de que forma uma linguagem de marcao funciona, podemos explorar alguns recursos ligados organizao de pargrafos
e de blocos de texto. Lembremos que o objetivo da linguagem HTML permitir
a estruturao de contedo. Nas subsees seguintes, vamos apresentar e
descrever algumas tags e, ao final da seo, as Figuras 3.6 e 3.7 ilustraro o
efeito do emprego destas.

3.4.1 Cabealho (<h1> </h1> ... <h6> </h6>)


As tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6> so utilizadas para demarcar uma rea do documento que indica um cabealho head (um ttulo ou
subttulo, por exemplo). Quanto menor for o valor, mais destaque receber a
apresentao do cabealho. Os cabealhos so exibidos em negrito e, ao final
dos mesmos, feita uma quebra de linha. A utilizao de demarcam uma
rea do texto que merece realce e, normalmente, so utilizados para inici-la,
informando, por exemplo, o ttulo do mesmo. Opcionalmente, pode-se utilizar
o parmetro align para indicar o alinhamento do cabealho: right (a direita),
left (a esquerda) ou center (centralizado).

3.4.2 Pargrafos (<p>)


A tag <p> (paragraph) demarca um pargrafo textual. Dividir um texto em
pargrafos uma atividade presente em qualquer redao. Associado tag
<p>, existe um parmetro denominado de align o qual informa o alinhamento
do texto, podendo este ser centralizado (center), justificado (justify), alinhado
esquerda (left) ou alinhado direita (right). A utilizao da tag <p> de forma
vazia, como <p> </p>, produz uma quebra de linha. Todavia, existe uma tag
especial para esse propsito, conforme veremos a seguir.

Aula 3 - Introduo linguagem de marcao

45

3.4.3 Textos pr-formatados (<pre>)

linguagem de programao
constituda de um conjunto
de instrues que expressam
uma tarefa a ser executada por
um dispositivo. um conjunto
de palavras e de expresses
estruturadas que nos permitem
programar um dispositivo ou
sistema computadorizado.

H situaes nas quais temos a necessidade de manter a apresentao de


um texto tal como ele foi digitado (ou seja, respeitando espaos e tabulaes
e quebras de linha). Uma tpica situao em que isto acontece quando
precisamos representar um exemplo de uma linguagem de programao.
Nesse caso, a opo indicada a tag <pre> (predefined). Seu efeito visual
um recuo esquerda e a apresentao do texto em uma fonte de tamanho
fixo tal como a usada quando este foi digitado (respeitando quebras de linha,
espaos e tabulaes). Observe, na Figura 3.5, o desenho de uma vaca apenas
com sinais grficos. Veja que, com a tag <pre>, no momento em que o cdigo
visualizado, ele mantm as posies do texto tal como foram predefinidas
no documento HTML.

Figura 3.5: Exemplo de utilizao da tag <pre>


Fonte: Lemay, 2002

3.4.4 Quebras de linha (<br />) e linhas


horizontais (<hr />)
Conforme discutimos anteriormente, o navegador ignora as quebras de linha
informadas ao longo do texto. Para produzir o efeito desejado, devemos
utilizar a tag <br /> (break) que independente, ou seja, no precisa de
outra tag para fech-la, bastando, para isto, indicar, na prpria instruo de
abertura, o sinal de / para fech-la automaticamente.
A tag <hr /> (head row) tem o mesmo princpio da tag <br />, no entanto
seu efeito a produo de uma linha que divide a pgina horizontalmente.
Seu intuito produzir sees de diviso ao longo do contedo.

46

Fundamentos de Desenvolvimento Web

Figura 3.6: Cdigo HTML com recursos de formatao de pargrafos e de blocos de texto
Fonte: Autores

Figura 3.7: Visualizao de uma pgina com recursos de formatao de pargrafos e


de blocos de texto
Fonte: Autores

3.5 Formatao de fonte


Embora prover a aparncia de uma pgina no seja o objetivo principal da
linguagem HTML, existem alguns recursos que nos permitem enfatizar expresses ao longo do texto, bem como aplicar-lhes algum formato. A principal
tag que atua sobre os atributos da fonte utilizada ao longo do texto a tag
<font>. Entretanto, existem vrias outras tags que tm influncia sobre o

Aula 3 - Introduo linguagem de marcao

47

estilo ou opes de formato de um bloco de texto. Vejamos, a seguir, alguns


recursos para formatao de textos e, ao final, vamos coloc-los em prtica.

3.5.1 Fonte (<font>)


A tag <font> cuja traduo dispensvel atua sobre atributos do texto
em si. Em sntese, so trs os atributos que podemos alterar: o tamanho (size),
o tipo (face) e a cor (color). O tamanho definido a partir da utilizao de
um nmero inteiro e pode ser empregado de forma absoluta (informando
diretamente o nmero) ou de forma relativa, indicando, atravs dos sinais
positivo (+) ou negativo (-), o valor de incremento ou decremento em relao
ao valor padro do navegador (MARCONDES, 2005). O valor absoluto para o
atributo size (que define o tamanho) pode variar entre 1 e 7 quanto maior
o nmero, maior ser o tamanho de sua exibio.
Lembre-se que desenvolver para web desenvolver para o desconhecido.
Diferentes navegadores podem ter valores padro distintos para o tamanho de
fonte ou mesmo o usurio pode alterar suas preferncias e definir outro valor.
A alterao do tipo de fonte (da tipografia ou do formato das letras) pode
ser feita com o atributo face. Nesse caso, importante ressaltar que nem
todos os usurios, dispositivos ou plataformas compartilham das mesmas
fontes. Dessa forma, procure utilizar tipos de fontes altamente difundidas
(ex.: Arial, Times New Roman, Verdana). O atributo face permite especificar
mais de um tipo de fonte. Assim, se o primeiro no existir, usa-se o segundo
e assim por diante. Para indicar mais de uma fonte, os nomes destas devem
ser separados por vrgulas.

hexadecimais
O sistema de numerao
hexadecimal utiliza os 10 dgitos
numricos (0...9) e as letras A,
B, C, D, E e F para representar
informaes. Com dois dgitos
hexadecimais possvel realizar
256 combinaes diferentes.
A expresso #1A corresponde
ao nmero inteiro 26
embasedecimal.

Por fim, o atributo color permite alterar a cor de exibio de uma fonte. Sua
utilizao bastante simples, contudo precisamos entender de que forma o
HTML nomeia ou utiliza as cores. A representao das cores em HTML utiliza
do modelo de cores RGB (Red/Green/Blue), cujo propsito a reproduo
de cores em dispositivos eletrnicos. A partir das cores bsicas do modelo
(vermelho, verde e azul), so feitas combinaes com diferentes intensidades
de cada uma das cores, conseguindo uma variedade de 16 milhes de cores.
As combinaes mais bsicas podem ser expressas atravs de nomes, no
entanto a forma mais interessante de se conseguir uma cor pelo sistema RGB
misturar os tons. Cada tom pode variar de 0 a 255, o que pode ser representado por dois dgitos hexadecimais. A cor cujo cdigo #FF0000 representa,
por exemplo, o vermelho puro, em funo de que os dois primeiros dgitos

48

Fundamentos de Desenvolvimento Web

esto com o valor hexadecimal mais alto possvel. J a cor de cdigo #000000
representa o preto (a ausncia total de cor, em qualquer tonalidade). Observe,
no Quadro 3.1, a relao dos nomes de cores reconhecidos pela W3C. Alm
destes, possvel variar os valores de cada dupla de dgitos hexadecimais e
conseguir 16.777.216 combinaes (2563).
Quadro 3.1: Nomes de cores reconhecidos pela W3C
black

#000000
000

lime

#00FF00
0 255 0

silver

#C0C0C0
192 192 192

green

#008000
0 128 0

gray

#808080
128 128 128

olive

#808000
128 128 0

white

#FFFFFF
255 255 255

yellow

#FFFF00
255 255 0

maroon

#800000
128 0 0

navy

#000080
0 0 128

red

#FF0000
255 0 0

blue

#0000FF
0 0 255

purple

#800080
128 0 128

teal

#008080
0 128 128

fuchsia/magenta

#FF00FF
255 0 255

aqua/cyan

#00FFFF
0 255 255

Fonte: Marcondes, 2005

3.5.2 Outros recursos de formatao


Alm de alterar o tipo da fonte, podemos demarcar reas de texto que precisam ser enfatizadas. Estilos fsicos, como negrito, itlico e subscrito, podem
ser conseguidos com tags especficas. O Quadro 3.2 demonstra os principais
recursos que podemos utilizar para enfatizar blocos de contedo textual.

Aula 3 - Introduo linguagem de marcao

49

Quadro 3.2: Estilos fsicos


Tag

Propsito

Exemplo

Resultado

<b> (bold)

Negrito

<b>escuro</b>

escuro

<i> (italic)

Itlico

<i>deitado</i>

deitado

<u> (underline)

Sublinhado

<u>com linha</u>

com linha

<s> (strike)

Riscado

<s>tachado</s>

tachado

<tt> (teletype)

Espaamento fixo

<tt>fixo</tt>

fixo

<sub> (subscript)

Subscrito

H<sub>2</sub>O

H2O

<sup> (superscript)

Sobrescrito

km<sup>2</sup>

km2

Fonte: Marcondes, 2005

3.5.3 Caracteres especiais


Imagine uma situao na qual necessitamos separar um texto por um conjunto
de espaos em branco. sabido que espaos em branco, em sequncia, so
ignorados pelo navegador. Ento, como conseguir represent-los? Imagine
agora uma situao em que precisamos representar o sinal de micro () ou
algum outro sinal no encontrado, normalmente, no teclado. Essas situaes podem ser resolvidas com a utilizao de caracteres especiais, tambm
conhecidos como caracteres ISO.
O alfabeto de caracteres ISO (International Organization for Standardization)
obtido por um cdigo especial formado pelos caracteres & (e comercial), #
(tralha ou sustenido), a definio de um valor numrico de trs dgitos, o caractere ; (ponto-e-vrgula) para finalizar. possvel, ainda, utilizar uma espcie de
abreviao ou entidade equivalente ao cdigo ISO. Por exemplo, para representar
o sinal de menor que podemos utilizar o cdigo &#060; ou ento a entidade
&lt; onde lt a abreviao para letter then (MANZANO; TOLEDO, 2008).
A utilizao dos cdigos do alfabeto de caracteres ISO, por meio de entidades,
garante que o contedo do documento HTML ser exibido da forma como foi
definido, independente do navegador ou da plataforma utilizada. O Quadro 3.3
apresenta os caracteres do alfabeto ISO e o nome da entidade correspondente.
Quadro 3.3: Alfabeto de caracteres ISO
Alfabeto ISO

Entidade

&#034;

&quot;

"

&#206;

&Icirc;

&#038;

&amp;

&

&#207;

&Iuml;

50

Smbolo

Alfabeto ISO

Entidade

Smbolo

&#060;

&lt;

<

&#208;

&ETH;

&#062;

&gt;

>

&#209;

&Ntilde;

&#160;

&nbsp;

&#210;

&Ograve;

&#161;

&iexcl;

&#211;

&Oacute;

Fundamentos de Desenvolvimento Web

Alfabeto ISO

Entidade

Smbolo

Alfabeto ISO

Entidade

Smbolo

&#162;

&cent;

&#212;

&Ocirc;

&#163;

&pound;

&#213;

&Otilde;

&#164;

&curren;

&#214;

&Ouml;

&#165;

&yen;

&#215;

&times;

&#166;

&brvbar;

&#216;

&Oslash;

&#167;

&sect;

&#217;

&Ugrave;

&#168;

&uml;

&#218;

&Uacute;

&#169;

&copy;

&#219;

&Ucirc;

&#170;

&ordf;

&#220;

&Uuml;

&#171;

&laquo;

&#221;

&Yacute;

&#172;

&not;

&#173;

&shy;

&#222;

&THORN;

&#223;

&szlig;

&#174;

&reg;

&#224;

&agrave;

&#175;

&macr;

&#225;

&aacute;

&#176;

&deg;

&#226;

&acirc;

&#177;

&plusmn;

&#227;

&atilde;

&#178;

&sup2;

&#228;

&auml;

&#179;

&sup3;

&#229;

&aring;

&#180;

&acute;

&#230;

&aelig;

&#181;

&micro;

&#231;

&ccedil;

&#182;

&para;

&#232;

&egrave;

&#183;

&middot;

&#233;

&eacute;

&#184;

&cedil;

&#234;

&ecirc;

&#185;

&sup1;

&#235;

&euml;

&#186;

&ordm;

&#236;

&igrave;

&#187;

&raquo;

&#237;

&iacute;

&#188;

&frac14;

&#238;

&icirc;

&#189;

&frac12;

&#239;

&iuml;

&#190;

&frac34;

&#240;

&eth;

&#191;

&iquest;

&#241;

&ntilde;

&#192;

&Agrave;

&#242;

&ograve;

&#193;

&Aacute;

&#243;

&oacute;

&#194;

&Acirc;

&#244;

&ocirc;

&#195;

&Atilde;

&#245;

&otilde;

&#196;

&Auml;

&#246;

&ouml;

&#197;

&Aring;

&#247;

&divide;

&#198;

&AElig;

&#248;

&oslash;

&#199;

&Ccedil;

&#249;

&ugrave;

&#200;

&Egrave;

&#250;

&uacute;

&#201;

&Eacute;

&#251;

&ucirc;

&#202;

&Ecirc;

&#252;

&uuml;

&#203;

&Euml;

&#253;

&yacute;

&#204;

&Igrave;

&#254;

&thorn;

&#205;

&Iacute;

&#255;

&yuml;

Fonte: Manzano e Toledo, 2008

Aula 3 - Introduo linguagem de marcao

51

Para finalizar, vamos realizar um exemplo com opes para formatao de


fonte. Digite o cdigo ilustrado na Figura 3.8, o qual demonstra algumas
opes que empregaremos para caracterizar e estruturar o contedo de
nossas pginas. O arquivo, depois de salvo e executado, dever apresentar o
resultado que pode ser visualizado na Figura 3.9.

Figura 3.8: Cdigo HTML com recursos de formatao de fonte


Fonte: Autores

Figura 3.9: Visualizao de uma pgina com recursos de formatao de textos


Fonte: Autores

3.6 Como uma pgina publicada


Ao longo desta aula, voc deve ter produzido, pelo menos, dois ou trs arquivos com a estruturao de informaes, utilizando-se da linguagem HTML.

52

Fundamentos de Desenvolvimento Web

Para que uma pgina seja disponibilizada na internet, ser necessrio que
tenhamos acesso a um servidor web. Um servidor web , comumente, um
computador com um software permanentemente em execuo. Esse software
recebe requisies por meio de URLs e responsvel por identificar o recurso
requisitado e entreg-lo ao usurio requisitante. Recursos so arquivos HTML,
mas tambm podem ser imagens ou outros tipos de arquivos.
No momento em que temos acesso a um servidor web, vamos nos conectar a
ele por meio de um servio FTP, ou seja, um servio de transferncia de arquivos.
A partir de nossa identificao (login e senha), o servio de FTP nos disponibiliza
um local (diretrio) onde podemos realizar o upload de nossas pginas web.
Podemos entender um servidor web como um software capaz de entregar os
recursos solicitados a partir de uma determinada estrutura de diretrios.
Para que voc tenha acesso a um servidor de pginas, precisa entrar em
contato com seu provedor de servios de internet ou com a sua escola ou,
ainda, contratar o servio de uma empresa especializada. Existem servidores de
pgina gratuitos, todavia a grande maioria restringe o envio de documentos
HTML, permitindo apenas a edio de documentos padronizados disponibilizados de forma gratuita.

Resumo
Certamente, essa foi, at agora, nossa aula mais atrativa, pois, a partir dela,
comeamos a colocar a mo na massa e dar vida as nossas ideias. Durante a
aula, compreendemos a estrutura bsica de um documento HTML e as opes
para a estruturao de blocos de texto e para a formatao de expresses.
Alm disso, conversamos um pouco sobre o sistema de cores RGB e o alfabeto
de caracteres ISO.

Atividades de aprendizagem
1. O que so metadados e de que forma podemos express-los por meio
de HTML?
2. Qual a diferena entre as tags <body> e <head> no contexto de um
documento HTML?
3. Por que a expresso Eu vou viajar de avio exibida pelo navegador
como Eu vou viajar de avio?

Aula 3 - Introduo linguagem de marcao

53

4. Codifique um documento HTML para apresentar a seguinte piada tal


como est formatada:
Os loucos e o coc
Dois loucos andavam pelo ptio do hospcio quando viram um tolete de
merda coc. Ento, um deles diz:
O que isso?
O outro responde:
Eu acho que merda coc.
Eles se olham e o primeiro diz:
Ser? Vamos experimentar para ver se .
Os dois experimentaram e o segundo comenta:
merda coc mesmo, ainda bem que ns no pisamos.
5. Escreva uma pgina HTML para demonstrar as 16 cores bsicas nomeadas pela W3C (utilize um fundo diferente de branco para que todas elas
possam ser lidas).
6. Escreva, utilizando HTML, as seguintes expresses:
a) rea_do_crculo = raio2
b) resultado = 5 2 82
c) CH3CH2OH

54

Fundamentos de Desenvolvimento Web

Aula 4 Ligaes de hipertexto


e de imagens
Objetivos
Compreender como funcionam as ligaes de hipertexto.
Diferenciar ligaes internas, externas, absolutas e relativas.
Utilizar elementos externos no corpo da pgina.
Disponibilizar materiais para download a partir de uma pgina..

4.1 Hiperlinks
Hiperlinks, links ou, simplesmente, ligaes so uma das principais motivaes
de grande parte do que, hoje, conhecemos como web. A web em si (ou teia)
, na verdade, formada por infinitas ligaes entre documentos em diferentes
computadores ou recursos computacionais. A utilizao de links em HTML
bastante simples e se utiliza de uma nica tag, a qual possui um nome
bastante singelo: <a> (anchor).
Os links podem ser internos quando referenciam contedos do prprio documento ou externos quando referenciam recursos do mesmo site ou recursos
de outros sites. Um link interno pressupe a existncia de uma marca (ncora)
para o local onde o usurio dever ser submetido no momento em que clic-lo.
Vamos imaginar uma pgina na qual disponibilizamos uma receita. Antes de
detalh-la, desejamos incluir um ndice, indicando, por exemplo, sees da
pgina como ingredientes, modo de preparo, rendimento e tempo de preparo.
Dessa forma, o usurio pode acessar, diretamente, o tempo de preparo sem,
necessariamente, ter que rolar toda a pgina.
A partir desse cenrio, precisamos entender dois atributos da tag <a>. O
primeiro deles (o atributo name) utilizado para nomear uma ncora, ou seja,
demarcar o local para o qual a ligao ir submeter o usurio. Uma tag <a>,
com o atributo name, no tem nenhum efeito visual. No local onde desejamos
incluir o link, ou seja, no ndice da receita, vamos utilizar a mesma tag <a>,

Aula 4 - Ligaes de hipertexto e de imagens

55

porm com o atributo href, indicando o nome da ncora qual devemos


submeter, precedido do sinal de # (tralha ou sustenido), que indica que o link
interno. Vamos demonstrar essa situao por meio de um exemplo. A Figura
4.1 ilustra um cdigo HTML de um documento que estrutura as informaes
de uma receita de po de queijo nos moldes do que discutimos anteriormente.

Figura 4.1: Cdigo HTML com utilizao de hiperlinks


Fonte: Autores

Observe que, logo no incio do documento, a tag <a> utilizada com o atributo
href seguido do sinal de # e de um nome (ex.: ing, tempo, rend, preparo).
Esses nomes esto presentes na sequncia do documento quando a tag <a>
utilizada com o atributo name. Observe, tambm, que a tag <a> marca
toda a palavra que ser transformada em link quando o documento HTML
for interpretado pelo navegador. Um link, normalmente, apresentado em
outra cor (comumente azul) e sublinhado. Quando o cursor do mouse passa
sobre ele, a figura substituda por uma mozinha com o indicador levan-

56

Fundamentos de Desenvolvimento Web

tado. Imaginemos que o usurio clique sobre o link produzido com a palavra
ingredientes (<a href=#ing>Ingredientes</a>). Nesse caso, a pgina ser
posicionada no exato local onde a tag <a name=ing> estiver declarada.
Agora, note, ao final do documento, a palavra aqui. Ela est marcada com
a tag <a>, entretanto seu atributo href no est indicando uma seo do site,
mas sim uma URL externa (http://goo.gl/Ap59x). Temos, ento, um link
externo que encaminhar a navegao para uma rea fora da pgina atual,
carregando outro documento HTML nesse caso, localizado, inclusive, em
outro servidor de pginas.
Imaginemos, agora, que voc tenha feito todos os exemplos at aqui demonstrados. Neste caso voc deve ter uma relao de arquivos (um para cada
exemplo exemplo1.html, exemplo2.html, exemplo3.html), que tal se construssemos uma pgina para interligar estes arquivos? Assim como fizemos
no exemplo anterior (Figura 4.1), onde o ltimo link vinculava nossa pgina
com uma pgina externa, podemos tambm vincular uma pgina a outras
pginas do mesmo site. Observe o cdigo da Figura 4.2.

Figura 4.2: Cdigo HTML com utilizao de hiperlinks externos


Fonte: Autores

Na Figura 4.2, os dois primeiros links so referncias externas para arquivos


do mesmo site que esto no mesmo diretrio do arquivo HTML, o qual est
sendo processado. Os dois ltimos links (site do Google e DNS) referem se a
informaes externas ao site, sendo que, no ltimo caso, como a URL identifica
um alvo que no um arquivo HTML, o browser poder se oferecer para fazer
um download do recurso (introducao-dns-dnssec.pdf).
Ainda sobre links, existem duas outras propriedades que merecem ser apresentadas. A primeira delas a propriedade title: utilizada para atribuir uma
espcie de descrio sobre o link. A descrio de um link apresentada na
forma de uma dica (hint) quando passamos o mouse sobre o mesmo. Na
Figura 4.2, podemos observar que o segundo link utiliza a propriedade title
com o valor Fonte.

Aula 4 - Ligaes de hipertexto e de imagens

57

frame
um recurso que pode ser
utilizado em pginas HTML,
criando um ambiente onde
mais de uma pgina pode ser
visualizada ao mesmo tempo.
Quando uma pgina utiliza
frames, a propriedade target de
um link pode indicar em qual
das divises da pgina o link
ser apresentado.

A outra propriedade que merece destaque a propriedade target: determina


a janela especfica ou frame onde o link ser aberto. Por meio da propriedade target, possvel que a pgina atual interaja com outras janelas.
Existem alguns valores reservados para essa propriedade, como _blank,
indicando que o link deve ser exibido em uma nova janela, e _self, para
que o link seja exibido na mesma janela (MARCONDES, 2005). Na Figura 4.2,
o primeiro link utiliza o valor _blank para o atributo target, indicando que
o arquivo exercicio1.html ser aberto em uma nova janela.

4.2 Imagens
No s com textos que se faz um documento HTML. Imagens so excelentes
recursos para incrementar o layout e o visual de uma pgina ou para exemplificar e demonstrar algo (j dizia o velho provrbio uma imagem vale mais
do que mil palavras). Antes de falarmos como vincular uma imagem a um
documento HTML, precisamos conhecer um pouco sobre os tipos de imagens.
Os browsers possuem a capacidade de interpretar imagens do tipo mapa de
bits. Nesse tipo de imagem, o arquivo que a armazena organizado como uma
matriz (ou tabela) de pontos. Cada ponto armazena uma codificao especfica
de cor. Quanto mais colorida for uma imagem, maior ser seu tamanho. Os
formatos de imagens exibidos na web utilizam algum recurso de compactao,
ou seja, uma tcnica para reduzir o seu tamanho. Os mais comuns sero descritos a seguir. A Figura 4.3 ilustra um comparativo de qualidade.
GIF (Graphics Interchange Format) o formato GIF , comumente,
utilizado para representar ilustraes e sua compactao deve-se ao fato
de armazenar, no mximo, 258 cores. O tipo GIF pode utilizar fundo
transparente e permite armazenar, em um mesmo arquivo, uma sequncia de imagens que, quando exibidas pelo navegador, produzem o efeito
de animao (GIF animado).
JPG ou JPEG (Joint Pictures Expert Group) o tipo de imagem mais
comum na internet e, normalmente, o padro de salvamento da maioria
das mquinas fotogrficas digitais e dos smartphones. Uma imagem JPG
tem seu tamanho reduzido em funo de no armazenar os pontos (pixels)
com cores iguais ou muito parecidas. Quanto maior a taxa de compactao, pior ser a qualidade da imagem e menor ser seu tamanho.

58

Fundamentos de Desenvolvimento Web

PNG (Portable Network Graphics) PNG um formato mais recente


de imagem. Oferece o que h de melhor entre os dois formatos anteriores: representao de milhes de cores, transparncia e animao. Seu
desenvolvimento foi motivado em funo de alguns recursos patenteados do formato GIF. Atualmente, um formato livre apoiado pela W3C.

Figura 4.3: Comparativo dos formatos de imagem GIF, JPEG e PNG


Fonte: http://www.infowester.com/imagens.php

Um detalhe importante na utilizao de imagens em documentos HTML


que as mesmas no so incorporadas ao arquivo HTML, so apenas referenciadas por estes. Em funo disso, no momento em que nosso site vai
crescendo e aumentando o nmero de arquivos HTML que passam a utilizar
imagens, devemos considerar que os arquivos dessas imagens precisam estar
disponveis, ou seja, precisam ser enviados conjuntamente com os arquivos
HTML para o servidor de pginas. No momento em que o browser detecta a
necessidade de exibio de uma imagem, ele solicita ao servidor de pgina
para que a mesma seja descarregada (download) no computador do usurio
(por este motivo as imagens devem ter o menor tamanho possvel).
Para vincular uma figura em um documento HTML, utilizamos a tag <img>.
Essa uma tag independente, ou seja, que no precisa de outra tag para
fech-la. O parmetro mais importante da tag <img> o src que especifica
o caminho (URL) da imagem a ser exibida. Da mesma forma que a tag <a>,
a tag <img> pode referenciar um arquivo local ou um recurso disponvel em
outro servidor. Observe, na Figura 4.4, que trs imagens so vinculadas. No
primeiro caso, a imagem tux.gif referenciada a partir de um servidor web
externo (http://ubuntu-br.org/), enquanto que, no segundo e no terceiro
exemplo, so utilizados arquivos locais (existentes no mesmo diretrio do
arquivo HTML que est sendo processado pelo browser).

Aula 4 - Ligaes de hipertexto e de imagens

59

Figura 4.4: Cdigo HTML para vinculao de imagens


Fonte: Autores

Alm do atributo src que especifica a origem (source) da imagem, alguns


outros atributos merecem destaque. O atributo alt (alternative text) especifica
um texto que poder ser exibido caso algum problema impea a apresentao
da imagem ou que poder ser utilizado por leitores de pginas que auxiliam
deficientes visuais a navegar pela internet (trata-se de um tpico exemplo de
acessibilidade). Alm disso, o texto do atributo alt pode ser visualizado quando
posicionamos o mouse sobre a imagem.
O tamanho da imagem pode ser redimensionado no momento de sua exibio. Essa opo habilitada com a utilizao dos atributos width (largura) e
height (altura), cujos valores podem ser valores inteiros absolutos (expressos
em pixels) ou ento valores percentuais (considerando o tamanho original
da imagem). Opcionalmente, podemos adicionar uma borda em torno da
imagem, empregando o atributo border, cujos valores so nmeros inteiros
que especificam a largura da borda em pixels.

4.3 Caminhos relativos e absolutos


Ao longo dos contedos abordados nesta aula, ficou evidente o conceito
de site, ou seja, um conjunto de pginas e de outros recursos (figuras, por
exemplo) interligados entre si. Voc deve estar questionando se todos esses
arquivos (documentos HTML e imagens) precisam estar em um mesmo diretrio ou se podemos organiz-los utilizando subdiretrios. A resposta para esse
questionamento : podemos e devemos, sim, dividir e organizar os arquivos
de um site em subdiretrios. As figuras podem, por exemplo, ser agrupadas
em uma pasta de imagens; as pginas de um mesmo assunto podem ser
separadas por diretrios que as caracterizem.
Vamos imaginar que necessitamos desenvolver uma pgina para uma disciplina. O professor que nos contratou disse possuir alguns materiais que
gostaria de disponibilizar, como exerccios, slides das aulas, definies de

60

Fundamentos de Desenvolvimento Web

trabalhos e provas comentadas. A partir dessa contextualizao, poderamos


imaginar uma organizao de diretrios e de pastas conforme a Figura 4.5.

Figura 4.5: Exemplo de organizao de diretrios e de arquivos em um site


Fonte: Autores

Atravs da Figura 4.5, podemos observar que h uma pasta principal denominada de pagina_prof dentro da qual existe um nico arquivo (index.html)
e duas subpastas (disciplina e imagens). A pasta disciplina, por sua vez,
subdividida em outras quatro pastas (exerccios, provas, slides e trabalhos) e
contm um nico arquivo com o nome de index.html. Supondo que todo
esse material esteja disponvel no seguinte endereo http://saber.edu.br/
pagina_prof, temos, a partir desse contexto, basicamente duas formas de
vincular e de referenciar os arquivos entre si.
A primeira delas conhecida como caminho ou referncia absoluta e consiste
em indicar, explicitamente, em cada uma das ligaes, o caminho completo

Aula 4 - Ligaes de hipertexto e de imagens

61

(URL) do recurso que se quer relacionar. Por exemplo, se no arquivo index.html


da pasta disciplina quisermos referenciar a lista de exerccios lista1.html
da pasta exerccios, isso poderia ser feito com a tag <a> da seguinte forma:
<a href= http ://saber.edu.br/pagina_prof/disciplina/
exercicios/lista1.html>lista 1</a>

O mesmo processo se aplica se quisermos, no arquivo t1.html da pasta


trabalhos, utilizar a figura fundo.png do diretrio imagens. Nesse
caso, utilizaramos a tag <img>:
<img src= http://saber.edu.br/pagina_prof/imagens/fundo.png />

O problema da utilizao de referncias absolutas acontece quando, por


exemplo, resolvemos mudar de domnio (http://educacao.edu.br) ou alterar
a localizao da pasta principal dentro do servidor de pginas. Nesses casos,
todos os nossos arquivos HTML precisam ser revisados e, dependendo do
tamanho do site, poderia levar muito tempo e demandar bastante esforo.
Em funo de tal problemtica, existe uma possibilidade de se referenciar
recursos de forma relativa, ou seja, a partir de sua localizao atual. Um caminho relativo pode utilizar dois sinais coringas que servem para representar o
diretrio atual (sinal de ponto .) e o diretrio anterior (sinal de ponto-ponto
..). Nesse caso, podemos fazer a vinculao de figuras ou o relacionamento
de links utilizando, como ponto de partida, o caminho atual do recurso em
que o browser est interpretado.
Para entender melhor, vamos utilizar os dois exemplos anteriores e adapt-los
para o conceito de caminhos relativos. No primeiro caso, a pgina em questo o arquivo index.html, da pasta disciplina, que precisa se referir
ao arquivo lista1.html, da subpasta exercicios. Veja que o arquivo alvo
encontra-se hierarquicamente abaixo do documento HTML que estamos
editando. Nesse caso, devemos utilizar o sinal de . para fazer referncia ao
diretrio atual e, a partir dele, referenciar o restante do caminho:
<a href= ./exercicios/lista1.html>lista 1</a>

No segundo caso, temos uma situao inversa, ou seja, o arquivo t1.html


deseja incluir uma imagem que est hierarquicamente acima da pasta na qual
t1.html est salvo. O sinal de ponto-ponto .., nessa situao, dever
ser utilizado para que possamos nos referir aos diretrios anteriores. A tag
<img>, nesse caso, seria assim codificada:
<img src= ../../imagens/fundo.png />

62

Fundamentos de Desenvolvimento Web

Observe que foi necessrio utilizar duas vezes o sinal de ponto-ponto (..),
pois, a partir do diretrio trabalhos, precisamos recuar dois diretrios para,
s ento, nos referirmos pasta imagens.
Destacamos a importncia de voc observar, atentamente, os nomes dos recursos que deseja referenciar (documentos HTML, imagens, arquivos em geral),
respeitando a forma exata como foram escritos (considerando letras maisculas e minsculas). No temos como saber de antemo o tipo de plataforma
na qual o servidor de pginas ser executado, visto que h plataformas que
diferenciam nomes de arquivos escritos com maisculas/minsculas. Prestar
ateno a esse detalhe, desde o incio, pode evitar surpresas desagradveis
na hora de publicar seu site.

Resumo
Nesta aula, discutimos, inicialmente, a razo de ser da web, ou seja, as ligaes,
os hiperlinks. Aprendemos a estruturar ligaes dentro de uma mesma pgina e
ligaes para pginas externas. Tambm, iniciamos nosso trabalho com imagens
e nos contextualizamos acerca dos tipos disponveis e de suas caractersticas.
Por fim, aprendemos duas formas de realizar vinculaes: a forma absoluta, na
qual a URL colocada de forma completa, e a relativa, na qual partimos do local
onde nosso documento HTML est armazenado e avanamos ou retrocedemos
s pastas para relacionar outros recursos do mesmo site.

Atividades de aprendizagem
1. De que forma um site pode disponibilizar um arquivo para download
(uma msica em formato MP3, por exemplo)?
2. Qual seria o formato mais indicado de imagem para voc publicar em um
lbum de fotos da sua ltima viagem de frias?
3. Observando a estrutura de diretrios ilustrada na Figura 4.5 e os conceitos sobre caminhos relativos responda o que se pede:
a) A partir do arquivo t2.html, da pasta trabalhos, como voc faria
para incluir um link com o nome de voltar que retornasse at a pgina
principal do professor (arquivo ndex.html)?
b) Se voc estivesse editando o arquivo index.html, da pgina principal do professor, como voc faria para exibir a imagem foto.jpg, da pasta imagens?

Aula 4 - Ligaes de hipertexto e de imagens

63

4. Em que situao no se pode evitar a utilizao de um caminho absoluto?


5. De que forma podemos indicar para o browser que determinado link
deve ser aberto em uma nova janela?
6. Exemplifique de que forma o usurio poderia clicar sobre uma figura e ser
redirecionado para outra pgina (como colocar um link em uma figura)?

64

Fundamentos de Desenvolvimento Web

Aula 5 Tabulao de dados


Objetivos
Utilizar listas numeradas ou com marcadores.
Estruturar dados em tabelas.

5.1 Listas
A linguagem HTML nos oferece diferentes formas de estruturar textos por
meio de tpicos (numerados ou com marcadores). A utilizao desse tipo de
recurso bastante simples e consiste, inicialmente, em definir que tipo de
lista se deseja utilizar. So trs as opes disponveis: listas com marcadores,
listas numeradas e listas de definio. Vejamos, a seguir, alguns exemplos e
as tags necessrias para represent-las.

5.1.1 Listas com marcadores


O tipo mais comum de lista so as listas com marcadores. No exemplo da
quarta aula, quando apresentamos a receita de po de queijo, poderamos ter
utilizado esse recurso para listar os ingredientes. Uma lista com marcadores
definida utilizando-se a tag <ul> (undefinded list), sendo que, entre as
marcas de abertura e fechamento, utilizaremos a tag <li> (list) para indicar
os itens da lista.
Opcionalmente, podemos utilizar, na tag <ul>, o atributo type de forma que
possamos alterar o tipo de smbolo (marcador) utilizado. Alguns valores aceitos
para o atributo type so: circle (crculo vazio), disc (crculo preenchido) e square
(retngulo). A Figura 5.1 ilustra a utilizao da tag <ul> e seu respectivo efeito.

Aula 5 - Tabulao de dados

65

Figura 5.1: Documento HTML utilizando listas com marcadores


Fonte: Autores

5.1.2 Listas numeradas


A diferena de uma lista numerada para uma lista com marcadores essencialmente a tag utilizada: <ol> (ordinate list). Inclusive, a tag para representar os
itens da lista tambm se mantm a mesma (<li>). No caso de listas numeradas,
o atributo type pode receber os seguintes valores: 1 (quando a numerao
ser feita com algarismos arbicos 1, 2, 3), I ou i (para se utilizar de
algarismos romanos maisculos ou minsculos) e A ou a (para organizar
a lista em ordem alfabtica). Opcionalmente, o atributo start pode ser utilizado
em conjunto com a tag <li> para indicar o valor inicial a partir do qual a lista
deve partir. A Figura 5.2 ilustra a utilizao de listas numeradas. Observe que
tanto listas ordenadas quanto listas com marcadores podem ser utilizadas
umas dentro das outras, dando a ideia de sublistas ou subitens.

Figura 5.2: Documento HTML utilizando listas numeradas


Fonte: Autores

66

Fundamentos de Desenvolvimento Web

5.1.3 Listas de definio


Uma lista de definio , normalmente, utilizada quando precisamos listar um
conjunto de itens e defini-los. Esse tipo de lista tambm conhecido como
lista glossrio e sua tag principal <dl> (definition list). Alm desta, outras
duas tags so utilizadas em conjunto: <dt> (definition term) e <dd> (definition
detail). Vamos usar uma lista de definio para determinar as 3 tags:
<dl>
A tag <dl> utilizada para delimitar o incio e o trmino da lista.
<dt>
A tag <dt> delimita o termo que ser, na sequncia, definido.
<dd>
A tag <dd> utilizada como um item para a definio do termo.
Observe que a lista de definio composta, basicamente, por duas partes:
um termo a ser definido e o detalhamento para o termo. A Figura 5.3 ilustra
o mesmo exemplo anterior, contudo utilizando-se da sintaxe HTML. Observe o
efeito de cada uma das tags na visualizao do documento, na prpria Figura 5.3.

Figura 5.3: Documento HTML utilizando listas de definio


Fonte: Autores

5.2 Tabelas
Imaginamos que, neste ponto de nossas aulas, voc esteja motivado e interessado em conhecer o que mais podemos fazer com a linguagem de marcao
HTML. Um dos recursos disponveis a estruturao ou a tabulao de informaes em formato de tabela. Uma tabela constitui-se de um quadro, que
pode ter um ttulo, dividido em linhas, sendo cada linha dividida em colunas. A

Aula 5 - Tabulao de dados

67

interseco (ou encontro) de uma linha com uma coluna produz uma unidade
de informao a qual, comumente, chamamos de clula.
Tabelas oferecem recursos interessantes para a linguagem de marcao HTML,
especialmente no que diz respeito organizao de layouts. No entanto, temos
que ter conscincia e tomar o cuidado de no transformar tudo que temos em
tabelas. importante lembrar que HTML uma linguagem para estruturao
de contedo, no necessariamente de formatao ou maquiagem. Para tal
existem recursos apropriados que estudaremos nas aulas seguintes.
Tabelas devem ser usadas quando precisamos tabular dados na forma de uma
grade. A tag inicial que demarca o incio de uma tabela a tag <table> e
ela do tipo container, ou seja, somente dever ser fechada quando a estruturao da tabela estiver concluda. Opcionalmente, podemos utilizar a tag
<caption> para definir um ttulo ou descrio a uma tabela. O <caption>
exibido antes do quadro de forma centralizada.
O passo seguinte definir as linhas contidas na tabela. Para tanto, a tag <tr>
(table row) ser utilizada. Essa tambm uma tag container, cujo contedo
ser composto por outras tags. Cada conjunto de tags <tr> dever ser dividido em tantas quantas forem as colunas. Para tal, emprega-se a tag <td>
(table data). entre as marcas de abertura e de fechamento da tag <td> que
os dados sero informados. A Figura 5.4 ilustra a estrutura bsica de uma
tabela em cdigo HTML para representar um quadro com trs linhas e com
quatro colunas.

Figura 5.4: Estrutura bsica de uma tabela em HTML


Fonte: Autores

68

Fundamentos de Desenvolvimento Web

A Figura 5.5a representa a interpretao da tabela pelo navegador. Perceba


que os dados so informados, exclusivamente, entre as tags <td></td>.
Observe, tambm, que, por padro, a tabela no apresenta linhas divisrias
entre as clulas. Para apresentar as linhas divisrias, necessrio utilizar o
parmetro border (borda) junto tag <table> da seguinte forma: <table
border=1>. O efeito produzido com a utilizao da borda pode ser visualizado na Figura 5.5b.

Figura 5.5: Visualizao da tabela no navegador


Fonte: Autores

A linguagem HTML permite que tabelas sejam aninhadas, ou seja, dentro de


uma clula de contedo (tag <td> </td>), ao invs de informar dados em
si, uma nova tabela declarada. Esse tipo de recurso nos permite explorar
algumas situaes interessantes. Observe, na Figura 5.6, o efeito visual da
incluso de 8 tabelas, uma dentro das outras.

Figura 5.6: Tabelas aninhadas


Fonte: Marcondes, 2005

Aula 5 - Tabulao de dados

69

Vamos tentar imaginar alguns exemplos mais complexos de tabelas, envolvendo,


por exemplo, clulas mescladas (ou unificadas). Para facilitar a compreenso,
veja as Figuras 5.7a e 5.7b que ilustram, respectivamente, a fuso de clulas
em uma linha (expresso Regio Sul) e em uma coluna (expresso Gros).
A partir dessas duas situaes vamos verificar que tipo de atributos e em que
tags os mesmos devem ser aplicados para que venhamos a conseguir tal efeito.

Figura 5.7: Tabelas com clulas mescladas


Fonte: Autores

Para mesclar clulas em uma mesma linha (situao representada na Figura


5.7a), ser necessrio utilizar o parmetro colspan (indicando o nmero de
colunas da linha que ser mesclado). No caso da situao representada na
Figura 5.7b, na qual temos clulas mescladas entre linhas, ser necessrio
utilizar o parmetro rowspan, indicando quantas linhas sero mescladas. O
cdigo representado na Figura 5.8 ilustra como a fuso de clulas pode ser
feita com os parmetros colspan e rowspan.

Figura 5.8: Cdigo HTML para mesclar clulas


Fonte: Autores

Ainda em relao s tabelas, existe um tipo especial de tag cuja utilizao


a mesma da tag <td>: trata-se da tag <th> (table header). Na Figura 5.8,
podemos observar a utilizao da tag <th> na segunda linha da tabela (no

70

Fundamentos de Desenvolvimento Web

local onde foram digitadas as siglas dos Estados). Essa tag objetiva indicar que
aquela clula contm uma informao de cabealho para as demais clulas.
Normalmente, utilizada nas clulas da primeira linha quando estas contm
cabealhos (ttulos) das colunas.
medida que explorarmos alguns recursos mais avanados da linguagem
HTML (como o caso das tabelas), fica mais difcil imaginar que os profissionais da rea web ficam, constantemente, codificando da forma como temos
feito at ento. Tabelas um tpico exemplo de elemento no qual um editor
de cdigo (um software que oferea facilidades para edio e manipulao
das instrues) muito bem-vindo. Imagine-se organizando a tabela dos
caracteres ISO ou mesmo as 16 cores bsicas da palheta RGB. Um trabalho
que parece simples pode ficar extremamente complexo se no utilizarmos
algum tipo de ferramenta.
Por fim, existem, ainda, alguns atributos das tags utilizadas em tabelas que
merecem destaque, pois podem possibilitar configuraes interessantes. Vejamos os principais atributos:
width e height (largura e altura) podemos especificar, de forma absoluta, o tamanho de uma tabela (tag <table>) ou de uma clula (tags
<td> ou <th>) utilizando os atributos width e height. Nesse caso, o valor
informado para o atributo um nmero inteiro indicando o nmero de
pontos (pixels). Tambm possvel informar os valores em forma de percentual. Nesse caso, indicando o tamanho percentual do elemento em
relao janela do browser.
align e valign (alinhamento horizontal e vertical) o alinhamento da tabela em relao pgina ou do contedo de uma clula no sentido horizontal pode ser alterado em funo do atributo align (que pode receber os
valores center, right e left). J o alinhamento vertical do contedo de uma
clula pode ser alterado por meio do atributo valign (que recebe os seguintes valores botton inferior, top superior ou middle centro).
bgcolor e background (cor de fundo e imagem de fundo) o preenchimento do fundo de uma tabela pode ter sua cor alterada com a utilizao do atributo bgcolor e com a indicao de uma cor. Caso a opo
seja por uma imagem, ento, devemos utilizar o atributo background,
indicando o caminho para o arquivo que ser utilizado como fundo.

Aula 5 - Tabulao de dados

71

Se voc se interessou pela


possibilidade de ter um ajudante
na hora de fazer o cdigo
HTML mais complexo, faa uma
pesquisa em sites que distribuem
aplicativos como:
http://www.baixaki.com.br/
ou
http://www.superdownloads.
com.br
Existem excelentes opes
tanto pagas quanto gratuitas.
Inclusive, mesmo as verses
pagas oferecem a possibilidade
de test-las por um
tempodeterminado.

cellpadding e cellspacing (espaamento entre bordas/contedo e espaamento entre clulas) o atributo cellpading especifica um nmero
inteiro que indica (em pixels) qual a distncia entre o contedo de uma
clula e sua borda. O atributo cellspacing indica a quantidade de pixels
que deve existir entre uma clula e outra.
A Figura 5.9 ilustra, por meio de exemplos, a utilizao e o efeito dos atributos
apresentados.

Figura 5.9: Atributos adicionais para estruturao de tabelas


Fonte: Autores

Resumo
Durante esta aula, aprendemos duas formas para tabular informao: listas
e tabelas. No caso das listas, conhecemos os tipos principais e suas peculiaridades. No caso das tabelas, exploramos de que forma as mesmas so
organizadas e quais so seus componentes mnimos. A partir desta aula,
ficou evidente a necessidade de explorarmos os recursos de algum editor de
cdigo, especialmente para estruturar dados em grande volume.

Atividades de aprendizagem
1. Quais so os trs tipos de listas que a linguagem HTML nos oferece? Caracterize situaes nas quais cada um dos tipos pode ser utilizado.

72

Fundamentos de Desenvolvimento Web

2. Reescreva o documento HTML com a receita do po de queijo (Aula 4,


Figura 4.1) utilizando uma lista com marcador para os ingredientes e uma
lista numerada para as etapas do preparo.
3. De que forma voc pode redigir um texto de forma que o mesmo fique
dividido em duas colunas? Utilize um gerador de texto aleatrio (ex.:
http://www.lipsum.com/feed/html) para demonstrar como isso pode
ser feito.
4. Codifique, em HTML, a estrutura das seguintes tabelas:
a) Lista de produtos (formato 1)
Cdigo

Descrio

P001

Webcam

P002

Mouse tico

P003

Pen drive 8 Gb

b) Lista de produtos (formato 2)


Produtos
Cdigo

Descrio

P001

Webcam

P002

Mouse tico

P003

Pen drive 8 Gb

5. Organize uma tabela (sem utilizao de bordas) para esquematizar uma


galeria de imagens, conforme o modelo a seguir:

Aula 5 - Tabulao de dados

73

Aula 6 Interao com formulrios


Objetivos
Compreender o funcionamento dos formulrios eletrnicos.
Diferenciar os mtodos de envio de informaes.
Identificar e utilizar os principais componentes dos formulrios eletrnicos.

6.1 Introduo ao uso de formulrios web


A partir do momento em que comeamos a desenvolver aplicaes para a
internet (no apenas pginas de contedo esttico), surge a necessidade de
permitir, por meio de alguns elementos, a interao. A interao consiste em
apresentar algo ao usurio, uma pergunta, por exemplo, e permitir que o
mesmo se manifeste (fornecendo uma resposta, por exemplo).
O contedo que abordaremos, nesta aula, de extrema importncia para as
atividades ligadas programao para a internet; atividades essas que no
so discutidas neste material. No entanto, pretendemos instrumentaliz-lo
acerca de como funcionam as interaes entre uma pgina e uma aplicao e
de que forma podemos estruturar os elementos que possibilitam tal relao.
Um formulrio web, como o prprio nome j sinaliza, um mecanismo pelo
qual o browser poder coletar informaes. No entanto, por que o browser
coletaria tais informaes? A resposta para essa pergunta est no servidor
web, pois l que existe uma aplicao (tambm desenvolvida por um profissional da rea web) aguardando a informao enviada pelo documento
HTML para realizar algum processamento e produzir ou apresentar outro
documento HTML.
Vamos a um exemplo. Voc j deve ter utilizado o servio de consulta de CEPs
(cdigos postais) dos Correios. Atravs desse servio, um formulrio semelhante
ao que est ilustrado na Figura 6.1 apresentado ao usurio. Ao digitar uma
informao e clicar sobre o boto Buscar, os dados fornecidos sero enviados

Aula 6 - Interao com formulrios

75

para um servidor de pgina dos Correios que ir procurar a informao em


sua base de dados e organizar uma pgina HTML, apresentando o resultado
ao usurio. A Figura 6.2 demonstra a resposta da ao do formulrio.

Figura 6.1: Servio de consulta CEP do site dos Correios


Fonte: www.correios.com.br

Figura 6.2: Resultado do servio de busca de CEP do site dos Correios


Fonte: www.correios.com.br

Observe que a informao digitada na Figura 6.1 (o valor 98270000) foi


submetida para o servidor de pginas quando o boto Buscar foi acionado.
Aps algum tempo de processamento, uma nova pgina (Figura 6.2) foi apresentada ao usurio. Atente que a informao utilizada no formulrio serviu
de base para a apresentao do resultado. Podemos imaginar que a pgina
exibida, na Figura 6.2, foi gerada de forma dinmica em funo do que foi
informado no formulrio da pgina anterior.
As aplicaes para a web funcionam, basicamente, dessa forma, ou seja, um
formulrio coleta informaes que so submetidas para uma aplicao web.
Esta, por sua vez, baseada nos dados recebidos do formulrio, decide qual
ao tomar. Durante esta aula, discutiremos de que forma podemos empregar a linguagem HTML utilizando formulrios para estruturar documentos.
Exploraremos quais elementos e recursos podem ser utilizados para coletar,
da melhor forma possvel, os dados desejados.
A tag <form> responsvel pela organizao de um formulrio. Ela uma
tag do tipo container, ou seja, ir agrupar, dentro de suas marcas de incio

76

Fundamentos de Desenvolvimento Web

e de fim, outros elementos (nesse caso, os campos do formulrio). Existem,


basicamente, trs atributos da tag <form> que merecem destaque. Vamos
analis-los a partir do exemplo ilustrado na Figura 6.3, cujo objetivo construir
uma pgina com um formulrio para realizar pesquisas na base do Google.
Experimente digitar o cdigo da Figura 6.3 e testar sua funcionalidade.

Figura 6.3: Documento HTML com exemplo de formulrio


Fonte: Autores

Na tag <form>, trs atributos so utilizados: action (ao), name (nome) e


method (mtodo). O primeiro deles (action) indica, para o formulrio, qual a
aplicao web para onde os dados sero submetidos. Essa a aplicao web
da qual falamos anteriormente. No caso desse exemplo, podemos deduzir
que os cientistas e os profissionais do Google desenvolveram uma aplicao
com o nome de search a qual est hospedada no servidor disponvel em
http://www.google.com/. Os dados digitados, nesse formulrio, sero
enviados para l.
O segundo atributo (name) serve para nomear o formulrio (que neste caso
tem o nome de f). Por que um formulrio precisa de um nome? Em um
mesmo documento HTML, podemos ter vrios formulrios e, em determinadas situaes, precisamos identificar elementos especficos de um ou de
outro formulrio. Uma das formas de fazer essa diferenciao por meio do
atributo name.
O terceiro atributo, ao qual precisamos dedicar ateno, conhecido por
method (que, nesse formulrio, contm o valor get). O atributo method
informa para o browser de que forma os dados coletados pelo formulrio
sero enviados para a aplicao definida no atributo action. Existem, basicamente, dois tipos de mtodos de envio:

Aula 6 - Interao com formulrios

77

Experimente digitar diretamente


no seu browser a seguinte URL
http://www.google.com/
search?q=gato.
Qual foi o resultado? Veja que a
aplicao search do servidor
web http://www.google.com
foi executada com o parmetro
q (query consulta) contendo
o valor gato.

get os dados coletados pelo formulrio so enviados pela URL da requisio, ficando, inclusive, visveis ao usurio. o mtodo mais simples,
pois dispensa at mesmo a utilizao de um formulrio. No entanto,
apresenta algumas desvantagens, como o fato de exibir as informaes
do formulrio na URL (no caso de uma senha, isso no seria adequado).
Outra desvantagem que o mtodo get no permite o envio de determinados tipos de dados, como arquivos, por exemplo.
post quando utilizamos o mtodo post, os dados do formulrio so
empacotados junto com os dados do protocolo HTTP por meio de uma
varivel de ambiente que fica disponvel para o acesso da aplicao web.
Neste caso, os dados no ficam visveis e, por meio do mtodo post,
possvel enviar arquivos. A desvantagem fica por conta de no poder
ser acessado, diretamente, pela URL, necessitando, obrigatoriamente, ser
chamado por meio de um formulrio web.

6.2 Tipos de controles


O formulrio em si (tag <form>) , basicamente, um container pelo qual
configuramos a ao e o mtodo de envio de dados. No entanto, sozinho,
ele no capaz de realizar nenhuma interao com a aplicao web. Para
que tal interao seja possvel, precisamos de alguns elementos que nos
possibilitem coletar dados em diferentes formatos. Existem trs tipos de tags
com este propsito: <input> (entradas curtas diversas, como caixas de texto,
botes de escolha, senhas, arquivos), <select> (para entradas predefinidas
em listas de seleo, nicas ou mltiplas) e <textarea> (para entrada de
textos longos). A seguir, detalharemos os principais controles de entrada em
formulrios, explorando os atributos e opes de visualizao que os mesmos
nos oferecem.

6.2.1 Input campo de entrada


A tag <input> nos permite coletar entradas de texto curtas ou escolhas
simples por meio de botes. H, ainda, duas aes importantes que a tag
<input> indica para o formulrio: o envio (submisso) e a reinicializao (ao
na qual os dados do formulrio voltam ao seu estado padro). O Quadro 6.1
demonstra alguns cdigos HTML de elementos de formulrio e o efeito visual
que os mesmos produzem. Na sequncia, discutiremos os atributos que podem
ser configurados para a tag <input>.

78

Fundamentos de Desenvolvimento Web

Quadro 6.1: Tipos de componentes da tag <input>


Componente/cdigo

Visualizao

Caixa de texto
<input type=text name=nome value=Joo da
Silva size=8 maxlength=20 />

Caixa de texto com leitura protegida (campo senha)


<input type=password name=senha value=12345
size=6 maxlength=6 />

Boto de opo nica


<input type=radio name=sexo value=M />
Masculino <br />
<input type=radio name=sexo value=F />
Feminino

Boto de opo mltipla


<input type=checkbox name=ida_e_volta value=S
checked /> Ida e volta

Entrada oculta (no possui visualizao)


<input type=hidden name=escondido value=este
valor estava escondido />

Arquivo (abre uma janela para que o usurio escolha


o arquivo desejado)
<input type=file name=curriculo />

Boto com ao a ser definida pelo programador


<input type=button name=ok value=ok
onClick=alert(ok); />

Boto com ao de reiniciar os dados do formulrio


<input type=reset name=limpar value=Limpar />

Boto com ao de enviar (submeter) os dados para


a ao do formulrio
<input type=submit name=enviar value=Enviar />

Imagem clicvel para submeter os dados para a ao do


formulrio caixa de texto
<input type=image src=ok.jpg value=submit />

Fonte: http://www.cafw.ufsm.br/~bruno/disciplinas/desenvolvimento_web/material/formularios.html

O Quadro 6.1 nos permite explorar a variedade de valores possveis para


o atributo type da tag <input> (text, password, radio, checkbox, hidden,
file, button, reset, submit e image). Dois desses valores merecem destaque,
pois executam aes especficas. Quando um elemento <input> contiver o
valor submit para o atributo type, ele ser responsvel por ativar o envio dos
dados do formulrio. Funciona como um gatilho. Para que um formulrio seja
enviado, necessrio que pelo menos um de seus componentes seja do tipo
submit. O outro valor que merece destaque o reset, cuja ao reiniciar
o estado do formulrio, atribuindo a todos os seus elementos o valor padro
existente quando este foi apresentado pela primeira vez.

Aula 6 - Interao com formulrios

79

A tag <input> nos permite realizar outras configuraes junto aos componentes visuais por meio de alguns atributos. A seguir, detalhamos os principais
(tambm, podem ser visualizados nos cdigos do Quadro 6.1):
name define o nome do campo (nome do objeto para o formulrio).
por meio do nome que um componente poder ser referenciado por
alguma linguagem de programao, por exemplo.
value define o valor do campo (quando especificado na definio do
elemento, atribui-lhe um valor padro).
checked em botes de escolha, indica se o mesmo est ou no selecionado.
size em objetos que coletam caracteres, esse atributo especifica o tamanho visvel do campo, ou seja, a quantidade de caracteres a ser exibida.
maxlength em campos textuais, define a quantidade mxima de caracteres que o campo poder coletar.
src se o type da tag <input> for image, ento o atributo src indicar o
caminho do arquivo de imagem que ser utilizado.

6.2.2 Select lista de seleo


A tag <select> nos permite coletar entradas a partir de dados previamente
organizados os quais se apresentam ao usurio opes de escolha. Dependendo da configurao do controle, o usurio poder realizar escolhas simples
(indicando um valor de uma lista) ou escolhas mltiplas (nesse caso, escolhendo mais de um valor). uma tag do tipo container, que apenas delimita
o incio e o final da lista de opes e a forma como elas sero apresentadas.
Quem define o tipo de visualizao (lista ou lista suspensa) o atributo size.
Se contiver o valor 1, ele indicar ao componente a apresentao de uma
lista suspensa e, caso contenha um valor maior do que um, indicar a apresentao de uma lista com o nmero de elementos visveis igual ao valor de
size somente nesse tipo de visualizao possvel realizar mltiplas selees
de valores.
Dentro da tag <select>, indicaremos por meio da tag <option> a relao de
opes que sero apresentadas. Cada opo poder indicar, no atributo value,

80

Fundamentos de Desenvolvimento Web

o valor que ser submetido aplicao quando o formulrio for enviado. O


Quadro 6.2 ilustra a utilizao da tag <select> em suas diferentes formas
de apresentao.
Quadro 6.2: Tipos de componentes da tag <select>
Componente/cdigo

Visualizao

Lista de seleo nica


<select name=sexo size=2>
<option>Masculino </option>
<option>Feminino </option>
</select>

Lista de seleo suspensa


<select name=UF size=1>
<option>RS </option>
<option>SC </option>
<option>PR </option>
</select>

Lista de seleo mltipla


<select name=cursos size=3 multiple>
<option>Agropecuria </option>
<option>Alimentos </option>
<option>Informtica </option>
</select>

Fonte: http://www.cafw.ufsm.br/~bruno/disciplinas/desenvolvimento_web/material/formularios.html

Da mesma forma que na tag <input>, na tag <select>, o atributo name


importante, pois atravs dele que, na aplicao web, os dados podero ser
identificados. Observe, no Quadro 6.2, como o atributo size modifica a aparncia da lista (no segundo caso, em que size igual a 1, a lista se apresenta
de forma suspensa). As opes, conforme mencionamos anteriormente,
devem ser delimitadas pela tag <option>.

6.2.3 Textarea rea de texto


H situaes nas quais precisamos definir uma rea de texto maior para a
aquisio de informaes de nosso usurio; uma rea com, por exemplo,
mais de uma linha para digitao (uma notcia ou uma mensagem de e-mail,
por exemplo). Nesse caso, recomenda-se a utilizao da tag <textarea>,
que delimita um conjunto de caracteres que sero apresentados dentro de
uma caixa de edio com um nmero predefinido de linhas (atributo rows) e
colunas (atributo cols). Cabe ressaltar que essa configurao (linhas e colunas)
simplesmente esttica e no est relacionada ao tamanho mximo permitido
para a rea de texto.
De forma a demonstrar a construo de um formulrio utilizando as diferentes opes discutidas at esse momento, organizamos, na Figura 6.4, uma
pesquisa avanada que emprega o servio de busca do Google.

Aula 6 - Interao com formulrios

81

Figura 6.4: Documento HTML com exemplos de utilizao de componentes de formulrio


Fonte: Autores

Observe que inserimos algumas tags que no havamos utilizado antes, como
<fieldset> (conjunto de campos), <legend> (legenda) e <label> (rtulo).
As duas primeiras (<fieldset> e <legend>) so utilizadas em conjunto para
congregar um grupo de campos relacionados. No exemplo demonstrado
na Figura 6.4, os campos foram divididos em duas reas (o que voc quer
pesquisar? e opes). Na Figura 6.5, podemos observar o efeito visual de
tais tags (elas criam uma espcie de quadro legendado em torno dos campos
que esto demarcando).

Para saber mais sobre o servio


de busca do Google, acesse a
pgina de pesquisa avanada:
http://www.google.com.br/
advanced_search
e explore as opes disponveis.
Para conhecer os valores
e os nomes dos atributos,
estude a URL gerada aps a
execuodoservio.

A tag <label> pode ser utilizada para estruturar os rtulos dos campos. Perceba
que ela utiliza um atributo denominado for (para) o que indica sou um rtulo
para.... A informao que completa a frase anterior o valor do atributo id
que pode ser utilizado em qualquer tag HTML e seu objetivo identificar um
elemento, ao longo do documento, de forma nica (nenhum elemento no
mesmo documento pode ter o mesmo id). Atravs da relao de um rtulo
(label) com um elemento, ao clicar sobre o rtulo, o usurio direcionado
para o elemento a ele relacionado de forma que possa comear a digitao.
No caso da Figura 6.4, utilizamos, novamente, o servio de busca do Google
para organizar nosso formulrio. Nesse caso, estamos utilizando quatro parmetros disponibilizados pelo servio:

82

Fundamentos de Desenvolvimento Web

as_oq palavras que deseja pesquisar (ou uma ou outra).


as_epq expresso exata que se deseja pesquisar.
lr idioma (com os valores predefinidos lang_pt portugus, lang_en
ingls e lang_es espanhol).
occt local da pesquisa (com os valores predefinidos title ttulo da
pgina, body corpo da pgina ou vazio para no considerar um local
especfico).

Figura 6.5: Apresentao de um formulrio HTML, explorando diferentes elementos


Fonte: Autores

Resumo
Vimos, nesta aula, de que forma um documento HTML pode se comunicar
com uma aplicao. Aprendemos como organizar formulrios para coletar
informaes. Ainda, identificamos os principais elementos de um formulrio
e suas funes e exploramos alguns atributos que permitem alterar a forma
como so apresentados e como comportam.

Aula 6 - Interao com formulrios

83

Atividades de aprendizagem
1. Codifique um formulrio HTML para coletar um nome de usurio e uma
senha (utilize o tipo de elemento adequado para evitar que a senha seja
visualizada no momento em que digitada).
2. Qual a utilidade de um campo de entrada do tipo submit?
3. Qual a aplicao que est sendo chamada no formulrio exemplificado
na Figura 6.3?
4. Diferencie os mtodos de envio de dados get e post, identificando suas
principais vantagens e desvantagens.
5. Codifique um formulrio HTML para coletar o nome de um cliente e
algumas informaes pessoais como: sexo, estado civil e endereo (rua,
nmero, complemento, CEP, cidade, UF).

84

Fundamentos de Desenvolvimento Web

Aula 7 Introduo s folhas


de estilo em cascata
Objetivos
Conhecer o propsito e as terminologias relacionadas s folhas de estilo.
Compreender como so formadas as regras de folhas de estilo em
cascata (CSS).
Vincular folhas de estilo a elementos de documentos HTML.
Explorar alguns recursos de CSS para formatar documentos HTML.

7.1 Estrutura e estilo


A separao entre estrutura e estilo, embora parea bvio, ainda algo que
nem sempre conseguimos encontrar na internet. A linguagem de marcao
que estudamos at aqui o HTML, deveria ser utilizado apenas para estruturar
informaes, independente de sua apresentao. Visto que, na medida em
que precisamos organizar layouts de forma mais elaborada, o HTML no
nos oferece as ferramentas adequadas e acabamos por inventar alguma
gambiarra para alcanar nossos objetivos (quem nunca pensou em fazer
um layout usando tabelas que atire a primeira pedra).
Folhas de estilo em cascata ou CSS (Cascading Style Sheet) um mecanismo
com a funo de adicionar estilos (fontes, cores, espaamentos, bordas, sombras, etc.) aos elementos de documentos codificados em HTML. provvel que
voc venha a entrar em contato com o termo (X)HTML ou HTML estendido
que, na verdade, uma espcie de HTML com algo mais: o CSS.
As CSS tm por finalidade devolver ao HTML o propsito inicial da linguagem,
ou seja, a marcao e a estruturao de contedos. Segundo os idealizadores do HTML, no cabe a este fornecer informaes ao navegador sobre a
apresentao dos elementos cores de fontes, tamanhos de textos, posicionamento e todo o aspecto visual de um documento no devem ser funes
do HTML. Todas as funes de apresentao cabem a CSS, sendo esta a sua
finalidade maior. H uma frase consagrada que circula entre blogs e sites

Aula 7 - Introduo s folhas de estilo em cascata

85

especializados em desenvolvimento web: HTML para estruturar e CSS para


apresentar (SILVA, 2007).
Desde a concepo da linguagem HTML, algumas funcionalidades e regras
intrnsecas controlavam a apresentao dos documentos. Posteriormente, os
browsers adicionaram conjuntos de regras que, minimamente, proviam algum
estilo aos documentos HTML. No entanto, a primeira proposta de implementao de CSS s ocorreu em 1994 e, somente em 1996, a W3C passou a
regulamentar e recomendar de forma oficial o uso de CSS. Para ilustrar as
diferenas entre HTML e CSS, leia a conversa demonstrada no Quadro 7.1.
Quadro 7.1: HTML e CSS conversando sobre contedo e estilo
HTML

CSS

Saudaes, CSS. Estou feliz que voc esteja aqui, porque


quero esclarecer algumas confuses sobre ns.

mesmo? Que tipo de confuso?

Muitas pessoas pensam que minhas tags dizem ao


navegador como exibir o contedo. Isso no verdade!
Eu trabalho com a estrutura e no com a apresentao.

Ah, . Eu no gostaria de ver as pessoas lhe dando


crdito pelo meu trabalho.

Bem, voc v como as pessoas podem ficar confusas.


Afinal, possvel utilizar HTML sem CSS e, ainda assim,
obter uma pgina com visual decente.

Decente soa um pouco exagerado, voc no acha?


Quero dizer, a maneira como a maioria dos navegadores
exibe o HTML puro parece um pouco ordinria. As pessoas
precisam entender o poder das CSS e como ns podemos,
facilmente, dar um timo estilo s pginas web.

Ei, eu tambm sou muito poderoso. Ter seu contedo


estruturado muito mais importante do que ter algo
bonitinho. O estilo muito superficial; a estrutura do
contedo que interessa.

Fala srio! Sem mim, as pginas web seriam muito


chatas. E no apenas isso, tire a capacidade de adicionar
estilo s suas pginas e ningum as levar a srio. Tudo
parecer malfeito e nada profissional.

Nossa, que ego, heim? Acho que eu no poderia esperar


outra coisa de voc. Voc est apenas tentando fazer
uma declarao de moda com todo esse estilo sobre o
qual est falando.

Declarao de moda? Um bom design e uma boa


apresentao podem ter um efeito enorme na legibilidade
e na usabilidade das pginas. E voc deveria estar
contente porque minhas regras de estilo flexveis permitem
que os designers faam qualquer tipo de coisa interessante
com seus elementos sem bagunar sua estrutura.

Certo. Na verdade, somos linguagens totalmente


diferentes, o que bom, porque eu no gostaria de ter
nenhum de seus designers de estilo bagunando meus
elementos de estrutura.

No se preocupe, vivemos em universos separados.

, isso bvio para mim todas as vezes que olho para a


CSS, essa linguagem aliengena.

T... e HTML pode ser considerada uma linguagem?


Algum j viu algo mais desajeitado do que aquelas tags?

Milhes de escritores web discordariam de voc. Eu


tenho uma linguagem boa e limpa que se encaixa
perfeitamente ao contedo.

D s uma olhada nas CSS. Elas so elegantes e simples


e no so sinais de menor e maior patticos <em>
<torno> <de> <tudo>. <Olha>, <gente>, <eu>
<posso> <falar> <como> <o> <sr.> <HTML><!>

Ei, sua estpida! J ouviu falar das tags de fechamento?


Veja bem, no importa aonde voc for, est cercada por
tags <style>. Boa sorte ao tentar escapar delas!

HAHAHAHA! Eu vou te mostrar....Sabe por qu? Eu


posso escapar...

Fonte: Freeman e Freeman, 2006

86

Fundamentos de Desenvolvimento Web

7.2 Regras, seletores e declarao sintaxe CSS


A motivao e a conceituao inicial devem ter despertado o seu interesse
em conhecer um pouco sobre o funcionamento da linguagem CSS. Antes
de comear, vamos discutir alguns conceitos relacionados organizao das
regras CSS. A unidade bsica de uma folha de estilo uma regra CSS. Ela
a menor poro de cdigo capaz de produzir um efeito estilizado.
Uma regra CSS composta por duas partes: o seletor e a declarao. A
declarao compreende uma propriedade e um valor. Podemos observar,
atravs da Figura 7.1, a sintaxe para declarao de regras CSS e um exemplo
no qual definimos uma declarao para o seletor p.

Figura 7.1: Sintaxe da regra CSS


Fonte: Silva, 2007

O seletor o alvo da regra CSS. Genericamente, pode ser a tag do elemento


da marcao ou, ento, uma entidade capaz de definir com preciso em qual
lugar da marcao a regra ser aplicada. A declarao, alm de determinar os
parmetros de estilizao, compreende a propriedade que define qual caracterstica do elemento alvo (determinada pelo seletor) ser estilizada e o valor
quantificao ou qualificao da propriedade (SILVA, 2007). Na Figura 7.1,
podemos visualizar um exemplo de aplicao da tag <p> (pargrafo) um estilo
onde a cor de fundo (backgroud color) ser definida como amarela.
As regras CSS podem conter mltiplas declaraes, bastando, para isso,
separ-las pelo sinal ; (ponto-e-vrgula). Quando o valor de uma propriedade
for uma palavra composta (separada por espaos) como o nome da fonte
Times New Roman , devemos inform-lo entre aspas (simples ou duplas).
A sintaxe das regras CSS no case sensitive, ou seja, no diferencia letras
maisculas de letras minsculas.

Aula 7 - Introduo s folhas de estilo em cascata

87

7.3 Acoplando CSS em HTML


Existem diferentes formas de se vincular uma folha de estilos a um documento
HTML. A primeira delas, conhecida como vinculao in-line (em linha), consiste
no emprego do atributo style diretamente sobre a tag HTML que se deseja
estilizar. Embora parea prtico em um primeiro momento, esse mtodo torna
a manuteno do cdigo bastante difcil e tambm retira um dos maiores
poderes das folha de estilo: o controle centralizado da apresentao. Na
Figura 7.2, podemos observar a utilizao de CSS, de forma in-line, na estilizao da tag <b>, alterando a cor para vermelho.
Outra maneira de utilizarmos CSS em um documento HTML de forma incorporada. Para tanto, utilizamo-nos da tag <style> que deve ser declarada na
seo de cabealho do documento, pois est indicando configuraes que o
documento, como um todo, ir adotar. Essa forma de vinculao apresenta
uma vantagem em relao anterior: as regras esto centralizadas em um
nico ponto do documento. No entanto, ela no permite o compartilhamento
de regras entre os documentos de um mesmo site. A Figura 7.2 ilustra a utilizao de CSS, de forma incorporada, alterando um conjunto de propriedades
da tag <body>.
A forma mais eficiente de utilizao de CSS, em documentos HTML, a
interligao externa: vinculamos ao documento HTML um arquivo externo
(normalmente com extenso CSS) e tal arquivo pode ser compartilhado por
diferentes documentos do mesmo site (ou de outros). A vinculao externa
de uma folha de estilos pode ser feita por meio da tag <link>, que utilizada
para associar um arquivo externo ao documento HTML em questo.
A vinculao de um arquivo externo por se tratar de uma configurao para
o documento tambm deve ser feita na seo de cabealho (tag <head>).
Na Figura 7.2, podemos observar a incluso do arquivo estilo.css por meio
da tag <link>. Na mesma figura, est demonstrado o contedo do arquivo
estilo.css, que redefine o formato da tag <a> aplicando efeitos diferentes
em links que esto recebendo o mouse (evento hover) e em links j visitados
(evento visited).

88

Fundamentos de Desenvolvimento Web

Figura 7.2: Utilizao de CSS no documento HTML


Fonte: Autores

7.4 Classes, identificadores e pseudoclasses


A utilizao de regras CSS no est restrita aos seletores do tipo tags HTML.
Existem trs tipos de seletores que merecem nossa ateno: classes (class),
identificadores (id) e pseudoclasses. Um seletor do tipo classe permite-nos
alguns recursos interessantes. Por meio dele, podemos aplicar um mesmo
estilo a diferentes elementos e tambm indicar que um mesmo elemento
obedece a diferentes estilos.
Para definir um seletor do tipo class, devemos iniciar a especificao do mesmo
com o sinal de . (ponto final). A utilizao de tal seletor, em elementos do
documento HTML, ocorre por meio do atributo class que aceito pela maioria
das tags HTML. Na Figura 7.3, o seletor do tipo class est sendo utilizado no
subttulo e na mensagem Obrigado e volte sempre!. Perceba que, nesta
ltima, duas classes esto sendo utilizadas (destacado e caixa alta). Para que
mais de uma classe seja utilizada sobre o mesmo elemento, basta separar
seus nomes por um espao em branco.
Um seletor do tipo identificador utilizado com o atributo id o qual identifica,
de forma nica e exclusiva, um determinado elemento no documento HTML.
A declarao de um seletor do tipo id inicia-se com o sinal de # (tralha ou
sustenido) seguido do seu nome. A especificidade de um seletor id maior
do que a de um seletor class. Dessa forma, se, em um mesmo elemento
HTML, forem utilizados os dois atributos, sero aplicadas as regras de estilo

Aula 7 - Introduo s folhas de estilo em cascata

89

do identificador. Na Figura 7.3, o seletor id utilizado na tag <p> que delimita


a expresso Essa a mensagem que preparei.

As pseudoclasses so
predefinidas pela linguagem CSS.
Para conhecer a lista completa,
acesse:
http://www.w3schools.com/css/
css_pseudo_classes.asp

H, tambm, um tipo especial de seletor denominado de pseudoclasse, que


utilizado para alcanar elementos que no so especificados por meio de
uma marca. Por exemplo, como poderamos aplicar efeitos diferentes em links
ainda no visitados, j visitados ou aquele em que o usurio est com o cursor
do mouse em cima? A resposta so as pseudoclasses. Sua declarao pode
ser visualizada, na Figura 7.2, junto ao arquivo estilo.css. Observe que duas
pseudoclasses esto sendo utilizadas para oferecer efeitos diferenciados para a
tag <a>: visited (que permite estilizar um link j visitado) e hover (que permite
estilizar um link no momento em que o cursor do mouse est sobre ele).

Figura 7.3: Utilizao de classes e identificadores


Fonte: Autores

As possibilidades que a linguagem CSS nos oferece no terminam por aqui.


Existem, ainda, outras formas de organizao das regras utilizando recursos
mais avanados (seletores compostos, seletores de atributos, seletores descendentes, seletores filhos, seletores irmos e pseudoelementos). A melhor forma
de conhecer mais sobre a linguagem CSS a partir de problemas prticos ou
situaes reais em que voc deseja fazer algo, mas no sabe como. A internet,
nesse caso, ser a melhor e a mais rpida referncia.

90

Fundamentos de Desenvolvimento Web

7.5 Propriedades
As propriedades, conforme j estudamos, formam, em conjunto com seus valores, a unidade mais bsica de definio de uma regra. Propriedades so como
palavras reservadas da sintaxe CSS e so predefinidas (MARCONDES, 2005).
A lista de propriedades da linguagem bastante extensa; vejamos algumas:

7.5.1 Fonte e efeitos sobre o texto


font-family nome da fonte (o tipo de letra).
font-style estilo itlico (italic) ou oblquo (oblique).
font-weight largura da fonte (ex.: negrito bold).
text-decoration especifica uma decorao para o texto, como sublinhado
(underline), riscado (line-through), sublinhado invertido (overline).
text-transform define se o texto ser apresentado em letras maisculas (uppercase), minsculas (lowercase), com as iniciais em maisculas
(capitalize).
font-size especifica o tamanho da fonte (veja mais sobre unidades de
medida na seo seguinte).
letter-spacing espaamento entre letras.
word-spacing espaamento entre palavras.

7.5.2 Cores e fundos


color cor do texto. Pode ser especificada em RGB hexadecimal (ex.:
#FF00CC), RGB decimal (ex.: RGB [255, 0, 100]), RGB percentual (ex.:
RGB [100%, 0%, 50%]) ou por meio do nome da cor (ex.: red).
background-color cor de fundo.
background-image imagem de fundo. Em CSS, para especificar um
arquivo externo, como uma imagem, utilizamos a funo URL (ex.: URL
./imagens/fundo.jpg).
background-repeat define como a imagem de fundo ser repetida:
repeat (repete tanto verticalmente quanto horizontalmente), no-repeat

Aula 7 - Introduo s folhas de estilo em cascata

91

(exibe a imagem apenas uma vez), repeat-x (repetio apenas no eixo x


horizontal), repeat-y (repetio apenas no eixo y vertical).
background-attachment determina o comportamento da imagem
em relao rolagem da tela (pgina ou camada). Pode ser: fixed (a imagem no acompanha a rolagem) ou scrool (a imagem movimenta-se de
acordo com a rolagem da tela).
background-position posicionamento da apresentao da imagem.
Essa propriedade precisa de dois valores: o primeiro para identificar o posicionamento vertical (top, bottom e center) e o segundo para identificar
o posicionamento horizontal (left, right e center).

7.5.3 Pargrafos
text-align alinhamento do texto: left ( esquerda), right ( direita),
center (centralizado) e justify (justificado).
text-indent recuo de primeira linha.
line-height espaamento entre linhas.

7.5.4 Bordas
border-width espessura da borda: thin (fina), medium (mdia), thick
(grossa). Tambm, possvel acessar propriedades especficas de cada
uma das bordas. Ex.: border-left-width altera a espessura da borda da
esquerda (outras opes so: border-right, border-top e border-bottom).
Para saber mais sobre a lista
completa de propriedades,
acesse o site do W3C:
http://www.w3.org/TR/CSS/

border-color cor da borda.


border-style estilo ou decorao: hidden, (oculta), solid (linha simples
sem efeito), ridge (3D), double (dupla), dotted (linha pontilhada), dashed
(linha tracejada), outlet (3D em alto-relevo), inset (3D em baixo relevo),
none (invisvel).

7.6 Unidades de medida


As propriedades que listamos, na seo anterior, podem ser qualificadas
(quando seu valor uma informao textual) ou quantificadas (quando seu
valor , por exemplo, algo mensurvel ou algo que se utiliza de valores). O
tamanho de uma fonte, a espessura de uma borda ou as margens de um

92

Fundamentos de Desenvolvimento Web

pargrafo so exemplos de propriedades que podem ser quantificadas. O CSS


trabalha com diferentes unidades de medida. importante que as conheamos
para ajustar os valores de nossas propriedades de forma adequada.
As unidades de medida utilizadas em CSS se dividem em absolutas e relativas.
As unidades absolutas so aquelas que no dependem de nenhum outro valor
de referncia, ou seja, so definitivas (SILVA, 2007).
in polegada.
cm centmetro.
mm milmetro.
pt ponto (1 pt = 1/72 polegadas).
pc pica (1 pc = 12 pt).
Unidades de medidas relativas so aquelas que se utilizam de um valor de
referncia anteriormente definido. So de trs tipos:
em calculada em relao ao tamanho de fonte predefinido (1 em
igual ao tamanho da fonte definido para o elemento a ser estilizado).
ex calculada em funo da altura da letra xis (x) minscula da fonte
adotada.
px refere-se a um pixel. No entanto, como diferentes dispositivos utilizam diferentes resolues de tela, o tamanho do pixel pode variar de
dispositivo para dispositivo.
A Figura 7.4 explora a utilizao de algumas unidades de medida de CSS.
Observemos seus efeitos:

Aula 7 - Introduo s folhas de estilo em cascata

93

Figura 7.4: Exemplos de unidades de medida em CSS


Fonte: Autores

Resumo
Durante esta aula, apresentamos o recurso de folhas de estilo em cascata,
utilizado para dar forma e visual aos nossos documentos HTML. Conhecemos
a linguagem CSS e compreendemos de que forma as regras de estilo devem
ser organizadas. Tambm, utilizamos algumas propriedades e explorarmos as
unidades de medida utilizadas para quantific-las.

Atividades de aprendizagem
1. Voc deve ter percebido que muitos atributos ou mesmo tags da linguagem HTML acabam se sobrepondo aos efeitos de propriedades em CSS.
Por que interessante que a estrutura e o formato estejam separados?
H alguma vantagem evidente na utilizao de CSS?
2. Descreva o que so regras, seletores, propriedades e valores, considerando os conceitos discutidos ao longo desta aula.
3. Cite exemplos e explique o que so propriedades qualitativas e propriedades quantitativas.
4. Utilizando sintaxe CSS, reescreva o quarto exerccio da Aula 3 sobre
HTML (Os Loucos e o Coc).
5. As unidades de medida de propriedades quantitativas podem ser absolutas ou relativas. Diferencie-as e cite situaes em que uma opo seria
mais indicada que a outra.

94

Fundamentos de Desenvolvimento Web

Aula 8 Camadas
Objetivos
Compreender o modelo de camadas.
Organizar layouts, dividindo-os em sees lgicas.
Conhecer e utilizar propriedades de regras de estilo para camadas.

8.1 O modelo de camadas (box model)


Em nossa quinta aula, quando falamos sobre tabulao de dados, possvel
que voc tenha pensado em utilizar uma tabela sem bordas para organizar um
layout. Afinal, seria muito natural imaginar, por exemplo, uma linha inicial para
cabealho (talvez dividida em duas clulas uma para o logotipo e outra para
algum tipo de banner), uma segunda linha para uma barra de navegao ou
menu institucional. O contedo em si poderia ser apresentado na terceira linha
(talvez dividida em duas colunas para separar o menu do contedo) e, por fim,
uma linha final com o rodap da pgina. A Figura 8.1 ilustra essa situao.

Figura 8.1: Organizao de layout utilizando uma tabela


Fonte: Autores

Pensando dessa forma, estamos desvirtuando o propsito inicial de uma


linguagem de marcao (estruturar o contedo) e estamos utilizando seus
recursos para dar forma (visual) ao contedo. Usar tabela para fatiar layouts

Aula 8 - Camadas

95

mais comum do que voc imagina. No entanto, uma prtica completamente equivocada. Voc deve estar se perguntando: Ok! Mas, como posso
fatiar um layout sem usar tabelas? Essa , justamente, a resposta que
ajudaremos voc a encontrar ao longo desta aula.
Inicialmente, vamos abordar o modelo de camadas ou modelo de caixas (box
model). Uma caixa ou um quadro uma rea lgica do documento HTML
com caractersticas prprias. Uma caixa funciona como um container, ou seja,
permite que existam, dentro de si, outras caixas (caixas descendentes). Por
meio da estruturao de blocos lgicos, possvel organizar a apresentao
de diferentes elementos ao longo do documento HTML. Para compreender
melhor como isso pode ser feito, vamos estudar a anatomia de uma caixa/
quadro. A Figura 8.2 ilustra suas diferentes propriedades:

Figura 8.2: Estrutura de um quadro


Fonte: Manzano e Toledo, 2008

Perceba a existncia de diferentes propriedades que regulam o comportamento visual de uma caixa. A rea de contedo ou corpo est ao centro da
figura e ela tem seus atributos de altura e largura regulados pelas propriedades
height e width, respectivamente. O corpo seguido por uma rea de preenchimento cuja espessura pode ser definida pela propriedade padding e,
ao redor dessa rea, podemos definir bordas (border). Alm das bordas, ainda
h uma rea denominada de margem (sempre transparente) cuja espessura
pode ser definida pela propriedade margin.
As diferentes propriedades que regulam um quadro podem ter suas dimenses, formatos e estilos especificados para cada uma das orientaes (topo,
direita, base e esquerda). Essa especificao pode ser feita com um nico

96

Fundamentos de Desenvolvimento Web

comando informando todos os valores na ordem top, right, bottom, left


(sentido horrio) ou individualmente, conforme as propriedades abaixo:
margin (margem) margin-top (margem superior), margin-right (margem da direita), margin-bottom (margem inferior) e margin-left (margem
da esquerda).
padding (enchimento ou espessura) padding-top (enchimento superior), padding-right (enchimento da direita), padding-bottom (enchimento inferior) e padding-left (enchimento da esquerda).
border (borda) border-top (borda superior), border-right (borda da direita), border-bottom (borda inferior) e border-left (borda da esquerda).

8.2 Marcaes lgicas


Em nossas aulas sobre HTML, deixamos de fora duas tags que, se fossem
explicadas naquele momento, no fariam sentido. Tratam-se das tags <div>
(division) e <span>. Essas tags so utilizadas para realizar uma marcao
lgica, pois no possuem efeito visual algum. Suas funes so: dar significado
ao contedo marcado. A diferena entre ambas fica no fato de que a tag
<div> utilizada para dividir reas ou blocos isso significa que uma diviso
pressupe uma quebra antes e depois da rea dividida. J a tag <span>
utilizada de forma in-line (em linha), sem quebras de texto.
A partir dessas duas tags, podemos associar a elas regras CSS, por meio de
classes ou identificadores, e alterar as propriedades do modelo de caixa.
Vejamos, atravs da Figura 8.3, um exemplo de utilizao de <div> e <span>
para demarcar reas da pgina onde so aplicados estilos especficos.

Figura 8.3: Marcaes lgicas div e span


Fonte: Autores

Aula 8 - Camadas

97

8.3 Fatiando um layout


Agora que conhecemos um pouco sobre o modelo de caixa e sobre marcaes
lgicas, vamos tentar organizar um layout semelhante quele apresentado na
Figura 8.1. Todavia, buscaremos separar o visual do contedo e organizar um
layout tableless que explore, adequadamente, os recursos do HTML e do CSS.
tableless
Tableless ou menos tabelas
uma filosofia ou mtodo de
desenvolvimento de pginas
difundido pela W3C que prega
a ideia de que cada tag deve
ser utilizada para o propsito ao
qual foi criado. Por meio de tal
filosofia, altamente difundida,
prega-se que a tag <table>
deve ser utilizada para tabulao
de dados e no para organizao
de layouts.

Imaginemos que nosso site ter quatro reas distintas: um cabealho, uma
barra de navegao, o corpo (onde estar o contedo) e um rodap. Cada
rea, por sua vez, poder ter subdivises. O cabealho se divide em dois
espaos: um para o logotipo (no canto superior esquerdo) e outro espao
maior para um banner ( direita do logotipo). A barra de navegao oferece
um menu de acesso rpido. A rea do corpo ser dividida em um menu (
esquerda) e uma rea de contedo (ao centro). Na base da pgina, estaro as
informaes de rodap. Inicialmente, sem preocupao com a apresentao,
vamos tentar organizar as informaes estruturando-as em um documento
HTML. A Figura 8.4 demonstra a estruturao dos contedos utilizando linguagem HTML e identificadores de estilo.

Figura 8.4: Estrutura do documento HTML


Fonte: Autores

O resultado do processamento desse documento (sem a atribuio de estilos)


pode ser visualizado na Figura 8.5. Veja que, mesmo sem o visual, o documento pode ser entendido, uma vez que suas informaes esto estruturadas
e organizadas.

98

Fundamentos de Desenvolvimento Web

Figura 8.5: Apresentao do documento HTML sem CSS


Fonte: Autores

De forma a demonstrar a utilizao de CSS para alterao do visual da pgina,


vamos adicionar uma seo <style> contendo algumas regras que iro definir
o comportamento visual dos seletores utilizados para identificar os elementos
HTML. O conjunto de regras a ser adicionado pode ser visualizado na Figura 8.6.

Figura 8.6: Estrutura do documento usando regras CSS


Fonte: Autores

Como num passe de mgica, aquele documento originalmente estruturado


apenas com tags HTML, no momento em que associado a um conjunto de
regras CSS, passa a apresentar-se conforme podemos visualizar na Figura 8.7

Aula 8 - Camadas

99

(as cores foram mantidas no layout apenas para facilitar a visualizao das
reas compreendidas por cada diviso).

Figura 8.7: Documento HTML utilizando regras CSS para apresentao


Fonte: Autores

Agora, experimente alterar a propriedade float, da regra #menu, de left


para right e o valor de float, da regra #conteudo, de right para left. Com
essa simples alterao, o menu que, antes, era exibido no lado esquerdo,
agora, pode ser visualizado no lado direito.
Vejamos, a seguir, o significado e o efeito de algumas propriedades relacionadas ao posicionamento e forma de exibio nas reas divididas de um layout:
position determina como sero considerados os comandos de posicionamento (left, right, top e bottom) e como um elemento ser posicionado
em relao aos demais. Admite quatro valores: absolute (os valores so
considerados a partir de seu elemento pai), fixed (posicionamento fixo em
relao janela do navegador, dessa forma o elemento fica sempre visvel,
no importando a rolagem de tela), relative (posicionamento estabelecido
a partir do local que o elemento ocupa) e estatic (este o valor padro e
indica que o elemento no possui posicionamento definido).
z-index define a ordem de apresentao da rea quando houver sobreposio. Valores mais altos posicionam a rea na frente de reas com
valores mais baixos.
overflow especifica o comportamento da rea quando seu contedo
exceder os seus limites. Pode ser visible (redimensionando a camada para

100

Fundamentos de Desenvolvimento Web

comportar o contedo), hidden (ignorando o contedo excedente), scroll


(incluindo barras de rolagem) ou auto (apresentando barras de rolagem
quando necessrio).
visibility define se a camada visvel (visible) ou oculta (hidden). H,
ainda, uma terceira opo: inherit, na qual o atributo herdado da camada pai.
cursor especifica o tipo de ponteiro do mouse a ser utilizado sobre a
camada (URL, auto, crosshair, default, pointer, move, e-resize, ne-resize,
nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help).
display define a forma de apresentao de um elemento. Por exemplo:
a forma de apresentao table faz com que a camada se apresente como
uma tabela, ou seja, como um quadro com dimenses definidas; j a apresentao in-line mostra a camada em uma nica linha, sem quebras. Os
principais valores so: in-line, block, in-line-block, list-item, table, table-cell.
float define se uma caixa poder ou no flutuar esquerda (left) ou
direita (right) do restante dos elementos de uma mesma rea.
clear define os lados de um elemento no qual no so permitidos elementos flutuantes (left, right, both, none).
A Figura 8.8 ilustra o comportamento de algumas das propriedades exploradas at esse momento. Observe que a camada 2 se sobressai em relao
camada 1 devido ao valor da propriedade z-index. Perceba, tambm, que a
imagem (logo.png) flutua sobre a esquerda do texto, o qual se acomoda no
espao restante da rea. No caso do quadro amarelo, podemos ver as barras
de rolagens apresentadas de forma fixa ao longo do quadro.

Aula 8 - Camadas

101

Figura 8.8: Utilizao de propriedades de posicionamento e de formato para quadros


empregando CSS
Fonte: Autores

Resumo
Nesta aula, compreendemos que, utilizando estilos, podemos alterar a disposio e a organizao dos elementos ao longo de um layout sem que isso afete
o contedo de nossa pgina. Exploramos a anatomia das reas de diviso e o
seu comportamento. Por meio de exemplos, utilizamos algumas propriedades
para organizar um layout base para uma pgina web.
Com esta aula, finalizamos o estudo dos fundamentos de desenvolvimento
web. importante que voc tenha presente que este material no uma
referncia definitiva sobre o assunto, mas um guia que apresenta algumas
ideias e indica caminhos para que voc procure se aperfeioar.

102

Fundamentos de Desenvolvimento Web

Atividades de aprendizagem
1. O que so marcaes lgicas?
2. Organize a estrutura e o estilo de uma pgina para apresentar uma notcia. Essa rea deve conter uma foto sobre o fato noticiado (do lado
esquerdo) e o texto da notcia circundando a foto.
3. Crie um documento HTML utilizando diferentes divises com posicionamento absoluto e largura/altura fixos. Para cada rea explore a propriedade cursor, experimentando os diferentes valores possveis e observe o
resultado.
4. Faa uma pesquisa na internet e descreva o que voc entende por:
a) Cross-browser.
b) Hack CSS.
c) Web standards.

Aula 8 - Camadas

103

e-Tec Brasil