Главная / Html / Учебник по Html. Ступенька 32-ая. 

Учебник по Html для чайников. Дополнительные.

Ступенька 32-ая.

В предыдущей версии учебника тему списки я рассматривала практически в самом начале нашего обучения. В этой версии некоторые главы поменялись местами, и в итоге я решила, что логичнее и правильнее рассказать вам о списках, когда вы немного уже начнете понимать специфику HTML.

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

Тоже самое и со списками, они также определяют структуру документа. Визуально списки отображаются следующим образом:

  • Текст один
  • Текст другой
  • Текст сякой
  • Текст эдакий
Это называется неупорядоченный список. Кроме неупорядоченных списков существуют еще и упорядоченные списки:

  1. Сначала сделаем это.
  2. Затем мы сделаем то.
  3. А также действие третье.
  4. И с ним нас четвертое ждет.
Различные типы списков можно употреблять одновременно друг с другом. Неупорядоченные списки вводятся тэгом <ul>:


     
<ul>
...
</ul>


Чтобы ввести элементы списка (текст один, текст другой…), нам нужно ввести в нашу конструкцию тэг <li> (не требует закрывающего тэга):


     
<ul>
<li>Текст один
<li>Текст другой
<li>Текст сякой
<li>Текст эдакий
</ul>


В итоге получим:

  • Текст один
  • Текст другой
  • Текст сякой
  • Текст эдакий
У тэга <li> есть атрибут type, он отвечает за стиль элемента списка, визуально это выглядит так:

  • По умолчанию - (1)
  • Полый кружок - (2)
  • Не будь таким квадратным - (3)
В случае (1) - <li type="disk">,
в случае (2) - <li type="circle">,
в случае (3) - <li type="square">.

Атрибут type может вводиться не только для каждого элемента списка <li>, но и для всего списка в целом:


     
<ul type="square">Рейтинг@Mail.ruRambler's Top100
<li>Текст один
<li>Текст другой
<li>Текст сякой
<li>Текст эдакий
</ul>


Очень часто тэг <ul></ul>, которым вводятся неупорядоченные списки, используется кодерами немного нестандартно, для создания отступа (табуляции). Если вы пользовались текстовыми редакторами (допустим Вордом), то вы знаете, что такое табуляция (это когда вы жмете на кнопочку Tab и весь текст сдвигается, допустим, вправо), тоже самое мы можем сделать средствами html:

<ul>Ваш текст</ul>

В этом случае мы не использовали тэг <li>, и не ввели элементы списка. Как я уже говорила, такое применение тэга <ul></ul> не стандартно, а значит нежелательно, т.к. не предусмотрено спецификацией, однако, если вам это нужно, то я считаю, что, в данном случае, не страшно нестандартно воспользоваться тэгом <ul>, ведь визуально это отобразиться всеми броузерами, а также избавит вас от необходимости вводить лишние таблицы в ваш документ, чтобы достичь того же эффекта стандартными средствами. Чтобы отступ (табуляция) был больше, можно вложить тэг <ul> в самого себя:

<ul><ul>Два отступа</ul></ul>
<ul><ul><ul>Три отступа</ul></ul></ul>

На этом с неупорядоченными списками мы закончили, теперь поговорим об упорядоченных списках, но уже на следующей ступеньке.