dl в HTML


Содержание
Как работать со списками в своем блоге Чтобы ваши тексты выглядели структурно, прозрачно и понятно следует знать и применять специальные средства HTML для представления списков. Всего в HTML предусмотрено три вида списков: нумерованный (включая и буквенную нумерацию, и также римскими цифрами); ненумерованный, но с маркерами (обычно кружочками); и двухуровневый список, названный «списком определений». Их можно вкладывать друг в друга и даже независимо использовать отдельные их части. Это мощные средства HTML-разметки, существенно улучшающие внешний вид страниц. Нумерованный список (Ordered List), тег с тэгами для элементов Нумерованный список начинается HTML-тэгом (Ordered List) и завершается тэгом . Список автоматически отделяется от окружаещего контента отступами сверху и снизу. Допускается вложенность нумерованного (или иного) списка в другой список (любого вида). При этом появляются дополнительные отступы слева. Каждый пункт нумерованного списка может занимать несколько строчек (просто переноситься без Enter-а). Начинается он тэгом и завершается тэгом . Все пункты автоматически сдвигаются вправо (появляются отступы слева). Заголовок списка Первый пункт списка . Последний пункт списка Атрибуты (параметры) тега : type=»A» — Заменяет числовую нумерацию на Заглавные латинские буквы type=»a» — Заменяет числовую нумерацию на Строчные латинские буквы type=»I» — Заменяет арабскую числовую нумерацию на Римскую (в верхнем регистре) type=»i» — Заменяет арабскую числовую нумерацию на Римскую (в нижнем регистре) type=»1″ — Числовая нумерация арабскими цифрами (По умолчанию) start=»21″ — Начальное значение для любой числовой нумерации title=«Всплывающий текст (подсказка)» — Появляется при наведении курсора мыши на любую часть списка. Используют редко. Ненумерованный (но маркированный) список (Unordered List), тег с тэгами для элементов Ненумерованный список начинается HTML-тэгом (Unordered List) и завершается тэгом . Список автоматически отделяется от окружаещего контента отступами сверху и снизу. Допускается вложенность ненумерованного (или иного) списка в другой список (любого вида). При этом появляются дополнительные отступы слева. Каждый пункт ненумерованного списка может занимать несколько строчек (просто переноситься без Enter-а). Начинается он тэгом и завершается тэгом . Все пункты автоматически сдвигаются вправо (появляются отступы слева). Заголовок списка Первый пункт списка . Последний пункт списка Атрибуты (параметры) тега : type=»disc» — Список маркируется черными кружочками type=»circle» — Список маркируется малозаметными окружностями type=»square» — Список маркируется черными квадратиками title=«Всплывающий текст (подсказка)» — Появляется при наведении курсора мыши на любую часть списка. Используют редко. Примечание: У меня в Опере (на Linux), какой тип не ставь, показываются только окружности! А вот если не использовать тэги и (убрать их совсем, а теги и оставить), то список успешно выдается — маркированным черными кружочками (как и должен бы по умолчанию), но без отступа слева. Список определений (Definition List), тег с тэгами (Definition Term) для терминов и с тэгами (Definition Description) для описаний Начинается HTML-тэгом (Definition List) и завершается тэгом . Внутри следуют такие пары пар: название термина (Definition Term) между тэгами и и описание термина (Definition Description) между тэгами и . Каждое определение-блок может занимать несколько строчек (причем могут вставляться теги переноса строки (а для CMS Drupal — просто одиночный Enter)). Единственный атрибут (параметр) тега : title=«Всплывающий текст (подсказка)» — Появляется при наведении курсора мыши на любую часть списка. Используют редко. Заголовок списка Первый ТЕРМИН Определение первого термина . Последний ТЕРМИН Определение последнего термина Это уровень DL — общее обрамление списка определений ТЕРМИН-1 — Это уровень DT — наименование термина Определение термина-1» — Это уровень DD — развернутое описание термина. ТЕРМИН-2 — Это уровень DT — наименование термина Определение термина-2» — Это уровень DD — развернутое описание термина. ТЕРМИН-3 — Это уровень DT — наименование термина Определение термина-3» — Это уровень DD — развернутое описание термина. Не читайте про это: Эксперементируя (у меня Опера под Linux, но вроде это везде так), выяснил следующее: тег не зависит от наличия своей вложенности в теги и и проявляется в большом отступе слева для всего заключенного в пару и текста. Причем можно прерывать текст (Enter-ом в Друпале или тегом переноса строки ), а чтобы сделать, не теряя отступа, новый абзац (параграф ), то жму два Enter-а и вставляю в пустую строку (так в Друпале) — и все путем; тег сдвигает вправо все, что в него вложено, — на половинный отступ. А т.к. все, что заключено в пару и уже имеет большой отступ, независящий от тега , то получается «лесенка»: сначала делает шажок, потом как-бы добавляет еще столько-же — и все путем; тег ничего не сдвигает, но равняется на сдвиг (если он есть), или на начало строки, если мы намеренно не используем . И еще назначение тега — держаться на оптимальном расстоянии от последующего списка, так что лучше выглядит OL-список или UL-список с заголовком в (вот такой гибрид), нежели в «родной» нотации, где заголовок следует за тегами или ! Используем специальные кнопки BUEditor для облегчение ввода тегов Для преобразований выбранных строчек текста в списке в редакторе BUEditor предусмотрены соответствующие кнопки «Ordered list. Converts selected lines to a numbered list.», «Unordered list. Converts selected lines to a bulleted list.» (с изображениями списков на значках), облегчающие первичное наложение структуры списков на набор линий текста. Если вы разобрались с применяемыми в списках тегами, то вам не составит труда подправить заготовку, дополнить новыми пунктами и т.д. Дерзайте! Комментарии Задайте ВОПРОС или выскажите своё скромное мнение: CMS Drupal и самый минимум по HTML-разметке Пособие для блогеров по структурированию (созданию оглавлений и др.) своих БЛОГов на CMS Drupal (самый минимум из HTML-разметки) Наш сайт построен как блог-портал, набор дружественных блогов (сетевых дневников) в близких темах. Сайт сделан на движке CMS Drupal 6, и будет развиваться и совершенствоваться (пишите пожелания). Слово БЛОГ означает «WEB-дневник» (weblog, web log, что дословно значит «сетевой журнал»). Просто начало слова «утерялось». Блог — это собрание записей (хронология постов) одного автора (или, редко, небольшого коллектива авторов — таковы обычно «корпоративные блоги»). В этом его отличие от ФОРУМов, где все авторы коллективно обсуждают различные темы, то есть первичны именно ТЕМЫ, а не личностные «потоки сознания» авторов. Блоги же пишут типа «для себя», ведут «дневник писателя». Но т.к. эти записи публичны, всем доступны для чтения и комментирования, то это, конечно, не так. Главное в желании вести блог — это общение. Принести кому-то пользу, послужить людям (как это обычно бывает — лишь «советом», словом), а в ответ получить поддержку на своем жизненном пути («вот кому-то помог, не зря значит «небо копчу» и жизнь «прожигаю»). Баланс тут, разумеется, тщеславия и смирения. Если жизнь на этом виртуальном сетевом мире не замыкается, то может и польза от всего этого случиться. Поговорим о структуре блогов Общепринято, что новые посты (записи блога) — добавляются в самый верх блог-ленты или «свитка» блога, причем показываются не целиком, а в виде «анонсов». Перейдя по ссылке можно открыть на отдельной странице соответствующий пост целиком. Так что блог (физически) — это: Куча постов (хранящихся каждый — на отдельной странице) Авторская лента-свиток с анонсами постов (обычно вся лента «нарезается» на несколько страниц с перетекающими по ним анонсами). Пример такой ленты: /Pavle-Rak-blog Главная лента-свиток (типа френд-ленты ЖЖ, вместо устаревшего понятия «главной страницы сайта») — здесь собираются почти все посты из всех блогов данного сайта (но можно ограничиваться только своим блогом и не внедрять свои посты на главную ленту). У нас эта лента вызывается просто: / Это не принципиально конечно, но на нашем сайте есть и Полная сборка-лента всех постов со всех блогов — по адресу: /blog (и /blog?page=1 (и потом 2,3. ) — для последующих страниц нарезки) Что видим? Гибкая, простая и удобная система хранения информации, где совсем нет никакой статической иерархии, невозможно потерять никакой пост (квант информации), заточенность на быстрый доступ к самой свежей информации, и удобство погружения в «замкнутый» мир определенного автора (когда это интересно). Очень мощная и надежная «инфраструктура». Что касается ТЕМ публикаций и обсуждений, то для удобных выборок по ним всего связанного — есть специальные «навесные» средства в CMS Друпал (великолепная таксономия (taxonomy, от греческого τάξις — порядок, строй и νόμος — закон), поиск (Search), взгляды (Views)), которые со временем включим и на нашем сайте, в рамках вышеописанной структуры блог-портала. Так что получится даже лучше, чем на форумах, ибо нет жесткой статической классификации тем, которая в силу «человеческого фактора» никогда не может быть совсем удачной и правильной. Обычно всегда там темы дублируются, расщепляются, переплетаются и т.д.. Но сейчас не будем пока говорить обо всем этом. Отметим лишь одно: В отличие от тем, которые всегда имеют зыбкость, многозначность, неуловимость, разделение всей массы постов по авторам имеет совершенно четкий и ясный смысл, впрочем какой имеют и даты постов. Это реальное и часто востребованное «фундаментальное» деление. А вот для тематического деления и классификации более естественны динамические способы индексации или получения выборок. Так что при хороших «навесных» системах тематической и ассоциативнорй классификации, форум на таком блог-портале становится совершенно ненужным. Но иногда статическая структура вполне и даже очень уместна. Например, оглавление книги, уже вышедшей в материальном, бумажном виде, в «реале». Если мы помещаем содержание (тексты) этой книги в структуру блога, то вполне логично навесить в дополнение к ним и жесткую структуру ее оглавления. И вполне статическую. Решение простое. Не надо портить базовую инфраструктуру блог-портала какими-то исключениями и «заплатками». Просто в отдельном посте разместим это оглавление (состоящее из ссылок на все главы книги), и, во-вторых, закрепим («заморозим») этот пост-оглавление в верхней части авторского блога. Если же таких книг наберется много, то введем еще один уровень иерархии: создадим аост «список всех книг автора«, в котором дадим ссылки на электронные оглавления всех его книг (на посты-оглавления нижнего уровня). И закрепим в «топе» (вершине) блога только один этот «главный» пост. Итак, формат блога весьма прост и универсален, и, кроме традиционных блогов-дневников, позволяет создавать, например, каталоги и оглавления, сложные древовидные структуры и другие виды представления контента (материала), не разрушая и не меняя стандартный вид представления блог-ленты («свитка») анонсов постов. Что же для этого нужно? — Совсем немного труда, ведь мы ограничимся самым минимумом средств HTML-разметки Чтобы вставлять рисунки и ссылки, или выделять фразы и делать отступы — нужно чуть-чуть освоить азы внутренней кухни HTML-разметки. Это легко. Понадобится лишь час-два времени для усвоения теории, и потом, через несколько дней практики — новые навыки вполне закрепятся у вас уже «навечно». Совсем несложно научиться распознавать среди нормального «человеческого» текста пару основных (и с десяток вспомогательных) HTML-ТЕГов (или просто тэгов), — управляющих последовательностей в угловых скобках, например: • Создаем ОГЛАВЛЕНИЕ Все очень просто. Создаем специальные посты, где вручную расставляем ссылки на дочернии посты, — так получаем оглавление своих постов. Пост этот закрепляем в самом верху своей блог-ленты (сейчас пока закреплять может (по вашей просьбе) только админисратор сайта, но потом эта возможность будет предоставлена всем). • Двухуровневое ДЕРЕВО Также можно сделать и двухуровневую структуру, когда из главного оглавления попадаем в подчиненные, а уже из них — в листья дерева иерархии (посты, рисунки). Можно делать рисунки-ссылки, так что, например клик на рисунке откроет его увеличенную копию. Тут есть 2 варианта: 1) размещаем рисунок на отдельной странице (отдельным постом в вашем же блоге) вместе с подписью и другим описательным текстом: 2) просто указываем адрес картинки в теге — тогда открывается «голый» рисунок в своем естественном размере. Внимание! Этот 2-ой вариант не индексируется Яндексом! А потому не стоит им пользоваться, если хотите, чтобы не только уменьшенные, но и полные фото были бы в индексе поисковика): «Основных» (для нашего дела) тегов всего два: и «Дополнительных» HTML-тегов (для нашего дела) тоже совсем немного! • Пара тегов и — зажирняет вложенный в них текст; • Пара тегов и — накладывает курсив на вложенный в них текст; • Пара тегов и — сдвигает вправо вложенный в них текст; • Спецсимвол — вставляет «неразрывный» пробел. Полезен (IMHO) прежде всего для дополнительного «разбеливания» текста. Если помещаем его в пустую линию, то она не «схлопывается» (Друпал отделяет абзацы лишь одной пустой линией, остальные игнорирует) • Пара тегов и — подчеркивает вложенный в них текст ← включите FULL HTML; • Пара тегов и — зачеркивает вложенный в них текст ← включите FULL HTML; • Пара тегов • Пара тегов и — для центрирования← включите FULL HTML • Тег проводит горизонтальную черту на всю ширину экрана ← включите FULL HTML Обычно теги можно вкладывать друг в друга и добиваться таким образом очень многого. Экспериментируйте смело! Внимание! Если у тега мы поставили напоминание ← включите FULL HTML, то ниже окна редактирования раскройте пункт «Формат ввода» и выберите там режим «Full HTML». Используем специальные кнопки BUEditor для облегчение ввода тегов Для быстрого ввода тегов в редакторе BUEditor предусмотрены соответствующие кнопки: «Headings» (ЗАГОЛОВОК, с изображением жирной буквы H на значке). После нажатия предлагается список вариантов. Выберите громадность заголовка (по-моему наилучший размер № 3: Heading3 ). При этом используйте только один вид (максимум 2) заголовков. Поисковые роботы, если заметят сумятицу в очень важных, по их мнению, заголовках (заключенных в эти теги), могут решить, что это «поисковый спам» и исключить страницу из индексации; «Bold» (ЖИРНО, с изображением жирной буквы B на значке); «Italic» (КУРСИВ, с изображением наклонной буквы I на значке); «Underline» (ПОДЧЕРКИВАНИЕ, с изображением подчеркнутой буквы U на значке); «Strikethrough» (ЗАЧЕРКИВАНИЕ, с изображением зачеркнутой буквы S на значке); «Indent» (ОТСТУП, с изображением здоровой двойной кавычки на значке); Сначала надо выделить (засинить) нужный кусок текста, а потом нажать нужные кнопки. Если что не так, то сочетание клавиш Ctrl + Z поможет отказаться от нескольких шагов редактирования. Как сделать чтобы на моем блоге были же такое Я никак не смогла вставить рисунок в коментарий. Вставляю ссылку на рисунок а он не показывает его как рисунок. Что мне делатЬ? Фотки беру отсюда — images.yandex.ru/yandsearch?text=af0n.ru Если на этом сайте, то у анонимов нет такого права А где Вы хотите вставить? Пришлите полный текст коммента с ссылкой на рисунок. Если же на этом сайте, то у анонимов нет такого права. Списки html: теги ul, ol, li, dl, dd, dt Здравствуйте, уважаемые читатели! Сегодня в качестве продолжения цикла статей рубрики «Основы html» я хочу познакомить вас с алгоритмом создания списков html при помощи тегов ul и li (маркированный список), ol и li (нумерованный список), dl, dt, dd (список определений). Теперь продолжу знакомить вас с наиболее часто используемыми тегами html, которые применяются для создания списков на страницах сайта. Если кто-то не знает, что это такое, наверняка после полученной ниже информации сразу поймет, о чем речь, поскольку такая форма подачи материала очень распространена. Маркированные HTML списки — теги ul и li Маркированный список определят тег ul. Между открывающим и закрывающим тегами ul располагаются элементы списка, содержание каждого из которых должно быть в свою очередь располагаться между открывающим и закрывающим тегами li. Сразу отмечу, что тег ul является парным (наличие открывающего и закрывающего тега), а также блочным, то есть образует контейнер, в который входят элементы (строки), образуемые каждый раз тегом li. Соответственно тег li является парным и строчным. 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square. Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок. Если дополнить данными атрибутами тег ul, то получим следующие варианты: 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка Естественно, каждому маркеру отдельного элемента маркированного списка можно придать свой внешний вид, прописав соответствующие значения атрибута type. 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка Нумерованные HTML списки — теги ol и li Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (блочный и парный тег по аналогии с ul). В качестве тега, определяющего элементы нумерованного списка html, здесь тоже выступает тег li. Нумерованный список — совокупность пронумерованных элементов. Тип нумерации определяется атрибутом type, который может принимать следующие значения: A — заглавные латинские буквы; a — строчные латинские буквы; I — заглавные римские цифры; i — строчные римские цифры; 1 — арабские цифры 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 3, 2, 1. Это осуществляется с помощью атрибута reserve тега ol. 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I): 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка HTML списки определений — теги dl, dd, dt Еще один вид списков html — список определений. Он формируется следующим образом. Содержание этого списка заключается между открывающим и закрывающим тегами dl, которые образуют контейнер. Тег dt определяет какой-либо термин, а dd — описание этого термина. CMS Система управления контентом, которая применяется для создания сайтов. HTML Язык гипертекстовой разметки, являющийся основой создания вебресурсов. Как видите, содержание тега dt, которое является каким либо термином, смещено влево, а содержание тега dd, являющееся определением данного термина, написано курсивом. Все это достигается с помощью применения различных стилей css, о которых непременно поговорим в ближайших публикациях. Кстати, современные реалии таковы, что язык html нельзя рассматривать в отрыве от css, поэтому, чтобы не пропустить эти важнейшие материалы, подпишитесь на обновление блога через RSS-ленту либо по e-mail. На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей. HTML Tag Sharing is caring! Code Example Description Lists The description list allows you to create a list of terms and then provide one or more descriptions for each term. In HTML 4, the tag defined a “definition list.” But in HTML5, this has been changed to “description list.” This change has little meaning, other than to indicate that the terms and descriptions don’t have to be definitions. For example, you could use the description list for presenting metadata on a blog post: The element can be used for any type of one-to-many name-value pair lists. When not to use While, generally, the definition of the tag has expanded between HTML 4 and HTML5, there is one use case which was formerly suggested and which has now been deprecated: dialogue. I don’t think I can remember Rick If she can stand it, I can. Play it. Sam Yes, boss. While this is deliberately against the HTML specification, it is hard to imagine any problems created by this approach to marking up dialog. (Use at your own risk, though).
  • Как работать со списками в своем блоге
  • Нумерованный список (Ordered List), тег с тэгами для элементов
  • Ненумерованный (но маркированный) список (Unordered List), тег с тэгами для элементов
  • Список определений (Definition List), тег с тэгами (Definition Term) для терминов и с тэгами (Definition Description) для описаний
  • Используем специальные кнопки BUEditor для облегчение ввода тегов
  • Комментарии
  • Задайте ВОПРОС или выскажите своё скромное мнение:
  • CMS Drupal и самый минимум по HTML-разметке
  • Пособие для блогеров по структурированию (созданию оглавлений и др.) своих БЛОГов на CMS Drupal (самый минимум из HTML-разметки)
  • Поговорим о структуре блогов
  • Что же для этого нужно? — Совсем немного труда, ведь мы ограничимся самым минимумом средств HTML-разметки
  • «Основных» (для нашего дела) тегов всего два: и
  • «Дополнительных» HTML-тегов (для нашего дела) тоже совсем немного!
  • • Пара тегов • Пара тегов и — для центрирования← включите FULL HTML • Тег проводит горизонтальную черту на всю ширину экрана ← включите FULL HTML Обычно теги можно вкладывать друг в друга и добиваться таким образом очень многого. Экспериментируйте смело! Внимание! Если у тега мы поставили напоминание ← включите FULL HTML, то ниже окна редактирования раскройте пункт «Формат ввода» и выберите там режим «Full HTML». Используем специальные кнопки BUEditor для облегчение ввода тегов Для быстрого ввода тегов в редакторе BUEditor предусмотрены соответствующие кнопки:
  • «Headings» (ЗАГОЛОВОК, с изображением жирной буквы H на значке). После нажатия предлагается список вариантов. Выберите громадность заголовка (по-моему наилучший размер № 3: Heading3 ). При этом используйте только один вид (максимум 2) заголовков. Поисковые роботы, если заметят сумятицу в очень важных, по их мнению, заголовках (заключенных в эти теги), могут решить, что это «поисковый спам» и исключить страницу из индексации; «Bold» (ЖИРНО, с изображением жирной буквы B на значке); «Italic» (КУРСИВ, с изображением наклонной буквы I на значке); «Underline» (ПОДЧЕРКИВАНИЕ, с изображением подчеркнутой буквы U на значке); «Strikethrough» (ЗАЧЕРКИВАНИЕ, с изображением зачеркнутой буквы S на значке); «Indent» (ОТСТУП, с изображением здоровой двойной кавычки на значке); Сначала надо выделить (засинить) нужный кусок текста, а потом нажать нужные кнопки. Если что не так, то сочетание клавиш Ctrl + Z поможет отказаться от нескольких шагов редактирования. Как сделать чтобы на моем блоге были же такое Я никак не смогла вставить рисунок в коментарий. Вставляю ссылку на рисунок а он не показывает его как рисунок. Что мне делатЬ? Фотки беру отсюда — images.yandex.ru/yandsearch?text=af0n.ru Если на этом сайте, то у анонимов нет такого права А где Вы хотите вставить? Пришлите полный текст коммента с ссылкой на рисунок. Если же на этом сайте, то у анонимов нет такого права. Списки html: теги ul, ol, li, dl, dd, dt Здравствуйте, уважаемые читатели! Сегодня в качестве продолжения цикла статей рубрики «Основы html» я хочу познакомить вас с алгоритмом создания списков html при помощи тегов ul и li (маркированный список), ol и li (нумерованный список), dl, dt, dd (список определений). Теперь продолжу знакомить вас с наиболее часто используемыми тегами html, которые применяются для создания списков на страницах сайта. Если кто-то не знает, что это такое, наверняка после полученной ниже информации сразу поймет, о чем речь, поскольку такая форма подачи материала очень распространена. Маркированные HTML списки — теги ul и li Маркированный список определят тег ul. Между открывающим и закрывающим тегами ul располагаются элементы списка, содержание каждого из которых должно быть в свою очередь располагаться между открывающим и закрывающим тегами li. Сразу отмечу, что тег ul является парным (наличие открывающего и закрывающего тега), а также блочным, то есть образует контейнер, в который входят элементы (строки), образуемые каждый раз тегом li. Соответственно тег li является парным и строчным. 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square. Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок. Если дополнить данными атрибутами тег ul, то получим следующие варианты: 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка Естественно, каждому маркеру отдельного элемента маркированного списка можно придать свой внешний вид, прописав соответствующие значения атрибута type. 1 элемент маркированного списка 2 элемент маркированного списка 3 элемент маркированного списка Нумерованные HTML списки — теги ol и li Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (блочный и парный тег по аналогии с ul). В качестве тега, определяющего элементы нумерованного списка html, здесь тоже выступает тег li. Нумерованный список — совокупность пронумерованных элементов. Тип нумерации определяется атрибутом type, который может принимать следующие значения: A — заглавные латинские буквы; a — строчные латинские буквы; I — заглавные римские цифры; i — строчные римские цифры; 1 — арабские цифры 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 3, 2, 1. Это осуществляется с помощью атрибута reserve тега ol. 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I): 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка 1 элемент нумерованного списка 2 элемент нумерованного списка 3 элемент нумерованного списка HTML списки определений — теги dl, dd, dt Еще один вид списков html — список определений. Он формируется следующим образом. Содержание этого списка заключается между открывающим и закрывающим тегами dl, которые образуют контейнер. Тег dt определяет какой-либо термин, а dd — описание этого термина. CMS Система управления контентом, которая применяется для создания сайтов. HTML Язык гипертекстовой разметки, являющийся основой создания вебресурсов. Как видите, содержание тега dt, которое является каким либо термином, смещено влево, а содержание тега dd, являющееся определением данного термина, написано курсивом. Все это достигается с помощью применения различных стилей css, о которых непременно поговорим в ближайших публикациях. Кстати, современные реалии таковы, что язык html нельзя рассматривать в отрыве от css, поэтому, чтобы не пропустить эти важнейшие материалы, подпишитесь на обновление блога через RSS-ленту либо по e-mail. На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей. HTML Tag Sharing is caring! Code Example Description Lists The description list allows you to create a list of terms and then provide one or more descriptions for each term. In HTML 4, the tag defined a “definition list.” But in HTML5, this has been changed to “description list.” This change has little meaning, other than to indicate that the terms and descriptions don’t have to be definitions. For example, you could use the description list for presenting metadata on a blog post: The element can be used for any type of one-to-many name-value pair lists. When not to use While, generally, the definition of the tag has expanded between HTML 4 and HTML5, there is one use case which was formerly suggested and which has now been deprecated: dialogue. I don’t think I can remember Rick If she can stand it, I can. Play it. Sam Yes, boss. While this is deliberately against the HTML specification, it is hard to imagine any problems created by this approach to marking up dialog. (Use at your own risk, though).
  • Используем специальные кнопки BUEditor для облегчение ввода тегов
  • Как сделать чтобы на моем блоге были же такое
  • Если на этом сайте, то у анонимов нет такого права
  • Списки html: теги ul, ol, li, dl, dd, dt
  • Маркированные HTML списки — теги ul и li
  • Нумерованные HTML списки — теги ol и li
  • HTML списки определений — теги dl, dd, dt
  • HTML Tag
  • Code Example
  • Description Lists
  • When not to use
  • Илон Маск рекомендует:  Шаблон сайта металлический HTML, CSS, 1 страница

    HTML тег

    Элемент (от англ. «definition list» ‒ «список определений») является элементом-контейнером для списка определений. В данный элемент могут быть вложены такие элементы как (элемент термина) и (элемент определения).

    Синтаксис

    Закрывающий тег

    Атрибуты

    Для этого элемента доступны глобальные атрибуты и события.

    Стилизация по умолчанию

    Большинство браузеров отобразит элемент со следующими значениями CSS по умолчанию:

    Различия между HTML 4.01 и HTML5

    В HTML 4.01 определяет список определений, а В HTML 5 тег определяет список описаний (толкований, характеристик, свойств, обозначений) .

    в HTML

    Тег входит в тройку элементов , , , предназначенных для создания списка определений. Каждый такой список начинается с контейнера , куда входит тег создающий термин и тег задающий определение этого термина.

    Синтаксис

    Закрывающий тег

    Атрибуты

    Пример. Использование тега

    Спецификация ?

    Спецификация Статус
    WHATWG HTML Living Standard Живой стандарт
    HTML5 Рекомендация
    HTML 4.01 Specification Рекомендация

    Спецификация

    Каждая спецификация проходит несколько стадий одобрения.

    • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
    • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
    • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
    • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
    • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
    • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

    Особняком стоит живой стандарт HTML ( Living ) — он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

    Браузеры: Настольные Мобильные ?

    Internet Explorer Chrome Opera Safari Firefox
    3 1 2 1 1
    Android Firefox Mobile Opera Mobile Safari Mobile
    1 1 6 1

    Браузеры

    В таблице браузеров применяются следующие обозначения.

    • — элемент полностью поддерживается браузером;
    • — элемент браузером не воспринимается и игнорируется;
    • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

    Число указывает версию браузреа, начиная с которой элемент поддерживается.

    Тег HTML список определений

    Тег HTML используется для создания списка определений. Тег — контейнер списка определений.

    Список, созданный с помощью тега , содержит пары «термин — описание».

    Термин в списке определений обозначается тегом , его описание — тегом .

    Помимо списка определений в HTML можно создать маркированный список и нумерованный список.

    Синтаксис

    Отображение в браузере

    Пример использования в HTML коде

    Поддержка браузерами

    Тег
    Да Да Да Да Да

    Атрибуты

    Тег не имеет собственных атрибутов, поддерживает глобальные HTML атрибуты.

    IT-блог о веб-технологиях, серверах, протоколах, базах данных, СУБД, SQL, компьютерных сетях, языках программирования и создание сайтов.

    HTML теги. HTML списки. Тег DL

    Здравствуйте, уважаемые посетители моего скромного блога для начинающих вебразработчиков и web мастеров ZametkiNaPolyah.ru. Продолжаем рубрику Заметки по HTML и ее раздел HTML теги. Данная публикация посвящена HTML тегу . Описание тега , атрибуты тега , синтаксис тега , пример использования тега . Тег относится к группе тегов HTML списков.

    HTML тег . Описание

    HTML тег – относится к тегам предназначенным для формирования HTML списков. Тег предназначен для формирования списков определений в HTML. Сам по себе тег бесполезен, без еще двух тегов, относящихся к спискам определений: и .

    Вместе теги , , формируют списки определений. Тег формирует сам список, тег служит для записи определения термина, а контейнер предназначен для отображения самого термина.

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

    Тег . Синтаксис тега

    Тег является парным HTML тегом, это означает, что закрывающий тег следует обязательно ставить.

    Семантические табы из dl/dt/dd без скриптов

    Совсем недавно начал осваивать верстку и с удивлением обнаружил, что гугл не находит ни одного готового решения для классических табов из списка определений средствами лишь css.
    И это при нынешнем тренде интернета — семантике.

    Под катом одно из возможных решений.

    Основная особенность разметки — «обертка» wrapper’ом:

    Без этого не просто побороть отсекание выносных кнопок необходимым overflow. Возможно, есть способы избавиться от этого лишнего div’a псевдоэлементами или еще какими-нибудь танцами, но я после сегодняшних мучений остановился на текущем варианте.

    Css без декораций выглядит так:

    Это все. Немного приукрашенную рабочую версию можно пощупать на jsfiddle
    При позиционировании обратите внимание на то, что заголовки табов находятся за пределами контейнера.

    Тег dl

    Описание тега DL

    Тег входит в группу тегов , и , предназначенных для создания списка определений.

    Тег создает список; тег задает термин, а тег задает определение заданного термина.

    Атрибуты тега DL

    Пример — теги dd, dl и dt

    «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd» >

    «Content-Type» content= «text/html; charset=windows-1251» >
    Теги , и

    Термин 1
    Определение термина 1
    Термин 2
    Определение термина 2
    Термин 3
    Определение термина 3

    Списки в Html коде — теги UL, OL, LI и DL

    Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня в рамках этой рубрики я хочу поговорить о разнообразных Html списках, которые можно создать на основе специально предназначенных для этого тегов UL, OL, LI и DL. С помощью пары UL и LI создаются маркированные списки, с помощью OL и LI — нумерованные, а с помощью элементов DL, DT и DD создаются так называемые листинги определений. Так же мы рассмотрим вкратце принципы создания вложенных конструкций.

    Хочу напомнить вам, что мы уже успели рассмотреть язык Html и валидатор W3C, как задаются цвета в коде вебстраниц, успели поговорить про основы современной верстки, а так же верстки табличной (тут). Кроме этого мы затронули основы формирования директивы Doctype и оформление комментариев в коде, ну и узнали как вставить в Html картинку через тег Img.

    Маркированные списки на основе тэгов UL и LI

    Для создания маркированных списков используется тег UL, а для создания нумерованных – OL. Эти теги являются парными и блочными, точно так же, как и элемент LI.

    Между открывающим и закрывающим тегом располагаются отдельные пункты списка, которые в свою очередь заключаются в открывающий и закрывающий элемент LI. Сверху и снизу Html списков браузер добавляет отступы в одну строку, подобные отступам, создаваемым тэгом абзаца.

    Давайте посмотрим, например, маркированный вариант, который может выглядеть так:

    • Первая строка
    • Вторая
    • Последний элемент

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

    Т.е. UL служит только для организации маркированного (не упорядоченного) листинга, а все, что вы будете видеть на web странице внутри него, реализуется с помощью содержимого элементов LI.

    Для UL можно менять вид маркера, прописывая в нем разные значения для атрибута «Type». Если «Type» (управление внешним видом маркеров) для элемента UL не указан, то будет отображаться вид маркера, принятого по умолчанию (disc — закрашенный в цвет текста кружок):

        — закрашенный кружок (по умолчанию);
          — не закрашенный кружок;
            – квадрат

    В приведенных примерах атрибут «Type» мы прописывали в элементе UL, применяя данный тип маркеров для всех пунктов. Но атрибут «Type» можно прописать и для каждого отдельного тега LI, задав для этого пункта свой собственный тип маркера.

    Пример маркированного списка с различными типами маркера для каждого пункта:

    1. Маркер в виде закрашенного диска
    2. Маркер в виде не закрашенного диска
    3. Квадрат

    Нумерованные списки в Html на основе тэга OL

    Для создания нумерованного листинга используются теги OL, внутри которых опять же будут расположены элементы LI. OL и LI, как я уже упоминал, являются блочными (т.е. стремятся занять все доступное им место по ширине) и внутри OL нельзя будет размещать ничего кроме элементов LI.

    Получается, что OL и UL — это служебные тэги, которые нужны только для того, чтобы указать браузеру, какой именно вид списка мы формируем (маркированный или же нумерованный). В случае нумерованного — слева от каждого пункта мы будем видеть не маркер, а цифру и стоящую за ней точку:

    1. Первая строка
    2. Второй пункт
    3. Третья строка

    Как я уже упоминал чуть выше, у элементов UL, OL и LI имеется возможность использовать атрибут TYPE. Он позволяет настроить тип маркера или задать, какими цифрами или буквами будут нумероваться пункты листинга. Для нумерованного списка параметры этого атрибута могут принимать следующие значения:

        — нумерация будет выполняться обычными арабскими цифрами (этот же вариант будет использоваться по умолчанию, при отсутствии атрибута «Type»);
          — заглавные буквы в качестве нумерации;
            — строчные буквы;
              — заглавные римские цифры;
                — строчные римские цифры;

              Пример нумерованного списка с различными типами нумерации для каждого пункта:

              1. с нумерацией большими римскими цифрами
              2. Нумерация маленькими латинскими буквами
              3. Нумерация малыми римскими цифрами

              При создании нумерованных списков имеется так же возможность начать нумерацию не с единицы, а с заданного в атрибуте START числа. Например:

              1. Первый элемент, номер которого задан в теге OL атрибутом start=»23″
              2. Следующий пункт, с номером на единицу большим
              3. Еще на единицу больше

              Для OL так же можно начать новую нумерацию с любого значения, начиная с любого пункта, прописав в открывающем LI этого пункта атрибут VALUE с требуемым числом. Например:

              1. Первый пункт с номером один
              2. Этот элемент получит номер, указанный в атрибуте value=»32″
              3. Пункт с большим номером

              Оформление внешнего вида списков в CSS (таблицах стилей)

              Но, как правило, сейчас внешний вид маркеров задается не через атрибут TYPE, а при помощи селекторов класса или Id, для которых прописываются соответствующие свойства.

              В правилах CSS, прописанных для этого класса или Id, указывается, какая картинка будет использоваться в качестве маркера, на каком расстоянии маркер будет отстоять от текста и еще многое. Подробности смотрите в статье про свойства таблиц стилей List style ( type, image, position).

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

              Но а о тонкостях работы с CSS мы поговорим в последующих статьях. Именно таким способом задается внешний вид маркеров для UL на этом блоге. В качестве маркеров используются картинки: для обычных пунктов не нумерованного списка — , для вложенных пунктов ненумерованного — .

              Специальные и вложенные списки в Html коде

              Третий и последний вид называется «списки определений» и задаются они с помощью трех тегов — DL, DT и DD. DL сообщает браузеру, что далее последует список определений.

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

              Если вы посмотрите на приведенный выше пример, то заметите, что элемент DD (описание термина) сдвигается (на 40 пикселей) относительно элемента DT (самого термина).

              Вообще, DL, DT и DD являются блочными тегами, причем, внутри элемента DT можно вставлять только контент со строчными тегами (получается, что внутри DT нельзя будет использовать блочные элементы заголовков и абзацев). А внутри тегов DD можно вставлять любые элементы и строчные и блочные.

              Вложенный список в Html создается по аналогии с простым, но внутри основного списка часть пунктов заключается еще раз в открывающий и закрывающий тег UL или OL.

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

              1. Первый пункт основного нумерованного
              2. Второй пункт
                • Первый элемент вложенного маркированного
                • Второй
                • Третий и последний пункт маркированного
              3. Третий элемент нумерованного

              Мой путь к Богу

              Теги

                ,

                  , — Как вставлять СПИСКИ в свой блог с помощью HTML тэгов

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

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

            • нумерованный (включая и буквенную нумерацию, и также римскими цифрами);
            • ненумерованный, но с маркерами (обычно кружочками);
            • и двухуровневый список, названный «списком определений».


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

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

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

            Заголовок списка
            Первый пункт списка
            .
            Последний пункт списка

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

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

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

            Заголовок списка
            Первый пункт списка
            .
            Последний пункт списка

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

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

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

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

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

            Заголовок списка
            Первый ТЕРМИН
            Определение первого термина
            .
            Последний ТЕРМИН
            Определение последнего термина

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

            Не читайте про это: Эксперементируя (у меня Опера под Linux, но вроде это везде так), выяснил следующее:

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

            ), то жму два Enter-а и вставляю в пустую строку (так в Друпале) — и все путем;

          1. тег сдвигает вправо все, что в него вложено, — на половинный отступ. А т.к. все, что заключено в пару и уже имеет большой отступ, независящий от тега , то получается «лесенка»: сначала делает шажок, потом как-бы добавляет еще столько-же — и все путем;
          2. тег ничего не сдвигает, но равняется на сдвиг (если он есть), или на начало строки, если мы намеренно не используем . И еще назначение тега — держаться на оптимальном расстоянии от последующего списка, так что лучше выглядит OL-список или UL-список с заголовком в (вот такой гибрид), нежели в «родной» нотации, где заголовок следует за тегами или !
          3. Используем специальные кнопки BUEditor для облегчение ввода тегов

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

            Комментарии

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

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

            Пособие для блогеров по структурированию (созданию оглавлений и др.) своих БЛОГов на CMS Drupal (самый минимум из 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-ТЕГов (или просто тэгов), — управляющих последовательностей в угловых скобках, например:

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

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

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

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

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

            «Основных» (для нашего дела) тегов всего два: и

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

            • Пара тегов изажирняет вложенный в них текст;
            • Пара тегов инакладывает курсив на вложенный в них текст;

            • Пара тегов и — сдвигает вправо вложенный в них текст;

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

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

            • Пара тегов

            • Пара тегов и — для центрирования← включите FULL HTML

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

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

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

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

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

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

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

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

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

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

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

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

            Списки html: теги ul, ol, li, dl, dd, dt

            Здравствуйте, уважаемые читатели! Сегодня в качестве продолжения цикла статей рубрики «Основы html» я хочу познакомить вас с алгоритмом создания списков html при помощи тегов ul и li (маркированный список), ol и li (нумерованный список), dl, dt, dd (список определений).

            Теперь продолжу знакомить вас с наиболее часто используемыми тегами html, которые применяются для создания списков на страницах сайта. Если кто-то не знает, что это такое, наверняка после полученной ниже информации сразу поймет, о чем речь, поскольку такая форма подачи материала очень распространена.

            Маркированные HTML списки — теги ul и li

            Маркированный список определят тег ul. Между открывающим и закрывающим тегами ul располагаются элементы списка, содержание каждого из которых должно быть в свою очередь располагаться между открывающим и закрывающим тегами li. Сразу отмечу, что тег ul является парным (наличие открывающего и закрывающего тега), а также блочным, то есть образует контейнер, в который входят элементы (строки), образуемые каждый раз тегом li. Соответственно тег li является парным и строчным.

            • 1 элемент маркированного списка
            • 2 элемент маркированного списка
            • 3 элемент маркированного списка

            По умолчанию внешний вид маркера представляется закрашенным кружком. Однако, можно изменить его внешний вид, применив атрибут type, который имеет следующие значения: disc, circle, square. Значение disc (которое определяет внешний вид маркера в виде закрашенного кружка) применяется по умолчанию. То есть если атрибут type не прописан, то внешний вид маркера будет выглядеть как закрашенный кружок. Если дополнить данными атрибутами тег ul, то получим следующие варианты:

            • 1 элемент маркированного списка
            • 2 элемент маркированного списка
            • 3 элемент маркированного списка
            • 1 элемент маркированного списка
            • 2 элемент маркированного списка
            • 3 элемент маркированного списка
            • 1 элемент маркированного списка
            • 2 элемент маркированного списка
            • 3 элемент маркированного списка

            Естественно, каждому маркеру отдельного элемента маркированного списка можно придать свой внешний вид, прописав соответствующие значения атрибута type.

            • 1 элемент маркированного списка
            • 2 элемент маркированного списка
            • 3 элемент маркированного списка

            Нумерованные HTML списки — теги ol и li

            Теперь посмотрим, как образуется нумерованный список с помощью тегов ol (блочный и парный тег по аналогии с ul). В качестве тега, определяющего элементы нумерованного списка html, здесь тоже выступает тег li. Нумерованный список — совокупность пронумерованных элементов. Тип нумерации определяется атрибутом type, который может принимать следующие значения:

            • A — заглавные латинские буквы;
            • a — строчные латинские буквы;
            • I — заглавные римские цифры;
            • i — строчные римские цифры;
            • 1 — арабские цифры
            1. 1 элемент нумерованного списка
            2. 2 элемент нумерованного списка
            3. 3 элемент нумерованного списка
            1. 1 элемент нумерованного списка
            2. 2 элемент нумерованного списка
            3. 3 элемент нумерованного списка
            1. 1 элемент нумерованного списка
            2. 2 элемент нумерованного списка
            3. 3 элемент нумерованного списка
            1. 1 элемент нумерованного списка
            2. 2 элемент нумерованного списка
            3. 3 элемент нумерованного списка
            1. 1 элемент нумерованного списка
            2. 2 элемент нумерованного списка
            3. 3 элемент нумерованного списка

            Также можно обеспечить нумерованный список, где нумерация элементов осуществляется в обратном порядке, например: 3, 2, 1. Это осуществляется с помощью атрибута reserve тега ol.

            1. 1 элемент нумерованного списка
            2. 2 элемент нумерованного списка
            3. 3 элемент нумерованного списка

            Существует также возможность начать маркированный список не с 1, а с любого другого числа. Для этого можно воспользоваться атрибутом start, причем совершенно не важно, какое значение атрибута type установлено. Посмотрите пример использования атрибута name в совокупности с различными значениями атрибута type (1 и I):

            1. 1 элемент нумерованного списка
            2. 2 элемент нумерованного списка
            3. 3 элемент нумерованного списка
            1. 1 элемент нумерованного списка
            2. 2 элемент нумерованного списка
            3. 3 элемент нумерованного списка

            HTML списки определений — теги dl, dd, dt

            Еще один вид списков html — список определений. Он формируется следующим образом. Содержание этого списка заключается между открывающим и закрывающим тегами dl, которые образуют контейнер. Тег dt определяет какой-либо термин, а dd — описание этого термина.

            CMS Система управления контентом,
            которая применяется для создания сайтов. HTML Язык гипертекстовой разметки,
            являющийся основой создания вебресурсов.

            Как видите, содержание тега dt, которое является каким либо термином, смещено влево, а содержание тега dd, являющееся определением данного термина, написано курсивом. Все это достигается с помощью применения различных стилей css, о которых непременно поговорим в ближайших публикациях.

            Кстати, современные реалии таковы, что язык html нельзя рассматривать в отрыве от css, поэтому, чтобы не пропустить эти важнейшие материалы, подпишитесь на обновление блога через RSS-ленту либо по e-mail. На этом тема сегодняшней статьи исчерпана, если вы получили необходимую информацию, не откажитесь воспользоваться кнопками социальных сетей.

            HTML Tag

            Sharing is caring!

            Code Example

            Description Lists

            The description list allows you to create a list of terms and then provide one or more descriptions for each term. In HTML 4, the tag defined a “definition list.” But in HTML5, this has been changed to “description list.” This change has little meaning, other than to indicate that the terms and descriptions don’t have to be definitions. For example, you could use the description list for presenting metadata on a blog post:

            The element can be used for any type of one-to-many name-value pair lists.

            When not to use

            While, generally, the definition of the tag has expanded between HTML 4 and HTML5, there is one use case which was formerly suggested and which has now been deprecated: dialogue.

            I don’t think I can remember Rick If she can stand it, I can. Play it. Sam Yes, boss.

            While this is deliberately against the HTML specification, it is hard to imagine any problems created by this approach to marking up dialog. (Use at your own risk, though).

    Понравилась статья? Поделиться с друзьями:
    Кодинг, CSS и SQL