Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Autoria WEB Prof. Alan Santos
HTML Exibindo Imagens Autoria WEB Prof. Alan Santos
2
Exibição de Imagens Para exibir uma imagem em uma página HTML utiliza-se o comando <img>. <img src=“url_imagem”> Exemplo: <img src = “imagens/lilica.gif”> <img src=“imagem.jpg” border=0> Onde: src é especifica a imagem a ser exibida e border a espessura da borda desta imagem.
3
Imagens Extensões GIF e JPG
Gifs com fundo Transparente e Gifs Animadas Gif com fundo transparente
4
Imagens Atributos de IMG:
5
Largura e Altura de Componentes
Para especificar a largura e altura dos diversos componentes de uma página HTML utiliza-se os comandos width e height. Exemplo: <img src=“imagem.jpg” border=“0” width=“300” height=“200”> Onde: width é a largura em pixels e height a altura. Tais comandos podem ser utilizados dentro de diversas tags HTML como vídeos, tabelas, etc.
6
Inserindo uma imagem de fundo para a página
Podemos inserir nas páginas HTML uma imagem de fundo, bastando apenas que na abertura do bloco do corpo do documento, seja passado à localização da imagem desejada como valor ao atributo (background). Exemplo de declaração: <body background="/images/fundo.jpg"> (corpo do documento em HTML) </body>
7
Imagens Mapeadas São imagens que possuem links em determinadas áreas, ou seja, uma mesma imagem pode ter mais de um link. Representação Gráfica : bacabal.ifma.edu.br Minha_Pagina.html
8
Imagens Mapeadas Utilizam a propriedade USEMAP da tag IMG
Cada região deve ser definida por um tag <area> a ser codificado dentro de um <map>...</map> Sintaxe: <img src=“url” usemap=“#nome_mapa”> <map name=“nome_mapa”> <area shape=“rect|circle|poly|default” target=“alvo” coords=“x1,y1,x2,y2,...” (href=“url” | nohref)> ...(um <area> para cada regiao no mapa!) </map>
9
Imagens Mapeadas Exemplo:
<img src=“img_mape.gif” usemap=#mapa”> <map name=“mapa”> <area shape=“rect” coords=“50,25,100,50” href=“ <area shape=“circle coords=“25,20,35,20“ href=“minha_pagina.html/”> <area shape=“poly” coords=“50,12,60,3,80,3,90, 12,80,23,60,23” href=“ <area shape=“default” nohref> </map>
Apresentações semelhantes
