Curso de HTML

ndice
Lgica de Programao........................................................................................................................5 Algoritmo.............................................................................................................................................5 Exerccios.........................................................................................................................................5 Constantes e Variveis.........................................................................................................................7 Exerccio..........................................................................................................................................7 Fluxogramas.........................................................................................................................................8 Exerccio..........................................................................................................................................9 Operadores..........................................................................................................................................10 Operadores Matemticos...............................................................................................................10 Operadores Relacionais.................................................................................................................10 Operadores Lgicos.......................................................................................................................11 Exerccios.......................................................................................................................................12 Estrutura de Controle..........................................................................................................................14 Seqncia simples..........................................................................................................................15 Seleo...........................................................................................................................................15 Exerccios.......................................................................................................................................16 Repetio.......................................................................................................................................19 Enquanto ... Faa:......................................................................................................................19 At que ... Faa:.........................................................................................................................20 Faa Enquanto ...:.....................................................................................................................20 Faa At que ...:........................................................................................................................20 Para ... at .... faa.....................................................................................................................20 Exerccios.......................................................................................................................................21 Lgica Escrita.....................................................................................................................................22 Exerccios.......................................................................................................................................23 Introduo...........................................................................................................................................24 Redes..................................................................................................................................................24 Provedores de Acesso.........................................................................................................................24 Internet................................................................................................................................................24 Como surgiu a Internet.......................................................................................................................24 Endereo IP........................................................................................................................................25 Domnio..............................................................................................................................................25 WWW.................................................................................................................................................25 O que so Browsers?..........................................................................................................................26 Protocolo HTTP..................................................................................................................................26 URL....................................................................................................................................................26 Pginas Web.......................................................................................................................................27 Home Page..........................................................................................................................................27 Como Planejar seu Site.......................................................................................................................27 Determinando a Finalidade de um Site..............................................................................................27 O que HTML?..................................................................................................................................28 O que voc pode fazer com o HTML?...............................................................................................28 O que necessrio para trabalhar com HTML?.................................................................................28 Sintaxe dos comandos HTML............................................................................................................29 Como Exibir o Cdigo HTML de uma Pgina da Internet................................................................29 Estrutura Bsica do HTML................................................................................................................29 Elementos Bsicos do HTML............................................................................................................30 Atributo BACKGROUND.............................................................................................................30 Atributo BGCOLOR:.....................................................................................................................30 Atributo TEXT...............................................................................................................................30 Atributos LINK, ALINK, VLINK.................................................................................................30 Ttulos e Subttulos.............................................................................................................................30 -1-

Curso de HTML Exerccio........................................................................................................................................31 Acentuao.........................................................................................................................................32 Formatao de Textos.........................................................................................................................32 Comando <font>............................................................................................................................32 Os principais Comandos de Estilo de Texto so:...............................................................................33 Comando <marquee>.....................................................................................................................33 Exerccio........................................................................................................................................34 Formatao de Pargrafos..................................................................................................................35 Comando <P ALIGN=...>.............................................................................................................35 Comando <CENTER>...................................................................................................................35 Comando <BLOCKQUOTE>.......................................................................................................35 Linhas Horizontais.........................................................................................................................35 Hyperlinks..........................................................................................................................................35 Definir um Link Dentro de uma Pgina.........................................................................................35 Definir um Link para uma Pgina Interna.....................................................................................36 Definir um Link ''Mailto''...............................................................................................................36 Definir um Link para Outro Site....................................................................................................37 Definir um Link em uma Imagem.................................................................................................37 Imagens...............................................................................................................................................37 Principais Diferenas entre as Imagens GIF e JPEG..........................................................................38 Qual Formato Escolher?.....................................................................................................................38 GIFs Animados...................................................................................................................................38 Definir uma Imagem no Segundo Plano............................................................................................38 O comando <! ... -->......................................................................................................................39 Exerccio........................................................................................................................................39 Listas...................................................................................................................................................40 Listas Ordenadas............................................................................................................................40 Exerccio........................................................................................................................................40 Listas No Ordenadas....................................................................................................................41 Exerccio........................................................................................................................................42 Lista de Definio..........................................................................................................................43 Exerccio........................................................................................................................................43 Tabelas................................................................................................................................................44 Elementos de uma Tabela..............................................................................................................44 Comando <CAPTION>............................................................................................................44 Comando <TR>.........................................................................................................................44 Comando <TD>........................................................................................................................44 Comando <TH>........................................................................................................................44 Exerccio........................................................................................................................................44 Parmetros..........................................................................................................................................46 Parmetros do Elemento <TABLE>..............................................................................................46 border........................................................................................................................................46 width..........................................................................................................................................46 cellspacing.................................................................................................................................46 cellpadding.........................................................................................................................................46 cellpadding................................................................................................................................46 align...........................................................................................................................................46 bgcolor......................................................................................................................................46 Exerccio........................................................................................................................................47 Parmetros do Elemento <TR>.....................................................................................................47 align...........................................................................................................................................47 valign.........................................................................................................................................47 bgcolor......................................................................................................................................47 Parmetros dos Elementos <TD> e <TH>....................................................................................47 -2-

Curso de HTML align...........................................................................................................................................47 valign.........................................................................................................................................48 bgcolor......................................................................................................................................48 nowrap.......................................................................................................................................48 colspan......................................................................................................................................48 rowspan.....................................................................................................................................48 Exerccio........................................................................................................................................48 Formulrios.........................................................................................................................................49 Elementos HTML para Formulrios..............................................................................................49 <form>......................................................................................................................................49 <input>......................................................................................................................................50 Tipos do Elemento INPUT.......................................................................................................50 <input type=text>................................................................................................................50 <input type=password>.......................................................................................................50 <input type=radio>.............................................................................................................51 <input type=checkbox>......................................................................................................51 <input type=reset>..............................................................................................................51 <input type=submit>..........................................................................................................51 <input type=image>...........................................................................................................52 <input type=hidden>..........................................................................................................52 <select>.....................................................................................................................................52 <textarea>..................................................................................................................................52 Exerccio........................................................................................................................................53 Hospedando seu Site...........................................................................................................................54 Sites de Hospedagem Gratuita............................................................................................................54 Sites de Hospedagem Paga.................................................................................................................54 Hospedando seu Site no Geocities.....................................................................................................54 Java Script..........................................................................................................................................55 Operadores Lgicos............................................................................................................................55 Operadores Matemticos ...................................................................................................................55 Controles Especiais ...........................................................................................................................56 Comandos Condicionais.....................................................................................................................56 Comando IF:..................................................................................................................................57 Comando FOR:..............................................................................................................................57 Comando WHILE:.........................................................................................................................57 Eventos...............................................................................................................................................57 Criando Variveis...............................................................................................................................58 Escrevendo no Documento.................................................................................................................58 Mensagens..........................................................................................................................................58 Apenas Observao:......................................................................................................................58 Mensagem que retorna confirmao de OK ou CANCELAR:......................................................59 Recebe mensagem via caixa de texto Input...................................................................................59 Criando Funes.................................................................................................................................59 Interagindo com o usurio..................................................................................................................60 Objeto Input TEXT........................................................................................................................60 Objeto Input PASSWORD ...........................................................................................................60 Objeto Input CHECKBOX ...........................................................................................................60 Objeto Input RADIO ....................................................................................................................60 Objeto Input BUTTON .................................................................................................................60 Objeto Input SUBMIT ..................................................................................................................61 Objeto TEXTAREA .....................................................................................................................61 Objeto SELECT ............................................................................................................................61 Objeto SELECT ............................................................................................................................61 Abrindo novas janelas........................................................................................................................61 -3-

Curso de HTML Abrindo um Documento ...............................................................................................................62 Escrevendo no Documento ...........................................................................................................62 Fechando a Janela..........................................................................................................................62 Fechando o Documento.................................................................................................................62

-4-

Curso de HTML

Lgica de Programao Esta apostila visa auxiliar queles que pretendem ingressar na rea de programao e desenvolvimento de sistemas. Aprenderemos como ordenar aes de forma consistente e assim formar uma seqncia lgica. Sero demonstrados conceitos generalizados, que podero ser aplicados nos programas se forem devidamente adaptados. Algoritmo O Algoritmo a parte fundamental para qualquer programao. Ele uma seqncia lgica e predefinida para a realizao de aes. Mas afinal, o que isso? Quando estamos com fome, executamos vrias tarefas para se poder se alimentar: Algum est faminto ento: Vai at a cozinha; Abre a geladeira; Prepara a refeio; Almoa. O exemplo acima so as aes que se devem seguir para saciar a fome. o algoritmo de como acabar a fome de algum. A construo de um algoritmo deve seguir certas regras, para que a tarefa seja concluda com xito. Devemos ser simples e objetivo, pois quem interpretar este cdigo no poder ter dvidas para execut-lo. Exerccios 1- Crie um algoritmo das rotinas que voc executa para realizar a tarefa de acordar.

-5-

Curso de HTML 2- Crie um algoritmo das rotinas que voc executa para procurar um emprego.

3- Crie um algoritmo das rotinas que voc executa para se deslocar para este treinamento.

Constantes e Variveis -6-

Curso de HTML Em um algoritmo, sempre haver algum que estar executando a tarefa. Por exemplo: Thiago compra o jornal; Algum assiste televiso; Ana veste o vestido; Nos exemplos acima, as aes so executadas por algum, ou especfico (Thiago e Ana), ou indeterminado (Algum). Quando a ao executado por algum especfico, esse algum denominado constante. Isso quer dizer que ele no ir mudar. Quando a ao executada por algum indeterminado, esse algum denominado varivel. Isso quer dizer que essa varivel pode tomar vrias formas diferentes. No exemplo acima: Algum assiste televiso. (Jos assiste televiso; Maria assiste televiso). As variveis lhe proporcionam uma infinidade de possibilidades. Por isso que elas so classificadas de forma a restringir a sua variao. As variveis podem ser: Numricas (1,2,45,98); Caracteres (a,B,F,z,Y); Alfanumricas (adc, eduardo, 5d6f); Booleana ou Lgica (Verdadeiro, Falso); Exerccio 1- Selecione dos algoritmos dos exerccios anteriores alguns itens que podem ser classificados como constantes ou como variveis. Classifique-os de acordo com o tipo.

Fluxogramas Os fluxogramas tm o objetivo de facilitar o entendimento do algoritmo. Estes -7-

Curso de HTML fluxogramas so padronizados em diferentes formas, que auxiliam na visualizao de sua respectiva funo: TERMINAL PROCESSAMENTO EXIBIR INSERIR DADOS Incio e fim do algoritmo.

As tarefas que sero executadas. Parte que ser exibida na tela.

Local onde sero permitidas a insero de dados.

Existem outros objetos no fluxograma, mas isso ns veremos futuramente. Agora, montaremos o fluxograma da ao comer. INCIO

IR PARA COZINHA

ABRIR A GELADEIRA

PREPARAR A COMIDA

ALMOAR

FIM

Com esse fluxograma, voc percebe que s poder executar uma ao aps executar a outra.

-8-

Curso de HTML

Exerccio 1- Crie o fluxograma dos algoritmos dos exerccios anteriores.

-9-

Curso de HTML Operadores Operadores Matemticos Sempre sero utilizados clculos para a realizao de inmeras tarefas. Os principais operadores matemticos so: + (soma) - (subtrao) * (multiplicao) / (diviso) muito importante saber que, como na matemtica, as operaes na lgica de programao seguem uma ordem. Existe uma ordem de precedncia entre estes operadores: Primeiro: ( ) - Parnteses. Segundo: *(multiplicao) ou /(diviso), o que aparecer primeiro. Terceiro: +(soma) ou -(subtrao), o que aparecer primeiro. Exemplo: 5 + 2 * 3 = 11 , pela precedncia, l-se o mesmo que: 5 + (2 * 3) (5 + 2) * 3 = 21 . Operadores Relacionais Os operadores relacionais so utilizados para comparar dois valores, que podem ser variveis ou constantes, do mesmo tipo. So exemplos de operadores relacionais: = (igual a) > (maior que) < (menor que) <> (diferente de) >= (maior ou igual a) <= (menor ou igual a) Esses operadores so muito utilizados. Com o resultado destas comparaes implica num valor lgico (verdadeiro ou falso): 10 >= 5 11 <> 11 0,5 < (-1) A=A (verdadeiro) (falso) (falso) (verdadeiro)

- 10 -

Curso de HTML Operadores Lgicos Os operadores lgicos so combinados s expresses. Desta forma, conseguimos um valor verdadeiro ou falso. Os operadores lgicos principais so: E conjuno Ou disjuno No negao O E e o Ou so operadores binrios. Isso quer dizer que eles servem para combinar duas expresses. O No um operador unrio. Isso quer dizer que ele serve para alterar o valor de uma expresso. Para entendermos melhor como eles so utilizados, vejam as seguintes expresses: 1. Tem energia eltrica. 2. O computador est ligado na tomada Para que o computador ligue, ele tem que obedecer as duas expresses anteriores. Imagine a seguinte relao: (Expresso 1) E (Expresso 2)

Se uma destas expresses no for verdadeira, a condio falsa (O computador no liga). O computador somente ligar se as duas forem verdadeiras. A tabela de possibilidades de uma condio chamada Tabela Verdade: Expresso 1 FALSO FALSO VERDADEIRO VERDADEIRO E FALSO FALSO FALSO VERDADEIRO Expresso 2 FALSO VERDADEIRO FALSO VERDADEIRO

Agora veja estas expresses: 1. Tenho dinheiro no banco. 2. Tenho carto de crdito. Para efetuar uma compra, no necessrio seguir as duas expresses acima. Imagine a relao abaixo: (Expresso 1) Ou (Expresso 2)

Agora, se uma destas expresses for verdadeira, a condio verdadeira (Posso comprar). Se as duas forem falsas, a condio falsa (No posso comprar). Veja a tabela verdade desta relao:

- 11 -

Curso de HTML Expresso 1 VERDADEIRO VERDADEIRO FALSO FALSO Ou VERDADEIRO VERDADEIRO VERDADEIRO FALSO Expresso 2 VERDADEIRO FALSO VERDADEIRO FALSO

Desta forma, j temos conhecimento das cadeias verdades dos dois operadores lgicos principais. Ainda existe o operador unrio. Veja as seguintes expresses: 1. No tenho dinheiro. 2. Tenho dinheiro. Se eu negar as afirmaes acima, quais sero os resultados: 1. Negar que no tenho dinheiro => 2. Negar que tenho dinheiro => Conseguiremos a seguinte tabela verdade: Tenho dinheiro. No tenho dinheiro.

No FALSO VERDADEIRO

Expresso VERDADEIRO FALSO

Os operadores lgicos podem ser combinados de inmeras formas. Como os operadores matemticos, os operadores lgicos seguem uma ordem de precedncia (prioridade): Primeiro: ( ) - Parnteses. Segundo: No Negao. Terceiro: E Conjuno. Quarto: Ou Disjuno. Exerccios 1- Considere a tabela a seguir: Torcedor Sexo Quantidade Corintianos M 40 F 10 Palmeirenses M 30 F 5 So Paulinos M 36 F 8 Santistas M 25 F 2

a) Crie uma afirmao que tenha como resultado todos os torcedores palmeirenses. Torcedor=Palmeirense Resultado: 35 torcedores

- 12 -

Curso de HTML b) Crie uma afirmao que tenha como resultado todas as torcedoras mulheres corintianas, palmeirenses e santistas.

c) Crie uma afirmao que tenha como resultado todos os torcedores de times auvinegros.

2- Considere o diagrama a seguir: Pesquisa qual chocolate voc consome? A

8 C

3 5

No consumidores

10

13

a) Crie uma afirmao que tenha como resultado dos consumidores das 3 marcas de chocolate. Chocolate=A E Chocolate=B E Chocolate=C Resultado: Consumidores=5 b) Crie uma afirmao que tenha como resultado dos consumidores de duas marcas de chocolate.

- 13 -

Curso de HTML c) Crie uma afirmao que tenha como resultado todos os consumidores de apenas uma marca de chocolate (ou somente de A ou somente de B ou somente de C).

d) Crie uma afirmao que tenha como resultado os consumidores do chocolate A ou do chocolate B e os consumidores que comem os 3 chocolates.

e) Crie uma afirmao que tenha como resultado todos os pesquisados.

Estrutura de Controle Existem trs estruturas bsicas de controle, que so:

Seqncia simples Seleo Repetio As aes so efetuadas com base nestas trs estruturas.

Seqncia simples - 14 -

Curso de HTML

uma tarefa que sempre ser executada. Ela obedecer a ordem da esquerda para direita, de cima para baixo. Um exemplo de seqncia simples o utilizado anteriormente: Vai at a cozinha; Abre a geladeira; Prepara a refeio; Almoa. Seleo Esta estrutura utilizada quando h uma necessidade de escolha entre duas opes. Por exemplo, quando perguntamos se voc est com fome, voc responde sim ou no. Esta deciso acarretar na execuo ou no de algumas tarefas. A estrutura de seleo utiliza a forma Se...... ento, ou Se ...... ento........ seno. Para entendermos melhor isto, veja o exemplo: Se voc est com fome ento voc come. Acima uma maneira simples de entender esta seleo. Caso voc esteja com fome, voc come. Seno, voc no come. Se a afirmao acima for dividida em expresses: 1. Voc est com fome. 2. Voc come. Ento a tabela verdade dela seria a seguinte: Se (Expresso 1) VERDADEIRO VERDADEIRO FALSO FALSO Ento (Expresso 2) VERDADEIRO FALSO VERDADEIRO FALSO Resultado Voc come (VERDADEIRO) Voc no come (FALSO) Voc come (VERDADEIRO) Voc no come (VERDADEIRO)

Ainda existe a possibilidade de colocar outra opo: Se voc est com fome voc come, seno voc dorme. Nesta afirmao, voc pode separ-la em trs expresses: 1. Voc est com fome 2. Voc come 3. Voc dorme Esta condio implica na tabela verdade abaixo: - 15 -

Curso de HTML

Se (Expresso 1) VERDADEIRO VERDADEIRO VERDADEIRO VERDADEIRO FALSO FALSO FALSO FALSO

Ento (Expresso 2) VERDADEIRO VERDADEIRO FALSO FALSO VERDADEIRO VERDADEIRO FALSO FALSO

Seno (Expresso 3) VERDADEIRO FALSO VERDADEIRO FALSO VERDADEIRO FALSO VERDADEIRO FALSO

Resultado Voc come (VERDADEIRO) Voc come (VERDADEIRO) Voc dorme (VERDADEIRO) Voc no come nem dorme (FALSO) Voc dorme (VERDADEIRO) Voc no come nem dorme (FALSO) Voc dorme (VERDADEIRO) Voc no come nem dorme (FALSO)

Agora veremos um fluxograma de uma estrutura de seleo: INCIO

SIM

FAMINTO?

NO

VOC COME

VOC DORME

FIM

Este um exemplo de um fluxograma com uma seleo composta. Exerccios 1- Crie uma condio para uma pessoa atravessar a rua. Considere o farol como uma varivel. Se farol=verde faa Atravesse a rua; Seno Aguarde o farol verde; Seno Atravesse a rua Se farol=vermelho faa Aguarde o farol verde;

2- Crie uma condio para uma pessoa entrar na sua casa. - 16 -

Curso de HTML

3- Veja a seguinte tabela de preos: Gabinete Monitor Teclado R$ 50,00 Mouse R$ 30,00 Caixa de Som R$ 50,00 Impressora R$ 400,00

R$ 1.000,00 R$ 400,00

a) Baseando-se na tabela acima, crie uma condio para uma pessoa que pretende comprar as peas de um computador, obedecendo a ordem de importncia (Gabinete, Monitor, Teclado, Mouse, Caixa de Som e Impressora).

b) Usando a condio criada acima, veja o que comprar cada uma das pessoas: Joo - R$1.500,00; Paulo - R$1.000,00; Pedro - R$850,00; Mrio - R$200,00; Eduardo - R$2.000,00.

- 17 -

Curso de HTML

4- Crie o fluxograma dos exerccios anteriores:

- 18 -

Curso de HTML

Repetio As estruturas de repetio servem para realizar uma rotina inmeras vezes. Essa repetio pode ser finita ou infinita (looping infinito). Deve-se tomar muito cuidado com os comandos de repetio, pois executando um looping infinito voc pode travar seu computador. Enquanto ... Faa: Este comando conhecido como While (condio) Do. Esta repetio testa a condio antes de executar o looping. Vejamos o exemplo: Enquanto Dinheiro>10 faa: Compre po; Compre leite; Compre ovos. Neste exemplo, temos uma varivel (Dinheiro), que testada antes, pois se no houver dinheiro suficiente, no ser possivel efetuar a compra. Ento, enquanto a condio for verdadeiro, ser feita a compra. At que ... Faa: - 19 -

Curso de HTML Este comando conhecido como Until (condio) Do. Esta repetio muito parecida com a anterior. Vejam o exemplo: At que Dinheiro<=10 faa: Compre po; Compre leite; Compre ovos. Neste exemplo temos a mesma varivel (Dinheiro), que tambm testada antes. A nica diferena do exemplo anterior que o looping s ser efetuado enquanto a condio for falsa. Faa Enquanto ...: Este comando conhecido como Do.... Until (condio). Esta repetio testa a condio aps ter executado uma vez o looping. Vejam o exemplo: Faa Dar uma colherada; Enquanto Prato<>Vazio. Neste exemplo, temos a varivel prato, que testada aps ser efetuada uma vez a ao (Dar uma colherada). Enquanto a condio citada for verdadeira, ser efetuada a repetio. Faa At que ...: Este comando conhecido como Do... Until (condio). Esta repetio tambm testa a condio aps ter efetuado uma vez os comandos. Vejamos o exemplo: Faa Dar uma colherada; At que Prato=Vazio. Da mesma forma que o exemplo anterior, a varivel prato testada aps a ao. J neste exemplo, o looping efetuado enquanto a condio for falsa. Para ... at .... faa: Este comando conhecido como For (varivel) to (valor) do. Utilizamos esta repetio quando precisamos que o looping seja executado X vezes, isto , quando h um nmero que determina a quantidade de loopings. Veja o exemplo:

- 20 -

Curso de HTML

Para Degrau=0 at 10 faa: Suba um degrau; Este exemplo utiliza-se de uma varivel, que recebe seu valor inicial (degrau=0) e do objetivo a ser alcanado (10). Desta forma, a cada repetio efetuado o incremento de uma unidade na varivel. Exerccios 1- Crie uma repetio para a ao de comer: Enquanto prato<>vazio faa: D uma colherada; Faa: D uma colherada; Enquanto prato<>vazio. Faa: D uma colherada; At prato=vazio. At prato=vazio faa: D uma colherada;

2- Crie uma repetio para a ao de lavar loua:

3- Voc tem uma venda de frutas. Voc tem 50 frutas para vender. Crie uma condio para voc vender estas frutas.

- 21 -

Curso de HTML 4- Aps voc ter aberto a venda, apareceram os seguintes clientes e a quantidade de frutas que cada um desejava: Joo Manoel Joaquim Maria Julio Mrio Patricia Carolina Ana 8 10 4 4 11 9 3 7 6

Considerando que voc s fecharia a venda aps vender todas a frutas, aps qual cliente voc foi embora?

Lgica Escrita Agora trabalharemos utilizando-se dos fundamentos da lgica. A lgica tem uma simbologia prpria para os operadores lgicos: E:conjuno Ou :disjuno No :negao

Tambm trabalharemos as variveis de uma forma diferente. Ser atribudas a elas uma letra ou uma abreviatura, para simplificar a visualizao. Desta forma, a visualizao de uma expresso ser a seguinte: AB ab

Toda expresso tem sua tabela verdade: - 22 -

Curso de HTML

A V V F F Exerccios V F F F

B V F V F

A V V F F

V V V V F

B V F V F

V F

A F V

1- Transforme as afirmaes criadas nos exerccios de operadores lgicos na Lgica Escrita e crie uma tabela verdade para as expresses criadas. Exerccio 1: Torcedor=T Exerccio 2: Chocolate=Ch T=palmeirense (Ch=A) (Ch=B) (Ch=C)

Introduo - 23 -

Curso de HTML Neste curso apresentaremos a linguagem utilizada na definio de pginas na Internet. Com o HTML (Hyper Text Markup Language) possvel criar pginas incrveis, conforme a criatividade de cada um. Alm disso, voc aprender tudo a respeito da World Wide Web, dos browsers e das homepages. Redes Uma rede a conexo entre dois ou mais computadores. Atravs da rede, os computadores podem compartilhar perifricos, informaes e programas. Uma impressora, por exemplo, pode ser utilizada por vrios equipamentos ao mesmo tempo, reduzindo assim os custos. Os provedores da Internet so um exemplo de rede, constituda pela interligao entre computadores e um servidor central, atravs de uma linha telefnica. Provedores de Acesso Os Provedores de Acesso so empresas que mantm computadores conectados de forma permanente Internet. O provedor faz um investimento em linhas telefnicas, computadores, software e na prpria conexo permanente com a Internet. Depois prov acesso Internet aos usurios. Assim o usurio passa tambm a ter acesso Internet pagando os pulsos telefnicos das chamadas, e as mensalidade dos provedores em alguns casos. Internet A Internet uma rede composta por milhes de redes interconectadas mundialmente, compreendendo redes comerciais, acadmicas, governamentais e militares. Cada rede individual conectada Internet pode ser administrada por uma entidade governamental, uma empresa ou uma instituio educacional. Mas a Internet, como um todo, no tem um poder centralizado, ou seja, ningum dono da Internet. Como surgiu a Internet A Internet surgiu em 1969. Vivia-se o auge da guerra fria e os laboratrios militares americanos sentiam a necessidade de compartilhar de forma segura informaes sigilosas, armazenadas em computadores espalhados pelo pas. Foi criada ento uma rede de comunicao interligando esses computadores. Para evitar que um ataque nuclear sovitico interrompesse essa comunicao, desenvolveram um esquema para a transmisso em que as informaes seriam divididas em pacotes. Esses pacotes tomariam caminhos diferentes para chegar ao mesmo local. Caso um trecho de comunicao fosse destrudo, os pacotes pegariam outro caminho e chegariam ao mesmo destino.

- 24 -

Curso de HTML

Endereo IP Nesse momento voc deve estar se perguntando como tantos computadores conseguem se comunicar uns com os outros. Cada um consegue ser exclusivo, porque cada um tem seu prprio endereo. Os endereos IP (Internet Protocol/Protocolo Internet) so formados por nmeros de 4 bytes. So valores nicos e cada um indica um computador na Internet. Ex: 200.225.162.12

Domnio Se um nmero for muito extenso teremos dificuldade em memoriz-lo. A partir dessa dificuldade, os idealizadores da Internet criaram o conceito de Domnio. Domnio uma tabela na qual cada endereo IP associado a um nome. Dessa forma, o internauta no precisa ficar preocupado se no lembrar do endereo de um determinado site, basta mandar o navegador ou browser procurar pelo domnio. Existem algumas regras para a atribuio de domnios, como o uso de letras minsculas, a proibio de sinais grficos como +, - ou * e a extenso final, que deve refletir o carter da instituio. Temos as seguintes extenses: .mil .gov .com .edu .net .org Organizaes Militares Organizaes Governamentais Empreendimentos Comerciais ou Pessoais Instituies de Ensino Redes Mundiais ONGs e semelhantes

Os nomes de domnios so solicitados atravs de uma organizao chamada INTERNIC, que coordena todos os pedidos, verificando se j no h registro desse domnio. Em todos os pases, com exceo dos EUA, ficou definido que os domnios da Internet terminam com a sigla do pas em que est localizado. Assim, google.com.br diferente de google.com. WWW A World Wide Web (WWW) a parte mais popular da Internet. Devido sua facilidade de uso, logo se espalhou pelo mundo. A Grande Teia Mundial (World Wide Web) formada por um conjunto sempre crescente de computadores. O que diferencia de uma rede convencional o fato das informaes estarem conectadas umas s outras, formando o conceito de hipertexto.

- 25 -

Curso de HTML

O que so Browsers? A ferramenta bsica para a exibio de documentos na WWW so os browsers, ou como tambm so conhecidos, os navegadores. Com o passar do tempo os browsers foram ficando cada vez mais sofisticados, com incluso de imagens, novos mtodos de formatao de texto, reconhecimento de novos formatos de dados, capacidade de comunicao por voz via Internet, e recepo de vdeo e udio. H dezenas de browsers diferentes. Os mais usados no Linux so o Mozilla e o Galeon, e no Windows o Internet Explorer. Protocolo HTTP Os protocolos so lnguas usadas entre o computador que acessa a informao e o que a transmite. uma forma de padronizar os processos; assim evita-se que cada programa use uma linguagem diferente. O HTTP, isto , o Hiper Text Transfer Protocol, Protocolo de Transferncia de Hipertexto, a linguagem usada na WWW. Atravs dele, qualquer browser pode se comunicar com qualquer servidor, independente dos fabricantes dos softwares envolvidos. Os browsers mais modernos so compatveis com vrios tipos de protocolo, alm do HTTP. Entre eles est o FTP, de File Transfer Protocol. um mtodo prtico de ter acesso a arquivos em servidores de todo o mundo. Para acessar um servidor de FTP via Mozilla, basta digitar, no campo de URL, o endereo na forma: FTP://<nome do servidor de ftp>. URL URL significa Universal Resource Locator ou Localizador Universal de Recursos. A URL um conjunto de informaes que descreve um recurso qualquer na Internet, seja e-mail, FTP, telnet ou WWW. Assim, os programas sabem que protocolos devem utilizar e podem tambm orientar o usurio, quando o recurso solicitado estiver alm das possibilidades do programa. Veja abaixo, exemplos de algumas URLs vlidas: http://pobox.com/~cardoso ftp://ftp.unikey.com.br telnet:bbs.unikey.com.br mailto:cardoso@pobox.com

- 26 -

Curso de HTML

Pginas Web Pginas Web ou documentos HTML ou mesmo pginas na Internet so documentos localizados em um servidor especfico, mas acessveis mundialmente, atravs da Internet. As pginas podem ser simples, com algumas linhas de texto, ou ter milhares de pginas num nico site. A publicao de uma pgina, ao contrrio do que se pensa, no complicada, tampouco dispendiosa. Em uma pgina pessoal, voc pode disponibilizar o que quiser: seus poemas, fotos do seu gato de estimao, desenhos dos filhos, comentrios sobre o seu trabalho, etc. O limite sua imaginao e o espao em disco. Home Page Home Page a pgina inicial ou a pgina de entrada de um site. Como Planejar seu Site Projetar um site demanda um considervel planejamento prvio. Voc no somente tem de decidir qual ser seu pblico e o que incluir no site, mas ter de planejar como apresentar essa informao no site. Planejar seu site o passo mais importante. Sem um bom plano, seu site poder no ser bem-sucedido, o que significa no pior dos casos, que ningum ir querer visit-lo. Fazer a si mesmo algumas perguntas importantes e desenvolver um plano baseado em suas respostas ir ajud-lo a criar um site bemsucedido. Determinando a Finalidade de um Site Primeiro, voc deve determinar a finalidade de seu site. Antes de comear a criar seu site, voc deve fazer as seguintes perguntas: 1. Por que estou criando esse site? O que eu quero que as pessoas faam ou saibam aps visitarem meu site? fundamental identificar o principal objetivo do site e depois manter essa meta em mente enquanto o projeta. Se estiver criando um site para negcios, certifique-se de obter a opinio de todos os envolvidos no projeto e nas decises sobre o contedo. 2. Qual o pblico que quero atingir? Voc deve decidir quem ir visitar seu site e depois planejar um site que atraia essas pessoas. Para focalizar seu pblico, faa a si mesmo algumas perguntas mais especficas. Qual a formao de seus amigos, de sua famlia ou de seus clientes? Quais grupos etrios esto representados? Quais so seus interesses? O que eles fazem?

- 27 -

Curso de HTML

3. Quais informaes quero compartilhar com os visitantes de meu site? Muitas informaes esto disponveis sobre voc como pessoa, sua empresa ou organizao, ou sobre seu tpico. Determine quais informaes voc quer tornar disponveis aos seus visitantes. Seja muito cuidadoso ao determinar qual informao voc no deseja compartilhar. A melhor maneira de decidir o que voc quer no seu site observar outros sites na Internet. 4. Que tipo de informao voc quer obter dos visitantes? A Internet uma grande fonte tanto para dar como para receber informaes. Voc tem de decidir se apenas quer compartilhar informaes com aqueles que vm seu site ou se tambm quer obter informaes deles, como por exemplo, opinies sobre seu site ou informaes dos clientes. 5. Quanto tempo e dinheiro voc pode gastar mantendo seu site? Quanto mais complexo o site, mais tempo e dinheiro ele consome em sua manuteno. O que HTML? HTML a abreviao das palavras: HyperText Markup Language, que pode ser traduzido como Linguagem de Marcao de Hipertexto. No uma linguagem de programao. uma linguagem de descrio/marcao de pgina. Hipertexto um mtodo de organizao que permite que textos, imagens, sons e aes fiquem interligados. O que voc pode fazer com o HTML? A funo do HTML criar pginas na Internet. Voc pode criar textos nas pginas, fazer formatao, criar listas, criar tabelas, criar formulrios, trabalhar com imagens, etc. O HTML cria pginas estticas, sem animao. O que necessrio para trabalhar com HTML? Voc ir precisar de: 1. Um editor de textos qualquer, ou voc poder usar o Composer do Mozilla. 2. E o browser (navegador) Mozilla. Os arquivos devem ser salvos no formato texto puro (.txt) e com extenso .htm ou .html. Todos os arquivos de um projeto devem ser preferencialmente colocados dentro de uma mesma pasta (diretrio).

- 28 -

Curso de HTML

Sintaxe dos comandos HTML Nos comandos so utilizadas duas marcas ou tags que so: < > - Marca de abertura </> - Marca de fechamento <comando atributo=valor atributo=valor> Os atributos somente devem ser digitados na marca de abertura. As marcas de fechamento no aceitam atributos. Exemplos de marcas: <b> ... </b> - Coloca negrito no texto. <center> ... </center> - Centraliza o texto na pgina. <font> ... </font> - Permite definir o tipo, tamanho, cor, estilo da fonte. Como Exibir o Cdigo HTML de uma Pgina da Internet Toda pgina pode ter seu cdigo fonte (HTML) exibido, bastando apenas seguir os passos abaixo. 1. Dar um duplo clique no cone do Mozilla. 2. Acessar uma pgina qualquer. 3. Clicar no menu View e Page Source. Veja as figuras abaixo.

Estrutura Bsica do HTML A estrutura bsica de um documento HTML a seguinte: <html> <head> <title> Ttulo da Pgina </title> </head> <body> ... </body> </html> - 29 -

Curso de HTML

Elementos Bsicos do HTML <HTML> ... </HTML> - Indicam respectivamente o incio e o fim de um documento HTML. Todos os outros elementos devem estar entre estas marcas. <HEAD> ... </HEAD> - Delimitam a seo de cabealho do documento. Trata-se da primeira seo do documento. <TITLE> ... </TITLE> - Indicam o ttulo do documento, que ser exibido na barra de ttulo do navegador. Estas marcas devem constar da seo de cabealho. <BODY> ... </BODY> - Representam o corpo do documento. Entre estas marcas estar contida a maior parte do contedo a ser exibido com textos e imagens. Este elemento pode conter cinco atributos opcionais, que so: Atributo BACKGROUND: Especifica uma imagem como fundo da pgina. Exemplo: <body background=''fundo.gif''>. Atributo BGCOLOR: Configura a cor de fundo da pgina. Exemplo: <body bgcolor=''white''> Atributo TEXT: Configura a cor do texto da pgina. Exemplo: <body text=''black''> Atributos LINK, ALINK, VLINK: Configuram as cores dos links da pgina. alink configura a cor do link ativo, isto , quando clicado. VLINK configura a cor do link j visitado. Exemplo: <body link=blue vlink=purple alink=red> Este exemplo configura uma pgina com links azuis, links ativos em vermelho e links visitados em roxo. Como o HTML no uma linguagem de programao, voc nunca ser avisado de erros que tenha cometido na digitao ou na edio do seu documento. O simples esquecimento de uma barra pode gerar efeitos colaterais inesperados na visualizao de uma pgina, e estes efeitos sero o nico sinal de que algo est errado. Ttulos e Subttulos O destaque para ttulos e subttulos importante, porque mostra ao leitor uma viso geral sobre o que trata o texto em questo. Voc pode utilizar at seis nveis de ttulos, que so numerados de 1 (o maior) a 6 (o menor). So tags do tipo incio-fim. Exemplos: <h1> </h1> <h2> </h2> <h3> </h3> - 30 -

Curso de HTML

Exerccio Abrir o Composer do Mozilla. Roteiro: 1. Abrir o Mozilla 2. Clicar no boto Composer, que fica localizado no canto inferior esquerdo da tela. o terceiro boto da esquerda para direita. 3. Clicar na guia <HTML> Source. Veja a figura abaixo:

4. Digitar os comandos abaixo. <html> <head> <title> Exerccio 01</title> </head> <body bgcolor=''white''> <h1> Primeira Pgina </h1> </body> </html> Agora, vamos salvar no formato texto, com o nome exercicio01.htm e executar o programa. Veja na figura abaixo como dever ficar a sua tela.

- 31 -

Curso de HTML

Acentuao Voc no deve acentuar diretamente os documentos HTML, porque no possvel saber que tabela de caracteres o usurio dispe, e nem saber a partir de qual equipamento a pgina ser acessada. Como cada computador lida com os caracteres de uma forma diferente, os textos no devem ser acentuados. O mecanismo para se solucionar esse impasse a tabela de caracteres padro desenvolvida pela ISO International Standards Organization. uma organizao que desenvolve e administra padres. Veja os exemplos abaixo: Para conseguir Formatao de Textos Todos os comandos que alteram o estilo do texto so do tipo liga-desliga, ou seja, precisam ser especificados em pares, marcando o incio e o fim do trecho que sofrer a formatao. Comando <font face=... size=... color=...> ... </font> - Define o tipo, o tamanho e a cor da fonte. No necessrio usar todos os atributos juntos. O atributo FACE define o tipo de letra (fonte). O atributo SIZE define o tamanho da fonte. A relao dos tamanhos vlidos so: SIZE 1 2 3 4 5 6 7 8 pt 10 pt 12 pt 14 pt 24 pt 36 pt 72 pt Voc deve digitar &Aacute; &Agrave; &Atilde; &Acirc; &Ccedil;

- 32 -

Curso de HTML

O atributo COLOR especifica a cor do texto. Seu valor especificado atravs de um nome predefinido de cores ou no formato hexadecimal. Veja abaixo, a tabela das principais cores: Nome da cor Nome da cor (Ingls) (Portugus) Beige Black Blue Cyan Gold Green Gray Yellow Magenta Maroon Olive Orange Red Pink Purple White Bege Preta Azul Ciano Ouro Verde Cinza Amarela Magenta Marrom Verde oliva Laranja Vermelha Rosa Prpura Branca Hexadecimal #F5F5DC #000000 #0000FF #00FFFF #FFD700 #008000 #808080 #FFFF00 #FF00FF #800000 #808000 #FFA500 #FF0000 #FFC0CB #800080 #FFFFFF

Os principais Comandos de Estilo de Texto so: Comando Negrito Itlico Sublinhado Big Tachado Small Sobrescrito Subscrito Pisca-pisca Sintaxe <b> texto </b> <i> texto </i> <u> texto </u> <big> texto </big> <s> texto </s> <small> texto </small> ^texto _texto <blink> texto </blink> Funo Aplica negrito. Aplica itlico. Aplica sublinhado. Aumenta o tamanho da fonte e aplica negrito. Aplica tachado. Reduz e altera a fonte. Aplica sobrescrito. Aplica subscrito. Faz o texto piscar. Alguns navegadores no aceitam este comando. scrollamount=...> ...

Comando <marquee width=... scroll=... direction=... </marquee> - Faz o texto rolar horizontalmente pela tela.

O atributo WIDTH define a largura de rolagem do texto. O atributo SCROLL define o tempo de rolagem. O atributo DIRECTION define a direo de rolagem. Pode ser left ou right. O atributo SCROLLAMOUNT define a velocidade de rolagem do texto. - 33 -

Curso de HTML

Exemplo: <marquee width=''50%'' scroll=''infinite'' direction=''left'' scrollamount=''10''> texto </marquee> Exerccio Abrir um arquivo novo no Composer e digitar os comandos abaixo. <html> <head> <title> Formatao de Textos </title> </head> <body> <h1> Formatao de Textos </h1> <b> Negrito </b><br> <i> Itlico </i><br> <u> Sublinhado </u><br> <big> Aumenta a fonte e aplica negrito </big><br> <small> Reduz e altera a fonte </small><br> <s> Texto tachado </s> <br> H ₂ O <br> X² <br> <font face="Arial" size="6" color="red"> Texto em Arial, tamanho = 6 e na cor vermelha </font> </body> </html> Observao: O comando <br> fora uma quebra de linha, sem deixar uma linha em branco. Salvar no formato texto, com o nome exercicio02.htm e executar o programa. Veja na figura abaixo como dever ficar a sua tela.

- 34 -

Curso de HTML

Formatao de Pargrafos Comando <P ALIGN=...> ... </P> - Delimita um pargrafo. possvel omitir o elemento de fim </p> sem danos ao resultado final. O efeito visual uma linha em branco antes do incio do prximo pargrafo. O atributo opcional ALING configura o alinhamento do pargrafo e pode conter os valores left (esquerda), center (centro) ou right (direita). Comando <CENTER> ... </CENTER> - Centraliza texto e pargrafos. Comando <BLOCKQUOTE> ... </BLOCKQUOTE> - Este comando destaca um bloco de texto citado de outra fonte atravs de uma endentao direita. utilizado na criao de citaes longas que no devem ser aninhadas em pargrafos. Linhas Horizontais As Linhas Horizontais so utilizadas para dar destaque a ttulos ou para gerar a sensao de quebra entre um e outro item de informao. Trata-se de uma marca solitria, que pode ser utilizada com alguns atributos opcionais <HR SIZE=... WIDTH=... ALIGN=...> ou sem nenhum atributo <HR>. O atributo SIZE configura a espessura da linha. O atributo WIDTH configura a largura da linha, e pode ser especificado em pixels ou percentual. O atributo ALIGN configura o alinhamento da linha. Pode ser: left, center e right. Hyperlinks Os Hyperlinks so construes HTML que permitem o acesso a recursos na Internet com um simples clique. possvel programar um hyperlink para levar um usurio para o topo da pgina atual ou para um servidor em outro pas. Os hyperlinks podem ter a forma de hipertexto ou hipermdia. Na maioria dos navegadores, o hipertexto exibido como um texto azul e sublinhado. A categoria hipermdia inclui hiperimagens. Estas so simples imagens grficas incorporadas, tais como fotografias ou cones, que aceitam vnculos. Os destinos de um hyperlink so: a) Um indicador (um local na mesma pgina); b) Uma pgina interna; c) Um e-mail; d) Um site externo; Definir um Link Dentro de uma Pgina Um link dentro de uma pgina um hyperlink que aponta para um outro local dentro da mesma pgina. Um link dentro de um pgina tem duas partes: o link onde o usurio deve clicar e o ponto na pgina para o qual o cursor deve saltar. A marca ncora <A> permite links para outros pginas ou para outro local na mesma pgina. - 35 -

Curso de HTML

No caso deste tipo de vnculo, preciso definir uma ncora com o nome do local de destino. O formato o seguinte: <A NAME=''topo''>, onde topo o nome atribudo ao local de destino. O nome do local de destino deve iniciar com uma letra e no pode comear com nmero e nem com caractere especial. Exemplo: <a name=''topo''> ... </a> ... <a href=''#topo''> Voltar para o Incio </a> Onde #topo o indicador do local de destino. O smbolo cerquilha (#) instrui ao navegador a posio do indicador nomeado. Voltar para o Incio a frase que os navegadores exibem como hyperlink. Definir um Link para uma Pgina Interna Um Web site consiste de pelo menos algumas pginas separadas. Para tornar estas pginas acessveis e convenientes para os visitantes, preciso definir os links entre as pginas. Costuma-se colocar estes links no incio ou no final de cada pgina. Exemplo: <a href=''pgina2.html''> Link para a Pgina 2 </a> Neste exemplo criado um link para a pgina de nome pgina2.html. Definir um Link ''Mailto'' Um link Mailto permite que os visitantes enviem mensagens para o endereo de e-mail definido, simplesmente clicando no hyperlink. Quando o usurio clica no link mailto, o aplicativo de correio eletrnico padro abre uma janela de mensagem endereada para o mailto de destino. Veja a figura abaixo.

A seo de rodap um bom local para se colocar um link mailto. Observao: Para este link funcionar corretamente, necessrio que os programas de correio estejam configurados.

- 36 -

Curso de HTML

Exemplo: <a href=''mailto:aluno1@telecentros.sp.gov.br''> Telecentros </a> Definir um Link para Outro Site Os hyperlinks externos fazem vnculos com outros sites na Internet. So eles que tornam a Internet possvel. Deve-se incluir uma URL completa quando voc definir um hyperlink externo. Exemplo: <a href=''http://www.telecentros.sp.gov.br''> Telecentros </a> Definir um Link em uma Imagem Um link em uma imagem tambm chamado de vnculo de hipermdia, que um grfico que funciona com um hyperlink. Um uso para vnculos em imagens criar botes e adicion-los barra de navegao. Exemplo: <a href=''pgina2.html''> <img src=''prefeitura.jpg''> </a> Imagens Alm de texto, possvel colocar imagens em pginas Web. Os formatos grficos padres da Internet so: JPEG e GIF. Cada um deles tem vantagens e desvantagens. A escolha entre qual deles voc usar vai depender da imagem desejada. a) GIF - Graphics Interchange Format O formato GIF usa uma tcnica de compresso no mesmo estilo de programas como o Winzip. Os arquivos GIF podem ter um mximo de 256 cores, e para a grande maioria dos usurios mais do que suficiente, j que a grande maioria das pessoas tem suas placas de vdeo configuradas com este nmero de cores. b) JPEG - Joint Photografic Experts Group O formato JPEG foi criado para que imagens ''true-color'' (com 16 milhes de cores) pudessem ser armazenadas em arquivos pequenos. O formato JPEG consegue isso usando um sistema onde a qualidade da imagem reduzida de forma que o arquivo fique menor. S que, na maioria das vezes, a perda de qualidade, no notada na tela de um monitor, da o seu grande sucesso. Ao contrrio do GIF, que tem uma compresso padro (que no pode ser alterada), o JPEG tem uma compresso varivel. Porm, quanto mais voc comprime, maior ser a perda de qualidade.

- 37 -

Curso de HTML

Principais Diferenas entre as Imagens GIF e JPEG Caracterstica Animao Tamanho do arquivo Resoluo Transparncia Velocidade de download Exibio Qual Formato Escolher? O que vai determinar o formato a ser escolhido o nmero de cores de sua imagem. Normalmente, voc deve usar o GIF para desenhos ou logotipos, e usar JPEG para fotos ou imagens com muita variao de cores. Para que uma imagem seja apresentada em um documento HTML, necessrio fazer uma referncia ao nome do arquivo da imagem, atravs da marca <IMG SRC=''figura.gif''>. Caso a imagem esteja em um diretrio diferente do documento HTML, o nome do diretrio deve ser includo na referncia. Lembre-se que voc pode tambm usar uma imagem como link. Neste caso, combine os elementos de link e imagem. Exemplo: <a href=''http://www.telecentros.sp.gov.br''> <img src=''imagem.gif'' border=''0'' alt=''telecentros''> </a>. O atributo BORDER serve para definir uma borda para a imagem. O atributo ALT server para definir uma legenda para a imagem com no mximo 255 caracteres. GIFs Animados Um recurso muito bom e bastante utilizado para criar animaes na sua pgina utilizar as Gifs animadas. GIF o formato de imagem mais utilizado na Internet. Esse padro tem duas grandes vantagens: utilizar fundos transparentes e criar animaes. Definir uma Imagem no Segundo Plano Se voc quiser ir alm de um segundo plano apenas colorido, o HTML lhe permite atribuir uma imagem, para ser exibida no segundo plano de sua pgina Web. Sim Maior Menos cores (256) Sim Mais rpido Monta distorcida GIF No Menor Mais cores (16 milhes) No Mais lento Monta por faixas JPEG

- 38 -

Curso de HTML Exemplo: <body background=''figura.gif''> O comando <! ... --> - Permite inserir comentrios no seu programa. Exerccio Abrir um arquivo novo e digitar os comandos abaixo. <html> <head> <title>Telecentros</title> </head> <body> <a name="topo"> </a> <p align="center"> <!--Link para outro site, usando uma figura --> <a href="http://www.telecentros.sp.gov.br"> <img src="telecentro.gif" border="0" alt="Telecentros"> </a> <br> <br> <font face="arial" size="4"> Voc j conhece a pgina <!--Link para uma pgina --> <a href="exercicio02.html"> Exerccio02 </a> </p> <hr size="2"> <p> O site dos Telecentros ... </font> </p> <p> No deixe de conhecer o <b> <font size="4" color="red"> Frum, </font> </b> onde voc poder participar de diversos grupos de discusso. </font> </p> <hr size="2"> <br> <br> <br> <br> <br> <br> <br> <!--Link para dentro da mesma pgina --> <a href="#topo"> Voltar para o Incio </a> <br> <br> <b> Enviar comentrios para:</b> <!--Link para correio eletrnico --> <a href="mailto:fulano@beltrano.com.os">fulano@beltrano.com.os </a> </body> </html>

- 39 -

Curso de HTML

Salvar no formato texto, com o nome exercicio03.htm e executar o programa. Veja na figura abaixo como dever ficar a sua tela.

Listas Na linguagem HTML existem elementos especficos para a criao de listas, que podem ser listas ordenadas (OL), listas sem ordenao (UL), ou listas de definies (DL). Um detalhe interessante que podem ser criadas listas aninhadas, ou seja, listas dentro de listas. A seguir, veremos as caractersticas de cada uma delas. Listas Ordenadas <OL TYPE=... START=... > </OL> - OL significa Ordered Lists. A estrutura das listas ordenadas bastante simples. Entre os elementos de incio e fim, os itens da lista so definidos pelos elementos <LI> </LI>. O atributo opcional TYPE define como ser o tipo de numerao de cada linha. Os tipos disponveis so: A (A, B, ..., Z), a (a, b, ..., z), I (i, ii, ..., v), e 1 (1, 2, ..., 5). Se omitido, utilizado o tipo padro (1, 2, 3, 4). O atributo opcional START define a partir de que elemento a numerao deve se iniciar. Exerccio Abrir um arquivo novo e digitar os comandos abaixo. <html> <head> <title> Listas Ordenadas </title> </head> <body> - 40 -

Curso de HTML <h2> Lista ordenada por nmeros </h2> <ol> <li> Elemento 1 </li> <li> Elemento 2 </li> <li> Elemento 3 </li> <li> Elemento 4 </li> </ol> <h2> Lista ordenada por letras, iniciando em D </h2> <ol type=''a'' start=4> <li> Elemento 1 </li> <li> Elemento 2 </li> <li> Elemento 3 </li> <li> Elemento 4 </li> </ol> </body> </html> Salvar no formato texto, com o nome exercicio04.htm e executar o programa. Veja na figura abaixo como dever ficar a sua tela.

Listas No Ordenadas <UL TYPE=...> ... </UL> - UL significa Unordered Lists. A estrutura das listas sem ordenao a mesma das listas ordenadas, sendo que, na apresentao, os itens sero precedidos por um marcador (bullet). No caso de listas sem ordenao aninhadas (listas dentro de listas), o paginador utilizar uma marcador (bullet) diferente para os itens de cada lista. O atributo TYPE pode ser:

square: um quadrado preenchido. circle: um crculo vazado. disk: um crculo preenchido.

Exerccio - 41 -

Curso de HTML

Abrir um arquivo novo e digitar os comandos abaixo. <html> <head> <title> Listas No-Ordenadas </title> </head> <body> <h2> Lista No-Ordenada </h2> <ul> <li> Elemento 1 </li> <li> Elemento 2 </li> <li> Elemento 3 </li> <li> Elemento 4 </li> </ul> <h2> Duas listas No-Ordenadas aninhadas </h2> <ul type=square> <li> Elemento 1 </li> <li> Elemento 2 <ul> <li> Elemento 2.1 </li> <li> Elemento 2.2 </li> <li> Elemento 2.3 </li> </ul> </li> <li> Elemento 3 </li> <li> Elemento 4 </li> </ul> </body> </html> Salvar no formato texto, com o nome exercicio05.htm e executar o programa. Veja na figura abaixo como dever ficar a sua tela.

- 42 -

Curso de HTML

Como j foi visto acima, <LI> ... </LI> o elemento que define um item de uma lista ordenada ou sem ordenao. O seu contedo pode ser texto, outras listas, imagens, links, etc. Lista de Definio <DL> ... </DL> - So marcas que englobam uma lista de definies, ideais para a criao de glossrios e coisas do gnero. A estrutura desta lista diferente das outras, pois existem dois elementos o termo a ser definido (DT), e a definio propriamente dita (DD). Na exibio cada termo aparece em uma linha, e a respectiva definio na linha seguinte, deslocada para a direita. Exerccio Abrir um arquivo novo e digitar os comandos abaixo. <html> <head> <title> Listas de Definio </title> </head> <body> <h2> Listas de Definio </h2> <dl> <dt> HTML </dt> <dd> HyperText Markup Language </dd> <dt> OL </dt> <dd> Listas Ordenadas </dd> <dt> UL </dt> <dd> Listas Sem Ordenao </dd> <dt> LI </dt> <dd> Elemento da Lista </dd> </dl> </body> </html> Salvar no formato texto, com o nome exercicio06.htm e executar o programa. Veja na figura abaixo como dever ficar a sua tela.

- 43 -

Curso de HTML

Ao fazer suas listas, lembre-se sempre que voc pode combinar tipos diferentes para chegar ao resultado esperado. Tabelas Assim como as listas, no HTML existem elementos especficos para a criao e formatao de tabelas. O recurso de tabelas muito interessante e muito usado nas pginas Web. As tabelas so formadas por linhas e colunas, e na interseo delas esto as clulas. Na linguagem HTML, voc pode inserir nas clulas tudo que normalmente faz parte do corpo de um documento, como textos, links, imagens, listas e at outras tabelas. Elementos de uma Tabela As marcas que englobam a definio de uma tabela so: <TABLE> ... </TABLE>. Todas as outras marcas referentes tabelas - linhas e clulas - somente sero consideradas se includas entre estas marcas. Comando <CAPTION> ... </CAPTION> - Trata-se de um elemento opcional que define o ttulo da tabela, e deve constar entre as marcas que definem a tabela, mas separado das marcas que definem linhas e colunas. Sem parmetros, o ttulo apresentado acima da tabela e centralizado. Comando <TR> ... </TR> - a abreviao das palavras Table Row ou Linha de Tabela. Este o elemento utilizado na definio de linhas das tabelas. As tabelas so definidas em linhas, sendo as linhas compostas de clulas. O nmero de linhas de uma tabela corresponde ao nmero de <TR> </TR> existentes. Comando <TD> ... </TD> - a abreviao das palavras Table Data ou Dado de Tabela. Estas marcas delimitam as clulas que compem as linhas, e assim sendo devem estar inseridas entre marcas de linhas. O alinhamento padro de uma clula esquerda horizontalmente e centralizado verticalmente, e caso o nmero de clulas varie de uma linha para outra, as linhas com menos clulas so completadas direita com clulas em branco. Comando <TH> ... </TH> - a abreviao das palavras Table Header ou Cabealho de Tabela. o elemento que define as clulas de cabealho. As clulas de cabealho tm as caractersticas idnticas s clulas de dados definidas por <TD>, a no ser pelo alinhamento padro horizontal, que centralizado, e pela utilizao de fonte em negrito. Exerccio Abrir um arquivo novo e criar a tabela da figura abaixo. <html> <head> <title> Tabela Simples </title> </head> <body> - 44 -

Curso de HTML <br> <table> <caption> <b> Tabela Simples </b> </caption> <br> <tbody> <tr> <td> <br> </td> <th> Coluna 1 </th> <th> Coluna 2 </th> </tr> <tr> <th> Linha 1 </th> <td> Clula 1-1 </td> <td> Clula 1-2 </td> </tr> <tr> <th> Linha 2 </th> <td> Clula 2-1 </td> <td> Clula 2-2 </td> </tr> <tr> <th> Linha 3 </th> <td> Clula 3-1 </td> <td> Clula 3-2 </td> </tr> </tbody> </table> <br> <br> <br> </body> </html> Salvar no formato texto, com o nome exercicio07.htm e executar o programa. Veja na figura abaixo como dever ficar a sua tela.

- 45 -

Curso de HTML

Parmetros Estes elementos bsicos possuem alguns parmetros que permitem um maior controle sobre alguns detalhes da apresentao da tabela. Parmetros do Elemento <TABLE> border A apresentao padro de uma tabela sem bordas. A presena do parmetro BORDER indica justamente que deve ser desenhada uma borda em torno de cada clula da tabela. Pode ser usado para indicar a espessura da borda em pixels. Exemplo: <table border=2> width Especifica a largura da tabela, que pode ser definida em pixels ou em percentual referente largura da janela. Caso no seja especificado, o prprio browser se encarrega de determinar a largura mais adequada, baseado nos textos inseridos nas clulas. Exemplo: <table width=75%> cellspacing Define o espao entre as clulas, ou seja, a largura das linhas de grade (as bordas que envolvem as clulas). especificado em pixels. Exemplo: <table cellspacing=3> cellpadding Determina em pixels, o espao entre o contedo e as bordas da clula. Exemplo: <table cellpadding=6> align Configura o alinhamento horizontal da tabela em relao aos outros elementos da pgina. Pode conter valores LEFT (esquerda), CENTER (centro) ou RIGHT (direita). Este parmetro no funciona em alguns browsers. bgcolor Define a cor de fundo da tabela.

- 46 -

Curso de HTML

Exerccio Acrescentar no Exerccio 07 a linha abaixo: <body> ... <table border="1" width="50%" cellspadding="4" bgcolor="yellow"> Salvar no formato texto, com o nome exercicio04.htm e executar o programa. Veja na figura abaixo como dever ficar a sua tela.

Parmetros do Elemento <TR> align Configura o alinhamento horizontal dos elementos contidos nas clulas de uma linha. Pode conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT (direita). Se omitido, o alinhamento esquerda para as clulas de dados (<TD>), e centralizado para clulas de cabealho (<TH>). valign Define o alinhamento vertical dos elementos contidos nas clulas de uma linha. Pode conter os valores TOP (topo), MIDDLE (meio) ou BOTTOM (fundo). Se omitido, o alinhamento ao meio. bgcolor Define a cor da linha. Parmetros dos Elementos <TD> e <TH> align Configura o alinhamento horizontal dos elementos contidos na clula. Pode conter os valores LEFT (esquerda), CENTER (centro) ou RIGHT (direita). Se omitido, o alinhamento esquerda para as clulas de dados (<TD>), e centralizado para clulas de cabealho (<TH>). - 47 -

Curso de HTML

valign Define o alinhamento vertical dos elementos contidos na clula. Pode conter os valores TOP (topo), MIDDLE (meio) ou BOTTOM (fundo). Se omitido, o alinhamento ao meio. bgcolor Define a cor da linha. nowrap Quando este parmetro encontra-se associado a uma clula, o browser entende que o texto dentro daquela clula no pode ser dividido em mais de uma linha. Este parmetro deve ser utilizado com cuidado, para evitar colunas demasiadamente largas. colspan Especifica o nmero de colunas de uma tabela a ser ocupado por uma clula. Deve ser utilizado para expandir uma clula horizontalmente. Se atribuirmos COLSPAN=2 a uma clula, ela ocupar o seu espao e o espao de mais de uma clula para a direita. rowspan Define o nmero de linhas a ser ocupado por uma clula. Deve ser utilizado para expandir uma clula verticalmente (para baixo). Ao atribuir rowspan=2 para uma clula, diminua em 1 o nmero de clulas da linha de baixo. Exerccio Abrir um arquivo novo e digitar os comandos abaixo, para criar uma tabela complexa. <html> <head> <title> Tabela Complexa </title> </head> <body> <table width=50% cellspacing=0 cellpadding=4 bgcolor=yellow> <tr bgcolor=black align=center> <td colspan=3> <font size=3 color=yellow> <i> <b> Tabela Complexa </b> </i> </font> </td> </tr> <tr> <td colspan=3> </td> </tr> <tr bgcolor=black> <td> </td> <th> <font color=yellow> Coluna 1<font face=yellow> </th> <th> <font color=yellow> Coluna 2 <font face=yellow></th> </tr> <tr align=center> <th bgcolor=black> <font color=yellow> Linha 1 </font> </th> <td> Clula 1-1 </td> <td> Clula 1-2 </td> </tr> - 48 -

Curso de HTML <tr align=center> <th bgcolor=black> <font color=yellow> Linha 2 </font> </th> <td> Clula 2-1 </td> <td> Clula 2-2 </td> </tr> <tr align=center> <th bgcolor=black> <font color=yellow> Linha 3 </font> </th> <td> Clula 3-1 </td> <td> Clula 3-2 </td> </tr> </table> </body> </html> Salvar no formato texto, com o nome exercicio09.htm e executar o programa. Veja na figura abaixo como dever ficar a sua tela.

Formulrios Com certeza voc j deve ter preenchido algum formulrio em suas viagens pela Internet. Seja para cadastros, pesquisas ou mesmo envio de comentrios, os formulrios aumentam o poder de interao da Web e so uma forma diferenciada de receber dados dos visitantes de sua pgina. Atualizao ou consultas a base de dados, envio de dados por e-mail, ou simplesmente a construo de uma nova pgina (gerada a partir dos novos dados) so algumas das aplicaes mais comuns. Elementos HTML para Formulrios 1. <form action=... method=... target=... > ... </form> Estes so os elementos que delimitam um formulrio numa pgina. O parmetro ACTION (ao) deve conter o endereo do programa que vai receber os dados no formulrio (escrito em PHP por exemplo).

- 49 -

Curso de HTML

O parmetro METHOD (mtodo) define como as informaes coletadas no formulrio sero enviadas para a URL indicada no atributo ACTION. Ele deve ter os valores GET ou POST. O valor mais comum POST, que envia todas as informaes separadamente. O GET envia todos os dados do formulrio em uma sequncia de caracteres concatenados. O parmetro TARGET (alvo) opcional e s necessrio quando voc est usando frames, e deseja que a resposta ao formulrio seja exibida em um frame diferente do que est o formulrio. 2. <input type=... name=... value=... size=... maxlenght=... checked> INPUT significa entrada de dados, logo este um dos elementos que determina como ser a entrada de dados nos campos de um formulrio. O INPUT o elemento que define o formato da entrada dos dados no formulrio. Use-o para montar caixas de texto, botes e at caixas de verificao de senhas. O parmetro TYPE (tipo) muito importante pois define o tipo do elemento: caixa de texto, boto de escolha, ou boto simples. Para ficar mais claro, mostraremos um de cada vez, explicando quais parmetros devem ser usados. O parmetro NAME deve conter o nome, ou identificador, do campo e o parmetro VALUE pode conter um valor predefinido para o campo. Tipos do Elemento INPUT 2.1. <input type=text name=... value=... size=... maxlenght=...> O valor TEXT (texto) no parmetro TYPE indica que o campo ser de texto, ou seja, uma campo onde voc digita os dados. O parmetro VALUE (valor), neste caso, pode ser usado se voc quiser definir uma valor prvio para o campo, de tal forma que, quando a pgina for carregada, este valor j venha preenchido. O parmetro SIZE (tamanho) configura o tamanho do campo e baseado no nmero de caracteres. Se voc quiser um campo com tamanho de 40 caracteres, dever digitar SIZE=40. Note que este valor no limita o campo em 40 caracteres, ele somente define o tamanho com que ser mostrado na pgina. O que define o nmero mximo de caracteres que podem ser digitados o parmetro MAXLENGHT (comprimento mximo), que opcional. 2.2. <input type=password name=... value=... size=... maxlenght=...> Com o valor PASSWORD (senha) no parmetro TYPE, tudo funciona da mesma forma que o valor TEXT, exceto que todas as letras digitadas aparecem como um asterisco (tal como quando voc digita sua senha para se conectar Internet).

- 50 -

Curso de HTML

2.3. <input type=radio name=... value=... checked> O valor RADIO no parmetro TYPE define botes de escolha. Eles so usados para questes onde somente uma opo pode ser selecionada. Em nosso exemplo, este tipo de elemento serve para construir as opes para a pergunta ''Voc gostou da minha pgina?''. O parmetro NAME, neste caso, deve ser igual para todos os campos deste tipo, pois estar identificando a questo formulada. O parmentro VALUE deve conter o valor do campo, que ser passado ao programa interpretador do formulrio. O parmetro CHECKED deve ser usado quando voc desejar que uma das opes esteja selecionada como padro. 2.4. <input type=checkbox name=... value=... checked> O valor CHECKBOX no parmetro TYPE define botes de verificao. A traduo do termo checkbox meio difcil, mas, ao contrrio dos botes de escolha (do tipo RADIO), ele deve ser usado quando uma ou mais opes so vlidas. No nosso exemplo, usamos este tipo na pergunta ''Voc gostaria que eu respondesse a este seu comentrio?''. O parmetro NAME, neste caso, deve ser diferente para cada campo. O parmetro VALUE deve conter o valor do campo, que ser passado ao programa interpretador do formulrio. O parmetro CHECKED pode ser usado se voc desejar que a opo esteja selecionada como padro. 2.5. <input type=reset value=...> O valor RESET no parmetro TYPE define um boto que limpa todos os campos, colocando os mesmos valores de quando a pgina foi carregada. No parmetro VALUE, pode-se definir o que estar escrito no boto. Caso nenhum valor seja definido, aparecer escrito somente ''Reset''. Em nosso exemplo usamos este elemento no boto ''Limpar todos os campos''. 2.6. <input type=submit name=... value=...> O valor SUBMIT no parmetro TYPE define um boto que aciona o envio das informaes preenchidas no formulrio ao programa interpretador (aquele definido no parmetro ACTION do elemento FORM). O parmetro VALUE define o que estar escrito no boto. Caso nenhum valor seja definido, aparecer escrito ''Submit''. Para definir o boto ''Enviar os comentrios'' de nosso exemplo, usamos este tipo de elemento.

- 51 -

Curso de HTML 2.7. <input type=image name=... src=... alt=...> Alternativamente ao boto tipo SUBMIT, pode-se usar uma imagem. Para isso, existe o tipo IMAGE. Neste caso, passam a existir os parmetros SRC e ALT normalmente usados no elemento que define uma imagem. O parmetro SRC define o endereo ou nome do arquivo da imagem. O parmetro ALT, opcional, define o texto que ser mostrado, caso a imagem no seja carragada. 2.8. <input type=hidden name=... value=...> O valor HIDDEN (oculto) no parmetro TYPE define dados que devem ser passados ao programa interpretador, mas que no devem aparecer para quem est vendo a sua pgina Neste caso, o parmetro NAME identifica o dado e o parmetro VALUE define o valor que deve ser passado. 3. <select name=... size=... > <option value=...> <option value=...> ... </select> O elemento SELECT possibilita definir uma lista de opes para o visitante escolher. O parmetro NAME define o nome desta lista, e SIZE define quantos elementos sero exibidos na tela simultaneamente. Se for omitido, somente uma opo aparece por vez.

Cada opo da lista definida atravs de um elemento OPTION e o parmetro VALUE deste elemento que determinar o valor de cada opo. Em nosso exemplo, usamos este elemento para criar a lista de opes para a resposta da pergunta ''Qual a pgina de que voc mais gostou?''. 4. <textarea name=... rows=... cols=...> ... </textarea> O elemento TEXTAREA (rea de texto) permite definir um campo de texto com vrias linhas. Ele til para colher comentrios e depoimentos dos visitantes. O parmetro ROWS define o nmero de linhas da caixa de texto, e o parmetro COLS define quantos caracteres (colunas) cada linha possui. O parmetro NAME define o nome da caixa de texto.

- 52 -

Curso de HTML

Exerccio Abrir um arquivo novo e digitar os comandos abaixo, para criar um formulrio. <html> <head> <title>Formulrio 01</title> </head> <body> <h4> Cadastro de Clientes </h4> <hr> <form method="post" action="mailto: meu_nome@provedor.com.br"> <input type="hidden" name="AnyFormMode" value="mail"> <input type="hidden" name="AnyFormDisplay" value="standard"> <input type="hidden" name="AnyFormTo" value="meu_nome@provedor.com.br"> <input type="hidden" name="AnyFormSubject" value="Dados dos Clientes"> <b> Nome: </b> <input type="text" name="nome" size="30" maxlength="5"> <br> <br> <b> Digite o seu E-Mail: </b> <input type="text" name="anyformfrom" size="30"> <b> Senha do E-Mail: </b> <input type="password" name="senha" size="5" maxlength="5"> <br> <br> <b>Sexo:</b> <br> <input type="radio" name="sexo"> Masculino <br> <input type="radio" name="sexo"> Feminino <b> <br> <br> Produtos Comprados:</b><br> <input type="checkbox" name="computador"> Computador <br> <input type="checkbox" name="impressora"> Impressora <br> <input type="checkbox" name="monitor"> Monitor <br> <input type="checkbox" name="teclado"> Teclado <br> <br> <b> Estado: </b> <select name="listagem" selected=""> <option size="3"> AM </option> <option> MG </option> <option> PE </option> <option> RJ </option> <option> SP </option> </select> <br> <br> <b> Histrico do Cliente: </b><br> <textarea name="observacao" cols="30" rows="3"> </textarea> <br> <br> <input type="file" name="Procurar" value="Procurar"> <input type="submit" value="Enviar Informaes"> <input type="reset" value="Limpar"> <br> </form> </body> </html> - 53 -

Curso de HTML

Salvar no formato texto, com o nome exercicio10.htm e executar o programa. Veja na figura abaixo como dever ficar a sua tela.

Hospedando seu Site Depois de passar por todas as etapas apresentadas neste manual, nada melhor do que conhecer como hospedar sua home page na Internet. Voc tem duas opes. Ou escolhe um servio de hospedagem gratuito ou um servio de hospedagem pago. Os dois tm vantagens, desvantagens e limitaes. Sites de Hospedagem Gratuita Se o seu site pessoal, ento a escolha da hospedagem gratuita pode ser uma boa opo. Para isso, voc deve escolher um servio de hospedagem gratuita como o Geocities, ou outro qualquer de sua preferncia. A desvantagem do servio grtis que o seu site pode acabar tendo um endereo gigantesco e difcil de decorar, e ter janelas abrindo exibindo anncios inseridos pelo servio de hospedagem. Sites de Hospedagem Paga Os servios de hospedagem paga oferecem muito mais recursos do que qualquer empresa de hospedagem grtis pode oferecer. A principal vantagem o registro de domnio, isto , voc pode ter um site com o nome do tipo www.seunome.com.br, coisa que nenhum servio de hospedagem grtis oferece. Hospedando seu Site no Geocities Para hospedar seu site no Geocities basta acessar o endereo http://br.geocities.yahoo.com/, e seguir as instrues em portugus. Os passos so simples, e basta segui-los risca para ter seu site publicado. - 54 -

Curso de HTML

Java Script JavaScript uma linguagem que permite injetar lgica em pginas escritas em HTML (HiperText Mark-up Language). Voc ter aqui uma breve viso de como funciona o JavaScript, alm de sua utilizao prtica. Os pargrafos de lgica do JavaScript podem estar "soltos" ou atrelados ocorrncia de eventos. Os pargrafos soltos so executados na sequncia 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 dos comandos 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. Operadores Lgicos So operadores a serem utilizados em comandos condicionais, tais como: IF , FOR e WHILE. Os comandos condicionais sero vistos mais a frente. == != > >= < <= && || 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.

- 55 -

Curso de HTML Estes operadores so largamente utilizados. + * / % adio de valor e concatenao de strings subtrao de valores multiplicao de valores diviso de valores obtem o resto de uma diviso:

Ex: 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 s expresses: X = X + 1 ou X = X - 1 respectivamente. Para inverter sinal: X = -X negativo para positivo ou positivo para negativo. Controles Especiais \b - backspace \f - form feed \n - new line caracters \r - carriage return \t - tab characters // - Linha de comentrio /*....*/ - Delimitadores para inserir um texto com mais de uma linha como comentrio. 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:

- 56 -

Curso de HTML

Comando IF: if (condio) { ao para condio satisfeita } [ else { ao para condio no satisfeita } ] Ex: if (Idade < 18) {Categoria = "Menor" } else {Categoria = "Maior"} Comando FOR: for ( [inicializao/criao de varivel de controle ;] [condio ;] [incremento da varivel de controle] ) { ao } Ex: for (x = 0 ; x <= 10 ; x++) {alert ("X igual a " + x) } Comando WHILE: Executa uma ao enquanto determinada condio for verdadeira. while (condio) { ao } Ex: var contador = 10 while (contador > 1) { contador-- } OBS: Nos comandos FOR e WHILE a diretiva "break" pode ser utilizada para interromper a condio principal e sair do loop. Da mesma forma, a diretiva "continue" interrompe uma ao (se determinada condio ocorrer) mas volta para o loop. Diretivas/condies entre [ ] significam que so opcionais. 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. onload - Ocorre na carga do documento. Ou seja, s ocorre no BODY do documento. onunload - Ocorre na descarga (sada) do documento. Tambm s ocorre no BODY.

- 57 -

Curso de HTML

onchange - Ocorre quando o objeto perde o focus e houve mudana de contedo. vlido para os objetos Text, Select e Textarea. onblur - Ocorre quando o objeto perde o focus, independente de ter havido mudana. vlido para os objetos Text, Select e Textarea. onfocus - Ocorre quando o objeto recebe o focus. vlido para os objetos Text, Select e Textarea. onclick - Ocorre quando o objeto recebe um Click do Mouse. vlido para os objetos Buton, Checkbox, Radio, Link, Reset e Submit. onmouseover - Ocorre quando o ponteiro do mouse passa por sobre o objeto. vlido apenas para Link. onselect - Ocorre quando o objeto selecionado. vlido para os objetos Text e Textarea. onsubmit - Ocorre quando um boto tipo Submit recebe um click do mouse. vlido apenas para o Form. Criando Variveis

A varivel criada automaticamente, pela simples associao de valores mesma. Ex. NovaVariavel = "Jose" Foi criada a varivel de nome NovaVariavel que, passou a conter a string Jose. 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. Ex: <script> valor = 30 document.write ("Minha primeira linha<br>") document.write ("Nesta linha aparecer o resultado de : " + (10 * 10 + valor)) </script> A idia do exemplo acima escrever duas linhas. Para evitar que as duas linhas sejam escritas na mesma linha utilizada a tag Html <br> para dar uma quebra de linha. Mensagens Existem trs formas de comunicao com o usurio atravs de mensagens. Apenas Observao: alert ( mensagem ) Ex. alert ("Certifique-se de que as informaes esto corretas") - 58 -

Curso de HTML

Mensagem que retorna confirmao de OK ou CANCELAR: confirm (mensagem) Ex. if (confirm ("Algo est errado...devo continuar??")) { alert("Continuando") } else { alert("Parando") } Recebe mensagem via caixa de texto Input: Receptor = 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. Ex. Entrada = prompt("Informe uma expresso matemtica", "") Resultado = eval(Entrada) document.write("O resultado = " + Resultado) Criando Funes Uma funo um set de instrues, 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) { alert ("Maior de Idade") } else { 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 que o parmetro passado (quando ocorre o evento "onchange") foi o contedo da caixa de texto "Tempo" (propriedade "value") e que, - 59 -

Curso de HTML na funo, chamamos de "Anos". Ou seja, no existe co-relao entre o nome da varivel passada e a varivel de recepo na funo. Apenas o contedo passado. Interagindo com o usurio A interao com o usurio se d atravs de objetos para entrada de dados (textos), marcao de opes (radio, checkbox e combo), botes e link's para outras pginas. Veja abaixo a lista de eventos relacionados s tags HTML: Objeto Input TEXT Os eventos associados a este objeto so: onchange, onblur, onfocus e onselect. Ex: <form name="TText"> <p>Entrada de Texto <input type=text size=20 maxlength=30 name="CxTexto" value="" onchange="alert ('Voce digitou ' + CxTexto.value)"> </p> </form> Objeto Input PASSWORD Os eventos associados a este objeto so: onchange, onblur, onfocus e onselect. Ex: <form name="TPassword"> <p>Entrada de Senha<input type=password size=10 maxlength=10 name="Senha" value=""> </p> </form> Objeto Input CHECKBOX O nico evento associado a este objeto onclick. Objeto Input RADIO O nico evento associado a este objeto onclick. Ex: <p>Radio</p> <p> <input type=radio name="Rad" value="1" onclick="document.bgColor='green'"> Fundo Verde <input type=radio name="Rad" value="2" onclick="document.bgColor='blueviolet'"> Fundo Violeta <input type=radio name="Rad" value="3" onclick="document.bgColor='#FFFF00'"> Fundo Amarelo </p> Objeto Input BUTTON Este objeto tem por finalidade criar um boto ao qual se possa atrelar operaes lgicas, a serem executadas quando o mesmo receber um click.

- 60 -

Curso de HTML

O nico evento associado a este objeto onclick. Ex. <p><form method="POST" name="TstButton"> Digite um Texto <input type=text size=30 maxlength=30 name="Teste" value=""> </p><p>Click no Botao <input type=button name="Bteste" value="Botao de teste" onclick="alert ('Voce digitou: ' + TstButton.Teste.value)"></p> </form> Objeto Input SUBMIT Este objeto um boto que tem por finalidade submeter (enviar) o contedo dos objetos do formulrio ao servidor. O nico evento associado a este objeto onclick. Objeto TEXTAREA Os eventos associados a este objeto so: onchange, onblur, onfocus e onselect. Objeto SELECT Para utilizao deste objeto importante o conhecimento de outras propriedades associadas: Objeto.length : Retorna a quantidade de opes existentes na lista Objeto.selectedindex : Retorna o "index" do objeto selecionado (primeiro = 0) Objeto.options[index].text : retorna o texto externo associado a cada opo Objeto.options [index].value : retorna o texto interno (value) associado a cada opo Objeto.options [index].selected : retorna verdadeiro ou falso Os eventos associados a este objeto so: onchange, onblur e onfocus. Abrindo novas janelas Mostraremos agora como podem ser abertas novas janelas sobre uma janela contendo o documento principal. A sintaxe geral deste mtodo a seguinte: Variavel = window.open ("Url", "Nome da janela", "Opes") Onde: Variavel - Nome que ser atribuido como propriedade da janela. Url - Endereo Internet onde a janela ser aberta. Normalmente voce estar utilizando a sua prpria Url, neste caso, preencha com "". Nome da Janela - o nome que aparecer no top da janela (Ttulo) Opes - So as opes que definem as caractersticas da janela, quais sejam: toolbar - Cria uma barra de ferramentas tipo "Back", "Forward", etc. location - Abre a barra de location do browse directories - Abre a barra de ferramentas tipo "What's New", "Handbook", etc. status - Abre uma barra de status no rodap da janela scrollbars - Abre barras de rolamento vertical e horizontal menubar - Cria uma barra de menu tipo "File", "Edit", etc. resizable - Permite ao usurio redimencionar a janela width - Especifica a largura da janela, em pixels height - Especifica a altura da janela, em pixels - 61 -

Curso de HTML

Todas as opes (exceto width e height) so boleanas e podem ser setadas de duas formas. Exemplo: "toolbar" ou "toolbar=1") so a mesma coisa. Se nada for especificado, entende-se que todas as opes esto ligadas; Caso seja especificada qualquer opo, ser entendido que esto ligadas apenas as opes informadas. As opes devem ser informadas separadas por vrgula, sem espao entre elas. Abrindo um Documento Para abrir um documento dentro da janela, deve ser utilizado o seguinte mtodo: Variavel.document.open() Onde "Variavel" o nome da varivel associada ao mtodo window.open Escrevendo no Documento Para escrever a tela no documento, deve ser utilizado o seguinte mtodo: Variavel.document.write ("Comandos html, Comandos JavaScript, Textos, etc.") Fechando a Janela Para fechar a janela, utilize o seguinte mtodo: Variavel.document.write ("window.close()") Fechando o Documento Para fechar o documento, utilize o seguinte mtodo: Variavel.document.close () A seguir, apresentamos um exemplo no qual estamos abrindo um documento onde o usurio ao clicar no boto abre ento aberta uma outra pgina. <script> function abrindo() { window.open ("", "OutraJanela", 'scrollbars=yes,resizable=yes,width=650,height=550') document.write ("<html><head><title>Essa outra janela") document.write ("</title></head><body bgcolor='#FF00FF'>") document.write ("<br>ESSA UMA OUTRA PGINA<hr><br>") document.write ("<img width=200 height=200 src=" + Local + "Marcaelo.gif>") document.write ("<br>Java Script<hr><br>") document.write ("</body></html>") document.close() } </script> <body bgcolor="#FFFF00"> <p></p> <p>Ao clicar no boto uma nova pgina ir abrir!</p> <form method="POST" name="Form1"> <p></p> <input type="button" name="abre" value="Nova Janela" onclick="abrindo()"> </p> </form> </body>

- 62 -