HTML - Imagens
As imagens são muito importantes para embelezar, bem como para representar muitos conceitos complexos de forma simples em sua página da web. Este tutorial o guiará por 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 <img>tag. A seguir está a sintaxe simples para usar essa tag.
<img src = "Image URL" ... attributes-list/>A tag <img> é uma tag vazia, o que significa que pode conter apenas uma lista de atributos e não possui tag de fechamento.
Exemplo
Para tentar o exemplo a seguir, vamos manter nosso arquivo HTML test.htm e o arquivo de imagem test.png no mesmo diretório -
<!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 -
Você pode usar o arquivo de imagem PNG, JPEG ou GIF com base no seu conforto, mas certifique-se de especificar o nome do arquivo de imagem correto em srcatributo. O nome da imagem sempre diferencia maiúsculas de minúsculas.
o alt attribute é 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 arquivo HTML test.htm em nosso diretório inicial e criar um subdiretórioimages dentro do diretório inicial onde manteremos nossa imagem test.png.
Exemplo
Supondo que a localização da nossa imagem seja "image / test.png", tente o seguinte exemplo -
<!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 -
Definir largura / altura da imagem
Você pode definir a largura e a altura da imagem com base em seus requisitos usando width e heightatributos. Você pode especificar a largura e a altura da imagem em termos de pixels ou porcentagem de seu tamanho real.
Exemplo
<!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 = "100"/>
</body>
</html>Isso produzirá o seguinte resultado -
Definir borda da imagem
Por padrão, a imagem terá uma borda ao seu redor, você pode especificar a espessura da borda em termos de pixels usando o atributo de borda. Uma espessura de 0 significa nenhuma borda ao redor da imagem.
Exemplo
<!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 -
Definir alinhamento de imagem
Por padrão, a imagem será alinhada no lado esquerdo da página, mas você pode usar align atributo para defini-lo no centro ou à direita.
Exemplo
<!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 = "right"/>
</body>
</html>Isso produzirá o seguinte resultado -
Gráficos da Web grátis
Para Free Web Graphics, incluindo padrões, você pode olhar para Free Web Graphics