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

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

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

Оглавление

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

    Модули 

    Расстановка 

    Страницы

    Спецэффекты

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

    Публикация

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

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

Выборочная стилизация, классы

Если сти­ли­зо­вать теги по назва­нию, стили при­ме­нятся ко всем таким тегам. Если один раз ука­зать цвет для p, все абзацы на стра­нице изме­нят цвет:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Ледник Акселя Хейберга</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Ледник Акселя Хейберга</h1>
    <p>…</p>
    <p>…</p>
    <p>…</p>
    <p>…</p>
  </body> 
</html>

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

Чтобы точ­нее ука­зы­вать на нуж­ные эле­менты, исполь­зуют классы — иден­ти­фи­ка­торы, к кото­рым при­вя­заны стили. В ХМТЛ класс пишут в одно­имён­ном атри­буте, затем в ЦСС к классу при­вя­зы­вают стили. Эти стили при­ме­нятся ко всем эле­мен­там стра­ницы с под­хо­дя­щим клас­сом. В ЦСС имя класса пишут через точку, а в ХТМЛ — без точки:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Ледник Акселя Хейберга</title>
    <style>
      .highlighted {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Ледник Акселя Хейберга</h1>
    <p>…</p>
    <p class="highlighted">…</p>
    <p>…</p>
    <p class="highlighted">…</p>
  </body> 
</html>

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

Выборочная стилизация, классы

Если стилизовать теги по названию, стили применятся ко всем таким тегам. Если один раз указать цвет для p, все абзацы на странице изменят цвет:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Ледник Акселя Хейберга</title>
    <style>
      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Ледник Акселя Хейберга</h1>
    <p>…</p>
    <p>…</p>
    <p>…</p>
    <p>…</p>
  </body> 
</html>

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

Чтобы точнее указывать на нужные элементы, используют классы — идентификаторы, к которым привязаны стили. В ХМТЛ класс пишут в одноимённом атрибуте, затем в ЦСС к классу привязывают стили. Эти стили применятся ко всем элементам страницы с подходящим классом. В ЦСС имя класса пишут через точку, а в ХТМЛ — без точки:

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <title>Ледник Акселя Хейберга</title>
    <style>
      .highlighted {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Ледник Акселя Хейберга</h1>
    <p>…</p>
    <p class="highlighted">…</p>
    <p>…</p>
    <p class="highlighted">…</p>
  </body> 
</html>

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

Лайфхак: как называть классы

Чтобы код было проще читать и пони­мать, имена клас­сов делают наглядными.

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

Классы не при­нято назы­вать по‑рус­ски лати­ни­цей. Такие имена тяжело читать, а неко­то­рые рус­ские буквы можно напи­сать лати­ни­цей по‑раз­ному, что уве­ли­чи­вает веро­ят­ность ошибок.

/* Плохо */
.t { }
.txthl { }
.informaciya { }
.informacia { }
.informacija { }

/* Лучше */
.title { }
.highlight { }
.info { }

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

По име­нам с дефи­сами легче пере­ме­щаться с кла­ви­а­туры и выде­лять отдель­ные слова двой­ным кли­ком, а стиль с заглав­ными исполь­зу­ется во мно­гих язы­ках про­грам­ми­ро­ва­ния, он при­выч­нее опыт­ным раз­ра­бот­чи­кам и гар­мо­нич­нее смот­рится рядом с кодом на дру­гих языках.

/* Каша, тяжело читать */
.pagetitle { }
.pageauthor { }

/* Структура, легко читать */
.page-title { }
.page-author { }

.pageTitle { }
.pageAuthor { }

Стиль‑через‑дефис называют кебабом, потому что похоже на мясо на шампуре. А стильЧерезЗаглавные — кэмелом, потому что похоже на горбы верблюда.

Совет. Чтобы в текстовом редакторе перемещаться по отдельным словам в именах с дефисами, используйте Option или Alt со стрелками влево и вправо. Чтобы выделять слова, дополнительно зажимайте Shift

Лайфхак: как называть классы

Чтобы код было проще читать и понимать, имена классов делают наглядными.

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

Классы не принято называть по‑русски латиницей. Такие имена тяжело читать, а некоторые русские буквы можно написать латиницей по‑разному, что увеличивает вероятность ошибок.

/* Плохо */
.t { }
.txthl { }
.informaciya { }
.informacia { }
.informacija { }

/* Лучше */
.title { }
.highlight { }
.info { }

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

По именам с дефисами легче перемещаться с клавиатуры и выделять отдельные слова двойным кликом, а стиль с заглавными используется во многих языках программирования, он привычнее опытным разработчикам и гармоничнее смотрится рядом с кодом на других языках.

/* Каша, тяжело читать */
.pagetitle { }
.pageauthor { }

/* Структура, легко читать */
.page-title { }
.page-author { }

.pageTitle { }
.pageAuthor { }

Стиль‑через‑дефис называют кебабом, потому что похоже на мясо на шампуре. А стильЧерезЗаглавные — кэмелом, потому что похоже на горбы верблюда.

Совет. Чтобы в текстовом редакторе перемещаться по отдельным словам в именах с дефисами, используйте Option или Alt со стрелками влево и вправо. Чтобы выделять слова, дополнительно зажимайте Shift

Где хранить стили

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

Когда сти­лей много, удоб­нее выне­сти их в отдель­ный файл и рабо­тать с ним в отдель­ном окне редактора.

Файл со сти­лями имеет рас­ши­ре­ние .css. Обычно его назы­вают style.css и кла­дут рядом с ХТМЛ‑стра­ни­цей, это самый про­стой спо­соб для неболь­ших сай­тов. Файл под­клю­чают к стра­нице тегом link, все стили из под­клю­чён­ного файла при­ме­нятся к странице.

Файл сти­лей можно под­клю­чить сразу к несколь­ким ХТМЛ‑стра­ни­цам и управ­лять их сти­лями из одного места: поме­няли отступы у абза­цев в style.css, отступы поме­ня­лись на всех страницах.

В более слож­ных про­ек­тах бывает несколько фай­лов со сти­лями, рас­по­ло­жен­ных где угодно, даже на дру­гом сайте.

index.html

<!-- … -->
  <head>
    <title>Моя веб-страница</title>

    <style>
      body {
        font-size: 16px;
        line-height: 18px;
      }

      h1 {
        font-size: 48px;
        line-height: 52px;
        font-family: Helvetica;
      }
    </style>
  </head>
<!-- … -->

index.html

<!-- … -->
  <head>
    <title>Моя веб-страница</title>

    <!-- Вместо style подключаем лежащий рядом файл -->
    <link rel="stylesheet" href="style.css">
  </head>
<!-- … -->

style.css

/* Стили, которые раньше были в теге style */
body {
  font-size: 16px;
  line-height: 18px;
}

h1 {
  font-size: 48px;
  line-height: 52px;
  font-family: Helvetica;
}

index.html

<!-- … -->
  <head>
    <title>Моя веб-страница</title>

    <style>
      body {
        font-size: 16px;
        line-height: 18px;
      }

      h1 {
        font-size: 48px;
        line-height: 52px;
        font-family: Helvetica;
      }
    </style>
  </head>
<!-- … -->

index.html

<!-- … -->
  <head>
    <title>Моя веб-страница</title>

    <!-- Вместо style подключаем лежащий рядом файл -->
    <link rel="stylesheet" href="style.css">
  </head>
<!-- … -->

style.css

/* Стили, которые раньше были в теге style */
body {
  font-size: 16px;
  line-height: 18px;
}

h1 {
  font-size: 48px;
  line-height: 52px;
  font-family: Helvetica;
}

Где хранить стили

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

Когда стилей много, удобнее вынести их в отдельный файл и работать с ним в отдельном окне редактора.

Файл со стилями имеет расширение .css. Обычно его называют style.css и кладут рядом с ХТМЛ‑страницей, это самый простой способ для небольших сайтов. Файл подключают к странице тегом link, все стили из подключённого файла применятся к странице.

Файл стилей можно подключить сразу к нескольким ХТМЛ‑страницам и управлять их стилями из одного места: поменяли отступы у абзацев в style.css, отступы поменялись на всех страницах.

В более сложных проектах бывает несколько файлов со стилями, расположенных где угодно, даже на другом сайте.

Наследование стилей

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

Тег body — роди­тель для вло­жен­ных тегов заго­ловка и абзацев:

<body>
  <h1>Джефф Раскин — Интерфейс</h1>
  <p>…</p>
  <p>…</p>
</body>

Если в ЦСС задать шрифт и цвет тек­ста для body, вло­жен­ные теги уна­сле­дуют эти свойства:

body {
  font-family: Arial;
  color: red;
}

Уна­сле­до­ван­ные свой­ства можно переопределять:

body {
  font-family: Arial;
  color: red;
}

p {
  color: blue;
}

Наследование. МДН

Наследование стилей

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

Тег body — родитель для вложенных тегов заголовка и абзацев:

<body>
  <h1>Джефф Раскин — Интерфейс</h1>
  <p>…</p>
  <p>…</p>
</body>

Наследование. МДН

Если в ЦСС задать шрифт и цвет текста для body, вложенные теги унаследуют эти свойства:

body {
  font-family: Arial;
  color: red;
}

Унаследованные свойства можно переопределять:

body {
  font-family: Arial;
  color: red;
}

p {
  color: blue;
}

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

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

<p>…</p>
<p class="liftOut">…</p>

p {
  font-family: Helvetica, sans-serif;
}

.liftOut {
  font-size: 125%;
  color: red;
}

Если с элементом связаны несколько наборов стилей, они дополнят друг друга. Эта особенность помогает меньше повторяться в коде, писать универсальные классы и использовать их в разных местах страницы.

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

<p>…</p>
<p class="liftOut">…</p>

p {
  font-family: Helvetica, sans-serif;
}

.liftOut {
  font-size: 125%;
  color: red;
}
Скрыто 208 разворотов
Закладки
Добавьте закладки
Ничего не нашлось