Верстаем статью в ХТМЛ за 7 шагов

У вас всё получится.

В этой статье мы сверстаем простую ХТМЛ-страницу. Это пригодится, если вы студент школы редакторов и вам через 2 недели сдавать курсовую работу. Хочется сделать круто, во всём разобраться, а собирать статью в конструкторе нет желания.

Мы не будем останавливаться подробно на каждом теге, классе, стиле. Если вы до этого ни разу не верстали веб-документы — просто повторяйте шаги и у вас всё получится.

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

Легенда

К нам обратились ребята из Бюро Горбунова с просьбой сделать обучающую статью для студентов. Дедлайн через 3 дня.

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

Для работы подойдет любой редактор кода, мы используем Sublime Text или VS Сode.

Готовим шаблон

Начнем с пустого шаблона ХТМЛ-документа. Сразу разметим, где будут стили, а где — текст статьи. Это поможет не перепутать, что и куда писать. Общий код шаблона страницы будет выглядеть так:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Как подготовиться к работе над курсовой</title>
    
    <style> 
    <!-- здесь будут стили !--> 
    </style> 

</head>
<body>
    <!-- здесь будет текст статьи !-->
</body>
</html>

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

Зададим отступы слева и справа — это похоже на школьную тетрадь, где с одной стороны поля, а с другой — отступ в пару клеток.

Пропишем стили для флекс-контейнера — это этажи и ячейки, внутри которых будет текст и иллюстрации.

Вот что у нас получилось:

<!DOCTYPE html>

<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Как подготовиться к работе над курсовой</title>
  <style> 

    /*Настраиваем типографику*/
     :root {
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 1.2em;
      line-height: 1.4em;
      box-sizing: border-box;
     }

     h1 {
      font-size: 2.25rem;
      line-height: 1.3em;
      font-weight: bold;
     }
    
    /*Настраиваем основную колонку для статьи*/
     .conteiner{
      padding-right: 20px;
      padding-left: 20px;
      margin-left: 5em;
      margin-right: 5em;
     } 

     /*row — флекс-контейнер, этаж сетки*/
     .row {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-wrap: nowrap;
      margin-bottom: 20px;
     }

     /*col-1 — основная колонка текста*/
     .col-1 {
        flex-basis: 66.6%;
        max-width: 66.6%;}

    /*col-2 — колонка на полях*/
     .col-2{
        flex-basis: 33.3%;
        max-width: 33.3%;
     }
  </style> 

</head>
<body>

    <!-- здесь будет текст статьи !-->

</body>
</html>

Этаж с главной иллюстрацией

Создадим первый этаж статьи после открывающего тега <body>:

<body>
  <article class="conteiner">
    <div class="row">

      <!-- здесь будет иллюстрация !-->

    </div>

Мы заранее подготовили все иллюстрации, знаем их размер, место и где они должны быть в статье.

Чтобы вставить иллюстрацию, надо добавить тег <img src="имя картинки">. Если картинки лежат в отдельной папке — указываем адрес и имя картинки через /
<img src="имя папки/имя картинки">.

В нашем случае тег будет выглядеть так:

<img class="logo" src="i/first.png">

По умолчанию браузер показывает картинки в полном размере, если картинка больше — это выглядит некрасиво. Добавим в стили ограничение на размер картинки, чтобы она не вылезала за границы блока и нижний отступ. Этот код нужно разместить между тегами <style> и </style>:

img{max-width: 100%;}

.logo{
max-width: 68%;
margin-bottom: 15px;
}

Посмотрим, как это выглядит в браузере:

Заголовок, лид, фото автора

Этот и последующие этажи будем собирать по такой структуре:

<div class="row">
    <div class="col-1">
        <!-- основная колонка статьи !-->
    </div>

    <div class="col-2 sidenote">
        <!-- колонка на полях !-->
    </div>
</div>

Добавим заголовок, лид-абзац, а фото автора разместим на полях. Фото можно заменить на фактоид, если в вашей статье нет ни того ни другого — удалите содержимое колонки на полях.

Чтобы добавить заголовок, используем тег <h1>...</h1>, абзац <p>...</p>, картинку — уже знакомый тег <imd src="имя папки/имя картинки">. Подпись к картинке добавляем тегом <p>...</p>.

<div class="row">
      <div class="col-1">
        <h1>...</h1>
        <p>...</p>
      </div>

      <div class="col-2 sidenote author">
        <imd src="имя папки/имя картинки">
        <p>...</p>
      </div>
    </div>

По умолчанию у каждого тега есть свои отступы. Чтобы пододвинуть подпись ближе к картинке, добавим тегу <p>отрицательный отступ: style="margin-top: -5px;" и стили для фото автора и заметок на полях:

.author img{
     width: 75px;
     height: 75px;
     }

     .sidenote{
     padding-left: 25px;
     }

     .sidenote p, a{
     font-size: 14px;
     }

Собираем:

<div class="row">
      <div class="col-1">
        <h1>Как подготовиться к работе над курсовой</h1>

        <p>На 15-ой неделе всем студентам школы редакторов ...</p>

        <p>Чтобы уменьшить количество тревожности ...</p>
      </div>

      <div class="col-2 sidenote author">
        <img style="margin-top: 55px;" alt="фото автора" src="i/anton.png">
        <p style="margin-top: -5px;">Антон Кошуба</p>
      </div>
    </div>

В браузере:

Боевой модуль: подзаголовок, абзац, иллюстрация, заметка на полях

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

Структура будет такой:

<h2>....</h2> — подзаголовок,
<p>...</p> — абзац,
<imd src="имя папки/имя картинки"> — иллюстрация,
<p>...</p> — подпись под иллюстрацией.

Для заметки на полях возьмем тег <p>...</p> и добавим к нему ссылку:

<p>... <a href="адрес ссылки"> текст ссылки </a></p>

По умолчанию заметки прибиваются к верхнему краю этажа. Чтобы поставить заметку ниже, используем свойство <p style="padding-top: 83px;">... </p>

<div class="row">
      <div class="col-1">
        <h2>Перечитать лекции</h2>

        <p>Если кратко — за 14 недель в Бюро дают очень много материала.</p>

        <p>Так выглядит первая неделя в учебном кабинете студента:</p>
        <img alt="расписание на первую неделю" src="i/week.png">

        <p class="caption">Все лекции есть в видео и текстовом вариантах</p>
      </div>

      <div class="col-2 sidenote">
        <p style="padding-top: 83px;">Артемий Лебедев. <a class="link" href="https://www.artlebedev.ru/kovodstvo/sections/136/">Теория близости</a></p>
      </div>
    </div>

Добавим стили для подписи и ссылки:

/*Настраиваем вид и поведение ссылок при наведении*/
     a.link {
      color: #5d91c2;
      text-decoration: none;
      border-bottom: 1px solid #5d91c2;
      transition: 0.3s ease-out;
     }

     a:hover {
      color: #f06d41;
      text-decoration: none;
      border-color: #f06d41;
     }

     /*Задаем типографику подписи под иллюстрацией*/
     p.caption{
     font-size: 14px;
     line-height: 18px;
     margin-top: 0px;
     }

В браузере:

Кликабельный фактоид и иллюстрация

Создадим следующий этаж статьи. Добавим подзаголовок <h2>, абзац <p>, иллюстрацию <img>.

Фактоид сделаем картинкой, после нажатия на которую откроется сайт советов Бюро. Для этого обернем тег <img> в тег <a>

<a href="адрес ссылки"> <imd src="имя папки/имя картинки"> </a>

Чтобы фактоид и иллюстрация выделялись при наведении мышкой, добавим стили:

a img {
      color: #5d91c2;
      text-decoration: none;
      border: none;
      transition: 0.3s ease-out;
     }

     a:hover img {
      color: #f06d41;
      text-decoration: none;
      border-color: #f06d41;
      opacity: 0.8;
      border: solid .1px;
     }

Аналогично поступим с иллюстрацией в конце этажа.

Собираем

 <div class="row">
      <div class="col-1">
        <h2>Читать советы</h2>

        <p>Если лекций недостаточно — ищите ответ в «Советах». На сайте есть удобный поиск — достаточно ввести запрос и выбрать подходящий совет.</p>
        <a href="https://bureau.ru/bb/soviet/found/%D0%98%D0%BD%D1%82%D0%B5%D1%80%D0%BB%D0%B8%D0%BD%D1%8C%D1%8F%D0%B6"><img alt="231 совет на запрос интерлиньяж" src="i/inter.png"></a>

        <p class="caption">На запрос «Интерлиньяж» найден 231 совет</p>
      </div>

      <div class="col-2 sidenote">
        <a href="https://bureau.ru/soviet/"><img alt="4245 советов на сайте бюро" src="i/sovet.png" style="margin-top: 50px;"></a>

        <p style="margin-top: 178px;">Михаил Нозик. <a class="link" href="https://bureau.ru/soviet/20191002/">Влезание в интерлиньяж</a></p>
      </div>
    </div>

В браузере:

Абзац с подзаголовками в подбор

Подзаголовком в подбор называют первое предложение абзаца. Его используют, чтобы избежать лишней вложенности и выделить смысловую часть абзаца.

Чтобы сделать подзаголовок в подбор, выделим первое предложение абзаца жирным, для этого используем тег <b>...</b>

Получим конструкцию <p><b>...</b>.......</p> и добавим ее в этаж статьи:

<div class="row">
      <div class="col-1">
        <h2>Начните прямо сейчас</h2>

        <p><b>Не откладывайте на последний день.</b> Иногда бывает так что ...</p>

        <p><b>Найдите источник информации.</b> Любая статья начинается с...</p>

        <p><b>Выпишите интересные темы.</b> Когда вы определились ...</p>
      </div>
    </div>

В браузере:

Плашка

В конце статьи сделаем цветную плашку с основными мыслями или важным посланием автора. Задача плашки — привлечь внимание и что-то сказать. Ее не обязательно делать в конце статьи.

Создадим этаж и добавим туда маркерованый список:

<div class="row">
      <div class="col-1 end">

        <h2>...</h2> — подзаголовок плашки
        <ul>
          <li>...</li> — элемент списка
          <li>...</li> — элемент списка
          <li>...</li> — элемент списка
        </ul>

      </div>
    </div>

Чтобы убрать буллиты и отступ, добавим стили:

/*Убираем буллиты и отступ слева*/
     ul {
      list-style: none inside;
      padding-left: 0;
     }

     /*Задаем отступы между элементами перечня*/
     * + li {
      margin-top: .4rem;
     }

Покрасим плашку в нежно-голубой:

/*Настраиваем плашку*/
     .end{
      background-color:#deefff;
      border-radius: 15px;
      margin-bottom: 30px;
      padding: 1em;
     }

Собираем:

<div class="row">
      <div class="col-1 end">
        <h2>Что дальше</h2>
        <ul>
          <li>Перечитывайте и пересматривайте лекции</li>
          <li>Читайте советы</li>
          <li>Смотрите разборы работ предыдущих потоков</li>
          <li>Находите полезное</li>
          <li>Делайте кайфовое</li>
        </ul>
      </div>
    </div>

В браузере:

Вот что получилось

Сравним нашу статью с макетом.

Как подготовиться к работе над курсовой

Что дальше

  • Скопируйте код;
  • Замените текст и иллюстрации на свои;
  • Или внесите изменения в шаблон на свой вкус;

Как бесплатно разместить статью в интернете, расскажу в следующем выпуске.

Научиться профессиональной вёрстке можно в «Яндекс Практикуме»

Курс «Профессиональная вёрстка на HTML и CSS»