Upload
dinhmien
View
215
Download
0
Embed Size (px)
Citation preview
ÍNDICE
HTML ______________________________________________________________________________________ 2
Tags (etiquetas) do HTML ___________________________________________________________________ 2
TAGS PRINCIPAIS ______________________________________________________________________________ 3
TAGS DE CONFIGURAÇÃO DA PÁGINA ______________________________________________________________ 3
TAGS DE FORMATAÇÃO DE TEXTOS _________________________________________________________________ 3
TAGS DE MUDANÇA DE LINHA _____________________________________________________________________ 4
TAG DAS HIPERLIGAÇÕES ________________________________________________________________________ 4
TAG – LISTAS _________________________________________________________________________________ 5
OUTRAS TAG _________________________________________________________________________________ 5
Tag <img> _________________________________________________________________________________ 6
Limitações do HTML ________________________________________________________________________ 7
A linguagem JavaScript ____________________________________________________________________ 7
COMENTÁRIOS________________________________________________________________________________ 7
SRC ________________________________________________________________________________________ 8
VARIÁVEIS ___________________________________________________________________________________ 8
OPERADORES _________________________________________________________________________________ 9
CAIXAS DE MENSAGENS ________________________________________________________________________ 9
CARACTERES ESPECIAIS _________________________________________________________________________ 9
ESTRUTURAS DE CONTROLO ______________________________________________________________________ 10
Funções, propriedades e Eventos __________________________________________________________ 11
FUNÇÕES ___________________________________________________________________________________ 11
EVENTOS ___________________________________________________________________________________ 11
MANIPULADORES DE EVENTOS ____________________________________________________________________ 11
Janelas e Documentos ____________________________________________________________________ 13
OBJECTO WINDOW ___________________________________________________________________________ 13
OBJECTO DOCUMENT _________________________________________________________________________ 14
Objectos Pré-definidos ____________________________________________________________________ 15
Formulários (Forms) _______________________________________________________________________ 18
ATRIBUTOS __________________________________________________________________________________ 18
ENTRADA DE DADOS __________________________________________________________________________ 19
Css e Layers ______________________________________________________________________________ 21
Applets ___________________________________________________________________________________ 23
Sites ______________________________________________________________________________________ 24
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 2
HTML HTML significa Hyper Text Markup Language - Linguagem de Marcação de Hipertexto. HTML é a
linguagem tradicional usada para criar páginas WEB com programação de hypertexto
(documento com palavras ou imagens que acede a outras páginas com um simples clique).
Essa linguagem foi crescendo conforme foram sendo inventados navegadores mais avançados
com recursos de imagens, som e vídeo. É a estrutura básica de uma homepage, mas pode ser
acompanhada por outros recursos como Java, Flash, etc..
O HTML é uma linguagem com código fonte aberto, isto é, é possível, através dos navegadores,
ver a programação HTML da página apresentada. Para isso, basta procurar a opção "Exibir
Código Fonte" no navegador e o código HTML será apresentado numa nova janela.
Não é possível programar em linguagem HTML, pois é simplesmente uma linguagem de
marcação que serve para indicar formatações de textos, inserir imagens e ligações de
hipertexto. Os navegadores são os responsáveis por identificar as marcações em HTML e
apresentar os documentos conforme o que foi especificado por essas marcações.
A principal aplicação do HTML é a criação de páginas na Web. O HTML não é uma linguagem
de programação, mas uma espécie de linguagem de formatação, um ficheiro de texto que é
formatado através de uma série de comandos, os chamados ‘tags’.
Para a criação de uma página em HTML não é necessário nenhum software especial. O próprio
Bloco de Notas (Notepad) é suficiente para a criação de uma página, no entanto ao gravar
terá de escolher o formato html. Depois é só fazer a pré-visualização num browser, como o
Internet Explorer.
TAGS (ETIQUETAS) DO HTML Aprender HTML é aprender como usar os diferentes tags. TAGS são os comandos utilizados pela
linguagem HTML.
• Todos os tags são inseridos entre o sinal de menor < e maior >, com excepção dos tags que
são usados para representar a posição de um objecto
• Todos os tags de formatação devem ser abertos e fechados, como é abaixo apresentado:
<tag> … </tag>
• Todos os ‘tags’ obedecem a uma hierarquia:
<a> <b> <c> </c> </b> </a> (o primeiro a abrir é o último a fechar, e vice-versa).
• É indiferente utilizar maiúsculas ou minúsculas nos ‘tags’:
<tag> é igual a <TAG> e a <Tag>.
• Não é recomendável que os documentos Web contenham acentos.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 3
TAGS PRINCIPAIS
<HTML>...</HTML> : envolve todas as secções de um documento (HEAD e BODY).
<HEAD>...</HEAD> : envolve a secção de cabeçalho do documento.
<TITLE>...</TITLE> : indica o título do documento para o Browser. Geralmente os Browsers
apresentam este título na barra de título da Janela.
<BODY>...</BODY> : envolve a secção de corpo do documento. Aqui fica o conteúdo
principal da Home Page.
TAGS DE CONFIGURAÇÃO DA PÁGINA
Os tags <BODY> e </BODY> contém também algumas configurações da página:
• BGCOLOR=COR – definir a cor de fundo
• BACKGROUND=IMAGEM – definir a figura de fundo
• TEXT=COR – definir a cor do texto
• LINK=COR – definir a cor dos links
• VLINK=COR - cor dos links já vistos
• ALINK=COR - cor dos links abertos naquele momento
TAGS DE FORMATAÇÃO DE TEXTOS
<Hn> ... </Hn> - aplica estilos a títulos e subtítulos.
Opções de alinhamento:
• ALIGN=”LEFT” – alinhar à esquerda
• ALIGN=”RIGHT” - alinhar à direita
• ALIGN=”CENTER” - alinhar ao centro
• BLINK - piscar.
<B>...</B> - Aplica o estilo NEGRITO.
<I>...</I> - Aplica o estilo itálico.
<U>...</U> - Aplica o estilo sublinhado (nem todos os browser o reconhecem).
<SUP>...</SUP> - Faz com que o texto fique sobrescrito.
<SUB>...</SUB> - Faz com que o texto fique subscrito.
<PRE>...</PRE> - Utiliza a pré-formatação, ou seja, deixa o texto da maneira em que foi digitado.
<FONT> - permite alterar os atributos das fontes de um texto:
• FACE – tipo de letra
SIZE – tamanho da letra
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 4
COLOR – cor da letra
Deve-se utilizar sempre uma fonte conhecida (Arial, Times New Roman ou Verdana) pois ao
utilizar fontes diferentes os visitantes podem não tê-las no computador. Pode-se definir mais de
uma fonte para o mesmo texto. As fontes devem ser separadas por vírgula e o browser procura,
no computador do cliente, qual delas ele possui para apresentar.
Exemplo: <FONT FACE=”Verdana, Anal, Helvetica”> texto </FONT>
O comando é o seguinte: <Font face="estilo" size=tamanho color="cor">...</P>.
PALETA DE CORES
#FF0000 Representa o vermelho-puro
#00FF00 Representa o verde-puro
#0000FF Representa o azul-puro
#550000 Representa um tom de vermelho-escuro
#FFCCCC Representa um tom de vermelho bem claro.
#CCCCCC Um tom de cinza-claro
#FFFFFF Branco
#000000 Preto
TAGS DE MUDANÇA DE LINHA
<P>…</P> - delimita um parágrafo, deixando uma linha em branco antes da próxima.
<BR> - Faz uma quebra de linha no texto. Não deixa linha em branco antes da próxima.
TAG DAS HIPERLIGAÇÕES
Em HTML o elemento <a>…</a> possibilita definir hiperligações:
• Para inserir um hyperlink que aponte para outra página:
<a HREF=”outropagina.html”>Outro Página</a>
• Para alguém enviar um e-mail para uma conta de e-mail:
Exemplo:
<a HREF=”MAILTO:[email protected]”>Dúvidas, Críticas e sugestões envie um e-mail</a>
• Para incluir um assunto “Subject” para o e-mail.
Exemplo:
<a HREF= ”MAILTO:[email protected]?SUBJECT=JavaScript”>JavaScript</a>
• Para incluir uma imagem como hyperlink.
<a href="endereço"><img src="imagem.extensão" border=0 width=largura height=altura>
</a> (Atribuir o valor 0 ao border, caso não se queira que a imagem tenha limite).
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 5
Adicionar:
TARGET=”_NEW” - abre o endereço numa nova janela
TARGET=”_TOP” - abre o endereço na mesma janela
TARGET="_BLANK" - para que a página (link) se abra noutra janela.
Exemplo: <a href="http://www.rafah.hpg.com.br/" target="_blank">Rafael Web Site</a>.
TAG – LISTAS
LISTAS NUMERADAS
Listas ordenadas, são também denominadas listas numeradas, pois, quando um navegador
encontra um tag, iniciando uma lista ordenada, ele passa a mostrar cada item utilizando
números, como 1, 2, 3, e assim sucessivamente.
<OL> - listas ordenadas
<LI> - tag utilizado para cada item da lista
LISTAS NÃO ORDENADAS
Listas não ordenadas são muito parecidas com as numeradas. A única diferença é o facto de
elas não definirem explicitamente uma ordem, como é no caso das numeradas. São formadas
por símbolos, que podem ser um círculo, um rectângulo ou círculo preenchido.
<UL> - lista não ordenada
<LI> - tag utilizado para cada item da lista
Atributo TYPE - formata os marcadores da lista. Os valores aceites são:
• CIRCLE: círculo vazio
• SQUARE: rectângulo
• DISC: círculo preenchido, padrão.
OUTRAS TAG
<!-- [COMENTÁRIO] --> insere um comentário não compilável (executável) pelo browser. Tudo o
que for escrito neste tag não será lido, excepto se alguém tiver acesso ao
script (texto fonte) da página.
<hr size=espessura> - adicionar uma barra à página.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 6
TAG <IMG> O tag que manipula imagens é a <IMG>, porém o uso do atributo SRC (abreviatura de source-
determina a URL da imagem que se deseja apresentar) é obrigatório, afinal, ele determina a
imagem a apresentar.
SINTAXE:
<IMG SRC=“ [url da imagem]
ALIGN=“ [center/left/right/top/middle/bottom]”
WIDTH=“ [largura]” HEIGHT=“ [altura]”
VSPACE=“ [espaçamento vertical]”
HSPACE=“ [espaçamento horizontal]”
BORDER=“ [borda]”
ALT=“ [texto referente]”
LOWSRC=“[url de baixa qualidade]”>
Os formatos-padrão da Web e aceites por 100% dos browsers são o JPEG (Joint Photographic
Experts Group) e o GIF (Graphics Interchange Format) que foram escolhidos por serem
compactados, leves e possuírem boa qualidade de resolução. Em geral, imagens GIF são
melhores para gráficos e desenhos; imagens JPEG são melhores para fotografia. Isto porque as
imagens GIF são constituidas por 256 cores e as imagens JPEG por milhões de cores. Quanto
melhor a compressão tanto menor o tamanho do arquivo e tanto mais rápido a página é
carregada no navegador.
Ultimamente o formato PNG (Portable Network Graphics) tem-se tornado cada vez mais popular
(principalemente em detrimento do formato GIF). O formato PNG é em vários aspectos melhor
que os formatos JPEG e GIF: milhões de cores e efetiva compressão.
ATRIBUTOS:
• Atributo ALIGN- Define o alinhamento da imagem. O alinhamento da imagem no
documento HTML pode ser feito em função do:
� Texto — imagem à direita, à esquerda, centrada, ao topo ou ao fundo do texto.
� Parágrafo — imagem à direita ou à esquerda do parágrafo.
• Atributo WIDTH- Determina a largura da imagem em pixels ou em percentagem da área
do browser.
• Atributo HEIGHT- Determina a altura da imagem em pixels ou em percentagem da área do
browser.
• Atributo VSPACE- Atribui um espaçamento vertical em pixels à imagem.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 7
• Atributo HSPACE- Atribui um espaçamento horizontal em pixels à sua imagem.
• Atributo BORDER- Define um limite em torno da imagem, cuja espessura é atribuída em
pixels.
• Atributo ALT- Texto alternativo. Caso não seja possível visualizar a imagem, é apresentado o
texto alternativo. Outra vantagem do texto alternativo é que ele é apresentado quando o
“rato” passa sobre a imagem.
LIMITAÇÕES DO HTML Não é possível programar em linguagem HTML, pois é simplesmente uma linguagem de
marcação que serve para indicar formatações de textos, inserir imagens e ligações de
hipertexto. Os navegadores são os responsáveis por identificar as marcações em HTML e
apresentar os documentos conforme o que foi especificado por essas marcações
A maior limitação do HTML é o facto de ser uma linguagem estática, ou seja, a única
interactividade que oferece sem auxílio de outras linguagens são os links entre as páginas.
Porém, o HTML é totalmente compatível com inúmeras linguagens que fazem o trabalho pesado
por ela, por exemplo, JavaScript, PHP, Asp.Net, etc.
A LINGUAGEM JAVASCRIPT Javascript é uma linguagem de script - scripts são “miniprogramas” interpretados e voltados
para execução de tarefas específicas.
<script>... </script> - permite adicionar linhas de código, para qualquer linguagem de
programação que o browser seja capaz de interpretar. Estas expressões são executadas
quando o documento é carregado e poderão introduzir dinamismo ao documento.
Através do atributo TYPE podemos indicar qual a linguagem utilizada.
Exemplo: <script type=”text/javascript”>... </script>) – neste exemplo, este atributo não é
obrigatório, pois por defeito, é assumida a linguagem JavaScript.
• A linguagem Javascript é case sensitive.
• Todas as instruções terminam com ponto e vírgula (;).
COMENTÁRIOS
Existem duas formas de criar comentários no JavaScript:
• Comentários de uma única linha, utiliza-se //.
• Comentários em bloco, utiliza-se /* para iniciar um bloco e */para finalizá-lo.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 8
SINTAXE:
// [linha de comentário]
/* [bloco de comentário] */
SRC
Um recurso muito útil do script é poder-se criar um arquivo independente da página HTML com
os principais scripts e depois criar uma referência em todas as páginas para esse arquivo. Isso
ajuda muito a manter um padrão e a reutilizar o código JavaScript.
Exemplo: <SCRIPT TYPE=“text/javascript” SRC=“script/ola.js”> </SCRIPT>
VARIÁVEIS
Variáveis são nomes dados aos locais na memória do computador onde alguns dados serão
armazenados durante a execução dos scripts. Quando se declara uma variável num script, ela
fica guardada na memória até que se feche a janela do script onde se encontra a variável.
VAR - para declarar uma variável.
SINTAXE:
Var o nome da variável (que não pode ter sido declarada mais de uma vez no mesmo
código) e o seu valor inicial.
ASPAS - o JavaScript aceita tanto as aspas simples quanto as duplas, basta ter o cuidado de
não abrir uma sentença com uma delas e fechar com a outra. As aspas devem envolver
apenas os textos.
Javascript apresenta algumas restrições quanto ao nome de variáveis/funções:
• Não é permitido colocar espaço em branco
• Não é permitido incluir um hífen (“-”)
• Não é permitido colocar os seguintes caracteres: . , ; “ ‘ ?
• Embora seja possível usar dígitos, o primeiro carácter tem de ser uma letra
• Não é permitido utilizar, como nome de uma nova variável/função, as palavras
reservadas de Javascript.
Em programação, os textos são denominados string e os números são classificados em inteiros e
longos (quando possuem casas decimais).
TIPOS DE VARIÁVEIS
Ao contrário da maior parte das linguagens de programação existentes, em JavaScript as
variáveis não têm um tipo específico, ou seja, uma variável pode conter um valor numérico e
posteriormente uma expressão.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 9
Os tipos de dados das variáveis: NUMÉRICO, TEXTO, BOOLEANO, FUNÇÃO, OBJECTO, ARRAY.
VALIDADE DAS VARIÁVEIS
É possível declarar variáveis dentro ou fora das funções. Se uma variável for declarada dentro
de uma função é caracterizada como variável local e só é visível dentro da função. Se uma
variável for declarada fora da função, é possível aceder-lhe pelas funções ou áreas de código
existentes no documento HTML, até que a página seja fechada.
OPERADORES
São os sinais matemáticos e lógicos que ajudam a gerar e manipular as variáveis e tomar
decisões no código.
Operadores Significado
Aritméticos
+ Soma ou concatenação de string - Subtracção * Multiplicação / Divisão % Resto de uma divisão + + Adiciona 1 -- Subtrai 1
Comparação = Atribui um valor a uma variável
= = Verifica se dois valores são iguais != Verifica se dois valores são diferentes > Verifica se um valor é maior que o outro > = Verifica se um valor é maior ou igual ao outro < Verifica se um valor é menor que o outro <= Verifica se um valor é menor ou igual ao outro
Lógicos && E (AND)
|| Ou (OR) ! Não (Not)
CAIXAS DE MENSAGENS
Os principais tipos de caixas de mensagens são:
� ALERTA apresenta apenas o botão OK – alert( [mensagem])
� CONFIRMA apresenta a opção de cancelar, além de confirmar - confirm ([mensagem])
� PROMPT mostra um campo de entrada de texto - prompt([mensagem], [valor])
CARACTERES ESPECIAIS
Alguns caracteres (como as aspas) não são interpretados num texto porque o JavaScript
interpreta-os como comandos. Para esses caracteres foi criada uma tabela de comandos que o
JavaScript interpreta normalmente.
COMANDO CÓDIGO
Quebra de linha \n
Tabulação \t
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 10
Aspas simples \”
Aspas duplas \”
Barra invertida \\
ESTRUTURAS DE CONTROLO
CONDIÇÕES
São decisões (sim ou não) que o código Javascript deve tomar quando são executadas. Por
exemplo: 5 é menor que 8? ou o campo nome está vazio?
O IF apresenta uma condição, a qual devolve um valor verdadeiro ou falso. Em cada uma
destas condições pode-se criar um bloco de comandos que será executado apenas se o
resultado da condição for verdadeiro e outro para ser executado apenas quando o resultado
for falso.
SINTAXE:
IF ([condição])
{ [bloco de comando executado para condição verdadeira] }
ELSE { [bloco de comando executado para condição falsa] }
LOOPS
Ou ciclos lógicos, servem para executar mais de uma vez um conjunto de instruções. É
importante sempre criar uma forma para o programa sair do ciclo; caso contrário, cria-se um
loop infinito que trava o browser.
O loop FOR utiliza-se para repetir mais instruções um determinado número de vezes. Entre todos
os loops, o FOR costuma ser utilizado quando se sabe o número exacto de vezes que a
sentença é executada.
SINTAXE:
for (iniciação;condição;atualização) {
sentenças a executar em cada repetição }
O loop WHILE utiliza-se quando se pretende repetir um número indefinido de vezes a execução
de sentenças, sempre que se cumpra uma condição.
SINTAXE:
while ([condição de saída do loop]) {
[instrução executada no loop] }
O loop DO...WHILE utiliza-se geralmente quando não se sabe quantas vezes será executado o
loop, assim como o loop WHILE. Mas, no Do While o loop é executado pelo menos uma vez.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 11
SINTAXE:
DO
{ sentenças do loop }
While (condição)
O loop é executado sempre uma vez e no final testa a condição para saber se executa outra
vez o loop ou se termina sua execução.
FUNÇÕES, PROPRIEDADES E EVENTOS
FUNÇÕES
Ao criar um programa existem determinados processos que se pode conceber de forma
independente, e que são mais simples de resolver que o problema inteiro. Ademais, estes
costumam ser realizados repetidas vezes ao longo da execução do programa. Estes processos
podem ser agrupados numa função, definida para que não haja necessidade de repetir uma
vez ou outra esse código nos scripts.
SINTAXE:
function nomefuncao ( ))
{ instruções da função }
Para executar uma função, escreve-se o nome seguido dos parênteses.
SINTAXE:
NomeDaFuncao()
As funções podem ser definidas em qualquer parte da página, mas sempre dentro dos tags
<SCRIPT>. No entanto, é preferível defini-las logo no início do programa, para evitar chamá-las
antes de estarem definidas.
EVENTOS
Javascript é uma linguagem dirigida por eventos. Eventos (tais como, clicar no mouse, ou
pressionar um botão) são utilizados para controlar a interacção do utilizador com o aplicativo.
Manipuladores Javascript são representados como atributos especiais que modificam o
comportamento de um tag HTML ao qual são anexados. Atributos de manipulação de eventos
começam todos com “On” e identificam os diversos eventos que podem ocorrer. O valor
associado ao manipulador pode ser uma sequência de declarações Javascript, ou uma
chamada de função Javascript.
MANIPULADORES DE EVENTOS
Manipuladores de eventos Javascript servem para interligar um script com actividades do
sistema ou acções do utilizador. Eles são divididos em 2 categorias:
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 12
• EVENTOS DE SISTEMA - OnLoad e OnUnload. Não exigem a interacção do utilizador para serem
activados.
• EVENTOS DE MOUSE - OnClick, OnFocus, OnBlur, OnChange, OnSelect, OnSubmit e
OnMouseOver. Exigem a interacção do utilizador para serem activados.
ONLOAD
Este evento é activado após a página HTML ser completamente carregada. Ele pode ser
associado às tags <BODY> ou <FRAMESET>.
ONUNLOAD
Este evento é activado após a página HTML ser abandonada (seja através do clique sobre
algum link, ou sobre os botões de avanço/retrocesso do browser). Ele pode ser associado às
tags <BODY> ou <FRAMESET>.
ONCLICK
O evento mais básico de mouse é tratado pelo manipulador OnClick. Este evento é activado
sempre que se dá um clique sobre um objecto que aceita evento de clique de mouse. Objectos
que aceitam um evento OnClick são links, caixas de verificação e botões.
ONMOUSEOVER
Este evento é activado quando o ponteiro do mouse passa sobre um objecto do tipo links ou
botões.
ONFOCUS
O foco ocorre quando um objecto se torna o item em foco. Isto acontece quando o utilizador
clicar ou alternar para um objecto específico na página. Este evento pode ser associado aos
objectos text, password, textarea e select (definidos pelos tags <INPUT>, <TEXTAREA> e
<SELECT>).
ONBLUR
Este evento é activado quando um objecto deixa de ter foco - quando se muda para outra
janela, ou aplicativo, ou quando se passa para outro objecto utilizando cliques do mouse, ou a
tecla TAB. Ele é associado aos objectos text, password, textarea e select (definidos pelas tags
<INPUT>, <TEXTAREA> e <SELECT>).
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 13
ONCHANGE
Este evento é activado sempre que um objecto perde o foco e o seu valor é alterado. Ele é
associado aos objectos text, password, textarea e select (definidos pelas tags <INPUT>,
<TEXTAREA> e <SELECT>).
ONSELECT
Este evento é activado quando o utilizador selecciona (deixa em destaque) parte do texto num
dos objectos aos quais está associado. São eles: text, password e textarea (definidos pelos tags
<input> e <textarea>).
ONSUBMIT
Este evento é activado no momento de enviar os dados do formulário. Ele é associado ao
objecto form (definido pelo tag <FORM>).
JANELAS E DOCUMENTOS
OBJECTO WINDOW
O objecto Window representa a janela do navegador ou um frame. É criado um objecto
window sempre que o navegador encontra um tag <BODY> ou <FRAMESET>. Também são
criados objectos para cada frame definida.
AS PROPRIEDADES MAIS UTILIZADAS:
• DEFAULTSTATUS: devolve uma mensagem que será exibida na barra de estado do
navegador quando não tiver nenhuma outra. Cuidado para não confundir com a
propriedade status, que reflecte mensagens transitórias, adequadas para um certo
momento ou acção do utilizador;
• NAME: representa o nome da janela;
• SELF: referência à janela ou frame actual;
• TOP: referência à janela do browser.
OS MÉTODOS MAIS UTILIZADOS:
• ALERT( ): exibe uma mensagem para o utilizador. A string com a mensagem deve ser
passada para o método como parâmetro;
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 14
• BACK( ): é equivalente a apertar o botão back do navegador. Ou seja, volta atrás na
última navegação feita pelo utilizador;
• FORWARD( ): tem o mesmo efeito do botão forward do navegador. Ou seja, se o
utilizador tiver clicado no botão back para voltar à última página visitada, o forward
avança novamente para a página mais recente;
• OPEN( ): abre uma nova janela. O método recebe como parâmetros uma URL (o
endereço da página que vai ficar na nova janela), o nome da janela e uma string com
suas características;
• CLOSE( ): fecha a janela especificada. O Javascript somente pode fechar
automaticamente janelas abertas por ele. Caso contrário, aparece uma caixa de
confirmação para o utilizador;
• CONFIRM( ): exibe uma caixa de mensagem para o utilizador com duas opções: OK e
Cancel. Caso o utilizador pressione OK, o método devolve true. Caso contrário, false. Ele
recebe como parâmetro uma string com a mensagem a ser exibida para o utilizador;
• PROMPT( ): exibe uma caixa de mensagem e campo para o utilizador entrar com uma
string. O método devolve a string digitada pelo utilizador. São aceitos dois parâmetros.
O primeiro é uma string com a mensagem a ser exibida e o segundo é o valor padrão
da string a ser digitada pelo utilizador.
• SETTIMEOUT(): estabelece um atraso da mensagem na invocação da expressão, e
devolve um identificador que deverá ser guardado numa variável global. Os
parâmetros são: expressão, mensagem e argumentos.
CARACTERÍSTICAS DO MÉTODO OPEN()
• HEIGHT: esta propriedade contém a altura, em pixels, da janela do navegador;
• WIDTH: semelhante à propriedade anterior, porém trabalha com a largura;
• STATUS: especifica a mensagem a ser exibida na barra de estado do navegador. É muito útil
para comunicar ao utilizador pequenas mensagens.
• MENUBAR: apresenta a barra de menus.
• SCROLLBARS: apresenta as scrollbars sempre que um documento seja maior que a janela do
navegador.
• TOOLBAR: apresenta a barra de ferramentas do navegador.
OBJECTO DOCUMENT
PROPRIEDADES:
• bgColor- Devolve ou atribui a cor de fundo.
• Cookie - Devolve ou atribui propriedades, no formato nome/valor, à cookie http associada
ao domínio do documento, e armazenada no ficheiro cookie no computador cliente.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 15
• fgColor - Devolve ou atribui a cor do texto.
• IastModified - Devolve a data da última modificação do documento.
• IinkColor - Devolve ou atribui a cor a uma ligação ainda não visitada.
• Title - Devolve ou atribui o título a apresentar na barra de título do browser.
• URL - Devolve ou atribui o URL do documento actual.
• vlinkColor - Devolve ou atribui a cor a uma ligação após ser visitada.
PRINCIPAL MÉTODO
• Write() - Adiciona conteúdo ao documento HTML.
OBJECTOS PRÉ-DEFINIDOS Javascript considera HTML uma linguagem orientada a objectos, na qual os diversos tags HTML
correspondem a diferentes tipos de objectos Javascript.
Objecto NAVIGATOR
Este objecto dá informações sobre o navegador. Apresenta as seguintes propriedades:
• appname: devolve o nome do browser do utilizador.
Exemplo: navigator.appName = Netscape
• appversion: devolve a versão do browser e a versão do sistema operacional que está a
ser utilizada. [formato: número da versão (plataforma; país)]
Exemplo: navigator.appVersion = 2.0 (Win95; I)
• appcodename: devolve o nome do código de desenvolvimento interno do criador de
um browser específico.
Exemplo: navigator.appCodeName = Mozilla
• userAgent: usada em cabeçalhos HTTP para fins de identificação, é a combinação das
propriedades appCodeName e appVersion. Servidores Web usam esta informação
para identificar os recursos que o navegador dispõe.
Exemplo: navigator.userAgent=Mozilla/2.0 (Win95; I)
Objecto LOCATION
Este objecto é utilizado para identificar o documento corrente. Consiste numa URL completa no
formato protocolo//servidor:porta/caminho seguidos de ?search ou #hash.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 16
As propriedades deste objecto são (cada uma de suas propriedades representa uma parte da
URL total):
• protocol: devolve o protocolo de transporte do documento.
Exemplo: location.protocol = http:
• hostname: identifica o nome do computador hospedeiro.
• port: especifica a porta para o endereço. Esta informação é utilizada apenas se uma
porta não-padrão estiver sendo usada.
• pathname: define o caminho e o nome do arquivo.
• search: devolve quaisquer comandos de consulta que possam estar embutidos na URL
corrente. Valores de search são separados do resto da URL por um sinal de interrogação
(“?”).
Exemplo: location.search = nome=Joao
• hash: devolve quaisquer âncoras que possam ter sido passadas na URL. Valores de hash
são separados do resto da URL por um sinal de cardinal (“#”).
Exemplo: location.hash = capitulo1
Objecto CHECKBOX
Utilizado na construção de caixas de verificação. As propriedades são:
• value: especifica o valor da caixa.
Exemplo: nomeForm.nomeCheckbox.value = “1”
• checked: valor booleano que especifica o estado de selecção da caixa (seleccionada
ou não-seleccionada).
Exemplo:
if ( nomeForm.nomeCheckbox.checked == true ) {
funcao(); }
• defaultchecked: valor booleano que especifica o estado default de selecção da caixa.
Objecto RADIO
Corresponde a um array de botões, onde todos os botões compartilham a mesma propriedade
name. As propriedades são:
• name: especifica o nome do objecto.
• checked e defaultchecked: funcionamento idêntico ao definido em checkbox.
• length: especifica o comprimento do array.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 17
Objecto HIDDEN
Utilizado para enviar informações quando o formulário é submetido (este objecto não aparece
no formulário). As propriedades são:
• name: especifica o nome do objecto.
• value: especifica a informação que está a ser passada.
Objecto TEXT
Utilizado para entrada/saída de dados. As propriedades são:
• name: especifica o nome do objecto.
• value: especifica o valor do objecto.
• defaultvalue: especifica o valor default do objecto.
Objecto RESET
Utilizado para limpar dados de um formulário. As propriedades são:
• name: especifica o nome do botão.
• value: especifica o título colocado na face do botão.
Exemplo: document.form.botao.value=“novo titulo”
Objecto SUBMIT
Utilizado para intercalar Javascript e outros scripts/programas. As propriedades são:
• name: especifica o nome do botão.
• value: especifica o título colocado na face do botão.
Objecto BUTTON
Utilizado na construção de interfaces. As propriedades são:
• name: especifica o nome do botão.
• value: especifica o título colocado na face do botão.
Objecto TEXTAREA
Utilizado para entrada/saída de dados. As propriedades são:
• name: especifica o nome do objecto.
• value: especifica o valor do objecto.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 18
• defaultValue: especifica o valor default do objecto.
Objecto SELECT
Utilizado para construir caixas de seleção. As propriedades são:
• name: especifica o nome do objecto.
• options: array que contém uma entrada para cada opção de uma caixa de selecção.
• length: especifica o comprimento do array de opções.
FORMULÁRIOS (FORMS)
A linguagem HTML também permite que o cliente (navegador) interaja com o servidor,
preenchendo campos, clicando em botões e passando informações. Por exemplo, um site com
um Guest Book (formulário) que permite aos visitantes dar opiniões. Essas informações, devem
ser tratadas por programas, denominados scripts, que podem armazená-las para uma posterior
utilização. Os scripts podem ainda devolver um outro documento HTML, uma URL, ou algum
outro tipo de dado para o cliente.
O elemento FORM, da linguagem HTML, é justamente o responsável por tal interação. Ele
permite de uma maneira agradável e familiar recolher dados do utilizador através da criação
de formulários com janelas de entrada de textos, botões, etc.
É preciso ter em mente que o FORM recolhe dados, mas não os processa - os scripts é que são
responsáveis por isso. É aí que entra a necessidade da interface CGI. Tal interface, permite que
o servidor comunique com o script que vai actuar sobre essas informações, devolvendo os
resultados para o navegador.
Para criar um formulário, utiliza-se os tags <FORM> </FORM>. Todos os outros comandos, devem
ficar dentro destes Tags.
ATRIBUTOS
• NAME – define o nome do formulário.
• METHOD – define o método de envio de dados. Aceita os valores:
� GET – os dados serão enviados pela URL da página.
� POST – os dados serão enviados por meio de uma variável de ambiente (o utilizador não
vê este processo).
• ACTION – determina a URL de destino da informação.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 19
ENTRADA DE DADOS
O tag <INPUT> especifica uma variedade de campos editáveis dentro de um formulário. Ele
pode receber diversos atributos que definem o tipo de mecanismo de entrada (botões, janelas
de texto, etc.), o nome da variável associada com o dado da entrada, o alinhamento e o
campo do valor mostrado.
SINTAXE:
<INPUT TYPE=”[tipo]” NAME=”[nome]” ID=”[identificador]”
VALUE=”[valor padrão]” SIZE=”[tamanho]”
MAXLENGHT=[limite de caracteres]”
SRC=”[URL]” CHECKED READONLY DISABLED
TABINDEX=”[sequencia]” ACCESSKEY=”[tecla de atalho]”>
Os ATRIBUTOS do INPUT são:
� TYPE- determina o tipo de entrada de dados.
Os valores válidos são:
� text: entrada de texto. Permite que um texto seja digitado apenas numa linha. Utilizado
para entrada de nome, endereço, e-mali, telefone, etc.
� hidden: campo oculto. Permite que um dado seja submetido sem que o utilizador o veja
no formulário. Utilizado para enviar dados como código de acesso, id do utilizador ou
qualquer informação importante para o programa, mas que não precisa de interacção
com o utilizador.
� password: entrada de senha. Funciona como o campo “text”, mas não apresenta os
dados digitados. No lugar deles são apresentados asteriscos.
<INPUT TYPE="PASSWORD" NAME="SENHA" MAXLENGHT=6>
� file: entrada de arquivo. Por meio desse campo é possível fazer upload de arquivos. Ele
só funciona se o atributo ENCTYPE estiver com o valor “multipart/form-data”.
� submit: botão de envio. É o responsável por enviar o formulário para o seu destino.
Exemplo: <INPUT TYPE="SUBMIT" VALUE="enviar">
Resultado:
� reset: botão de reset. Serve para limpar todos os dados inseridos pelo utilizador.
Exemplo: <INPUT TYPE="RESET" VALUE="Limpar">
Resultado:
� checkbox: caixa de múltiplas opções. Permite que o utilizador responda a questões de
múltipla escolha, ou seja, com mais de uma resposta.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 20
Exemplo: <INPUT TYPE="CHECKBOX" NAME="Netscape" VALUE="net">Netscape<p> <INPUT TYPE="CHECKBOX" NAME="Explorer" VALUE="exp">Internet Explorer<p> <INPUT TYPE="CHECKBOX" NAME="Mosaic" VALUE="mos">Mosaic<P> <INPUT TYPE="CHECKBOX" NAME="Hot Java" VALUE="hot"> Hot Java<P>
Resultado:
� radio: caixa de opções simples. Possibilita que o utilizador responda a questões de
múltipla escolha, em que escolhe apenas uma resposta.
Exemplo: <INPUT TYPE="RADIO" NAME="Gostou desta home page?" VALUE="sim">sim<p> <INPUT TYPE="RADIO" NAME="Gostou desta home page?" VALUE="nao">não<p>
Resultado: Gostou desta home page?
� button: botão genérico. Utilizado normalmente para executar funções em linguagens
client-side como JavaScript ou vbscript.
� image: botão imagem. Funciona como um botão genérico, a diferença é que se
associa uma imagem a ele.
� NAME - Atribui um nome ao dado. Esse campo é obrigatório, o qual identifica a
informação enviada.
� ID - é um atributo de identificação que não serve apenas nos tags de formulário. Pode-se
atribuir uma identificação a praticamente todos os tags HTML.
� VALUE- atribui ao campo um valor-padrão. Para os tipos “text” e “password” eles são
opcionais, para os tipos “hidden”, “checkbox” e “radio” eles são obrigatórios, nos botões
“submit”, “reset” e “button” é neste atributo que se insere o texto que será apresentado
no botão (se não utilizá-lo, o botão aparece com o mesmo nome do seu tipo).
� SIZE – determina o tamanho da entrada de texto em caracteres. Pode ser utilizado nos
tipos “text”, “file” e “password”.
� MAXLENGHT- determina o nº máximo de caracteres que pode ser digitado numa entrada
de texto. Pode ser utilizado nos tipos “text”, “file” e “password”.
� SRC – define a URL da imagem para o botão do tipo “image”.
� TABINDEX – determina a sequência que o navegador respeitará quando o utilizador
pressionar a tecla TAB.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 21
� TEXTAREA – áreas de texto são utilizadas para receber volumes maiores de informações
como uma sugestão, uma dúvida, ….Consegue receber textos de várias linhas.
Para se limitar o tamanho do campo mostrado no ecran, faz-se o uso dos atributos COLS e
ROWS que especificam, respectivamente, o número de colunas e linhas que se deseja
mostrar ao utilizador. O atributo NAME é obrigatório, e especifica o nome da variável, que
será associada à entrada do cliente (navegador).
Exemplo: <TEXTAREA NAME="nome" COLS=20 ROWS=3>texto</TEXTAREA>
Resultado:
CSS E LAYERS CSS (Cascading Style Sheets - folhas de estilos em cascata)é uma linguagem para estilos que
define o layout de documentos HTML. Por exemplo, CSS controla fontes, cores, margens, linhas,
alturas, larguras, imagens de fundo, posicionamentos e muito mais.
HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.
CSS é uma revolução no mundo do web design. Os benefícios concretos do uso de CSS incluem:
• controle do layout de vários documentos a partir de uma simples folha de estilos;
• maior precisão no controle do layout;
• aplicação de diferentes layouts para servir diferentes mídias (ecran, impressora, etc.);
• emprego de variadas, sofisticadas e avançadas técnicas de desenvolvimento.
O Netscape Navigator introduz novas funcionalidades que permitem definir blocos de HTML que
podem ser precisamente posicionados na página Web.
Utilizando código JavaScript, esses blocos - ou Layers - podem ser modificados das mais variadas
formas: movendo-os, escondendo-os, modificando a sua cor de fundo, etc. Mais: o Navigator
permite inclusive modificar o seu conteúdo ou criar novos layers.
Layers - elementos em camadas, isto é, como os elementos se sobrepõem uns aos outros.
Para fazer isto definimos para cada elemento um número índice (z-index). O comportamento é
que elementos com número índice maior se sobrepõem àqueles com menor número.
ESTILOS
� Para definir um estilo utiliza-se atributos como font-size,text-decoration... seguidos de dois
pontos e o valor a atribuir.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 22
Exemplo:
font-size: 10pt; text-decoration: underline; color: black;
� Para definir o estilo de uma etiqueta basta a escrever seguida da lista de atributos -
fechados entre chaves.
Exemplo:
H1{text-align: center; color:black}
As unidades de medida a utilizar são as seguintes:
Pontos pt
Polegadas in
Centímetros cm
pixels px
Tag <SPAN>
Utiliza-se para definir estilos em secções reduzidas de uma página.
Com o atributo Style indica-se as características de estilos.
Exemplo: <p> Isto é um parágrafo com várias palavras <SPAN style="color:green">de cor verde</SPAN>.
É muito fácil </p>
Tag <DIV>
Utiliza-se para definir seções de uma página e aplicar estilos com o atributo style (utiliza-se para
definir estilos de uma só vez a todo um bloco da página).
Exemplo: <div style="color:#000099; font-weight:bold"> <h3>Estas etiquetas vão em <i>azul e negrito</i></h3> <p> Continuamos dentro do DIV, por isso permanecem os estilos. </p> </div>
A diferença entre <SPAN> e <DIV> é que com o <DIV> pode-se aplicar estilos a uma parte mais
ampla da página, por exemplo com três parágrafos. Além do mais, a etiqueta <DIV> tem um
uso adicional que é o de criar divisões nas páginas às quais se pode aplicar uma quantidade
adicional de atributos para modificar o seu comportamento.Porém o seu uso mais frequente é o
de converter uma divisão numa camada.
Uma camada (layer) é uma divisão, uma parte da página, que tem um comportamento muito
independente dentro da janela do navegador, já que se pode posicioná-la em qualquer parte.
As etiquetas <LAYER> e </LAYER> têm como objetivo construir camadas, mas estas etiquetas só
são compatíveis com o Netscape, por isso é mais recomendável utilizar a etiqueta <DIV> para
construir camadas.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 23
Os Atributos:
• POSITION - Determina como serão considerados os comandos de posicionamento. Ele
determina como serão posicionados os objectos HTML no browser. Pode receber 3 valores:
� absolute: é o único que permite a sobreposição de camadas, e com ele determina-se
uma posição em relação à página criada
� relative: esse valor define que o texto terá posições relativas ao resto da página, e com
isso ele não se pode sobrepor.
� estatic: determina que ele não reconhecerá nenhum posicionamento especial
determinado pelo controle de camadas.
• LEFT- Define a distância que a camada vai ficar da borda esquerda do browser.
• RIGHT- Define a distância que a camada terá da borda direita do browser.
• TOP- Define a distância que a camada terá do topo do browser.
• WIDTH- Define a largura, ou seja, a dimensão horizontal da camada.
• HEIGHT- Define a altura da camada, ou seja, a dimensão vertical.
• Z-INDEX- Determina a ordem em que as camadas se sobrepõem. Quanto maior o valor
mais alta é a camada.
• VISIBILITY- é utilizado para ocultar uma camada. Os valores válidos são:
visible (visível), hidden (oculto), inherit (herda o atributo da camada superior, padrão).
• CLIP – é utilizado para recortar determinadas áreas da camada, que não podem ser
vistas. O cliping define-se através de 4 valores: rect (<top>, <right>, <bottom>, <left>)
APPLETS Um APPLET é um programa escrito numa linguagem de programação (normalmente Java) que
pode ser incluído numa página HTML através do tag <APPLET>.
Os applets são carregados e formatados dentro de uma página web de forma semelhante a
uma imagem. Na maioria dos browsers, quando o arquivo HTML indica que uma imagem deve
ser colocada na página, a imagem é carregada a partir do servidor web e exibida no local
apropriado. Num browser que suporte Java, o Applet também é exibido dentro da página web.
Consequentemente, nem sempre o utilizador pode ter certeza se uma imagem no seu browser é
um arquivo de imagem ou um applet. Quando um applet é colocado numa página web, é
definida uma área específica para a sua exibição. Essa área de exibição pertence ao applet,
para ser utilizada conforme a sua execução. Alguns applets utilizam essa área para apresentar
animações; outros utilizam para exibir informações a partir de um banco de dados ou para
permitir que o utilizador seleccione itens ou digite informações. A largura e altura dessa área são
definidas no arquivo HTML, dentro da chamada ao applet, nos campos width e height.
GGeessttããoo ddee RReeccuurrssooss PPaarrttiillhhaaddooss –– HHTTMMLL 24
Os applets de Java estão programados em Java e pré-compilados, é por isso que a maneira de
trabalhar destes, varia um pouco em relação às linguagens de script como Javascript. Os
applets são mais difíceis de programar que os scripts em Javascript e requerem alguns
conhecimentos básicos da linguagem Java.
A principal Vantagem de utilizar applets consiste em que são muitos menos independentes do
navegador que os scripts em Javascript, inclusive independentes do sistema operativo do
computador onde se executam.
Como Desvantagem em relação com Javascript, denota-se que os applets são mais lentos de
processar e que têm um espaço muito delimitado na página onde se executam, ou seja, não se
misturam com todos os componentes da página, nem têm acesso a eles. É por isso que com os
applets de Java não se pode executar directamente acções como abrir janelas secundárias,
controlar Frames, formulários, camadas, etc.
Principais características:
• Necessitam de um web browser para a sua interface gráfica
• Tem restrições de acesso a unidades de disco - só acede com a permissão explícita do
utilizador (alguns web browsers não permitem o acesso ao disco em nenhuma circunstância)
• Tem restrição de acesso à rede - podem aceder apenas ao site de origem (alguns web
browsers permitem ao utilizador definir permissões para que o applet aceda a outros sites)
Métodos:
• init( ) - método chamado imediatamente após a criação do applet. É chamado pelo web
browser na primeira vez que o applet é carregado.
• start( ) - método chamado pelo web browser toda a vez que o applet é executado.
• stop( ) - método chamado pelo web browser sempre que o applet deixa de ser visível
• destroy( ) - método invocado quando todos os recursos computacionais utilizados pelo applet
precisam de ser “libertados”.
SITES http://www.criarweb.com http://www.truquesedicas.com
http://www.w3schools.com/css/ http://www.dynamicdrive.com/
http://www.artifice.web.pt/tutoriais/cntd/tut_html1.html
http://www.eq.uc.pt/~jorge/aulas/internet/paginaweb/pw-indice.html
http://java.sun.com/docs/books/tutorial/deployment/applet/appletsonlyindex.html (…).