Адаптивная верстка сайта
Для начала создадим в корневой папке, папку assets. Тут будут храниться файлы изображений, стилей и другое, что не относится к страницам контента. Делаем это для того, чтобы не захламлять корневую папку.
Код шаблона адаптивной верстки сайта (index.html)
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8"/>
<title>Мой первый сайт</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="./assets/style.css" />
</head>
<body>
<header><a href="./index.html"><img src="./assets/logo.png" title="Мой первый сайт" alt="Мой первый сайт"></a>
</header>
<div id="container">
<article>
Задает содержание сайта вроде новости, статьи, записи блога, форума, анонсов и другой информации..
</article>
<aside>
<b>Меню</b>
<ul>
<li><a href="/">Главная</a></li>
<li><a href="./portfolio.html">Портфолио</a></li>
<li><a href="./contact.html">Контакты</a></li>
</ul>
</aside>
</div>
<footer><center>© 2022</center></footer>
</body>
</html>
А в папке assets поместим картинку логотипа сайта и файл стилей style.css.
style.css
/* для блока - шапка */
header{
text-align: left; /* Выравнивание внутреннего контента по левому краю */
width: 95%; /* Ширина блока и общая ширина*/
height: 90px; /* Высота блока */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
background: #eeeeff; /* Цвет фона */
}
/* для контейнера */
#container {
width: 97%;/* Ширина слоя или ширина макета+20px */
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
/* для блока - меню */
aside {
width: 27%; /* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 5px; /* Внутренние поля вокруг содержимого */
background: #dddddd; /* Цвет фона */
right: 0px; /* Координата от правого края окна */
top: 0px; /* Координата от верхнего края окна */
}
/* для блока - контент */
article { /* Правая колонка*/
width: 70%;/* Ширина слоя */
float: left; /* Обтекание с соседним слоем */
padding: 10px; /* Внутренние поля вокруг содержимого */
background: #eeeeee; /* Цвет фона */
}
/* для блока - подвал */
footer{
width:95%; /* Ширина слоя */
clear:left; /* возвращаем блочность и располагаем слой слева */
padding: 10px; /* Внутренние поля вокруг содержимого */
background:#aaa;
color:#fff;
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
@media screen and (max-width: 768px) {
aside, article, footer, header, #container {
margin-left:0px;
margin-top:0px;
width:100%;
margin-right: auto; /* Авто-отступ справа */
margin-left: auto; /* Авто-отступ слева */
}
aside {
padding: 10px;
}
}
Заметьте, что теперь директория подключения файла стилей включает в себя папку assets - ./assets/style.css.
<b>Меню</b><br/> Означает что слово «меню» должно быть жирным текстом, а br/ означает перенос строки. Другие теги для работы с текстом.
Тег ul устанавливает маркированный список. Каждый элемент списка должен начинаться с тега li. В нашем случае это список ссылок для перехода на другие страницы.
<a href="./portfolio.html">Портфолио</a> это ссылка для перехода на страницу portfolio.html. Обратите внимание на ссылку перехода на страницу contact.html, там присвоено свойство target="_blank" - это означает, что страница откроется в отдельной вкладке. Часто это надо если Вы ссылаетесь на сторонний сайт и не хотите чтобы посетитель покинул ваш. Если ссылка ведет на сторонний сайт, то путь к странице надо указывать полностью, например: <a href="https://mysite/content/page.html">Источник</a>.
В шапке сайта используется ссылка с картинкой вместо текста.
<h2>, <h3>...<h6> - заголовки, как в книге.
<h1> - должен повторяться один раз, как название книги.
<h2> - по иерархии он ниже, можно сравнить с главой книги.
и так далее до <h6>.
Последняя "фишка" находится в футере, там используется символ копирайта. Список кодов символов.
Осталось добавить в корневую папку, где находится index.html, страницы с таким-же макетом, но разным содержимым контента, portfolio.html и contact.html.