Упражнение: верстаем пост блога

Настало время для другого упражнения, которое покажет вам философию вёрстки более сложных сайтов на HTML5. Мы постараемся представить следующий пример в виде статьи блога.

Обратите внимание, что у нас есть один заголовок для статьи. Кроме того, имеется информация об авторе, а также фото и абзац с «цитатой». Стоит отметить, что в качестве веб-разработчика вы будете часто получать графический дизайн (вроде показанного выше) и должны воссоздать его через HTML.

Давайте начнем с элементов, которые всегда будут постоянными и неизменными. Как мы делали раньше, мы хотим добавить доктайп, тег <html>, <head> и <body>. Обратите внимание, что <head> должен содержать кодировку utf-8, так мы можем отобразить специальные символы на нашем сайте.

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8"> 
  </head>
  <body>
  </body>
</html>

Теперь добавим название.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8"> 
    <title>Джастин Бивер увлечён HTML</title>
  </head>
  <body>
  </body>
</html>

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

Если мы сохраняем файл как article.html, а затем откроем его в браузере, то ничего не увидим, потому что тег <body> не содержит контента.

Как правило, начинаем с общего содержания, далее идет специфичное. Мы уточняем контент по мере продвижения. Давайте проанализируем наши фрагменты.

  1. В статье, вероятно, наиболее важной информацией будет заголовок с текстом: «Джастин Бивер: С тех пор, как я узнал HTML, моя жизнь повернулась на 180 градусов».
  2. Следующей важной информацией являются данные об авторе: «написал: Дамиан Вельгошик».
  3. Далее идёт первый абзац текста, затем место для фото и описание.
  4. Наконец, последний абзац содержит цитату: «Я, вероятно, спою об HTML в своём следующем альбоме».

Вот и все наши фрагменты. Такой тип анализа, когда мы смотрим на фрагменты помогает нам представить, как будет выглядеть код HTML. Иерархия начинается с самого общего элемента (родителя), затем продолжается с элементами, которые родитель содержит (дети) — это более конкретные, подробные элементы.

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

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8"> 
    <title>Джастин Бивер увлечён HTML</title>
  </head>
  <body>
    <article>
    </article>
  </body>
</html>

Вы, возможно, заметили, что мы использовали элемент <article>, который содержится в родителе <body>. Статьи состоят из заголовка и содержания, так что все теги представляющие заголовок и абзацы, естественно, будут дочерними <article>.

Дополнительно к нашему списку элементов, который мы использовали до сих пор, добавится тег <header> — элемент, который маркирует заголовки.

Мы можем добавить <header> как дочерний в <article>. По мере продвижения по коду сверху вниз (с точки зрения значимости), заметьте, что мы также сдвигаемся глубже вправо, тем самым показывая, что элемент в иерархии находится ниже, чем компонент выше. В приведённом ниже примере, <header> находится не только ниже <article>, но и добавлен с отступом, чтобы показать его положение в иерархии.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8"> 
    <title>Джастин Бивер увлечён HTML</title>
  </head>
  <body>
    <article>
      <header>
      </header>
    </article>
  </body>
</html>

Наш раздел заголовка готов, но что должно быть внутри <header>? Ну, мы уже обсуждали ранее, что у нас есть заголовок и автор. Мы будем использовать тег <h1> для заголовка текста, а <р> для автора. В HTML нет конкретного тега для автора, так что в этом случае мы используем <р> в качестве общего контейнера для текста.

В приведённом ниже коде мы добавили теги <h1> и <p> в элемент <header>.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8"> 
    <title>Джастин Бивер увлечён HTML</title>
  </head>
  <body>
    <article>
      <header>
        <h1>Джастин Бивер: С тех пор, как я узнал HTML, моя жизнь повернулась на 180 градусов</h1>
        <p>Написал: Дамиан Вельгошик</p>
      </header>
    </article>
  </body>
</html>

Кстати, следует отметить, что в дополнение к <h1>, есть заголовки более низкого уровня, которые выглядят так:

  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>

Эти элементы помогают отображать логическую структуру заголовков и подзаголовков. К примеру, если бы мы писали в книжном формате, то заголовок бы содержался в элементе <h1>. Затем, названия глав будут помечены через <h2>, а подразделы через <h3>.

Обратите внимание, что вы не должны просто обозначить заголовок как <h4> по прихоти. Заголовки должны быть вложены в заголовки приоритетом выше, так что если у вас есть <h4>, то <h3> должен встречаться перед ним, а <h2> должен встречаться ещё раньше и так далее.

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

<h1>Простой HTML5</h1>
<h2>Мой первый сайт</h2>
<h3>Валидатор W3C</h3>
<h4>Знакомство с CSS</h4>
<h5>Селекторы в CSS</h5>

Теперь перейдём к вёрстке первого абзаца текста. Мы хотим избежать вложения абзаца в <header>. Это имеет смысл, потому что абзац должен быть частью <article>. Таким образом, мы добавляем первый <р> в <article> с тем же приоритетом что и <header>, но под ним.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8"> 
    <title>Джастин Бивер увлечён HTML</title>
  </head>
  <body>
    <article>
      <header>
        <h1>Джастин Бивер: С тех пор, как я узнал HTML, моя жизнь повернулась на 180 градусов</h1>
        <p>Написал: Дамиан Вельгошик</p>
      </header>
      <p>Джастин Бивер сделал признание, которого никак не ожидали даже самые 
      большие поклонники талантливого музыканта и поэта. Молодой певец признался, 
      что когда он набрал свой первый тег, его жизнь стала легче. Из окружения 
      канадца сообщают, что частные наставники Бивера, Райан Лослинг и 
      Николас Крейт, часто гуляют по Лос-Анджелесу, споря об инструменте 
      HTML-валидатор.</p>
    </article>
  </body>
</html>

Далее мы добавляем фото плюс описание. Для этого типа контента, который связан со всем документом в целом, вроде фотографий, графиков или карт, мы будем использовать тег <figure>. Следует отметить, что условия использования <figure> важно в том смысле, что вы можете использовать дополнительный элемент <figcaption>, который добавляет описание под изображением.

<!DOCTYPE html>
  <html lang="ru">
  <head>
  <meta charset="utf-8"> 
  <title>Джастин Бивер увлечён HTML</title>
  </head>
  <body>
    <article>
      <header>
        <h1>Джастин Бивер: С тех пор, как я узнал HTML, моя жизнь повернулась на 180 градусов</h1>
        <p>Написал: Дамиан Вельгошик</p>
      </header>
      <p>Джастин Бивер сделал признание, которого никак не ожидали даже самые 
      большие поклонники талантливого музыканта и поэта. Молодой певец признался, 
      что когда он набрал свой первый тег, его жизнь стала легче. Из окружения 
      канадца сообщают, что частные наставники Бивера, Райан Лослинг и 
      Николас Крейт, часто гуляют по Лос-Анджелесу, споря об инструменте 
      HTML-валидатор.</p>
      <figure>
        <img src="cat.jpg" alt="Кот Джастина Бивера доволен">
        <figcaption>Счастливый кот Джастина Бивера</figcaption>
      </figure>
    </article>
  </body>
</html>

После добавленного изображения у нас есть ещё один абзац, который надо вставить в статью. Обратите внимание, что этот абзац содержит цитату, «Я, вероятно, спою об HTML в своём следующем альбоме». Мы можем анонсировать эту цитату так, что наш код будет иметь большую смысловую ценность. Возможно в будущем кто-то станет искать цитаты Джастина Бивера и эта маркировка поможет им найти цитату быстрее. В противном случае поисковые системы всегда будут иметь дело с одним огромным куском текста.

Для указания что часть текста является цитатой мы собираемся использовать тег <q> внутри нового абзаца.

<!DOCTYPE html>
  <html lang="ru">
  <head>
  <meta charset="utf-8"> 
  <title>Джастин Бивер увлечён HTML</title>
  </head>
  <body>
    <article>
      <header>
        <h1>Джастин Бивер: С тех пор, как я узнал HTML, моя жизнь повернулась на 180 градусов</h1>
        <p>Написал: Дамиан Вельгошик</p>
      </header>
      <p>Джастин Бивер сделал признание, которого никак не ожидали даже самые 
      большие поклонники талантливого музыканта и поэта. Молодой певец признался, 
      что когда он набрал свой первый тег, его жизнь стала легче. Из окружения 
      канадца сообщают, что частные наставники Бивера, Райан Лослинг и 
      Николас Крейт, часто гуляют по Лос-Анджелесу, споря об инструменте 
      HTML-валидатор.</p>
      <figure>
        <img src="cat.jpg" alt="Кот Джастина Бивера доволен">
        <figcaption>Счастливый кот Джастина Бивера</figcaption>
      </figure>
     <p>Бивер уже создал несколько сайтов и не намерен останавливаться на достигнутом.
     <q>Я, вероятно, спою об HTML в своём следующем альбоме</q>, - добавил певец.</p>
    </article>
  </body>
</html>

Теперь сохраним код в файле с расширением .html и отобразим его в браузере.

Вы уже завершили свою вторую страницу. Отлично! Ещё один шаг чтобы стать профессиональным веб-разработчиком.

Автор и редакторы

Автор: Дамиан Вельгошик
Последнее изменение: 11.08.2018
Редакторы: Влад Мержевич