Apostila HTMLCSS

1
Apostila de HTML
e CSS

2

HTML bsico 1........................................................................................................ 4
Definio.............................................................................................................. 4
Requisitos para o desenvolvimento de uma pgina WEB................................... 4
TAGs ................................................................................................................... 4
1.1 Iniciando um documento........................................................................... 5
<HTML> </HTML>....................................................................................... 5
<HEAD>... </HEAD>....................................................................................... 5
<TITLE>... </TITLE>....................................................................................... 5
<BODY>... </BODY>....................................................................................... 5
1.2 Trabalhando com textos............................................................................ 8
1.2.1 Ttulos e Subttulos.................................................................................. 8
1.2.2 Estilos de texto................................................................................. 10
1.2.3 Fontes.............................................................................................. 12
1.3 Quebras de linha................................................................................. 14
1.4 Linhas Horizontais............................................................................... 14
2. Caracteres Especiais ........................................................................................ 16
3. Imagens............................................................................................................. 17
4. LINKS................................................................................................................ 19
4.1 Links para o mesmo diretrio....................................................................... 19
4.2 Links para outro diretrio............................................................................. 20
4.3 Parmetro NAME......................................................................................... 21
5. Listas................................................................................................................. 22
5.1 - Criando listas ordenadas ....................................................................... 22
5.2 - Criando listas no ordenadas ................................................................ 23
6. Tabelas.............................................................................................................. 25
6.1 - Construindo tabelas com o elemento TABLE............................................ 25
6.1.1 - O ttulo da tabela (elemento CAPTION).............................................. 25
6.1.2 - TABLE HEADINGS (elemento TH) ..................................................... 25
6.1.3 - TABLE DATA (elemento TD) .............................................................. 25
6.1.4 - END OF TABLE ROW (elemento TR)................................................. 26
6.2 - Atributos para a tabela............................................................................... 26
6.2.1 - BORDER............................................................................................. 26
6.2.2 - ALIGN................................................................................................. 27
6.2.3 - VALIGN............................................................................................... 28
6.2.4 CELLSPACING.................................................................................. 28
6.2.5 CELLPADDING.................................................................................. 29
6.2.6 ROWSPAN......................................................................................... 29
6.2.7 COLSPAN.......................................................................................... 30
6.2.8 Largura da clula................................................................................ 31
6.2.9 Cor de fundo das clulas.................................................................... 31
7. Formulrios ....................................................................................................... 33
7.1 - Construindo formulrios com o FORM...................................................... 33
7.2 - Atributos para FORM................................................................................. 33
7.2.1 GET.................................................................................................... 33
7.2.2 POST ................................................................................................. 33
7.2.3 INPUT ................................................................................................ 33
3
7.2.3.1 - Tipos de elementos TYPE............................................................ 34
7.2.3.1.1 - TYPE="RADIO"...................................................................... 34
7.2.3.1.2 - TYPE="PASSWORD"............................................................ 35
7.2.3.1.3 - TYPE="CHECKBOX"............................................................. 35
7.2.3.1.4 - TYPE="SUBMIT" ................................................................... 36
7.2.3.1.5 - TYPE="RESET"..................................................................... 36
7.2.4 TEXTAREA........................................................................................ 36
7.2.5 SELECT ............................................................................................. 37
7.2.6 Exemplo completo de formulrio........................................................ 37
8. Frames.............................................................................................................. 40
8.1 - Estrutura.................................................................................................... 40
8.2 - Sintaxe....................................................................................................... 40
8.3 FRAMESET .............................................................................................. 41
8.3.1 - ROWS................................................................................................. 41
8.3.2 COLS ................................................................................................. 42
8.4 FRAME ..................................................................................................... 42
8.4.1 SRC.................................................................................................... 43
8.4.2 - NAME.................................................................................................. 43
8.4.3 SCROLLING ...................................................................................... 43
8.4.4 NORESIZE......................................................................................... 44
8.4.5 TARGET............................................................................................. 45
8.5 BORDER .................................................................................................. 45
9. Tabelas de Cores.............................................................................................. 47
10. CSS................................................................................................................. 48
10.1 O que CSS?............................................................................................ 48
10.2 Como criar estilos...................................................................................... 48
10.3 Tipos de Folhas de Estilo........................................................................... 49
10.3.1 Estilos Externos................................................................................... 50
10.3.2 Estilos Incorporados............................................................................ 50
10.3.3 Estilos Inline........................................................................................ 51
10.4 Tags Personalizadas ................................................................................. 51
10.4.1 Utilizando a TAG <DIV>...................................................................... 53
10.4.2 Utilizando a TAG <SPAN>.................................................................. 53
10.5 Atalhos e atributos de CSS........................................................................ 55
10.5.1 Atalhos de CSS................................................................................... 55
10.5.2 Atributos de CSS................................................................................. 55
4

HTML bsico 1

Definio

HTML significa Hyper Text Markup Language e a linguagem de marcao de
hipertexto, ou seja, a linguagem na qual so escritas as pginas da Web,
interpretada pelo navegador.
As informaes esto ligadas na forma de pginas ligadas entre si. A pgina
transferida de um computador remoto para o usurio, onde o browser faz o
trabalho de interpretar os cdigos naquele documento e mostra a pgina que o
usurio v. A Web est estruturada em dois princpios bsicos: HTTP(Hiper Text
Transfer Protocol) e HTML (Hiper Text Markup Language).
HTTP o protocolo de transferncia de hipertexto, ou seja, o protocolo que
permite a navegao na Web, com o simples clicar do mouse sobre o texto (ou
imagem) que esteja associado a outro link.

Requisitos para o desenvolvimento de uma pgina WEB

Conhecer a linguagem HTML para escrever o cdigo fonte de sua pgina;
Editor de texto para gerar o seu cdigo fonte (bloco de notas, Front Page,
Dremweaver, entre outros);
Um navegador de internet (browser) para visualizar as suas pginas
(Internet Explorer, Netscape, etc).

TAGs

Os comandos HTML so chamados de TAGs, compreendem de marcas padres
que so utilizadas para fazer indicaes a um browser.
Assim como em outras linguagens, os comandos tm uma sintaxe prpria, e
seguem algumas regras:

As TAGs aparecem sempre entre sinais de menor que (<) e maior que
(>);
Geralmente so utilizadas aos pares, sendo que a TAG de finalizao de
um comando qualquer finalizada com a precedncia de uma barra (/).

5
Exemplos:

TAG nico:
<br >
TAG duplo:
<cent er > xxx </ cent er >

1.1 Iniciando um documento

Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>.
Uma pgina HTML possui trs partes bsicas: estrutura principal, um cabealho e
um corpo de pgina.

Possui uma estrutura dividida em 4 TAGs bsicas:

<HTML> . . . </ HTML>
<HEAD> . . . </ HEAD>
<TI TLE> . . . </ TI TLE>
<BODY> . . . </ BODY>

<HTML> </HTML>

So usados para delimitar os comandos HTML, indicam o incio e o fim de um
documento.

<HEAD> ... </HEAD>

Usado para indicar parmetros de configurao do documento, tambm utilizado
para exibir o ttulo na barra de ttulos do browser.

<TITLE> ... </TITLE>

Indica o ttulo do documento para o browser. Esta TAG deve estar sempre dentro
das TAGs <HEAD></HEAD>.

<BODY> ... </BODY>

Envolvem a seo de corpo do documento. Aqui fica o contedo principal da
Home Page.
6
Opcionalmente podemos indicar uma cor para o fundo da pgina, usando a opo
BGCOLOR, ou um arquivo de imagem para formar o fundo, usando a opo
BACKGROUND.

Iniciaremos a nossa primeira pgina editando o cdigo no Bloco de Notas.

Siga os passos abaixo:

1. Crie uma pasta chamada OrgaoColegiado.
2. Clique em Arquivo/Novo/Documento de Texto
3. Nomeie o arquivo como index.html.
4. Abra o arquivo, voc ir notar que a pgina est em branco, pois ainda no
escrevemos nenhum cdigo.
5. Clique com o boto direito do mouse sobre o arquivo e clique em Editar, ele
ir abrir o bloco de notas com seu contedo vazio.
6. Copie e cole o exemplo abaixo, salve o arquivo .txt e feche.
7. Depois abra novamente o arquivo HTML.

Exemplo com cor de fundo na pgina:

<ht ml >
<head>
<t i t l e>
Cur so de HTML
</ t i t l e>
</ head>
<body bgcol or =" gr een" >
Cor po da pgi na HTML comcor de f undo.
</ body>
</ ht ml >

7

Agora substitua o cdigo acima pelo exemplo abaixo seguindo os passos 5, 6 e 7.

Exemplo com imagem de fundo na pgina:

<ht ml >
<head>
<t i t l e>
Cur so de HTML
</ t i t l e>
</ head>
<body backgr ound=" f undo. gi f " >
Cor po da pgi na HTML comi magemde f undo.
</ body>
</ ht ml >

8

1.2 Trabalhando com textos

No corpo do documento onde estar localizado o ttulo e subttulos, texto,
imagens, ligaes com outras pginas, etc. Nesta seo veremos como trabalhar
com os textos.

1.2.1 Ttulos e Subttulos

Para demarcar ttulos e subttulos, use os TAGs de HEADER (H1 a H6),
juntamente com a opo CENTER.

Veja alguns exemplos:

Texto inserido entre <H1>e </H1>:


9

Texto inserido entre <H3><CENTER>e </CENTER></H3>:

Observaes: A TAG CENTER tm a funo de deixar o cabealho ou texto
centralizado.

Exemplo:

Crie um novo arquivo chamado ExemploTitulo.html e insira o cdigo abaixo.

<ht ml >
<head>
<t i t l e>
Cur so de HTML
</ t i t l e>
</ head>
<body>
<H1>T t ul o comH1: r gos Col egi ados</ H1>
<H6><CENTER>T t ul o comH6 cent r al i zado: r gos
Col egi ados</ CENTER></ H6>
</ body>
</ ht ml >

10

1.2.2 Estilos de texto

Alm da TAG <CENTER>...</CENTER>existem as seguintes TAGs
que podem ser utilizadas para a formatao de um texto.

<B>...</B>
Aplica o estilo negrito.

<I>...</I>
Aplica o estilo itlico.

<U>...</U>
Aplica o estilo sublinhado (nem todos os browser o reconhecem).

<SUP>...</SUP>
Faz com que o texto fique
sobrescrito
.

<SUB>...</SUB>
Faz com que o texto fique
subscrito
.

<PRE>...</PRE>
Utiliza a pr-formatao, ou seja, deixa o texto da maneira em que foi
digitado.

11

<P>
A TAG responsvel pela quebra de pargrafos a <P>que finaliza o
pargrafo e insere automaticamente uma linha em branco entre pargrafos.

Sintaxe do comando:

<P al i gn=posi o> Text o do par gr af o.

Posio pode ser:
Left: alinhamento esquerda.
Center: centralizado
Right: alinhamento direita

Exemplo:

Crie um novo arquivo com o nome EstiloTexto e insira o cdigo abaixo:

<ht ml >
<body>
<t i t l e>Cur so de HTML</ t i t l e>

<B>Est i l o negr i t o. </ B>
<br >

<I >Est i l o i t l i co. </ I >
<br >

<U>est i l o subl i nhado ( nemt odos os br owser o
r econhecem) </ U>
<br >

<SUP>Text o sobr escr i t o. </ SUP>
<br >

<SUB>Text o subscr i t o. </ SUB>
<br >

<PRE>Est e umpequeno t ext o
comest i l o
pr - f or mat ado. </ PRE>

<p al i gn=" cent er " > Est e umexempl o do pr i mei r o
par gr af o cent r al i zado.
<p> Est e umexempl o do segundo par gr af o.
12
</ body>
</ ht ml >

1.2.3 Fontes

Para inserir em sua pgina um texto com fontes de tamanhos, cores e tipos
diferentes utilizamos a TAG <FONT>... </FONT>.

Sintaxe do comando:
<FONT si ze=n f ace=nome col or =cor >
TEXTO
</ FONT>

Onde:
SIZE=n : n varia de 1 a 7 e 3 o valor padro da maioria dos
navegadores;
FACE=nome : nome da fonte a ser utilizada (Arial, Tahoma, etc);
COLOR=cor : cor da fonte definida em hexadecimal, ou atravs de
um nome pr-definido de cores. Veja no captulo 9 desta apostila.

Exemplo:

Crie um arquivo chamado Fontes.html e insira o cdigo abaixo:

<ht ml >
13
<body>

<FONT si ze=" 1" f ace=" Tahoma" col or =" r ed" >
Text o comcor ver mel ha
</ FONT>
<br ><br >

<FONT si ze=" 2" f ace=" Ar i al " col or =" gr een" >
Text o comcor ver de
</ FONT>
<br ><br >

<FONT si ze=" 3" f ace=" Tahoma" col or =" bl ue" >
Text o comcor azul
</ FONT>
<br ><br >

<FONT si ze=" 4" f ace=" Tahoma" col or =" or ange" >
Text o comcor l ar anj a
</ FONT>
<br ><br >

<FONT si ze=" 5" f ace=" Tahoma" col or =" pi nk" >
Text o comcor pi nk
</ FONT>
<br ><br >

<FONT si ze=" 6" f ace=" Tahoma" col or =" #4F2F4F" >
Text o comcor vi ol et a
</ FONT>
<br ><br >

<FONT si ze=" 7" f ace=" Tahoma" col or =" #FF00FF" >
Text o comcor magent a
</ FONT>
<br ><br >

</ body>
</ ht ml >

14

1.3 Quebras de linha

A tag <BR>faz a quebra de linha sem acrescentar espaos extras entre linhas.
Finaliza a linha de texto e insere automaticamente uma outra linha em branco.
No precisa ser finaliza com </BR>.

1.4 Linhas Horizontais

Desenha uma linha horizontal no documento.
No precisa ser finalizada com </HR>.

Sintaxe:

<HR wi dt h=n% al i gn=posi o si ze=n col or =#cor
noshade>
Atributos:

SIZE: Define a espessura, em pixels, da linha.
WIDTH: Define a largura da linha, o que pode ser feito em pixels
(nmero absoluto) ou em percentual da tela (com o smbolo de %)
ALIGN: Alinhamento, como o que tem sido usado, pode ser LEFT,
RIGHT e CENTER, ou seja, esquerda, direita e ao centro,
respectivamente.
15
NOSHADE: Linha sem sombra. O padro a linha sombreada,
utilizando esse atributo temos uma linha sem sombra.

Exemplo:

Crie um arquivo chamado LinhaHorizontal.html e insira o cdigo abaixo:

<ht ml >
<body>

Pr i mei r o exempl o coma l i nha hor i zont al
<HR wi dt h=" 100%" al i gn=" l ef t " si ze=" 2" col or =" si l ver " >
<br >

<cent er >Segundo exempl o coma l i nha hor i zont al </ cent er >
<HR wi dt h=" 70%" al i gn=" cent er " si ze=" 3" col or =" bl ue" >
<br >

Ter cei r o exempl o coma l i nha hor i zont al
<HR wi dt h=" 30%" al i gn=" cent er " si ze=" 5" col or =" r ed" noshade>
<br >

</ body>
</ ht ml >

16

2. Caracteres Especiais

Á á &Acirc
â À à
Å å Ã
ã Ä ä
Æ æ É
&eacute Ê ê
È è Ë
ë Ð ð
Í &iacute Î
î Ì ì
Ï ï Ó
ó Ô &ocirc
Ò ò Ø
ø Õ õ
Ö ö Ú
ú Û û
Ù ù Ü
ü Ç ç
Ñ ñ < <
> > & & " "
® © Ý
ý Þ þ
ß º &170;
¹ ² ³

¢ £
« ± »
· ¼ ½
¾ ¿ ×
÷ ¡ ¤

17

3. Imagens

Para inserir uma imagem em uma pgina web utilizamos o comando, tag,
<img src> e seus atributos. Os formatos mais usados so o GIF e o J PG, ambos
com compactao de pixels.

Sintaxe:

<I MG SRC=" ender eo da i magem WI DTH=n% HEI GHT=n%
ALI GN=posi o ALT=t ext o>

Atributos:

WIDTH: Define a largura da imagem, o que pode ser feito em pixels
(nmero absoluto) ou em percentual da tela (com o smbolo de %).
HEIGHT: Define a altura da linha, o que pode ser feito em pixels
(nmero absoluto) ou em percentual da tela (com o smbolo de %).
ALIGN: Alinhamento da imagem pode ser, LEFT, RIGHT e CENTER,
ou seja, esquerda, direita e ao centro, respectivamente.
ALT: texto que ir aparecer ao passar o mouse sobre a imagem ou
texto que surgir caso a imagem no possa ser visualizada.
BORDER: Especificao da largura da borda da imagem. Valor em
pixel.
VSPACE: Para especificar o espao que deve ser deixado acima e
abaixo da imagem. Valor em pixel.
HSPACE: Especifica o espao que deve ser deixado nas laterais da
imagem. Valor em pixel.

O nico obrigatrio o src.

Ex.:

Crie um arquivo chamado Imagem.html e insira o cdigo abaixo:

<ht ml >
<body>

<I MG SRC=" i mg/ bul l et . gi f " ALI GN=" l ef t " ALT=" I magemBul l et " >
<f ont si ze=" 3" f ace=" ar i al " col or =" bl ue" >Est a a nossa
pr i mei r a i magemi nser i da. </ f ont >
<br ><br >
18

<f ont si ze=" 4" f ace=" Cour i er New" col or =" or ange" >Abai xo segue
mai s i magens na pgi na. </ f ont >
<br ><br >

<I MG SRC=" i mg/ cal endar i o. gi f " ALI GN=" l ef t " ALT=" Cal endr i o" >
<f ont si ze=" 3" f ace=" ar i al " col or =" bl ack" >Cal endr i o. </ f ont >
<br ><br >

<I MG SRC=" i mg/ sear ch. gi f " ALI GN=" l ef t " ALT=" Buscar " >
<f ont si ze=" 3" f ace=" ar i al " col or =" bl ack" >Buscar . </ f ont >
<br ><br >

<I MG SRC=" i mg/ sal var . gi f " ALI GN=" l ef t " ALT=" Sal var " >
<f ont si ze=" 3" f ace=" ar i al " col or =" bl ack" >Sal var . </ f ont >
<br ><br >

</ body>
</ ht ml >

19

4. LINKS

O principal poder do HTML vem da capacidade de interligar partes de um texto,
imagens a outros documentos.
A interligao entre documentos no se restringe somente s ligaes com outras
pginas. Em pginas muito longas onde um assunto tem vrios tpicos, podemos
utilizar ndices onde os links tm a funo de interligar os tpicos de um texto e
que com apenas um clique em um dos tpicos do ndice, o item exibido.

4.1 Links para o mesmo diretrio

Voc s precisa especificar o nome do arquivo que ser chamado e a sua
extenso.

Sintaxe:

<A HREF = nomeDoAr qui vo. ext enso>
Text o ou i magem
</ A>

Onde:
A: abertura da TAG de link;
HREF=nomeDoArquivo.extenso: deve ser informado o nome
completo do arquivo que ser acessado;
Texto ou imagem: que servir como link;
/A: encerra a TAG de link.

Exemplo:

Edite o primeiro arquivo que criamos index.html.
Substitua o cdigo pelo o que est abaixo:

<ht ml >
<head>
<t i t l e>
Cur so de HTML
</ t i t l e>
</ head>
<body >
<h1><f ont f ace=" ar i al " col or =" or ange" >MENU</ f ont ></ h1>
<HR wi dt h=" 100%" al i gn=" l ef t " si ze=" 2" col or =" si l ver " >

20
<A HREF = " Est i l oText o. ht ml " >Est i l o de Text o</ A>
<br >
<A HREF = " Exempl oTi t ul o. ht ml " >T t ul os e Subt t ul os</ A>
<br >
<A HREF = " Li nhaHor i zont al . ht ml " >Li nhaHor i zont al </ A>
<br >
<A HREF = " Font es. ht ml " >Font es</ A>
<br >
<A HREF = " I magem. ht ml " >I magem</ A>
</ body>
</ ht ml >

4.2 Links para outro diretrio

Para criar links para uma pgina localizada em outros diretrios necessrio
indicar o caminho completo do arquivo. Para a WEB isto tem uma forma um pouco
diferente do Windows e do DOS, veja:

A barra utilizada para separar os diretrios a barra convencional (/);
O ponto de partida para localizar um arquivo em outro diretrio o
atual;
Para baixar um nvel deve utilizar os sinais ../.

Exemplo:

21

<A HREF=. . / mat r i cul a/ Cadast r aAl uno. ht ml >
Cadast r o de Al uno
</ A>

4.3 Parmetro NAME

O parmetro NAME serve para marcar um ponto para possveis desvios. Quando
desviamos para um determinado ponto dentro de um documento, indicamos este
nome com um "#". Por exemplo:

<A NAME=" AQUI " >Aqui umpont o par a desvi os</ A>. . .
<A HREF=" #AQUI " >Desvi a par a o pont o " AQUI " </ A>
22

5. Listas

5.1 - Criando listas ordenadas

Listas ordenadas so tambm denominadas listas numeradas, pois, quando um
navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar
cada item utilizando nmeros, como 1, 2, 3, e assim sucessivamente.
Listas ordenadas so iniciadas pela TAG <OL>.
Cada item utiliza a TAG <LI>.
Finalmente, </OL>.

Sintaxe:

<OL TYPE=f or mat o START=n>
<LI > Tpi co 1
<LI > Tpi co 2
<LI > Tpi co n
</ OL>

Onde:
<OL>: incio da lista numerada;
TYPE=formato: o formato da numerao pode ser:
1: lista numrica (no necessrio ser definido);
A: lista alfabtica com letras maisculas;
A: lista alfabtica com letras minsculas;
I: Lista numrica com nmeros romanos maisculos;
I: lista numrica com nmeros romanos minsculos;
START=n: o valor inicial de uma lista numerada;
<LI>: tpicos da lista;
</OL>: fim da lista numerada;

Exemplo:
Crie um arquivo chamado Listas.html e insira o cdigo abaixo:

<ht ml >
<body>

<cent er ><h1>Li st as Or denadas</ h1></ cent er >

<h3>Cur sos</ h3>
23
<OL>
<LI >Gr aduao
<LI >Ps- Gr aduao Lat o Sensu
<LI >Cur sos de Ps- Gr aduao St r i ct o Sensu
</ OL>

</ body>
</ ht ml >

5.2 - Criando listas no ordenadas

Listas no ordenadas so muito parecidas com as ordenadas. A nica diferena
o fato de elas no definirem explicitamente uma ordem, como no caso as
numeradas. Eles so formados por smbolos, que podem ser bola, quadrado, e
uma bola vazia. Elas so iniciadas com a TAG <UL> e so respectivamente
terminadas com </UL>. E seus elementos so que nem as numeradas: com <LI>.

Sintaxe:

<UL TYPE=f or mat o>
<LI > Tpi co 1
<LI > Tpi co 2
<LI > Tpi co 3
</ UL>

24
Onde:
<UL>: Incio da lista pontuada;
TYPE=formato: o formato do marcador pode ser:
disc: o marcador um ponto (padro utilizado pelos
navegadores, no precisa indicar);
square: o marcador um quadrado;
circle: o marcador um ponto.
<LI>: tpicos da lista, no necessrio encerrar a TAG;
</UL>: fim da lista pontuada

Exemplo:

Acrescente o cdigo abaixo no arquivo Listas.html:

<br >
<cent er ><h1>Li st as No Or denadas</ h1></ cent er >
<h3>Membr o da Comuni dade Acadmi ca</ h3>
<UL TYPE = di sc>
<LI >Al uno
<LI >Docent e
<LI >Tcni co Admi ni st r at i vo
</ UL>

25

6. Tabelas

Tabelas correspondem a um timo formato para originar informaes, e por essa
razo que eles foram acrescentados linguagem HTML.

6.1 - Construindo tabelas com o elemento TABLE

A TAG <TABLE> utilizada para a representao de dados tabulares. A estrutura
e o contedo da tabela devem ficar dentro das TAGs <TABLE></TABLE>

6.1.1 - O ttulo da tabela (elemento CAPTION)

A TAG <CAPTION>especifica o ttulo de uma tabela. Por exemplo:

<CAPTI ON>Not as da pr i mei r a aval i ao</ CAPTI ON>

6.1.2 - TABLE HEADINGS (elemento TH)

A TAG <TH> usada para especificar as clulas de cabealho da tabela. Essas
clulas so diferentes das outras, pois seu contedo aparece geralmente em
negrito. O elemento TH pode ser apresentado sem contedo algum: isso
corresponde a uma clula em branco. As tabelas podem ainda conter mais de um
TH para uma dada coluna, ou linha, ou simplesmente no conter nenhum
elemento TH, isto , no conter em nenhuma clula em destaque. O TAG dela :

<TH>t ext o emdest aque</ TH>

Observaes: Elas devem ficar, assim como todas, dentro da TAG <TABLE>.

6.1.3 - TABLE DATA (elemento TD)

A TAG <TD>especifica a clulas de dados de uma tabela. Por se tratar de dados
comuns (e no cabealhos), essas clulas possuem seu contedo escrito em
fonte normal, sem nenhum destaque e alinhamento esquerda. Assim como o
TH, pode-se construir clulas em branco, usando o elemento TD, como no
exemplo a seguir:

<TD>Cl ul as de dados</ TD>

Observaes: A TAG de terminao, <TD>, tambm opcional.
26

6.1.4 - END OF TABLE ROW (elemento TR)

A TAG <TR>indica o incio de uma linha na tabela. Cada linha da tabela pode
conter vrias clulas, e, portanto, necessrio que se faa uso de uma marcao
que indique exatamente o ponto de quebra de uma linha e incio de outra. Toda
linha deve terminar com um </TR>.

6.2 - Atributos para a tabela

As marcaes das tabelas podem apresentar resultados diferentes, se
acompanhadas de alguns atributos. Os principais so:

6.2.1 - BORDER

Um atributo opcional para ser usado com TABLE o atributo BORDER. Se ele
estiver presente, a tabela ser formatada com linhas de borda.

Ateno: Todas as explicaes acima como as que esto por vir, foram feitas,
para que voc possa saber o que significa a TAG em questo.

Exemplo:

<TABLE BORDER>
<CAPTI ON> Not a da pr i mei r a aval i ao </ CAPTI ON>
<TD>Not as/ Al unos</ TD>
<TH>Eduar do</ TH>
<TH>Ana Lci a</ TH>
<TH>Andr a</ TH>
<TR>
<TH>Not as</ TH>
<TD>8, 0</ TD>
<TD>9. 3<TD>
<TD>7. 8</ TD>
<TR>
<TH>No de I nscr i o</ TH>
<TD>376234809</ TD>
<TD>387349048</ TD>
<TD>502350432</ TD>
</ TABLE>

Veja o resultado:

27

O atributo BORDER pode tambm receber um valor que vai estabelecer qual a
espessura (alm da existncia) da linha de borda da tabela (BORDER="valor"). Se
o valor atribudo for 0 (zero), o BORDER funciona exatamente como o caso
padro, sem o BORDER. Dessa maneira, possvel colocar tabelas em maior
destaque, atribuindo um valor maior que 1 para o BORDER.

<TABLE BORDER=5>
<TR>
<TD>TESTE</ TD>
<TD>TESTE2</ TD>
<TD>TESTE3</ TD>
</ TR>
<TR>
<TD>TESTE4</ TD>
<TD>TESTE5</ TD>
<TD>TESTE6</ TD>
</ TR>
</ TABLE>

Veja o resultado:

6.2.2 - ALIGN

Este atributo pode ser aplicado a TH, TD ou TR e controla o alinhamento do texto
dentro de uma clula, com relao as bordas laterais. Quando aplicado a TR, ele
define o alinhamento de toda uma linha da tabela.
O exemplo abaixo mostra como o ALIGN aceita os valores LEFT, CENTER ou
RIGHT, para alinhar esquerda, centralizar ou alinhar direita, respectivamente.

<TABLE BORDER>
<TD>Pr i mei r a cl ul a</ TD>
<TD>Segunda cl ul a</ TD>
<TD>Ter cei r a cl ul a</ TD>
<TR>
28
<TD ALI GN=" CENTER" >Cent r o</ TD>
<TD ALI GN=" LEFT" >Esquer da</ TD>
<TD ALI GN=" RI GHT" >Di r ei t a</ TD>
<TR>
</ TABLE>

Veja o resultado:

6.2.3 - VALIGN

Pode ser aplicado a TH e TD e define o alinhamento do texto em relao s
bordas superior e inferior.
Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte de cima, no
meio e na parte de baixo, respectivamente.

Veja o exemplo:

<TABLE BORDER>
<TD>Test e de al i nhament o</ TD>
<TD VALI GN=" TOP" >TOP</ TD>
<TD VALI GN=" mi ddl e" >MI DDLE</ TD>
<TD VALI GN=" bot t om" >BOTTOM</ TD>
</ TABLE>

Veja o resultado:

6.2.4 CELLSPACING

Este atributo compreende a distncia entre clulas e linhas.
Deve ser adicionado dentro da TAG <TABLE>.
Como padro dos navegadores a distncia 2 pixels.

Exemplo:

29
Crie um arquivo chamado Tabela.html e insira o cdigo abaixo:

<h3>Exempl o comCELLSPACI NG</ h3>
<TABLE BORDER=1 WI DTH=80% ALI GN=cent er CELLSPACING=6>
<TR>
<TD WI DTH=33% ALI GN=cent er > Col una 1 </ TD>
</ TR>
</ TABLE>

6.2.5 CELLPADDING

Este atributo utilizado para formatar o espao entre o contedo de uma clula e
suas bordas em todos os sentidos.
aplicado dentro da TAG <TABLE>.

Exemplo:

Acrescente o cdigo abaixo no arquivo Table.html:

<TABLE BORDER=" 1" WI DTH=" 80%" ALI GN=" cent er " CELLPADDI NG=" 6" >
<TR>
<TD WI DTH=" 33%" ALI GN=" cent er " > Al uno </ TD>
<TD WI DTH=" 33%" ALI GN=" cent er " > Docent e </ TD>
<TD WI DTH=" 34%" ALI GN=" cent er " > Tcni co Admi ni st r at i vo
</ TD>
</ TR>
</ TABLE>
6.2.6 ROWSPAN

Define quantas linhas uma mesma clula pode abranger. Por padro, na maioria
dos navegadores de Internet cada clula adicionada em uma tabela corresponde a
uma linha. Pode ser aplicado em TH ou TD, proporcionando o mesmo efeito.

Exemplo:

Acrescente o cdigo abaixo no arquivo Table.html.

<TABLE BORDER=1 WI DTH=380 CELLPADDI NG=7 ALI GN=cent er >
<TR>
<TD WI DTH=16% ROWSPAN=3> 3 l i nhas </ TD>
<TD WI DTH=16%> col una 2 </ TD>
30
</ TR>
<TR>
</ TR>
<TR>
</ TR>
</ TABLE>

6.2.7 COLSPAN

Este atributo define quantas colunas uma clula pode abranger. Por padro, na
maioria dos navegadores de Internet cada clula adicionada em uma tabela
corresponde a uma coluna. Pode ser aplicado em TH ou TD, proporcionando a
mesma abrangncia.

<h3>Exempl o comCOLSPAN</ h3>

<TABLE BORDER=1 WI DTH=80% ALI GN=cent er >
<TR>
<TD WI DTH=24% COLSPAN=3>Clula com 3 colunas </ TD>
<TD WI DTH=20%>col una 4</ TD>
</ TR>
<TR>
</ TR>
</ TABLE>

31

6.2.8 Largura da clula

Para alterar a largura de uma clula da tabela basta acrescentar o parmetro WIDTH dentro da tag
<TD>. Exemplo1:

<TABLE BORDER=2>
<TR>
<TD WI DTH=100> WI DTH=100</ TD>
<TD ALI GN=MI DDLE WI DTH=200>WI DTH=200 ( PI XELS) </ TD>
</ TR>
</ TABLE>

6.2.9 Cor de fundo das clulas

Outro atributo que podemos ter nas tabelas mudar a sua cor de fundo, isto se torna
particularmente til quando se quer dar destaque a uma clula em especial.
32
Vejamos um exemplo:

<TABLE BORDER=0>
<TR>
<TD WI DTH=150 BGCOLOR=RED>VERMELHO </ TD>
<TD WI DTH=150 BGCOLOR=BLUE>AZUL </ TD>
<TD WI DTH=150 BGCOLOR=RED>VEMELHO</ TD>
</ TR>
<TR>
<TD WI DTH=150 BGCOLOR=BLUE>AZUL</ TD>
<TD WI DTH=150 BGCOLOR=RED>VEMELHO</ TD>
<TD WI DTH=150 BGCOLOR=BLUE> AZUL</ TD>
</ TR>
</ TABLE>

33

7. Formulrios

A linguagem HTML tambm permite que o cliente (navegador) interaja com o
servidor, preenchendo campos, clicando em botes e passando informaes.
O elemento FORM, da linguagem HTML, justamente o responsvel por tal
interao. Ele prov uma maneira agradvel e familiar para coletar dados do
usurio atravs da criao de formulrios com janelas de entrada de textos,
botes, etc.

7.1 - Construindo formulrios com o FORM

Para fazer formulrio, voc tem que colocar as TAGs <FORM></FORM>. Todos
os outros comandos, devem ficar dentro dessas TAGs. Ok?!

7.2 - Atributos para FORM

O elemento FORM pode conter dois atributos que determinaram para onde ser
mandada a entrada do FORM. Vejam como eles so:
7.2.1 GET

Os dados entrados fazem parte do URL associado consulta enviado para o
servidor e suporta at 128 caracteres.
7.2.2 POST

o mais utilizado, pois envia cada informao de forma separada da URL. Com
este mtodo POST os dados entrados fazem parte do corpo da mensagem
enviada para o servidor e transfere grande quantidade de dados.

7.2.3 INPUT

A TAG <INPUT> especifica uma variedade de campos editveis dentro de um
formulrio. Ele pode receber diversos atributos que definem o tipo de mecanismo
de entrada (botes, janelas de texto, etc.), o nome da varivel associada com o
dado da entrada, o alinhamento e o campo do valor mostrado. O atributo mais
importante do INPUT o NAME. Ele associa o valor da entrada do elemento. Por
34
exemplo, quando voc for receber os dados, j, processados, ir vir o name: =
resposta dada pelo visitante. Outro atributo importante o TYPE. Ele determina o
campo de entradas de dados. Veja como se usa este atributo:

<I NPUT TYPE=" TEXT" NAME=" nome" >

Para mudar o tamanho, da janela padro, voc tem que colocar o comando SIZE.
Por exemplo:

<I NPUT TYPE " TEXT" NAME=" nome" SI ZE=8>( ou nmer o desej ado)

Outro comando importante o VALUE. Ele acrescenta uma palavra digitada no
comando janela. Por exemplo:

<I NPUT TYPE " TEXT" NAME=" nome" SI ZE=8 VALUE=" t ext o. " >

Olhe como ficaria:

7.2.3.1 - Tipos de elementos TYPE

Voc pode fazer vrias coisas com o elemento TYPE. Por exemplo, para ser um
campo de senha, que quando digitado, aparea o smbolo "*", ao invs das letras,
voc deve escrever o seguinte:

<I NPUT TYPE" PASSWORD" NAME=" nome" SI ZE=8>

7.2.3.1.1 - TYPE="RADIO"

Quando o usurio deve escolher uma resposta em uma nica alternativa,
de um conjunto, utiliza-se o RADIO Buttons. Um exemplo tpico do uso de
tais botes cuja resposta pode ser SIM ou NO. preciso que todos os
rdios buttons de um mesmo grupo, ou seja, referentes mesma pergunta,
tenham o mesmo atributo NAME. Para esse tipo de entrada, os atributos
NAME e VALUE, so necessrios. Veja a seguir:

35
<I NPUT TYPE=" RADI O" NAME=" voc gost ou dessa home page?"
VALUE=" si m" >si m<p>
<I NPUT TYPE=" RADI O" NAME=" voc gost ou dessa home page?"
VALUE=" nao" >no<p>

Repare:

7.2.3.1.2 - TYPE="PASSWORD"

Este comando serve para fazer um campo de senhas! Quando a pessoa
digitar, aparecer o sinal de "*"! O comando :

<I NPUT TYPE=" PASSWORD" NAME=" SENHA" MAXLENGHT=6>

7.2.3.1.3 - TYPE="CHECKBOX"

Esse comando vlido quando apenas uma resposta, esperada. Mas
nem sempre esta a situao...O tipo CHECKBOX prov outros botes
atravs dos quais mais de uma alternativa, pode ser escolhida.

Definio dos checkboxs:

<I NPUT TYPE=" CHECKBOX" NAME=" net scape" VALUE=" net " >
Net scape<p>
<I NPUT TYPE=" CHECKBOX" NAME=" Expl or er " VALUE=" exp" >
I nt er net Expl or er <p>
<I NPUT TYPE=" CHECKBOX" NAME=" Mosai c" VALUE=" mos" >
Mosai c<P>
<I NPUT TYPE=" CHECKBOX" NAME=" Hot J ava" VALUE=" hot " > Hot
J ava<P>

Veja o resultado:
36

7.2.3.1.4 - TYPE="SUBMIT"

Esse o boto que submete os dados do formulrio quando pressionados,
ou seja, possibilitam, o envio, dos dados para o script que vai trat-los. Veja
como se adiciona o boto:

<I NPUT TYPE=" SUBMI T" VALUE=" envi ar " >

Veja como ficar:

7.2.3.1.5 - TYPE="RESET"

No caso dos botes RESET, quando o boto clicado, ele
automaticamente limpa todos os campos j preenchidos no formulrio,
voltando situao inicial.

<I NPUT TYPE=" RESET" VALUE=" Li mpar " >

Veja como ficar:

7.2.4 TEXTAREA

Para se limitar o tamanho do campo mostrado na tela, faz-se o uso dos atributos
COLS e ROWS que especificam, respectivamente, o nmero de colunas e linhas
que se deseja mostrar para o usurio. O atributo NAME obrigatrio, e especifica
o nome da varivel, que ser associada entrada do cliente (navegador). O
atributo VALUE no aceito nesse elemento, mas voc pode colocar j um texto
da seguinte maneira. Veja como ele colocado:
37

<TEXTAREA NAME=" nome" COLS=20 ROWS=3>t ext o</ TEXTAREA>

7.2.5 SELECT

Permite definir uma lista de opes, com barra de rolagem ou fixa na tela do
navegador.
uma TAG que deve ser iniciada com <SELECT>e finalizada com </SELECT>.

Sintaxe:
<SELECT MULTI PLE NAME=nomeDaLi st a>
<OPTI ON SELECTED VALUE=val or de r et or no>
Val or Vi sual i zado
<OPTI ON VALUE=Val or de r et or no>
Val or Vi sual i zado 2
</ SELECT>

Onde:
NAME: obrigatrio, serve para a identificao da lista;
OPTION: item da lista;
MULTIPLE: com este atributo a lista aparecer sempre aberta;
SELECTED: indica o valor padro da lista;
VALUE: valor a ser retornado ao servidor.

Exemplo:

<SELECT MULTI PLE NAME=Est ados>
<OPTI ON SELECTED VALUE=SP> So Paul o
<OPTI ON VALUE=RJ > Ri o de J anei r o
<OPTI ON VALUE=MG> Mi nas Ger ai s
<OPTI ON VALUE=ES> Esp r i t o Sant o
</ SELECT>

7.2.6 Exemplo completo de formulrio

38
Mostraremos a seguir um exemplo completo de um formulrio para Cadastro de
Conselhos. Utilizaremos tambm a tag TABLE para alinhar os campos do
formulrio na tela em questo. Crie um arquivo com nome de CadConselho.html e
copie o exemplo abaixo:

<ht ml >
<body>
<t i t l e>r go Col egi ado</ t i t l e>

<TABLE BORDER=1 BGCOLOR=" bl ue" wi dt h=" 100%" >
<TH ><f ont col or =" whi t e" >Cadast r o de Consel ho</ f ont ></ TH>
</ TABLE>

<FORM NAME=" f or m_consel ho" METHOD=" POST" >
<h4>Pr ogr ama</ h4>
<t abl e wi dt h=" 100%" >
<t r >
<t d wi dt h=" 15%" ><f ont si ze=" 3" f ace=" ar i al " > Uni dade</ f ont ></ t d>
<t d><i nput t ype=" t ext " name=" codUni dade" si ze=" 5" ></ t d>
<t d><i nput t ype=" t ext " name=" uni dade" si ze=" 80" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 15%" ><f ont si ze=" 3" f ace=" ar i al " > Pr ogr ama</ f ont ></ t d>
<t d><i nput t ype=" t ext " name=" codPr ogr ama" si ze=" 5" ></ t d>
<t d><i nput t ype=" t ext " name=" pr ogr ama" si ze=" 80" ></ t d>
</ t r >
</ t abl e>

<h4>Consel ho de Pr ogr ama de Ps- Gr aduao</ h4>
<t abl e wi dt h=" 100%" >
<t r >
<t d wi dt h=" 15%" ><f ont si ze=" 3" f ace=" ar i al " >Cdi go</ f ont ></ t d>
<t d><i nput t ype=" t ext " name=" codi go" si ze=" 5" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 15%" ><f ont si ze=" 3" f ace=" ar i al " >Nome</ f ont ></ t d>
<t d><i nput t ype=" t ext " name=" nome" si ze=" 100" ></ t d>
</ t r >
<t r >
<t d wi dt h=" 15%" ><f ont si ze=" 3" f ace=" ar i al " >Ti po</ f ont ></ t d>
<t d>
<sel ect name=" t i po" >
<opt i on >
<opt i on val ue=" 1" >COMI SSOES TRANSI TORI AS DE ESTUDOS
<opt i on val ue=" 2" >CONSELHOS DE DEPARTAMENTO
<opt i on val ue=" 3" >COMI SSOES PERMANENTES DE UNI DADE
ADMI NI STRATI VA
</ sel ect >
</ t d>
</ t r >
<t r >
<t d wi dt h=" 15%" ><f ont si ze=" 3" f ace=" ar i al " >Fundament o</ f ont ></ t d>
<t d>
<TEXTAREA NAME=" f undament o" COLS=50 ROWS=3></ TEXTAREA>
39
</ t d>
</ t r >
<t r >
<t d al i gn=" cent er " col span=" 2" >
<I NPUT TYPE=" SUBMI T" VALUE=" Sal var " >
</ t d>
</ t r >

</ t abl e>
</ FORM>

</ body>
</ ht ml >

40

8. Frames

um recurso que permite dividir uma pgina de Internet em outras, na mesma
pgina. Nada mais que uma pgina que chama outras na pgina inicial que um
documento html que contm frames.
Em um determinado arquivo como o index.html, onde pode ser definido a
estrutura das novas janelas para o seu HTML.

8.1 - Estrutura

Assim como o corpo do HTML, os FRAMES tem sua estrutura. Eles entram no
lugar do corpo, substituindo o <BODY></BODY> por
<FRAMESET></FRAMESET>.
Exemplo:

<HTML>
<HEAD>
<TI TLE> T t ul o do Document o </ TI TLE>
</ HEAD>
<FRAMESET>
Si nt axe dos Fr ames
</ FRAMESET>
</ HTML>

8.2 - Sintaxe

Primeiramente devemos fazer um documento HTML para ele ser especificado pela
sintaxe de FRAMES, no caso chamado de Frame1.htm.

<HTML>
<HEAD>
<TI TLE> Fr ame 1 </ TI TLE>
</ HEAD>
<BODY>
41
<FONT SI ZE=+1> <B> Fr ame n1 </ B> </ FONT>
</ BODY>
</ HTML>

8.3 FRAMESET

A primeira especificao o FRAMESET, que acompanhado pelas definies
ROWS e COLS.

8.3.1 - ROWS

Especifica o nmero de FRAMES e a altura de cada um.
Exemplo:

<FRAMESET ROWS=" 20%, 30%, 50%" >
<FRAME SRC=" Fr ame1. ht ml " >
</ FRAMESET>

Neste exemplo de cima, ele chama trs FRAMES, o 1 com 20% da tela, o 2 com
30% da tela, o 3 com 50% da tela (ambos em altura).

42

8.3.2 COLS

Especifica o nmero de FRAMES e a largura de cada um.
Exemplo:

<FRAMESET COLS=" 20%, 30%, 50%" >
</ FRAMESET>

Neste exemplo de cima, ele chama trs FRAMES, o 1 com 20% da tela, o 2 com
30% da tela, o 3 com 50% da tela (ambos em largura).

8.4 FRAME

A segunda especificao o FRAME, que acompanhado pelas definies SRC,
NAME, SCROLLING, NORESIZE, TARGET.

43
8.4.1 SRC

Especifica o documento de formato HTML chamado para o FRAME.
Indispensvel, por que sem ele s o documento aparecer vazio, s com as
divises.
Exemplo:

<FRAMESET COLS=" 20%, 30%, 50%" >
</ FRAMESET>

8.4.2 - NAME

Especifica o nome do documento de formato HTML chamado para o FRAME.
extremamente necessrio para o uso do TARGET, que ser visto a seguir.
Exemplo:

<FRAMESET COLS=" 20%, 30%, 50%" >
<FRAME SRC=" Fr ame1. ht ml " NAME=" Pr i nci pal " >
</ FRAMESET>

8.4.3 SCROLLING

Define se o Frame ter barra de rolagem, o default Auto.
Fornece as opes: Yes, No, Auto.
Yes - Exibe a barra de rolagem independente do tamanho do documento.
No - No exibe a barra de rolagem, mesmo que o documento seja maior
que o tamanho especificado.
Auto - S exibe a barra de rolagem se o documento for maior que a rea
especificada.

44
Exemplo:

<FRAMESET COLS=" 20%, 30%, 50%"
<FRAME SRC=" Fr ame1. ht ml " SCROLLING=" no" >
<FRAME SRC=" Fr ame1. ht ml " SCROLLING=" yes" >
<FRAME SRC=" Fr ame1. ht ml " SCROLLING=" aut o" >
</ FRAMESET>

8.4.4 NORESIZE

Impossibilita o usurio de mudar o tamanho da rea especificada do FRAME.
Por default o usurio pode mudar esta rea.
Exemplo:

<FRAMESET COLS=" 20%, 30%, 50%" >
<FRAME SRC=" Fr ame1. ht ml " NORESIZE>
</ FRAMESET>

45
8.4.5 TARGET

Define qual a rea (FRAME) que aparecer o documento especificado pelo link.
Mais til na utilizao de Menus e ndices.
Necessita do NAME.
Exemplo:

<FRAMESET COLS=" 20%, 30%, 50%" >
<FRAME SRC=" Fr ame1. ht ml " NAME=" Pr i nci pal " >
</ FRAMESET>

O Link:

<A HREF=" ht t p: / / www. unesp. br " TARGET=" Pr i nci pal " > Unesp </ A>

Se voc quiser criar um link que chama uma nova tela do browser basta
colocar TARGET="um nome que no existe".

8.5 BORDER

Define qual a borda que o FRAME ter.
Mais til na utilizao de BACKGROUNDS iguais.
Exemplo:

<FRAMESET COLS=" 20%, 30%, 50%" FRAMEBORDER="NO" BORDER=0>
<FRAME SRC=" Fr ame1. ht ml " FRAMEBORDER="NO" BORDER=0>
</ FRAMESET>

46
47

9. Tabelas de Cores

Esta tabela de cores pode ser usar quando quiser definir as cores de uma fonte de
um texto ou ento quando quiser definir o fundo de uma pgina. Deve-se usar o
nome que est em ingls.

Branco White
Preto Black
Azul Blue
Amarelo Yellow
Verde Green
Laranja Orange
Vermelho Red
Rosa Pink
Cinza Gray
Ouro Gold
Verde azulado Teal
Azul marinho Navy
Prata Silver

Tambm poder ser usado o nome em hexadecimal para definir a cor:

#FFFFFF (Branco) #00FF00 (Verde) #00FFFF (Cian) #C0C0C0 (Cinza)
#000000 (Preto) #0000FF (Azul) #FFFF00 (Amarelo) #BC8F8F (Pink)
#FF0000 (Vermelho) #FF00FF (Magenta) #A8A8A8 (Cinza claro) #4F2F4F (Violeta)

48

10. CSS

10.1 O que CSS?

CSS a mesma coisa que Style Sheets e que Folhas de Estilo. Voc j deve ter
visto esses nomes em vrios lugares. CSS mais uma forma de aperfeioar seus
documentos, o CSS tem muitos tipos de definio aqui veremos muitas delas.

No que eles podem nos ajudar?
Economizar o seu tempo.
Diminuir o tamanho do cdigo de sua pgina.
Sua pgina ir carregar mais rapidamente.
Mais facilidade de manter e fazer alteraes na pgina.
Mais controle no layout da pgina.

10.2 Como criar estilos

Cada estilo que voc cria definido como uma regra CSS. Cada regra deve
utilizar a seguinte sintaxe:

el ement o {at r i but o1: val or ; at r i but o2: val or . . . }

Explicao desta sintaxe:

Elemento - descreve o elemento de design ao qual o estilo ser aplicado. A
mesma tag HTML mas, sem os sinais de maior e menor. Essa parte da regra s
vezes chamada de seletor.

Atributo - o aspecto especfico do elemento que voc quer usar como estilo. Deve
ser um nome de atributo CSS vlido, como o atributo font-size.

Valor - a configurao aplicada ao atributo. Deve ser uma configurao vlida
para o atributo em questo, como 20pt (20 pontos) para font-size.

Atributo: valor - parte declarao da regra. Voc pode atribuir mltiplas
declaraes se desejar separ-los com ponto-e-vrgula (;). No coloque um ponto-
e-vrgula depois da ltima declarao.
49
Agora hora de exemplos. Eis uma regra CSS que especifica que todos os ttulos
de nvel 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos:

H1 {f ont - si ze: 36pt }

Aqui est um exemplo de regra que diz que todos os ttulos de nvel 2 (tags <H2>)
devem ter tamanho de 24 pontos e cor azul;

H2 {f ont - si ze: 24pt ; col or : bl ue}

Voc pode inserir quebras de linha e espaos em branco dentro da regra
como quiser. Assim, possvel ver mais facilmente todas as declaraes e
certificar-se de que colocou todos os sinais de ponto-e-vrgula e colchetes nos
lugares corretos. Por exemplo, aqui est uma regra que diz que os pargrafos
aparecero em fonte Times, 12 pontos, azul e recuados meia polegada a partir da
margem esquerda da pgina:

P {f ont - f ami l y: Ti mes;
f ont - si ze: 12pt ;
col or : bl ue;
mar gi n- l ef t : 0. 5i n}

Note como fcil aplicar todas as declaraes ao elemento pargrafo (P) e como
cada declarao, exceto a ltima, seguida pelo caracter de ponto-e-vrgula
exigido.

10.3 Tipos de Folhas de Estilo

Voc pode definir regras de CSS em trs lugares. E, por definio, pode utilizar
uma combinao dos trs mtodos nos seus web sites. A maneira como as regras
interagem entre si est relacionada parte "em cascata".Os trs lugares so:

1) em um documento separado fora de todos os documentos HTML;
2) no cabealho de um documento HTML e,
3) dentro de uma tag de HTML. Cada um destes mtodos tem um nome e
afeta as pginas HTML em seu site de um modo diferente, como discutido aqui:

Externo - Externo significa que voc coloca as regras de CSS em um arquivo
separado, e ento sua pgina HTML pode fazer um link para esse arquivo. Essa
abordagem lhe permite definir regras em um ou mais arquivos que podem ser
aplicadas em alguma pgina do seu web site.

50
Incorporado - Incorporado significa que voc especifica as regras de CSS no
cabealho do documento. As regras incorporadas afetam somente a pgina atual.

Inline - Inline significa que voc especifica as regras de CSS dentro da tag de
HTML. Essas regras afetam somente a tag atual.

10.3.1 Estilos Externos

Para definir um conjunto de regras de estilo que voc pode facilmente
aplicar em alguma pgina do seu site, preciso colocar as regras em um
arquivo de texto. Voc pode criar este arquivo com um editor de textos
simples, como o Notepad do Windows, e dar ao nome desse arquivo a
extenso .css.

Sempre que quiser utilizar esses estilos em uma nova pgina, basta colocar
uma tag <LINK>no cabealho que referencie esse arquivo .css. Veja o
exemplo:

Arquivo OrgaoColegiado.css
H4 {
f ont - f ami l y: ' Ar i al ' ;
col or : bl ue
}

Agora, para utilizar os estilos definidos neste arquivo .css voc precisa
adicionar a tag a seguir ao cabealho da pgina, onde nome_do_arquivo
uma referncia absoluta ou relativa ao arquivo .css.

<LI NK REL=" STYLESHEET"
HREF=" OrgaoColegiado.css" TYPE=" t ext / css" >

OBS: Voc deve inserir este texto entre as tags <HEAD>...</HEAD>, e
colocar a localizao correta do seu arquivo e seu nome.

10.3.2 Estilos Incorporados

Se quiser criar um conjunto de estilos que se aplicam a uma nica pgina,
voc pode configurar os estilos exatamente como fizemos no exemplo dos
estilos externos - mas em vez de colocar as tags <STYLE>...</STYLE>, e
as regras em um arquivo separado, coloque estas tags na prpria pgina
51
HTML. A estrutura bsica de uma pgina da web que utiliza estilos
incorporados semelhante ao seguinte cdigo:

<HTML>
<HEAD>
<TI TLE>Exempl o Est i l os I ncor por ados</ TI TLE>
<STYLE TYPE=" t ext / css" ><! - -
P {
backgr ound- col or : #FFFFFF;
f ont - f ami l y: ' Comi c Sans MS' ;
f ont - si ze: 14pt
}
- - ></ STYLE>
</ HEAD>
</ BODY>
</ HTML>

10.3.3 Estilos Inline

Os estilos inline so os que tm menos efeitos. Eles afetam somente a tag
atual - no outras tags na pgina e tampouco outros documentos. A sintaxe
para definir um estilo inline a seguinte:

Exempl o: <A STYLE=" col or : gr een; t ext -
decor at i on: none" HREF=" ht t p: / / www. unesp. br " >

Note que em vez das tags <STYLE>...</STYLE>, voc apenas utiliza um
atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as
regras de CSS entre colchetes, voc as coloca entre aspas, separando-as
com ponto-e-vrgula como de costume.

10.4 Tags Personalizadas

Com as classes de estilo, possvel definir diversas variaes de uma nica tag.
Por exemplo, voc poderia fazer um estilo de pargrafo "texto alinhado direita",
um estilo de pargrafo "texto centralizado" e assim por diante, criando mltiplos
temas em torno da tag de pargrafo. (<P>)
52
Voc pode definir classes de estilo tanto em folhas de estilo externa como nas
incorporadas. (No h sentido em definir uma classe em um estilo inline!) A
sintaxe praticamente idntica sintaxe normal para os estilos externo e
incorporado, com adio de um ponto e o nome da classe depois do elemento na
qual ser utilizado o atributo.

el ement o. nomedaCl asse {at r i but o: val or ; . . . }
- - ></ STYLE>
Exemplo:

Adicionar esta TAG dentro da TAG <Head>da pgina index.html:

A. meusl i nks {
col or : bl ue;
t ext - decor at i on: none
}
- - ></ STYLE>
Depois apenas adiciono o atributo CLASS="meuslinks" aos links em que eu
desejar que fiquem azuis e no-sublinhados. Veja como deve ficar:

<A CLASS=" meusl i nks" HREF=" Est i l oText o. ht ml " >
Est i l o de Text o
</ A>

53
10.4.1 Utilizando a TAG <DIV>

As tags HTML <DIV>...</DIV>podem ser usadas para formatar um grande
bloco de texto - uma diviso - abrangendo diversos pargrafos e outros
elementos. Isso as torna uma boa opo para definir estilos que afetam
grandes sees de um texto em uma pgina. Veja:

DI V. si debar {
f ont =f ami l y: " Ar i al " ;
t ext - al i gn: r i ght ;
backgr ound- col or : #C0C0C0;
mar gi n- l ef t : 1i n;
mar gi n- r i ght : 1i n
}
- - ></ STYLE>

Ao colocar na tag <DIV>o atributo CLASS, voc estar fazendo com que
todos os elementos que estejam englobados nesta tag sigam estes
padres.

<BODY>
Cur sos:
<OL>
<LI >Sel eci one
<DI V CLASS=" si debar " >Mat emt i ca</ DI V>
<br >
<DI V CLASS=" si debar " >Medi ci na</ DI V>
</ OL></ BODY>

10.4.2 Utilizando a TAG <SPAN>

As tags <SPAN>...</SPAN>so como tags <DIV>...</DIV>no sentido de
que voc pode utiliz-las para definir estilos que formatam um bloco de
texto. Ao contrrio de <DIV>, contudo, que utilizada para divises de texto
grandes, a tag <SPAN> especializada para blocos de textos menores -
que podem ser to pequenos como um nico caracter. Veja um bom
exemplo do que se pode fazer utilizando esta tag.

SPAN. hot {
col or : gr een;
54
t ext - decor at i on: under l i ne}
- - ></ STYLE>

Utilizada no cdigo HTML...

<BODY>
Par a sai r de umpr ogr ama:
<OL>
<LI >Sel eci one <SPAN CLASS=" hot " >A</ SPAN>r qui vo
-
<SPAN CLASS=" hot " >S</ SPAN>ai r
</ OL></ BODY>

55
10.5 Atalhos e atributos de CSS

10.5.1 Atalhos de CSS

Alguns atributos de CSS lhe permitem fazer diversas configuraes em uma
declarao. Por exemplo, suponha que voc queira definir diversos
aspectos da fonte utilizada para tags H1, como segue:

H1 {
f ont - st yl e: i t al i c;
f ont - wei ght : bol d;
f ont - f ami l y: ' Ti mes Roman' }

Como alternativa a especificar todas essas formataes de fonte
individualmente, voc pode utilizar o atributo font: para defini-las todas de
uma s vez, assim:

H1 {
f ont : i t al i c bol d 18pt ' Ti mes Roman' }

Note como diversos valores - itlico, negrito, 18pt e Times Roman - so
separados apenas por um espao em branco. Essas regras abreviadas
certamente poupam espao e tempo de digitao.

10.5.2 Atributos de CSS

Atributo de CSS O que ele formata
background
Cor de fundo, imagem,
transparncia.
background-attachment
Rolagem do fundo / Marca
d'gua.
background-image Imagem de fundo.
background-color
Cor de fundo ou
transparncia.
background-position
Posicionamento da
imagem de fundo.
background-repeat Configurao lado-a-lado
56
da imagem de fundo.
border
Largura, estilo e cor de
todas as 4 bordas.
border-bottom
Largura, estilo e cor da
borda inferior.
border-bottom-color Cor da citada borda.
border-bottom-style Estilo da citada borda.
border-bottom-width Largura da citada borda.
border-color Cor das 4 bordas.
border-left
borda esquerda.
border-left-color Cor da borda citada.
border-left-style Estilo da borda citada.
border-left-width Largura da borda citada.
border-right
borda direita.
border-right-color Cor da borda citada.
border-right-style Estilo da borda citada.
border-right-width Largura da borda citada.
border-style Estilo de todas as 4 boras.
border-top
borda superior.
border-top-color Cor da borda citada.
border-top-style Estilo da borda citada.
border-top-width Largura da borda citada.
border-width
Largura de todas as 4
bordas.
clear
Elementos flutuantes
esquerda ou direita de
um elemento.
clip
Parte visvel de um
elemento.
color Cor de primeiro plano.
cursor
Tipo de ponteiro do
mouse.
display
Se o elemento exibido e
o espao reservado para
ele.
filter
Tipo de filtro aplicado ao
elemento.
float Se o elemento flutua.
57
font
Estilo, variante, peso,
tamanho e altura da linha
do tipo de fonte.
@font-face
Incorporao da fonte ao
arquivo HTML.
font-family Tipo de fonte.
font-size Tamanho da fonte.
font-style Fonte itlico.
Fonte-variant Fonte bold.
font-weight
Peso da fonte de claro a
negrito.
height
Altura exibida ao
elemento.
@import Folha de estilo a importar.
left
Posio do elemento em
relao a margem
esquerda da pgina.
letter-spacing Distncia entre as letras.
line-height
Distncia entre linhas de
base.
list-style
Tipo, imagem e posio do
estilo da lista.
list-style-image Marcador de item de lista.
list-style-position
Posio do marcador de
item da lista.
list-style-type
Marcador de item de lista
alternativo.
margin
Tamanho de todas as 4
margens.
margin-left
Tamanho da margem
esquerda.
margin-right
Tamanho da margem
direita.
margin-bottom
Tamanho da margem
inferior.
margin-top
Tamanho da margem
superior.
overflow
Exibio de imagens que
so maiores do que suas
molduras.
padding
Espao em torno de um
elemento em todos os
lados.
58
padding-bottom
Espao a partir da
margem inferior de um
elemento.
padding-left
Espao esquerda do
elemento.
padding-right
Espao direita do
elemento.
padding-top
Espao a partir da
margem superior do
elemento.
page-break-after
Inserir quebra de pgina
depois de um elemento.
page-break-before
Inserir quebra de pgina
antes de um elemento.
position
Como o elemento
posicionado na pgina.
text-align Alinhamento do texto.
text-decoration
Sublinhado, sobrelinhado
ou riscado.
text-indent
Recuo da primeira linha do
pargrafo.
text-transform
Transformao para todas
maisculas, minsculas ou
inicial maiscula.
top
Posio do elemento em
relao a parte superior
da pgina.
vertical-align
Alinhamento vertical do
elemento.
visibility
Se elemento visvel ou
invisvel.
width Largura do elemento.
z-index
Posio do elemento na
pilha.

59
Exerccios

Exerccios:

1) Crie uma nova pgina chamada Exerccio.html e deixe-a com o seguinte
layout:

a) O cabealho Sistema de rgos Colegiados deve ter tamanho 3 e
ficar centralizado.
b) Aps o cabealho incluir uma linha horizontal tamanho 2 e cor cinza.
c) O texto Cursos de Graduao deve ser fonte Arial, tamanho 3 e cor
Azul.
d) O texto Cursos de Ps-Graduao deve ser Negrito, fonte Arial,
tamanho 3 e cor Verde.
e) O texto Mestrado deve ser Itlico, fonte Arial, tamanho 3 e cor
Laranja.
f) O texto Doutorado deve ser Sublinhado, fonte Arial, tamanho 3 e
cor Vermelha.
g) O texto Esta a primeira aula de HTML deve ser um texto pr-
formato como mostrado na figura, fonte Arial, tamanho 5 e cor
Magenta.

60

2) Crie uma nova pgina chamada Exercicio1.html e deixe-a com o seguinte
layout:

a) O texto dever ser em cor azul com tamanho 3.
b) A Linha horizontal deve ser cinza e tamanho 2.
c) Para cada figura colocar um texto para aparecer com for posicionado
o mouse sobre a imagem. O texto a seguir colocar para cada figura
seguindo a ordem (Buscar, Mostrar todos, Registro Anterior, Prximo
Registro, Salvar, Limpar, Excluir).
d) Para os links fazer para o site da Unesp e da Receita Federal.

3) Em outra pgina criar uma lista no ordenada com o tipo Square com os
seguintes itens:

Cursos de Graduao:

Agronomia
Biologia
61
Cincia da Computao
Direito
Medicina
Nutrio
Odontologia
Pedagogia
Zootecnia

Para cada linha fazer na fonte tamanho 2, alterar as cores das linhas em
verde e marrom.

62

4) Criar uma pgina com o nome Exercio3.html com o seguinte layout:

5) Construir a tela de cadastro de rgo Colegiado como demonstrado na
figura a seguir. Salvar esta pgina como ColegiadoOrgaoManutencao.html:

63

6) Criar uma pgina chamada Exercicio5.html e crie frames com o seguinte
layout:

64

Executar os seguintes passos:

a) Criar 3 pginas com os seguintes nomes: menu.html, rodap.html e
principal.html
b) Na pgina onde ser montado os frame (Exercicio5.html) monte o frame
a seguir:

- menu: frame com tamanho de 90% que dever chamar a pgina
menu.html
- rodape: frame com tamanho de 10% que dever chamar a pgina
rodape.html
- principal: frame com tamanho de 80% que dever chamar a pgina
principal.html

c) No menu coloque 4 links para os exerccios que fizemos at agora. Olhe
o exemplo acima.
d) No rodap coloque um link que chame a tela principal.
e) Todos os links devero abrir na tela principal
f) Na tela principal coloque o texto Curso de HTML

65
7) Criar uma Folha de Estilo com nome de Exercicio.css e realizar as
seguintes tarefas:

a) Criar estilo para TAG de link para que no tenha linha sublinhada e
seja da cor azul
b) Criar estilo para a TAG H3 com as seguintes propriedades: cor azul,
fonte Arial, tamanho 12pt.
c) Criar estilo para a TAG H1 com as seguintes propriedades: cor azul,
fonte Arial, tamanho 16pt.
d) Criar estilo com nome de nomeCampo com as seguintes
propriedades: cor preta, fonte Arial, tamanho 12pt.
e) Fazer a chamada desta folha de estilo nas pginas menu.html,
rodap.html, principal.html, Exercicio1.html, Exercicio2.html,
Exercicio3.html
f) Na pgina principal.html colocar a TAG H1 para o Ttulo da pgina.
g) Nas pginas Exercicio1.html, Exercicio2.html, Exercicio3.html colocar
a TAG H3 para os Ttulos das pginas.

8) Com base no exerccio 5 (formulrio de rgos Colegiados), utilizar o arquivo
CSS padro da Unesp (folha.css), realizando as seguintes tarefas:[

66
a) Inclua dentro da tag de cabealho

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

a) Dentro da tag BODY adicone:

class="FundoPaginaInterna

b) Dentro da tag TD do Colegiado da Unesp adicione:

class="NomeArea"

c) Dentro da tag TD do Manuteno do rgo Colegiado adicione:

class="TituloDestaque2

d) Dentro da tag TD dos ttulos Unidade, Tipo Colegiado, rgo
Colegiado adicione:

class="tabela-titulo

e) Dentro da tag TD dos nomes dos campos de formulrio adicione:

class="tabela-linha"

f) Para todos os campos de formulrio adicione dentro de suas tags:

class="itens-form

g) Para fazer o rodap da pgina adicionar o cdigo abaixo, antes de
fechar a Tag BODY:

<t abl e wi dt h=" 768" bor der =" 0" cel l paddi ng=" 0" cel l spaci ng=" 0"
i d=" Rodape" >
<t r >
<t d hei ght =" 60" al i gn=" l ef t " cl ass=" RodapeFundo" ><t abl e
wi dt h=" 100%" hei ght =" 60" bor der =" 0" cel l paddi ng=" 0"
cel l spaci ng=" 0" i d=" MenuRodape" >
<t r >
<t d wi dt h=" 300" cl ass=" RodapeDest aque" > Secr et ar i a
Ger al
<t d><di v al i gn=" cent er " ><a hr ef =" . . / " t ar get =" _bl ank"
cl ass=" RodapeText o" >Home</ a></ di v></ t d>
<t d wi dt h=" 2" cl ass=" RodapeDi vi sor " ><di v
al i gn=" cent er " ></ di v></ t d>
<t d><di v al i gn=" cent er " ><a hr ef =" . . / "
cl ass=" RodapeText o" >Cont at o</ a></ di v></ t d>
<t d wi dt h=" 2" cl ass=" RodapeDi vi sor " ><di v
al i gn=" cent er " ></ di v></ t d>
67
<t d><i mg sr c=" i magens/ spacer . gi f " wi dt h=" 265"
hei ght =" 30" ></ t d>
<t d><di v al i gn=" cent er " ><a hr ef =" . . / " t ar get =" _t op"
cl ass=" RodapeText o" >Sai r do Si st ema</ a></ di v></ t d>
</ t r >
</ t abl e></ t d>
</ t r >
</ t abl e>
<t abl e wi dt h=" 768" bor der =" 0" cel l spaci ng=" 0" cel l paddi ng=" 0" >
<t r >
<t d><t abl e wi dt h=" 567" bor der =" 0" al i gn=" cent er "
cel l paddi ng=" 0" cel l spaci ng=" 0" i d=" desenv" >
<t r >
<t d hei ght =" 25" ><di v al i gn=" cent er " ><span
cl ass=" desenvTXT" >UNESP -
Uni ver si dade Est adual Paul i st a
&quot ; J &uacut e; l i o de Mesqui t a
Fi l ho&quot ; </ span></ di v></ t d>
</ t r >
<t r >
<t d hei ght =" 25" ><di v
al i gn=" cent er " >Rei t or i a</ di v></ t d>
</ t r >
</ t abl e></ t d>
</ t r >
</ t abl e>
<t abl e wi dt h=" 768" bor der =" 0" cel l paddi ng=" 0" cel l spaci ng=" 0" >
<t r cl ass=" desenvPor " >
<t d hei ght =" 25" cl ass=" desenvPor " ><di v
al i gn=" cent er " >Tecnol ogi a e Desenvol vi ment o
: <a hr ef =" ht t p: / / www. unesp. br / ai " t ar get =" _bl ank" ><br >
Assessor i a de I nf or m&aacut e; t i ca</ a> - <b>GRUPO DE
SI STEMAS</ b>
<br >
<br >
<i mg sr c=" ht t p: / / shel ob. unesp. br : 2000/ i mages/ gscc. gi f "
/ >
<br >
</ di v></ t d>
</ t r >
</ t abl e>

Apostila HTMLCSS

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

Apostila HTMLCSS

Enviado por

Direitos autorais:

Formatos disponíveis

1

Você também pode gostar