Definição do fundo da página

Transcrição

1 Definição do fundo da página 1

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 2

3 Definição do fundo da página Para a definição do fundo da página utilizamse 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 3

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 4

5 Texto nas páginas em HTML 5

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 6

7 Texto nas páginas em HTML 7

8 Texto nas páginas em HTML O quadro 7 mostra a aplicação do atributo color igualado ao código da cor pretendida 8

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 9

10 Texto nas páginas em HTML Pá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 10

11 Texto nas páginas em HTML Uso das cores 11

12 Uso das cores Có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) 12

13 Uso das cores Códigos de cores (continuação) Uma paleta de cores pode conter mais de 16 milhões de cores, ou seja 255*255*255= 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 13

14 Uso das cores Cores 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 14

15 Uso das cores Cores 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 15

16 Uso de imagens 16

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 17

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 18

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 19

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 20

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 21

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

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 23

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 :// 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 24

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 25

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

28 Uso de imagens As figuras 4.64 e 4.65 exemplificam a aplicação do atributo align inserido na tag <img> 28

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 29

30 Uso de imagens Atributos 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 30

33 Uso de imagens Alternativas 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 33

34 Uso de imagens Alternativas em texto (o atributo ALT) 34

35 Uso de imagens Colocaçã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 35

36 Uso de imagens Colocação de um contorno 36

37 Hiperligações 37

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 38

39 Hiperligações Hiperligaçõ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 39

40 Hiperligações As figuras 4.74 e 4.75 exemplificam a aplicação de uma hiperligação a partir do texto 40

41 Hiperligações As figuras 4.76 e 4.77 exemplificam a aplicação de uma hiperligação a partir de uma imagem 41

42 Hiperligações Para documentos externos ao website Para criar hiperligações para documentos externos ao website, a partir de texto e de imagem, utilizase, 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 42

43 Hiperligações Para 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 43

44 Hiperligações Para 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 44

45 Hiperligações Para 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 45

46 Hiperligações Para 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 46

47 47