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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Аркадий Мильчин и Людмила Чельцова. Справочник издателя и автора

Вёрстка слож­ных таб­лиц тре­бует осо­бой вни­ма­тель­но­сти и акку­рат­но­сти, чтобы не запу­таться и не сло­мать струк­туру. Из‑за осо­бен­но­стей работы таб­лич­ных тегов, ино­гда при­хо­дится писать гро­мозд­кие стили, чтобы добиться результата.

Перед вёрст­кой таб­лицы полезно сна­чала при­ки­нуть её струк­туру на бумаге, а не бро­саться сразу в код.

Вни­ма­тельно изу­чите при­меры. Попро­буйте ско­пи­ро­вать код, допол­нить или изме­нить струк­туру и стили.

Таблица с иллюстрациями

Для сдвига эле­мен­тов группы «Виб­ро­устой­чи­вость» заво­дим отдель­ный класс. Чтобы запре­тить пере­носы в назва­ниях коло­нок и ячей­ках, исполь­зуем атри­бут nowrap, в отдель­ных зна­че­ниях — тег nobr.

<h3>
  Кнопки и переключатели кнопочные
</h3>

<table>
  <thead>
    <tr>
      <th width="30%">Показатели</th>
      <th nowrap>МПК 1-1, 2-1</th>
      <th nowrap>КН</th>
      <th nowrap>КМ А1-IV, 1-1, 2-1</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Схема коммутации</td>
      <td><img src="schemes/mpk.svg"></td>
      <td><img src="schemes/kn.svg"></td>
      <td><img src="schemes/km.svg"></td>
    </tr>

    <tr>
      <td>Напряжение коммутации, В</td>
      <td>30</td>
      <td>50</td>
      <td>=30~220</td>
    </tr>

    <tr>
      <td>Ток коммутации, A</td>
      <td>0,5</td>
      <td>1,5 (250 Вт)</td>
      <td>=4~3</td>
    </tr>

    <tr>
      <td>Температура, ˚C</td>
      <td>−60…+100</td>
      <td>−60…+85</td>
      <td>−60…+85</td>
    </tr>

    <tr>
      <td>Виброустойчивость:</td>
    </tr>

    <tr class="indented">
      <td>частота, Гц</td>
      <td>10…2 500</td>
      <td>5…80</td>
      <td>5…200</td>
    </tr>

    <tr class="indented">
      <td>ускорение, g, <nobr>м/с²</nobr></td>
      <td>12</td>
      <td>6</td>
      <td>7</td>
    </tr>

    <tr>
      <td>Ускорение при ударной нагрузке, g, <nobr>м/с²</nobr></td>
      <td>75</td>
      <td>7</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

html {
  font-family: Helvetica;
}

/* Стилизуем заголовок под обычный курсивный текст. Честный заголовок, а не просто теги p и i лучше в плане семантики */
h3 {
  font-weight: normal;
  font-style: italic;
}

/* Базовая дизайнерская гигиена таблицы: ужимаем по ширине, выравниваем всё по левому верхнему краю */
table {
  border-collapse: collapse;
  width: min-content;
  font-size: inherit;
}

th,
td {
  vertical-align: top;
  text-align: left;
}

th,
tr td {
  padding: 18px 18px 0 0;
}

/* Нижняя граница шапки задаётся в её ячейках */
th {
  padding-top: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid;
}

/* Правый падинг у последних ячеек не нужен */
td:last-child, 
th:last-child {
  padding-right: 0;
}

/* Трюки с группой, сдвигаем элементы группы правее */
tr.indented td:first-child {
  padding-left: 18px;
}

/* Уменьшаем верхние отступы группы и элементов */
tr:not(.indented) + tr.indented td {
  padding-top: 9px;
}

tr.indented td {
  padding-top: 13px;
}

Сдваивание длинной таблицы

Тут без хит­ро­стей, рас­по­ла­гаем таб­лицы внутри кон­тей­нера в ряд. Обра­тите вни­ма­ние на тег ниж­него индекса sub в подпи­си таб­лицы. Для верх­него индекса исполь­зу­ется его брат sup.

<div class="doubleTable">
  <table>
    <thead>
      <tr>
        <th>Тип панели</th>
        <th>Высота цилиндрической части баллона лампы, мм</th>
      </tr>
    </thead>            

    <tbody>
      <tr>
        <td nowrap>ПЛК9-Д-31</td>
        <td>28—31</td>
      </tr> 
      <tr>
        <td nowrap>ПЛК9-Д-40</td>
        <td>37—43</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Д-55</td>
        <td>52—58</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Д-60</td>
        <td>57—63</td>
      </tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr>
        <th>Тип панели</th>
        <th>Высота цилиндрической части баллона лампы, мм</th>
      </tr>
    </thead>            

    <tbody>
      <tr>
        <td nowrap>ПЛК9-Э-46</td>
        <td>28—34</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-55</td>
        <td>37—43</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-70</td>
        <td>52—58</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-75</td>
        <td>57—63</td>
      </tr>
    </tbody>
  </table>
</div>
<p>
  <i>Примечание.</i> Размер H<sub>макс</sub> (мм) — последние две цифры марки.
</p>


/* Основные стили таблицы как в прошлых примерах */

.doubleTable {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.doubleTable table:not(:last-child) {
  border-right: 1px solid;
  margin-right: 18px;
}

Таблица с группами

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

<table>
  <thead>
    <tr>
      <th rowspan="2">Вид литья и литейные сплавы (металлы)</th>
      <th classname="borderBottom" colspan="7">Площадь сплошной поверхности отливки, см²</th>
    </tr>
    <tr>
      <td>≤25</td>
      <td>>25</td>
      <td>>100</td>
      <td>>225</td>
      <td>>400</td>
      <td>>1000</td>
      <td>>1600</td>
    </tr>
  </thead>            

  <tbody>
      <tr classname="groupStart">
        <td colspan="8">В песчаные формы</td>
      </tr>
      <tr>
        <td>АЛ2</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
      </tr>

      <tr>
        <td>МЛ5</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>4,5</td>
        <td>5,0</td>
        <td>6,0</td>
        <td>7,0</td>
      </tr>

      <tr>
        <td>Чугун</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td>7,0</td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">В кокиль</td>
      </tr>
      <tr>
        <td>АЛ2</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>МЛ5</td>
        <td>3,0</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td></td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">В оболочковые формы</td>
      </tr>
      <tr>
        <td>Алюминиевые</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
      </tr>
      <tr>
        <td>Медные</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
      </tr>
      <tr>
        <td>Сталь</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">Под давлением</td>
      </tr>
      <tr>
        <td>Оловянистые</td>
        <td>0,6</td>
        <td>0,7</td>
        <td>1,1</td>
        <td>1,5</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Цинковые</td>
        <td>0,8</td>
        <td>1,0</td>
        <td>1,5</td>
        <td>2,0</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Магниевые</td>
        <td>1,3</td>
        <td>1,8</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Алюминиевые</td>
        <td>1,0</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Медные</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>3,0</td>
        <td>3,5</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">По выплавляемым моделям</td>
      </tr>
      <tr>
        <td>Сталь</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

/* Основные стили таблицы как в прошлых примерах */

/* Конкретно в этой таблице нужна первая колонка пошире, задаём ей минимальную ширину */
th:first-child {
  min-width: 200px;
}

/* Увеличенный верхний отступ между группами */
tr.groupStart td {
  padding-top: 18px;
}

/* По умолчанию сдвигаем все первые ячейки, если они в теле таблицы и не вложены в .groupStart */
tbody tr:not(.groupStart) td:first-child {
  padding-left: 18px;
}

.borderBottom {
  border-bottom: 1px solid;
}

Вёрстка сложных таблиц требует особой внимательности и аккуратности, чтобы не запутаться и не сломать структуру. Из‑за особенностей работы табличных тегов, иногда приходится писать громоздкие стили, чтобы добиться результата.

Перед вёрсткой таблицы полезно сначала прикинуть её структуру на бумаге, а не бросаться сразу в код.

Внимательно изучите примеры. Попробуйте скопировать код, дополнить или изменить структуру и стили.

Таблица с иллюстрациями

Для сдвига элементов группы «Виброустойчивость» заводим отдельный класс. Чтобы запретить переносы в названиях колонок и ячейках, используем атрибут nowrap, в отдельных значениях — тег nobr.

<h3>
  Кнопки и переключатели кнопочные
</h3>

<table>
  <thead>
    <tr>
      <th width="30%">Показатели</th>
      <th nowrap>МПК 1-1, 2-1</th>
      <th nowrap>КН</th>
      <th nowrap>КМ А1-IV, 1-1, 2-1</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>Схема коммутации</td>
      <td><img src="schemes/mpk.svg"></td>
      <td><img src="schemes/kn.svg"></td>
      <td><img src="schemes/km.svg"></td>
    </tr>

    <tr>
      <td>Напряжение коммутации, В</td>
      <td>30</td>
      <td>50</td>
      <td>=30~220</td>
    </tr>

    <tr>
      <td>Ток коммутации, A</td>
      <td>0,5</td>
      <td>1,5 (250 Вт)</td>
      <td>=4~3</td>
    </tr>

    <tr>
      <td>Температура, ˚C</td>
      <td>−60…+100</td>
      <td>−60…+85</td>
      <td>−60…+85</td>
    </tr>

    <tr>
      <td>Виброустойчивость:</td>
    </tr>

    <tr class="indented">
      <td>частота, Гц</td>
      <td>10…2 500</td>
      <td>5…80</td>
      <td>5…200</td>
    </tr>

    <tr class="indented">
      <td>ускорение, g, <nobr>м/с²</nobr></td>
      <td>12</td>
      <td>6</td>
      <td>7</td>
    </tr>

    <tr>
      <td>Ускорение при ударной нагрузке, g, <nobr>м/с²</nobr></td>
      <td>75</td>
      <td>7</td>
      <td>150</td>
    </tr>
  </tbody>
</table>

Аркадий Мильчин и Людмила Чельцова. Справочник издателя и автора

html {
  font-family: Helvetica;
}

/* Стилизуем заголовок под обычный курсивный текст. Честный заголовок, а не просто теги p и i лучше в плане семантики */
h3 {
  font-weight: normal;
  font-style: italic;
}

/* Базовая дизайнерская гигиена таблицы: ужимаем по ширине, выравниваем всё по левому верхнему краю */
table {
  border-collapse: collapse;
  width: min-content;
  font-size: inherit;
}

th,
td {
  vertical-align: top;
  text-align: left;
}

th,
tr td {
  padding: 18px 18px 0 0;
}

/* Нижняя граница шапки задаётся в её ячейках */
th {
  padding-top: 0;
  padding-bottom: 9px;
  border-bottom: 1px solid;
}

/* Правый падинг у последних ячеек не нужен */
td:last-child, 
th:last-child {
  padding-right: 0;
}

/* Трюки с группой, сдвигаем элементы группы правее */
tr.indented td:first-child {
  padding-left: 18px;
}

/* Уменьшаем верхние отступы группы и элементов */
tr:not(.indented) + tr.indented td {
  padding-top: 9px;
}

tr.indented td {
  padding-top: 13px;
}

Сдваивание длинной таблицы

Тут без хитростей, располагаем таблицы внутри контейнера в ряд. Обратите внимание на тег нижнего индекса sub в подписи таблицы. Для верхнего индекса используется его брат sup.

<div class="doubleTable">
  <table>
    <thead>
      <tr>
        <th>Тип панели</th>
        <th>Высота цилиндрической части баллона лампы, мм</th>
      </tr>
    </thead>            

    <tbody>
      <tr>
        <td nowrap>ПЛК9-Д-31</td>
        <td>28—31</td>
      </tr> 
      <tr>
        <td nowrap>ПЛК9-Д-40</td>
        <td>37—43</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Д-55</td>
        <td>52—58</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Д-60</td>
        <td>57—63</td>
      </tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr>
        <th>Тип панели</th>
        <th>Высота цилиндрической части баллона лампы, мм</th>
      </tr>
    </thead>            

    <tbody>
      <tr>
        <td nowrap>ПЛК9-Э-46</td>
        <td>28—34</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-55</td>
        <td>37—43</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-70</td>
        <td>52—58</td>
      </tr>
      <tr>
        <td nowrap>ПЛК9-Э-75</td>
        <td>57—63</td>
      </tr>
    </tbody>
  </table>
</div>
<p>
  <i>Примечание.</i> Размер H<sub>макс</sub> (мм) — последние две цифры марки.
</p>


/* Основные стили таблицы как в прошлых примерах */

.doubleTable {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

.doubleTable table:not(:last-child) {
  border-right: 1px solid;
  margin-right: 18px;
}

Таблица с группами

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

<table>
  <thead>
    <tr>
      <th rowspan="2">Вид литья и литейные сплавы (металлы)</th>
      <th classname="borderBottom" colspan="7">Площадь сплошной поверхности отливки, см²</th>
    </tr>
    <tr>
      <td>≤25</td>
      <td>>25</td>
      <td>>100</td>
      <td>>225</td>
      <td>>400</td>
      <td>>1000</td>
      <td>>1600</td>
    </tr>
  </thead>            

  <tbody>
      <tr classname="groupStart">
        <td colspan="8">В песчаные формы</td>
      </tr>
      <tr>
        <td>АЛ2</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
      </tr>

      <tr>
        <td>МЛ5</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>4,5</td>
        <td>5,0</td>
        <td>6,0</td>
        <td>7,0</td>
      </tr>

      <tr>
        <td>Чугун</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td>7,0</td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">В кокиль</td>
      </tr>
      <tr>
        <td>АЛ2</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>

      <tr>
        <td>МЛ5</td>
        <td>3,0</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td></td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">В оболочковые формы</td>
      </tr>
      <tr>
        <td>Алюминиевые</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
      </tr>
      <tr>
        <td>Медные</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>3,0</td>
        <td>3,5</td>
        <td>4,0</td>
        <td>4,0</td>
        <td></td>
      </tr>
      <tr>
        <td>Сталь</td>
        <td>2,0</td>
        <td>2,0</td>
        <td>4,0</td>
        <td>4,0</td>
        <td>5,0</td>
        <td>6,0</td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">Под давлением</td>
      </tr>
      <tr>
        <td>Оловянистые</td>
        <td>0,6</td>
        <td>0,7</td>
        <td>1,1</td>
        <td>1,5</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Цинковые</td>
        <td>0,8</td>
        <td>1,0</td>
        <td>1,5</td>
        <td>2,0</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Магниевые</td>
        <td>1,3</td>
        <td>1,8</td>
        <td>2,5</td>
        <td>3,0</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Алюминиевые</td>
        <td>1,0</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>4,0</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td>Медные</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>3,0</td>
        <td>3,5</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>

      <tr classname="groupStart">
        <td colspan="8">По выплавляемым моделям</td>
      </tr>
      <tr>
        <td>Сталь</td>
        <td>1,5</td>
        <td>2,0</td>
        <td>2,5</td>
        <td>3,0</td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>

/* Основные стили таблицы как в прошлых примерах */

/* Конкретно в этой таблице нужна первая колонка пошире, задаём ей минимальную ширину */
th:first-child {
  min-width: 200px;
}

/* Увеличенный верхний отступ между группами */
tr.groupStart td {
  padding-top: 18px;
}

/* По умолчанию сдвигаем все первые ячейки, если они в теле таблицы и не вложены в .groupStart */
tbody tr:not(.groupStart) td:first-child {
  padding-left: 18px;
}

.borderBottom {
  border-bottom: 1px solid;
}

Лучше не исполь­зо­вать таб­лич­ные теги в пап­ках писем и дру­гих интер­фейс­ных спис­ках, иначе код ста­нет гро­мозд­ким и неуправ­ля­е­мым. Тех­но­ло­гич­нее исполь­зо­вать обыч­ные дивы.

ХТМЛ‑таб­лицы — хруп­кий мате­риал. Они под­хо­дят для спра­воч­ных таб­лиц, но за пре­де­лами этой задачи начи­на­ются про­блемы. Ори­ен­ти­ро­ваться в струк­туре таб­лич­ных тегах заметно слож­нее, чем в струк­туре обыч­ных дивов. В таб­ли­цах тяжело управ­лять отсту­пами между ячей­ками и выстро­ить надёж­ную и гиб­кую систему отступов.

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

<h2>Входящие</h2>

<div class="mailbox">
  <div class="mailRow">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">☆</button>
      <span class="mailRow__sender">Яндекс.Практикум</span>
      <strong class="mailRow__subj">Платёж успешно выполнен</strong>
      <span class="mailRow__date">13 августа</span>
    </div>
  </div>

  <div class="mailRow is__active">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">☆</button>
      <span class="mailRow__sender">hoster.by</span>
      <span class="mailRow__subj">Дарим наггетсы за участие в опросе</span>
      <span class="mailRow__date">10 августа</span>
    </div>

    <div class="mailRow__in">
      <h1>Дарим наггетсы за участие в опросе</h1>
      <p>Привет! Вы нас может уже и не помните, а вот мы вас частенько вспоминаем.</p>
      <p>Нет времени объяснять — нам нужно всего 6 минут вашего времени, чтобы узнать, как вы к нам относитесь. За ответы на вопросы подарим промокод на бесплатные наггетсы от наших друзей из Burger King.</p>
      <a href="#">Ответить на вопросы</a>
    </div>
  </div>

  <div class="mailRow">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">★</button>
      <span class="mailRow__sender">Фонотека</span>
      <span class="mailRow__subj">Кругосветка за четыре дня: -30% на немецкий краут, американский блюз, японский винил</span>
      <span class="mailRow__date">9 августа</span>
    </div>
  </div>

  <-- … -->
</div>

body {
  font-family: Helvetica;
}

.mailbox {
  font-size: .8em;
}

.mailRow {
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.mailRow.is__active {
  background: rgba(0, 0, 0, .05)
}

.mailRow__preview {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .15em;
  flex-wrap: nowrap;
  white-space: pre-wrap;
  padding: .3em .5em .7em;
  box-sizing: border-box;
}

.mailRow__sender {
  width: 25%;
}

/* Тут рюк с многоточием для длинных строк */
.mailRow__subj {
  flex-grow: 1;

  /* Ограничиваем ширину */
  max-width: 50%;

  /* Запрещаем перенос строки */
  white-space: nowrap;

  /* Обрезаем всё, что вылезло за ширину, а текст обрезаем многоточием */
  overflow: hidden;
  text-overflow: ellipsis;
}

.mailRow__date {
  flex-grow: 1;
  text-align: right;
}

.mailRow__in {
  width: 100%;
  font-size: .9em;
  padding: 1em 1em 2em;
  box-sizing: border-box;
}

.mailRow h1 {
  margin-top: 0;
}

.mailRow__in a {
  color: inherit;
}

/* Сбрасываем стандартные стили кнопки */
.btnStar {
  border: none;
  background: none;
}

Лучше не использовать табличные теги в папках писем и других интерфейсных списках, иначе код станет громоздким и неуправляемым. Технологичнее использовать обычные дивы.

ХТМЛ‑таблицы — хрупкий материал. Они подходят для справочных таблиц, но за пределами этой задачи начинаются проблемы. Ориентироваться в структуре табличных тегах заметно сложнее, чем в структуре обычных дивов. В таблицах тяжело управлять отступами между ячейками и выстроить надёжную и гибкую систему отступов.

В интерфейсах лучше не городить табличную структуру, а использовать обычные дивы. Управлять их отступами и позицией гораздо проще — в дивах работают все ЦСС‑свойства, в отличие от табличных тегов.

<h2>Входящие</h2>

<div class="mailbox">
  <div class="mailRow">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">☆</button>
      <span class="mailRow__sender">Яндекс.Практикум</span>
      <strong class="mailRow__subj">Платёж успешно выполнен</strong>
      <span class="mailRow__date">13 августа</span>
    </div>
  </div>

  <div class="mailRow is__active">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">☆</button>
      <span class="mailRow__sender">hoster.by</span>
      <span class="mailRow__subj">Дарим наггетсы за участие в опросе</span>
      <span class="mailRow__date">10 августа</span>
    </div>

    <div class="mailRow__in">
      <h1>Дарим наггетсы за участие в опросе</h1>
      <p>Привет! Вы нас может уже и не помните, а вот мы вас частенько вспоминаем.</p>
      <p>Нет времени объяснять — нам нужно всего 6 минут вашего времени, чтобы узнать, как вы к нам относитесь. За ответы на вопросы подарим промокод на бесплатные наггетсы от наших друзей из Burger King.</p>
      <a href="#">Ответить на вопросы</a>
    </div>
  </div>

  <div class="mailRow">
    <div class="mailRow__preview">
      <input type="checkbox">
      <button type="button" class="btnStar">★</button>
      <span class="mailRow__sender">Фонотека</span>
      <span class="mailRow__subj">Кругосветка за четыре дня: -30% на немецкий краут, американский блюз, японский винил</span>
      <span class="mailRow__date">9 августа</span>
    </div>
  </div>

  <-- … -->
</div>

body {
  font-family: Helvetica;
}

.mailbox {
  font-size: .8em;
}

.mailRow {
  border-bottom: 1px solid rgba(0, 0, 0, .05);
}

.mailRow.is__active {
  background: rgba(0, 0, 0, .05)
}

.mailRow__preview {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .15em;
  flex-wrap: nowrap;
  white-space: pre-wrap;
  padding: .3em .5em .7em;
  box-sizing: border-box;
}

.mailRow__sender {
  width: 25%;
}

/* Тут рюк с многоточием для длинных строк */
.mailRow__subj {
  flex-grow: 1;

  /* Ограничиваем ширину */
  max-width: 50%;

  /* Запрещаем перенос строки */
  white-space: nowrap;

  /* Обрезаем всё, что вылезло за ширину, а текст обрезаем многоточием */
  overflow: hidden;
  text-overflow: ellipsis;
}

.mailRow__date {
  flex-grow: 1;
  text-align: right;
}

.mailRow__in {
  width: 100%;
  font-size: .9em;
  padding: 1em 1em 2em;
  box-sizing: border-box;
}

.mailRow h1 {
  margin-top: 0;
}

.mailRow__in a {
  color: inherit;
}

/* Сбрасываем стандартные стили кнопки */
.btnStar {
  border: none;
  background: none;
}

Формы

ХТМЛ поз­во­ляет свер­стать и базово настро­ить пове­де­ние формы.

Чтобы ожи­вить форму и отправ­лять дан­ные из неё на сер­вер, пона­до­бится сам сер­вер и допол­ни­тель­ное программирование.

Мы не будем подробно оста­нав­ли­ваться на про­грам­ми­ро­ва­нии форм — это выхо­дит далеко за рамки книги. Но научимся соби­рать дан­ные формы с помо­щью сер­виса «Формкип».

Можно и вовсе не вер­стать форму, а исполь­зо­вать сер­висы‑кон­струк­торы. В них вы соби­ра­ете форму из типо­вых эле­мен­тов, а затем полу­ча­ете кусок кода для встра­и­ва­ния формы на сайт. Чаще всего, формы соби­рают в Гугль‑ и Яндекс‑фор­мах или в «Формкипе».

Формы

ХТМЛ позволяет сверстать и базово настроить поведение формы.

Чтобы оживить форму и отправлять данные из неё на сервер, понадобится сам сервер и дополнительное программирование.

Мы не будем подробно останавливаться на программировании форм — это выходит далеко за рамки книги. Но научимся собирать данные формы с помощью сервиса «Формкип».

Можно и вовсе не верстать форму, а использовать сервисы‑конструкторы. В них вы собираете форму из типовых элементов, а затем получаете кусок кода для встраивания формы на сайт. Чаще всего, формы собирают в Гугль‑ и Яндекс‑формах или в «Формкипе».

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

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

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

Флексбоксы 

<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"

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