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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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

Видео

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

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

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

Прин­цип встра­и­ва­ния похож у раз­ных хостин­гов: нажмите «Поде­литься» на стра­нице видео и най­дите код встра­и­ва­ния, обычно это тег 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;
}

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

Пример стилизации видеоплеера с помощью media‑chrome

Если хра­ните видео у себя и вас не устра­и­вает вид стан­дарт­ного пле­ера тега video, можно под­клю­чить биб­лио­теку для настройки сво­его пле­ера. Напри­мер, VideoJS или media‑chrome.

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

Инструк­ции по под­клю­че­нию и настройке ищите на сайте кон­крет­ной библиотеки.

Пример стилизации видеоплеера с помощью media‑chrome

Если храните видео у себя и вас не устраивает вид стандартного плеера тега video, можно подключить библиотеку для настройки своего плеера. Например, VideoJS или media‑chrome.

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

Инструкции по подключению и настройке ищите на сайте конкретной библиотеки.

Если хра­ните видео у себя, исполь­зуйте фор­мат МП4 и обя­за­тельно опти­ми­зи­руйте видео­файл, чтобы умень­шить его раз­мер и уско­рить загрузку. Про­стой спо­соб опти­ми­за­ции — сайт МП4 Компрес.

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

А если видео не под­ра­зу­ме­вает обя­за­тель­ного про­смотра каж­дым чита­те­лем, можно отклю­чить его пред­за­грузку атри­бу­том preload="none". По умол­ча­нию бра­у­зер пред­за­гру­жает начало видео­файла, зна­че­ние none отклю­чает это пове­де­ние и чуть уско­ряет загрузку стра­ницы. Но тогда уже при вклю­че­нии видео чита­телю при­дётся подо­ждать чуть дольше.

<video controls preload="none" src="./about-us.mp4">
</video>

Если храните видео у себя, используйте формат МП4 и обязательно оптимизируйте видеофайл, чтобы уменьшить его размер и ускорить загрузку. Простой способ оптимизации — сайт МП4 Компрес.

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

А если видео не подразумевает обязательного просмотра каждым читателем, можно отключить его предзагрузку атрибутом preload="none". По умолчанию браузер предзагружает начало видеофайла, значение none отключает это поведение и чуть ускоряет загрузку страницы. Но тогда уже при включении видео читателю придётся подождать чуть дольше.

<video controls preload="none" src="./about-us.mp4">
</video>
Скрыто 10 разворотов
Закладки
Добавьте закладки
Ничего не нашлось