Оглавление html: Как сделать содержание (оглавление) в статье сайта/блога – Как сделать оглавление (содержание, меню) для статьи на сайте

Leave a Comment / Html / By /

Добавляем статью HTML — Как создать сайт


Добавляем статью на HTML-страницу

Урок №4
Добавляем текст в HTML-страницу

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

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

Вот как на данный момент выглядит код, нашего файла index.html:


<html>
 <head>
  <title>Название страницы</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

Сначала добавим в HTML-документ, статью. Для примера я выбрал статью, которая рассказывает об удивительном и загадочном звере — снежном барсе, статья содержит один заголовок и два абзаца:


Снежный барс

Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, 
Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
относительно короткими лапами, небольшой головой и очень длинным хвостом. 
Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
пятнами.
    
Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
приблизительным оценкам их количество варьируется в районе около 10 тысяч 
особей. По состоянию на 2016 год, охота на снежных барсов повсеместно
запрещена.

В прошлом уроке мы выяснили, что между тегами <title> </title> — находится текст обозначающий название страницы. Так как наша статья посвящена снежному барсу, то мы сделаем название страницы следующим:
Страница о снежном барсе


<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h2>Заголовок статьи</h2>
  <p>
   Абзац статьи.</p>
 </body>
</html>

Между тегами <h2> </h2> помещают текст, который является заголовком статьи, впишем туда следующее:
Снежный барс


<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
 <h2>Снежный барс</h2>
 <p>
  Абзац статьи.</p>
 </body>
</html>

Между тегами <p> </p> помещают текст, который является абзацем статьи. В нашей статье о снежном барсе имеется два абзаца, добавим в начало каждого абзаца открывающий тег <p>, а в конец каждого абзаца закрывающий тег </p>. Обрамив любой текст тегами p, мы сделаем данный текст абзацем.

В итоге, HTML-документ файла index.html, должен выглядеть так:


<html>
 <head>
  <title>Страница о снежном барсе</title>
 </head>
 <body>
  <h2>Снежный барс</h2>
  <p>
   Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства 
   кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, 
   Казахстана, Киргизстана, Китая, Монголии, Непала, Пакистана, России, 
   Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, 
   относительно короткими лапами, небольшой головой и очень длинным хвостом. 
   Длина снежного барса вместе с хвостом составляет 200-230 см, вес до 55 кг.
   Окраска меха светлая, дымчато-серая с кольцеобразными или сплошными тёмными 
   пятнами.</p>
  <p>
   Охотится снежный барс, в основном, на горных козлов и баранов, также в его 
   рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности
   местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по 
   приблизительным оценкам их количество варьируется в районе около 10 тысяч 
   особей. По состоянию на 2013 год, охота на снежных барсов повсеместно
   запрещена.</p>
 </body>
</html>

Открыв файл index.html с помощью браузера, вы должны увидеть примерно следующее

Читать далее: Добавляем фотографию на HTML-страницу


Дата публикации поста: 7 февраля 2016

Дата обновления поста: 15 октября 2014


Навигация по записям

Оглавление HTML ссылка — CodeRoad

В оглавлении Википедии, просто поставив тег hash и удалив пробелы, используя подчеркивания на желаемом содержимом, мы можем перейти к другому содержимому на той же странице. Есть ли тег HTML для этого? Или я должен использовать Javascript? Если это так, дайте мне синтаксис в jQuery, так как я более комфортно с ним. Спасибо!

html Поделиться Источник PHP For Life     07 июня 2012 в 13:08

2 Ответа

Поделиться Quentin     07 июня 2012 в 13:09


1


Обычно вы связываетесь с именованными якорями, например:

<a name="top"></a>

<a href="#top">go to top of page</a>

Но вы можете использовать любой соответствующий ID действительно.

Поделиться Matthew Riches     07 июня 2012 в 13:11

Похожие вопросы:


Как добавить оглавление в файл R Markdown HTML с помощью pandoc?

Как добавить оглавление в файл R Markdown HTML с помощью pandoc, но сохранить все форматирование HTML и информацию о заголовке? E.g., Если бы у меня был файл с именем test.html , я попытался: pandoc…


Оглавление с номерами страниц в html

Мне нужно создать оглавление для большой страницы html, которая будет напечатана. Единственный вариант, который я нашел, — это CSS3, и он пока не работает в браузерах (я пробовал в FireFox и знаю,…


как добавить оглавление в файл doxygen generated html?

У меня есть C-проект, документированный с помощью doxygen, и я хочу добавить оглавление, которое показывает разделы и подразделы. Я попробовал \tableofcontents и [TOC] , как описано в руководстве…


В документе RMarkdown Word, Как сделать оглавление появится позже

Когда документ RMarkdown связан с Word, Оглавление (если оно есть) всегда появляется в начале документа. Если я хочу, скажем, чтобы Оглавление появилось на второй странице документа, как это…


Оглавление / индекс внутри файла R

У меня есть очень длинные файлы скриптов R (один имеет 2723 строки), могу ли я создать оглавление или индекс для навигации по файлу? Я хотел бы создать оглавление, которое указывает на определенную…


Как создать оглавление для HTML текста в Python?

Предположим, что у меня есть некоторый код HTML, например (сгенерированный из Markdown или текстиля или чего-то еще): <h2>A header</h2> <p>Foo</p> <h3>Another…


Jekyll автоматическое оглавление

Я построил веб-сайт на основе кода Jekyll для веб-сайта для Apache Buildr . Сайт Buildr автоматически создает оглавление для каждой страницы на основе заголовков в файлах формата textile . Например,…


html: лучший способ создать оглавление из элементов h2 и h3?

У меня есть файлы html с элементами h2 и h3. Каков наилучший способ и как создать оглавление в этом файле, используя эти элементы? Любой способ автоматизировать процесс или я должен согласиться на…


Сгенерируйте оглавление из HTML с Python

Я пытаюсь создать оглавление из блока HTML (не полный файл-только содержимое) на основе его тегов <h3> и <h4> . Мой план до сих пор состоял в том, чтобы: Извлеките список заголовков с…


PDFBox — как создать оглавление

Есть ли способ создать оглавление с помощью библиотеки Java PDFBox ? Оглавление должно быть кликабельным (перейти на правую страницу) Спасибо.


Верстка содержания — Xiper.net

Автор: Александр Головко Дата публикации: 03.12.2010

Задача

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

Основной момент — сделать максимально правильно с точки зрения семантики. Понятно, что точки — это оформление и в HTML им не место.

Таким образом, точки делаем фоном, само содержание — списком.

Немного погуглив нахожу первый вариант решения.

Решение 1. Флоатами

Soh Tanaka предлагает следующий вариант (код я немного модифицировал, так как в оригинале вместо нейтральных span использовались strong и em):


<ul>
	<li><span>Глава 1</span><span>2</span></li>
	<li><span>Глава 2</span><span>32</span></li>
	<li><span>Глава 3</span><span>122</span></li>
</ul>


ul {
	width: 500px;
	list-style: none;
}
li {
	padding: 10px 0;
	text-align: right;
	background: url(images/dotted.gif) 0 22px repeat-x;
}
li span {
	float: left;
	background: #fff;
	text-align: left;
}
.page {
	float: none;
	text-align: right;
}

dotted.gif здесь и далее вот такой рисунок (4×4 пикселя на прозрачном фоне):

Демо пример.

Проверено в:

  • IE 6-8
  • Firefox 3.5
  • Opera 9.5-10.6
  • Safari 4
  • Chrome 7

Недостатки:

  • если название главы растянется на несколько строк, то верстка ломается;
  • не совсем очевидное позиционирование фона (background-position у li задан, как «0 22px». Вот эти самые 22px зависят как от строки «padding: 10px 0;», так и от размера шрифта, т.е. подбирать нужно индивидуально для каждого случая;
  • использование обычного списка вместо списка определений (dl), который тут больше подходит по смыслу.

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

Решение 2. С абсолютным позиционированием

Основная трудность — в случае, когда название занимает несколько строк разместить номер страницы внизу:

Самый простой вариант — позиционируем номер страницы абсолютом:


<ul>
	<li><span>Глава 1</span><span>2</span></li>
	<li><span>Глава 2. Название длинное не влезло в одну строку и получился перенос на две</span><span>32</span></li>
	<li><span>Глава 3</span><span>122</span></li>
</ul>



li {
	width: 476px;
	background: url(images/dotted.gif) 0 bottom repeat-x;
	position: relative;
	padding-right: 24px; /* отступ равен ширине поля для номера */
	margin-bottom: 10px;
}
* html li {
	width: 500px; 
}
li span{
	background: #fff; /* перекрываем фон из точек под надписями */
}
.page {
	position: absolute;
	right: 0;
	bottom: 0;
}

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

Демо пример.

Проверено в:

  • IE 6-8
  • Firefox 3.5
  • Opera 9.5-10.6
  • Safari 4
  • Chrome 7

Достоинства по сравнению с предыдущим методом:

  • нормально работает при любой длине названия главы;
  • позиция фона не зависит от высоты строки — проще настраивать.

Недостатки:

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

Давай попробуем сделать все по-красоте и реализовать содержание, используя список определений.

Решение 3. Используем dl. Урезанный вариант.

Основаня трудность в том, что у списка определений нет общего контейнера для каждой пары dt-dd. Поэтому абсолютное позиционирование уже не подходит. Нужно искать другой вариант, как выровнять номер страницы по нижнему краю. И тут в очередной раз на помощь приходит строчный блок (display:inline-block)!


<dl>
	<dt><span>Глава 1</span></dt>
	<dd>2</dd>
	<dt><span>Глава 2. Название длинное не влезло в одну строку и получился перенос на две</span></dt>
	<dd>32</dd>
	<dt><span>Глава 3</span></dt>
	<dd>122</dd>
</dl>


dl {
	width: 500px;
}
dt {
	display: inline-block;
	//display: inline;
	zoom: 1;
	width: 470px;
	background: url(images/dotted.gif) 0 bottom repeat-x;
	margin-bottom: 10px;
}
dt span {
	background: #fff;
}
dd {
	display: inline-block;
	//display: inline;
	zoom: 1;
	width: 24px;
	margin-bottom: 10px;
}

Демо пример.

Проверено в:

  • IE 6-8
  • Firefox 3.5
  • Opera 9.5-10.6
  • Safari 4
  • Chrome 7

Достоинства по сравнению с предыдущим методом:

  • семантичность — используем список определений;
  • HTML почти предельно прост. Фактически у нас только один лишний (с точки зрения HTML) элемент — это span вокруг названия главы. Но если название главы — это, например, ссылка, которая ведет на саму главу, то вместо span ставим a, и лишних элементов нет вообще!

Недостатки:

  • используем хак для IE6-7 и невалидное свойство zoom, так как эти браузеры не понимают display:inline-block. Боремся с этим недостатком, вынося специфические для IE правила в отдельный CSS, подключенный условными комментариями.
  • такой вариант решения не позволяет полностью управлять отображением.

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

В общем, если дизайн не требует таких нюансов — данное решение можно считать идеальным. А если требует?

Решение 4. Используем dl. Окончательный вариант.

Применяем прием из статьи Долой отступы между строчными элементами (и блоками) + добавляем span для номера страниц для того, чтобы точки подстраивались под количество цифр номера:


<dl>
	<dt><span>Глава 1</span></dt>
	<dd><span>2</span></dd>
	<dt><span>Глава 2. Название длинное не влезло в одну строку и получился перенос на две</span></dt>
	<dd><span>32</span></dd>
	<dt><span>Глава 3</span></dt>
	<dd><span>122</span></dd>
</dl>


dl {
	width: 500px;
	font-size: 0;
	line-height: 0;
	letter-spacing: -1px;
}
dt {
	display: inline-block;
	//display: inline;
	zoom: 1;
	width: 476px;
	background: url(images/dotted.gif) 0 bottom repeat-x;
	margin-bottom: 10px;
	font-size: 14px;			/* восстанавливаем значения по умолчанию */
	line-height: normal;
	letter-spacing: normal;
}
dt span,
dd span {
	background: #fff;
}
dd{
	display: inline-block;
	//display: inline;
	zoom: 1;
	text-align: right;
	width: 24px;
	background: url(images/dotted.gif) 0 bottom repeat-x;
	margin-bottom: 10px;
	font-size: 14px;			/* восстанавливаем значения по умолчанию */
	line-height: normal;
	letter-spacing: normal;
}

Демо пример.

Проверено в:

  • IE 6-8
  • Firefox 3.5
  • Opera 9.5-10.6
  • Safari 4
  • Chrome 7

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

Убираем лишнюю картинку

Если дизайн позволяет, то можно отказаться от картинки в фоне. Вместо нее просто используем border-bottom, с соответствующими значениями (скорее всего dotted).

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

Модифицированный CSS для второго решения (с ul и абсолютным позиционированием):


li {
	width: 476px;
	border-bottom: 1px dotted #539127;
	position: relative;
	padding-right: 24px;
	margin-bottom: 10px;
}
* html li {
	width: 500px;
}
li span{
	background: #fff;
	position :relative;
	bottom: -1px;
}
.page{
	position: absolute;
	right: 0;
	bottom: -1px;
}

Для остальных вариантов изменить CSS по аналогии не составляет труда.

Выводы

Приведены различные решения, каждое из которых имеет право на жизнь. Как обычно, чем сложнее задача (в нашем случае, чем больше требований к содержанию), тем более громоздким получается решение. Варианты с использованием ul, хоть и менее семантичны, зато ощутимо проще (меньше DOM узлов и CSS не раздут) , поэтому рекомендуем использовать именно их. Тем не менее, какой из вариантов выбрать, определяем в каждом конкретном случае индивидуально.

seodon.ru | Учебник HTML — Содержание учебника по HTML

Опубликовано: 29.09.2010 Последняя правка: 08.12.2015

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

Введение

Что такое HTML?
Что такое HTML. Кто создал HTML и занимается его разрабокой сейчас. При помощи каких редакторов создаются HTML-страницы.
Теги и синтаксис HTML
Что такое открывающие и закрывающие теги. Каким образом можно указывать теги в HTML. Что значит «один тег содержит другой»? Иерархическая структура тегов: родительские и дочерние теги, теги-потомки и теги-предки. Что такое правильная вложенность тегов и какие бывают типы тегов.
Атрибуты HTML-тегов
Что такое атрибуты тегов? Как их правильно записывать и что такое значения атрибутов по умолчанию?

Общие и текст

Структура HTML-документа
Описана общая структура HTML-документа: объявление версии HTML (<!DOCTYPE>), корневой тег HTML-страницы (<HTML>), «шапка» (<HEAD>), заголовок (<TITLE>), тело документа (<BODY>).
Параграфы и заголовки
Описание тега <P>, который создает параграфы (абзацы) и тегов заголовков содержимого HTML-страницы (<h2>, <h3>, <h4>, <h5>, <H5>, <H6>).
Как изменить шрифт?
Теги и атрибуты для изменения стилей шрифтов, их гарнитуры (имени), и размеров. А также знакомство с атрибутом style и тегом <SPAN>.
Меняем цвет текста и фона
Объяснено каким образом можно указывать цвет в HTML и показан универсальный способ по изменению цвета текста и фона любых элементов HTML-страницы, который применяется вместо устаревших тегов и атрибутов HTML.
Выравнивание содержимого
Описан универсальный способ по выравниванию содержимого любых блочных тегов и ячеек HTML-таблиц.
Цитаты и обрыв строки
Теги для выделения в тексте длинных и небольших цитат, а также описание принудительного обрыва строки (тег <BR>).
Что такое спецсимволы HTML?
Объяснено, что такое спецсимволы HTML (мнемоники) и для чего они используются.
Горизонтальные линии
Урок о том, как нарисовать горизонтальные линии в HTML, как изменить их размер, цвет, выравнивание на странице и как убрать рамки вокруг линий.
Группирование элементов
Что такое группирование элементов и для чего оно используется. Объяснено действие тега <DIV> и, еще раз, <SPAN>.
Комментарии в HTML
Небольшой урок по комментариям в HTML — удобном способе помогающем ориентироваться в коде.

Ссылки

Cсылки и их разновидности
Создание ссылок в HTML. Что такое абсолютные и относительные адреса и ссылки, а также посещенные, непосещенные, активные и ссылки под курсором. Как открыть страницу в новом окне браузера.
Меняем цвета ссылок
Урок по изменению цвета HTML-ссылок.
Ссылки на электронную почту
Создание ссылок на электоронную почту (e-mail) и из особенности.
Якоря — создаем закладки
Что такое якоря (анкоры) или создание закладок и переход к ним по ссылкам.

Изображения

Изображения
Вставка изображений в HTML-страницу. Как изменить размеры изображений, выровнять их на странице и создать внешние поля (отступы) пустого пространства между изображением и окружающими элементами. А также «всплывающие» подсказки при наведении курсора мыши на картинку.
Изображения для фонов
Как сделать изображение фоном любого HTML-тега.
Изображения — ссылки
Создание ссылок в виде изображений. Как убрать рамку вокруг такого изображения.

Таблицы

Таблицы
Как создаются HTML-таблицы. Выравнивание самих таблиц на странице и содержимого их ячеек. Изменение ширины и высоты таблиц и их ячеек. Как изменить фоновый цвет таблицы или сделать ее фоном изображение.
Границы, рамки и отступы HTML-таблиц
Изменение размеров рамки таблицы и размеров пустых отступов от рамки до границ ячеек и от границ ячеек до их содержимого. А также, как убрать отступы по краям HTML-страницы.
Объединение ячеек таблицы
Горизонтальное и вертикальное объединение ячеек таблиц, нюансы подобного объединения.
Вложенные таблицы
Создание вложенных таблиц в HTML-странице. Рекомендации по их использованию.

Списки

Нумерованные и маркированные списки
Как создать упорядоченные (нумерованные) или неупорядоченные (маркированные) списки. Изменение типа нумерации и вида маркеров списков.

Метатеги

Метатеги и их типы
Что такое метатеги и их типы. Что такое кодировка и как ее изменить на HTML-странице. Метатеги описания страницы и ее ключевых слов. Как с помощью метатега сделать перенаправление на другую HTML-страницу.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *