0792.docx

Enviar Acessar Registre-se

Browse

<iframe height="0" src="//www.googletagmanager.com/ns.html?id= src="//www.googletagmanager.com/ns.html?id=GTM-ZWF6" GTM-ZWF6" style="display:none;visibility:hidden" width="0"> Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more Descarregar Standard view Full view 1

of 36

Save to My Library Look up keyword Like this Share on social networks 1Atividade × Share to your social networks. Tweet Incorporar 172222496

176376831

1410 141086 8650 5041 41

/4m /4mB3nZ B3nZV56 V56C C1S

0 of . Results for: No results containing your search query Manual 0792

Ratings: (0)|Views: 203 |Likes: 0 Publicado por porBruno Maganinho More info: Published by: Bruno Maganinho on Sep 30, 2013 Direitos Autorais:Attribution Non-commercial Availability: Read on Scribd mobile: iPhone iPhone,, iPad and Android Android.. download as PDF, TXT or read online from Scribd Flag for inappropriate content| content|Acrescentar à coleção See more See less 1 36 Módulo: Criação de páginas para a web em hipertexto Código da UFCD: 0792 Manual do Formando Data: Maio/2013Elaborado por: Bruno Maganinho 2 36 Índice Índice .................................................................................................................. 2

1 Conceitos gerais de HTML .................................................................................... 3

1.1

Ficheiros HTML .......................................................................................... 4

1.2

Estrutura da página HTML .......................................................................... 5

2

Ligações ......................................................................................................... 5

2.1

Tag para ligação ............................................................................. 5

2.2

Ligação local com caminhos relativos e absolutos ....................................... 6

2.3

Ligação a outros documentos na Web e a determinados locais dentro dedocumentos .................................................................................................... 8

3

Formatação de texto com HTML ......................................................................... 9

3.1

Estilos de caracteres, caracteres especiais e fontes ..................................... 9

3.2

Quebra de linha de texto ....................................................................... 11

3.3

Endereços de mail ................................................................................ 12

4

Imagens ....................................................................................................... 12

4.1

Imagens online .................................................................................... 13

4.2

Imagens e ligações ...................................... Erro! Marcador não definido.

4.3

Imagens externas e de fundo................................................................. 13

4.4

Atributos das imagens .......................................................................... 13

4.5

Referência das cores, cor de fundo e de texto .......................................... 17

4.6

Preparação das imagens...............................

Erro! Marcador não definido.

5

Multimédia na web ......................................................................................... 20

5.1

Ficheiros de som e de vídeo ................................................................... 20

6

Animação na web ........................................................................................... 20

6.1

Animação através de ficheiros de imagens GIF e JAVA .............................. 21

7

Desenho de páginas web ................................................................................ 23

7.1

Estrutura da página .............................................................................. 23

8

Tabelas ......................................................................................................... 24

8.1

Definição e constituição de uma tabela.................................................... 24

8.2

Alinhamento de células e tabelas ............................................................ 25

8.3

Dimensão das colunas e tabelas ............................................................. 25

9

Frames ......................................................................................................... 26

9.1

Definição e atributos de frames .............................................................. 27

9.2

Conjuntos e ligações de frames .............................................................. 28

10

Mapas ....................................................................................................... 29

10.1

Estrutura de map e utilização de Agora uma situação em que há sobreposição, i.e., uma falta de aninhamento: 1.1

Ficheiros HTML HTML significa Hyper Text Markup Language (Linguagem de marcação de texto). 5 36Um arquivo HTML é um arquivo texto contendo pequenas marcações que serãointerpretadas por um browser (como o mozilla firefox por exemplo). Estas marcações sãochamadas de TAGs (ou etiquetas). As tags mostram ao browser como exibir a página.Um arquivo HTML deve ter a extensão htm ou html e pode ser criado usando um editorde texto comum.

1.2

Estrutura da página HTML Um elemento, em HTML, é um comando que é identificado por aparecer dentro destessinais <>. No exemplo acima .Há elementos que podem ou devem levar atributos, um exemplo desta situação é o casodo BASE usado em cima. O elemento imagem usa, neste caso, o atributo HREF.Os elementos em HTML são classificados de acordo com o local onde são inseridos. Osque são inseridos no corpo do documento (entre o e ) designam-sepor BODY ELEMENTS e os elementos situados na cabeça designados por HEADELEMENTS. 2

Ligações O verdadeiro poder da Internet reside no facto de ser possível estabelecer ligações(links) entre diferentes peças de informação, formando uma verdadeira teia (web) deconhecimento. Esses links de um tipo especial designam-se por hiperligações.A World Wide Web utiliza um esquema de endereços conhecido como URLs (UniformResource Locators) para identificar o local de destino de cada hiperligação. Por vezesestas ligações também são conhecidas por âncoras.Sem esta estrutura não se falaria de HTML mas apenas de TML (Text Markup Language)! 2.1

Tag para ligação …

- Este é o elemento de âncora e é usado na interligação de documentos. De ummodo geral um utilizador ao carregar numa imagem ou num texto pode abrir uma novapágina, imagem ou gravar um ficheiro. Este elemento tem vários atributos mas o HREF éobrigatório para funcionar. 6 36 Atributos mais importantes href="URL". href é a abreviatura de Hypertext reference ou seja o recurso que o browserirá tentar abrir. Este recurso pode ser uma imagem, um ficheiro ou uma nova páginah ref="http://…". É possível também abrir re cursos associados a outros serviços dainternet nomeadamente:
Cria um documento em HTML de acordocom o conteúdo do FTP. De referir que só épossível esta situação em FTP sites queaceitem entrada de utilizadores anónimos. name="nome da â ncora”

o nome faz a identificação da âncora quepode ser usado para saltar para umadeterminada parte de um documento. Exemplo: Supondo que temos dois documentos: o doc1.html e o doc2.html. Ao carregarmos com orato na âncora do doc2.html abrir-se-á a página relativa ao doc1.html e o seuposicionamento será na âncora que tem o nome de "aqui". O doc1.html contém: Isto é uma âncora. O doc2.html contém: Doc1 clicando salta para a zona doc1.html ondeestá um elemento A com o nome de "aqui". Exemplo: Cincork abre uma sessão de http para oCincork. 2.2

Ligação local com caminhos relativos e absolutos Todos os documentos numa única pasta A ligação a um outro documento pode ser feita a um nível local (no mesmo computadoronde se encontra o programa HTML em questão) pois não é necessário navegar naInternet para lhe ter acesso. 7 36A âncora mais simples é aquela que liga a um documento situado na mesma pasta doprograma HTML em funcionamento: texto que se refere a esse link em q a se refere a âncora (anchor, em inglês) e href a referência de hipertexto(hypertext reference). Os documentos de tipo HTML podem ter a terminação html

ou htm . Usar uma imagem como uma hiperligação As imagens podem ser usadas apenas com fins decorativos mas também com outrosobjetivos como, por exemplo, figuras de funco, marcas de água, botões ou hiperligações.Uma imagem pode ser utilizada como uma hiperligação colocando simplesmente oelemento entre um conjunto de etiqueta de âncora. Por exemplo:Clicar para ver uma página sobre elefantes.ou, agora este exemplo, em que se coloca o atributo border=0 porque não se pretendeuma imagem com bordadura, que é colocada, por defeito, pelo HTML:Clicar para ver uma página sobre elefantes.

8 36 Com os documentos em pastas diferentes A etiqueta

permite também a ligação a documentos HTML que estejamlocalizados em pastas diferentes daquele que contém a âncora. Suponha-se que asimagens, por uma questão de organização, estão todas armazenadas numa determinadapasta, então a sintaxe para a hiperligação passa a ser: esta imagem está numa pasta abaixo isto significa que a pasta imagens está localizada um nível abaixo daquele em que está afuncionar o programa em HTML que contém a âncora.Se for necessário fazer referência a documentos que se situem em pastas a um nívelsuperior àquele em que está a funcionar o programa em HTML que contém a âncora,então a sintaxe passa a ser: esta i magem está numa pasta acima 2.3

Ligação a outros documentos na Web e a determinados locaisdentro de documentos A ligação a documentos localizados na web vai fazer recurso da formatação URL daseguinte maneira: texto que remete para o link
a>ou, num exemplo específico:Sítio do Cincork 9 36 3

Formatação de texto com HTML O texto que é utilizado nas páginas web pode ser formatado de formas muito diversas:cor, tamanho, tipo de letra (fonte) e ainda escrever numa forma superior à linha(superscript, em inglês) ou inferior à linha (subscript, em inglês). 3.1

Estilos de caracteres, caracteres especiais e fontes Tamanho da letra A tag …

pode ser utilizada para valores entre 1 (a letra mais pequena)e 7 (a maior) sendo que 3 é o tamanho normal do texto. Estes valores são relativos edependem do tipo de fonte que o utilizador tiver escolhido para o browser.A sintaxe é a seguinte: Sítio do Cincork, em que γ está entre 1 e 7. O tamanho da letra pode ser alterado de uma forma relativa: Sítio do Cincork Sítio do Cincork

em que +γ ou –γ representam, respetivamente, um aumento ou redução de tamanhorelativamente ao tamanho em utilização.O tamanho utilizado por defeito pode ser definido para uma determinada página webcom a seguinte etiqueta: que altera o tamanho normal de 3 para um outro valor qualquer. Esta etiqueta não temterminação pelo que continua ativa até ocorrer outra tag . Cor da fonte Exemplos:

Vinho Tinto

Teste de Colorização Os atributos size e color podem ser utilizados simultaneamente na tag : Azul Cor do Mar

Tipo de letra (fonte) Os browsers podem alternar entre diferentes tipos de letras desde que essas fontesestejam instaladas no computador do utilizador. A fonte (tipo de letra) pode serformatada pela tag seguinte:

10 36Exemplo: Letra Arial Quando se pretender voltar à fonte definida por defeito no computador do utilizador temque se colocar a tag de terminação . A utilização de caracteres especiais Designam-se por caracteres especiais ou entidades aqueles que, normalmente, não sãoutilizáveis diretamente através do teclado ou que têm um significado especial em HTML ecomo tal são interpretados como código e não como caracteres. Quando se está a trabalhar, por exemplo, numa fórmula matemática e se pretende escrever o sinal de “ > ” isso será interpretado pelo browser como uma tag e então para escrever essa fórmula énecessário recorrer-se à utilização de caracteres especiais.As entidades podem ser descritas por códigos numéricos ou por palavras-chave. Algumasentidades podem ser representadas das duas formas. por exemplo. o símbolo decopyright © pode ter uma representação numérica (©) ou através de uma palavra-chave (©) .Para que uma entidade seja devidamente interpretada por um browser tem que começar sempre com o símbolo “ &

” e terminar com “ ; ”. Os códigos são sensíveis a letras maiúsculas e minúsculas e como tal deverão ser digitados como se encontram, porexemplo, no Quadro 1 dos Anexos. A inserção de uma entidade numa página web Para exemplificar a utilização de entidades vai-se em seguida introduzir uma nota decopyright numa página web:1. Abrir o Notepad.2. No início do documento escreve-se , na linha seguinte: .3. Em baixo e .4. No escrever Copyright 2005.5. E depois da palavra Copyright, digta-se o caracter &.6. Finalmente introduz-se um dos códigos: o numério ou a palavra. Por exemplo, parautilizar o símbolo de copyright utiliza-se #169 ou copy. Terminase o código com “;”. O texto no deverá ser este: Copyright © 2013 ou Copyright © 2013 enquanto que numa janela de um browser da web será assim: Copyright © 2005 Agora, é apresentado um novo exemplo com a utilização de duas entidades:

11 36Copyright © 2005 A minha marca registada ® é o símbolo de qualidade!e o resultado, numa  janela de um browser, pode ser visto na Figura: Estilos no texto O HTML tem várias formas de formatação para o texto que além de se poderem utilizarisoladamente também se podem combinar entre si ou com outras tags. Formatações básicas a. Itálico → Vamos visitar Xangai!!!! b. Carregado → Isto está escuro! c. Sublinhado → Santa Maria de Lamas

3.2

Quebra de linha de texto Parágrafos Em HTML as teclas de ou a de não têm qualquer significado, omesmo para os espaços ou linhas em branco. No entanto, a tag para parágrafo insereuma linha em branco e inicia um novo parágrafo. Sintaxe:

Este é um parágrafo!

12 36Em algumas situações não é necessário utilizar a tag de finalização

, mas isto é umcaso de exceção pois a norma é o de se ter que fechar todas as etiquetas que se abrem. Nova linha Existe ainda a tag de nova linha (
) que força a passagem para outra linha, mas nãoinsere uma nova linha. Esta etiqueta não tem terminação. 3.3

Endereços de mail Para fazer ligações a endereços de correio eletrónico, devemos utilizar a tag , com o atributo href=”mailto:endereço”. Exemplo:

Clique aqui para enviar uma mensagem de correio eletrónico.

Deste modo, a palavra aqui fica com ligação e abre um qualquer programa de cliente deemail com o endereço escrito após o mailto:, no campo Para . 4

Imagens Diferenças entre os formatos dos gráficos De entre a multitude de formatos gráficos que se podem utilizar os três mais comuns naweb são o GIF, JPEG e PNG. Cada um destes formatos tem as suas particularidades etêm tipos diferentes de aplicações. A diferença fundamental entre estas três formasreside na forma de compressão das imagens, i.e., como as imagens vêm comprimido oseu tamanho por forma a acelerar a sua transmissão pela Internet. O formato GIF O formato GIF (Graphics Interchange Format) está especialmente adaptado ao desenhodas mais diversas formas, a botões de navegação, a clip art e a todo o tipo de formasgráficas que não exijam muitas cores.Quando uma imagem ou gráfico é guardado o seu tamanho é comprimido para nãoocupar muito espaço no disco e para acelerar a sua velocidade de transmissão na rede.Como já se disse cada um destes três formatos comprime as imagens de uma formaparticular. O GIF utiliza o algoritmo de compressão LZW (derivado do nome dos seusinventores: Lempel-Ziv e Welch). Quando uma imagem é armazenada o LZW reduz todasas linhas com a mesma cor da imagem a um determinado valor que é armazenado,formando uma espécie de inventário das cores.

13 36 O formato JPEG As fotografias têm um leque de cores bastante mais alargado relativamente a desenhosou a botões, como tal é necessário a forma de compressão existente no formato JPEG(Joint Photographic Experts Group). Em vez de fazer um inventário de cores como é ocaso do método GIF, o JPEG utiliza um algoritmo complexo que reduz o tamanho da imagem removendo cores de partes do ficheiro em que a sua “falta” será menos notada pelo utilizador. Este formato produz uma compressão bastante eficaz para imagensfotográficas que pode atingir um fator de 10 (por exemplo, um ficheiro com o tamanhode 3000 Kb pode ser reduzido a 300 Kb). O formato PNG

O método PNG (Portable Network Graphics) é um sistema menos utilizado mas éconsiderado por alguns como um formato para o futuro. Este formato combina asmelhores qualidades dos formatos GIF e JPEG. 4.1

Imagens online Uma imagem do tipo online é aquela que se posiciona entre o texto de uma página. Oelemento para colocar/embeber numa página uma imagem online é o seguinte: ou ou em que, por exemplo, nome da imagem.gif é o nome deum ficheiro de tipo GIF que está armazenado na mesma pasta do documento HTML. 4.2

Imagens externas e de fundo Para além de ser colorida uma página web pode ainda ter um fundo com textura. Para talutiliza-se uma pequena imagem (em GIF ou JPEG) que o browser irá reproduzir váriasvezes (tile, em inglês) no ecrã. Uma imagem com esta finalidade deve ter um tamanhomáximo de 10 kbytes.A tag para adicionar uma imagem de fundo é a seguinte: , em que ficheiro_bg.gif é o nome da imagem.

4.3

Atributos das imagens Definição do tamanho de uma imagem O tamanho que uma imagem ocupa numa página pode ser parametrizado através da suaaltura e largura. Com aqueles atributos é possível aumentar ou diminuir o espaçoocupado pela imagem. No entanto, recorde-se que os atributos altura e largura não

14 36modificam o tamanho do ficheiro propriamente dito. Uma imagem com 2 Mbytescontinua a ocupar esse mesmo espaço, mas quando se reduz o tamanho da imagempermite-se que a página web carregue muito mais depressa pois quando o browser estáa interpretar o código ele lê os atributos, reservando apenas o espaço necessário napágina para a imagem, e só depois de mostrar todo o texto se inicia o download dasimagens. Se não se utilizar a parametrização dos atributos o browser terá que carregaras imagens à medida que elas aparecem tornando o carregamento da página mais lento.Os atributos utilizam-se no elemento e são os seguintes:

• height=" " altura da imagem em pixéis.

• width=" " largura da imagem em pixéis.

Neste exemplo o gráfico com o nome “imagem.jpg” terá uma altura d e 100 e umalargura de 150: Alinhamento das imagens relativamente ao texto Para controlar o arrumar (wrap, em inglês) do texto quando se usa o elemento utiliza-se o atributo align com os valores left ou right. Quando se escolhe umalinhamento à esquerda o texto aparece arrumado à direita da imagem e vice-versa.Agora apresenta-se um exemplo com três imagens (ver a próxima figura) com o seguintecódigo HTML:

Mit den Web-News können Sie sich von Märklin persönlich über alle wichtigen Neuerungen…

Hinweis: Sie erhalten zunächst eine Bestätigungs-EMail, die wir an die unten angegebene Adresse…

Seit vielen Jahren sind die Explosionszeichnungen und gedruckten Ersatzteil-Listen zu unseren…

15 36 Alinhamento vertical Para controlar o alinhamento vertical de uma imagem em relação ao texto da página, aoutra imagem ou outro objeto utilizam-se os valores "top", "middle" e "bottom". Veja-seeste exemplo com três imagens:

Mit den Web-News können Sie sich von Märklin persönlich über alle wichtigen Neuerungen…

Hinweis: Sie erhalten zunächst eine Bestätigungs-EMail, die wir an die untenangegeb ene Adresse…

Seit vielen Jahren sind die Explosionszeichnungen und gedruckten Ersatzteil-Listen zu

unseren…

16 36 Imagem sem texto Quando se pretende inserir uma imagem isolada do texto deve-se criar um parágrafoindependente que servirá apenas para esse propósito, como se pode ver neste excertode código:

17 36 4.4

Referência das cores, cor de fundo e de texto A web é um mundo de cores onde podem ser especificados mais de 161 milhões de tons.Como tal, a utilização de cores na página de HTML é uma ciência e ao mesmo tempouma arte. É uma ciência porque cada uma das cores tem que ser selecionada com umaprecisão matemática e é uma arte pois uma escolha desastrada, ou menos feliz, dacomposição cromática produz uma página difícil de ler ou confusa para os olhos. A paleta básica A forma mais simples para se trabalhar com cores na web é utilizando a paleta básicacom 16 cores. Essas cores básicas não requerem nenhuma codificação especial, asimples referência ao seu nome é suficiente para que sejam entendidas por um browser.Essas 16 cores são: white, black, silver, gray, red, maroon, yellow, olive, lime, green,aqua, teal, blue, navy, fuchsia e purple, os seus nomes estão em inglês pois será nestalíngua que serão feitas as codificações em HTML.Em HTML há diversas formas para inserir e controlar as cores numa página, mas, talcomo para a formatação do texto, a sua utilização tem sido desencorajada em favor douso das folhas de estilo [em cascata] (Cascading Style Sheets). Assim, veja-se como setrabalha com cores usando as folhas de estilo, para modificar a cor de fundo (backgroundcolor) de uma página. Os objetos a utilizar são: • O nome da cor;

• A propriedade CSS background-color; • E, o selector body. e, são combinados num documento em HTML da seguinte forma:Quando se está a utilizar as Cascading Style Sheets, um selector não é mais do que onome de um elemento e, como tal,

através do seu uso está-se a selecioná-lo para sermodificado. No exemplo de cima, para aplicar uma cor à totalidade do usou-se o 18 36selector body. Nem sempre a utilização de seletores é assim tão simples, mas o princípioé este. A mistura de cores em HTML Um browser tem à sua disposição um sistema de coloração para o texto e fundo de ecrã.Cada cor é identificada por um conjunto de valores baseados no tríptico Red-Green-Blue(RGB), em que cada uma dessas cores tem um intervalo de variação entre 0 e 255. Umvalor máximo e simultâneo para os três (R=255, G=255, B=255) produz a cor branca;um valor mínimo e simultâneo para os três (R=0, G=0, B=0) equivale ao preto.Utilizando qualquer combinação destas três cores básicas é possível obter um dos 16,7milhões de tons. No entanto, dada a grande variedade de equipamentos e respetivadesatualização tecnológica, a m aioria desses 16 milhões de tons não são passíveis de serrepresentados corretamente nos dispositivos de output. Existem 216 hipóteses para cores denominadas “browser safe colors”. Essas tonalidades podem ser c riadas fazendo combinações com os valores apresentados no próximo Quadro. Percentagem EquivalentehexadecimalValor numérico 0% 00 020% 33 5140% 66 10260% 99 15380% cc 204100% ff 255O HTML em vez de identificar cada uma das cores possíveis por um conjunto de três números como, por exemplo, “102, 153, 255” vai utilizar uma representação hexadecimal (uma base 16, com uma numeração que contém: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9,A, B, C, D, E, F) que é tratada de uma forma mais eficiente pelos computadores. A cor referida em cima em código hexadecimal é: “6699FF”, em que 66 é o valor do vermelho, 99 o valor do verde e FF o valor para o azul.Os browsers de utilização mais corrente têm uma facilidade na utilização de cores que éo reconhecimento automático de dezasseis cores: aqua, blue, gray, black, fuchsia, green,lime, navy, purple, silver, white, maroon, olive, red, teal e yellow. Estas cores básicastambém podem ser especificadas através de códigos hexadecimais como se pode ver no 19 36Quadro a seguir. Repare-se que metade delas não são cores seguras, no entanto dado oseu estatuto de cores básicas não há qualquer problema na sua utilização. Cor CódigoHex

Cor CódigoHex Black #000000 White #ffffff Aqua #00ffff Blue #0000ff Navy #000080 Teal #008080Yellow #ffff00 Lime #00ff00Green #008000 Olive #808000Red #ff0000 Maroon #800000Fuchsia #ff00ff Purple #800080Gray #808080 Silver #c0c0c0 Cores sólidas de fundo Utilização do elemento

A formatação da cor de fundo implica uma modificação na tag :em que YYYYYY é a representação hexadecimal da cor.É preciso ter cuidado na conjugação de cores entre o fundo e os restantes elementos, como é o caso do texto. Se, por exemplo, o valor para o atributo bgcolor for “#000000” não vai ser possível visualizar o texto pois este tem também a cor preta. Numa situaçãodestas convém utilizar outros atributos que compõem a etiqueta e que permitematribuir cores aos vários elementos que constituem uma página web:cujo significado é o que segue: • bgcolor ►

a cor de fundo (por defeito é grey) • text ►

a cor do texto normal (por defeito é black) • link ►

a cor de uma hiperligação (por defeito é blue) • vlink ►

a cor de uma hiperligação recentemente visitada (por defeito é purple) 20 36 5

Multimédia na web 5.1

Ficheiros de som e de vídeo Som A inserção de som de fundo pode ser efetuada com a seguinte combinação de tagsHTML:ouPara colocar som através de um link usa-se o comandoClique aqui para ouvir o som Vídeo

A inserção de vídeo de fundo pode ser efetuada com a seguinte combinação de tagsHTML:ouPara colocar vídeo através de um link usa-se o comandoclique aqui para ver ovídeo 6

Animação na web Animação numa página web é qualquer forma de movimento por parte de objetos e/ouimagens. Essa animação poderá ser um simples GIF Animado, um componenteFlash/Shockwave, um plugin dHTML, um vídeo, etc.A utilização de animações em páginas web pode ser resumida a três razões: • Atrair a atenção do utilizador para uma secção específica da página

• Enriquecer um texto demonstrativo com uma animação correspondente (por exemplo, demonstrar o funcionamento de um motor tendo uma animação Flash interativa quepermita ao utilizador acompanhar o que é descrito) • Simplesmente entreter o utilizador (mini -jogos, vídeos, etc.) 21 36Os Web designers dispõem então de um leque de software que lhes permite criar as maisvariadas animações para a Web.Iremos explorar as aplicações mais comuns para o efeito. 6.1

Animação através de ficheiros de imagens GIF e JAVA GIF’

s animados Um GIF Animado é um ficheiro GIF  – Graphics Interchange Format  – que contém umconjunto de imagens que são apresentadas segundo uma determinada ordem. Este tipode animação foi das primeiras a ser considerada um padrão em páginas Web. As principais vantagens dos GIF’s animados são o tamanho reduzido do ficheiro, afacilidade com que se pode trabalhar com este formato e o facto de ser automaticamentereconhecido pelos browsers.As desvantagens são

ter que manter a animação muito simples, apenas permite utilizar256 cores, não permite adicionar som, para permitir criar uma animação com umaduração substancial, tem que se “saltar” entre as frames, tornando a animação pouco fluida. JAVA O Java suporta os dois tipos de ficheiros de imagem mais utilizados na World Wide Web,os ficheiros JPEG e GIF. Cada um destes formatos tem vantagens e desvantagens emrelação ao grau de compressão que consegue ser obtido. Em geral, as imagens JPEG sãomelhores para trabalhar com imagens naturais como fotografias, enquanto que as GIFsão melhores para gráficos, logotipos, réguas, botões, ... .Para utilizar as classes de imagens é necessário carregálas através de:import java.awt.image.* Mostrar uma imagem Sem entrar nos pormenores do Java, os métodos que são usados para declarar umobjecto da classe Image, a sua atribuição e a sua exposição no ecrã são os seguintes:Image art;...art = getImage(getCodeBase(), "Demo.jpg");...g.drawImage(art, int x, int y, this) 22 36em que x e y são as coordenadas do canto superior esquerdo da imagem e this é oobservador da imagem, ImageObserver, que vai ter utilidades descritas a seguir. Observador da imagem O ImageObserver é um interface abstrato usado para dar notificação de que umaimagem está a ser carregada. Utilizando métodos desta classe é possível saber qual oestado de carregamento da imagem, permitindo durante este período escrever umamensagem para utilizador, fazer um gráfico ou uma animação, aparecendo a imagem noecrã quando já estiver toda carregada. Esta técnica de estar a fazer duas operações aomesmo tempo é apelidada de double buffering. Como facilmente se compreende e dada alentidão que ainda existe na Internet este interface é de grande utilidade. Filtros As subclasses de ImageFilterSource e ImageFilter são usadas para criar novas imagens apartir das existentes.A subclasse CropImageFilter cria uma nova imagem a partir da região de uma  jáexistente. É útil quando se pretende obter uma série de pequenas imagens que derivamde uma. É mais rápido carregar uma e aplicar os devidos filtros do que carregá-las todas.Não só por que é mais rápido carregar 1 ficheiro de 100Kb do que 10 de 10Kb, mastambém porque o software é, em geral mais rápido e previsível do que a rede.O método RGBImageFilter aplica um filtro de cor a um dado pixel, normalmente éaplicado a todos os pixéis de uma imagem, gerando uma nova imagem. Animação e Vídeo É possível desenvolver em Java animações através da classe FunImageAnim. Um dosmodos possíveis é puxando todas as imagens da animação e mostrando-as a umavelocidade determinada pelo programador, deste modo tem que se carregar todas asimagens e só depois é que começamos a ter animação. O outro modo é carregar umaimagem que contenha lá toda a sequência e mostrar uma parte da imagem de cada vezsobrepondo-a á anterior. Este tipo de animação tem vantagens nítidas sobre os GIF

’ sanimados já que permite para além de acrescentar som síncrono, aceder arbitrariamenteàs imagens.Atualmente o Java não suporta qualquer tipo de ficheiros de vídeo (ficheiros MPEG, AVI,... ), o que é uma enorme limitação. 23 36 7

Desenho de páginas web Para a construção de uma página eficiente deve ser encontrado um equilíbrio entreinformação e design. Este equilíbrio é, por vezes difícil, devido às limitações do HTML, dalargura de banda, da variedade de browsers e das dimensões dos monitores.Para as páginas de níveis superiores, cujo objetivo é transmitir informação do modo maiseficiente e onde já não é tão importante cativar a atenção do utilizador, deve-se optarpela simplificação ( não esquecer de referir a data de atualização, autor, contacto ).A consistência na organização e design da página de primeiro nível com as páginasseguintes é importante. Uma mudança brusca na aparência dará ao utilizador a sensaçãode que abandonou o site. 7.1

Estrutura da página Os elementos referidos em baixo são os mais básicos e aqueles estritamente necessáriospara programar uma página em HTML.

Definem o início e o fim do programa

É o cabeçalho do programa e, normalmente, não aparece na janela web.

Este elemento está aninhado no HEAD e escreve o título dapágina na barra de título no cima da janela do browser.

Contém o conteúdo principal da página web.

Serve para inserir notas oucomentários sobre o programa e não são mostrados na janela do browser.Então, o documento mais simples em HTML, também conhecido como documentomínimo, terá a seguinte

estrutura:O body contém todo o texto e todas as imagens que constituem a páginaA ordem de abertura e fecho dos tags, como se pode ver, não é arbitrária e tem umasequência hierárquica. Quando se está a escrever um programa muitas vezes sente-se a 24 36necessidade de fazer alguns comentários a uma parte específica do código, para talutilizam-se as tags , os comentários não têm qualquer output. 8

Tabelas As tabelas em HTML são estruturas de divisão dos elementos que compõem uma páginaweb. As tabelas em HTML funcionam de uma forma idêntica a estruturas semelhantesque existem nos processadores de texto. As tabelas não servem apenas para escrevertexto em colunas mas ainda, e principalmente, para alterar o layout normal de umapágina web. 8.1

Definição e constituição de uma tabela A seguinte porção de código HTML demonstra a construção de uma tabela básica:

Linha 1 coluna 1	Linha 1 coluna 2	Linha 1 coluna 3
Linha 2 coluna 1	Linha 2 coluna 2	Linha 2 coluna 3
Linha 3 coluna 1	Linha 3 coluna 2	Linha 3 col una 3

O resultado produzido é mostrado nesta figura: 25 36O atributo border=1 utilizado na tag desenha uma bordadura em volta da tabelacom uma espessura de 1 pixel. 8.2

Alinhamento de células e tabelas Cada linha da tabela é definida pelas etiquetas … e as células que compõem aslinhas são definidas por . As etiquetas p odem conter qualqueroutra tag de HTML; com esta etiqueta podem ainda ser utilizados vários atributos quecontrolam o alinhamento do conteúdo em cada uma das células: • . Veja -se o caso seguinte:

…	…	alinha ao lado esquerdo da célula (alinhamento por defeito) •	alinha ao meio (alinhamento por defeito) •	alinha ao lado direito •	alinha ao fundo •	alinha ao centro •	alinha ao topo Estes atributos podem ser combinados entre si como, por exemplo:	em que o HTML produz uma célula cujo conteúdo está alinhado a partir da esquerda e junto ao fundo da célula. 8.3 Dimensão das colunas e tabelas O aspecto regular das linhas e colunas pode ser alterado com os atributos colspan e rowspan da tag	…

26 36

Linha 1 coluna 1	Linha 1 coluna 2 e 3
Linha 2 coluna 1	Linha 2 coluna 2	Linha 2 coluna 3
Linha 3 coluna 1	Linha 3 co luna 2	Linha 3 coluna 3

O aspecto inicial da tabela foi alterado pois a segunda célula da primeira linha ocupa(spans, em inglês) duas colunas:Uma célula pode igualmente ocupar o espaço de duas linhas:

Linha 1 coluna 1	Linha 1 coluna 2 e 3
Linha 2 coluna 1	Linha 2 coluna 2	Linha 2 coluna 3
Linha 3 coluna 1		Linha 3 co luna 3

9

Frames As frames são uma inovação que permite a divisão de uma janela de um browser empartes de informação que trabalham de forma independente ou relacionada. Atualmentesó o Internet Explorer e o Netscape suportam esta funcionalidade. 27 36 9.1

Definição e atributos de frames Os novos elementos para a implementação de frames são FRAMESET, FRAME e NOFRAMEbem como o atributo Target="nome do frame" no elemento âncora.

… Este elemento per mite a definição de todos os frames.Para tal conta com a ajuda destes atributos: rows="valor1,valor2,…,valorn" Indica o tamanho vertical de cada umadas linhas de frames. Por exemplo, se Rows="*,*" então a janela vai ter duaslinhas de frames de igual tamanho. cols="valor1,valor2,…,valorn"

Indica o tamanho horizontal de cadaframe da respectiva linha. Por exemplo, se Cols="*,*" então a linha vai ter doisframes de igual tamanho. Este elemento cria um frame já definido pelo framset. Este elementoapresenta os seguintes atributos: marginheight="valor" Número de pixels de margem no topo e no fim decada frame. marginwidth="valor" Número de pixels de margem à esquerda e àdireita. name="nome" Nome do frame. Pode ser usado no atributo Target pararedireccionar o frame onde a página vai ser aberta. noresize Indica que o tamanho do frame não pode ser reajustado peloutilizador. src="url" Específica a pagina a aparecer no frame. scrolling="yes|no|auto" Permite controlar se a barras de scrollingaparecem ou não. No modo auto as barras só aparecem se forem mesmonecessárias. É o elemento que define a zona que aparece quando umbrowser, que não suporta frames, tenta abrir o documento. Deste modo, é possível acriação de uma página específica para tais browsers.Exemplo:Podemos criar outro documento nesta zona 28 36 … O elemento âncora, já conhecido, apresenta um novo atributo designado por Target. Este atributo indica o frame em que o URL indicado no href irá ser aberto. 9.2

Conjuntos e ligações de frames Primeiro temos de construir um documento em HTML designado por Layout. Como sepode verificar, o código em baixo, apresenta uma nova zona que engloba toda adefinição dos frames

que vão aparecer no documento, ou seja a zona entre o e o . Neste exemplo, podemos verificar a existência de trêselementos isto para podermos criar duas linhas de frames em que a linha decima tem três frames, que por defeito abrem o frame1.html, e a debaixo apenas dois emque o frame do lado esquerdo abre o documento frame2.html e o do lado direito a páginado Cincork.layout.html

×

Sign In

Email

Password

Remember me Forgot password?

Sign In

Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close