CADERNO DE EXERCCIOS

EDITOR DE TEXTO - WRITER

APOSTILA DE
HTML/CSS

APOSTILA DE HTML

1 AULA

Assuntos a serem Abordados:
1. Notepad (Bloco de Notas) e Notepad++
2. O que HTML?
3. Marcaes HTML (tags)
4. Estrutura de uma pgina HTML

1.

Notepad (bloco de Notas) e Notepad++

- Notepad (Bloco de Notas)

O Notepad (ou Bloco de notas em portugus) um editor de
textos bsico que pode ser utilizado para criar documentos simples. O uso
mais comum do Bloco de notas exibir ou editar arquivos de texto (.txt),
mas muitos usurios o consideram uma ferramenta simples para criar
pginas da Web. Como o Bloco de notas oferece suporte apenas a uma
formatao muito bsica, no possvel salvar acidentalmente uma
formatao especial em documentos que devem permanecer como texto
puro. Isso especialmente til ao criar documentos HTML para uma
pgina da Web, uma vez que os caracteres especiais ou outra formatao
no podem aparecer na pgina da Web publicada, pois podem at causar
erros.

APOSTILA DE HTML

- Notepad++
O Notepad++ um editor de texto que suporta vrias linguagens
de programao rodando sob o sistema Microsoft Windows. O objetivo do
Notepad++ oferecer um esguio e eficiente binrio com uma interface
grfica totalmente modificvel. Alm disto, usurios podem definir suas
prprias linguagens usando um "sistema de definio de linguagem"
integrado, que faz do Notepad++ extensvel, para ter colorizao de
sintaxe e compactao de trechos de cdigo. O Notepad++ no apenas
um editor de cdigo, mas tambm uma alternativa ao bloco de notas
graas a sua velocidade.

2. O QUE HTML?
HTML: Hyper Text Markup Language (Uma linguagem de
Marcao de Texto)
A HTML uma linguagem de marcao. Criar um documento em
uma linguagem de marcao significa que voc comea com o texto da

APOSTILA DE HTML

sua pgina e inclui tags especiais no incio e no final de determinadas

palavras ou pargrafos.
- Caractersticas Gerais do HTML
 Documentos HTML so arquivos escritos em ASCII - texto.
 Podem ser criados em qualquer editor de texto (wordpad,
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.
H diferenas entre os diversos clientes Web, de forma que nem
todas as marcaes e seus correspondentes recursos so suportados por
todos eles. Quando um cliente no entende uma determinada marcao,
ele simplesmente a ignora. Ao criar um documento, importante test-lo
com vrios clientes.

3. MARCAES HTML (Tags)

Marcaes HTML conhecidas como tags so os sinais de
menor que e maior que ('<' e '>'), e tudo que estiver entre eles. As tags
so partes importantes em documentos HTML, elas so as responsveis
por toda a formatao do texto. Com elas voc pode dividir o documento
em rea de cabealho e corpo, colocar ttulos, criar tabelas, divises,
formulrios e ainda formatar trechos especficos do texto. Entre os sinais <
> so especificados os comandos propriamente ditos. No caso de tags que
necessitam envolver um texto, sua finalizao deve ser feita usando-se a
barra de diviso / , indicando que a tag est finalizando a marcao de um
texto. 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>.
Exemplo de tag : <nome da tag> texto </nome da tag>
Assim como outras linguagens, HTML possui uma estrutura bsica
para seus programas. Para que um browser interprete corretamente o
programa, ele deve possuir alguns comandos bsicos que sempre
devero estar presentes. Alguns browsers at dispensam seu uso, porm
melhor assumir tais comandos como parte fundamental do programa.
4

APOSTILA DE HTML

- INFORMAES TEIS
Uma considerao a ser feita em HTML sobre as tags, que elas
no so sensveis caixa, ou seja, a notao <title> equivalente a
<TITLE>, embora as convenes atuais incentivem o uso de todas
as tags em letras minsculas. Ento, para seguir os mais novos
padres web voc deve usar letras minsculas.
Uma outra questo que pode surgir sobre a extenso dos
arquivos. Este fato uma herana dos tempos antigos (no que diz
respeito Internet ) do MS-DOS e do Windows 16 bits, em que os
nomes dos arquivos tinham no mximo 8 caracteres e as suas
extenses no podiam ter mais de 3 caracteres, e por isso era
comum ver arquivos com nomes como 'index.htm'. Essas
deficincias, que no passado obrigaram a usar a extenso .htm em
vez de .html j foram eliminadas, logo totalmente aceitvel usar
'index.html' ou 'index.htm'.
4. ESTRUTURA DE UMA PGINA HTML
Uma pgina HTML dividida em duas partes: a cabea e o corpo.
Na cabea (ou cabealho) so definidos os atributos principais do
documento, como o ttulo e as palavras-chave. O corpo contm a parte
visvel do documento, sendo aquela que voc ver processada em seu
navegador.
- Estrutura Bsica de uma Pgina HTML
<html>
<head>
<title> Ttulo da Pgina </title>
</head>
<body>
Esta minha primeira pgina em HTML.
</body>
</html>
A primeira tag em seu documento HTML <html>. Esta tag define
o incio de um documento HTML e indica ao navegador que todo contedo
posterior deve ser tratado como uma srie de cdigos HTML. A ltima tag
em seu documento dever ser </html>. Esta tag indica ao navegador que
o fim de seu documento HTML.
5

APOSTILA DE HTML

A tags <head> ... </head> representam a informao do cabealho.

Nenhuma informao contida no cabealho exibida na janela do
navegador. Estes comandos para cabealho so opcionais, isto , um
programa HTML pode funcionar sem eles. Mas conveniente us-los, pois
o ttulo da pgina acrescentado atravs deles.
A tags <title> ... </title> representam o ttulo de seu documento, ou
seja, o texto que estiver contido entre estas tags ser o ttulo e ser
exibido na legenda do navegador, na parte de cima do browser.
O texto entre as tags <body> ... </body> so as informaes que
sero exibidas na pgina.
Estas tags definem o corpo de uma pgina HTML.

2 AULA

Assuntos a serem Abordados:
1. O que so Cabealhos?
2. Pargrafos e Quebra de Linha
3. Elementos e Atributos de Pginas

1. O QUE SO CABEALHOS?
Os cabealhos (tambm chamados de Headings) servem para
criar ttulos diferenciar as sees da sua pgina. Cabealhos so exibidos
em letras maiores e em negrito. O primeiro cabealho em cada documento
deve estar marcado como <H1>. Eles possuem seis valores diferentes,
sendo que a de valor 1 a que possui a maior fonte e a de valor 6 possui
a menor fonte..
Por exemplo, usando o seguinte cdigo:

APOSTILA DE HTML

No cdigo acima, o HTML automaticamente solta uma linha em

branco entre um Ttulo e outro.
Tome cuidado 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.
2. PARGRAFOS E QUEBRA DE LINHA
- PARGRAFOS
Para comear um novo pargrafo, ou seja, avanar uma linha em
branco e iniciar o texto na segunda linha aps o final do pargrafo anterior
deve ser usado o comando <p>. Esse comando dever aparecer em par:
<p> </p>.
- QUEBRA DE LINHA
A tag <br> utilizada quando voc quer terminar uma linha, mas
no quer comear um novo pargrafo. Com este comando voc faz com
que ocorra uma quebra de linha, onde voc posicionar a tag. Note que
para o elemento <br> no existe o comando </br>, isto , a quebra de
linha no age numa regio de texto delimitada, mas sim num ponto do
texto.
- INFORMAES TEIS
Sempre que voc quiser inserir linhas em branco, utilize a tag <br>.
Existem pessoas que utilizam pargrafos vazios para obter o mesmo
resultado, mas isso est errado. A tag <p> deve ser usada apenas para
definir pargrafos, e o elemento <br> no deve ser usado, por exemplo,
para criar listas, pois existem tags concebidas especificamente para isso.
Sempre que voc precisar obter uma formatao especial, voc deve usar
o elemento que foi criado para esse efeito.
3. ELEMENTOS E ATRIBUTOS DE PGINAS
Elementos HTML so definidos usando tags de abertura, contedo
e tag de fechamento. Tudo o que se encontrar entre as tags de abertura e
de fechamento fazem parte do contedo do elemento. Uma pgina HTML
composta basicamente de ttulos, textos, pargrafos, imagens e links,
responsveis pela chamada de outras pginas para a tela. Todos esses
elementos so posicionados na pgina por meio de comandos especficos
de linguagem.
7

APOSTILA DE HTML

- Ttulo
O ttulo de uma pgina web indica qual o assunto abordado e ir
aparecer na barra de ttulo do browser. Voc poder ter apenas um ttulo.
Este ttulo utilizado por programas de lista (hotlist) do seu navegador e
tambm por outros programas que catalogam pginas da Internet. Para
atribuir um ttulo pgina voc dever utilizar a tag: <title> </title>. Esta
tag sempre ser includa no cabealho (entre as tags <head> </head).

- Imagem
So figuras, desenhos e fotos usados para ilustrar a pgina.
- Texto
a informao mais comum dentro da pgina. Pode ser formatado
atravs de vrios comandos.
Atributos HTML, definem caractersticas adicionais aos elementos,
informam ao navegador a respeito das propriedades que os elementos
podem assumir. Tais atributos devem ser colocados sempre na tag de
abertura e nunca na tag de fechamento, logo aps o nome do elemento,
precedido de um espao e composto de um nome de atributo, um sinal
de igual (=) e um valor de atributo, cercado por aspas duplas (") ou simples
().
No HTML, os valores dos atributos podem ser definidos da forma:
atributo=valor.
Assim como existem muitas tags, tambm existem muitos atributos.
Alguns atributos so empregados em tags especficas, enquanto outros
servem para vrias tags e vice-versa. Algumas tags podem conter
somente um tipo de atributo, enquanto outras podem conter vrios tipos.
Para facilitar o entendimento de como utilizar atributos, veremos
nas sees seguintes, atributos que sero aplicados a vrios elementos.

APOSTILA DE HTML

3 AULA

Assuntos a serem Abordados:
1. Alinhamentos de pargrafo
2. Criando uma Diviso
3. Texto Pr-Formatado

1. ALINHAMENTOS DE PARGRAFO

Voc j deve ter visto que em certos documentos o texto aparece

ora alinhado direita, ora esquerda, no centro ou ento ocupando
uniformemente o espao da pgina ( texto justificado). Isso pode ser
obtido
facilmente
em
HTML.
Veja
a
tabela
abaixo:
<p align=left >
<p align=right >
<p align=center >
<p align=justify >

Alinha o texto esquerda

Alinha o texto direita
Alinha o texto
centralizado
Alinha o texto justificado

Note que entre os delimitadores < e > no encontra-se apenas o

elemento <p>. Alm dele, existe o texto align="alinhamento". Dizemos
que align um atributo do elemento p e alinhamento o valor desse
atributo. No caso de <p align="justify">, o valor do atributo align (que
significa alinhamento em ingls) justify (justificado).

2. CRIANDO UMA DIVISO

Existem momentos em que queremos que vrios pargrafos
possuam um mesmo valor de atributo - centralizado, por exemplo. Ao
invs de escrevermos align="justify" a cada abertura de novo pargrafo,
podemos usar o elemento div, que cria uma "diviso" no documento na
qual alguns atributos so preservados. Suas vantagens sobre o align
que:
 Precisar ser utilizada apenas uma vez, ao contrrio do atributo
align, que tem de ser includo em diversas tags.

APOSTILA DE HTML

 A tag <div> pode ser usada para alinhar qualquer elemento

(cabealho, pargrafos, citaes, imagens, tabelas, etc.). O
atributo align encontra-se disponvel apenas em um nmero
limitado
de
tags.

Voc dever colocar a tag <div> e acrescentar o atributo align na

tag de abertura. O atributo align poder ter os valores: left, right , justify
e center.
Vejamos o exemplo e como a pgina HTML ficaria:
<div align="center ">
<p>
Texto 1
Texto 2
Texto 3
</p>
<p>
Texto 4
Texto 5
Texto 6
</p>
</div>
3. TEXTO PR-FORMATADO
O texto de um arquivo em HTML formatado atravs das tags.
Mas voc possui a opo da tag <pre> </pre> para estabelecer uma
formatao atravs de um editor de texto e que esta formatao
permanea na sua pgina html.
O texto pr-formatado excelente para apresentar cdigo-fonte
com seus espaamentos adequados. Este recurso pode ser utilizado para
criar tabelas, mas no recomendvel.
Uma observao importante que, ao usar tags de estilo, no tags
de elemento, neste espao elas iro funcionar normalmente.

10

APOSTILA DE HTML

SINTAXE:
<PRE>
TEXTO
TEXTO
TEXTO
</PRE>

4 AULA

Assuntos a serem Abordados:
1. Tags de Formatao
2. Formatao de Fonte
3. Entidades, Acentuao e Caracteres Especiais.

1. TAGS DE FORMATAO
Assim como em um editor de texto, em HTML voc poder utilizar
vrios elementos para se formatar um texto, como por exemplo, escrever
em negrito, itlico, sublinhado, etc.
TAG
NEGRITO

SINTAXE

FUNO
Aplica o estilo negrito

<b>texto</b>
ITLICO

Aplica o estilo itlico

<I>texto</I>

SUBLINHADO

Aplica o estilo sublinhado (em alguns browsers

<u>texto</u> esta tag no funciona)

Os principais comandos de estilo:

TAG
STRONG
TYPERWRITER
BIG
SMALL
SOBRESCRITO

SINTAXE
FUNO
<strong>texto</strong> Similar ao negrito
<tt>texto</tt>
Deixa o texto com espaamento
regular
<big>texto</big>
Aumenta a fonte e aplica Negrito
<small>texto</small> Reduz e altera a fonte
^texto
Eleva o texto e diminui seu corpo
11

APOSTILA DE HTML

SUBESCRITO

_texto

Rebaixa o texto e diminui seu corpo

2. FORMATAO DE FONTE
Para fazer alteraes no tamanho, tipo e cor da fonte de seu texto
voc utilizar a tag
<font> </font>. Sua sintaxe a seguinte:
<font size="tamanho" color="cor" face="tipo">texto</font>
- Size - especifica o tamanho da fonte a ser utilizada para o texto.
Os valores permitidos vo de 1, o menor, a 7, o maior. Sendo 3 o valor
padro.
- Face - especifica o tipo de fonte a ser escolhida para o texto.
- Color - especifica a cor do texto atravs de um nome predefinido
de cores. No entanto, podemos obter qualquer cor que desejarmos
combinando propores corretas de trs cores bases: Vermelho (Red),
Verde (Green) e Azul (Blue). Seu valor ser especificado no formato
hexadecimal.
Desta forma, possvel exprimir cores usando trs nmeros
hexadecimais que definem as quantidades de vermelho, verde e azul que
entram na composio de uma determinada cor. O valor mais baixo de
uma determinada cor 0 (#00 em cdigo hexadecimal) e o valor mais alto
255 (#FF em cdigo hexadecimal). Assim, a cor preta tem 0 de
vermelho, 0 de verde e 0 de azul, escrevendo na forma #000000. J o
branco possui 255 de vermelho, 255 de verde e 255 de azul, sendo seu
cdigo #FFFFFF. O amarelo forte possui 255 de vermelho, 255 de verde e
0 de azul, sendo seu cdigo #FFFF00. A tabela abaixo mostra os
resultados de diversas combinaes de cores:
TABELA DE CORES
Os 16 nomes de cores aceitos segundo o HTML 3.2 so estes:

aqua
gray
navy

black
green
olive

blue
lime
purple

fuchsia
maroon
red
12

APOSTILA DE HTML

silver

teal

white

yellow

Os cdigos de cores so estes:

000000
003300
006600
009900

000033
003333
006633
009933

000066
003366
006666
009966

000099
003399
006699
009999

0000CC
0033CC
0066CC
0099CC

0000FF
0033FF
0066FF
0099FF

00CC00
00FF00
330000
333300
336600
339900
33CC00
33FF00

00CC33
00FF33
330033
333333
336633
339933
33CC33
33FF33

00CC66
00FF66
330066
333366
336666
339966
33CC66
33FF66

00CC99
00FF99
330099
333399
336699
339999
33CC99
33FF99

00CCCC
00FFCC
3300CC
3333CC
3366CC
3399CC
33CCCC
33FFCC

00CCFF
00FFFF
3300FF
3333FF
3366FF
3399FF
33CCFF
33FFFF

660000
663300
666600
669900
66CC00
66FF00
990000
993300

660033
663333
666633
669933
66CC33
66FF33
990033
993333

660066
663366
666666
669966
66CC66
66FF66
990066
993366

660099
663399
666699
669999
66CC99
66FF99
990099
993399

6600CC
6633CC
6666CC
6699CC
66CCCC
66FFCC
9900CC
9933CC

6600FF
6633FF
6666FF
6699FF
66CCFF
66FFFF
9900FF
9933FF

996600
999900
99CC00
99FF00
CC0000
CC3300
CC6600

996633
999933
99CC33
99FF33
CC0033
CC3333
CC6633

996666
999966
99CC66
99FF66
CC0066
CC3366
CC6666

996699
999999
99CC99
99FF99
CC0099
CC3399
CC6699

9966CC
9999CC
99CCCC
99FFCC
CC00CC
CC33CC
CC66CC

9966FF
9999FF
99CCFF
99FFFF
CC00FF
CC33FF
CC66FF

CC9900
CCCC00
CCFF00
FF0000
FF3300
FF6600
FF9900
FFCC00

CC9933
CCCC33
CCFF33
FF0033
FF3333
FF6633
FF9933
FFCC33

CC9966
CCCC66
CCFF66
FF0066
FF3366
FF6666
FF9966
FFCC66

CC9999
CCCC99
CCFF99
FF0099
FF3399
FF6699
FF9999
FFCC99

CC99CC
CCCCCC
CCFFCC
FF00CC
FF33CC
FF66CC
FF99CC
FFCCCC

CC99FF
CCCCFF
CCFFFF
FF00FF
FF33FF
FF66FF
FF99FF
FFCCFF
13

APOSTILA DE HTML

FFFF00

FFFF33

FFFF66

FFFF99

FFFFCC

FFFFFF

3. ENTIDADES, ACENTUAO E CARACTERES ESPECIAIS.

Alguns caracteres em HTML so chamados de caracteres
reservados que quando aparecem num documento HTML so
interpretados pelo navegador.
Para acessar um caractere, voc precisa usar a seguinte
conveno: &nome-especial;
Onde o nome-especial o nome ou um nmero associado ao
smbolo grfico que voc deseja mostrar no seu documento.
H caracteres que no podem ser obtidos por meio do teclado.
Eles podem ser inseridos em sua pgina atravs da especificao de um
cdigo especial que o browser interpreta e substitui por um caractere
especfico. Esses cdigos podem ser obtidos a partir de uma entidade
HTML.
A norma ISO utiliza um cdigo composto pelo caractere & seguido
do smbolo # (cerquilha) e, ento, de uma combinao numrica com
ponto-e-vrgula. J a entidade HTML usa o caractere & seguido de uma
palavra que identifica o smbolo com ponto-e-vrgula.
Por exemplo, e voc utilizar a palavra caf com a acentuao do
seu teclado, com certeza na visualizao do seu browser ficar perfeita,
mas pode ser que em outros computadores com a configurao diferente
no aparea da mesma forma.
O ideal coloc-la assim: caf&eacute; ou ca&#233;
Ex: Dirio = di&aacute;rio
Natao = Nata&ccedil;&atilde;o
Sequncia = sequ&ecirc;ncia
E se desejasse colocar a palavra entre aspas: &quot; caf&eacute; &quot.

14

APOSTILA DE HTML

5 AULA

Assuntos a serem Abordados:
1. Linhas Horizontais
2. Efeitos de Movimento

1. LINHAS HORIZONTAIS
A tag <hr> insere uma linha horizontal. Ela no possui tag de
fechamento e utilizada para auxiliar na distino de blocos de contedo.
Essa linha possui vrios atributos, oferecendo resultados diversos.
Os atributos iro definir as propriedades que a linha ir conter como
largura, cor, posio e comprimento.
<hr size=7> insere uma linha de largura 7 (pixels).
<hr color=red> insere uma linha com cor vermelha.
<hr align=left> insere uma linha alinhada esquerda.
<hr width=50%> insere uma linha de 50% de comprimento.
Voc poder utilizar os atributos separados ou juntos em uma linha
horizontal.
<hr size=7 color=red align=left width=50%>
Insere uma de largura 7, com cor vermelha , alinhada esquerda ,
de 50% de comprimento.
- INFORMAES TEIS

15

APOSTILA DE HTML

Para voc utilizar os atributos de alinhamento em uma linha

horizontal, voc deve atentar para o comprimento da linha, ou seja, o
espao disponvel que ela est ocupando.
Voc poder posicionar uma linha horizontal direita, esquerda e
no centro, porm, se desejar posicionar na parte inferior da janela no
ser possvel utilizar atributos de alinhamento, para isso, voc poder
fazer uso da tag <br>.

2. EFEITOS DE MOVIMENTO
possvel obter o efeito de animao de texto, atravs da tag
<marquee>.
Sintaxe: <marquee behavior=efeito>Texto</marquee>
Atributos:
- Scroll - o letreiro continuar rolando continuamente em um mesmo
sentido.
<marquee behavior=scroll>Texto</marquee>
- Slide - o letreiro parte de um ponto da tela e vai at o outro, e pra
quando chega ao final do seu percurso.
<marquee behavior=slide>Texto</marquee>
- Alternate - o letreiro deslizar at o outro lado da tela, e quando chegar
l, ele voltar pela tela novamente indo e voltando.
<marquee behavior=alternate>Texto</marquee>
Tambm possvel definir as direes que o texto ir ter em seu
percurso atravs do efeito direction.
Sintaxe: <marquee direction=efeito>Texto</marquee>
Atributos:
- Up - o letreiro ir para cima.
16

APOSTILA DE HTML

<marquee direction=up>Texto</marquee>
- Down - o letreiro ir para baixo.
<marquee direction=down>Texto</marquee>
- Left - o letreiro ir para a esquerda.
<marquee direction=left>Texto</marquee>
- Right - o letreiro ir para a direita.
<marquee direction=right>Texto</marquee>
6 AULA

Assuntos a serem Abordados:
1. Listas
2. Imagens
3. Colocando uma imagem como plano de fundo

1. LISTAS
A linguagem HTML contm elementos que permitem criar dois
tipos de listas: as no ordenadas e as ordenadas.
1.2 - Listas No Ordenada
Uma lista no ordenada contm vrios itens marcados todos com o
mesmo smbolo (normalmente um crculo pequeno ou um quadrado
pequeno).
Para criar uma lista no ordenada, utilizamos o elemento <ul>
(unordered list). Dentro desse elemento, os vrios itens so criados com
o elemento <li> (list item).
O exemplo seguinte mostra uma lista simples:
<ul>
<li> Laranja </li>
<li> Uva </li>
</ul>
Este o aspecto de como vai ficar em seu navegador:

17

APOSTILA DE HTML

Laranja
Uva
Dentro de uma lista no ordenada podemos colocar pargrafos,
quebras de linha, imagens, outras listas, etc.
Voc poder personalizar sua lista no ordenada com o atributo
Type. O atributo Type pode assumir trs valores (circle, disk e square)
para definir o tipo de marcao a ser usado na lista.
Veja o exemplo:
<ul type=square>
<li> Laranja </li>
<li> Uva </li>
</ul>
Agora veja como ficar em seu navegador:
 Laranja
 Uva

1.3 - Listas Ordenadas

Uma lista ordenada contm vrios tens numerados e criada com
o elemento <ol> (ordered list). Os itens da lista ordenada definem-se com
o elemento <li> (list item).
<ol>
<li> Abacate </li>
<li> Abacaxi</li>
</ol>
Este o aspecto de como vai ficar em seu navegador:
1. Abacate
2. Abacaxi
Dentro de uma lista ordenada podemos colocar pargrafos,
quebras de linha, imagens, outras listas, etc.

18

APOSTILA DE HTML

Voc poder personalizar sua lista ordenada com o atributo Type e

Start. O atributo Type pode assumir cinco valores ( 1 , a , A , i
, I ) para definir o tipo de numerao a ser usado na lista ordenada.
"1" - Especifica que os algarismos arbicos padro ( 1, 2, 3, 4, ... )
sero usados para numerar a lista.
"a" - Especifica que as letras minsculas ( a, b, c, d, ... ) sero
usadas para numerar a lista.
"A" - Especifica que as letras maisculas ( A, B, C, D, ... ) sero
usadas para numerar a lista.
"i" - Especifica que os algarismos romanos minsculos ( i, ii, iii, iv,
... ) sero usados para numerar a lista.
"I" - Especifica que os algarismos romanos maisculos ( I, II, III, IV,
... ) devem sero usados para numerar a lista.
Agora um exemplo com o atributo Type:
<p>Ingredientes para bolo</p>
<ol type="a">
<li>Farinha de trigo</li>
<li>Acar </li>
<li>Manteiga </li>
<li>Ovos </li>
<li>Leite </li>
<li>Fermento</li>
</ol>
Agora veja como ficar em seu navegador:
Ingredientes para bolo
a.
b.
c.
d.
e.
f.

Farinha de trigo
Acar
Manteiga
Ovos
Leite
Fermento

Em uma lista ordenada o ponto inicial 1. Usando o atributo Start

voc poder determinar o nmero ou a letra que inicia sua lista. Como no
exemplo abaixo:
<p>Ingredientes para bolo</p>
<ol type=1 start=3>
<li>Farinha de trigo </li>
19

APOSTILA DE HTML

<li>Acar </li>
<li>Manteiga </li>
<li>Ovos</li>
<li>Leite </li>
<li>Fermento </li>
</ol>
Agora veja como ficar em seu navegador:
Ingredientes para bolo
3.
4.
5.
6.
7.
8.

Farinha de trigo
Acar
Manteiga
Ovos
Leite
Fermento

Usando o atributo Value em um item da lista ordenada poderemos

alterar os valores da lista a partir de qualquer ponto.
Exemplo:
<ul>
<li>
<li value=10>
<li>
</ul>
2. IMAGENS
Alm de manipular texto, o HTML tambm serve para exibir
imagens de uma maneira muito simples, usando para isso o elemento
img. As imagens dentro de uma pgina devem estar preferencialmente no
formato ".gif". Este o formato (ou extenso) mais universalmente aceito
pelos visualizadores de WWW (browsers). O Internet Explorer consegue
decodificar outros formatos como o ".jpg" e ".rgb", mas esta capacidade
no comum a todos os programas visualizadores. Por isso fique atento
quando for aplicar certos tipos de formatos (extenses).
Para inserir uma imagem em uma pgina web utilizamos a tag
<img src> e seus atributos.
Sintaxe: <img src=nome da imagem.extenso
Poderemos acrescentar os seguintes atributos para imagens:
20

APOSTILA DE HTML

Width="valor em pixel"
Height="valor em pixel"
Align=(center, left, right)

Largura da imagem
Altura da imagem
Alinhamento da imagem.
Texto que aparecer ao passar o mouse sobre a
Alt="texto alternativo"
imagem
Border="valor em pixel" Especificao da largura da borda da imagem.
Indica o espao que deve ser deixado acima e abaixo
Vspace="valor em pixel"
da imagem.
Indica o espao que deve ser deixado nas laterais da
Hspace="valor em pixel"
imagem.
O atributo src - source, (fonte em ingls) d o nome do arquivo
da imagem e o nico atributo obrigatrio para o elemento img. Quando
seu navegador abre um arquivo html e encontra o elemento img, ele usar
o respectivo atributo src como o endereo onde est o arquivo de imagem
a ser exibido. Por isso voc deve organizar as imagens juntamente com os
arquivos a serem salvos em um mesmo local.
3. COLOCANDO UMA IMAGEM COMO PLANO DE FUNDO
O atributo background estabelece que o padro de fundo da
pgina seja uma imagem. Este atributo inserido dentro da tag <body>.
Sendo que o valor desse atributo indica o local onde se encontra a
imagem. Se as dimenses da imagem forem inferiores s dimenses da
pgina, o navegador repetir a imagem (como num cho de mosaicos ou
em uma parede de azulejos), por forma a ocupar todo o fundo da pgina.
O exemplo abaixo mostra bem como se faz isso:
<body background=" imagem. jpg">
<body background="c:\site\imagem.jpg>
O valor do atributo background uma URL (endereo) que define
o local onde se encontra a imagem. Na primeira linha mais acima, demos
uma URL relativa e na segunda demos uma URL absoluta.

21

APOSTILA DE HTML

7 AULA

Assuntos a serem Abordados:
1. Colocando uma cor no fundo da pgina
2. Links
3. ncoras

1. COLOCANDO UMA COR NO FUNDO DA PGINA

<body bgcolor="cor">
O atributo bgcolor nos permite escolher a cor de fundo da pgina,
utilizando o cdigo das cores ou at mesmo o nome de cada cor.
2. LINKS
A principal atrao da Internet a criao de documentos com o
conceito de hipertexto, ou seja, um documento que se vincula a outros
documentos por meio de ligaes especiais chamadas links ou hiperlinks.
Com esse conceito, voc pode criar documentos que faam referncias e
permitam ao usurio acessar tais referncias no importando se elas
esto em outra pgina Web, no seu micro ou em algum servidor de rede.
O uso de hipertexto tambm facilita a criao de documentos
extensos cujas sees ou tpicos podem ser rapidamente acessados por
meio dos links. Imagine que voc crie uma pgina sobre determinado
assunto em vrios tpicos abordados. Assim como em um livro voc cria
todo o texto do documento e depois cria, no incio, um sumrio indicando
os tpicos do documento. Se quiser acessar diretamente o texto de um
tpico, basta dar um clique sobre o item do tpico no sumrio e ele ser
imediatamente exibido.
Um link reconhecido em uma pgina por estar em cor
normalmente diferente do resto do texto e, ao passar com o mouse sobre
esse texto o cursor muda para uma mo apontando para o link.
Isso feito de modo muito simples com o elemento a, como segue:
<a href="endereo da pgina">texto que ser o link</a>
Exemplo:
22

APOSTILA DE HTML

<a href="c:\site\casa.html">Minha casa</a>

1.2. Usando uma imagem como link

Exemplo:
<a href="c:\site\casa.html><img src="c:\site\imagem.jpg"></a>
Como voc deve ter percebido, o atributo href (Hipertext
Reference) indica o endereo da pgina que voc quer "linkar" ( ligar ) ao
seu documento.

3. NCORAS
Uma ncora um ponto de referncia ou endereo que ser
acessado por um link, usada dentro do documento para marcar o incio
de uma seo do documento.
Suponha que seu texto seja muito grande, o que tornaria
trabalhoso para quem estiver vendo a pgina conseguir se movimentar
entre um tpico e outro.
Ento faa o seguinte: Nomeie um pedao da sua pgina atravs
do tag:
<a name="nome"> Texto </a>
Lembre-se que "nome" fictcio, voc escolhe o nome.
Depois disso escreva o pedao que voc quer associar a esse
Nome. Agora crie um link para chegar at esse pedao, usando o tag:
<a href="#nome">Clique Aqui</a>
Pronto! Ao clicar na mensagem "Clique Aqui" de sua pgina, o
usurio ir at o pedao que voc nomeou.

23

APOSTILA DE HTML

ATENO: O sinal de cerquilha (#) necessrio para a ncora, pois

avisa ao browser para procurar o link no documento atual.
Uma ncora um ponto de referncia ou endereo que ser
acessado por um link.

8 AULA

Assuntos a serem Abordados:
1. Atributos de <body>
2. Tabelas tag <table>
3. Atributos da tag <table>

1. ATRIBUTOS DE <BODY>
Atravs de atributos de <body>, podemos definir cores para os
textos, links e para o fundo das pginas, bem como uma imagem de
fundo):
<body bgcolor="#ffffff" text="#rrggbb" link="#rrggbb" alink="#rrggbb"
vlink="#rrggbb" >
onde:


bgcolor : Cor de fundo (padro: cinza ou branco)

text : Cor dos textos da pgina (padro: preto)

link : A cor dos links (padro: azul)

alink : A cor dos links, quando acionados (padro: vermelho)

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

Seus valores podem ser dados em valores hexadecimais equivalentes a cores no

padro RGB (Red, Green, Blue) ou mesmo dando os nomes das cores. Existem
tabelas de cores com esses valores, mas grande parte dos editores j oferece uma interface
bem amigvel atravs da qual escolhemos as cores desejadas, sem nos preocuparmos com
cdigos de cores complexos.

24

APOSTILA DE HTML

2. TABELAS tag <table>

Tabelas auxiliam na visualizao de dados ou na diviso de sua
pgina em setores. Entenda por uma tabela HTML como sendo
semelhante a uma tabela que voc desenharia numa folha de papel ou
num outro programa de computador. O elemento principal de uma tabela
o table e aqui segue um exemplo simples de tabela:
<table>
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
Cujo resultado :
Primeira Segunda
Terceira Quarta
Em HTML, as tabelas so divididas em linhas e clulas. Na tabela
acima, a primeira linha contm as clulas Primeira e Segunda, enquanto
que a segunda linha contm as clulas Terceira e Quarta.
Dentro de um bloco <table>, os principais elementos que voc
utilizar so o <tr> (linha), e o <td>(clula) . Dessa forma, podemos
definir as linhas e as clulas da tabela. obrigatrio que um bloco <td>
esteja definido dentro de um bloco <tr>, ou seja, que as clulas estejam
dentro de linhas.
No exemplo anterior, criamos uma linha com <tr> e em seguida,
dentro de um bloco <td>, escrevemos o texto da clula (Primeira).
Abrimos outro bloco <td> nesse mesmo bloco <tr>, onde colocamos o
texto da segunda clula (Segunda). Depois, fechamos a linha com o </tr>
para em seguida abrir uma nova linha, onde criamos as clulas contendo
os textos Terceira e Quarta.
Na figura abaixo, voc poder ver com detalhes o significado de
cada elemento que compe a estrutura bsica de uma tabela

25

APOSTILA DE HTML

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>.




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>.
<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.

26

APOSTILA DE HTML

3. ATRIBUTOS DA TAG <TABLE>

Vamos ver ento o exemplo de uma tabela utilizando essas
marcaes bsicas:
<table border>
<tr>
<td>Itens/Ms</td>
<th>Janeiro</th><th>Fevereiro</th><th>Maro</th>
</tr>
<tr>
<th>Usuarios</th><td>80</td><td>93</td><td>120</td>
</tr>
<tr>
<th>Linhas</th><td>3</td><td>3</td><td>5</td>
</tr>
</table>
Uma tabela simples:
<table border=4>
<tr><th>coluna 1</th><th>coluna 2</th></tr>
<tr><td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr>
<tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr>
</table>
5.1. Aplicando bordas na tabela
O atributo border no elemento table serve para dar borda tabela,
sendo possvel definir ainda, o valor da largura da borda da tabela. Sem o
atributo border, o elemento table no ficaria muito distinto onde comea e
termina cada uma das clulas:
<table border=1>
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>
27

APOSTILA DE HTML

O exemplo abaixo mostra duas tabelas nas quais so

especificados os valores 10 e 5 para a borda, e outra na qual nenhuma
borda foi especificada. Voc pode criar uma tabela sem bordas para
montar um menu em que as opes no fiquem unicamente na vertical,
como ocorre quando se usa o comando para a criao de listas.

5.2. Largura de clulas e tabelas

Para escolher a largura de tabelas e clulas, utiliza-se o j
conhecido atributo width, cujo argumento idntico para o caso de
imagens:
<table border="1" width="200">
<tr>
<td width="30%">Primeira</td>
<td width="70%">Segunda</td>
</tr>
<tr>
<td>Terceira</ td>
28

APOSTILA DE HTML

<td>Quarta</ td>
</tr>
</table>
Note que quando o width utilizado com o elemento table, a
largura refere-se largura da pgina, enquanto que quando usado dentro
de um td largura referente ao tamanho da tabela. Isso tudo desde que
o argumento seja dado em porcentagem e no em pixels.
5.3. Espaamento entre clulas
Para controlarmos a distncia entre duas clulas, utilizamos o
atributo cellspacing, cujo argumento dado em pixels:
<table cellspacing="20" border="1">
<tr>
<td>Primeira</td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>

Para controlar o espaamento vertical, utilizamos o cellpadding:

<table cell spacing="20" cellpadding="35" border="1">
<tr>
<td>Primeira</ td>
<td>Segunda</td>
</tr>
<tr>
<td>Terceira</td>
<td>Quarta</td>
</tr>
</table>

29

APOSTILA DE HTML

5.4. Ampliando uma clula para mais de uma coluna

O exemplo acima mostra o uso da opo Colspan para aumentar o

tamanho de uma clula e fazer com que ela ocupe colunas adjacentes.
Note que o contedo desta clula est centralizado pelo comando
align=center. Lembre-se de que esse no um recurso exclusivo do
Internet Explorer.
Veja o resultado:

5.5. Expandindo uma clula para mais de uma linha.

A opo Rowspan serve para aumentar o tamanho de uma clula e
fazer com que ela ocupe colunas adjacentes. Note que o contedo desta
clula est centralizado pelo comando valign=top.

30

APOSTILA DE HTML

Veja o efeito desses comandos:

Resultado do Cdigo:

5.6. Ttulos de Colunas

Com o par de comandos <th> (Title Heading), voc pode
especificar ttulos para as colunas. Esses comandos funcionam da mesma
forma que os <td>, s que deixam o contedo da clula centralizado e em
negrito. Veja o prximo exemplo.
Resultado do Cdigo:

31

APOSTILA DE HTML

9 AULA

Assuntos a serem Abordados:
1. Formulrios tag <form>
2. Frames <frames> / <frameset>
3. .CSS

1. FORMULRIOS TAG <FORM>

Os formulrios servem para recolher dados introduzidos pelos
visitantes e envi-las para voc, atravs de seu servidor. Um formulrio
uma seo da pgina HTML que contm elementos que permitem ao
visitante inserir dados (elementos <textarea> e vrios tipos de elementos
<input>, <option> e <select>).
Estes elementos permitem inserir dados numricos, textos
pequenos, textos longos, selecionar elementos em uma lista com vrias
32

APOSTILA DE HTML

escolhas, responder facilmente com respostas do tipo "sim" ou "no",

selecionar rapidamente uma opo em um pequeno grupo, etc.
1.2. Criar Formulrios
Os formulrios so criados com o elemento <form>. Dentro desse
elemento principal colocamos diversos elementos para a insero dos
dados.
<form>
<input>
.
.
.
<input>
</form>
O elemento <form> por si s no faz com que o navegador
desenhe nada na pgina nem permite inserir dados. Ele contm elementos
que recolhem os dados e possui atributos que dizem ao navegador como
e para onde devem ser enviados os dados inseridos pelo visitante.
Veremos a sintaxe desta tag:
< form name="form1" method="post" action="">
 name o nome que ser dado ao formulrio, por padro
definido form1, mas o usurio pode colocar outro nome.
 method o mtodo que ser utilizado para que os dados do
formulrio sejam enviados para o cliente da pgina. Existem
dois mtodos para este envio, o post e o get. Veremos
melhor a sua utilizao no curso de ASP.
 action o arquivo que ser executado pelo formulrio para
que os dados cheguem ao cliente com segurana.
Aps colocarmos a <form>, teremos que criar as caixas de texto
onde sero digitadas as informaes. Para isso utilizaremos a tag <input>
veja a sintaxe:
<input type="text" name="textfield">
Onde:
33

APOSTILA DE HTML

 type o tipo que ser a caixa de texto, normalmente o tipo

text, mas h outros tipos password que utilizado em
caixas que guardam informaes sobre senhas.
 name o nome que ser dado caixa de texto que
guardar as informaes.

1.3. Action e Botes (Reset e Submit)

Quando o visitante clica sobre o boto "Submeter" (ou "Submit"),
as opes marcadas e o texto que foram inseridos no formulrio so
enviados para voc (ou para seu servidor). Conhea dois dos principais
botes
e
suas
funes.
 submit - usado para enviar os dados do formulrio.
 reset - utilizado para limpar os dados do mesmo.
O atributo action do elemento <form> contm o endereo (URL)
do recurso da Web (site, download, email, etc. ) que est encarregado de
realizar este processamento. para l que o contedo do formulrio ser
enviado.
<form name="input" action="exemplos /action.html " method="get ">
Nome de usurio:
<input type="text" name="usuario">
<input type="submit" value="submeter">
<form>
O exemplo acima ficar sendo exibido da seguinte forma em seu
navegador:

1.4. Input
O elemento que encontramos com maior frequncia em formulrios
o elemento <input>.
O exemplo abaixo mostra um formulrio simples com dois
elementos input:
<html>
34

APOSTILA DE HTML

<head>
<title>Cadastro Pessoal</title>
</head>
<body>
<form name=cadastro method=post action= >
<b><i>Cadastro Pessoal </i></b>
<br>
Nome:
<input type="text" name="Nome">
<br>
Telefone:
<input type="text" name="Nome">
<br>
<br>
<input type="submit" name="Enviar" value="Enviar">
<input type="reset" name="Limpar" value="Limpar">
</form>
</body>
</html>
ATENO: um input para cada
caixa de texto.
O formulrio acima ficar sendo
exibido desta forma em seu navegador:
O elemento <input> pode assumir
diversas formas com finalidades diferentes.
1.5. Radio Buttons
Os "Radio Buttons" so utilizados para se criar um grupo pequeno
de opes em que apenas podemos selecionar uma de cada vez.
<form action="processamento.asp">
<input type="radio" name=" sexo" value="masculino"> Masculino
<br>
<input type="radio" name=" sexo" value=" feminino"> Feminino
<form>
O exemplo acima ficar sendo exibido desta maneira em seu
browser:

Repare que s podemos selecionar uma das opes acima.

35

APOSTILA DE HTML

1.6. Checkboxes
As caixas de validao "checkboxes" devem ser usadas sempre
que queremos que o visitante aceite (ou no) os itens dentro de um
pequeno grupo. permitido validar mais de uma opo simultaneamente.
<form>
<input type="checkbox" name="carro">Eu tenho um carro
<br>
<input type="checkbox" name="surf ">Eu tenho uma prancha de surf
<form>
O exemplo acima ficar sendo exibido desta forma em seu
browser:

Repare que podemos selecionar vrias opes ao mesmo tempo.

2. <FRAMES> / <FRAMESET>
Os frames (molduras) so subjanelas definidas sobre a janela
principal do browser. Estas subjanelas so criadas dividindo a janela em
vrias partes, cada parte chamada de frameset. Os frames so
geralmente usados para que um frameset permanea enquanto outros
mudem
baseados
nos
links
que
o
usurio
seleciona.
2.1. <frameset></frameset>
Determina o incio e o fim de um frame. Este elemento divide a
janela do browser em linhas e colunas. Deve ser usado juntamente com os
parmetros cols (frame na vertical) ou rows (frame na horizontal).
2.2.Atributos Frame
- Src=pgina.htm" - Determina a pgina ou arquivo que ser
carregado na regio correspondente.
- Name="nome"- Determina um nome ao frameset correspondente.
O nome de vital importncia na utilizao dos frames.
36

APOSTILA DE HTML

- Noresize - Deixa a linha do frameset esttica.

- Marginheight="x" - Determina a largura em pixels da margem
vertical.
- Marginwidth="x" - Determina a largura em pixels da margem
horizontal.
- Scrolling="valor" - Determina se aparecer barra de rolagem. Os
valores podem ser yes (com barra de rolagem), no (sem barra de rolagem)
ou auto (barra de rolagem s aparecer quando o contedo da pgina
ultrapassar o tamanho do frameset).
- Cols="x,x" - Determina o nmero de regies verticais da pgina.
Deve ser indicado juntamente com uma lista de valores. Cada valor
especifica a largura de cada frameset e pode ser definido em pixels,
percentual ou atravs de asterisco.
- Rows="x,x" - Determina o nmero de regies horizontais da
pgina. Deve ser indicado juntamente com uma lista de valores. Cada
valor especifica a largura de cada frameset e pode ser definido em pixels,
percentual ou atravs de asterisco.
- Border="x" - Determina a espessura da linha divisria que
aparece entre os framesets. Sendo que x o valor da borda em pixels.
- Bordercolor="cor" - Determina a cor da linha divisria que
aparece entre os framesets.
- Importante
Para abrir uma pgina em frameset diferentes voc deve
especificar o nome do mesmo no link.
Exemplo: <a href="pagina.htm" target="nomedoframeset"></a>
Logo abaixo est o cdigo bsico de uma pgina com frame.
Este exemplo mostra uma pgina HTML com Frames (molduras).
1 Pgina: pagina_banner.htm
2 Pgina: pagina_menu.htm
3 Pgina: pagina_princ.htm
37

APOSTILA DE HTML

Criar a Pgina Index.htm, que ser a pgina dos Frames, onde

ser visualizado as pginas anteriormente criadas.
1 Pgina: pagina_banner.htm
<html>
<body>
Pgina Banner<br>
Oi Tudo bem !!!<p>
</body>
</html>
2 Pgina: pagina_menu.htm
<html>
<body>
Pgina Menu<br>
Oi Tudo OK !!!<p>
</body>
</html>
3 Pgina: pagina_princ.htm
<html>
<body>
Pgina Principal<br>
Oi Tudo Legal !!!<p>
</body>
</html>
Pode ser acrescidos cores, imagens e efeitos em todas as pginas!
Use sua criatividade.
Pgina Index.htm
<html>
<head>
<title> Home Page </title>
</head>
<frameset rows="25%,25%,25%" bordercolor="yellow">
<frame src="pagina_banner.htm" name="banner">
<frame src="pagina_menu.htm" name="menu">
<frame src="pagina_princ.htm" name="conteudo">
</frameset>
38

APOSTILA DE HTML

</html>
Esta pgina que foi criada deve ser chamada de index.htm.

3.CSS - Cascading Style Sheets

Cascading Style Sheets (Folhas de Estilo em Cascata ou
simplesmente CSS) uma linguagem de estilo utilizada para definir a
apresentao de documentos escritos em uma linguagem de marcao,
como HTML ou XML. Seu principal benefcio prover a separao entre o
formato e o contedo de um documento.
Em vez de colocar a formatao dentro do documento, o
desenvolvedor cria um link (ligao) para uma pgina que contm os
estilos, procedendo de forma idntica para todas as pginas de um portal.
Quando quiser alterar a aparncia do portal basta, portanto modificar
apenas um arquivo.
- A sintaxe bsica das CSS
Suponha que desejamos uma cor de fundo vermelha para a pgina
web:
Usando HTML podemos fazer assim:
<body bgcolor="#FF0000">

Com CSS o mesmo resultado ser obtido assim:

body {background-color: #FF0000;}
OBS: Em CSS, no utilizamos tags de iniciao e termina do
documento.
Como voc pode notar os cdigos HTML e CSS so mais ou
menos parecidos. O exemplo acima serve tambm para demonstrar o
fundamento do modelo CSS:

39

APOSTILA DE HTML

Mas, onde colocar o cdigo CSS? isto que veremos a seguir.

- Aplicando CSS a um documento HTML
Voc pode aplicar CSS a um documento de trs maneiras distintas.
Os trs mtodos de aplicao esto exemplificados a seguir.
Recomendamos que voc foque no terceiro mtodo, ou seja o mtodo
externo.
Mtodo 1: In-line (o atributo style)
Uma maneira de aplicar CSS pelo uso do atributo style do HTML.
Tomando como base o exemplo mostrado anteriormente a cor vermelha
para o fundo da pgina pode ser aplicada conforme mostrado a seguir:
<html>
<head>
<title>Exemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta uma pgina com fundo vermelho</p>
</body>
</html>
Mtodo 2: Interno (a tag style)
Uma outra maneira de aplicar CSS e pelo uso da tag <style> do
HTML. Como mostrado a seguir:
<html>
<head>
<title>Exemplo</title>
<style type="text/css">
40

APOSTILA DE HTML

body {background-color: #FF0000;}

</style>
</head>
<body>
<p>Esta uma pgina com fundo vermelho</p>
</body>
</html>
Mtodo 3: Externo (link para uma folha de estilos)
O mtodo recomendado o de lincar para uma folha de estilos
externa. Usaremos este mtodo nos exemplos deste tutorial.
Uma folha de estilos externa um simples arquivo de texto com a
extenso .css. Tal como com qualquer outro tipo de arquivo voc pode
colocar uma folha de estilos tanto no servidor como no disco rgido.
Vamos supor, por exemplo, que sua folha de estilos tenha sido
nomeada de style.css e est localizada no diretrio style. Tal situao est
mostrada a seguir:

O "truque" criar um link no documento HTML (default.htm) para a folha

de estilos (style.css). O link criado em uma simples linha de cdigo
HTML como mostrado a seguir:
<link rel="stylesheet" type="text/css" href="style/style.css" />

Notar que o caminho para a folha de estilos indicado no atributo href.

Esta linha de cdigo deve ser inserida na seo header do documento
HTML, isto , entre as tags <head> e </head>. Conforme mostrado
abaixo:
<html>
<head>
41

APOSTILA DE HTML

<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style/style.css"
/>
</head>
<body>
...
Este link informa ao navegador para usar o arquivo CSS na renderizao e
apresentao do layout do documento HTML.
A coisa realmente inteligente disto que vrios documentos HTML podem
lincar para uma mesma folha de estilos. Em outras palavras isto significa
que um simples arquivo ser capaz de controlar a apresentao de muitos
documentos HTML.

Esta tcnica pode economizar uma grande quantidade de trabalho. Se por

exemplo, voc quiser trocar a cor do fundo de um site com 100 pginas, a
folha de estilos evita que voc edite manualmente uma a uma as pginas
para fazer a mudana nos 100 documentos HTML. Usando CSS a
mudana se far em uns poucos segundos trocando-se a cor em uma
folha de estilos central.
Vamos praticar o que aprendemos.
Faa voc mesmo
Abra o Notepad (ou qualquer outro editor de texto que queira usar) e crie
dois arquivos um arquivo HTML e um arquivo CSS com os seguintes
contedos:
42

APOSTILA DE HTML

default.htm
<html>
<head>
<title>Meu documento</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Minha primeira folha de estilos</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Salve os dois arquivos no mesmo diretrio. Lembre-se de salvar os
arquivos com a extenso apropriada (".css" e ".htm")
Abra default.htm no seu navegador e veja uma pgina com o fundo
vermelho. Parabns! Voc construiu sua primeira folha de estilos!

43