Вы находитесь на странице: 1из 67

1

Apostila de HTML e CSS

HTML bsico 1 ........................................................................................................ 4 Definio .............................................................................................................. 4 Requisitos para o desenvolvimento de uma pgina WEB ................................... 4 TAGs ................................................................................................................... 4 1.1 Iniciando um documento ........................................................................... 5 <HTML> </HTML>....................................................................................... 5 <HEAD> ... </HEAD>....................................................................................... 5 <TITLE> ... </TITLE> ....................................................................................... 5 <BODY> ... </BODY>....................................................................................... 5 1.2 Trabalhando com textos............................................................................ 8 1.2.1 Ttulos e Subttulos.................................................................................. 8 1.2.2 Estilos de texto................................................................................. 10 1.2.3 Fontes .............................................................................................. 12 1.3 Quebras de linha ................................................................................. 14 1.4 Linhas Horizontais ............................................................................... 14 2. Caracteres Especiais ........................................................................................ 16 3. Imagens............................................................................................................. 17 4. LINKS................................................................................................................ 19 4.1 Links para o mesmo diretrio....................................................................... 19 4.2 Links para outro diretrio ............................................................................. 20 4.3 Parmetro NAME......................................................................................... 21 5. Listas................................................................................................................. 22 5.1 - Criando listas ordenadas ....................................................................... 22 5.2 - Criando listas no ordenadas ................................................................ 23 6. Tabelas.............................................................................................................. 25 6.1 - Construindo tabelas com o elemento TABLE ............................................ 25 6.1.1 - O ttulo da tabela (elemento CAPTION) .............................................. 25 6.1.2 - TABLE HEADINGS (elemento TH) ..................................................... 25 6.1.3 - TABLE DATA (elemento TD) .............................................................. 25 6.1.4 - END OF TABLE ROW (elemento TR)................................................. 26 6.2 - Atributos para a tabela............................................................................... 26 6.2.1 - BORDER............................................................................................. 26 6.2.2 - ALIGN ................................................................................................. 27 6.2.3 - VALIGN ............................................................................................... 28 6.2.4 CELLSPACING .................................................................................. 28 6.2.5 CELLPADDING .................................................................................. 29 6.2.6 ROWSPAN ......................................................................................... 29 6.2.7 COLSPAN .......................................................................................... 30 6.2.8 Largura da clula................................................................................ 31 6.2.9 Cor de fundo das clulas.................................................................... 31 7. Formulrios ....................................................................................................... 33 7.1 - Construindo formulrios com o FORM ...................................................... 33 7.2 - Atributos para FORM ................................................................................. 33 7.2.1 GET .................................................................................................... 33 7.2.2 POST ................................................................................................. 33 7.2.3 INPUT ................................................................................................ 33

7.2.3.1 - Tipos de elementos TYPE ............................................................ 34 7.2.3.1.1 - TYPE="RADIO"...................................................................... 34 7.2.3.1.2 - TYPE="PASSWORD" ............................................................ 35 7.2.3.1.3 - TYPE="CHECKBOX" ............................................................. 35 7.2.3.1.4 - TYPE="SUBMIT" ................................................................... 36 7.2.3.1.5 - TYPE="RESET" ..................................................................... 36 7.2.4 TEXTAREA ........................................................................................ 36 7.2.5 SELECT ............................................................................................. 37 7.2.6 Exemplo completo de formulrio ........................................................ 37 8. Frames .............................................................................................................. 40 8.1 - Estrutura .................................................................................................... 40 8.2 - Sintaxe....................................................................................................... 40 8.3 FRAMESET .............................................................................................. 41 8.3.1 - ROWS................................................................................................. 41 8.3.2 COLS ................................................................................................. 42 8.4 FRAME ..................................................................................................... 42 8.4.1 SRC.................................................................................................... 43 8.4.2 - NAME.................................................................................................. 43 8.4.3 SCROLLING ...................................................................................... 43 8.4.4 NORESIZE ......................................................................................... 44 8.4.5 TARGET............................................................................................. 45 8.5 BORDER .................................................................................................. 45 9. Tabelas de Cores .............................................................................................. 47 10. CSS ................................................................................................................. 48 10.1 O que CSS? ............................................................................................ 48 10.2 Como criar estilos ...................................................................................... 48 10.3 Tipos de Folhas de Estilo........................................................................... 49 10.3.1 Estilos Externos................................................................................... 50 10.3.2 Estilos Incorporados ............................................................................ 50 10.3.3 Estilos Inline ........................................................................................ 51 10.4 Tags Personalizadas ................................................................................. 51 10.4.1 Utilizando a TAG <DIV> ...................................................................... 53 10.4.2 Utilizando a TAG <SPAN> .................................................................. 53 10.5 Atalhos e atributos de CSS ........................................................................ 55 10.5.1 Atalhos de CSS ................................................................................... 55 10.5.2 Atributos de CSS ................................................................................. 55

HTML bsico 1
Definio

HTML significa Hyper Text Markup Language e a linguagem de marcao de hipertexto, ou seja, a linguagem na qual so escritas as pginas da Web, interpretada pelo navegador. As informaes esto ligadas na forma de pginas ligadas entre si. A pgina transferida de um computador remoto para o usurio, onde o browser Requisitos para o desenvolvimento de uma pgina WEB faz o trabalho delinguagem HTML para escrever o cdigo fonte de sua pgina; interpretar os cdigos naquele documento e mostra a Conhecer a Editor de texto pgina que o para gerar o seu cdigo fonte (bloco de notas, Front Page, Dremweaver, entre outros); usurio v. A internet (browser) para visualizar as suas pginas princpios bsicos: Um navegador de Web est estruturada em dois (Internet Explorer, Netscape, etc). HTTP(Hiper Text Transfer Protocol) e HTML (Hiper Text Markup Language). TAGs HTTP o protocolo de transferncia de hipertexto, ou seja, o Os comandos protocolo que HTML so chamados de TAGs, compreendem de marcas a navegao na Web, com o simples clicar do mouse sobre o permitepadres que so utilizadas para fazer indicaes a um browser. texto (ou Assim TAGs aparecem outras linguagens, os comandos tm uma sintaxe imagem) que esteja associado ade menorlink.(<) e maior que As como em sempre entre sinais outro que (>); prpria, e so utilizadas aos pares, sendo que a TAG de finalizao de Geralmente um algumas regras: seguem comando qualquer finalizada com a precedncia de uma barra (/).

Exemplos: TAG nico: <br> TAG duplo: <center> xxx </center>

1.1 Iniciando um documento

Todo o documento HTML fica contido entre os TAGS: <HTML> e </HTML>. Uma pgina HTML possui trs partes bsicas: estrutura principal, um cabealho e um corpo de pgina. Possui uma estrutura dividida em 4 TAGs bsicas:
<HTML> ... </HTML> <HEAD> ... </HEAD> <TITLE> ... </TITLE> <BODY> ... </BODY>

<HTML> </HTML>

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


<HEAD> ... </HEAD>

Usado para indicar parmetros de configur ao do documento, tambm utilizado para exibir o ttulo na barra de ttulos do browser. <TITLE> ... </TITLE>
Indica o ttulo do documento para o browser. Esta TAG deve estar sempre dentro das TAGs <HEAD> </HEAD>.

<BODY> ... </BODY>


Envolvem a seo de corpo do documento. Aqui fica o contedo principal da Home Page.

Opcionalmente podemos indicar uma cor para o fundo da pgina, usando a opo BGCOLOR, ou um arquivo de imagem para formar o fundo, usando a opo BACKGROUND.

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

Exemplo com cor de fundo na pgina: <html> <head> <title> Curso de HTML </title> </head> <body bgcolor="green" > Corpo da pgina HTML com cor de fundo. </body> </html>

Agora substitua o cdigo acima pelo exemplo abaixo seguindo os passos 5, 6 e 7. Exemplo com imagem de fundo na pgina:

<html> <head> <title> Curso de HTML </title> </head> <body background="fundo.gif" > Corpo da pgina HTML com imagem de fundo. </body> </html>

1.2 Trabalhando com textos

No corpo do documento onde estar localizado o ttulo e subttulos, texto, imagens, ligaes com outras pginas, etc. Nesta seo veremos como trabalhar 1.2.1 Ttulos e Subttulos com os textos.
Para demarcar ttulos e subttulos, use os TAGs de HEADER (H1 a H6), juntamente com a opo CENTER.

Veja alguns exemplos:


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

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

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

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

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

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


<head> <title> Curso de HTML </title> </head> <body> <H1>Ttulo com H1: rgos Colegiados</H1> <H2>Ttulo com H2: rgos Colegiados</H2> <H3>Ttulo com H3: rgos Colegiados</H3> <H4>Ttulo com H4: rgos Colegiados</H4> <H5>Ttulo <H6><CENTER>Ttulo com H6 centralizado: rgos com H5: rgos Colegiados</H5> Colegiados</CENTER></H6> </body> </html>

10

1.2.2 Estilos de texto

que podem ser utilizadas para a formatao de um texto.


<B>...</B> <I>...</I>

Alm da TAG <CENTER>...</CENTER> existem as seguintes TAGs

Aplica o estilo negrito. Aplica o estilo itlico.

<U>...</U>

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


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

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

11

<P> A TAG responsvel pela quebra de pargrafos a <P> que finaliza o pargrafo e insere automaticamente uma linha em branco entre pargrafos. Sintaxe do comando: <P align=posio> Texto do pargrafo. Posio pode ser: Left: alinhamento esquerda. Center: centralizado Right: alinhamento direita

Exemplo: Crie <html> um novo arquivo <body> abaixo: <title>Curso de HTML</title>


<B>Estilo negrito.</B> <br> <I>Estilo itlico.</I> <br> <U>estilo sublinhado (nem todos os browser o reconhecem)</U> <br> <SUP>Texto sobrescrito.</SUP> <br> <SUB>Texto subscrito.</SUB> <br> <PRE>Este um pequeno texto com estilo pr-formatado.</PRE> <p align="center"> Este um exemplo do primeiro pargrafo centralizado. <p> Este um exemplo do segundo pargrafo.

com o nome EstiloTexto e insira o cdigo

12

</body> </html>

1.2.3 Fontes
Para inserir em sua pgina um texto com fontes de tamanhos, cores e tipos diferentes utilizamos a TAG <FONT> ... </FONT>. Sintaxe do comando: <FONT size=n face=nome color=cor> TEXTO </FONT> Onde: SIZE=n : n varia de 1 a 7 e 3 o valor padro da maioria dos navegadores; FACE=nome : nome da fonte a ser utilizada (Arial, Tahoma, etc); COLOR=cor : cor da fonte definida em hexadecimal, ou atravs de um nome pr-definido de cores. Veja no captulo 9 desta apostila.

Exemplo:
<html>

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

13

<body> <title>Curso de HTML</title> <FONT size="1" face="Tahoma" color="red"> Texto com cor vermelha </FONT> <br><br> <FONT size="2" face="Arial" color="green"> Texto com cor verde </FONT> <br><br> <FONT size="3" face="Tahoma" color="blue"> Texto com cor azul </FONT> <br><br> <FONT size="4" face="Tahoma" color="orange"> Texto com cor laranja </FONT> <br><br> <FONT size="5" face="Tahoma" color="pink"> Texto com cor pink </FONT> <br><br> <FONT size="6" face="Tahoma" color="#4F2F4F"> Texto com cor violeta </FONT> <br><br> <FONT size="7" face="Tahoma" color="#FF00FF"> Texto com cor magenta </FONT> <br><br> </body> </html>

14

1.3 Quebras de linha

A tag <BR> faz a quebra de linha sem acrescentar espaos extras entre linhas. Finaliza a linha de texto e insere automaticamente uma outra linha em branco. 1.4 Linhas Horizontais No precisa ser finaliza com </BR>.
Desenha uma linha horizontal no documento. No precisa ser finalizada com </HR>. Sintaxe: <HR width=n% align=posio size=n color=#cor noshade> Atributos: SIZE: Define a espessura, em pixels, da linha. WIDTH: Define a lar gura da linha, o que pode ser feito em pixels (nmero absoluto) ou em percentual da tela (com o smbolo de %) ALIGN: Alinhamento, como o que tem sido usado, pode ser LEFT, RIGHT e CENTER, ou seja, esquerda, direita e ao centro, respectivamente.

15

NOSHADE: Linha sem sombra. O padro a linha sombreada, utilizando esse atributo temos uma linha sem sombra.

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

<html> <body> Primeiro exemplo com a linha horizontal <HR width="100%" align="left" size="2" color="silver" > <br> <center>Segundo exemplo com a linha horizontal</center> <HR width="70%" align="center" size="3" color="blue" > <br> Terceiro exemplo com a linha horizontal <HR width="30%" align="center" size="5" color="red" noshade> <br> </body> </html>

16

2. Caracteres Especiais
&Aacute; &aacute; &Acirc &acirc; &Agrave; &agrave; &Aring; &aring; &Atilde; &atilde; &Auml; &auml; &AElig; &aelig; &Eacute; &eacute &Ecirc; &ecirc; &Egrave; &egrave; &Euml; &euml; &ETH; &eth; &Iacute; &iacute &Icirc; &icirc; &Igrave; &igrave; &Iuml; &iuml; &Oacute; &oacute; &Ocirc; &ocirc &Ograve; &ograve; &Oslash; &oslash; &Otilde; &otilde; &Ouml; &ouml; &Uacute; &uacute; &Ucirc; &ucirc; &Ugrave; &ugrave; &Uuml; &uuml; &Ccedil; &ccedil; &Ntilde; &ntilde; < &lt; > &gt; & &amp; " &quot; &reg; &copy; &Yacute; &yacute; &THORN; &thorn; &szlig; &#186; &170; &#185; &#178; &#179; &#131; &#134; &#135; &#137; &#162; &#163; &#171; &#177; &#187; &#183; &#188; &#189; &#190; &#191; &#215; &#247; &#161; &#164;

17

3. Imagens
Para inserir uma imagem em uma pgina web utilizamos o comando, tag, <img src> e seus atributos. Os formatos mais usados so o GIF e o JPG, ambos com compactao de pixels. Sintaxe: <IMG SRC="endereo da imagem WIDTH=n% HEIGHT=n% ALIGN=posio ALT=texto> Atributos: WIDTH: Define a largura da imagem , o que pode ser feito em pixels (nmero absoluto) ou em percentual da tela (com o smbolo de %). HEIGHT: Define a altura da linha, o que pode ser feito em pixels (nmero absoluto) ou em percentual da tela (com o smbolo de %). ALIGN: Alinhamento da imagem pode ser, LEFT, RIGHT e CENTER, ou seja, esquerda, direita e ao centro, respectivamente. ALT: texto que ir aparecer ao passar o mouse sobre a imagem ou texto que surgir caso a imagem no possa ser visualizada. BORDER: Especificao da largur a da borda da imagem. Valor em pixel. VSPACE: Para especificar o espao que deve ser deixado acima e abaixo da imagem. Valor em pixel. HSPACE: Especifica o espao que deve ser deixado nas laterais da imagem. Valor em pixel. O nico obrigatrio o src.

Ex.:
Crie um arquivo chamado Imagem.html e insira o cdigo abaixo: <html> <body> <title>Curso de HTML</title> <IMG SRC="img/bullet.gif" ALIGN="left" ALT="Imagem Bullet"> <font size="3" face="arial" color="blue">Esta a nossa primeira imagem inserida.</font> <br><br>

18

<font size="4" face="Courier New" color="orange">Abaixo segue mais imagens na pgina.</font> <br><br> <IMG SRC="img/calendario.gif" ALIGN="left" ALT="Calendrio"> <font size="3" face="arial" color="black">Calendrio.</font> <br><br> <IMG SRC="img/search.gif" ALIGN="left" ALT="Buscar"> <font size="3" face="arial" color="black">Buscar.</font> <br><br> <IMG SRC="img/salvar.gif" ALIGN="left" ALT="Salvar"> <font size="3" face="arial" color="black">Salvar.</font> <br><br> </body> </html>

19

4. LINKS

O principal poder do HTML vem da capacidade de interligar partes de um texto, imagens a outros documentos. A interligao entre documentos no se restringe somente s ligaes com outras pginas. Em pginas muito longas onde um assunto tem vrios 4.1 Links para o mesmo diretrio tpicos, podemos Voc s precisa especificar o nome do arquivotm a funo a suainterligar os tpicos de utilizar ndices onde os links que ser chamado e de extenso. um texto e Sintaxe: que com apenas um clique em um dos tpicos do ndice, o item <A HREF nomeDoArquivo.extenso> exibido.= Texto ou imagem
</A> Onde: A: abertura da TAG de link; HREF=nomeDoArquivo.extenso: deve ser informado o nome completo do arquivo que ser acessado; Texto ou imagem: que servir como link; /A: encerra a TAG de link. Exemplo: Edite o primeiro arquivo que criamos index.html. Substitua o cdigo pelo o que est abaixo:

<html> <head> <title> Curso de HTML </title> </head> <body > <h1><font face="arial" color="orange">MENU</font></h1> <HR width="100%" align="left" size="2" color="silver" >

20

<A HREF = "EstiloTexto.html">Estilo de Texto</A> <br> <A HREF = "ExemploTitulo.html">Ttulos e Subttulos</A> <br> <A HREF = "LinhaHorizontal.html">LinhaHorizontal</A> <br> <A HREF = "Fontes.html">Fontes</A> <br> <A HREF = "Imagem.html">Imagem</A> </body> </html>

4.2 Links para outro diretrio

Para criar links para uma pgina localizada em outros diretrios necessrio indicar o barra utilizada completo diretrios a barra convencional (/); isto tem uma A caminho para separar os do arquivo. Para a WEB O pouco forma umponto de partida para localizar um arquivo em outro diretrio o atual; diferente do Windowsdevedo DOS, veja: Para baixar um nvel e utilizar os sinais ../.
Exemplo:

21

<A HREF=../matricula/CadastraAluno.html > Cadastro de Aluno </A>

4.3 Parmetro NAME


O parmetro NAME serve para marcar um ponto para possveis desvios. Quando desviamos para um determinado ponto dentro de um documento, indicamos este nome com um "#". Por exemplo: <A NAME="AQUI">Aqui um ponto para desvios</A>... <A HREF="#AQUI">Desvia para o ponto "AQUI"</A>

22

5. Listas
5.1 - Criando listas ordenadas
Listas ordenadas so tambm denominadas listas numeradas, pois, quando um navegador encontra uma TAG, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando nmeros, como 1, 2, 3, e assim sucessivamente. Listas ordenadas so iniciadas pela TAG <OL>. Cada item utiliza a TAG <LI>. Finalmente, </OL>. Sintaxe: <OL TYPE=formato START=n> <LI> Tpico 1 <LI> Tpico 2
<LI> Tpico n </OL>

Onde:

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

Exemplo: Crie um arquivo chamado Listas.html e insira o cdigo abaixo: <html> <title>Curso de HTML</title> <body> <center><h1>Listas Ordenadas</h1></center> <h3>Cursos</h3>

23

<OL> <LI>Graduao <LI>Ps-Graduao Lato Sensu <LI>Cursos de Ps-Graduao Stricto Sensu </OL> </body> </html>

5.2 - Criando listas no ordenadas

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

24

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

<br> <center><h1>Listas No Ordenadas</h1></center> <h3>Membro da Comunidade Acadmica</h3> <UL TYPE = disc> <LI>Aluno <LI>Docente <LI>Tcnico Administrativo </UL>

25

6. Tabelas

6.1 - Construindo tabelas com o elemento TABLE

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

A TAG <TABLE> utilizada para a representao de dados tabulares. A estrutura e o contedo da tabela devem ficar dentro das TAGs <TABLE> </TABLE>
6.1.1 - O ttulo da tabela (elemento CAPTION)
A TAG <CAPTION> especifica o ttulo de uma tabela. Por exemplo: <CAPTION>Notas da primeira avaliao</CAPTION>

6.1.2 - TABLE HEADINGS (elemento TH)


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

<TH>texto em destaque</TH> Observaes: Elas devem ficar, assim como todas, dentro da TAG <TABLE>.
6.1.3 - TABLE DATA (elemento TD)
A TAG <TD> especifica a clulas de dados de uma tabela. Por se tratar de dados comuns (e no cabealhos), essas clulas possuem seu contedo escrito em fonte normal, sem nenhum destaque e alinhamento esquerda. Assim como o TH, pode-se construir clulas em branco, usando o elemento TD, como no exemplo a seguir: <TD>Clulas de dados</TD> Observaes: A TAG de terminao, <TD>, tambm opcional.

26

6.1.4 - END OF TABLE ROW (elemento TR)

A TAG <TR> indica o incio de uma linha na tabela. Cada linha da tabela pode conter vrias clulas, e, portanto, necessrio que se faa uso de uma marcao que indique exatamente o ponto de quebra de uma linha e incio de outra. Toda linha deve terminar com um </TR>.
6.2 - Atributos para a tabela
As marcaes das tabelas podem apresentar resultados diferentes, se acompanhadas de alguns atributos. Os principais so:

6.2.1 - BORDER
Um atributo opcional para ser usado com TABLE o atributo BORDER. Se ele estiver presente, a tabela ser formatada com linhas de borda. Ateno: Todas as explicaes acima como as que esto por vir, foram feitas, para que voc possa saber o que significa a TAG em questo. Exemplo: <TABLE BORDER> <CAPTION> Nota da primeira avaliao </CAPTION> <TD>Notas/Alunos</TD> <TH>Eduardo</TH> <TH>Ana Lcia</TH> <TH>Andra</TH> <TR> <TH>Notas</TH> <TD>8,0</TD> <TD>9.3<TD> <TD>7.8</TD> <TR> <TH>No de Inscrio</TH> <TD>376234809</TD> <TD>387349048</TD> <TD>502350432</TD>

</TABLE> Veja o resultado:

27

O atributo BORDER pode tambm receber um valor que vai estabelecer qual a espessura (alm da existncia) da linha de borda da tabela (BORDER="valor"). Se o valor atribudo for 0 (zero), o BORDER funciona exatamente como o caso padro, sem o BORDER. Des sa maneira, possvel colocar tabelas em maior destaque, atribuindo um valor maior que 1 para o BORDER.
<TABLE BORDER=5> <TR> <TD>TESTE</TD> <TD>TESTE2</TD> <TD>TESTE3</TD> </TR> <TR> <TD>TESTE4</TD> <TD>TESTE5</TD> <TD>TESTE6</TD> </TR> </TABLE> Veja o resultado:

6.2.2 - ALIGN

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

28

<TR> </TABLE>

<TD ALIGN="CENTER">Centro</TD> <TD ALIGN="LEFT">Esquerda</TD> <TD ALIGN="RIGHT">Direita</TD>

Veja o resultado:

6.2.3 - VALIGN

Pode ser aplicado a TH e TD e define o alinhamento do texto em relao s bordas superior e inferior. Aceite os valores TOP, MIDDLE, E BOTTOM para alinhar na parte <TABLE BORDER> de cima, no <TD>Teste de alinhamento</TD> meio e na parte de baixo, respectivamente. <TD VALIGN="TOP">TOP</TD>
<TD VALIGN="middle">MIDDLE</TD> <TD VALIGN="bottom">BOTTOM</TD> </TABLE>exemplo: Veja o

Veja o resultado:

6.2.4 CELLSPACING

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

29

Crie um arquivo chamado Tabela.html e insira o cdigo abaixo: <h3>Exemplo com CELLSPACING</h3> <TABLE BORDER=1 WIDTH=80% ALIGN=center CELLSPACING=6> <TR> <TD WIDTH=33% ALIGN=center> Coluna 1 </TD> <TD WIDTH=33% ALIGN=center> Coluna 2 </TD> <TD WIDTH=34% ALIGN=center> Coluna 2 </TD> </TR> </TABLE>

6.2.5 CELLPADDING

Este atributo utilizado para formatar o espao entre o contedo de uma clula e suas bordas em todos os sentidos. aplicado dentro da TAG <TABLE>. Exemplo: Acrescente o cdigo abaixo no arquivo Table.html:
<TABLE BORDER="1" WIDTH="80%" ALIGN="center" CELLPADDING="6"> <TR> <TD WIDTH="33%"ALIGN="center"> Aluno </TD> <TD WIDTH="33%"ALIGN="center"> Docente </TD> <TD WIDTH="34%"ALIGN="center"> Tcnico Administrativo </TD> </TR> </TABLE>

6.2.6 ROWSPAN
Define quantas linhas uma mesma clula pode abranger. Por padro, na maioria dos navegadores de Internet cada clula adicionada em uma tabela corresponde a uma linha. Pode ser aplicado em TH ou TD, proporcionando o mesmo efeito. Exemplo: Acrescente o cdigo abaixo no arquivo Table.html. <TABLE BORDER=1 WIDTH=380 CELLPADDING=7 ALIGN=center> <TR> <TD WIDTH=16% ROWSPAN=3> 3 linhas </TD> <TD WIDTH=16%> coluna 2 </TD> <TD WIDTH=16%> coluna 3 </TD> <TD WIDTH=17%> coluna 4 </TD>

30

<TD WIDTH=17%> coluna 5 </TD> </TR> <TR> <TD WIDTH=16%> coluna 2 </TD> <TD WIDTH=16%> coluna 3 </TD> <TD WIDTH=17%> coluna 4 </TD> <TD WIDTH=17%> coluna 5 </TD> </TR> <TR> <TD WIDTH=16%> coluna 2 </TD> <TD WIDTH=16%> coluna 3 </TD> <TD WIDTH=17%> coluna 4 </TD> <TD WIDTH=17%> coluna 5 </TD> </TR> </TABLE>

6.2.7 COLSPAN

Este atributo define quantas colunas uma clula pode abranger. Por padro, na maioria dos navegadores de Internet cada clula adicionada em uma <h3>Exemplo com COLSPAN</h3> tabela corresponde a uma coluna. Pode ser aplicado em TH ou TD, <TABLE BORDER=1 WIDTH=80% ALIGN=center> <TR> proporcionando a <TD WIDTH=24% COLSPAN=3>Clula com 3 colunas </TD> <TD WIDTH=20%>coluna 4</TD> mesma abrangncia.
<TD WIDTH=20%>coluna 5</TD> </TR> <TR> <TD WIDTH=20%>coluna 1</TD> <TD WIDTH=20%>coluna 2</TD> <TD WIDTH=20%>coluna 3</TD> <TD WIDTH=20%>coluna 4</TD> <TD WIDTH=20%>coluna 5</TD> </TR> </TABLE>

31

6.2.8 Largura da clula


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

<TABLE BORDER=2> <TR> <TD WIDTH=100> WIDTH=100</TD> <TD ALIGN=MIDDLE WIDTH=200>WIDTH=200 (PIXELS)</TD> </TR> </TABLE>

6.2.9 Cor de fundo das clulas


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

32 Vejamos um exemplo:

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

33

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

7.1 - Construindo formulrios com o FORM


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

7.2 - Atributos para FORM


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

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

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

7.2.3 INPUT
A TAG <INPUT> especifica uma variedade de campos editveis dentro de um formulrio. Ele pode receber diversos atributos que definem o tipo de mecanismo de entrada (botes, janelas de texto, etc.), o nome da varivel associada com o dado da entrada, o alinhamento e o campo do valor mostrado. O atributo mais importante do INPUT o NAME. Ele associa o valor da entrada do elemento. Por

34

exemplo, quando voc for receber os dados, j, processados, ir vir o name: = resposta dada pelo visitante. Outro atributo importante o TYPE. Ele determina o campo de entradas de dados. Veja como se usa este atributo: <INPUT TYPE="TEXT" NAME="nome"> Para mudar o tamanho, da janela padro, voc tem que colocar o comando SIZE. Por exemplo: <INPUT TYPE "TEXT" NAME="nome" SIZE=8>(ou nmero desejado) Outro comando importante o VALUE. Ele acrescenta uma palavra digitada no comando janela. Por exemplo: <INPUT TYPE "TEXT" NAME="nome" SIZE=8 VALUE="texto.">

Olhe como ficaria:

7.2.3.1 - Tipos de elementos TYPE


Voc pode fazer vrias coisas com o elemento TYPE. Por exemplo, para ser um campo de senha, que quando digitado, aparea o smbolo "*", ao invs das letras, voc deve escrever o seguinte: <INPUT TYPE"PASSWORD" NAME="nome" SIZE=8>

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

35

<INPUT TYPE="RADIO" NAME="voc gostou dessa home page?" VALUE="sim">sim<p> <INPUT TYPE="RADIO" NAME="voc gostou dessa home page?" VALUE="nao">no<p>

Repare:

7.2.3.1.2 - TYPE="PASSWORD"
Este comando serve para fazer um campo de senhas! Quando a pessoa digitar, aparecer o sinal de "*"! O comando : <INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6>

7.2.3.1.3 - TYPE="CHECKBOX"
Esse comando vlido quando apenas uma resposta, esperada. Mas nem sempre esta a situao...O tipo CHECKBOX prov outros botes atravs dos quais mais de uma alternativa, pode ser escolhida. Definio dos checkboxs: <INPUT TYPE="CHECKBOX" NAME="netscape" VALUE="net"> Netscape<p> <INPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp"> Internet Explorer<p> <INPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos"> Mosaic<P> <INPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot Java<P> Veja o resultado:

36

7.2.3.1.4 - TYPE="SUBMIT"
Esse o boto que submete os dados do formulrio quando pressionados, ou seja, possibilitam, o envio, dos dados para o script que vai trat-los. Veja como se adiciona o boto: <INPUT TYPE="SUBMIT" VALUE="enviar"> Veja como ficar:

7.2.3.1.5 - TYPE="RESET"
No caso dos botes RESET, quando o boto clicado, ele automaticamente limpa todos os campos j preenchidos no formulrio, voltando situao inicial. <INPUT TYPE="RESET" VALUE="Limpar">

Veja como ficar:

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

37

<TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA>

7.2.5 SELECT
Permite definir uma lista de opes, com barra de rolagem ou fixa na tela do navegador. uma TAG que deve ser iniciada com <SELECT> e finalizada com </SELECT>. Sintaxe: <SELECT MULTIPLE NAME=nomeDaLista> <OPTION SELECTED VALUE=valor de retorno> Valor Visualizado <OPTION VALUE=Valor de retorno> Valor Visualizado 2 </SELECT> Onde: NAME: obrigatrio, serve para a identificao da lista; OPTION: item da lista; MULTIPLE: com este atributo a lista aparecer sempre aberta; SELECTED: indica o valor padro da lista; VALUE: valor a ser retornado ao servidor.

Exemplo:
<SELECT MULTIPLE NAME=Estados> <OPTION SELECTED VALUE=SP> So Paulo <OPTION VALUE=RJ> Rio de Janeiro <OPTION VALUE=MG> Minas Gerais <OPTION VALUE=ES> Esprito Santo </SELECT>

7.2.6 Exemplo completo de formulrio

38

Mostraremos a seguir um exemplo completo de um formulrio para Cadastro de Conselhos. Utilizaremos tambm a tag TABLE para alinhar os campos do formulrio na tela em questo. Crie um arquivo com nome de CadConselho.html e copie o exemplo abaixo:
<html> <body> <title>rgo Colegiado</title> <TABLE BORDER=1 BGCOLOR="blue" width="100%"> <TH ><font color="white">Cadastro de Conselho</font></TH> </TABLE> <FORM NAME="form_conselho" METHOD="POST"> <h4>Programa</h4> <table width="100%"> <tr> <td width="15%"><font size="3" face="arial"> Unidade</font></td> <td><input type="text" name="codUnidade" size="5"></td> <td><input type="text" name="unidade" size="80"></td> </tr> <tr> <td width="15%"><font size="3" face="arial"> Programa</font></td> <td><input type="text" name="codPrograma" size="5"></td> <td><input type="text" name="programa" size="80"></td> </tr> </table> <h4>Conselho de Programa de Ps-Graduao</h4> <table width="100%"> <tr> <td width="15%"><font size="3" face="arial">Cdigo</font></td> <td><input type="text" name="codigo" size="5"></td> </tr> <tr> <td width="15%"><font size="3" face="arial">Nome</font></td> <td><input type="text" name="nome" size="100"></td> </tr> <tr> <td width="15%"><font size="3" face="arial">Tipo</font></td> <td> <select name="tipo"> <option > <option value="1">COMISSOES TRANSITORIAS DE ESTUDOS <option value="2">CONSELHOS DE DEPARTAMENTO <option value="3">COMISSOES PERMANENTES DE UNIDADE ADMINISTRATIVA </select> </td> </tr> <tr> <td width="15%"><font size="3" face="arial">Fundamento</font></td> <td> <TEXTAREA NAME="fundamento" COLS=50 ROWS=3></TEXTAREA>

39

</td> </tr> <tr> <td align="center" colspan="2"> <INPUT TYPE="SUBMIT" VALUE="Salvar"> </td> </tr> </table> </FORM> </body> </html>

40

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

8.1 - Estrutura
Assim como o corpo do HTML, os FRAMES tem sua estrutura. Eles entram no lugar do corpo, substituindo o <BODY></BODY> por <FRAMESET></FRAMESET>. Exemplo: <HTML> <HEAD> <TITLE> Ttulo do Documento </TITLE> </HEAD> <FRAMESET> Sintaxe dos Frames </FRAMESET> </HTML>

8.2 - Sintaxe
Primeiramente devemos fazer um documento HTML para ele ser especificado pela sintaxe de FRAMES, no caso chamado de Frame1.htm. <HTML> <HEAD> <TITLE> Frame 1 </TITLE> </HEAD> <BODY>

41

<FONT SIZE=+1> <B> Frame n1 </B> </FONT> </BODY> </HTML>

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

8.3.1 - ROWS
Especifica o nmero de FRAMES e a altura de cada um. Exemplo: <FRAMESET ROWS="20%,30%,50%"> <FRAME SRC="Frame1.html"> <FRAME SRC="Frame1.html"> <FRAME SRC="Frame1.html"> </FRAMESET> Neste exemplo de cima, ele chama trs FRAMES, o 1 com 20% da tela, o 2 com 30% da tela, o 3 com 50% da tela (ambos em altura).

42

8.3.2 COLS
Especifica o nmero de FRAMES e a largura de cada um. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="Frame1.html"> <FRAME SRC="Frame1.html"> <FRAME SRC="Frame1.html"> </FRAMESET> Neste exemplo de cima, ele chama trs FRAMES, o 1 com 20% da tela, o 2 com 30% da tela, o 3 com 50% da tela (ambos em largura).

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

43

8.4.1 SRC
Especifica o documento de formato HTML chamado para o FRAME. Indispensvel, por que sem ele s o documento aparecer vazio, s com as divises. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="Frame1.html"> <FRAME SRC="Frame1.html"> <FRAME SRC="Frame1.html"> </FRAMESET>

8.4.2 - NAME
Especifica o nome do documento de formato HTML chamado para o FRAME. extremamente necessrio para o uso do TARGET, que ser visto a seguir. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="Frame1.html" NAME="Principal"> <FRAME SRC="Frame1.html"> <FRAME SRC="Frame1.html"> </FRAMESET>

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

44

Exemplo: <FRAMESET COLS="20%,30%,50%" <FRAME SRC="Frame1.html" SCROLLING="no"> <FRAME SRC="Frame1.html" SCROLLING="yes"> <FRAME SRC="Frame1.html" SCROLLING="auto"> </FRAMESET>

8.4.4 NORESIZE
Impossibilita o usurio de mudar o tamanho da rea especificada do FRAME. Por default o usurio pode mudar esta rea. Exemplo: <FRAMESET COLS="20%,30%,50%"> <FRAME SRC="Frame1.html" NORESIZE> <FRAME SRC="Frame1.html" > <FRAME SRC="Frame1.html" > </FRAMESET>

45

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

<FRAMESET COLS="20%,30%,50%"> <FRAME SRC="Frame1.html" NAME="Principal"> <FRAME SRC="Frame1.html"> <FRAME SRC="Frame1.html"> </FRAMESET> O Link: <A HREF="http://www.unesp.br" TARGET="Principal"> Unesp </A> Se voc quiser criar um link que chama uma nova tela do browser basta colocar TARGET="um nome que no existe".

8.5 BORDER
Define qual a borda que o FRAME ter. Mais til na utilizao de BACKGROUNDS iguais. Exemplo: <FRAMESET COLS="20%,30%,50%" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="Frame1.html" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="Frame1.html" FRAMEBORDER="NO" BORDER=0> <FRAME SRC="Frame1.html" FRAMEBORDER="NO" BORDER=0>
</FRAMESET>

46

47

9. Tabelas de Cores
Esta tabela de cores pode ser usar quando quiser definir as cores de uma fonte de um texto ou ento quando quiser definir o fundo de uma pgina. Deve-se usar o nome que est em ingls. Branco Preto Azul Amarelo Verde Laranja Vermelho Rosa Cinza Ouro Verde azulado Azul marinho Prata White Black Blue Yellow Green Orange Red Pink Gray Gold Teal Navy Silver

Tambm poder ser usado o nome em hexadecimal para definir a cor: #FFFFFF (Branco) #00FF00 (Verde) #00FFFF (Cian) #C0C0C0 (Cinza) #000000 (Preto) #0000FF (Azul) #FFFF00 (Amarelo) #BC8F8F (Pink) #FF0000 ( Vermelho) #FF00FF (Magenta) #A8A8A8 (Cinza claro) #4F2F4F (Violeta)

48

10. CSS
10.1 O que CSS?
CSS a mesma coisa que Style Sheets e que Folhas de Estilo. Voc j deve ter visto esses nomes em vrios lugares. CSS mais uma forma de aperfeioar seus documentos, o CSS tem muitos tipos de definio aqui veremos muitas delas. No que eles podem nos ajudar? Economizar o seu tempo. Diminuir o tamanho do cdigo de sua pgina. Sua pgina ir carregar mais rapidamente. Mais facilidade de manter e fazer alteraes na pgina. Mais controle no layout da pgina.

10.2 Como criar estilos


Cada estilo que voc cria definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe: elemento {atributo1: valor; atributo2: valor ...} Explicao desta sintaxe: Elemento - descreve o elemento de design ao qual o estilo ser aplicado. A mesma tag HTML mas, sem os sinais de maior e menor. Essa parte da regra s vezes chamada de seletor. Atributo - o aspecto especfico do elemento que voc quer usar como estilo. Deve ser um nome de atributo CSS vlido, como o atributo font-size. Valor - a configurao aplicada ao atributo. Deve ser uma configurao vlida para o atributo em questo, como 20pt (20 pontos) para font-size. Atributo: valor - parte declarao da regra. Voc pode atribuir mltiplas declaraes se desejar separ-los com ponto-e-vrgula (;). No coloque um pontoe-vrgula depois da ltima declar ao.

49

Agora hora de exemplos. Eis uma regra CSS que especifica que todos os ttulos de nvel 1 (tags <H1>) sejam exibidos em uma fonte de 36 pontos: H1 {font-size: 36pt} Aqui est um exemplo de regra que diz que todos os ttulos de nvel 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul; H2 {font-size: 24pt; color: blue} Voc pode inserir quebras de linha e espaos em branco dentro da regra como quiser. Assim, possvel ver mais facilmente todas as declaraes e certificar-se de que colocou todos os sinais de ponto-e-vrgula e colchetes nos lugares corretos. Por exemplo, aqui est uma regra que diz que os pargrafos aparecero em fonte Times, 12 pontos, azul e recuados meia polegada a partir da margem esquerda da pgina: P {font-family: Times; font-size: 12pt; color: blue; margin-left: 0.5in}

Note como fcil aplicar todas as declaraes ao elemento pargrafo (P) e como cada declarao, exceto a ltima, seguida pelo caracter de ponto-evrgula 10.3 Tipos de Folhas de Estilo exigido. Voc pode definir regras de CSS em trs lugares. E, por definio, pode utilizar uma 1) em um documento dos trs mtodos nos seus web sites. A maneira combinao separado fora de todos os documentos HTML; 2) as regras como no cabealho de um documento HTML e, 3) dentro de uma tag de HTML. Cada um destes mtodos tem um nome e afeta as pginas HTM L emsi site de um modo diferente, como discutido aqui: cascata".Os trs interagem entre seu est relacionada parte "em lugares so: Externo - Externo significa que voc coloca as regras de CSS em um arquivo
separado, e ento sua pgina HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma pgina do seu web site.

50

Incorporado - Incorporado significa que voc especifica as regras de CSS no cabealho do documento. As regras incorporadas afetam somente a pgina atual. Inline - Inline signific a que voc especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual.

10.3.1 Estilos Externos


Para definir um conjunto de regras de estilo que voc pode facilmente aplicar em alguma pgina do seu site, preciso colocar as regras em um arquivo de texto. Voc pode criar este arquivo com um editor de textos simples, como o Notepad do Windows, e dar ao nome desse arquivo a extenso .css. Sempre que quiser utilizar esses estilos em uma nova pgina, basta colocar uma tag <LINK> no cabealho que referencie esse arquivo .css. Veja o exemplo: Arquivo OrgaoColegiado.css

H4 { font-family: 'Arial'; font-size: 14pt; color: blue }


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

<LINK REL="STYLESHEET" HREF=" OrgaoColegiado.css" TYPE="text/css">


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

10.3.2 Estilos Incorporados


Se quiser criar um conjunto de estilos que se aplicam a uma nica pgina, voc pode configurar os estilos exatamente como fizemos no exemplo dos estilos externos - mas em vez de colocar as tags <STYLE>...</STYLE>, e as regras em um arquivo separado, coloque estas tags na prpria pgina

51

HTML. A estrutura bsica de uma pgina da web que utiliza estilos incorporados semelhante ao seguinte cdigo: <HTML> <HEAD> <TITLE>Exemplo Estilos Incorporados</TITLE> <STYLE TYPE="text/css"><!-P{ background-color: #FFFFFF; font-family:'Comic Sans MS'; font-size: 14pt } --></STYLE> </HEAD> </BODY> </HTML>

10.3.3 Estilos Inline


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

Exemplo: <A STYLE="color: green; textdecoration: none" HREF="http://www.unesp.br"> Note que em vez das tags <STYLE>...</STYLE>, voc apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, voc as coloca entre aspas, separando-as com ponto-e-vrgula como de costume.

10.4 Tags Personalizadas


Com as classes de estilo, possvel definir diversas variaes de uma nica tag. Por exemplo, voc poderia fazer um estilo de pargrafo "texto alinhado direita", um estilo de pargrafo "texto centralizado" e assim por diante, criando mltiplos temas em torno da tag de pargrafo. (<P>)

52

Voc pode definir classes de estilo tanto em folhas de estilo externa como nas incorporadas. (No h sentido em definir uma classe em um estilo inline!) A sintaxe praticamente idntica sintaxe normal para os estilos externo e incorporado, com adio de um ponto e o nome da classe depois do elemento na qual ser utilizado o atributo. <STYLE TYPE="text/css"><!-elemento.nomedaClasse {atributo:valor; ... } --></STYLE>

Exemplo:

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


<STYLE TYPE="text/css"><!-A.meuslinks { color: blue; text-decoration: none } --></STYLE> Depois apenas adiciono o atributo CLASS="meuslinks" aos links em que eu desejar que fiquem azuis e no-sublinhados. Veja como deve ficar: <A CLASS="meuslinks" HREF="EstiloTexto.html"> Estilo de Texto </A>

53

10.4.1 Utilizando a TAG <DIV>


As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande bloco de texto - uma diviso - abrangendo diversos pargrafos e outros elementos. Isso as torna uma boa opo para definir estilos que afetam grandes sees de um texto em uma pgina. Veja: <STYLE TYPE="text/css"><!-DIV.sidebar { font=family: "Arial"; font-size: 12pt; text-align: right; background-color: #C0C0C0; margin-left: 1in; margin-right: 1in

} --></STYLE>

Ao colocar na tag <DIV> o atributo CLASS, voc estar fazendo com que todos os elementos que estejam englobados nes ta tag sigam estes padres. <BODY> Cursos: <OL> <LI>Selecione <DIV CLASS="sidebar">Matemtica</DIV> <br> <DIV CLASS="sidebar">Medicina</DIV> </OL></BODY>

10.4.2 Utilizando a TAG <SPAN>


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

54

--></STYLE>

text-decoration: underline}

Utilizada no cdigo HTML...

<BODY> Para sair de um programa: <OL> <LI>Selecione <SPAN CLASS="hot">A</SPAN>rquivo <SPAN CLASS="hot">S</SPAN>air </OL></BODY>

55

10.5 Atalhos e atributos de CSS 10.5.1 Atalhos de CSS


Alguns atributos de CSS lhe permitem fazer diversas configuraes em uma declarao. Por exemplo, suponha que voc queira definir diversos aspectos da fonte utilizada para tags H1, como segue: H1 { font-style: italic; font-weight: bold; font-size: 18pt; font-family: 'Times Roman'} Como alternativa a especificar todas essas formataes de fonte individualmente, voc pode utilizar o atributo font: para defini-las todas de uma s vez, assim: H1 { font: italic bold 18pt 'Times Roman'}

Note como diversos valores - itlico, negrito, 18pt e Times Roman - so separados apenas por um espao em br anco. Essas regras abreviadas 10.5.2 Atributos de CSS certamente poupam espao e tempo de digitao.
Atributo de CSS O que ele formata background Cor de fundo, imagem, transparncia. background-attachment Rolagem do fundo / Marca d'gua. background-image Imagem de fundo. background-color Cor de fundo ou transparncia. background-position Posicionamento da imagem de fundo. background-repeat Configurao lado-a-lado

56

border

da imagem de fundo. Largura, estilo e cor de todas as 4 bordas.

border-bottom Largura, estilo e cor da borda inferior. border-bottom-color Cor da citada borda. border-bottom-style Estilo da citada borda. border-bottom-width Largura da citada borda. border-color Cor das 4 bordas. border-left Largura, estilo e cor da borda esquerda. border-left-color Cor da borda citada. border-left-style Estilo da borda citada. border-left-width Largura da borda citada. border-right Largura, estilo e cor da borda direita. border-right-color Cor da borda citada. border-right-style Estilo da borda citada. border-right-width Largura da borda citada. border-style Estilo de todas as 4 boras. border-top Largura, estilo e cor da borda superior. border-top-color Cor da borda citada. border-top-style Estilo da borda citada. border-top-width Largura da borda citada. border-width Largura de todas as 4 bordas. Elementos flutuantes clear esquerda ou direita de um elemento. Parte visvel de um clip elemento. color Cor de primeiro plano. Tipo de ponteiro do cursor mouse. Se o elemento exibido e o espao reservado para display ele. Tipo de filtro aplicado ao filter elemento. float Se o elemento flutua.

57

font

Estilo, variante, peso, tamanho e altura da linha do tipo de fonte.

@font-face Incorporao da fonte ao arquivo HTML. font-family Tipo de fonte. font-size Tamanho da fonte. font-style Fonte itlico. Fonte-variant Fonte bold. font-weight Peso da fonte de claro a negrito. Altura exibida ao height elemento. @import Folha de estilo a importar. Posio do elemento em relao a margem left esquerda da pgina. letter-spacing Distncia entre as letras. line-height Distncia entre linhas de base. Tipo, imagem e posio do list-style estilo da lista. list-style-image Marcador de item de lista. list-style-position Posio do marcador de item da lista. list-style-type Marcador de item de lista alternativo. Tamanho de todas as 4 margin margens. margin-left Tamanho da margem esquerda. margin-right Tamanho da margem direita. margin-bottom Tamanho da margem inferior. margin-top Tamanho da margem superior. Exibio de imagens que so maiores do que suas overflow molduras. Espao em torno de um elemento em todos os padding lados.

58

padding-bottom

Espao a partir da margem inferior de um elemento.

padding-left Espao esquerda do elemento. padding-right Espao direita do elemento. Espao a partir da margem superior do padding-top elemento. page-break-after Inserir quebra de pgina depois de um elemento. page-break-before Inserir quebra de pgina antes de um elemento. Como o elemento position posicionado na pgina. text-align Alinhamento do texto. text-decoration Sublinhado, sobrelinhado ou riscado. text-indent Recuo da primeira linha do pargrafo. Transformao para todas maisculas, minsculas ou text-transform inicial maiscula. Posio do elemento em top relao a parte superior da pgina. vertical-align Alinhamento vertical do elemento. Se elemento visvel ou visibility invisvel. width Largura do elemento. Posio do elemento na z-index pilha.

59

Exerccios

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

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

60

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

a) O texto dever ser em cor azul com tamanho 3. b) A Linha horizontal deve ser cinza e tamanho 2. c) Para cada figura colocar um texto para aparecer com for posicionado o mouse sobre a imagem. O texto a seguir colocar para cada figura seguindo a ordem (Buscar, Mostrar todos, Registro Anterior, Prximo Registro, Salvar, Limpar, Excluir). d) Para os links fazer para o site da Unesp e da Receita Federal. 3) Em outra pgina criar uma lista no ordenada com o tipo Square com os seguintes itens: Cursos de Graduao: Agronomia Biologia

61

Cincia da Computao Direito Medicina Nutrio Odontologia Pedagogia Zootecnia Para cada linha fazer na fonte tamanho 2, alterar as cores das linhas em verde e marrom.

62

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

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

63

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

64

Executar os seguintes passos:


a) Criar 3 pginas com os seguintes nomes: menu.html, rodap.html e principal.html b) Na pgina onde ser montado os frame (Exercicio5.html) monte o frame a seguir: - menu: frame com tamanho de 90% que dever chamar a pgina menu.html - rodape: frame com tamanho de 10% que dever chamar a pgina rodape.html - principal: frame com tamanho de 80% que dever chamar a pgina principal.html c) No menu coloque 4 links para os exerccios que fizemos at agora. Olhe o exemplo acima. d) No rodap coloque um link que chame a tela principal. e) Todos os links devero abrir na tela principal f) Na tela principal coloque o texto Curso de HTML

65

7) Criar uma Folha de Estilo com nome de Exercicio.css e realizar as seguintes tarefas: a) Criar estilo para TAG de link par a que no tenha linha sublinhada e seja da cor azul b) Criar estilo para a TAG H3 com as seguintes propriedades: cor azul, fonte Arial, tamanho 12pt. c) Criar estilo para a TAG H1 com as seguintes propriedades: cor azul, fonte Arial, tamanho 16pt. d) Criar estilo com nome de nomeCampo com as seguintes propriedades: cor preta, fonte Arial, tamanho 12pt. e) Fazer a chamada desta folha de estilo nas pginas menu.html, rodap.html, principal.html, Exercicio1.html, Exercicio2.html, Exercicio3.html f) Na pgina principal.html colocar a TAG H1 para o Ttulo da pgina. g) Nas pginas Exercicio1.html, Exercicio2.html, Exercicio3.html colocar a TAG H3 para os Ttulos das pginas. 8) Com base no exerccio 5 (formulrio de rgos Colegiados), utilizar o arquivo CSS padro da Unesp (folha.css), realizando as seguintes tarefas:[

67 66 <td><img src="imagens/spacer.gif" a) Inclua dentro da tag de cabealhowidth="265" height="30"></td> <td><div align="center"><a href="../" target="_top" <link href="folha.css" Sistema</a></div></td> rel="stylesheet" type="text/css"> class="RodapeTexto">Sair do </tr> a) Dentro da tag BODY adicone: </table></td> </tr> </table> class="FundoPaginaInterna <table width="768" border="0" cellspacing="0" cellpadding="0"> <tr> b) Dentro da tag TD do Colegiado da Unesp adicione: <td><table width="567" border="0" align="center" cellpadding="0" cellspacing="0" id="desenv"> class="NomeArea" <tr> <td height="25"><div align="center"><span c) Dentro da tag TD do class="desenvTXT">UNESPManuteno do rgo Colegiado adicione: Universidade Estadual Paulista &quot;J&uacute;lio de Mesquita Filho&quot; </span></div></td> </tr> da tag TD dos ttulos Unidade, Tipo Colegiado, rgo d) Dentro <tr> Colegiado adicione: <td height="25"><div align="center">Reitoria</div></td> </tr> </table></td> e) Dentro da tag TD dos nomes dos campos de formulrio adicione: </tr> </table> <table width="768" border="0" cellpadding="0" cellspacing="0"> <tr class="desenvPor"> f)<td height="25" class="desenvPor"><div adicione dentro de suas tags: Para todos os campos de formulrio align="center">Tecnologia e Desenvolvimento : <a href="http://www.unesp.br/ai" target="_blank"><br> Assessoria de Inform&aacute;tica</a> - <b>GRUPO DE SISTEMAS</b> g) Para fazer o rodap da pgina adicionar o cdigo abaixo, antes de <br> <br> a Tag BODY: fechar <img src="http://shelob.unesp.br:2000/images/gscc.gif" /> <table width="768" border="0" cellpadding="0" cellspacing="0" <br> id="Rodape"> </div></td> <tr> </tr> height="60" align="left" class="RodapeFundo"><table <td </table> width="100%" height="60" border="0" cellpadding="0" cellspacing="0" id="MenuRodape"> <tr> <td width="300" class="RodapeDestaque"> Secretaria Geral <td><div align="center"><a href="../" target="_blank" class="RodapeTexto">Home</a></div></td> <td width="2" class="RodapeDivisor"><div align="center"></div></td> <td><div align="center"><a href="../" class="RodapeTexto">Contato</a></div></td> <td width="2" class="RodapeDivisor"><div align="center"></div></td>

class="TituloDestaque2 class="tabela-titulo class="tabela-linha" class="itens-form