Списки HTML
В этой статье я Вас познакомлю Вас с созданием списков в HTML.
Собственно, как и весь HTML, создание HTML списков - это дело очень и очень простое.
Давайте с Вами сейчас создадим простую HTML-страницу. Постарайтесь это сделать, не смотря вниз статьи. То есть написать основные HTML-теги самостоятельно, так как уже пора их запомнить и строчить автоматически.
Теперь поговорим о списках.
Никаких секретов я сейчас не открою, списки - это информация, расположенная в виде:
1. Элемент списка 1.
2. Элемент списка 2.
.............................
n. Элемент списка n.
Наличие нумерации зависит от типа списка: нумерованный или ненумерованный список.
Для начала создадим ненумерованный список. Начинается список с тега <ul>, а заканчивается, разумеется, закрывающим тегом </ul>. Элементы списка добавляются внутри тега <ul> с помощью тега <li>.
Например, вот такой список:
<ul>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ul>Тег <li> может быть как парным, так и одиночным, то есть следующая запись также является верной и результат будет тот же:
<ul>
<li>Первый элемент
<li>Второй элемент
</ul>Нумерованный список отличается выводом номера элемента слева от самого элемента. Правила те же самые, что и с ненумерованным списком, но только начальный тег - это тег <ol>. Закрывающий тег, соответственно, </ol>. Вот пример нумерованного списка:
<ol>
<li>Первый элемент</li>
<li>Второй элемент</li>
</ol>Посмотрите и сравните результат в браузере. Напоследок показываю код, который у Вас должен был получиться:
<html>
<head>
</head>
<body>
<ul>
<li>Первый элемент
<li>Второй элемент
</ul>
<ol>
<li>Первый элемент
<li>Второй элемент
</ol>
</body>
</html>Вот и вся наука о списках в HTML. Напоследок скажу, что под элементом списка может подразумеваться не только элемент в виде текста, а, вообще, говоря всё, что угодно. Например, вместо текста может быть ссылка или даже изображение. Просто само форматирование будет в виде списка.
В принципе, Вы уже можете создавать сайты на HTML, потому что элементарная база по HTML у Вас уже имеется, хотя, разумеется, изучать дальше необходимо, просто уже можно потихоньку начинать создавать сайт.
С уважением, Михаил Русаков.
P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html
-
Создано 27.04.2010 17:22:49
-
Михаил Русаков
Комментарии (39):
а как поменять обычный маркер списка на картинку? или может даже чтоб картинки разными были?
Ответить
http://myrusakov.ru/css-own-imagelist.html
Ответить
А где третий вид списка? dl,тоесть список определений.
Ответить
Как добавлять статьи на сайт? Так как у Вас.
Ответить
Для этого нужен свой движок на php.
Ответить
Как сделать движок для сайта?
Ответить
Скоро выйдет мой новый видеокурс по созданию движков на php. Там как раз соберу всю необходимую информацию.
Ответить
Этот курс бесплатный?
Ответить
Нет, этот будет платный.
Ответить
Приветствую Михаил, у меня вопрос. Я использовал теги <center> и <div align="center"> и получается что текст переносится в центр, а не нумерованный список <ul> остаются справа т.е. сами точки. Каким образом мне их тоже перенести в центр?
Ответить
Поместить в контейнер div
Ответить
<div align="center"> <font size="5" color="blue"> <i><b> центр </b></i> <br> Примеры: <ul> <li> Первый пример </li> <li> Второй пример </li> <li> Третий пример </li> </ul> </font> </div> Итак в контейнере div, или я что-то неверно сделал?
Ответить
Если уж хотите использовать align="center", то присваивать его надо родительскому элементу, относительно которого этот блок выравнивается.
Ответить
Михаил, каким бы смешным не был вопрос,но: как обратно поменять на мигающий курсор в водной строке, а то меня этот _ уже достал, с ним работать труднее а настройки курсора найти не могу -_-
Ответить
Вообще не понял вопроса.
Ответить
Здравствуйте Михаил, я создаю сайт по вашей инструкции но когда открываю через браузер у меня на нем вместо кириллице зашифрованные буквы что делать?
Ответить
http://myrusakov.ru/php-encoding-problems.html
Ответить
Такие как ааа? Ето ааа.
Ответить
nub in nubs, нажми на кнопку Insert.
Ответить
Вы пишете следующее "Нумерованный список отличается выводом номера элемента справа от самого элемента." Наверное, слева?
Ответить
Спасибо, исправил!
Ответить
Доброго времени суток,Михаил такой вопросик где то в начале курса первая верстка задано задание построить шаблон где список в виде ссылок расположен горизонтально а не вертикально как это делается не объяснялось,объясните пожалуйста.Спасибо.
Ответить
В HTML-коде самые обычный список, а в CSS надо написать ul li {float: left;}
Ответить
как грамотно в HTML написать ссылки по горизонтали:ссылка1 ссылка2 ссылка3 оч прошу на примере а то мне пришлось разбивать строку на 4 ячейки и в каждой ячейке выравнивать ссылку. спасибо.
Ответить
Обычный список можете написать? А CSS-код можете добавить? Тогда проблем быть не должно вообще.
Ответить
привет,подскажите пожалуйста что делать если буквы не отображаются в кириллице?
Ответить
http://myrusakov.ru/php-encoding-problems.html
Ответить
Сайт супер автор респект! оч хорошые статьи.
Ответить
Здравствуйте, почему когда я перемещаю нумерованный список с помощи тега <div> на правую сторону, то цифры остаются слева, а текст уходит правильно, направо <html> <head> <title>about sport</title> <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /> <body bgcolor = "black" text = "white"> <div align = "center"> <h1>Ukraine</h1> <br> <br> <br> <br> <font size = "4" clor = "red"<b> Shahtar luser METELIST CHAMPION</b></font> <p>In Monday Metalist became champion of ukraine</p> </div> <div align = "right"> <font size = "4" color = "red"> <ol> <li>Metalist 39 <li>Shahtar 35 <li>Dinamo K 33 </ol> </font> </div> </body> </html>
Ответить
С помошью css это делайте. position: relative; и значения меняйте, например.
Ответить
ага ок спасибо
Ответить
Здравствуйте Михаил, очень понравился ваш сайт написано просто и ясно, скажите пожалуйста вы написали что копирование материала с сайта запрещено, это относится к содержанию уроков по html? если да, то пожалуйста разрешите копирование.Заранее спасибо
Ответить
у вас в конце статьи сказано, что элементом списка можно сделать картинку. как это сделать?
Ответить
<li><img src="" alt="" /></li>
Ответить
Все хорошо изложено мне по кайфу но вот проблема нигде не рассматривается проблема с транслитом... следовательно возникает вопрос почему когда я вывожу с помощью какого либо тега русский текст на страницу он выдает непонятную "абра кадабру", проблемы с кодировкой?как это устранить?
Ответить
http://myrusakov.ru/php-encoding-problems.html
Ответить
Не сразу разобрался и понял в чем проблема, но все же победил... так что спасибо за наставление на верный путь.)
Ответить
Что-то ничего не упоминается о вложенных списках
Ответить
Подскажите пожалуйста что делать: раньше все воспроизводилось, сейчас же открываю в браузере, а он показывает полностью мою программу.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.