HTML Resumo Aulas v2010 1 Trimestre 2011

P R O G R A M A O
kF80MO
DA8
A0|A8

Prof. Ce|so Go||o

RESUMO DAS AULAS DE HTML
Linguagem Grfica de Programao I

Resumo das Aulas de HTML - Prof. Celso Gallo

PARTE 01 - Introduo ............................................................................................................ 1
1 - Pgina Web ....................................................................................................... 1
2 - Estrutura de uma Pgina HTML ........................................................................ 1
3 - Primeiros Comandos ......................................................................................... 1
4 - Pargrafos ......................................................................................................... 2
5 - Estilos de Textos ............................................................................................... 2
PARTE 02 - Listas .................................................................................................................... 3
6 - Listas ................................................................................................................. 3
PARTE 03 - Link e URL ............................................................................................................ 4
7 - Documentos com Hipertextos............................................................................ 4
PARTE 04 - Melhorando a Aparncia ..................................................................................... 5
8 - Cores ................................................................................................................. 5
9 - Fundo com Imagem (Background) .................................................................... 5
10 - Alinhando Pargrafos ...................................................................................... 5
11 - Definindo Tamanhos ....................................................................................... 5
12 - Configurando as Fontes .................................................................................. 5
13 - Texto em Movimento ....................................................................................... 6
PARTE 05 - ncoras ................................................................................................................ 6
14 - ncoras ........................................................................................................... 6
PARTE 06 - Tabelas ................................................................................................................. 7
15 - Utilizando Tabelas ........................................................................................... 7
PARTE 07 - Frames .................................................................................................................. 8
16 - Utilizando Frames ............................................................................................ 8
PARTE 08 - Formulrios .......................................................................................................... 9
17 - Utilizando Formulrios ..................................................................................... 9
PARTE 09 - O Comando META ............................................................................................. 11
18 - Introduo...................................................................................................... 11
18.1 - Informaes Especficas............................................................................. 11
18.2 - Mecanismos de Busca da Internet ............................................................. 11
PARTE 10 - Folhas de Estilo ................................................................................................. 12
19 - Introduo...................................................................................................... 12
19.1 - Regras de Utilizao .................................................................................. 12
19.2 - Aplicao da Folha de Estilo ...................................................................... 12
19.2.1 - O Mtodo LINKING ........................................................................... 12
19.2.2 - O Mtodo EMBEDDING .................................................................... 12
19.2.3 - O Mtodo INLINE .............................................................................. 13
19.3 - Unidades de Medida ................................................................................... 13
19.4 - Definindo Estilo de Cores ........................................................................... 13
19.5 - Fazendo Referncia a URL ........................................................................ 13
19.6 - Tabela de Seletores ................................................................................... 13

RESUMO DAS AULAS DE HTML
Linguagem Grfica de Programao I

Resumo das Aulas de HTML - Prof. Celso Gallo Pgina 1

Hiper Text Markup Language
Este material apenas um resumo para acompanhamento dinmico das aulas ministradas,
sendo necessrio o acompanhamento e as orientaes do professor.

PARTE 01 - Introduo

1 - Pgina Web
Tambm conhecida como Home Page ou Site, um
documento composto basicamente de textos e cdigos
especiais chamados TAGS (etiquetas) que possibilitam a
exibio do documento na World Wide Web. Pode conter
tambm imagens, sons, animaes, vdeo e links (ligaes
para outras Pginas Web). A World Wide Web (tambm
conhecida como Web, WWW e W3) a penas um conjunto de
documentos multimdia conectados atravs de hyperlinks que
permitem o deslocamento entre documentos.

1.1 - Acesso s Pginas Web
O acesso feito pelos NAVEGADORES, um tipo de
aplicativo originalmente chamado de BROWSER. Existem
vrios NAVEGADORES no mercado, os principais so o
Netscape e o Internet Explorer. O BROWSER deve estar
instalado em seu micro, pois ele quem vai identificar os
comandos HTML para execut-los e exibir Pginas Web.

1.2 - Edio de uma Pgina Web
Vamos nos utilizar aqui da linguagem HTML para a edio
de uma Pgina Web. O programador deve digitar o
CDIGO-FONTE de sua Pgina Web, em um editor de
textos, seguindo as regras de sintaxe da linguagem HTML.
Depois de digitados, os programas devem ser gravados
com a extenso .HTM ou .HTML, para que sejam lidos
pelo Browser.

1.3 - Utilizando um Navegador (Browser)
No preciso estar conectado internet para se utilizar
um Browser, portanto, muito simples testar as Pginas
Web que estiverem sendo editadas; bastando para isso
executar o Browser em seu micro e carregar o programa
editado. s vezes acontece de um comando ser
reconhecido por um determinado Browser e no ser por
outro. Para que isso seja testado, interessante que se
tenha instalado em seu micro pelo menos os dois
principais Navegadores do mercado, e testar sua Pgina
Web nos dois. Em caso de incompatibilidade, o melhor
escrever os comandos duas vezes (uma vez com a sintaxe
de um navegador e a outra vez com a sintaxe do outro
navegador).

2 - Estrutura de uma Pgina HTML
O cdigo-fonte de uma Pgina HTML pode ser digitado com
caracteres maisculos ou minsculos, pois no h
diferenciao entre eles. Os TAGs podem ser digitados na
mesma linha ou em linhas subsequentes. O programador deve
sempre estar atento com abertura e fechamento de TAGs e
Aspas. A Linguagem de Programao HTML possui estrutura
linear e no compilada, portanto no haver lista de erros.

2.1 - Sintaxe dos Tags
Podem ser especificadas em pares ou individuais e esto
sempre envolvidas pelos sinais < > ou </>:
<tag> texto </tag>
Exemplo:
<b> texto em negrito </b>

2.2 - Estrutura Bsica da Pgina Web
Nem todos os TAGs so obrigatrios, mas basicamente a
estrutura se d desta forma:

<HTML>
<HEAD>
<TITLE>Ttulo da Pgina</TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

3 - Primeiros Comandos

a) <HTML> ... </HTML>
Especifica que dentro desses TAGs h comandos HTML.

b) <HEAD> ... </HEAD>
rea destinada aos TAGs relacionados com a identificao
da pgina. Sua utilizao no obrigatria, entretanto, h
alguns TAGs que necessitam ser declarados nesta rea,
como o <TITLE> por exemplo.

c) <TITLE> ... </TITLE>
Especifica o ttulo da pgina, que aparecer no cabealho
do Navegador. A digitao incorreta deste TAG acarretar
problemas na exibio da pgina.


d) Textos em Cabealhos: um tipo de formatao de texto
que pode ser utilizada em qualquer lugar da pgina, com 6
tamanhos de fonte.

<H1>Texto em Cabealho Tamanho 1 - Maior</H1>
at
<H6>Texto em Cabealho Tamanho 6 - Menor</H6>

O maior o <H1> e o menor o <H6>. Automaticamente
ser adicionada uma linha em branco antes e outra linha
depois. Possui o seguinte parmetro opcional:
ALIGN = alinhamento (LEFT, CENTER, RIGHT)

Exemplo:

<H1 ALIGN = right>Subttulo 1</H1>

e) <HR>
Traa uma linha horizontal na tela. Possui os seguintes
parmetros opcionais:
SIZE = expessura da linha
WIDTH = comprimento da linha
COLOR = cor da linha.

Exemplo:

<HR SIZE = 2 WIDTH = 50 ALIGN = left
COLOR = red>

f) 
Permite digitar comentrios em qualquer parte do
programa. Esses comentrios no sero exibidos na
pgina.

Exemplo:



4 - Pargrafos
Uma Pgina Web no reconhece o fim de um pargrafo.
Mesmo que pressione a tecla [ENTER] na edio em HTML, o
Navegador no reconhecer a quebra de linha ou de
pargrafo. necessrio utilizar TAGs especficas.

a) <P>
Ao ser utilizado sozinho, especifica a quebra de pargrafo
e insere uma linha em branco aps.
Exemplo:

O HTML no reconhece a tecla ENTER como
sendo o final de uma linha.<P>

<P> ... </P>
Pode ser utilizado com o seu par, marcando o incio e o fim
de um pargrafo, neste caso possui o seguinte parmetro
opcional:
Exemplo:

<P ALIGN=right>O HTML no reconhece a
tecla ENTER como sendo o final de uma
linha.</P>

b) <BR>
Especifica a quebra de linha sem inserir uma linha em
branco aps.

c) <PRE> ... </PRE>
Permite que um texto seja reconhecido pelo Navegador
com sua formatao original, reconhecendo a tecla TAB
para tabulao e ENTER para final de linha.

Exemplo:

<PRE>Agora sim, o HTML ir reconhecer a
linha.</PRE>

d) <DIV> ... </DIV>
Marca o incio e o fim de um bloco de texto, sem adicionar
uma linha em branco aps. Possui o seguinte parmetro:

Exemplo:

<DIV ALIGN=right>O HTML no reconhece a
linha.</DIV>

5 - Estilos de Textos
Os TAGs que alteram os estilos de textos devem ser
especificados aos pares.

a) <B> texto em negrito </B>

b) <I> texto em itlico </I>

c) <U> texto sublinhado </U>

d) <TT> texto em typerwriter </TT>

e) <BIG> aumenta a fonte + negrito </BIG>

f) <SMALL> reduz a fonte </SMALL>

g) <SUP> texto sobrescrito </SUP>

h) <SUB> texto subscrito </SUB>

Editar o EXERCCIO 01 do Caderno de Exerccios


PARTE 02 - Listas

6 - Listas
As listas facilitam a criao de itens seriais. Podem ser
Ordenadas (com itens numricos) ou No Ordenadas (com
smbolos). Ao definir sub-listas teremos ento Listas
Aninhadas, podendo ser Mistas ou no, conforme os
exemplos abaixo:

6.1 - Listas No Ordenadas

<ul>
<li> Curso Tcnico em Turismo
<li> Curso Tcnico em Informtica
</ul>

Ser exibido:
Curso Tcnico em Turismo
Curso Tcnico em Informtica

6.2 - Listas Ordenadas

<ol>
</ol>

Ser exibido:
1. Curso Tcnico em Turismo
2. Curso Tcnico em Informtica

6.3 - Listas Aninhadas Mistas

<ol>
<ol>
<li> TCG
<li> LGP
<ul>
<li> Linguagem HTML
<li> Linguagem Javascript
</ul>
<li> TP
</ol>
<li> Curso Tcnico em Eletrnica
</ol>

Ser exibido:
1. Curso Tcnico em Turismo
2. Curso Tcnico em Informtica
1. TCG
2. LGP
Linguagem HTML
Linguagem Javascript
3. TP
3. Curso Tcnico em Eletrnica

Tambm podemos definir o tipo de estilo utilizado pela lista
como nmeros ou at mesmo utilizar letras (A, B, C) para isso
utilizamos mais um atributo que o type que deve ser
includo dentro da etiqueta <ol> sendo que o mesmo ficaria
assim:
<ol type=a>

<ul type="a">
<li> Internet</li>
<li> Computador</li>
<li> Site</li>
</ul>
Ser exibido:

a. Internet
b. Computador
c. Site

Agora iremos aprender a criar lista de definio o processo
semelhante ao que acabamos de aprender, portanto, para
criar a lista utilizamos as etiquetas <dl></dl> sendo que
utilizaremos duas etiquetas para definio <dt></dt> e
<dd></dd>, ento ficaria assim:
<dl>
<dt>Html</dt>
<dd>Html Bsico</dd>
<dt>Aprender</dt>
</dl>
Ser exibido:

Html
Html Bsico
Aprender




PARTE 03 - Link e URL

7 - Documentos com Hipertextos
So documentos que se vinculam outros documentos. So
os chamados LINKS, ou seja, ligaes de uma Pgina Web
com outra que esteja no prprio micro ou em qualquer
provedor existente no planeta. Para acessar uma Pgina Web
em outro micro necessrio estar conectado com uma rede,
como estamos falando de acesso em nvel mundial,
necessrio que esteja conectado internet.

7.1 - Link Para Pgina Local
Pode ser texto ou figura que, ao ser clicada, far ligao
com um documento que for mencionado, bastando para
isso saber o endereo completo do documento. O TAG
usada <A HREF>:

<a href=nome do documento> hipertexto </a>
Exemplo:
<a href=index.htm> Pgina Principal </a>

No momento em que este Link for clicado, ser exibido o
documento chamado index.htm, que dever estar no
mesmo diretrio da pgina Web que o acessou, caso
contrrio dever ser indicado o path (caminho) completo
do documento mas com as barras invertidas \. Exemplos:

<a href=c:\arquivos\index.htm>Voltar Pgina
Principal </a>

<a href=..\arquivos\index.htm>Voltar Pgina
Principal </a>

De modo geral, o nome index.htm utilizado como nome
da pgina inicial de um Site.

7.2 - Link Para Pgina Externa
Pode ser texto ou figura que, ao ser clicada, far ligao
com um documento que for mencionado. Para isso
necessrio estar conectado internet e conhecer o
endereo virtual da Pgina Web. Este esquema de
endereamento virtual chamado de URL. O TAG usado
<A HREF>.

<a href=URL> hipertexto </a>
Exemplo:
<a href=http://www.singular.com.br> Portal Singular</a>

O texto Portal Singular chamado de Hipertexto ou
simplesmente Link.

7.3 - URL (Uniform Resource Locator)
composto por trs partes principais:
a) Protocolo Internet do documento: o tipo de
servidor que est sendo acessado. Podem ser:
- http: servidor que contm documentos no formato
HiperText Transfer Protocol.
- gopher: servidor composto por menus e diretrios
c/ informaes sobre arquivos e dados;
- ftp: servidor que contm documentos no formato
File Transfer Protocol.
- telnet: inicia uma seo para se conectar
remotamente a outro micro;
- wais: servidor que contm documentos no formato
Wide Area Indexed Server.

b) Endereo do servidor: o computador que contm a
Pgina Web.

c) Endereo da Pgina Web: o path do arquivo
acessado, dentro do servidor.

protocolo://servidor/pgina
Exemplo de URL:
http://www.uol.com.br/index.htm

7.4 - Exibio de Imagens
Para exibir uma imagem em sua Pgina Web,
necessrio que ela esteja em um dos formatos aceitos
pelo Browser:
GIF (Graphics Interchange Format): o formato
padro, o mais aceito pela Web;
JPEG (Joint Photographic Engineering Group): Est
sendo o formato mais utilizado pela sua maior
capacidade de compactao;
BMP (Bit Map): Deve ser evitado pela sua baixa
capacidade de compactao.

O TAG utilizado <IMG> juntamente com o parmetro
SRC=nome, conforme abaixo:

<img src=nome_da_imagem.extenso>
Exemplo:
<img src=foto.jpg>

Uma opo de alinhamento pode ser utilizada, para exibir
a imagem ao lado de um texto. O parmetro usado o
ALIGN.

Exemplos:
(texto no alto) <img align=top src=foto.jpg>
(texto ao centro) <img align=middle src=foto.jpg>
(texto em baixo) <img align=bottom src=foto.jpg>

7.5 - Imagens Utilizadas Como Links
Para exibir uma imagem usando-a como um Link, basta
utilizar o TAG <A HREF> em conjunto com o TAG <IMG>.

Exemplo:
<a href=pagina01.htm> <img src=foto.jpg> </a>
(qdo. o usurio clicar na foto ser exibida a pgina01)

7.6 - Link Para Enviar E-Mail
Para que o usurio envie e-mail apenas clicando em um
hipertexto, o TAG <A HREF> tambm deve ser utilizado,
mas especificamos no endereo o parmetro MAILTO:

Exemplo:
<a href=mailto:celsogallao@ig.com.br>hipertexto</a>
(qdo. o usurio clicar no hipertexto ser exibido o aplicativo
para envio de e-mail que estiver instalado em seu micro)




PARTE 04 - Melhorando a Aparncia

8 - Cores
Os navegadores possibilitam at 256 tons para cada uma das
cores padro RGB. Portanto, cada cor representada por 3
dgitos, de 000 a 255. O HTML s reconhecer esses dgitos
se estiverem convertidos na base numrica Hexadecimal, ou
seja, de 00 a FF. Tambm podemos declarar as cores
especificando seus nomes, em ingls (tabela RGB). Os
comandos abaixo so parmetros do TAG <BODY>, portanto
devem ser declarados dentro dele:

8.1 - Cor do Fundo
O parmetro usado BGCOLOR. O padro branco:
Exemplos:
<body bgcolor=#FFFFFF>ou<body bgcolor=white>

8.2 - Cor do Texto
O parmetro usado TEXT. O padro preto:
Exemplos:
<body text=#000000> ou <body text=black>

8.3 - Cor do Link (Hipertexto)
O parmetro usado LINK. O padro azul:
Exemplos:
<body link=#0000FF> ou <body link=blue>

8.4 - Cor do Link Visitado
O parmetro usado VLINK. O padro marrom:
Exemplos:
<body vlink=#FFFF00> ou <body vlink=yellow>

8.5 - Cor do Link em Acesso
O parmetro usado ALINK. O padro azul:
Exemplos:
<body alink=#00FF00> ou <body alink=green>

Exemplo utilizando todos os parmetros juntos:
<body bgcolor=#000000 text=#EEEEBB
link=#33CCFF vlink=#CC0000 alink=#FFFFFF>

9 - Fundo com Imagem (Background)
Voc pode carregar em sua pgina Web uma imagem de
fundo, ou mesmo repetir vrias vezes uma pequena imagem
(.gif ou .jpg). O parmetro BACKGROUND, e tambm
pertence ao TAG <BODY>.

Exemplo:
<body background=foto01.jpg>

ATENO: Quando for utilizar BACKGROUND voc no
deve declarar o parmetro BGCOLOR, e vice-versa, por
motivos bvios!

10 - Alinhando Pargrafos
O padro de alinhamento dos pargrafos editados em HTML
esquerda, mas podemos modific-los utilizando alguns
parmetros:

10.1 - O parmetro ALIGN
utilizado nos TAGs <p>, <div> ou <h1> at <h6>:
ALIGN = right (alinhamento direita)
ALIGN = center (alinhamento ao centro)
ALIGN = left (alinhamento esquerda - padro)

Exemplos:
a) <p align = center>
Alinha o pargrafo ao centro, at que outro comando <p>
o modifique ou </p> seja encontrado.

b) <div align = right>
Alinha o pargrafo direita, at que o comando </div>
seja encontrado.

c) <h1 align = right>
Alinha o cabealho direita, at que o comando </h1>
seja encontrado.

d) <h6 align = center>
Alinha o cabealho ao centro, at que o comando </h6>
seja encontrado.

10.2 - O TAG <CENTER>
Alm do parmetro ALIGN, podemos centralizar textos,
imagens e links com o TAG <CENTER>.

Exemplo:
<center>
Alinha os elementos ao centro, at que o comando
</center> seja encontrado.

11 - Definindo Tamanhos
Em alguns elementos possvel configurar o tamanho e o
alinhamento de sua exibio, com os parmetros SIZE,
WIDTH e ALIGN:

Exemplos:
a) <hr size=10 width=400 align=left>
exibe uma linha na tela com 10 pixels de espessura, 400
pixels de comprimento, alinhada esquerda.

b) <hr size=20 width=50% align=right>
exibe uma linha na tela com 20 pixels de espessura, 50%
do cumprimento da tela exibida, alinhada direita.

c) <img src=foto.jpg align=bottom>
exibe uma imagem chamada foto.jpg, alinhada pela sua
parte inferior.

d) <img src=foto.jpg align=top>
parte superior.

e) <img src=foto.jpg align=middle>
parte central.

12 - Configurando as Fontes
perfeitamente possvel alterar o tamanho, o tipo e a cor das
fontes utilizadas, atravs do TAG <FONT> e seus parmetros
SIZE, FACE e COLOR.

Exemplo:
<font size=5 face=arial color=#FF0000>
Exibe texto com a fonte tipo ARIAL, tamanho 5, na cor
vermelha. Para voltar a configurao original utilize </FONT>.

ATENO: O parmetro TEXT utilizado com o TAG <BODY>
determina a cor da fonte a ser utilizada na Pgina Web inteira,
enquanto o parmetro COLOR do TAG <FONT> determina a
cor do texto at que seja encontrado o TAG </FONT>.


13 - Texto em Movimento
Existe um TAG que faz com que o texto fique em movimento
na tela, seu nome <MARQUEE>. O padro de movimento
da direita para a esquerda, mas pode ser alterado com os
seus parmetros.

<marquee behavior=rolagem
direction=direo
loop=num_rolagens
scrollamount=velocidade
scrolldelay=pixels_a_percorrer>
texto em movimento
</marquee>

Obs.: No funciona no Netscape.

Vejamos cada um dos parmetros da Tag MARQUEE:

Behavior: define a forma de rolagem do texto, podendo ter 3
valores possveis.
SCROLL rolagem continua em um mesmo sentido
SLIDE o letreiro sai do ponto de partida e ao chegar ao seu
final, pra.
ALTERNATE o letreiro deslizar de um lado para o outro da
tela.

Direction: Define a direo de rolagem do letreiro. Podem ser
utilizados dois valores, LEFT (esquerda) e RIGHT (direita).

Loop: Este parmetro define o nmero de vezes que o letreiro
deslizar pela pgina, o valor INFINITE (o padro), define uma
rolagem constante.

Scrollamount: Este parmetro define a velocidade de
rolagem do letreiro, dada em milissegundos.

Scrolldelay: Define a quantidade de pixels que ir percorrer
cada quadro.

Exemplo:
<marquee behavior=alternate scrolldelay=nmero>
texto </marquee>





PARTE 05 - ncoras

14 - ncoras
As ncoras so utilizadas para fazer ligaes entre partes de
uma Pgina Web, atravs de Links. Para isso, preciso
determinar um ponto de referncia na Pgina, que ser
acessado por um Link. Esse ponto de referncia a ncora e
receber um nome que ser mencionado pelo Link que o
acessar. bastante til para se movimentar por grandes
textos nas Pginas Web.

14.1- Definindo Uma ncora
A TAG usada <A NAME>.

<a name=#nome_ncora>texto opcional</a>
Exemplo:
<a name=#inicio>Incio da Pgina</a>

14.2- Link Para Acessar ncora
Pode ser um texto ou uma figura que, ao ser clicada, far
ligao direta com a ncora que for mencionada, fazendo
com que a Pgina se mova at a ncora. O TAG usado
<A HREF>.

<a href=#nome_ncora> hipertexto </a>
Exemplo:
<a href=#inicio>Voltar ao Incio da Pgina </a>

No momento em que este Link for clicado, ser exibido o
texto que contiver a ncora chamada #inicio. O smbolo #
junto ao nome, informa que a ncora est no mesmo
documento, ou seja, na mesma Pgina Web.

14.3- Link Para Acessar ncora Externa
Pode ser um texto ou uma figura que, ao ser clicada, far
ligao direta com uma ncora que esteja em um outro
documento, ou seja, em uma outra Pgina Web, fazendo
com que a outra Pgina se mova at a ncora declarada.
O segredo est em declarar o nome da outra Pgina antes
do nome da ncora. O TAG usado o <A HREF>.

<a href=pgina.htm#nome_ncora>hipertexto</a>
Exemplo:
<a href=pagina02.htm#inicio>Pgina 02</a>






PARTE 06 - Tabelas

15 - Utilizando Tabelas
A utilizao de Tabelas melhora muito a aparncia de uma
Pgina Web, mas requer muita ateno, pacincia e testes
contnuos de utilizao, para que se obtenha um bom
resultado. Os TAGs so simples, mas a estruturao delas
pode ser bastante complexa, dependendo da aplicao
requerida:

<TABLE>...</TABLE> => cria uma tabela.
<TR>...</TR> => cria uma linha da tabela.
<TD>...</TD> => cria uma clula em uma linha.
<TH>...</TH> => cria uma clula com texto
centralizado e em negrito.
<CAPTION>...</CAPTION> => (opcional) cria um ttulo.

Parmetros: Nem todos os parmetros podem ser utilizados
em todas os TAGs relativas s tabelas, portanto, os exerccios
e a prtica, faro com que voc se habitue com as aplicaes:

a) BORDER = n (tamanho da borda)

b) CELLSPACING = n (espao entre as clulas)

c) CELLPADDING = n (espao entre o contedo e a borda
da clula)

d) WIDTH = n ou % (largura da tabela)

e) HEIGHT = n ou % (altura da clula)

f) ALIGN = Left, Center, Right (alinhamento horizontal)

g) VALIGN = Top, Middle, Bottom (alinhamento vertical)

h) BGCOLOR = cor (cor do fundo de toda a tabela)

i) BORDERCOLOR = cor (cor da borda da tabela)

j) NOWRAP (no permite quebra de texto numa clula)

k) COLSPAN = n (qtde. de colunas que a clula ocupar)

l) ROWSPAN = n (qtde. de linhas que a clula ocupar)

15.1 - Tabela Com Clulas Simples
Exemplo: Para criar a tabela abaixo, a estrutura deve ser:

Clubes de Futebol
Palmeiras Corinthians So Paulo
Santos So Caetano Santo Andr

<table border=1>
<caption>Clubes de Futebol</caption>
<! --Criando a 1 Linha-->
<tr>
<th> Palmeiras</th>
<td> Corinthians</td>
<td> So Paulo</td>
</tr>
<! --Criando a 2 Linha -->
<tr>
<td> Santos</td>
<td> So Caetano</td>
<th> Santo Andr</th>
</tr>
</table>

15.2 - Tabela Com Clulas Mescladas
Exemplo: Para criar a tabela abaixo, a estrutura deve ser:

Clubes de Futebol

Palmeiras

So Paulo

Corinthians

Portuguesa

So Caetano
Santos

Santo Andr

<table border=2 width=100% bgcolor="yellow">
<caption>Clubes de Futebol</caption>


<tr>
<th colspan=2 height=50>Palmeiras</th>
<td>So Paulo</td>
</tr>


<tr>
<td valign=bottom height=50>Corinthians</td>
<th align=right>Portuguesa </th>
<th rowspan=2>So Caetano </th>
</tr>


<tr>
<td height=50 valign=top align=center>Santos</td>
<td>Santo Andr</td>
</tr>
</table>




PARTE 07 - Frames

16 - Utilizando Frames
A utilizao de Frames possibilita a diviso da janela do
browser de tal forma que, em cada diviso possa ser
executado um programa HTML diferente. possvel tambm
interagirmos em um Frame e vermos o resultado em outro
Frame. Para melhor entendimento, imagine que temos um
programa HTML chamado ALFA.htm e outro chamado
BETA.htm. Para podermos visualizar os dois programas em
uma nica Pgina Web vamos criar ento um programa
chamado JANELAO.htm que ter as informaes necessrias
para administrar os dois programas, cada um em uma
respectiva Frame criada no programa.

16.1 - Definindo o Layout dos FRAMES
O TAG <FRAMESET> do tipo continer, ou seja, deve ser
aberto e fechado, e define a aparncia da pgina principal
dos Frames. A seguir esto seus parmetros:

a) COLS = cria frames dispostos em colunas. Deve
especificar os tamanhos das colunas separados por
vrgulas. Os valores podem ser em pixels, em
percentagens ou relativos. Exemplos:
<FRAMESET COLS =100,300,200> ou
<FRAMESET COLS =200,*> ou
<FRAMESET COLS =60%,40%>

b) ROWS = cria frames dispostos em linhas. Deve
especificar os tamanhos das linhas separados por
vrgulas. Os valores podem ser em pixels, em
percentagens ou relativos. Exemplos:
<FRAMESET ROWS =100,300,200> ou
<FRAMESET ROWS =200,*> ou
<FRAMESET ROWS =60%,40%>

Obs.: Para podermos combinar a utilizao de ROWS
e COLS devemos criar um FRAMESET para cada um,
de forma aninhada.

c) FRAMEBORDER = elimina, ou no, as bordas dos
Frames. O valor 1 o padro e exibe as bordas. O
valor 0 elimina a exibio das bordas.

d) FRAMESPACING = altera o espao entre os Frames,
dando a impresso de que as bordas foram alteradas.
Valor do espaamento em pixels.

16.2 - Definindo o Contedo dos FRAMES
O TAG <FRAME> atribui o contedo de cada Frame e
suas caractersticas. Os atributos do comando <FRAME>
se sobrepes aos atributos do comando <FRAMESET>. A
seguir esto seus parmetros:

a) ALIGN = alinhamento do Frame ou do texto. Os
valores vlidos para alinhamento so:
TOP: parte superior do Frame;
MIDDLE: parte central do Frame;
BOTTOM: parte inferior do Frame;
LEFT: parte esquerda do Frame;
RIGHT: parte direita do Frame.

b) FRAMEBORDER = aplicao idntica utilizao em
<FRAMESET>.

c) MARGINHEIGHT = altura das margens superior e
inferior do Frame, em pixels.

d) MARGINWIDTH = largura das margens esquerda e
direita do Frame, em pixels.

e) NAME = atribui um nome (apelido) ao Frame, de
maneira que ele possa ser identificado e localizado
posteriormente.

f) NORESIZE = evita que as bordas do Frame sejam
redimensionadas pelo usurio.

g) SCROLLING = permite que o Frame possua barras de
rolagem (valor YES) ou no (valor NO).

h) SRC = endereo (URL) do documento que ser exibido
no Frame.

16.3 - Interligao entre FRAMES
Veja o exemplo dado anteriormente. Imagine que o arquivo
chamado JANELAO.htm seja uma Pgina Web que divida
a tela em duas partes, uma direita e outra esquerda.
Imagine que a pgina da esquerda ocupe 200 pixels da
tela e a pgina da direita ocupe o restante. cada uma
dessas partes chamamos de FRAMES, e chamaremos a
parte da direita de Frame_Direita e a parte da esquerda
de Frame_Esquerda.

No Frame_Esquerda vamos exibir um arquivo chamado
ALFA.htm que ser uma espcie de Menu de Opes, ou
seja, nele havero Links para diversas outras pginas, e
queremos que essas pginas sejam exibidas no
Frame_Direita, onde inicialmente ser exibido o arquivo
chamado BETA.htm.

Frame_Esquerda
(ALFA.htm)

Frame_Direita
(BETA.htm e demais pginas
acessadas)

Vamos ento escrever o programa JANELAO.htm que
ser a Pgina Principal, que ir administrar os FRAMES:

<html>
<head>
<title>Ttulo do Pgina</title>
</head>
<frameset cols="200,*">
<frame name="Frame_Esquerda" src="alfa.htm">
<frame name="Frame_Direita" src="beta.htm">
</frameset>
</html>

A Pgina Principal dividiu a janela em 2 colunas, sendo
que a coluna da esquerda possui 200px de comprimento.
Agora basta carregar a Pgina Principal que as outras 2
pginas sero automaticamente exibidas nos respectivos
FRAMES. Para fazer a ligao entre os FRAMES
precisamos avisar ao arquivo ALFA.htm que as pginas
que ele abrir sero carregadas no Frame_Direita, e
podemos fazer isso de duas formas:

a) No arquivo ALFA.htm, na seo <head> declaramos o
TAG:
<base target=destino>
Exemplo:
<head> <base target=Frame_Direita> </head>

b) Ou, no arquivo ALFA.htm, junto ao TAG <a href>
declaramos a parmetro target:
<a href=arquivo target=destino>
Exemplo:
<a href=GAMA.htm target=Frame_Direita>


16.4 - Criando FRAMES Aninhados
bastante comum encontrarmos Pginas Web utilizando
Frames Aninhados, ou seja, Frames dentro de Frames.
Imagine uma Pgina Web com o seguinte Layout:

Frame_Superior (DELTA.htm)

Frame_Esquerda
(ALFA.htm)

Frame_Direita
(BETA.htm e demais pginas
acessadas)

Normalmente o Frame_Superior utilizado para exibir
propagandas (banners) e informaes sobre o prprio Site,
o Frame_Esquerda utilizado para abrigar os Links e o
Frame_Direita utilizado para abrir as Pginas acessadas
pelos Links.
Na montagem da nossa Pgina Principal, criamos duas
linhas de FRAMES, sendo que a 1 linha ter 100px de
altura, e a 2 linha ser subdividida em 2 colunas de
FRAMES. O FRAME da esquerda ter 200px de
comprimento, conforme o exemplo:

<html>
<head>
<title>Ttulo do Pgina</title>
</head>
<frameset rows =100,*>
<frame name = Frame_Superior src=delta.htm>
<frameset cols = 200,*>
<frame name = Frame_Esquerda src=alfa.htm>
<frame name = Frame_Direita src=beta.htm>
</ frameset>
</ frameset>
</html>

ATENO: Os TAGS <FRAMESET> e <FRAME> no
podem estar na rea do <BODY>, caso contrrio no sero
exibidos.

16.5 - Navegadores sem FRAMES
No comum encontrarmos navegadores antigos que no
aceitam a utilizao de Frames, mas devemos nos
precaver. Existe um TAG bem simples que impede que
erros ocorram por conta disso, o <NOFRAMES>:
Exemplo:

<noframes>
<body>
O seu Navegador no suporta FRAMES, esta pgina
no pode ser mostrada!
</body>
</noframes>



PARTE 08 - Formulrios

17 - Utilizando Formulrios
Os formulrios eletrnicos gerados pela Linguagem HTML so
recursos dos mais importantes oferecidos pelas Pginas Web:
a troca de informaes entre o usurio e o servidor, enviando
dados que sero processados no servidor e devolvidos ao
cliente. Os exemplos aqui mostrados funcionaro para efeito
de teste, pois para que um formulrio troque informaes com
o servidor, voc precisar verificar com o seu provedor se ele
permite o uso de formulrios, em caso afirmativo o provedor
dever orient-lo como realizar o acesso, pois no provedor
dever haver programas especiais (CGI), escritos em
linguagens de programao como Perl, Visual Basic, C, PHP,
etc, para fazer o processamento dos dados.

17.1 - O TAG <FORM>...</FORM>
Possui duas funes importantes: especificar o local do
programa que controlar o formulrio e definir a forma
como os dados sero enviados. O TAG <FORM> usa os
seguintes parmetros:

a) NAME = nome: especifica o nome do formulrio.

b) ACTION=URL: especifica o local (URL) do Servidor
e do programa CGI que vai processar o formulrio.

c) METHOD=GET ou POST: indica o mtodo usado
pelo Servidor para receber o formulrio. POST o mais
usado e transmite toda a informao do formulrio
imediatamente aps o URL. GET faz com que o
contedo do formulrio seja anexado ao endereo do
URL.

Exemplo:
<form name=form1 action=XXX method=get>

17.2 - O TAG <INPUT>
Define um campo para entrada de dados. O TAG <INPUT>
usa os seguintes parmetros:

a) TYPE = tipo de varivel: especifica o tipo de
varivel a ser utilizada naquele objeto, podem ser:

TEXT
PASSWORD
CHECKBOX
RADIO
SUBMIT
RESET
BUTTON
caracteres.
senha oculta.
caixa de verificao (sim/no).
boto de rdio (exclusivo).
enviar o contedo do formulrio.
apaga o contedo do formulrio.
boto genrico.

b) NAME = nome_objeto: todo objeto precisa ter seu
prprio nome, exceto para os tipos CHECKBOX e
RADIO onde todos os itens possuem o mesmo nome
em uma mesma seo.

c) VALUE = valor: depende do tipo do objeto:

TEXT ou PASSWORD
CHECKBOX ou RADIO
SUBMIT, RESET, ou BUTTON
contedo digitado.
valor a ser enviado.
rtulo do boto.

d) CHECKED: determina uma marca em um campo tipo
CHECKBOX ou RADIO.


e) SIZE = tamanho: especifica o tamanho visual do
campo tipo TEXT ou PASSWORD.

f) MAXLENGTH = valor: especifica a quantidade
mxima de caracteres aceitos no campo TEXT ou
PASSWORD.

Exemplos:
1. Caixa de Texto:
Digite o nome:
<INPUT TYPE=TEXT NAME=texto1 VALUE=
SIZE=20 MAXLENGTH=40>

2. Caixa para Senha:
Digite a senha:
<INPUT TYPE=PASSWORD NAME=senha1
VALUE= SIZE=6 MAXLENGTH=6>

3. Caixa de Verificao:
Caractersticas:
<INPUT TYPE=CHECKBOX NAME=caixa1
VALUE=legal CHECKED>Sou Legal
<p>
<INPUT TYPE=CHECKBOX NAME=caixa1
VALUE=bonito>Sou Bonito

4. Boto de Rdio:
Estado Civil:
<INPUT TYPE=RADIO NAME=radio1
VALUE=S CHECKED>Solteiro
<p>
<INPUT TYPE=RADIO NAME=radio1
VALUE=C>Casado

5. Boto para Apagar:
<INPUT TYPE=RESET NAME=apaga1
VALUE=Apagar>

6. Boto para Enviar:
<INPUT TYPE=SUBMIT NAME=envia1
VALUE=Enviar>

17.3 - O TAG <SELECT>...</SELECT>:
Define uma lista de itens. A TAG <SELECT> usa os
seguintes parmetros:

a) NAME = nome: especifica o nome da lista.

b) SIZE = tamanho: especifica a quantidade de itens
que sero exibidos de uma vez.

c) MULTIPLE: especifica que vrios itens podem ser
escolhidos.

Cada item da lista deve ser especificado atravs do TAG
<OPTION>. O parmetro SELECTED pr seleciona um
item.

Exemplo:
<SELECT NAME=lista1 SIZE=2>
<OPTION SELECTED>Item 1
<OPTION>Item 2
</SELECTED>

17.4 - O TAG <TEXTAREA>...</TEXTAREA>
Define uma caixa de digitao de textos. O TAG
<TEXTAREA> usa os seguintes parmetros:

a) NAME = nome: especifica o nome da rea de texto.

b) ROWS = linhas: especifica a quantidade de linhas
que sero exibidas na rea de texto.

c) COLS = colunas: especifica quantidade de colunas
que sero exibidas na rea de texto.

Exemplo:
<TEXTAREA NAME=area1 COLS=50 ROWS=10>
</TEXTAREA>

17.5 - O TAG <FIELDSET>...</FIELDSET>
Define uma moldura para agrupar determinados campos.
O TAG <FIELDSET> usa os seguintes parmetros:

a) <LEGEND>...</LEGEND> = rtulo: especifica um
rtulo para o grupo

b) ACCESSKEY = tecla: especifica uma tecla de atalho
para mover o cursor quela rea.

Exemplo:
<FIELDSET ACCESSKEY=X>
<LEGEND> Pressione CTRL+X </LEGEND>
--
--
--
</FIELDSET>




PARTE 09 - O Comando META

18 - Introduo
Este comando utilizado para criar uma metainformao,
pouco explorado na linguagem DHTML (HTML Dinmico),
contudo, pode ser responsvel por importantes aspectos como
a criao de documentos dinmicos ou informaes
especficas que sero usadas pelo servidor ou pelos
mecanismos de busca da internet.

18.1- Informaes Especficas
O comando META deve sempre ser declarado na rea de
cabealho, ou seja, dentro dos TAGs<HEAD> </HEAD>. A
sintaxe bsica :

<META HTTP-EQUIV=resposta CONTENT=descrio
NAME=descrio URL=endereo>

Onde:
HTTP-EQUIV=resposta
Permite inserir informaes nos cabealhos dos
documentos.

CONTENT=descrio
Define a informao associada ao nome da varivel ou
metainformao.

NAME=descrio
o nome da metainformao ou varivel que est sendo
criada, e que deve ser atribudo a um contedo atravs da
opo CONTENT.

URL=endereo
Indica o URL do documento.

Exemplo: Vamos forar a pgina inicial a fazer um
recarregamento automtico de uma outra pgina, aps um
determinado tempo:

<HTML>
<HEAD>
<TITLE>Exerccio com o comando META</TITLE>

<META HTTP-EQUIV= Refresh CONTENT= 5; URL=
pagina2.htm>

</HEAD>
<BODY>
Esta pgina ser exibida por apenas 5 segundos.
</BODY>
</HTML>

Caso voc queria apenas ficar atualizando periodicamente
a mesma pgina inicial, basta no declarar o parmetro
URL, conforme abaixo:

<META HTTP-EQUIV= Refresh CONTENT= 5>

18.2- Mecanismos de Busca da Internet
Para fazer com que sua pgina seja encontrada pelos
mecanismos de busca da internet preciso que voc d
uma mozinha, e o comando META pode ser muito til.
Geralmente, se o mecanismo no encontra nenhuma dica
sobre o contedo da pgina, ele l as primeiras palavras
encontradas, outros pegam todas as palavras da pgina,
mas a maioria se utiliza do comando META para obter
palavras-chave realmente importantes em sua pgina.
Veja a seguir uma lista de parmetros utilizados pelos
mecanismos de busca:

TITLE
Utilizado no <HEAD> para declarar o ttulo da pgina.

Keywords
Deve conter uma lista de palavras-chave separadas por
vrgula. Coloque as palavras mais importantes primeiro.

Description
Essa descrio exibida junto com o ttulo da pgina, no
resultado de uma busca.

Exemplo: Vamos dar informaes aos mecanismos de
busca da internet, fornecendo palavras-chave e uma
descrio do contedo da pgina web.

<HTML>
<HEAD>
<TITLE>Comando META para Busca na Net</TITLE>

<META HTTP-EQUIV= Keywords CONTENT=HTML,
Javascript, Colgio Singular>

<META HTTP-EQUIV= description CONTENT=Site
do Professor Celso Gallo>

</HEAD>
<BODY>
Esta pgina principal de meu site
</BODY>
</HTML>



PARTE 10 - Folhas de Estilo

19 - Introduo
Este comando utilizado para facilitar a apresentao visual
da pgina web, e agilizar a manuteno de um site, atravs da
centralizao das alteraes de diversas pginas em um s
lugar. Tambm aumenta as possibilidades de formatao
visual das pginas pois permite alterar atributos vlidos para
todo o site. Uma folha de estilo pode ser definida como um
gabarito que formata os comandos HTML de uma pgina de
acordo com as preferncias do programador.

19.1- Regras de Utilizao
A maneira mais simples de utilizar a folha de estilo
atravs da TAG <STYLE>, que especificada dentro da
seo <HEAD>. Cada regra composta por um
SELETOR, que um elemento que receber o estilo, por
exemplo <BODY>, <P>, <H1>, etc. Cada TAG HTML
possui vrias propriedades que podem ter seu ESTILO
alterado. Cada propriedade possui um VALOR que pode
ser alterado. Veja a sintaxe bsica:

Seletor { propriedade1: valor1;
propriedade2: valor2 };

Exemplos:

a) P { color: green };
Todos os textos entre <P> e </P> sero verdes.

b) H1 { font: 20pt "arial"; font-weight: "bold";
color:"brown" };
Todos os textos entre <H1> e </H1> tero a fonte arial,
tamanho de 20pt, negrito e marrom.

Pode-se agrupar diversos seletores para que recebam a
mesma mudana de estilo, conforme o exemplo:

c) H1, H2, H3 { color: red; font-family: Verdana };
Todos os textos entre <H1> e </H1>, <H2> e </H2>,
<H3> e </H3>, sero vermelhos e com fonte verdana.

19.2- Aplicao da Folha de Estilo
Dentre as maneiras de se aplicar folhas de estilo, cada
uma delas apresenta vantagens e desvantagens. Vamos
aqui conhecer as trs formas mais utilizadas:

19.2.1 - O Mtodo LINKING
Linking (ligando) consiste em carregar os comandos
da folha de estilo que se encontram em um arquivo
externo com extenso CSS. Essa tcnica tem como
vantagem a facilidade de alterar os estilos de todo o
site de uma s vez, pois todas as pginas que sofrero
as alteraes faro o carregamento dos estilos
diretamente deste arquivo externo. Veja a sintaxe, que
deve estar sempre na seo <HEAD>:

<LINK REL=StyleSheet
HREF=arquivo.css
TYPE=text/css>

Exemplo: Vamos carregar os estilos que esto
gravados no arquivo externo chamado exemplo.css:

<HTML>
<HEAD>
<TITLE>Folha de Estilo Externa</TITLE>

<LINK REL=StyleSheet HREF=exemplo.css
TYPE=text/css>

</HEAD>
<BODY>
Esta pgina principal de meu site
</BODY>
</HTML>

19.2.2 - O Mtodo EMBEDDING
Embedding (incorporando) consiste em declarar os
comandos da folha de estilo dentro do documento
HTML, na seo <HEAD> da prpria pgina web. Essa
tcnica tem como vantagem configurar apenas uma
pgina web do site. A incorporao feita atravs da
TAG <STYLE>. conveniente declarar os seletores de
estilo dentro da TAG de comentrio HTML para evitar
que navegadores antigos acusem erros. Veja a sintaxe,
que deve estar sempre na seo <HEAD>:

<STYLE TYPE=text/css>

</STYLE>

Exemplo: Vamos incorporar nesta pgina web os
estilos para <BODY> com fonte arial, 10, verde e cor
do fundo verde-claro; para <H1> com fonte arial, 20,
negrito e marrom; para os LINKS com fonte verdana,
10, verde-escuro e para os LINKS VISITADOS com
fonte verdana 10, cor de laranja.

<HTML>
<HEAD>
<TITLE>Folha de Estilo Incorporada</TITLE>

<STYLE>

</STYLE>

</HEAD>
<BODY>
<H1>Esta pgina principal de meu site</H1>
<A HREF=exemplo.htm>Exemplo</A>
</BODY>
</HTML>


19.2.3 - O Mtodo INLINE
InLine (na linha) consiste em declarar os comandos da
folha de estilo aplicando diretamente no elemento
(seletor). Essa tcnica tem como vantagem configurar
apenas uma ocorrncia do estilo, ou para anular
somente naquele elemento um estilo pr configurado
em uma arquivo CSS. A declarao feita atravs do
comando style dentro da TAG do seletor.

<TAG style = seletor: valor >

Exemplo: Imagine que uma pgina HTML carregue um
arquivo de Folha de Estilo (CSS) externo. Nas
declaraes de estilo, imagine que foi declarado um
estilo para a TAG <P>, conforme abaixo:

<STYLE>

P {border:"double"};
</STYLE>

Agora imagine que na pgina HTML tem uma
ocorrncia da TAG <P> que o programador quer anular
o estilo pr formatado. Para isso basta declarar na
ocorrncia um novo estilo, que ser vlido apenas
naquela ocorrncia.


<P style=border: "none">

19.3- Unidades de Medida
As unidades de medida utilizadas, dependem do seletor, e
podem ser:

in (inches, polegadas; 1pol = 25,4mm)
cm (centmetros; 1cm = 10mm)
mm (milmetros)
pt (pontos; 1pt = 1/72pol)
px (pontos por polegadas)

Tambm podem ser indicados em porcentagem.

19.4- Definindo Estilo de Cores
Um valor de cor pode ser especificado atravs das 16
cores da paleta VGA:

aqua; black; blue; fuchsia; gray; green; lime; maroon;
navy; olive; purple; red; silver; teal; white e yellow.

Ou atravs de cor do Sistema RGB, da seguinte forma:

#rrggbb ou #rgb ou rgb(x,x,x) ou rgb(y%, y%, y%)

Tambm podem ser indicados em porcentagem.

19.5- Fazendo Referncia a URL
Um URL pode ser informado para carregar uma figura, por
exemplo. As aspas so opcionais:

BODY { BACKGROUND: URL(logosing.gif) };

19.6- Tabela de Seletores
A seguir, uma tabela com os principais seletores, seus
atributos, valores e exemplos:

FONT-SIZE Ajusta o tamanho
da fonte
pt, in, cm, px
{ font-size: 12pt };

FONT-FAMILY Seleciona uma
famlia de fontes.
Se uma falhar
carrega a prxima.
nomes das fontes
do windows,
separadas por
vrgulas
{ font-family: arial, verdana, script };

FONT-WEIGHT Ajusta a espessura
da fonte (negrito).
extra-light;light;
demi-light;
medium;
demi-bold;
bold;
extra-bold;
{ font-weight: bold };

FONT-STYLE Aplica, ou no, o
efeito itlico.
normal;
italic;
{ font-style: italic };

LINE-HEIGHT Especifica a
distncia entre as
linhas.
pt, in, cm, px, %
{ line-height: 24pt };

COLOR Especifica a cor
do texto.
nome da cor VGA
ou cdigo RGB.
{ color: blue };

TEXT-DECORATION Aplica, ou no,
efeitos no texto.
none;
underline;
italic;
line-throungh;
{ text-decoration: underline };

MARGIN-LEFT Ajusta a distncia da
margem esquerda da
pgina.
pt, in, cm, px
{ margin-left: 2in };

MARGIN-RIGHT Ajusta a distncia da
margem direita da
pgina.
pt, in, cm, px
{ margin-right: 1cm };

MARGIN-TOP Ajusta a distncia da
margem superior da
pgina.
pt, in, cm, px
{ margin-top: 20px };

TEXT-ALIGN Especifica o
alinhamento do texto
left;
center;
right;
{ text-align: right };

TEXT-INDENT Especifica a distncia
entre o texto e a
margem esquerda
pt, in, cm, px
{ text-indent: 0.5in };


BACKGROUND Especifica uma
figura de fundo ou
uma cor.
URL;
cdigo da cor;
{ background: #33CC00 }; ou
{ background: URL(figura.gif) };
O Seletor BACKGROUND possui tambm os seguintes
parmetros adicionais:
REPEAT: Repete a imagem (default);
NO-REPEAT: A imagem inserida apenas uma vez;
FIXED: A imagem no rola com a tela;
SCROLL: A imagem rola com a tela (default);
POSITION: Define a posio inicial da imagem. Pode ser
especificado em percentual ou tamanho,
tendo como referncia o canto superior
esquerdo (0%,0%).
Exemplo:
{ BACKGROUND: URL(figura.gif) RIGHT BOTTOM
NO-REPEAT };

BORDER-COLOR Especifica a cor
da borda.
nome da cor VGA
ou cdigo RGB.
{ text-align: right };

BORDER-STYLE Especifica o
estilo da
borda.
dotted; dashed;
solid; double;
none; grove;
ridge; inset;
outset;
{ border-style: grove };

BORDER-WIDTH Especifica a
espessura da borda.
thin;
thick;
medium;
{ border-width: thin };

BORDER Especifica a lateral
da borda que sofre o
efeito.
top;
left;
right;
center;
{ border: right };

SCROLLBAR-
BASE-COLOR
Especifica a cor da
Barra de Rolagem.
nome da cor
VGA ou cdigo
RGB.
{ scrollbar-base-color: lightblue };

HTML Resumo Aulas v2010 1 Trimestre 2011

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Resumo Aulas v2010 1 Trimestre 2011

Enviado por

Direitos autorais:

Formatos disponíveis

P R O G R A M A O

Você também pode gostar