Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

Как создать список на HTML странице.

Viktor | 24.02.2014 | нет комментариев

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

Можно просто с каждой новой строчки написать:

1. Товар № 1 (описание товара).

2. Товар № 2 (описание товара).

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

В HTML для создание списка (перечня товаров) используются специальные теги разметки. Списки делятся на Нумерованные и Ненумерованные.

Нумерованные списки создаются с помощью парных тегов <ol> </ol>. Элементы списки задаются с помощью тегов <li> </li>. Кроме того с помощью атрибута type=”1″ можно задать вид нумерации списка, именно:

  • type=”1″ – нумерация элементов списка арабскими цифрами;
  • type=”I” – нумерация элементов списка большими римскими цифрами;
  • type=”i” – нумерация элементов списка маленькими римскими цифрами;
  • type=”А” – нумерация элементов списка большими английскими буквами;
  • type=”а”- нумерация элементов списка маленькими английскими буквами;

Можно задать нумерацию списка например с цифры 5, для этого в теге <ol> прописываем атрибут start=”5″вот таким образом <ol start=”5″> и список будет начинаться с цифры 5.

Или же продолжить нумерацию с цифры например 11, например Вы вставили после 10 позиции в списке подробное описание товара или рекламу, для этого прописываем в атрибуте <li> зачение value=”11″, таким образом <li value=”11″> и дальше нумерация продолжится с цифры 11.

Полный листинг кода задающего нумерацию списка например большими английскими буквами выглядит так:

Листинг 13.1.

<ol type=”A”>
<li>Товары для автомобилей</li>
<li>Товары для населения</li>
<li>Товары повседневного спроса</li>
<li>Фотоаппараты</li>
<li>Бытовая техника</li>
</ol>

А вот так Ваш список будет выгдядить на web-странице:

Рисунок 13.1

Ненумерованные списки создаются с помощью парных тегов <ul> </ul>. Элементы списки задаются с помощью тегов <li> </li>. Вместо цифр или букв (как в нумерованных списках) с помощью атрибута type=” ” можно задать вид значка перед элементом списка, именно:

  • type=”square” – перед элементом списка стоит квадратик;
  • type=”disk” – перед элементом списка черный кружочек – это значение можно не прописывать оно присваивается по умолчанию;
  • type=”circle” – перед элементом списка прозрачный кружочек;

Полный листинг кода задающего нумерацию списка например с прозрачными кружками перед элементами списка выглядит так:

Листинг 13.2.

<ul type=”circle”>
<li>Товара для автомобилей</li>
<li>Товары для населения</li>
<li>Товары повседневного спроса</li>
<li>Фотоаппараты</li>
<li>Бытовая техника</li>
</ul>

А вот так Ваш список будет выгдядить на web-странице:

Рисунок 13.2

Пробуйте и экспериментируйте и Вы без труда сможете создать свой сайт.

АВТОРСКИЕ ПРАВА
Источник: luksweb.ru
При перепечатке ссылка на источник обязательна
Оставить комментарий

Ваш email не будет опубликован. Обязательные поля помечены (обязательно)

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2014 © BB3x.ru - русская поддержка форума phpBB