Livro Texto Introducao HTML e CSS.

- $ 6
& ->
V-
v -

CopyrIght=2008
|aely da SIlva |oraes

- & LuIz ncIo Lula da SIlva
- 9= Fernando Haddad
? 9= -> Carlos Eduardo 8Ielschowsky
3- 9= -> HlIo Chaves FIlho
- - Celso Costa

Poberto Pamos Santos
CIoconda |artInez
- 9= Ednalva 0antas PodrIgues 0uarte
Pafael da SIlva 0lIveIra

7Ille CarIbas LIma de |edeIros
Kelly KarIna Santos
- FbIo Jos ParreIra

_
|Irocem 8eltro |acIeIra
-= |rcIa Josane LIra
9= Pafael da SIlva 0lIveIra
|Irocem 8eltro |acIeIra

.

Dados nternacionais de Catalogao-na-publicao (CP)
M827i Moraes, Maely da Silva.
Introduo ao HTML e CSS / Maely da Silva Moraes.
Boa Vista : Editora da UFRR, 2008.
72 p : il.

Inclui bibliograIia.
Inclui glossario.

1 Internet. 2 Educao a distncia. 3 HTML e
CSS. I - Titulo.
CDU 371.694: 681
.

?
UN0A0E html
ntroduo ao HT|L 07
Formato da lInguagem 08
EdIo de documentos HT|L 08
PublIcao de pgInas Web 09
Componentes bsIcos de uma pgIna HT|L 09
Separadores 12
Fontes 15
Titulos e Subtitulos 16
LIstas 17
Formatao de Textos 2J
Tabelas 28
magens JJ
LInks J8
FormulrIos 42
Frame 48
0efInIo de Cores 51
Caracteres especIaIs 52
UN0A0E [CSS]
ntroduo ao CSS 55
CrIando EstIlos 57
Formas de aplIcao de Folhas de EstIlo 59
PersonalIzao de tags 6J
AtrIbuto CSS 64
PEFEPNCAS 69
CL0SSAP0 70
5
-9=
Caro Aluno,
com grande satIsfao que me dIrIjo a voc, para darmos InicIo a uma
camInhada em busca de conhecImento que, certamente, refletIr em mudanas no seu
cotIdIano, tendo em vIsta que o curso de formao que voc escolheu exIgIr um esforo
extra, no so por ser dIstncIa, mas porque voc ter a necessIdade de reservar um
horrIo para estudar dIante do computador, a fIm de realIzar pesquIsas, testar e
aprender sobre as ferramentas que lhe sero apresentadas no decorrer desta
dIscIplIna. sso exIgIr de voc muIta fora de vontade e persIstncIa.
0 materIal dIdtIco que est sendo aquI apresentado no tem, de modo
algum, a pretenso de ser completo, mas de servIr como roteIro para sua jornada de
aprendIzado sobre as lInguagens HT|L e CSS. Como o proprIo nome da dIscIplIna sugere,
tratase de um materIal IntrodutorIo sobre essas lInguagens. Pressupese, portanto,
que voc no se conformar somente em estudar este conteudo para alcanar seu
objetIvo.
AssIm, este materIal est estruturado em duas unIdades. Na prImeIra,
apresentaremos noes bsIcas de estruturao de documentos para publIcao na Web
por meIo de HT|L e, na segunda unIdade, apresentaremos noes bsIcas de como
formatar a apresentao dos documentos HT|L por meIo de CSS. Sero dados exemplos
de codIgo dessas lInguagens, e medIda que forem apresentados, solIcItase, como
atIvIdade, que sejam Implementados, para vIsualIzao do resultado e uma melhor
compreenso do elemento em estudo.
Para complementar o aprendIzado, proponho que as duvIdas encontradas
durante a Implementao dos codIgos sejam dIscutIdas em grupo, atravs dos foruns e
batepapos, e as solues encontradas sejam postadas nos blogs para IntercmbIo
Informaes entre os partIcIpantes deste curso.
Sendo assIm, seja bemvIndo e mos obra!

I9=
HT|L o acronImo para a , que
sIgnIfIca LInguagem de |arcao de HIpertexto. Essa lInguagem foI crIada por
TIm 8ernersLee, na dcada de 90, para resolver um problema de
comunIcao e dIvulgao de suas pesquIsas com seu grupo de colegas. Ela ,
na verdade, uma subclasse do padro InternacIonal SC|L (
) para a crIao de documentos eletronIcos.
Seu sIstema de codIgos bem sImples e permIte envIar texto de uma forma
completamente InteratIva atravs da nternet. Ela serve para IndIcar, por
meIo de marcaes, formataes para textos, Insero de Imagens e lIgaes
de hIpertexto (-), que so Interpretadas pelos -- (navegadores),
permItIndo a apresentao de pgInas Web aos usurIos conforme
especIfIcado nas marcaes.
A lInguagem HT|L veIo para permItIr a navegao na Web, o que
seguramente sua prIncIpal contrIbuIo, poIs com o hIpertexto possivel
avanarmos rapIdamente, por meIo dos -, entre dIversas pgInas,
normalmente, de assuntos InterrelacIonados. Sem o HT|L a navegao
serIa ler uma Imensa quantIdade de texto de maneIra lInear, ou seja, sem
quase nenhuma InteratIvIdade.
Atualmente, possivel crIar pgInas Web sem ter muIto, ou quase
nenhum, conhecImento de HT|L, Isso se deve exIstncIa de ferramentas
que so acessiveIs, fceIs de usar, geIs e efIcIentes. No entanto,
Importante frIsar que conhecer taIs tecnologIas somente, no basta, poIs
quando o profIssIonal no obtm conhecImento adequado para trabalhar com
os codIgos fontes, fazer alteraes nas pgInas tornase uma tarefa dIficIl e
muIto demorada. 0 profIssIonal que domIna HT|L trabalha com qualquer
ferramenta, fIcando em sItuao de vantagem em relao aos que no o
domInam.
-
-
PesquIse em algum
sIte de busca o
conceIto de
lInguagem de
marcao. Anote,
pelo menos, doIs
conceItos com as
respectIvas fontes
e construa um
conceIto com suas
proprIas palavras.
F
A lInguagem HT|L constItuida por comandos escrItos sempre entre os
sInaIs () menor que e () maIor que, chamados - ou etIquetas, crIadas,
para InstruIr o - sobre como estruturar o conteudo de um documento,
IndIcando, por exemplo, que uma determInada parte do texto um titulo, outra
parte do texto um pargrafo e outra uma tabela, usando as - H1, P e
TA8LE, respectIvamente.
Ceralmente, as - so empregadas aos pares, de modo que a de
fInalIzao precedIda por uma barra (/): tag.../tag. A marcao dupla
necessrIa para IndIcar a formatao de um trecho especifIco de texto, ou seja,
marcase o comeo e trmIno do texto com a formatao IndIcada pelo comando.
Algumas - so unIcas, poIs no marcam uma regIo de texto, apenas Inserem
algum elemento no documento: <tag>.
As - podem conter, alm do comando, atributos e valores, a fim de
modificar o resultado padro do comando: <tag atrIbuto1=valor1
atrIbuto2=valor2>...</tag>. Por exemplo, a <table>, que define um elemento de
tabela, tem como resultado padro bordas que delimitam a tabela, ao inserir o
atributo BORDER ="0" altera-se a o resultado tabela sem borda.
As - no so sensveis caixa alta ou baixa, ou seja, tanto faz
escrev-las em letras maisculas ou minsculas. Somente quando houver
necessidade de fazer referncias especificas de endereo necessrio ter esse
cuidado, ou seja, uma referncia que aponta para figura.gif diferente da que
aponta para figura.GF.
E9= -
0s documentos HT|L so como arquIvos de texto sImples, logo, podem
ser edItados em qualquer edItor sImples (Exemplos: -
). No entanto, exIstem edItores HT|L especifIcos que auxIlIam a produo
dos documentos, poIs facIlItam a Insero das -, orIentando o uso de atrIbutos
-=
Sempre que voc
tIver duvIda sobre
algum termo
apresentado no
conteudo deste
materIal, sugIro
que o marque e
faa uma busca na
Web procurando
pelo conceIto que
melhor se adeque
dentro do contexto
em que foI
empregado aquI.
e marcaes (Exemplos: - ). H os edItores
WYSWYC (acronImo da expresso em Ingls - ,
que sIgnIfIca 0 que voc v o que voc tem) que mostram o resultado fInal
das marcaes durante a edIo. (Exemplos:
).
Alm dos edItores j cItados, h outros bastante utIlIzados, como o
Word, 0pen0ffIce, entre outros, que permItem a exportao de seus
documentos para o formato HT|L. Normalmente, o documento HT|L tem a
extenso .html ou .htm.
P9= ?-
Para publIcar uma pgIna na Web necessrIo que ela tenha um
endereo fIxo e esteja hospedada em um provedor de espao (servIdor
-). Para Isso, basta envIar ao provedor os arquIvos de seu -,
normalmente, vIa FTP ou por meIo de uma pgIna de envIo no proprIo
provedor.
H dIversos provedores de espao gratuItos; exIstem tambm os
provedores de acesso que cedem espao para os assInantes dIsponIbIlIzarem
seus -- pessoaIs e h os provedores de espao pagos que hospedam
geralmente -- que vIsam lucro.
- ?-- ?
Uma pgIna HT|L possuI basIcamente trs partes: estrutura
prIncIpal, um cabealho e um corpo de pgIna. Pepresentadas pelos seguIntes
componentes:
<HTML>
<HEAD><TITLE>Ttulo da Pgina</TITLE></HEAD>
<BODY>
-
-
PesquIse e
comente sobre,
pelo menos J,
provedores de
espao.
cabealhos, pargrafos, listas, tabelas, links para outros
documentos, imagens, formulrios, animaes, vdeos, sons
e scripts embutidos, ...
</BODY>
</HTML>
Para que voc compreenda melhor o papel de cada apresentada
acIma segue uma breve descrIo da funo de cada uma delas:
HT|L.../HT|L
0elImItam os comandos HT|L, IndIcam o InicIo e o fIm de um
documento, ou seja, todo documento HT|L fIca contIdo entre essas -.
HEA0.../HEA0
ndIcam parmetros de confIgurao do documento, tambm utIlIzadas
para exIbIr o titulo na barra de titulos do -.
TTLE.../TTLE
0efInem o titulo do documento para o -, devendo estar sempre
dentro das - HEA0 /HEA0.
800Y.../800Y
Envolvem a seo de corpo do documento, ou seja, o conteudo que
estIver entre as referIdas - ser mostrado na janela prIncIpal do -,
apresentandoo ao usurIo. 0pcIonalmente, podemos IndIcar alguns atrIbutos
para defInIr cores para os textos, - e para o fundo das pgInas, at mesmo uma
marca d'gua:
8CC0L0P 0efIne a cor de fundo; quando no IndIcada, o
- mostrar uma cor padro, geralmente o cInza ou branco;
TEXT 0efIne a cor dos textos da pgIna, cujo padro o preto;
LNK 0efIne a cor dos -, cujo padro o azul;
ALNK 0efIne a cor dos - quando acIonados, cujo padro o
vermelho;
7LNK 0efIne a cor dos - depoIs de vIsItados, cujo padro o
azul escuro ou roxo.
TaIs atrIbutos assumem valores, normalmente, dados em
hexadecImal, equIvalentes a cores no padro PC8 (Red, Green, Blue). |aIs
adIante sero apresentadas duas tabelas de cores: uma com alguns valores em
hexadecImal e a outra com nomes de cores, em Ingls, que so aceItos por
-- que seguem a defInIo de HT|L J.2 em dIante.
8ACKCP0UN0 ndIca o UPL da Imagem a ser replIcada no
fundo da pgIna, como uma marca d'gua.
Exemplo1: CodIgo HT|L, usando cor de fundo na pgIna.
<HTML>
<HEAD> <TITLE>Introdução ao HTML e
CSS</TITLE>

</HEAD>
<BODY BGCOLOR="pink">
PÁGINA COM COR DE FUNDO CINZA E FONTE AZUL
ESCURO.
</BODY>
</HTML>
0bservao: Para edItar novamente o arquIvo clIque com o boto dIreIto do
mouse sobre o arquIvo e em seguIda selecIone AbrIr com EdItor de Texto.
FIgura 1: ExIbIo da pgIna Cor0eFundo.html no - FIrefox
No codIgo da pgIna exIbIda na FIgura 1, foI colocado um titulo,
exIbIdo na borda superIor da fIgura, mas no necessarIamente da mesma
forma que foI codIfIcado, ou seja, os codIgos ç e ã foram
Interpretados pelo - como os caracteres e respectIvamente.
No se preocupe, maIs adIante explIcaremos melhor o motIvo da
Comecemos ento
a crIar nossa
prImeIra pgIna
seguIndo os passos
abaIxo:
1. CrIe uma pasta
chamada
ntroHT|L no
0esktop;
2.Abra um EdItor
de texto sImples
(Ex.:gedIt), InsIra
codIgo HT|L dado
no Exemplo 1;
J.Salve o arquIvo
como Cor0eFundo
.html e fecheo;
4.Entre na pasta
ntroHT|L e d um
clIque duplo sobre
arquIvo HT|L para
executlo,
observe que o
- padro
exIbIr a pgIna.
5.Tente alterar o
codIgo, atrIbuIndo
outras cores e
mudando o texto.
utIlIzao dessa codIfIcao para caracteres especIaIs.
ContInuando a observao, no codIgo foI Incluido um texto logo apos o
titulo da pgIna, que no apareceu em lugar nenhum da tela; tratase de um
comentrIo, que est marcado InIcIalmente por ! e termInado por . Essa
marcao deve ser usada sempre que quIsermos que o - Ignore alguma
parte do codIgo.
Exemplo 2: CodIgo HT|L, usando Imagem como marca d'gua na pgIna.
<HTML>
CSS</TITLE></HEAD>
<BODY BACKGROUND="Figuras/fundo.gif">
PÁGINA COM IMAGEM DE FUNDO.
</BODY>
</HTML>
FIgura 2: ExIbIo da pgIna |arca0agua.html no - FIrefox
S-
Agora apresentaremos separadores utIlIzados para organIzar melhor os
textos:
Quebra de lInha
A 8P faz a quebra de lInha sem acrescentar espaos extras entre
lInhas, ou seja, usamos essa quando queremos mudar de lInha. No entanto, Isso
so necessrIo quando queremos uma quebra de lInha em um ponto especifIco,
poIs os -- j quebram as lInhas automatIcamente para apresentar os textos.
Essa no precIsa ser fInalIzada com /8P.
Com sucessIvos <BR>, podemos InserIr dIversas lInhas em branco nos
1.CrIe uma pasta
chamada FIguras
dentro da pasta
ntroHT|L;
2.Salve nessa
pasta, com o nome
fundo.gIf, o
arquIvo de Imagem
que voc deseja
colocar como
marca d'gua da
pgIna;
J.CrIe um novo
arquIvo chamado
|arca0agua .html
e InsIra o codIgo
HT|L dado no
Exemplo 2, depoIs
salve e execute o
arquIvo.
documentos. Esse elemento tem um atrIbuto especIal, que ser apresentado
no Item sobre Insero de Imagens.
Pargrafos
As - P.../P so responsveIs pela quebra de pargrafos
InserIndo automatIcamente uma lInha em branco entre os pargrafos. No
precIsa ser, necessarIamente, fInalIzada com /P e pode receber o atrIbuto
ALCN para IndIcar o alInhamento do pargrafo, assumIndo os valores LEFT,
PCHT e CENTEP, ou seja, alInhado esquerda, dIreIta e ao centro,
respectIvamente. 0 alInhamento padro esquerda.
LInhas HorIzontaIs
A HP desenha uma lInha horIzontal no documento. No
precIsa ser fInalIzada com /HP e pode receber os seguIntes atrIbutos:
SZE defIne a espessura, em pIxels, da lInha.
W0TH defIne a largura da lInha, o que pode ser feIto em
pIxels (numero absoluto) ou em percentual da tela (com
simbolo de )
ALNC IndIca o alInhamento, como o que tem sIdo usado,
pode ser LEFT, PCHT e CENTEP, ou seja, esquerda, dIreIta e ao
centro, respectIvamente.
N0SHA0E especIfIca que a lInha sem sombra, poIs o padro
a lInha sombreada.
ExemploJ: CodIgo HT|L, com uso dos separadores (quebra de lInha,
pargrafo e lInhas horIzontaIs).
<HTML>
<HEAD> <TITLE>Introdução ao HTML e CSS -
Separadores</TITLE> </HEAD>
<BODY>
<P ALIGN="CENTER">Primeiro exemplo: &eacute uma
linha horizontal de cor azul, que ocupa 100% do
espaço horizontal disponível na tela e
cuja largura &eacute de 2 pixels.
<HR WIDTH="100%" SIZE="2" COLOR="blue">
CrIe um arquIvo
chamado
Exemplo0eSeparad
ores.html e InsIra o
codIgo HT|L dado
no Exemplo J
depoIs salve e
execute o arquIvo.
<P ALIGN="RIGHT">Segundo exemplo:</P> &eacute uma linha
horizontal de cor cinza, alinhada à direita, que
ocupa 30% do espaço horizontal disponível
na tela e cuja largura &eacute de 3 pixels.
<HR WIDTH="30%" ALIGN="RIGHT" SIZE="3" COLOR="silver">
<BR><BR>Terceiro exemplo: &eacute uma linha horizontal
de cor verde, alinhada à esquerda, que ocupa 70%
do espaço horizontal disponível na tela,
cuja largura &eacute de 3 pixels e que não tem
efeito tridimensional.
<HR WIDTH="70%" ALIGN="LEFT" SIZE="7" COLOR="green"
NOSHADE>
<BR><CENTER>Segue abaixo uma combinação de
parágrafos e quebras de linha: </CENTER>
<BR>Parágrafo 1:<BR> Primeira linha do
parágrafo 1, <BR> Segunda linha do
parágrafo 1.<P>Parágrafo 2:<BR> Primeira
linha do parágrafo 2, <BR> Segunda linha do
parágrafo 2.
<BR><BR><CENTER>Linha padrão.</CENTER>
<HR WIDTH="70%">
</BODY>
</HTML>
FIgura J: ExIbIo da pgIna Exemplo0eSeparadores.html no - FIrefox
F-
As - F0NT.../F0NT permItem alterar tamanho, cores e tIpo
das letras em trechos especifIcos de texto, para Isso necessrIo IndIcar os
seguIntes atrIbutos:
SZE defIne o tamanho da fonte, que pode varIar de 1 a 7,
cujo padro J para a maIorIa dos --. possivel aInda
IndIcarmos tamanhos relatIvos ao padro;
FACE IndIca o tIpo de fonte a ser utIlIzada (ArIal, Tehoma,
etc);
C0L0P altera cor da fonte, que pode ser defInIda em
hexadecImal, ou atravs de um nome prdefInIdo de cores. 0a
mesma maneIra que defInImos anterIormente para cor de
fundo da pgIna.
Exemplo4: CodIgo HT|L, fazendo uso de formatao das fontes.
<HTML>
Fontes</TITLE> </HEAD>
<BODY >
<FONT SIZE="7" FACE="Tehoma" COLOR="#FF00FF"> Texto
com letra de tamanho 7, tipo de fonte Tehoma e cor
Magenta.</FONT>
<BR><BR>
<FONT SIZE="6" FACE="Arial" COLOR="#4F2F4F">Texto
com letra de tamanho 6, tipo de fonte Arial e cor
Violeta.</FONT>
<BR><BR>
<FONT SIZE="5" FACE="Tehoma"
COLOR="pink">Texto com letra de tamanho 5, tipo de
fonte Tehoma e cor Pink.</FONT>
<BR><BR>
<FONT SIZE="4" FACE="Verdana" COLOR="orange">Texto
com letra de tamanho 4, tipo de fonte Verdana e cor
Laranja.</FONT>
<BR><BR>
<FONT SIZE="3" FACE="Courier New" COLOR="blue">Texto
com letra de tamanho 3, tipo de fonte Courier New e
cor Azul.</FONT>
<BR><BR>
<FONT SIZE="2" FACE="Arial" COLOR="green">Texto com
letra de tamanho 2, tipo de fonte Arial e cor
CrIe um novo
arquIvo com o
nome
ExemploFontes
.html e InsIra o
codIgo HT|L dado
no Exemplo 4
depoIs salve e
execute o arquIvo.
Verde.</FONT>
<BR><BR>
<FONT SIZE="1" FACE="Tehoma" COLOR="red">Texto com letra
de tamanho 1, tipo de fonte Tehoma e cor Vermelha.
</FONT>
<BR><BR>
<FONT SIZE="+2">Texto com letra maior </FONT> Texto com
letra normal <FONT SIZE="-2"> Texto com letra
menor</FONT>
</BODY>
</HTML>
FIgura 4: ExIbIo da pgIna ExemploFontes.html no - FIrefox
3- 3-
ExIstem 06 (seIs) niveIs de titulos em HT|L, para cuja demarcao,
necessrIo o uso das - de HEA0EP que varIam de H1.../H1 a H6.../H6.
0pcIonalmente, possivel IndIcar o atrIbuto ALNG para alinhamento, podendo
assumir os valores LEFT, RGHT e CENTER, ou seja, alinhado esquerda, direita e
ao centro, respectivamente. Caso no seja indicado tal atributo o padro o
alinhamento esquerda. Ainda como opo de alinhamento possvel usar as -
<CENTER>...</CENTER> entre as - de HEADER.
Exemplo 5: CodIgo HT|L, fazendo uso de titulos e subtitulos.
<HTML>
Títulos</TITLE></HEAD>
CrIe um novo
arquIvo chamado
Exemplo0eTItulos.
html e InsIra o
codIgo HT|L dado
no Exemplo 5
depoIs salve e
execute o arquIvo.
<BODY >
<H1 ALIGN=CENTER>Título com H1 e
centralizado</H1>
<H2 ALIGN=RIGHT>Título com H2 e alinhado
à direita</H2>
<H3 ALIGN=LEFT >Título com H3 e alinhado
à esquerda</H3>
<H4>Título com H4 sem indicação
de alinhamento</H4>
<H5>Título com H5 sem indicação
de alinhamento</H5>
<H6><CENTER>Título com H6 e centralizado pela
tag <CENTER> ...</CENTER></CENTER></H6>
</BODY>
</HTML>
FIgura 5: ExIbIo da pgIna Exemplo0eTItulos.html no - FIrefox
--
ExIstem dIversos tIpos de lIstas em HT|L, dos quaIs as maIs
utIlIzadas e reconhecIdas pelos -- so apresentadas a seguIr.
LIstas de 0efInIo
|arcadas pelas - 0L0T00/0L, so tambm chamadas
de LIstas de ClossrIo, devIdo ao formato que tm. So normalmente
utIlIzadas para organIzar o texto das pgInas, por permItIrem tabulao.
Exemplo 6: CodIgo HT|L, usando LIstas de 0efInIo.
<HTML>
Listas de Definição</TITLE></HEAD>
<BODY >
<BR>Primeiro exemplo de Lista de
Definição:
<DL>
<DT>Termo 1
<DD>Definição do termo 1, cujo texto
pode ser tão grande quanto se precise,
não tendo necessidade de se preocupar com
formatação das margens de qualquer das
definiç ões.
<DT>Termo 2
<DD>Definição do termo 2
</DL>
<BR>Segundo exemplo Lista de Definição,
sendo utilizada para organizar o texto:
<DL>
<DT>Endereço dos professores do DCC:
<DD>Professor 1:
<DL>
<DD>Endereço Professor 1
</DL>
<DD>Professor 2:
<DL>
<DD>Endereço Professor 2
</DL>
</DL>
</BODY>
</HTML>
FIgura 6: ExIbIo da pgIna Exemplo0eLIstas0e0efInIcao.html no - FIrefox
CrIe um novo
arquIvo com o
nome
Exemplo0eLIstas0e
0efInIcao .html e
InsIra o codIgo
HT|L dado no
Exemplo 6 depoIs
salve e execute o
arquIvo.
LIstas nonumeradas
|arcadas pelas - ULL/UL, so equIvalentes s lIstas com
marcadores do edItor de texto |S Word, sendo que o HT|L dIfere do |S Word
no que se refere a mudana de marcadores no caso de lIstas compostas. Esse
tIpo de lIsta pode ter marcadores dIferentes, IndIcados por meIo do atrIbuto
TYPE, que pode assumIr os valores CPCLE, SQUAPE e 0SC(padro). Alm
dIsso, cada Item pode ter o seu atrIbuto especifIco.
Exemplo 7: CodIgo HT|L, usando LIstas nonumeradas.
<HTML>
<HEAD> <TITLE>Introdução ao HTML e CSS
Listas Nço Numeradas</TITLE> </HEAD>
<BODY >
<BR>Exemplo lista simples:
<UL>
<LI>Item da lista simples;
<LI>Item da lista simples. Assim como nas Listas
de Definição, aqui também
não &eacute preciso se preocupar com o tamanho do
texto a ser inserido em qualquer dos itens;
<LI>Item da lista simples.
</UL>
<BR>Exemplo lista composta:
<UL>
<LI>Item da lista composta;
<UL>
<LI>Subitem da lista composta. Aqui
também não &eacute preciso se preocupar
com o tamanho do texto a ser inserido em qualquer dos
subitens;
<UL>
<LI>Subitem do Subitem da lista
composta;
composta.
</UL>
<LI>Subitem da lista composta.
</UL>
<LI>Item da lista composta.
</UL>
<BR>Exemplo de Lista em que cada item tem seu
atributo especfico:
<UL>
<LI TYPE="DISC"> Marcador disco;</LI>
<LI TYPE="CIRCLE"> Marcador círculo;</LI>
<LI TYPE="SQUARE> Marcador quadrado.</LI>
</UL>
CrIe um arquIvo
chamado
Exemplo0eLIstasNa
oNumeradas.html e
InsIra o codIgo
HT|L dado no
Exemplo 7, depoIs
salve e execute o
arquIvo.
</HTML>
</BODY>
FIgura 7: ExIbIo da pgIna Exemplo0eLIstasNaoNumeradas.html no - FIrefox
LIstas Numeradas
So marcadas pelas - 0LL/0L, cuja numerao padro 1, 2,
J, etc. Quando compostas, taIs lIstas no apresentam numerao no formato 1.1,
1.2, etc. Entretanto, possivel IndIcar outras numeraes aos Itens por meIo do
atrIbuto TYPE (HT|L J.2) . Alm dIsso, possivel IndIcar o InicIo da numerao da
lIsta atravs do atrIbuto STAPT, aInda segundo HT|L J.2.
Exemplo 8: CodIgo HT|L, usando LIstas Numeradas.
<HTML>
Listas Numeradas</TITLE> </HEAD>
<BODY >
<BR>Exemplo lista numerada simples:
<OL>
<LI>Primeiro item da lista numerada simples;
<LI>Segundo item da lista numerada simples. Assim
como nas listas de apresentadas anteriormente aqui
também não &eacute preciso se preocupar com o
tamanho do texto a ser inserido em qualquer dos itens;
<LI>Terceiro item da lista numerada simples.
</OL>
<BR>Primeiro exemplo de lista numerada composta:
<OL>
<LI>Item da lista numerada composta;
<OL>
CrIe um arquIvo
chamado
Exemplo0eLIstasNu
meradas .html e
InsIra o codIgo
HT|L dado no
Exemplo 8, depoIs
salve e execute o
arquIvo.
<LI>Subitem da lista numerada composta.
Aqui também não &eacute preciso se
preocupar com o tamanho do texto a ser inserido em
qualquer dos subitens;
<OL>
numerada composta;
numerada composta.
</OL>
</OL>
<LI>Item da lista numerada composta.
</OL>
<BR>Segundo exemplo de lista numerada composta:
<OL TYPE=I>
<LI>Item da lista numerada composta;
<OL TYPE=i>
Aqui também não &eacute preciso se
preocupar com o tamanho do texto a ser inserido em
qualquer dos subitens;
<OL TYPE=a>
<LI>Subitem do subitem da lista
numerada composta;
<LI>Subitem do subitem da lista
numerada composta.
</OL>
</OL>
<LI>Item da lista numerada composta.
</OL>
<BR>Exemplo de lista numerada iniciando a partir
do quarto item da numeração adotada:
<OL START=4 TYPE=A>
<LI> Item da lista;</LI>
<LI> Item da lista;</LI>
<LI> Item da lista.</LI>
</UL>
</HTML>
</BODY>
FIgura 8: ExIbIo da pgIna Exemplo0eLIstasNumeradas.html no - FIrefox
LIstas e sublIstas
possivel aInda anInhar os vrIos tIpos de lIstas apresentados
at aquI.
Exemplo 9: CodIgo HT|L, fazendo uso de LIstas AnInhadas.
<HTML>
Listas Aninhadas</TITLE></HEAD>
<BODY >
<BR>Exemplo de lista e sub-listas:
<DL>
<DT>Telefone dos professores do CCT:
<DD>DCC - Departamento de Ciência da
Computação:
<OL>
<LI> Professor 1
<UL>
<LI>Telefone residencial
<LI>Telefone celular
</UL>
<LI> Professor 2
<UL>
</UL>
CrIe um arquIvo
chamado
Exemplos0elIstasA
nInhadas.html e
InsIra o codIgo
HT|L dado no
Exemplo 9, depoIs
salve e execute o
arquIvo.
</OL>
<DD>DMAT Departamento de Matemática:
<OL>
<LI> Professor 1
<UL>
</UL>
<LI> Professor 2
<UL>
</UL>
</OL>
</DL>
</HTML>
</BODY>
FIgura 9: ExIbIo da pgIna Exemplo0eLIstasAnInhadas.html no - FIrefox
F9= -
Em HT|L exIstem doIs tIpos de formatao: a logIca e a fisIca.
7eremos, a seguIr, os estIlos maIs utIlIzados.
EstIlos logIcos
Seguem o sIgnIfIcado logIco do texto marcado, por exemplo, um
endereo de emaIl, uma cItao, entre outros. Sua apresentao fInal varIa
conforme o -.
CTE.../CTE
Usadas para titulos de lIvros, fIlmes, e cItaes curtas.
C00E.../C00E
Usadas para IndIcar trechos de codIgo de programas.
0FN.../0FN
Usadas para IndIcar defInIo de uma palavra apresenta, em geral, o
texto em ItlIco.
E|.../E|
Usadas para IndIcar nfase, tambm apresentado, normalmente, em
ItlIco.
K80.../K80
Usadas para IndIcar uma entrada vIa teclado.
SA|P.../SA|P
Usadas para IndIcar uma sequncIa de caracteres, por exemplo uma
mensagem de erro ou um resultado.
STP0NC.../STP0NC
Usadas para IndIcar forte nfase, mostrado normalmente em negrIto.
7AP.../7AP
Usadas para IndIcar varIveIs, ou valores que o usurIo dever escrever,
geralmente mostrado em ItlIco.
Exemplo 10: CodIgo HT|L, fazendo uso de formao logIca.
<HTML>
Fomatação Lógica</TITLE></HEAD>
<BODY >
Li <CITE>Pai Rico e Pai Pobre</CITE> duas vezes!
CrIe um novo
arquIvo com o
nome
Exemplo0eFormata
caoLogIca .html e
InsIra o codIgo
HT|L dado no
Exemplo 10, depoIs
salve e execute o
arquIvo.
<BR>
<CODE><HEAD> <TITLE>
Introdução ao HTML e
CSS</TITLE></HEAD></CODE>
<BR>
HTML: <DFN>HyperText Markup Language</DFN>
<BR>
O temor do <EM>Senhor</EM> &eacute o
princípio da sabedoria.
<BR>
Para sair, digite <KBD>exit</KBD>
<BR>
O resultado do primeiro applet &eacute:
<SAMP>Alô, mundo!</SAMP>
<BR>
Antes de enviar um e-mail, <STRONG> confira o campo
"Assunto" </STRONG>!
<BR>
No campo <CODE>Login</CODE>, escreva
<VAR>guest</VAR>.
</BODY>
</HTML>
FIgura 10: ExIbIo da pgIna Exemplo0eFormatacaoLogIca.html no - FIrefox
EstIlos fisIcos
ndIcam claramente o estIlo que se deseja aplIcar no texto: ItlIco,
negrIto, entre outros. Sua apresentao fInal, normalmente, no sofre
grandes varIaes de um - para outro. Segue abaIxo as prIncIpaIs -:
8.../8
AplIcam o estIlo negrIto (alguns --, mostram
como sublInhado).
.../
AplIcam o estIlo ?
U.../U
AplIcam o estIlo sublInhado (no reconhecIdo por todos os
--)
SUP.../SUP
sobrescrIto
Fazem com que o texto fIque .
SU8.../SU8
Fazem com que o texto fIque .
subscrIto
S.../S ou STPKE /STPKE
Fazem com que o texto fIque tachado.
8C.../8C
Fazem com que a fonte fIque um pouco maIor.
S|ALL...S|ALL
Fazem com que a fonte fIque um pouco menor.
Exemplo 11: CodIgo HT|L, fazendo uso de formatao fisIca.
<HTML>
Fomatação Física</TITLE></HEAD>
<BODY >
Estilo <B>negrito</B>.
<BR>Estilo <I>itálico</I>.
<BR>Estilo <U>sublinhado</U> {nem todos os browsers o
reconhecem}.
<BR>Texto <SUP>sobrescrito</SUP>.
<BR>Texto <SUB>subscrito</SUB>.
<BR>Texto <S>tachado</S>.
<BR>Texto com a fonte <BIG>um pouco maior</BIG>.
<BR>Texto com a fonte <SMALL>um pouco menor</SMALL>
</BODY>
</HTML>
CrIe um novo
arquIvo com o
nome
Exemplo0eFormata
caoFIsIca .html e
InsIra o codIgo
HT|L dado no
Exemplo 11, depoIs
salve e execute o
arquIvo.
FIgura 11: ExIbIo da pgIna Exemplo0eFormatacaoFIsIca.html no - FIrefox
8locos de texto
H aInda formataes especifIcas para blocos de textos,
seguem abaIxo as prIncIpaIs -:
PPE...PPE
Apresentam o texto da maneIra como foI dIgItado, mantendo
quebras de lInha e tabulaes. Sendo assIm, bom no forar espaos com
essa marcao dentro de outra marcao que j apresente tabulaes e
espaos especifIcos.
8L0CKQU0TE.../8L0CKQU0TE
So usadas para cItaes longas.
A00PESS...A00PESS
Usadas para formatar endereos EmaIl e referncIas a autores
de documentos.
Exemplo 12: CodIgo HT|L, fazendo uso formataes especifIcas para blocos
de textos.
<HTML>
<HEAD><TITLE>Introdução ao HTML e CSS -
Fomatação de Blocos de
Textos</TITLE></HEAD>
<BODY>
Exemplo de texto pr&eacute-formatado:
CrIe um novo
arquIvo com o
nome
ExemploFormataca
o0e8locos0eTexto.
html e InsIra o
codIgo HT|L dado
no Exemplo 12,
depoIs salve e
execute o arquIvo.
<BR><PRE>FULANO
DE
TAL</PRE>.
<BR>Exemplo de citação longa:
<BLOCKQUOTE>Quem mal lê, mal ouve, mal fala, mal
vê.</BLOCKQUOTE> (Monteiro Lobato)
<BR>
<BR>Exemplo de endereo de e-mail:
<BR>Em caso de dúvida entrar em contato pelo e-
mail: <ADDRESS>maelymoraes@yahoo.com.br<ADDRESS>.
</BODY>
</HTML>
FIgura 12: ExIbIo da pgIna ExemploFormatacao0e8locos0eTexto.html no - FIrefox
T-
Adotadas muIto antes de serem Incluidas na defInIo da lInguagem
HT|L, as tabelas, so otImas para organIzar Informaes. 7em dai a prIncIpal
utIlIdade das tabelas para a Web. Com elas possivel organIzar o conteudo das
pgInas de maneIra harmonIosa e dIstrIbuIr os espaos da melhor maneIra. Por
exemplo, ajudar a gerar textos em colunas como os jornaIs, lImItar o tamanho
ocupado pelas dIversas sees da pgIna ou IncluIr uma legenda em uma fIgura de
maneIra sImples.
No entanto, manIpular tabelas, mesmo em edItores WYSWYC,
trabalhoso. A prIncIpal dIferena entre as tabelas crIadas em HT|L e aquelas
geradas em edItores como o |S Word, que no prImeIro, elas so defInIdas apenas
em termos de lInhas e no de colunas. |aIs adIante voc perceber o que Isso quer
dIzer.
Toda tabela defInIda pelas - TA8LE.../TA8LE, entre elas
que so InserIdas outras etIquetas, textos e Imagens que do forma e
conteudo tabela. A seguIr, descreveremos as - que precIsamos conhecer
para crIar as tabelas.
Titulos, lInhas e elementos
CAPT0N.../CAPT0N
0efInem o titulo da tabela.
TP.../TP
0elImItam cada uma das lInhas da tabela, da esquerda para
dIreIta.
TH.../TH
0efInem um cabealho para colunas ou lInhas, colocadas dentro
das tags TP.../TP deIxandoas em negrIto e centralIzando o conteudo da
clula.
T0.../T0
0elImItam as clulas de cada lInha, ou seja, dentro dessa que
se coloca o conteudo da clula.
AtrIbutos
H dIversos atrIbutos que, acompanhando as marcaes das
tabelas, levam a dIferentes resultados. 0 prIncIpaIs so:
80P0E ndIca a apresentao da borda. Se ele no estIver
presente, a tabela ser formatada sem lInhas de borda. Pode
receber um valor que vaI estabelecer qual a espessura da lInha
de borda da tabela (80P0EP=valor). Se o valor do atrIbuto for
0 (zero), funcIonar como se o 80P0EP no estIvesse presente.
ALCN Pode ser aplIcado a TH, T0 ou TP, para defInIr o
alInhamento do texto dentro de uma clula, com relao s
bordas lateraIs. Quando aplIcado a TP, ele defIne o
alInhamento de toda uma lInha da tabela. Assume os valores
LEFT, CENTEP ou PCHT, para alInhar esquerda, centralIzar ou
alInhar dIreIta, respectIvamente.
7ALCN Pode ser aplIcado a TH e T0 para defInIr o alInhamento do
texto em relao s bordas superIor e InferIor. Assume os valores
T0P, |00LE, e 80TT0| para alInhar na parte de cIma, no meIo e na
parte de baIxo, respectIvamente.
CELLSPACNC 0efIne a dIstncIa entre clulas e lInhas. 0eve ser
adIcIonado dentro da TA8LE. Sendo que a dIstncIa padro na
maIorIas dos -- 2 pIxels.
CELLPA00NC 0efIne o espao entre o conteudo de uma clula e
suas bordas em todos os sentIdos. 0eve ser adIcIonado dentro da
TA8LE
P0WSPAN 0efIne quantas lInhas uma mesma clula pode
abranger. 0 padro, na maIorIa dos --, que cada clula
adIcIonada em uma tabela corresponda a uma lInha. Pode ser
aplIcado em TH ou T0, proporcIonando o mesmo efeIto.
C0LSPAN 0efIne quantas colunas uma clula pode abranger. 0
padro, na maIorIa dos browsers, que cada clula adIcIonada em
uma tabela corresponda a uma coluna. Pode ser aplIcado em TH ou
T0, proporcIonando o mesmo efeIto.
W0TH Alterar a largura de uma clula da tabela, bastando ser
aplIcado em T0.
8CC0L0P muda a sua cor de fundo da clula, Isto se torna
partIcularmente utIl quando se quer dar destaque a uma clula em
especIal.
Exemplo 1J: CodIgo HT|L, fazendo uso de tabelas.
<HTML>
Tabelas</TITLE></HEAD>
<BODY>
<H3>Primeiro exemplo - Tabela Padrão</H3>
<TABLE BORDER>
CrIe um novo
arquIvo chamado
Exemplo0e
Tabelas.html e
InsIra o codIgo
HT|L dado no
Exemplo 1J,
depoIs salve e
execute o arquIvo.
<CAPTION> QUADRO DE NOTAS </CAPTION>
<TR>
<TD>Aluno\Avaliação</TD>
<TH>TRABALHO1</TH>
<TH>TRABALHO2</TH>
<TH>PROVA1</TH>
<TH>PROVA2</TH>
<TH>MÉDIA</TH>
</TR>
<TR><TH>ALUNO 1</TH>
<TD>10.00</TD>
<TD>8.50</TD>
<TD>9.50</TD>
<TD>9.00</TD>
<TD>9.25</TD></TR>
<TD>10.00</TD>
<TD>10.00</TD>
<TD>10.00</TD>
<TD>10.00</TD>
<TD>10.00</TD></TR>
<TD>7.00</TD>
<TD>7.00</TD>
<TD>7.00</TD>
<TD>7.00</TD>
<TD>7.00</TD></TR>
</TABLE>
<BR>
<H3><CENTER>Segundo exemplo - Tabela
Personalizada</CENTER></H3>
<TABLE CELLSPACING=6 WIDTH="80%" ALIGN="CENTER"
BORDER=5>
<TR><TD COLSPAN="7" ALIGN="CENTER" VALIGN="MIDDLE"
BGCOLOR="PINK"> QUADRO DE NOTAS </TD>
</TR>
<TR><TD COLSPAN="2" ALIGN="RIGHT"
VALIGN="MIDDLE">AVALIAÇÕES</TD>
<TH>TRABALHO1</TH>
<TH>TRABALHO2</TH>
<TH>PROVA1</TH>
<TH>PROVA2</TH>
<TH>MÉDIA</TH></TR>
<TR><TH WIDTH="16%" ROWSPAN=3
ALIGN="CENTER">ALUNOS</TH>
<TD ALIGN="CENTER" VALIGN="MIDDLE">1</TD>
<TD ALIGN="CENTER" VALIGN="MIDDLE">10.00</TD>
<TD ALIGN="CENTER" VALIGN="MIDDLE">9.25</TD></TR>
<TR><TD ALIGN="CENTER" VALIGN="MIDDLE">2</TD>
<TD ALIGN="CENTER" VALIGN="MIDDLE">10.00</TD></TR>
<TR><TD ALIGN="CENTER" VALIGN="MIDDLE">3</TD>
</TR>
</TABLE>
</BODY>
</HTML>

FIgura 1J: ExIbIo da pgIna Exemplo0eTabelas.html no - FIrefox
Como voc pode perceber, a formatao de tabelas no muIto fcIl, e
o codIgo fonte chega a ser quase Incompreensivel, no caso de tabelas muIto
complexas e utIlIzao de dIversos atrIbutos. A melhor forma de crIlas, com
certeza, usando edItores WYSWYC. ExIstem edItores de modo texto que tm
uma Interface grfIca que facIlIta a crIao de tabelas, porm quando necessrIo
edItar tabelas j prontas precIso fazer mo.
I-
A |C utIlIzada para InserIr Imagens em uma pgIna Web,
juntamente com o atrIbuto SPC cujo valor assumIdo o endereo do arquIvo
(UPL) de Imagem que se quer InserIr. Alm desse atrIbuto, possivel IndIcar os
atrIbutos descrItos a seguIr:
W0TH e HECHT 0efInem a largura e altura da Imagem,
respectIvamente, o que pode ser feIto em pIxel (numero
absoluto) ou em percentual da tela (com o simbolo de ).
ALT ndIca o texto que ser apresentado ao se passar o cursor
do mouse sobre a Imagem ou quando a Imagem no puder ser
vIsualIzada. recomendvel que esteja sempre presente e que
descreva brevemente a Imagem.
80P0EP EspecIfIca a largura da borda da Imagem. 7alor dado
em pIxel.
7SPACE EspecIfIca o espao que deve ser deIxado acIma e
abaIxo da Imagem. 7alor dado em pIxel.
HSPACE EspecIfIca o espao que deve ser deIxado nas lateraIs
da Imagem. 7alor dado em pIxel.
ALCN IndIca o alInhamento da Imagem, podendo ser:
iLEFT: AlInha a Imagem esquerda de tudo o que houver ao
redor, a partIr do topo dela;
iPCHT: AlInha a Imagem dIreIta de tudo o que houver ao
redor, a partIr do topo dela;
iCENTEP: AlInha a Imagem ao centro de tudo o que houver
ao redor, a partIr do meIo dela;
iT0P: AlInha o texto que est ao lado da Imagem com o topo
dela, no entanto quando a lInha fIca comprIda o resultado
no muIto bom;
i|00LE: AlInha o texto que est ao lado da Imagem com o
meIo dela, tambm no apresenta resultado muIto bom
quando a lInha fIca comprIda;
i80TT0|: AlInha o texto que est ao lado da Imagem com a
parte de baIxo dela (padro).
0s formatos de arquIvos de Imagens maIs usados na Web so: *.gIf,
*.xbm, *.jpg (ou *.jpeg), *.png.
Exemplo 14: CodIgo HT|L, fazendo uso de Imagens.
<HTML>
Imagens</TITLE></HEAD>
<BODY>
Exemplos de inserção e alinhamentos de
imagens:
<P><IMG SRC="Figuras/exemplodefigura.gif" ALIGN="TOP"
ALT="Figura de Exemplo"> <CODE> <STRONG> <FONT
COLOR="#0000ff">ALIGN=TOP</FONT> </STRONG> </CODE> -
Alinha o texto que est em volta da imagem com o topo
dela, no entanto, quando a linha fica comprida o
resultado no muito bom;</P>
<P><IMG SRC="Figuras/exemplodefigura.gif" ALIGN="MIDDLE"
COLOR="#0000ff">ALIGN=MIDDLE</FONT> </STRONG> </CODE> -
Alinha o texto que est ao lado da imagem com o meio
dela, tambm no apresenta resultado muito bom quando a
linha fica comprida;</P>
<P><IMG SRC="Figuras/exemplodefigura.gif" ALIGN="BOTTOM"
COLOR="#0000ff">ALIGN=BOTTOM </FONT> </STRONG> </CODE> -
Alinha o texto que est em volta da imagem na parte de
baixo dela;</P>
<P><IMG SRC="Figuras/exemplodefigura.gif" ALIGN="RIGHT"
COLOR="#0000ff">ALIGN=RIGHT</FONT> </STRONG> </CODE> -
Alinha a imagem direita de tudo o que houver ao redor,
a partir do topo dela;</P>
<P><IMG SRC="Figuras/exemplodefigura.gif"
ALIGN="LEFT" ALT="Figura de Exemplo"> <CODE> <STRONG>
<FONT COLOR="#0000ff">ALIGN=LEFT</FONT> </STRONG>
</CODE> - Alinha a imagem esquerda de tudo o que
houver ao redor, a partir do topo dela;</P>
<P><IMG SRC="Figuras/exemplodefigura.gif" ALIGN="CENTER"
COLOR="#0000ff">ALIGN=CENTER</FONT> </STRONG> </CODE> -
Alinha a imagem ao centro da tela e tudo o que houver ao
CrIe um novo
arquIvo chamado
Exemplo0emagem
1.html e InsIra o
codIgo HT|L dado
no Exemplo 14,
depoIs salve e
execute o arquIvo.
redor, a partir do meio dela;</P>
</BODY>
</HTML>
FIgura 14: ExIbIo da pgIna Exemplo0emagem1.html no - FIrefox
possivel aInda InserIr duas Imagens na mesma lInha e posIcIonar o
texto entre elas.
Exemplo 15: CodIgo HT|L, fazendo uso Imagens.
<HTML> <HEAD> <TITLE>Introdução ao HTML e
CSS - Imagens</TITLE></HEAD><BODY >
<H2>Exemplos de inserção de duas
imagens na mesma linha posicionando o texto entre
elas:</H2>
<P><IMG SRC="Figuras/exemplodefigura.gif"
ALIGN="LEFT" ALT="Figura de Exemplo"><IMG
SRC="Figuras/exemplodefigura.gif" ALIGN="RIGHT"
ALT="Figura de Exemplo">Texto texto texto texto
texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto texto.</P>
<P>Texto texto texto texto texto texto texto texto
texto texto texto texto texto texto texto.</P>
</BODY>
</HTML>
CrIe um novo
arquIvo chamado
Exemplo0emagem
2.html e InsIra o
codIgo HT|L dado
no Exemplo 15,
depoIs salve e
execute o arquIvo.
Nos exemplos de Insero de Imagens exIbIdos nas FIguras 14 e 15 serIa
Ideal que os textos fIcassem posIcIonados ao lado das fIguras a que fazem
referncIa, ou seja, sem sofrer InterferncIa de outros textos. Como o
comprImento da frase grande o valor T0P no resolve. Se InserIrmos vrIos 8P
consecutIvos, o resultado pode fIcar deselegante. Surge dessa necessIdade o
atrIbuto CLEAP para 8P. Com ele, possivel ter um texto posIcIonado no ponto
em que a margem dIreIta fIca lIvre, com 8P CLEAP=PCHT, ou no ponto em que a
margem esquerda fIca lIvre, com 8P CLEAP=LEFT, e aInda posIcIonar o texto no
ponto em que ambas as margens estejam lIvres, com 8P CLEAP=ALL.
Exemplo 16: CodIgo HT|L, fazendo uso do atrIbuto CLEAP para a 8P.
<HTML> <HEAD> <TITLE>Introdução ao HTML e CSS
- Imagens</TITLE></HEAD><BODY >
<H2>Exemplos de inserção e alinhamentos
de imagens fazendo uso do atributo CLEAR para a tag
<BR>:</H2>
<P><IMG SRC="Figuras/exemplodefigura.GIF" ALIGN="RIGHT"
COLOR="#0000ff">ALIGN=RIGHT</FONT> </STRONG> </CODE> -
Alinha a imagem direita de tudo o que houver ao redor,
a partir do topo dela;</P><BR CLEAR="LEFT"><P><IMG
SRC="Figuras/exemplodefigura.GIF" ALIGN="LEFT"
COLOR="#0000ff">ALIGN=LEFT</FONT> </STRONG> </CODE> -
Alinha a imagem esquerda de tudo o que houver ao
redor, a partir do topo dela;</P><BR
CLEAR="RIGHT"><P><IMG SRC="Figuras/exemplodefigura.GIF"
ALIGN="LEFT" ALT="Figura de Exemplo"><IMG
SRC="Figuras/exemplodefigura.GIF"
ALIGN="RIGHT"
ALT="Figura de Exemplo">Texto texto texto texto texto
texto texto texto texto texto texto texto texto texto
texto texto texto texto texto.</P> <BR
CLEAR="ALL"><P>Texto texto texto texto texto texto texto
CrIe um novo
arquIvo chamado
Exemplo0emagem
J.html e InsIra o
codIgo HT|L dado
no Exemplo 16,
depoIs salve e
execute o arquIvo.
texto texto texto texto texto.</P>
</BODY>
</HTML>
FIgura 16: ExIbIo da pgIna Exemplo0emagemJ.html no - FIrefox
0utra melhorIa que se pode fazer na apresentao das Imagens
junto aos textos, IndIcar os atrIbutos 7SPACE e HSPACE que defInem o espao
vertIcal e horIzontal, respectIvamente, deIxados entre as Imagens e os textos
em volta.
Exemplo 17: CodIgo HT|L, fazendo uso dos atrIbutos 7SPACE e HSPACE para a
|C.
<HTML> <HEAD> <TITLE>Introdução ao HTML e
CSS - Imagens</TITLE></HEAD>
<BODY>
<H2>Exemplos de inserção e alinhamentos
de imagens, fazendo uso dos atributos VSPACE e HSPACE
para a tag <IMG>:</H2>
<P><IMG SRC="Figuras/exemplodefigura.GIF"
ALIGN="RIGHT" ALT="Figura de Exemplo" HSPACE="20
VSPACE="20"> Texto texto texto texto texto texto
CrIe um novo
arquIvo chamado
Exemplo0emagem
4.html e InsIra o
codIgo HT|L dado
no Exemplo 17,
depoIs salve e
execute o arquIvo.
texto texto texto texto texto texto texto <IMG
SRC="Figuras/exemplodefigura.GIF" ALIGN="LEFT
ALT="Figura de Exemplo" HSPACE="20" VSPACE="20"> texto
texto.</P>
</BODY>
</HTML>
L-
Como dIto na Introduo desta unIdade, a prIncIpal contrIbuIo da
lInguagem HT|L vem da sua capacIdade de InterlIgar partes de um texto ou
Imagens de um documento HT|L a outros documentos. Alm dIsso, permIte
InterlIgaes dentro do mesmo documento HT|L. Por exemplo, em pgInas muIto
longas, onde um assunto tem vrIos topIcos, possivel utIlIzar os topIcos do indIce
como -, a fIm de InterlIgar cada topIco posIo na pgIna em o topIco
descrIto.
As - A.../A so usadas para InserIr - em um documento.
Essa tem vrIos atrIbutos que so utIlIzados conforme a ao assocIada ao
lInk. 0s maIs usados so descrItos abaIxo:
HPEF ndIca o arquIvo de destIno do . Cujo nome
completo deve ser Informado, InclusIve a extenso. Caso haja
necessIdade de se crIar - para documentos em outros
dIretorIos precIso especIfIcar o camInho completo do arquIvo
que ser chamado. No entanto, para a WE8 Isto tem uma forma
um pouco dIferente do WIndows e do 00S: a barra utIlIzada
para separar os dIretorIos a barra convencIonal (/); 0 ponto
de partIda para localIzar um arquIvo em outro dIretorIo o
atual; e para baIxar um nivel deve utIlIzar os sInaIs ../
TAPCET ndIca o em que ser mostrado o arquIvo de
destIno. |aIores detalhes sero dados quando falarmos sobre
-.
NA|E ndIca uma regIo de um documento como destIno de
uma lIgao.
A sIntaxe para InserIr um para outro documento :
A HPEF =arq_destInoncora/A, de modo que arq_destIno
o endereo do documento de destIno (UPL) e ncora o texto ou Imagem que
servIr de .
Conforme foI dIto, o HT|L permIte crIar - que apontem para
dentro do mesmo documento, mas para que Isso seja possivel precIso
marcar, com um IndIcador, o trecho do documento que servIr como ponto de
chegada de um . Para fazer tal marcao, usamos o atrIbuto NA|E,
conforme sIntaxe a seguIr:
A NA|E=IndIcadorncora/A, em que o IndIcador um
nome sIgnIfIcatIvo que IdentIfIca um local dentro do documento e ncora o
trecho do texto que ser o destIno do .
|ostramos agora como fIca a sIntaxe para crIar um que aponte
para um trecho do mesmo documento:
A HPEF=#N0CA00Pncora/A, em que #N0CA00P o nome
usado para IdentIfIcar o local do documento que ser destIno do lInk, precedIdo
por # e ncora o texto ou Imagem que servIr de
Exemplo 18: CodIgo HT|L, fazendo uso de -
<HTML>
CSS</TITLE></HEAD>
<BODY>
<A NAME="inicio"><H1><FONT FACE="arial" COLOR="green">
MENU DE EXEMPLOS </FONT></H1></A>
<HR WIDTH="100%" ALIGN="LEFT" SIZE="2" COLOR="white" >
<P>
<DL>
<DT><A HREF = "CorDeFundo.html" TARGET="principal">
Definição de cor do fundo da
Página Web </A><BR>
<DT><A HREF = "MarcaDagua.html" TARGET="principal">
Definição de imagem do fundo da
Página Web </A><BR>
<DT><A HREF = "ExemploDeSeparadores.html"
TARGET="principal"> Separadores </A> <BR>
<DT><A HREF =
"ExemploFontes.html"TARGET="principal">
Formatação de Fontes </A><BR>
<DT><A HREF = "ExemploDeTitulos.html"
TARGET="principal"> Títulos </A><BR>
<DT> Listas
<DD><A HREF = "ExemploDeListasDeDefinicao.html"
TARGET="principal"> Listas de
Definição </A><BR>
<DD><A HREF =
"ExemploDeListasSemNumeracao.html"TARGET="princi
pal"> Listas Não-numeradas </A><BR>
<DD><A HREF = "ExemploDeListasNumeradas.html"
TARGET="principal"> Listas Numeradas </A><BR>
<DD><A HREF = "ExemploDeListasAninhadas.html"
TARGET="principal"> Listas e Sub-listas </A><BR>
<DT>Formatação de textos
<DD><A HREF = "ExemploDeFormatacaoFisica.html"
TARGET="principal"> Formatação
Física </A><BR>
<DD><A HREF = "ExemploDeFormatacaoLogica.html"
Lógica </A><BR>
<DD><A HREF =
"ExemploFormatacaoDeBlocosDeTexto.html"
CrIe um novo
arquIvo chamado
ndex.html e InsIra o
codIgo HT|L dado no
Exemplo 18, depoIs
salve e execute o
arquIvo.
de Blocos de Textos </A><BR>
<DT>Inserção de Figuras
<DD><A HREF =
"ExemploDeInsercaoDeImagens1.html"
TARGET="principal"> Primeiro exemplo
</A><BR>
<DD><A HREF =
TARGET="principal"> Segundo exemplo </A><BR>
<DD><A HREF =
TARGET="principal"> Terceiro exemplo
</A><BR>
<DD><A HREF =
TARGET="principal"> Quarto exemplo </A><BR>
</DL>
</P>
Links:<BR>
<CENTER>
<P><A HREF = "http://www.ufrr.br/novo"
TARGET="NovaJanela"> UNIVERSIDADE FEDERAL DE
RORAIMA </A>
<BR><A HREF = "http://www.ufrr.br/novo"
TARGET="NovaJanela"><IMG SRC="Figuras/fundo.GIF"
ALIGN="TOP" ALT="UFRR" BORDER="0" HEIGHT="111"
HSPACE="20" VSPACE="20" WIDTH="111"></A></P>
<P><A HREF="#inicio">Topo do
documento</A>.</P></FONT>
</CENTER>
</BODY>
</HTML>
FIgura 18: ExIbIo da pgIna ndex.html no - FIrefox
FormuIrios
At aquI, foI vIsto como a lInguagem HT|L trata Informaes do tIpo
texto, Imagens e -. Falta ver como ela processa a troca de Informaes com o
usurIo (navegador). Atualmente, a maIorIa das atIvIdades que se pode realIzar
pela Web exIge Interao do usurIo com o servIdor, preenchendo campos,
clIcando em botes ou passando Informaes. Exemplos dessas atIvIdades so:
Comprar um lIvro, partIcIpar de enquetes, envIar um comentrIo, entre outras.
As - F0P|.../F0P| so responsveIs por tal Interao. Elas
possIbIlItam de maneIra amIgvel a coleta de dados do usurIo, por meIo da
crIao de formulrIos com janelas de entrada de textos, botes, etc. Todos os
outros comandos, devem fIcar dentro dessas -.
0s atrIbutos F0P| que nos Interessaro a prIncipIo so:
ACT0N EspecIfIca o endereo completo (UPL) do - ao qual
sero envIados os dados do formulrIo.
|ETH00 SelecIona um mtodo para acessar o UPL de ao. 0s
mtodos usados atualmente so GET e POST. Ambos os mtodos
transferem dados do browser para o servIdor, com a seguInte
dIferena bsIca:
iCET: os dados passados atravs do formulrIo, fazem parte do
endereo (UPL) assocIado consulta envIada para o servIdor e
suporta at 128 caracteres;
iP0ST: os dados passados atravs do formulrIo, fazem parte do
corpo da mensagem envIada para o servIdor e transfere grande
quantIdade de dados.
ENCTYPE ndIca o tIpo de codIfIcao dos dados passados atravs
do formulrIo. 0 tIpo padro application/x-www-form-urlencoded.
Alguns -- aceItam o tIpo text/plain.
permItIdo colocar qualquer formatao dentro dos formulrIos
(pargrafos, lIstas, tabelas, Imagens, entre outras), exceto outros formulrIos.
|as colocase, especIalmente,dentro das - F0P|.../F0P| as
formataes para campos de entrada de dados, que so trs: NPUT,
SELECT e TEXTAPEA.
Todos esses campos de entrada de dados tm um atrIbuto NA|E, ao
qual assocIamos um nome, que ser utIlIzado posterIormente pelo -.
Uma vez que so os -- que organIzam esses dados de entrada em um
conjunto de Informaes sIgnIfIcatIvas para determInado proposIto.
Neste materIal, entretanto, veremos apenas os tIpos de campos
para montar um formulrIo, mas no falaremos de --.
NPUT
Tem o atrIbuto TYPE ao qual atrIbuemse seIs valores dIferentes
para gerar seIs tIpos dIferentes de entrada de dados. A seguIr descreveremos
cada uma delas:
Campo de dados texto
TYPE=TEXT Quando NPUT no apresenta atrIbutos,
assumIdo que TYPE=TEXT (padro).
CodIgo HT|L:
Nome: <INPUT TYPE=TEXT NAME="Nome">
ou apenas
Nome: <INPUT NAME="Nome">
Pesultado:
Nome:
Campo de dados senha
TYPE=PASSW0P0 Nesse tIpo de entrada de texto os caracteres
so escondIdos por asterIscos.
CodIgo HT|L:
Login: <INPUT TYPE=TEXT NAME=login><BR>
Password: <INPUT TYPE=PASSWORD NAME="senha">
Pesultado:
LogIn:
Password:
H aInda alguns atrIbutos para os campos de tIpo TEXT e PASSW0P0:
VALUE -> Pode ser usado para dar um valor inicial a um campo de
tipo texto ou senha. Desse modo, se o usurio no preencher este
campo, ser adotado este valor padro. Se o usurio quiser entrar
dados, ele simplesmente apaga o que j estiver escrito e escreve
suas informaes;
Cdigo HTML:
Login: <INPUT TYPE=TEXT NAME=login
VALUE="meu_login"><BR>
Resultado:
Login:
SZE EspecIfIca o tamanho do espao no dIsplay para o campo
do formulrIo. 0 valor padro 20;
Cdigo HTML:
<P>Endereço: <INPUT TYPE=TEXT SIZE=35></P>
Resultado:
Endereo:
MAXLENGHT 0efIne o numero de caracteres aceItos em u m
campo de dados;
Cdigo HTML:
<P>Dia do mês: <INPUT TYPE=TEXT NAME="dia"
MAXLENGHT=2></P>
Pesultado:
0Ia do ms:
Apenas 2 caracteres sero lIdos pelo formulrIo, no Importa o
quanto se escreva neste campo.
|ultIpla escolha
TYPE=CHECK80X nsere um boto para escolha de opes. Cada
alternatIva corresponde a um valor que ser manIpulado pelo - que processa
os dados. 0bserve que o nome dado ao atrIbuto NAME o mesmo para toda a lIsta
de valores. Pode ser escolhIda maIs de uma alternatIva.
Cdigo HTML:
<P>Você possui quais destes animais de
estimação?</P>
<INPUT TYPE=CHECKBOX NAME="animais"
VALUE="cachorros">Cachorros<BR>
VALUE="gatos">Gatos<BR>
VALUE="aves">Aves<BR>
VALUE="peixes">Peixes<BR>
VALUE="cavalos">Cavalos<BR>
VALUE="cavalos">Outros<BR>
Uma dIretIva CHECKE0 marca uma escolha InIcIal, Isto , se o
usurIo no escolher nenhuma opo, o formulrIo Ir consIderar a
alternatIva prescolhIda:
<INPUT TYPE=CHECKBOX NAME="animais" VALUE="nao possuo
animais" CHECKED>Não possuo animais<BR>
Resultado:
7oc possuI quaIs destes anImaIs de estImao:
Cachorros
Catos
Aves
PeIxes
Cavalos
0utros
No Possuo anImaIs
Escolha unIca
TYPE=PA00 nsere um boto de escolha de valores para uma
opo, Isto , somente uma alternatIva pode ser escolhIda. 0bserve que o
nome dado ao atrIbuto NA|E o mesmo para toda a lIsta de valores.
CodIgo HT|L:
<P>Você fuma?</P>
<INPUT TYPE=RADIO NAME="voce fuma" VALUE="SIM">SIM
Uma dIretIva CHECKE0 marca uma escolha InIcIal, Isto , se o
usurIo no escolher nenhuma opo, o formulrIo Ir consIderar a
alternatIva prescolhIda:
<INPUT TYPE=RADIO NAME="voce fuma" VALUE="SIM"
CHECKED>NÃO<BR>
Pesultado:
7oc Fuma:
SIm No
8otes de ao
TYPE=SU8|T Apresenta o boto que envIa os dados do formulrIo ao
- que Ir tratlos quando pressIonado. possivel modIfIcar o rotulo desse
boto por meIo do atrIbuto 7ALUE.
CodIgo HT|L:
<INPUT TYPE=SUBMIT VALUE="ENVIAR">
Pesultado:
TYPE=PESET restaura os valores InIcIaIs das entradas de dados.
possivel modIfIcar o rotulo desse boto por meIo do atrIbuto 7ALUE.
Cdigo HTML:
<INPUT TYPE=RESET VALUE="APAGAR">
Pesultado:
TEXTAPEA.../TEXTAPEA
Abrem uma rea para entrada de texto, conforme especIfIcao dos
atrIbutos:
C0LS e P0WS EspecIfIcam, respectIvamente, o numero de colunas
e lInhas que se deseja mostrar para o usurIo;
NA|E EspecIfIca o nome da varIvel, que ser assocIada entrada
do usurIo (navegador) e obrIgatorIo.
47
No aceIto o atrIbuto 7ALUE para este campo, mas voc pode
adIcIonar um texto InIcIal.
Cdigo HTML:
<TEXTAREA COLS=40 ROWS=5 NAME="opiniao"> Deixe aqui sua
opinião </TEXTAREA>
Pesultado:
SELECT.../SELECT
0efIne uma lIsta de opes, com barra de rolagem ou fIxa, na tela
do navegador, conforme especIfIcao dos atrIbutos:
NA|E Serve para IdentIfIcao da lIsta e obrIgatorIo,;
0PT0N ndIca um Item da lIsta;
|UTPLE 0efIne que a lIsta aparecer sempre aberta;
SELECTE0 ndIca o valor padro da lIsta;
7ALUE ndIca o valor a ser retornado par o servIdor.
Cdigo HTML:
<P>Qual é a sua renda mensal?</P>
<SELECT NAME="renda" SIZE="1">
<OPTION VALUE="0"SELECTED >Prefiro não dizer
<OPTION VALUE="1">até 1000 reais
<OPTION VALUE="2">entre 1000 e 2.500
<OPTION VALUE="3">entre 2.500 e 5.000
<OPTION VALUE="4">Acima de 5.000 reais
</SELECT>
Pesultado:
Qual a sua renda mensal:
1. CrIe um novo
arquIvo chamado
FormularIo.html;
2. |onte a
estrutura bsIca do
documento HT|L;
J. Entre as -
F0P|...
/F0P| InsIra
todos os codIgos
HT|L dados sobre
os campos de
entrada de dados
de formulrIos
apresentados
(NPUT,
SELECT e
TEXTAPEA);
4. Salve e
execute o arquIvo
FomularIo.html.
F
um recurso que possIbIlIta dIvIdIr a tela do - em dIversos
quadros. Tornando possivel apresentar maIs de uma pgIna por vez na mesma
tela. Por exemplo, um indIce em uma parte pequena da tela, e os textos
relacIonados aos topIcos do indIce em outra parte.
ncluIr - em uma pgIna no uma tarefa dIficIl, mas no so
todos o usurIos que gostam deles, em vIrtude da navegao nem sempre ser fcIl e
apresentar problemas na hora de ImprImIr e marcar os documento dos frames nos
bookmarks. Uma alternatIva para os - so as tabelas.
Estrutura
Em um documento HT|L, os - entram no lugar do corpo,
substItuIndo o 800Y.../800Y por FPA|ESET... /FPA|ESET.
FPA|ESET.../FPA|ESET
0efIne a dIvIso da pgIna em quadros em lInhas ou colunas por meIo
dos atrIbutos:
P0WS EspecIfIca o numero de - e a altura de cada;
C0LS EspecIfIca o numero de - e a largura de cada um.
FPA|E
Faz referncIa s pgInas que sero mostradas nos -
acompanhado pelos atrIbutos:
SPC EspecIfIca o documento HT|L que ser mostrado no
caso no seja especIfIcado, aparecero na tela apenas as dIvIses;
NA|E NomeIa o documento HT|L que ser mostrado no e
altamente necessrIo para o uso do atrIbuto TAPCET (veja maIs
adIante porque);
SCP0LLNC 0efIne se o ter barra de rolagem, podendo
assumIr as seguIntes opes:
iYES: 0efIne que a barra de rolagem ser exIbIda Independente
do tamanho do documento;
iN0: 0efIne que a barra de rolagem no ser exIbIda
Independente do tamanho do documento;
iAUT0 (padro): 0efIne que a barra de rolagem ser exIbIda
somente quando o documento for maIor que a rea
especIfIcada.
N0PESZE ndIca que o usurIo no poder mudar o tamanho
da rea especIfIcada do . 0 padro o usurIo pode
mudar o tamanho desta rea.
TAPCET 0efIne em que o documento HT|L,
especIfIcado dever ser carregado. |uIto utIl na
utIlIzao de |enus e ndIces e, como dIto anterIormente,
necessIta que o tenha sIdo um nome pelo atrIbuto NA|E.
0 dado ento com a seguInte sIntaxe: A
HPEF=http//www.ufrr.br TAPCET= PrIncIpal UFPP /A.
Caso se queIra crIar um que chame uma nova tela do
- basta colocar TAPCET com nome que no exIste.
80P0EP 0efIne qual a borda que o frame ter. |aIs utIl na
utIlIzao de 8CKCP0UN0S IguaIs.
Como dIto anterIormente, a marcao FPA|ESET possuI
atrIbutos que possIbIlItam a dIvIso tela do - em colunas ou lInhas. 0
que aInda no foI dIto que podemos fazer combInao de -- para
crIar vrIas formas de apresentao do conteudo de um -. No entanto,
muIto Importante lembrar que para o mecanIsmo dos -, a nomeao
deles e a declarao dos targets dos lInks so ImprescIndiveIs.
A seguIr mostraremos a sIntaxe das composIes maIs comumente
encontradas na Web:
0oIs - em lInha:
0oIs - em coluna:
0oIs - em lInha, sendo a segunda lInha composta por doIs -
em coluna:
0oIs - em coluna, sendo a segunda coluna composta por doIs
- em lInha:
Exemplo 19: CodIgo HT|L, fazendo uso de -
<HTML>
<HEAD><TITLE> Introdução ao HTML e CSS -
Frames</TITLE>
</HEAD>
<FRAMESET COLS="35%,65%"FRAMEBORDER="NO" BORDER=0>
<FRAME SRC="Index.html"NORESIZE>
<FRAME SRC="Principal.html" NAME="principal">
</FRAMESET>
</HTML>
0 codIgo acIma faz referncIa a um arquIvo que aInda no crIamos o
PrIncIpal.html que ser carregado InIcIalmente no segundo .
<FRAMESET COLS="x%,(100-x)%">
<FRAME SRC="coluna1.html">
<FRAMESET ROWS="x%,(1-x)%">
<FRAME SRC="linha1.html">
<FRAME SRC="linha2.html">
</FRAMESET>
</FRAMESET>
CrIe um novo
arquIvo chamado
Exemplo0eFrame.h
tml e InsIra o
codIgo HT|L dado
no Exemplo 19,
despoIs salve o
arquIvo.
Exemplo 20: CodIgo HT|L, dando 8oas 7Indas ao Curso.
<HTML>
<HEAD><TITLE>Introdução ao HTML e
CSS</TITLE>
</HEAD>
<BODY>
<BR><BR><BR><BR><BR><BR>
<H1>Bem-vindo ao Curso de Introdução
ao HTML e CSS</H1>
</BODY>
</HTML>
FIgura 19: ExIbIo da pgIna Exemplo0eFrame.html no - FIrefox
Definio de Cores
0s valores assumIdos pelos atrIbutos responsveIs pela
modIfIcao de cores em HT|L so, normalmente, dados em hexadecImal,
equIvalentes a cores no padro PC8 (Ped, Creen, 8lue). AbaIxo mostramos um
quadro com o nome em hexadecImal de algumas cores:
Fonte: www.apostIlando.com
ExIstem tambm 16 nomes de cores aceItos por -- que
seguem a defInIo de HT|L J.2 em dIante. A atrIbuIo de taIs cores deve ser
feIta em Ingls.
#FFFFFF (8ranco) #A8A8A8 (CInza escuro) #00FF00 (7erde)
#000000(Preto) #FFFF00 (Amarelo) #C0C0C0 (CInza)
#00FFFF (CIano) #FF00FF (|agenta) #8C8F8F (PInk)
#0000FF (Azul) #FF0000(7ermelho) #4F2F4F (7Ioleta)

CrIe um novo
arquIvo chamado
PrIncIpal.html e
InsIra o codIgo
HT|L dado no
Exemplo 20, depoIs
salve e execute o
arquIvo
Frame.html.

Fonte:
Caracteres especiais
Note que j fIzemos uso de caracteres especIaIs nos exemplos dados at
aquI e eles foram devIdamente codIfIcados, conforme tabela a seguIr. sso foI
feIto, para garantIr que os caracteres especIaIs InserIdos nos documentos possam
ser corretamente apresentados aos usurIos, Independente do padro de
representao dIgItal dos caracteres adotado pelo - que apresentar o
documento. 0 padro de representao maIs usado o ASC (
) de 7 bIts. No entanto, h outras verses de 8
bIts, como por exemplo, o ASC amerIcano, o ASC portugus, entre outros.
7oc j deve ter passado pela experIncIa de receber um emaIl ou de
acessar um sIte e ter vIsto neles caracteres estranhos que no fazIam o menor
sentIdo estarem alI. sso ocorre porque quando crIamos um texto em ASC de 8 bIts
e, ao ser transmItIdo, ele tratado por um sIstema que entende somente o ASC
de 7 bIts, os caracteres especIaIs sero convertIdos em caracteres dIferentes,
devIdo a perda do oItavo bIt. Para resolver esse problema a lInguagem HT|L
permIte que caracteres especIaIs sejam representados por sequncIas de escape,
IndIcadas por trs partes: um InIcIal, um & ou -
correspondente ao caracter desejado, e um fInal.
0s caracteres ASC , , e E tm sIgnIfIcados especIaIs em HT|L e
devem sempre ser usados nos documentos seguIndo a correspondente entIdade em
destaque na tabela a seguIr:
www.apostIlando.com
8ranco 7erde azulado
Preto Azul marInho
Azul Prata
Amarelo CIano
7erde - |agenta
Laranja 7erde LImo
7ermelho |arrom
Posa 7erde 0lIva
CInza Poxo
0uro

Fonte:
Como voc pode ver, as sequncIas de escape so sensiveIs caIxa
alta e baIxa (|AUCULAS e mInusculas) e os edItores de HT|L fazem essa
decodIfIcao automatIcamente. No entanto, h edItores que mantm a
www.apostIlando.com
Caracter EntIdade Caracter EntIdade Caracter EntIdade
A EAacute; Euml; Ereg;
Eaacute; EIuml; Ecopy;
A EAcIrc; 0 E0acute; EYacute;
EacIrc; o Eoacute; Eyacute;
A EAgrave; 0 E0cIrc; ETH0PN;
Eagrave; o EocIrc; Ethorn;
EArIng; 0 E0grave; B EszlIg;
EarIng; o Eograve; E#186;
A EAtIlde; 0 E0slash; E170;
EatIlde; o Eoslash; E#185;
A EAuml; 0 E0tIlde; E#178;
a Eauml; EotIlde; ` E#179;
EAElIg; 0 E0uml; E#1J1;
EaelIg; o Eouml; E#1J4;
EEacute; U EUacute; E#1J5;
Eeacute; u Euacute; E#1J7;
EEcIrc; U EUcIrc; E#162;
EecIrc; u EucIrc; f E#16J;
EEgrave; U EUgrave; E#171;
e Eegrave; u Eugrave; E#177;
E EEuml; U EUuml; E#187;
e Eeuml; u Euuml; E#18J;
0 EETH; ECcedIl; E#188;
Eeth; EccedIl; E#189;
Eacute; N ENtIlde; E#190;
i EIacute EntIlde; E#191;
EcIrc; E#215;
EIcIrc; + E#247;
Egrave; E#161;
I EIgrave; Equot; E#164;

acentuao, sem usar as entIdades de formatao. Nesse caso necessrIo IncluIr
no codIgo IndIcao do esquema de codIfIcao S0 LatIn1, conforme codIgo
abaIxo:
<HTML>
<HEAD>
<TITLE>...</TITLE>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
<BODY>
...
</BODY>
</HTML>
Chegamos ao trmIno da UN0A0E e espero que voc tenha gostado do
que experImentou at aquI. sempre bom lembrlo que este conteudo no
contempla todas as - HT|L tampouco os exemplos cobrem todas as aplIcaes
possiveIs. Portanto, se voc gostou e pretende contInuar construIndo pgInas Web,
sugIro fortemente que voc busque maIs Informaes, acessando tutorIaIs de
HT|L pela Internet, lendo lIvros sobre o tema, exercItando a crIatIvIdade
construIndo novas pgInas e experImentando recursos maIs sofIstIcados.
Seguem abaIxo
alguns sItes
Interessantes para
voc procurar
saber maIs sobre
HT|L:

www.
crIarweb
.com/
html/
www.html.
net/
tutorIaIs/
html/
UNIDADE II - {CSS}
Introduo ao CSS
CSS o acronImo de - -, que sIgnIfIca Folhas de
EstIlo em Cascata. uma lInguagem de estIlo usada para especIfIcar a
apresentao de documentos escrItos em uma lInguagem de marcao, como
HT|L.
magIne que tenhamos de crIar dIversos documentos Web, como
fIzemos anterIormente quando falvamos do HT|L puramente, pode
acontecer de esquecermos o tamanho da fonte, usada no texto dos
pargrafos, qual o tIpo de fonte ou a cor dos titulos e subtitulos de
determInada seo, entre outras coIsas. No dIficIl concluIr que essa
sItuao pode prejudIcar a unIformIdade de apresentao das pgInas.
Usar CSS em tal sItuao no faz o menor sentIdo, uma vez que o
objetIvo das Folhas de EstIlo retIrar do documento HT|L toda e qualquer
marcao que vIse formatao do documento, ou seja, ocorrncIas de -
do tIpo <FONT>, <EM>, , 80L0, <B>, etc, bem como o uso de colunas e
lInhas de tabelas, para obteno de espaamentos, desaparecero do
documento HT|L, ou pelo menos dImInuIro sIgnIfIcatIvamente. PesumIndo,
o HT|L ser usado para estruturar e o CSS para apresentar o documento Web.
A partIr desse momento, o que determInar cores, formas, tIpos,
tamanhos, posIcIonamentos, enfIm todo o vIsual de uma ou at de coleo
InteIra de pgInas Web sero as Folhas de estIlo, permItIndo formatar
unIformemente uma coleo InteIra de pgInas, de maneIra bastante
economIca.
Agora voc se pergunta, mas o que vem a ser uma folha de estIlo:
Uma folha de estIlo um conjunto de regras que modIfIcam ou alteram a
forma como as - sero exIbIdas pelo - 0 uso delas depende da boa
estrutura do HT|L.
Atualmente, a maIorIa dos programas de edItorao eletronIca e
dos processadores de texto trabalham com folhas de estIlo. 0 procedImento
consIste, por exemplo, em defInIr um rotulo (nome do estIlo) para um
determInado pargrafo e em seguIda alterar os seus atrIbutos (alInhamento, tIpo e
tamanho da fonte, etc). Todo pargrafo que for rotulado com aquele estIlo passar
a exIbIr as caracteristIcas defInIdas anterIormente. Alm dIsso, qualquer alterao
que se faa nos atrIbutos desse estIlo, afetar todos os pargrafos que estIverem
rotulados com ele.
0 exemplo dado acIma tambm vale para a . So que na , os
pargrafos so blocos de texto marcados por - HT|L, como H1, P, etc. Em
CSS, por exemplo, para fazer com que todos os blocos de textos marcados com
H1 em um documento HT|L sejam exIbIdos em tamanho 40, basta defInIr a
regra:
H1 {font-size: 40pt},
dentro de uma folha de estIlo aplIcada ao documento. 0bserve que as regras
fIcam declaradas entre chaves.
A lInguagem CSS, que uma lInguagem declaratIva que trabalha com as
- tratandoas como objetos. Por exemplo, cada titulo H1, cada pargrafo
P, cada Imagem |C um objeto. E como objetos, podem ser agrupados de
vrIas maneIras, de modo que, a cada objeto ou grupo de objetos, possam ser
atrIbuidas proprIedades de estIlo defInIdas em regras. Por exemplo, todo objeto P
classIfIcado como 'conteudo' ter fonte cor verde, tamanho 11, espaamento entre
lInhas duplas, alInhamento centralIzado e usar a familIa de fontes HelvtIca, em
cuja ausncIa dever ser substItuida ArIal, ou ento a fonte sansserIf. Em CSS
essa regra fIcarIa como segue:
P.conteudo {
color: green;
font-size: 11pt;
line-height: 24pt;
text-align: center;
font-family: helvetica,
arial, sans-serif}
Caso a regra acIma defInIda seja aplIcada em uma pgIna com
pargrafos P rotulados com o nome conteudo (atrIbuto 'CLASS=conteudo'), eles
sero formatados conforme especIfIcado somente se o - suportar CSS. Caso
o - no o suporte, a estrutura se manter com a aparncIa padro e o
usurIo conseguIr ter acesso Informao estruturada, apesar do meIo de
vIsualIzao maIs restrIto. Ao se usar CSS so necessrIas poucas
modIfIcaes no HT|L. Nesse exemplo, ter que ser Incluido apenas o
atrIbuto CLASS (do HT|L 4) a maIs, nos pargrafos que fazem parte do
conteudo.
No dIficIl perceber que a prIncIpal utIlIdade das folhas de estIlo
a preservao da estrutura do HT|L e um controle bem melhor sobre o seu
aspecto na tela do -. sso sIgnIfIca dIzer que o - mesmo no
utIlIzando todos os recursos grfIcos determInados pelas folhas de estIlo, ter
preservada a estrutura e a Informao. Alm dessa utIlIdade ganhamos
tambm:
0ImInuIo do tamanho do codIgo das pgInas Web;
|aIor controle sobre a apresentao das pgInas a partIr de um
arquIvo central;
AgIlIdade na manuteno e alterao do - das pgInas de
um -, uma vez que somente um documento modIfIcado;
0ImInuIo do tempo de carregamento das pgInas Web;
SImplIcIdade de adequao aos crItrIos de acessIbIlIdade e
usabIlIdade;
|aIor portabIlIdade dos documentos Web.
A expresso em cascata est relacIonada a ordem de aplIcao
das regras, de acordo com crItrIos prestabelecIdos, com objetIvo de
solucIonar possiveIs conflItos entre as regras. 0u seja o efeIto em cascata
nada maIs do que a defInIo de uma para aplIcao da regra de
estIlo ao elemento.
Criando estiIos
Como dIto anterIormente, todo estIlo a ser crIado em CSS
defInIdo como uma regra cuja sIntaxe a ser utIlIzada apresentada a seguIr:
seletor {atributo1:valor; atributo2:valor ...}
Agrupando seletores a sIntaxe fIca como segue:
Procure saber o
que vem a ser
acessIbIlIdade e
usabIlIdade dentro
do contexto da
Web: Qual sua
opnIo sobre o
assunto:
seletor1, seletor2, seletor3 {atributo1:valor}
Em que:
SELET0P o elemento HT|L no qual pode ser aplIcado um estIlo,
geralmente uma tag HT|L sem os sInaIs e (maIor e menor)
ou uma classe. Por exemplo: <P>, <H1>, <FORM>, .minhaclasse;
ATP8UT0 o aspecto especifIco do elemento HT|L ao qual ser
aplIcada a regra. Por exemplo: font, color, background, entre
outros.
7AL0P a confIgurao a ser assumIda pelo atrIbuto. Por exemplo:
letra tIpo arIal, cor azul, fundo verde.
0bservao: AssIm como as - HT|L, as regras CSS tambm no so
sensiveIs a maIusculas e mInusculas.
A seguIr, so apresentados alguns exemplos de algumas regras CSS:
Exemplo que especIfIca que todos os titulos de nivel 1 (- H1) sero exIbIdos
em uma fonte de 24 pontos:
H1 {font-size: 24pt}
Exemplo que especIfIca que todos os titulos de nivel 2 e J (- H2 e HJ)
devero ter tamanho de 20 pontos e cor verde:
H2, H3 {font-size: 20pt; color: green}
Com a fInalIdade de facIlItar a vIsualIzao de todas as declaraes e
certIfIcarse de ter Incluido os sInaIs de pontoevirgula e os colchetes nos devIdos
lugares, possivel InserIr quebras de lInha e espaos em branco dentro da regra,
de acordo com a necessIdade.
Exemplo que especIfIca que os pargrafos aparecero em fonte ArIal, 10 pontos,
cor azul e recuados meIa polegada a partIr da margem esquerda da pgIna:
/*comentrio*/
P {
font-family: Arial;
font-size: 10pt;
color: blue;
margin-left: 0.5in}
0bserve os codIgos acIma e perceba que, quando maIs de um
atrIbuto for defInIdo na regra, devese usar pontoevirgula para separlos.
No entanto, o pontoevirgula facultatIvo no caso de atrIbuto unIco e apos a
declarao da ultIma proprIedade, no caso de maIs de uma. 0utra coIsa que se
percebe, que em CSS o comentrIo escrIto precedIdo por /* e termInado
por */.
Alguns atrIbutos CSS permItem dIversas confIguraes para uma
mesma declarao de regra. Por exemplo, suponhamos que voc queIra
defInIr dIversos aspectos da fonte utIlIzada para - H2, como segue:
H2 {
font-style: italic;
font-weight: bold;
font-size: 18pt;
font-family: 'Times Roman'}
0utra forma de escrever esta mesma declarao utIlIzaro o
atrIbuto para defInIr cada uma dessas formataes, mas de uma so vez,
veja:
H2 {
font: italic bold 18pt 'Times Roman'}
0bserve que os dIversos valores ItlIco, negrIto, 18pt e TImes
Poman foram separados apenas por um espao em branco. Essas regras
abrevIadas com certeza dImInuem o codIgo e o tempo de dIgItao.
Forma de apIicao de FoIhas de EstiIo
As Folhas de EstIlo podem ser aplIcadas de trs dIferentes maneIras
em um documento HT|L. TaIs formas determInaro a abrangncIa dos estIlos:
se afetaro uma parte lImItada do documento, se a todo documento, ou se
Seguem abaIxo
alguns sItes
Interessantes onde
voc poder
procurar saber
maIs sobre CSS:
www.crIarweb.com
/css/
www.html.net/tut
orIaIs/css/
Iro afetar vrIos documentos. Segue, abaIxo, uma breve descrIo e exemplo de
cada uma delas:
7Inculada Quando as regras so declaradas em um arquIvo com a
extenso *.css, a parte do documento HT|L (externo). A vInculao
desse arquIvo feIta por meIo da LNK que deve ser colocada
entre as - HEA0.../HEA0 de cada documento HT|L, sobre o
qual devero ser aplIcadas as regras defInIdas no arquIvo CSS.
Exemplo 21: CodIgo CSS defInIndo estIlos que sero aplIcados a alguns
documentos HT|L crIados at aquI.
H1 {
text-align: center}
H2 {
font-style: italic;
font-weight: bold;
font-size: 18pt;
font-family: 'Times Roman';
color:blue}
P {
font-family: Arial;
font-size: 11pt;
color: blue;
margin-left: 0.5in}
BODY{
background-color: yellow}
Para usar o estIlos defInIdos no arquIvo EstIlos.css, edIte os arquIvos
PrIncIpal.html, ndex.html e, aInda, os quatro arquIvos de exemplo de Insero de
Imagem crIados na prImeIra unIdade deste materIal e Inclua o codIgo abaIxo entre
as - HEA0.../HEA0 de cada um deles, salve e verIfIque o resultado
executandoos.
<LINK REL="stylesheet" HREF="Estilos.css"
TYPE="text/css">
ncorporada Quando as regras so declaradas entre as -
HEA0... /HEA0 no proprIo documento HT|L, marcadas pelas
- STYLE.../STYLE, sendo escrItas da mesma forma que num
CrIe um arquIvo
chamado
EstIlos.css e InsIra
o codIgo CSS dado
no Exemplo 21.
arquIvo CSS externo. Esta forma de aplIcao deve ser utIlIzada
quando se desejar alterar as proprIedades de estIlo de uma
unIca pgIna.
Exemplo 22: CodIgo CSS defInIndo estIlos que sero ser aplIcados somente no
arquIvo PrIncIpal.html.
<STYLE TYPE="text/css">
BODY{background-color: pink}
H1 {color: green }
</STYLE>
FIgura 21: ExIbIo no - FIrefox de vrIas pgInas sobre as quaIs
foram aplIcadas as regras defInIdas no arquIvo EstIlos.css.
EdIte o arquIvo
PrIncIpal.html e
Inclua, entre as
- HEA0...
/HEA0, o
codIgo CSS dado
no Exemplo 22,
salve o arquIvo
e, depoIs,
executeo.
FIgura 22: ExIbIo no - FIrefox da pgIna PrIncIpal.html apos Insero
do codIgo no do Exemplo 22 entre as - HEA0.../HEA0
nLIne Quando as regras so declaradas dIretamente numa
HT|L por meIo, no maIs - - STYLE.../STYLE, mas pelo
atrIbuto STYLE, colocando as regras CSS entre aspas em vez de
colchetes e contInuando a separlas por ponto e virgula. Essa forma
de aplIcao no consIderada uma folha de estIlo proprIamente, j
que no se reaproveIta os estIlos alI defInIdos para outras -. Usar
estIlos desta forma pouco dIferente de usar atrIbutos locaIs.
Exemplo 2J: CodIgo CSS defInIndo estIlo que ser aplIcado como atrIbuto da
H1 dentro de um documento HT|L:
<H1 STYLE ="color: 'green'">
FIgura 2J: ExIbIo no - FIrefox da pgIna ndex.html apos Insero do
codIgo do Exemplo 2J como atrIbuto da H1
62
Como voc pode verIfIcar possivel combInar as formas de
aplIcao, ou seja, utIlIzar uma, duas ou as trs formas ao mesmo tempo. As
formataes defInIdas pelas aplIcaes maIs especifIcas sobrepem as
defInIdas pelas aplIcaes maIs genrIcas, seguIndo a regra de que o maIs
especifIco sobrepe o maIs geral.
PersonaIizao de -
No dIficIl ImagInar sItuaes em que haja necessIdade de se
defInIr varIaes de uma determInada . Por exemplo, consIdere que, no
menu que crIamos, no desejamos que sejam sublInhados os lInks.
Com CSS no fIcamos presos somente aos elementos HT|L para
aplIcar os estIlos. possivel defInIr um nome e com ele crIar uma classe
atrIbuIndolhe as regras desejadas para posterIormente aplIclas a qualquer
elemento HT|L. Segue abaIxo a sIntaxe para o seletor classe:
elemento HTML.minhaclasse {
atributo: valor;
}
Exemplo 24: CodIgo CSS, defInIndo classe de estIlo entre as -
HEA0.../HEA0 da pgIna ndex.html:
<STYLE> TYPE=<"text/css">
A.meuslinks{Text-decoration:none}
</STYLE>
0s lInks, para os quaIs no se deseja o sublInhado, devero receber
o atrIbuto CLASS=meuslInks . 7eja, como deve ser feIta tal classIfIcao:
<A CLASS="meuslinks" HREF = "CorDeFundo.html"
TARGET="principal"> Definição de cor do
fundo da Página Web </A>
AdIcIone o atrIbuto em destaque no codIgo acIma em todos os lInks do
arquIvo ndex.html, com exceo dos lInks que apontam para o sIte da
UFPP.
EdIte o arquIvo
ndex.html e faas
as alteraes
IndIcadas Exemplo
24, salve o arquIvo
e depoIs o execute
para ver o
resultado.
6J
FIgura 24: ExIbIo no - FIrefox da pgIna ndex.html apos utIlIzao
do selector meuslInks codIfIcado no Exemplo 24
Atributos CSS
A seguIr ser apresentada uma lIstagem dos prIncIpaIs AtrIbutos CSS,
com uma breve descrIo de sua funo e seus possiveIs valores.
Fonte: http://www.wJschools.com/
Fundo
AtrIbuto Funo 7alor
background AtrIbuto de atalho que
serve para IndIcar
todos os atrIbutos de
fundo em uma so
declarao

-
background
attachment
ndIca se a Imagem do
fundo da pgIna deve
fIcar fIxa ou no no
fundo da pgIna
scroll/fIxed
background
color
ndIca a cor de fundo
de um elemento

-
background
Image
ndIca uma Imagem de
fundo
url(UPL)/none
background
posItIon
ndIca a posIo InIcIal
de uma Imagem de
fundo
top left/top center/top
rIght/center left/center
center/center rIght/bottom
left/bottom center/bottom
rIght/x y/xpos ypos
background
repeat
ndIca se ou como uma
Imagem de fundo ser
repetIda
repeat/repeatx/repeaty/
norepeat

PesquIse na
Internet exemplos
de aplIcao para
cada um dos
atrIbutos CSS
apresentados aquI.
64
|argIn
AtrIbuto 0escrIo/Funo 7alor
margIn AtrIbuto de atalho que serve para
IndIcar todos os outros atrIbutos
das margens em uma so declarao

margIn
bottom
Ajusta a margem InferIor de um
elemento
auto/length/
margIn
left
Ajusta margem esquerda de um
elemento
auto/length/
margIn
rIght
Ajusta a margem dIreIta de um
elemento
auto/length/
margIn
top
Ajusta a margem superIor de um
elemento
auto/length/

Fonte
AtrIbuto Funo 7alor
font AtrIbutos de atalho
que servem para
IndIcar todos os
outros atrIbutos
para uma fonte em
uma so declarao
-
-

---
--
fontfamIly ndIca o tIpo de
fonte de um
elemento

fontsIze ndIca o tamanho
de uma fonte
xxsmall/ xsmall/ small/
medIum/ large/ xlarge/
xxlarge/ smaller/ larger/
length/
fontstretch Condensa ou
expande o atual
tIpo de fonte
normal/wIder/narrower/
ultracondensed/extra
condensed/condensed/
semIcondensed/semI
expanded/expanded/
extraexpanded/
ultraexpanded
fontstyle ndIca o tamanho
de uma fonte
normal/ItalIc/oblIque
fontvarIant EstIlo de fonte normal/smallcaps
fontweIght ndIca o peso da
fonte de claro a
negrIto
normal/bold/bolder/lIghter/
100/200/J00/400/500/600/
700/800/900

65
0Imenso
AtrIbuto Funo 7alor
heIght Ajusta a altura de um
elemento
auto/length/
lIneheIght Ajusta a dIstncIa entre
lInhas
normal/number/length/
maxheIght Ajusta a altura mxIma de
um elemento
none/length/
maxwIdth Ajusta a largura mxIma
de um elemento
none/length/
mInheIght Ajusta a altura minIma de
um elemento

mInwIdth Ajusta a largura minIma de
um elemento

wIdth Ajusta a largura de um
elemento
auto//length

8orda
AtrIbuto 0escrIo/Funo
border AtrIbuto de atalho que
serve para IndIcar todos os
atrIbutos s quatro bordas
em uma so declarao

-

border
bottom
AtrIbuto de atalho que
atrIbutos da borda InferIor
em uma so declarao
-

border
bottomcolor
Ajusta a cor da borda
InferIor

border
bottomstyle
Ajusta o estIlo da borda
InferIor
-
border
bottom
wIdth
Ajusta a largura da borda
InferIor
thIn/medIum/thIck/
length
bordercolor Ajusta a cor das quatro
bordas, pode ter uma a
quatro cores

borderleft AtrIbuto de atalho que
atrIbutos da borda
esquerda em uma so
declarao

-

borderleft
color
Ajusta cor da borda
esquerda

borderleft
style
Ajusta estIlo da borda
esquerda
-

Seguem abaIxo
alguns sItes
Interessantes onde
voc poder
procurar saber
maIs sobre CSS:
www.crIarweb.com
/css/
www.html.net/tut
orIaIs/css/
66
Texto
AtrIbuto 0escrIo/Funo 7alor
color ndIca a cor de um texto
dIrectIon ndIca a dIreo de um texto ltr/rtl
lIneheIght ndIca a dIstncIa entre as
lInhas
normal/number/
length/
letter
spacIng
Aumenta ou dImInuI o
espao entre os caracters
normal/length
textalIgn AlInha o texto a um
elemento
left/rIght/center/justIf
y
text
decoratIon
AdIcIona decorao ao texto none/underlIne/
overlIne/lInethrough/
blInk
textIndent Pecuo da prImeIra lInha do
pargrafo

8orda (contInuao)
borderleft
wIdth
Ajusta largura da borda
esquerda
thIn/medIum/thIck/
length
borderrIght AtrIbuto de atalho que
atrIbutos da borda dIreIta
em uma so declarao

-

borderrIght
color
Ajusta cor da borda dIreIta
borderrIght
style
dIreIta
-
borderrIght
wIdth
dIreIta
thIn/medIum/thIck/
length
borderstyle Ajusta o estIlo das quatro
bordas, pode ter um a
quatro estIlos
none/hIdden/dotted/
dashed/solId/double/
groove/rIdge/Inset/
outset
bordertop AtrIbuto de atalho que
atrIbutos da borda superIor
em uma so declarao

-

bordertop
color
Ajusta cor da borda
superIor

bordertop
style
superIor
-
bordertop
wIdth
superIor
thIn/medIum/
thIck/length
borderwIdth AtrIbuto de atalho que
serve para IndIcar a
largura das quatro bordas
em uma so declarao,
pode ter um a quatro
valores
thIn/medIum/thIck/
length

67
Chegamos ao trmIno da UN0A0E , lembrando a voc que este
conteudo no apresentou todos os atrIbutos que podem ser confIgurados por meIo
de CSS e que os exemplos apresentados no cobrem todas as aplIcaes possiveIs.
Portanto, eu repIto, se voc gostou e pretende contInuar construIndo pgInas Web,
usando CSS para formatar a apresentao delas, busque maIs Informaes,
acessando tutorIaIs de CSS pela Internet e lendo lIvros sobre o tema e, claro, pondo
em prtIca o ensInamentos adquIrIdos.

Texto (contInuao)
text
transform
Controla as letras de um
elemento, transformandoas
em maIusculas , mInusculas
ou InIcIal maIuscula
none/capItalIze/
uppercase/lowercase
word
spacIng
Aumenta ou dImInuI o
espao entre palavra
normal/length

68
6-
FPEE|AN, ELSA8ETH ; FPEE|AN, EPC.- -- ,
EdItora ALTA 800KS.
Amaral, LuIs Custavo.-- - - - ?,
EdItora N07ATEC.
SIlveIra, |arcelo; Prates, Pubens. - ?, EdItora
N07ATEC.
. Acessado em 11/07/2007.
http://www.async.com.br/-kIko/webdev/html/. Acessado em 11/07/2007.
p. Acessado em
11/07/2007.
. Acessado em
11/07/2007.
http://www.wJ.org/|arkUp/CuIde/Style
http://www.Icmc.usp.br/ensIno/materIal/html/
http://www.maujor.com/tutorIal/joe/cssjoe14.ph
http://www.wJschools.com/default.asp
http://htmlhelp.com/reference/html40/
http://pt.wIkIpedIa.org/wIkI/
www.crIarweb.com/css/
www.html.net/tutorIaIs/css/
http://www.dImap.ufrn.br/-aguIar/LIvros/ConectIva9UsuarIo/glossarIo.ht
ml
http://www.vIphostsystem.com/glossarIo/glossarIo.html
http://www.websItehouse.net/glossarIo.htm
http://www.apostIlando.com.br
69
--?
-
toda arquItetura de rede onde estaes (mIcrocomputadores) executam
aplIcaes clIentes, que se utIlIzam de programas servIdores para transferncIa de
dados do proprIo servIdor ou fazem a comunIcao com outras estaes e suas
aplIcaes clIentes.
CodIgo Padro para o ntercmbIo de nformaes

. CodIgo numrIco usado para representar caracteres em
arquIvos texto em computadores e dIsposItIvos de armazenamento eletronIco de
dados.
-
Um conjunto de Instrues que podem ser entendIdas por um ser humano.
-
Uma sala vIrtual para debates. A pessoa entra e d seus palpItes,
democratIcamente.
Protocolo de transferncIa de arquIvos ( - ). Protocolo

especIalIzado em transferncIa de arquIvos de uma mquIna (servIdor FTP) para
outra (clIente).
Formato de arquIvo para transferncIa de Imagens. SIgla para CraphIcs

nterchange Format, Formato CrfIco ntercambIvel. 0 Interchange da sIgla
sIgnIfIca que o CF um padro que pode ser lIdo por qualquer sIstema. |as, como
trabalha com apenas 256 cores, o formato CF maIs usado para logotIpos e icones.
Para fotos, o padro preferIdo o JPC.
A lInguagem da web, que permIte a movImentao de textos, sons e fIguras de um

mIcro para outro. A palavra hIpertexto foI Inventada em 1965 pelo engenheIro Ted
Nelson, num estudo teorIco sobre escrIta no sequencIal, a transferncIa de textos
entre doIs sIstemas, no na base de um sInal grfIco de cada vez, como fazIa o
telgrafo, mas de blocos InteIros.
Protocolo de transferncIa de textos, ou Hypertext Transfer Protocol. Na rede, o

IdIoma dos browsers. Por Isso, a sIgla HTTP aparece antes de WWW nos endereos,
70
para o sIstema fIcar sabendo que lingua aquela.
?
um IntermedIrIo entre o usurIo e o computador, possIbIlItando uma
Interao grfIca entre ambos. 0 usurIo tem acesso ao computador atravs
de icones, janelas ou botes e o sIstema possuI softwares que mostram
grafIcamente as atIvIdades e tarefas que a mquIna est executando.
Protocolo da Internet ou nternet Protocol. o codIgo numrIco para cada

endereo exIstente na web.
Formato de Imagem ( ).
Elo, lIgao, conexo. Na web um endereo que aparece sublInhado, ou em

uma cor dIferente da cor do resto do texto e que permIte a conexo com um
outro sIte a um sImples clIque do mouse.
Percorrer as pgInas da web.
ntermedIrIo entre o nosso computador e a Internet. Quando acessamos a

Internet, estamos na verdade acessando um provedor que nos conecta com a
Internet.
Conjunto de regras que organIzam e sIncronIzam a comunIcao entre

mquInas, tanto em nivel de software como de hardware.

Processo de gerao de cores, atravs da combInao das cores: vermelho,
verde e azul.
8usca. o mecanIsmo que permIte ao usurIo dIgItar algo que est

procurando e ai o sIstema se encarregar de vasculhar toda a web para
encontrar.
So mInI programas, baseados numa determInada lInguagem (como Java),

que executam determInadas operaes.
No caso da Internet, o provedor uma empresa e o servIdor o ambIente onde

os sItes fIcam hospedados.
Lugar. Embora a gente j tenha se acostumado a chamar uma pgIna da web

71
de sIte, na verdade o sIte o local onde essa pgIna pode ser encontrada na
web.
Protocolo de Controle de TransmIsso/Protocolo nternet (---

).
a sIgla para UnIform Pesource Locator. Uma UPL tem duas partes, separadas por
uma barra dupla. A esquerda dela est o protocolo que deve ser usado na
comunIcao e dIreIta o endereo.

0 lado grfIco da Internet. A Internet a rede, enquanto a WWW, World WIde Web
(teIa de alcance mundIal), a parte vIsivel dela, que podemos acessar e com a qual
podemos InteragIr. 0 nome World WIde Web foI sugerIdo por TIm 8ernersLee em
maIo de 1990.
72

Livro Texto Introducao HTML e CSS.

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Livro Texto Introducao HTML e CSS.

Transféré par

Droits d'auteur :

Formats disponibles

- $ 6

CodIgo Padro para o ntercmbIo de nformaes

Protocolo de transferncIa de arquIvos ( - ). Protocolo

Formato de arquIvo para transferncIa de Imagens. SIgla para CraphIcs

A lInguagem da web, que permIte a movImentao de textos, sons e fIguras de um

Protocolo de transferncIa de textos, ou Hypertext Transfer Protocol. Na rede, o

Protocolo da Internet ou nternet Protocol. o codIgo numrIco para cada

Elo, lIgao, conexo. Na web um endereo que aparece sublInhado, ou em

Percorrer as pgInas da web.

ntermedIrIo entre o nosso computador e a Internet. Quando acessamos a

Conjunto de regras que organIzam e sIncronIzam a comunIcao entre

8usca. o mecanIsmo que permIte ao usurIo dIgItar algo que est

So mInI programas, baseados numa determInada lInguagem (como Java),

No caso da Internet, o provedor uma empresa e o servIdor o ambIente onde

Lugar. Embora a gente j tenha se acostumado a chamar uma pgIna da web

Protocolo de Controle de TransmIsso/Protocolo nternet (---

Vous aimerez peut-être aussi