Теги <OL>,<UL>,<DL> - Как вставлять СПИСКИ в свой блог с помощью HTML тэгов

Posted: 04.11.10 Thu 13:47

Как работать со списками в своем блоге

Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги
 
На афонской тропе (рука дрогнула)
 
Чтобы ваши тексты выглядели структурно, прозрачно и понятно следует знать и применять специальные средства HTML для представления списков. Всего в HTML предусмотрено три вида списков:
  • нумерованный (включая и буквенную нумерацию, и также римскими цифрами);
  • ненумерованный, но с маркерами (обычно кружочками);
  • и двухуровневый список, названный "списком определений".

Их можно вкладывать друг в друга и даже независимо использовать отдельные их части. Это мощные средства HTML-разметки, существенно улучшающие внешний вид страниц.

 

 

Нумерованный список (Ordered List), тег <ol> с тэгами <li> для элементов

 

Нумерованный список начинается HTML-тэгом <ol> (Ordered List) и завершается тэгом </ol>. Список автоматически отделяется от окружаещего контента отступами сверху и снизу. Допускается вложенность нумерованного (или иного) списка в другой список (любого вида). При этом появляются дополнительные отступы слева.
Каждый пункт нумерованного списка может занимать несколько строчек (просто переноситься без Enter-а). Начинается он тэгом <li> и завершается тэгом </li>. Все пункты автоматически сдвигаются вправо (появляются отступы слева).

<ol type="i" title="Всплывающая подсказка"> Заголовок списка
    <li> Первый пункт списка </li>
    ...
    <li> Последний пункт списка </li>
    </ol>

    Атрибуты (параметры) тега <ol>:
  1. type="A" - Заменяет числовую нумерацию на Заглавные латинские буквы
  2. type="a" - Заменяет числовую нумерацию на Строчные латинские буквы
  3. type="I" - Заменяет арабскую числовую нумерацию на Римскую (в верхнем регистре)
  4. type="i" - Заменяет арабскую числовую нумерацию на Римскую (в нижнем регистре)
  5. type="1" - Числовая нумерация арабскими цифрами (По умолчанию)
  6. start="21" - Начальное значение для любой числовой нумерации
  7. title="Всплывающий текст (подсказка)" - Появляется при наведении курсора мыши на любую часть списка. Используют редко.

 

 

Ненумерованный (но маркированный) список (Unordered List), тег <ul> с тэгами <li> для элементов

 

Ненумерованный список начинается HTML-тэгом <ul> (Unordered List) и завершается тэгом </ul>. Список автоматически отделяется от окружаещего контента отступами сверху и снизу. Допускается вложенность ненумерованного (или иного) списка в другой список (любого вида). При этом появляются дополнительные отступы слева.
Каждый пункт ненумерованного списка может занимать несколько строчек (просто переноситься без Enter-а). Начинается он тэгом <li> и завершается тэгом </li>. Все пункты автоматически сдвигаются вправо (появляются отступы слева).

<ul title="Всплывающая подсказка"> Заголовок списка
    <li> Первый пункт списка </li>
    ...
    <li> Последний пункт списка </li>
    </ul>

    Атрибуты (параметры) тега <ul>:
  • type="disc" - Список маркируется черными кружочками
  • type="circle" - Список маркируется малозаметными окружностями
  • type="square" - Список маркируется черными квадратиками
  • title="Всплывающий текст (подсказка)" - Появляется при наведении курсора мыши на любую часть списка. Используют редко.

Примечание: У меня в Опере (на Linux), какой тип не ставь, показываются только окружности! А вот если не использовать тэги <ul> и </ul> (убрать их совсем, а теги <li> и </li> оставить), то список успешно выдается - маркированным черными кружочками (как и должен бы по умолчанию), но без отступа слева...

 

 

Список определений (Definition List), тег <dl> с тэгами <dt>(Definition Term) для терминов и с тэгами <dd> (Definition Description) для описаний

 

Начинается HTML-тэгом <dl> (Definition List) и завершается тэгом </dl>. Внутри следуют такие пары пар: название термина (Definition Term) между тэгами <dt> и </dt> и описание термина (Definition Description) между тэгами <dd> и </dd>. Каждое определение-блок может занимать несколько строчек (причем могут вставляться теги переноса строки <br /> (а для CMS Drupal - просто одиночный Enter)).

Единственный атрибут (параметр) тега <dl>:
title="Всплывающий текст (подсказка)" - Появляется при наведении курсора мыши на любую часть списка. Используют редко.

 
<dl title="Всплывающая подсказка"> Заголовок списка
  <dt> Первый ТЕРМИН </dt>
    <dd> Определение первого термина </dd>
  ...
  <dt> Последний ТЕРМИН </dt>
    <dd> Определение последнего термина </dd>
</dl>

Это уровень DL - общее обрамление списка определений
ТЕРМИН-1 - Это уровень DT - наименование термина
Определение термина-1" - Это уровень DD - развернутое описание термина.
ТЕРМИН-2 - Это уровень DT - наименование термина
Определение термина-2" - Это уровень DD - развернутое описание термина.
ТЕРМИН-3 - Это уровень DT - наименование термина
Определение термина-3" - Это уровень DD - развернутое описание термина.

 

Не читайте про это: Эксперементируя (у меня Опера под Linux, но вроде это везде так), выяснил следующее:
  • тег <dd> не зависит от наличия своей вложенности в теги <dl> и <dt> и проявляется в большом отступе слева для всего заключенного в пару <dd> и </dd> текста. Причем можно прерывать текст (Enter-ом в Друпале или тегом переноса строки <br />), а чтобы сделать, не теряя отступа, новый абзац (параграф <p> - </p>), то жму два Enter-а и вставляю в пустую строку &nbsp; (так в Друпале) - и все путем;
  • тег <dl> сдвигает вправо все, что в него вложено, - на половинный отступ. А т.к. все, что заключено в пару <dd> и </dd> уже имеет большой отступ, независящий от тега <dl>, то получается "лесенка": сначала <dl> делает шажок, потом <dd> как-бы добавляет еще столько-же - и все путем;
  • тег <dt> ничего не сдвигает, но равняется на сдвиг <dl> (если он есть), или на начало строки, если мы намеренно не используем <dl>. И еще назначение тега <dt> - держаться на оптимальном расстоянии от последующего списка, так что лучше выглядит OL-список или UL-список с заголовком в <dt> (вот такой гибрид), нежели в "родной" нотации, где заголовок следует за тегами <ol> или <ul> !

 

 

Используем специальные кнопки BUEditor для облегчение ввода тегов

Если на сайте используется Drupal-модуль "редактор BUEditor":

 

Для преобразований выбранных строчек текста в списке в редакторе BUEditor предусмотрены соответствующие кнопки "Ordered list. Converts selected lines to a numbered list.", "Unordered list. Converts selected lines to a bulleted list." (с изображениями списков на значках), облегчающие первичное наложение структуры списков на набор линий текста. Если вы разобрались с применяемыми в списках тегами, то вам не составит труда подправить заготовку, дополнить новыми пунктами и т.д. Дерзайте!

 

Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги
 

Комментарии


Задайте ВОПРОС или выскажите своё скромное мнение:


Заголовок:
Можете оставить здесь свои координаты, чтобы при необходимости мы могли бы с Вами связаться (они НЕ ПУБЛИКУЮТСЯ и это НЕ ОБЯЗАТЕЛЬНО):
E-mail:   Ваш адрес в соцсети или сайт:

Прошу ОПОВЕЩАТЬ меня на указанный выше e-mail - ТОЛЬКО при ответах в ветке ЭТОГО коммента!
05.11.10 Fri 23:23 — admin

CMS Drupal и самый минимум по HTML-разметке

 

Пособие для блогеров по структурированию (созданию оглавлений и др.) своих БЛОГов на CMS Drupal (самый минимум из HTML-разметки)

Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги

 

Кот-афонит. Монах спит - молитва идет. На Святой горе Афон кошек и котов очень много. Это скорее всего бродячий кот
 

Наш сайт построен как блог-портал, набор дружественных блогов (сетевых дневников) в близких темах. Сайт сделан на движке CMS Drupal 6, и будет развиваться и совершенствоваться (пишите пожелания).

Слово БЛОГ означает «WEB-дневник» (weblog, web log, что дословно значит «сетевой журнал»).
Просто начало слова "утерялось"...
Блог - это собрание записей (хронология постов) одного автора (или, редко, небольшого коллектива авторов - таковы обычно "корпоративные блоги"). В этом его отличие от ФОРУМов, где все авторы коллективно обсуждают различные темы, то есть первичны именно ТЕМЫ, а не личностные "потоки сознания" авторов.

Блоги же пишут типа "для себя", ведут "дневник писателя". Но т.к. эти записи публичны, всем доступны для чтения и комментирования, то это, конечно, не так. Главное в желании вести блог - это общение. Принести кому-то пользу, послужить людям (как это обычно бывает - лишь "советом", словом), а в ответ получить поддержку на своем жизненном пути ("вот кому-то помог, не зря значит "небо копчу" и жизнь "прожигаю"). Баланс тут, разумеется, тщеславия и смирения. Если жизнь на этом виртуальном сетевом мире не замыкается, то может и польза от всего этого случиться...

 

 

Поговорим о структуре блогов

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

    Так что блог (физически) - это:
  1. Куча постов (хранящихся каждый - на отдельной странице)
  2. Авторская лента-свиток с анонсами постов (обычно вся лента "нарезается" на несколько страниц с перетекающими по ним анонсами). Пример такой ленты: /Pavle-Rak-blog
  3. Главная лента-свиток (типа френд-ленты ЖЖ, вместо устаревшего понятия "главной страницы сайта") - здесь собираются почти все посты из всех блогов данного сайта (но можно ограничиваться только своим блогом и не внедрять свои посты на главную ленту). У нас эта лента вызывается просто: /
  4. Это не принципиально конечно, но на нашем сайте есть и Полная сборка-лента всех постов со всех блогов - по адресу: /blog (и /blog?page=1 (и потом 2,3,...) - для последующих страниц нарезки)

Что видим? Гибкая, простая и удобная система хранения информации, где совсем нет никакой статической иерархии, невозможно потерять никакой пост (квант информации), заточенность на быстрый доступ к самой свежей информации, и удобство погружения в "замкнутый" мир определенного автора (когда это интересно). Очень мощная и надежная "инфраструктура".

Что касается ТЕМ публикаций и обсуждений, то для удобных выборок по ним всего связанного - есть специальные "навесные" средства в CMS Друпал (великолепная таксономия (taxonomy, от греческого τάξις - порядок, строй и νόμος - закон), поиск (Search), взгляды (Views)), которые со временем включим и на нашем сайте, в рамках вышеописанной структуры блог-портала. Так что получится даже лучше, чем на форумах, ибо нет жесткой статической классификации тем, которая в силу "человеческого фактора" никогда не может быть совсем удачной и правильной. Обычно всегда там темы дублируются, расщепляются, переплетаются и т.д.. Но сейчас не будем пока говорить обо всем этом...
 
Отметим лишь одно: В отличие от тем, которые всегда имеют зыбкость, многозначность, неуловимость, разделение всей массы постов по авторам имеет совершенно четкий и ясный смысл, впрочем какой имеют и даты постов. Это реальное и часто востребованное "фундаментальное" деление. А вот для тематического деления и классификации более естественны динамические способы индексации или получения выборок. Так что при хороших "навесных" системах тематической и ассоциативнорй классификации, форум на таком блог-портале становится совершенно ненужным.

 
Но иногда статическая структура вполне и даже очень уместна. Например, оглавление книги, уже вышедшей в материальном, бумажном виде, в "реале". Если мы помещаем содержание (тексты) этой книги в структуру блога, то вполне логично навесить в дополнение к ним и жесткую структуру ее оглавления. И вполне статическую.
Решение простое. Не надо портить базовую инфраструктуру блог-портала какими-то исключениями и "заплатками". Просто в отдельном посте разместим это оглавление (состоящее из ссылок на все главы книги), и, во-вторых, закрепим ("заморозим") этот пост-оглавление в верхней части авторского блога.
Если же таких книг наберется много, то введем еще один уровень иерархии: создадим аост "список всех книг автора", в котором дадим ссылки на электронные оглавления всех его книг (на посты-оглавления нижнего уровня). И закрепим в "топе" (вершине) блога только один этот "главный" пост.

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

 

 

Что же для этого нужно? - Совсем немного труда, ведь мы ограничимся самым минимумом средств HTML-разметки

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

Совсем несложно научиться распознавать среди нормального "человеческого" текста пару основных (и с десяток вспомогательных) HTML-ТЕГов (или просто тэгов), - управляющих последовательностей в угловых скобках, например:

  • <i> некий текст </i> — текст в таком обрамлении будет выделен курсивом;
  • &nbsp; — так кодируются некоторые спец-символы;
  • <hr> — разделяющая горизонтальная линия;
  • <a href="/" title="Щелкайте тут!"> Афонский сайт </a> — гиперссылка (ссылка на другой пост).

 
• Создаем ОГЛАВЛЕНИЕ
Все очень просто. Создаем специальные посты, где вручную расставляем ссылки на дочернии посты, - так получаем оглавление своих постов. Пост этот закрепляем в самом верху своей блог-ленты (сейчас пока закреплять может (по вашей просьбе) только админисратор сайта, но потом эта возможность будет предоставлена всем).

 
• Двухуровневое ДЕРЕВО
Также можно сделать и двухуровневую структуру, когда из главного оглавления попадаем в подчиненные, а уже из них - в листья дерева иерархии (посты, рисунки).

 
• Раскрываем РИСУНКИ

Можно делать рисунки-ссылки, так что, например клик на рисунке откроет его увеличенную копию. Тут есть 2 варианта:

1) размещаем рисунок на отдельной странице (отдельным постом в вашем же блоге) вместе с подписью и другим описательным текстом:
Uranupoli-foto-o-Sergiya

2) просто указываем адрес картинки в теге <a> - тогда открывается "голый" рисунок в своем естественном размере. Внимание! Этот 2-ой вариант не индексируется Яндексом! А потому не стоит им пользоваться, если хотите, чтобы не только уменьшенные, но и полные фото были бы в индексе поисковика):
parom-sv-Panteleimon-foto-o-Sergiya

 

 

"Основных" (для нашего дела) тегов всего два: <A> и <IMG>

Читайте о них в отдельных постах и обязательно освойте их, без них - никуда!

 

  • Вставляем РИСУНКИ (вместе с ТЕГом <IMG>) ← включите FULL HTML
  • Тег <A> - вставляет ссылки (гиперссылки) на другие посты или якоря

    •  

     

    "Дополнительных" HTML-тегов (для нашего дела) тоже совсем немного!

    Читайте о них ниже, а об оформлении СПИСКОВ - в отдельном посте.
    Стоит освоить их, они - творят чудеса (в плане внесения ясности в тексты)!

     

    • Пара тегов <b> и </b> - зажирняет вложенный в них текст;
    • Пара тегов <i> и </i> - накладывает курсив на вложенный в них текст;

    • Пара тегов <dd> и </dd> - сдвигает вправо вложенный в них текст;

    • Теги <ol>,<ul>,<dl> и связанные с ними - красиво оформляют различные СПИСКИ ;

    • Спецсимвол &nbsp; - вставляет "неразрывный" пробел. Полезен (IMHO) прежде всего для дополнительного "разбеливания" текста. Если помещаем его в пустую линию, то она не "схлопывается" (Друпал отделяет абзацы лишь одной пустой линией, остальные игнорирует)

    • Пара тегов <u> и </u> - подчеркивает вложенный в них текст ← включите FULL HTML;
    • Пара тегов <s> и </s> - зачеркивает вложенный в них текст ← включите FULL HTML;

    • Пара тегов <h3> и </h3> - для заголовков ← включите FULL HTML

    • Пара тегов <center> и </center> - для центрирования← включите FULL HTML

    • Пара тегов <div align=center> и </div> - можно и так центрировать текст← включите FULL HTML
    • Пара тегов <div align=right> и </div> - а так прижимать блок текста вправо← включите FULL HTML

     

    • Тег <hr> проводит горизонтальную черту на всю ширину экрана ← включите FULL HTML

     

    Обычно теги можно вкладывать друг в друга и добиваться таким образом очень многого. Экспериментируйте смело!

    Внимание! Если у тега мы поставили напоминание ← включите FULL HTML, то ниже окна редактирования раскройте пункт "Формат ввода" и выберите там режим "Full HTML".

     

     

    Используем специальные кнопки BUEditor для облегчение ввода тегов

    Если на сайте используется Drupal-модуль "редактор BUEditor":

     

    Для быстрого ввода тегов в редакторе BUEditor предусмотрены соответствующие кнопки:

  • "Headings" (ЗАГОЛОВОК, с изображением жирной буквы H на значке). После нажатия предлагается список вариантов. Выберите громадность заголовка (по-моему наилучший размер № 3: Heading3 ). При этом используйте только один вид (максимум 2) заголовков. Поисковые роботы, если заметят сумятицу в очень важных, по их мнению, заголовках (заключенных в эти теги), могут решить, что это "поисковый спам" и исключить страницу из индексации;
  • "Bold" (ЖИРНО, с изображением жирной буквы B на значке);
  • "Italic" (КУРСИВ, с изображением наклонной буквы I на значке);
  • "Underline" (ПОДЧЕРКИВАНИЕ, с изображением подчеркнутой буквы U на значке);
  • "Strikethrough" (ЗАЧЕРКИВАНИЕ, с изображением зачеркнутой буквы S на значке);
  • "Indent" (ОТСТУП, с изображением здоровой двойной кавычки на значке);

    • Сначала надо выделить (засинить) нужный кусок текста, а потом нажать нужные кнопки...
    Если что не так, то сочетание клавиш Ctrl + Z поможет отказаться от нескольких шагов редактирования...

     

    Тег <IMG>       Тег <A>       Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD>       Прочие HTML-теги
     
    18.02.11 Fri 07:28 — Anonymous

    Как сделать чтобы на моем блоге были же такое

    Я никак не смогла вставить рисунок в коментарий. Вставляю ссылку на рисунок а он не показывает его как рисунок. Что мне делатЬ?
    Фотки беру отсюда - images.yandex.ru/yandsearch?text=af0n.ru

    18.02.11 Fri 09:43 — admin

    Если на этом сайте, то у анонимов нет такого права

    А где Вы хотите вставить?
    Пришлите полный текст коммента с ссылкой на рисунок.

    Если же на этом сайте, то у анонимов нет такого права.

    Вопросы-ответы за месяц