TAGS DE FORMATAÇÃO DE TEXTOS - mat.uc.ptmat1042/docs/mce/manualhtml/manualHtml.pdf · A principal...

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


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


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

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

 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.


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.


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


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.


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


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.


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:


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


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;


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


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


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.


Objecto HIDDEN

Utilizado para enviar informações quando o formulário é submetido (este objecto não aparece

no formulário). As propriedades são:


• value: especifica a informação que está a ser passada.

Objecto TEXT

Utilizado para entrada/saída de dados. As propriedades são:


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



Objecto BUTTON

Utilizado na construção de interfaces. As propriedades são:



Objecto TEXTAREA

Utilizado para entrada/saída de dados. As propriedades são:


• value: especifica o valor do objecto.


• defaultValue: especifica o valor default do objecto.

Objecto SELECT

Utilizado para construir caixas de seleção. As propriedades são:


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


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.


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.


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


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.


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.


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 (…).

TAGS DE FORMATAÇÃO DE TEXTOS - mat.uc.ptmat1042/docs/mce/manualhtml/manualHtml.pdf · A principal...

Documents

Transcript of TAGS DE FORMATAÇÃO DE TEXTOS - mat.uc.ptmat1042/docs/mce/manualhtml/manualHtml.pdf · A principal...