Internet - 1 Estilos de ligações m Listas de ligações m listas de descrições de itens contendo ligações m ligações dispersas auto-descritivas m evitar.

Apresentação em tema: "Internet - 1 Estilos de ligações m Listas de ligações m listas de descrições de itens contendo ligações m ligações dispersas auto-descritivas m evitar."— Transcrição da apresentação:

1 Internet - 1 Estilos de ligações m Listas de ligações m listas de descrições de itens contendo ligações m ligações dispersas auto-descritivas m evitar chamadas do tipo CARREGUE AQUI! m usar imagens pode ser pouco descritivo q acrescentar mensagem explicativa na barra de estado m imagens sensíveis q ismap - processamento do lado do servidor pelo programa indicado em href implica ter a imagem no corpo de q usemap - processamento no cliente q circle, polygon, rectangle; href e nohref

2 Internet - 2 Desenho do documento m Três marcas para controlar posicionamento geral q definidas no navegador da Netscape m Espaçamento q vertical, horizontal, rectangular q m Colunas q m Camadas (Netscape v4.0) q localização precisa de páginas independentes sobrepostas q - página completa q - camada dentro da linha, relativa q acrescenta nova dimensão ao HTML

3 Internet - 3 Abertura de espaços Primeiro, um exemplo de definição de um bloco de espaço. Norte Oeste Leste. Sul Agora, espaço vertical. E termina com espaço horizontal.

4 Internet - 4 Colunas Texto em colunas A marca <multicol> tem os atributos gutter - espaço entre colunas e width - dimensão total absoluta ou relativa à janela. O efeito de várias colunas pode ser simulado com recurso a tabelas.

5 Internet - 5 Camadas m Uma camada é um documento HTML q … q atributo src vai buscar conteúdo a URL sem ou q sem posicionamento, é incluída no fluxo normal q posicionamento (top, left) relativo ao canto superior esquerdo do documento ou da camada que contenha uma camada inclusa q as camadas são transparentes, a menos que se defina bgcolor ou background q atributo name se for necessário referir a camada q camadas sucessivas, ao mesmo nível, são postas por cima das anteriores; above, below, z-index controlam sobreposição q pode-se controlar a visibilidade com JavaScript (camadas inclusas herdam as propriedades da que as contém) q - camada dentro da linha, cujo posicionamento é relativo ao ponto do fluxo em que é definida

6 Internet - 6 Exemplo de camadas Efeito de sombra Efeito de sombra Uma camada <layer> não ocupa … para o seu sítio.

7 Internet - 7 Listas m Tipos de listas q listas não ordenadas ( ) atributo type controla o aspecto do símbolo (disc, circle, square) q listas ordenadas ( ) atributos start e value para controlar a numeração atributo type controla o aspecto do símbolo (1, A, a, I, i) q menus ( ) e directórios ( ) habitualmente tratados como listas não ordenadas de itens curtos q definições ( ) m item de uma lista q q … … (nas listas de definições) m as listas podem ser q compactadas (compact) q encaixadas q start=n indica o número inicial; value=n altera o valor corrente

8 Internet - 8 Exemplo de listas Vertebrados Mamíferos Primatas. Cetáceos. Aves Invertebrados. Coisa O que se chama a um objecto na falta de melhor. Objecto O que se chama a uma coisa quando não ocorre outra.

9 Internet - 9 Tabelas m - delimita a definição da tabela m - informação organizada por linhas m - cabeçalho de coluna ou de linha m - conteúdo de uma célula m Limitações q não alinha conteúdos de células diferentes q o controlo da espessura dos caixilhos é limitado q não há a noção de cabeçalho de repetição

10 Internet - 10 Tabela simples Exame Nota Final Ana 10 11 Zé 12 15 Média 11 13

11 Internet - 11 Tabela mais elaborada m Como construir? m Quantos elementos são definidos na 2ª linha? m É possível incluir uma outra tabela num ?

12 Internet - 12 Código da tabela <table align="center"bgcolor="#FFFF00" border cellspacing="2" cellpadding="5" width="50%"> Tabela 1. Estatísticas. Demografia Homens Meninas Prof Turmas A 20 5 B 21 3 idem Total 41 8 49

13 Internet - 13 Atributos das tabelas m... define a legenda q align= top ou bottom m align (center, left, right) q em controla a tabela; left e right dá texto a contornar q em,, controla as células individuais m bgcolor - côr do fundo m border - caixilho; cellspacing espaço intercelular; cellpadding espaço intracelular m width - largura, absoluta ou relativa q pode-se indicar a percentagem que cada coluna gasta do total m heigth - altura m colspan, rowspan - estende influência da célula

14 Internet - 14 Tabelas em HTML 4.0 m ; ; ; ; m HTML 4.0: q ; ; ; ; q as linhas e colunas podem ser agrupadas permitindo um maior controlo da apresentação da tabela no ecrã m Estrutura …

15 Internet - 15 Exemplo de tabela em HTML 4.0 Exemplo Fruta Cor Custo por quilo Uvas Branco 200$00 Cerejas Vermelho 350$00 Kiwi Castanho 400$00 Exemplo de uma tabela

16 Internet - 16 Quadros m Documento com a marca divide a janela em quadros, proporcionais ou absolutos q podem encaixar-se outros conjuntos de quadros q não existe a marca q * nas dimensões vale por resto (noresize para impedir distorção) q framespacing e border definem espaçamento e moldura m marca só aparece num q define com qual o documento a ser mostrado nesse quadro q os quadros são preenchidos coluna a coluna e depois linha a linha q quadro sem fica vazio q conflitos: o título da janela é o do último quadro q noresize impede de modificar as dimensões q scrolling=no impede o aparecimento de barras de deslocamento

17 Internet - 17 Controlo de quadros m o atributo name num quadro ou janela permite a outro quadro ou janela alterá-lo, incluindo esse nome no atributo target de uma ligação m se o quadro ou janela não existir, é criado m alvos especiais q _blank : nova janela q _self : o próprio quadro ou janela origem (valor por omissão) q _parent : o conjunto de quadros ou a janela que contém o quadro origem (igual a _self se a origem já for a janela) q _top : substitui todo o conteúdo da janela que contém a origem m pode-se especificar um alvo comum na q q garante que todas as ligações para docs fora do sítio ocupam toda a janela, em vez de aparecerem num quadro (indicar o quadro em cada referência local)

18 Internet - 18 Conjunto de quadros Quadros <frame name="cimo" src="e16cimo.html" scrolling="no" frameborder="1" noresize> <frame name="indice" src="e17indice.html" frameborder="1"> Azar. Precisa de um navegador melhor!

19 Internet - 19 Quadros Cimo Documento com quadros Listas Algumas imagens Ovo Ceia Garrafa Mundo Fim e16cimo.htmle17indice.html

20 Internet - 20 Exemplo com quadros

21 Internet - 21 A evitar m Colocar