Вы выполнили задание Кекса — разработали прототипы главной и внутренней страниц сайта. А заодно познакомились с устройством HTML-страниц и изучили теги, отвечающие за их крупные структурные блоки. В следующих частях мы наполним прототипы реальным содержанием.
Давайте ещё раз посмотрим на получившийся результат. Блоки сайта отображаются в браузере в том же порядке, в котором они идут в коде, и располагаются друг под другом, в одну колонку.
Но мы пока только проектируем сайт, правда? Поэтому можем подвигать блоки и прикинуть, как они будут смотреться в другой раскладке. За расположение блоков в браузере отвечает уже не HTML, а CSS. Такое разделение очень удобно: мы можем, не меняя разметку, экспериментировать с расположением блоков и их внешним видом.
Позже мы обязательно подробно изучим CSS и узнаем, как управлять внешним видом элементов страницы. А сейчас просто подключите в <head> другие стили, в которых описана другая сетка страницы.
В этой и последующих частях доступен для скачивания архив с текущим состоянием вёрстки. Вы можете скачать его и самостоятельно посмотреть, как всё устроено. А вот и ссылка на первое промежуточное состояние.
index.html
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="keywords" content="вёрстка, HTML, CSS, блог">
<meta name="description" content="Блог о процессе обучения веб-технологиям">
<title>Сайт начинающего верстальщика</title>
<link rel="stylesheet" href="outlines.css">
</head>
<body>
<header>
<h1>Сайт начинающего верстальщика</h1>
</header>
<main>
<nav>
Навигация
</nav>
<section>
<p>Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.</p>
<p>Моё первое задание — вести дневник и честно писать обо всех своих свершениях.</p>
</section>
<section>
Раздел про навыки
</section>
</main>
<footer>
Подвал сайта
</footer>
</body>
</html>
Спасибо! Мы скоро всё исправим)
Код изменился, нажмите «Обновить» или включите автозапуск.
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
100%
ЗадачиВыполнено
0
Замените адрес подключённого файла стилей на outlines-alternate.css.
Если у вас возникли сложности во время прохождения задания, то вы можете обратиться за помощью на наш форум или задать вопрос в Телеграм-чате.