Как создать свой сайт бесплатно? Как сделать сайт своими руками? Как заработать в Интернете? Создание сайтов на заказ.

Запрос должен быть не менее 4-х символов.

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.

<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

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

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


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


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

Комментарии добавил(а): Иосиф
Дата: 2012-06-11

При использовании приведенного кода ненумерованного списка, список получается смещенным в центр, в то время как кружки находятся слева. А как сместить тексты строк влево к кружкам? Куда и как следует вставить left

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

Введите сумму чисел с картинки:
Введите сумму чисел

GudzonPartner.com

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


05.08.2014
Новый раздел! Платежные системы Интернета. Все о платежных системах и сервисах.

09.08.2013
Новинка! Обзор и Анализ реальных способов заработка. Как и Сколько можно заработать в Интернете? Цифры. Факты. Комментарии.

28.05.2013
Обновилась Партнерка сайта! Зарабатывайте вместе с нами! "Новые товары и рекламные материалы"

25.05.2013
Видео Курс! "Как создать свой Информационный Бизнес в Интернете" Зарабатывайте: от 30000 ++ рублей.

Почтовая рассылка! Бесплатные электронные книги из серии: "Секреты создания сайтов"


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

Новинка!
Как реально заработать
в Интернете?
"Обзор видов и способов заработка."

Специальный Отчет:

Специальный Отчет: Как и сколько можно реально заработать в Интернете? Рельные цифры, факты и анализ различных способ заработка в Интернете

В подарок всем подписчикам!

SmartResponder.ru
Ваш e-mail: *
Ваше имя: *

Полный список наших почтовых рассылок!

Домены

Сервис мгновенной регистрации Доменов

Google Adsense



Навигация

Уроки HTML

CSS уроки

Статьи

Инструменты

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

Книги

Украшения

Сайт от А до Я

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

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

Охрана труда

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

PHP УРОКИ

Услуги

Скрипты

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

SEO

jQuery

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

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

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

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

Видео Курсы

Видео Курс по созданию собственного Информационного Бизнеса в Интернете
Видео Курс по созданию
Информационного Бизнеса в Интернете
Узнать сейчас >>>


Хотите заработать?
2-х Уровневая
Партнерская программа!

Присоединяйтесь.


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

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

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

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

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

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

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

RSS Лента Новостей сайта www.LuksWeb.ru

Наши новости в Твиттере

Архив

2016 год:

2015 год:

2014 год:

2013 год:

2012 год:

2011 год:

2010 год:

2009 год:

2008 год:

Сайты друзей

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

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

Деревянные дома от СПК "Ванда"

Наши ссылки

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

QR код сайта www.LuksWeb.ru

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


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

 

Аттестован системой Z-PAYMENT
Проверено Z-PAYMENT