Блог Тимура Казанского

Урок 6. Элементы div на примере создания блога


Всем привет! В данном уроке мы подробно разберем html элементы div и научимся правильно их использовать на примере создания простого блога. Если вы прочитали предыдущий урок (Урок 5. Блочные и строчные элементы в HTML), то я думаю вы разобрались, что такое блочные и строчные элементы, если, что-то осталось непонятным, не переживайте, в этом уроке все обязательно встанет на свои места, так как сегодня, мы продолжим рассматривать блочный элемент html – div, но уже на конкретном, рабочем примере.

И так, как я уже говорил элементы div это мощные блоки для разметки html страницы. Элементы div используются для разделения страницы на отдельные, логические блоки (разделы), тем самым структурируя содержимое страницы. Только подумайте сами, одна страница сайта содержит множество разделов, такие как - навигационное меню и содержание, шапка сайта и подвал, новостная колонка и колонка дополнительной информации, представьте, если все это будет в одной куче?

Мы уже не сможем применять стили к отдельному логическому разделу, наш сайт превратится в свалку различных элементов, не будет никакой структуры, это как построить 5-ти этажный дом из одних кирпичей, т.е. без потолка и пола (т.к. плит перекрытия div нет), и все соседи сверху и снизу будут жить только снизу. В общем, ничего хорошего, и с вашим сайтом будет примерно тоже самое - ни шапки, ни границ, ни боковых колонок. Вот почему так важны элементы div и его собратья, которые мы рассмотрим в следующих уроках.

Практика

И так, первым делом, что нам нужно сделать при создании блога, это разметить его элементами div, это будет своего рода макет или каркас для блога. Но чтобы это сделать, нам нужно подумать, из чего будет состоять наш блог? Давайте начнем с базовых частей из которых обычно состоят типовые блоги, а заодно подсчитаем сколько нам элементов div понадобится:

  • 1. Шапка блога, где будет описание блога, может быть красивый логотип или что-то еще;
  • 2. Ниже будет идти меню навигации где будут располагаться такие кнопочки как: «главная страница», «о себе», «рубрики», «помощь» и так далее;
  • 3. Затем идут сами посты блога,
  • 4. Сбоку добавим колонку для таких пунктов, как например «архив», «все категории», «поиск», ну и тому подобное;
  • 5. И наконец, нижняя часть нашего блога – это подвал (footer).

Вот как будет выглядеть макет нашего блога.

Хорошо, значит для построения блога нам нужно всего 5 элемента div. Давайте схематически накидаем макет будущего блога и разметим сраницу элементами div.

Вот, как выглядит макет нашего блога:

Схема разметки элементами div нашего блога

А теперь приступим к написанию самого кода:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="shapka"></div>
<div class="navigaciya"></div>
<div class="posti"></div>
<div class="kolonka"></div>
<div class="podval"></div>
</body>
</html>

Вот и все, ничего сложного правда? Вот и готов скелет и основа нашего с вами блога. У вас скорее всего возникнет вопрос, что еще за новый атрибут «class» в элементах div? Атрибутом class помечаем определенной элемент в html, для того чтобы в последующем мы имели возможность применить к нему стили CSS, иначе, подумайте сами, как мы узнаем какой элемент стилизовать, если они все одинаковые? А если мы отнесем каждый элемент к определенному классу, нам будет известно, какой элемент в какой цвет красить (шучу конечно - стилизовать). И так, пол дела сделали.

Разметили нашу страничку блога, теперь займемся контентом (содержанием). Не волнуйтесь, подробно о классах, идентификаторах и других стилях, которые мы здесь используем, я расскажу в уроке 2. CSS классы, иначе вы просто запутаетесь. Поэтому, прочитайте этот урок, здесь мы разукрасим (стилизуем) наш блок и расставим элементы div по своим местам, согласно нашему макету, который представлен выше.

Отлично! А теперь приступим  к самому главному – контенту (содержимому) нашего блога. Как вы уже знаете из предыдущих уроков - в элемент абзаца <p> помещаем текст, в элемент заголовка <h> помещаем заголовок. Приступим?

<html>
<head>
</head>
<body>
<div class="shapka">
<h1>Добро пожаловать на блог Ивана Иванова</h1>
</div>
<div class="navigaciya">
<a>Главная страница</a>
<a>Категории</a>
<a>О блоге</a>
</div>
<div class="posti">
<h2></h2>
<p></p>
</div>
<div class="kolonka">
<b>Категории блога</b>
<ul>
<li><a>Истории</a></li>
<li><a>Рыбалка</a></li>
<li><a>Путешествия</a></li>
<li><a>Советы</a></li>
</ul>
</div>
<div class="podval">
<p>&copy; 2015 Блог Ивана Иванова</p>
</div>
</body>
</html>

Вот, что у нас в итоге получилось:

Наш блог написанный на html готов

А вот как установлены элементы div:

Вот как установлены элементы div на нашем блоге

Как вы видите ничего сложно, и уже за каких-то 6 уроков мы смогли написать, что-то реальное. Конечно в нем нет тех наворотов, которые имеют многочисленные блоги, но так ли они нужны? Самое главное начать, а вы уже это сделали. Теперь вы (к примеру) спокойно можете начинать писать статьи и они будут индексироваться тем самым появляясь в поиске. Ваша база статей будет расти, а параллельно вы будете делать ваш блог лучше, добавляя страницы категорий и остальные необходимые примочки. Говорить о плюсах своего блога (написанного самостоятельно) можно бесконечно, но это уже тема другой статьи. Всем успехов и увидимся на следующих уроках, где мы продолжим усовершенствовать наш блог.

P.S. Файлы урока, вы можете скачать тут, ради интереса вы также можете проверить код на валидность (как это делать я писал в статье Вся важность валидации HTML и CSS, и подумайте, что будет стоять в приоритете у поисковых систем – правильный, чистый, а самое главное быстрый блог или же навороченный, медленный, с кучей дублей и ошибок блог на CMS (WordPress, Joomla и т.д.)?

Категория: Все для создания сайтов

Читайте также - самые интересные истории обо мне

Оставьте ваш комментарий

Комментарии: 0