2020-09-24
158
На web – страницах используются следующие форматы графических изображений: *.jpg, *.gif, *.png.
Для вывода изображений в HTML – документ применяется элемент img. Элемент имеет два важных параметра:
- src - путь к изображению. Это может быть относительный или абсолютный путь в файловой системе или адрес в интернете;
- alt - текстовое описание изображения. Если браузер по каким-то причинам не может отобразить изображение (например, если у атрибута src некорректно задан путь), то браузер показывает вместо самой картинки данное текстовое описание. Атрибут alt еще важен тем, что поисковые системы по текстовому описанию могут индексировать изображение.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег img в HTML5</title>
</head>
<body>
<img src="dubi.png" alt="Зимняя равнина" />
</body>
</html>
В примере, файл с изображением называется dubi.png, он находится в одной папке с веб – страницей. Элементу img не требуется закрывающего тега.
Дополнительно в элементе img можно указать размеры изображения через атрибуты:
|
|
|
- width = “ширина (в пикселях или %)”;
- height = “высота (в пикселях или %)”.
Можно использовать стилевые особенности, например - отступы и обтекание для комбинирования изображения с текстом.
!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Тег img в HTML5</title>
</head>
<body>
<div>
<img src="dubi.png" alt="Зимняя равнина" style="float:left; margin-right:10px;" />
<h1>Lorem Ipsum</h1>
<b>Lorem Ipsum</b> is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry....
</div>
</body>
</html>
Фреймы
Фреймы позволяют встраивать на веб – страницу другую веб страницу. Представлены они элементом iframe.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Фреймы в HTML5</title>
</head>
<body>
<h2>Элемент iframe</h2>
<iframe src="http://wikipedia.com" width="400" height="200">
</iframe>
</body>
</html>
Настройка элемента iframe производится с помощью атрибутов:
- src – устанавливает полный путь к загружаемому ресурсу;
- width – ширина фрейма;
- height – высота фрейма.
