Escolar Documentos
Profissional Documentos
Cultura Documentos
Tecnologia da Informtica
Sumrio
15
15
17
20
29
29
29
31
35
37
41
41
43
44
45
47
52
55
55
4.2 Imagens
58
60
65
65
67
75
75
78
85
85
87
88
89
7.5 Propriedades
91
92
Aula 8 Camadas
8.1 O modelo de camadas (box model)
95
95
97
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
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.
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
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.
Rede de acesso o tipo de infraestrutura que liga o dispositivo ao provedor de internet (exemplos: cabos de cobre, fibra tica, Wi-Fi).
17
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.).
18
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:
19
20
21
22
23
24
25
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
) 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.
) Todo endereo comea com a palavra www que significa (World Wide
Web Rede de Alcance Mundial).
27
28
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.
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.
30
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.
32
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.
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
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.
36
37
38
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?
39
40
41
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.
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
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.
43
metadados
So informaes sobre os
dados, ou seja, dados que
descrevem de que forma os
dados referenciados devem ser
interpretados ou categorizados.
44
Figura 3.4: Visualizao de uma pgina com elementos que so ignorados pelo navegador
conforme Figura 3.3
Fonte: Autores
45
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.
46
Figura 3.6: Cdigo HTML com recursos de formatao de pargrafos e de blocos de texto
Fonte: Autores
47
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
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
49
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
Entidade
"
"
"
Î
Î
&
&
&
Ï
Ï
50
Smbolo
Alfabeto ISO
Entidade
Smbolo
<
<
<
Ð
Ð
>
>
>
Ñ
Ñ
 
Ò
Ò
¡
¡
Ó
Ó
Alfabeto ISO
Entidade
Smbolo
Alfabeto ISO
Entidade
Smbolo
¢
¢
Ô
Ô
£
£
Õ
Õ
¤
¤
Ö
Ö
¥
¥
×
×
¦
¦
Ø
Ø
§
§
Ù
Ù
¨
¨
Ú
Ú
©
©
Û
Û
ª
ª
Ü
Ü
«
«
Ý
Ý
¬
¬
­
­
Þ
Þ
ß
ß
®
®
à
à
¯
¯
á
á
°
°
â
â
±
±
ã
ã
²
²
ä
ä
³
³
å
å
´
´
æ
æ
µ
µ
ç
ç
¶
¶
è
è
·
·
é
é
¸
¸
ê
ê
¹
¹
ë
ë
º
º
ì
ì
»
»
í
í
¼
¼
î
î
½
½
ï
ï
¾
¾
ð
ð
¿
¿
ñ
ñ
À
À
ò
ò
Á
Á
ó
ó
Â
Â
ô
ô
Ã
Ã
õ
õ
Ä
Ä
ö
ö
Å
Å
÷
÷
Æ
Æ
ø
ø
Ç
Ç
ù
ù
È
È
ú
ú
É
É
û
û
Ê
Ê
ü
ü
Ë
Ë
ý
ý
Ì
Ì
þ
þ
Í
Í
ÿ
ÿ
51
52
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?
53
54
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>,
55
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
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.
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.
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
59
60
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
61
62
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?
63
64
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.
65
66
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
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.
68
69
70
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.
71
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.
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
Descrio
P001
Webcam
P002
Mouse tico
P003
Pen drive 8 Gb
Descrio
P001
Webcam
P002
Mouse tico
P003
Pen drive 8 Gb
73
75
76
77
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.
78
Visualizao
Caixa de texto
<input type=text name=nome value=Joo da
Silva size=8 maxlength=20 />
Fonte: http://www.cafw.ufsm.br/~bruno/disciplinas/desenvolvimento_web/material/formularios.html
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.
80
Visualizao
Fonte: http://www.cafw.ufsm.br/~bruno/disciplinas/desenvolvimento_web/material/formularios.html
81
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).
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
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.
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
85
CSS
86
87
88
89
As pseudoclasses so
predefinidas pela linguagem CSS.
Para conhecer a lista completa,
acesse:
http://www.w3schools.com/css/
css_pseudo_classes.asp
90
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:
91
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/
92
93
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
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.
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:
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
Aula 8 - Camadas
97
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.
98
Aula 8 - Camadas
99
(as cores foram mantidas no layout apenas para facilitar a visualizao das
reas compreendidas por cada diviso).
100
Aula 8 - Camadas
101
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
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