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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

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

Цитаты внутри тек­ста вер­стают тегом q.

Тег обо­ра­чи­вает содер­жи­мое в кавычки, сове­туем сразу отклю­чить это в ЦСС и рас­став­лять кавычки вруч­ную. Так проще рабо­тать с вло­жен­ными кавыч­ками: когда внутри цитаты есть слова в кавыч­ках, исполь­зуют дру­гой вид кавы­чек. А глав­ное — кавычки в тек­сте не поте­ря­ются при копи­ро­ва­нии, в отли­чие от ЦСС‑кавычек. 

<p>
  М. М. Бахтин писал: <q>«Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“»</q>.
<p>

q {
  /* Отключаем ЦСС-кавычки */
  quotes: none;

  /* Стилизуем по вкусу */
  font-style: italic;
}

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

М. М. Бахтин писал: «Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“».

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

Цитаты внутри текста верстают тегом q.

Тег оборачивает содержимое в кавычки, советуем сразу отключить это в ЦСС и расставлять кавычки вручную. Так проще работать с вложенными кавычками: когда внутри цитаты есть слова в кавычках, используют другой вид кавычек. А главное — кавычки в тексте не потеряются при копировании, в отличие от ЦСС‑кавычек. 

<p>
  М. М. Бахтин писал: <q>«Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“»</q>.
<p>

q {
  /* Отключаем ЦСС-кавычки */
  quotes: none;

  /* Стилизуем по вкусу */
  font-style: italic;
}

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

М. М. Бахтин писал: «Тришатов рассказывает подростку о своей любви к музыке и развивает перед ним замысел оперы: „Послушайте, любите вы музыку? Я ужасно люблю… Если бы я сочинял оперу, то, знаете, я бы взял сюжет из ,Фауста‘. Я очень люблю эту тему“».

Для блоч­ных цитат‑вре­зок исполь­зуют тег blockquote:

<p>…</p>

<blockquote> 
  «Клиент ставит задачу профессионалу. Он заказывает услугу и ждёт хороший сервис. Человеческие отношения построены на ожиданиях, и первым делом нужно узнать — чего же именно ждёт клиент»
</blockquote>

<p>…</p>

blockquote {
  margin: 1em 0; /* У тега есть маржины по умолчанию, переопределим на свои */
  font-size: 150%;
  font-style: italic;
}

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

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

Полу­чится чуть гро­моздко, зато надёжно и уни­вер­сально, а все теги под­хо­дят по смыслу, что хорошо для поис­ко­ви­ков и про­грамм чте­ния с экрана:

<p>…</p>

<figure class="quote">
  <blockquote>
    «Клиент ставит задачу профессионалу. Он заказывает услугу и ждёт хороший сервис. Человеческие отношения построены на ожиданиях, и первым делом нужно узнать — чего же именно ждёт клиент»
  </blockquote>

  <figcaption class="quote__caption">
    Артём Горбунов. <cite>«Что такое профессиональная этика?»</cite>
  </figcaption>
</figure>

<p>…</p>

/* Изолируем стили в классе */
.quote {
  /* Перебьём стандартные отступы figure */
  margin: 1em 0;
}

.quote blockquote {
  margin: 0;
  font-size: 150%;
  font-style: italic;
}

.quote__caption {
  margin-top: 0.43em;
  font-size: 0.777em;
}

/* По умолчанию тег cite добавляет курсив, почистим */
cite {
  font-style: inherit;
}

Что такое «доступность» в вебе?

Для блочных цитат‑врезок используют тег blockquote:

<p>…</p>

<blockquote> 
  «Клиент ставит задачу профессионалу. Он заказывает услугу и ждёт хороший сервис. Человеческие отношения построены на ожиданиях, и первым делом нужно узнать — чего же именно ждёт клиент»
</blockquote>

<p>…</p>

blockquote {
  margin: 1em 0; /* У тега есть маржины по умолчанию, переопределим на свои */
  font-size: 150%;
  font-style: italic;
}

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

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

Получится чуть громоздко, зато надёжно и универсально, а все теги подходят по смыслу, что хорошо для поисковиков и программ чтения с экрана:

<p>…</p>

<figure class="quote">
  <blockquote>
    «Клиент ставит задачу профессионалу. Он заказывает услугу и ждёт хороший сервис. Человеческие отношения построены на ожиданиях, и первым делом нужно узнать — чего же именно ждёт клиент»
  </blockquote>

  <figcaption class="quote__caption">
    Артём Горбунов. <cite>«Что такое профессиональная этика?»</cite>
  </figcaption>
</figure>

<p>…</p>

/* Изолируем стили в классе */
.quote {
  /* Перебьём стандартные отступы figure */
  margin: 1em 0;
}

.quote blockquote {
  margin: 0;
  font-size: 150%;
  font-style: italic;
}

.quote__caption {
  margin-top: 0.43em;
  font-size: 0.777em;
}

/* По умолчанию тег cite добавляет курсив, почистим */
cite {
  font-style: inherit;
}

Что такое «доступность» в вебе?

Фактоиды

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

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

Сайдноуты 

<div class="fact">
  <span class="fact__number">0,85</span>
  <span class="fact__caption">…</span>
</div>

.fact {
  display: flex;
  flex-direction: column;
}

.fact__number {
  font-size: 85px;
}

.fact__caption {
  font-size: 14px;
}
0,85

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

Фактоиды

Мы называем фактоидом любую крупную цифру с подписью или вынос в духе «а знаете ли вы, что». Фактоиды могут здорово оживить вёрстку, появляясь на полях — в сайдноутах — или внутри содержимого.

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

Сайдноуты 

<div class="fact">
  <span class="fact__number">0,85</span>
  <span class="fact__caption">…</span>
</div>

.fact {
  display: flex;
  flex-direction: column;
}

.fact__number {
  font-size: 85px;
}

.fact__caption {
  font-size: 14px;
}
0,85

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

Социокнопки

Соци­окнопки поз­во­ляют поде­литься стра­ни­цей в соц­се­тях и чатах.

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

Быст­рее и проще взять гото­вое реше­ние. Напри­мер, в «Лайкли» Ильи Бир­мана созда­ние кно­пок мак­си­мально упро­щено: под­клю­чите биб­лио­теку, создайте эле­менты с осо­быми клас­сами и всё зара­бо­тает само. Есть несколько гото­вых тем оформ­ле­ния и воз­мож­ность самому сти­ли­зо­вать кнопки под вид сайта.

<script src="./likely.js"></script>
<link rel="stylesheet" href="./likely.css">

<!-- … -->

<div class="likely">
  <div class="telegram">Отправить</div>
  <div class="vkontakte">Поделиться</div>
  <div class="xcom"></div>
  <div class="facebook"></div>
  <div class="linkedin"></div>
  <div class="whatsapp"></div>
  <div class="viber"></div>
  <div class="pinterest">Запинить</div>
</div>

Лайкли: социокнопки, которые не стыдно поставить. Подключение и инструкция

Отпра­вить
Поде­литься
Запи­нить

Социокнопки

Социокнопки позволяют поделиться страницей в соцсетях и чатах.

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

Быстрее и проще взять готовое решение. Например, в «Лайкли» Ильи Бирмана создание кнопок максимально упрощено: подключите библиотеку, создайте элементы с особыми классами и всё заработает само. Есть несколько готовых тем оформления и возможность самому стилизовать кнопки под вид сайта.

Лайкли: социокнопки, которые не стыдно поставить. Подключение и инструкция

<script src="./likely.js"></script>
<link rel="stylesheet" href="./likely.css">

<!-- … -->

<div class="likely">
  <div class="telegram">Отправить</div>
  <div class="vkontakte">Поделиться</div>
  <div class="xcom"></div>
</div>
Отправить
Поделиться
Закладки
Добавьте закладки
Ничего не нашлось