3.1.7. definição do fundo da página · texto nas páginas em html ... pelo sistema de...

47
1 3.1.7. Definição do fundo da página

Upload: vuongtuong

Post on 01-Dec-2018

238 views

Category:

Documents


0 download

TRANSCRIPT

1

3.1.7. Definição do fundo da página

2

Definição do fundo da página A definição do fundo de uma página pode ser

feita através da atribuição de uma cor ou de uma imagem

Quando é feita através da utilização de uma imagem, esta repete-se até preencher a totalidade da área de fundo da página

Sempre que uma página tem definido como fundo uma cor e uma imagem, simultaneamente, a imagem sobrepõe-se à cor de fundo e esta, normalmente, apenas é visível durante o carregamento da imagem de fundo

3

Definição do fundo da página Para a definição do fundo da página utilizam-

se os atributos bgcolor e background da tag <body>

Neste caso, os atributos bgcolor e background definem, respectivamente, a cor e a imagem de fundo de uma página (figura 4.59)

O valor do atributo background indica a localização e o nome do ficheiro da imagem de fundo de uma página

4

Definição do fundo da página A figura 4.60 exemplifica a definição de uma imagem

como fundo de uma página através da utilização do atributo background da tag body e a figura 4.61 mostra o resultado interpretado pelo browser

5

3.1.8. Texto nas páginas em HTML

6

Texto nas páginas em HTML O HTML define inúmeras tags para a formatação de

texto nas páginas

No quadro 6 são apresentadas as tags que habitualmente são mais utilizadas, nomeadamente na aplicação de estilos e efeitos

Para alterar a cor, o tipo de letra e o seu tamanho nos documentos de HTML, utiliza-se a tag <font> que pode conter os atributos opcionais size, color e face

A figura 4.62 mostra a aplicação dos valores 1 e 7 e -2 a +4 ao atributo size da tag <font> e a figura 4.63 mostra o seu resultado

7

Texto nas páginas em HTML

8

Texto nas páginas em HTML O quadro 7 mostra a aplicação do atributo

color igualado ao código da cor pretendida

9

Texto nas páginas em HTML O quadro 8 mostra a aplicação do atributo face

igualado aos possíveis tipos de fontes, por ordem de preferência e separados por uma vírgula

Para o caso de o sistema não ter um determinado tipo de letra instalado, a indicação de uma ordem de preferência define as alternativas de formatação do tipo de letra

10

Texto nas páginas em HTMLPáginas de código

Quando se produzem documentos em HTML, pode não existir a garantia da correcta visualização de outros caracteres que não os do alfabeto inglês

Os sistemas operativos configuram diferentes páginas de código, consoante o idioma que se esteja a utilizar

Isto implica que configuração com idiomas diferentes podem não mostrar o mesmo carácter que o nosso computador

Sempre que se deseje escrever caracteres específicos, caso dos caracteres acentuados portugueses, deve-se optar pela página de código ISSO Latin1 ou, então, recorrer aos characters entities

11

Texto nas páginas em HTML

3.1.9. Uso das cores

12

Uso das coresCódigos de cores

Os códigos das cores em HTML têm por base a codificação RGB (Red, Green, Blue) e podem ser referenciadas de 3 maneiras distintas: Pelo nome da cor em inglês, por exemplo, black

Pelo sistema de numeração hexadecimal, por exemplo, #FFFF00

Pelo sistema de numeração decimal, por exemplo, rgb(2,255,0)

13

Uso das coresCódigos de cores (continuação)

Uma paleta de cores pode conter mais de 16 milhões de cores, ou seja

255*255*255=16 581 375 cores

Qualquer computador actual tem capacidade para processar este número de cores, mas há outros dispositivos que permitem visualizar documentos de HTML cuja capacidade cromática é limitada, como é o caso dos telemóveis

14

Uso das coresCores seguras

Até à primeira metade da década de 90 do século XX, muitos sistemas apenas conseguiam apresentar paletas de 256 cores diferentes, o que implicava desenvolver páginas em HTML com este número limitado de cores

Apesar de, actualmente, existirem placas gráficas que proporcionam uma maior profundidade de cor, para o desenvolvimento de páginas web continua a ser recomendável utilizar um conjunto de 216 cores, que correspondem às cores seguras

Este conjunto de 216 cores resulta da necessidade dos sistemas operativos reservarem um conjunto de cores das 256 iniciais

15

Uso das coresCores seguras (continuação)

Para o desenvolvimento de páginas web, estas 216 cores são consideradas seguras porque é garantido que sejam correctamente visualizadas em todos os sistemas, sem serem alteradas ou truncadas

A tabela correspondente ao código das cores seguras pode ser consultada em http:/www.w3schools.com/html/html_colors.asp

16

3.1.10. Uso de imagens

17

Uso de imagens É possível colocar variados formatos de

imagens nos documentos HTML, embora, por questões de eficiência e tamanho, os formatos mais comuns sejam o JPEG, o GIF e o PNG

18

Uso de imagens Formatos de imagens

Ficheiros JPEG

Os ficheiros JPEG guardam informação relativa a imagens comprimidas através dos algoritmos produzidos pelo joint Photographic Experts Group e, normalmente referenciados pela extensão jpg

É possível escolher diversos níveis de compressão, cada um utilizando um algoritmo diferente

Na realidade existem 29 possibilidades distintas, mas isto não significa que sejam todas implementadas nos diferentes programas de compressão

O processo é destrutivo, o que implica que, quanto maior for o factor de compressão escolhido, pior é a qualidade final da imagem, tornando impossível obter a imagem original através da imagem comprimida

19

Uso de imagens Formatos de imagens (continuação)

Ficheiros GIF Os ficheiros GIF (Graphics Interchange Format) guardam

informação relativa a imagens comprimidas através do algoritmo LZW, inventado por Abraham Lempel, Jacob Ziv e Terry Welch, que não é destrutivo

Existem duas versões deste formato de compressão, a GIF87 e GIF89a

A versão GIF89a, para além de permitir a apresentação progressiva de imagens, interlaced GIF, permite, também, juntar pequenas sequências de imagens dentro do mesmo ficheiro gif, permitindo assim, alguma animação, animated GIF

É de referir que também o formato progressive JPEG permite a apresentação progressiva das imagens

Esta característica torna-se pertinente quando a velocidade de download é baixa, uma vez que, nas velocidades altas, que actualmente são disponibilizadas, o utilizador não chega a aperceber-se deste tipo de efeito

20

Uso de imagens Formatos de imagens (continuação)

Transparências O processo de criar imagens com fundo transparente

baseia-se no facto de ser possível criar imagens GIF às quais se aplica um fundo transparente

Na prática, o que se passa é que, no momento em que a imagem surge no documento, o fundo desta toma a cor do fundo do documento HTML, tal como um camaleão faria

21

Uso de imagens Formatos de imagens (continuação)

Ficheiros PNG Os ficheiros PNG (Portable Network Graphics) guardam

informação relativa a imagens comprimidas e surgiram expressamente para serem livres de patentes, com o objectivo de substituir o formato GIF

Apesar de também não serem destrutivos, produzem imagens pequenas

Os ficheiros PNG têm como principal vantagem tornar uma cor transparente e poder definir-se qual o grau de transparência a atribuir

Têm como principal desvantagem o facto de não suportarem animação, já que só podem conter uma imagem por ficheiro

22

Uso de imagens Formatos de imagens (continuação)

Inserção de imagens

A inserção de imagens num documento HTML é feita através da tag <img>

De entre os seus atributos, o scr é o mais importante, pois sem ele o browser limitar-se-á a referir que, no ponto de inserção da imagem, existe um espaço reservado, mas esta não existe

Este atributo deriva da palavra inglesa source (fonte) e especifica a localização da imagem que se pretende mostrar

Normalmente, quando se abre um ficheiro, indica-se o seu caminho na memória em que se encontra armazenado e a maneira mais directa é referenciá-lo desde a raiz (d:\directoria\subdir\ficheiro.htm)

23

Uso de imagens Formatos de imagens (continuação)

Inserção de imagens (continuação) No caso de documentos HTML que deverão ser

publicados num servidor web, a identificação do caminho de um ficheiro desde a raiz pode acarretar alguns resultados inesperados

Por razões de segurança, nos servidores web, apenas é permitido o acesso a algumas pastas bem específicas, desconhecendo-se o caminho total onde são guardados os ficheiros

Como as imagens têm de ser enviadas junto com os documentos, é pouco provável que se consiga acesso a tal caminho no servidor web

24

Uso de imagens Formatos de imagens (continuação)

Inserção de imagens (continuação) Há duas formas de solucionar o problema anterior:

A primeira passa por se referir o caminho da imagem com base no URL de acesso, por exemplo src=http://www.servidor.dom/imagens/imagem.png

A segunda passa por se construir o caminho da imagem utilizando referências relativas em função da localização do documento de HTML no servidor web, por exemplo src=“imagem.png”, se estiver na mesma pasta que o documento, ou src=“../imagem.png”, se estiver numa pasta existente no directório imediatamente anterior ao do documento

25

Uso de imagens Formatos de imagens (continuação)

Inserção de imagens (continuação) Há duas formas de solucionar o problema anterior:

Ambas as soluções são válidas

No caso da primeira, podem-se colocar imagens em servidores diferentes do que contém o documento HTML

No caso da segunda, reforça-se a portabilidade do documento, já que não obriga a alterar todas as referências a ficheiros sempre que se deseje mudar de servidor web

26

Uso de imagens Formatos de imagens (continuação)

Inserção de imagens (continuação) Alinhamento das imagens

O alinhamento das imagens num documento HTML corresponde ao alinhamento das imagens em relação aos elementos circundantes, recorrendo-se ao atributo align, da tag <img>, que pode assumir um dos seguintes valores:

right ou left, que corresponde ao alinhamento das imagens à esquerda ou à direita da página, com o texto moldado à sua volta

top, middle, bottom, absmiddle, texttop, baseline ou absbootom, que corresponde ao alinhamento vertical da imagem em relação aos outros itens da mesma linha onde se encontra inserida (quadro 9)

27

Uso de imagens

28

Uso de imagens As figuras 4.64 e 4.65 exemplificam a aplicação do

atributo align inserido na tag <img>

29

Uso de imagens Formatos de imagens (continuação)

Inserção de imagens (continuação) Alinhamento das imagens (continuação)

É possível, também, alinhar imagens sem qualquer texto envolvente desde que, para isso, se utilize o atributo align da tag <p> com os valores left, right e center

30

Uso de imagensAtributos das imagens: altura e largura

Para definir as dimensões, altura e largura, das imagens inseridas num documento em HTML, utilizam-se os atributos height (altura) e width (largura), com os valores expressos em percentagem ou em píxels

Desta forma, está-se a criar um espaço reservado para a visualização da imagem que se deseja inserir no documento (figuras 4.66 e 4.67)

Contudo, não se alteram as dimensões reais da imagem nem o tamanho do seu ficheiro

Convém ter presente que, se não for respeitada a proporção da imagem real, esta vai ser mostrada distorcida

31

Uso de imagens

32

Uso de imagens

33

Uso de imagensAlternativas em texto (o atributo ALT)

Para o caso de não ser possível apresentar uma imagem, o atributo alt da tag <img> permite definir um texto, que será apresentado quando a imagem não é visível ou quando o ponteiro do rato se posiciona sobre a imagem (figuras 4.68 e 4.69)

Complementarmente, este atributo permite que um software de leitura possa reproduzir o seu texto em voz alta de maneira a elucidar os invisuais

34

Uso de imagensAlternativas em texto (o atributo ALT)

35

Uso de imagensColocação de um contorno

Como forma de destacar a imagem em relação ao documento, é possível colocar um contorno à sua volta, com a ajuda do atributo border da tag <img> (figuras 4.70 e 4.71)

O valor do atributo border é igual ao números de pixéis que o contorno terá de largura

Se este valor for igual a zero (border=0), equivale a não existir contorno

Neste caso, é preferível não definir o atributo

36

Uso de imagensColocação de um contorno

37

3.1.11. Hiperligações

38

Hiperligações A principal característica do HTML é a possibilidade de criar

hiperligações (hypertext link ou, de forma abreviada, link) tanto para outros documentos, internos ou externos, como para secções do mesmo documento

As hiperligações permitem criar um número infinito de ligações A aplicação e o desenvolvimento desta potencialidade deram

origem à designação web (teia) Em HTML, para criar hiperligações utiliza-se o atributo href na

tag <a> inicial O elemento ao qual está associada a hiperligação fica

delimitado entre a tag <a> inicial e a tag </a> final O uso da tag <a> pressupõe alguns cuidados Logo a seguir ao a da tag inicial, tem de se deixar um espaço

antes do atributo href Este atributo indica qual o objecto que se pretende abrir

39

HiperligaçõesHiperligações a partir do texto e a partir

de uma imagem Para criar hiperligações a partir do texto e de uma

imagem utiliza-se o atributo href da tag <a>

As figuras 4.72 e 4.73 mostram a sintaxe da criação de hiperligações a partir do texto e de uma imagem

40

Hiperligações As figuras 4.74 e 4.75 exemplificam a aplicação de

uma hiperligação a partir do texto

41

Hiperligações As figuras 4.76 e 4.77 exemplificam a aplicação de

uma hiperligação a partir de uma imagem

42

HiperligaçõesPara documentos externos ao website

Para criar hiperligações para documentos externos ao website, a partir de texto e de imagem, utiliza-se, também, o atributo href da tag <a>

A referência ao documento externo tem de ser efectuada de forma absoluta através da indicação do seu URL completo

A figura 4.78 mostra a sintaxe da criação de uma hiperligação para um documento externo ao website a partir do texto

43

HiperligaçõesPara documentos externos ao website

(continuação) A figura 4.79 e 4.80 exemplificam a criação de uma

hiperligação para um documento externo ao website

44

HiperligaçõesPara documentos internos ao website

Para criar hiperligações para documentos que residam no mesmo website utiliza-se, também, o atributo href da tag <a>

A referência a um documento interno é feita através da localização relativa deste em relação ao documento que se está a visualizar

As figuras 4.81 e 4.82 mostram a sintaxe de uma hiperligação para um documento do website contido, respectivamente, na mesma pasta e na pasta anterior, relativamente ao documento actual

45

HiperligaçõesPara secções internas do documento

Quando os documentos de HTML são muito longos, pode tornar-se inconveniente utilizar constantemente a barra de deslocamento vertical para os ler

A solução para ultrapassar este inconveniente passa pela utilização de secções ao longo do documento

Estas secções são criadas através de marcadores, para os quais se podem, depois, criar hiperligações

A partir destas hiperligações é possível visualizar o documento por secções, evitando a utilização da barra de deslocamento vertical

Para criar um marcador utiliza-se o atributo name da tag <a>

A figura 4.83 mostra a sintaxe da criação de um marcador de um documento

46

HiperligaçõesPara secções internas do documento

Após colocar o marcador no local desejado é necessário criar a hiperligação, precedendo de cardinal o nome do marcador

A figura 4.84 mostra a sintaxe da criação de uma hiperligação num documento para um marcador existente no mesmo

A figura 4.85 apresenta o código utilizado para a criação de marcadores e hiperligações no mesmo documento HTML

47