quinta-feira, 23 de março de 2017

Como Inserir Imagens Usando HTML

Adicionar imagens a um site ou perfil de alguma rede social é uma excelente maneira de melhorar o aspecto visual da página. O código HTML (Linguagem de Marcação de Hipertexto) para adicionar imagens é bastante simples e geralmente é o primeiro a ser aprendido por um estudante de HTML.

Parte1
Inserindo a imagem

  1. Imagem intitulada Insert Images with HTML Step 1
    1
    Envie a imagem. Atualmente, existem diversos serviços gratuitos de hospedagem de imagens, como o Picasa Web Albums, Imgur, Flickr ou o Photobucket. Leia atentamente os termos de uso de cada um deles. Alguns desses serviços podem reduzir qualidade da imagem enviada ou removê-la após ela atingir um determinado número de visualizações (isso ocorre porque as imagens ocupam espaço nos servidores dessas empresas).
    • Alguns dos serviços de hospedagem de blogs permitem que o usuário envie imagens usando ferramentas próprias de administração do blog.
    • Caso você seja assinante de um serviço de hospedagem pago, envie as imagens para seu próprio site usando um serviço de FTP (Protocolo de Transferência de Arquivos). É recomendada a criação de um diretório "imagens" para manter a organização dos seus arquivos. [1]
    • Caso queira utilizar uma imagem de outro site, peça permissão ao criador dela. Se o pedido for concedido, baixe e envie a imagem para um site de hospedagem de imagens.

  2. Imagem intitulada Insert Images with HTML Step 2
    2
    Abra seu arquivo HTML. Abra o documento HTML correspondente à página web na qual a imagem será exibida.
    • Caso sua intenção seja inserir uma imagem em um fórum, basta digitar o código diretamente no seu post. Vários fóruns de internet utilizam um sistema customizado em vez de HTML. Caso isso não funcione, peça ajuda aos demais usuários.
  3. Imagem intitulada Insert Images with HTML Step 3
    3
    Comece com a tag IMG. Encontre o local no corpo do arquivo HTML no qual você deseja inserir uma imagem. Escreva a tag <img>. Essa é uma tag vazia, ou seja, ela não possui uma tag de fechamento. Tudo o que for necessário para exibir uma imagem precisa ir dentro dos dois colchetes.
    • <img>
  4. Imagem intitulada Insert Images with HTML Step 4
    4
    Encontre o endereço URL da sua imagem. Visite a página da internet na qual você hospedou a imagem. Clique com o botão direito do mouse na imagem (no Mac, segure a tecla Control e clique com o mouse) e selecione "Copiar endereço da imagem". Se preferir, clique em "Visualizar imagem" para abri-la sozinha em uma página e copie a URL na barra de endereços.
    • Caso você tenha enviado a imagem ao diretório de imagens do seu próprio site, crie um link para ela da seguinte forma /imagens/onomedoseuarquivoaquii. Caso não funcione, é provável que o diretório de imagens esteja em outra pasta. Mova-o para o diretório raiz.
  5. Imagem intitulada Insert Images with HTML Step 5
    5
    Coloque o endereço URL dentro do atributo SRC. Você provavelmente já sabe que os atributos HTML são colocados dentro de tags para modificá-lo. O atributo SRC significa "fonte", e é ele quem informa ao navegador onde procurar para encontrar a imagem. Escreva src=" " e cole o endereço URL da imagem dentro das aspas. Veja um exemplo:
    • <img src="http://www.exemplodesitedeimagens.com/meu-cachorro.jpg">

  6. Imagem intitulada Insert Images with HTML Step 6
    6
    Adicione um atributo ALT. Tecnicamente falando, o HTML tem tudo o que é necessário para exibir uma imagem. No entanto, é melhor adicionar o atributo alt também. Ele informa ao navegador de internet o texto que vai ser exibido quando a imagem não puder ser carregada. Mais importante ainda, isso ajuda os motores de busca a descobrirem aproximadamente o conteúdo de sua imagem, permitindo que os leitores de tela descrevam a imagem aos visitantes com deficiência visual. [2] Siga o exemplo abaixo e mude o texto de dentro das aspas:
    • <img src="http://www.exemplodesitedeimagens.com/meu-cachorro.jpg" alt="meu cachorro comendo banana">
    • Caso a imagem não seja importante ao conteúdo da página, adicione o atributo ALT sem texto dentro dele (alt=""). [3]
  7. Imagem intitulada Insert Images with HTML Step 7
    7
    Salve as alterações. Salve o arquivo HTML do site. Acesse a página que você acabou de editar ou atualize-a, caso ela já esteja aberta. A imagem deverá ser exibida. Se ela estiver em no tamanho errado ou apresentar algum outro problema, siga para a próxima seção.

Parte2
Ajustes opcionais

  1. Imagem intitulada Insert Images with HTML Step 8
    1
    Altere o tamanho da imagem. Para obter melhores resultados, basta usar um software de edição de imagens para redimensioná-las e, em seguida, enviar a nova versão. Defina os atributos width (largura) e height (altura) do HTML para que o navegador diminua ou aumente a imagem, o que pode ser inconsistente em diversos navegadores de internet e até mesmo causar erros de exibição (raramente). [4] Caso queira fazer um ajuste rápido e funcional, use o seguinte formato:
    • <img src="http://exemplo.com/exemplo.png" alt="mostrar imagem" width=200 height=200> (Número de pixels, ou "CSS pixels", no HTML5.)[5][6]
    • Ou <img src="exemplo.com/exemplo.png" width=100% height=10%>(Porcentagem da dimensão da página web ou da imagem.)
    • Se você introduzir somente um dos dois atributos (largura ou altura), o navegador deverá preservar a proporção largura:altura.
  2. Imagem intitulada Insert Images with HTML Step 9
    2
    Adicione uma dica de ferramenta. É possível utilizar o atributo title (título) para adicionar um comentário extra ou alguma informação sobre a imagem. Por exemplo, você pode utilizá-lo para dar créditos ao autor da foto. Geralmente, este texto é exibido sempre que um visitante passa o cursor sobre a imagem.
    • <img src="http://exemplo.com/exemplo.png" title="Fotografado por Max G.">
  3. Imagem intitulada Insert Images with HTML Part 2 Step 3
    3
    Crie um link na imagem. Para fazer com que a imagem também seja um link, insira o código da imagem dentro da tag de link <a></a>. Veja um exemplo:
    • <a href="http://www.urldaimagem.com><img src="http://urldaimagem.com/imagem.gif"></a>

Dicas

  • Não se esqueça de incluir a extensão da imagem (.jpg, .gif, etc) na URL.
  • As imagens GIF funcionam bem para logotipos ou desenhos animados; as imagens JPEG funcionam bem para imagens complexas, como fotografias.
  • Na maioria dos casos, é aconselhável que você use imagens com os formatos .gif, .jpeg, .jpg ou .png. [7] É provável que outros formatos não sejam exibidos corretamente em todos os navegadores.
  • Mantenha uma cópia de segurança da imagem em seu computador, somente por precaução.

Avisos

  • Não use imagens inserindo a URL do site de outra pessoa. Isso consome a banda de internet dessa pessoa sem gerar quaisquer visitas ao site dela. Além de ser antiético, a imagem desaparecerá se o site original dela sair do ar. Se o autor da página descobrir, ele pode até mesmo alterar a imagem que aparece no seu site. [8]

0 comentários:

Postar um comentário