Списки в HTML

Как сделать маркированый список в HTML.

Списки в HTML, как и все элементы этого языка, тоже представлены тегами, а фоматирование производится всё теми же стилями, поэтому очень важно понимать логику отображения элементов. Для маркированого списка используется тег <ul> — что означает Unordered List, то есть  неупорядоченный список. Этот элемент языка HTML, собственно говоря, и создаёт сам список, а вложенные в него элементы <li> отображают сам список.

Помните, все, ну почти все, элементы требуют  присутствия двух тегов — открывающего элемент и закрывающего его. В данном случае список должен выглядеть в коде примерно так: <ul><li>здесь элемент списка</li></ul> и никак иначе. Любая ошибка в написании ведёт в лучшем случае к игнорированию браузером этих элементов и, как следствие, не отображение их в правильном формате.

Сейчас в маркированном списке находится всего один элемент, но добавить можно еще, для этого просто нужно вставить ещё один элемент <li>. Чтобы посмотреть как всё это будет отображать браузер нужно в текстовом редакторе (даже блокнот подойдёт) написать каркас страницы и между тегами <body></body> вставить наш список. Затем нужно сохранить этот код в блокноте и назвать page, переименовать сохранённый файл из page.txt в page.html и просто открыть двойным кликом. Повторение мать учения. Таким образом браузер считает Ваш код и откроет Вашу страницу, на которой и будет Ваш маркированный список, который должен находиться в левом верхнем углу страницы.

 По умолчанию браузер использует тип маркера в виде закрашенного круга (list-style-type — disk). Чтобы изменить тип маркера нужно вопользоваться свойством list-style-type, которое вставитьв открывающий тег <ul>, например так: <ul style=»list-style-type: square;» ><li>здесь элемент списка</li></ul>. Теперь отображаться будут квадратики. При изменениях в коде страницы не забывайте сохранять изменения и перезагружать страницу, то есть закрывать ту, что была открыта и открывать двойным кликом ту, что сохранили, в противном случае Вы не сможете увидеть изменения на странице.

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

Нумерованный список выгядит практически точно также, как и не нумерованный, единственное отличие это создающий список тег. Его нужно заменить с <ul> на <ol> — Ordered List, что означает упорядоченный список и теперь Ваш список должен выглядеть примерно так: <ol><li>здесь элемент списка</li></ol>. По умолчанию в начале каждого элемента списка будут отображаться арабские цифры, но это легко изменить при помощи всё тех же старых и добрых стилей.

Чтобы сделать маркер с картинкой нужно использовать свойство list-style-image. У Вас есть картинка im.gif и Вы хотите её использовать как маркер для Вашего списка, тогда в главный начальный тег ненумерованного списка нужно добавить <ul style=»list-style-image: url(im.gif);»><li>здесь элемент списка</li></ul>. Картинка в этом случае будет отображаться, если она находится в одной папке с Вашим файлом page.html, но можно прописать и абсолютный путь, тогда будет не важно, где находится картинка, важно чтобы в пути не было ошибки.

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


——————————————————————————

Читайте также по теме:
Заработок в интернете для новичков


*Как сделать кошелёк Webmoney за пять минут

*Как привлечь рефералов из контакта совершенно бесплатно
*Заработок в интернете с нуля на продаже статей
*Простые уроки по HTML для начинающих
*Как заработать в интернете на сёрфинге и кликах




Яндекс.Метрика Рейтинг@Mail.ru