Как работать со списками в своем блоге
Тег <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>:
- type="A" - Заменяет числовую нумерацию на Заглавные латинские буквы
- type="a" - Заменяет числовую нумерацию на Строчные латинские буквы
- type="I" - Заменяет арабскую числовую нумерацию на Римскую (в верхнем регистре)
- type="i" - Заменяет арабскую числовую нумерацию на Римскую (в нижнем регистре)
- type="1" - Числовая нумерация арабскими цифрами (По умолчанию)
- start="21" - Начальное значение для любой числовой нумерации
- 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-а и вставляю в пустую строку (так в Друпале) - и все путем;
- тег <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-теги
Комментарии
Задайте ВОПРОС или выскажите своё скромное мнение:
CMS Drupal и самый минимум по HTML-разметке
Пособие для блогеров по структурированию (созданию оглавлений и др.) своих БЛОГов на CMS Drupal (самый минимум из HTML-разметки)
Тег <IMG> Тег <A> Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD> Прочие HTML-теги
Слово БЛОГ означает «WEB-дневник» (weblog, web log, что дословно значит «сетевой журнал»).
Просто начало слова "утерялось"...
Блог - это собрание записей (хронология постов) одного автора (или, редко, небольшого коллектива авторов - таковы обычно "корпоративные блоги"). В этом его отличие от ФОРУМов, где все авторы коллективно обсуждают различные темы, то есть первичны именно ТЕМЫ, а не личностные "потоки сознания" авторов.
Блоги же пишут типа "для себя", ведут "дневник писателя". Но т.к. эти записи публичны, всем доступны для чтения и комментирования, то это, конечно, не так. Главное в желании вести блог - это общение. Принести кому-то пользу, послужить людям (как это обычно бывает - лишь "советом", словом), а в ответ получить поддержку на своем жизненном пути ("вот кому-то помог, не зря значит "небо копчу" и жизнь "прожигаю"). Баланс тут, разумеется, тщеславия и смирения. Если жизнь на этом виртуальном сетевом мире не замыкается, то может и польза от всего этого случиться...
Поговорим о структуре блогов
Общепринято, что новые посты (записи блога) - добавляются в самый верх блог-ленты или "свитка" блога, причем показываются не целиком, а в виде "анонсов". Перейдя по ссылке можно открыть на отдельной странице соответствующий пост целиком.
Так что блог (физически) - это:- Куча постов (хранящихся каждый - на отдельной странице)
- Авторская лента-свиток с анонсами постов (обычно вся лента "нарезается" на несколько страниц с перетекающими по ним анонсами). Пример такой ленты: /Pavle-Rak-blog
- Главная лента-свиток (типа френд-ленты ЖЖ, вместо устаревшего понятия "главной страницы сайта") - здесь собираются почти все посты из всех блогов данного сайта (но можно ограничиваться только своим блогом и не внедрять свои посты на главную ленту). У нас эта лента вызывается просто: /
- Это не принципиально конечно, но на нашем сайте есть и Полная сборка-лента всех постов со всех блогов - по адресу: /blog (и /blog?page=1 (и потом 2,3,...) - для последующих страниц нарезки)
Что видим? Гибкая, простая и удобная система хранения информации, где совсем нет никакой статической иерархии, невозможно потерять никакой пост (квант информации), заточенность на быстрый доступ к самой свежей информации, и удобство погружения в "замкнутый" мир определенного автора (когда это интересно). Очень мощная и надежная "инфраструктура".
Отметим лишь одно: В отличие от тем, которые всегда имеют зыбкость, многозначность, неуловимость, разделение всей массы постов по авторам имеет совершенно четкий и ясный смысл, впрочем какой имеют и даты постов. Это реальное и часто востребованное "фундаментальное" деление. А вот для тематического деления и классификации более естественны динамические способы индексации или получения выборок. Так что при хороших "навесных" системах тематической и ассоциативнорй классификации, форум на таком блог-портале становится совершенно ненужным.
Но иногда статическая структура вполне и даже очень уместна. Например, оглавление книги, уже вышедшей в материальном, бумажном виде, в "реале". Если мы помещаем содержание (тексты) этой книги в структуру блога, то вполне логично навесить в дополнение к ним и жесткую структуру ее оглавления. И вполне статическую.
Решение простое. Не надо портить базовую инфраструктуру блог-портала какими-то исключениями и "заплатками". Просто в отдельном посте разместим это оглавление (состоящее из ссылок на все главы книги), и, во-вторых, закрепим ("заморозим") этот пост-оглавление в верхней части авторского блога.
Если же таких книг наберется много, то введем еще один уровень иерархии: создадим аост "список всех книг автора", в котором дадим ссылки на электронные оглавления всех его книг (на посты-оглавления нижнего уровня). И закрепим в "топе" (вершине) блога только один этот "главный" пост.
Итак, формат блога весьма прост и универсален, и, кроме традиционных блогов-дневников, позволяет создавать, например, каталоги и оглавления, сложные древовидные структуры и другие виды представления контента (материала), не разрушая и не меняя стандартный вид представления блог-ленты ("свитка") анонсов постов.
Что же для этого нужно? - Совсем немного труда, ведь мы ограничимся самым минимумом средств HTML-разметки
Чтобы вставлять рисунки и ссылки, или выделять фразы и делать отступы - нужно чуть-чуть освоить азы внутренней кухни HTML-разметки. Это легко. Понадобится лишь час-два времени для усвоения теории, и потом, через несколько дней практики - новые навыки вполне закрепятся у вас уже "навечно".
Совсем несложно научиться распознавать среди нормального "человеческого" текста пару основных (и с десяток вспомогательных) HTML-ТЕГов (или просто тэгов), - управляющих последовательностей в угловых скобках, например:
• Создаем ОГЛАВЛЕНИЕ
Все очень просто. Создаем специальные посты, где вручную расставляем ссылки на дочернии посты, - так получаем оглавление своих постов. Пост этот закрепляем в самом верху своей блог-ленты (сейчас пока закреплять может (по вашей просьбе) только админисратор сайта, но потом эта возможность будет предоставлена всем).
• Двухуровневое ДЕРЕВО
Также можно сделать и двухуровневую структуру, когда из главного оглавления попадаем в подчиненные, а уже из них - в листья дерева иерархии (посты, рисунки).
• Раскрываем РИСУНКИ
Можно делать рисунки-ссылки, так что, например клик на рисунке откроет его увеличенную копию. Тут есть 2 варианта:
1) размещаем рисунок на отдельной странице (отдельным постом в вашем же блоге) вместе с подписью и другим описательным текстом:

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

"Основных" (для нашего дела) тегов всего два: <A> и <IMG>
"Дополнительных" HTML-тегов (для нашего дела) тоже совсем немного!
Стоит освоить их, они - творят чудеса (в плане внесения ясности в тексты)!
• Пара тегов <b> и </b> - зажирняет вложенный в них текст;
• Пара тегов <i> и </i> - накладывает курсив на вложенный в них текст;
• Теги <ol>,<ul>,<dl> и связанные с ними - красиво оформляют различные СПИСКИ ;
• Спецсимвол - вставляет "неразрывный" пробел. Полезен (IMHO) прежде всего для дополнительного "разбеливания" текста. Если помещаем его в пустую линию, то она не "схлопывается" (Друпал отделяет абзацы лишь одной пустой линией, остальные игнорирует)
• Пара тегов <u> и </u> - подчеркивает вложенный в них текст ← включите FULL HTML;
• Пара тегов <s> и </s> -
зачеркиваетвложенный в них текст ← включите FULL HTML;• Пара тегов <h3> и </h3> - для заголовков ← включите FULL HTML
• Тег <hr> проводит горизонтальную черту на всю ширину экрана ← включите FULL HTML
Обычно теги можно вкладывать друг в друга и добиваться таким образом очень многого. Экспериментируйте смело!
Внимание! Если у тега мы поставили напоминание ← включите FULL HTML, то ниже окна редактирования раскройте пункт "Формат ввода" и выберите там режим "Full HTML".
Используем специальные кнопки BUEditor для облегчение ввода тегов
Для быстрого ввода тегов в редакторе BUEditor предусмотрены соответствующие кнопки:
Сначала надо выделить (засинить) нужный кусок текста, а потом нажать нужные кнопки...
Если что не так, то сочетание клавиш Ctrl + Z поможет отказаться от нескольких шагов редактирования...
Тег <IMG> Тег <A> Теги <OL>,<UL>,<LI>,<DL>,<DT>,<DD> Прочие HTML-теги
Как сделать чтобы на моем блоге были же такое
Я никак не смогла вставить рисунок в коментарий. Вставляю ссылку на рисунок а он не показывает его как рисунок. Что мне делатЬ?
Фотки беру отсюда - images.yandex.ru/yandsearch?text=af0n.ru
Если на этом сайте, то у анонимов нет такого права
А где Вы хотите вставить?
Пришлите полный текст коммента с ссылкой на рисунок.
Если же на этом сайте, то у анонимов нет такого права.