Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • 9 - Imagens

    Enviado por

    DAROCHA 453
    13 visualizações5 páginas
    Este documento descreve como inserir imagens em páginas da web usando HTML. As imagens podem ser adicionadas com a tag <img> especificando o caminho da imagem no atributo src. É possível definir atributos como largura, altura, borda e alinhamento para personalizar a aparência da imagem. As imagens devem ser armazenadas em um diretório separado para facilitar o acesso.

    Descrição original:

    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
    Este documento descreve como inserir imagens em páginas da web usando HTML. As imagens podem ser adicionadas com a tag <img> especificando o caminho da imagem no atributo src. É possível definir atributos como largura, altura, borda e alinhamento para personalizar a aparência da imagem. As imagens devem ser armazenadas em um diretório separado para facilitar o acesso.

    Direitos autorais:

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

    9 - Imagens

    Enviado por

    DAROCHA 453
    Este documento descreve como inserir imagens em páginas da web usando HTML. As imagens podem ser adicionadas com a tag <img> especificando o caminho da imagem no atributo src. É possível definir atributos como largura, altura, borda e alinhamento para personalizar a aparência da imagem. As imagens devem ser armazenadas em um diretório separado para facilitar o acesso.

    Direitos autorais:

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

    HTML - Imagens

    As imagens são muito importantes para embelezar, bem como para retratar muitos conceitos
    complexos de forma simples em sua página web. Este tutorial irá levá-lo através de etapas
    simples para usar imagens em suas páginas da web.

    Inserir imagem
    Você pode inserir qualquer imagem em sua página da Web usando a tag <img>. A seguir está a
    sintaxe simples para usar essa marca.

    <img src = "Image URL" ... attributes-list/>

    A tag <img> é uma tag vazia, o que significa que ela pode conter apenas uma lista de atributos
    e não tem nenhuma tag de fechamento.

    Exemplo
    Para tentar seguir o exemplo, vamos manter nosso teste de arquivo HTML.htm e teste de
    arquivo de imagem.png no mesmo diretório −

     Demonstração ao vivo
    <!DOCTYPE html>
    <html>

    <head>
    <title>Using Image in Webpage</title>
    </head>

    <body>
    <p>Simple Image Insert</p>
    <img src = "/html/images/test.png" alt = "Test Image" />
    </body>

    </html>

    Isso produzirá o seguinte resultado −


    Simple Image Insert

    Você pode usar o arquivo de imagem PNG, JPEG ou GIF com base no seu conforto, mas
    certifique-se de especificar o nome correto do arquivo de imagem no atributo src. O nome da
    imagem sempre diferencia maiúsculas de minúsculas.

    O atributo alt é um atributo obrigatório que especifica um texto alternativo para uma imagem,
    se a imagem não puder ser exibida.

    Definir localização da imagem


    Normalmente, mantemos todas as imagens em um diretório separado. Então, vamos manter o
    teste de arquivo HTML.htm em nosso diretório inicial e criar um subdiretório de imagens dentro
    do diretório base, onde manteremos nosso teste de imagem.png.

    Exemplo
    Supondo que a localização da nossa imagem seja "image/test.png", tente o exemplo a seguir −

     Demonstração ao vivo
    <!DOCTYPE html>
    <html>

    <head>
    <title>Using Image in Webpage</title>
    </head>

    <body>
    <p>Simple Image Insert</p>
    <img src = "/html/images/test.png" alt = "Test Image" />
    </body>

    </html>

    Isso produzirá o seguinte resultado −


    Simple Image Insert

    Definir largura/altura da imagem


    Você pode definir a largura e a altura da imagem com base em sua exigência usando atributos
    width e height. Você pode especificar a largura e a altura da imagem em termos de pixels ou
    porcentagem de seu tamanho real.

    Exemplo
     Demonstração ao vivo
    <!DOCTYPE html>
    <html>

    <head>
    <title>Set Image Width and Height</title>
    </head>

    <body>
    <p>Setting image width and height</p>
    <img src = "/html/images/test.png" alt = "Test Image" width = "150" height =
    </body>

    </html>

    Isso produzirá o seguinte resultado −


    Setting image width and height

    Definir borda da imagem


    Por padrão, a imagem terá uma borda ao redor dela, você pode especificar a espessura da borda
    em termos de pixels usando o atributo border. Uma espessura de 0 significa, nenhuma borda ao
    redor da imagem.

    Exemplo
     Demonstração ao vivo
    <!DOCTYPE html>
    <html>

    <head>
    <title>Set Image Border</title>
    </head>

    <body>
    <p>Setting image Border</p>
    <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
    </body>

    </html>

    Isso produzirá o seguinte resultado −

    Setting image Border


    Definir alinhamento da imagem
    Por padrão, a imagem será alinhada no lado esquerdo da página, mas você pode usar o atributo
    align para defini-la no centro ou à direita.

    Exemplo
     Demonstração ao vivo
    <!DOCTYPE html>
    <html>

    <head>
    <title>Set Image Alignment</title>
    </head>

    <body>
    <p>Setting image Alignment</p>
    <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "
    </body>

    </html>

    Isso produzirá o seguinte resultado −

    Setting image Alignment

    Gráficos Web gratuitos


    Para Gráficos Web Gratuitos, incluindo padrões, você pode olhar para Gráficos Web
    Gratuitos

    Você também pode gostar