Como adicionar imagens às suas páginas da Web HTML5 e CSS3 - manequins

Toda vez que você explorar a web, você deve encontrar toneladas de imagens em praticamente todas as páginas HTML5 e CSS3 que você visita. Normalmente, as imagens são usadas de quatro maneiras nas páginas da Web:

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

• Imagens incorporadas: A imagem está incorporada na página. O texto da página geralmente flui em torno da imagem. Este é o tipo de imagem mais comum usado na web.

• Imagens de fundo: Uma imagem pode ser usada como um plano de fundo para toda a página ou para uma parte específica da página. As imagens geralmente requerem alguma manipulação especial para torná-las adequadas para uso em segundo plano.

• Balas personalizadas: Com CSS, você pode atribuir uma imagem pequena para ser uma bala para uma lista ordenada ou não ordenada. Isso permite que você faça qualquer tipo de marcadores de lista personalizados que você pode desenhar.

Como vincular a uma imagem

A maneira mais fácil de incorporar imagens é vincular a elas. Dê uma olhada no ExternalImage. página html.

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

externalImage. html

Vinculação a uma imagem externa
Susan B. Constant

O href aponta para um arquivo de imagem, não como uma página HTML. Você pode apontar para qualquer tipo de arquivo que deseja em uma marca de âncora. Se o navegador conhece o tipo de arquivo, o navegador exibe o arquivo. Se o navegador não conhecer o formato do arquivo, o computador do usuário tenta exibir o arquivo usando o programa que ele 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 de âncora com qualquer tipo de arquivo, mas os resultados podem ser muito imprevisíveis. Geralmente, salve esse truque para formatos muito comuns, como GIF e JPG.

A maioria dos navegadores redimensiona automaticamente a imagem para se ajustar ao tamanho do navegador. Isso significa que uma imagem grande pode parecer menor do que realmente é, mas o usuário ainda precisa esperar para que a imagem inteira seja baixada.

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

Os links externos são fáceis de criar, mas eles têm alguns problemas:

• Eles não visualizam a imagem. O usuário possui apenas a descrição do texto para descobrir o que a imagem pode ser.

• Eles interrompem o fluxo. Se a página contiver uma série de imagens, o usuário deve continuar deixando a página para ver 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 da web. A maioria dos usuários sabe clicar no botão Voltar do navegador, mas não assume que todos os usuários saibam o que fazer.

Como adicionar imagens em linha usando a marca

A alternativa para fornecer links para imagens é incorporar suas imagens na página.

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

embeddedImage. Html

Susan B. Constant

A Susan B. Constant foi a bandeira da frota de três pequenos navios que trouxeram colonos para Jamestown, a primeira colônia inglesa de sucesso no novo mundo. Esta é uma réplica localizada perto de Jamestown, Virgínia.

A tag de imagem é a estrela desta página. Esta etiqueta permite que você pegue um arquivo de imagem e incorpore-o diretamente na página. A tag de imagem é uma tag de um único toque. Não termina com. Em vez disso, use os caracteres no final da definição para indicar que essa tag não possui conteúdo.

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

src (fonte)

O atributo src permite que você indique o URL da imagem. Esta pode ser uma referência absoluta ou relativa. Ligar a uma imagem em sua própria estrutura de diretório geralmente é melhor porque você não pode ter certeza de que uma imagem externa ainda estará lá quando o usuário chegar à 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 devem descrever o tamanho de uma imagem. Você pode usar esses atributos para realmente alterar o tamanho de uma imagem, mas é uma má idéia. Altere o tamanho da imagem com o seu editor de imagens. Se você usar esses atributos, o usuário deve aguardar a imagem completa, mesmo que veja uma versão menor. Não faça o usuário aguardar informações que ela não verá.

alt (texto alternativo)

O atributo alt dá-lhe a oportunidade de especificar texto alternativo descrevendo a imagem. Informações de texto alternativas são usadas quando o usuário possui imagens desligadas e por leitores de tela. As informações em tags alt também são usadas no software de pesquisa de imagens, como o Google Images.

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

Além disso, a tag é uma tag em linha, portanto, ela precisa ser incorporada dentro de uma tag de nível de bloco.