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

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

между важными местами
Shift
между
разворотами
Васи­лий Полов­нёв, Игорь Пет­ров

ХТМЛ.
Вёрстка сайтов

Изда­тель­ство Бюро Гор­бу­нова
2021
Васи­лий Полов­нёв, Игорь Пет­ров

ХТМЛ.
Вёрстка сайтов

Изда­тель­ство Бюро Гор­бу­нова
2021
удк 004.42
ббк З973.42
П52
Васи­лий Полов­нёв, Игорь Пет­ров
П52
ХТМЛ. Вёрстка сай­тов для дизай­не­ров, редак­то­ров и руко­во­ди­те­лей.—
М.: Изд‑во Бюро Гор­бу­нова, 2021

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

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

Оглавление

удк 004.42
ббк З973.42
П52
П52
Васи­лий Полов­нёв, Игорь Пет­ров
ХТМЛ. Вёрстка сай­тов для дизай­не­ров, редак­то­ров и руко­во­ди­те­лей.—
М.: Изд‑во Бюро Гор­бу­нова, 2021

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

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

Оглавление

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

ХТМЛ‑файл в текстовом редакторе

Что такое веб‑страница

Любая веб‑стра­ница — это про­сто тек­сто­вый файл с осо­бой разметкой.

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

ХТМЛ‑файл в браузере

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

Чтобы стра­ницу было удобно читать и изу­чать, её содер­жи­мое осо­бым обра­зом струк­ту­ри­руют и оформ­ляют. Сей­час раз­бе­рёмся, как это делают.

Редактировать ХТМЛ‑файлы можно в стандартной программе «Блокнот», но удобнее использовать более продвинутые текстовые редакторы. Например, несложный в освоении бесплатный редактор «Саблайм»

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

ХТМЛ‑файл в текстовом редакторе

Что такое веб‑страница

Любая веб‑стра­ница — это про­сто тек­сто­вый файл с осо­бой разметкой.

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

ХТМЛ‑файл в браузере

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

Чтобы стра­ницу было удобно читать и изу­чать, её содер­жи­мое осо­бым обра­зом струк­ту­ри­руют и оформ­ляют. Сей­час раз­бе­рёмся, как это делают.

Редактировать ХТМЛ‑файлы можно в стандартной программе «Блокнот», но удобнее использовать более продвинутые текстовые редакторы. Например, несложный в освоении бесплатный редактор «Саблайм»

Теги

Чтобы струк­ту­ри­ро­вать и офор­мить стра­ницу, её раз­ме­чают язы­ком ХТМЛ.

ХТМЛ‑раз­метка состоит из кон­тей­не­ров с содер­жи­мым — тегов. Текст поме­щают внутрь тега, между его откры­ва­ю­щей и закры­ва­ю­щей частями:

<h1>Заголовок</h1>
<p>Текст абзаца.</p>
<p>Текст второго абзаца.</p>

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

Назва­ние тега отра­жает его смысл. Напри­мер, h1 — heading 1 — заго­ло­вок пер­вого уровня.

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

<p>По-настоящему <b>важные принципы</b>:</p>

<ul>
  <li>Не планировать впритык</li>
  <li>Сделать значит сдать</li>
  <li>Флекс — всегда боль</li>
</ul>

Есть теги, кото­рые не нужно закры­вать и в кото­рые нельзя ничего вло­жить. Напри­мер, тег пере­носа строки br:

<h1>
  Лев Николаевич Толстой. <br>
  Жизнь и взгляды
</h1>

Не закры­ва­ются теги кар­ти­нок и раз­ных интер­ак­тив­ных эле­мен­тов: видео, полей ввода, кно­пок. Все эти эле­менты мы раз­бе­рём дальше в книге.

Ещё в ХТМЛ есть ком­мен­та­рии. Это спе­ци­аль­ный текст, кото­рый не будет видно на стра­нице, только в коде. Раз­ра­бот­чики исполь­зуют ком­мен­та­рии в каче­стве под­ска­зок себе и дру­гим людям, рабо­та­ю­щим с кодом.

Ком­мен­та­рии пишут внутри кон­струк­ции <!-- … -->, это поз­во­ляет удобно пря­тать любые теги — доста­точно допи­сать вос­кли­ца­тель­ный знак и дефисы в начале и конце тега и он пре­вра­тится в ком­мен­та­рий, про­па­дёт со стра­ницы, при этом остав­шись в коде. На языке раз­ра­бот­чи­ков это назы­ва­ется «заком­мен­тить» — спря­тать кусок вёрстки.

<p>Автор: Галина Игнатова</p>

<!-- Менять код только с разрешения главреда! -->
<p>Издание «Валенсия», код агента 348187</p>

<!-- Источники, закомментить, когда ссылок нет  -->
<!-- ul>
  <li></li>
  <li></li>
</ul -->

Теги

Чтобы струк­ту­ри­ро­вать и офор­мить стра­ницу, её раз­ме­чают язы­ком ХТМЛ.

ХТМЛ‑раз­метка состоит из кон­тей­не­ров с содер­жи­мым — тегов. Текст поме­щают внутрь тега, между его откры­ва­ю­щей и закры­ва­ю­щей частями:

<h1>Заголовок</h1>
<p>Текст абзаца.</p>
<p>Текст второго абзаца.</p>

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

Назва­ние тега отра­жает его смысл. Напри­мер, h1 — heading 1 — заго­ло­вок пер­вого уровня.

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

<p>По-настоящему <b>важные принципы</b>:</p>

<ul>
  <li>Не планировать впритык</li>
  <li>Сделать значит сдать</li>
  <li>Флекс — всегда боль</li>
</ul>

Есть теги, кото­рые не нужно закры­вать и в кото­рые нельзя ничего вло­жить. Напри­мер, тег пере­носа строки br:

<h1>
  Лев Николаевич Толстой. <br>
  Жизнь и взгляды
</h1>

Не закры­ва­ются теги кар­ти­нок и раз­ных интер­ак­тив­ных эле­мен­тов: видео, полей ввода, кно­пок. Все эти эле­менты мы раз­бе­рём дальше в книге.

Ещё в ХТМЛ есть ком­мен­та­рии. Это спе­ци­аль­ный текст, кото­рый не будет видно на стра­нице, только в коде. Раз­ра­бот­чики исполь­зуют ком­мен­та­рии в каче­стве под­ска­зок себе и дру­гим людям, рабо­та­ю­щим с кодом.

Ком­мен­та­рии пишут внутри кон­струк­ции <!-- … -->, это поз­во­ляет удобно пря­тать любые теги — доста­точно допи­сать вос­кли­ца­тель­ный знак и дефисы в начале и конце тега и он пре­вра­тится в ком­мен­та­рий, про­па­дёт со стра­ницы, при этом остав­шись в коде. На языке раз­ра­бот­чи­ков это назы­ва­ется «заком­мен­тить» — спря­тать кусок вёрстки.

<p>Автор: Галина Игнатова</p>

<!-- Менять код только с разрешения главреда! -->
<p>Издание «Валенсия», код агента 348187</p>

<!-- Источники, закомментить, когда ссылок нет  -->
<!-- ul>
  <li></li>
  <li></li>
</ul -->

Скрыто: ЦСС, селекторы, правила, наследование, специфичность
Скрыто: ЦСС, селекторы, правила, наследование, специфичность

Даблдекер на знаке. Транспорт Лондона

Даблдекер на знаке. Транспорт Лондона

Даблдекер на знаке. Транспорт Лондона

Даблдекер на знаке. Транспорт Лондона

Даблдекер на знаке. Транспорт Лондона

<img>

<p>
  Даблдекер на знаке.
  <a>
    Транспорт Лондона
  </a>
</p>
<img>

<p>
  Даблдекер на знаке.
  <a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
    Транспорт Лондона
  </a>
</p>
<img src="https://bureau.ru/projects/book-html/files/london-bus.png">

<p>
  Даблдекер на знаке.
  <a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
    Транспорт Лондона
  </a>
</p>
<img src="..."
  width="300px"
  height="80px">

<p>
  Даблдекер на знаке.
  <a href="...">
    Транспорт Лондона
  </a>
</p>
<img src="..."
  width="300px"
  height="80px"
  style="transform: rotate(-5deg) translateY(-3px)">

<p style="font-weight: 100">
  Даблдекер на знаке.
  <a href="...">
    Транспорт Лондона
  </a>
</p>

Свер­стаем кар­тинку и под­пись к ней со ссыл­кой на источ­ник изображения.

Атри­бут href задаёт адрес ссылки.

Чтобы кар­тинка появи­лась, нужно ука­зать атри­бут src.

Чтобы настро­ить раз­меры кар­тинки, исполь­зуют атри­буты width и height.

Самый про­дви­ну­тый атри­бут — style, в нём можно настро­ить что угодно. О нём рас­ска­жем позже.

Даблдекер на знаке. Транспорт Лондона

Даблдекер на знаке. Транспорт Лондона

Даблдекер на знаке. Транспорт Лондона

Даблдекер на знаке. Транспорт Лондона

Даблдекер на знаке. Транспорт Лондона

<img>

<p>
  Даблдекер на знаке.
  <a>
    Транспорт Лондона
  </a>
</p>
<img>

<p>
  Даблдекер на знаке.
  <a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
    Транспорт Лондона
  </a>
</p>
<img src="https://bureau.ru/projects/book-html/files/london-bus.png">

<p>
  Даблдекер на знаке.
  <a href="https://tfl.gov.uk/info-for/suppliers-and-contractors/design-standards">
    Транспорт Лондона
  </a>
</p>
<img src="..."
  width="300px"
  height="80px">

<p>
  Даблдекер на знаке.
  <a href="...">
    Транспорт Лондона
  </a>
</p>
<img src="..."
  width="300px"
  height="80px"
  style="transform: rotate(-5deg) translateY(-3px)">

<p style="font-weight: 100">
  Даблдекер на знаке.
  <a href="...">
    Транспорт Лондона
  </a>
</p>

Свер­стаем кар­тинку и под­пись к ней со ссыл­кой на источ­ник изображения.

Атри­бут href задаёт адрес ссылки.

Чтобы кар­тинка появи­лась, нужно ука­зать атри­бут src.

Чтобы настро­ить раз­меры кар­тинки, исполь­зуют атри­буты width и height.

Самый про­дви­ну­тый атри­бут — style, в нём можно настро­ить что угодно. О нём рас­ска­жем позже.

Скрыто: веб-инспектор и работа с вёрсткой в браузере
Скрыто: веб-инспектор и работа с вёрсткой в браузере
Скрыто: текст, иллюстрации, таблицы, формы и другие модули
Скрыто: текст, иллюстрации, таблицы, формы и другие модули

В ЦСС font-weight отве­чает за «жир­ность», вес начер­та­ния. Зада­ется в чис­лах от 100 до 900.

Кроме чис­ло­вых зна­че­ний под­дер­жи­ва­ются клю­че­вые слова: normal, bold, lighter и bolder.

normal — это обыч­ное начер­та­ние, сино­ним font-weight: 400

font‑weight: 400
font‑weight: normal

bold — жир­ное начер­та­ние, сино­ним font-weight: 700

font‑weight: 700
font‑weight: bold

Лучше исполь­зо­вать клю­че­вые слова, а не их чис­ло­вые зна­че­ния: их проще вос­при­ни­мать, не нужно запо­ми­нать маги­че­ские числа.

Жир­ность начер­та­ния отно­си­тельно роди­теля зада­ётся с помо­щью клю­че­вых слов lighter (полегче) и bolder (пожирнее):

font‑weight: lighter
font‑weight: bolder

lighterfont‑weightbolder
light100, lightregular
light200, lightregular
light300, lightregular
light400, regularbold
light500, regularbold
regular600, boldbold
regular700, boldbold
bold800, boldbold
bold900, boldbold

Как меняется начертание от lighter, bolder и font‑weight родителя

В ЦСС font-weight отве­чает за «жир­ность», вес начер­та­ния. Зада­ется в чис­лах от 100 до 900.

Кроме чис­ло­вых зна­че­ний под­дер­жи­ва­ются клю­че­вые слова: normal, bold, lighter и bolder.

normal — это обыч­ное начер­та­ние, сино­ним font-weight: 400

font‑weight: 400
font‑weight: normal

bold — жир­ное начер­та­ние, сино­ним font-weight: 700

font‑weight: 700
font‑weight: bold

Лучше исполь­зо­вать клю­че­вые слова, а не их чис­ло­вые зна­че­ния: их проще вос­при­ни­мать, не нужно запо­ми­нать маги­че­ские числа.

Жир­ность начер­та­ния отно­си­тельно роди­теля зада­ётся с помо­щью клю­че­вых слов lighter (полегче) и bolder (пожирнее):

font‑weight: lighter
font‑weight: bolder

lighterfont‑weightbolder
light100, lightregular
light200, lightregular
light300, lightregular
light400, regularbold
light500, regularbold
regular600, boldbold
regular700, boldbold
bold800, boldbold
bold900, boldbold

Как меняется начертание от lighter, bolder и font‑weight родителя

Бюро­санс
Бюросайн

Бюросанс поддерживает тонкое, нормальное и жирное начертания. Бюросайн — вариативный шрифт, поддерживающий все начертания, включая промежуточные

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

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

В отли­чие от обыч­ных шриф­тов для зада­ния «жир­но­сти» в вари­а­тив­ных шриф­тах нужно исполь­зо­вать закли­на­ние:
font-variation-settings: "wght" 400

Бюро­санс
Бюросайн

Бюросанс поддерживает тонкое, нормальное и жирное начертания. Бюросайн — вариативный шрифт, поддерживающий все начертания, включая промежуточные

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

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

В отли­чие от обыч­ных шриф­тов для зада­ния «жир­но­сти» в вари­а­тив­ных шриф­тах нужно исполь­зо­вать закли­на­ние:
font-variation-settings: "wght" 400

Скрыто: позиционирование и адаптивная вёрстка
Скрыто: позиционирование и адаптивная вёрстка

Упражнение: применение флексбокса

Пере­та­щите ЦСС‑свой­ства в селек­торы, чтобы пункты меню встали в ряд, а послед­ний пункт меню при­жался к пра­вому краю.


  
display: flex;
margin-left: auto;
nav {
}
nav li:last-child {
}

Вёрстка

Дизайн

Вёрстка

Дизайн

Упражнение: применение флексбокса

Пере­та­щите ЦСС‑свой­ства в селек­торы, чтобы пункты меню встали в ряд, а послед­ний пункт меню при­жался к пра­вому краю.


  
display: flex;
margin-left: auto;
nav {
}
nav li:last-child {
}
Скрыто: страницы, спецэффекты
Скрыто: страницы, спецэффекты
Скрыто: контроль качества, тестирование вёрстки
Скрыто: контроль качества, тестирование вёрстки
Скрыто: хостинг и домен, шаринг в соцсети, аналитика и статистика посещений
Скрыто: хостинг и домен, шаринг в соцсети, аналитика и статистика посещений
Скрыто: работа с верстальщиком
Скрыто: работа с верстальщиком