🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Кнопка
Кнопки можно встретить в разных частях страницы, необязательно в формах. В шапке сайта может быть кнопка переключения темы оформления, а в карточке товара кнопка добавления в корзину или вызова всплывашки с таблицей размеров.
Кнопку верстают тегом 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;
}
Флексбоксы
Группы полей
Когда в форме много полей, их группируют по смыслу. Форма с группами выглядит опрятнее и проще для заполнения.
Для группировки полей удобно использовать тег с говорящим названием fieldset.
<form>
<fieldset>
<label class="input">
<span class="input__label">Получатель</span>
<input type="text" placeholder="Андрей Петров">
</label>
</fieldset>
<fieldset>
<label class="input">
<span class="input__label">Доставка</span>
<select>
<optgroup label="Почта России">
<option>Курьером ЕМС</option>
<option>В ближайшее отделение Почты</option>
</optgroup>
<optgroup label="СДЭК">
<option selected="selected">Курьером СДЭК</option>
<option>В пункт выдачи СДЭК</option>
</optgroup>
</select>
</label>
<label class="input">
<span class="input__label">Город</span>
<input type="text" placeholder="Москва">
</label>
<label class="input">
<span class="input__label">Адрес</span>
<textarea rows="2" placeholder="Ленина, 1"></textarea>
</label>
</fieldset>
<fieldset>
<label class="input">
<span class="input__label">Оплата</span>
<select>
<option>Картой на сайте</option>
<option>Картой курьеру</option>
<option>Наличными курьеру</option>
</select>
</label>
<button type="submit">Оформить заказ</button>
</fieldset>
</form>
.input {
display: flex;
align-items: baseline;
}
.input__label {
width: 25%;
}
.input__input {
width: 75%;
}
.input__caption {
display: block;
margin-top: 8px;
font-size: 12px;
}
/* Сбрасываем стандартные браузерные стили филдсета */
fieldset {
border: none;
margin: 0;
padding: 0;
}
fieldset:not(:last-child) {
margin-bottom: 27px;
}
Группировка полезна не только пользователю, но и разработчику: работать с аккуратно сгруппированными кусочками кода проще и удобнее, чем со спрошной батареей тегов
Группы полей
Когда в форме много полей, их группируют по смыслу. Форма с группами выглядит опрятнее и проще для заполнения.
Для группировки полей удобно использовать тег с говорящим названием fieldset.
<form>
<fieldset>
<label class="input">
<span class="input__label">Получатель</span>
<input type="text" placeholder="Андрей Петров">
</label>
</fieldset>
<fieldset>
<label class="input">
<span class="input__label">Доставка</span>
<select>
<optgroup label="Почта России">
<option>Курьером ЕМС</option>
<option>В ближайшее отделение Почты</option>
</optgroup>
<optgroup label="СДЭК">
<option selected="selected">Курьером СДЭК</option>
<option>В пункт выдачи СДЭК</option>
</optgroup>
</select>
</label>
<label class="input">
<span class="input__label">Город</span>
<input type="text" placeholder="Москва">
</label>
<label class="input">
<span class="input__label">Адрес</span>
<textarea rows="2" placeholder="Ленина, 1"></textarea>
</label>
</fieldset>
<fieldset>
<label class="input">
<span class="input__label">Оплата</span>
<select>
<option>Картой на сайте</option>
<option>Картой курьеру</option>
<option>Наличными курьеру</option>
</select>
</label>
<button type="submit">Оформить заказ</button>
</fieldset>
</form>
Группировка полезна не только пользователю, но и разработчику: работать с аккуратно сгруппированными кусочками кода проще и удобнее, чем со спрошной батареей тегов
.input {
display: flex;
align-items: baseline;
}
.input__label {
width: 25%;
}
.input__input {
width: 75%;
}
.input__caption {
display: block;
margin-top: 8px;
font-size: 12px;
}
/* Сбрасываем стандартные браузерные стили филдсета */
fieldset {
border: none;
margin: 0;
padding: 0;
}
fieldset:not(:last-child) {
margin-bottom: 27px;
}
Отключение кнопки или инпута, дисейбл
Атрибут disabled отключает кнопку или инпут, запрещает взаимодействие с ними. Разработчики так и говорят: «задисейблить кнопку».
Обычно при программировании форм кнопки или поля дисейблят Яваскриптом. Например, запрещают отправлять форму, пока заполнены не все поля. Дисейбл часто используют с предустановленным через value значением инпута.
В браузерах есть стандартные стили дисейбла, но можно стилизовать и по‑своему.
<input type="email" value="petrov@yandex.ru" disabled>
<textarea disabled></textarea>
<button disabled>Отправить</button>
:disabled {
background: #f8f8f8;
border: 1px solid rgba(0, 0, 0, .08);
}
Отключение кнопки или инпута, дисейбл
Атрибут disabled отключает кнопку или инпут, запрещает взаимодействие с ними. Разработчики так и говорят: «задисейблить кнопку».
Обычно при программировании форм кнопки или поля дисейблят Яваскриптом. Например, запрещают отправлять форму, пока заполнены не все поля. Дисейбл часто используют с предустановленным через value значением инпута.
В браузерах есть стандартные стили дисейбла, но можно стилизовать и по‑своему.
<input type="email" value="petrov@yandex.ru" disabled>
<textarea disabled></textarea>
<button disabled>Отправить</button>
:disabled {
background: #f8f8f8;
border: 1px solid rgba(0, 0, 0, .08);
}