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

Урок 2. DIV and UL

26 октября 2015
Урок 2. DIV and UL

Всем привет!
Сегодня будем знакомиться с такими понятиями, как: div - блоки, блочная и табличная верстка, и что такое список ul.

Начнём с того, что такое блочная верстка и какие бывают верстки? Верстки в основном делятся на две категории: бывают табличные и блочные верстки, не редко их совмещают, для удобства и прочих нужд.

Блочная и табличная верстка

С вами мы будем изучать блочную верстку сайта т.к. она в данный момент более приемлема, таблица ушла на задний план, но к таблице мы тоже когдаааа-нибудь вернемся =)
Но это лично мое мнение, и у каждого есть право выбора =)

Блочная и табличная верстка

И так блочная верстка

Чем она отличается от табличной? Лично для меня - кодом в документе.
Если же писать таблицей, то это довольно сложный и громоздкий код.
Более ясны и понятны дела обстоят с блочной версткой. Давайте попробуем разобраться на примере нашего сайта.
Вот наш сайт - белый лист, кстати тоже является блоком. Даже взять наше
тело body, что мы прописывали в первом уроке, это тоже блок, и у него будут свои
блоки, такие, как вы могли видеть на многих сайтах.
Вообще существуют основные блоки сайта:
- это шапка сайта;
- навигация;
- контент сайта;
- и подвал;

Структура html страницы

Так же внутри этого каждого блока будут свои маленькие блоки, например, блок с аватаркой, этот отдельно взятый блок будет намного приятнее, и удобнее обрабатывать стилями CSS, как и все блоки нашего документа, все документы HTML.
Давайте сразу откроем наш сайт index.html.
Хочу сказать, мы сразу параллельно будем проходить стили CSS и все это будет в одном документе. Сначала я показываю HTML и дальше уже в уроках по CSS объясняю обработку сайта.
Переходите на ссылку по урокам CSS, если кто еще не изучал этот язык. В первом же уроке мы проходили тег link, он помогает нам соединиться со стилями, которые располагаются в отдельном файле.
Но не об этом, это вы можете посмотреть в курсе уроков CSS.
Но, а мы продолжаем.
Див - блок, пишется он так: div, вот собственно это и есть наш блок.

Блок div

Я тут, подумал и решил, что сегодня мы изучим один из атрибутов HTML.

Атрибут class

Внутри тега после слова div пишем слово class, через пробел, это и будет его атрибут class задается для того, чтобы связаться с этим блоком.

html class

Прописываем class=”header”.
Далее создаем еще пару блоков.

  1. <!DOCTYPE html> <!--тип файла (html)-->
  2. <html> <!--начало страницы html-->
  3. <head> <!--Голова html-->
  4. <title>Страница HTML</title>
  5. </head>
  6. <body><!--тело html-->
  7. <div class="header"><!--Блок header-->
  8. <div class="header_text">Наш сайт</div><!--Блок header_text-->
  9. </div>
  10. <div class="content"<!--Блок content-->
  11. </div>
  12. <div class="footer"<!--Блок footer-->
  13. </div>
  14. </body>
  15. </html>

Мы создали наш блок, шапку сайта и наш текст.

Навигация

Кто-то скажет, что мы упустили навигацию.
Навигацию мы как раз разберем на примере списка ul. Список ul распространенная навигация, я видел ,ее делают многие парни, да я и сам в практике такую навигацию применяю.
При желании можете обернуть его тоже в div.
И как работает этот ul ?
Мы прописываем тег ul и скрываем его. Таким образом теперь это не просто какой-то элемент, теперь браузер спокойно понимает, что это именно список, а не картинка или простой текст. Пустым список не должен оставаться! Для того, чтобы заполнить список нам понадобиться знать тег li. li – это собственно элемент списка, в него мы обертываем наш текст, который хотим поместить в список.

Маркированный список ul
  1. <!DOCTYPE html> <!--тип файла (html)-->
  2. <html> <!--начало страницы html-->
  3. <head> <!--Голова html-->
  4. <title>Страница HTML</title>
  5. </head>
  6. <body> <!--тело html-->
  7. <div class="header"> <!--Блок header-->
  8. <div class"header_text">Наш сайт</div> <!--Блок header_text-->
  9. </div>
  10. <ul class="navigate"> <!--Маркированный список ul с классом "navigate"-->
  11. <li>Главная</li> <!--Строки списка ul-->
  12. <li>Категории</li>
  13. <li>Новости</li>
  14. <li>Регистрация</li>
  15. <li>Вход</li>
  16. </ul>
  17. <div class="content" <!--Блок content-->
  18. </div>
  19. <div class="footer" <!--Блок footer-->
  20. </div>
  21. </body>
  22. </html>

Сохраняем, обновляем и любуемся =).

Заключение

Что лучше таблица или блоки? Выбор за вами, но мы сделаем паузу на блоках =)
Всем спасибо до следующего урока!

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