HTML — изображения

Оглавление

    Показать оглавление

Изображения очень важны для украшения, а также для простого изображения многих сложных концепций на вашей веб-странице. Этот учебник проведет вас через простые шаги по использованию изображений на ваших веб-страницах.

Вставить изображение

Вы можете вставить любое изображение на свою веб-страницу, используя тег

<img>

Ниже приведен простой синтаксис для использования этого тега.

<img src = "Image URL" ... attributes-list/>

Тег является пустым тегом, что означает, что он может содержать только список атрибутов и не имеет закрывающего тега.

Пример

Чтобы попробовать следующий пример, давайте сохраним наш HTML-файл test.htm и файл изображения test.png в одном каталоге:

<!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>

Это даст следующий результат:

Вы можете использовать файл изображения PNG, JPEG или GIF в зависимости от вашего удобства, но убедитесь, что вы указали правильное имя файла изображения в

src

атрибут. Имя изображения всегда чувствительно к регистру.

Атрибут

alt

является обязательным атрибутом, который указывает альтернативный текст для изображения, если изображение не может быть отображено.

Установить местоположение изображения

Обычно мы храним все изображения в отдельном каталоге. Итак, давайте сохраним HTML-файл test.htm в нашем домашнем каталоге и создадим подкаталог

images

внутри домашнего каталога, где мы будем хранить наше изображение test.png.

Пример

Предполагая, что наше местоположение изображения

image/test.png

попробуйте следующий пример:

<!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>

Это даст следующий результат:

Установить ширину/высоту изображения

Вы можете установить ширину и высоту изображения в соответствии с вашими требованиями, используя атрибуты

width
height

Вы можете указать ширину и высоту изображения либо в пикселях, либо в процентах от его фактического размера.

Пример

<!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>

Это даст следующий результат:

Установить границу изображения

По умолчанию изображение будет иметь рамку вокруг себя, вы можете указать толщину границы в пикселях, используя атрибут границы. Толщина 0 означает отсутствие рамки вокруг изображения.

Пример

<!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>

Это даст следующий результат:

Установить выравнивание изображения

По умолчанию изображение выравнивается по левому краю страницы, но вы можете использовать

align

атрибут, чтобы установить его в центре или справа.

Пример

<!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>

Это даст следующий результат: