Создание ссылок

Содержание

• Два способа создания ссылок
• Способ первый: текстовый редактор
• Способ второй: html
• Организация ссылок
• Адреса
• Параметры ссылок
• Оформление ссылок с помощью стилей: делаем ссылки красивыми
• Примеры на разные случаи
• Как поменять свойства стиля ссылки при наведении на нее курсора мыши
• Как сделать ссылку в виде блока с текстом

Два способа создания ссылок

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

Способ первый: текстовый редактор

Это самый простой способ, он интуитивно более понятен, но при этом не такой гибкий, как второй.

В панели управления откроем какую нибудь страницу МЕНЮ. Для примера возьмем главную страницу. После ее открытия для редактирования, убедитесь, что включен режим "редактор". Если установлен режим "html", переключите его.
Введите нужный текст, как показано на изображении ниже.

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

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

• В поле Адрес ссылки, нужно указать адрес страницы, на которую должна вести ссылка.
• Открыть в ... - выпадающий список позволяет выбрать параметр, указывающий, где будет открыта ссылка: в том же окне или в новом. Если не выбирать, то открытие будет происходить в том же окне.
• Поле Заголовок - это уже знакомый нам тайтл (title) - введенный в это поле текст будет отображаться на сайте в виде всплывающей подсказки, если навести на ссылку указатель мыши.

Наша ссылка почти готова, осталось только нажать на кнопку "Вставить".
И вот готовый результат, осталось только его сохранить.

Как сделать ссылкой изображение? Очень просто. Вставьте нужное изображение, выделите его мышкой, кликнув по нему. А дальше все точно так же, как и с текстовой ссылкой.

Делать ссылки мы научились, а как их убирать?
Установите курсор на ссылке и нажмите кнопку ее удаления.

Способ второй: html

Когда дело касается сайтостроения, как ни крути, а без базового знания html далеко не уехать, при этом совсем небольшое изучение его основ, позволяет достичь приличных результатов. А так как ссылки являются крайне важной частью любого сайта, то небольшое углубленное их изучение будет особенно полезным.

Организация ссылок

В своей основе html состоит из тэгов. Если мы хотим добавить на страницу сайта изображение, мы добавляем для этого тэг - <img>, делается это так:

В этом примере:

• через параметр src указывается, по какому адресу находится наше изображение;

Браузер (Mozilla Firefox, Chrome, Internet Explorer и д.р.), обрабатывая страницу сайта и встречая данный тэг, выведет наше изображение.

Для вывода ссылки существует тэг <a>.
Записывается он немного иначе. Вот так выглядит обычная текстовая ссылка в html коде:

В этом примере:

• тэг <a> указывает браузеру, что здесь начинается ссылка;
• через параметр href указывается, на какой адрес эта ссылка будет вести
  (в данном случае на страницу /business/work.htm) - все это адресная часть ссылки;
• затем идет указатель ссылки "Заполните анкету";
• в конце ссылки необходимо поставить закрывающий тэг </a>, если этого не сделать, то все, что расположено ниже будет считаться ссылкой.

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

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

В этом примере:

• открываем ссылку тэгом <a>;
• делаем указатель ссылки в виде тэга изображения <img src="/files/picture.jpg" />
  (адрес самого изображения указывается через параметр src);
• закрываем ссылку закрывающим тэгом </a>.

Адреса

Адреса бывают абсолютные и относительные. Здесь я не буду подробно расписывать каждый вид, при желании про это можно почитать в интернете, расскажу лишь про два случая, которые рекомендую использовать.

1. Наверное, самые простые для понимания - это абсолютные адреса, они содержат в себе полный адрес до объекта.

Начинаются абсолютные адреса с указания протокола, обычно http:// (бывает https://), как минимум содержат доменное имя сайта (getavon.ru) и могут содержать адрес на конкретную страницу (или файл) на этом сайте (register.php).

2. Второе, о чем стоит упомянуть - разновидность относительных адресов, которые являются относительными к корню сайта. Такие адреса начинаются со слэша /, т.е. как будто у абсолютной ссылки убрали протокол http:// и доменное имя сайта.

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

Параметры ссылок

Для расширения функционала, стоит обратить внимание на некоторые необязательные параметры ссылок:

target - задает имя окна или фрейма, куда браузер загрузит документ. Если вы хотите, чтобы при клике по ссылке страница открылась в новом окне, присвойте ему значение _blank следующим образом:

title - добавляет всплывающую подсказку к тексту ссылки:

А вот так эти параметры можно комбинировать:

Обращаем ваше внимание, что это далеко не полное описание тэга. Для более детального изучения данного вопроса обратитесь к более полной документации.

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

Тут нужно сразу объяснить, что для стилизации используются каскадные таблицы стилей (css). Это очень гибкий инструмент, с помощью которого можно изменять внешний вид ссылок и других элементов html в очень широких пределах. Можно поменять как одну ссылку, так и сразу несколько. Для этих случаев применяются разные подходы. Для начала посмотрим как это делается для одной, отдельно взятой, ссылки.

Например мы хотим поменять у ссылки цвет. Для этого нам нужно поменять свойство стиля color:

• Где #ec008b - цвет в шестнадцатиричной системе, выбрать его можно в любом графическом редакторе или на специализированном сайте

Например мы хотим сделать ссылку подчеркнутой. Для этого нам нужно поменять свойство стиля text-decoration:

• Где underline - это значение свойства стиля, делающего html элемент подчеркнутым снизу. Есть и другие значения text-decoration, которые могут сделать ссылку зачеркнутой (line-through), с верхним надчеркиванием (overline), а также отключить подчеркивание (none).

Также стили можно комбинировать:

При комбинировании перечилять свойства стилей нужно через точку с запятой (;)

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

Только что мы создали класс под названием mylink, в котором описали наши свойства стиля. Название класса может выбираться произвольно, главное, чтобы оно не пересекалось с уже использующимися на сайте классами. Символы a. перед названием класса сообщает браузеру, что это класс для элемента (тэга) <a>.

Теперь класс можно вставлять в любую ссылку (и не только).

Между тэгами <style> и </style> можно прописывать любое количество стилей (объединенных в классы) для ссылок и других элементов страницы.

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

Код в html:

Готовый результат:

Примеры на разные случаи

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

Как поменять свойства стиля ссылки при наведении на нее курсора мыши

Сделать это можно только с помощью классов (т.е. первым методом, через указание style="" сделать не получится). Для этого нужно использовать псевдокласс hover (он указывается через двоеточие).

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

Но можно изменить и его, тогда нужно сделать так:

Теперь при наведении курсора поменяются оба свойства.

А вот пример, где при наведении курсора мы дополнительно поменяем фон ссылки на оранжевый:

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

Как сделать ссылку в виде блока с текстом

В этом примере:

• display: block - превращает ссылку в блочный элемент;
• height: 100px - задает высоту блока в пикселях, при выводе блока к этому значению также прибавляются внешний и внутренний отсупы сверху и снизу. Высоту можно не указывать, тогда она будет устанавливаться автоматически в зависимости от содержимого блока);
• margin: 10px 0 10px 0 - задает внешние отступы блока в пикселях, первая цифра - отсуп сверху, вторая - справа, третья снизу, четвертая - слева, т.е. по часовой стрелке, начиная с нуля часов;
• padding: 15px 20px 15px 20px - задает внутренние отступы блока в пикселях;
• background: #991199 - задает цвет фона блока;
• color: #ffffff - задает цвет текста внутри блока;
• font-size: 24px - размер шрифта;
• text-align: center - выравнивание текста по центру внутри блока по ширине, можно присвоить также значение left (выравнивание по левому краю), right (по правому), justify (по обоим краям);

В этом примере:

• border: 1px solid #777777; - задает рамку блока, где 1px - толщина в пикселях, solid - сплошной тип рамки (еще бывает dashed - пунктирный, dotted - точечный), #777777 - цвет рамки;
• также, при наведени курсора мыши, наш блок поменяет цвет фона и текста.

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