Как сделать гиперссылку в Ворде

Как сделать гиперссылку в Ворде
Как сделать гиперссылку в Ворде

Обновлено: 14 июня 2015

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

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

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

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


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

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

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

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

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

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

<a name="nazvanie-ykory"></a>

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

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

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

<h3 id="ggl">Продвижение сайтов в Gogetlinks и заработок на ссылках</h3>

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

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

<h3 id="ggl-2">Настройка кампании в ГогетЛинкс для продвижения сайта</h3>

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

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

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

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

<div class="ogl"> <ol> <li><a href="https://ktonanovenkogo.ru/zarabotok_na_saite/birzha-ssylok-gogetlinks-ggl-vechnye-ssylki-prodvizheniya-sajta-zarabotok-na-gogetlinks.html#ggl">Что такое ГоГетЛинкс и регистрация в нем</a></li> <li><a href="https://ktonanovenkogo.ru/zarabotok_na_saite/birzha-ssylok-gogetlinks-ggl-vechnye-ssylki-prodvizheniya-sajta-zarabotok-na-gogetlinks.html#ggl-2">Создание кампании в ГГЛ для продвижения сайта</a></li> <li><a href="https://ktonanovenkogo.ru/zarabotok_na_saite/birzha-ssylok-gogetlinks-ggl-vechnye-ssylki-prodvizheniya-sajta-zarabotok-na-gogetlinks.html#ggl-4">Поиск оптимальных площадок</a></li> <li><a href="https://ktonanovenkogo.ru/zarabotok_na_saite/birzha-ssylok-gogetlinks-ggl-vechnye-ssylki-prodvizheniya-sajta-zarabotok-na-gogetlinks.html#ggl-6">Как начать зарабатывать в Gogetlinks</a></li> </ol></div>

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

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

<div class="ogl"> <ol> <li><a href="#ggl">Что такое ГоГетЛинкс и регистрация в нем</a></li> <li><a href="#ggl-2">Создание кампании в ГГЛ для продвижения сайта</a></li> <li><a href="#ggl-4">Поиск оптимальных площадок</a></li> <li><a href="#ggl-6">Как начать зарабатывать в Gogetlinks</a></li> </ol></div>

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

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

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


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

/wp-content/themes/название темы/style.css

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

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

.ogl {float:right;border:1px dotted black;padding:5px 5px 0 5px;margin:5px;}

Разберем по порядку 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, а уже потом перенести окончательный вариант в отдельный стилевой файлик. Выглядеть это будет примерно так:

<div style="float:right;border:1px dotted black;padding:5px 5px 0 5px;margin:5px;"> <ol> <li>-"-</li> <li>-"-</li> <li>-"-</li> <li>-"-</li> </ol></div>

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

P.S. Недавно добавил еще и слово «Оглавление», чтобы было понятнее, что это такое. Понятное дело, что для шести сотен статей делать это вручную было бы весьма утомительно, поэтому использовал богатый инструментарий CSS, а именно псевдоэлемент before. В файле СSS была добавлена соответствующая строчка:

.ogl:before {content: " Оглавление:";color:#ccc;line-height:2em;}

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Твитнуть

Поделиться

Плюсануть

Поделиться

Отправить

Класснуть

Линкануть

Запинить

Подборки по теме:

Как сделать гиперссылку в Ворде 42
Как сделать оглавление (содержание, меню) для статьи на сайте
Как сделать гиперссылку в Ворде 46
Как поставить общее количество страниц на первой странице
Как сделать гиперссылку в Ворде 79
Шаблон конверта в Word - Отличный секретарь Отличный
Как сделать гиперссылку в Ворде 83
Как сделать перекрестную ссылку в Ворде
Как сделать гиперссылку в Ворде 48
Word 2007: Создание гиперссылок в документе
Как сделать гиперссылку в Ворде 34
Несколько сносок на один источник, как?
Как сделать гиперссылку в Ворде 12
Перевод из word в pdf WORD 2003, WORD 2007, WORD 2010
Как сделать гиперссылку в Ворде 97
Как сделать гиперссылку в Microsoft Word
Как сделать гиперссылку в Ворде 83
Мир MS Excel - Главная страница
Как сделать гиперссылку в Ворде 21
Болезнь лунатизм у взрослых и детей. Причины. Симптомы. Безопасность
Как сделать гиперссылку в Ворде 71
Как сделать гиперссылку в Ворде 49
Как сделать гиперссылку в Ворде 52
Как сделать гиперссылку в Ворде 62
Как сделать гиперссылку в Ворде 23
Как сделать гиперссылку в Ворде 15
Как сделать гиперссылку в Ворде 28
Как сделать гиперссылку в Ворде 63