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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Радиокнопки

Радиокнопка — это эле­мент выбора объ­екта или уточ­не­ния дей­ствия из несколь­ких вари­ан­тов. Эле­мент отве­чает на вопрос «с чем именно» или «как именно» выпол­нить действие.

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

Радиокнопки в вёрстке — это инпуты с type="radio". Чтобы объ­еди­нить радиокнопки в группу, инпу­там задают оди­на­ко­вый атри­бут name. Среди радиокно­пок с оди­на­ко­вым name бра­у­зер даст нажать только одну.

Атри­бут checked выби­рает радиокнопку по умолчанию.

Илья Бирман. Пользовательский интерфейс. Радиокнопки

<form>
  <h4>Доставка</h4>
  <label>
    <input type="radio" name="delivery" checked> Почтой
  </label>

  <label>
    <input type="radio" name="delivery"> Курьером
  </label>

  <label>
    <input type="radio" name="delivery"> В пункт выдачи
  </label>

  <h4>Оплата</h4>
  <label>
    <input type="radio" name="payment" checked> Картой на сайте
  </label>

  <label>
    <input type="radio" name="payment"> При получении
  </label>
</form>

Доставка

Оплата

Радиокнопки

Радиокнопка — это элемент выбора объекта или уточнения действия из нескольких вариантов. Элемент отвечает на вопрос «с чем именно» или «как именно» выполнить действие.

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

Радиокнопки в вёрстке — это инпуты с type="radio". Чтобы объединить радиокнопки в группу, инпутам задают одинаковый атрибут name. Среди радиокнопок с одинаковым name браузер даст нажать только одну.

Атрибут checked выбирает радиокнопку по умолчанию.

Илья Бирман. Пользовательский интерфейс. Радиокнопки

Доставка

Оплата

<form>
  <h4>Доставка</h4>
  <label>
    <input type="radio" name="delivery" checked> Почтой
  </label>

  <label>
    <input type="radio" name="delivery"> Курьером
  </label>

  <label>
    <input type="radio" name="delivery"> В пункт выдачи
  </label>

  <h4>Оплата</h4>
  <label>
    <input type="radio" name="payment" checked> Картой на сайте
  </label>

  <label>
    <input type="radio" name="payment"> При получении
  </label>
</form>

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

Пере­клю­ча­тель — вари­ант группы радиокно­пок. В ХТМЛ нет отдель­ного тега для пере­клю­ча­теля, мы сове­туем вер­стать его с помо­щью трюка с 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, поисковики могут вовсе не увидеть её и не добавить в поисковую выдачу.

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

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

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

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

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

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

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

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

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

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

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

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

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