🔍 Начните печатать, чтобы искать по книге или перейти к нужной странице по номеру
Удобно листать не только прокруткой, но и клавишами‑стрелками:
разворотами
ХТМЛ.
Вёрстка сайтов
ХТМЛ.
Вёрстка сайтов
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Эта книга — пошаговая инструкция по вёрстке сайтов на языках ХТМЛ и ЦСС. Вы узнаете не только как сверстать сайт, но и как опубликовать его в интернете, настроить красивый шаринг в соцсети и подключить системы аналитики.
Отдельный раздел книги посвящён работе с верстальщиком: как ставить задачи, получать предсказуемый результат и правильно принимать и внедрять вёрстку.
Оглавление
Знакомство с ХТМЛ и ЦСС
Модули
Расстановка
Страницы
Спецэффекты
Контроль качества
Публикация
Как работать с верстальщиком
Плашки
Плашка помогает отделить модуль от соседнего и объединить его собственные части. Оформление плашки — дань текущей моде или фирменному стилю, но её функция остаётся одной и той же — выделять и объединять.
В вёрстке простейшая плашка — просто контейнер с полями и фоном. Хорошая идея — одновременно «сломать» сетку и создать внутри плашки особый ритм, чтобы дополнительно выделить её среди других модулей.
.boxed {
padding: 36px 9px 72px;
background: #f3f5f4;
}
<div class="boxed">
<div class="cols">
<!-- … -->
</div>
</div>О сетках:
Флексбоксы
Гриды
Плашки
Плашка помогает отделить модуль от соседнего и объединить его собственные части. Оформление плашки — дань текущей моде или фирменному стилю, но её функция остаётся одной и той же — выделять и объединять.
В вёрстке простейшая плашка — просто контейнер с полями и фоном. Хорошая идея — одновременно «сломать» сетку и создать внутри плашки особый ритм, чтобы дополнительно выделить её среди других модулей.
.boxed {
padding: 36px 9px 72px;
background: #f3f5f4;
}
<div class="boxed">
<div class="cols">
<!-- … -->
</div>
</div>О сетках:
Флексбоксы
Гриды
Выносы и цитаты
Выносы и цитаты привлекают внимание. Если они интересные — читателю захочется узнать подробности в тексте. Вынос верстают обёрткой с особыми стилями:
<p>…</p>
<div class="liftOut">
<p>…</p>
</div>
<p>…</p>
.liftOut {
font-size: 200%;
padding-left: 1.25em;
color: #00aff0;
}
.liftOut:not(:last-child) {
margin-bottom: 1.25em;
}
Выносы и цитаты
Выносы и цитаты привлекают внимание. Если они интересные — читателю захочется узнать подробности в тексте. Вынос верстают обёрткой с особыми стилями:
<p>…</p>
<div class="liftOut">
<p>…</p>
</div>
<p>…</p>
.liftOut {
font-size: 200%;
padding-left: 1.25em;
color: #00aff0;
}
.liftOut:not(:last-child) {
margin-bottom: 1.25em;
}
Для цитат есть специальные теги, советуем использовать именно их: страница будет понятнее поисковым роботам и программам чтения с экрана.
Цитаты внутри текста верстают тегом 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;
}
Максимальный бонусный балл при поступлении в школу до конца ноября
Фактоиды
Мы называем фактоидом любую крупную цифру с подписью или вынос в духе «а знаете ли вы, что». Фактоиды могут здорово оживить вёрстку, появляясь на полях — в сайдноутах — или внутри содержимого.
Советуем сначала сверстать фактоид «в вакууме» и лишь затем подставлять его вёрстку в нужные места страницы. Это поможет не запутаться в коде и сверстать надёжный модуль, который не сломается при использовании в другом контексте.
Сайдноуты
<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;
}
Максимальный бонусный балл при поступлении в школу до конца ноября