Основы HTML (часть 2)

Создание и использование различных типов списков HTML

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

Почему HTML списки важны?

Итак, поехали. HTML списки скучны для обучения, как и весь HTML, но  создать список на самом деле не то, что большинство из вас думает и вероятно, никогда не задумывались над использованием списков в вашем блоге. В основном выглядят они таким образом:

• список
• html
• страницы

Помимо красивенького вывода информации, они на самом деле могут быть использованы для выравнивания других вещей на блоге/сайте — таких, как навигация (меню) и иконки социальных медиа, да и вообще, везде, где вам покажется это уместным! Поэтому, после сегодняшнего обзора основ создания HTML списков, вы можете применить это к любым элементам в своем блоге или сайте (главное — не забывайте делать бэкап).

Типы HTML списков

В HTML существуют следующие виды списков:

• пронумерованные списки называются упорядоченные списки
• маркированные списки называются неупорядоченные списки

Списки вложения HTML — это означает, что есть тег, который идентифицирует тип списка, как пронумерованные списки <ol> или маркированные списки <ul>, своего рода контейнеры, а внутри этих контейнеров есть один признак, который создает элемент в списке — <li>. Списки — те же теги контейнерного типа, о которых писалось в основах HTML и у них есть открывающий и закрывающий тег.

Создание упорядоченного пронумерованного списка HTML

Упорядоченный список показывает элементы списка в порядке 1, 2, 3 и т.д. Во-первых, мы должны указать браузеру, какой именно список есть, так что для упорядоченного списка мы используем тег <ol>, так мы добавляем открывающий, то не забываем его  закрыть. Выглядит все это так:

<ol>
</ol>

Затем, между вышеуказанными тегами, мы добавляем наши элементы списка — <li> открывать и </ li> , чтобы закрыть.

<ol>
<li> Первый список экземпляров </ li>
<li> Второй элемент списка </ li>
</ ol>

и это будет выглядеть следующим образом:

1. Первый список экземпляров
2. Второй элемент списка

Вы можете добавить столько элементов списка, сколько вам нужно. Браузер автоматически пронумерует их в том порядке, в каком они были созданы. Вы также можете добавить ссылки или изображения к элементам списка. Обычно изображения не добавляют к HTML списку, но есть моменты, когда это необходимо, например иконки социальных сетей или мелкие изображения, в виде навигационного меню (как вариант). О том, как добавлять изображения-ссылку, я скажу об этом в следующей статье, но вот пример, просто чтобы посмотреть, как это работает.

< ol>
<li> <a href=»ссылка на требуемую страницу»> Первый элемент списка, который в настоящее время является ссылкой на главную страницу моего блога </ a> </ li>
<li> <img src=»Путь к изображению на сайте» alt=»Второй элемент списка, которым в настоящее время является картинка»> </ li>
<li> <a href=»ссылка на требуемую страницу»> <img src=»Путь к изображению на сайте» alt=»Третий элемент списка, который в настоящее время является изображением-ссылкой на главную страницу блога»> </ a> </ li>
</ ol>

1. Первый элемент списка, который в настоящее время является ссылкой на главную страницу моего блога
2. 
3. 

Создание неупорядоченного маркированного списка HTML

Неупорядоченный список показывает элементы списка с «точкой». Для создания маркированного списка делаем то же самое, только вместо использования <ol> мы используем <ul>, который указывает браузеру, что это неупорядоченный список.

< ul>
<li> Первый список </ li>
<li> Второй список </ li>
<li> Третий список </ li>
</ ul>

• Первый список
• Второй список
• Третий список

Добавление HTML списка на сайт

Исходя из упражнений создания веб-страницы в первой части «Основы HTML», мы создали пустую HTML-страницу в текстовом редакторе и добавили HTML код к ней. Таким же способом добавляются и списки. Думаю, что особых сложностей не возникнет.

Ну вот, со списками разобрались. В следующей статье планирую рассказать о текстовых ссылках и о том, как добавить ссылки к изображениям.