января
26
2012


Приветствую Вас, мои дорогие читатели и случайные прохожие! В четвертой лекции мы поговорим о списках и отдельно о теге <div>, который имеет намного большее значение, нежели Вам может показаться на превый взгляд.

Списки

Думаю Вам не нужно объяснять что такое список, я прав? Замечательно! Перейдём тогда сразу к делу. Тег <ul> устанавливает начало маркированного списка, и как Вы, наверное, уже догадались, тег </ul> — его конец. Что значит маркированный? Это значит что перед каждым элементом списка располагается маркер, он же буллит, — типографский знак, используемый для выделения элементов списка. Каждый элемент такого списка заключен между тегами <li> и </li>. У данного тега есть один собственный атрибут type, который может принимать 3 значения square (квадрат), disc (диск), circle (кольцо). По умолчанию для элемент списка устанавливается тип disc. Применение атрибута type для тега <li> позволяет установить тип для каждого из элементов списка в отдельности, для того, чтобы применить тип для всего списка, атрибут type нужно использовать для тега <ul>.
Рассмотрим код простого маркированного списка:

<ul type="circle">
<li>Первый элемент списка</li>
<li>Второй элемент списка</li>
</ul>

Который выглядит следующим образом:

  • Первый элемент списка
  • Второй элемент списка

Также в HTML существует такое понятие, как нумерованный список, который устанавливается с помощью тега <ol>. У данного тега есть три собственных атрибута:

  • type — Устанавливает вид маркера списка.
  • reversed — Нумерация в списке становится в обратном порядке (3,2,1).
  • start — Число, с которого будет начинаться нумерованный список.

Атрибут type для тега <ol> может принимать следующие значения: A (заглавные латинские буквы), a (строчные латинские буквы), I (заглавные римские цифры), i (строчные римские цифры), 1 (арабские цифры). По умолчанию значение равно 1, т.е. арабские цифры. Элемент нумерованного списка располагается между тегами <li> и </li>, как и в случае с маркированным списком.
Код простого нумерованного списка:

<ol type="a">
<li>Первый</li>
<li>Второй</li>
<li>Третий</li>
</ol>
  1. Первый
  2. Второй
  3. Третий

На самом деле, списки. Применяются не только при выводе списка, как может показаться на первый взгляд. Зачастую меню сайта также выводят при помощи списка, при выводе рубрик на блогах также используют списки. Список может отображаться как вертикально, так и горизонтально. Но во втором случае силой одного HTML не обойтись. Список может быть как с маркером, так и без. Для этого на помощь приходит CSS (Cascading Style Sheets — каскадные таблицы стилей). Поэтому, дорогие читатели, пришло время, когда мы с Вами должны окунуться в изучение спецификаций CSS.
Ну что же, поздравляю! Теперь Вы знаете, что такое списки и как их применять на деле.

А теперь я постараюсь убедить Вас, в том, что CSS крайне необходим. Для этого нужно познакомится с неприметным на первый взгляд тегом <div>, который является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Во второй лекции, я говорил Вам про то, что можно верстать сайт таблицами, так вот, можно, но не нужно! Дело в том, что среди верстальщиков показателем мастерства является блочная вёрстка. Вы можете встретить высказывания «да таблицами я хоть черта сверстаю», да, это так. Но это говорят в основном те, кто не смог освоить CSS, т.к. вид блока <div> управляется при помощи стилей. Но Вы ведь не такие, Вы лучше, и я это знаю!

«А как же таблицы?» — спросите Вы. Таблицы таблицами, они по прежнему имееют место в вёрстке, ведь согласитесь, использовать блоки для вывода таблицы успеваемости студентов, нелогично. Используя CSS и блочную вёрстку, Вы уменьшите вес страницы сайта, тем самым увеличив скорость загрузки Вашего сайта.
И так если Вы ещё не решились изучать CSS — вот мой последний аргумент: предположим, что сайт — это квартира, HTML — это стены, благодаря которым у Вас получаются комнаты, а CSS — это двери, обои, краска, картины, мебель, ковры — т.е. то, что придаёт Вашей квартире уникальности! Хотите чтобы Ваш сайт запомнился Вашим пользователям — сделайте его уникальным, и в этом Вам поможет CSS.

Подпишитесь на RSS ленту блога, чтобы не пропустить новый набор лекций CSS с нуля. Если у Вас есть какие-то вопросы, задавайте их в комментариях, с удовольствием отвечу, а ответы на вопросы о CSS включу в первую лекцию CSS с нуля.

Вы только начинали работать на компьютере? Возникает много вопросов? Тогда советую посетить блог Pk-prosto.ru, который поможет ускорить Ваше обучение компьютеру. Вы быстро научитесь работать с WebMoney, самостоятельно создавать загрузочный диск и многое другое.

Не пропустите, это тоже интересно!

К этой записи 6 комментариев

  • Миша пишет:

    а 5 лекция будет?

    • Stafox пишет:

      Пока не планируется. После этих 4х лекций, Вы уже можете самостоятельно начинать делать «первые шаги». Т.к. считается, что Вы уже почти всё знаете, за исключением некоторых нюансов, которые, возможно, Вам даже и не пригодятся.

      Далее планируется курс CSS с нуля, в котором будут также рассматриваться нюансы HTML+CSS.

  • Inna пишет:

    спасибо большое за лекций :)
    а будут лекций по Java Script?

    • Stafox пишет:

      Впринципе возможно всё. Но в ближайшем будущем я планировал начать рассказ про CSS. И так уже немного не успеваю, всё обещаю и обещаю, постараюсь с выходных начать. Ну а вообще, вот вам ссылочка на довольно-таки хороший учебник по JS: http://learn.javascript.ru/

  • Max пишет:

    Лекций про особенности HTML5 хорошо бы, а лучше про дебаг cross-platfrom’еммых аппов. Если сможешь. : )

    • Stafox пишет:

      Наверное не могу:) Загружен проектами сейчас, как освобожусь чуток — нужно выполнять обещания и начать разжёвывать CSS для новичков.

Добавить комментарий для Stafox