Toda vez que você explorar a web, você está obrigado a executar em toneladas de fotos em quase todos os HTML5 e CSS3 página que você visita. Normalmente, as imagens são usadas em quatro maneiras em páginas da web:

• Link externo: A página tem texto com um link incorporado. Quando o usuário clica no link, a imagem substitui a página no navegador da web. Para fazer uma imagem vinculado externamente, basta fazer uma ligação comum, mas apontar para um arquivo de imagem, em vez de um arquivo (HyperText Markup Language) HTML.

• imagens embutidas: A imagem é incorporado na página. O texto da página normalmente flui ao redor da imagem. Este é o tipo mais comum de imagem usado na web.

• imagens de fundo: Uma imagem pode ser utilizada como um fundo para a página inteira ou de uma parte específica da página. Imagens geralmente exigem alguma manipulação especial para torná-los adequados para o uso do fundo.

• balas personalizadas: Com CSS, você pode atribuir uma imagem pequena para ser uma bala de uma lista ordenada ou desordenada. Isto permite-lhe fazer qualquer tipo de marcadores de lista personalizada você pode desenhar.

Como conectar-se a uma imagem

A maneira mais fácil de incorporar imagens é ligar para eles. Dê uma olhada na página externalImage.html.

código da página não é muito mais do que um simples link:

Ligando para uma imagem externa
Susan B. Constante

o href aponta para um arquivo de imagem, não uma página HTML. Você pode apontar para qualquer tipo de arquivo que você quer em uma marca de âncora. Se o navegador sabe o tipo de arquivo, o navegador exibirá o arquivo. Se o navegador não sabe o formato de arquivo, o computador do usuário tenta exibir o arquivo usando qualquer programa que normalmente usa para abrir esse tipo de arquivo.

Isso funciona bem para a maioria das imagens, porque a imagem é exibida diretamente no navegador.

Você pode usar esse truque âncora com qualquer tipo de arquivo, mas os resultados podem ser muito imprevisível. Geralmente, salvar este truque para formatos muito comuns, como GIF e JPG.

A maioria dos navegadores redimensionar automaticamente a imagem para ajustar o tamanho do navegador. Isto significa uma imagem grande pode parecer menor do que realmente é, mas o usuário ainda tem que esperar por toda a imagem para download.

Porque esta é uma referência relativa, a imagem indicada deve estar no mesmo diretório que o arquivo HTML. Quando o usuário clica no link, a página é substituída pela imagem.

Ligações externas são fáceis de criar, mas eles têm alguns problemas:

• Eles não visualizar a imagem. O utilizador tem apenas a descrição do texto para descobrir o que a imagem pode ser.

• Eles interromper o fluxo. Se a página contém uma série de imagens, o usuário tem que manter deixando a página para visualizar as imagens.

• O usuário deve fazer backup para retornar à página principal. A imagem parece uma página da web, mas não é. Nenhum link ou outro texto explicativo na imagem indica como voltar para a página de web. A maioria dos usuários sabe que clicar no botão Voltar do navegador, mas não assuma todos os usuários saibam o que fazer.

Como adicionar imagens embutidas usando o etiqueta

A alternativa ao fornecimento de links para imagens é incorporar as suas imagens na página.

O código mostra como esta imagem foi incluída na página:

A Susan B. Constante
o Susan B. Constante foi carro-chefe da thefleet de três pequenos navios que traziam colonos para Jamestown, o firstsuccessful Inglês Colony no novo mundo. Esta é uma réplica housednear Jamestown, Virgínia.

A tag de imagem é a estrela desta página. Esta tag permite que você pegue um arquivo de imagem e incorporá-la a página diretamente. A tag de imagem é uma tag one-shot. Ela não termina com. Em vez disso, use os caracteres no final da definição para indicar que este tag não tem conteúdo.

Você deve ter notado que Susan B. Constante está em itálico na página utilizada a tag para obter este efeito. apoia ênfase, e meios forte ênfase. Por padrão, qualquer texto dentro de um par está em itálico e texto está a negrito. Você pode alterar esse comportamento com CSS.

src (source)

O atributo src permite indicar a URL da imagem. Esta pode ser uma referência absoluta ou relativa. Vinculando a uma imagem em sua própria estrutura de diretório é geralmente melhor porque você não pode ter certeza de uma imagem externa ainda estará lá quando o usuário chega à página.

altura e largura

Os atributos de altura e largura são usados ​​para indicar o tamanho da imagem. O navegador usa esta informação para indicar a quantidade de espaço para reservar na página.

Os atributos de altura e largura deve descrever o tamanho de uma imagem. Você pode usar esses atributos para realmente mudar o tamanho de uma imagem, mas é uma má idéia. Alterar o tamanho da imagem com o seu editor de imagens. Se você usar esses atributos, o usuário tem que esperar para a imagem completa, mesmo que ela vai ver uma versão menor. Não faça o usuário esperar por informações que ela não vai ver.

alt (texto alternativo)

O atributo alt lhe dá uma oportunidade para especificar texto alternativo que descreve a imagem. informações de texto alternativo é usado quando o usuário tem imagens desligado e por leitores de tela. Informação em tags alt também é usado em software de imagem de busca como o Google Images.

O atributo alt é exigido em todas as imagens.

Além disso, o tag é uma tag inline, por isso precisa ser incorporado dentro de uma marca de nível de bloco.