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>Это даст следующий результат -
Бесплатная веб-графика
Для бесплатной веб-графики, включая шаблоны, вы можете посмотреть бесплатную веб-графику