🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Формы
ХТМЛ позволяет сверстать и базово настроить поведение формы.
Чтобы оживить форму и отправлять данные из неё на сервер, понадобится сам сервер и дополнительное программирование.
Мы не будем подробно останавливаться на программировании форм — это выходит далеко за рамки книги. Но научимся собирать данные формы с помощью сервиса «Формкип».
Можно и вовсе не верстать форму, а использовать сервисы‑конструкторы. В них вы собираете форму из типовых элементов, а затем получаете кусок кода для встраивания формы на сайт. Чаще всего, формы собирают в Гугль‑ и Яндекс‑формах или в «Формкипе».
Формы
ХТМЛ позволяет сверстать и базово настроить поведение формы.
Чтобы оживить форму и отправлять данные из неё на сервер, понадобится сам сервер и дополнительное программирование.
Мы не будем подробно останавливаться на программировании форм — это выходит далеко за рамки книги. Но научимся собирать данные формы с помощью сервиса «Формкип».
Можно и вовсе не верстать форму, а использовать сервисы‑конструкторы. В них вы собираете форму из типовых элементов, а затем получаете кусок кода для встраивания формы на сайт. Чаще всего, формы собирают в Гугль‑ и Яндекс‑формах или в «Формкипе».
Форму верстают внутри одноимённого тега‑обёртки. Это облегчит жизнь, когда дело дойдёт до отправки данных формы.
Внутри обёртки помещают элементы формы. У них много уникальных атрибутов, часть из них нужна только при программировании отправки формы, другие атрибуты влияют на внешний вид и поведение полей.
Скоро мы ближе познакомимся с элементами формы и их атрибутами, а пока внимательно изучите код формы‑примера с комментариями.
Флексбоксы
<form>
<!-- placeholder видно в поле до начала ввода -->
<input type="text" placeholder="Логин" />
<!-- type="password" прячет вводимые символы -->
<input type="password" placeholder="Пароль" />
<button type="submit">Войти</button>
</form>
form {
/* Расставим элементы в колонку с отступами */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .5em;
}
/* Особым псевдоклассом перекрасим плейсхолдеры */
::placeholder {
color: #ddd;
}
/* Выделим общие стили для полей и кнопок */
input,
button {
font-size: 1.8em;
border-radius: 8px;
}
input {
padding: 0.3em;
border: 2px solid #ddd;
}
button {
padding: 0.3em 1.15em;
/* Уберём обводку, которую браузер добавляет кнопкам по умолчанию */
border: none;
background: #ff5722;
color: #fff;
}
Форму верстают внутри одноимённого тега‑обёртки. Это облегчит жизнь, когда дело дойдёт до отправки данных формы.
Внутри обёртки помещают элементы формы. У них много уникальных атрибутов, часть из них нужна только при программировании отправки формы, другие атрибуты влияют на внешний вид и поведение полей.
Скоро мы ближе познакомимся с элементами формы и их атрибутами, а пока внимательно изучите код формы‑примера с комментариями.
Флексбоксы
<form>
<!-- placeholder видно в поле до начала ввода -->
<input type="text" placeholder="Логин" />
<!-- type="password" прячет вводимые символы -->
<input type="password" placeholder="Пароль" />
<button type="submit">Войти</button>
</form>
form {
/* Расставим элементы в колонку с отступами */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .5em;
}
/* Особым псевдоклассом перекрасим плейсхолдеры */
::placeholder {
color: #ddd;
}
/* Выделим общие стили для полей и кнопок */
input,
button {
font-size: 1.8em;
border-radius: 8px;
}
input {
padding: 0.3em;
border: 2px solid #ddd;
}
button {
padding: 0.3em 1.15em;
/* Уберём обводку, которую браузер добавляет кнопкам по умолчанию */
border: none;
background: #ff5722;
color: #fff;
}
Элементы ввода, или инпуты
В ХТМЛ‑формах элементы ввода дают человеку ввести или уточнить данные: поля, чекбоксы, радиокнопки, выпадающие списки и другие элементы. Разработчики называют элементы ввода инпутами, потому что почти всегда это тег input.
Инпуты отличаются типами — атрибутом type. Тип влияет на внешний вид инпута и форматирование вводимых данных.
Инпут с type="password" скроет вводимый текст, type="number" не даст ввести буквы, а type="date" покажет формат ввода даты, а в некоторых браузерах добавит кнопку вызова календарика. Файловый инпут поддерживает перетягивание файла на себя, а инпут цвета открывает палитру выбора цвета.
Особняком среди инпутов стоят чекбоксы, радиокнопки и выпадающие списки. Их вёрстка отличается от вёрстки остальных инпутов, поэтому далее мы разберём их отдельно.
В некоторых браузерах стандартные стили инпутов выглядят странно и аляповато. Позже мы поговорим о том, что с этим можно сделать и нужно ли это делать
<input type="text">
type="text"
type="number"
type="password"
type="date"
type="datetime‑local"
type="time"
type="file"
type="color"
type="range"
Элементы ввода, или инпуты
В ХТМЛ‑формах элементы ввода дают человеку ввести или уточнить данные: поля, чекбоксы, радиокнопки, выпадающие списки и другие элементы. Разработчики называют элементы ввода инпутами, потому что почти всегда это тег input.
Инпуты отличаются типами — атрибутом type. Тип влияет на внешний вид инпута и форматирование вводимых данных.
Инпут с type="password" скроет вводимый текст, type="number" не даст ввести буквы, а type="date" покажет формат ввода даты, а в некоторых браузерах добавит кнопку вызова календарика. Файловый инпут поддерживает перетягивание файла на себя, а инпут цвета открывает палитру выбора цвета.
Особняком среди инпутов стоят чекбоксы, радиокнопки и выпадающие списки. Их вёрстка отличается от вёрстки остальных инпутов, поэтому далее мы разберём их отдельно.
В некоторых браузерах стандартные стили инпутов выглядят странно и аляповато. Позже мы поговорим о том, что с этим можно сделать и нужно ли это делать
<input type="text">
type="text"
type="number"
type="password"
type="date"
type="datetime‑local"
type="time"
type="file"
type="color"
type="range"
Текстобласть
Многострочное текстовое поле создаётся тегом textarea. Тег нужно закрывать, в отличие от незакрывающегося input. Внутрь textarea можно написать текст, чтобы заранее заполнить текстобласть. Написанный текст сохранит все пробелы и переносы строк.
У тега textarea есть два уникальных атрибута: rows и cols задают высоту в строках и ширину в символах в соответствии с размером шрифта.
На компьютере размер текстобласти можно менять, двигая за правый нижний угол. В стилях важно предусмотреть минимальные и максимальные размеры, чтобы растягивание или уменьшение текстобласти не сломало вёрстку вокруг.
Ограничить направление или отключить изменение размера можно ЦСС‑свойством resize со значениями horizontal, vertical или none.
<textarea
rows="5"
cols="20"
placeholder="Комментарий">
</textarea>
textarea {
min-width: 320px;
max-width: 100%;
min-height: 150px;
max-height: 250px;
}Текстобласть
Многострочное текстовое поле создаётся тегом textarea. Тег нужно закрывать, в отличие от незакрывающегося input. Внутрь textarea можно написать текст, чтобы заранее заполнить текстобласть. Написанный текст сохранит все пробелы и переносы строк.
У тега textarea есть два уникальных атрибута: rows и cols задают высоту в строках и ширину в символах в соответствии с размером шрифта.
На компьютере размер текстобласти можно менять, двигая за правый нижний угол. В стилях важно предусмотреть минимальные и максимальные размеры, чтобы растягивание или уменьшение текстобласти не сломало вёрстку вокруг.
Ограничить направление или отключить изменение размера можно ЦСС‑свойством resize со значениями horizontal, vertical или none.
<textarea
rows="5"
cols="20"
placeholder="Комментарий">
</textarea>
textarea {
min-width: 320px;
max-width: 100%;
min-height: 150px;
max-height: 250px;
}Чекбокс
Чекбокс — это элемент выбора объекта или уточнения действия, он отвечает на вопрос «с чем именно» или «как именно» выполнить основное действие. Чекбокс выглядит как галочка, включающая объект, свойство или опцию.
Сам по себе <input type="checkbox"> создаёт только квадратик, в который можно поставить галочку. Подпись верстают отдельным тегом или просто текстом.
В примере для вёрстки чекбокса используется обёртка label. Клик по тексту внутри лейбла будет работать так же, как клик в сам элемент управления.
Атрибут checked ставит галочку по умолчанию.
Илья Бирман. Пользовательский интерфейс. Чекбокс
Подписи к полям
<form>
<label>
<input type="checkbox" checked>
Соглашаюсь на…
</label>
</form>
input[type="checkbox"] {
margin-right: 5px;
}Чекбокс
Чекбокс — это элемент выбора объекта или уточнения действия, он отвечает на вопрос «с чем именно» или «как именно» выполнить основное действие. Чекбокс выглядит как галочка, включающая объект, свойство или опцию.
Сам по себе <input type="checkbox"> создаёт только квадратик, в который можно поставить галочку. Подпись верстают отдельным тегом или просто текстом.
В примере для вёрстки чекбокса используется обёртка label. Клик по тексту внутри лейбла будет работать так же, как клик в сам элемент управления.
Атрибут checked ставит галочку по умолчанию.
Илья Бирман. Пользовательский интерфейс. Чекбокс
Подписи к полям
<form>
<label>
<input type="checkbox" checked>
Соглашаюсь на…
</label>
</form>
input[type="checkbox"] {
margin-right: 5px;
}