HTML5/CSS3: Создаём страницу статьи и чиним ссылки

Создаём полноценный сайт, поэтому важно уделить время созданию страницы со статьей. У нас уже есть анонсы и ссылки «Читать далее». В этом уроке создадим отдельную страницу для статьи и исправим некорректную ссылку «Читать далее», созданную ранее.

Исправление ссылок

Обратите внимание на ссылку внизу страницы. Она отображается некорректно: artoy.kl. Файл называется artoy.kl.html. Проблема в неверном написании ссылки: использовался путь /artoy.kl вместо корректного. На полноценных сайтах путь обычно указывается так: /artoy.kl (без расширения html). Это возможно, так как сервер понимает, что нужно открыть файл artoy.kl.html.

Для исправления необходимо переименовать все ссылки на статьи, например:

  • artoy.kl.html
  • и т.д. для всех статей

Создание страницы статьи

Создаём новый документ, называем его artoy.kl.html и сохраняем в папку www.

В качестве образца возьмём страницу about.html. Скопируем блок контента с этой страницы и вставим его в новый файл artoy.kl.html. В результате получим страницу со статьей, идентичную about.html.

Это базовый вариант. Можно добавить новые блоки, изображения, изменить текст и стили для создания уникальной страницы статьи.

Дополнительные рекомендации

Рекомендуется самостоятельно создать страницу статьи, добавив, например, изображение. Можно использовать изображение, отображающееся при нажатии на ссылку «Читать далее». Обратите внимание, что при нажатии на «Читать далее» на разных страницах открывается одна и та же страница, поэтому изображение будет одинаковым на всех страницах со статьями. Рекомендуется добавить отдельное изображение для каждой статьи.

Можно также добавить меню, список и проработать стили. Это отличное упражнение для практики работы с HTML и CSS. Опыт работы с HTML и CSS приходит с написанием кода, поэтому создание собственной страницы статьи — полезное упражнение.

Что будем искать? Например,программа