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

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

 
между важными местами
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
© Бюро Горбунова

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Бутерброд

Самая рас­про­стра­нён­ная струк­тура интер­ак­тив­ной ста­тьи — «бутер­брод», в кото­ром модули рас­по­ло­жены сло­ями, или эта­жами, друг под другом.

Обычно для ста­тьи доста­точно двух видов слоёв: с огра­ни­чен­ной шири­ной для тек­ста и на всю ширину для обложки, гра­фики и дру­гих пере­би­вок. Слои — уни­вер­саль­ные кон­тей­неры для чего угодно: кар­ти­нок, тек­ста и даже дру­гих слоёв.

.layer {
  max-width: 768px;
  margin: 0 auto;
}

.layer.fullWidth {
  max-width: none;
}

.layer + .layer {
  margin-top: 72px;
}

<div class="layer fullWidth">
  <img src="cover.jpg" alt="…">
</div>

<div class="layer">
  <p>…</p>
  <p>…</p>
</div>

<div class="layer">
  <figure class="image">
    <img src="…" alt="…">
    <figcaption>…</figcaption>
  </figure>
</div>

<div class="layer">
  <p>…</p>
</div>

Иллюстрация с подписью 

Бутерброд

Самая распространённая структура интерактивной статьи — «бутерброд», в котором модули расположены слоями, или этажами, друг под другом.

Обычно для статьи достаточно двух видов слоёв: с ограниченной шириной для текста и на всю ширину для обложки, графики и других перебивок. Слои — универсальные контейнеры для чего угодно: картинок, текста и даже других слоёв.

.layer {
  max-width: 768px;
  margin: 0 auto;
}

.layer.fullWidth {
  max-width: none;
}

.layer + .layer {
  margin-top: 72px;
}

<div class="layer fullWidth">
  <img src="cover.jpg" alt="…">
</div>

<div class="layer">
  <p>…</p>
  <p>…</p>
</div>

<div class="layer">
  <figure class="image">
    <img src="…" alt="…">
    <figcaption>…</figcaption>
  </figure>
</div>

<div class="layer">
  <p>…</p>
</div>

Иллюстрация с подписью 

Фоторама

Фото­рама — это гале­рея фото­гра­фий с одной круп­ной фото­гра­фией и воз­мож­но­стью про­ли­сты­ва­ния и выбора дру­гих фото­гра­фий по превьюшкам.

В ХТМЛ нет спе­ци­аль­ных тегов для вёрстки фото­рамы, для этого исполь­зуют Яваскрипт‑библиотеки.

Сове­туем биб­лио­теку «Фото­рама» Артёма Поли­кар­пова. Она под­клю­ча­ется в одно дви­же­ние, акку­ратно выгля­дит, умеет откры­вать фото на весь экран и под­дер­жи­вает видео.

Ска­чайте архив с сайта «Фото­рамы», рас­па­куйте файлы рядом с вашей вёрст­кой и добавьте код в head: 

<!-- Вспомогательные библиотеки, подключаем из интернета, но можно скачать и тоже держать рядом с вёрсткой -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="./fotorama.css" rel="stylesheet">
<script src="./fotorama.js">
</script>

Затем в нуж­ном месте стра­ницы обер­ните кар­тинки в эле­мент с клас­сом fotorama. Атри­бу­тами по жела­нию вклю­чите инфор­ма­тив­ные пре­вьюшки и воз­мож­ность раз­во­ра­чи­вать фото на весь экран. Инструк­ции на сайте помо­гут настро­ить дизайн и пове­де­ние «Фоторамы».

<div class="fotorama"
  data-allowfullscreen="true"
  data-nav="thumbs"
  data-thumbwidth="160px"
  data-thumbheight="90px">

  <img src="./house-1.jpg">
  <img src="./house-2.jpg">
  <img src="./house-3.jpg">
  <img src="./house-4.jpg">
  <img src="./house-5.jpg">
</div>

Fotorama

Фоторама

Фоторама — это галерея фотографий с одной крупной фотографией и возможностью пролистывания и выбора других фотографий по превьюшкам.

В ХТМЛ нет специальных тегов для вёрстки фоторамы, для этого используют Яваскрипт‑библиотеки.

Советуем библиотеку «Фоторама» Артёма Поликарпова. Она подключается в одно движение, аккуратно выглядит, умеет открывать фото на весь экран и поддерживает видео.

Скачайте архив с сайта «Фоторамы», распакуйте файлы рядом с вашей вёрсткой и добавьте код в head: 

<!-- Вспомогательные библиотеки, подключаем из интернета, но можно скачать и тоже держать рядом с вёрсткой -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link href="./fotorama.css" rel="stylesheet">
<script src="./fotorama.js">
</script>

Затем в нужном месте страницы оберните картинки в элемент с классом fotorama. Атрибутами по желанию включите информативные превьюшки и возможность разворачивать фото на весь экран. Инструкции на сайте помогут настроить дизайн и поведение «Фоторамы».

<div class="fotorama"
  data-allowfullscreen="true"
  data-nav="thumbs"
  data-thumbwidth="160px"
  data-thumbheight="90px">

  <img src="./house-1.jpg">
  <img src="./house-2.jpg">
  <img src="./house-3.jpg">
  <img src="./house-4.jpg">
  <img src="./house-5.jpg">
</div>

Fotorama

Плееры видеохостингов умеют запоминать позицию, настраивать субтитры и скорость просмотра

Видео

Самый про­стой спо­соб доба­вить видео на стра­ницу — загру­зить на видео­хо­стинг (Ютуб, ВК, Вимео) и встро­ить оттуда.

Так вы не замо­ра­чи­ва­е­тесь с хра­не­нием видео, полу­ча­ете про­дви­ну­тый плеер, а глав­ное — пото­ко­вое вос­про­из­ве­де­ние: видео можно начать смот­реть с любого места, не дожи­да­ясь пол­ной загрузки. Это осо­бенно полезно для длин­ных лек­ций или новостей.

Минус видео­хо­стин­гов — видео хра­нится не у вас. Хостинг может вдруг закрыться или уда­лить ваши видео, хра­ните резерв­ные копии на чёр­ный день.

Прин­цип встра­и­ва­ния похож у раз­ных хостин­гов: нажмите «Поде­литься» на стра­нице видео и най­дите код встра­и­ва­ния, обычно это тег iframe. Тег iframe встра­и­вает на стра­ницу кусо­чек дру­гого сайта, в нашем слу­чае — видеоплеер:

<!-- Уберите из кода встраивания атрибуты width и height, если хотите задать размеры в ЦСС -->
<iframe class="vkVideo" src="https://vk.com/video_ext.php?oid=-113157690&id=456239826&hd=2" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe>

.vkVideo {
  aspect-ratio: 16/9;
}

Плееры видеохостингов умеют запоминать позицию, настраивать субтитры и скорость просмотра

Видео

Самый простой способ добавить видео на страницу — загрузить на видеохостинг (Ютуб, ВК, Вимео) и встроить оттуда.

Так вы не заморачиваетесь с хранением видео, получаете продвинутый плеер, а главное — потоковое воспроизведение: видео можно начать смотреть с любого места, не дожидаясь полной загрузки. Это особенно полезно для длинных лекций или новостей.

Минус видеохостингов — видео хранится не у вас. Хостинг может вдруг закрыться или удалить ваши видео, храните резервные копии на чёрный день.

Принцип встраивания похож у разных хостингов: нажмите «Поделиться» на странице видео и найдите код встраивания, обычно это тег iframe. Тег iframe встраивает на страницу кусочек другого сайта, в нашем случае — видеоплеер:

<!-- Уберите из кода встраивания атрибуты width и height, если хотите задать размеры в ЦСС -->
<iframe class="vkVideo" src="https://vk.com/video_ext.php?oid=-113157690&id=456239826&hd=2" width="853" height="480" allow="autoplay; encrypted-media; fullscreen; picture-in-picture; screen-wake-lock;" frameborder="0" allowfullscreen></iframe>

.vkVideo {
  aspect-ratio: 16/9;
}

Видео­файл можно раз­ме­стить в фай­лах вашего сайта и под­клю­чать вруч­ную тегом video:

<!-- poster — путь до обложки, которая будет видна, пока видео не включат, controls — включает элементы управления плеером -->
<video 
  class="video" 
  src="./videos/rickroll.mp4" 
  poster="./videos/rickroll-preview.jpg"
  controls
></video>

.video {
  width: 100%;
  aspect-ratio: 4/3.15;
  /* Заклинание для масштабирования видео под любые размеры тега */
  object-fit: cover;
  object-position: center;
}

С руч­ным под­клю­че­нием много заморочек.

Хотя базо­вый при­мер кода выгля­дит про­сто, он плохо подой­дёт для сай­тов с боль­шой посе­ща­е­мо­стью. По‑хоро­шему, видео­файлы надо осо­бым обра­зом опти­ми­зи­ро­вать и гото­вить в несколь­ких фор­ма­тах, писать много допол­ни­тель­ного кода, чтобы видео не тор­мо­зило и ста­бильно рабо­тало на раз­ных устрой­ствах и браузерах.

При про­иг­ры­ва­нии из файла не обес­пе­чить пото­ко­вое вос­про­из­ве­де­ние без про­грам­ми­ро­ва­ния или под­клю­че­ния сер­ви­сов стри­минга — не полу­чится быстро начать про­смотр с любого места. В стан­дарт­ном пле­ере мини­мум функ­ций. В таком «сыром» виде, это не слиш­ком удобно зрителю.

Ещё видео­файлы при­дётся хра­нить в фай­лах сайта на сер­вере. Место на сер­вере плат­ное, хра­не­ние тяжё­лых фай­лов вле­тит в копеечку.

Руч­ное под­клю­че­ние подой­дёт для кро­шеч­ных видео, вроде неслож­ного ани­ми­ро­ван­ного фона. Или когда кри­ти­че­ски важно хра­нить видео у себя и все­гда иметь к нему доступ, и вы готовы ради этого замо­ро­читься или закрыть глаза на пере­чис­лен­ные недостатки.

Видеофайл можно разместить в файлах вашего сайта и подключать вручную тегом video:

<!-- poster — путь до обложки, которая будет видна, пока видео не включат, controls — включает элементы управления плеером -->
<video 
  class="video" 
  src="./videos/rickroll.mp4" 
  poster="./videos/rickroll-preview.jpg"
  controls
></video>

.video {
  width: 100%;
  aspect-ratio: 4/3.15;
  /* Заклинание для масштабирования видео под любые размеры тега */
  object-fit: cover;
  object-position: center;
}

С ручным подключением много заморочек.

Хотя базовый пример кода выглядит просто, он плохо подойдёт для сайтов с большой посещаемостью. По‑хорошему, видеофайлы надо особым образом оптимизировать и готовить в нескольких форматах, писать много дополнительного кода, чтобы видео не тормозило и стабильно работало на разных устройствах и браузерах.

При проигрывании из файла не обеспечить потоковое воспроизведение без программирования или подключения сервисов стриминга — не получится быстро начать просмотр с любого места. В стандартном плеере минимум функций. В таком «сыром» виде, это не слишком удобно зрителю.

Ещё видеофайлы придётся хранить в файлах сайта на сервере. Место на сервере платное, хранение тяжёлых файлов влетит в копеечку.

Ручное подключение подойдёт для крошечных видео, вроде несложного анимированного фона. Или когда критически важно хранить видео у себя и всегда иметь к нему доступ, и вы готовы ради этого заморочиться или закрыть глаза на перечисленные недостатки.

Неболь­шие зацик­лен­ные видео часто исполь­зуют как деко­ра­цию или инте­рес­ное превью.

Вклю­чите авто­вос­про­из­ве­де­ние атри­бу­том autoplay. Он рабо­тает только в связке с muted, уби­ра­ю­щим звук — так бра­у­зеры защи­щают чита­те­лей от назой­ли­вых видео. Атри­бут loop зацик­лит видео. Затем пози­ци­о­ни­рйте, в зави­си­мо­сти от задачи.

Настро­ить подоб­ное пове­де­ние можно и для айфрейма видео­хо­стинга, акту­аль­ные инструк­ции по атри­бу­там лучше поис­кать в интер­нете, они ино­гда меняются.

<div class="hero">
  <!-- Видео должно весить до пары мегабайт, чтобы не тормозить загрузку страницы -->
  <video class="hero__bg" src="./nggyu.mp4" autoplay muted loop></video>

  <div class="heroText">
    <h1>Рикрол</h1>
    <p>…</p>
  </div>
</div>

.hero {
  position: relative;
  aspect-ratio: 16/8;
}

.heroBg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Видео лучше отключить кликабельность */
  pointer-events: none;
}

.heroText {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 10%;
  translate: -50% 0;
}

Позиционирование 

Рикролл

От анонимных форумов до мировой известности. Полная история легендарного мема в лонгриде Арины Черновой

В интер­нет‑куль­туре мно­же­ство мемов, но лишь немно­гие из них смогли выйти за пре­делы экра­нов и стать частью повсе­днев­ной жизни. Один из таких фено­ме­нов — рикрол­линг, розыг­рыш, кото­рый начался на ано­ним­ном ими­дж­борде 4chan и пре­вра­тился в гло­баль­ное явле­ние. Рикрол­линг стал одним из пер­вых мемов, достиг­ших все­мир­ной популярности.

Рикролл

От анонимных форумов до мировой известности. Полная история легендарного мема в лонгриде Арины Черновой

В интернет‑культуре множество мемов, но лишь немногие из них смогли выйти за пределы экранов и стать частью повседневной жизни. Один из таких феноменов — рикроллинг, розыгрыш, который начался на анонимном имиджборде 4chan и превратился в глобальное явление. Рикроллинг стал одним из первых мемов, достигших всемирной популярности.

Небольшие зацикленные видео часто используют как декорацию или интересное превью.

Включите автовоспроизведение атрибутом autoplay. Он работает только в связке с muted, убирающим звук — так браузеры защищают читателей от назойливых видео. Атрибут loop зациклит видео. Затем позиционирйте, в зависимости от задачи.

Настроить подобное поведение можно и для айфрейма видеохостинга, актуальные инструкции по атрибутам лучше поискать в интернете, они иногда меняются.

<div class="hero">
  <!-- Видео должно весить до пары мегабайт, чтобы не тормозить загрузку страницы -->
  <video class="hero__bg" src="./nggyu.mp4" autoplay muted loop></video>

  <div class="heroText">
    <h1>Рикрол</h1>
    <p>…</p>
  </div>
</div>

.hero {
  position: relative;
  aspect-ratio: 16/8;
}

.heroBg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Видео лучше отключить кликабельность */
  pointer-events: none;
}

.heroText {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 10%;
  translate: -50% 0;
}

Позиционирование 

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