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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Переключатель

Пере­клю­ча­тель — вари­ант группы радиокно­пок. В ХТМЛ нет отдель­ного тега для пере­клю­ча­теля, мы сове­туем вер­стать его с помо­щью трюка с input type="radio".

Трюк осно­ван на стро­гой струк­туре вёрстки. Исполь­зуем тег label, внутри инпут‑радио и див — кнопка пере­клю­ча­теля. Тег label по клику акти­ви­рует нахо­дя­щийся внутри инпут, подроб­нее мы раз­бе­рём это дальше в книге. А пока в ЦСС спря­чем сами инпуты и будем под­кра­ши­вать бли­жай­шего соседа актив­ного инпута.

Спря­тан­ные инпуты не пере­стают рабо­тать, клик по обёртке label будет их акти­ви­ро­вать и при­ме­нять стили для дива‑соседа. 

<div class="switch">
  <label>
    <input type="radio" name="transport" checked>
    <div class="switch__item">Самолётом</div>
  </label>

  <label>
    <input type="radio" name="transport">
    <div class="switch__item">Поездом</div>
  </label>

  <label>
    <input type="radio" name="transport">
    <div class="switch__item">Машиной</div>
  </label>
</div>

.switch {
  display: flex; /* Ставим элементы в ряд */
}

.switch__item {
  padding: 5px 10px;
}

.switch input {
  display: none; /* Спрятанный инпут не перестаёт работать */
}

/* Применяем стили для соседа «чекнутого» инпута */
.switch input:checked + .switch__item {
  background: #00aff0;
  color: white;
}

Флексбоксы 

Переключатель

Переключатель — вариант группы радиокнопок. В ХТМЛ нет отдельного тега для переключателя, мы советуем верстать его с помощью трюка с input type="radio".

Трюк основан на строгой структуре вёрстки. Используем тег label, внутри инпут‑радио и див — кнопка переключателя. Тег label по клику активирует находящийся внутри инпут, подробнее мы разберём это дальше в книге. А пока в ЦСС спрячем сами инпуты и будем подкрашивать ближайшего соседа активного инпута.

Спрятанные инпуты не перестают работать, клик по обёртке label будет их активировать и применять стили для дива‑соседа. 

<div class="switch">
  <label>
    <input type="radio" name="transport" checked>
    <div class="switch__item">Самолётом</div>
  </label>

  <label>
    <input type="radio" name="transport">
    <div class="switch__item">Поездом</div>
  </label>

  <label>
    <input type="radio" name="transport">
    <div class="switch__item">Машиной</div>
  </label>
</div>

.switch {
  display: flex; /* Ставим элементы в ряд */
}

.switch__item {
  padding: 5px 10px;
}

.switch input {
  display: none; /* Спрятанный инпут не перестаёт работать */
}

/* Применяем стили для соседа «чекнутого» инпута */
.switch input:checked + .switch__item {
  background: #00aff0;
  color: white;
}

Флексбоксы 

Выпадающий список, или селект

Как и группа радиокно­пок, выпа­дю­щий спи­сок исполь­зуют для выбора объ­екта или уточ­не­ния действия.

Раз­ра­бот­чики назы­вают выпа­да­ю­щий спи­сок селек­том, потому что его вер­стают тегом select. Внутрь тега поме­щают вари­анты — option, атри­бут selected выби­рает вари­ант по умол­ча­нию. Вари­анты можно объ­еди­нять в группы — optgroup.

Внеш­ний вид селекта можно менять через ЦСС, но на внеш­ний вид вари­ан­тов повли­ять нельзя — он будет зави­сеть от опе­ра­ци­он­ной системы посе­ти­теля страницы.

Радиокнопки 

<p>Доставка</p>

<select>
  <option selected>Курьером магазина</option>

  <optgroup label="Почтой России">
    <option>В отделение почты</option>
    <option>В постамат</option>
    <option>Курьером почты</option>
  </optgroup>
  
  <optgroup label="СДЭКом">
    <option>В пункт выдачи СДЭК</option>
    <option>Курьером СДЭК</option>
  </optgroup>
<select>

Доставка

Выпадающий список, или селект

Как и группа радиокнопок, выпадющий список используют для выбора объекта или уточнения действия.

Разработчики называют выпадающий список селектом, потому что его верстают тегом select. Внутрь тега помещают варианты — option, атрибут selected выбирает вариант по умолчанию. Варианты можно объединять в группы — optgroup.

Внешний вид селекта можно менять через ЦСС, но на внешний вид вариантов повлиять нельзя — он будет зависеть от операционной системы посетителя страницы.

Радиокнопки 

<p>Доставка</p>

<select>
  <option selected>Курьером магазина</option>

  <optgroup label="Почтой России">
    <option>В отделение почты</option>
    <option>В постамат</option>
    <option>Курьером почты</option>
  </optgroup>
  
  <optgroup label="СДЭКом">
    <option>В пункт выдачи СДЭК</option>
    <option>Курьером СДЭК</option>
  </optgroup>
<select>

Доставка

Кнопка

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

Кнопку вер­стают тегом button, стан­дарт­ные стили тега зави­сят от бра­у­зера и опе­ра­ци­он­ной системы.

<button>Оплатить<button>

При сти­ли­за­ции не забудьте отклю­чить или изме­нить стан­дарт­ные цвета и обводку, чтобы они не кон­флик­то­вали с вашими стилями.

<button>Оплатить<button>

button {
  border: none; /* Убираем стандартную обводку */

  font-size: 20px;
  line-height: 36px;
  font-family: Bureausans, Arial, sans-serif;
  background: #2aad05;
  color: #fff;
  padding: 0 18px;
  border-radius: 3px;
}

Внутрь кнопки можно поме­стить дру­гие теги. Напри­мер, иконку:

<button>
  Подарить
  <img src="gift.svg">
<button>
button {
  border: none;
  /* Убираем стандартную обводку */

  font-size: 20px;
  line-height: 36px;
  font-family: Bureausans, Arial, sans-serif;
  background: #2aad05;
  color: #fff;
  padding: 0 18px;
  border-radius: 3px;
}

button img {
  width: 16px;
  margin-left: 5px;
}

Чтобы при­вя­зать дей­ствие к нажа­тию кнопки, нужно писать код на Ява­скрип­те. Это выхо­дит за рамки книги. Базо­вые рецепты управ­ле­ния стра­ни­цей с помо­щью кнопки можно изу­чить в видео «Ява­скрипт для не‑разработчиков».

«Яваскрипт для не‑разработчиков». Запись прямого эфира Игоря Петрова

Трюк: кнопка‑ссылка

Можно заста­вить кнопку рабо­тать как ссылка, доба­вив в в атри­бут onclick малень­кое закли­на­ние на Ява­скрип­те. Вни­ма­тель­нее с кавычками:

<button onclick="location.href='https://ya.ru'">
  Яндекс
</button>

Этот трюк при­ме­няют для быст­рого про­то­ти­пи­ро­ва­ния. Делать так на пуб­лич­ной стра­нице опасно: такую «ссылку» не пой­мут устрой­ства чте­ния с экрана и не рас­по­знают поис­ко­вые роботы. Если на стра­ницу нет ссы­лок через тег‑ссылку a, поис­ко­вики могут вовсе не уви­деть её и не доба­вить в поис­ко­вую выдачу.

Кнопка

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

Кнопку верстают тегом button, стандартные стили тега зависят от браузера и операционной системы.

<button>Оплатить<button>

При стилизации не забудьте отключить или изменить стандартные цвета и обводку, чтобы они не конфликтовали с вашими стилями.

<button>Оплатить<button>

button {
  border: none; /* Убираем стандартную обводку */

  font-size: 20px;
  line-height: 36px;
  font-family: Bureausans, Arial, sans-serif;
  background: #2aad05;
  color: #fff;
  padding: 0 18px;
  border-radius: 3px;
}

Внутрь кнопки можно поместить другие теги. Например, иконку:

<button>
  Подарить
  <img src="gift.svg">
<button>
button {
  border: none;
  /* Убираем стандартную обводку */

  font-size: 20px;
  line-height: 36px;
  font-family: Bureausans, Arial, sans-serif;
  background: #2aad05;
  color: #fff;
  padding: 0 18px;
  border-radius: 3px;
}

button img {
  width: 16px;
  margin-left: 5px;
}

Чтобы привязать действие к нажатию кнопки, нужно писать код на Яваскрипте. Это выходит за рамки книги. Базовые рецепты управления страницей с помощью кнопки можно изучить в видео «Яваскрипт для не‑разработчиков».

«Яваскрипт для не‑разработчиков». Запись прямого эфира Игоря Петрова

Трюк: кнопка‑ссылка

Можно заставить кнопку работать как ссылка, добавив в в атрибут onclick маленькое заклинание на Яваскрипте. Внимательнее с кавычками:

<button onclick="location.href='https://ya.ru'">
  Яндекс
</button>

Этот трюк применяют для быстрого прототипирования. Делать так на публичной странице опасно: такую «ссылку» не поймут устройства чтения с экрана и не распознают поисковые роботы. Если на страницу нет ссылок через тег‑ссылку a, поисковики могут вовсе не увидеть её и не добавить в поисковую выдачу.

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

И обязательно проверьте нестандартный инпут в разных сценариях и устройствах.

Нестандартные элементы интерфейса. Лекция Ильи Бирмана

Нестандартные инпуты

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

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

Нестандартные инпуты

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

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

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

И обязательно проверьте нестандартный инпут в разных сценариях и устройствах.

Нестандартные элементы интерфейса. Лекция Ильи Бирмана

Подписи к полям

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

Есть два спо­соба вёрстки лейблов.

Лейбл рядом с полем

Отдель­ный лейбл при­вя­зы­вают к полю по айди через атри­бут for. Минус этого спо­соба — нужно при­ду­мы­вать уни­каль­ные айди, повто­рять их в коде и вни­ма­тельно сле­дить, чтобы не опе­ча­таться, иначе связь не будет работать. 

<label for="email">Эл. почта</label>
<input id="email" type="email">

Лейбл как обёртка

Есть трюк: лейбл авто­ма­ти­че­ски свя­зы­ва­ется с полем внутри себя, клик по любому эле­менту внутри лей­бла поста­вит кур­сор в поле. В этом слу­чае не при­дётся при­ду­мы­вать уни­каль­ные айди. Минус этого спо­соба — неко­то­рые устрой­ства чте­ния с экрана могут не понять связь лей­бла с полем ввода и неточно озву­чить вёрстку пользователю.

<label>
  <span>Эл. почта</span>
  <input type="email">
</label>

При­ят­ный бонус лей­бла как обёртки — внутри можно завер­стать не только под­пись, но и пояс­не­ния к полям или сооб­ще­ния об ошиб­ках. Клик по ним тоже будет ста­вить кур­сор в поле.

<label class="input">
  <span class="input__label">Эл. почта</span>

  <div class="input__input">
    <input type="email">

    <!-- Так же можно сверстать сообщение об ошибке. Видимостью сообщений об ошибках управляют через Яваскрипт -->
    <span class="input__caption">
      Для связи, документов и чеков
    </span>
  </div>
</label>

.input {
  display: flex;
  align-items: baseline;
}

.input__label {
  width: 25%;
}

.input__input {
  width: 75%;
}

.input__caption {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}

Флексбоксы 

Подписи к полям

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

Есть два способа вёрстки лейблов.

Лейбл рядом с полем

Отдельный лейбл привязывают к полю по айди через атрибут for. Минус этого способа — нужно придумывать уникальные айди, повторять их в коде и внимательно следить, чтобы не опечататься, иначе связь не будет работать. 

<label for="email">Эл. почта</label>
<input id="email" type="email">

Для связи, документов и чеков

Лейбл как обёртка

Есть трюк: лейбл автоматически связывается с полем внутри себя, клик по любому элементу внутри лейбла поставит курсор в поле. В этом случае не придётся придумывать уникальные айди. Минус этого способа — некоторые устройства чтения с экрана могут не понять связь лейбла с полем ввода и неточно озвучить вёрстку пользователю.

<label>
  <span>Эл. почта</span>
  <input type="email">
</label>

Приятный бонус лейбла как обёртки — внутри можно заверстать не только подпись, но и пояснения к полям или сообщения об ошибках. Клик по ним тоже будет ставить курсор в поле.

<label class="input">
  <span class="input__label">Эл. почта</span>

  <div class="input__input">
    <input type="email">

    <!-- Так же можно сверстать сообщение об ошибке. Видимостью сообщений об ошибках управляют через Яваскрипт -->
    <span class="input__caption">
      Для связи, документов и чеков
    </span>
  </div>
</label>

.input {
  display: flex;
  align-items: baseline;
}

.input__label {
  width: 25%;
}

.input__input {
  width: 75%;
}

.input__caption {
  display: block;
  margin-top: 8px;
  font-size: 12px;
}

Флексбоксы 

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