HTML Completo

Introduo Linguagem HTML
HTML (HyperText Markup Language - Linguagem de Formatao de Hipertexto) fruto do "casamento" dos
padres HyTime e SGML.;
HyTime - Hypermedia/Time-based Document Structuring Language

Hy Time (ISO 10744:1992) - padro para representao estruturada de hipermdia e
informao baseada em tempo. Um documento visto como um conjunto de eventos
concorrentes dependentes de tempo (udio, vdeo, etc.), conectados por webs ou hiperlinks.
O padro HyTime independente dos padres de processamento de texto em geral. Ele
fornece a base para a construo de sistemas hipertexto padronizados, consistindo de
documentos que alicam os padres de maneira particular
SGML - Standard Generalized Markup Language
Padro ISO 8879 de formatao de textos: no foi desenvolvido para hipertexto, mas torna-se
conveniente para transformar documentos em hiper-objetos e para descrever as ligaes.
SGML no padro aplicado de maneira padronizada: todos os produtos SGML tm seu
prprio sistema para traduzir as etiquetas para um particular formatador de texto.
DTD - Document Type Definition - define as regras de formatao para uma dada
classe de documentos. Um DTD ou uma referncia para um DTD deve estar contido
em qualquer documento conforme o padro SGML.
Portanto, HTML definido segundo um DTD de SGML.

Todo documento HTML apresenta elementos entre parnteses angulares (< e >); esses elementos so as etiquetas
(tags) de HTML, que so os comandos de formatao da linguagem. A maioria das etiquetas tem sua correspondente
de fechamento:
<etiqueta>...</etiqueta>
Isso necessrio porque as etiquetas servem para definir a formatao de uma poro de texto, e assim marcamos
onde comea e termina o texto com a formatao especificada por ela.
Alguns elementos so chamados vazios, pois no marcam uma regio de texto, apenas inserem alguma coisa no
documento:
<etiqueta>
Todos os elementos podem ter atributos:
<etiqueta atributo1=valor1 atributo2=valor2>...</etiqueta>
HTML um recurso muito simples e acessvel para a produo de documentos. Nestes captulos, ser possvel
aprender grande parte de seus elementos
Edio de documentos HTML

Os documentos em HTML so como arquivos ASCII comuns, que podem ser editados em vi, emacs (que j tem
verso para editar arquivos HTML), textedit, ou qualquer editor simples.
Para facilitar a produo de documentos, existem editores HTML especficos:
Editores de texto fonte
- inserem automaticamente as etiquetas, orientando a insero de atributos e

marcaes.
Editores WYSIWYG
- oferecem ambiente de edio com um resultado final das marcaes.

O documento produzido ter sempre extenso .html (para servidores Web em ambiente UNIX).
Publicao de documentos
Para ter sua homepage necessrio ter uma rea na rede; o primeiro passo criar um diretrio WWW (em letras
maisculas) em sua rea de rede. A partir do momento da criao desse diretrio WWW, o URL:
http://www.icmc.sc.usp.br/~seu login/
passar a ser acessvel pelo servidor. Nesse diretrio deve haver um arquivo index.html.
(Veja mais sobre o arquivo index.html na coluna ao lado.)
A seguir, certifique-se de que sua rea e o diretrio WWW dentro dela estejam com permisso de leitura para "todo
mundo".
Feito isso, basta contactar os Webmasters para que sua pgina seja referenciada atravs da lista de "pessoas com
pgina", ou da pgina do seu grupo de pesquisa.
Obs.: Estas diretivas se aplicam em particular rede do ICMC; outros sistemas podem ter outras configuraes, bem
diferentes.
Documento bsico e seus componentes

A estrutura de um documento HTML apresenta os seguintes componentes:
<HTML>
<HEAD><TITLE>Titulo do Documento</TITLE></HEAD>
<BODY>
texto,
imagem,
links,
...
</BODY>
</HTML>
As etiquetas HTML no so sensveis caixa. Traduzindo: tanto faz escrever <HTML>, <Html>, <html>,
<HtMl>, ...
Os documentos se dividem em duas sees principais, que veremos a seguir.
A Seo <HEAD>
<HEAD> contm informaes sobre o documento; o elemento <TITLE>, por exemplo, define um ttulo, que
mostrado no alto da janela do browser. Nesta pgina, por exemplo, est definido assim:
<HEAD><TITLE>Documento basico em HTML</TITLE></HEAD>
Todo documento WWW deve ter um ttulo; esse ttulo referenciado em buscas pela rede, dando uma identidade
ao documento.
sugerido que os ttulos dos documentos sejam sugestivos, evitando-se, portanto, ttulos como "Introducao". De
preferncia, os ttulos no devem conter acentos ou outros caracteres especiais (eles no sero mostrados
corretamente pelos sistemas de janela em algumas plataformas).
Alm do ttulo, HEAD contm outras informaes que podem ser recuperadas por robs de pesquisa na Internet;
esses campos de informao facilitam a classificao do documento em catlogos de busca, entre outras aplicaes.
A Seo <BODY>
Tudo que estiver contido em <BODY> ser mostrado na janela principal do browser, sendo apresentado ao leitor.
<BODY> pode conter cabealhos, pargrafos, listas, tabelas, links para outros documentos, e imagens.
Veja um documento bsico em HTML.
<BODY> tem alguns atributos de apresentao que so aplicados ao documento
Atributos gerais de um documento

Como visto anteriormente (documento bsico e seus componentes), <HEAD> contm informaes sobre o
documento. Alm de <TITLE>, existem diversos outros campos de informao, sendo os campos <META> os mais
usados.
Campos <META>
Os campos <META> tm dois atributos principais:
NAME, indicando um nome para a informao
HTTP-EQUIV, que faz uma correspondncia com campos de cabealho do protocolo HTTP; a informao
desse campo pode ser lida pelos browsers, e provocar algumas aes.
<HEAD>
<TITLE>Titulo do Documento</TITLE>
<META NAME="nome" CONTENT="valor">
<META HTTP-EQUIV="nome" CONTENT="valor">
</HEAD>
Este documento, por exemplo, tem as seguintes informaes:
<HEAD>
<TITLE>Atributos de documentos em HTML</TITLE>
<meta name=Author content=Maria Alice Soares de Castro
(masc@icmc.sc.usp.br)>
<META NAME=Description CONTENT=Tutorial basico-avancado para suporte `a
editoracao de documentos Web.>
<META NAME=KeyWords CONTENT=HTML, WWW, Webpublishing>
<META NAME=Editor CONTENT=W3e - 5.22c>
</HEAD>
Alguns desses atributos so inseridos automaticamente pelos editores.
Um exemplo de uso do atributo HTTP-EQUIV promover a mudana automtica de pginas. Veja este exemplo
(funciona com Netscape, Internet Explorer 2.0 em diante, e Mosaic 2.0 em diante - o Mosaic avisa que um novo
documento estar sendo carregado automaticamente e pede sua permisso para faz-lo)
Agora que voc voltou do exemplo, veja como esse efeito conseguido:
<HEAD>
<TITLE> ... </TITLE>
<META HTTP-EQUIV="Refresh" CONTENT="segundos; URL= pagina.html">
</HEAD>
onde:
pagina.html
a pgina a ser carregada automaticamente
segundos
o nmero de segundos passados at que a pgina indicada seja carregada.
Como foi comentado no exemplo, o efeito interessante, mas para que serve? Se no pensamos em uma finalidade
til para esse efeito, camos na tentao de us-lo toa.
A aplicao mais utilizada a atualizao automtica de um documento que, por exemplo, tenha uma foto produzida
por uma cmara de vdeo: pode-se forar, com o refresh, a atualizao dessa pgina, mostrando para o leitor sempre
uma imagem mais atual de algum evento sendo focalizado pela cmara. Outra utilizao em chats, ou em
pginas que desviem a navegao por documentos desenvolvidos para browsers avanados.
Atributos de <BODY>
Atravs de atributos de <BODY>, podemos definir cores para os textos, links e para o fundo das pginas, bem como
uma imagem de fundo (marca dgua):
<BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" ALINK="#rrggbb"
VLINK="#rrggbb" BACKGROUND="URL">
onde:
BGCOLOR
cor de fundo (padro: cinza ou branco)

TEXT
cor dos textos da pgina (padro: preto)

LINK
a cor dos links (padro: azul)

ALINK
cor dos links, quando acionados (padro: vermelho)

VLINK
cor dos links, depois de visitados (padro: azul escuro ou roxo)
Seus valores so dados em valores hexadecimais, equivalentes a cores no padro RGB (Red,
Green, Blue). Existem tabelas de cores com esses valores, mas grande parte dos editores j
oferece uma interface bem amigvel atravs da qual escolhemos as cores desejadas, sem nos
preocuparmos com nmeros esdrxulos tais como #FF80A0.
Browsers que seguem a definio de HTML 3.2 tambm aceitam 16 nomes de cores, tirados
da paleta VGA do Windows - por exemplo, podemos escrever BGCOLOR="BLUE". Porm,
browsers mais antigos no apresentaro as cores indicadas.
Este documento tem a seguinte definio de atributos gerais:
<BODY BGCOLOR="#FFFFFF" LINK="#008000" VLINK="#000000" ALINK="#FFFF00">
BACKGROUND
indica o URL da imagem a ser replicada no fundo da pgina, como uma marca dgua. Veja o
exemplo de uma pgina cuja imagem de fundo .
Cabealhos
H seis nveis de cabealhos em HTML, de <H1> a <H6>:
<H1>Este um cabealho de nvel 1</H1>
Esses cabealhos so mostrados da seguinte forma:
Este um cabealho de nvel 1

Os cabealhos no podem ser aninhados, isto :

<H2>Este <H1>um cabealho de nvel 1</H1> dentro de um cabealho de nvel
2</H2>
Embora em alguns browsers esse aninhamento possa dar um resultado (por exemplo,
Este
um cabealho de nvel 1
dentro de um cabealho de nvel 2
), o aninhamento de cabealhos no previsto pela definio de HTML.
bom notar que o ttulo do documento no precisa ter necessariamente o mesmo texto do cabealho principal.
Os cabealhos tm atributos de alinhamento:
<H2 ALIGN=CENTER>Cabealho centralizado</H2>
Cabealho centralizado
<H3 ALIGN=RIGHT>Cabealho alinhado direita</H3>
Cabealho alinhado direita

<H4 ALIGN=LEFT>Cabealho alinhado esquerda (default)</H4>
Cabealho alinhado esquerda (default)
Separadores
Como vimos no primeiro exemplo, as quebras de linha do texto fonte no so significativas na apresentao de
documentos em HTML. Para organizar os textos, precisamos de separadores, apresentados aqui.
Quebra de linha
Quando queremos mudar de linha, usamos o elemento <BR>. Isso s necessrio quando queremos uma quebra de
linha em determinado ponto, pois os browsers j quebram as linhas automaticamente para apresentar os textos.
Com sucessivos <BR>, podemos inserir diversas linhas em branco nos documentos. Esse elemento tem um atributo
especial, que ser apresentado no item sobre insero de imagens.
Pargrafos
Para separar blocos de texto, usamos o elemento <P>:
Pargrafo 1;<P>Pargrafo 2.
que produz:
Pargrafo1;
Pargrafo2.
Combinando pargrafos e quebras de linha, temos:
Pargrafo 1;<br> linha 1 do pargrafo 1, <br>linha 2 do pargrafo
1.<P>Pargrafo 2;<br> linha 1 do pargrafo 2, <br>linha 2 do pargrafo 2.
O resultado da marcao acima :
Pargrafo 1;
linha 1 do pargrafo 1,
linha 2 do pargrafo 1.
Pargrafo 2;
linha 1 do pargrafo 2,
linha 2 do pargrafo 2.
<P> tem atributo de alinhamento, como os cabealhos:
<P ALIGN=CENTER>Assim como os trens, as boas idias s vezes chegam com

atraso. <BR>(Giovani Guareschi)</P>
Assim como os trens, as boas idias s vezes chegam com atraso.
(Giovani Guareschi)
<P ALIGN=RIGHT>Como diz o provrbio chins: melhor passar por ignorante
uma vez do que permanecer ignorante para sempre.</P>
Como diz o provrbio chins: melhor passar por ignorante uma vez do que permanecer ignorante para sempre.
<P ALIGN=LEFT>Este o alinhamento padro (default), e por isso no vou
colocar nenhuma frase especial.</P>
Este o alinhamento padro (default), e por isso no vou colocar nenhuma frase especial.
Linha Horizontal
<HR> insere uma linha horizontal:
Essa linha tem diversos atributos, oferecendo resultados diversos.
<HR SIZE=7> insere uma linha de largura 7 (pixels):
<HR WIDTH=50%> insere uma linha que ocupa 50% do espao disponvel:
<HR WIDTH=30% ALIGN=RIGHT NOSHADE> insere uma linha de comprimento 30% (do espao
disponvel), alinhada direita, sem efeito tridimensional:
<HR SIZE=30 WIDTH=2 ALIGN=LEFT> insere uma linha de largura 30, comprimento 2, alinhada
esquerda:
Listas em HTML
H vrios tipos de listas em HTML, sendo estas as mais usadas e corretamente apresentadas pelos browsers:
Listas de Definio
Estas listas so chamadas tambm Listas de Glossrio, uma vez que tm o formato:
<DL>
<DT>termo a ser definido
<DD>definio
<DD>definio
</DL>
Que produz:
termo a ser definido

definio
definio
Este tipo de lista muito utilizado para diversos efeitos de organizao de pginas, por permitir a tabulao do texto.
Um exemplo so os ndices de navegao presentes nas pgi nas deste tutorial; outro exemplo a lista composta
abaixo:
<DL>
<DT>Imperadores do Brasil:
<DD>D. Pedro I
<DL>
<DD>Nome completo: Pedro de Alcntara Francisco Antnio Joo Carlos Xavier
de Paula Miguel Rafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de
Bragana e Bourbon
</DL>
<DD>D. Pedro II
<DL>
<DD>Nome completo: Pedro de Alcntara Joo Carlos Leopoldo Salvador Bibiano
Francisco Xavier de Paula Leocdio Miguel Gabriel Rafael Gonzaga
</DL>
</DL>
Imperadores do Brasil:
D. Pedro I
Nome completo: Pedro de Alcntara Francisco Antnio Joo Carlos Xavier de Paula Miguel
Rafael Joaquim Jos Gonzaga Pascoal Cipriano Serafim de Bragana e Bourbon
D. Pedro II
Nome completo: Pedro de Alcntara Joo Carlos Leopoldo Salvador Bibiano Francisco
Xavier de Paula Leocdio Miguel Gabriel Rafael Gonzaga
http://www.icmc.sc.usp.br/
manuals/HTML/
arquivo: listas.html
Listas no-numeradas
So equivalentes s listas com marcadores do MS Word:
<UL>
<LI>item de uma lista
<LI>item de uma lista, que pode ser to grande quanto se queira, sem que seja
necessrio se preocupar com a formatao das margens de texto
<LI>item
</UL>
item de uma lista
item de uma lista, que pode ser to grande quanto se queira, sem que seja necessrio se preocupar com a
formatao das margens de texto
item
A diferena est na mudana dos marcadores, assinalando os diversos nveis de listas compostas:
<UL>
<LI>Documentos bsicos
<LI>Documentos avanados
<UL>
<LI>formulrios
<UL>
<LI>CGI
</UL>
<LI>contadores
<LI>relgios
</UL>
<LI>Detalhes sobre imagens
</UL>
Documentos bsicos
Documentos avanados
formulrios
CGI
contadores
relgios
Detalhes sobre imagens
Segundo o HTML 3.2, essa lista pode ter marcadores diferentes, indicados atravs do atributo TYPE, que assume os
valores CIRCLE, SQUARE e DISC (default):
<UL TYPE=CIRCLE>
<LI>um item
<LI>mais um item
</UL>
um item
mais um item
Cada item tambm pode ter seu atributo especfico:
<UL>
<LI TYPE=DISC>um item
<LI TYPE=CIRCLE>mais um item
<LI TYPE=SQUARE>ltimo item
</UL>
um item
mais um item
ltimo item
Observao 1: Boa parte dos editores HTML (WYSIWYG ou no), insere marcaes que no existem
em listas. Exemplos tpicos so </DD>, </DT> ; e </LI>. Porm, como essas etiquetas no so
reconhecidas pelos browsers, no causam efeito colateral algum nos documentos.
Observao 2: Nestes exemplos, o texto fonte aparece tabulado apenas para efeito de melhor
visualizao, uma vez que j foi visto que os espaos em branco e tabulaes originais no tm efeito no
documento final.
manuals/HTML/
manuals/HTML/
Observao 3: Se voc no est vendo diferena alguma entre as listas comuns e as que tm atributos
de HTML 3.2, isso se deve ao fato de seu browse r no estar reconhecendo esses atributos como
vlidos. Trata-se de um browser de verso antiga. Isso deve ser pensado quando usamos atributos mais
recentes: nem todo usurio poder ver o resultado das novas marca&cced il;es.
Listas Numeradas
<OL>
<LI>item de uma lista numerada
<LI>item de uma lista numerada, que pode ser to grande quanto se queira, sem
que seja necessrio se preocupar com a formatao das margens de texto
<LI>item de lista numerada
</OL>
1.
2.
item de uma lista numerada

item de uma lista numerada, que pode ser to grande quanto se queira, sem que seja necessrio se
preocupar com a formatao das margens de texto
3. item de lista numerada
Estas listas no apresentam numerao em formato 1.1, 1.2 etc., quando compostas:
1. Documentos bsicos
2. Documentos avanados
1. formulrios
1. CGI
2. contadores
3. relgios
2. Detalhes sobre imagens
Porm, atravs do atributo TYPE (HTML 3.2), pode-se lidar com a numerao dos itens:
<OL TYPE=I>
<LI>Documentos bsicos
<LI>Documentos avanados
<OL TYPE=a>
<LI >formulrios
<OL TYPE=i>
<LI>CGI
</OL>
<LI>contadores
<LI>relgios
</OL>
<LI>Detalhes sobre imagens
</OL>
I. Documentos bsicos
II. Documentos avanados
a. formulrios
i. CGI
b. contadores
c. relgios
III. Detalhes sobre imagens
Ainda segundo HTML 3.2, o atributo START pode indicar o incio da numerao da lista:
<OL START=4 TYPE=A>
<LI>um item
<LI>outro item
<LI>mais um item
</OL>
D. um item
E. outro item
F. mais um item
manuals/HTML/
Listas e sub-listas
As listas podem ser aninhadas. Por exemplo:
<DL>
<DD>definio
<OL>
<UL>
<LI>item de uma lista
</UL>
</OL>
<DD>definio
</DL>

definio
1. item de uma lista numerada
item de uma lista

definio
Formatao de textos e caracteres

H dois tipos de formatao em HTML: lgico e fsico. Os efeitos de apresentao na tela so os mesmos: o motivo
da distino entre eles se deve idia bsica de independncia entre especificao e apresentao.
Quando formatamos um trecho de texto como cabealho de nvel 1, no explicitamos se esse tipo de cabealho deve
ser em alguma fonte determinada, em um tamanho determinado, justificado esquerda ou direita, ou centralizado.
Esses detalhes de apresentao so deixados para o browser - o dispositivo de apresentao do documento - que
pode ser configurado de acordo com o leitor (usurio final).
Desse modo, alm de facilitar enormemente o trabalho de quem escreve os documentos, a linguagem garante a
uniformidade de apresentao de cabealhos, pargrafos, listas, etc.
A formatao lgica segue o significado lgico do texto marcado: um endereo de e-mail, uma citao etc. Sua
apresentao final varia conforme o browser, podendo oferecer resultados mais ricos.
A formatao fsica especifica explicitamente o estilo que se quer para o texto: itlico, grifado etc. Sua apresentao
final no sofre grandes variaes.
Blocos de texto
HTML oferece as seguintes formataes de blocos de texto:
<PRE>
Apresenta o texto na mesma maneira em que foi digitado, mantendo quebras de linha e tabulaes:
<pre>uma linha
aqui,
outra ali,
etc.</pre>
Resulta em:
uma
linha
aqui,
outra ali,
etc.
Uma vez que <PRE> mantm o texto original, no se deve forar espaos com essa marcao dentro de outra
marcao que j apresente tabulaes e espaos especficos.
At o momento, somente como uso de <PRE> possvel gerar pargrafos com texto justificado esquerda e
direita.
Veja este exemplo, que apresenta tambm alguns problemas com o uso de <PRE>.
<BLOCKQUOTE>
usado para citaes longas:
<blockquote>A massa do Sol arqueia o espao-tempo de tal maneira que, ainda
que a Terra siga uma trajetria reta no espao-tempo quadridimensional,
parece-nos que se desloca em rbita circular no espao
tridimensional.</blockquote> (Stephen W. Hawking, Uma Breve Histria do
Tempo)
A massa do Sol arqueia o espao-tempo de tal maneira que, ainda que a Terra siga uma
trajetria reta no espao-tempo quadridimensional, parece-nos que se desloca em rbita
circular no espao tridimensional.
(Stephen W. Hawking, Uma Breve Histria do Tempo)
<ADDRESS>
Usado para formatar endereos E-mail e referncias a autores de documentos:
Envie crticas e sugestes para <address>masc@icmc.sc.usp.br </address>

Envie crticas e sugestes para
masc@icmc.sc.usp.br
Formatao de frases
Como visto anteriormente (em Formatao de Textos e Caracteres), HTML permite dois tipos de formatao: lgico
e fsico; aqui veremos as formataes mais utilizadas:
Estilos Lgicos
<CITE>
Para ttulos de livros, filmes, e citaes curtas. Exemplo:

Assisti Guerra nas Estrelas umas oito vezes!
<CODE>
Para indicar trechos de cdigo de programas. Exemplo:

for (x=0); cl &&(!feof(stdin)); x++));
<DFN>
Indica definio de uma palavra, em geral apresenta o texto em itlico. Exemplo:

CERN: Centre dstudes et Recherches Nucleaires
<EM>
nfase, tambm normalmente apresentado em itlico. Exemplo:

preciso pesquisar muito para encontrar o termo exato.
<KBD>
Indica uma entrada via teclado. Exemplo:

Para ler mensagens recebidas, digite pine -i
<SAMP>
Indica uma seqncia de caracteres, por exemplo uma mensagem de erro ou um resultado.
Exemplo:
O resultado do primeiro applet : Hello, World!
<STRONG>
Forte nfase, mostrado normalmente em negrito. Exemplo:

Antes de enviar um e-mail, confira o campo Subject:!
<VAR>
Indica variveis, ou valores que o usurio dever escrever; geralmente mostrado em itlico.
Exemplo:
No campo Login, escreva guest.
Estilos Fsicos
<B>
Quando disponvel no browser, mostrado em negrito (em alguns browsers, pode aparecer
sublinhado)
<I>
Itlico (em alguns casos, caracteres apenas inclinados)

<TT>
Tipo teletype - fonte de espaamento fixo.

<U>
Sublinhado; deve ser usado com cuidado, pois confunde-se com a apresentao de links.
<STRIKE>
ou <S>
Frase riscada.
<BIG>
Fonte um pouco maior.

<SMALL>
Fonte um pouco menor.

<SUB>
Frase em estilo ndice, como em H2O.

<SUP>
Frase em estilo expoente, como em Km2.
Caracteres Especiais
HTML permite que caracteres especiais sejam representados por sequncias de escape, indicadas por trs partes: um
& inicial, um nmero ou cadeia de caracteres correspondente ao caracter desejado, e um ; final.
Quatro caracteres ASCII - <, >, e & tm significados especiais em HTML, e so usados dentro de documentos
seguindo a correspondncia:
Entidade
Caracter
<
<
>
>
&
&
Outras sequncias de escape suportam caracteres ISO Latin1. Temos aqui uma tabela com os caracteres mais
utilizados em Portugus:
Entidade
Caracter
Entidade
Caracter
á
Á
â
Â
à
À
ã
Ã
ç
Ç
é
É
ê
Ê
í
Í
ó
Ó
ô
Ô
õ
Õ
ú
Ú
ü
Ü
Como vemos, as sequncias de escape so sensveis caixa.

Ao usar caracteres acentuados, pode-se inserir uma indicao do esquema de codificao ISO Latin1, escrevendo:
<HTML>
<HEAD>
<TITLE>...</TITLE>
<META HTTP-EQUIV="Content-Type"
CONTENT="text/html; charset=ISO-8859-1">
</HEAD>
...
Existem alguns smbolos que vm sendo incorporados ao conjunto de caracteres reconhecidos em HTML 3.2. Por
exemplo, ©, que o smbolo , ® para , e § para .
Tambm se pode usar seqncias com cdigos ASCII, por exemplo:
¿Qu pasa, seor?
Qu pasa, seor?
Cores e Fontes
Cores
As cores so introduzidas atravs do elemento <FONT>, usando o sistema RGB para
cores (da mesma forma que vimos para cores de documentos):
<FONT COLOR="#rrggbb">Texto</FONT>
Assim, um trecho de texto pode ter uma cor diferente da definio geral de cores, feita
atravs dos atributos de <BODY>.
Tamanho
A formatao
<FONT SIZE=tamanho_da_letra>Texto</FONT>
permite que o autor do documento altere o tamanho das letras em trechos especficos
de texto. O tamanho bsico dos textos 3. Podemos indicar tamanhos relativos a esse,
por exemplo:
<FONT SIZE=+2>Letra maior</FONT>
Letra normal
<FONT SIZE=-2>Letra menor</FONT>
Letra maior Letra normal Letra menor

Fontes
Uma evoluo que permite a escolha da fonte para os textos, o atributo FACE:
<FONT FACE=fonte_da_letra>Texto</FONT>
Por exemplo:
<FONT FACE=Times COLOR="#0000AA">Fonte Times azul</FONT>
FonteTimesazul
<FONT FACE=Arial COLOR="#00AA00">Fonte Arial
verde</FONT>
Fonte Arial verde
<FONT FACE=Courier COLOR="#AA0000">Fonte Courier
vermelha</FONT>
FonteCouriervermelha
Blink
Blinks so um perigo!
A formatao <BLINK>frase</BLINK> foi uma das primeiras inovaes introduzidas pelo Netscape. O perigo
de se usar o BLINK que, se sua pgina j apresenta cores, desenhos, cabealhos, todos efeitos que chamam a
ateno do leitor, o BLINK ser ainda mais um fator chamativo, o que causa um efeito final cansativo e confuso.
Evite usar o BLINK; ao us-lo, aplique somente em pequenos detalhes (palavras ou flechinhas), nunca em grande
nmero, muito menos em frases inteiras ou cabealhos, como aqui!
E, se voc j est ficando neurtico com o pisca-pisca dos exemplos de BLINK desta pgina, melhor mudar para
outro assunto! ;-)
Marquee
possvel obter o efeito de animao de texto, atravs da formatao <MARQUEE>.
<MARQUEE BEHAVIOR=efeito>Texto</MARQUEE>
Atributos de largura e direo do efeito permitem diversas apresentaes diferentes. Por exemplo (o efeito s visto
atravs do Internet Explorer):
<MARQUEE
BEHAVIOR=SCROLL WIDTH=30%>Texto</MARQUEE>
<MARQUEE
BEHAVIOR=SLIDE DIRECTION=RIGHT>Texto</MARQUEE>
<MARQUEE
BEHAVIOR=SLIDE DIRECTION=LEFT>Texto</MARQUEE>
Ligaes (uso de links)

Com HTML possvel fazermos ligaes de uma regio de texto (ou imagem) a um outro documento. Nestas
pginas, temos visto exemplos dessas ligaes: o browser destaca essas regies e imagens do texto, indicando que
so ligaes de hipertexto - tambm chamadas hypertext links ou hiperlinks ou simplesmente links.
Para inserir um link em um documento, utilizamos a etiqueta <A>, da seguinte forma:
<A HREF = "arq_dest">ncora</A>
onde:
arq_dest
o URL do documento de destino;
ncora
o texto ou imagem que servir de ligao hipertexto do documento sendo apresentado para
o documento de destino.
Caminhos para o documento de destino

Caminho relativo
O caminho relativo pode ser usado sempre que queremos fazer referncia a um documento que esteja no mesmo
servidor do documento atual.
Atravs do campo Location do browser, vemos que este documento est localizado em um diretrio
/manuals/HTML/ do servidor www.icmc.sc.usp.br. Para escrevermos um link deste documento para o
documento doc2.html no diretrio /manuals/HTML/exemplos, tudo que precisamos fazer escrever:
Veja o <A HREF="exemplos/doc2.html">exemplo de caminho relativo</A>.
que apresentado como:
Veja o exemplo de caminho relativo.
Da mesma forma, se quisermos um link deste documento para um outro que esteja em diretrio diferente neste
mesmo servidor, escrevemos, por exemplo:
<A HREF="/Portugues/ICMC/">Instituto de Cincias Matemticas e de
Computao</A>
que produz o link: Instituto de Cincias Matemticas e de Computao

Para usar links com caminhos relativos preciso, portanto, conhecer a estrutura do diretrio do servidor no qual
estamos trabalhando.
O esquema do diretrio de nosso servidor est disponvel no Relatrio no. 35 e no relatrio do servidor Web (em
final de preparao).
Caminho absoluto
Utilizamos caminho absoluto quando desejamos referenciar um documento que esteja em outro servidor, por
exemplo:
<A HREF="http://www.intermidia.icmc.sc.usp.br/">Grupo Intermdia</A>
que oferece um link para um documento no servidor WWW do Grupo de Pesquisa Intermdia:
Grupo Intermdia
Com a mesma sintaxe, possvel escrever links para qualquer servidor de informaes da Internet.
Ligaes para trechos de documentos

Alm do atributo href, que indica um documento destino de uma ligao hipertexto, o elemento A possui um
atributo NAME que permite indicar um trecho de documento como ponto de chegada de uma ligao hipertexto.
Neste documento temos diversos pargrafos marcados como chegada de um link, por exemplo:
<h3><A NAME="relativo">Caminho relativo</A></h3>
que faz com que a ncora Caminho relativo seja o destino de um link. Se escrevermos:
Leia sobre <A HREF="#relativo">caminhos relativos</A>.
teremos uma ligao hipertexto para um trecho deste mesmo documento:
Leia sobre caminhos relativos.
Da mesma forma, construmos links para trechos determinados de outros documentos, desde que saibamos quais
trechos do documento destino esto marcados para ponto de chegada de um link. Por exemplo:
So Carlos um <A HREF= "/Portugues/Sao_Carlos/histprog.html#polo">plo de
alta tecnologia</A>.
que produz um link para um pargrafo marcado no arquivo histprogr.html sobre a cidade de So Carlos, no
diretrio /Portugues/Sao_Carlos/:
So Carlos um plo de alta tecnologia.
Insero de Imagens
O elemento IMG insere imagens que so apresentadas junto com os textos. Um atributo SRC deve estar presente, da
seguinte forma:
<IMG SRC="URL_imagem">
onde URL_imagem o URL do arquivo que contm a imagem que se quer inserir; pode ser referenciada uma
imagem que esteja em um outro servidor (o que, logicamente, no conveniente).
Assim, escrevendo:
<IMG SRC = "/icones/newred.gif">
inserimos a figura no documento.
As imagens usadas na Web so armazenadas em arquivos com extenso *.gif, *.xbm, *.jpg (ou *.jpeg).
Atributos bsicos
ALT
Indica um texto alternativo, descrevendo brevemente a imagem, que apresentado no lugar da imagem nos browsers
texto, ou quando se desabilita o carregamento de imagens em browsers grficos. recomendvel que esteja sempre
presente.
<IMG SRC="URL_imagem" ALT="descrio_da_imagem">
<IMG SRC="/icones/newred.gif" ALT="Novo!"> apresentado nos browsers grficos assim: - e, nos

browsers texto, assim: [Novo!]
WIDTH e HEIGHT
Atributos de dimenso da imagem, em pixels. Grande parte dos editores HTML coloca automaticamente os valores
destes atributos, quando indicamos a insero de uma imagem.
<IMG SRC="imagem" ALT="descrio" WIDTH="largura" HEIGHT="altura">
Uma das vantagens de se usar esses atributos que o browser pode montar mais rapidamente as pginas, por saber
de antemo o espao que dever ser reservado a elas.
BORDER
Quando uma frase marcada como ncora de um link, ela se apresenta sublinhada; quando uma imagem faz as
vezes de ncora, ganha uma borda que indica sua condio. Por exemplo: bordaborda
Porm, por questes de apresentao, nem sempre interessa termos essa borda ao redor da imagem. Assim, com o
atributo BORDER, podemos controlar esse detalhe.
Se quisermos uma borda maior... bordaborda

<A HREF="URL"><IMG SRC="imagem" ALT="descrio" BORDER=4></A>
Se quisermos uma imagem sem borda... bordaborda
<A HREF="URL"><IMG SRC="imagem" ALT="descrio" BORDER=0></A>
ALIGN
<IMG SRC="imagem" ALT="descrio" ALIGN=alinhamento>
Existem tambm atributos de alinhamento, que produzem os seguintes resultados:
ALIGN=TOP Alinha o texto adjacente com o topo da imagem, embora com linhas compridas o resultado no seja
muito bom.
ALIGN=MIDDLE Alinha o texto adjacente com o meio da imagem, embora com linhas compridas o resultado
no seja muito bom
ALIGN=BOTTOM Alinha o texto adjacente com a parte de baixo da imagem (default)
ALIGN=RIGHT Alinha imagem direita, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da
imagem.
ALIGN=LEFT Alinha imagem esquerda, e tudo o que houver ao redor (texto, outras imagens) a partir do topo da
imagem.
Outros alinhamentos procuram posicionar as imagens com maior preciso com relao ao texto circundante:
TOPTEXT, ABSMIDDLE e ABSBOTTOM.
Para ter duas imagens, uma em cada margem, numa mesma linha, escreva:
<IMG align=left SRC="imagem.gif" alt="imagem"><IMG align=right
SRC="imagem.gif" alt="imagem">...e se pode escrever vontade entre as
imagens!
Isso resulta em:
...e se pode escrever vontade entre as imagens!
Um detalhe surgido com o alinhamento de imagens foi a necessidade de se liberar o texto desse alinhamento. Ou
seja:
Suponhamos um texto mais ou menos curto, que desejamos colocar aqui, com a imagem ilustrativa...
...mas gostaramos que este trecho j estivesse abaixo da imagem! De acordo com o comprimento da primeira frase,
no seria possvel usar o alinhamento TOP.
Para conseguir isso, seria necessrio incluir diversos <BR> consecutivos, inserindo linhas em branco; mesmo assim,
o resultado final poderia ser bem pouco elegante. Surgiu, ento, o atributo CLEAR para <BR>.
Com esse atributo, podemos, por exemplo...
...ter um texto posicionado no ponto em que a margem direita fica livre, com
<BR CLEAR=RIGHT>
ou no ponto em que a margem esquerda fica livre, com
<BR CLEAR=LEFT>
Dessa maneira, podemos controlar bem a posio relativa dos textos.
Tambm se pode posicionar o texto no ponto em que ambas as margens esto livres.
Isso conseguido com
<BR CLEAR=ALL>
E, assim, vimos tudo sobre quebras de linha depois de imagens!
ISMAP
Qualquer imagem pode funcionar como uma ncora de link, como vimos no item sobre bordas. ISMAP indica
quando uma imagem deve ser tratada como um mapa clicvel, isto , quando cada pixel de uma imagem pode ser
considerado uma ncora para algum arquivo especfico.
Os mapas sero apresentados com detalhes na seo de assuntos avanados, sob o item Interao.
Molduras de imagem
Para melhorar ainda mais a apresentao das imagens junto com os textos, foram desenvolvidos atributos de
moldura. Estes atributos definem o espao - vertical e horizontal - deixado entre as imagens e os textos circundantes:
<IMG SRC="imagem"
VSPACE=esp_vertical>
<IMG SRC="imagem"
HSPACE=esp_horizontal>
O efeito desses atributos pode ser percebido nos textos abaixo. No primeiro texto, as imagens no tm atributos de
moldura ( fcil notar como o texto fica "grudado" na imagem)
O Instituto de Cincias Matemticas e de Cmoputao (ICMC-USP) formado pelos
Departamentos de Matemtica e de Cincias de Computao e Estatstica. O ICMC originou-se em
1953, como Departamento de Matemtica da Escola de Engenharia de So Carlos (EESC-USP),
fundado por renomados matemticos italianos e brasileiros. Atualmente, o Departamento de Matemtica
oferece
cursos de Licenciatura e Bacharelado em Matemtica em nvel de graduao, alm de um programa de

ps-graduao que inclui mestrado e doutorado na rea de Matemtica. O Departamento de
Computao e Estatstica responsvel pelo curso de Bacharelado em Cincia de Computao, no qual
ingressam 40 alunos por ano. Em nvel de ps-graduao oferece, desde 1975, o programa de mestrado
em Cincias de Computao e Matemtica Computacional e, a partir de agosto de 1995, o programa de
doutorado na mesma rea.
Neste segundo texto so usadas, respectivamente, as formataes:
<IMG SRC="icones/fotoicm.gif" WIDTH="148" HEIGHT="95" ALIGN=left
VSPACE="30">
e
<IMG SRC="icones/smallpos.gif" WIDTH="160" HEIGHT="71" ALIGN=right
HSPACE="30">
O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos

Departamentos de Matemtica e de Cincias de Computao e Estatstica. O ICMC originou-se em
1953, como Departamento de Matemtica da Escola de Engenharia de So Carlos (EESC-USP),
fundado por renomados matemticos italianos e brasileiros. Atualmente, o Departamento de Matemtica
oferece
cursos de Licenciatura e Bacharelado em Matemtica em nvel de graduao, alm de um
programa de ps-graduao que inclui mestrado e doutorado na rea de Matemtica. O
Departamento de Computao e Estatstica responsvel pelo curso de Bacharelado em Cincia
de Computao, no qual ingressam 40 alunos por ano. Em nvel de ps-graduao oferece, desde
1975, o programa de mestrado em Cincias de Computao e Matemtica Computacional e, a
partir de agosto de 1995, o programa de doutorado na mesma rea.
Os dois atributos de moldura podem estar presentes ao mesmo tempo. Vejamos primeiro o texto com a imagem sem
moldura:
"A cultura UNIX comeou a ser apreciada por usurios
brasileiros ainda na dcada de 70, pelos contatos de pesquisadores brasileiros em cursos de
aperfeioamento no exterior - notadamente na Amrica do Norte. O contingente era, contudo, pequeno e
restrito a acadmicos. A disseminao da cutura UNIX no mercado comercial s teve incio com o
advento da dcada de 80."
(Citao de texto encontrado pgina 18 do livro UNIX - Guia do Usurio - Autores: Marcus C. Sampaio,
Jacques P. Sauv e J. Anto B. Moura - McGraw-Hill, 1988)
Abaixo, vemos a aplicao dos dois atributos, atravs da formatao:
<IMG SRC="icones/earth.gif" ALIGN="LEFT" WIDTH="63" HEIGHT="68"

HSPACE="20" VSPACE="20">
"A cultura UNIX comeou a ser apreciada por usurios

brasileiros ainda na dcada de 70, pelos contatos de pesquisadores brasileiros em cursos de
aperfeioamento no exterior - notadamente na Amrica do Norte. O contingente era, contudo, pequeno e
restrito a acadmicos. A disseminao da cutura UNIX no mercado comercial s teve incio com o
advento da dcada de 80."
(Citao de texto encontrado pgina 18 do livro UNIX - Guia do Usurio - Autores: Marcus C. Sampaio,
Jacques P. Sauv e J. Anto B. Moura - McGraw-Hill, 1988)
Imagem Alternativa
Catedral de So Carlos (So Carlos-SP)
O efeito de sobrepor imagens, como visto aqui, conseguido com o atributo LOWSRC.
LOWSRC="imagem1" SRC="imagem2">
<IMG
Para conseguir o efeito, voc precisar trabalhar com duas imagens:

1. a primeira (LOWSRC="imagem1"), que carregada rapidamente na pgina. Ela deve estar em um arquivo
pequeno (por exemplo, a imagem em preto-e-branco);
2. a segunda imagem a ser carregada (SRC="imagem2"), que permanecer na pgina. Deve estar em um
arquivo grande (por exemplo, a imagem colorida).
As duas imagens devem ter as mesmas dimenses! Isso significa que os atributos WIDTH e HEIGTH sero
necessariamente utilizados.
bom lembrar que o efeito pode ser realizado tambm com duas imagens coloridas: o importante que a primeira
imagem a ser carregada esteja em um arquivo bem menor que o da segunda imagem
Tabelas
A formatao de tabelas foi adotada bem antes de sua incluso na definio de HTML. A manipulao de tabelas,
mesmo em editores, trabalhosa; a maior diferena entre tabelas em HTML e em edit ores como o MS Word,
entretanto, o fato das tabelas em HTML serem definidas apenas em termos de linhas e no de colunas. Mas isso
ser percebido no decorrer destas pginas.
As tabelas foram uma grande conquista para os autores de documentos para a Web. Com elas possvel, por
exemplo, termos estas pginas do tutorial organizadas em colunas, sendo uma delas voltada exclusivamente aos
links de navega&cced il;o e observaes. Tabelas implementam um conceito importante de layout: as grades,
segundo as quais organizamos textos e ilustraes de maneira harmoniosa.
Como j foi possvel perceber, as tabelas contm textos, listas, pargrafos, imagens, diversas outras formataes inclusive outras tabelas. Novas verses de HTML e de browsers populares vm acrescentando diversos atributos s
tabelas, e nosso objetivo aqui saber lidar com a maioria desses recursos disponveis.
Elementos bsicos de tabelas

<TABLE>...</TABLE> delimita uma tabela. Um atributo bsico BORDER, que indica a apresentao da
borda.
<TABLE
BORDER="borda">
...
</TABLE>
Ttulos, linhas e elementos

<CAPTION>...</CAPTION>
define o ttulo da tabela

<TR>...</TR>
delimita uma linha

<TH>...</TH>
define um cabealho para colunas ou linhas (dentro de <TR>)

<TD>...</TD>
delimita um elemento ou clula (dentro de <TR>)

Uma tabela simples:
<TABLE BORDER=4>
<CAPTION>Primeiro exemplo</CAPTION>
<TR><TH>Coluna 1</TH><TH>Coluna 2</TH></TR>
<TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR>
<TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR>
</TABLE>
Primeiro exemplo
Coluna 1
linha1, coluna 1
linha 2, coluna 1
Coluna 2
linha 1, coluna 2
linha 2, coluna 2
<HREF=".HTML"Folhas de Estilo
<HREF=".HTML"HTML dinmico
Ttulos compreendendo mais de uma coluna ou linha

possvel englobar colunas e linhas, atravs dos atributos COLSPAN (para colunas) e ROWSPAN (para linhas):
<TABLE BORDER=1>
<TR><TH
COLSPAN=2>Colunas 1 e 2</TH></TR>
<TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR>
<TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR>
ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR>
<TR><TH
<TR><TD>duas linhas</TD></TR>
<TR><TD>tres linhas</TD></TR>
</TABLE>
linha1, coluna 1
linha 2, coluna 1
linha 1, coluna 2
linha 2, coluna 2
uma linha
3 linhas
duas linhas
tres linhas
Neste exemplo, vemos que o cabealho Colunas 1 e 2 compreende duas colunas (COLSPAN=2); o cabealho 3
linhas compreende, por sua vez, 3 linhas (ROWSPAN=3).
Tabelas sem borda

As pginas deste tutorial foram construdas com tabelas sem borda. Para tanto, foi empregada a seguinte delarao:
<TABLE
BORDER="0">
...
</TABLE>
Alinhamentos em tabelas
Este exemplo servir para estudarmos alinhamentos, controle de larguras e espaamento em tabelas:
Prdio principal do ICMSC-USP
O Instituto de Cincias Matemticas de So Carlos (ICMSC-USP)

formado pelos Departamentos de Matemtica e de Cincias de
Computao e Estatstica.
O ICMSC originou-se em 1953, como Departamento de Matemtica
da Escola de Engenharia de So Carlos (EESC-USP), fundado por
renomados matemticos italianos e brasileiros.
Atualmente, o Departamento de Matemtica oferece cursos de

Licenciatura e Bacharelado em Matemtica em nvel de graduao,
alm de um programa de ps-graduao que inclui mestrado e
doutorado na rea de Matemtica.
O Departamento de Computao e Estatstica responsvel pelo
curso de Bacharelado em Cincia de Computao, no qual
Departamento de Computao e ingressam 40 alunos por ano. Em nvel de ps-graduao oferece,
Estatstica (SCE)
desde 1975, o programa de mestrado em Cincias de Computao e
Matemtica Computacional e, a partir de agosto de 1995, o programa
de doutorado na mesma rea.
O contedo informativo, porm a apresentao no agradvel devido disposio do texto na tabela.
Primeiro, vamos mexer com os alinhamentos.
Departamento de Matemtica
(SMA)
Alinhamentos simples
Os alinhamentos padro em tabelas, como podemos ver no exemplo acima, so:
no sentido horizontal: alinhamento esquerda

no sentido vertical: alinhamento no centro da clula
As linhas e clulas podem ter alinhamentos definidos atravs dos atributos:
ALIGN
= alin_horizontal
VALIGN
= alin_vertical
Vejamos como esses alinhamentos funcionam nas clulas:
<TD ALIGN=alin_horizontal>Texto
<TD VALIGN=alin_vertical>Texto
Padro
da clula</TD>
da clula</TD>
ALIGN=L ALIGN=C ALIGN=R

EFT
ENTER
IGHT
VALIGN=
VALIGN=
TOP
MIDDLE VALIGN=
BOTTOM
Obs.: a tabela acima foi feita especialmente para testar os alinhamentos. Uma tabela comum ajusta o tamanho de
suas clulas ao contedo:
Padro
align=left
align=center
align=right
Padro
valign=top
valign=middle
valign=bottom
Padro
Alinhamentos combinados
Uma mesma clula pode ter atributos ALIGN e VALIGN.
<TD ALIGN=alin_horizontal VALIGN=alin_vertical>Texto
da clula</TD>
Por exemplo:
ALIGN=L ALIGN=C ALIGN=R
EFT,
ENTER,
IGHT,
Padro
VALIGN= VALIGN= VALIGN=
BOTTOM TOP
MIDDLE
Alinhamentos de linhas
O alinhamento pode ser aplicado a linhas inteiras, com:
<TR ALIGN=alin_horizontal VALIGN=alin_vertical>Texto
da clula</TR>
Porm, o alinhamento declarado em uma clula prevalece sobre o alinhamento da linha, como se v no exemplo:
center
center
center
TD
bottom
VALIGN=
TD
ALIGN=R
IGHT
bottom
TOP
bottom
Isso pode ser interessante para algumas aplicaes.
J conseguimos mexer um pouco na tabela inicial, inserindo alinhamentos combinados; sero necessrios mais
alguns passos para que a tabela fique realmente "apresentvel" - o exemplo continua nas sees sobre larguras e
espaamentos.
O ICMSC originou-se em 1953, como Departamento de Matemtica
da Escola de Engenharia de So Carlos (EESC-USP), fundado por
Departamento de Matemtica
(SMA)

Departamento de Computao e O Departamento de Computao e Estatstica responsvel pelo
Estatstica (SCE)
curso de Bacharelado em Cincia de Computao, no qual
ingressam 40 alunos por ano. Em nvel de ps-graduao oferece,
desde 1975, o programa de mestrado em Cincias de Computao e
Matemtica Computacional e, a partir de agosto de 1995, o programa
de doutorado na mesma rea.
Atributos de largura
Na seo anterior, foi comentado que uma tabela comum ajusta o tamanho de suas clulas ao contedo. Por
exemplo:
janeiro
fevereiro
maro
abril
maio
junho
Para apresentar uma tabela ocupando determinado espao disponvel na linha, usamos o atributo WIDTH. Esse
atributo pode ser aplicado tambm a linhas e clulas.
Essa largura pode ser definida em porcentagem (do espao disponvel):

WIDTH=x%
ou em pixels:
WIDTH=x
Ex.1: Tabela ocupando 50% do espao disponvel
<TABLE BORDER=1 width=50%>
janeiro
abril
fevereiro
maio
maro
junho
Ex.2: Tabela ocupando 50% do espao disponvel, com uma coluna de 60% do espao disponvel na tabela
<TR>
<TD>janeiro</TD><TD width=60%>fevereiro</TD><TD>maro</TD>
</TR>
<TR>
<TD>abril</TD><TD width=60%>maio</TD><TD>junho</TD>
</TR>
</TABLE>
janeiro
abril
fevereiro
maio
maro
junho
Ex3.: O controle da largura da tabela est limitado dimenso de seu contedo:

<TR>
<TD>janeiro</TD><TD width=1%>fevereiro</TD><TD>maro</TD>
</TR>
<TR>
<TD>abril</TD><TD width=1%>maio</TD><TD>junho</TD>
</TR>
</TABLE>
janeiro
abril
f
e
v
e
rmaro
e
i
r
o
m
a
junho
i
o
Oh-oh...
Alguns editores WYSIWYG no trabalham com atributos de largura. Nestes casos, preciso editar o
arquivo fonte.
De volta ao exemplo inicial, j podemos melhorar um pouco mais nossa tabela. Mantendo os alinhamentos definidos
na seo anterior, aplicaremos atributos de largura:

O ICMSC originou-se em 1953, como Departamento de Matemtica da
Escola de Engenharia de So Carlos (EESC-USP), fundado por renomados
matemticos italianos e brasileiros.
Departamento de
Matemtica (SMA)
Atualmente, o Departamento de Matemtica oferece cursos de Licenciatura

e Bacharelado em Matemtica em nvel de graduao, alm de um
programa de ps-graduao que inclui mestrado e doutorado na rea de
Matemtica.
Departamento de
O Departamento de Computao e Estatstica responsvel pelo curso de
Computao e Estatstica Bacharelado em Cincia de Computao, no qual ingressam 40 alunos por
(SCE)
ano. Em nvel de ps-graduao oferece, desde 1975, o programa de
mestrado em Cincias de Computao e Matemtica Computacional e, a
partir de agosto de 1995, o programa de doutorado na mesma rea.
Ainda faltam detalhes. Um deles evitar que o texto fique grudado nas bordas da tabela; veremos na prxima seo,
sobre espaamentos
Atributos de espaamento
Dois atributos permitem o controle de espaamento em tabelas:
CELLPADDING - espao entre o texto e as bordas da clula

CELLSPACING - espao entre clulas
Tomemos a mesma tabela simples da seo anterior:
janeiro
fevereiro
maro
abril
maio
junho
Ex.1: Espao entre o texto e as bordas
<TABLE BORDER=1
CELLPADDING=20>
janeiro
fevereiro
abril
maio
mar
o
junh
o
Ex.2: Espao entre clulas

<TABLE BORDER=1
janeiro
CELLSPACING=20>
fevereiro
maro
abril
maio
junho
Ex3.: Espao entre texto e bordas, e espao entre clulas

<TABLE BORDER=1
CELLPADDING=20 CELLSPACING=20>
janeiro
fevereiro
mar
o
abril
maio
junho
Assim, damos mais uma mexida na tabela inicial:

Escola de Engenharia de So Carlos (EESC-USP), fundado por
Departamento de
Matemtica (SMA)

Licenciatura e Bacharelado em Matemtica em nvel de graduao, alm
de um programa de ps-graduao que inclui mestrado e doutorado na
rea de Matemtica.
Departamento de
O Departamento de Computao e Estatstica responsvel pelo curso
Computao e
de Bacharelado em Cincia de Computao, no qual ingressam 40
Estatstica (SCE)
alunos por ano. Em nvel de ps-graduao oferece, desde 1975, o
programa de mestrado em Cincias de Computao e Matemtica
Computacional e, a partir de agosto de 1995, o programa de doutorado
na mesma rea.
Como toque final, retiramos a borda:
Departamento de
Matemtica (SMA)
Departamento de

Escola de Engenharia de So Carlos (EESC-USP), fundado por
O Departamento de Computao e Estatstica responsvel pelo curso
Computao e
Estatstica (SCE)
de Bacharelado em Cincia de Computao, no qual ingressam 40

alunos por ano. Em nvel de ps-graduao oferece, desde 1975, o
programa de mestrado em Cincias de Computao e Matemtica
Computacional e, a partir de agosto de 1995, o programa de doutorado
na mesma rea.
Agora j vimos grande parte dos recursos disponveis para manipular tabelas, que permitem produzir bons efeitos de
apresentao.
Extenses de Tabelas
Diversas extenses de tabelas possibilitam a apresentao de efeitos muito bons nas pginas.
Cor de fundo
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10
janeiro
fevereiro
maro
abril
maio
junho
BGCOLOR="#E1FFD9">
Cor de borda
<TABLE BORDER=5 CELLSPACING=5 CELLPADDING=10 BGCOLOR="#E1FFD9"
BORDERCOLOR="#00FF00">
janeiro
fevereiro
maro
abril
maio
junho
Imagem de fundo
<TABLE BORDER=5
BACKGROUND="imagem">
janeiro
fevereiro
maro
abril
maio
junho
Frames
Os frames so divises da tela do browser em diversas telas (ou quadros). Com isso, torna-se possvel apresentar
mais de uma pgina por vez: por exemplo, um ndice principal em uma parte pequena da tela, e os textos
relacionados ao ndice em outra parte.
muito fcil colocar frames em pginas; porm, nem todos os usurios gostam deles. (Eu gosto! Mas refiz o
tutorial usando o recurso tabela, que a alternativ a natural de frames)
Uma pgina com frames tem um texto fonte semelhante a:
<HTML>
<HEAD><TITLE>Assunto X</TITLE></HEAD>
COLS="20%, 80%">
<FRAMESET
<FRAME
SRC="indice1.html">
<FRAME
SRC="apresenta.html" NAME=principal>
<NOFRAME>
<BODY>
<H2>Bem-vindo pgina do assunto X!</h2>
<P>
Bl bl bl bl bl
bl bl bl bl bl
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
A parte FRAMESET define a diviso da pgina em "quadros". Neste exemplo, a pgina ser dividida em duas
colunas, sendo a primeira com 20% do tamanho da tela, e a segunda coluna com os restantes 80% da tela.
Dentro da formatao de FRAMESET, temos os FRAME SRC, que so referncias s pginas que sero
mostradas nos frames definidos
Assim, aqui vemos que a pgina indice1.html ser mostrada na primeira coluna (que ocupar 20% da tela), e
apresenta.html ser mostrada na segunda (ocupando 80% da tela).
[Veja o exemplo]
A formatao de frames inclui tambm uma parte NOFRAME, que mostrada normalmente pelos browsers que no
suportam a apresentao de frames.
Links com Frames

Sempre que se aciona um link dentro de uma pgina, o default (isto , o comportamento padro) que a pgina
referente a esse link seja carregada na mesma janela da pgina anterior. No exemplo visto com fra mes, seguir um
link dentro da janela direita faz com que a pgina apontada seja mostrada ocupando a janela da direita (coluna de
80%):
<HTML>
<HEAD><TITLE>Assunto X</TITLE></HEAD>
<FRAMESET COLS="20%, 80%">
<FRAME SRC="indice1.html">
<FRAME SRC="apresenta.html" NAME=principal>
<NOFRAME>
<BODY>
<H2>Bem-vindo pgina do assunto X!</h2>
<P>
Bl bl bl bl bl
bl bl bl bl bl
</BODY>
</NOFRAME>
</FRAMESET>
</HTML>
Veja no cdigo fonte acima que o frame associado a apresenta.html tem um atributo NAME. Isso faz com que
se possa "direcionar" o frame em que queremos mostrar determinada pgina ao acionarmos um lin k.
No exemplo visto, o arquivo indice1.html tem um link da seguinte forma:
<a href="apresenta2.html" target=principal>Exemplo no.2</a>.
Quando se acionar esse link, a pgina apresenta2.html ser mostrada no frame que denominamos
principal, ou seja: em vez de carregar apresenta2.html na mesma coluna em que est indice1.html,
ela ser mostrada na coluna em que est apresenta.html.
Se voc no entendeu como funciona esse mecanismo de direcionamento, veja o exemplo e teste todos os links para
verificar o que foi dito neste pargrafo, pois a descrio fica muito confusa!! %-/
Composies com Frames

Como j foi possvel observar, FRAMESET tem atributos que definem a diviso da janela do browser em colunas;
essa divio tambm pode ser feita em linhas, e utilizando uma combinao de "framesets" para variadas
apresentaes:
<FRAMESET
COLS="x, y">
<FRAME
SRC="col1.html">
<FRAME
SRC="col2.html">
</FRAMESET>
<FRAMESET
ROWS="x, y">
<FRAME
SRC="lin1.html">
<FRAME
SRC="lin2.html">
</FRAMESET>
<FRAMESET
<FRAME
<FRAMESET
COLS="x, y">
SRC="col1.html">
ROWS="x, y">
<FRAME
SRC="lin1.html">
<FRAME
SRC="lin2.html">
</FRAMESET>
</FRAMESET>
<FRAMESET
<FRAME
<FRAMESET
ROWS="x, y">
SRC="lin1.html">
COLS="x, y">
<FRAME
SRC="col1.html">
<FRAME
SRC="col2.html">
</FRAMESET>
</FRAMESET>
Lembre-se de que os frames fixos no precisam ter nomes, mas os frames que
recebero textos, sim!
O exemplo simples visto at agora segue o modelo da primeira composio (em colunas). As composies com mais
de um frameset precisam ser bem planejadas para funcionarem bem.
Atributos de Frames
At este ponto, vimos os atributos COLS e ROWS (para FRAMESET), SRC e NAME (para FRAME).
Outros atributos permitem um maior controle sobre a apresentao:
Eliminao das bordas dos frames:

FRAMESET
FRAMEBORDER="NO"
[Exemplo]
Eliminao do espao entre os frames

FRAMESET FRAMEBORDER="NO"
BORDER="0"
[Exemplo]
Frame sem barra de rolagem

FRAME
SCROLLING="NO"
[Exemplo]
bom lembrar que a barra de rolagem de um frame fica sempre direita; no possvel, atualmente, mudar essa
caracterstica
Limpando a Tela
Item em construo
H basicamente dois efeitos possveis para limpar a apresentao de frames, e isso feito com "targets" especiais
(lembre-se como usar o atributo TARGET no item Links com frames):
TARGET="_top"
limpa os frames, apresentando a prxima pgina em tela inteira
[Exemplo de aplicao]
TARGET="_blank"
abre uma nova janela do browser, sem frames, para apresentar a prxima
pgina
Interao
A interao realizada de duas formas diferentes:
1. atravs de programas executados/interpretados pelo browser;
2. atravs de programas executados pelo servidor HTTP.
Conforme a aplicao, apenas um destes tipos de interao pode ou deve ser utilizado.
Pelo momento, maiores detalhes constam apenas do manual em edio (World-Wide Web: Manual do
usurio). Veremos aqui algumas aplicaes bsicas
Mapas
"Server-Side Imagemap"
Um primeiro mtodo para criao de mapas usando a comunicao com o servidor HTTP.
Os servidores WWW tm um programa que lida com a relao entre coordenadas de imagens e URLs. No servidor
NCSA, esse programa o imagemap, no CERN o htimage.
Escolhida a imagem que servir de base de partida de diversos links para outros documentos, preciso gerar um
arquivo relacionando coordenadas da imagem a determinados links. Essas coordenadas so encontradas, atravs de
progr amas de manipulao de imagens - XView, LView, entre outros.
Um arquivo .map (do servidor NCSA), tem um contedo semelhante a:
default
/nada.html
rect
http://www.usp.br/
15,8 135,39
circle
http://www.intermidia.icmsc.sc.usp.br/
306,204 7
Um arquivo .conf (do servidor CERN), tem um contedo semelhante a:
default
/nada.html
rect
(15,8) (135,39)
http://www.usp.br/
circ
306,204 7
http://www.intermidia.icmsc.sc.usp.br/
Ambos arquivos significam a mesma coisa:
1. a regio da figura, compreendida pelo retngulo (rect) de coordenadas (15,8) e (135,39), funciona
como um link para o URL http://www.usp.br/;
2. a regio da figura, compreendida pelo crculo (circle ou circ) de centro (306,204) e raio 7 um
link para o URL http://www.intermidia.icmsc.sc.usp.br/;
3. se o mouse no for acionado em nenhuma dessas duas regies previstas, o link ser dirigido para o arquivo
default - neste exemplo, o nada.html
O formato desses arquivos para figuras clicveis pode variar, mas basicamente contm esses mesmos elementos:
default - indica um endereo padro para quando o mouse for acionado em uma rea da figura
alm das previstas pelo autor;
circle ou circ - declara um crculo na figura; os pontos indicam o centro e um ponto de fronteira
do crculo;
poly - um polgono; cada coordenada declarada um vrtice;
rect - um retngulo; as coordenadas declaradas so, respectivamente, do vrtice esquerdo superior
e vrtice direito inferior.
To logo seu arquivo fazclic.map esteja pronto, seu mapa sensvel deve ser declarado da seguinte maneira:
<A HREF="http://www.host.br/clic.map"><IMG SRC="imagem.gif" ISMAP></A>
onde
http://www.host.br/clic.map - o endereo para o arquivo que contm as diretivas que associam
regies da figura a referncias WWW
imagem.gif - a figura que ir "funcionar" como imagem clicvel

Como exemplo, temos um arquivo de nome mapa.map, cujo contedo :
#Pagina da Graduacao
rect docs/grad.html 3,2 130,42
#Pagina do Mestrado
rect docs/mestr.html 133,3 230,44
#Pagina do Doutorado
rect docs/dout.html 234,3 364,45
relacionado a uma imagem da seguinte forma:
<A HREF="mapa.map"><IMG SRC="icones/cursos.gif" ISMAP BORDER=0></A>

mapa.mapmapa.map
Obs.: Como estamos sem o programa que faz funcionar esse imagemap, que executa a correspondncia entre as
coordenadas e os arquivos, cada vez que for acionado o mouse sobre a imagem, o resultado ser o cdigo fonte do
arquivo mapa.map (como visto acima), sendo que o URL desse resultado ser alguma coisa parecida com:
http://www.icmsc.sc.usp.br/manuals/HTML/mapa.map?183,24
sendo que os nmeros aps o ponto de interrogao sero as coordenadas do pixel selecionado.
"Client-Side Imagemap"
Com o client-side imagemap, os mapas sensveis so rastreados pelo browser no momento em que o usurio escolhe
um ponto na imagem; dessa forma, o servidor j recebe uma requisio de um documento, pois as c oordenadas do
ponto escolhido e o arquivo correspondente j foram identificados pelo browser.
Na verdade, a relao coordenadas-documentos continua existindo, mas agora em vez de estar em um script
separado, est dentro do prprio documento:
<MAP
NAME="nomemapa">
<AREA
SHAPE="forma" HREF="arq.html" COORDS="x1,y1,x2,y2">
</MAP>
<IMG
SRC="imagem.gif" USEMAP="#nomemapa">
Neste exemplo, transformamos a barra abaixo em mapa sensvel:

<map name="mapname">
<area shape="rect" href="docs/grad.html" COORDS="0,0,130,45">
<area shape="rect" href="docs/mestr.html" COORDS="133,0,230,45">

<area chape="rect" href="docs/dout.html" COORDS="234,0,364,45">
</map>
<img src="icones/cursos.gif" USEMAP="#mapname" border=0>
Formulrios
Um formulrio um modelo para a entrada de um conjunto de dados. O primeiro passo
para fazer formulrios aprender as etiquetas que desenham as janelinhas de entrada
de dados, para depois trabalharmos com os scripts, que so os programas que tratam
esses dados, oferecendo os servios desejados (acesso a banco de dados, envio de email, etc.).
O elemento <FORM> delimita um formulrio e contm uma seqncia de elementos de
entrada e de formatao do documento.
<FORM ACTION="URL_de_script" METHOD=mtodo>...</FORM>
Os atributos de FORM que nos interessam agora so:
ACTION
Especifica o URL do script ao qual sero enviados os dados do
formulrio.
METHOD
Seleciona um mtodo para acessar o URL de ao. Os mtodos
usados atualmente so GET e POST. Ambos os mtodos transferem
dados do browser para o servidor, com a seguinte diferena bsica:
POST
- os dados entrados fazem parte do corpo da mensagem enviada

para o servidor;
- transfere grande quantidade de dados.
GET
- os dados entrados fazem parte do URL associado consulta

enviada para o servidor;
- suporta at 128 caracteres.
Veremos maiores detalhes sobre mtodos no item CGI.
FORM tambm pode apresentar o atributo:
ENCTYPE
Indica o tipo de codificao dos dados enviados atravs do formulrio. O
tipo default application/x-www-form-urlencoded. Outro tipo
aceito por alguns browsers text/plain, m as sua utilizao ainda no
est padronizada.
Os formulrios podem conter qualquer formatao - pargrafos, listas, tabelas, imagens exceto outros formulrios. Em especial, colocamos dentro da marcao de <FORM> as
formataes para campos de entrada de dados, que so trs: <INPUT>, <SELECT> e
<TEXTAREA>.
Todos os campos de entrada de dados tm um atributo NAME, ao qual associamos um nome,
utilizado posteriormente pelo script. So os scripts que organizam esses dados de entrada
em um conjunto de informaes significativas para determinado propsito. Primeiro vamos
ver os tipos de campos para montar um formulrio, e depois passaremos aos scripts.
INPUT
O campo <INPUT> tem um atributo TYPE, ao qual atribumos seis valores diferentes para gerar seis tipos
diferentes de entrada de dados.
Campo de dados texto

Quando INPUT no apresenta atributos, assumido TYPE=TEXT (default); a formatao:
<FORM>
Nome: <INPUT
TYPE=TEXT NAME="Nome">
</FORM>
ou apenas:
<FORM>
Nome: <INPUT
NAME="Nome">
</FORM>
produz o resultado:
Nome:
Campo de dados senha

Entrada de texto na qual os caracteres so escondidos por asteriscos, como se pode ver no exemplo.
<FORM>
Login: <INPUT TYPE=TEXT NAME=login><br>
Password: <INPUT
TYPE=PASSWORD NAME="senha">
</FORM>
Login:
mas c
Password:
Alguns atributos
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 entra r dados, ele somente precisar
apagar o que j estiver escrito.
Nome: <INPUT TYPE=TEXT NAME="nome" VALUE="Seu nome">
Seu nome
Nome:
SIZE especifica o tamanho do espao no display para o campo do formulrio. S vlido para campos TEXT e
PASSWORD. O valor default (padro) 20.
<FORM>
Endereo: <INPUT TYPE=TEXT
SIZE=35>
</FORM>
Endereo:
MAXLENGHT o nmero de caracteres aceitos em um campo de dados; este atributo s vlido para campos de
entrada TEXT e PASSWORD.
<FORM>
Dia do ms: <INPUT TYPE=TEXT NAME="ex"
MAXLENGHT=2>
</FORM>
produz o resultado:
Dia do ms:
Apenas 2 caracteres sero lidos pelo formulrio, no importa o quanto se escreva neste campo.
Mltipla escolha
CHECKBOX insere um boto para escolha de opes. A cada alternativa corresponde um valor a ser manipulado pelo
script que processa os dados. Pode ser escolhida mais de uma alternativa.
<INPUT
TYPE=CHECKBOX NAME="esporte" VALUE="basquete">Basquete <br >
<INPUT TYPE=CHECKBOX NAME=esporte VALUE=bocha>Bocha

Uma diretiva CHECKED marca uma escolha inicial, isto , se o usurio no escolher nenhuma opo, o formulrio
ir considerar a alternativa "pr-escolhida":
<INPUT
<br>
TYPE=CHECKBOX NAME="esporte" VALUE="volei" CHECKED& gt;Vlei
<INPUT TYPE=CHECKBOX NAME="esporte" VALUE="futebol">Futebol

Esportes que voc pratica:
futebol
Futebol
volei
Vlei
natacao
bas quete
tenis
bocha
Natao
Basquete
Tnis
Bocha
Escolha nica
RADIO insere um boto de escolha de valores para uma opo, isto , somente uma alternativa pode ser escolhida
<INPUT
TYPE=RADIO NAME="time" VALUE="palm">Palmeiras <br>
<INPUT TYPE=RADIO NAME="time" VALUE="inte">Internacional

Uma diretiva CHECKED marca uma escolha inicial - se o usurio no escolher nenhuma opo, o formulrio ir
considerar a alternativa "pr-escolhida":
<INPUT
TYPE=RADIO NAME="time" VALUE="aea" CHECKED>AEA <br>
<INPUT TYPE=RADIO NAME="time" VALUE="naut">Nutico

Seu time do corao:
palm
Palmeiras;
s ant
Santos;
inte
Cruz;
naut
atle
Internacional;
s aop
Nutico;
Atltico;
cruz
So Paulo;
aea
flam
cori
Cruzeiro;
Flamengo;
Corinthians;
bota
AEA.
SUBMIT apresenta o boto que causa o envio dos dados de entrada para o servidor;
<FORM>
TYPE=SUBMIT>
</FORM>
Enviar cons ulta
possvel modificar a mensagem desse boto atravs do atributo VALUE

<FORM>
TYPE=SUBMIT VALUE="Envia mensagem">
<INPUT
</FORM>
Envia mens agem
RESET restaura os valores iniciais das entradas de dados.

<FORM>
TYPE=RESET>
<INPUT
</FORM>
Redefinir
possvel modificar a mensagem desse boto atravs do atributo VALUE

<FORM>
TYPE=RESET VALUE="Apaga tudo!">
<INPUT
flum
Botafogo;
Botes de ao
<INPUT
grem
</FORM>
Apaga tudo!
SELECT e TEXTAREA
Grmio;
Fluminense;
s ant
Santa
<SELECT> apresenta uma lista de valores, atravs de campos OPTION.

<SELECT
NAME="sabor">
<OPTION>Abacaxi
<OPTION>Creme
<OPTION>Morango
<OPTION>Chocolate
</SELECT>
Tambm possvel estabelecer uma escolha-padro, atravs do atributo SELECTED
<SELECT
NAME="sabor">
<OPTION>Abacaxi
<OPTION
SELECTED>Creme
<OPTION>Morango
<OPTION>Chocolate
</SELECT>
Com o atributo SIZE, escolhe-se quantos itens da lista sero mostrados (no exemplo, SIZE=4):
<TEXTAREA> abre uma rea para entrada de texto, de acordo com atributos para nmero de colunas, linhas, e - se
for o caso - um valor inicial.
<TEXTAREA COLS=40 ROWS=5 NAME="comentario"> Deixe seu comentrio
< /TEXTAREA>
CGI Scripts (bsico)

CGI, ou Common Gateway Interface, uma interface definida de maneira a possibilitar a execuo de programas
("gateways") sob um servidor de informaes. At o momento, CGI suporta apenas servidores HTTP.
Neste contexto, os "gateways" so programas ou scripts (tambm chamados "cgi-bin") que recebem requisies de
informao, retornando um documento com os resultados correspondentes. Esse documento pode existir
previamente, ou pode ser gerado pelo script especialmente para atender requisio (usa-se muito a expresso on
the fly).
Exemplos de aplicao de CGI incluem:
processamento de dados submetidos atravs de formulrios - consulta a banco de dados, cadastramento em
listas, livros de visita, pesquisas de opinio;
criao de documentos personalizados on the fly;
gerenciamento de contadores de acesso;
processamento de mapas.
Tais scripts podem ser escritos em qualquer linguagem que possa ler variveis, processar dados e retornar respostas ou seja, qualquer linguagem de programao. Os programadores de scripts costumam utilizar determinadas
linguagens, d e acordo com a plataforma do servidor:
C, Perl, ou shell de UNIX, em redes de ambiente UNIX;

C, Perl, ou VB Script, em ambiente Windows.
Viso Geral
Os scripts tm uma forma geral comum:
1. leitura de dados (e/ou campos de informao de um pacote HTTP);
2. processamento dos dados (gravar dados em arquivo, realizar clculos, recuperar dados etc.);
3. montagem de uma pgina Web ou uma imagem com os resultados produzidos.
Submisso de Formulrios
Suponhamos um formulrio cuja marcao principal seja:
<FORM ACTION="/cgi-bin/masc/manual" METHOD=mtodo>
...
</FORM>
onde ACTION indica o URL do script que receber os dados (ainda no vamos nos preocupar com o campo
METHOD)
Vejamos o que ocorre quando acionamos o boto de SUBMIT desse formulrio: o browser prepara a requisio,
organizando os dados do formulrio em pares nome-valor, onde:
nome foi definido nas etiquetas do formulrio (pelo atributo NAME);

valor a entrada oferecida pelo usurio.
No script, esses valores sero armazenados em uma estrutura deste tipo:
typedef struct {
char *name
char *val;
} entry;
O nico detalhe diferente na manipulao da entrada dos dados no script a necessidade de decodific-los.
Por exemplo, um campo do tipo...
<INPUT TYPE=TEXT NAME="nome">
cuja entrada tenha sido...
Prof. Achille Bas s i
ser organizado pelo browser da seguinte forma:

nome=Prof.+Achille+Bassi
Se o formulrio tiver mais campos, por exemplo:
<INPUT TYPE=TEXT NAME="email">
com uma entrada
bas s i@icms c.s c.us p.br
o browser estar gerando uma linha semelhante a:

nome=Prof.+Achille+Bassi& email=bassi@icmsc.sc.usp.br
Note que os campos de informao so separados por &. Tambm todos os acentos e smbolos especiais so codificados
em hexadecimal para o envio dos dados. Esta codificao dos dados de um formulrio padro.
Para testar como feita a codificao dos dados de um formulrio com vrios campos, entre seu e-mail no campo
abaixo; ele ser usado para enviar uma mensagem para voc mesmo (se o e-mail usado no teste for invlido, no ser
possvel realizar o teste corretamente):
Tes ta exemplo 1 Apaga
O browser envia a requisio para o URL indicado em ACTION, que est associado a um script. Uma das funes do
script ser separar os campos de informao (retirar os &) e "limpar" os dados dos sinais de + e smbolos hexadecimais.
No exemplo (se voc testou), foi possvel ver uma entrada "suja", pois em vez de script foi usado o mailto para
ACTION.
Uma forma de ter uma mensagem "limpa" com a entrada de formulrios declarar a codificao text/plain. O
detalhe que essa codificao no ainda padronizada. Voc pode testar se seu browser aceita esse formato ao submeter
formulrios, atravs de um segundo exemplo, bastando entrar no campo abaixo o seu e-mail:
Tes ta exemplo 2 Apaga
Ao usar scripts para formulrios, aplicamos funes que fazem o tratamento da linha de entrada; essas funes j esto
prontas, disponveis no arquivo util.c, que acompanha o pacote do servidor HTTP.
Essas funes so:
char *makeword (char *line, char stop);
char *fmakeword (FILE *f, char stop, int *len);
char x2c (char *what);
void unescape_url (char *url);
void plustospace (char *str);
Variveis de ambiente
Variveis de ambiente so variveis estabelecidas pelo servidor HTTP no momento de atender requisies de
documentos. Os scripts tm acesso a essas variveis atravs da interface CGI.
Variveis comumente acessadas so:
SERVER_SOFTWARE
nome e verso do software do servidor

SERVER_NAME
nome do servidor
SERVER_PROTOCOL
verso do protocolo HTTP usado pelo servidor

SERVER_PORT
porta TCP pela qual o servidor atende as requisies

QUERY_STRING
cadeia de caracteres que contm uma consulta ou entrada de formulrio (presente de acordo
com o mtodo e o script utilizado para tratar os dados do formulrio)
REMOTE_HOST
mquina que solicita a execuo do script (mquina do usurio)

CONTENT_TYPE
tipo MIME do contedo da mensagem enviada

CONTENT_LENGHT
comprimento da mensagem enviada

HTTP_USER_AGENT
nome e verso do browser utilizado pelo usurio
Mtodos de HTTP
O protocolo HTTP utiliza vrios mtodos de manipulao e organizao dos dados. Atualmente, dois mtodos so
mais utilizados para submeter dados de formulrios: POST e GET. A diferena entre estes mtodos a seguinte:
POST
com POST, os dados entrados pelo formulrio fazem parte do corpo da mensagem enviada para o servidor;
a cadeia de caracteres de entrada lida como entrada padro de comprimento CONTENT_LENGTH;
possvel transferir grande quantidade de dados.
GET
com GET, os dados de entrada do script fazem parte do URL associado consulta enviada para o servidor
(por exemplo, nas consultas a catlogos do tipo Yahoo e Surf);
a cadeia de entrada colocada na varivel de ambiente QUERY_STRING;
suporta somente at 128 caracteres;
como os dados da consulta fazem parte do URL, ela pode ser encapsulada em um URL de link ou
bookmark;
um detalhe que os dados de entrada so copiados no regsitro de acessos ao site; portanto, informaes que
exigem segurana no devem ser manipuladas por este mtodo.
Mtodos de HTTP
O protocolo HTTP utiliza vrios mtodos de manipulao e organizao dos dados. Atualmente, dois mtodos so
mais utilizados para submeter dados de formulrios: POST e GET. A diferena entre estes mtodos a seguinte:
POST
com POST, os dados entrados pelo formulrio fazem parte do corpo da mensagem enviada para o servidor;
a cadeia de caracteres de entrada lida como entrada padro de comprimento CONTENT_LENGTH;

possvel transferir grande quantidade de dados.
GET
com GET, os dados de entrada do script fazem parte do URL associado consulta enviada para o servidor
(por exemplo, nas consultas a catlogos do tipo Yahoo e Surf);
a cadeia de entrada colocada na varivel de ambiente QUERY_STRING;
suporta somente at 128 caracteres;
como os dados da consulta fazem parte do URL, ela pode ser encapsulada em um URL de link ou
bookmark;
um detalhe que os dados de entrada so copiados no regsitro de acessos ao site; portanto, informaes que
exigem segurana no devem ser manipuladas por este mtodo.
udio e Vdeo
O uso de udio e vdeo na Internet vem ganhando muito destaque nos ltimos dois anos, e bom saber como usar
bem estas mdias.
udio e vdeo so classificados como "mdias contnuas", pois so geradas segundo determinadas taxas, devendo ser
reproduzidas nessa mesma taxa, para evitar distores. Quanto mais informaes de uma seqncia de udio ou
vdeo digital so armazenados, melhor a qualidade do udio ou vdeo reproduzido. Isso implica, logicamente, no
fato de arquivos de udio e vdeo serem geralmente muito grandes, o que torna invivel o uso mais freqente dessas
mdias em pginas Web.
Alm de procurarmos lidar sempre com pequenos trechos de udio e vdeo, podemos explorar tecnologias recentes
que permitem a transmisso em tempo real
udio
< < Seo em construo! > >
H duas maneiras de inserir som em uma pgina:
- para browsers Netscape:

<EMBED
SRC="audio.som">
- para browsers Internet Explorer:

<BGSOUND
SRC="audio.som">
Essas formataes, porm, no faro efeito algum quando o browser no estiver configurado para "tocar" msica, ou
se o computador que receber a pgina no tiver uma placa de som.
possvel configurar a apresentao do arquivo de som, como veremos nos prximos passos...
Vdeo
Em geral, embutimos um arquivo de video em um documento desta maneira
<EMBED
SRC="video.vid">
Essa formatao, porm, no far efeito algum quando o browser no estiver configurado para "tocar" o vdeo.
Quando usar GIF e quando usar JPEG

Para alguns tipos de imagens, o formato GIF superior em qualidade de imagem, tamanho de arquivo, ou ambos. O
que precisamos saber para que tipo de imagens devemos aplicar JPEG.
De maneira geral, JPEG melhor aplicado a imagens com variaes de cor - fotografias digitalizadas, por exemplo
- coloridas ou com no mnimo 16 nveis em tons de cinza. Quanto mais complexa a imagem, melhor o resultado com
JPEG.
GIF melhor para imagens com cores lisas (bordas, reas com cores "puras") realizando, nesses casos, uma
compresso muito melhor do que JPEG faria. Nestes casos, JPEG produz imagens desfocadas. Por isso, imagens em
preto-e-branco puros (sem tons de cinza) no devem ser processados em JPEG.
Sobre Gif
Chamamos GIF (em geral, l-se "guif") as imagens (cones, ilustraes, e outras) apresentadas nas pginas WWW.
GIF abreviao de Graphics Interchange Format, desenvolvido pela CompuServe para transmisso de imagens
por linhas discadas. Este formato usa codificao LZW (Lempel-Ziv and Welsh) para comprimir imagens e assim
reduzir tempos de transmisso. Imagens que seguem este formato so armazenadas em arquivos de extenso .gif.
Os formatos GIF mais recentes so os GIF87a e GIF89a
Gif transparente
As imagens que parecem estar embutidas na prpria pgina so Gifs transparentes - isto , imagens armazenadas
em arquivos .gif, com a aplicao de uma extenso grfica que esconde uma determinada cor na apresentao da
imagem.
O procedimento para fazer imagens com esse efeito simples. Para quem tem Windows, uma das alternativas usar
o LView Pro.
Atendendo a pedidos, aqui esto os passos para obter uma imagem com fundo transparente: vamos tornar
transparente o fundo desta imagem esquerda.
1. Abrir o arquivo da imagem no LView:

2. Na barra de ferramentas, escolher o item Retouch e, depois, Background Color:
Outro caminho atravs da barra de ferramentas, no item Pallete Entry.

3. Abre-se uma janelinha na qual escolhemos a cor que queremos deixar "transparente"
na imagem:
Animao
http://www.icmsc.sc.usp.br/
manuals/HTML/
arquivo: trans.html
Note que foi selecionado o item Mask selection using, que faz com que uma mscara em branco ou preto seja
ativada; essa mscara nos mostra quando a cor escolhida adequada para o efeito que pretendemos. Neste caso foi
escolhida uma mscara branca, que cobre a regio da figura que no ficar transparente.
Se toda a figura na janela do LView estivesse branca (no caso da mscara em preto, se a figura estivesse totalmente
em preto), a cor alaranjada escolhida no ficaria "transparente" no resultado final.
Uma maneira rpida de selecionar a cor, quando a paleta muito grande, usar a opo Dropper, com a qual
selecionamos a cor atravs de uma caneta.
Escolhido o fundo, acionar ok.
4. Finalmente, gravar a imagem como GIF89a:
Este o resultado obtido:
Se no tiver sucesso, provavelmente ser porque o fundo original da imagem no tem uma cor lisa. Abrindo o
arquivo em um aplicativo de edio de imagem, e aplicando uma funo de lupa ou zoom, possvel ver que o
fundo xadrez, como o exemplo direita. Pinte o fundo com uma cor lisa, e repita o processo de
"transparentizao".
Conforme o tipo de arquivo da imagem original, o que temos em vez da janelinha de paleta para escolher a cor do
fundo este seletor de cores de 24 bits:
Dessa maneira fica mais difcil escolher a cor exata. Uma opo gravar a imagem como GIF e abrir o arquivo
novamente; desta vez a janela quadriculada dever aparecer.
Obs.: Maiores explicaes sobre arquivos de imagem, por enquanto, constam apenas do manual em edio
("World-Wide Web: Manual do usurio").
Sobre JPEG
JPEG um padro internacional, proposto pelo comit ISO Joint Photographers Expert Group.
Esse formato permite a transferncia de arquivos por uma grande variedade de plataformas. JPEG baseado em
codificao da imagem por transformao matemtica, o que oferece altas taxas de compresso, embora haja perda
de informaes.
JPEG pode comprimir imagens at um quinto (1/5) do tamanho original, sem perda de qualidade perceptvel.
Arquivos de imagens que seguem este formato tm extenso .jpeg ou .jpg.
Animao
Quem j encontrou uma pgina com animao, ficou logo "louquinho" para colocar algo parecido na prpria
homepage.
Grande parte das animaes produzida de maneira semelhante aos desenhos animados: primeiro preciso ter os
desenhos - geralmente, arquivos *.gif - compondo a seqncia completa da animao desejada; depois, um script,
um applet Java, ou um tipo especial de arquivo, ficar encarregado de mostrar os desenhos na ordem especificada
para gerar a animao.
Algumas animaes so produzidas por scripts CGI, outras por Java, e outras por blocked GIFs (GIFs animadas).
Esta animao simples resultado desta ltima "tcnica".
Outra possibilidade realizar animaes em programas prprios para apresentao, gerando arquivos de vdeo ou
outros formatos que possam ser apresentados atravs de plug-ins.
Gif animado
Um GIF animado o resultado do armazenamento da seqncia de animao em um s arquivo. Softwares comuns
para fazer GIFs animadas so o GifCon e o Paint Shop para Windows, e o whirlgif em UNIX. Para este exemplo
usaremos o GifCon, que est disponvel para cpia aqui.
O GifCon tem um wizard que torna o processo de criao de animaes muito rpido e simples.
Todas as opes default para a criao da imagem animada j esto selecionadas no wizard e, mesmo que no se
entenda muito bem o significado dos passos seguidos, a animao ser composta sem problemas.
As opes oferecidas so estas:
uso da imagem - para documentos Web ou em outro ambiente;

loop contnuo ou no - quantas vezes a animao ser apresentada (indefinidamente ou uma vez s);
qualidade da imagem animada;
tempo entre cada imagem da animao
Depois de selecionar os itens desejados (ou simplesmente seguir a configurao padro), selecionamos os arquivos
de imagem que iro compor a animao, completando os passos do wizard.
Para o exemplo, escolhemos as seguintes imagens:
http://www.icmsc.sc.usp.br/
manuals/HTML/
arquivo: gifanim.html
Ao completar os passos do wizard, temos a janela do GifCon que mostra os controles do arquivo de animao e a
seqncia de imagens.
Pode-se editar vrias caractersticas da animao mesmo depois de se gravar o arquivo final (tempo entre imagens,
loop, etc).
Na mesma janela do GifCon, podemos ver cada uma das imagens que formam a animao:
A animao resultante da seqncia escolhida foi esta:

Entre as facilidades do GifCon est a possibilidade de transformar um arquivo AVI em arquivo de GIF animado.
O whirlgif funciona de maneira semelhante quanto montagem da animao, porm sua interface muito pobre,
sendo necessrio trabalhar em linha de comando
Os diversos recursos interativos

Como visto na seo sobre Interao, podemos desenvolver scripts ou programas que atuem do lado do servidor ou
do cliente Web, promovendo a interao do leitor com as informaes apresentadas em uma pgina.
Os recursos geralmente utilizados do lado do servidor so:
CGI Scripts
SSI (Server-Side Includes)
Com tais recursos, podemos trabalhar com acesso a bases de dados, tratar dados entrados por formulrios, realizar
contagem de acessos, oferecer diversas informaes personalizadas.
Do lado do cliente, temos os seguintes recursos:
Java
JavaScript
Tais recursos podem ser aplicados juntamente com scripts do lado do servidor; quando sozinhos, tm acesso
somente a informaes oferecidas localmente.
preciso lembrar que existem os servlets Java e o LiveScript, "verses" e "extenses" de Java e JavaScript
executados do lado do servidor
JavaScript
Com JavaScript implementamos diversos recursos interessantes.
Assim, possvel dizer: seu browser o

Microsoft Internet Explorer (Mozilla) Verso 4.0 (compatible; MSIE 5.0; Windows 95;
DigExt).
Outro exemplo este reloginho, que mostra a hora do seu computador:
3:58:19 A.M.
Podemos tambm cumprimentar o leitor:

(de acordo com a hora local!)
Credo, 3 da manh! Voc um vampiro ou o que?!?!
Os roteiros JavaScript permitem acesso a:
atributos relacionados ao documento apresentado
informaes disponveis do lado do cliente (browser).
... mas no serve para gerarmos scripts de formulrios, etc.
Problema: S o Netscape apresenta bem todos os "JavaScripts".
Ao fazer pginas, teste os resultados em outros browsers

HTML Completo

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Completo

Enviado por

Direitos autorais:

Formatos disponíveis

Introduo Linguagem HTML

HyTime - Hypermedia/Time-based Document Structuring Language

Portanto, HTML definido segundo um DTD de SGML.

Edio de documentos HTML

- inserem automaticamente as etiquetas, orientando a insero de atributos e

- oferecem ambiente de edio com um resultado final das marcaes.

Documento bsico e seus componentes

Atributos gerais de um documento

cor de fundo (padro: cinza ou branco)

cor dos textos da pgina (padro: preto)

a cor dos links (padro: azul)

cor dos links, quando acionados (padro: vermelho)

cor dos links, depois de visitados (padro: azul escuro ou roxo)

Este um cabealho de nvel 1

Os cabealhos no podem ser aninhados, isto :

Cabealho alinhado direita

Cabealho alinhado esquerda (default)

<P ALIGN=CENTER>Assim como os trens, as boas idias s vezes chegam com

termo a ser definido

item de uma lista

item de uma lista numerada

termo a ser definido

item de uma lista

3. item de uma lista numerada

Formatao de textos e caracteres

Envie crticas e sugestes para <address>masc@icmc.sc.usp.br </address>

Para ttulos de livros, filmes, e citaes curtas. Exemplo:

Para indicar trechos de cdigo de programas. Exemplo:

Indica definio de uma palavra, em geral apresenta o texto em itlico. Exemplo:

nfase, tambm normalmente apresentado em itlico. Exemplo:

Indica uma entrada via teclado. Exemplo:

Forte nfase, mostrado normalmente em negrito. Exemplo:

Itlico (em alguns casos, caracteres apenas inclinados)

Tipo teletype - fonte de espaamento fixo.

Fonte um pouco maior.

Fonte um pouco menor.

Frase em estilo ndice, como em H2O.

Frase em estilo expoente, como em Km2.

Como vemos, as sequncias de escape so sensveis caixa.

Letra maior Letra normal Letra menor

Ligaes (uso de links)

Caminhos para o documento de destino

que produz o link: Instituto de Cincias Matemticas e de Computao

Ligaes para trechos de documentos

<IMG SRC="/icones/newred.gif" ALT="Novo!"> apresentado nos browsers grficos assim: - e, nos

Se quisermos uma borda maior... bordaborda

...e se pode escrever vontade entre as imagens!

cursos de Licenciatura e Bacharelado em Matemtica em nvel de graduao, alm de um programa de

O Instituto de Cincias Matemticas e de Computao (ICMC-USP) formado pelos

<IMG SRC="icones/earth.gif" ALIGN="LEFT" WIDTH="63" HEIGHT="68"

"A cultura UNIX comeou a ser apreciada por usurios

Para conseguir o efeito, voc precisar trabalhar com duas imagens:

Elementos bsicos de tabelas

Ttulos, linhas e elementos

define o ttulo da tabela

delimita uma linha

define um cabealho para colunas ou linhas (dentro de <TR>)

delimita um elemento ou clula (dentro de <TR>)

Ttulos compreendendo mais de uma coluna ou linha

<TR><TD>linha1, coluna 1</TD><TD> linha 1, coluna 2</TD></TR>

<TR><TD>linha 2, coluna 1</TD><TD>linha 2, coluna 2</TD></TR>

ROWSPAN=3>3 linhas</TH><TD>uma linha</TD></TR>

Tabelas sem borda