Tipos de Imagens
Agora você aprenderá
os tipos de imagens que você pode inserir em uma página Web e também como
inserir imagens em uma página.
Você usa imagens para melhorar a comunicação dos
conceitos explicados em uma página Web. Imagens melhoram a aparência da página
e destacam as ideias apresentadas no documento.
Adicionando Imagens
Você utiliza imagens
para incluir títulos e logos em uma página. Você pode usar também como links para
outras páginas Web.
Quando adicionamos uma imagem a uma página Web, é preciso
manter em mente o tamanho, formato e posição desta imagem na página.
Criando Imagens
Quando criamos uma
imagem para uma página Web, é preciso observar o tamanho do arquivo, para que pessoas
com todos os tipos de conexões possam ter acesso. Lembre-se: quanto menor a
velocidade de conexão do usuário, mais tempo ele irá demorar para carregar a
imagem.
Você pode arrumar as imagens de várias maneiras e posições em sua
página. Entretanto, o posicionamento de diversas imagens na mesma página deverá
ser consistente.
Alinhando uma imagem
Você pode alinhar uma
imagem em uma página Web com:
- Outros elementos usados na página, como o texto ou outras imagens;
- Borda da janela do browser.
O formato que você
usa para uma imagem determina sua aparência. As primeiras imagens da Web eram
formatadas utilizando entre 16 e 256
cores, já que este era o limite
máximo de exibição dos monitores. Além disso, o uso de um número grande de
cores numa imagem elevava muito o tamanho do arquivo. Atualmente não existe uma
preocupação muito grande com a quantidade
de cores, mas sim com o tamanho do
arquivo.
Formatos de Imagem
A World Wide Web
suporta quase todos os tipos de arquivos de imagens. Entretanto, somente um
número limitado de formatos é utilizado. Abaixo você pode verificar os três
mais utilizados.
GIF - Graphics
Interchange Format foi introduzido pela CompuServe em 1987 e desde então foi
amplamente utilizado na Web. Seu formato suporta oito bits por pixel,
permitindo o uso de uma paleta de até 256 cores. Utiliza o tipo de compressão
LZW e é mais indicado para gráficos, ícones e imagens que não necessitam muitas
cores. Permite imagens com fundo transparente.
JPEG ou JPG - Joint
Photographic Experts Group é o método mais utilizado para comprimir imagens
fotográficas. Foi introduzido em 1983 e suporta até 16,8 milhões de cores. Não
permite imagens com fundos transparentes.
PNG - Portable
Networks Graphics é o substituto do formato GIF. No início de 1995 o padrão de
compressão LZW foi patenteado pela empresa Unisys, que anunciou cobrança de
royalties para o uso deste tipo de arquivo. Esta informação, aliada à crescente
capacidade de exibição de cores dos computadores, levou à criação do PNG, que assim
como JPG, permite exibição de até 16,8 milhões de cores e, como o GIF, fundos
transparentes.
Utilizando a Tag Image
A sintaxe da tag
Image (imagem) é exibida na imagem.
- URL = Nome / endereço do arquivo que contém a imagem a ser inserida.
- img = Tag utilizada para inserir uma imagem na página web.
- src = Atributo usado para especificar o arquivo da imagem a ser inserida.
Usando ALT e ALIGN
Além do atributo SRC, você pode especificar outros
atributos com a tag Image (imagem). Os atributos que você pode usar são ALT e ALIGN.
Em caso do browser
não conseguir exibir a imagem por alguma razão, foi inventado o atributo ALT, que nada mais é que um texto alternativo à imagem. Este
atributo é também considerado de acessibilidade,
já que é valioso para deficientes
visuais: programas para estas pessoas leem as imagens e o ALT pode fornecer um contexto para a
imagem. Quando o usuário coloca o mouse sobre a imagem o texto alternativo
também é exibido, como demonstra a imagem. Já o Align serve simplesmente para alinhar
a imagem na tela do browser.
Especificando o Alinhamento da imagem
O atributo ALIGN é utilizado para especificar o
alinhamento da imagem em relação ao texto na página Web. Você pode alinhar o
texto no topo, no centro ou no rodapé da imagem. Para alinhar um texto no topo da imagem, use o valor TOP, para o centro, MIDDLE e para o rodapé, BOTTOM. Além disso, a imagem pode ser alinhada à esquerda - LEFT - e à direita - RIGHT.
O valor padrão que o browser usa para o align é BOTTOM (rodapé).
Criando Links
Você irá aprender a
interligar (ou linkar) páginas Web. Links são conexões pelas quais você conecta
páginas que podem ser do mesmo website, externas, de qualquer outro site, ou
ainda conectar páginas a outros documentos.
Os links podem ser criados no texto
e também em outros elementos do website, como em imagens ou itens de um menu.
Usando a Tag Anchor
A tag Anchor
<a> </a> (âncora) é utilizada para criar links no hipertexto. A
sintaxe desta tag é exibida na imagem abaixo.
- <a = Abertura da tag Anchor.
- href = Atributo usado para especificar a URL do documento linkado ou interligado.
- URL = Endereço da página ou documento a ser linkado.
- </a> = finalização da tag Anchor.
Criando Links em texto
Na imagem
você pode verificar um exemplo de documento HTML com o código para a criação de
um link no texto "Site de Buscas", direcionando para o Google, que é
Atualmente o maior site deste tipo de serviço.
O browser exibe o hiperlink em um formato diferente do
texto normal, normalmente sublinhado e
na cor azul, como na imagem. Ao especificar uma URL apropriada para um
serviço de Internet, você também pode linkar ou interligar sua página Web a
esse serviço. Por exemplo, você pode criar um link entre sua página e o seu e-mail.
Selecionando o
hiperlink, o browser ativa o programa de
e-mail que irá permitir a você enviar uma mensagem eletrônica ao endereço especificado.
Criando Links para uma seção na mesma página
Você aprendeu a criar
links entre páginas Web. Agora, você irá aprender a criar links entre
diferentes seções de uma mesma página. Caso você possua uma página com um texto
muito extenso, é possível fazer links para dentro do próprio texto ou ainda
diferentes seções da mesma página.
Utilizamos a tag Anchor (âncora) para criar links de
seção. Especificamos a URL do
documento que desejamos interligar com o nome da seção e com o símbolo # antes do nome. A sintaxe para criar
um link de seção é exibida na imagem.
Utiliza-se o atributo
NAME para definir as seções que
foram interligadas ao hipertexto. Observe
a sintaxe para a definição da seção.
O browser exibe o link e, quando selecionado, exibirá a seção que começa com o nome especificado.
Criando Links em Imagens
Aprendemos a criar
links entre duas páginas Web e entre
duas seções de uma mesma página. Agora
aprenderemos a criar links entre imagens e outros elementos, que podem ser
outras imagens, documentos ou páginas
Web.
Usamos a combinação
da tag Anchor (âncora) e da tag Image (imagem) para criar um link numa imagem.
Observe a sintaxe
para este tipo de operação:
- <a href=”url”</a> = Tags Anchor, para criação de links
- <img src=”url” </img> = Tag completa de introdução de imagem na página.
Observamos então que
para inserir um link numa imagem usamos dois conceitos aprendidos
anteriormente: inserção de links e inserção de imagens.
