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

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

var linkNav = document.querySelectorAll('[href^="#nav"]'), V = 2; // скорость, может иметь дробное значение через точку for (var i = 0; i < linkNav.length; i++) < linkNav[i].onclick = function()< var w = window.pageYOffset, hash = this.href.replace(/[^#]*(.*)/, '$1'); t = document.querySelector(hash).getBoundingClientRect().top, start = null; requestAnimationFrame(step); function step(time) < if (start === null) start = time; var progress = time - start, r = (t < 0 ? Math.max(w - progress/V, w + t) : Math.min(w + progress/V, w + t)); window.scrollTo(0,r); if (r != w + t) else > return false; > >

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

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

заменяет на абсолютные

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

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

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

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

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

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

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

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

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

И второе. Поскольку у меня меню сверху закрывает начало заголовка закладки, то решила добавить css стиль, как вы советуете здесь http://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 Хочу материал дополнить парой ссылок, но как правило самое простое — самое востребованное. К тому же и Гугл, и Яндекс стараются учитывать такие меню в сниппетах. Анонимный Ссылки не открываются. Печалька((. Прошу посмотрите как сделано здесь http://html5.by/blog/scroll-effects/ . Особенно интересно эффект 8. Staging (Сцена). Если можно ознакомьте. Спасибо
NMitra Какие именно ссылки не открываются?
Спасибо, прочитала. Анонимный Сейчас ссылки все работают. Почему-то раньше на работали и выдавали ошибку. Тимур тим Не хватает кнопки чтоб вернутьс яна верх NMitra

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

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

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

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

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

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

Все примеры адаптированы для мобильных устройств.

Пример 1.

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;700&display=swap'); * < margin: 0; padding: 0; box-sizing: border-box; >body < font-family: 'Noto Serif', serif; line-height: 1; color: #231E20; background: #F2D8CE; >a < text-decoration: none; color: #231E20; >.container < padding: 0 20px; >h1 < margin-bottom: 40px; >.toc-wrapper < width: 100%; max-width: 768px; margin: 0 auto 40px; padding-left: 40px; >.toc < list-style: none; counter-reset: li; background: url(https://html5book.ru/wp-content/uploads/2022/01/isolate.jpg) no-repeat; background-size: cover; padding: 50px 0; >.toc li < position: relative; padding: 20px 20px 20px 0; background: #F2D8CE; margin-bottom: 50px; line-height: 1.2; transition: .3s linear; >.toc li:last-child < margin-bottom: 0; >.toc li:before < counter-increment: li; content: counters(li, ".") ". "; position: absolute; width: 40px; text-align: center; font-weight: 700; font-size: 1.2em; left: -40px; top: 0; bottom: 0; display: flex; align-items: center; transition: .3s linear; >.toc li:hover:before < padding-left: 10px; >@media(max-width:767px) < h1 < margin-bottom: 30px; >.toc li < padding: 15px 20px 15px 0; margin-bottom: 40px; >>

Пример 2.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap'); * < margin: 0; padding: 0; box-sizing: border-box; >body < font-family: 'Montserrat', sans-serif; line-height: 1; background: #1C1A30; >a < text-decoration: none; color: #1C1A30; >.container < padding: 0 20px; >h1 < margin-bottom: 40px; color: #1C1A30; text-transform: uppercase; >.toc-wrapper < width: 100%; max-width: 960px; margin: 0 auto 40px; >.logo < width: 200px; height: 200px; position: relative; background: linear-gradient(45deg, #F5AF69 50%, #F4EED7 50.9%), linear-gradient(90deg, #FC5135 50%, #4E203C 50%), linear-gradient(-45deg, #F5AF69 50%, #E8D9A0 50.9%), linear-gradient(#FC5135 50%, #4E203C 50%), linear-gradient(-45deg, #F5AF69 50%, #E8D9A0 50.9%), linear-gradient(90deg, #FC5135 50%, #4E203C 50%), linear-gradient(45deg, #FC5135 50%, #F5AF69 50.9%); background-size: 50px 50px, 100px 50px, 50px 50px, 200px 100px, 50px 50px, 100px 50px, 50px 50px; background-repeat: no-repeat; background-position: 0 0, 50px 0px, 150px 0, 0 50px, 0 150px, 50px 150px, 150px 150px; >.logo:before < content: ""; position: absolute; top: 30px; left: 30px; width: 140px; height: 140px; transform: rotate(45deg); background: linear-gradient(45deg, #F4EED7 50%, #E8D9A0 50%); >.logo:after < content: ""; position: absolute; top: 55px; left: 55px; width: 90px; height: 90px; transform: rotate(45deg); background: linear-gradient(45deg, #FC5135 50%, #4E203C 49.9%), linear-gradient(-45deg, #F5AF69 50%, transparent 50%), linear-gradient(#FC5135 50%, #FC5135 50%), linear-gradient(-45deg, #4E203C 50%, transparent 50%); background-size: 45px 45px; background-repeat: no-repeat; background-position: 0 0, 0 45px, 45px 45px, 45px 0; border-radius: 0 50% 50% 50%; >.logo span < display: block; background: #4E203C; width: 29px; height: 32px; position: absolute; top: 99.5px; left: 130px; border-radius: 0 50% 50% 0; >.logo span:before < content: ""; width: 10px; height: 10px; background: #E8D9A0; border-radius: 50%; position: absolute; top: 11px; left: 10px; z-index: 2; >.content-wrapper < background: white; padding: 40px; >.toc < list-style: none; counter-reset: li; >.toc li < position: relative; padding: 10px 0 0 60px; margin-bottom: 50px; border-top: 1px solid #4E203C; line-height: 1.2; transition: .3s linear; >.toc li:last-child < margin-bottom: 0; >.toc li:before < counter-increment: li; content: "0"counters(li, ""); font-family: georgia; color: #4E203C; font-weight: bold; font-size: 20px; position: absolute; left: 5px; top: 7px; transition: .3s linear; >.toc li:after < content: ""; position: absolute; top: -2px; left: 0; width: 40px; height: 2px; background: #4E203C; transition: .3s linear; >.toc li:hover < border-color: #FC5135; >.toc li:hover:before < color: #FC5135; >.toc li:hover:after < background: #FC5135; >@media(max-width:767px) < .logo-wrapper < display: none; >> @media(min-width:768px) < .toc-wrapper < display: flex; >.logo-wrapper < width: 50%; display: flex; align-items: center; justify-content: center; >.content-wrapper < width: 50%; padding: 60px; >>

Пример 3.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap'); * < margin: 0; padding: 0; box-sizing: border-box; >body < font-family: 'Montserrat', sans-serif; line-height: 1; color: #231E20; background: #F2E5D0; >a < text-decoration: none; color: #231E20; >.container < padding: 0 20px 0 80px; >h1 < margin-bottom: 20px; >.toc-wrapper < width: 100%; max-width: 768px; position: relative; padding: 10px 0 10px 20px; margin: 80px auto 40px; border-left: 4px solid #D9AA63; >.toc-wrapper:before < content: ""; position: absolute; top: -60px; left: -60px; width: 60px; height: 60px; background: url(toc.svg) 50% 50% no-repeat #D9AA63; background-size: 30px; border-radius: 10px 10px 0 50%; >.toc < list-style: none; counter-reset: li; >.toc li < margin-bottom: 20px; transition: .3s linear; >.toc li:last-child < margin-bottom: 0; >.toc li:before < counter-increment: li; content: counters(li, ""); margin-right: 10px; font-weight: 700; width: 28px; height: 28px; text-align: center; line-height: 28px; display: inline-block; border: 1px solid transparent; border-radius: 50%; transition: .3s linear; >.toc li:hover:before

Пример 4.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap'); * < margin: 0; padding: 0; box-sizing: border-box; >body < font-family: 'Montserrat', sans-serif; line-height: 1; color: #231E20; background: #EAE9E4; >a < text-decoration: none; color: #231E20; >.container < padding: 0 20px; >h1 < margin-bottom: 20px; text-transform: uppercase; >.toc-wrapper < display: table; margin: 0 auto; >.toc < list-style: none; counter-reset: li; >.toc li < position: relative; margin-bottom: 20px; padding-left: 50px; line-height: 28px; transition: .3s linear; >.toc li:last-child < margin-bottom: 0; >.toc li:before < counter-increment: li; content: counters(li, ""); position: absolute; top: 50%; margin-top: -14px; left: 0; font-size: 14px; width: 28px; height: 28px; text-align: center; line-height: 28px; color: white; border-radius: 50%; background: rgb(46, 43, 31); >.toc li:nth-child(2):before, .toc li:nth-child(2):after < background: rgba(46, 43, 31, .8); >.toc li:nth-child(3):before, .toc li:nth-child(3):after < background: rgba(46, 43, 31, .6); >.toc li:nth-child(4):before, .toc li:nth-child(4):after < background: rgba(46, 43, 31, .4); >.toc li:nth-child(5):before, .toc li:nth-child(5):after < background: rgba(46, 43, 31, .2); >.toc li:after < content: ""; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: rgb(46, 43, 31); top: 50%; left: 34px; margin-top: -4px; opacity: 0; transition: .3s linear; >.toc li:hover:after

Пример 5.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap'); * < margin: 0; padding: 0; box-sizing: border-box; >body < font-family: 'Montserrat', sans-serif; background: #E0E7F3; line-height: 1; color: #231E20; >a < text-decoration: none; color: #393939; >.container < padding: 0 20px; >h1 < font-weight: 600; text-transform: uppercase; >.toc-wrapper < max-width: 768px; margin: 0 auto; >.toc < list-style: none; counter-reset: li; >.toc li < position: relative; left: -60px; margin-bottom: 30px; padding-left: 70px; line-height: 1.2; >.toc li:last-child < margin-bottom: 0; >.toc li:before < counter-increment: li; content: "0"counters(li, ""); color: white; position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 20px; font-weight: 600; width: 60px; text-align: center; >.toc li:after < content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 1px; background: linear-gradient(to right, white, white 60px, #393939 60px); >@media(max-width:599px) < .toc-wrapper < padding-left: 80px; padding-bottom: 30px; position: relative; >.toc-wrapper:before < content: ""; position: absolute; top: 0; left: 0; width: 80px; bottom: 0; background: #393939; >h1 < padding-left: 10px; padding-top: 10px; margin-bottom: 15px; >> @media(min-width:600px) and (max-width:767px) < h1 < font-weight: 600; padding: 60px 30px; >.toc < padding-top: 170px; padding-bottom: 70px; >> @media(min-width:600px) < .toc-wrapper < display: flex; >h1 < padding: 100px 60px; background: #393939; color: white; >> @media(min-width:768px) < .toc < padding-top: 200px; padding-bottom: 100px; >>

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

Учебники и уроки для начинающих: HTML, CSS, JavaScript, PHP, WordPress

Видеокурс «jQuery от А до Я. Библиотека JavaScritp для начинающих.» на Stepik, бесплатно! https://stepik.org/134100

Оглавление учебника по HTML

Учебник HTML для начинающих (часть 1)

1. Учебник HTML (введение)
2. Создаём HTML-страницу
3. Разбирем HTML-код
4. Добавляем статью
5. Добавляем фото
6. Используем CSS
7. Разбирем CSS-код
8. Добавляем ссылку
9. Создаём сайт
10. Заключение учебника по HTML

Учебник HTML для начинающих (часть 2)

• Заголовки h1 — h6
• Списки в HTML

Теги HTML

• Поговорим о тегах HTML?
• Парные HTML-теги
• Одиночные HTML-теги
• Блочные HTML-теги
• Строчные HTML-теги
• Новые теги HTML5
• Устаревшие HTML-теги
• Нестандартные HTML-теги
• Семантические HTML-теги
• Список всех HTML-тегов

Атрибуты HTML

• Поговорим об атрибутах HTML?
• Глобальные атрибуты HTML
• Атрибуты событий в HTML
• Атрибуты значений в HTML

Статьи о HTML

• Шпаргалка HTML
• Синтаксис HTML
• Адреса в HTML
• Цвета в HTML
• Единицы измерения в HTML
• Спецсимволы в HTML
• DOCTYPE в HTML

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

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

Содержание:

• Для чего нужно содержание на сайте
• Как сделать содержание для статьи
• Создание оглавления в WordPress

Для чего нужно содержание на сайте

Содержание в статье прежде всего нужно для удобства пользователя. Он может быстро понять главные моменты в статье. Если пользователь не желает читать статью полностью, оглавление с легкостью поможет ему переместиться в нужный фрагмент. В очень длинной статье, мне кажется, не добавить содержание вообще будет считаться издевательством над пользователем.

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

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

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

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

Теперь добавляем атрибуты id к нашим заголовкам.

Всё, наше содержание готово.

Создание оглавления в WordPress

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



Далее переходим на вкладку «Текст» и просто расставляем теги и атрибуты id, как было указано выше.



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

С уважением, Евгений Кузьменко.

Не забывайте делиться статьей в социальных сетях! Спасибо!

Посмотрите также следующие статьи:

Похожие публикации:
1. 1 log что это в телефоне
2. Как распечатать все листы в excel сразу
3. Как удалить каждый второй элемент из списка python
4. Как удалить образ docker