Лекция 5. Адаптивная верстка HTML-документа

5.2. Вставка изображений и альтернативного текста. Установка фона

1.21M

Category:

internet

Интернет-технологии_лекция5_2026

1. Интернет-технологии_5

Плахотникова Мария Александровна, к.э.н., доцент, доцент
кафедры информационных систем
1

2. Лекция 5. Адаптивная верстка HTML-документа

Лекция 5. Адаптивная верстка HTMLдокумента
5.1. Виды адресов
5.2. Вставка изображений и альтернативного
текста. Установка фона
5.3. Использование градиентов
2

3. 5.1. Виды адресов. Гиперссылка

Гиперссылка
• Тэг <а>
• Атрибут href (hyperlink reference)
• <a href="http://htmlacademy.ru"/>HTML Academy</a>
Виды ссылок:
• текстовая
• изображение
• любой другой элемент, допустимый в HTML
3

4. 5.1. Виды адресов

Виды адресов:
• абсолютные
• относительные
• содержащие якорь
4

5. 5.1. Виды адресов. Абсолютные

Структура абсолютного адреса:
• Протокол
• Имя сервера (домен, хост)
• Путь
Пример
https://academy.ru/courses
https:// - это протокол
academy.ru – имя сервера
/courses -путь
5

6. 5.1. Виды адресов. Относительные

Структура относительного адреса:
• Путь ( )
Пример
• courses/1
• ../run/1
6

7. 5.1. Виды адресов. Подсказка для ссылок

7
• Подсказка – это информация, всплывающая над элементом наведении на него курсора.
• Подсказка реализуется через атрибут title
Пример
<a title="Подсказка" href="#">
Цвет ссылок
• Непосещённая ссылка – подчеркнута и отображена синим цветом;
a:link {color: navy}
• Посещённая ссылка – подчеркнута и отображена фиолетовым цветом;
a:visited {color: purple}
• Активная ссылка - подчеркнута и отображена красным цветом; a:hover {color: red}

8. 5.1. Виды адресов. Ссылки с якорем

Структура ссылки с якорем
• Символ #(решетка)
• Идентификатор (атрибут id)
Создание якоря с идентификатором section1:
<h2 id="section1">Раздел 1</h2>
Пример создание ссылки, которая будет перенаправлять
пользователя к якорю section1 на той же странице
<a href="#section1">Перейти к разделу 1</a>
8

9. 5.1. Виды адресов. Ссылки с якорем

Пример использования якоря в абсолютных адресах
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8"><title>Якорь в другом документе</title>
</head>
<body>
<p>
<a href="https://ru.wikipedia.org/wiki/HTML5#Разметка">Разметка HTML 5</a>
</p>
</body>
</html>
9

10. 5.2. Вставка изображений и альтернативного текста. Установка фона

Поддерживаемые форматы изображений
• gif
• jpg
• png
10

11. 5.2. Вставка изображений и альтернативного текста. Установка фона

Для вставки изображения нужно:
• Тэг <img>
• Атрибут Src
• Адрес картинки
Пример
<img src="logo.png>
Пример вставки изображения из подкаталога jmage
<img src=“image/logo.png>
11

12. 5.2. Вставка изображений и альтернативного текста. Установка фона

Для вставки альтернативного текста нужно:
• Атрибут alt
Пример
<img src="cat.png=«Мой кот по имени Дымок">
Изображение-ссылка
Структура ИС:
Пример
• Тэг <a>
<a href="http://https://kupikod.com">
• Тэг <img>
<img src="roblox_skin.png" alt="Скин">
</a>
12

13. 5.2. Вставка изображений и альтернативного текста. Установка фона

Для изменения размеров изображений
нужно:
• Свойство width - ширина
• Свойство height - высота
Для позиционирование изображения нужно:
• Свойство float со значением
• left
• right
Пример
Img {
height: 200px
width: 200px
}
Пример
Img {
border: 1px
float: right
margin: 8px 0 0 20px
}
13

14. 5.2. Вставка изображений и альтернативного текста. Установка фона

Объявление адаптивных изображений:
• Атрибут srcset
• URL
• Условие к URL
Структура строки для объявления адаптивных изображений:
• Адрес изображения
• Дескриптор ширины
• Дескриптор плотности пикселей
Пример
<img src="image-original.jpg"
srcset="image-small.jpg 1 x, image-small.jpg 2x, image-cropped-sm.jpg
640w">
14

15. 5.2. Вставка изображений и альтернативного текста. Установка фона

Фон элемента может быть:
• сплошного цвета (color);
• изображением (image);
• градиентом (linear-gradient или radialgradient);
• Комбинация (background-blend-mode).
Свойство background-image – цвет и
изображение
Свойство background-color – сплошная
фоновая заливка
15
div {
background-color: #b2b2b2
}
div {
background-image: url("alert.png");
}
div {
background: linear-gradient(to right,
#ff0000, #0000ff);
}

16. 5.2. Вставка изображений и альтернативного текста. Установка фона

16
Свойство background-blend-mode — это режим смешивания
фоновых слоёв.
Свойство background-blend-mode
Некоторые режимы смешивания
Пояснения
normal
значение по умолчанию, фоны не смешиваются, верхний слой
остаётся непрозрачным
overlay
смешивание background-color с background-image, чтобы отразить
светлые или тёмные участки фона
multiply
перемножение background-image и background-color, обычно это
приводит к получению более тёмного изображения, чем исходное
color
создание цвета с оттенком и насыщенностью исходного цвета и
яркость нижележащего цветового фона

17. 5.2. Вставка изображений и альтернативного текста. Установка фона

Пример применения свойства background-blend-mode
div {
width: 300px;
height: 400px;
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
url(https://html5book.ru/wp-content/uploads/2016/12/paleimage.jpg);
background-blend-mode: overlay;
}
17

18. 5.2. Вставка изображений и альтернативного текста. Установка фона

Пример 1
div {
width: 300px;
height: 400px;
background-image: url(https://html5book.ru/wp-content/uploads/2016/12/pale-image.jpg),
linear-gradient(45deg, #f8a261, #6e9fc9);
background-blend-mode: overlay;
}
Пример 2
div {
width: 300px;
height: 400px;
background-image: linear-gradient(45deg, #f8a261, #6e9fc9),
linear-gradient(135deg, #08526b, #fbcd7c),
url(https://html5book.ru/wp-content/uploads/2016/12/paleimage.jpg);
background-blend-mode: overlay, color;
}
18

19. 5.2. Вставка изображений и альтернативного текста. Установка фона

Повторение фона
Свойство backround-repeat
Значения свойства backround-repeat:
19
Позиционирование фона
По умолчанию – левый верхний угол
Свойство background-position
• repeat
Ключевые слова: top, right, bottom, left
• repeat-x
div {
background-image: url("alert.png");
Background-position: 20px 10 px;
Background-repeat: no-repeat;
}
• repeat-y
• no-repeat
• space
• round
div {
backround-image: url("alert.png");
backround-repeat: no-repeat;
}

20. 5.4. Использование градиентов

20
Линейный градиент
Функция linear-gradient() в свойстве background (или в background-image) включает:
• желаемые цвета;
• место появления цвета;
• направление распространения градиента.
div {
background: #466368;
background: -webkit-linear-gradient(#648880, #293f50);
background: -moz-linear-gradient(#648880, #293f50);
background: liner-gradient(#648880, #293f50);
}

21. 5.4. Использование градиентов

Вендорные префиксы
• webkit – Safari, Chrome, Opera 15+
• moz - Firefox
• o - Opera 12• ms – Internet Explorer
21

22. 5.4. Использование градиентов

Пример линейного градиента
<title>Градиент</title>
<style>
.example {
width: 200px;
height: 100px;
background-color: #eee;
background-image: linear-gradient(left, black, white);
background: -o-linear-gradient(left, black, white);
background: -moz-linear-gradient(left, black, white);
background: -webkit-linear-gradient(left, black, white);
}
</style>
</head>
<body>
<div class="example"> <font color="red">Содержимое страницы</font> </div>
</body>
22

23. 5.4. Использование градиентов

Направление
градиента
Угол наклона
от 0 до 360 deg
background-image: lineargradient(40deg, black, white)
23
По умолчанию - сверху вниз
Ключевые
слова
left
right
top
bottom
0deg
90deg
180deg
270deg
background-image: lineargradient(left, black, white)

24. 5.4. Использование градиентов

24
Диагональное направление градиента
background-image: linear-gradient(top left, black, white)
Многоцветный градиент
background-image: linear-gradient(top, red, #ccc, blue)
Конкретные места фона для цветовых точек
background-image: linear-gradient(direction, color-stop1, colorstop2, ...).
background-image: linear-gradient(left, red 20%, blue 80%);

25. 5.4. Использование градиентов

25
Радиальный градиент
Функция radial-gradient()
Задать:
• форма: круг или эллипс
• начальная точка
• конечная точка
По умолчанию:
• градиент является эллипсом
• первый цвет начинается в центре
• последний цвет заканчивает в самом
дальнем углу

26. 5.4. Использование градиентов

<title>Стилизация таблиц в CSS3</title>
<style>
div {
width: 200px;
height: 200px;
border-radius: 100px;
background-color: #eee;
black);
background-image: radial-gradient(white,
background-image: -moz-radialgradient(white, black);
background-image: -webkit-radialgradient(white, black);
}
p{
margin: 0;
padding-top: 60px;
text-align: center;
color: blue;
}
</style>
</head>
<body>
<div><p>Радиальный градиент</p></div>
</body>
26

English Русский Rules