RSS-лента

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

Автор: Андрей Краснокутский

Дата: 2009-03-30

Сегодня мы продолжаем совершенствовать свое мастерство по созданию сайтов. Очень часто при создании 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.

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

Рисунок 13.1

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

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

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

Листинг 13.2.

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

Рисунок 13.2

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

Просмотров: 14474

Поделитесь этой информацией со своими друзьями!

Комментарии к этой статье (уроку):

Добавить Ваш комментарий:

Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

Шаблоны сайтов

Книги

Украшения

Сайт от А до Я

Заработать в Интернете

Обман в Интернете

Охрана труда

МОДУЛЬНЫЕ КАРТИНЫ

PHP УРОКИ

Услуги

Скрипты

Почтовая Рассылка

SEO

jQuery

Специальная оценка условий труда (СОУТ) - АРМ

Платежные системы Интернета

УРОКИ ФОТОШОП

Секретный раздел

Видео Курсы

С нами сделать сайт сможет даже Ребёнок! "Сайт от А до Я" Узнать сейчас >>> Хотите заработать? 2-х Уровневая Партнерская программа! Присоединяйтесь.

Последние заметки

Модульная картина: Роскошь красного бархата

Модульная картина абстракция: Энергия солнца

Модульная картина: Синие розы

Модульная картина: Водопад

Модульная картина: Орхидеи

Новости сайта

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

Регистрация доменов

ООО "ПК "ЛюксСтрой"

Наши ссылки

Если Вам понравился
наш сайт, установите
Нашу ссылку, и
Получите подарки!!!

Наши Аттестаты

Проверить аттестат

Проверено Z-PAYMENT