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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

С помо­щью font-family бра­у­зер пони­мает, какой шрифт исполь­зо­вать для тек­ста элемента:

h3 {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  font-family: Georgia, Times, Times New Roman, serif;
}

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

В конце списка ука­зы­ваем клю­че­вое слово, опи­сы­ва­ю­щее семей­ство шрифта: serif — с засеч­ками, sans‑serif — без засе­чек, monospace — моно­ши­рин­ный. Если бра­у­зер добе­рётся до него, то возь­мёт систем­ный шрифт соот­вет­ству­ю­щего семейства.

Чтобы бра­у­зер мог исполь­зо­вать ука­зан­ный шрифт на стра­нице, этот шрифт дол­жен быть либо уже уста­нов­лен в опе­ра­ци­он­ной системе, либо явно под­клю­чён к стра­нице. Вхо­дя­щие в стан­дарт­ный набор опе­ра­ци­он­ной системы шрифты назы­вают веб‑без­опас­ными: ука­зы­ваем их в font-family и всё рабо­тает, потому что они уже уста­нов­лены у 99% поль­зо­ва­те­лей. К таким шриф­там отно­сятся, напри­мер, Verdana, Arial, Georgia и Times New Roman.

Коллекция веб‑безопасных шрифтов

Глава третья

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

Глава третья

За год до того как Паниковский нарушил конвенцию, проникнув в чужой эксплуатационный участок, в городе Арбатове появился первый автомобиль.

С помощью font-family браузер понимает, какой шрифт использовать для текста элемента:

h3 {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

p {
  font-family: Georgia, Times, Times New Roman, serif;
}

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

В конце списка указываем ключевое слово, описывающее семейство шрифта: serif — с засечками, sans‑serif — без засечек, monospace — моноширинный. Если браузер доберётся до него, то возьмёт системный шрифт соответствующего семейства.

Чтобы браузер мог использовать указанный шрифт на странице, этот шрифт должен быть либо уже установлен в операционной системе, либо явно подключён к странице. Входящие в стандартный набор операционной системы шрифты называют веб‑безопасными: указываем их в font-family и всё работает, потому что они уже установлены у 99% пользователей. К таким шрифтам относятся, например, Verdana, Arial, Georgia и Times New Roman.

Коллекция веб‑безопасных шрифтов

Под­бе­рём шрифты для поста в блоге, исполь­зуя веб‑без­опас­ные Helvetica и Georgia. Нач­нём с разметки:

<article>
  <h1>Когда использовать double вместо instance_double?</h1>
  
  <p>Напомню разницу: <code>instance_double</code> может уронить тест, если застабленные методы отсутствуют в указанном классе, <code>double</code> на всё пофиг.</p>
  
  <p>По моему опыту, всегда лучше брать <code>instance_double</code>, а <code>double</code> использовать только для каких-то незначительных штук со стабильным АПИ. Например, для писем:</p>
  
  <!-- pre — preformatted text, заранее отформатированный текст. Обычно его используют для примеров кода или ASCII-арта -->
  <pre>
  <code>allow(DeadlineMailer)
    .to receive(:last_deadline_warning)
    .and_return(double(:email, deliver_later: true))
  </code>
  </pre>
</article>

Зада­дим основ­ной шрифт стра­ницы — Helvetica:

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

Зада­дим шрифт для заго­лов­ков — Georgia:

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3 {
  font-family: Georgia, Times, Times New Roman, serif;
}

Зада­дим шрифт для кода:

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3 {
  font-family: Georgia, Times, Times New Roman, serif;
}

code {
  font-family: Consolas, Monaco, Menlo, monospace;
}

И уве­ли­чим кегль заго­лов­ков пер­вого уровня с помо­щью font-size, о кото­ром мы рас­ска­жем дальше:

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3 {
  font-family: Georgia, Times, Times New Roman, serif;
}

h1 {
  font-size: 2.25em;
}

code {
  font-family: Consolas, Monaco, Menlo, monospace;
}

Подберём шрифты для поста в блоге, используя веб‑безопасные Helvetica и Georgia. Начнём с разметки:

<article>
  <h1>Когда использовать double вместо instance_double?</h1>
  
  <p>Напомню разницу: <code>instance_double</code> может уронить тест, если застабленные методы отсутствуют в указанном классе, <code>double</code> на всё пофиг.</p>
  
  <p>По моему опыту, всегда лучше брать <code>instance_double</code>, а <code>double</code> использовать только для каких-то незначительных штук со стабильным АПИ. Например, для писем:</p>
  
  <!-- pre — preformatted text, заранее отформатированный текст. Обычно его используют для примеров кода или ASCII-арта -->
  <pre>
  <code>allow(DeadlineMailer)
    .to receive(:last_deadline_warning)
    .and_return(double(:email, deliver_later: true))
  </code>
  </pre>
</article>

Зададим основной шрифт страницы — Helvetica:

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

Зададим шрифт для заголовков — Georgia:

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3 {
  font-family: Georgia, Times, Times New Roman, serif;
}

Зададим шрифт для кода:

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3 {
  font-family: Georgia, Times, Times New Roman, serif;
}

code {
  font-family: Consolas, Monaco, Menlo, monospace;
}

И увеличим кегль заголовков первого уровня с помощью font-size, о котором мы расскажем дальше:

body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3 {
  font-family: Georgia, Times, Times New Roman, serif;
}

h1 {
  font-size: 2.25em;
}

code {
  font-family: Consolas, Monaco, Menlo, monospace;
}

Подключение нестандартных шрифтов. Один из самых про­стых и попу­ляр­ных сай­тов с бес­плат­ными шриф­тами — Гугль‑фонтс. Его шрифты под­клю­ча­ются к сайту за пять минут.

Выбе­рем нуж­ный нам шрифт и его начертания.

Выде­лим полу­чен­ный код и скопируем.

Вста­вим его в <head> нашей страницы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="preconnect"
      href="https://fonts.googleapis.com">
    <link rel="preconnect"
      href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Rubik&display=swap">
  </head>
  <body>
  </body>
</html>

Выде­лим код с font-family и скопируем.

Вста­вим его в стили:

body {
  font-family: Rubik, sans-serif;
}

Гугль‑фонтс

Советуем сразу отфильтровать шрифты, поддерживающие кириллицу

Light 300 и Regular 400 — это вес начертания, его «жирность». Italic — курсив

Гугль добавляет ссылку на стили и заклинания, чтобы шрифты грузились быстрее

Шрифты подключены, но пока не работают: браузер не знает, где их использовать

Начертаниями управляют font‑weight и font‑style, о которых мы расскажем позже

Если шрифт не загрузится, браузер возьмёт Гельветику или Ариал

Советуем сразу отфильтровать шрифты, поддерживающие кириллицу

Light 300 и Regular 400 — это вес начертания, его «жирность». Italic — курсив

Гугль добавляет ссылку на стили и заклинания, чтобы шрифты грузились быстрее

Шрифты подключены, но пока не работают: браузер не знает, где их использовать

Начертаниями управляют font‑weight и font‑style, о которых мы расскажем позже

Если шрифт не загрузится, браузер возьмёт Гельветику или Ариал

Подключение нестандартных шрифтов. Один из самых простых и популярных сайтов с бесплатными шрифтами — Гугль‑фонтс. Его шрифты подключаются к сайту за пять минут.

Выберем нужный нам шрифт и его начертания.

Выделим полученный код и скопируем.

Вставим его в <head> нашей страницы:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link rel="preconnect"
      href="https://fonts.googleapis.com">
    <link rel="preconnect"
      href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Rubik&display=swap">
  </head>
  <body>
  </body>
</html>

Выделим код с font-family и скопируем.

Вставим его в стили:

body {
  font-family: Rubik, sans-serif;
}

Гугль‑фонтс

Подключение собственных шрифтов

Можно под­клю­чить к стра­нице свой файл шрифта. Кон­струк­ция @font-face объ­яв­ляет бра­у­зеру новый шрифт, его назва­ние, фор­мат и путь до файла.

Если кача­ете шрифт из интер­нета — убе­ди­тесь, что у вас есть лицен­зия для исполь­зо­ва­ния в вебе. Для неко­то­рых шриф­тов веб‑лицен­зия бесплатна.

Крайне не сове­туем исполь­зо­вать «пират­ские» шрифты и шрифты, в пра­вах исполь­зо­ва­ния кото­рых вы не уве­рены. Это может обер­нуться не только репу­та­ци­он­ными поте­рями, но и реаль­ным судеб­ным раз­би­ра­тель­ством — круп­ные шриф­то­вые ком­па­нии сегодня активно мони­то­рят веб на пред­мет непра­во­мер­ного исполь­зо­ва­ния своих шрифтов.

@font-face {
  font-family: 'My Custom Font'; /* Это название будет использоваться для применения шрифта */
  src: url('fonts/myCustomFont.woff2') format('woff2'); 
  /* Путь до файла шрифта с указанием формата — рядом с ЦСС-файлом в папке fonts */
}

/* Для начертаний конструкция дублируется, но уже с указанием другого файла и нужного font-weight, название остаётся без изменений */
@font-face {
  font-family: 'My Custom Font';
  src: url('fonts/myCustomFont-Light.woff2') format('woff2');
  font-weight: 100;
}

/* Используем объявленный шрифт на странице */
body {
  font-family: 'My Custom Font', sans-serif;
  font-weight: 100;
}

У подключения собственных шрифтов есть много нюансов, выходящих за рамки этой книги. Перед подключением ознакомьтесь с документацией: @font‑face

Подключение собственных шрифтов

Можно подключить к странице свой файл шрифта. Конструкция @font-face объявляет браузеру новый шрифт, его название, формат и путь до файла.

Если качаете шрифт из интернета — убедитесь, что у вас есть лицензия для использования в вебе. Для некоторых шрифтов веб‑лицензия бесплатна.

Крайне не советуем использовать «пиратские» шрифты и шрифты, в правах использования которых вы не уверены. Это может обернуться не только репутационными потерями, но и реальным судебным разбирательством — крупные шрифтовые компании сегодня активно мониторят веб на предмет неправомерного использования своих шрифтов.

@font-face {
  font-family: 'My Custom Font'; /* Это название будет использоваться для применения шрифта */
  src: url('fonts/myCustomFont.woff2') format('woff2'); 
  /* Путь до файла шрифта с указанием формата — рядом с ЦСС-файлом в папке fonts */
}

/* Для начертаний конструкция дублируется, но уже с указанием другого файла и нужного font-weight, название остаётся без изменений */
@font-face {
  font-family: 'My Custom Font';
  src: url('fonts/myCustomFont-Light.woff2') format('woff2');
  font-weight: 100;
}

/* Используем объявленный шрифт на странице */
body {
  font-family: 'My Custom Font', sans-serif;
  font-weight: 100;
}

У подключения собственных шрифтов есть много нюансов, выходящих за рамки этой книги. Перед подключением ознакомьтесь с документацией: @font‑face

Единицы измерения размеров

В ЦСС еди­ницы изме­ре­ния бывают отно­си­тель­ными и абсо­лют­ными. Отно­си­тель­ные счи­та­ются отно­си­тельно чего‑то ещё:

  • em — отно­си­тельно кегля родителя;

  • rem — отно­си­тельно кегля у <html>;

  • vw — отно­си­тельно ширины экрана, 1vw — 1% ширины экрана;

  • vh — отно­си­тельно высоты экрана, 1vh — 1% высоты экрана;

  • % — отно­си­тельно зна­че­ния такого же свой­ства роди­теля, но с ред­кими исключениями.

Напри­мер, width: 50% задаст ширину рав­ную поло­вине ширины роди­теля. С дру­гой сто­роны, margin-left: 25% задаст левый отступ рав­ный чет­верти от ширины роди­теля, а не от его margin-left.

Абсо­лют­ные еди­ницы изме­ре­ния при­вя­заны к кон­крет­ным раз­ме­рам: 1cm на печати — это один «физи­че­ский» сан­ти­метр в реаль­ном мире, 1px на экране — это один вир­ту­аль­ный пик­сель вашего экрана.

Боль­шая часть абсо­лют­ных еди­ниц изме­ре­ния исполь­зу­ется при выводе стра­ницы на печать: для вывода на экран сан­ти­метры и дюймы кон­вер­ти­ру­ются в пик­сели и нико­гда не сов­па­дают с реаль­ными физи­че­скими еди­ни­цами. Поэтому для ука­за­ния точ­ных и кон­крет­ных раз­ме­ров на экране вы будете исполь­зо­вать пик­сели, px.

См. также:

Единицы измерения размеров

В ЦСС единицы измерения бывают относительными и абсолютными. Относительные считаются относительно чего‑то ещё:

  • em — относительно кегля родителя;

  • rem — относительно кегля у <html>;

  • vw — относительно ширины экрана, 1vw — 1% ширины экрана;

  • vh — относительно высоты экрана, 1vh — 1% высоты экрана;

  • % — относительно значения такого же свойства родителя, но с редкими исключениями.

Например, width: 50% задаст ширину равную половине ширины родителя. С другой стороны, margin-left: 25% задаст левый отступ равный четверти от ширины родителя, а не от его margin-left.

Абсолютные единицы измерения привязаны к конкретным размерам: 1cm на печати — это один «физический» сантиметр в реальном мире, 1px на экране — это один виртуальный пиксель вашего экрана.

Большая часть абсолютных единиц измерения используется при выводе страницы на печать: для вывода на экран сантиметры и дюймы конвертируются в пиксели и никогда не совпадают с реальными физическими единицами. Поэтому для указания точных и конкретных размеров на экране вы будете использовать пиксели, px.

См. также:

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