Наука + Бизнес = $$$

Карта Сайта

Среда, 13.12.2017, 08:37
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №3: создание списков в HTML

Создание списков в HTML

Для привлекательного и правильного оформления списков лучше использовать теги. Некоторые новички создают списки, используя клавиши "пробел", "enter" и различные символы в качестве маркеров. Это серьезная ошибка, так как в некоторых браузерах, списки созданные таким образом, отображаются совсем не так, как задумано.

Существует три вида списков. В первом, перечисляемые пункты помечаются цифрами или буквами. Во втором случае, пункты помечаются маркерами. Третий вид предназначен для определений.


Нумерованные списки

  • <ol> - парный тег, который задает начало нумерованного списка. Имеет параметр - type, который указывает, как будут нумероваться пункты данного списка, параметр имеет следующие значения:
  • i - маленькие римские цифры
  • I - большие римские цифры
  • а - маленькие английские буквы
  • А - большие английские буквы

Если параметр type не указывать, тогда по умолчанию будут использованы стандартные арабские цифры.

  • <li> - парный тег, в который нужно обязательно брать каждый пункт из списка.
Для примера напишем код двух списков:
<ol>
     <li>первый пункт</li>
     <li>второй пункт</li>
     <li>третий пункт</li>
</ol>

<ol type="I">
     <li>первый пункт</li>
     <li>второй пункт</li>
     <li>третий пункт</li>
</ol>
В браузере он примет такой вид:
  1. первый пункт
  2. второй пункт
  3. третий пункт
  1. первый пункт
  2. второй пункт
  3. третий пункт

Если использовать type="A", то нумерация пойдет латинскими буквами - A B C и т.д.


Маркированные списки

  • <ul> - парный тег, который задает начало маркированного списка. Также каждый пункт необходимо брать в парный тег <li> и также имеет параметр - type, который указывает какими маркерами будут обозначены пункты данного списка, имеет следующие значения:
  • square - левее расположен соответственный маркер
  • disc - левее расположен соответственный маркер
  • square - левее расположен соответственный маркер

Иногда возникает необходимость создавать список в списке. Давайте попробуем создать один из таких.

<ul>
     <li>Первый пункт основного списка</li>
          <ul type="circle">
               <li>первый пункт</li>
               <li>второй пункт</li>
               <li>третий пункт</li>
          </ul>
     <li>Второй пункт основного списка</li>
          <ul type="square">
               <li>первый пункт</li>
               <li>второй пункт</li>
               <li>третий пункт</li>
          </ul>
     <li>Третий пункт основного списка</li>
</ul>
Вид в браузере получится такой:
  • Первый пункт основного списка
    • первый пункт
    • второй пункт
    • третий пункт
  • Второй пункт основного списка
    • первый пункт
    • второй пункт
    • третий пункт
  • Третий пункт основного списка

Списки определений

Такие списки используют абсолютно другие теги. Конечно, такие списки редко используются, однако лучше с ними ознакомимся

  • <dl> - парный тег, который задает начало списка определений
  • <dt> - в этот парный тег берется термин, которому будет дано определение
  • <dd> - в данном парном теге пишется определение

Пример списка определений:

<dl>
     <dt>Сайт</dt>
          <dd>
Совокупность нескольких веб-страниц, которые связаны между собой различными ссылками и объединены одним адресом, а также имеют общий дизайн - называется сайтом. Сайты бывают разные, в основном их делят на коммерческие(для рекламы и прибыли) и некоммерческие.
          </dd>
     <dt>Тег</dt>
           <dd>
Тег — это элемент языка разметки гипертекста, который применяется для вставки и редактирования различных элементов веб-страницы.
          </dd>
</dl>
Вид кода в браузере:
Сайт
Совокупность нескольких веб-страниц, которые связаны между собой различными ссылками и объединены одним адресом, а также имеют общий дизайн - называется сайтом. Сайты бывают разные, в основном их делят на коммерческие(для рекламы и прибыли) и некоммерческие.

Тег
Тег — это элемент языка разметки гипертекста, который применяется для вставки и редактирования различных элементов веб-страницы.

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

Кстати возможности оформления списков значительно расширяются, если использовать при работе с ними CSS: Списки в CSS


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru