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

Fima Korolev

Основы HTML для начинающих (часть 2)

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

 

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

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

 

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

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

 

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

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

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

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

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

Рекомендую к прочтению:  Основы 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>, который указывает браузеру, что это неупорядоченный список.

Рекомендую к прочтению:  Ввод капчи - Joomla

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

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

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

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

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


-->

5 комментариев »

  1. Никита:

    Статья полезная. Сразу вспоминается школа у нас там информатика была как углубленный предмет, вот так нам и разъясняли))

  2. Не совсем понял разницу между двумя видами списков.

  3. Дима:

    Спасибо за основы основ как говориться :)

  4. Геннадий:

    Вопрос автору – ваш цикл статей будет достаточен новичку( да и ещё имеющему огромный страх перед этим языком) для “освоения” HTML. Или полезно поискать ещё дополнения, напр. в виде видео уроков?

    • Добрый день, Геннадий! Смотря для каких целей вы его (HTML) будете использовать. Ваш страх перед этим языком точно развеем, там ничего ужасного нету. Главное в нашем деле – не забывать делать БЭКАП !!!
      Смысл всего блога и данных статей – это помощь новичкам в SEO. Полный курс HTML я здесь расписывать не планирую, но основные моменты, которые помогут понять принцип работы буду выкладывать (2-3 статьи еще точно будет).
      P.S. Дополнения, в виде видео уроков, конечно смотрите. Учиться никогда не поздно.
      Удачи вам!

Оставить комментарий

Ваш email не будет опубликован. Обязательные поля отмечены *

Что-то типа КАПЧИ :) *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">