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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Форму вер­стают внутри одно­имён­ного тега‑обёртки. Это облег­чит жизнь, когда дело дой­дёт до отправки дан­ных формы.

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

Скоро мы ближе позна­ко­мимся с эле­мен­тами формы и их атри­бу­тами, а пока вни­ма­тельно изу­чите код формы‑при­мера с комментариями.

Флексбоксы 

<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;
}

Радиокнопки

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

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

Радиокнопки в вёрстке — это инпуты с 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>
Скрыто 150 разворотов
Закладки
Добавьте закладки
Ничего не нашлось