Изображения очень важны для украшения, а также для простого изображения многих сложных концепций на вашей веб-странице. Этот учебник проведет вас через простые шаги, чтобы использовать изображения на ваших веб-страницах.
Вставить изображение
Вы можете вставить любое изображение на свою веб-страницу, используя тег <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 в нашем домашнем каталоге и создадим подкаталог изображений внутри домашнего каталога, где мы будем хранить наш образ 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>
Это даст следующий результат —
Установить ширину / высоту изображения
Вы можете установить ширину и высоту изображения в зависимости от ваших требований, используя атрибуты ширины и высоты . Вы можете указать ширину и высоту изображения в пикселях или в процентах от его фактического размера.
пример
<!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>
Это даст следующий результат —
Установить границу изображения
По умолчанию изображение будет иметь рамку вокруг него, вы можете указать толщину границы в пикселях, используя атрибут border. Толщина 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>
Это даст следующий результат —
Установить выравнивание изображения
По умолчанию изображение будет выравниваться с левой стороны страницы, но вы можете использовать атрибут выравнивания, чтобы установить его по центру или справа.
пример
<!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>
Это даст следующий результат —
Бесплатная веб-графика
Для Free Web Graphics, включая шаблоны, вы можете посмотреть в Free Web Graphics