Генератор цветов Уроки C++ Уроки Windows forms Учебники по программированию Уроки HTML Уроки CSS Готовые задания Исходники Полезные программы
регистрация доменов

Дешёвые домены


Уроки HTML


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

С помощью списков html можно создать меню для вашего сайта с разными пунктами и подпунктами. При помощи списков создаётся содержание (карта) сайта, что очень удобно для поисковых систем.

И так, существуют теги "<ul> </ul>" - они определяют маркированный список.
Теги "<li> </li>" – определяют пункты, то есть элементы маркированного списка.


Для начала создадим простой список из нескольких пунктов: 

<html>
<head>
<title>Простой маркированный список HTML</title>
</head>
<body>
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</body>
</html>
  • One
  • Two
  • Three
  • Four


Для маркировок html можно задать некоторые типы, которые прописываются внутри
первого тега "<ul>" в type=" "

Создадим список, в котором вместо точек будут маленькие окружности (выколотые точки). Это тип называется "circle" 

<html>
<head>
<title>Маркированный список HTML </title>
</head>
<body>
<ul type="circle">
<li>Один</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
</ul>
</body>
</html>
  • Один
  • Два
  • Три
  • Четыре


Теперь вместо типа "circle" зададим тип "square" (квадратики) 

<html>
<head>
<title> Маркированный список HTML </title>
</head>
<body>
<ul type="square">
<li> ein</li>
<li> zwei</li>
<li> drei</li>
<li> vier</li>
</ul>
</body>
</html>
  • ein
  • zwei
  • drei
  • vier


В уроках CSS подробно рассмотрена работа со списками, из которых вы можете узнать, как задавать цвета пунктами и тексту в них, а так же как задавать сам тип маркера (это может быть не только квадрат
или точка – это может быть почти любой символ).


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

Списки можно не только маркировать, но и нумеровать, так как иногда это бывает необходимо. Это могут быть цифры (1, 2, 3 …) И буквы английского алфавита в нижнем и верхнем регистре. Рассмотри всё выше описанное.

Для того что бы задать нумерацию применяются теги "<ol> </ol>" .
Внутри первого тега задаётся тип.


Нумерация числами (от одного) 

<html>
<head>
<title>Нумерованный список html</title>
</head>
<body>
<ol>
<li>Раз</li>
<li>Два</li>
<li>Три</li>
<li>Четыре</li>
</ol>
</body>
</html>
  1. Раз
  2. Два
  3. Три
  4. Четыре


Если вам нужно чтобы нумерация начиналась с нуля (ноля) или с тройки, например, то нужно в первом теги написать start=" " и нужное число. 

<html>
<head>
<title>Нумерованный список html</title>
</head>
<body>
<ol start="0">
<li>ноль</li>
<li>один</li>
<li>два</li>
<li>три</li>
</ol>
</body>
</html>
  1. ноль
  2. один
  3. два
  4. три


Теперь рассмотрим, как задать "буквенную нумерацию".

В нижнем регистре: 

<html>
<head>
<title>Нумерованные списки html</title>
</head>
<body>
<ol type="a">
<li>Меркурий</li>
<li>Венера</li>
<li>Земля</li>
<li>Марс</li>
</ol>
</body>
</html>
  1. Меркурий
  2. Венера
  3. Земля
  4. Марс


В верхнем регистре: 

<html>
<head>
<title>Нумерованные HTML списки</title>
</head>
<body>
<ol type="A">
<li>Юпитер</li>
<li>Сатурн</li>
<li>Уран</li>
<li>Нептун</li>
<li><b>Плутон</b></li>
</ol>
</body>
</html>
  1. Юпитер
  2. Сатурн
  3. Уран
  4. Нептун
  5. Плутон


Многоуровневые; вложенные списки html

По мимо обычных списков в html можно создавать многоуровневые списки, то есть подразделы для определённых пунктов. Для этого нужно после тега и названия "<li> название" вставить ещё один список и после этого закрыть его вторым тегом "</li>" 


<html>
<head>

<title>Многоуровневый список html </title>
</head>
<body>
<ul type="square" >
<li>Скрипка</li>
<li>Гитара
  <ul>
  <li>классическая</li>
  <li>ритмгитара</li>
  <li>электрогитара</li>
  </ul>
</li>
<li>Барабаны</li>
<li>Дудочка</li>
</ul>
</body>
</html>
  • Скрипка
  • Гитара
    • классическая
    • ритмгитара
    • электрогитара
  • Барабаны
  • Дудочка


В следующем уроке будет рассмотрено создание простого меню на базе знаний полученных из этого урока.




◄ Предыдущий урок Содержание Следующий урок ►