Меню
Спросить
< >

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

24 октября 2016
Урок 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>

Заключение

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

Следующая статьяПредыдущая статья