Пошаговая инструкция: как сжать картинку без потери качества и вставить её на сайт?
Содержание:
- Как работают свойства object-fit и object-position
- Вписывание картинки в область
- Способ 2: background-image
- Изменение картинки в графическом редакторе
- Как подготовить размер картинки в photoshop
- Создание масштаба изображения
- Больше
- Использовать минификацию HTML, CSS и JS
- Создание адаптивных образов
- Добавление на страницу картинки (используем тег )
- Изменение картинки в графическом редакторе
- Размеры шрифтов
- Имитация растянутого фонового изображения на меньшем пространстве
- Как исправить растянутый экран на Windows 10 и 7
- Подготовим простой шаблон HTML-страницы для вставки в неё графики
- Придание изображению структуры и установка заголовка
Как работают свойства object-fit и object-position
Если в результате object-fit выдает обрезанное изображение, оно по умолчанию будет центрировано. Для изменения точки фокуса можно использовать свойство object-position.
Вернемся к примеру object-fit: cover.
Теперь давайте изменим положение видимой части изображения по оси X, чтобы показать правый край изображения:
<img ... style="width: 300px; height: 337px; object-fit: cover; object-position: 100% 0;" ... />
Этот код покажет следующий результат:
В этом примере фрагмент изображения с черепахой вырезан.
А теперь давайте посмотрим, что произойдет, если указать позицию за пределами доступного пространства:
<img ... style="width: 300px; height: 337px; object-fit: cover; object-position: -20% 0;" ... />
В результате получится:
В этом примере изображение сдвинуто так, что мы видим только его левую часть. Кроме того, слева мы видим интервал, который составляет 20% доступного пространства.
Вписывание картинки в область
Порой изображения необходимо вписать в область заданных размеров, например, для создания слайдшоу — плавной смены нескольких фотографий. Есть два основных способа. Первый метод простой и работает во всех браузерах. Задаём желаемые размеры области и скрываем всё, что в неё не помещается с помощью свойства overflow со значением hidden (пример 5).
Пример 5. Использование overflow
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>Изображения</title>
<style>
figure {
width: 100%; /* Ширина области */
height: 400px; /* Высота области */
margin: 0; /* Обнуляем отступы */
overflow: hidden; /* Прячем всё за пределами */
min-width: 600px; /* Минимальная ширина */
}
figure img {
width: 100%; /* Ширина изображений */
margin: -10% 0 0 0; /* Сдвигаем вверх */
}
</style>
</head>
<body>
<figure>
<img src=»image/redcat.jpg» alt=»Рыжая кошка»>
</figure>
</body>
</html>
Результат примера показан на рис. 4. Область имеет высоту 400 пикселей и занимает всю доступную ей ширину. Для фотографии внутри <figure> устанавливаем ширину 100% и сдвигаем её чуть вверх, чтобы она лучше выглядела. Поскольку высота области фиксирована, то при уменьшении окна браузера до некоторого предела высота фотографии окажется меньше 400 пикселей и под ней появится пустое пространство. Поэтому вводим свойство min-width чтобы этого избежать.
Рис. 4. Фотография внутри области заданных размеров
Второй способ не так универсален, поскольку свойство object-fit не поддерживается в IE, а Firefox его понимает только с версии 36. Зато object-fit позволяет более аккуратно вписать изображение в заданную область. В примере 6 показан стиль для этого. Задействовано значение cover, оно увеличивает или уменьшает изображение так, чтобы оно всегда полностью заполняла всю область.
Пример 6. Использование object-fit
Способ 2: background-image
Другой способ вставки изображений – установка их в качестве фонового изображения блока. Этот способ попал сюда за то, что у фонового изображения есть свойство background-size с двумя полезными значениями: contain и cover. Первое умещает изображение целиком с сохранением пропорций (и образованием полей), второе растягивает изображение таким образом, чтобы полей не осталось, также с сохранением пропорций и при необходимости обрезая лишнее.
<html>
<head>
<style>
.wrapper {
width: 300px;
height: 300px;
border: 5px solid #515151;
}
.exmp2 {
background-image: url(/images/braineater.png);
background-repeat: no-repeat;
background-position: -40px 0px;
background-size: cover;
}
</style>
</head>
<body>
<div class="wrapper exmp2"></div>
</body>
</html>
По сравнению с предыдущим способом, здесь браузер автоматически определит, по какой оси нужно масштабировать изображение, а потому правило будет одинаково работать как для вертикальных, так и для горизонтальных изображений.
Изменение картинки в графическом редакторе
Изменять размер изображения вы можете в любом графическом редакторе(photoshop, gimp, xnview) и оно автоматически будет меняться на сайте в
соответствии с оригинальными размерами.
Плюсы метода:
Картинка грузится быстрее поскольку не нужно скачивать лишние данные(пиксели), которые будут потом сжаты программно.
Минусы:
Графические редакторы некачественно сжимают картинки менее 200 пикселей по ширине и высоте.
Всегда, когда это возможно и целесообразно старайтесь изменять размер именно в графическом редакторе, чтобы картинки быстрее загружались,
чем при программном изменении. Разница в скорости может составлять десятки раз.
Как подготовить размер картинки в photoshop
Главным параметром здесь является соотношение сторон и в программе выставить их проще всего.
Возьмем инструмент «Прямоугольная область», в стилях выставим «Заданные пропорции», затем укажем ширину – 3, высоту – 2 и готово.
Выделим изображение. Если вся картинка вмещается в выделенную область, то все хорошо, если нет, значить копируем выделенную область, создаем новый документ и вставляем в него скопированную картинку.
размер 1600х1067 px
Такие пропорции подойдут для большинства изображений, используемых на сайтах.
Следующим этапом устанавливаем необходимую ширину и высоту. Ставим ширину в 1600 px. При данном соотношении сторон высота подставится автоматически.
Осталось разобраться с весом изображения. Чаще всего я сохраняю с параметрами, указанными на рисунке.
Сохранить для web
Но, можно указать параметры немного ниже, если при этом не пострадает качество изображения.
Это и есть оптимальный размер изображения для сайта, а главное правильные пропорции.
Создание масштаба изображения
Шаг 1) добавить HTML:
<div class=»img-zoom-container»> <img
id=»myimage» src=»img_snow.jpg» width=»300″ height=»200″> <div
id=»myresult» class=»img-zoom-result»></div></div>
Шаг 2) добавить CSS:
Контейнер должен иметь «относительное» позиционирование.
* {box-sizing: border-box;}.img-zoom-container {
position: relative;}.img-zoom-lens { position: absolute; border: 1px solid
#d4d4d4; /*set the size of the lens:*/ width: 40px;
height: 40px;}.img-zoom-result
{ border: 1px solid #d4d4d4; /*set the size of the result
div:*/ width: 300px; height: 300px;}
Шаг 3) добавить JavaScript:
function imageZoom(imgID, resultID) { var img, lens, result, cx, cy;
img = document.getElementById(imgID); result =
document.getElementById(resultID); /*create lens:*/ lens =
document.createElement(«DIV»); lens.setAttribute(«class», «img-zoom-lens»);
/*insert lens:*/ img.parentElement.insertBefore(lens, img);
/*calculate the ratio between result DIV and lens:*/ cx =
result.offsetWidth / lens.offsetWidth; cy = result.offsetHeight /
lens.offsetHeight; /*set background properties for the result DIV*/
result.style.backgroundImage = «url(‘» + img.src + «‘)»;
result.style.backgroundSize = (img.width * cx) + «px » + (img.height * cy) + «px»;
/*execute a function when someone moves the cursor over the image, or the
lens:*/ lens.addEventListener(«mousemove», moveLens);
img.addEventListener(«mousemove», moveLens);
/*and also for touch screens:*/ lens.addEventListener(«touchmove», moveLens);
img.addEventListener(«touchmove», moveLens); function moveLens(e) {
var pos, x, y; /*prevent any other actions that may
occur when moving over the image*/ e.preventDefault(); /*get the cursor’s x and y positions:*/
pos = getCursorPos(e); /*calculate the position of the
lens:*/ x = pos.x — (lens.offsetWidth / 2);
y = pos.y — (lens.offsetHeight / 2); /*prevent the lens
from being positioned outside the image:*/ if (x >
img.width — lens.offsetWidth) {x = img.width — lens.offsetWidth;}
if (x < 0) {x = 0;} if (y > img.height —
lens.offsetHeight) {y = img.height — lens.offsetHeight;}
if (y < 0) {y = 0;} /*set the position of the lens:*/
lens.style.left = x + «px»; lens.style.top = y + «px»;
/*display what the lens «sees»:*/
result.style.backgroundPosition = «-» + (x * cx) + «px -» + (y * cy) + «px»;
} function getCursorPos(e) { var a, x = 0, y =
0; e = e || window.event; /*get
the x and y positions of the image:*/ a =
img.getBoundingClientRect(); /*calculate the cursor’s x
and y coordinates, relative to the image:*/ x = e.pageX
— a.left; y = e.pageY — a.top;
/*consider any page scrolling:*/ x = x —
window.pageXOffset; y = y — window.pageYOffset;
return {x : x, y : y}; }}
Шаг 4) инициировать эффект масштабирования:
❮ Назад
Дальше ❯
Больше
Fullscreen VideoМодальные коробкиШкалаИндикатор прокруткиСтроки хода выполненияПанель уменийПолзунки диапазонаПодсказкиPopupsСкладнойКалендарьHTML вставкаСписокПогрузчикиЗвездвРейтинг пользователейЭффект наложенияКонтактные фишкиКартыКарточка профиляОповещенияЗаметкиМеткиКругиКупонОтзывчивый текстФиксированный нижний колонтитулЛипкий элементОдинаковая высотаClearfixСнэк-барПрокрутка рисункаЛипкий заголовокТаблица ценПараллаксПропорцииПереключение типа/не нравитсяВключить скрытие/отображениеПереключение текстаПереключение классаДобавить классУдалить классАктивный классУвеличить HoverПереход при наведенииСтрелкиФормыОкно браузераНастраиваемая полоса прокруткиЦвет заполнителяВертикальная линияАнимация значковТаймер обратного отсчетаМашинкуСкоро страницаСообщения чатаРазделить экранОтзывыЦитаты слайд-шоуЗакрываемые элементы спискаТипичные точки останова устройстваПеретаскивание HTML-элементаКнопка спуска на входеJS медиа запросыJS анимацииПолучить элементы IFRAME
Использовать минификацию HTML, CSS и JS
Еще один способ уменьшить код — сократить его. В коде часто остаются комментарии, ненужные фрагменты, разрывы строк, разделители блоков и лишние пробелы, библиотеки JavaScript, которые не используют. Ненужные символы можно удалить, для этого проводят минификацию CSS, JS, HTML-файлов.
Минификация помогает уменьшить размер фрагментов кода JS, она не влияет на сам файл, но оптимизирует его и уменьшает размер, за счет чего повышается скорость загрузки. Файлы, прошедшие минификацию, получают расширение «.min». После минификации в CSS, HTML, JS-файле не будет разделителей, переносов, лишних пробелов, поэтому его будет сложнее читать.
Бесплатные инструменты для минификации CSS, JS, HTML-файлов
Собрали несколько бесплатных онлайн-инструментов для сокращения кода.
- minifycode.comПростой бесплатный онлайн- инструмент для минификации кода HTML, CSS и JavaScript файлов в отдельных полях.
- willpeavy.com/minifierДругой простой инструмент для минификации HTML, CSS или JS в один клик без дополнительных настроек.
- letteros.com/compressor
- Инструмент в два клика сжимает код JS, HTML и CSS, нужно только вставить код в поле и выбрать формат.
- htmlcompressor.comИнструмент позволяет выбрать уровень минификации HTML и встроенного в него кода CSS и JS, отметить расширенные настройки.
- jscompress.comИнструмент для сокращения файлов JS. Можно загружать файл и минифицировать несколько одновременно.
- askapache.com/online-tools/compress-cssИнструмент для быстрой минификации CSS без настроек — загружаете код и получаете результат.
-
csscompressor.com
Инструмент дает установить одну из четырех степеней минификации CSS и размер итогового файла.
Создание адаптивных образов
Шаг 1) добавить HTML:
Пример
<img src=»nature.jpg» alt=»Nature» class=»responsive»>
Шаг 2) добавить CSS:
Если требуется масштабировать изображение как вверх, так и вниз при отклике, задайте для свойства CSS значение 100% и значение Auto:
Пример
.responsive { width: 100%; height: auto;}
Если требуется, чтобы изображение было масштабировано, но никогда не масштабируется до размера, превышающего его исходный размер, используйте :
Пример
.responsive { max-width: 100%; height: auto;}
Если требуется ограничить адаптивный образ максимальным размером, используйте свойство с выбранным пиксельным значением:
Пример
.responsive { width: 100%; max-width:
400px; height: auto;}
Перейдите на наш CSS Images учебник, чтобы узнать больше о том, как стиль изображений.
Перейдите на наш CSS RWD учебник, чтобы узнать больше о отзывчивый веб-дизайна.
❮ Назад
Дальше ❯
Добавление на страницу картинки (используем тег )
Подготовьте и поместите в файл картинки. Для примера, пусть это будет изображение окна браузера — (скачать), которое поместите в нашу обозначенную папку:
Рис. 2. Файл «brauzer.jpg»
Откроем и найдём в нём следующее:
Код 2. Место для вставки картинки
И рядом (или вместо этого кода) добавим HTML подготовленной картинки:
Код 3. Код картинки — тег
Должно получиться следующее:
Рис. 3. Тег картинки в коде
То есть — это необходимый HTML, который нужно разместить на web-странице, чтобы вместо него отобразилась картинка.
Для настройки в основном используют следующие атрибуты:
- — атрибут для указания адреса изображения. Это может быть, как относительный адрес (относительно папки (раздела на сайте)) (как в нашем примере — ), так и абсолютный адрес вашего сайта или любого другого ресурса (например, )
-
и — ширина и, соответственно, высота картинки в пикселях. В я указал оригинальные размеры изображения, но можно указать и меньшие или бо́льшие.
При этом, конечно же, при указании бо́льших размеров, картинка будет терять в качестве, а при задании меньших (если размеры уменьшены не пропорционально) — искажаться, вписываясь в указанные параметры.
Обычно разработчики задают оригинальные размеры, а далее, при необходимости, меняют картинки как угодно с помощью каскадных стилей CSS (стилизацию рассмотрим ).
-
— альтернативное название. Оно отображается вместо картинки, если у пользователя отключен показ графики на страницах, а также воспроизводится многими интернет-читалками (скринридерами).
Кроме того, данный атрибут считывают поисковые системы, чтобы точнее распознавать изображения.
- — всплывающая подсказка при наведении мышью на изображение. Если нет явной необходимости, то данный параметр веб-мастерами часто не используется.
После того как добавили HTML-код изображения (не забыв положить в папку саму картинку), давайте откроем наш файл «index.html» и посмотрим, что получилось:
Рис. 4. Результат вставки изображения (пока без стилизации)
Изменение картинки в графическом редакторе
Изменять размер изображения вы можете в любом графическом редакторе(photoshop, gimp, xnview) и оно автоматически будет меняться на сайте в
соответствии с оригинальными размерами.
Плюсы метода:
Картинка грузится быстрее поскольку не нужно скачивать лишние данные(пиксели), которые будут потом сжаты программно.
Минусы:
Графические редакторы некачественно сжимают картинки менее 200 пикселей по ширине и высоте.
Всегда, когда это возможно и целесообразно старайтесь изменять размер именно в графическом редакторе, чтобы картинки быстрее загружались,
чем при программном изменении. Разница в скорости может составлять десятки раз.
Размеры шрифтов
CSS позволяет не только менять размер текста, но и более тонко настраивать типографику сайта, изменять размер изображений HTML. Изменениям поддаются размер шрифта, его цвет, регистр, начертание, межстрочный интервал и другие характеристики. Тег <font> может задать только размер и значение, умножающее размер по умолчанию, который у разных браузеров отличается.
Чтобы получить абзац со шрифтом 12pt, нужно задать ему свойство font-size:
h3 {
font-size: 24px;
}
Это изменит размер заголовков третьего уровня до 24 пикселей. Можно добавить это свойство к внешней таблице стилей, и это значение будут использовать все заголовки < h3>.
Чтобы применить к тексту дополнительные стили типографики, добавьте следующие CSS-правила:
h3 {
font-size:24px;
color: #000;
font-weight:normal;
}
Это не только установит размер шрифта для заголовков третьего уровня, но и сделает текст черным (о чем говорит hex-код #000), а также установит начертание в значение «normal». По умолчанию, браузеры отображают заголовки h1—h6 в виде полужирного текста. Этот стиль переопределит значение по умолчанию и сделает шрифт нежирным.
Размеры изображений
Не всегда удается задать нужный размер изображений, так как браузер может делать это автоматически. Браузеры не всегда хорошо справляются с этой задачей, отчего сильно страдает качество отображения картинок. Поэтому перед тем, как задать размер изображения в HTML, лучше использовать графические редакторы. А затем прописывать их фактический размер в разметке веб-страницы.
В отличие от шрифтов для определения размера изображений можно использовать как HTML, так и CSS. Используя HTML, размер картинок можно задать только в пикселях. В CSS размеры можно задавать в других величина. Например, в дюймах, сантиметрах и процентах. Если вы хотите, чтобы сайт был с адаптивными картинками, лучше применять процентное значение.
Чтобы задать изображению размер в HTML, используйте тег <img> с атрибутами height и width.
Например, изображение должно иметь размер 400 на 400 пикселей:
height="400" width="400" alt="image" />
Чтобы задать размеры изображения в CSS, используйте свойства height и width. Вот то же изображение, для определения размера которого используется CSS:
style="height:400px; width:400px;" alt="image" />
Размеры основных блоков на странице
Чаще всего для основных блоков на странице задается ширина. Сначала нужно определиться с типом дизайна: статичный или адаптивный. Нужно решить, хотите ли вы задать ширину в абсолютных единицах измерения — пикселях, дюймах, точках? Или же размер блоков должен быть адаптивным, и для определения размеров должны использоваться em или проценты? Чтобы задать размеры основных блоков, как и в случае с HTML изображениями по размеру окна, нужно применять CSS-свойства height и width.
Фиксированная ширина: style=»width:600px;»>
Адаптивная ширина: style=»width:80%;»>
Определяя ширину для основных блоков, следует учитывать, что у пользователей может быть различная ширина окна браузера. Кроме этого, они могут пользоваться мобильными девайсами. Вот почему передовым стандартом являются адаптивные сайты, в которых размеры блоков и других элементов изменяются в зависимости от размеров экрана.
Имитация растянутого фонового изображения на меньшем пространстве
Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или другом элементе веб-страницы. Это сложнее, так как нужно либо использовать абсолютное позиционирование.
- Разместите на странице изображение, которое будет использовано как фон.
- В таблице стилей установите ширину и высоту изображения. Заметьте, что можно подставить проценты, но мне легче использовать значения длины.
img#bg {
width: 20em;
height: 30em;}
- Поместите содержимое в div с id «content», как мы делали раньше.
- Задайте div с содержимым ширину и высоту, соответствующую размерам фонового изображения:
div#content {
width: 20em;
height: 30em;}
После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого z-index, равный 1.
#content {
position: relative;
top: -30em;
z-index: 1;
width: 20em;
height: 30em;}
Свойства background-size и background image HTML широко поддерживаются браузерами, и этот подход, скорее всего, можно расценивать как продукт прошедшей эпохи. Если вы захотите использовать такой подход, обязательно проверьте его в как можно большем количестве браузеров. И если содержимое поменяет размер, нужно будет изменить размеры контейнера и фонового изображения.
Как исправить растянутый экран на Windows 10 и 7
Если появился растянутый экран на Windows 10, как исправить?
Настройки разрешения можно выставлять на свое усмотрение
Может быть так, что установлена операционная система Windows 10, но по каким-то причинам система не дает выбирать разрешение экрана. К примеру, оно не может быть выше 1024×768, то есть предложены только базовые варианты:
- 640×480;
- 800×600;
- 1024×768.
Новая версия Windows 10 дополняется новыми опциями. Нередко в список обновлений попадают графические карты. Иногда случается, что представленные Microsoft утилиты работают некорректно и вынуждают вытянуть изображения, поэтому они передаются видеокартой в недопустимом разрешении. Это происходит, потому что система самостоятельно переустанавливает новый драйвер, заменяя его своим.
Обратите внимание! Особенно ощутимо проблема коснулась обладателей более старых моделей компьютерной техники. После обновления исчезла возможность широкоэкранного разрешения
Растянулся экран: как вернуть обратно Windows 7 в нормальное состояние
Во избежание появления растягивания в первую очередь нужно убрать функцию обновления в автоматическом режиме. Что нужно делать, чтобы избежать перезаписывания программного продукта с официального сайта через центр обновления виндовс:
- Открыть проводник.
- Войти во вкладку «Этот компьютер».
- Из меню выбрать пункт «Свойства».
- Из всплывающего окна «Система» войти во вкладку «Дополнительные параметры системы».
- Войти в пункт «Свойства системы».
- Выбрать пункт «Оборудование».
- Активировать кнопку «Настройки установки устройства».
В появившемся окошке можно выставить характеристики системы. Здесь же показаны драйверы отдельных устройств (например, видеокарты ATI Radeon или NVIDIA GeForce). В этом пункте рекомендуется выбрать параметр «Нет».
Важно! Для активации команды может потребоваться перезапуск системы, с этим следует согласится. Если все шаги пройдены правильно, новый софт автоматически устанавливаться не будет
Далее требуется настроить оборудование, тогда для видеокарты будут доступны все разрешения.
Проще всего восстановить утилиту через диспетчер устройств. Порядок действий:
- Открыть панель управления виндовс 10.
- Перейти в пункт «Оборудование и звук».
- Запустить «Диспетчер устройств».
- Тапнуть на «Графические карты».
Найдя нужную карту, двойным щелчком можно посмотреть детали. Далее следует войти в пункт «Драйвер» и нажать на кнопку «Восстановить драйвер»
Обратите внимание! После завершения процесса переустановки утилиты экран временно станет черным. В дальнейшем можно ожидать его возвращение с корректным разрешением
Если на этом шаге восстановить софт не получается, следует убрать их текущие версии и установку исходных провести вручную. Как установщики подойдут утилиты от AMD либо NVIDIA.
Растянутое изображение на мониторе Windows 7 вернуть к желаемому разрешению можно такими действиями:
- Тапнуть правой клавишей мыши по пустому экрану.
- Из выпадающего меню выбрать вкладку «Разрешение экрана».
- Выставить требуемое разрешение.
- Подтвердить команду кнопкой «Применить».
Важно! При необходимости настроить «Разрешение экрана» можно через «Панель управления». Далее нужно войти поочередно в пункты:
Далее нужно войти поочередно в пункты:
- «Оформление и персонализация».
- «Экран».
- «Настройка разрешения экрана».
Смена пропорции, формата экрана
Выбор желаемого варианта зависит от параметров экрана, вернее от соотношения сторон.
Смена пропорции и формата экрана зависит от версии ОС
Базовых форматов соотношений несколько:
- старые модели ПК имеют соотношение длины к высоте 4:3. В настоящее время такой формат почти не встречается;
- единственное разрешение имеют экраны формата 5:4;
- довольно много техники с экраном 16:10, хотя повсеместным его назвать нельзя;
- актуальным является широкоформатный экран 16:9. Этот формат доминирует в современности. Смена пропорции и формата экрана зависит от версии ОС.
Как исправить растянутый экран на Windows 7, а также на версиях XP, 8:
- Нажать левой кнопкой мыши по рабочему столу.
- Выбрать из меню «Разрешение экрана».
- Определиться с желаемым разрешением.
- Подтвердить установку нажатием на пункт «Применить».
Порядок действий для десятки:
- Открыть «Параметры экрана».
- Тапнуть на «Дополнительные параметры экрана».
- Выбрать желаемое разрешение.
Еще один способ пошагово:
- Открыть «Пуск».
- Перейти в «Параметры».
- Тапнуть на пункт «Система».
- Зайти в «Настройки дисплея».
Подготовим простой шаблон HTML-страницы для вставки в неё графики
Для наглядности сначала создадим каркас HTML-страницы с неким текстом , а затем вставим в неё картинку, после чего уже разберём все параметры и настройки, которые, в основном, используются и могут быть полезны:
Код 1. Базовый каркас HTML-страницы
Информацию далее рассмотрим в виде урока, чтобы поочерёдно раскрыть тему детальнее…
Перед началом выполните следующие подготовительные шаги:
- Создайте, например, на рабочем столе, любую папку, в которой будем работать… Назовём её (скачать готовый результат со всеми исходниками можно ).
- В подготовленной папке создайте файл (справка начинающим ), в который поместите предоставленный в блоке HTML-каркас — это будет наша очень простая web-страница, в текст которой будем вставлять картинки и производить с ними различные настройки.
- Для наглядности, чтобы страница имела небольшой логотип, поместите в эту папку файл с названием (например, этот) (его подгрузка на страницу уже прописана в предоставленном коде).
Итого, мы имеем папку и в ней 2 файла:
Рис. 1. Рабочая папка с файлами
Придание изображению структуры и установка заголовка
Начиная разговор о заголовках, есть множество путей как вы можете добавить заголовок к своему изображению. Для примера, нет ничего, что может вас остановить сделать это таким образом:
Это нормально. Это содержит всё что вам нужно, и красиво стилизуется с помощью CSS. Но, есть проблема: здесь нет ничего, что семантически связывает изображение с его заголовком, и это может вызвать сложности для читателей. Например, когда у вас есть 50 изображений и заголовков, какой заголовок идёт вместе с каким изображением?
Лучшим решением будет использование элементов HTML5 и . Они были созданы исключительно для этой цели: предоставить семантический контейнер для рисунков и чётко связать рисунок с заголовком. Наш пример выше мог бы быть переписан так:
<figure>
<img src="images/dinosaur.jpg"
alt="The head and torso of a dinosaur skeleton;
it has a large head with long sharp teeth"
width="400"
height="341">
<figcaption>A T-Rex on display in the Manchester University Museum.</figcaption>
</figure>
Элемент говорит браузерам и вспомогательной технологии, что заголовок описывает содержимое элемента .
Замечание: С точки зрения доступности, заголовки и имеют различные предназначения. Заголовки помогают даже тем, кто имеет возможность просматривать изображение, тогда как обеспечивает замену функциональности отсутствующего изображения. Таким образом, заголовки и не подразумевают под собой одни и те же вещи, потому что оба используются браузером при отсутствии изображения. Попробуйте отключить изображения в своём браузере, чтобы увидеть как это выглядит.
Тег <figure> не является изображением. Он представляет собой независимый структурный элемент, который:
- Передаёт смысл компактным, интуитивно понятным способом.
- Может использоваться в различных местах страницы.
- Предоставляет ценную информацию, поддерживающую основной текст.
Тег <figure> может быть несколькими изображениями, куском кода, аудио, видео, уравнением, таблицей, либо чем-то другим.
В этом разделе активного изучения мы хотели бы, чтобы вы взяли текст из предыдущего раздела активного изучения и преобразовали его в <figure>:
- Оберните его в элемент.
- Скопируйте текст из атрибута , удалите атрибут , и вбейте текст в элемент .
В случае допущения ошибки, вы всегда можете набрать код повторно, нажав кнопку Reset. Если вы застряли, нажмите кнопку Show solution, чтобы увидеть ответ:
