HTML Logica

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT
Apostila de
Lgica de Programao,
HTML e JavaScript
ESTA OBRA PODE SER REPRODUZIDA E DISTRIBUDA PARCIAL OU

INTEGRALMENTE DESDE QUE CITADA A FONTE.
MATERIAL COPYLEFT - VENDA PROIBIDA
Todo material desenvolvido pela Coordenadoria do Governo

Eletrnico resultado de um processo coletivo de produo,
que se iniciou em 2001 e que permanente.
Agradecemos a todos que colaboraram e que queiram contribuir.
CGE COORDENADORIA DO GOVERNO ELETRNICO
Equipe de Treinamento Tcnico
Aparecido Quesada
Adriana Tosta
Eder Moura Dourado
Simone Leal dos Santos
Thyago Akira de Morais Ribeiro
Yuri Robinson de Souza
Contato
treinamento_cge@prefeitura.sp.gov.br
telecentros@prefeitura.sp.gov.br
PALCIO DO ANHANGABA
VIADUTO DO CH N 15
CEP 01002-000 SO PAULO
TEL: 3113-8938 FAX 3113-8939
ndice
1) Lgica de Programao .................................................... pg. 11
Algoritmo .............................................................................. pg. 13
Exerccios ............................................................. pg. 13
Constantes e Variveis ............................................................ pg. 15
Exerccio ............................................................... pg. 16
Fluxogramas ........................................................................... pg. 17
Exerccio ............................................................... pg. 18
Operadores ............................................................................. pg. 19
Operadores Matemticos .................................... pg. 19
Operadores Relacionais ...................................... pg. 19
Operadores Lgicos ............................................ pg. 20
Exerccios ............................................................. pg. 22
Estrutura de Controle .............................................................. pg. 27
Seqncia simples .............................................. pg. 27
Seleo ................................................................. pg. 27
Exerccios ............................................................. pg. 29
Repetio ............................................................. pg. 33
Enquanto ... Faa: ................................................ pg. 33
At que ... Faa: .................................................... pg. 34
Faa Enquanto ...: ............................................... pg. 34
Faa At que ...: ................................................... pg. 34
Para ... at .... faa ................................................ pg. 35
Exerccios ............................................................. pg. 35
Lgica Escrita ......................................................................... pg. 37
Exerccios ............................................................. pg. 38
2) HTML .............................................................................. pg. 39
Introduo .............................................................................. pg. 41
Redes
.............................................................................. pg. 41
Provedores de Acesso ............................................................ pg. 41
Internet
.............................................................................. pg. 41
Como surgiu a Internet ........................................................... pg. 42
Endereo IP ............................................................................. pg. 42
Domnio .............................................................................. pg. 42
WWW
.............................................................................. pg. 43
5
O que so Browsers? ............................................................. pg. 44

Protocolo HTTP ..................................................................... pg. 44
URL
.............................................................................. pg. 45
Pginas Web ........................................................................... pg. 45
Home Page ............................................................................. pg. 45
Como Planejar seu Site .......................................................... pg. 46
Determinando a Finalidade de um Site ................................. pg. 46
O que HTML? ...................................................................... pg. 47
O que voc pode fazer com o HTML? ................................... pg. 47
O que necessrio para trabalhar com HTML? .................. pg. 48
Sintaxe dos comandos HTML ............................................... pg. 48
Como Exibir o Cdigo HTML de uma Pgina da Internet .... pg. 49
Estrutura Bsica do HTML ..................................................... pg. 49
Elementos Bsicos do HTML ................................................ pg. 49
Atributo BACKGROUND ...................................... pg. 50
Atributo BGCOLOR: ............................................. pg. 50
Atributo TEXT ....................................................... pg. 50
Atributos LINK, ALINK, VLINK ............................... pg. 50
Ttulos e Subttulos ................................................................. pg. 51
Exerccio ............................................................... pg. 51
Acentuao ............................................................................. pg. 52
Formatao de Textos ........................................................... pg. 53
Comando <font> .................................................. pg. 53
Os principais Comandos de Estilo de Texto so: ........ pg. 54
Comando <marquee> ......................................... pg. 55
Exerccio ............................................................... pg. 55
Formatao de Pargrafos .................................................... pg. 56
Comando <P ALIGN=...> ...................................... pg. 56
Comando <CENTER> ......................................... pg. 57
Comando <BLOCKQUOTE> .............................. pg. 57
Linhas Horizontais .................................................................. pg. 57
Hyperlinks .............................................................................. pg. 57
Definir um Link Dentro de uma Pgina ............... pg. 58
Definir um Link para uma Pgina Interna ........... pg. 59
Definir um Link Mailto ...................................... pg. 59
Definir um Link para Outro Site ........................... pg. 60
6
Definir um Link em uma Imagem ........................ pg. 60

Imagens .............................................................................. pg. 60
Principais Diferenas entre as Imagens GIF e JPEG ........... pg. 61
Qual Formato Escolher? ........................................................ pg. 61
GIFs Animados ....................................................................... pg. 62
Definir uma Imagem no Segundo Plano ............................... pg. 62
O comando <! ... > ............................................ pg. 63
Exerccio ............................................................... pg. 63
Listas
.............................................................................. pg. 64
Listas Ordenadas ................................................. pg. 65
Exerccio ............................................................... pg. 65
Listas No Ordenadas ......................................... pg. 66
Exerccio ............................................................... pg. 67
Lista de Definio ................................................ pg. 68
Exerccio ............................................................... pg. 68
Tabelas .............................................................................. pg. 69
Elementos de uma Tabela .................................. pg. 70
Comando <CAPTION> ........................................ pg. 70
Comando <TR> ................................................... pg. 70
Comando <TD> ................................................... pg. 70
Comando <TH> ................................................... pg. 70
Exerccio ............................................................... pg. 71
Parmetros .............................................................................. pg. 72
Parmetros do Elemento <TABLE> .................... pg. 72
border .................................................................... pg. 72
width ...................................................................... pg. 73
cellspacing ........................................................... pg. 73
cellpadding ........................................................... pg. 73
align ...................................................................... pg. 73
bgcolor .................................................................. pg. 74
Exerccio ............................................................... pg. 74
Parmetros do Elemento <TR> ............................................. pg. 74
align
.............................................................................. pg. 74
valign
.............................................................................. pg. 75
bgcolor
.............................................................................. pg. 75
Parmetros dos Elementos <TD> e <TH> ........................... pg. 75
7
align ...................................................................... pg. 75

valign ..................................................................... pg. 75
bgcolor .................................................................. pg. 75
nowrap .................................................................. pg. 75
colspan ................................................................. pg. 76
rowspan ................................................................ pg. 76
Exerccio ............................................................... pg. 76
Formulrios ............................................................................. pg. 78
Elementos HTML para Formulrios ................... pg. 78
<form> .................................................................... pg.78
<input> .................................................................. pg. 79
Tipos do Elemento INPUT .................................. pg. 79
<input type=text> .................................................. pg. 79
<input type=password> ....................................... pg. 80
<input type=radio> .............................................. pg. 80
<input type=checkbox> ...................................... pg. 80
<input type=reset> .............................................. pg. 81
<input type=submit> ........................................... pg. 81
<input type=image> ............................................ pg. 82
<input type=hidden> ........................................... pg. 82
<select> ................................................................ pg. 82
<textarea> ............................................................. pg. 83
Exerccio ............................................................... pg. 83
Hospedando seu Site ............................................................. pg. 85
Sites de Hospedagem Gratuita .............................................. pg. 86
Sites de Hospedagem Paga ................................................... pg. 86
Hospedando seu Site no Geocities ....................................... pg. 86
3) Java Script ........................................................................... pg. 88
Operadores Lgicos ............................................................... pg. 90
Operadores Matemticos ...................................................... pg. 90
Controles Especiais ................................................................ pg. 91
Comandos Condicionais ........................................................ pg. 91
Comando IF: ......................................................... pg. 92
Comando FOR: .................................................... pg. 92
Comando WHILE: ................................................ pg. 92
Eventos
.............................................................................. pg. 93
Criando Variveis .................................................................... pg. 94
Escrevendo no Documento .................................................... pg. 94
Mensagens .............................................................................. pg. 95
Apenas Observao: ............................................ pg. 95
Mensagem que retorna confirmao
de OK ou CANCELAR: ......................................... pg. 95
Recebe mensagem via caixa de texto Input ....... pg. 95
Criando Funes .................................................................... pg. 96
Interagindo com o usurio ...................................................... pg. 97
Objeto Input TEXT ............................................... pg. 97
Objeto Input PASSWORD .................................... pg. 97
Objeto Input CHECKBOX .................................... pg. 98
Objeto Input RADIO .............................................. pg. 98
Objeto Input BUTTON ......................................... pg. 98
Objeto Input SUBMIT ........................................... pg. 99
Objeto TEXTAREA ............................................... pg. 99
Objeto SELECT ................................................... pg. 99
Abrindo novas janelas ............................................................. pg. 99
Abrindo um Documento ..................................... pg. 100
Escrevendo no Documento ............................... pg. 100
Fechando a Janela ............................................ pg. 100
Fechando o Documento .................................... pg. 100
10
PARTE I
Lgica de Programao
11
12
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
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.
13
2- Crie um algoritmo das rotinas que voc executa para

procurar um emprego.
14
3- Crie um algoritmo das rotinas que voc executa para se

deslocar para este treinamento.
Constantes e Variveis
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:
15
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.
16
Fluxogramas
Os fluxogramas tm o objetivo de facilitar o entendimento do
algoritmo. Estes fluxogramas so padronizados em diferentes
formas, que auxiliam na visualizao de sua respectiva funo:
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.
Com esse fluxograma, voc percebe que s poder executar

uma ao aps executar a outra.
17
EXERCCIO
1- Crie o fluxograma dos algoritmos dos exerccios anteriores.
18
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)
19
< (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 (verdadeiro)
11 <> 11 (falso)
0,5 < (-1)(falso)
A=A
(verdadeiro)
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.
20
Imagine a seguinte relao:

(Expresso 1)
(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:
Expresso 1
VERDADEIRO
VERDADEIRO
FALSO
FALSO
Ou
VERDADEIRO
VERDADEIRO
VERDADEIRO
FALSO
Expresso 2
VERDADEIRO
FALSO
VERDADEIRO
FALSO
21
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 => Tenho dinheiro.
2.Negar que tenho dinheiro =>
No tenho dinheiro.
Conseguiremos a seguinte tabela verdade:
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
Corintianos
Sexo
M
F
Quantidade 40
10
22
Palmeirenses So Paulinos Santistas

M
F
M
F
M
F
30
5
36
8
25
2
a) Crie uma afirmao que tenha como resultado todos os

torcedores palmeirenses.
Torcedor=Palmeirense
Resultado: 35 torcedores
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 auvi-negros.
2- Considere o diagrama a seguir:

Pesquisa qual chocolate voc consome?
23
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.
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.
24
e) Crie uma afirmao que tenha como resultado todos os

pesquisados.
25
26
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
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.
27
Esta uma forma simples de exemplificar uma seleo. Caso

voc esteja com fome, voc come. Seno, voc no come.
Se a afirmao for dividida em expresses:
1.Voc est com fome.
2.Voc come.
Ento a tabela verdade dela seria a seguinte:
Se (Expresso 1)
Ento (Expresso 2)
V
V
F
F
V
F
V
F
Resultado
Voc come (V)
Voc no come(F)
Voc come (V)
Voc no come(V)
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:
Se (Exp 1) Ento (Exp 2) Seno (Exp 3) Resultado
V
V
V
V
F
F
F
F
28
V
V
F
F
V
V
F
F
V
F
V
F
V
F
V
F
Voc come(V)
Voc come (V)
Voc dorme (F)
Voc no come nem dorme (F)
Voc dorme (V)
Voc no come nem dorme (V)
Voc dorme (V)
Voc no come nem dorme (V)
Agora veremos um fluxograma de uma estrutura de seleo:
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;
Se farol=vermelho faa
Aguarde o farol verde;
Seno
Atravesse a rua
29
2- Crie uma condio para uma pessoa entrar na sua casa.
3- Veja a seguinte tabela de preos:

Gabinete
Monitor
Teclado
Mouse
Caixa de Som
Impressora
- R$ 1.000,00
- R$ 400,00
- R$ 50,00
- R$ 30,00
- R$ 50,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).
30
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.
31
4- Crie o fluxograma dos exerccios anteriores:
32
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
33
efetuar a compra. Ento, enquanto a condio for verdadeira, ser

feita a compra.
At que ... Faa:
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.... While (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:
34
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:
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: At prato=vazio faa:
D uma colherada;
D uma colherada;
Faa:
D uma colherada;
Enquanto prato<>vazio.
Faa:
D uma colherada;
At prato=vazio.
35
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.
4- Aps voc ter aberto a venda, apareceram os seguintes

clientes e a quantidade de frutas que cada um desejava:
Joo ............... 8
Manoel .......... 10
Joaquim ......... 4
Maria.............. 4
Julio .............. 11
Mrio.............. 9
Patricia ........... 3
Carolina ......... 7
Ana ................. 6
36
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:
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:
37
Toda expresso tem sua tabela verdade:
EXERCCIOS
1- Transforme as afirmaes criadas nos exerccios de

operadores lgicos na Lgica Escrita e crie uma tabela verdade
para as expresses criadas.
Exerccio1: Torcedor=T
T= palmeirense
Exerccio 2: Chocolate=Ch
38
PARTE II
HTML
39
40
Introduo
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
41
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.
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
42
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.
43
O que so Browsers?
A ferramenta bsica para a exibio de documentos na WWW
so os browsers, ou como 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>.
44
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
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.
45
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 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?
3.Quais informaes quero compartilhar com os visitantes
de meu site?
46
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 precisa 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..
47
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).
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.
48
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 a figura 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>
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.
49
<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
50
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 inciofim. Exemplos:
<h1> </h1>
<h2> </h2>
<h3> </h3>
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:
51
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.
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.
52
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
VOC DEVE DIGITAR
Á
À
Ã
Â
Ç
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
53
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
(INGLS) NOME
Beige
Black
Blue
Cyan
Gold
Green
Gray
Yellow
Magenta
Maroon
Olive
Orange
Red
Pink
Purple
White
DA COR (PORTUGUS)
Bege
Preta
Azul
Ciano
Ouro
Verde
Cinza
Amarela
Magenta
Marrom
Verde oliva
Laranja
Vermelha
Rosa
Prpura
Branca
HEXADECIMAL
#F5F5D
#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
54
SINTAXE
FUNO
Aplica negrito.
Aplica itlico.
Aplica sublinhado.
Aumenta o tamanho da fonte e
aplica negrito.
<s> texto </s>
Aplica tachado.
<small> texto </small> Reduz e altera a fonte.
<sup> texto </sup> Aplica sobrescrito.
<sub> texto </sub> Aplica subscrito.
<blink> texto </blink> Faz o texto piscar. Alguns navegadores
no aceitam este comando.
<b> texto </b>

<i> texto </i>
<u> texto </u>
<big> texto </big>
Comando <marquee width=... scroll=... direction=...

scrollamount=...> ... </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.
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 <sub> 2 </sub> O <br>
X<sup> 2 </sup> <br>
55
<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.
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 ALIGN configura o
alinhamento do pargrafo e pode conter os valores left (esquerda),
center (centro) ou right (direita).
56
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.
57
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.
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.
58
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.
59
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.
60
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.
Principais Diferenas entre as Imagens GIF e JPEG
CARACTERSTICA
GIF
JPEG
Animao
Tamanho do arquivo
Resoluo
Transparncia
Velocidade de download
Exibio
Sim
Maior
Menos cores (256)
Sim
Mais rpido
Monta distorcida
No
Menor
Mais cores(16 milhes)
No
Mais lento
Monta por faixas
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
61
<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.
Exemplo:
<body background=figura.gif>
62
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 >
63
<ahref=mailto:fulano@beltrano.com.os>fulano@beltrano.com.os
</a>
</body>
</html>
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.
64
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

<html>
<head>
<title> Listas Ordenadas </title>
</head>
<body>
<h2> Lista ordenada por nmeros </h2>
<ol>
<li> Elemento 1 </li>
</ol>
<h2> Lista ordenada por letras, iniciando em D </h2>
<ol type=a start=4>
65

</ol>
</body>
</html>
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.
66
O atributo TYPE pode ser:

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

<html>
<head>
<title> Listas No-Ordenadas </title>
</head>
<body>
<h2> Lista No-Ordenada </h2>
<ul>
</ul>
<h2> Duas listas No-Ordenadas aninhadas </h2>
<ul type=square>
<li> Elemento 2
<ul>
<li> Elemento 2.1 </li>
</ul>
</li>
</ul>
</body>
</html>
67

executar o programa.
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

<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>
68
</dl>
</body>
</html>
sua tela.
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.
69
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.
70
EXERCCIO
Abrir um arquivo novo e criar a tabela da figura abaixo.

<html>
<head>
<title> Tabela Simples </title>
</head>
<body>
<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>
</tr>
<tr>
<th> Linha 2 </th>
</tr>
<tr>
<th> Linha 3 </th>
</tr>
</tbody>
71
</table>
<br>
<br>
<br>
</body>
</html>
sua tela.
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.
72
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.
73
BGCOLOR
Define a cor de fundo da tabela.

EXERCCIO
Acrescentar no Exerccio 07 a linha abaixo:

<body>
...
<table border=1"
bgcolor=yellow>
width=50%
cellspadding=4"

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>).
74
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>).
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.
75
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>
76
<tr align=center>
<th bgcolor=black> <font color=yellow> Linha 1 </font> </th>
</tr>
<tr align=center>
</tr>
<tr align=center>
</tr>
</table>
</body>
</html>
sua tela.
77
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).
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.
78
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.
79
O que define o nmero mximo de caracteres que podem ser

digitados o parmetro MAXLENGHT (comprimento mximo),
que opcional.
2.2. <input type=password
maxlenght=...>
name=... value=... size=...
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).
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,
80
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.
81
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.
82
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.
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
83
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>
84
<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>
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.
85
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.
86
87
PARTE II
Java Script
88
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.
89
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.
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
+=
90
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.
91
So eles:
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 }
92
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.
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.
onfocus - Ocorre quando o objeto recebe o focus.
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
93
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
94
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)
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.
95
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, na funo, chamamos de Anos. Ou seja, no existe
96
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 links 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

onfocus e onselect.
Ex:
<form name=TPassword>
<p>Entrada de Senha<input type=password size=10
maxlength=10 name=Senha value=>
</p>
</form>
97
OBJETO INPUT CHECKBOX
O nico evento associado a este objeto onclick.

OBJETO INPUT RADIO

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.
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>
98
OBJETO INPUT SUBMIT
Este objeto um boto que tem por finalidade submeter

(enviar) o contedo dos objetos do formulrio ao servidor.
OBJETO TEXTAREA

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)
99
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 Whats 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
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, entendese 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:
100
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>)
101
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>
102
103
Anotaes
104
Anotaes
105
Anotaes
106
Anotaes
107
Anotaes
108
Anotaes
109
Anotaes
110
Anotaes
111
Anotaes
112
Anotaes
113
Anotaes
114
115
116

HTML Logica

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

HTML Logica

Transféré par

Droits d'auteur :

Formats disponibles

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

ESTA OBRA PODE SER REPRODUZIDA E DISTRIBUDA PARCIAL OU

Todo material desenvolvido pela Coordenadoria do Governo

CGE COORDENADORIA DO GOVERNO ELETRNICO

Equipe de Treinamento Tcnico

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

O que so Browsers? ............................................................. pg. 44

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

Definir um Link em uma Imagem ........................ pg. 60

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

align ...................................................................... pg. 75

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

Esta apostila visa auxiliar queles que pretendem ingressar

1- Crie um algoritmo das rotinas que voc executa para realizar

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

2- Crie um algoritmo das rotinas que voc executa para

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

3- Crie um algoritmo das rotinas que voc executa para se

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

Algum assiste televiso. (Jos assiste televiso; Maria assiste

1- Selecione dos algoritmos dos exerccios anteriores alguns

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

Com esse fluxograma, voc percebe que s poder executar

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

1- Crie o fluxograma dos algoritmos dos exerccios anteriores.

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

Sempre sero utilizados clculos para a realizao de

Os operadores relacionais so utilizados para comparar dois

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

< (menor que)

Os operadores lgicos so combinados s expresses. Desta

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

Imagine a seguinte relao:

Se uma destas expresses no for verdadeira, a condio

Agora veja estas expresses:

Agora, se uma destas expresses for verdadeira, a condio

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

Desta forma, j temos conhecimento das cadeias verdades

Os operadores lgicos podem ser combinados de inmeras

1- Considere a tabela a seguir:

Palmeirenses So Paulinos Santistas

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

a) Crie uma afirmao que tenha como resultado todos os

c)Crie uma afirmao que tenha como resultado todos os

2- Considere o diagrama a seguir:

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

a) Crie uma afirmao que tenha como resultado dos

c) Crie uma afirmao que tenha como resultado todos os

d) Crie uma afirmao que tenha como resultado os

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

e) Crie uma afirmao que tenha como resultado todos os

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT

uma tarefa que sempre ser executada. Ela obedecer a

Esta estrutura utilizada quando h uma necessidade de

APOSTILA DE LGICA DE PROGRAMAO, HTML E JAVASCRIPT