1 - Departamento de Matemática



Í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 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

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:

…

• Todos os ‘tags’ obedecem a uma hierarquia:

(o primeiro a abrir é o último a fechar, e vice-versa).

• É indiferente utilizar maiúsculas ou minúsculas nos ‘tags’:

é igual a e a .

• Não é recomendável que os documentos Web contenham acentos.

Tags Principais

... : ENVOLVE TODAS AS SECÇÕES DE UM DOCUMENTO (HEAD E BODY).

... : envolve a secção de cabeçalho do documento.

... : indica o título do documento para o Browser. Geralmente os Browsers apresentam este título na barra de título da Janela.

... : 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 E 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

... - 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.

... - Aplica o estilo negrito.

... - Aplica o estilo itálico.

... - Aplica o estilo sublinhado (nem todos os browser o reconhecem).

... - Faz com que o texto fique sobrescrito.

... - Faz com que o texto fique subscrito.

... - Utiliza a pré-formatação, ou seja, deixa o texto da maneira em que foi digitado.

- permite alterar os atributos das fontes de um texto:

• Face – tipo de letra

Size – tamanho da letra

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: texto

O comando é o seguinte: ....

|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

… - DELIMITA UM PARÁGRAFO, DEIXANDO UMA LINHA EM BRANCO ANTES DA PRÓXIMA.

- 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 … POSSIBILITA DEFINIR HIPERLIGAÇÕES:

• Para inserir um hyperlink que aponte para outra página:

Outro Página

• Para alguém enviar um e-mail para uma conta de e-mail:

Exemplo:

Dúvidas, Críticas e sugestões envie um e-mail

• Para incluir um assunto “Subject” para o e-mail.

Exemplo:

JavaScript

• Para incluir uma imagem como hyperlink.

(Atribuir o valor 0 ao border, caso não se queira que a imagem tenha limite).

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: Rafael Web Site.

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.

- listas ordenadas

- 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.

- lista não ordenada

- 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

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.

- adicionar uma barra à página.

Tag

O TAG QUE MANIPULA IMAGENS É A , 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:

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.

• 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, , etc.

A linguagem JavaScript

JAVASCRIPT É UMA LINGUAGEM DE SCRIPT - SCRIPTS SÃO “MINIPROGRAMAS” INTERPRETADOS E VOLTADOS PARA EXECUÇÃO DE TAREFAS ESPECÍFICAS.

... - 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: ... ) – 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.

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:

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.

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 |

| | ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download