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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Иллюстрации

Иллю­стра­ции вер­стают тегом img, где атри­бут src — это путь до файла‑картинки.

Можно под­клю­чить кар­тинку с дру­гого сайта:

<span><img src="https://upload.wikimedia.org/wikipedia/commons/David_-_Napoleon_crossing_the_Alps_-_Malmaison1.jpg"></span>

А можно сослаться на файл, лежа­щий рядом с вашей ХТМЛ‑стран­цей, напри­мер, в сосед­ней папке images. В этом слу­чае не пишут пол­ный адрес сайта, только путь до кар­тинки отно­си­тельно ХТМЛ‑файла:

<span><img src="img/napoleon.jpg"></span>

Если доба­вить в начало пути слэш, можно ука­зать путь до кар­тинки от кор­не­вой папки сайта. Но это рабо­тает только когда сайт раз­ме­щён на сер­вере. О раз­ме­ще­нии на сер­вере мы пого­во­рим дальше в книге.

<span><img src="/img/1812/napoleon.jpg"></span>

По умолчанию ширина картинки на странице будет равна ширине файла картинки. Файлы в большом разрешении сломают вёрстку, поэтому лучше сразу сделать картинку «резиновой», задав ей display: block; и width в процентах от родителя.

Иллюстрации

Иллюстрации верстают тегом img, где атрибут src — это путь до файла‑картинки.

Можно подключить картинку с другого сайта:

<span><img src="https://upload.wikimedia.org/wikipedia/commons/David_-_Napoleon_crossing_the_Alps_-_Malmaison1.jpg"></span>

А можно сослаться на файл, лежащий рядом с вашей ХТМЛ‑странцей, например, в соседней папке images. В этом случае не пишут полный адрес сайта, только путь до картинки относительно ХТМЛ‑файла:

<span><img src="img/napoleon.jpg"></span>

Если добавить в начало пути слэш, можно указать путь до картинки от корневой папки сайта. Но это работает только когда сайт размещён на сервере. О размещении на сервере мы поговорим дальше в книге.

<span><img src="/img/1812/napoleon.jpg"></span>

По умолчанию ширина картинки на странице будет равна ширине файла картинки. Файлы в большом разрешении сломают вёрстку, поэтому лучше сразу сделать картинку «резиновой», задав ей display: block; и width в процентах от родителя.

Михаил Врубель. Шестикрылый Серафим. 1904

Михаил Врубель. Шестикрылый Серафим. 1904

Иллюстрация с подписью

Иллю­стра­ции с подпи­ся­ми удобно вер­стать с помо­щью обёртки figure и подпи­си figcaption:

<figure class="image">
  <img src="images/vrubel.jpg">
  <figcaption>
    Михаил Врубель. Шестикрылый Серафим. 1904
  </figcaption>
</figure>

.image {
  width: 100%;
}

.image img {
  display: block;
  width: 100%;
  margin-bottom: 9px;
}

Обёртка создаёт из иллю­стра­ции и подпи­си еди­ный модуль. Стили кар­тинки и подпи­си настра­и­ва­ются один раз, затем модуль можно встра­и­вать в раз­ные места сайта.

Поста­вить под­пись сбоку можно флек­с­бок­сом — осо­быми свой­ствами для рас­кла­ды­ва­ния эле­мен­тов внутри кон­тей­нера. Мы раз­бе­рём флек­с­бокс дальше в книге, а пока можно запом­нить свой­ства как заклинание:

.image {
  display: flex; /* Ставим вложенные элементы в ряд */
  gap: 9px; /* Задаём отступы между элементами в ряду отдельный отступ у img больше не нужен */
}

.image figcaption {
  max-width: 30%; /* Подпись лучше ограничить по ширине  */
}

Флексбоксы 

Михаил Врубель. Шестикрылый Серафим. 1904

Михаил Врубель. Шестикрылый Серафим. 1904

Иллюстрация с подписью

Иллюстрации с подписями удобно верстать с помощью обёртки figure и подписи figcaption:

<figure class="image">
  <img src="images/vrubel.jpg">
  <figcaption>
    Михаил Врубель. Шестикрылый Серафим. 1904
  </figcaption>
</figure>

.image {
  width: 100%;
}

.image img {
  display: block;
  width: 100%;
  margin-bottom: 9px;
}

Обёртка создаёт из иллюстрации и подписи единый модуль. Стили картинки и подписи настраиваются один раз, затем модуль можно встраивать в разные места сайта.

Поставить подпись сбоку можно флексбоксом — особыми свойствами для раскладывания элементов внутри контейнера. Мы разберём флексбокс дальше в книге, а пока можно запомнить свойства как заклинание:

.image {
  display: flex; /* Ставим вложенные элементы в ряд */
  gap: 9px; /* Задаём отступы между элементами в ряду отдельный отступ у img больше не нужен */
}

.image figcaption {
  max-width: 30%; /* Подпись лучше ограничить по ширине  */
}

Флексбоксы 

Атрибут alt

У тега img есть атри­бут alt — это аль­тер­на­тив­ный текст, кото­рый опи­сы­вает, что изоб­ра­жено на картинке.

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

<img 
  src="https://cats.com/persian/9001.jpg" 
  alt="Рыжая персидская кошка точит когти об когтеточку">

На альт смот­рят поис­ко­вые роботы, чтобы лучше понять содер­жи­мое стра­ницы и чтобы отдельно про­дви­гать кар­тинку по клю­че­вым сло­вам из альта в поиске.

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

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

Атрибут alt

У тега img есть атрибут alt — это альтернативный текст, который описывает, что изображено на картинке.

Альт нужен на случай, когда картинка по ссылке недоступна, а ещё для помощи людям с проблемами зрения, которые используют программы для чтения с экрана.

<img 
  src="https://cats.com/persian/9001.jpg" 
  alt="Рыжая персидская кошка точит когти об когтеточку">

На альт смотрят поисковые роботы, чтобы лучше понять содержимое страницы и чтобы отдельно продвигать картинку по ключевым словам из альта в поиске.

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

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

Таблицы

Таб­лица состоит из строк tr (table row) и ячеек td (table data cell) или th (table heading). Ячейки можно вкла­ды­вать только в строки и нельзя напря­мую в тег таблицы.

<table>
  <tr>
    <td>…</td>
    <td>…</td>
    <td>…</td>
  </tr>

  <tr>
    <td>…</td>
    <td>…</td>
    <td>…</td>
  </tr>
</table>

Для нагляд­но­сти под­све­тим гра­ницы ячеек:

td, th {
  background: #ebebeb;
}

Чтобы отдельно выде­лить шапку, тело или под­вал‑итог таб­лицы, исполь­зуют обёртки: thead, tbody и tfoot. С этими обёрт­ками проще ори­ен­ти­ро­ваться в коде и сти­ли­зо­вать отдель­ные части таблицы.

<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>

  <tbody>
    <tr>…</tr>
    
    <tr>…</tr>
  </tbody>

  <tfoot>
    <tr>
      <td>…</td>
      <td>…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

Атри­бут colspan ска­жет ячейке зани­мать несколько колонок:

<table>
  <thead>
    …
  </thead>

  <tbody>
    …
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

Атри­бут rowspan ска­жет зани­мать несколько строк:

<table>
  <thead>
    …
  </thead>

  <tbody>
    <tr>
      <td rowspan="2">…</td>
      <td>…</td>
      <td>…</td>
    </tr>

    <!-- 
      Если в предыдущей строке первая ячейка занимает две строки, то в следующей строке первую ячейку нужно убрать 
    -->
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <td colspan="2">…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

При сти­ли­за­ции про­стых таб­лиц можно обхо­диться без лиш­них клас­сов и сти­ли­зо­вать напря­мую по тегам — внутри пра­вильно свёр­стан­ной таб­лицы все­гда будет струк­тура из tr и вло­жен­ных td/th.

table {
  font-family: Helvetica, sans-serif;
  border-collapse: collapse; /* Особое свойство убирает отступы между ячейками */
}

/* Подкрасим нечётные строки таблицы */
tr:nth-child(odd) {
  background: #e5f5ff;
}

tfoot tr {
  border-top: 1px solid #e5f5ff;
}

td,
th {
  text-align: left;
  padding: 8px 4px;
}

tfoot td,
td:last-child,
th:last-child {
  text-align: right;  
}

Раньше из‑за технических ограничений целые сайты верстали как большую таблицу из колонок и строк. Сейчас появились более удобные инструменты вёрстки и таблицы используют только по их прямому назначению — для представления табличных данных

Таблицы

Таблица состоит из строк tr (table row) и ячеек td (table data cell) или th (table heading). Ячейки можно вкладывать только в строки и нельзя напрямую в тег таблицы.

<table>
  <tr>
    <td>…</td>
    <td>…</td>
    <td>…</td>
  </tr>

  <tr>
    <td>…</td>
    <td>…</td>
    <td>…</td>
  </tr>
</table>

Раньше из‑за технических ограничений целые сайты верстали как большую таблицу из колонок и строк. Сейчас появились более удобные инструменты вёрстки и таблицы используют только по их прямому назначению — для представления табличных данных

Для наглядности подсветим границы ячеек:

td, th {
  background: #ebebeb;
}

Чтобы отдельно выделить шапку, тело или подвал‑итог таблицы, используют обёртки: thead, tbody и tfoot. С этими обёртками проще ориентироваться в коде и стилизовать отдельные части таблицы.

<table>
  <thead>
    <tr>
      <th>…</th>
      <th>…</th>
      <th>…</th>
    </tr>
  </thead>

  <tbody>
    <tr>…</tr>
    
    <tr>…</tr>
  </tbody>

  <tfoot>
    <tr>
      <td>…</td>
      <td>…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

Атрибут colspan скажет ячейке занимать несколько колонок:

<table>
  <thead>
    …
  </thead>

  <tbody>
    …
  </tbody>

  <tfoot>
    <tr>
      <td colspan="2">…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

Атрибут rowspan скажет занимать несколько строк:

<table>
  <thead>
    …
  </thead>

  <tbody>
    <tr>
      <td rowspan="2">…</td>
      <td>…</td>
      <td>…</td>
    </tr>

    <!-- 
      Если в предыдущей строке первая ячейка занимает две строки, то в следующей строке первую ячейку нужно убрать 
    -->
    <tr>
      <td>…</td>
      <td>…</td>
    </tr>
  </tbody>
  
  <tfoot>
    <tr>
      <td colspan="2">…</td>
      <td>…</td>
    </tr>
  </tfoot>
</table>

При стилизации простых таблиц можно обходиться без лишних классов и стилизовать напрямую по тегам — внутри правильно свёрстанной таблицы всегда будет структура из tr и вложенных td/th.

table {
  font-family: Helvetica, sans-serif;
  border-collapse: collapse; /* Особое свойство убирает отступы между ячейками */
}

/* Подкрасим нечётные строки таблицы */
tr:nth-child(odd) {
  background: #e5f5ff;
}

tfoot tr {
  border-top: 1px solid #e5f5ff;
}

td,
th {
  text-align: left;
  padding: 8px 4px;
}

tfoot td,
td:last-child,
th:last-child {
  text-align: right;  
}

<table>
  <thead>
    <tr>
      <th>Год</th>
      <th>Страна</th>
      <th>Название</th>
      <th>Режиссёр</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1968</td>
      <td>СССР</td>
      <td>Золотой телёнок</td>
      <td>Михаил Швейцер</td>
    </tr>

    <tr>
      <td>1969</td>
      <td>Чехословакия</td>
      <td>Командовать парадом буду я</td>
      <td>Ярослав Мах</td>
    </tr>

    <tr>
      <td>1974</td>
      <td>Венгрия</td>
      <td>Золотой телёнок</td>
      <td>Миклош Синетар</td>
    </tr>

    <tr>
      <td>1993</td>
      <td>Россия, Франция</td>
      <td>Мечты идиота</td>
      <td>Василий Пичул</td>
    </tr>

    <tr>
      <td>2006</td>
      <td>Россия</td>
      <td>Золотой телёнок</td>
      <td>Ульяна Шилкина</td>
    </tr>
  </tbody>
</table>

table {
  /*
  * Убираем отступы между
  * ячейками таблицы.
  */
  border-collapse: collapse;
}

td {
  /*
  * Настраиваем шрифт для ячеек:
  * Бюросанс, 14/17 пк.
  */
  font-family: Bureausans, Helvetica Neue,
    sans-serif;
  font-size: 14px;
  line-height: 17px;
  /*
  * Добавляем ячейкам отступы:
  * 14 пк справа, 7 пк сверху.
  */
  padding: 7px 14px 0 0;
  /*
  * Выравниваем содержимое ячеек
  * влево вверх.
  */
  text-align: left;
  vertical-align: top;
}

thead th {
  /*
  * Настраиваем шрифт для шапки:
  * жирный Бюросанс, 14/17 пк.
  */
  font-family: Bureausans, Helvetica Neue,
    sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  /*
  * Добавляем нижнюю рамку к шапке.
  * Толщиной в 0,5 пикселя, сплошная,
  * черного цвета с прозрачностью 25%.
  */
  border-bottom: .5px solid rgba(0, 0, 0, .25);
  /*
  * Добавляем ячейкам шапки отступ
  * 14 пк справа.
  */
  padding: 0 14px 0 0;
  /*
  * Выравниваем содержимое шапки
  * влево вниз.
  */
  text-align: left;
  vertical-align: bottom;
}
ГодСтранаНазваниеРежиссёр
1968СССРЗоло­той телёнокМихаил Швейцер
1969ЧехословакияКоман­до­вать пара­дом буду яЯро­слав Мах
1974ВенгрияЗоло­той телёнокМик­лош Синетар
1993Рос­сия, ФранцияМечты идиотаВаси­лий Пичул
2006РоссияЗоло­той телёнокУльяна Шилкина

Свер­стаем ком­пакт­ную таб­лицу с экра­ни­за­ци­ями погони Остапа Бен­дера за граж­да­ни­ном Корейко.

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

Попробуйте скопировать код и поэксперименти­ровать со стилями таблицы

ГодСтранаНазваниеРежиссёр
1968СССРЗолотой телёнокМихаил Швейцер
1969ЧехословакияКомандовать парадом буду яЯрослав Мах
1974ВенгрияЗолотой телёнокМиклош Синетар
1993Россия, ФранцияМечты идиотаВасилий Пичул
2006РоссияЗолотой телёнокУльяна Шилкина

Сверстаем компактную таблицу с экранизациями погони Остапа Бендера за гражданином Корейко.

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

<table>
  <thead>
    <tr>
      <th>Год</th>
      <th>Страна</th>
      <th>Название</th>
      <th>Режиссёр</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>1968</td>
      <td>СССР</td>
      <td>Золотой телёнок</td>
      <td>Михаил Швейцер</td>
    </tr>

    <tr>
      <td>1969</td>
      <td>Чехословакия</td>
      <td>Командовать парадом буду я</td>
      <td>Ярослав Мах</td>
    </tr>

    <tr>
      <td>1974</td>
      <td>Венгрия</td>
      <td>Золотой телёнок</td>
      <td>Миклош Синетар</td>
    </tr>

    <tr>
      <td>1993</td>
      <td>Россия, Франция</td>
      <td>Мечты идиота</td>
      <td>Василий Пичул</td>
    </tr>

    <tr>
      <td>2006</td>
      <td>Россия</td>
      <td>Золотой телёнок</td>
      <td>Ульяна Шилкина</td>
    </tr>
  </tbody>
</table>

table {
  /*
  * Убираем отступы между
  * ячейками таблицы.
  */
  border-collapse: collapse;
}

td {
  /*
  * Настраиваем шрифт для ячеек:
  * Бюросанс, 14/17 пк.
  */
  font-family: Bureausans, Helvetica Neue,
    sans-serif;
  font-size: 14px;
  line-height: 17px;
  /*
  * Добавляем ячейкам отступы:
  * 14 пк справа, 7 пк сверху.
  */
  padding: 7px 14px 0 0;
  /*
  * Выравниваем содержимое ячеек
  * влево вверх.
  */
  text-align: left;
  vertical-align: top;
}

thead th {
  /*
  * Настраиваем шрифт для шапки:
  * жирный Бюросанс, 14/17 пк.
  */
  font-family: Bureausans, Helvetica Neue,
    sans-serif;
  font-weight: bold;
  font-size: 14px;
  line-height: 17px;
  /*
  * Добавляем нижнюю рамку к шапке.
  * Толщиной в 0,5 пикселя, сплошная,
  * черного цвета с прозрачностью 25%.
  */
  border-bottom: .5px solid rgba(0, 0, 0, .25);
  /*
  * Добавляем ячейкам шапки отступ
  * 14 пк справа.
  */
  padding: 0 14px 0 0;
  /*
  * Выравниваем содержимое шапки
  * влево вниз.
  */
  text-align: left;
  vertical-align: bottom;
}

Попробуйте скопировать код и поэксперименти­ровать со стилями таблицы

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