🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Подписи к полям
Подписи к полям формы верстают тегом 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);
}
Оживление формы без программирования
Чтобы свёрстанная форма заработала, нужно написать код на Яваскрипте и настроить сервер для приёма и хранения оптравляемых данных формы. Это задачи для опытного разработчика.
Чтобы получить рабочую форму без программирования, используют сервисы типа Формкипа. Сервисы генерируют разметку формы с нужными полями и код для «оживления» этой формы. Останется добавить код на страницу и стилизовать форму по своему усмотрению. Отправленные из формы данные придут в личный кабинет сервиса, обычно дополнительно оповестив вас по почте.
Разные сервисы мало отличаются принципиально. Создаём аккаунт, жмём кнопку «Новая форма», настраиваем набор полей и получаем код для встраивания на страницу.
У сервисов бывают платные тарифы, увеличивающие количество и срок хранения получаемых данных или открывающие дополнительные настройки форм. Но для большинства задач хватает и бесплатных тарифов.
Формкип предлагает настроить уже свёрстанную форму или взять готовый сгенерированный код
Оживление формы без программирования
Чтобы свёрстанная форма заработала, нужно написать код на Яваскрипте и настроить сервер для приёма и хранения оптравляемых данных формы. Это задачи для опытного разработчика.
Чтобы получить рабочую форму без программирования, используют сервисы типа Формкипа. Сервисы генерируют разметку формы с нужными полями и код для «оживления» этой формы. Останется добавить код на страницу и стилизовать форму по своему усмотрению. Отправленные из формы данные придут в личный кабинет сервиса, обычно дополнительно оповестив вас по почте.
Разные сервисы мало отличаются принципиально. Создаём аккаунт, жмём кнопку «Новая форма», настраиваем набор полей и получаем код для встраивания на страницу.
У сервисов бывают платные тарифы, увеличивающие количество и срок хранения получаемых данных или открывающие дополнительные настройки форм. Но для большинства задач хватает и бесплатных тарифов.
Формкип предлагает настроить уже свёрстанную форму или взять готовый сгенерированный код
Псевдоклассы — это особые слова, которые добавляют к указателю на элемент в ЦСС, чтобы описать стили этого элемента при определённых условиях. Например, при наведении курсора или при клике.
Наведение курсора полноценно работает только на устройствах с курсором.
.megaButton:hover {
background-color: hsl(88, 80%, 48%);
}
.megaButton:active {
background-color: hsl(88, 80%, 48%);
}
Псевдоклассы
Псевдоклассы — это особые слова, которые добавляют к указателю на элемент в ЦСС, чтобы описать стили этого элемента при определённых условиях. Например, при наведении курсора или при клике.
Наведение курсора полноценно работает только на устройствах с курсором.
.megaButton:hover {
background-color: hsl(88, 80%, 48%);
}
.megaButton:active {
background-color: hsl(88, 80%, 48%);
}