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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Текстобласть

Мно­го­строч­ное тек­сто­вое поле созда­ётся тегом 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;
}

Флексбоксы 

Выпадающий список, или селект

Как и группа радиокно­пок, выпа­дю­щий спи­сок исполь­зуют для выбора объ­екта или уточ­не­ния действия.

Раз­ра­бот­чики назы­вают выпа­да­ю­щий спи­сок селек­том, потому что его вер­стают тегом select. Внутрь тега поме­щают вари­анты — option, атри­бут selected выби­рает вари­ант по умол­ча­нию. Вари­анты можно объ­еди­нять в группы — optgroup.

Внеш­ний вид селекта можно менять через ЦСС, но на внеш­ний вид вари­ан­тов повли­ять нельзя — он будет зави­сеть от опе­ра­ци­он­ной системы посе­ти­теля страницы.

Радиокнопки 

<p>Доставка</p>

<select>
  <option selected>Курьером магазина</option>

  <optgroup label="Почтой России">
    <option>В отделение почты</option>
    <option>В постамат</option>
    <option>Курьером почты</option>
  </optgroup>
  
  <optgroup label="СДЭКом">
    <option>В пункт выдачи СДЭК</option>
    <option>Курьером СДЭК</option>
  </optgroup>
<select>

Доставка

Выпадающий список, или селект

Как и группа радиокнопок, выпадющий список используют для выбора объекта или уточнения действия.

Разработчики называют выпадающий список селектом, потому что его верстают тегом select. Внутрь тега помещают варианты — option, атрибут selected выбирает вариант по умолчанию. Варианты можно объединять в группы — optgroup.

Внешний вид селекта можно менять через ЦСС, но на внешний вид вариантов повлиять нельзя — он будет зависеть от операционной системы посетителя страницы.

Радиокнопки 

<p>Доставка</p>

<select>
  <option selected>Курьером магазина</option>

  <optgroup label="Почтой России">
    <option>В отделение почты</option>
    <option>В постамат</option>
    <option>Курьером почты</option>
  </optgroup>
  
  <optgroup label="СДЭКом">
    <option>В пункт выдачи СДЭК</option>
    <option>Курьером СДЭК</option>
  </optgroup>
<select>

Доставка

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