Toda vez que você explorar a web, você é obrigado a correr 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:

Video: #2 HTML Aula 42 - Imagem de fundo com tamanho adaptável

• 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 externamente ligada, basta fazer uma ligação comum, mas apontam 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 utilizado na web.

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

• balas personalizados: 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 exibe 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 se ajustar ao 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 usuário tem apenas a descrição do texto para descobrir o que a imagem pode ser.

• Eles interrompem o fluxo. Se a página contém uma série de imagens, o usuário tem que manter sair da página para ver imagens.

• O usuário deve fazer backup para retornar à página principal. A imagem parece com uma página 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 de clicar no botão Voltar do navegador, mas não assuma todos os usuários saibam o que fazer.

Como adicionar imagens em linha usando o etiqueta

A alternativa ao fornecimento de links para imagens é incorporar 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 trouxeram colonos para Jamestown, a 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 esta tag não tem conteúdo.

Video: TRABALHANDO COM IMAGENS - AULA 3 - Curso de HTML 5 e CSS 3

Você deve ter notado que Susan B. Constante está em itálico na página usou 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, eo texto está a negrito. Você pode alterar esse comportamento com CSS.

src (fonte)

O atributo src permite indicar a URL da imagem. Esta pode ser uma referência absoluta ou relativa. Ligando para 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 essas informações para indicar quanto 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 seu editor de imagem. 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ções em tags alt também é usado em software de imagem de busca como o Google Images.

O atributo alt é necessário em todas as imagens.

Além disso, a etiqueta é uma etiqueta de linha, por isso, necessita de ser incorporado dentro de uma marca de nível de bloqueio.