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

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

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

Вы можете вставить любое изображение на свою веб-страницу, используя <img>тег. Ниже приводится простой синтаксис использования этого тега.

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

Тег <img> - это пустой тег, что означает, что он может содержать только список атрибутов и не имеет закрывающего тега.

пример

Чтобы попробовать следующий пример, давайте сохраним наш 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>

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

Бесплатная веб-графика

Для бесплатной веб-графики, включая шаблоны, вы можете посмотреть бесплатную веб-графику