BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про HTML » Как создать нумерованные и маркированные списки в HTML – Урок 4 (Для начинающих)

Как создать нумерованные и маркированные списки в HTML – Урок 4 (Для начинающих)

2013-06-25 / Вр:19:45 / просмотров: 4272

Продолжим изучать основы html. В этом уроке мы разберем, как создать нумерованные и маркированные списки.
Отличие между нумерованными и маркированными списками незначительное. В нумерованном списке каждому пункту присваивается номер, а в маркированном - в каждом пункте выводятся символы-буллеты (bullets), например, закрашенный черный кружок, окружность и квадратик.

Маркированный список HTML страницы.

Для того, чтобы создать маркированный список, следует применить теги:
<ul><li>……</li></ul>.

<ul> - начало списка

<li> - начало отдельного элемента списка

</li> - конец отдельного элемента списка

</ul> - конец списка

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Маркированный список HTML страницы </title>
</head>
<body>

<ul>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ul>

</body>
</html>

Результат:
Маркированный список HTML страницы

Атрибут TYPE для маркированных списков

Если к тегу <ul> добавить атрибут TYPE, можно изменить стиль маркирования:

type="disc" – черный кружочек
type="circle" – белый кружочек
type="square" – черный квадратик

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Маркированный список HTML страницы </title>
</head>
<body>

<ul type="square">
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ul>

</body>
</html>

Обратите внимание на пункт 9, вы там заметите, как к тегу <ul> был добавлен атрибут type="square" – закрашенный квадратик в черный цвет.

Результат:

Атрибут TYPE для маркированных списков

Пронумерованный список HTML страницы.

Для того, чтобы создать нумерованный список следует применить теги:
<ol><li>……</li></ol>.

<ol> - начало списка

<li> - начало отдельного элемента списка

</li> - конец отдельного элемента списка

</ol> - конец списка

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Нумерованный список HTML страницы </title>
</head>
<body>

<ol>
<li>первый пункт</li>
<li>второй пункт</li>
<li>третий пункт</li>
</ol>

</body>
</html>

По умолчанию нумерованный список нумеруется по порядку 1,2,3...

Результат:

Пронумерованный список HTML страницы

Атрибут TYPE и START для нумерованных списков.

Если к тегу <ol> добавить атрибут TYPE, можно добавить стиль нумерации пунктов списка

"A" – заглавные буквы A, B, C ...
"a" – строчные буквы a, b, c ...
"I" – большие римские числа I, II, III ...
"i" – маленькие римские числа i, ii, iii ...
"1" – арабские числа 1, 2, 3 ...

Если к тегу <ol> добавить атрибут START, можно задать любое число, с которого будет идти нумерация.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Пронумерованный список HTML страницы </title>
</head>
<body>

<!-- пример списка с арабскими числами -->
Чтобы создать сайт, нужно знать:
<ol type="1" >
<li> html </li>
<li> css </li>
<li> и ознакомиться с php </li>
</ol>

<!-- пример списка с большими римскими числами -->
Если хотите быстро создать сайт, изучите такие программы:
<ol type="I" >
<li> Adobe Dreamweaver </li>
<li> WordPress </li>
<li> Photoshop </li>
</ol>

<!-- пример списка с маленькими буквами -->
Чтобы увеличить посещаемость сайта, нужно:
<ol type="a" >
<li> добавлять постоянно новые статьи </li>
<li> добавлять постоянно новые статьи</li>
<li> и еще раз добавлять постоянно новые статьи</li>
</ol>
<!-- пример списка не с начала -->
Чтобы стать успешным:
<ol type ="1" start="2" >
<li> не бойся начать все заново </li>
<li> не бойся делать ошибки </li>
<li> не останавливайся на начатом</li>
</ol>
</body>
</html>

Результат:

Атрибут TYPE и START для нумерованных списков

Переходим к уроку 5 - "Как сделать ссылку в HTML"

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

2 Ответов на комментарий - Как создать нумерованные и маркированные списки в HTML – Урок 4 (Для начинающих)

  1. Тамара Полякова

    Спасибо Степан за обширный урок, дающий мне представление о возможностях написания HTML страниц. Может быть и я доживу до тех дней, когда буду нормально разбираться в этом не простом (для меня) деле. Вот уже подошла к изучению урока 5, о котором я спрашивала тебя! Надеюсь найти ответ на мой вопрос о скачивании документов с моего сайта! Спасибо тебе за помощь! Удачи!

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

    Тамара, когда прочитаете урок №5, я смогу подсказать, как решить Ваш вопрос.

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2016 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 600

4). Добиться стабильной посещаемости 2500 человек/сутки

5). Закончить все статьи, которые находятся в черновиках

6). Создать портфолио и мини интернет-магазин шаблонов

7). Создать книгу

8). Добиться стабильной посещаемости 3000 человек/сутки

9). Довести количество статей до 700

10). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 671
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 3683