P R O G R A M A O

HTML

RESUMO DAS AULAS

Prof. Celso Gallo

RESUMO DAS AULAS DE HTML

Linguagem Grfica de Programao I 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 - Prof. Celso Gallo

RESUMO DAS AULAS DE HTML

Linguagem Grfica de Programao I

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 W 3) a penas um conjunto de documentos multimdia conectados atravs de hyperlinks que permitem o deslocamento entre documentos.

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>

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.

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> <!--Comandos HTML--> </BODY> </HTML>

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

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.

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 1

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>Subtitulo 1</H1> e) <HR> Traa uma linha horizontal na tela. Possui os seguintes parmetros opcionais: SIZE = expessura da linha WIDTH = comprimento da linha ALIGN = alinhamento (LEFT, CENTER, RIGHT) COLOR = cor da linha. Exemplo: <HR SIZE = 2 WIDTH = 50 ALIGN = left COLOR = red> f) <!-- comentrios --> Permite digitar comentrios em qualquer parte do programa. Esses comentrios no sero exibidos na pgina. Exemplo: <!-- Elaborado pelo Prof. Celso Gallo -->

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: ALIGN = alinhamento (LEFT, CENTER, RIGHT) 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 tecla ENTER como sendo o final de uma 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: ALIGN = alinhamento (LEFT, CENTER, RIGHT) Exemplo: <DIV ALIGN=right>O HTML no reconhece a tecla ENTER como sendo o final de uma linha.</DIV>

5 - Estilos de Textos
Os TAGs que alteram os estilos de textos devem ser especificados aos pares. a) <B> b) <I> c) <U> d) <TT> e) <BIG> texto em negrito texto em itlico texto sublinhado texto em typerwriter </B> </I> </U> </TT>

aumenta a fonte + negrito </BIG> </SMALL> </SUP> </SUB> texto sobrescrito texto subscrito

f) <SMALL> reduz a fonte g) <SUP> h) <SUB>

Editar o EXERCCIO 01 do Caderno de Exerccios

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

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:

<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 Basico</dd> <dt>Aprender</dt> </dl> Ser exibido:

6.1 - Listas No Ordenadas

<ul> </ul> Ser exibido: Curso Tcnico em Turismo Curso Tcnico em Informtica <li> Curso Tcnico em Turismo <li> Curso Tcnico em Informtica

6.2 - Listas Ordenadas

<ol> <li> Curso Tcnico em Turismo <li> Curso Tcnico em Informtica </ol> Ser exibido: 1. Curso Tcnico em Turismo 2. Curso Tcnico em Informtica

Html

Html Bsico Aprender

Editar o EXERCCIO 02 do Caderno de Exerccios Editar o EXERCCIO 03 do Caderno de Exerccios

6.3 - Listas Aninhadas Mistas

<ol> <li> Curso Tcnico em Turismo <li> Curso Tcnico em Informtica <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 incluido dentro da etiqueta <ol> sendo que o mesmo ficaria assim: <ol type=a>

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 3

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.

b) c)

Endereo do servidor: o computador que contm a Pgina Web. 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.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.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.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>.

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)

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

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.

(qdo. o usurio clicar no hipertexto ser exibido o aplicativo para envio de e-mail que estiver instalado em seu micro)

Editar o EXERCCIO 04 do Caderno de Exerccios Editar o EXERCCIO 05 do Caderno de Exerccios

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 4

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:

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.

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>

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.

8.3 - Cor do Link (Hipertexto)

O parmetro usado LINK. O padro azul: Exemplos: <body link=#0000FF> ou <body link=blue>

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> exibe uma imagem chamada foto.jpg, alinhada pela sua parte superior. e) <img src=foto.jpg align=middle> exibe uma imagem chamada foto.jpg, alinhada pela sua parte central.

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!

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

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)

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 5

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.

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.

<marquee behavior=rolagem direction=direo loop=num_rolagens scrollamount=velocidade scrolldelay=pixels_a_percorrer>

texto em movimento

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>

</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 texto </marquee> scrolldelay=nmero>

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>

Editar o EXERCCIO 06 do Caderno de Exerccios Editar o EXERCCIO 07 do Caderno de Exerccios Editar o EXERCCIO 08 do Caderno de Exerccios Editar o EXERCCIO 09 do Caderno de Exerccios

Editar o EXERCCIO 10 do Caderno de Exerccios Editar o EXERCCIO 11 do Caderno de Exerccios Editar o EXERCCIO 12 do Caderno de Exerccios Editar o EXERCCIO 13 do Caderno de Exerccios

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 6

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: => cria uma tabela. => cria uma linha da tabela. => cria uma clula em uma linha. => cria uma clula com texto centralizado e em negrito. <CAPTION>...</CAPTION> => (opcional) cria um ttulo. <TABLE>...</TABLE> <TR>...</TR> <TD>...</TD> <TH>...</TH> 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.2 - Tabela Com Clulas Mescladas

Exemplo: Para criar a tabela abaixo, a estrutura deve ser: Clubes de Futebol Palmeiras Portuguesa Santo Andr So Paulo

Cornthians Santos

So Caetano

<table border=2 width=100% bgcolor="yellow"> <caption>Clubes de Futebol</caption> <!--Criando a 1 Linha--> <tr> <th colspan=2 height=50>Palmeiras</th> <td>So Paulo</td> </tr> <!--Criando a 2 Linha--> <tr> <td valign=bottom height=50>Cornthians</td> <th align=right>Portuguesa </th> <th rowspan=2>So Caetano </th> </tr> <!--Criando a 3 Linha --> <tr> <td height=50 valign=top align=center>Santos</td> <td>Santo Andr</td> </tr> </table>

Editar o EXERCCIO 14 do Caderno de Exerccios Editar o EXERCCIO 15 do Caderno de Exerccios

15.1 - Tabela Com Clulas Simples

Exemplo: Para criar a tabela abaixo, a estrutura deve ser: Palmeiras Santos Clubes de Futebol Cornthians So Paulo So Caetano Santo Andr

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

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 7

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.

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.1 - Definindo o Lay-Out 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.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>
Pgina 8

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.

Resumo das Aulas de HTML - Prof. Celso Gallo

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 Lay-Out: Frame_Superior (DELTA.htm) Frame_Esquerda (ALFA.htm) Frame_Direita (BETA.htm e demais pginas acessadas)

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.

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.

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

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>

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 contedo digitado. CHECKBOX ou RADIO valor a ser enviado. SUBMIT, RESET, ou BUTTON rtulo do boto. d) CHECKED: determina uma marca em um campo tipo CHECKBOX ou RADIO.

Editar o EXERCCIO 16 do Caderno de Exerccios Editar o EXERCCIO 17 do Caderno de Exerccios

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 9

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

Editar o EXERCCIO 18 do Caderno de Exerccios Editar o EXERCCIO 19 do Caderno de Exerccios

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>

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 10

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

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

nos

cabealhos

dos

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>

Editar o EXERCCIO 20 do Caderno de Exerccios

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 11

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.

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

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

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.

<STYLE TYPE=text/css> <!-declare aqui os seletores --> </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> <!-BODY {font: 10pt "arial"; color:"green"; background: "lightgreen"}; H1 {font: 20pt "arial"; font-weight: "bold"; color:"brown"}; A:LINK {font: 10pt "verdana"; color: "darkgreen"}; A:VISITED{font: 10pt "verdana"; color: "orange"}; --> </STYLE> </HEAD> <BODY> <H1>Esta pgina principal de meu site</H1> <A HREF=exemplo.htm>Exemplo</A> </BODY> </HTML>

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>

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 12

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

19.6- Tabela de Seletores

A seguir, uma tabela com os principais seletores, seus atributos, valores e exemplos: FONT-SIZE { font-size: 12pt }; Seleciona uma famlia de fontes. Se uma falhar carrega a prxima. { font-family: arial, verdana, script }; FONT-FAMILY FONT-WEIGHT nomes das fontes do windows, separadas por vrgulas Ajusta o tamanho da fonte pt, in, cm, px

<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> <!-- Este o Arquivo Externo CSS --> 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. <!-- Esta a pgina HTML --> <P style=border: "none">

Ajusta a espessura extra-light;light; da fonte (negrito). demi-light; medium; demi-bold; bold; extra-bold; { font-weight: bold }; Aplica, ou no, o efeito itlico. { font-style: italic }; FONT-STYLE Especifica a distncia entre as linhas. { line-height: 24pt }; LINE-HEIGHT COLOR { color: blue }; TEXT-DECORATION Aplica, ou no, efeitos no texto. { text-decoration: underline }; MARGIN-LEFT { margin-left: 2in }; Ajusta a distncia da margem direita da pgina. { margin-right: 1cm }; MARGIN-RIGHT Ajusta a distncia da margem superior da pgina. { margin-top: 20px }; MARGIN-TOP TEXT-ALIGN { text-align: right }; Especifica a distncia entre o texto e a margem esquerda { text-indent: 0.5in }; TEXT-INDENT pt, in, cm, px Especifica o alinhamento do texto pt, in, cm, px Ajusta a distncia da margem esquerda da pgina. pt, in, cm, px none; underline; italic; line-throungh; Especifica a cor do texto. normal; italic;

pt, in, cm, px, %

19.3- Unidades de Medida

As unidades de medida utilizadas, dependem do seletor, e podem ser: in cm mm pt px (inches, polegadas; 1pol = 25,4mm) (centmetros; 1cm = 10mm) (milmetros) (pontos; 1pt = 1/72pol) (pontos por polegadas)

nome da cor VGA ou cdigo RGB.

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.

pt, in, cm, px

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) };

left; center; right;

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 13

Especifica uma URL; figura de fundo ou cdigo da cor; uma 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 }; BACKGROUND BORDER-COLOR Especifica a cor da borda. { text-align: right }; BORDER-STYLE nome da cor VGA ou cdigo RGB.

Especifica o dotted; dashed; estilo da solid; double; borda. 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 }; SCROLLBARBASE-COLOR Especifica a cor da Barra de Rolagem. nome da cor VGA ou cdigo RGB.

{ scrollbar-base-color: lightblue };

Editar o EXERCCIO 21 do Caderno de Exerccios

Resumo das Aulas de HTML - Prof. Celso Gallo

Pgina 14