Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • HTML: Imagens e tag IMG

    Enviado por

    Rafael Gleriani
    10 visualizações8 páginas
    Formatos de imagens GIF e JPEG Tag <IMG> para inserção de imagens com atributos SRC, WIDTH, HEIGHT e ALIGN Redimensionamento e alinhamento de imagens para melhor visualização

    Descrição original:

    Título original

    aula_05_html_imagens

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento
    Formatos de imagens GIF e JPEG Tag <IMG> para inserção de imagens com atributos SRC, WIDTH, HEIGHT e ALIGN Redimensionamento e alinhamento de imagens para melhor visualização

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    10 visualizações8 páginas

    HTML: Imagens e tag IMG

    Enviado por

    Rafael Gleriani
    Formatos de imagens GIF e JPEG Tag <IMG> para inserção de imagens com atributos SRC, WIDTH, HEIGHT e ALIGN Redimensionamento e alinhamento de imagens para melhor visualização

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 8

    HTML:

    IMAGENS

    CURSO TÉCNICO DE INFORMÁTICA


    MODALIDADE SUBSEQÜENTE
    DESENVOLVIMENTO WEB I
    PROF. ALEXANDRO DOS SANTOS SILVA

    SUMÁRIO
    Formatos de imagens
    Tag <IMG>
    Redimensionamento
    Alinhamento
    Outros atributos

    2
    IMAGENS: FORMATOS
     Navegadores: suporte a vários formatos de imagens
     Formatos mais comuns: GIF e JPEG (JPG)
     Formato GIF (Grafic Interchange Format)
     Arquivos com extensão .gif
     Paleta limita de cores: máximo de 256 cores
     Imagens com tamanhos menores
     Apropriado para uso na exibição de ícones, pequenas animações
    ou imagens com áreas extensas de cores chapadas
     GIFs animados: requer cuidado em seu uso, pois arquivos neste
    formato podem ocupar bastante espaço em disco, a depender da
    quantidade de cores e quadros usados
     Formato JPEG (Joint Photografic Engineering Group)
     Arquivos com extensão .jpeg, .jpe, .jpg, .jfif, .jfi
     Paleta limita de cores: 16 milhões de cores
     Recurso de compressão com pouco perceptível perda na
    qualidade da imagem
     Comumente usado para compressão de imagens fotográficas
     Imagens com tamanhos menores: carregamento mais rápido
    das páginas nos navegadores

    IMAGENS: TAG <IMG>


     Tag: <IMG>
     Atributo obrigatório: SRC
     Localização, no sistema de arquivos local ou na web, da imagem a
    ser exibida
     Importante: não omitir a extensão do arquivo de imagem
     Sintaxe
    <img src="localização_arquivo_imagem" />
     Exemplo 01: arquivo HTML e arquivo de imagem na mesma
    pasta
    <html>
    <head>
    <meta content="text/html; charset=utf-8" />
    <title>Exemplo 01</title>
    </head>
    <body>
    <img src="imagem01.jpg" />
    </body>
    </html>

    4
    IMAGENS: TAG <IMG>
     Exemplo 01: arquivo HTML e arquivo de imagem na mesma
    pasta

    IMAGENS: TAG <IMG>


     Exemplo 02: arquivo de imagem em um diretório (de nome
    “diretório02”) abaixo do diretório em que se encontra o
    arquivo HTML
    <html>
    <head>
    <meta content="text/html; charset=utf-8" />
    <title>Exemplo 02</title>
    </head>
    <body>
    <img src="diretorio02/imagem02.jpg" />
    </body>
    </html>

    6
    IMAGENS: TAG <IMG>
     Exemplo 03: uso de uma imagem disponível na Internet;
    localização especificada através de uma URI (Identificador
    Uniforme de Recursos)
    <html>
    <head>
    <meta content="text/html; charset=utf-8" />
    <title>Exemplo 02</title>
    </head>
    <body>
    <img src="http://www.w3.org/2008/site/images/twitter-bird" />
    </body>
    </html>

    IMAGENS: REDIMENSIONAMENTO
     Possibilidade de redimensionamento do tamanho da imagem através
    de dois atributos: WIDTH e HEIGHT
     Em caso de não especificação destes atributos, o navegador adotará o
    tamanho original da imagem para sua exibição
     Sintaxe
    <img src="localização_imagem" width="n" height="n" />
    onde
     WIDTH: especificação da largura da imagem (em pixels)
     HEIGHT: especificação da altura da imagem (em pixels)
     Importante: o uso indevido destes atributos poderá resultar na
    exibição de imagens com aspecto distorcido ou com péssima
    definição
     Exemplo 04
    <html>
    <head>
    <meta content="text/html; charset=utf-8" />
    <title>Exemplo 04</title>
    </head>
    <body>
    <img src="diretorio02/imagem02.jpg" width="800px" height="193px" />
    </body>
    </html>
    8
    IMAGENS: REDIMENSIONAMENTO
     Exemplo 04: imagem com aspecto distorcido
     Uso da mesma imagem usada no exemplo 02

    IMAGENS: ALINHAMENTO
     Atributo: ALIGN
     Tipos de alinhamento
     Alinhamento em relação ao navegador
     Alinhamento em relação ao texto
     Alinhamento em relação ao navegador: tipos
     LEFT: alinhamento à esquerda (padrão)
     RIGHT: alinhamento à direita
     Alinhamento em relação ao texto
     Requer posicionamento da tag <IMG> no interior uma tag
    de parágrafo
     Tipos
    TOP: alinhamento de texto com o topo da imagem
    MIDDLE: alinhamento de texto com o centro da imagem
    BOTTOM: alinhamento de texto com o rodapé da imagem

    10
    IMAGENS: ALINHAMENTO
     Exemplo 05: alinhamento de imagens em relação ao
    navegador
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;
    charset=utf-8" />
    <title>Exemplo 01</title>
    </head>
    <body>
    <img src="imagem01.jpg" align="left" />
    <img src="imagem01.jpg" align="right"/>
    </body>
    </html>

    11

    IMAGENS: ALINHAMENTO
     Exemplo 06: alinhamento de imagens em relação ao
    texto
    <html>
    <head>
    <meta content="text/html; charset=utf-8" />
    <title>Exemplo 06</title>
    </head>
    <body>
    <p>Texto alinhado com o topo da imagem <img
    src="imagem01.jpg" align="top" width="100"></p>
    <p>Texto alinhado com o centro da imagem <img
    src="imagem01.jpg" align="middle"
    width="100"></p>
    <p>Texto alinhamento com o rodapé da imagem <img
    src="imagem01.jpg" align="bottom"
    width="100"></p>
    </body>
    </html>

    12
    IMAGENS: ALINHAMENTO
     Exemplo 06: alinhamento de imagens em relação ao texto

    13

    IMAGENS: OUTROS ATRIBUTOS


     Atributo TITLE: especificação de uma mensagem de texto a
    ser exibida durante o carregamento da imagem
     Em caso de não carregamento da imagem, essa mensagem de
    texto será exibida permanentemente
     Em caso de posicionamento do cursor do mouse sobre a imagem,
    após o seu carregamento, a mesma mensagem de texto é
    mostrada
     Exemplo 07
    <html>
    <head>
    <meta content="text/html; charset=utf-8" />
    <title>Exemplo 07</title>
    </head>
    <body>
    <img src="imagem01.jpg" title="W3C: consórcio
    internacional com cerca de 500 membros, que agrega
    empresas, órgãos governamentais e organizações
    independentes, e que visa desenvolver padrões para a
    criação e a interpretação de conteúdos para a Web." />
    </body>
    </html>
    14
    IMAGENS: OUTROS ATRIBUTOS
     Exemplo 07: uso do atributo TITLE

    15

    REFERÊNCIAS BIBLIOGRÁFICAS
     IDEPAC. Apostila Web Design. Disponível em
    <http://apostilas.fok.com.br/attachments/001_Apostila-de-
    webdesign-idepac.pdf>. Acesso em 24 de agosto de 2010.

     WIKIPÉDIA. Graphics Interchange Format. Disponível em


    <http://pt.wikipedia.org/wiki/Graphics_Interchange_Format>.
    Acesso em 31 de agosto de 2010.

     WIKIPÉDIA. Joint Photographic Experts Group. Disponível em


    <http://pt.wikipedia.org/wiki/Jpeg>. Acesso em 31 de agosto de
    2010.

    16

    Você também pode gostar