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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Отладка мобильной версии. Чтобы посмот­реть, как стра­ница выгля­дит на раз­ных экра­нах и мобиль­ных устрой­ствах, исполь­зуют отлад­чики мобиль­ной версии.

В Хроме отлад­чик спря­тан за кноп­кой Toggle Device Toolbar в веб‑инспек­торе. В Сафари — это отдель­ный режим, Responsive Design Mode.

Отлад­чик мобиль­ной вер­сии в Сафари откры­ва­ется с помо­щью ⌘+Control+R. В Хроме — с помо­щью ⌘+Option+I и после­ду­ю­щего ⌘+Shift+M.

Что дальше

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

Отладка мобильной версии. Чтобы посмотреть, как страница выглядит на разных экранах и мобильных устройствах, используют отладчики мобильной версии.

В Хроме отладчик спрятан за кнопкой Toggle Device Toolbar в веб‑инспекторе. В Сафари — это отдельный режим, Responsive Design Mode.

Отладчик мобильной версии в Сафари открывается с помощью ⌘+Control+R. В Хроме — с помощью ⌘+Option+I и последующего ⌘+Shift+M.

Что дальше

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

1
Модули

Тек­сто­вые модули 

Иллюстрации 

Таблицы 

Формы 

Псевдоклассы 

Псев­до­эле­менты ::after и ::before 

1
Модули

Текстовые модули 

Иллюстрации 

Таблицы 

Формы 

Псевдоклассы 

Псевдоэлементы ::after и ::before 

Текстовые модули

Чтобы свер­стать тек­сто­вый модуль, нужно задать шрифт, настро­ить кегль, интер­ли­ньяж, начер­та­ние и вырав­ни­ва­ние. За шрифт отве­чает ЦСС‑свой­ство font-family, за кегль и интер­ли­ньяж — font-size и line-height. Раз­бе­рём их подробнее.

The only easy day
was yesterday

Текстовые модули

Чтобы сверстать текстовый модуль, нужно задать шрифт, настроить кегль, интерлиньяж, начертание и выравнивание. За шрифт отвечает ЦСС‑свойство font-family, за кегль и интерлиньяж — font-size и line-height. Разберём их подробнее.

The only easy day
was yesterday

С помо­щью 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;
}
Скрыто 193 разворота
Закладки
Добавьте закладки
Ничего не нашлось