COMO TUDO COMEOU INTERNET

a rede mundial de computadores, formada por cerca de 100 mil redes menores interligadas por linhas telefnicas. No pertence a nenhum governo ou empresa. A Internet tem revolucionado a comunicao mundial ao permitir, por exemplo, a conversa entre pessoas a milhares de quilmetros, pelo preo de uma ligao local. O nmero tem duplicado a cada ano : 1996 50 milhes de usurios. O grande nmero de usurios responsvel pelo maior problema da Internet : congestionamento e a lentido no acesso aos servios.

SURGIMENTO DA INTERNET
A Internet surgiu nos Estados Unidos na dcada de 60, poca da Guerra Fria, como uma rede de informaes militares que interliga centros de comandos e de pesquisa, para atender a necessidade militar de proteger os sistemas de defesa do pas no caso de um ataque nuclear. Tendo isso como premissa o Departamento de Defesa dos EUA (DARPA) criou a rede ARPANET que viria a ser a precursora da Internet. A ARPANET foi idealizada de maneira que garantisse : a interoperabilidade dos mais variados tipos de computadores em caso de uma interrupo entre estabelecimento de rotas alternativas dois computadores o

Quanto a interoperabilidade, na dcada de 70, foi adotado o protocolo TCP/IP pelo DARPA que at hoje usado como forma de integrao entre computadores dos mais diversos fabricantes. J quanto a questo de uma rede flexvel que pudesse escolher rotas alternativas surgiu a tecnologia de redes de pacotes.

DNS
O DNS foi criado para permitir a traduzir o nmero do IP (representado por quatro grupos de nmeros decimais separados por pontos ex.: 10.250.33.11) por um nome de mais fcil memorizao (ex.: telesp.gov.br). Junto com o DNS, foram criados critrios para distino das atividades das organizaes, sendo : -> -> -> -> -> -> com empresas com fins comerciais gov empresa do governo net provedor de meio fsico (backbone) edu instituio educacional (escolas, universidades, etc) mil orgo militares org organizaes sem fins lucrativos

ENDEREO INTERNET
O e-mail (eletronic mail), formado por usurio@domnio.com.br, onde : -> -> -> -> usurio o nome de login do usurio ao servidor domnio o nome do provedor de acesso do usurio com entidade comercial br pas onde se localiza o provedor

O endereo de uma pgina na Internet formado por : http://www.ete.edu.br onde : -> http o protocolo que permite a transferncia de informaes na rede e que os autores de pginas de hipertextos incluam comandos que possbilitem saltos para recursos e outros documentos disponveis em sistemas remoto, de forma transparente para o usurio. -> www teia de alcance mundial, baseada em hipertextos, integra diversos servios Internet que oferecem acesso, atravs de hiperlinks, a recursos multimdia da Internet; responsvel pela popularizao da rede, que agora pode ser acessada atravs de interfaces grficas. -> ete nome de domnio -> edu entidade educacional -> br pas onde se localiza o provedor

TCP/IP
(TRANSFER CONTROL PROTOCOL/INTERNET PROTOCOL) Conjunto de protocolos que torna possvel a comunicao de computadores de redes diferentes. a linguagem universal da Internet.

TCP
Ele se encarrega de empacotar e enviar os pacotes.

IP
responsvel pelo roteamento de pacotes entre dois sistemas que utilizam a famlia de protocolos TCP/IP. Evita que dois pacotes se choquem durante o trfego.

FTP
(FILE TRANSFER PROTOCOL) Protocolo padro de transferncia de arquivos entre computadores, usado normalmente para transmitir ou receber arquivos entre internet.

HTTP
(Hypertext Transfer Protocol) Protocolo de Transferncia de Hipertexto, o protocolo bsico para a comunicao entre computadores que servem pginas WWW. Sem esse protocolo no poderamos fazer uso dos recursos grficos na Internet, ele quem permite a transferncia de fotos, grficos e textos formatados, de uma forma simples e rpida.

WWW (World Wide Web)

Rede de Larga Escala, que foi desenvolvido pelo Conselho Europeu para a Pesquisa Nuclear para ser utilizado em mquinas SUN (Unix). ele que permite a visualizao das pginas como elas so.

HTML
Hyper Text Markup Language, utilizada para elaborao de Home Pages. A linguagem escrita em um editor de textos comum, por exemplo, Bloco de Notas, e deve ser gravado com a extenso .HTM ou .HTML. Esse documento ser lido pelo Browser que ir format-lo de acordo com os comando utilizados e nos permitir visualizar um texto com aparncia agradvel, ouvir sons, assistir a vdeos, entre outros servios.

QUEM PODE FAZER UMA HOME PAGE ?

Todo mundo, pois no necessrio saber Lgica de Programao, ou ter qualquer conhecimento profundo de informtica. necessrio que se conhea bem todos os comandos e recursos que a linguagem oferece para elaborar uma HP bonita, interessante, criativa e til.

INTRODUO AO H.T.M.L.
HTML - HyperText Markup Language - Linguagem por Marcao de Hipertexto, a linguagem utilizada para desenvolver pginas para Internet. bem verdade que existe muitos Softwares que facilitam na criao de sites como Dreamweaver, FrontPage, e outros, mas nada melhor do que aprender como funciona a linguagem para depois poder usufruir de recursos como estes. Para fazer um site no necessrio saber Linguagem de Programao, nem ter Lgica de Programao, necessrio ter bom senso na hora de usar cores, figuras e objetos que deixam a pgina lenta demais.

Com HTML voc pode criar tabelas, listas, inserir sons, imagens e outros recursos como Estilo (CSS) e Javascript (programas). Para fazer sua pgina, no necessrio estar conectado Internet, basta ter um Browser e ter um Editor de Textos em sua mquina.

O QUE UM BROWSER
Browser do Ingls significa Folheador, dai porque dizemos que fazemos "pgina" para Internet. Ele que permite que voc veja sua pgina HTML. O Browser interpreta as TAGS e formata seu texto de acordo com a TAG e exibe na Janela do Browser.

EDITOR DE TEXTOS
Qualquer editor de textos que salve o seu arquivo ASC puro, ou seja, sem formatao alguma. Pode ser o Bloco de Notas ou o Edit. Atente para o seguinte, a extenso do seu arquivo deve ser sempre .HTML ou .HTM (no muito mais utilizado), pois este o tipo de arquivo que o Browser entende. Assim como o Word tem como arquivo padro a extenso .DOC, o Excel .XLS, o Paint .BMP, o Corel .CDR, Flash .FLA, e assim por diante.

ESTRUTURA DA LINGUAGEM
A Estrutura da Linguagem HTML simples e fcil. Ela trabalha com TAG <>, e dentro destas tags inserimos os comandos para fazer a formatao do texto que queremos. Tudo o que est fora da TAG um texto, portanto exibido no corpo da pgina. Veja s : O Seu Texto Aqui . Para digitar os comandos tanto faz ser maiscula ou minscula, pois HTML no Case Sensitive. Vejamos a estrutura da Linguagem :
<html> <head> <title> TITULO DA PGINA - BARRA DE TTULO </title> </head> <body> Aqui vai o seu texto, sua tabela, sons, figuras, listas, tudo o que voc quiser </body> </html>

Se voc quiser, toda sua pgina pode ser escrita em uma linha, mas se voc organizar o seu cdigo, fica mais fcil de se localizar na hora de fazer alguma alterao. Outra curiosidade que HTML s entende um espao entre as palavras/letras, mais de um espao ele ignora. Assim como dar enquanto voc digita seu texto, ele tambm ignora, necessrio inserir comandos especificos para pular linha/pargrafo e dar mais de um espao.

BODY
A TAG BODY responsvel por configurar o corpo da pgina, ou seja, tudo o que voc tem no site, fica dentro do corpo da pgina. Existe apenas um <BODY> na pgina. Se voc tiver alguma coisa a mais para colocar referente ao corpo da pgina, altere a TAG <BODY> e no insira outra TAG. A sintaxe completa da TAG BODY a seguinte :
<body bgcolor="cor" background="arquivo.ext" link="cor" vlink="cor" alink="cor" topmargin="n" bottommargin="n" leftmargin="n" rightmargin="n" scroll="yes/no" text="cor">

onde : BODY = CORPO o corpo da pgina o incio de tudo, S TEM UM NA SUA PGINA. Se escrever mais de um BODY na pgina, d BODE na nota ! entendeu ? Utilizando apenas esta tag, sem parmetro algum, a cor de fundo padro branco e a cor da letra preto. BGCOLOR = BACKGROUND COLOR Cor de fundo da pgina, aqui voc pode escrever a cor em Ingls ou usar o cdigo RGB (Red Green Blue). Veja a tabela de cores aqui BACKGROUND = FUNDO uma figura de fundo que pode ser colocada na sua pgina. Se a figura no ocupar o espao todo da tela, ela ir se repetir at preench-la. Em HTML no possvel posicionar a figura centralizada, apenas utilizando Estilo. O nome do arquivo deve ser escrito corretamente e no deve estar com letra maiscula, muito menos o arquivo da figura. LINK = COR DO LINK A cor padro do link azul e sublinhado. Para alterar esta cor, use este parmetro, porm, o sublinhado permanecer. VLINK = VISITED LINK a cor do link que j foi visitado, que roxo e sublinhado. ALINK = ACTIVE LINK a cor do link ativo, ou seja, quando clicamos no link, este pode ficar de outra cor. O padro do Internet Explorer no ter uma cor definida para ele.

TOPMARGIM = MARGEM DO TOPO Aqui definimos um margem a partir do topo da pgina. Este nmero definido em Pixels. BOTTOMMARGIM = MARGEM DO RODAP Aqui definimos um margem a partir do fim da pgina. Este nmero definido em Pixels. LEFTMARGIM = MARGEM DA ESQUERDA Aqui definimos um margem a partir do lado esquerdo da pgina. Este nmero definido em Pixels. RIGHTMARGIM = MARGEM DA DIREITA Aqui definimos um margem a partir do lado direito da pgina. Este nmero definido em Pixels. SCROLL = BARRA DE ROLAGEM Se colocarmos o valor no , a barra de rolagem ser omitida, pois mesmo que no ela no fique ativada por no existir texto suficiente para sua ativao, o seu espao fica reservado, ela fica inativa, portanto ocupa luga na pgina. TEXT = TEXTO Definimos um cor padro para o texto, que inicialmente preto.

TTULOS
Os ttulos so inseridos atravs de uma TAG especial <Hn> : onde :
H N ALIGN Significa Head (Cabealho) um nmero que vai de 1 a 6, o nmero 1 o cabealho maior e o 6 o cabealho menor. Define um tipo de alinhamento. Os valores podem ser left ou right.

Cada vez que voc abre um H ele pula automaticamente de linha. Veja os exemplos :
<h1 align=right>

um Ttulo de Tamanho H1, alinhado direita.

<h2>

um Ttulo de Tamanho H2
<h3>

um Ttulo de Tamanho H3
<h4>

um Ttulo de Tamanho H4
<h5> um Ttulo de Tamanho H5 <h6>
um Ttulo de Tamanho H6

FORMATOS LGICOS
As tags deste tipo indicam como o texto destacado deve ser utilizado e no como ser apresentado. Este estilo no indica como o texto ser formatado e sim como ser utilizado no documento. No possvel garantir que um texto destacado que utilize tags deste tipo sempre ser apresentado em negrito ou itlico, por exemplo. Depender do browser.

Algumas tags de estilo lgico utilizadas em HTML padro: <CITE> ... </CITE> Para Ttulo de filmes, livros e citaes curtas. O Resultado o seguinte -> Professora Valria <CODE> ... </CODE> Para trechos de cdigo fonte de programas. O Resultado o seguinte -> Professora Valria <DFN> ... </DFN> Usado para definies, o normal o texto aparecer em itlico. O Resultado o seguinte -> Professora Valria <EM> ... </EM> usado para dar nfase, tambm aparecer geralmente emitlico. O Resultado o seguinte -> Professora Valria <KBD> ... </KBD> usado para indicar entrada via teclado. O Resultado o seguinte -> Professora Valria <SAMP> ... </SAMP> usado para indicar uma mensagem de erro ou resultado. O Resultado o seguinte -> Professora Valria <STRONG> ... </STRONG> D nfase, normalmente coloca o texto em negrito. O Resultado o seguinte -> Professora Valria <VAR> ... </VAR> Usado para indicar variveis ou valores que devem ser digitados pelo usurio, tambm mostrado em itlico (geramlmente). O Resultado o seguinte -> Professora Valria

FORMATOS FSICOS
<B> ... </B> Formato em Negrito - B = Bold O Resultado o seguinte -> Professora Valria <I> ... </I> Formato em Itlico - I = Italic O Resultado o seguinte -> Professora Valria <TT> ... </TT> Formato em espaamento fxo. - TT = TypewriTer O Resultado o seguinte -> Professora Valria <U> ... </U> Formato em Sublinhado - U = Underline (linha em baixo) O Resultado o seguinte -> Professora Valria <STRIKE> ... </STRIKE> Formato em Risco. utilizado para indicar alterao em textos, ou em cartas para evitar leitura atravs do envelope. O Resultado o seguinte -> Professora Valria <BIG> ... </BIG> Aumenta a letra e negrita - BIG = Grande O Resultado o seguinte -> Professora Valria <SMALL> ... </SMALL> Diminui a Letra - SMALL = Pequeno O Resultado o seguinte -> Professora Valria <SUB> ... </SUB> Formato em Subscrito O Resultado o seguinte -> H2O <SUP> ... </SUP> Formato em Sobrescrito O Resultado o seguinte -> X2

MARQUEE
O comando marquee utilizado para exibir um texto rolante na tela. Sua sintaxe :
<marquee width="n" bgcolor="cor" direction="direo" scrolldelay="n" scrollamount="n" behavior="tipo">

onde :
WIDTH define a largura do marquee, pode ser valor absoluto (em pixels) ou um valor relativo (%). BGCOLOR define a cor de fundo do painel DIRECTION define a direo que o texto ir correr : top - down - left - right (padro) SCROLLDELAY define em pixel o tempo de rolagem do marquee em milessegundos. SCROLLAMOUNT define em pixels a quantidade de pixels que o marquee vai andar BEHAVIOR define o comportamento do marquee : alternate slide scroll(padro) LOOP define a quantidade de vezes que o texto ir passar

LINHA HORIZONTAL - HR
HR - Horizontal Row (Linha Horizontal) Insere uma linha para separar textos, figuras, etc. a sintaxe padro :
<hr color="cor" width="n" size="n" noshadow>

onde :
COLOR Define a cor da linha, caso seja omitido este parmetro, a cor da linha fica transparente. NOSHADE Retira a sombra padro da linha, tornando-a slida. WIDTH Define a largura da linha, pode especificar nmero relativos (%) ou em pixels. SIZE Define a espessura da linha. ALIGN Alinha a linha para esquerda ou direita

LISTAS
As listas nos ajudam a organizar a pgina. Como no Word, voc pode usar as listas numeradas e no numeradas e ainda pode usar as listas de definio, que fazem a indentao do texto automaticamente. LISTA NO NUMERADA
A lista no numerada tem a seguinte sintaxe :
<ul type="tipo"> <li> Primeiro item <li> Segundo item <li> Terceiro item </ul>

onde : UL = UN-NUMERED LIST Define que est usando lista no numerada. TYPE = TIPO Define o tipo a ser usado : circle, disc (padro) ou square LI = LIST ITEM Item da Lista, para cada item a ser inserido use o LI, como se fosse o ENTER no Word.

Veja Resultado Abaixo

o o o o

Primeiro Item da Lista Segundo Item da Lista Terceiro Item da Lista Quarto Item da Lista

LISTA NUMERADA A lista numerada tem a seguinte sintaxe :

<ol type="tipo" start="n"> <li> Primeiro item <li> Segundo item <li> Terceiro item </ol>

onde : OL = ORDERED LIST Define que est usando lista numerada. TYPE = TIPO Define o tipo a ser usado : Numeros Cardinais (1,2,3,4,5..) Romanos (I, II, III, IV, V ...) ou (i,ii,iii,iv,v...) - Letras (A, B, C, D, E ...) ou (a, b, c, d, e ...) LI = LIST ITEM Item da Lista, para cada item a ser numerado use o LI, como se fosse o ENTER no Word. START = INICIO Deve ser ignorado se quiser iniciar a lista do 1, I, i, A ou a. Caso queira que ele inicie no nmero 5 utilize start="5", se for letra utilize tambm o nmero 5 pois ele ir iniciar na letra V ou E.

Abaixo um exemplo iniciando em Algarismo Romando no item 5.

<ol type="I" start="5"> <li> Primeiro Item da Lista <li> Segundo Item da Lista <li>Terceiro Item da Lista <li> Quarto Item da Lista </ol>

que resulta :
V. VI. VII. VIII. Primeiro Item da Lista Segundo Item da Lista Terceiro Item da Lista Quarto Item da Lista

Abaixo um exemplo do Alfabeto iniciando o no item 1=A.

<ol type="A"> <li> Primeiro Item da Lista <li> Segundo Item da Lista <li>Terceiro Item da Lista <li> Quarto Item da Lista </ol>

que resulta :
A. B. C. D. Primeiro Item da Lista Segundo Item da Lista Terceiro Item da Lista Quarto Item da Lista

Abaixo um exemplo simples.

<ol> <li> Primeiro Item da Lista <li> Segundo Item da Lista <li>Terceiro Item da Lista <li> Quarto Item da Lista </ol>

que resulta :
1. 2. 3. 4. Primeiro Item da Lista Segundo Item da Lista Terceiro Item da Lista Quarto Item da Lista

LISTA DE DEFINIO
As listas de definio so utilizadas quando queremos explicar algo. A lista de definio tem a seguinte sintaxe :
<dl> <dt> Defina o Termo <dd> Primeiro termo a ser definido dentro da lista <dt> Defina o segundo Termo <dd> Defina aqui o segundo termo na lista qu estamos testando </dl>

onde :
DL - DEFINE LIST Inicio da lista de definio DT - DEFINE TERM Termo a ser definido, aqui vai o texto ou palavra a ser definida DD - DEFINE DATA Dados da Definio - aqui voc explica o que significa o termo que voc quer definir. Se voc prestou ateno at aqui nas aulas, tudo que est de cor laranja a TAG DT, e tudo o que est com a margem mais direita e na cor ciano a TAG DD.

Veja o exemplo abaixo :

<dl> <dt> Defina o Termo <dd> Primeiro termo a ser definido dentro da lista <dt> Defina o segundo Termo <dd> Defina aqui o segundo termo na lista qu estamos testando </dl>

Que produz :
DEFINA O TERMO Primeiro termo a ser definido dentro da lista DEFINA O SEGUNDO TERMO Defina aqui o segundo termo na lista qu estamos testando

LINKS
Links so ligaes com outras pginas na Internet, com outros documentos ou com parte do mesmo documento. A sintaxe correta do comando para fazer link com uma pgina na Internet :
<a href="URL" target="destino" title="texto"> TEXTO </a>

Onde :
A HREF Significa ANCHOR - Anchora.

Horizontal Reference - Referncia Horizontal, aqui que colocamos o nome do arquivo, local ou endereo da Internet que queremos abrir. TARGET Destino - onde dever ser aberta a URL.Os tipos so : 1. _blank - abre uma nova janela do Browser para exibir o documento

2. _parent - abre o documento no frame principal ou na janela que contm o link. 3. _self - este o padro, abre o documento na janela do link, por ser o padro no precisa ser especificado. 4. _top - abre o documento na janela inteira do Browser, removendo todos os frames, se no existir frame ele age como o _self. TITLE Ttulo, abre um texto, como a dica, ao apontar o mouse. LINK PARA OUTRA PGINA DA INTERNET

Links so ligaes com outras pginas na Internet, com outros documentos ou com parte do mesmo documento. A sintaxe correta do comando para fazer link com uma pgina na Internet :
<a href="http://www.professoravaleria.rg3.net" target="destino" text="texto"> TEXTO PARA O LINK </a>

Se voc quiser, pode fazer um link para um outro arquivo, como estes que estou usando para abrir todos os arquivos referentes s aulas.
LINK PARA OUTRO ARQUIVO HTML

A sintaxe correta do comando para fazer link com outro arquivo :

<a href="arquivo.ext" target="destino" text="texto"> TEXTO PARA O LINK </a>

LINK PARA MESMA PGINA

Os links para a mesma pgina, devem ser utilizados, caso os assuntos referentes eles no sejam muito extensos. Pois uma pgina no deve conter muitas informaes, pois se torna cansativa. Usamos os links para separar os assuntos e assim organizar melhor o site. Para fazer um link na mesma pgina, necessrio usar o comando do link e um outro comando que ser o que indica o local do link.

Veja o exemplo abaixo :

<html> <head> <title> LINKS PARA MESMA PGINA </title> </head> <body> <center> Vamos aprender link para mesma pgina </center> <a href="#link1">Clique para ir para o local desejado</a> Perceba que a URL acima tem um nome precedido do numeral (#), que indica que o link na mesma pgina. Se voc tiver bastante texto, o link ficar um pouco afastado do link que o chamar, mas no tem importncia, porque interessante deixar uma rea sem texto, para que o link fique claro.

<a name="link1"></a>Este o Local do LINK1 Aqui deve ser inserido tudo referente ao Link1, ou seja, ao assunto que voc est se referindo. Aqui termina explicao de link local. </body> </html>

Vamos entender :
#LINK1 um nome qualquer, de prefncia que seja condinzente com o assunto que voc estar escrevendo. A NAME=LINK1 o lugar onde voc inicia a digitao do assunto. ATENO : Os nomes devem ser escritos igualmente no HREF e no NAME, se escrever maisculo na HREF e minsculo no A NAME, ele no ir funcionar.

IMAGENS
Podemos inserir imagens no corpo de nossa pgina atravs da TAG IMG, esta TAG no tem fechamento. A sintaxe do comando
<img src="arquivo.ext" width="numero" height="numero" alt="texto" vspace="numero" hspace="numero" border="numero" align="alinhamento" lowsrc="arquivo.ext">

onde : IMG = IMAGE Imagem SRC = SOURCE Origem o nome e se necessrio o caminho do arquivo da imagem. WIDTH -> LARGURA Define uma largura para a imagem, mas aqui o tamanho do arquivo no reduzido, posso dizer que seria somente a visualizao em menor ou maior escola como um zoom. HEIGHT -> ALTURA Define uma altura para a imagem, mas aqui o tamanho do arquivo no reduzido, posso dizer que seria somente a visualizao em menor ou maior escola como um zoom. CUIDADO : Alterar apenas altura ou largura da figura pode deix-la desproporcional. ALT = TEXTO ALTERNATIVO exibe o texto no espao antes de carregar a imagem e ao apontar o mouse ele exibe o texto, como dica. VSPACE = VERTICAL SPACE Margem nas partes superior e inferior da imagem HSPACE = HORIZONTAL SPACE Margem nas partes esquerda e direita da imagem BORDER = BORDAS exibe ou no uma borda ao redor da imagem. ALIGN = ALINHAMENTO Define o alinhamento da imagem e de seu texto adjacente. Podem ser top - bottom - left - right - middle

LOWSRC = LOW SOURCE Origem de defino mais baixa de uma figura, pode ser at uma em preto e branco. usado se a figura principal de alta definio, e enquanto a pgina carrega a figura principal, a especificada neste parmetro aparece para dar uma idia ao usurio o que ele ir ver.

TABELAS
Para fazer uma tabela as principais TAGS so TABLE, TR, TH e TD.
TABLE Tabela a principal para inserir a tabela, seus parmetros so : bgcolor="cor" = define uma cor de fundo para a tabela background="arquivo.ext" - define uma figura de fundo para tabela bordercolor="cor" - define uma cor para a borda align="alinhament0" - define alinhamento para tabela (center, right ou left que padro). bordercolordark="cor" - define uma cor para os lados mais escuros da tabela bordercolorlight="cor" - define uma cor para os lados para claros da tabela cellpadding="n" - define o espaamento do texto e a borda da tabela cellspacing="n" - define o espaamento entre as clulas. width="n%" define o tamanho da tabela em pixels ou porcentagem

TR

Table Row - Linha da Tabela, para cada linha nova necessrio abrir uma linha e colocar dentro dela todas as clulas.

BGCOLOR="cor" - define uma cor de fundo para a

linha

TH Table Head - Cabealho da Tabela - usado para colocar ttulo nas colunas, o texto j vem em negrito e centralizado. BGCOLOR="cor" - define uma cor de fundo para a clula de cabealho

TD

Table Data - Dados da Tabela - a tag que usamos para inserir os dados da tabela. BGCOLOR="cor" - define uma cor de fundo para a clula. BACKGROUND="arquivo.ext" define uma figura de fundo para clula. COLSPAN="n" define a quantidade de colunas que devem ser mescladas. ROWSPAN="n" define a quantidade de linhas que devem ser mescladas.

Veja como ficaria uma tabela simples, com borda espessura 2, alinhamento centralizado :
<table border="2" align="center" width="60%"> <tr> <th colspan="2"> TABELA DE MATRIAS </th> </tr> <tr> <th> PROFESSOR(A) </th> <th> MATRIA </th> </tr> <tr> <td> Valria </td> <td> O.S.A. </td> </tr> <tr> <td> Nelson </td> <td> P.R.C. </td> </tr> <tr> <td> Luiz </td> <td> T.B.D.</td> </tr> </table>

TABELA DE MATRIAS PROFESSOR(A) Valria Nelson Luiz MATRIA O.S.A. P.R.C. T.B.D.

PARMETRO FRAME NAS TABELAS PARMETRO RESULTADO

void above hsides vsides lhs rhs box border

retira todas as bordas da tabela exibe apenas a borda do lado superior remove as bordas laterais exibe apenas as bordas laterais exibe apenas a borda esquerda exibe apenas a borda direita exibe borda em todos os cantos exibe as quatro bordas

FRAMES
Frames so quadros. Significa que podemos dividir a tela do Browser em quadros e exibir vrias pginas ao mesmo tempo. Para criar frames, temos um arquivo principal, onde este divide em quadros e coloca os arquivos em cada quadro. Perceba que este arquivo, que pode ser o INDEX.HTML, no tem a tag BODY, porque no existe um corpo de pgina, mas sim diviso.
FRAMESET Inicio da configurao do Frame. COLS="N%,N%" OU ROWS="N%,N%" COLS = Colunas, define quantas colunas ser dividida sua tela. Pense sempre em % (porcentagem), ou seja, sua tela tem 100%, 20% para uma coluna e 80% para outra. Se preferir trabalhar com linhas utilize ROWS. FRAME SRC="ARQUIVO.EXT" Aqui, definimos qual o arquivo que ir aparecer no frame dividido. Saiba que se voc dividir sua tela em Colunas, a primeira coluna receber o arquivo da primeira linha do FRAME SRC, e assim sucessivamente. NAME="NOME" definido um nome, que ser utilizado quando tivermos link na pgina, esse nome, ser utilizado no parmetro TARGET. NORESIZE para no permitir que atravs das bordas do frame, ele seja REDIMENSIONADO. BORDER="0" Se voc no desejar que o frame tenha bordas, utilize o parmetro BORDER com o valor zero, caso contrrio, omita-o. SCROLLING="NO" Se ter barra de rolagem, omita o parmetro SCROLLING, caso contrrio, utilize-o com o valor NO.

<html> <head> <title> TITULO DA PGINA </title> </head> <frameset cols="20%,80%" border="0"> <frame src="pagina1.html" noresize> <frame src="pagina2.html" scrolling="no"> </frameset> </html>

Resulta em :

<html> <head> <title> TITULO DA PGINA </title> </head> <frameset rows="20%,80%"> <frame src="pagina1.html"> <frameset cols="20%,80%"> <frame src="pagina2.html"> <frame src="pagina3.html"> </frameset> </html>

Resulta em :

Voc pode criar seus frames como desejar. Mas podemos trabalhar tambm com IFRAMES. Que so os frames inline, ou seja, ele no precisar ser um arquivo separado, mas uma tag que fica dentro da sua pgina HTML. Veja como utilizar o IFRAME :
<html> <head> <title> TITULO DA PGINA </title> </head> <body> Coloque aqui sua pgina, suas imagens, e onde voc desejar colocar um IFRAME insira-o. <img src="ma2anosp.jpeg"> <iframe src="pagina1.html" width="n%" height="n%" name="nome" frameborder="n"> Continue com a pgina se for necessrio. </body> </html>

Veja como ficaria :

Formulrios
Os formulrios permite que possamos interagir com o visitante, solicitando nome, e-mail e outras informaes que voc acredite ser necessrio para o seu site. Os formulrios so dividos em 2 partes. Uma parte onde descrevemos o cdigo fonte em HTML (os campos, identificadores, botes, textos, etc) e um script ou aplicativo que possa processar as informaes enviadas, como por exemplo um script em CGI. Sem um script voc apenas consegue enviar as informaes digitada para seu e-mail e no guard-las em um banco de dados, ou outra ao mais complexa. A tag principal para iniciar um Formulrio a TAG FORM. Esta tag tem vrios parmetros, vamos ver uma sintaxe completa desta TAG. <form action="mailto:seumail@provedor?subject=assunto" method="post" enctype="text/plain" name="nome_do_formulario"> </form> Vamos entender esta TAG :
FORM Indica que estamos iniciando um Formulrio ACTION Indica a ao que formulrio ter, neste caso, o formulrio ter os dados enviados para seu e-mail. Pode ser indicado tambm um servidor e o programa CGI que ir processar o formulrio. SUBJECT o assunto do e-mail. METHOD o metodo da troca de dados; qual mtodo o servidor usar para recerber o formulrio. Os mtodos podem ser POST ou GET, neste caso POST, porque estamos enviando informao para o provedor. J o mtodo GET, faz com que o contedo do formulrio seja anexado ao endereo da URL. ENCTYPE como o formulrio ser enviado, aqui os dados sero formatados como texto puro.

CAMPOS DO FORMULRIO TIPO TEXTO <INPUT> Define um campo de entrada em que o usurio entra com as informaes do formulrio. Cada campo de um formulrio atribui o seu contedo para uma varivel, que possui nome e tipo especficos. Veja como seria :
<FORM> DIGITE SEU NOME <input type="text" name="var_nome" size="35" maxlength="30" value="qq coisa"></FORM>

TYPE="TEXT" type = tipo - text = texto, ou seja o tipo de informao que aquele local receber do tipo texto. NAME="VAR_NOME" name = nome - var_nome a varivel que ir guardar o que for digitado naquele campo. SIZE="35" tamanho do objeto ser de 35 pixels MAXLENGTH="30" comprimento mximo de caracteres ser de 30. VALUE = "QUALQUER COISA" value = valor, ou seja, o campo j vem preenchido com o que vier neste parmetro, neste caso vir escrito : qq coisa. Para alterar, basta selecionar o texto e escrever outro. S utilize o value caso
queira que um campo j venha preenchido com um valor, por exemplo : estado = SP, ai sim vale a pena.

Veja como ficaria :

DIGITE SEU NOME

TIPO SENHA E se voc quiser que a pessoa entre com uma senha ? Pode usar o type="password" Este comando idntico ao comando INPUT TEXT. Sua nica diferena que, no lugar dos caracteres digitados, aparece um asterisco.

Vamos ver como seria :

<FORM> DIGITE A SENHA <input type="password" name="var_senha" size="10" maxlength="6"> </FORM>

TYPE="PASSWORD" type = tipo - password = senha, ou seja o tipo de informao que aquele local receber do tipo senha, exibir asterisco ao invs do caracter digitado. NAME="VAR_SENHA" name = nome - var_senha a varivel que ir guardar o que for digitado naquele campo. SIZE="35" tamanho do objeto ser de 10 pixels. MAXLENGTH="6" comprimento mximo de caracteres ser de 6.

Veja como ficaria :

DIGITE A SENHA

BOTO DE RADIO E para fazer uma seleo exclusiva de uma lista de opes ? Precisamos inserir um "boto de rdio", que so associados a uma nica varivel. O contedo de um dos campos atribudo varivel. Apenas um campo pode ser marcado, vamos ver um exemplo :
<FORM> Digite seu nome: <input type = "text" name = "var_nome"> Estado civil: <input type= "radio" name="civil" value = "solteiro" checked> Solteiro <input type= "radio" name="civil" value = "casado"> Casado <input type= "radio" name="civil" value = "divorciado"> Divorciado <input type= "radio" name="civil" value = "vivo"> Vivo<br> </FORM>

Observe que todas as variveis receberam o mesmo nome: CIVIL. Veja tambm que o nico comando que tem o parmetro CHECKED o que contm a opo de solteiro,ou seja, esta opo j vem marcada como padro.

Estas linhas reproduziro :

Digite seu nome: Estado civil:

Solteiro

Casado

Divorciado

Vivo

OS NOMES DAS OPES OBRIGATRIAMENTE DEVEM SER IGUAIS, SE FOREM DIFERENTES, ESTE POSSIBILITAR MARCAR VRIAS OPES !!! CHECKBOX Para poder selecionar vrias opes, usamos o CHECKBOX. Ele se parece como Radio Button, mas tem uma diferena significativa. Nele mais de um campo associado a uma varivel pode ser selecionado. Veja o exemplo:
<FORM> Digite seu nome: <input type = "text" name="var_nome"> Estado civil: <input type="radio" name="civil" value = "solteiro" cheked> Solteiro <input type="radio" name="civil" value = "casado"> Casado< <input type="radio" name="civil" value = "divorciado"> Divorciado <input type="radio" name="civil" value = "vivo"> Vivo Documentos : <INPUT TYPE="checkbox" name="teste" value="1"> Carteira de Trabalho <INPUT TYPE="checkbox" name="teste" value="2"> CIC <INPUT TYPE="checkbox" name="teste" value= 3"> Carteira de Identidade </FORM>

Veja o que isso reproduz :

Digite seu nome:

Estado civil: Solteiro Documentos : Carteira de Trabalho CIC Carteira de Identidade Casado Divorciado Vivo

LISTA DE OPES o comando <SELECT> ... </SELECT> define e exibe uma lista de itens que podem ser selecionados pelo usurio. Cargo pretendido:
<SELECT NAME="CARGO"> <OPTION>ANALISTA SNIOR <OPTION> PROGRAMADOR CLIPPER <OPTION>PROGRAMADOR HTML <OPTION>OPERADOR <OPTION>USUARIO </SELECT>

Veja como ficaria :

Fazer uma opo j vir selecionada :

Cargo pretendido:
<SELECT NAME="CARGO"> <OPTION>ANALISTA SNIOR <OPTION SELECTED> PROGRAMADOR CLIPPER <OPTION>PROGRAMADOR HTML <OPTION>OPERADOR <OPTION>USUARIO </SELECT>

Reproduz:

Mostrar mais de uma linha. Quando o parmetro SIZE omitido, a lista somente aberta se a seta for pressionada. Se este parmetro for especificado, ela exibida aberta, mostrando a quantidade de linhas especificadas pelo parmetro, independente da quantidade de itens da lista.
<SELECT NAME= "CARGO" SIZE="3"> <OPTION>ANALISTA SNIOR <OPTION SELECTED> PROGRAMADOR CLIPPER <OPTION>PROGRAMADOR HTML <OPTION>OPERADOR <OPTION>USUARIO </SELECT>

Veja o resultado :

Selecionar mais de uma opo

<SELECT NAME = "TESTE" SIZE="7" MULTIPLE><br> <OPTION>item 1<br> <OPTION>item 2<br> <OPTION>item 3<br> <OPTION>item 4<br> <OPTION>item 5<br> <OPTION>item 6<br> <OPTION>item 7<br> <OPTION>item 8<br> <OPTION>item 9<br> <OPTION>item 10<br> <OPTION>item 11<br> <OPTION>item 12<br> <OPTION>item 13<br> <OPTION>item 14<br> <OPTION>item 15<br> </SELECT>

O Resultado ser :

REA DE TEXTO Define uma caixa de digitaao, onde o usurio pode digitar livremente um texto.
<form> digite seus comentrios:<br> <TEXTAREA NAME="comentarios" ROWS="7" COLS="50"> </TEXTAREA> </form>

Abaixo, o resultado :
digite seus comentrios:

ROWS COLS Nmero de linhas que ter a rea d e texto. Nmero de colunas que ter a rea de texto.

ENVIANDO DADOS
O Boto SUBMIT responsvel por enviar os dados do formulrio para o email que est no parmetro ACTION da TAG FORM.
<form action= "MAILTO:NOME@SERVIDOR.COM.BR" ENCTYPE="TEXT/PLAIN"><br> <INPUT TYPE = "SUBMIT"VALUE = "ENVIAR">Parte superior do formulrio

LIMPANDO FORMULRIO
O Boto RESET limpa todo o formulrio, voltando os valores aos padres definidos inicialmente.
<INPUT TYPE = "RESET"VALUE = APAGAR CAMPOS"><br> </FORM>Parte inferior do formulrio

O QUE ESTILO ?
A HTML foi originalmente desenvolvida, sobretudo como um sistema de codificao universal que permitiria a qualquer pessoa visualizar as mesmas pginas, independentemente da plataforma do computador que estivesse sendo usada. A linguagem HTML ofereceu formatao estrutura (essa linha um cabealho, aquela palavra deve ser enfatizada), mas no permitiu que os projetistas tivessem muito controle sobre a aparncia da pgina. Enquanto os primeiros usurios da WEB estavam mais preocupados com o contedo, a segunda gerao insistia em ser capaz de alterar a cor de uma palavra ou selecionar uma determina fonte, ou seja, estava preocupada em melhorar a aparncia das pginas. O resultado de tudo foi o surgimento da CSS, ou simplesmente estilos, introduzidos pela primeira vez pela Microsoft, no lanamento do IE 3.0. As folhas de estilo em cascata possibilitam que voc atribua diversas propriedades ao mesmo tempo a todos os elementos de sua pgina, marcados com uma tag especfica. Por exemplo, voc pode definir propriedades para vrias tags de uma s vez separando cada tag com uma virgula: H1, H2, H3 {color: red}; neste caso ele exibira os trs nveis de cabealho em vermelho. Os estilos tambm possibilitam ligar uma folha de estilo externa, incluir folha de estilo interna e aplicar estilos locais, tudo em um mesmo documento HTML. Os estilos locais cancelam as folhas de estilo internas, as quais, por sua vez, cancelam as folhas de estilos externas. Da se entende melhor o nome Folhas de Estilo em Cascata. Estilo uma maneira diferente de formatar os comandos HTML. Ele permite que as alteraes nas pginas HTML sejam feitas sem aumentar o tamanho em Kb, permite que tenhamos um controle maior sobre os atributos de uma pgina, como, tamanho de texto, cor de fontes, espaamento entre linhas, diferentes tipos de caixas (bordas), etc. Com folhas de estilo podemos tambm utilizar camadas, e assim sobrepor objetos como textos e imagens, umas sobre as outras.

Cascading Style Sheets (CSS) ou Folhas de Estilo Encadeadas, uma nova tecnologia (apareceu em 1996), padronizada pelo World Wide Web Consortium - W3C (a entidade que define os padres da web), e que no parte do HTML padro, mas sim um conjunto de novas tags que ajudam a ter um melhor controle sobre o layout e o gerenciamento de nossas pginas. Estilo tem suas limitaes tambm, pois o nico browser que interpreta as folhas de estilos sem problemas o pera. Mas isso tem mudado gradativamente. VANTAGENS
1. possvel aplicar em todas as pginas uma definio de tipo de fonte, cor, espaamento, etc, centralizando assim as formataes em um nico arquivo. 2. Poupa tempo para alterar pgina. Imagine formatar a fonte para cada cabealho e cada pargrafo em uma longa pgina WEB. No esquea dos tags de fechamento . Com os estilos, voc digita uma nica linha para cada elemento no topo da pgina. 3. No Case Sensitive 4. Os estilos so prticos e fceis de modificar. 5. Os computadores so melhores em aplicar estilos do que voc. Voc se lembraria de formatar cada um dos pargrafos? Os estilos permitem que voc controle o texto em modos que esto forma do alcance das tags HTML. Voc pode definir espaamento entre as linhas (entrelinha), especificar cor de fundo e remover formatao em negrito e itlico, entre outras coisas.

DESVANTAGENS
1. A maior desvantagem que nenhum navegador as aceita completamente. Mesmo o IE 5.0, embora suportando a maior parte da especificao, no a aceita por inteiro. De acordo com o pessoal do Web Standards Project, o navegador que interpreta corretamente a maioria das CSS o pera, um navegador enxuto, rpido da Noruega. 2. Tem que se dedicar a aprender sua sintaxe, que no difcil, mas necessita entendimento.

ESTRUTURA DO ESTILO
A estrutura do estilo a seguinte :
TAG HTML { propriedade : valor }

Vamos deixar o exemplo mais fcil de entender : vamos supor que voc queira que todo o texto do CORPO DA PGINA use a fonte VERDANA. Ento sabemos que corpo da pgina representado pela TAG BODY. Isto seria apenas uma propriedade, que deve ficar assim :
BODY { }

font-family : Verdana

Se houver mais de uma propriedade a ser especificada, estas devem ser divididas por ponto-e-vrgula (;). O CORPO DA PGINA deve ter fonte VERDANA, tamanho 15.
BODY { font-family : Verdana; font-size : 15pt; }

Tambm podemos agrupar vrias TAGs HTML. Se desejar que todas as TAGs de Cabealho (de H1 a H6), tenham outro tipo de fonte e uma mesma cor, devemos fazer como abaixo :
H1, H2, H3, H4, H5, H6 { font-family : Georgia; color : red; }

Bom, agora voc j sabe como usar o estilo, vamos ver quais as maneiras de inserir estilo em uma pgina.

COMO USAR ESTILO

Os estilos podem ser : Interno, Externo ou Local (inline).

ESTILO LOCAL Local, quando o estilo colocado no local da TAG HTML, junto com a TAG HTML. Veja como ficaria o primeiro exemplo do CORPO DA PGINA usando a fonte VERDANA.
<html> <head> <title> Minha Primeira Pgina com Estilo </title> </head> <body style="font-family : verdana"> Sua pgina com tudo o que voc queria. </body> </html>

Percebeu ? s colocar dentro da tag que voc quer aplicar o estilo, o parmetro STYLE="aqui as propriedades" . ESTILO INTERNO Agora, existe o estilo Interno. Ele colocado dentro da pgina HTML, entre as TAGs STYLE e /STYLE, logo aps a abertura da TAG HEAD, ou antes de fech-la. Eu tenho hbito de colocar logo aps abrir a TAG HEAD, lgico vou levar vocs ao meu hbito.
<html> <head> <style> BODY { font-family : Verdana } </style> <title> Minha Primeira Pgina com Estilo Valria ETEM </title> </head> <body> Sua pgina com tudo o que voc queria. </body> </html>

Viram ? O Estilo est interno (dentro) da pgina HTML.

ESTILO EXTERNO E Estilo externo ? Bom, o estilo externo um arquivo com extenso .CSS, que tem apenas o estilo (no h tag HTML), e dentro da pgina HTML colocado um link para este arquivo. Vamos l.
Bloco de Notas - meu_estilo.css
BODY { font-family : Verdana; }

Bloco de Notas - meu_site.html

<html> <head> <link rel="stylesheet" href="meu_estilos.css" type="text/css"> <title> Minha Primeira Pgina com Estilo Valria ETEM </title> </head> <body> Sua pgina com tudo o que voc queria. </body> </html>

Percebam, que trabalhamos com dois arquivos, um .HTML, normal, onde s existe TAGs HTML, ou outras coisas que voc queria. Outro arquivo com as propriedades do Estilo referente as TAGS HTML e sua extenso .CSS. No arquivo .HTML, fiz um link para este arquivo .CSS. Sabia que voc pode ter tambm estilo Interno e Local mesmo que chame um Estilo Externo ? Por isso que a Folha de Estilo Folha de Estilo em Cascata. que uma maneira de usar estilo cancela a outra. Se voc tem um estilo INTERNO e um LOCAL, o LOCAL usado e cancela o INTERNO. Se voc tem um estilo INTERNO e um EXTERNO, o INTERNO cancela o EXTERNO. Entendeu ?

Agora vamos ver quais so as Unidades de Medidas que podem ser usadas em Folhas de Estilo :
Unidade pt pc em in cm mm px % Significado pontos por polegada paicas ems polegadas centmetros milmetros pixels de algum outro valor, normalmente usado em tamanho de fonte

FUNDOS
Todos meus alunos perguntavam assim : "Professora ? Tem como colocar uma figura de fundo centralizada ?". E a resposta era terrvel : "NO !!!". Mas hoje eu respondo assim : "NO tinha, agora com estilo tem !!!". possvel colocar fundos sem repetio na parte superior, inferior, esquerda e direita, ou centralizada ou em uma posio que voc desejar. TODA PGINA
<html> <head> <style> body { background-image:url(elefante.gif); font-family : Georgia; font-size : 200%; text-align:center; } </style> <title> Fundo Total </title> </head> <body> Este fundo est todo preenchido. </body> </html>

 ESQUERDA
<html> <head> <style> body { background-image:url(elefante.gif); background-repeat : repeat-y; font-family : Georgia; font-size : 200%; text-align:center; } </style> <title> Fundo Esquerda </title> </head> <body> Este fundo est somente ao lado esquerdo. </body> </html>

DIREITA
<html> <head> <style> body { background-image:url(elefante.gif); background-repeat:repeat-y; background-position:right; font-family : Georgia; font-size : 200%; text-align:center; } </style> <title> Fundo a Direita </title> </head> <body> Este fundo est somente ao lado direito. </body> </html>

PARTE SUPERIOR
<html> <head> <style> body { background-image:url(elefante.gif); background-repeat : repeat-x; font-family : Georgia; font-size : 200%; text-align:center; } </style> <title> Fundo Superior </title> </head> <body> Este fundo est somente ao lado superior. </body> </html>

PARTE INFERIOR
<html> <head> <style> body { background-image:url(elefante.gif); background-repeat : repeat-y; font-family : Georgia; font-size : 200%; text-align:center; background-position : bottom; } </style> <title> Fundo Superior </title> </head> <body> Este fundo est somente ao lado superior. </body> </html>

AO CENTRO
<html> <head> <style> body { background-image:url(elefante.gif);; background-repeat : no-repeat; background-position : center; font-family : Georgia; font-size : 200%; text-align:center; } </style> <title> Fundo Centralizado </title> </head> <body> Este fundo est somente ao lado inferior. </body> </html>

POSICIONADO
<html> <head> <style> body { background-image:url(elefante.gif);; background-repeat : no-repeat; background-position : 110 80; font-family : Georgia; font-size : 200%; text-align:center; } </style> <title> Fundo Posicionado </title> </head> <body> Este fundo est na posio 110 pixel da margem do topo e 80 pixels da margem esquerda. </body> </html>

Suporte
cor (herdado)

Propriedade
Ajusta a cor do texto

Descrio
nome da cor Trio RGB Cdigo hex Valores RGB url(URL) (com ou sem repeat); nome da cor (ou transparent, ou dois nomes de cores, que sero misturadas, separados por um /); trio RGB (cdigo hex) nome da cor; trio RGB (cdigo hex) {color: {color: {color: {color:

Valores
blue} #00F} #0000FF} RGB 0.0 0.0 1.0}

background (no herdado)

Ajusta as imagens de background ou cores

{ background: repeat } { background: { background: { background: { background:

url(image1.gif) Red } Red / Blue } transparent } #CCCCCC }

background-color (no Ajusta a cor do herdado) background background-image (no herdado)

{ background-color: Red } { background-color: #CCCCCC } { background-image: url(image1.gif) }

Ajusta a imagem de URL background

background-repeat (no herdado)

Ajusta a repetio do entelhamento das imagens de background

repeat (horizontalmente e verticalmente); { background-repeat: repeatrepeat-x y} (horizontal); repeat-y (vertical); no-repeat

TEXTOS
Voc precisa aumentar ou diminuir a distncia entre as linhas como faz no Word ? HTML no deixa n ? Alinhar um texto verticalmente ? HTML tambm no deixa !!! Transformar o que voc escreve de minscula para maiscula ou viceversa ? HTML no deixa tambm ? O HTML deixa ajustar espaamento entre as letras ? No ?!?!?!?! Ento, temos a soluo para voc ! novssimo, atual, genial e super "Formateixon de Textion com Estileixion"
Traduzindo : Formatao de Textos com Estilo.

Eu sei que voc deve estar falando : "A professora Valria est copiando o Seu Creison". Mas estou mesmo, mas ficou legal n ? Ou no ? Bom, mas o interessante que o estilo continua proporcionando formataes que HTML no proporciona. Vamos fazer um pargrafo ter espaamento de linhas de 20px, e com um fundo diferente do fundo da pgina. , isso d pra fazer com estilo, em HTML, s fazendo gambiarra com tabela, ou outra coisa que podemos inventar. Veja o cdigo

<html> <head> p { line-height: 30px; background:black; color : white; } </style> <title> Testando Formataes de Textos </title> </head> <body> O Pargrafo abaixo est com as caractersticas criadas. <p> Este um pargrafo, com fundo preto, letras brancas, e espaamento entre linhas de 20 pixels. Interessante n ? Mas pense como seria se voc precisar usar a TAG <P> para diferentes formataes ? Existe uma soluo que criar uma classe, a qual herdar caractristicas daquela TAG. </body> </html>

Veja o Resultado

Este um pargrafo, com fundo preto, letras brancas, e espaamento entre linhas de 30 pixels. Interessante n ? Mas pense como seria se voc precisar usar a TAG < P > para diferentes formataes ? Existe uma soluo que criar uma classe, a qual herdar caractristicas daquela TAG. Este um pargrafo, com fundo preto, letras brancas, e espaamento entre linhas de 10 pixels. Interessante n ? Mas, ficou muito apertadinho, depende do que voc precisa conseguir com essa propriedade. Agora, vamos aprender a criar as classes, etas servem para vrias tags. Voc precisar de um tipo de pargrafo com espaamento de linhas de 30 pixels, outro com fundo verde, outro com espaamento de letras de 5 pixels e outro com indentao de 10 pixels da primeira linha. Criamos vrias formataes com nomes diferentes para eles. Para criar essas classe s colocar o nome da TAG, um ponto e um nome de classe :

TAG.nome { propriedade : valor} Vamos criar essas vrias TAG de pargrafos diferentes :
<html> <head> <style> p.altura { line-height: 30px; } p.fundo { background:black; color : white; } p.espaco { letter-spacing : 5 px; } p.ind { } text-indent : 30px;

p.capitula:first-letter { color : yellow; font-size : xx-large; } </style> <title> Testando Formataes de Textos </title> </head> <body> O Pargrafo abaixo est com as caractersticas criadas. <p class="altura"> Este o pargrafo com altura das linhas diferenciadas. <p class="fundo"> Este o pargrafo com fundo preto e letra branca. <p class="espaco">Este o pargrafo com espaamento entre letras aumentado. <p class="ind">Este o pargrafo com indentao. <p class="capitula">Este um pargrafo com primeira letra capitulada. </body> </html>

Veja o Resultado:

Este o pargrafo com altura das linhas diferenciadas. Este o pargrafo com altura das linhas diferenciadas. Este o pargrafo com altura das linhas diferenciadas. Este o pargrafo com altura das linhas diferenciadas.

Este o pargrafo com fundo preto e letra branca. Este o pargrafo com fundo preto e letra branca. Este o pargrafo com fundo preto e letra branca. Este o pargrafo com fundo preto e letra branca.

Este o pargrafo com espaamento entre letras aumentado. Este o pargrafo com espaamento entre letras aumentado.

Este o pargrafo com indentao. Este o pargrafo com indentao. Este o pargrafo com indentao. Este o pargrafo com indentao. Este o pargrafo com indentao. Este o pargrafo com indentao.

Este um pargrafo com a primeira letra capitulada. Este um pargrafo com a primeira letra capitulada. Este um pargrafo com a primeira letra capitulada. Este um pargrafo com a primeira letra capitulada.

Suporte

Propriedade
Ajusta a distncia entre as bases da linha de texto

Descrio
tamanho (pt, in, cm, px, em) porcentagem (%) do tamanho de fonte none underline overline line-through

Valores
{line-height: 18pt} {line-height: 120%}

line-height (herdado)

text-decoration (no herdado)

Sublinha ou ento seleciona o texto

{text-decoration: underline}

text-align (herdado)

Ajusta o alinhamento de left texto para a center margem esquerda right ou direita, ou para o centro da pgina Faz a indentao da tamanho (pt, in, primeira linha do cm, px) texto no elemento baseline sub super top text-top middle bottom text-bottom porcentagem da altura de linha a partir da base da linha (%)

{text-align: right}

text-indent (herdado)

{text-indent: 0.5in}

vertical-align (no herdado)

alinha o texto verticalmente dentro do elemento

{vertical-align: super}

text-transform (herdado)

capitalize (coloca em maiscula a Ajusta as regras de primeira letra de maisculas e cada palavra) minsculas no texto uppercase lowercase ajusta o espaamento entre as letras no texto (se espera que tenha suporte na verso final do IE 4.0)

{text-transform: capitalize}

letter-spacing (herdado)

normal, tamanho (pt, in, cm, px, em)

{letter-spacing : 2pt}

first-letter

O pseudo-elemento "first-letter" permite dar um estilo especial ao texto fazendo com que a primeira letra de um bloco tenha um estilo diferente.

CAIXAS
As caixas (bordas) podem ser usadas em pargrafos, tabelas ou formulrios e at em frames. Eu criei um estilo interno, com nomes diferentes para os pargrafos, na verdade nomeei os pargrafos com os tipos das bordas. As bordas podem ter espaos entre elas e o texto, podem ter os quatro lados de estilos diferentes, ou ainda os quatro lados com cores diferentes e at com espessuras diferentes. Veja o que eu fiz. Um estilo interno e depois usei.
<style> p.dotted {border-style: dotted;padding:15px} p.dashed {border-style: dashed;padding:15px} p.solid {border-style: solid;padding:15px} p.double {border-style: double;padding:15px} p.groove {border-style: groove;padding:15px} p.ridge {border-style: ridge;padding:15px} p.inset {border-style: inset;padding:15px} p.outset {border-style: outset;padding:15px} p.soliddouble { border-style : solid double;padding:15px} </style>

Uma borda do tipo dotted - PONTOS Uma borda do tipo dashed - TRAOS Uma borda solida - LINHA CONSTANTE

Uma borda DUPLA

Uma borda tipo groove - RELEVO

Outra borda tipo ridge - RELEVO

Uma borda tipo inset - RELEVO COM TEXTO DENTRO

Outra borda tipo outset - RELEVO COM TEXTO FORA

Pargrafo com 2 tipos de borda - SOLIDA (sup e inf) E DUPLA (esq e dir)

Este pargrafo est com os quatro lados com estilos diferentes.

Este pargrafo est com os quatro lados com cores diferentes.

Este pargrafo est com os quatro lados com espessuras diferentes.

CURSORES
Os cursores podem tomar formas diferentes dependendo do que estamos fazendo. Voc pode mudar sua aparncia usando estilos. Veja s :
Auto { cursor : auto } e-resize { cursor : e-resize } se-resize { cursor : seresize } text { cursor : text } Crosshair {cursor : crosshair} ne-resize { cursor : ne-resize } Default { cursor : default } Move { cursor : move }

nw-resize n-resize {cursor:nw-resize} { cursor : n-resize } w-resize { cursor : w-resize } Hand { cursor : hand }

sw-resize s-resize { cursor : sw-resize } {cursor : s-resize} wait { cursor : wait } help { cursor : help }

LISTAS COM ESTILO

Voc sabia que possvel colocar uma figura diferente daquelas que utilizamos normalmente com as listas? O que HTML oferece so Marcadores do tipo : disc, circle e square. Procure figuras que voc gostaria de usar como marcador, ou copie estas abaixo,e vamos aprender a usar LISTAS COM ESTILO.

Bom, agora vamos fazer o arquivo com estilo interno. Depois que voc copiar a flor, pode selecionar o texto ai de baixo e colocar no seu bloco de notas. exatamente o que eu vou fazer aqui.

Aqui vamos iniciar nossa lista de Marcador.

Este o primeiro Item da Lista Este o segundo Item da Lista Este o terceiro Item da Lista
<html> <head> <style> li { list-style-image:url(marca_flor.gif); } </style> <title> </title> </head> <body> Inicio da Lista<p> <ol> <li> Para definir uma lista com uma figura voc deve colocar a <li> Agora a propriedade para usar com figura LIST-STYLE-I <li> Agora acabou </ol> </body> </html>

Suporte

Propriedade faz com que o elemento no aparea (no ser reservado nenhum espao para ele na pgina) especifica a aparncia de marcadores de item de lista (para uso com elementos LI)

Descrio

Valores

display (no herdado)

none

{ display: none }

list-style-type (herdado)

disk; circle; square; decimal; lower{ list-style-type: roman; uppersquare } roman; loweralpha; upperalpha; none

Suporte

Propriedade

Descrio

Valores

list-style-image (herdado)

especifica uma imagem para ser usada como marcador de url(URL); none item de lista (para uso com elementos LI) especifica a posio de marcadores de item de lista (para uso com elementos LI)

{ list-style-image: url(redball.jpg) }

list-style-position (herdado)

inside; outside

{ list-style-position: inside }

especifica a posio, estilo,e URL da imagem a ser usada list-style (herdado) como marcador de item de lista (para uso com elementos LI)

inside; outside disk; circle; square; decimal; lower{ list-style: inside disk roman; upperurl(redball.jpg) } roman; loweralpha; upperalpha; none URL

BARRAS DE ROLAGEM
Para mudar a cor da Barra de Rolagem necessrio utilizar as propriedades da Scrollbar.
<html> <head> <style> body { scrollbar-face-color : lightyellow; scrollbar-shadow-color : orange; scrollbar-highlight-color : #006699; scrollbar-3dlight-color : blue; scrollbar-darkshadow-color : pink; scrollbar-track-color : white; scrollbar-arrow-color : marroom; } </style> <title> Mudando a Cor da Barra de Rolagem </title> </head>

body { scrollbar-face-color : lightyellow; scrollbar-shadow-color : orange; scrollbar-highlight-color : #006699; scrollbar-3dlight-color : blue; scrollbar-darkshadow-color : pink; scrollbar-track-color : white; scrollbar-arrow-color : marroom; } </style> <body> Para poder ver se est funcionando, insira bastante texto. Para poder ver se est funcionando, insira bastante texto. <br> Para poder ver se est funcionando, insira bastante texto. Para poder ver se est funcionando, insira bastante texto. <br>

Para poder ver se est funcionando, insira bastante est funcionando, insira bastante texto. <br> Para poder ver se est funcionando, insira bastante est funcionando, insira bastante texto. <br> Para poder ver se est funcionando, insira bastante est funcionando, insira bastante texto. <br> Para poder ver se est funcionando, insira bastante est funcionando, insira bastante texto. <br> Para poder ver se est funcionando, insira bastante est funcionando, insira bastante texto. <br> Para poder ver se est funcionando, insira bastante est funcionando, insira bastante texto. <br> Para poder ver se est funcionando, insira bastante est funcionando, insira bastante texto. <br> </body> </html>

texto. Para poder ver se texto. Para poder ver se texto. Para poder ver se texto. Para poder ver se texto. Para poder ver se texto. Para poder ver se texto. Para poder ver se

SUPORTE scrollbar-facecolor scrollbarshadow-color

DESCRIO

VALORES

Ajusta a cor da face da barra { scrollbar-face-color de rolagem : yellow } Ajusta a cor da sombra direita da barra de rolagem { scrollbar-shadowcolor : orange }

scrollbarhighlight-color

Ajusta a cor da sombra esquerda da barra de rolagem

{ scrollbar-highlightcolor : orange }

Ajusta a cor da sombra, da scrollbar-3dlightsombra esquerda da barra color de rolagem

{ scrollbar-3dlightcolor : orange }

Ajusta a cor da sombra, da scrollbarsombra esquerda da barra darkshadow-color de rolagem

{ scrollbardarkshadow-color : orange }

scrollbar-trackcolor

Ajusta a cor da sombra, da sombra esquerda da barra de rolagem

{ scrollbar-trackcolor : orange }

SUPORTE scrollbar-arrowcolor

DESCRIO Ajusta a cor da sombra, da sombra esquerda da barra de rolagem

VALORES { scrollbar-arrowcolor : orange }

LINKS
Links... Isso uma "briga" antiga, porque ningum quer que o Links tenha sempre aquela cor tenebrosa azul (default), nem o sublinhado. Bom, com HTML resolvemos o problema sem dificuldade usando na TAG <BODY> os parmetros LINK="cor" VLINK="cor" e ALINK="cor". Pronto !!! Pronto NADA !!!! Com estilo d pra fazer muitas coisas legais, desde colocar bordas que do a impresso de boto, at aumentar a fonte quando o mouse s est por cima do link. O que acha ? Vamos brincar com tudo isso ? Primeiro de tudo, voc vai ver a ordem como devem ser usadas essas propriedades : a:link = essa para a cor do link, o imortal azul sublinhado a:visited = essa para o link j visitado, o ordinrio roxinho a:active = essa para o link quando est sendo clicado a:hover = essa no tem em HTML, mas quando passamos o mouse sobre o link Agora, com tudo o que j vimos de propriedades em estilo, eu vou brincar um pouco com isso. O primeiro exemplo ser um exemplo simples, mudando tamanho e cor de fundo do link. Os outros depois sero utilizados, desde bordas at figuras de fundo.

<html> <head> <style> a:link { color : yellow; background : blue; } a:visited { color : gray; background : black; } a:active { color : white background : red; } a:hover { color : black; background : white; } </style> <title> Usando Estilo nos Links </title> </head> <body> <p> <a href=".html">Este um link novo </a> </body> </html>

Veja o resultado Este um link novo Agora vou fazer vrios tipos de links.

Link com Bordas

a:link{border-style : outset;padding:5px} a:hover{border-style : inset}

Link com Tamanhos Diferentes

a:link{font-size : 12pt} a:visited{font-size : 14pt} a:hover {font-size : 18pt}

Link Tipos de Bordas Diferentes

a:link{border-style : double} a:hover{border-style : groove}

Link Tipos de Fontes Diferentes

a:link{font-family : Georgia} a:visited{font-family : Courier} a:hover{font-family : Arial}

Link com Fundo de Figura

a:hover{background-image:url(fundolink.jpg);color:white}

ARQUIVOS "HTC"
O Arquivo HTC um arquivo com funes em javascript. Neste arquivo colocado os eventos que devem ocorrer e quando. Este arquivo deve estar dentro do mesmo diretrio onde esto os arquivos que iro utiliz-los. Vamos ver os efeitos que so possveis : Pixelate O efeito Pixelate faz com que o link ou a figura, na transio, fique com quadrados (pixels). Ele tem trs atributos:
DURATION o tempo da transio. Nele voc deve colocar o valor que voc quer que dure o efeito ENABLED Indica se o efeito deve ser exibido True para sim e false para no. MAXSQUARE Indica a largura do quadrado (pixel).
style> a { text-decoration: none; color: #3366CC; height: 1px; font-family:Verdana; font-size: 15px; behavior: url(efeito.htc); filter:progid:dximagetransform.microsoft.pixelate (duration=-1, enabled=true,maxSquare=20); } a:hover { text-decoration: none; color: #FF6600; font-family: Verdana; font-size: 15px; } </style>

RadialWipe O efeito RadialWipe se assemelha a uma palheta do pra brisa. Ele tem trs atributos:
DURATION o tempo da transio. ENABLED Indica se o efeito deve ser exibido True para sim e false para no. WIPESTYLE Indica como ser o efeito, ele tem trs propriedades: CLOCK (o efeito comea do meio, no sentido horrio, como um relgio), WEDGE (o efeito comea do meio e se entende para as laterais) e RADIAL (o efeito comea no alto ao lado esquerdo e termina no canto esquerdo superior).
<style> a { text-decoration: none; color: #3366CC; height: 1px; font-family: Verdana; font-size: 10px; behavior: url(efeito.htc); filter:progid:dximagetransform.microsoft.radialwipe (duration=-1, enabled=true, wipestyle=wedge); } a:hover { text-decoration: none; color: #FF6600; font-family: Verdana; font-size: 10px; } </style>

RandomBars No efeito RandomBars a transio expe linhas aleatrias de pixels. Ele tem trs atributos:
DURATION o tempo da transio. ENABLED Indica se o efeito deve ser exibido True para sim e false para no.

ORIENTATION a orientao da transio, vertical ou horizontal.

Exemplo:
<style> a { text-decoration: none; color: #3366CC; height: 1px; font-family: Verdana; font-size: 10px; behavior: url(efeito.htc); filter:progid:dximagetransform.microsoft.randombars (duration=-1, enabled=true, orientation=horizontal); } a:hover { text-decoration: none; color: #FF6600; font-family: Verdana; font-size: 10px; } </style>

RandomDissolve No efeito RandomDissolve a transio expe pixels aleatrios, formando o efeito de dissoluo. Ele tem dois atributos:
DURATION o tempo da transio. ENABLED Indica se o efeito deve ser exibido True para sim e false para no.

Exemplo:
<style> a { text-decoration: none; color: #3366CC; height: 1px; font-family: Verdana; font-size: 10px; behavior: url(efeito.htc); filter:progid:dximagetransform.microsoft.randomdissolve (duration=-1, enabled=true); } a:hover { text-decoration: none; color: #FF6600; font-family: Verdana; font-size: 10px; } </style>

Slide O efeito Slide funciona como um slide, o texto desliza do lugar. Ele tem quatro atributos:
DURATION o tempo da transio. ENABLED Indica se o efeito deve ser exibido True para sim e false para no. SLIDESTYLE indica como ser o efeito: HIDE (Desliza o objeto original para fora, expondo o objeto novo.) , PUSH (desliza o objeto novo para dentro, empurrando o objeto original para fora), SWAP (alterna a troca e expe o objeto novo e empurra o objeto original para fora, ao mesmo tempo). BANDS Ajusta o nmero de tiras em que o objeto dividido durante a transio.

Exemplo:
<style> a { text-decoration: none; color: #3366CC; height: 1px; font-family: Verdana; font-size: 10px; behavior: url(efeito.htc); filter:progid:dximagetransform.microsoft.slide (bands=4, duration=-1, enabled=true, slidestyle=swap); } a:hover { text-decoration: none; color: #FF6600; font-family: Verdana; font-size: 10px; } </style>

Spiral O efeito spiral se assemelha a uma espiral. Ele tem quatro atributos:
DURATION o tempo da transio. ENABLED Indica se o efeito deve ser exibido True para sim e false para no. GRIDSIZEX indica o nmero de colunas da grade usadas para o filtro, o valor pode variar de 1 a 100. GRIDSIZEY indica o nmero de linhas da grade usadas para o filtro, o valor pode variar de 1 a 100.

Exemplo:
<style> a { text-decoration: none; color: #3366CC; height: 1px; font-family: Verdana; font-size: 10px; behavior: url(efeito.htc); filter:progid:dximagetransform.microsoft.spiral ( duration=-1, enabled=true, gridsizeX=6, gridsizeY=6); } a:hover { text-decoration: none; color: #FF6600; font-family: Verdana; font-size: 10px; } </style>

Stretch O efeito Stretch cria uma camada que esticada para cobrir o objeto original. Este efeito se assemelha a um cubo que gira. Ele possui trs atributos:
DURATION o tempo da transio. ENABLED Indica se o efeito deve ser exibido True para sim e false para no. STRETCHSTYLE Indica como ser o efeito: HIDE (estica o novo objeto at o objeto original da esquerda para a direita), PUSH (estica o objeto novo para dentro e espreme o objeto original para fora, movendo-se da esquerda para a direita, este movimento assemelha-se a um cubo que gira), SPIN (estica o novo original at ele sobrepor o objeto original do centro para fora).

Exemplo:
<style> a { text-decoration: none; color: #3366CC; height: 1px; font-family: Verdana; font-size: 10px; behavior: url(efeito.htc); filter:progid:dximagetransform.microsoft.stretch ( duration=-1, enabled=true, stretchstyle=push); } a:hover { text-decoration: none; color: #FF6600; font-family: Verdana; font-size: 10px; } </style>

Strips O efeito Strips cria na transio um novo objeto e move tiras sucessivas, como uma serra diagonal que passa atravs do objeto original. Ele possui trs atributos:
DURATION o tempo da transio. ENABLED Indica se o efeito deve ser exibido True para sim e false para no. MOTION define como ser a transio das tiras: leftup (do canto esquerdo superior direita mais baixa), leftdown (do canto esquerdo mais baixo direita da parte superior), rightdown (do canto direito superior ao esquerda mais baixo), rightup (do canto direito mais baixo parte superior esquerda).

Exemplo:
<style> a { text-decoration: none; color: #3366CC; height: 1px; font-family: Verdana; font-size: 10px; behavior: url(efeito.htc); filter:progid:dximagetransform.microsoft.strips(duration=-1, enabled=true, motion=leftdown); } a:hover { text-decoration: none; color: #FF6600; font-family: Verdana; font-size: 10px; } </style>

Wheel O efeito Wheel se assemelha aos raios de uma roda girando. Ele possui trs atributos:
DURATION o tempo da transio. ENABLED Indica se o efeito deve ser exibido True para sim e false para no. SPOKES Indica o nmero de voltas (raios) que o efeito tem, o padro 4, mas o valor pode variar entre 2 a 20.

Exemplo:
<style> a { text-decoration: none; color: #3366CC; height: 1px; font-family: Verdana; font-size: 10px; behavior: url(efeito.htc); filter:progid:dximagetransform.microsoft.wheel ( duration=-1, enabled=true, spokes=6); } a:hover { text-decoration: none; color: #FF6600; font-family: Verdana; font-size: 10px; } </style>

Zigzag O efeito Zigzag um zigzag que comea de cima pra baixo. Ele possui quatro atributos:
DURATION o tempo da transio. ENABLED Indica se o efeito deve ser exibido True para sim e false para no. GRIDSIZEX Indica o nmero de colunas da grade usadas para o filtro, o valor pode variar de 1 a 100. GRIDSIZEY Indica o nmero de linhas da grade usadas para o filtro, o valor pode variar de 1 a 100.

Exemplo:
<style> a { text-decoration: none; color: #3366CC; height: 1px; font-family: Verdana; font-size: 10px; behavior: url(efeito.htc); filter:progid:dximagetransform.microsoft.zigzag (duration=-1, enabled=true,gridsizeX=4, gridsizeY=4); } a:hover { text-decoration: none; color: #FF6600; font-family: Verdana; font-size: 10px; } </style>

O ARQUIVO ABAIXO DEVE SER GRAVADO COM EXTENSO .HTC, POIS ELE QUE SER CHAMADO DENTRO DO ESTILO. ESTE ARQUIVO TAMBM DEVE ESTAR JUNTO NO PROVEDOR QUANDO FOR HOSPEDAR O SITE.
<public:component> <public:attach event="onmouseover" onevent="domouseover()"> <public:attach event="onmouseout" onevent="domouseout()"> <script language="javascript"> function domouseover() // nome da funo { with(element) // aplicado ao elemento que foi chamdo { filters.item(0).Apply(); // aplica o filtro ao item filters.item(0).Play(); // faz o efeito funcionar } } function domouseout() { with(element) { filters.item(0).Apply(); filters.item(0).Play(); } } // onmouseover um evento quando o mouse estiver por cima // onmouseout um evento quando o mouse sair de cima </script> </public:component>

O QUE SCRIPT O QUE SO SCRIPTS?

So pequenos programas que acrescentam interatividade e funcionalidade pgina.

JAVASCRIPT
JavaScript uma linguagem que permite injetar lgica em pginas escritas em HTML (HiperText Mark-up Language). As pginas HTML podem ser escritas utilizando-se editores de texto, como o NotePad, Write, etc. Porm, existem editores prprios para gerar HTML, tais como HotDog e (mais recomendado) Microsoft FrontPage. Os pargrafos de lgica do javaScript podem estar "soltos" ou atrelados a ocorrncia de eventos. Os pargrafos soltos so executados na seqncia em que aparecem na pgina (documento) e os atrelados a eventos so executados apenas quando o evento ocorre. Para inserir pargrafos de programao dentro do HTML necessrio identificar o incio e o fim do set de JavaScript, da seguinte forma:
<script> set de instrues </script>

Este procedimento pode ser adotado em qualquer local da pgina. Entretanto, para melhor visualizao e facilidade de manuteno, recomenda-se que toda a lgica seja escrita no incio do documento, atravs da criao de funes a serem invocadas quando se fizer necessrio (normalmente atreladas a eventos). Se a lgica escrita a partir de um determinado evento, no necessrio o uso dos comandos <SCRIPT> e </SCRIPT>. Os comandos JavaScript so sensveis ao tipo de letra (maisculas e minsculas) em sua sintaxe. Portanto, necessrio que seja obedecida a forma de escrever os comandos, de acordo com a forma apresentada nesta apostila. Caso seja cometido algum erro de sintaxe quando da escrita de

um comando, o JavaScript interpretar, o que seria um comando, como sendo o nome de uma varivel. uma linguagem de script, que foi desenvolvida pela Netscape e passou a aser suportada pelo Netscape Navigator partir da verso 2.0. A Microsoft criou a VBScript que um subset (variante) do Visual Basic. Javascript no tem nada a ver com a linguagem Java. A linguagem Javascript se aloja dentro de um programa HTML. Um programa em Javascript s pode ser executado atravs de um Browser.

A LINGUAGEM JAVASCRIPT
Javascript baseada em objetos, ou seja, ela trata todos os elementos de uma pgina Web como objeto:

document
um objeto que contm informaes sobre a pgina ou documento HTML, incluindo dados sobre os elementos de um formulrio, links e funes que permitem mudar as caractersticas da pgina.

form
um objeto que contm informaes sobre os formulrios da pgina atual como mtodo, URL e dados sobre seus elementos ou campos.

history
Este objeto mantm uma lista de todos os site visitados na sesso atual do Browser.

PROPRIEADES DOS OBJETOS

Um objeto possui caractersticas prprias que o tornam nico dentro de um gripo, como um carro que tem tipo, nmero de portas, potncia, cor, peso, etc. Algumas caractersticas ou propriedade so comuns a muitos objetos (como cor e peso), outras so especificas de cada um. As propriedades podem ser vistas como variveis que armazenam informaes relacionadas com um determinado objeto. Acessando as propriedades dos objetos

nome do objeto.propriedade
Para dar uma nova cor de fundo para a pgina :

document.bgcolor = cor

MTODOS DOS OBJETOS

Alm das propriedades, um objeto possui funes especiais que realizam alguma operao relacionada com o objeto. Esses mtodos so usados para alterar o valor de uma propriedade do objeto ou executar uma tarefa especifica. Acessando o mtodo dos objetos

objeto.mtodo( argumento)
onde :
OBJETO o nome do objeto que sobre a ao do mtodo MTODO o nome que idntica o mtodo ARGUMENTO um expresso ou valor opcional que sera usado para alterar ou atuar sobre o objeto.

O objeto document tem um mtodo chamado write que insere linhas no documento HTML.

document.write(texto inserido em javascript)

O objeto window tem um mtodo chamado alert que exibe uma mensagem de alerta em uma caixa de dilogo.

window.alert(Operao Invalida)

OPERADORES LGICOS
So operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE. Os comandos condicionais sero vistos mais a frente.
Comparadores == != > >= < <= && || Funo Igual Diferente Maior Maior ou Igual Menor Menor ou Igual E Ou

OPERADORES MATEMTICOS
So operadores a serem utilizados em clculos, referncias de indexadores e manuseio de strings. Ao longo do manual estes operadores sero largamente utilizados, dando, assim, uma noo mais precisa do seu potencial.
Operador + * / Funo adio de valor e concatenao de strings subtrao de valores multiplicao de valores diviso de valores

obtm o resto de uma diviso:

Exemplos

150 % 13 retornar 7 7 % 3 retornar 1 +=concatena /adiciona ao string/valor j existente. Ou seja: x += y o mesmo que x = x + y
Da mesma forma podem ser utilizados: -= , *= , /= ou %= Um contador pode ser simplificado utilizando-se X++ ou X-- o que equivale as expresses:

X = X + 1 ou X = X - 1 respectivamente.
Para inverter sinal: X = -X negativo para positivo ou positivo para negativo. Vamos fazer o primeiro exerccio. Abra o Bloco de Notas e digite o cdigo abaixo. A idia do exerccio fazer com que valor constantes sejam somados, divididos, subtrados, divididos e ver o resto da diviso.
<html> <head> <title> Primeiro Exercicio de Javascript </title> </head> <body> <script language = "javascript"> var num1 = 150; var num2 = 13; var resto, soma, sub, mult, divi; resto = num1 % num2; soma = num1 + num2; sub = num1 - num2; mult = num1 * num2; divi = num1 / num2; window.alert("O Resultado da soma " + soma); window.alert("O Resultado da Subtrao " + sub); window.alert("O Resultado da Multiplicao " + mult); window.alert("O Resultado da Diviso " + divi); window.alert("o resto da diviso " + resto); document.write("O Resultado da soma " + soma + "<br>"); document.write("O Resultado da Subtrao " + sub + "<br>"); document.write("O Resultado da Multiplicao " + mult + "<br>"); document.write("O Resultado da Diviso " + divi + "<br>"); document.write("O resto da diviso " + resto); </script>

</body> </html>

Agora, vamos fazer um segundo exerccio. Abra o Bloco de Notas e digite o cdigo abaixo. A idia deste exerccio fazer com que algum digite 2 valores e estes sejam somados, divididos, subtrados, divididos e ver o resto da diviso.
<html> <head> <title> Segundo Exercicio de Javascript </title> </head> <body> <script language = "javascript"> var num1, num2, resto, soma, sub, mult, divi; num1 = window.prompt("Digite o Primeiro Numero"); num2 = window.prompt("Digite o Segundo Numero"); resto = eval(num1) % eval(num2); soma = eval(num1) + eval(num2); sub = eval(num1) - eval(num2); mult = eval(num1) * eval(num2); divi = eval(num1) / eval(num2); window.alert("O Resultado da soma " + soma); window.alert("O Resultado da Subtrao " + sub); window.alert("O Resultado da Multiplicao " + mult); window.alert("O Resultado da Diviso " + divi); window.alert("o resto da diviso " + resto); document.write("O Resultado da soma " + soma + "<br>"); document.write("O Resultado da Subtrao " + sub + "<br>"); document.write("O Resultado da Multiplicao " + mult + "<br>"); document.write("O Resultado da Diviso " + divi + "<br>"); document.write("O resto da diviso " + resto); </script> </body> </html>

CONTROLES ESPECIAIS
Controle \b \f \n \r \t // /*....*/ backspace form feed new line caracters carriage return tab characters Linha de comentrio Delimitadores para inserir um texto com mais de uma linha como comentrio. Funo

Os delimitadores naturais para uma string so " ou ' . Caso seja necessrio a utilizao destes caracteres como parte da string, utilize \ precedendo " ou '. Ex. alert ("Cuidado com o uso de \" ou \' em uma string")

COMANDOS CONDICIONAIS
So comandos que condicionam a execuo de uma certa tarefa veracidade ou no de uma determinada condio, ou enquanto determinada condio for verdadeira. So eles: Comando IF
if (condio) { ao para condio satisfeita } else { ao para condio no satisfeita }

Exemplo
if (Idade < 18) { Categoria = "Menor" } else { Categoria = "Maior" }

Comando FOR
for ( [inicializao/criao de varivel de controle ] ; [condio ] ; [incremento da varivel de controle] ) { ao }

Exemplo
for (x = 0 ; x <= 10 ; x++) { alert ("X igual a " + x) }

Comando WHILE

Executa uma ao enquanto determinada condio for verdadeira.

while (condio) { ao }

Exemplo
var contador = 10; while (contador > 1) { contador-}

EVENTOS
Uma das caractersticas da linguagem baseada em objetos a possibilidade de gerenciar eventos. So fatos que ocorrem durante a execuo do sistema, a partir dos quais o programador pode definir aes a serem realizadas pelo programa. Abaixo apresentamos a lista dos eventos possveis, indicando os momentos em que os mesmos podem ocorrer, bem como, os objetos passveis de sua ocorrncia.

EVENTOS DA LINGUAGEM JAVASCRIPT

EVENTO OnBlur FUNO Ocorre quando o objeto perde o focus, independente de ter havido mudana. Vlido para os objetos Text, Select e Textarea Ocorre quando o objeto perde o focus e houve mudana de contedo. Vlido para os objetos Text, Select e Textarea. Ocorre quando o objeto recebe um Click do Mouse. Vlido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit. Ocorre quando o objeto recebe o focus. Vlido para os objetos Text, Select e Textarea. Ocorre quando o ponteiro do mouse passa por sobre o objeto. Vlido apenas para Link. Ocorre quando o ponteiro do mouse sai de cima do objeto. Vlido apenas para Link. Ocorre quando o objeto selecionado. Vlido para os objetos Text e Textarea Ocorre quando um boto tipo Submit recebe um click do mouse. Vlido apenas para o Form. Ocorre na descarga (sada) do documento. Tambm s ocorre no BODY. Ocorre na carga do documento. Ou seja, s ocorre no BODY do documento.

OnChange

OnClick OnFocus OnMouserOver OnMouseOut OnSelect OnSubmit OnUnload onLoad

CRIANDO VARIVEIS
A varivel criada automaticamente, pela simples associao de valores a mesma. Ex. NovaVariavel = "Jose" Foi criada a varivel de nome NovaVariavel que, passou a conter a string Jose. As variveis podem ser Locais ou Globais. As variveis que so criadas dentro de uma funo so Locais e referenciveis apenas dentro

da funo. As variveis criadas fora de funes so Globais, podendo ser referenciadas em qualquer parte do documento. Desta forma, variveis que precisam ser referenciadas por vrias funes ou em outra parte do documento, precisam ser definidas como globais. Embora no seja recomendvel, em uma funo, pode ser definida uma varivel local com o mesmo nome de uma varivel global. Para isso utiliza-se o mtodo de definio var.

Ex. Varivel Global : MinhaVariavel = "" Varivel Local : var MinhaVariavel = ""

ESCREVENDO NO DOCUMENTO
O JavaScript permite que o programador escreva linhas dentro de uma pgina (documento), atravs do mtodo write. As linhas escritas desta forma, podem conter textos, expresses JavaScript e comandos Html. As linhas escritas atravs deste mtodo aparecero no ponto da tela onde o comando for inserido.
<script> valor = 30 document.write ("Minha primeira linha") document.write ("Nesta linha aparecer o resultado de : " + (10 * 10 + valor)) </script>

A idia do exemplo anterior escrever duas linhas. Entretanto o mtodo write no insere mudana de linha, o que provocar o aparecimento de apenas uma linha com os dois textos emendados. Para evitar este tipo de ocorrncia, existe o mtodo writeln que escreve uma linha e espaceja para a seguinte. Entretanto, em nossos testes, este comando no surtiu efeito,obtendo-se o mesmo resultado do mtodo write. A soluo encontrada para esta situao foi a utilizao do comando de mudana de pargrafo da linguagem Html.
<script> valor = 30 document.write ("<p>Minha primeira linha") document.write ("<p>Nesta linha aparecer o resultado de : " + (10 * 10 + valor) ) </script>

MENSAGENS
Existem trs formas de comunicao com o usurio atravs de mensagens.
1. Apenas Observao window.alert ( mensagem ) window.alert ("Certifique-se de que as informaes esto corretas") 2. Mensagem que retorna confirmao de OK ou CANCELAR confirm (mensagem)

if (confirm ("Algo est errado...devo continuar??")) { window.alert ("Continuando") } else { window.alert ("Parando") }

3. Recebe mensagem via caixa de texto Input receptor = window.prompt ("Minha mensagem", "Meu texto")

Onde:
RECEPTOR o campo que vai receber a informao digitada pelo usurio. MINHA MENSAGEM a mensagem que vai aparecer como Label da caixa de input MEU TEXTO um texto, opcional, que aparecer na linha de digitao do usurio
entrada = window.prompt ("Informe uma expresso matemtica", "") resultado = eval(Entrada) document.write("O resultado = " + resultado)

CRIANDO FUNES
Uma funo um set de instruesj, que s devem ser executadas quando a funo for acionada. A sintaxe geral a seguinte:
function nomefuno (parmetros) { Ao }

Suponha uma funo que tenha como objetivo informar se uma pessoa maior ou menor de idade, recebendo como parmetro a sua idade.
function Idade (Anos) { if (Anos > 17) { window.alert ("Maior de Idade") } else { window.alert ("menor de Idade") } }

Para acionar esta funo, suponha uma caixa de texto, em um formulrio, na qual seja informada a idade e, a cada informao, a funo seja acionada.
<form> <input type=text size=2 maxlength=2 name="Tempo" onChange="Idade(Tempo.value)"> </form>

Observe-se que o parmetro passado (quando ocorre o evento "onChange") foi o contedo da caixa de texto "Tempo" (propriedade "value") e que, na funo, chamamos de "Anos". Ou seja, no existe corelao entre o nome da varivel passada e a varivel de recepo na funo. Apenas o contedo passado.

FUNES INTRNSECAS
So funes embutidas na prpria linguagem. A sintaxe geral a seguinte:
Result eval parseInt funo (informao a ser processada) Calcula o contedo da string Transforma string em inteiro

parseFloa Transforma string em nmero com ponto flutuante t date() Retorna a data e a hora (veja o captulo manipulando datas)

ex1: Result = eval ( " (10 * 20) + 2 - 8") ex2: Result = eval (string)
No primeiro exemplo Result seria igual a 194. No segundo, depende do contedo da string, que tambm pode ser o contedo (value) de uma caixa de texto.

FUNES MATEMTICAS
FUNO Math.abs(nmero) Math.ceil(nmero) Math.floor(nmero) Math.round(nmero) Math.pow(base, expoente) Math.max(nmero1, nmero2) Math.min(nmero1, nmero2) Math.sqrt(nmero) Math.SQRT2 Math.SQRT_2 Math.sin(nmero) Math.asin(nmero) Math.cos(nmero) Math.acos(nmero) RESULTADO retorna o valor absoluto do nmero (ponto flutuante) retorna o prximo valor inteiro maior que o nmero retorna o prximo valor inteiro menor que o nmero retorna o valor inteiro, arredondado, do nmero retorna o clculo do exponencial retorna o maior nmero dos dois fornecidos retorna o menor nmero dos dois fornecidos retorna a raiz quadrada do nmero retorna a raiz quadrada de 2 (aproximadamente 1.414) retorna a raiz quadrada de 1/2 (aproximadamente 0.707) retorna o seno de um nmero (anglo em radianos) retorna o arco seno de um nmero (em radianos) retorna o cosseno de um nmero (anglo em radianos) retorna o arco cosseno de um nmero (em radianos)

Math.tan(nmero) Math.atan(nmero) Math.pi Math.log(nmero) FUNO Math.E Math.LN2 Math.LOG2E Math.LN10 Math.LOG10E

retorna a tangente de um nmero (anglo em radianos) retorna o arco tangente de um nmero (em radianos) retorna o valor de PI (aproximadamente 3.14159) retorna o logartmo de um nmero RESULTADO retorna a base dos logartmos naturais aproximadamente 2.718) retorna o valor do logartmo de 2 (aproximadamente 0.693) retorna a base do logartmo de 2 (aproximadamente 1.442) retorna o valor do logartmo de 10 (aproximadamente 2.302) retorna a base do logartmo de 10 (aproximadamente 0.434)

Observao: Em todas as funes, quando apresentamos a expresso "(nmero)", na verdade queremos nos referir a um argumento que ser processado pela funo e que poder ser: um nmero, uma varivel ou o contedo de um objeto (propriedade value).

CRIANDO NOVAS INSTNCIAS

Atravs do operador new podem ser criadas novas instncias a objetos j existentes, mudando o seu contedo, porm, mantendo suas propriedades. A sintaxe geral a seguinte: NovoObjeto = new ObjetoExistente (parmetros) Exemplo 1 MinhaData = new Date () MinhaData passou a ser um objeto tipo Date, com o mesmo contedo existente em Date (data e hora atual) Exemplo 2 MinhaData = new Date(1996, 05, 27) MinhaData passou a ser um objeto tipo Date, porm, com o contedo de uma nova data.

Exemplo 3 Suponha a existncia do seguinte objeto chamado Empresas function Empresas (Emp, Nfunc, Prod) { this.Emp = Emp this.Nfunc = Nfunc this.Prod = Prod } Podemos criar novas instncias, usando a mesma estrutura, da seguinte forma: Elogica = new Empresas("Elogica", "120", "Servios") Pitaco = new Empresas("Pitaco", "35", "Software") Corisco = new Empresas("Corisco", "42", "Conectividade") Assim, a varivel Elogica.Nfunc ter o seu contedo igual a 120

MANIPULANDO ARRAYS
O JavaScript no tem um tipo de dado ou objeto para manipular arrays. Por isso, para trabalhar com arrays necessrio a criao de um objeto com a propriedade de criao de um array. No exemplo abaixo, criaremos um objeto tipo array de tamanho varivel e com a funo de "limpar" o contedo das variveis cada vez que uma nova instncia seja criada a partir dele. function CriaArray (n) { this.length = n for (var i = 1 ; i <= n ; i++) { this[i] = "" } } Agora podemos criar novas instncias do objeto "CriaArray" e alimentlos com os dados necessrios. NomeDia = new CriaArray(7) NomeDia[0] = "Domingo" NomeDia[1] = "Segunda" NomeDia [2] = "Tera" NomeDia[3] = "Quarta" NomeDia[4] = "Quinta" NomeDia[5] = "Sexta" NomeDia[6] = "Sbado" Atividade = new CriaArray(5) Atividade[0] = "Analista" Atividade[1] = "Programador" Atividade[2] = "Operador" Atividade[3] = "Conferente" Atividade[4] = "Digitador" Agora poderemos obter os dados diretamente dos arrays. DiaSemana = NomeDia[4] Ocupao = Atividade[1] DiaSemana passaria a conter Quinta e Ocupao conteria Programador. Outra forma de se trabalhar com arrays criar novas instncias dentro do prprio objeto do array, o que proporciona o mesmo efeito de se trabalhar com matriz.

Isso pode ser feito da seguinte forma: function Empresas (Emp, Nfunc, Prod) { this.Emp = Emp this.Nfunc = Nfunc this.Prod = Prod } TabEmp = new Empresas(3) TabEmp[1] = new Empresas("Elogica", "120", "Servios") TabEmp[2] = new Empresas("Pitaco", "35", "Software") TabEmp[3] = new Empresas("Corisco", "42", "Conectividade") Assim, poderemos obter a atividade da empresa nmero 3, cuja resposta seria Conectividade, da seguinte forma: Atividade = TabEmp[3].Prod Obs: importante lembrar que, embora os exemplos estejam com indexadores fixos, os indexadores podem ser referncias ao contedo de variveis.

MANIPULANDO STRING's
O JavaScript bastante poderoso no manuseio de Strings, fornecendo ao programador uma total flexibilidade em seu manuseio. Abaixo apresentamos os mtodos disponveis para manuseio de strings. string.length retorna o tamanho da string (quantidade de bytes) string.charAt(posio) retorna o caracter da posio especificada (inicia em 0) string.indexOf("string") retorna o nmero da posio onde comea a primeira "string" string.lastindexOf("string") retorna o nmero da posio onde comea a ltima "string" string.substring(index1, index2) retorna o contedo da string que corresponde ao intervalo especificado. Comeando no caracter posicionado em index1 e terminando no caracter imediatamente anterior ao valor especificado em index2. Todo = "Elogica" Parte = Todo.substring(1, 4) (A varivel Parte receber a palavra log) string.toUpperCase() Transforma o contedo da string para maisculo (Caixa Alta) string.toLowerCase() Transforma o contedo da string para minsculo (Caixa Baixa)

escape ("string") retorna o valor ASCII da string (vem precedido de %) unscape("string") retorna o caracter a partir de um valor ASCII (precedido de %)

MANIPULANDO DATAS
Existe apenas uma funo para que se possa obter a data e a hora. a funo Date(). Esta funo devolve data e hora no formato:Dia da semana, Nome do ms, Dia do ms, Hora:Minuto:Segundo e Ano Exemplo Fri May 24 16:58:02 1996 Para se obter os dados separadamente, existem os seguintes mtodos: getDate() Obtm o dia do ms (numrico de 1 a 31) getDay() Obtm o dia da semana (0 a 6) getMonth() Obtm o ms (numrico de 0 a 11) getYear() Obtm o ano getHours() Obtm a hora (numrico de 0 a 23) getMinutes() Obtm os minutos (numrico de 0 a 59) getSeconds() Obtm os segundos (numrico de 0 a 59) No exemplo a seguir obteremos o dia da semana. Para tal, utilizaremos a varivel DataToda para armazenar data/hora e a varivel DiaHoje para armazenar o nmero do dia da semana. DataToda = new Date() DiaHoje = DataToda.getDay() Para obter o dia da semana alfa, teremos que construir uma tabela com os dias da semana e utilizar a varivel DiaHoje como indexador. function CriaTab (n) { this.length = n for (var x = 1 ; x<= n ; x++) { this[x] = "" } } NomeDia = new CriaTab(7) NomeDia[0] = "Domingo" NomeDia[1] = "Segunda" NomeDia [2] = "Tera" NomeDia[3] = "Quarta" NomeDia[4] = "Quinta" NomeDia[5] = "Sexta" NomeDia[6] = "Sbado"

DiaSemana = NomeDia[DiaHoje] Para criar uma varivel tipo Date com o contedo informado pela aplicao, existe o mtodo set. Assim, temos os seguintes mtodos: setDate, setDay, setMonth, setYear, setHours, setMinutes e setSeconds. Seguindo o exemplo acima, para mudar o ms para novembro, teramos: DataToda.setMonth(10) .

OBJETOS DA LINGUAGEM JAVASCRIPT

Objeto Definio window Corresponde janela, sendo o objeto de nvel hierrquico mais alto. Em um documento divido em frames, cada frame corresponde a uma janela. document Este objeto contm informaes sobre a pgina ou documentos HTML com um todo, includo dados sobre elementos de formulrios, links e ancoras, alem de uma serie de funes que permitem mudar as caractersticas da pgina. Locations Este objeto possui informaes sobre o local da pgina e informaes relacionadas, tais como o protocolo utilizado e seu domnio. History Mantm uma lista de todos os sites visistados na sesso de uso atual do navegador. Navigator Corresponde ao navegador, contendo informaes sobre sua verso e seu fabricante, entre outras. Form Este objeto guarda informaes especficas sobbre os formulrios da pgina atual tais como seu mtodo, url e dados sobre seus elementos ou campos.

PROPRIEDADES DO OBJETO DOCUMENT

Propriedade Descrio Title Contem o titulo especificado dodocumento Location Contem a url completa do documento Lastmodified Contem a data da ultima modificao do documento BgColor Contem o valor da cor de fundo FgColor Contem o valor da cor de texto LinkColor Contem o valor da cor de link VlinkColor Contem o valor da cor de links visitados AlinkColor Contem o valor da cor de links ativados (enquanto pressionados) Forms[index] Matriz com os objetos formulrios. Os objetos aparecem na ordem em que foram definidos. Forms.length O nmero objetos de formulrio do documento atual. Links[index) Matriz com objetos correspondentes a todos os links gerados em HREF, aparecendo na ordem em que foram definidos. Links.length O numero

de links gerados por HREF contidos no documento atual Referrer Contem a url do documento que chamou o documento atual Cookie Especifica uma string contendo informaes especificas que sero armazenadas no equipamento do usurio.

PROPRIEDADES DO OBJETO WINDOW

Propriedade Descrio Frames[index] Uma matriz das janelas-filhas, indexadas pela ordem em que foram criadas. Frames.length O numero de janelas-filhas definidas. Self Indica a janela atual. Parent Indica a janela-mae ou superior Status Especifica uma mensagem na barra de status da janela DefaultStatus Reflete uma mensagem padro mostrada na barra de status da janela. Top Indica a janela mais antiga.
TODO ESTE CONTEDO FOI RETIRADO DO CURSO DISTNCIA DO CURSO DO CENTRO PAULA SOUZA, ELABORADO PELO PROFESSOR LUIZ CARLOS

HOSPEDANDO UM SITE
Um site, aps ter sido, projetado e criado, deve estar em um provedor, ou seja, no computador que est conectado ao mundo. Voc deve procurar o melhor provedor para vocs, ou seja, aquele que tem o melhor custo x benefcio. Os provedores podem ser gratuitos, com a desvantagem de que podem ser abertas junto com suas pginas, aquelas indesejveis propagandas, ou ainda, podem ser pagos, e podem dar suporte a e-mail, a pginas PHP, ASP, etc. Aps localizar aquele que perfeito para suas necessidades, faa um cadastro no site. Se for pago ser enviado um bolero para pagamento, etc., se for gratuito, aps o cadastro, voc deve enviar TODOS os arquivos (figuras, arquivos HTC, arquivos JS, arquivos CSS, arquivos HTML, arquivos ZIP e outros) para este provedor. Pronto, seu site j estar no AR como se fala. O inconveniente para hospedar o site em um provedor gratuito que o endereo do site pode ficar meio longo : http://www.seuprovedor.com.br/sites/tipos/seilaoque/index.h tml Pronto ! Fcil para dar pra algum n ? O que fazer ? Entre em um site de redicionamento como : rg3, cjb, entr outros, que agora no me lembro. Faa outro cadastros, preencha tudo o que for necessrio, coloque o endereozinho do seu site acima na linha que ele pede, e depois seu site ficar mais curtinho como o meu: http://www.professoravaleria.rg3.net.