3.1.7. definição do fundo da página · texto nas páginas em html ... pelo sistema de...
TRANSCRIPT
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
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
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
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
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)
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
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
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
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