Списки в HTML

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

В HTML существует три типа списков:

• Маркированные


• Нумерованные


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

1. Создание сайта


2. Раскрутка сайта


3.                                                             Заработок на сайте

HTML

Язык гипертекстовой разметки

CSS

Каскадные таблицы стилей

Javascript

Скриптовый язык программирования.

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

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

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

<UL> — тег, создающий маркированный список — </UL>

Тег является контейнерным и требует закрытия. Сам тег <ul> задает начало и конец маркированного списка, а для создания строк внутри списка применяется другой контейнерный тег.

<LI> — тег, создающий строку внутри списка — </LI>

Т.е. для создания простейшего маркированного списка нужен такой код:

<ul>

   <li>Апельсины</li>

   <li>Яблоки</li>

   <li>Груши</li>

</ul>

Для смены вида маркера у тега <ul> есть параметр type.

TYPE — параметр, позволяющий поменять внешний вид маркера списка.

В данном случае параметр может иметь следующие значения:

• Circle – создает маркер в виде окружности


• Disc – создает маркер в виде круга


• Square – создает маркер в виде квадрата

<ul type="square">

   <li>Апельсины</li>

   <li>Яблоки</li>

   <li>Груши</li>

</ul>

Параметр type, примененный к тегу <ul>, воздействует на все строки маркированного списка. Но его можно применить и к тегу <li>, и в этом случае он окажет влияние только на конкретную строку.

<ul>

   <li type="circle">Окружность</li>

   <li type="disc">Круг</li>

   <li type="square">Квадрат</li>

</ul>

Результат в даном случае будет таким:

• Окружность


• Круг


• Квадрат

Помимо этих трех разновидностей маркера, в HTML можно использовать и свои собственные маркеры, созданные в виде картинок.

Для этого внутри контейнера тега <ul> вместо обычных строк, необходимо писать строки следующего вида:

<img src=”pict.jpg”>Строка списка<br>.

Тег <img> создаст маркер в виде картинки, а <br> перенесет последующий текст на новую строку.

<ul>

   <img src=”football.jpg”>Футбол<br>

   <img src=”basketball.jpg”>Баскетбол<br>

   <img src=”hockey.jpg”>Хоккей<br>

</ul>

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

  Футбол

  Баскетбол

  Хоккей

Вот так можно использовать красивые картинки в качестве маркеров. Только не забывайте, что все строки списка должны находиться внутри контейнера <ul>….</ul>.

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

При создании нумерованных списков важна последовательность подачи информации, поэтому такие списки называют еще упорядоченными.

Эти списки применяются ничуть не реже, чем маркированные. Они могут использоваться при описании рецептов, алгоритмов, временных интервалов, перечисления пунктов в порядке их появления или важности, и.т.д

Для задания нумерованного списка используется тег <ol>

<OL> — тег, определяющий начало и конец нумерованного списка — </OL>

Для создания строки внутри нумерованного списка применяется тот же тег <li>.

<ol>

   <li>Системный блок</li>

   <li>Монитор</li>

   <li>Клавиатура</li>

   <li>Мышь</li>

</ol>

<h2>Как открыть запертую дверь</h2>

<p>Для того чтобы открыть запертую дверь в игре:<p>

<ol>

   <li>Незаметно подойдите к двери.</li>

   <li>Внимательно осмотритесь.</li>

   <li>Достаньте отмычку.</li>

   <li>Откройте дверь.</li>

   <li>Входите.</li>

</ol>

Для изменения способа нумерации предусмотрен тот же параметр type. Только при использовании в нумерованных списках, у него, естественно, уже другие значения:

• 1 – нумерация арабскими цифрами


• I – нумерация заглавными римскими цифрами


• a – нумерация строчными буквами латинского алфавита


• A – нумерация заглавными буквами латинского алфавита


• i - нумерация строчными римским цифрами

<ol type="I">

   <li>Античность</li>

   <li>Средние века</li>

   <li>Новое время</li>

</ol>

Результат этого примера:

1. Античность


2. Средние века


3. Новое время

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

START — параметр, определяющий с какого пункта начинать нумерацию.

<p>Продолжим рассмотрение образования вселенной. Вот дальнейшие этапы этого процесса:</p>

   <ol type="1" start="3">

      <li>Возникновение элементарных частиц</li>

      <li>Формирование ядер водорода</li>

      <li>Образование атомов</li>

   </ol>

Помимо этого, HTML позволяет назначать любой номер для конкретной строки. Для этого существует параметр value.

VALUE — параметр, позволяющий задать произвольный номер для выбранной строки.

<p>В этом списке специально пока не приводится второй пункт, т.к. позднее мы остановимся на нем отдельно.</p>

   <ol type="1">

      <li>Рисование дизайна в фотошопе</li>

      <li value="3">Наполнение сайта контентом</li>

      <li>Размещение сайта</li>

      <li>Тестирование сайта</li>

   </ol>

Обратите внимание, что параметр value задан только для одной строки — с которой начала меняться нумерация. Для остальных строк параметр не применен. Это связано с тем, что дальнейшая нумерация автоматически продолжается с того номера, который мы задали.

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

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

Элементы списка определении форматируются особым образом. После создания списка термин отображается слева, а определение создается с отступом от левого края и смещено на одну строку вниз. Как в примере выше

<DL> — контейнерный тег, задающий начало и конец списка определений  — </DL>

Сам по себе тег <dl> еще не создает список: внутри нужно задать его элементы. Они состоят из двух частей, каждая из которых создается специальным тегом.

<DT> — контейнерный тег, добавляющий термин в список определений — </DT>

<DD> — контейнерный тег, добавляющий описание термина в список определений — </DD>

Естественно, что за конструкцией <dt>....</dt> должна сразу же идти конструкция <dd>....</dd>. Иными словами, эти два контейнера парные и могут употребляться только совместно.

У всех трех рассмотренных тегов отсутствуют какие-либо специальные параметры.

<dl>

   <dt>Северная америка</dt>

   <dd>Материк планеты Земля на севере западного полушария</dd>


   <dt>Евразия</dt>

   <dd>Континент Земли с самой большой площадью</dd>


   <dt>Австралия</dt>

   <dd>Самый маленький материк Земли</dd>

</dl>

Как видите, термин заключается в контейнер <dt>....</dt>, а определение в <dd>....</dd>, и эти контейнеры чередуют друг друга.

Вложенные списки в HTML

Вложенные списки нужны для структурирования сложной информации. Например:

Классификация сайтов:

• По направленности
  
  
  
  • Коммерческие сайты
  
  
  • Контент-сайты
  
  
  
  



• По типу верстки
  
  
  
  • Жесткая верстка
  
  
  • Резиновая верстка
  
  
  
  

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

Вот код для создания списка, показанного выше.

<p>Классификация сайтов:</p>

   <ul>

      <li>По направленности

         <ul>

            <li>Коммерческие сайты</li>

            <li>Контент-сайты</li>

         </ul>

      </li>



      <li>По типу верстки

         <ul>

            <li>Жесткая верстка</li>

            <li>Резиновая верстка</li>

         </ul>

      </li>

   </ul>

Показанный принцип используется не только с маркированными списками но и с нумерованными.

Вложенность списка может быть любой. Принцип всегда один и тот же.

Если хотите потренироваться с вложенными списками, то вот вам усложненное задание на 5+. Необходимо создать такой список:

1. Создание сайта:
   
   
   
   • На конструкторе
     
     
     
     • narod.ru
     
     
     • ucoz.ru
     
     
     
     
   
   
   • По шаблону
   
   
   • На движке
     
     
     
     • Wordpress
     
     
     • Joomla
     
     
     
     
   
   
   • На HTML и CSS
   
   
   
   



2. Раскрутка сайта
   
   
   
   • Внутренняя оптимизация
   
   
   • Внешнее продвижение
   
   
   • Реклама сайта
   
   
   
   

Готовый код вы можете посмотреть здесь. Подобные списки являются основой сложных выпадающих меню.