Обо всём мне близком и далёком
Лучше скажи мало,
но хорошо.
Козьма Прутков
Как я самостоятельно создавал этот сайт.
Принимаясь за дело, соберись с духом.
Козьма Прутков
Блок <div>
Сам по себе тег <div> ничего не делает, зато он позволяет объединить несколько элементов страницы в один блок. У меня тег <div> объединит в один блок заголовок, заданный тегом <h1> и пять абзацев, заданных тегами <p>.
Браузер, "встретив" тег <div>, выделяет прямоугольную область, ширина которой по умолчанию равна ширине родительского элемента. В моём случае для тега <div> родительским является тег <body>, так как <div> находится внутри <body>.
Я окрасил фон прямоугольной области в жёлтоватый цвет с помощью атрибута background-color: #fcfadd и ограничил ширину этой прямоугольной области атрибутом width, сделав её равной равной 1268px для экрана с разрешением 1280 px по горизонтали. Внутрь тега <div> я поместил свои идеи по оформлению страницы.
<html>
<head>
<title>
Моя первая страница сайта
</title>
</head>
<body style = "background-color: #557bac; ">
<!-- Комментарий №1: В этой строке я вставил определение стиля в тег <body> -->
<div style = "background-color: #fcfadd; width: 1268px;"><!-- Комментарий №2: В этой строке я вставил определение стиля для тега <div> -->
<h1> Вот что я задумал сделать: </h1>
<p style = "font-style: italic;">
1. Сначала наверху страницы я помещу красиво оформленное название нашего садоводства (чердак страницы);</p>
<p style ="background-color: silver; font-weight: bold; text-decoration: underline;">
2. Ниже горизонтальное меню для перехода на страницы главных разделов сайта;</p>
<p style ="background-color: pink; padding: 30px; font-size: 15pt; font-family: 'Arial';">
3. Ещё ниже вертикальное меню для перехода на страницы внутри раздела сайта и справа
от вертикального меню само содержание страницы, ради чего она и создавалась;</p>
<p style ="background-color: silver; width: 250px; color: red;">
4. Ещё ниже - нижнее меню, и наконец,</p>
<p style = "background-color: silver; width: 300px; margin-left: 200px; padding: 30px;">5. В самом низу опять же <span style ="font-weight: bold; font-style: italic; color: green;"> красиво </span> оформленный "подвал".</p>
</div> <!-- Комментарий №2: Конец тега <div> -->
</body>
</html>
Я сохранил этот текст в файле make_site_how.html в папке I make_site, в меню Notepad++ выбрал пункт Запуск, а в выпавшем меню пункт
Launch in Firefox. И на экране в окне браузера появилась моя первая страничка, с моим текстом в жёлтоватом прямоугольнике.
Я опять уменьшил масштаб изображения в окне браузера, нажав три раза на клавишу "-" и удерживая клавишу CTRL. Размер жёлтоватой прямоугольной области, в которой находятся мои идеи, уменьшился вместе с размером текста и сместился влево.
Теперь я попытаюсь разместить этот блок по центру окна браузера и вставить рисунок на свою первую страницу сайта, который будет заголовком ("чердаком") моего сайта.