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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Элементы ввода, или инпуты

В ХТМЛ‑фор­мах эле­менты ввода дают чело­веку вве­сти или уточ­нить дан­ные: поля, чек­боксы, радиокнопки, выпа­да­ю­щие списки и дру­гие эле­менты. Раз­ра­бот­чики назы­вают эле­менты ввода инпу­тами, потому что почти все­гда это тег 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;
}

Радиокнопки

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

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

Радиокнопки в вёрстке — это инпуты с 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;
}

Флексбоксы 

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