Как сделать содержание в html

Как сделать содержание (оглавление) в статье сайта/блога | HTML5

Как создать оглавление внутри статьи блога

В начале заголовкам нужно задать id

Код блока с содержанием, где href у ссылок точно такой же как id заголовков, за исключением символа #:

Как сделать нумерованное содержание в статье сайта

Всё тоже самое, только ul нужно заменить на ol

Многоуровневый нумерованный список HTML

Здесь уже нужна помощь CSS

Логика призывает к такому построению тегов в статье

Подсвечивание разделов, к которым был сделан переход на CSS

При переходе к четверостишию “Зайка” страница не перематывается к началу стиха (см. тут). Чтобы более явно обозначить секцию, можно использовать псевдокласс :target .

Фиксированное сверху меню и отступ от края окна браузера

Хэш-ссылка отматывает страницу к верхнему краю тега соответствующего id. Отчего получается, что фиксированное сверху меню закрывает часть элемента, в моём случае заголовок. Вот так.

Чтобы страница прокручивалась несколько выше элемента, нужно прописать тегу псевдоэлемент :before

Фиксированное меню, в т.ч. для сайтов с параллакс эффектом, с подсветкой текущего пункта

Когда верхняя часть окна браузера проходит раздел веб-страницы, нужно выделить тот пункт меню, допустим поменять цвет его фона, нажав на который пользователь будет перемещён к началу этого раздела. Лучше посмотрите пример . Для разнообразия на этот раз пункты меню отмечены зелёными точками и прикреплены к правой части страницы.

Меню с плавной прокруткой страницы

Для пользователей Blogger

Если использовать вкладку “Создать” при редактировании Сообщения, Blogger относительные ссылки вида заменяет на абсолютные

Чтобы избежать проблем, следует использовать абсолютные ссылки вида (текущая страница + хэш)

24 комментария:

Александр Нужная информация. Попробую использовать NMitra Хорошо, разовью тему в следующем посте. Анонимный Наталья, спасибо.

Скажите, пожалуйста, вы знаете как сделать так, чтобы страница не быстро перескакивала к целевому заголовку, а плавно (эластично) прокручивалась? (Я имею ввиду последний пример поста) NMitra Я поняла что вы имеете ввиду. Тоже об этом думала. Если у вас подключен JQuery, то https://stackoverflow.com/questions/7717527/jquery-smooth-scrolling-when-clicking-an-anchor-link

Если нужен только JavaScript, то отпишитесь, но код там получается не маленьким. Анонимный Наталья, спасибо за отклик.

Чтобы работал JQuery, надо подключать его библиотеки.

А код в этих библиотеках тоже не маленький.

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

Может, самописный код будет шустрее. NMitra Я считаю, что подключать jQuery стоит если нужно несколько функций из библиотеки. Ради одной вешать весь арсенал не стоит. Я подумаю над скриптом. NMitra Сделала, есть замечания https://shpargalkablog.ru/2014/03/table-of-contents-html5.html#scroll ? NMitra А то уже и код, и результат примелькался, могла что-то упустить. Vegan Boom Сделала нумерованное оглавление внутри статьи блога https://veganboom.blogspot.com/2013/11/vegan-questions.html, но нумерация почему-то не отражается в оглавлении поста, хотя при редактировании сообщения вижу, что номера проставлены.

И второе. Поскольку у меня меню сверху закрывает начало заголовка закладки, то решила добавить css стиль, как вы советуете здесь https://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#zdes. Выставила там height: 3em; margin-top: -3em;
Почти нормально, но всё-таки как-то по-разному везде отступы отображаются (где-то есть пространство над заголовком, где-то заголовок чуть ли не обрезан). Подскажите, пожалуйста, что надо подправить, чтобы ссылка на закладку вела точно к началу соответствующего названия и чтобы моё главное меню не перекрывало это название. NMitra У вас в шаблоне прописано
ol, ul <
list-style: outside none none;
>
Сделайте приблизительно так
.toc ol <
list-style: decimal;
>

Пощелкала, проблем не увидела, вот только из-за скрипта у вас при переходе по хэш ссылке страница перезагружается. Надежда Хачатурова Очень помог Ваш материал. Не мудрствуя, сделала, чтобы было удобно на длинной странице переходить к нужному месту. Спасибо большое! NMitra Хочу материал дополнить парой ссылок, но как правило самое простое – самое востребованное. К тому же и Гугл, и Яндекс стараются учитывать такие меню в сниппетах. Анонимный Ссылки не открываются. Печалька((. Прошу посмотрите как сделано здесь https://html5.by/blog/scroll-effects/ . Особенно интересно эффект 8. Staging (Сцена). Если можно ознакомьте. Спасибо
NMitra Какие именно ссылки не открываются?
Спасибо, прочитала. Анонимный Сейчас ссылки все работают. Почему-то раньше на работали и выдавали ошибку. Тимур тим Не хватает кнопки чтоб вернутьс яна верх NMitra

https://shpargalkablog.ru/2011/05/kak-sdelat-ssylku-k-nachalu-stranitsy.html Alex ZaJW Здравствуйте! Полезная информация. Но Вы показали здесь не все пункты.
Содержание:
steer”>Бычок
bunny”>Зайка
bear”>Мишка

Подскажите, пожалуйста, а как выделять (id) 4, 5. и до 10 пункта содержание? NMitra Здравствуйте, по аналогии: присваиваете id (не должен повторяться на странице) заголовкам, а потом ссылки на них ставите с #id

Наверно лучше всего вам посмотреть исходный код страницы: в адресную строку браузера введите

Как сделать оглавление (содержание, меню) для статьи на сайте

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Решил написать совсем маленький пост на тему создания оглавления для статьи, если она получилась большой или вы ожидаете заходы пользователей с несколько различными интересами. В этом случае краткое содержание и возможность перейти сразу к нужному фрагменты статьи на вашем сайте может оказаться полезным, как мне кажется.

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

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

Для чего и как можно создать оглавление статьи в Html

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

Разным читателям могут быть интересны разные фрагменты этой публикации и не интересны другие. Чтобы не потерять кого-то по дороге, я и решил добавить туда оглавление.

В некоторых же моих публикациях присутствует просто очень много информации, и не сделать вначале содержание будет преступлением перед пользователем, который, надеясь на небольшой по размерам, но содержательный пост, увязнет в чудовищных размерах «портянке» с кучей пространных рассуждений и не нужных ему объяснений.

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

Реализовано это все при помощи нумерованных Html списков OL, для которых прописано еще и несколько строк CSS кода в отдельном файлике. Так же используются так называемые якоря для гиперссылок, которые создают в статье тем места, куда будут вести пункты оглавления.

Давайте с якорей и начнем. Я расставляю их у промежуточных заголовков в статье. Раньше это можно было делать с помощью вот такой вот конструкции:

В атрибуте name прописывается уникальная для этой статьи метка. Однако сейчас такой метод вставки якорей считается невалидным (нежелательным) и в качестве якорей предлагается использовать значения атрибута ID, который можно будет прописать, например, в тегах H1-H6 тех самых промежуточных заголовков в статье.

Про это я писал в статье про Создание якорей и хеш-ссылок (кстати, перейдя по ней вы как раз и переместитесь в нужное место статьи, а не в ее начало, как было бы при обычной не хеш-ссылке).

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

У меня это теги H3, хотя по логике должны быть H2 (ступил на начальном этапе создания блога, а сейчас переделывать уже не вижу особого смысла, да и опасаюсь, ибо поисковики и их действия не всегда идут в ногу с обычной человеческой логикой). Вот.

Как видите, там у меня стоит уникальный идентификатор ID с уникальным для этой статьи значением ggl. Для наглядности приведу код и второго подзаголовка:

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

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

У меня, кстати, был случай, что проставленная мною метка для якоря в ID совпала с уже существующей и описанной в CSS файле, что вызвало у меня по началу искреннее удивление, ибо подзаголовок стал выглядеть крайне вычурно и необычно. Причем в той статье он было пока что только один, что и заставило меня какое-то время ломать голову над случившимся.

Ну вот, самое сложно сделали, теперь можно и, собственно, оглавление добавлять. В нашем примере оно будет выглядеть так:

Гиперссылки все ведут на одну и ту же страницу, где и расположена эта статья, но в конце у них через решетку (# — ее иногда называют хеш) стоит уникальная метка, каждая из которых ведет на свой якорь.

В принципе, можно было бы вместо этого написать более коротко:

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

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

Оформляем содержание статьи с помощью CSS свойств

Все, теперь только остается прописать CSS свойства для селектора класса ogl и дело в шляпе. Обычно, все стили выносятся в отдельный файл или несколько файлов. В случае Вордпресс он живет в папке с используемой темой:

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

Чтобы получить такой же вид оглавления (содержания) для статьи как у меня, достаточно будет добавить в него эту строчку кода:

Разберем по порядку CSS свойства:

1. float:right — делает блок с оглавлением плавающим и заставляет его прижаться к правому краю (подробнее читайте в статье про инструменты блочной верстки Float и clear
2. border:1px dotted black — задает рамку по всем сторонам блока шириной в один пиксел, нарисованную прерывистой линией черного цвета. Про рамки и упомянутые чуть ниже отступы читайте в статье — Задаем в CSS внутренние (Padding) и внешние (Margin) отступы, а так же рамки (Border)
3. padding:5px 5px 0 5px — задаются отступы в 5 пикселей от верхнего, правого и левого края рамки до заключенного в нее текста (пунктов списка).
4. margin:5px — отступы в пять пикселей от внешнего края рамки оглавления до соседних элементов

Кроме этого вы вольны будете добавить сюда и отдельную настройку для шрифтов с помощью свойства Font (Weight, Family, Size, Style) или еще что-то, но лично мне показалось и этого достаточно.

Для того, чтобы экспериментировать с оформлением, можно будет, не залезая в файл style.css, поиграться со стилями, прописав их прямо в Html коде с помощью атрибута style, а уже потом перенести окончательный вариант в отдельный стилевой файлик. Выглядеть это будет примерно так:

Вообще, стили CSS можно подключать к Html через style тремя способами, описанными в публикации по приведенной ссылке. Предпочтительнее всего внешний файл, но на этапе отладки и другие вполне подойдут.

Как сделать содержание (оглавление, меню) для статьи на сайте?

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

Такое меню в статьях вы, наверное, уже неоднократно встречали у меня на SEO Блоге Лентяйки и на других сайтах. Сложно ли сделать такую фишку? Очень просто!

Преимущества краткого содержания в статье

Содержание статьи решает сразу несколько задач.

• Читатель с первого взгляда может понять, о чем статья, и решит ли она его проблему.
• Читателю удобно перемещаться по смысловым блокам текста.
• Внимание посетителя может зацепить какой-нибудь пункт меню в оглавлении, и он задержится на странице.
• В содержании статьи можно использовать ключевые фразы, под которыми продвигается статья. Нередко фрагмент краткого содержания попадает в сниппет поисковой выдачи. И смотрится он там очень эффектно!

Как сделать содержание статьи в блоге: код оглавления

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

Там хранится код для вывода содержания статьи. Вот он.

Я его просто вставляю в начале статьи в редакторе WordPress в режиме HTML. При переключении между визуальным редактором и HTML редактором он никуда не пропадает.

Вместо «пункт меню 1» и «пункт меню 2» я просто пишу подзаголовки статьи. Если нужно, то удаляю лишние пункты оглавления или добавляю новые.

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

Код якоря рядом с подзаголовком такой:

Просто вставляю этот код якоря перед той строчкой, к которой хочу перенести читателя моего повествования.

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

Стандартный нумерованный список выводят так:

Для списка оглавления задан конкретный стиль с помощью идентификатора:

Это значит, что в файл style.css нужно добавить конкретное правило отображения блока с оглавлением статьи. Тогда у сдержания статьи появится приятный фон и любые финтифлюшки, какие вы захотите. Чуть ниже, я объясню, как это сделать.

В каждом конкретном пункте меню содержится ссылка на ярлык:

Каждой ссылке на ярлык соответствует конкретный ярлык в тексте:

Резюме:

В режиме HTML редактора вы вставляете код для вывода содержания статьи, а потом по тексту в этом же режиме разбрасываете ярлыки.

Вроде все просто объяснила. Если есть вопросы – задавайте в комментариях.

Если все понятно, то нам осталось только настроить стиль содержания статьи.

Как сделать красивое содержание статьи: прописываем стили

Открываете в админке WordPress «Внешний вид» – «Редактор».

Листаете файл style.css.

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

У меня на блоге такие правила:

Для вашего дизайна вы можете прописать другие правила: изменить цвет, отступы, шрифты, – все, что захотите.

Если вам нужно подобрать код нужного вам цвета, то можете посмотреть мою «Таблицу безопасных HTML цветов». Безопасными цвета называются потому, что они одинаково хорошо, без искажений, отображаются во всех браузерах пользователей.

Если вы совсем ничего не понимаете в style.css, то просто вставьте код стиля меню статьи в конец файла. Он все равно будет работать.

В общем, вы сохранили файл style.css, отредактировали статью и обновили страницу на сайте. Получилось у вас красивое содержание статьи? Расскажите мне в комментариях! Мне будет приятно, что я кому-то помогла сделать краткое оглавление статьи в блоге.

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

Источники:

https://shpargalkablog.ru/2014/03/table-of-contents-html5.html
https://ktonanovenkogo.ru/html/kak-sdelat-oglavlenie-soderzhanie-dlya-stati-sajte.html
https://foxyforex.ru/sozdanie-saita/kak-sdelat-soderzhanie-stati-na-sajte