Как создать гиперссылку с помощью KompoZer

Возможность создать ссылку в документе, которая приведет вас к другому документу, возможно, в сети на полпути по всему миру, возможно, является одной из самых важных причин, по которой была изобретена Всемирная паутина. Эти ссылки, называемые гиперссылками, являются «H» в HTML (HyperText Markup Language). Без гиперссылок веб-интерфейс не был бы очень полезен. Не было бы ни поисковых систем, ни социальных сетей, ни баннерных объявлений (хорошо, большинство из нас может стоять, чтобы посмотреть, как они идут).

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

H3 заголовки для каждой категории. На следующей странице мы добавим некоторые ссылки. 01 из 05

Создание гиперссылки с помощью KompoZer

Доступ к инструментам гиперссылки KompoZer осуществляется нажатием кнопки «Ссылка» на панели инструментов. Чтобы создать гиперссылку:

1. Поместите курсор на страницу, где вы хотите, чтобы ваша гиперссылка отображалась.
2. Нажмите кнопку «Ссылка» на панели инструментов. Откроется диалоговое окно Свойства ссылки.
3. Первое поле, которое необходимо заполнить, - это текстовое поле «Ссылка». Введите текст, который вы хотите отобразить на странице для своей гиперссылки.
4. Второе поле, которое необходимо заполнить, - это поле «Расположение ссылок». Введите URL-адрес страницы, на которую ваша гиперссылка примет пользователя при нажатии. Рекомендуется скопировать и вставить URL-адрес из адресной строки вашего браузера. Вы гораздо менее склонны совершать ошибку таким образом, и знаете, по крайней мере, во время создания вашей ссылки, что страница жива и эта ссылка не нарушена.
5. Нажмите «ОК», и диалоговое окно «Свойства ссылки» закроется. Теперь ваша ссылка появится на вашей странице.

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

02 из 05

Создание привязки с помощью KompoZer

Существует другой вид гиперссылки, который приводит вас к другой части той же веб-страницы при нажатии. Эта гиперссылка называется привязной ссылкой, а область страницы, на которую вы попадаете, когда вы нажимаете эту ссылку, называется якорем. Если вы когда-либо использовали ссылку «назад к началу» внизу веб-страницы, вы щелкаете по ссылке на якорь.

KompoZer позволяет создавать привязки, на которые вы можете ссылаться, с помощью инструмента Anchor на панели инструментов.

1. Нажмите на область своей страницы, где вы хотите привязать. То есть, когда вы хотите, чтобы просмотрщик страниц выполнялся при нажатии на ссылку привязки. В этом примере я нажал кнопку «F» в заголовке «Любимая музыка».
2. Нажмите кнопку «Якорь» на панели инструментов. Откроется диалоговое окно «Именованные якорные свойства».
3. Каждому якорю на странице требуется уникальное имя. Для этого якоря я использовал название «музыка».
4. Нажмите «ОК», и вы должны увидеть, и символ якоря появится в месте, где вы хотите привязать. Этот символ не будет отображаться на вашей веб-странице, так как KompoZer показывает вам, где ваши якоря.
5. Повторите процедуру для любых других областей страницы, на которую вы хотите, чтобы пользователи могли перейти. Если на странице есть много текста, разделенных заголовками или другим логическим разделителем, привязки - это простой способ навигации по странице.

Затем мы создадим ссылки, которые читают читателя на созданных вами якорях.

03 из 05

Создание навигации по страницам с помощью KompoZer

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

04 из 05

Создание гиперссылок на якоря с помощью KompoZer

Теперь, когда у нас есть наши привязки и текст, который мы будем использовать для навигации по страницам, мы можем превратить эти простые текстовые фрагменты в ссылки. Мы снова будем использовать кнопку «Ссылка», но на этот раз она будет работать немного по-другому.

1. Выберите текст, который вы хотите превратить в ссылку. В этом примере я выбрал текст «Любимая музыка», который находится в первой ячейке таблицы вверху страницы.
2. Нажмите кнопку «Ссылка» на панели инструментов. Откроется диалоговое окно Свойства ссылки.
3. В этом случае мы выделили текст, прежде чем нажимаем кнопку «Ссылка», поэтому раздел «Текст ссылки» окна уже заполнен и не может быть отредактирован. Нажмите стрелку вниз в разделе Расположение ссылок. Вы увидите список якорей, созданных вами на предыдущих шагах. В этом примере я выбираю # музыкальный якорь.
4. Нажмите «ОК». Текст «Любимая музыка» на панели навигации превращается в ссылку, которая заставит зрителя перейти к этому разделу на странице при нажатии.

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

05 из 05

Создание гиперссылки с изображения с помощью KompoZer

Знаете ли вы, что вы можете создать ссылку из изображений, а также текст? KompoZer позволяет сделать это, используя только несколько кликов. Здесь я вставил маленькое изображение значка, показывающее стрелку вверх и текст «TOP» в нижней части страницы. Я собираюсь использовать это изображение в качестве ссылки, чтобы вернуться в начало страницы.

1. Щелкните правой кнопкой мыши изображение и выберите «Свойства изображения и ссылки» на ярлыке контекста. Откроется диалоговое окно «Свойства изображения».
2. На вкладке «Местоположение» вы увидите имя файла и изображение эскиза, которое уже заполнено. Вы должны ввести текст в текстовое поле «Альтернативное». Это то, что появляется, когда вы перемещаете мышь над изображением, а также то, что читается программой чтения с экрана, когда человек с ослабленным зрением читает веб-страницу.
3. Перейдите на вкладку «Связь». Здесь вы можете выбрать якорь из меню, как и мы с привязными ссылками. Фактически, это изображение используется как привязка. Я выбрал якорь #Links_Of_Interest, который вернет нас к вершине.
4. Нажмите «ОК». Изображение будет отображаться в верхней части страницы при нажатии.