Урок 4. Подготовка

Всем привет!
Продолжаем изучать html, это уроки для начинающих и мы продолжаем.
Сегодня мы будет подготавливать верстку для стилизации, которую мы сделаем на следующем уроке по css. Сделаем пункты меню и виды текста. Поехали!

Категории

Заходим в документ "category.html", который мы создавали в предыдущем уроке.
Далее, переходим в блок div с классом content. В нем создаем заголовок и список.

Код:

1. <div class="content_wrapper">
2. <div class="content_wrapper_row">
3. <div class="content_wrapper_row_head">
4. <h1>Категории</h1><!--Элемент html "Заголовок"-->
5. </div>
6. </div>
7. <div class="content_wrapper_row">
8. <div class="content_wrapper_row_spisok">
9. <ul>
10. <a href="category/menushki.html"><li>Менюшки</li><a/>
11. <a href="category/teksti.html"><li>Тексты</li><a/>
12. </ul>
13. </div>
14. </div>
15. </div>

Пока не обращайте внимания и не замарачивайтесь по поводу того, что так много блоков, это мы разберем в будущем и вы сами поймете со временем.
Теперь не много разберем то, с чем мы еще не знакомились.
Тег H1 - этот элемент html является заголовком. Можно написать просто слово и оформить его как заголовок, но такой код (слово оборачиваем тегом H1), более валиден.

Валиден?

Да.
Валидация - это, проще говоря, правильность написания html. То, как правильно вы напишете код, будет зависеть его валидность, тем самым вы ускорите загрузку страниц и поисковые системы вас будут любить больше =).

Вы могли заметить, но это не столь важно, что мы в этот раз в списке UL пункты LI обернули в ссылку, так тоже можно, кому будет так удобнее, различия вы увидите в следующем уроке по стилям =).

Что дальше?
Дальше, смотрим, мы создали ссылки на страницы html значит нам нужно их создать, создаем их в отдельной папке или нет, дело ваше, я создал их в отдельной папке.

Классы

Многие зададутся вопросом: почему такие классы у блоков?
Отвечаю. Я не знаю как делают другие, но или я сам к этому пришел, или же я где то это вычитал, в общем я это делаю с давних времен, что не помню когда начал так писать. Я задаю классы или идентификаторы элементам исходя из их родителя.
А именно!

Возьмем родителя с классом header, в нем значит я создам его дочерний элемент с классом, в котором начало будет звучать как у родителя, потом нижнее подчеркивание и название дочернего элемента - header_dochka. Дальше в этом элементе я создам его дочерний элемент, название которому, будет служить такое родитель_дочка_дочкадочки = header_dochka_menu.:D
Сначала это может быть не совсем понятно, но если приглядеться, то вы поймете, что когда будет много кода, благодаря таким названиям можно будет определить, что у элемента header_dochka_menu главный родитель будет header.
вот.

Не отвлекаемся!

Теперь заполняем документ menushki.html.
Вставляем аналогичный код от других документов изменяем лишь часть элемента с классом content.

1. <div class="content_wrapper">
2. <div class="content_wrapper_row">
3. <div class="content_wrapper_row_head">
4. <h1>Менюшки</h1><!--Элемент html "Заголовок"-->
5. </div>
6. </div>
7. <div class="content_wrapper_row">
8. <div class="content_wrapper_row_menublock">
9. <ul id="content_wrapper_row_menublock_one">
10. <li><a>Пункт 1</a></li>
11. <li><a>Пункт 2</a></li>
12. <li><a>Пункт 3</a></li>
13. <li><a>Пункт 4</a></li>
14. </ul>
15. </div>
16. <div class="content_wrapper_row_menublock">
17. <ul id="content_wrapper_row_menublock_two">
18. <li>Пункт 1</li>
19. <li>
20. <p>Пункт 2</p>
21. <ul id="content_wrapper_row_menublock_two_podmenu">
22. <li>Пункт 1</li>
23. <li>Пункт 2</li>
24. <li>Пункт 3</li>
25. <li>Пункт 4</li>
26. </ul>
27. </li>
28. <li>Пункт 3</li>
29. <li>Пункт 4</li>
30. </ul>
31. </div>
32. </div>
33. </div>

Он обозначает текст, просто текст. Но играет важную роль в валидации.

И последний файл заполняем teksti.html:

1. <div class="content_wrapper">
2. <div class="content_wrapper_row">
3. <div class="content_wrapper_row_head">
4. <h1>Тексты</h1><!--Элемент html "Заголовок"-->
5. </div>
6. </div>
7. <div class="content_wrapper_row">
8. <div class="content_wrapper_row_textblock">
9. <p>Какой-то текст</p>
10. </div>
11. <div class="content_wrapper_row_textblock">
12. <p>Какой-то текст</p>
13. </div>
14. <div class="content_wrapper_row_textblock">
15. <p>Какой-то текст</p>
16. </div>
17. <div class="content_wrapper_row_textblock">
18. <p>Какой-то текст</p>
19. </div>
20. </div>
21. </div>

Заключение

На сегодня все ребзя!
Переходим на следующий урок! =)
Всем спасибо, пока! =)