🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру

Удобно листать не только прокруткой, но и клавишами‑стрелками:

 
между важными местами
Shift
между
разворотами
Васи­лий Полов­нёв, Игорь Пет­ров

ХТМЛ.
Вёрстка сайтов

Изда­тель­ство Бюро Гор­бу­нова
2021
Василий Половнёв, Игорь Петров

ХТМЛ.
Вёрстка сайтов

Издательство Бюро Горбунова
2021
удк 004.42
ббк З973.42
П52
Васи­лий Полов­нёв, Игорь Пет­ров
П52
ХТМЛ. Вёрстка сай­тов для дизай­не­ров, редак­то­ров и руко­во­ди­те­лей.—
М.: Изд‑во Бюро Гор­бу­нова, 2021

Эта книга — поша­го­вая инструк­ция по вёрстке сай­тов на язы­ках ХТМЛ и ЦСС. Вы узна­ете не только как свер­стать сайт, но и как опуб­ли­ко­вать его в интер­нете, настро­ить кра­си­вый шаринг в соц­сети и под­клю­чить системы аналитики.

Отдель­ный раз­дел книги посвя­щён работе с вер­сталь­щи­ком: как ста­вить задачи, полу­чать пред­ска­зу­е­мый резуль­тат и пра­вильно при­ни­мать и внед­рять вёрстку.

ISBN 978‑5‑6041630‑9‑2
© Бюро Гор­бу­нова

Оглавление

    Зна­ком­ство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Кон­троль качества

    Публикация

    Как рабо­тать с верстальщиком

удк 004.42
ббк З973.42
П52
П52
Василий Половнёв, Игорь Петров
ХТМЛ. Вёрстка сайтов для дизайнеров, редакторов и руководителей.—
М.: Изд‑во Бюро Горбунова, 2021

Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.

Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.

ISBN 978‑5‑6041630‑9‑2
© Бюро Горбунова

Оглавление

    Знакомство с ХТМЛ и ЦСС 

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

    Контроль качества

    Публикация

    Как работать с верстальщиком

Скрыто 147 разворотов

Проверка размеров экрана

@media (width <= 960px) { 
  /* Ширина экрана до 960 пк включительно */
}

@media (max-width: 960px) { 
  /* То же, что в предыдущем примере */
}

@media (height > 768px) { 
  /* Высота экрана от 768 пк */
}

Проверка отношения сторон экрана

@media (orientation: landscape) {
  /* Ширина экрана больше высоты, наоборот — portrait */
}

@media screen and (max-aspect-ratio: 16 / 9) {
  /* Пропорция экрана до 16:9 */
}

@media screen and (min-aspect-ratio: 16 / 10) {
  /* Пропорция экрана от 16:10 */
}

Проверка настроек темы оформления

@media (prefers-color-scheme: dark) {
  /* На устройстве включена тёмная тема */
}

Проверка возможности наведения

@media (hover: hover) {
  /* На устройстве возможно наведение. Например, это компьютер с мышью или тачпадом, но не смартфон */
}

Комплексные проверки

Несколько усло­вий пере­чис­ляют через and.

@media (orientation: landscape) and (max-width: 767px) {
  /* Горизонтальный экран до 768 пк */
}

@media (orientation: landscape) and (960px <= width <= 1024px) {
  /* Горизонтальный экран на диапазоне ширины 960—1024 пк ширины включительно */
}

Медиа­вы­ра­же­ния поз­во­ляют про­ве­рить не только раз­мер экрана, но и усло­вия фор­мата, настройки оформ­ле­ния или устрой­ства пользователя.

Проверка размеров экрана

@media (width <= 960px) { 
  /* Ширина экрана до 960 пк включительно */
}

@media (max-width: 960px) { 
  /* То же, что в предыдущем примере */
}

@media (height > 768px) { 
  /* Высота экрана от 768 пк */
}

Проверка отношения сторон экрана

@media (orientation: landscape) {
  /* Ширина экрана больше высоты, наоборот — portrait */
}

@media screen and (max-aspect-ratio: 16 / 9) {
  /* Пропорция экрана до 16:9 */
}

@media screen and (min-aspect-ratio: 16 / 10) {
  /* Пропорция экрана от 16:10 */
}

Проверка настроек темы оформления

@media (prefers-color-scheme: dark) {
  /* На устройстве включена тёмная тема */
}

Проверка возможности наведения

@media (hover: hover) {
  /* На устройстве возможно наведение. Например, это компьютер с мышью или тачпадом, но не смартфон */
}

Комплексные проверки

Несколько условий перечисляют через and.

@media (orientation: landscape) and (max-width: 767px) {
  /* Горизонтальный экран до 768 пк */
}

@media (orientation: landscape) and (960px <= width <= 1024px) {
  /* Горизонтальный экран на диапазоне ширины 960—1024 пк ширины включительно */
}

Медиавыражения позволяют проверить не только размер экрана, но и условия формата, настройки оформления или устройства пользователя.

Адаптивные картинки, srcset

Чтобы уско­рить загрузку стра­ницы на теле­фоне, можно пока­зы­вать умень­шен­ные вер­сии картинок.

Раз­ница между кар­тин­ками шири­ной 1440 и 600 пк на неболь­шом экране теле­фона не так заметна. Зато умень­шен­ная кар­тинка гораздо меньше весит и быст­рее загру­зится. Чем больше на стра­нице кар­ти­нок, тем замет­нее будет эффект от такой оптимизации.

В базо­вой записи img одна кар­тинка из src исполь­зу­ется на всех раз­ме­рах экрана:

<img src="img-1440×1849.jpg">

Доба­вим аль­тер­на­тив­ную умень­шен­ную кар­тинку в атри­бут srcset, после назва­ния обя­за­тельно ука­зать её ширину в пик­се­лях с бук­вой w (width):

<img 
  src="img-1440×1849.jpg" 
  srcset="img-600×770.jpg 600w">

Это экви­ва­лентно такой записи, потому что srcset — это все вари­анты картинки:

<img 
  src="img-1440×1849.jpg" 
  srcset="
    img-1440×1849.jpg 1440w,
    img-600×770.jpg 600w">

Но поскольку один из вари­ан­тов уже ука­зан в обя­за­тель­ном атри­буте src, его можно не писать в srcset.

Бра­у­зер в самом начале загрузки стра­ницы умно­жит ширину экрана поль­зо­ва­теля на его плот­ность пик­се­лей и выбе­рет кар­тинку опти­маль­ной ширины для загрузки. В нашем слу­чае, если ширина × плот­ность пик­се­лей больше 600, исполь­зу­ется кар­тинка из src, иначе — умень­шен­ная картинка.

Поскольку бра­у­зеру нужно зара­нее выбрать, какую кар­тинку вообще качать, он не может сам понять ширину кар­ти­нок, ведь для этого их нужно ска­чать. Поэтому нам и нужно под­ска­зать бра­у­зеру ширину аль­тер­на­тив­ных кар­ти­нок в src.

Атрибут srcset. МДН

Иллюстрации 

Марк Шагал. Я и деревня. 1911

1440×1849, 917 КБ

600×770, 135 КБ

1440×1849, 917 КБ

600×770, 135 КБ

Адаптивные картинки, srcset

Чтобы ускорить загрузку страницы на телефоне, можно показывать уменьшенные версии картинок.

Разница между картинками шириной 1440 и 600 пк на небольшом экране телефона не так заметна. Зато уменьшенная картинка гораздо меньше весит и быстрее загрузится. Чем больше на странице картинок, тем заметнее будет эффект от такой оптимизации.

В базовой записи img одна картинка из src используется на всех размерах экрана:

<img src="img-1440×1849.jpg">

Добавим альтернативную уменьшенную картинку в атрибут srcset, после названия обязательно указать её ширину в пикселях с буквой w (width):

<img 
  src="img-1440×1849.jpg" 
  srcset="img-600×770.jpg 600w">

Это эквивалентно такой записи, потому что srcset — это все варианты картинки:

<img 
  src="img-1440×1849.jpg" 
  srcset="
    img-1440×1849.jpg 1440w,
    img-600×770.jpg 600w">

Но поскольку один из вариантов уже указан в обязательном атрибуте src, его можно не писать в srcset.

Браузер в самом начале загрузки страницы умножит ширину экрана пользователя на его плотность пикселей и выберет картинку оптимальной ширины для загрузки. В нашем случае, если ширина × плотность пикселей больше 600, используется картинка из src, иначе — уменьшенная картинка.

Поскольку браузеру нужно заранее выбрать, какую картинку вообще качать, он не может сам понять ширину картинок, ведь для этого их нужно скачать. Поэтому нам и нужно подсказать браузеру ширину альтернативных картинок в src.

Атрибут srcset. МДН

Иллюстрации 

Марк Шагал. Я и деревня. 1911

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. МДН

img‑1000.jpg

Ширина экрана 375, оптимальная картинка из имеющихся — img‑1000

img‑1400.jpg

1400, оптимальная картинка — img‑1440

img‑1000.jpg

Ширина экрана 375, оптимальная картинка из имеющихся — img‑1000

img‑1400.jpg

1400, но картинка занимает только половину, img‑1400 избыточно, достаточно img‑1000

img‑1000.jpg

Ширина экрана 375, оптимальная картинка из имеющихся — img‑1000

img‑1000.jpg

1400, браузер знает, что картинка занимает половину и правильно выбирает оптимальную картинку — img‑1000

1400.jpg
1000.jpg

На ширине 1440 оптимальная картинка из имеющихся — 1400.jpg, на ширине 375 — 1000.jpg

1400.jpg
1000.jpg

Но если картинка занимает только половину, то 1400.jpg избыточно, достаточно 1000.jpg

1000.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>

При ширине окна от 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>

При ширине окна от 1440 пк

768⁠—1399 пк

768⁠—1399 пк

Скрыто 68 разворотов
Закладки
Добавьте закладки
Ничего не нашлось