
Всем привет!
Продолжаем изучать html, это уроки для начинающих и мы продолжаем.
Сегодня мы будет подготавливать верстку для стилизации, которую мы сделаем на следующем уроке по css. Сделаем пункты меню и виды текста. Поехали!
Категории
Заходим в документ "category.html", который мы создавали в предыдущем уроке.
Далее, переходим в блок div с классом content. В нем создаем заголовок и список.
Код:
- <div class="content_wrapper">
- <div class="content_wrapper_row">
- <div class="content_wrapper_row_head">
- <h1>Категории</h1><!--Элемент html "Заголовок"-->
- </div>
- </div>
- <div class="content_wrapper_row">
- <div class="content_wrapper_row_spisok">
- <ul>
- <a href="category/menushki.html"><li>Менюшки</li><a/>
- <a href="category/teksti.html"><li>Тексты</li><a/>
- </ul>
- </div>
- </div>
- </div>
Пока не обращайте внимания и не замарачивайтесь по поводу того, что так много блоков, это мы разберем в будущем и вы сами поймете со временем.
Теперь не много разберем то, с чем мы еще не знакомились.
Тег H1 - этот элемент html является заголовком. Можно написать просто слово и оформить его как заголовок, но такой код (слово оборачиваем тегом H1), более валиден.
Валиден?
Да.
Валидация - это, проще говоря, правильность написания html. То, как правильно вы напишете код, будет зависеть его валидность, тем самым вы ускорите загрузку страниц и поисковые системы вас будут любить больше =).
Вы могли заметить, но это не столь важно, что мы в этот раз в списке UL пункты LI обернули в ссылку, так тоже можно, кому будет так удобнее, различия вы увидите в следующем уроке по стилям =).
Что дальше?
Дальше, смотрим, мы создали ссылки на страницы html значит нам нужно их создать, создаем их в отдельной папке или нет, дело ваше, я создал их в отдельной папке.
Классы
Многие зададутся вопросом: почему такие классы у блоков?
Отвечаю. Я не знаю как делают другие, но или я сам к этому пришел, или же я где то это вычитал, в общем я это делаю с давних времен, что не помню когда начал так писать. Я задаю классы или идентификаторы элементам исходя из их родителя.
А именно!
Возьмем родителя с классом header, в нем значит я создам его дочерний элемент с классом, в котором начало будет звучать как у родителя, потом нижнее подчеркивание и название дочернего элемента - header_dochka. Дальше в этом элементе я создам его дочерний элемент, название которому, будет служить такое родитель_дочка_дочкадочки = header_dochka_menu.:D
Сначала это может быть не совсем понятно, но если приглядеться, то вы поймете, что когда будет много кода, благодаря таким названиям можно будет определить, что у элемента header_dochka_menu главный родитель будет header.
вот.

Не отвлекаемся!
Теперь заполняем документ menushki.html.
Вставляем аналогичный код от других документов изменяем лишь часть элемента с классом content.
- <div class="content_wrapper">
- <div class="content_wrapper_row">
- <div class="content_wrapper_row_head">
- <h1>Менюшки</h1><!--Элемент html "Заголовок"-->
- </div>
- </div>
- <div class="content_wrapper_row">
- <div class="content_wrapper_row_menublock">
- <ul id="content_wrapper_row_menublock_one">
- <li><a>Пункт 1</a></li>
- <li><a>Пункт 2</a></li>
- <li><a>Пункт 3</a></li>
- <li><a>Пункт 4</a></li>
- </ul>
- </div>
- <div class="content_wrapper_row_menublock">
- <ul id="content_wrapper_row_menublock_two">
- <li>Пункт 1</li>
- <li>
- <p>Пункт 2</p>
- <ul id="content_wrapper_row_menublock_two_podmenu">
- <li>Пункт 1</li>
- <li>Пункт 2</li>
- <li>Пункт 3</li>
- <li>Пункт 4</li>
- </ul>
- </li>
- <li>Пункт 3</li>
- <li>Пункт 4</li>
- </ul>
- </div>
- </div>
- </div>
Он обозначает текст, просто текст. Но играет важную роль в валидации.
И последний файл заполняем teksti.html:
- <div class="content_wrapper">
- <div class="content_wrapper_row">
- <div class="content_wrapper_row_head">
- <h1>Тексты</h1><!--Элемент html "Заголовок"-->
- </div>
- </div>
- <div class="content_wrapper_row">
- <div class="content_wrapper_row_textblock">
- <p>Какой-то текст</p>
- </div>
- <div class="content_wrapper_row_textblock">
- <p>Какой-то текст</p>
- </div>
- <div class="content_wrapper_row_textblock">
- <p>Какой-то текст</p>
- </div>
- <div class="content_wrapper_row_textblock">
- <p>Какой-то текст</p>
- </div>
- </div>
- </div>
Заключение
На сегодня все ребзя!
Переходим на следующий урок! =)
Всем спасибо, пока! =)