🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
1440×1019, приемлемо для обычных мониторов, размыто на «ретине»
2800×1982, более чёткая версия для «ретины»
Атрибут srcset используют не только чтобы показать уменьшенную версию картинки на телефоне, но и в обратную сторону — чтобы показать более качественную картинку на больших экранах с высокой плотностью пикселей, при этом не качая лишнего на обычных экранах.
Принцип тот же — в атрибуте указываем альтернативную картинку и подсказываем браузеру её ширину:
<img
src="img-1440×1019.jpg"
srcset="img-2800×1982.jpg 2800w">
Через запятую в атрибуте можно перечислить сразу много вариантов для разных экранов:
<img
src="img-1440×1019.jpg"
srcset="
img-360x255.jpg 360w,
img-720x509.jpg 720w,
img-2800×1982.jpg 2800w">
Другой вопрос — стоит ли заморачиваться и прописывать много вариантов картинок, потому что их придётся подготавливать. В продвинутой разработке варианты картинок создаются автоматически, код для них генерируется. В ручной вёрстке поддерживать больше пары версий картинок тяжело и обычно нецелесообразно.
Марк Шагал. Над городом. 1918
1440×1019, приемлемо для обычных мониторов, размыто на «ретине»
2800×1982, более чёткая версия для «ретины»
Атрибут srcset используют не только чтобы показать уменьшенную версию картинки на телефоне, но и в обратную сторону — чтобы показать более качественную картинку на больших экранах с высокой плотностью пикселей, при этом не качая лишнего на обычных экранах.
Принцип тот же — в атрибуте указываем альтернативную картинку и подсказываем браузеру её ширину:
<img
src="1440.jpg"
srcset="2800.jpg 2800w">
Через запятую в атрибуте можно перечислить сразу много вариантов для разных экранов:
<img
src="1440.jpg"
srcset="
360.jpg 360w,
720.jpg 720w,
2800.jpg 2800w">
Другой вопрос — стоит ли заморачиваться и прописывать много вариантов картинок, потому что их придётся подготавливать. В продвинутой разработке варианты картинок создаются автоматически, код для них генерируется. В ручной вёрстке поддерживать больше пары версий картинок тяжело и обычно нецелесообразно.
Марк Шагал. Над городом. 1918
Пока img с атрибутом srcset всегда занимает 100% ширины экрана, всё работает отлично, браузер знает ширину экрана и подберёт под неё оптимальную картинку из имеющихся в src и srcset.
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w">
Но допустим, картинка на широком экране занимает половину ширины:
img {
width: 100%;
}
@media (width > 960px) {
img {
width: 50%;
}
}
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w">
Браузер на момент выбора картинки не знает ширину img в вёрстке — выбор происходит до построения страницы. Поэтому и в этом случае он выберет картинку под всю ширину экрана.
Подскажем браузеру возможные размеры элемента в атрибуте sizes. В конце — размер по умолчанию, используется, если ни одно условие выше не удовлетворено.
img {
width: 100%;
}
@media (width > 960px) {
img {
width: 50%;
}
}
<!-- Проще всего взять медиавыражение из ЦСС, которое определяет ширину картинки, и перенести значения в sizes, заменяя проценты на vw -->
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w"
sizes="
(width > 960px) 50vw,
100vw">
Теперь браузер знает, что картинка на компьютере занимает половину ширины и выберет оптимальную картинку. Если размеров много, следите за их порядком, браузер выберет первое сработавшее условие и не пойдёт дальше.
Адаптивные картинки, srcset
Медиавыражения
Атрибут sizes. МДН
Ширина экрана 375, оптимальная картинка из имеющихся — img‑1000
1400, оптимальная картинка — img‑1440
Ширина экрана 375, оптимальная картинка из имеющихся — img‑1000
1400, но картинка занимает только половину, img‑1400 избыточно, достаточно img‑1000
Ширина экрана 375, оптимальная картинка из имеющихся — img‑1000
1400, браузер знает, что картинка занимает половину и правильно выбирает оптимальную картинку — img‑1000
На ширине 1440 оптимальная картинка из имеющихся — 1400.jpg, на ширине 375 — 1000.jpg
Но если картинка занимает только половину, то 1400.jpg избыточно, достаточно 1000.jpg
Когда браузер знает, что картинка занимает половину, то правильно выбирает оптимальную картинку — 1000.jpg
Пока img с атрибутом srcset всегда занимает 100% ширины экрана, всё работает отлично, браузер знает ширину экрана и подберёт под неё оптимальную картинку из имеющихся в src и srcset.
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w">
Но допустим, картинка на широком экране занимает половину ширины:
img {
width: 100%;
}
@media (width > 960px) {
img {
width: 50%;
}
}
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w">
Браузер на момент выбора картинки не знает ширину img в вёрстке — выбор происходит до построения страницы. Поэтому и в этом случае он выберет картинку под всю ширину экрана.
Подскажем браузеру возможные размеры элемента в атрибуте sizes. В конце — размер по умолчанию, используется, если ни одно условие выше не удовлетворено.
img {
width: 100%;
}
@media (width > 960px) {
img {
width: 50%;
}
}
<!-- Проще всего взять медиавыражение из ЦСС, которое определяет ширину картинки, и перенести значения в sizes, заменяя проценты на vw -->
<img
src="img-1000.jpg"
srcset="img-1400.jpg 1400w"
sizes="
(width > 960px) 50vw,
100vw">
Теперь браузер знает, что картинка на компьютере занимает половину ширины и выберет оптимальную картинку. Если размеров много, следите за их порядком, браузер выберет первое сработавшее условие и не пойдёт дальше.
Адаптивные картинки, srcset
Медиавыражения
Атрибут sizes. МДН
Адаптивные картинки, picture
Если атрибут srcset подсказывает браузеру, какую картинку выбрать, то тег picture явно указывает, какую картинку выбрать. Обычно srcset используют для оптимизации, а picture — для работы с внешним видом страницы.
Покажем разные по формату банеры на разных размерах окна:
<picture>
<source
srcset="banner-wide.jpg"
media="(width >= 1440px)"
>
<source
srcset="banner.jpg"
media="(width > 768px)"
>
<!-- Если ни одно условие выше не выполняется -->
<img src="banner-square.jpg">
</picture>
Элемент picture. МДН
При ширине окна от 1440 пк
768—1399 пк
При другой ширине
Адаптивные картинки, picture
Если атрибут srcset подсказывает браузеру, какую картинку выбрать, то тег picture явно указывает, какую картинку выбрать. Обычно srcset используют для оптимизации, а picture — для работы с внешним видом страницы.
Покажем разные по формату банеры на разных размерах окна:
<picture>
<source
srcset="banner-wide.jpg"
media="(width >= 1440px)"
>
<source
srcset="banner.jpg"
media="(width > 768px)"
>
<!-- Если ни одно условие выше не выполняется -->
<img src="banner-square.jpg">
</picture>
Элемент picture. МДН
При ширине окна от 1440 пк
768—1399 пк
768—1399 пк
В продвинутой разработке создание адаптивных картинок автоматизируют: программа генерирует весь код и нужные версии самих картинок.
Ручное описание и поддержка srcset или picture требует много времени и внимания, большой шанс что‑то упустить или ошибиться. Поэтому советуем при ручной вёрстке не стремиться сделать все картинки максимально адаптивными, а ограничиться точечными оптимизациями самой тяжёлой графики.
Удобный и эффективный инструмент оптимизации картинок при ручной вёрстке — программа ImageOptim. Она заметно уменьшает размер картинок без потери качества и этим ускоряет загрузку страницы на всех устройствах.
Перетащите папку с вёрсткой внутрь программы, она сама найдёт и оптимизирует все картинки внутри папки
В продвинутой разработке создание адаптивных картинок автоматизируют: программа генерирует весь код и нужные версии самих картинок.
Ручное описание и поддержка srcset или picture требует много времени и внимания, большой шанс что‑то упустить или ошибиться. Поэтому советуем при ручной вёрстке не стремиться сделать все картинки максимально адаптивными, а ограничиться точечными оптимизациями самой тяжёлой графики.
Удобный и эффективный инструмент оптимизации картинок при ручной вёрстке — программа ImageOptim. Она заметно уменьшает размер картинок без потери качества и этим ускоряет загрузку страницы на всех устройствах.
Перетащите папку с вёрсткой внутрь программы, она сама найдёт и оптимизирует все картинки внутри папки
Тест
Какое ЦСС‑правило включит гриды для элемента?
position: grid;
display: grid;
display: grid-columns;
display: rows-cols;
grid-template-rows: auto;
grid-columns: 1fr 1fr;
Выберите верные утверждения о гридах.
Внутри грид‑контейнера определяются направляющие, формируя колонки и строки, — ячейки, грид‑элементы распределяются по этим ячейкам. Размеры колонок и строк могут быть не строгими
Какой вид раскладки применится в приведённом коде и почему?
.box {
display: flex;
display: grid;
}
При конфликте в ЦСС применяются стили, объявленные ниже, кроме случаев, когда у стилей выше большая специфичность
Конфликты стилей
Гриды, потому что это более современный вид раскладки
Гриды, потому что свойство с ними объявлено ниже
Флексбокс, потому что свойство объявлено выше
Флексбокс, потому что это наиболее поддерживаемый и распространённый вид раскладки
Не применятся ни гриды, ни флексбоксы, потому что произойдёт конфликт свойства
Применятся и гриды и флексбоксы по принципу каскада
За что отвечает свойство grid-auto-flow?
autoПо умолчанию элементы заполняют грид‑контейнер ряд за рядом, а если указать grid‑auto‑flow: column — начнут заполнять колонку за колонкой, сверху вниз
grid‑auto‑flow
grid-template-columns: 1fr 1fr;
grid-template-columns: 2fr 2fr;
grid-template-columns: 1fr auto;
grid-template-columns: auto;
grid-template-columns: equal;
grid-template: equal;
Какой код заставит две грид‑колонки равномерно растянуться и занять всё доступное пространство?
Чтобы равномерно растянуть несколько колонок, укажите им одинаковые размеры в fr
Что рекомендуют авторы книги при выборе между флексбоксами и гридами?
Авторы советуют выбирать инструмент, более подходящий для каждой конкретной задачи
Где использовать гриды, а где флексбоксы
К чему может привести указание размеров элемента в пикселях?
Элемент не влезет в экран, если будет больше него по размеру
Содержимое элемента может переполнить его и обрезаться
Произойдёт синтаксическая ошибка и остановка применения дальнейших стилей
Элемент станет труднее переиспользовать
Размеры в пикселях лишают элемент адаптивности, мешают его переиспользовать. Иногда это не критично, но обычно размеры в пикселях создают проблемы и усложняют работу с вёрсткой
Как работает свойство overflow?
Что такое медиавыражение?
Медиавыражение — это указание предпочтительного формата отображения страницы, например без мобильной версии
Медиавыражение — это набор стилей, применяющиеся при соблюдении условий, связанных с форматом отображения, настройкой оформления или устройством пользователя
Медиавыражение — это особое представление страницы в виде превью для рассылок, социальных сетей и медиаплатформ
чтобы узнать результат.
Тест
Какое ЦСС‑правило включит гриды для элемента?
position: grid;
display: grid;
display: grid-columns;
display: rows-cols;
grid-template-rows: auto;
grid-columns: 1fr 1fr;
Выберите верные утверждения о гридах.
Внутри грид‑контейнера определяются направляющие, формируя колонки и строки, — ячейки, грид‑элементы распределяются по этим ячейкам. Размеры колонок и строк могут быть не строгими
Какой вид раскладки применится в приведённом коде и почему?
.box {
display: flex;
display: grid;
}
При конфликте в ЦСС применяются стили, объявленные ниже, кроме случаев, когда у стилей выше большая специфичность
Конфликты стилей
Гриды, потому что это более современный вид раскладки
Гриды, потому что свойство с ними объявлено ниже
Флексбокс, потому что свойство объявлено выше
Флексбокс, потому что это наиболее поддерживаемый и распространённый вид раскладки
Не применятся ни гриды, ни флексбоксы, потому что произойдёт конфликт свойства
Применятся и гриды и флексбоксы по принципу каскада
За что отвечает свойство grid-auto-flow?
autoПо умолчанию элементы заполняют грид‑контейнер ряд за рядом, а если указать grid‑auto‑flow: column — начнут заполнять колонку за колонкой, сверху вниз
grid‑auto‑flow
grid-template-columns: 1fr 1fr;
grid-template-columns: 2fr 2fr;
grid-template-columns: 1fr auto;
grid-template-columns: auto;
grid-template-columns: equal;
grid-template: equal;
Какой код заставит две грид‑колонки равномерно растянуться и занять всё доступное пространство?
Чтобы равномерно растянуть несколько колонок, укажите им одинаковые размеры в fr
Что рекомендуют авторы книги при выборе между флексбоксами и гридами?
Авторы советуют выбирать инструмент, более подходящий для каждой конкретной задачи
Где использовать гриды, а где флексбоксы
К чему может привести указание размеров элемента в пикселях?
Элемент не влезет в экран, если будет больше него по размеру
Содержимое элемента может переполнить его и обрезаться
Произойдёт синтаксическая ошибка и остановка применения дальнейших стилей
Элемент станет труднее переиспользовать
Размеры в пикселях лишают элемент адаптивности, мешают его переиспользовать. Иногда это не критично, но обычно размеры в пикселях создают проблемы и усложняют работу с вёрсткой
Как работает свойство overflow?
Что такое медиавыражение?
Медиавыражение — это указание предпочтительного формата отображения страницы, например без мобильной версии
Медиавыражение — это набор стилей, применяющиеся при соблюдении условий, связанных с форматом отображения, настройкой оформления или устройством пользователя
Медиавыражение — это особое представление страницы в виде превью для рассылок, социальных сетей и медиаплатформ