You are on page 1of 0

Apostila de HTML

Elaborada pelo
Professor Srgio Furgeri






FIEC Fundao Indaiatubana de
Educao e Cultura
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 1
O QUE HTML?

Abreviao de HiperText Markup Language a linguagem de programao que
usamos para criar uma pgina Web , que por sua vez ser composta de textos e comandos
especiais que chamaremos de Tags. No se assuste com o nome, pois se trata de uma
linguagem muito simples, e tem como finalidade bsica formatar o texto e imagens
exibidas e criar ligaes entre pginas Web, criando assim documentos com o conceito de
Hipertexto.
Como em qualquer outra linguagem, o programador deve escrever o cdigo - fonte
seguindo as regras de sintaxe da linguagem. Este cdigo fonte posteriormente
interpretado pelo browser, que se encarregar de executar os comandos ou tags do cdigo
para formatar e acessar recursos da Web.
Em maro de 1989, Tim Berners-Lee do European Laboratory for Particle Physics
(mais conhecido como CERN), props um novo conjunto de protocolos para um sistema
de distribuio de informaes da Internet a ser usado entre os diversos grupos de pesquisa
em fsica de altas energias. Os protocolos da WWW foram logo adotados por outras
organizaes e foi formado um consrcio de organizaes, chamado de W3 Consortium,
que uniu seus recursos de modo a prosseguir com o desenvolvimento de padres WWW.
Esse consrcio liderado pelo MIT (Massachusetts Institute of Technology) , pelo
CERN e pelo INRA ( French National Institute for Research in Computer Science and
Control). Ele prope recursos mais novos e sofisticados de HTML, avalia sugestes e
implementaes alternativas e publica novos "nveis" de verses do padro HTML.
Existem vrios programas para editorao HTML, que tornaria nosso trabalho
muito mais fcil e nos acomodaria como usurios finais que no entendem nada do que
esto fazendo. Por isso, sofreremos um pouco e usaremos o incrvel, sensacional,
fantstico e estupendo Bloco de Notas (NotePad) do Windows.

A HyperText Markup Language (HTML) a linguagem da World Wide Web.
Alm do prprio software servidor Web, a HTML o corao da Web. Todos os
documentos, hiperlinks clicveis, imagens grficas, documentos de multimdia,
formulrios e todas as outras coisas da Web que voc (e seu chefe) j viram esto baseadas
em HTML.
Alguns chamam a HTML de linguagem de programao, mas isso no dever
assust-lo. A HTML uma simples linguagem de marcao fcil de aprender. At os
novatos na rea de computao podem assimilar os conhecimentos bsicos rapidamente.
Se voc j aprendeu a usar o seu processador de texto, ento aprendeu algo to complexo
quanto a HTML.
Embora seja verdade que a HTML e a prpria World Wide Web apareceram primeiro nos
sistemas de computadores UNIX, voc pode aprender e usar a HTML em qualquer sistema
de computador, incluindo o seu PC, usando ferramentas com as quais j est familiarizado.
A HTML completamente independente do sistema. No importa se voc est
trabalhando em um PC Windows, um Macintosh, uma estao de trabalho UNIX de alto
desempenho ou um cluster VAX/VMS multiusurio: a HTML a mesma em qualquer
lugar.


VANTAGENS DA HTML

Aqui est uma pequena lista das principais caractersticas da HTML:
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 2
Formatao de documento usando vrios estilos de letras, incluindo uma variedade de
ttulos.
A caracterstica de incluir hiperlinks que apontam para outros documentos Web ou
servios em sistemas de computadores por toda a Internet.
Uma grande variedade de recursos de organizao em lista.
A capacidade para criar texto pr-formatado, incluindo texto tabulada.
A capacidade de encaixar imagens grficas diretamente em um documento HTML,
que podem ser hiperlinks para outros documentos.
Mapas de imagens clicveis, com host spots (pontos quentes) para lev-lo a vrios
lugares, dependendo do ponto em que voc deu o clique na imagem.
Documentos HTML so arquivos escritos em ASCII - texto.
Podem ser criados em qualquer editor de texto ( vi, emacs, edit, notepad)
Existem editores especficos para vrias plataformas
Existem conversores de vrios formatos, por exemplo, doc para html
A unidade mnima de informao a pgina


LIMITAES DA HTML

Antes de entrarmos nos detalhes da HTML, precisamos discutir algumas limitaes
fundamentais da linguagem, no para desencoraj-lo a aprender a us-la, mas para lhe dar
uma perspectiva geral daquilo que pode esperar.

No uma linguagem tipogrfica

A simples justificao da linha fcil ela est sempre alinhada esquerda. Voc
no tem outra escolha. Os navegadores Web devoram quaisquer espaos em branco extras
que voc colocar nos seu documentos, a menos que sejam tomadas medidas especiais para
preserv-los. Voc no pode especificar um estilo de fonte, nem mesmo um corpo. E voc
pode conduzir um usurio a uma imagem grfica, mas ele no ir necessariamente v-la.


DIFERENAS FSICAS EM HARDWARE

H uma grande variedade de sistemas de computadores, com diferentes hardware e
diferentes recursos, e cada um reproduzir o seu documento HTML de maneira diferente.
As diferenas de hardware constituem a limitao mais importante que afeta a
HTML. Voc no pode esperar que monitores monocromticos mostrem cores nem pode
esperar tambm que monitores de baixa resoluo reproduzam imagens grficas, e esses
terminais no-grficos no podem mostrar outra coisa a no ser texto puro, com uma nica
e montona fonte fixa. Essas diferenas fsicas significam que os seu documentos HTML
sero reproduzidos diferentemente nos diversos PCs, nas estaes de trabalho e nos
diversos terminais. Por esses motivos, nem sempre vantajoso se preocupar com os
detalhes na apresentao com HTML. Por exemplo, querer dar o tom de cor perfeito, para
um logotipo qualquer.


QUAIS AS FERRAMENTAS NECESSRIAS?
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 3

Embora haja disponveis algumas ferramentas especializadas para cri-los e edit-
los, voc pode comear a criar HTML imediatamente com ferramentas que j tem mo.
Elas so:
Os editores de texto internos do seu computador, como o Bloco de Notas do Microsoft
Windows, o DOS Edit, o Macintosh Teach Text, UNIX vi ou emacs, ou VAX/VMS
edt.
O seu processador de texto preferido, como o PC-Write, Word, Word-Perfect, ou
qualquer outro que voc tenha usado sem formatao de texto puro, ou modo ASCII.
Na verdade, voc pode usar qualquer ferramenta com a qual se sinta bem para criar
documentos, tornando o processo de aprendizado HTML muito fcil. Voc pode focalizar
a sua ateno no aprendizado e criao HTML, sem ter de ao mesmo tempo aprender uma
ferramenta especial.


EDITORES DE HTML

possvel desenvolver pginas HTML super-sofisticadas usando um simples
editor de texto, mas certamente no a forma mais cmoda e produtiva. Existem vrios
tipos diferentes de editores e conversores para HTML que podem facilitar muito a
criao ou transformao de informao para o WWW. H basicamente trs tipos de
ferramentas:
Editores HTML
Macros para processadores de texto
Conversores
Os editores HTML so as ferramentas que geralmente oferecem mais liberdade
para a criao de pginas. Isto importante, pois o HTML um padro em constante
desenvolvimento e a cada dia surgem novos elementos. A maioria desses editores no
oferece uma interface WYSIWYG e geralmente dependem de um browser para se ter uma
idia do resultado final.
As macros tm a vantagem de usar o ambiente de processamento de textos, que
geralmente familiar ao usurio. Permitem que se crie uma pgina HTML sem escrever
uma linha sequer de HTML, e nem ver o cdigo. Essa facilidade de uso tem o preo de
no permitir o uso de recursos mais sofisticados da linguagem. Existem macros para Word
for Windows, WordPerfect e Ami Pro.
Finalmente, h os conversores, que permitem converter diversos formatos de texto
para HTML, como PostScript, Texinfo, LaTeX, Framemaker, Word, RTF, WordPerfect,
nroff, etc. Em geral, so limitados. Quase sempre necessrio fazer alguma edio aps a
converso, mas so extremamente teis quando se tem muita informao em um formato
diferente e deseja-se torn-la disponvel rapidamente no WWW.


A ESTRUTURA DE UM DOCUMENTO HTML

Todos os descritores HTML devem ser cercados por colchetes angulares (< e >) e
tem de ter marcadores de incio e fim. Todo documento deve ser identificado como HTML
(<html> </html>), ter uma rea de cabealho (<head></head>) com o ttulo para o
documento (<title> </title>), um ttulo principal e uma rea definida como
corpo(<body></body>) do contedo do documento. Como o exemplo a seguir:
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 4

<HTML>
<HEAD>
<TITLE>Titulo do Documento</TITLE>
</HEAD>
<BODY>
<H1>Este o primeiro nvel de cabealho</H1>
Meu Primeiro Documento HTML.
Este o primeiro pargrafo.<P>
E este o segundo.<P>
</BODY>
</HTML>

Esta pgina vai aparecer assim:




OS MARCADORES HTML

As marcaes do HTML - tags - consistem do sinal (<), (o smbolo de "menor
que"), seguida pelo nome da marcao e fechada por (>) ("maior que").
De um modo geral, as tags aparecem em pares, por exemplo, <H1>
Cabealho</H1>. O smbolo que termina uma determinada marcao igual aquele que a
inicia, antecedido por uma barra (/) e precedido pelo texto referente.
No exemplo, <H1> avisa ao cliente Web para iniciar a formatao do primeiro
nvel de cabealho e </H1> avisa que o cabealho acabou.
H excees a esse funcionamento em pares das marcaes. Por exemplo, a que
indica um final de pargrafo: <P> . No necessita de uma correspondente: </P>. A
marcao que indica quebra de linha - <br> - tambm no precisa de uma correspondente,
e outras tais como <hr> e <li>..

Exemplos de Marcaes
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 5

A notao: <TITLE> (e a correspondente </TITLE>), especificam o ttulo de um
documento.
A notao: <H1> (e a correspondente </H1>), indica a aparncia de um cabealho.
A notao: <P> a marcao para final de pargrafo.


QUESTES REFERENTES ACENTUAO

As notaes presentes em marcaes devem ser representadas com notaes
especiais para que possam ser exibidas em tela. Estas notaes especiais sempre se iniciam
por & (e comercial) e encerram-se com ; (ponto e vrgula).

Notao descrio Aparncia
&lt; Maior que >
&gt; Menor que <
&amp; E comercial &
&quot; aspas duplas
&reg; marca registrada
&copy copyrights

possvel utilizar facilidades de acentuao (padro do Windows por exemplo) em
documentos HTML. No entanto, desta forma, apenas poder visualizar a acentuao o
computador que reconhecer este padro especfico.
Segue abaixo o padro para acentuao - ISO Latin-1 alphabet -, semelhante ao
utilizado para exibir caracteres das marcaes, e que poder ser visualizado pela grande
maioria das mquinas.

Caracter Notao
Acento agudo &xacute; onde x uma letra qualquer, maiscula ou minscula
Acento grave &xgrave; onde x uma letra qualquer, maiscula ou minscula
Acento circunflexo &xcirc; onde x uma letra qualquer, maiscula ou minscula
Letra com til &xtilde; onde x uma letra qualquer, maiscula ou minscula
Letra com trema &xuml; onde x uma letra qualquer, maiscula ou minscula
Letras unidas &Aelig; = e &aelig; =
Letra com argola &Aring; = e &aring =
Cedilha &Ccedil; = e &ccedil=
N com til &Ntilde; = e &ntilde; =
O cortado &Oslash; = e &oslash; =
THORN maisculo &THORN = (Icelandic)
thorn minsculo &thorn= (Icelandic)
eth minsculo &eth (Icelandic)
eth maisculo &ETH;= (Icelandic)
Caracter alemo &szlig =


MARCAES BSICAS
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 6

Ttulos

Todo documento em HTML deve possuir um ttulo. De um modo geral o ttulo
aparece em lugar separado da pgina (por exemplo, alto da tela no Netscape), e utilizado
para identificar o documento em outros contextos ( por exemplo, buscas Wais).
interessante que o ttulo possa sugerir claramente o contedo do documento.
Ateno porque o conceito de ttulo diferente de cabealho. O ttulo est mais
para o nome do arquivo. No um elemento relevante na visualizao do documento
como acontece com o cabealho.
A marcao utilizada para ttulos <title> e seu par </title>.
Escrito desta forma:

<html>
<title> Aqui colocado o Ttulo</title>
<body>
<h2>Este o cabealho de nvel 2</h2>
Aqui entra o texto do documento, figuras, links...
</body>
</html>
Apresenta-se assim:



Cabealhos

"Cabealhos" normalmente so usados para ttulos e sub-ttulos de uma pgina.
O HTML possui seis nveis de cabealhos, numerados de 1 a 6, sendo o nmero 1
o de maior destaque. Cabealhos so exibidos em letras maiores e em negrito. O primeiro
cabealho em cada documento deve estar marcado como <H1>.
ATENO: ao definir o tamanho de um cabealho, voc no est definindo o
tamanho da letra (fonte 10, fonte 14). Voc apenas define que ele aparecer com maior
tamanho e destaque que o resto do texto. O tamanho exato com que ele ser visualizado
definido pelo programa visualizador de html (browser) de cada pessoa que acessar a
informao.
As notaes relativas a cabealhos so:

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 7
<Hy>Texto do cabealho </Hy >

onde y um nmero entre 1 e 6 especificando o nvel do cabealho.

O conjunto de notaes possveis o que segue:

<H1>Headings</H1>
<H2>Headings</H2>
<H3>Headings</H3>
<H4>Headings</H4>
<H5>Headings</H5>
<H6>Headings</H6>

Pargrafos

A marcao <p> utilizada para definir o incio de um novo pargrafo, deixando
uma linha em branco entre cada pargrafo.HTML no reconhece o caracter de quebra de
linha dos editores de texto. Mesmo que exista uma linha em branco, os clientes Web s
reconhecem o incio de um novo pargrafo mediante a marcao apropriada.
Existem algumas excees. Por exemplo, inserindo uma marcao de pargrafo
depois de <P>, <LI>,<Hy> e outras, esta ser ignorada.

Quebras de linha

A marcao <br> faz uma quebra de linha sem acrescentar espao extra entre as
linhas. Veja a diferena do uso de <p> e <br> ,nos exemplos a seguir:

<html>
<title>Quebra de Linha</title>
<body>
<h1>Utilizando p</h1>
Vamos separar esta sentena com marcao de pargrafo.<p>
Veja o espao extra entre as linhas.
</body>
</html>

<html>
<body>
<h1>Utilizando br</h1>
Veja a diferena quando separamos duas linhas utilizando<br>
a marcao de quebra de linha<br>
Como deu para notar, no foi adicionado espao extra entre as linhas.
</body>
</html>

Veja a diferena no uso das duas notaes:


Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 8



INTERLIGANDO DOCUMENTOS

Para comear

O principal poder do HTML vem da sua capacidade de interligar partes de um
texto (e tambm imagens) a outros documentos. Os clientes exibem em destaque estas
reas ou pontos chaves (normalmente com cores diferentes ou sublinhado) para indicar
que se trata de um link, ou interligao, no hipertexto.
A marcao <A>, que define o ponto de partida para os links, denominada de
ncora. Para incluir uma ncora em seu documento:
1. Inicie a ncora com <A . ( H um espao depois de A.)
2. Especifique o documento a ser interligado, inserindo parmetro
HREF="filename" seguido do sinal: >
3. Insira o texto que vai funcionar como link no documento corrente
4. Anote a marcao de final da ncora: </A>.

Um exemplo de referncia a um hipertexto:
<A HREF="ListaPraias.html">Praias</A>

A palavra Praias'' definida como o marcador do link para se chegar ao
documento ListaPraias.html, que est no mesmo diretrio do documento corrente. Ou seja,
"Praias" aparece em negrito e se eu clicar nessa palavra ser exibido o documento
apontado - ListaPraias.html
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 9


Interligando Documentos em Outros Diretrios

possvel interligar documentos em outro diretrio especificando-se o caminho
relativo a partir do documento corrente, em relao ao que est sendo interligado.
Por exemplo, um link para o arquivo Sergipe.html localizado no subdiretrio
Estados seria assim:

<A HREF="Estados/Sergipe.html">Sergipe</A>

Estes so dos denominados links relativos. tambm possvel usar o caminho
completo (pathname absoluta) do arquivo desejado. Para isso, utiliza-se a sintaxe padro
do sistema UNIX.
Importante: se voc quiser referenciar um diretrio a partir do raiz do seu
servidor www, inicie a notao com /. Isto , se voc tiver uma notao desta forma
<A HREF=/imagens/incon1.gif>, significa que o arquivo incon1.gif dever ser buscado
no diretrio imagens que est imediatamente acima do diretrio raiz do seu servidor
WWW.

Ligando URLs

O World Wide Web utiliza-se das Uniform Resource Locators (URLs) para
especificar a localizao de arquivos em servidores. Uma URL inclui o tipo de recurso
acessado (p.e, gopher, WAIS), o endereo do servidor, e a localizao do arquivo.
Se escreve de acordo com o esquema abaixo:

protocolo://servidor[:port]/path/filename

Onde protocolo uma das seguintes definies

file um arquivo no seu sistema local, ou servidor de ftp
http um arquivo em um servidor World Wide Web
gopher um arquivo em um servidor Gopher
WAIS um arquivo em um servidor WAIS
news um Usenet newsgroup
telnet uma conexo Telnet

Por exemplo, para incluir um link para o site de busca CAD, em um documento,
deve ser usado:

<A HREF = "http://www.cade.com.br">Cade Site de busca </A>

O que torna a sentena Cade Site de busca um link para tal
documento.

Ligando sesses especficas em outro documento

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 10
Para fazer links com sesses de outros documentos o processo o mesmo da
sesso anterior. Faz-se uma ncora normalmente, e apenas acrescentado, aps a url do
documento de destino, o sinal # e uma palavra, ou identificador. O identificador "volta"
no nosso exemplo:
Este o meu <a href="index20.htm#volta">link</a> para o ltimo item do ndice
deste tutorial.
No ndice do tutorial - arquivo index20.htm - dever haver uma notao que
reconhea a palavra/identificador informado no ponto de partida. Pode ser: <a
name="volta"><li>Formulrios Eletrnicos</a>.

Interligando sesses em uma pgina

HTML permite que se faam ligaes entre diferentes trechos de um documento.
Voc pode apontar uma palavra ou trecho de um texto utilizando uma ncora de nome
(named anchor). Este recurso bastante usado na gerao de ndices de contedo no incio
de uma pgina.
O passo a passo :

1.Defina o "ponto de partida", atribuindo a ele um nome qualquer - no exemplo
item1-, precedido do caracter #,da seguinte forma:

Veja o incio da <a href="#item1">segunda sesso</a>.

2.Defina o "ponto de chegada", atribuindo a ele uma ncora de nome, com o nome
correspondente ao do ponto de partida, assim:

Esta <a name="intem1">segunda sesso</a> trata de..


LISTAS

Listas No Numeradas

Para criar uma lista no numerada:

1. Comece com a marcao de incio de lista: <UL>.
2. Insira a marcao <LI> antes de cada item da lista item. (No necessrio
fechar a marcao com </LI> )
3. Encerre com a marcao de fim de lista: </UL>.

Abaixo o exemplo de uma lista com quatro itens:

<UL>
<LI> mas
<LI> uvas
<LI> laranjas
<LI> bananas
</UL>

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 11
Vai aparecer assim:



Cada marcao <LI> pode conter vrios pargrafos.

Listas Numeradas

Uma lista numerada - ou ordenada - semelhante a uma lista no numerada, exceto
porque utiliza marcao <OL> ao invs de <UL>. Os itens so identificados utilizando-se
a mesma notao <LI> .
Uma lista criada assim:

<OL>
<LI> mas
<LI> uvas
<LI> laranjas
<LI> bananas
</OL>

Resulta neste formato:



Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 12


Listas de Definies

Uma lista de definies normalmente consiste em alternar um termo (abreviado
como DT) e uma definio (abreviado como DD). Clientes Web browsers geralmente
mostram a definio em nova linha com outro alinhamento.

Exemplo de uma lista de definio:

<DL>
<DT> FIEC
<DD> A FIEC, Fundao Indaiatubana de Educao e Cultura, que est localizada em
Indaiatuba, interior de So Paulo, vem formando a cada semestre novos profissionais,
tcnicos em informtica, administrao de empresas, turismo, eletro-eletrnica,
edificaes e outros.
<DT> COTUCA
<DD> O COTUCA, localizado em Campinas, interior de So Paulo, vem desenvolvendo
o mesmo papel que a FIEC, apesar dos cursos tcnicos serem Integrados com o Ensino
Mdio.
</DL>
Ser vista desta forma:

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 13


As entradas <DT> e <DD> podem conter vrios pargrafos (separados por <P> ),
listas, ou outras definies.
A marcao <DD> pode tambm ser utilizada, fora de uma lista de definies
como se fosse uma tabulao (insere um espao no incio da frase).

Listas Intercaladas

As listas podem ser encadeadas ou intercaladas arbitrariamente, produzindo
resultados bastante interessantes. A prtica que vai mostrar qual o nmero mximo de
listas que vale a pena intercalar. Pode-se inclusive ter um pargrafo, intercalado com uma
lista que contenha um nico item.

Exemplo de lista intercalada:

<UL>
<LI> Pases do Continente Americano:
<UL>
<LI> Estados Unidos
<LI> Brasil
<LI> Paraguai
<LI> Colmbia
<LI> Uruguai
</UL>
<LI> Um pas do Continente Africano:
<UL>
<LI> frica do Sul
</UL>
</UL>

exibida com este formato:
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 14



TEXTO PR-FORMATADO

A marcao <PRE>(derivada de preformatted) delimita uma rea de texto em
que espaos, novas linhas e tabulaes so mantidas. Ou seja, o texto ser apresentado
exatamente da forma como foi digitado, mesmo que no hajam marcaes do html. uma
forma de se preservar o formato de um texto
Este recurso utilizado por exemplo para listas de programas. Vejamos um
exemplo:
<PRE> O texto ser apresentado exatamente
da forma
como foi digitado, mesmo que no
hajam marcaes do html.
Dessa maneira, o
formato
do texto preservado.
</PRE>


Apresenta-se assim:

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 15


Podem ser definidos links dentro de textos pr-formatados. No entanto, deve-se
evitar utilizar outros caracteres das marcaes em reas <PRE>. Isto porque caracteres
como <, >, and & possuem um significado especfico no HTML.
O ideal utilizar as sequncias especiais, (&lt;, &gt;, and &amp;, respectivamente)
sempre que precisar representar esses caracteres. Veremos mais sobre no prximo item.


CARACTERES ESPECIAIS

A HTML permite que se apliquem estilos especficos a palavras ou sentenas.
Vamos ver algumas opes:

<B></B> texto em negrito
<I></I> texto em itlico

E o efeito de cada uma delas:
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 16


Para representar os caracteres das tags, utilize a seguintes notaes:
&lt; para representar <
&gt; para representar >
&amp; para representar &
&quot; para representar "

Uma lista completa dessas notaes especiais pode ser obtida no CERN, em:
http://www.w3.org/hypertext/WWW/MarkUp/ISOlat1.html
Caso o editor que voc esteja utilizando no acentue, possvel tambm utilizar
notaes especiais para acentuao.
Ateno: Ao contrrio do resto do HTML, as notaes especiais diferenciam letras
maisculas de minsculas. No possvel usar &LT; no lugar de &lt;.


ENDEREOS

A marcao <ADDRESS></ADDRESS> habitualmente utilizada para
especificar o autor do documento e a forma de contato com ele (por exemplo, o endereo
eletrnico). Geralmente o ltimo item de uma pgina.
Por exemplo:

<ADDRESS>
WebMaster: Joo da Silva / joaosilv@mailbr.com.br
</ADDRESS>

E o resultado :

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 17


Existe ainda um recurso para criar um item na pgina que, ao ser selecionado, abre
uma janela, e permite que se envie uma mensagem eletrnica para um endereo especfico.
Para isso utiliza-se a varivel "mailto:"
Veja o exemplo abaixo, para enviar mensagens de dvidas para o
endereo eletrnico apoio@cr-df.rnp.br

Se voc tiver alguma dvida sobre o Vestibular da FIEC, mande-nos um e-mail
para
<a href="mailto:fiec@fiec.com.br"> FIEC Fundao Indaiatubana de Educao e
Cultura</a>.

Fica assim:



E ao se clicar em FIEC Fundao Indaiatubana de Educao e Cultura, se
abrir uma janela para envio de mensagem eletrnica.


INSERIR IMAGENS

As imagens dentro de uma pgina devem estar preferencialmente no formato ".gif".
Este o formato mais universalmente aceito pelos visualizadores de WWW (browsers). O
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 18
Netscape consegue decodificar outros formatos como o ".jpg" e ".rgb", mas esta
capacidade no comum a todos os programas.
Utiliza-se a seguinte notao para incluir uma imagem:

<img src="diretrio/arquivo">

No exemplo:



Alinhamento das imagens

Toda imagem includa pode ser posicionada (align=...) na tela das seguintes
formas: TOP, MIDDLE, BOTTOM, LEFT e RIGHT. Esse comando colocado conforme
a seguinte notao:

<img align="left" src="diretrio/arquivo">

As trs primeiras opes definem a posio da imagem com relao ao texto.
Veja os exemplos:

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 19


As duas ltimas definem a posio da imagem na pgina, a direita ou esquerda:



Ateno: De um modo geral no necessrio incluir essa anotao para alinhar a
imagem a esquerda. Caso seja omitida a opo "align", a imagem aparecer a esquerda da
pgina.

Uma imagem pode ser tambm alinhada direita da pgina:
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 20

Uma imagem pode ser ainda um boto sensvel: Para isso basta incluir uma
imagem no interior de uma ncora.

<a href="./index.htm"><img src="../images/stop.gif></a>




TABELAS EM HTML

Principais Marcaes

Segue abaixo o conjunto de marcaes essenciais para desenhar tabelas em HTML.
Alguns atributos podem ser definidos para cada uma dessas marcaes. Falaremos desses
atributos mais adiante.

<TABLE></TABLE>
Toda tabela deve ser iniciada com a marcao <table> e encerrada com </table>.

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 21
ATENO: Dessa forma a tabela vai aparecer sem bordas, mas dividindo linhas e
clulas.
Para que a tabela aparea com bordas simples, defina dessa forma:
<table border></table>
Antes e depois de uma tabela, acontece sempre uma quebra de linha:
<TR></TR>
Cada linha de uma tabela deve sempre aparecer entre as marcaes <tr> e </tr>.
(TR = Table Row)

<TD></TD>
Esta a marcao que define cada clula de uma tabela. As clulas de uma tabela
devem sempre aparecer entre as marcaes de linhas (<tr> e </tr>). Como padro, o texto
nas clulas alinhado a esquerda.

<TH></TH>
Desta forma so definidos os ttulos de uma tabela. Estes podem ser posicionados
em qualquer clula. A diferena entre a marcao de clula e ttulo de clula que o ttulo
aparece em negrito.

Vamos ver ento o exemplo de uma tabela utilizando essas marcaes bsicas.

<table border>

<tr>
<td>Automveis/Descrio</td>
<th>Preo</th><th>Ano</th><th>Cor</th>
</tr>

<tr>
<th>Omega</th><td>94</td><td>R$ 16.000,00</td><td>Preto</td>
</tr>

<tr>
<th>Vectra</th><td>95</td><td>R$ 19.000,00</td><td>Cinza</td>
</tr>

<tr>
<th>Plio</th><td>97</td><td>R$ 8.000,00</td><td>Branco</td>
</tr>

</table>

Vai aparecer dessa forma:

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 22


Atributos

As marcaes das tabelas, podem apresentar resultados diferentes, se
acompanhadas de alguns atributos. Vamos ver os principais:

<BORDER>
Esse atributo aparece junto a marcao TABLE. Caso esse atributo no aparea, a
tabela no ter bordas.
Ou seja, como j vimos, para obter uma tabela com bordas, ela deve ser delimitada
pelas marcaes <table border> </table>.

<ALIGN>
Este atributo pode ser aplicado a TR,TH e TD, e controla como ser o alinhamento
do texto dentro de uma clula, com relao s bordas laterais.
Aceita os valores left, center, right, respectivamente para alinhar a esquerda,
centralizar ou alinhar a direita.

Veja o exemplo:

<table border>

<tr>
<td>Primeira Clula</td><td>Segunda Clula</td><td>Terceira Clula</td>
</tr>

<tr>
<td align=center>centro</td>
<td align=left>esquerda</td>
<td align=right>direita</td>

</tr>

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 23
</table>

Aparece assim:



<VALIGN>
Pode ser aplicado a TR,TH e TD, e define o alinhamento do texto nas clulas com
relao a borda superior e inferior.
Aceita os valores top, middle e bottom. Exemplo:

<table border>

<tr>
<td> Veja esse teste para alinhamento<br>
Preste ateno nas bordas<br>
inferior e superior<br>
</td>

<td valign=top>Com TOP </td>
<td valign=middle>Com MIDDLE</td>
<td valign=bottom>Com BOTTOM</td>

</tr>

</table>

Aparece assim:

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 24


<NOWRAP>
Este atributo evita que haja uma quebra de linha dentro de uma clula. Cautela ao
utiliz-lo, para no produzir clulas muito largas.

<COLSPAN>
Pode ser aplicado a TH ou TD. Define quantas colunas uma clula poder
abranger. Por padro cada clula corresponde a uma coluna, ou seja COLSPAN=1.
Vejamos um exemplo

<table border>
<tr>
<td colspan=4>4 Colunas</td><td>normal</td><td>normal</td>
</tr>
<tr>
<td>Col 1</td><td>Col 2</td><td>Col 3</td><td>Col 4</td><td>Col 5</td><td>Col
6</td>
</tr>
</table>

Que fica assim:


Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 25


<ROWSPAN>
Este atributo pode ser aplicado a clulas (TH e TD) e define quantas linhas uma
mesma clula pode abranger. Assim como na marcao anterior, o padro uma clula
corresponder a uma linha.
Novamente, vamos ver exemplos:

<table border>
<tr>
<td rowspan=4>4 linhas</td>
<td>Col 2</td><td>Col 3</td><td>Col 4</td><td>
<tr>
<td>Col 2</td><td>Col 3</td><td>Col 4</td><td>
</tr>
<tr>
<td>Col 2</td><td>Col 3</td><td>Col 4</td><td>
</tr>
<tr>
<td>Col 2</td><td>Col 3</td><td>Col 4</td><td>
</tr>
</table>

Apresenta-se dessa forma:


Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 26


Mais elementos de controle

Vamos ver agora mais um conjunto de extenses que permitem maior controle
sobre tabelas. Estas so especialmente teis na criao de mltiplas tabelas intercaladas.

BORDER=<value>
Acrescentando um valor ao atributo BORDER possvel colocar tabelas em maior
destaque:

<table border=6>
<tr>
<td>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td>
</tr>
<tr>
<td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td>
</tr>
</table>


Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 27

CELLSPACING=<value>
Este atributo aplicvel marcao TABLE. Como padro, o Netscape 1.1 utiliza
espao 2 entre as clulas. Este atributo define o espao entre cada clula na tabela.

<table border cellspacing=7>
<tr>
<td>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td>
</tr>
<tr>
<td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td>
</tr>
</table>



CELLPADDING=<value>
Este atributo aplicado tambm marcao TABLE e define a distncia entre o texto
e a borda de cada clula.

Veja exemplo:

<table border cellpadding=8>

<tr>
<td>Clula 1</td> <td>Clula 2</td> <td>Clula 3</td>
</tr>
<tr>
<td>Clula 4</td> <td>Clula 5</td> <td>Clula 6</td>
</tr>
</table>


Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 28


A tabela mais compacta possvel seria definida como: <table border=0
cellspacing=0 cellpadding=0>

WIDTH=<value or percent>
Este atributo pode ser aplicado tanto a TABLE como a TH e TD. A ele tanto pode ser
associado um valor em "pixels" (ponto em tela grfica), como um valor percentual. Ou
seja, determina o quanto da tela uma tabela ou clula de tabela dever ocupar.
Vamos ver os exemplos:

<table border width=80%>
<tr>
<td>Omega</td>
<td>Vectra</td>
<td>Gol</td>
</tr>
<tr>
<td>Fusca</td>
<td>Opala</td>
<td>Braslia</td>
</tr>
</table>

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 29

Segundo exemplo - aplicando width a uma clula:

<table border>
<tr>
<td width=60%>Omega</td>
<td>Vectra</td>
<td>Gol</td>
</tr>
<tr>
<td>Fusca</td>
<td>Opala</td>
<td>Braslia</td>
</tr>
</table>



Tabela de comandos

Marcaes:

<table> e </table> = define incio e fim da tabela.
<tr></tr> = define cada linha da tabela
<td></td> = define cada clula da tabela. Um conjunto de clulas aparece sempre
delimitado pelas marcaes de linha (<tr></tr>).
<th></th> = define ttulos na tabela. Na pr&acute;tica so clulas onde o texto aparece em
destaque (negrito). Podem aparecer em qualquer posio na tabela.

Atributos

<border> = determina que uma tabela tenha bordas. Aparece sempre associado a marcao
<TABLE BORDER>.

<align> = Controla o alinhamento horizontal do texto em uma linha ou clula. Pode
aparecer associado a TR, TD ou TH. Aceita os valores:

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 30
left = alinha esquerda right = alinha a direita center = centraliza

Como nos exemplos:

<tr align=center> <td align=left> <th align=right>

<valign> = controla o alinhamento vertical do contedo de cada clula da tabela. Pode
aparecer associado a TR, TD ou TH. Aceita os valores:

top = alinha com o alto da clula
middle = alinha no meio
bottom = alinha com a parte de baixo da clula

Como nos exemplos:
<tr align=top>
<td align=middle>
<th align=bottom>

<rowspan> = Aparece associado a clulas (TD ou TH) e determina quantas linhas uma
clula abrange.

Ex: <rowspan=2> , <rowspan=3> ...

<colspan> = Aparece associado a clulas (TD ou TH) e determina quantas colunas uma
clula
abrange.

Ex: <colspan=2> , <colspan=3> ...

Atribuio de Valores

BORDER=<value> = define a largura da borda;
CELLSPACING=<value> = define espaamento entre clulas ;
CELLPADDING=<value> = define distncia entre o texto e a borda das clulas ;
WIDTH=<value or percent> = determina o quanto da tela uma tabela deve ocupar;


FORMULRIOS

Codificao bsica

Um formulrio comea com a marcao <FORM> e termina com </FORM> , mas
Outros itens devem ser especificados:

Primeiro, o formulrio precisa saber como enviar a informao para o servidor.
Existem dois mtodos, GET e POST.

METHOD="GET"
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 31
A maioria dos documentos HTML so recuperados a partir da requiso de uma
nica URL ao servidor. Assim, um formulrio que utilize este mtodo, envia toda sua
informao ao final da URL ativada.

METHOD="POST"
Este mtodo transmite toda a informao fornecida via formulrio, imediatamente
aps a URL ativada. Ou seja, quando o servidor recebe uma ativao de um formulrio
utilizando POST ele sabe que precisa continuar "ouvindo" para obter a informao. Este
o melhor mtodo.

Segundo, o formulrio precisa saber para onde enviar a informao. Esta a URL
sendo ativada a partir do formulrio, e ela referenciada atravs da marcao
ACTION. Esta URL em geral aponta para um script CGI que ir receber e decodificar
os resultados. Lembre-se que se voc est referenciando um script que reside no
mesmo servidor do formulrio, voc no precisa incluir a URL completa.

ACTION="/cgi-bin/post-query" para um script no seu servidor

ACTION="http://www.cr-df.rnp.br/cgi-bin/post-query" para um script no servidor do
CR/DF

Aps voc construir estas marcaes, seu formulrio geralmente ter a seguinte
estrutura:

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Marcaes de campos de entrada e HTML em geral

</FORM>


Observe que este formulrio utiliza o mtodo POST e envia as informaes
digitadas para um script local chamado post-query no diretrio /cgi-bin do servidor.
Outra informao importante: cada marcao de entrada em um formulrio tem
uma opo NAME associada, de tal forma que o script saiba qual o nome, isto , como
chamar cada valor digitado. Certamente voc pode definir mais de um campo de entrada
textual ou menu dentro de um formulrio, mas certifique-se de que cada um possui um
nome diferente.

Entrada de texto comum - TEXT

A forma mais simples de campo de entrada a marcao text. Este campo permite
a digitao de uma nica palavra ou linha de texto, e possui uma largura default de 20
caracteres.

Opes:

VALUE="" OPCIONAL
Utilizando a marcao VALUE voc especifica que texto aparecer no campo
quando o formulrio for exibido.
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 32

SIZE="" OPCIONAL
Esta marcao altera o tamanho deste campo exibido na tela.
Obs.: o usurio sempre poder digitar mais caracteres do que o tamanho do campo na tela,
pois o texto ir se deslocar a esquerda dentro do campo.

MAXLENGTH="" OPCIONAL
Se voc deseja limitar o nmero de caracteres que o usurio pode digitar, basta
usar esta marcao. O formulrio ir emitir um bip de erro se o usurio tentar digitar alm
do permitido em MAXLENGTH.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Em que escola voc estuda?
<INPUT TYPE="text" NAME="escola_nome" VALUE="FIEC" SIZE="20"
MAXLENGTH="25">
</FORM>



Obs.: O valor informado em NAME deve utilizar sublinhado em vez de espaos em
branco. Inserir espaos em branco nestes nomes pode causar problemas no servidor na
decodificao dos valores informados.
Se seu formulrio possui apenas um campo de entrada textual, ao teclar ENTER
neste campo o formulrio ser submetido, como se o usurio tivesse acionado o boto
SUBMIT.

Entrada de texto protegido, senha - PASSWORD

Marcaes de entrada do tipo password so idnticas aos campos do tipo text,
exceto pelo fato de todos os caracteres serem exibidos como asteriscos ( *).

Opes:

VALUE="" OPCIONAL
A marcao VALUE especifica um valor default para este campo.

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 33
SIZE="" OPCIONAL

Esta troca o tamanho do campo de password exibido na tela.

MAXLENGTH="" OPCIONAL
Limita o nmero de caracteres que o usurio pode informar como password.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Informe sua senha de acesso (10 caracteres):
<INPUT TYPE="password" VALUE="profs" NAME="sua_senha" SIZE="10"
MAXLENGTH="10">

</FORM>



Obs.: Se voc pretende utilizar MAXLENGTH para limitar o nmero de caracteres
informados, tenha certeza de especificar um SIZE com o mesmo tamanho, para fornecer
ao usurio o sentimento de qual a largura do campo. Esta regra no foi utilizada no
primeiro exemplo, que possui SIZE igual a 20, mas MAXLENGTH de 25, o que faz o
campo se deslocar nos ltimos 5 caracteres caso o valor informado possua mais do que 20
caracteres.
Mesmo que o valor default VALUE esteja representado por asteriscos, o usurio
pode visualizar o seu valor atravs da recuperao do fonte do hiperdocumento em HTML
(uma opo comum na maioria dos clientes WWW).

Entrada oculta - HIDDEN

Alm da marcao PASSWORD com um valor VALUE default, possvel
"esconder" informao passada dentro de blocos FORM com uma marcao HIDDEN.
Esta informao recebida pelo script de decodificao no servidor, mas no
diretamente exibida ao usurio no formulrio.

Opes:

VALUE="" OBRIGATRIO
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 34
Atravs da marcao VALUE, voc deve especificar o texto oculto a ser enviado
ao script processador do formulrio.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Voc no pode visualizar nada aqui embaixo, pois est oculto.
<INPUT TYPE="hidden" NAME="nome_oculto" VALUE="FIEC">

</FORM>



Obs.: Mesmo que o valor especificado em HIDDEN VALUE no seja exibido no
formulrio, o usurio pode v-lo atravs da operao de visualizao do fonte do
hiperdocumento, da mesma forma como no campo PASSWORD.

Entrada de vrias linhas de texto - TEXTAREA

A marcao TEXTAREA no utiliza o formato convencional INPUT TYPE="text"
dos exemplos anteriores. Ao contrrio, uma marcao <TEXTAREA> delimita o seu
incio e a marcao </TEXTAREA> o seu fim.

Opes:

ROWS="" OBRIGATRIO
Especifica o nmero de linhas da entrada textual.

COLS="" OBRIGATRIO
Especifica o nmero de colunas da entrada textual.

Texto default OPCIONAL
Se voc deseja que um texto seja exibido no campo textual ao abrir o formulrio,
simplesmente coloque este texto entre as marcaes de incio e fim da TEXTAREA.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 35
Esta rea reservada suas sugestes, dvidas e crticas que tenha a respeito da
FIEC:<BR>
<TEXTAREA NAME="critica" ROWS="4" COLS="50">
Gostaria de obter mais informaes sobre
o vestibular e os cursos oferecidos pela FIEC. Grato.
</TEXTAREA>

</FORM>



Obs.: O usurio dispe de Scrollbars para digitar alm do nmero de linhas e colunas
definidas em ROWS e COLS.


MENUS

Menus com opes - SELECT

Menu de opo nica
A marcao SELECT segue a mesma conveno de TEXTAREA. Ou seja, as
opes de menu ficam entre a marcao de incio <SELECT> e a de fim </SELECT>.

Opes:
OPTION OBRIGATRIO
Especifica uma opo presente no menu.

VALUE="" OPCIONAL
Especifica o valor da opo retornada ao servidor. Se no for definido, o nome da
opo enviado ao servidor.

SELECTED OPCIONAL
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 36
Por default, a primeira OPTION exibida no menu. Esta marcao estabelece uma
opo de menu a ser exibida inicialmente, quando no se deseja que seja a primeira
OPTION.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Em que cidade voc pretende estudar?
<SELECT NAME="cidades_estudar">
<OPTION>Campinas
<OPTION SELECTED>Indaiatuba
<OPTION>Itu
<OPTION VALUE="capital">So Paulo
<OPTION VALUE="outra_cidade">Outra cidade
</SELECT>

</FORM>



Obs.: Se voc possui mais do que 3 ou 4 opes de escolha, e o usurio s pode selecionar
uma, ento este elemento de entrada o melhor. As pessoas frequentemente utilizam
vrios RADIOBUTTONS, que veremos a seguir.
O script decodificador, no servidor, provavelmente apreciar uma nica palavra
para VALUE, em vez de mltiplas palavras. Voc sempre pode utilizar sublinhado para
separar expresses compostas.

Listas paginveis - SELECT com SIZE

A nica diferena entre este elemento de entrada e o anterior SELECT a
introduo da opo SIZE. Ela especifica quantas linhas com opes de menu sero
exibidas na janela.

Opes:
MULTIPLE OPCIONAL
Especifica que mltiplas opes podem ser selecionadas, em oposio ao exemplo
anterior do SELECT, onde apenas uma opo pode ser selecionada no menu.

SIZE="" OBRIGATRIO
Nmero de linhas (opes de menu) exibidas na janela.
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 37

OPTION OBRIGATRIO
Especifica uma opo da lista.

VALUE="" OPCIONAL
Especifica o valor da opo retornada ao servidor.
Se no for definido, o nome da opo enviado ao servidor.

SELECTED OPCIONAL
Esta opo determina uma OPTION default para ser selecionada.


<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Que cursos voc deseja fazer na FIEC?<BR>
<SELECT NAME="opcional" MULTIPLE SIZE="5">
<OPTION>Administrao de Empresas
<OPTION>Alimentos
<OPTION VALUE="pd" SELECTED>Tcnico em Informtica
<OPTION>Eletro-Eletrnica
<OPTION SELECTED>Edificaes
<OPTION>Turismo
</SELECT>

</FORM>



Obs.: Este elemento de entrada bom para listas com muitas opes, porque possvel
controlar quantas sero exibidas por vez.
Em alguns clientes WWW, necessrio teclar simultaneamente as teclas
CONTROL ou SHIFT para selecionar mltiplos itens.


Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 38
BOTES

Botes sim ou no - CHECKBOX

Retornando ao formato de INPUT TYPE="", a marcao CHECKBOXES
perfeita para escolher entre duas opes.

Opes:
VALUE="" OPCIONAL
Especifica o valor da opo enviado ao servidor. Se no for definido, o valor "on"
enviado ao script decodificador.

CHECKED OPCIONAL
Esta marcao define a opo selecionada por default.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

<INPUT TYPE="checkbox" NAME="boletim" CHECKED>Sim, eu desejo prestar o
vestibular da FIEC.
<P>
<INPUT TYPE="checkbox" NAME="info">Sim, eu gostaria de receber mais
informaes sobre os cursos.
</DL>

</FORM>



Obs.: Este elemento funciona melhor para respostas do tipo "sim/no" ou "on/off".
Voc pode simular uma lista SELECT MULTIPLE criando CHECKBOXES com o
mesmo NAME, mas diferentes VALUES

Botes com opes - RADIO

RADIOBUTTONS utilizam uma notao similar a de CHECKBOXES, contudo,
apenas uma opo pode ser escolhida.
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 39

Opes:
VALUE="" Obrigatrio
Especifica o valor da opo a ser enviado para o servidor. Se no for definido, um
valor "on" enviado ao script decodificador.

CHECKED RECOMENDADO
Esta marcao especifica qual boto estar selecionado por default. Uma vez que
uma seleo precisa ser feita, melhor prover uma opo pr-selecionada.

<FORM METHOD="POST" ACTION="/cgi-bin/post-query">

Suas preferncias:
<DL>
<DD>Qual a linguagem de programao que voc mais gosta?
<INPUT TYPE="radio" NAME="linguagem" VALUE="de" CHECKED>Delphi
<INPUT TYPE="radio" NAME="linguagem" VALUE="vb">Visual Basic
<INPUT TYPE="radio" NAME="linguagem" VALUE="fp"> Visual FoxPro
<DD>Qual navegador voc usa?
<INPUT TYPE="radio" NAME="navegador" VALUE="ie">Internet Explorer
<INPUT TYPE="radio" NAME="navegador" VALUE="ns">Netscape
</DL>

</FORM>



Obs.: Como j foi mencionado, RADIOBUTTONS no so boa escolha para listas com
muitos itens, porque o cliente tem problemas para exibir muitos botes. melhor utilizar o
menu SELECT.
Uma vez que um boto selecionado, ele no pode ser desmarcado sem selecionar
outro boto que possua o mesmo NAME. A seleo default pode ser restaurada com a
utilizao do boto RESET, introduzido a seguir.
Se voc utiliza vrios RADIOBUTTONS com o mesmo NAME e nenhum
VALUES, o servidor no ser capaz de dizer que boto foi selecionado, uma vez que o
valor "on" ser retornada para qualquer um deles.

Botes de submisso e limpeza - RESET E SUBMIT
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 40

Em vez do usurio corrigir cada INPUT, um boto RESET pode ser utilizado para
restaurar todos os campos a seus valores default, como se nenhuma informao houvesse
sido digitada.
E finalmente, o FORM precisa de uma opo para enviar toda a informao
digitada para o servidor, uma vez que o usurio terminou de preencher os todos os campos
de entrada. O boto SUBMIT transfere toda a informao para a URL especificada no
elemento ACTION.

Opes:
VALUE="" OPCIONAL
Especifica o texto a ser exibido no boto. Se no for especificado, os textos default
"Reset" e "Submit Query" sero colocados nos botes RESET e SUBMIT,
respectivamente.

NAME="" OPCIONAL
Se NAME for definido em um boto SUBMIT, o formulrio ir transmitir o valor
do contedo do elemento VALUE, permitindo que voc tenha mltiplos botes SUBMIT
numa espcie de verso simplificada de um RADIOBUTTONS.

<FORM METHOD="POST" ACTION="/cgi-bin/donothing">

Qual a profisso que voc pretende seguir? <INPUT TYPE="text"><BR>
Aperte este boto: <INPUT TYPE="radio" NAME="nada"><BR>
<INPUT TYPE="reset" VALUE="Limpar campos">
<INPUT TYPE="submit">

</FORM>



Obs.: Normalmente, o script decodificador retorna um hiperdocumento aps ele
processar a informao do formulrio.
Nem todos os clientes suportam mltiplos botes SUBMIT. melhor utilizar
apenas um nico boto SUBMIT para transmitir a informao digitada no formulrio.
Em alguns navegadores, quando no se define o VALUE do boto SUBMIT ou do
RESET, colocado por default a traduo, como no exemplo acima.
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 41


Estrutura Bsica - Frame Document

O "Frame Document" um arquivo onde se define a estrutura das janelas para seu
hiperdocumento em HTML. Quantas sero e qual sua distribuio em tela. Neste
documento as marcaes <body> e seu par </body> so substitudas por <frameset> e
</frameset>. Tal arquivo pode ser, por exemplo, o arquivo index.html de qualquer nvel na
estrutura do seu servio de informaes baseado em WWW.
Pronto, agora preciso definir cada frame/janela internamente (s) rea(s) de
frameset. Ou seja, as caractersticas de cada janela e seus "contedos" - URL inicial. Cada
janela/frame antecedido da marcao <frame>, como numa lista cada item antecedido
por <li>. Usualmente, uma URL vir associada a cada frame.

A estrutura mnima do frame document ser ento:


<html>

<head>
<title></title>
</head>

<frameset ...>

<frame src="URL">
<frame src="URL">

</frameset>

</html>


Ateno: Note que com apenas essas
marcaes o documento da estrutura - Frame
Document - no funciona. necessrio que
esteja definido algum atributo para as reas
de frameset, assim como associadas urls a
cada frame, como veremos mais adiante.

Ateno II: Voc poder ter - e
provavelmente ter - vrios <frameset>
intercalados. Da mesma forma como
possvel intercalar listas, ou tabelas em
HTML.

Cada uma destas marcaes - <frameset> e <frame> - aceita extenses, valores e
atributos, como veremos a seguir.

Sintaxe

Frameset
Frameset aceita os atributos ROWS e COLS, referentes divises horizontais(como
linhas em uma tabela) e verticais (como colunas) entre janelas na tela. Internamente a
marcaes FRAMESET s podero aparecer outras FRAMESET, FRAME ou
NOFRAMES.

Importante: No podem ser utilizadas as marcaes vlidas entre marcaes
<BODY></BODY> nem internamente a marcaes FRAMESET, nem antes dela, seno
FRAMESET ser ignorada.

Atributos
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 42

1. ROWS (<frameset rows=valor, valor, valor...>)
Define divises horizontais entre janelas. Vem sempre acompanhado de valores
associado, que definem quanto da tela cada janela vai ocupar. Dessa forma, para cada
janela a ser criada dever haver um valor associado. Estes valores devem vir separados por
vrgulas.
Este valor poder ser:
Numrico pixels (ROWS="30, 50") Refere-se a quantos pixels cada frame (ou
janela) deve ocupar. A desvantagem desta notao que no possvel ter controle do
valor total de pixels que o cliente do usurio compreende.
Percentual (ROWS="25%, 25%, 50%") Pode ainda ser um valor percentual,
sempre somando um valor de 100%. ( o mtodo mais simples).
Relativo (ROWS="2*,*") Desta forma, define-se um valor relativo. No exemplo, o
primeiro frame vai ocupar dois teros da tela, e o segundo um tero.

Exemplos :

1. Para dividir a tela do browser em trs janelas horizontais, sendo que a do meio mais
larga que as de cima e de baixo:

<html>
<head>
<title>Frames</title>
</head>

<frameset rows="20%, 60%, 20%">
<frame src="html18.html">
<frame src="html13.html">
<frame src="html16.html">
</frameset>

</html>

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 43


2.Trs janelas horizontais, sendo que a primeira e a segunda tem uma altura fixa, e o frame
central dever ocupar o restante do espao:

<html>

<head>
<title>Frames</title>
</head>

<frameset rows="75, *, 60">
<frame src="html18.html">
<frame src="html13.html">
<frame src="html16.html">
</frameset>

</html>

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 44


2. COLS (<frameset cols=valor, valor, valor.. >)
Funciona exatamente como a marcao anterior, no entanto, divide a tela em
frames ou janelas verticais.

Exemplos

Para dividir a tela do browser em trs janelas verticais:

1.Trs colunas, sendo que a do meio mais larga que as de cima e de baixo:

<html>

<head>
<title>Frames</title>
</head>

<frameset cols="25%, 50% ,25%">
<frame src="html4.html">
<frame src="html12.html">
<frame src="html5.html">
</frameset>

</html>

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 45


2.Trs janelas verticais, sendo que a primeira e a segunda tem uma altura fixa, e o frame
central dever ocupar o restante do espao:

<html>

<head>
<title>Frames</title>
</head>

<frameset cols="200, *, 300">
<frame src="html4.html">
<frame src="html12.html">
<frame src="html5.html">
</frameset>

</html>

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 46


Ateno, para intercalar janelas verticais e horizontais, ser necessrio definir
vrias reas "FRAMESET". Para cada rea delimitada como "FRAMESET" voc poder
definir nmero de linhas OU colunas. Veremos como faz-lo mais adiante. No possvel
definir COLS e ROWS para uma mesma rea FRAMESET.

Frame

A marcao FRAME define cada janela contida em uma rea frameset. Esta
marcao no necessita de uma tag de finalizao (</frame>) e aceita 6 atributos
possveis:

1. SRC="url"
O atributo SRC define a URL que ser exibida em cada frame.

2. NAME="nome_da_janela"
Este atributo utilizado para associar um nome a uma janela. Deve ser usado
quando uma janela - frame - for o destino de um link em outro documento (normalmente
no mesmo documento. Um frame apontando para outro. Tipo um ndice abrindo vrias
urls em outras janelas).
Este atributo opcional. Por padro, os frames no tem nome.
Importante, o nome_da_janela deve comear por caracter alfanumrico.

3. MARGINWIDTH="valor"
Esse atributo controla as margens esquerda e direita de cada frame, ou seja, a
distncia entre o contedo da pgina e as margens da janela. O valor associado ser um
valor absoluto em pixels. O menor valor aceito ser 1.
Este atributo opcional, caso no venha definido, o browser usar o seu padro
para definir as margens no frame/janela.

4. MARGINHEIGHT="valor"
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 47
Tambm um atributo opcional. Funciona exatamente como o anterior, s que
determina as margens superior/inferior em cada frame.

5. SCROLLING="yes/no/auto"
Novamente, um atributo opcional, que define se uma janela deve possuir barra de
rolagem ou no. Caso seja definido como YES, a janela sempre possuir uma barra de
rolagem visvel. Caso seja definido como NO, nunca haver barra de rolagem. E,
finalmente, se vier como AUTO, o browser aplicar a barra quando necessrio.
O padro AUTO, portanto, se o atributo scrolling no vier definido, o browser
aplicar a barra de rolagem, sempre que necessrio.

6. NORESIZE
Este atributo no possui valor associado. Quando ele no aparece, o usurio poder
alterar o tamanho da janela, "arrastando" com o cursor a borda da mesma. O padro que
todas as janelas possam ter seu tamanho alterado. NORESIZE opcional
Um frame, com todos os atributos definidos seria escrito assim, por exemplo:

<frame src=http://www.cr-df.rnp.br name=home marginwidth=5
marginheight=5 scrolling=auto noresize>

Noframes

Esta marcao possibilita que se crie uma opo de navegao na pgina para
quem no possui um browser que entende frames.
Esta marcao aparece no documento de estrutura "Frame document", e sempre
usada em pares (<noframes>.. contedo... </noframes>).
Quando o acesso for feito atravs de um browser que entenda frames, o que estiver
entre as marcaes "noframes" ser simplesmente ignorado.
Internamente a uma rea "noframes" dever ser usada a estrutura padro de
documentos html (<head> </head>, <title> </title> <body> </body>, etc...).

Intercalando Frameset - exemplos

Para tornar mais claro como se constrem mltiplas e intercaladas janelas -
divises horizontais e verticais - utilizando das marcaes de frames, seguem abaixo dois
exemplos de construo de documentos com mltiplas janelas.

Exemplo 1

<html>

<head>
<title>Frames</title>
</head>

<frameset rows="30%, 70%">
<frameset cols="33%, 33%, 33%">
<frame src="html10.html">
<frame src="html5.html">
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 48
<frame src="html2.html">
</frameset>

<frameset cols="50%, 50%">
<frame src="html4.html">
<frame src="html12.html">
</frameset>
</frameset>

</html>



Exemplo 2:

<html>

<head>
<title>Frames</title>
</head>

<frameset rows="15%, 85%">
<frame src="html10.html">

<frameset cols="25%, 75%">
<frame src="html5.html">

<frameset rows="85%, 15%">
<frame src="html2.html">
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 49
<frame src="html4.html">

</frameset>
</frameset>
</frameset>
</html>



Links entre frames

A marcao TARGET, permite que se controle em qual janela um link especfico
ser exibido quando o usurio clicar sobre ele. Por exemplo, pode-se ter uma janela lateral
com uma espcie de ndice do servio de informao e outra janela em que a navegao
propriamente dita vai ocorrer. Desta forma, o ndice est permanentemente disponvel
durante toda a consulta.
Para utilizar este recurso voc dever:
1. Atribuir um "name" a cada frame em seu "frame document" (name="valor").
2. No documento onde ser criado um link, que vai aparecer em outra janela, ao criar o
link, acrescentar a marcao target="valor"" ncora, da seguinte forma:
<a href="URL" target="valor">

Onde este valor idntico quele associado marcao name no frame document.

Exemplo:

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 50




O FRAME DOCUMENT DEVER
SER ESCRITO ASSIM:
O DOCUMENTO QUE CONTM O
NDICE DE NAVEGAO
(LINKS.HTML), SER ASSIM:
<html>

<head>
<title>frames</title></head>

<frameset rows="80%, 20%">

<frame name="navegar"
src="html3.html">
<frame src="links.html">

</frameset>
</html>

<html>

<head><title>Frames</title>
</head>
<body>
<a href="http://www.fiec.com.br/"
target="navegar"> [link para a FIEC]</a>
<a href="http://www.cade.com.br/"
target="navegar"> [link para o cad]</a>
<a href="http://www.altavista.com.br/"
target="navegar"> [link para o
altavista]</a>
</body>
</html>

Cartela de Comandos

Marcao Funo / caractersticas
Estrutura Bsica
<html> e </html> Delimita o "frame document", como em qualquer
arquivo html normal.
<head></head> Define cabea do documento, novamente, como
em qualquer arquivo html.

<frameset></frameset> Delimita as janelas a serem usadas no documento.
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 51
Podem haver vrios frameset intercalados.
Controla o comportamento das janelas atravs de
seus atributos.
<frame src="URL"> Define cada janela/frame. Normalmente possui
uma URL associada. Aceita atributos e valores.
Sintaxe
Para Frameset
<frameset rows="valor, valor,
valor">
Define quantas linhas - janelas horizontais - e sua
ocupao na tela, para cada rea frameset.
Aparecero tantos valores quantas forem as
janelas. Os valores relativos a cada janela devero
ser separados por vrgulas.
Cada valor associado poder ser:

Numrico - em pixels = <frameset rows="30,
50">
Percentual = <frameset rows="25%, 25%, 50%">
Relativo = <"2*,*">;
<frameset cols="valor, valor,
valor">
Define quantas colunas - janelas verticais - e sua
ocupao da tela. Funciona exatamente como a
marcao interior (associao de valores, com as
mesmas opes).
Para Frame
<frame SRC="URL"> associa uma url a uma janela
<frame NAME="valor"> associa um nome a uma janela
<frame
MARGINWIDTH="valor">
determina margem direita/esquerda em cada frame
<frame
MARGINHEIGHT="valor">
determina margem superior/inferior em cada
frame
<frame
SCROLLING="yes/no/auto">
define presena, ausncia, ou atribuio
automtica (pelo browser) de barras de rolagem
<frame NORESIZE > mantm fixo o tamanho de cada janela/frame
Para Noframes
<noframe></noframe> delimita rea para navegao opcional, destinada a
quem usa browser que no entenda 'frame'.
Internamente, recebe a marcao <body></body>
delimitando o documento, e todas as demais
marcaes HTML.
Target
<a href="URL" target="name"> Define a janela em que ser exibido um link ao ser
ativado. O name associado dever ser idntico ao
name atribudo a janela de destino no frame
document.






Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 52


Folhas de Estilo ou Style Sheets

Introduo
Se voc se interessa pela criao de home pages j deve ter ouvido falar em
Cascading Style Sheets, ou CSS apenas. Trata-se de um padro de formatao para pginas
web que vai alm das limitaes impostas pelo html. Proposto pelo W3 Consortium
<http://www.w3.org> - uma espcie de comit que define os padres de programao para
a WWW - o CSS foi introduzido pela primeira vez pela Microsoft, no lanamento do
Internet Explorer 3.0.
O Cascading Style Sheet permite uma versatilidade maior na programao do
layout de pginas web sem aumentar o seu tamanho em Kb, pois oferece vrias
possibilidades que antes s eram conseguidas com a utilizao de gifs e jpgs.
Basicamente, o CSS permite ao designer um controle maior sobre os atributos tipogrficos
de uma home page, como tamanho e cor das fontes, espaamento entre linhas e caracteres,
margem do texto, entre outros. Introduziu tambm s pginas a utilizao de layers,
permitindo a sobreposio de texto sobre texto ou texto sobre figuras.
Para visualizar inovaes de layout programadas em Cascading Style Sheet
necessrio um Internet Explorer verso 3.0 ou superior. O Netscape incorporou o CSS em
seu cdigo a partir da verso 4.0. Se voc ainda no possui um browser 4.0, pode atualiz-
lo na nossa seo de download.


O que Style Sheets podem fazer
Utilizando uma boa combinao de tags do cdigo de programao html, como
<B>, <I>, <H1> e <FONT>, podemos criar pginas interessantes sob o ponto de vista do
design. Entretanto, as possibilidades que elas oferecem so bastante limitadas se
comparadas s oferecidas pelo CSS.
Comandos de Style Sheets podem ser aplicados a toda e qualquer tag,
modificando seus atributos. At mesmo a tag <P> possui um </P> opcional e permite que
voc defina os atributos de tudo o que fiar compreendido entre as duas.
Voc pode, por exemplo, trocar os atributos de uma tag <B>, que tradicionalmente
adiciona negrito a uma palavra.
O Style Sheets permite a voc, por exemplo, configurar todos os comandos <B> em
uma pgina ou em um site inteiro de uma s vez.

Adicionando Estilo a Sua Pgina
Style Sheets podem ser utilizados de trs maneiras diferentes: local (modificando
uma tag especfica de uma pgina), geral (modificando determinados atributos para a toda
a pgina) ou global (quando criamos um modelo que ser aplicado a vrias pginas
simultaneamente).
Adicionando estilo localmente:
Style Sheet pode modificar os atributos de uma nica tag especfica, em um
determinado ponto de uma pgina.
Os comandos em CSS aplicados localmente seguem a seguinte sintaxe:
<tag STYLE="propriedade:valor; propriedade, valor;"...>
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 53
Pelo cdigo html normal, o tamanho mximo de uma fonte que podemos obter
estipulado pela tag <FONT>. Utilizando o CSS podemos aumentar o tamanho com que as
letras seriam tradicionalmente mostradas.

<HTML>
<HEAD>
<TITLE>Folhas de estilo</TITLE>
</HEAD>
<BODY>
<FONT FACE="Trebuchet MS, Arial, Helvetica" SIZE="+7">FIEC</FONT>
<P>Introduzindo comandos de CSS na tag podemos modificar seus atributos para mostrar
a frase com outra cor e em tamanho maior.
<P>Aparecer desta maneira:<P>
<FONT style="font-size:50pt; color:pink; line-height:30pt; font-family:Trebuchet MS,
Arial, Helvetica;">FIEC</FONT>
</BODY>
</HTML>

Veja o resultado:



Com o CSS no h limites para o tamanho da fonte. Ele pode ser definido em
pontos, pixels e outras unidades. Veremos isso em detalhes mais adiante.
Adicionando estilo geral:
Para criar um modelo padro de CSS que ser aplicado a toda uma pgina,
introduzimos o comando STYLE no cabealho do documento, entre a tag HTML e a tag
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 54
BODY. Dessa forma, tudo o que vier no contedo da pgina obedecer aos comandos CSS
estipulados uma nica vez. Veja a seguir:

<HTML>
<TITLE>Folhas de estilo</TITLE>
<HEAD>
<STYLE type="text/css">

<!--
h1 {font: 25pt "Trebuchet MS, Arial, Helvetica"; color: red}
h2 {font: 20pt "Trebuchet MS, Arial, Helvetica"; color: blue}
p {font: 17pt "Corrier, Times"; color: black}
-- >
</STYLE>
</HEAD>
<BODY>
<H1>Folhas de estilo</H1>
<H2>Repare nas diferenas</H2>
<P> O que voc achou??? </P>
Dessa forma, tudo o que vier no contedo da pgina obedecer aos comandos CSS
estipulados uma nica vez.
</BODY>
</HTML>

Veja o resultado:


Note que o que est dentro da tag STYLE aparece em comentrio <!-- -->. Isso
serve para evitar problemas com browsers que no suportam CSS. Estando entre
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 55
comentrios, os atributos funcionaro normalmente em browsers com capacidade para
CSS e sero desprezados por browsers mais antigos.

Classes
Podemos tambm aplicar classes nas especificaes gerais de CSS para definir
diferentes atributos para uma mesma tag. Se por exemplo voc quiser um pargrafo em
vermelho para grifar textos importantes, outro em cinza para textos normais, dever
proceder desta maneira:

Especificao geral:
<!--
P.importante {font: 20pt "Trebuchet MS, Arial, Helvetica"; color: red}
P.normal {font: 15pt "Trebuchet MS, Arial, Helvetica"; color: gray}
-- >
No HTML os Cdigos parecero assim:
<P CLASS="importante"> Este texto ser vermelho</P>
<P CLASS="normal">Este texto ser cinza</P>

Veja como ficar:



Adicionando estilo global:
Podemos criar um nico modelo de Style Sheets para ser aplicado a mltiplas
pginas. Para tanto, devemos construir um modelo separado de Style Sheets e salv-lo em
um arquivo de terminao .css. Esse modelo pode ser aplicado a qualquer pgina, apenas
referindo-se ao arquivo .css no seu cabealho.
A seguir um tpico modelo global de CSS, definindo margens, cores, fontes e
outros atributos:

<HTML>
<style type="text/css">
<--
body {font: 10pt "Verdana, sans-serif"};
h2 {font: 50pt "Verdana, sans-serif"; font-weight: bold; color: #58F734}
h3 {font: 13pt/15pt "Verdana, sans-serif"; font-weight: bold; color: maroon; margin-left:
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 56
0.5in; margin-top: -10px; line-height: 30px}
em {margin-top: -105px}
p {font: 10pt/12pt "Verdana, sans-serif"; color: black; margin-left: 0.5in; margin-top: -
10px; line-height: 20px}
-->
<BODY></BODY>
</HTML>

Para aplicar o modelo a uma pgina html especfica, basta chamar o arquivo .css no
seu cabealho:

<HEAD>
< link rel=stylesheet href="exemplo.css" type="text/css">
</HEAD>

Veja o resultado:



Outra maneira de aplicar o modelo CSS import-lo. A diferena entre linc-lo a
pgina como no exemplo acima e import-lo que a segunda maneira permite acrescentar
estilos na prpria pgina que est editando, sem precisar alterar o modelo global (o
arquivo .css). Veja o exemplo a seguir:

<HTML>
<STYLE TYPE="text/css">
<!--
@import url(exemplo.css);
B { color:red; font-size:16pt }
H1 { font-family: Arial, Helvetica }
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 57
</STYLE>
<HEAD>
<TITLE>Folhas de estilo</TITLE>
</HEAD>
<BODY>
<H1>Style Sheets</H1>
<H2>Folhas de estilo</H2>
<P>
<B>Os negritos sero alterados</B>, mas o texto segue o modelo exemplo.css.
</P>
</BODY>
</HTML>



IMPORTANTE: No caso de uma mesma pgina ter mais de um estilo aplicado, para
saber qual predominar deve-se pensar da seguinte forma: o estilo mais especfico
prevalece.
No caso, se uma pgina contm uma especificao de estilo geral ou global, voc
pode acrescentar novos atributos locais diferentes. Dessa forma:
Especificaes locais prevalecem sobre
Especificaes gerais que prevalecem sobre
Especificaes globais que, por sua vez, prevalecem sobre
Especificaes default dos comandos de html

ARRUMANDO A PARTIR DAKI

Aplicando CSS a fontes

Comandos:
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 58
font-family
font-size
font-weight
font-style
text-transform
text-decoration
Font-family o comando CSS utilizada para indicar qual a fonte que uma tag ou
documento ir mostrar. Em uma aplicao geral de CSS a uma pgina, a linha de comando
parecer com esta:
P { font-family: Trebuchet MS, Arial, Helvetica }
No exemplo acima, tudo o que estiver entre as tag <P> e </P> no seu documento
html ser visualizado em Trebuchet MS. A razo de definir mais de uma fonte deve-se ao
fato de que nem todos os computadores possuem as mesmas fontes instaladas. No caso, se
o computador no possuir a Trebuchet MS instalada em seu hard disk, automaticamente
passar para a segunda opo e mostrar o texto em Arial.
Deve-se observar que o nome da fonte especificadas na linha de comando do CSS
deve ser exatamente igual ao nome da mesma no diretrio "fontes" do computador. A
fonte "Courier", por exemplo, leva este nome na plataforma Mac, mas se chama "Courier
New" no Windows.
Font-size utilizado para definir o tamanho pelo qual as fontes sero apresentadas
na tela. H trs formas bsicas para definio de tamanho:
1. pontos, pixels, cm e outras unidades de medida;
2. palavras-chave;
3. percentagem.

Unidades de medida:
Ponto uma medida familiar para designers, e pode ser usada para definir o
tamanho de um elemento em uma pgina html. Tem sido a medida mais utilizada na
programao em CSS pois funcionam bem em todos os browsers e plataformas
operacionais. A nica observao sobre esta medida que as fontes costumam aparecer
um pouco maiores na tela dos PCs do que nos monitores da linha Mac. Uma linha de
comando geral em CSS parecer assim:
P { font-size: 20pt } para pontos ou: B { font-size: 20px } para pixels, por exemplo.
As unidades de medida que podem ser utilizadas so:
- pt: pontos
- px: pixels
- in: inches
- cm: centmetros
- mm: milmetros
- pc: picas
- em: sem
- ex: x-weight
Pixel uma medida familiar aos web designers. Pode dar uma boa noo do
tamanho que a fonte aparecer na tela, mas infelizmente a utilizao dessa medida tem
causado problemas para na impresso das pginas em papel.
Como j foi dito anteriormente, no h limites para a especificao do tamanho de
uma fonte em CSS. Para quem estava acostumado a utilizar as tag <FONT> que permitia
apenas sete tamanhos para a visualizao de uma palavra, a possibilidade de aplicar
qualquer tamanho atravs do atributo font-size ser bastante til. Compare:
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 59

HTML tradicional: tag <FONT>

<HTML>
<HEAD>
<TITLE>Folhas de estilo</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Veja a diferena com a tag FONT</H1>

<Font size= "1">Tamanho 1</Font> <Br>
<Font size= "2">Tamanho 2</Font> <Br>
<Font size= "3">Tamanho 3</Font> <Br>
<Font size= "4">Tamanho 4</Font> <Br>
<Font size= "5">Tamanho 5</Font> <Br>
<Font size= "6">Tamanho 6</Font> <Br>
<Font size= "7">Tamanho 7</Font>

</CENTER>

</BODY>
</HTML>



Comando Font-size:

Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 60
<HTML>
<HEAD>
<TITLE>Folhas de estilo</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>Veja a diferena com font-size</H1>

<A STYLE="font-size: 5pt">5 Pontos</A> <Br>
<A STYLE="font-size: 10pt">10 Pontos</A> <Br>
<A STYLE="font-size: 15pt">15 Pontos</A> <Br>
<A STYLE="font-size: 30pt">30 Pontos</A> <Br>
<A STYLE="font-size: 50pt">50 Pontos</A> <Br>
<A STYLE="font-size: 100pt">100...</A>

</CENTER>

</BODY>
</HTML>


Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 61

Palavras-chave:
Outra maneira de determinar tamanhos de fonte em CSS utilizar palavras chave.
A seguir, a lista de comandos em ordem crescente:
xx-small
x-small
small
medium
large
x-large
xx-large

Esses tamanho pr-configurados deixam o browser decidir qual o tamanho exato
de fonte apropriado para cada palavra-chave. Por exemplo, x-large mostrado em 28
pontos no Netscape 4.0, em 24 pontos no IE 4 e em 18 pontos no Internet Explorer 3 para
Windows 95.

Percentagem:
O tamanho das fontes tambm pode ser determinado segundo regras de
percentagem:
P { font-size: 12pt }
I { font-size: 200% }
No exemplo acima, todo o texto que estiver compreendido entre as tags <P> e </P>
no corpo da pgina ser mostrados em 12 pontos, assim como todas as palavras em itlico
entre as duas tags sero apresentadas em um tamanho duas vezes maior.
font-weight o comando CSS que controla a propriedade bold (negrito) de uma
tag:
H1 { font-weight: bold }
No exemplo acima, todas as palavras da pgina que estiverem compreendidas entre
as tags <H1> e </H1> sero mostradas em negrito. Da mesma forma voc pode configurar
"font-weight : normal" se quiser desativar todos os bolds de uma pgina. Podemos
tambm especificar as caractersticas do negrito atravs de valores numricos: 100, 200,
300...
400 o valor normal de uma fonte sem negrito. 900 o valor mximo de negrito
disponvel. Para uma fonte Arial, por exemplo, um browser com apenas a verso normal e
a verso bold poder mostrar a verso normal para valores de 100 600 e a verso bold
para valores de 700 900.
Font-style o comando CSS que controla a propriedade italic de uma tag.
H1 { font-style: italic }
No exemplo acima o browser ir procurar uma verso itlico da fonte para
apresentar o texto compreendido entre as tags <H1> e</H1>. Algumas fontes tem uma
verso chamada "oblique" em lugar de "italic". Nesse caso, use a palavra oblique como
valor para font-style.
Text-transform serve para controlar os atributos maisculas e minsculas de um
texto:
P { text-transform: uppercase }
No exemplo, tudo o que estiver compreendido entre as tags <P> e </P> ser
mostrado em maisculas COMO NESTE EXEMPLO.
Os outros valores possveis para o text transform so:
Apostila de HTML Professor Srgio Furgeri

FIEC Fundao Indaiatubana de Educao e Cultura Pgina: 62
P { text-transform: lowercase }
Tudo entre as tags <P> e </P> ser mostrado em maisculas como neste exemplo.
P { text-transform: capitalize }
Tudo entre as tags <P> e </P> ser mostrado com as iniciais maisculas Como
Neste Exemplo.
P { text-transform: none }
Tudo entre as tags <P> e </P> ser mostrado normalmente.
Observao: O Internet Explorer 3.0 no aceita o comando text-transform.
Text-decoration serve para controlar o sublinhado das palavras.
B { text-decoration: underline }
No exemplo acima todas as palavras em negrito da pgina aparecero tambm
sublinhadas. As opes so:
underline: sublinha as palavras compreendidas e dentro de uma tag. Exemplo
overline: coloca uma linha em cima da palavra compreendida entre as tags.
Exemplo
line-trought: coloca uma linha em sobre o texto. Exemplo
blink: sua palavra pisca (lembram da tag blink?). Exemplo
none: tira o sublinhado de uma palavra (inclusive de um link). Exemplo

Observao: o atributo overline ainda no mostrado no Netscape e o atributo
blink no funciona em nenhuma das verses do Internet Explorer.
O mais interessante do comando text-decoration que utilizando o atributo none
finalmente podemos eliminar o sublinhado de um link! Se voc inserir as linhas abaixo no
cabealho de suas pginas, todos os sublinhados dos links desaparecero. Mas no esquea
de configur-los para serem de outra cor, ou ningum saber o que e o que no um
link...
<style type="text/css">
<!--
A { text-decoration: none }
-->
</style>