HTML первые шаги - урок 3 - теги списков ul, ol. Атрибуты HTML тегов.

Опубликовано пользователем admin

HTML UL OL

Очень часто на сайтах используются списки: в меню, в тексте для перечисления чего-нибудь. Давайте начнем с самого популярного вида списка ненумерованного <UL></UL> (unordered list - ненумерованный список).

Список UL

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

Давайте изменим наш HTML-код:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<ul>
	</ul>
  </body>
</html>

В документе будет отображать только заголовок, потому что наш список пустой, давайте добавим в него пункты. Для пунктов мы будем использовать теги <LI></LI> (list item - пункт списка).

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<ul>
	  <li>Первый пункт</li>
	  <li>Второй пункт</li>
	  <li>Третий пункт</li>
	</ul>
  </body>
</html>

Теперь у нас будет отображаться маркированный список. Вид маркера можно изменить через атрибуты тега <UL>.

Атрибуты HTML тегов

У тега UL, как я писал выше, есть атрибуты. Атрибуты есть у всех HTML тегов, позже мы рассмотрим все атрибуты, а пока давайте определимся что такое атрибут. Атрибут позволяет управлять отображением HTML тега: цветов, размером, формой и т.д. Для тега UL мы можем задать вид маркера: круг, окружность, квадрат.

Атрибуты имеют следующий вид:

<тег атрибут="значение атрибута">

Таким образом мы прямо в теге пишем как отображать этот тег. Для тега UL атрибут будет называться type:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<ul type="square">
	  <li>Первый пункт</li>
	  <li>Второй пункт</li>
	  <li>Третий пункт</li>
	</ul>
  </body>
</html>

Если вы обновите страницу в браузере, то увидите, что список маркерован квадратами (square - квадрат). Также мы можем маркировать окружностями:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<ul type="circle">
	  <li>Первый пункт</li>
	  <li>Второй пункт</li>
	  <li>Третий пункт</li>
	</ul>
  </body>
</html>

Вы можете использовать различные маркеры в списке, но тогда нужно еще прописать атрибут type и для тега li:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<ul type="circle">
	  <li>Первый пункт</li>
	  <li type="square">Второй пункт</li>
	  <li>Третий пункт</li>
	</ul>
  </body>
</html>

По умолчанию в тегах UL, LI используется type круга disc:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>  
    <h1>Мой первый HTML-документ</h1>
    <ul type="disc">
      <li>Первый пункт</li>
      <li type="square">Второй пункт</li>
      <li>Третий пункт</li>
    </ul>
  </body>
</html>

А теперь уберем атрибут type у тега UL и посмотрим что случится.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<ul>
	  <li>Первый пункт</li>
	  <li type="square">Второй пункт</li>
	  <li>Третий пункт</li>
	</ul>
  </body>
</html>

Теперь давайте сделаем все три пункта разными маркерами:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<ul>
	  <li type="disc">Первый пункт</li>
	  <li type="square">Второй пункт</li>
	  <li type="circle">Третий пункт</li>
	</ul>
  </body>
</html>

Думаю теперь вы знаете куда писать атрибуты тегов, дальше мы будем разбирать еще много различных атрибутов.

Списки OL

Тег OL (ordered list - нумерованный список) не такой распространенный как UL, но используется тоже очень часто, когда нужно вывести последовательность действий, хронологию событий, нумерацию объектов и т.д. Везде где нужно нумеровать строки, можно использовать тег OL.

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<ol>
	  <li>Первый пункт</li>
	  <li>Второй пункт</li>
	  <li>Третий пункт</li>
	</ol>
  </body>
</html>

Как и у тега UL у OL есть атрибут type, только значения у этого атрибута для ul другие:

  1. type="A" - заглавные латинские буквы (большая английская A "эй");
  2. type="a" - строчные латинские буквы (маленькая английская a "эй");
  3. type="I" - заглавные римские цифры (большая английская I "ай");
  4. type="i" - строчные римские цифры (маленькая английская i "ай");
  5. type="1" - арабские цифры, используются по умолчанию.

Можете попробовать различные варианты атрибута type для тега UL. Приведу лишь один пример:

<html>
  <head>
    <title>Мой первый HTML-документ</title>
  </head>
  <body>   
    <h1>Мой первый HTML-документ</h1>
	<ol type="i">
	  <li>Первый пункт</li>
	  <li>Второй пункт</li>
	  <li>Третий пункт</li>
	  <li>Четвертый пункт</li>	  
	</ol>
  </body>
</html>

Комментарии

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

Войти, используя Loginza Google Account Yandex Mail.ru Vkontakte Facebook

Более подробная информация о текстовых форматах

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

в уроке 4 текст дважды

в уроке 4 текст дважды повторяется и в голове и в теле ..(<html>
<head>
<title>Мой первый HTML-документ</title>
</head>
<body>
<h1>Мой первый HTML-документ</h1>

 что вызывает некоторую путаницу.. лучше сделать различные тексты..