slogin.info

ihc 468x60 1 1
< >
Звезда активнаЗвезда активнаЗвезда активнаЗвезда активнаЗвезда активна5 / 5
 
Автор: Администратор
Просмотров: 2263
В этом уроке речь пойдет про ссылки, давайте более детально и с примерами разберем их.

Сам по себе тег ссылки выглядит так:

<A></A>

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

Вот действующий рабочий пример ссылки на Яндекс:

<a href="http://www.yandex.ru">Нажми на меня для перехода на Яндекс</a>

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

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

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

<HTML>
    <HEAD>
        <TITLE> Как использовать якоря в ссылках </TITLE>
    </HEAD>
    <BODY style="width:900px; margin:0 auto;">
        <p id="top"></p>
        <a href="#bot">Ссылка вниз</a>
        <a href="#mid">Ссылка в середину</a>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <h2 id="mid">Один из якорей</h2>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
        <p id="bot"></p>
        <a href="#mid">Ссылка в середину</a>
        <a  href="#top">Ссылка вверх</a>
    </BODY>
</HTML>

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

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

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

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

  • _blank - Загружает страницу в новое окно браузера.
  • _self - Загружает страницу в текущее окно.
  • _parent - Загружает страницу во фрейм-родитель, если фреймов нет, то это значение работает как _self.
  • top - Отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self.

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

 

<HTML>
    <HEAD>
        <TITLE> Разные атрибуты ссылок </TITLE>
    </HEAD>
    <BODY>
        <a href="http://web.cofp.ru/" title="А вот и описание из title">Эта ссылка имеет атрибут title</a><br>
        <a href="http://web.cofp.ru/" target="_blank">Эта ссылка откроется в новой вкладке</a>
    </BODY>
</HTML>

 

А вот что мы увидим


Тестовые задания, для использования знаний на практике

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

Уровень первый

Перед вами текст, который вы должны перепечатать и отформатировать при помощи различных тегов его так, чтобы он выглядел аналогично. Подсказка! У атрибута style, есть значение text-decoration, если установить его в none, то подчеркивание ссылки исчезнет.

Исходный текст приводить не буду, так как его можно самим легко набрать руками

Как должен выглядеть текст:

Скачать рабочий код задания
Рабочий код задания(для проверки)

 

<HTML>
    <HEAD>
        <TITLE> Ссылки. Тестовое задание. </TITLE>
    </HEAD>
    <BODY>
        <b><a href="http://vk.com/" title="Вконтакте">Перейти на сайт Вконтакте</a></b>
        <h3>Популярные поисковики:</h3>
        <ol type="a">
            <li><a href="https://www.google.ru/" target="_blank">Google</a></li>
            <li><a href="https://www.yandex.ru/" target="_blank">Yandex</a></li>
            <li><a href="http://www.rambler.ru/" target="_blank">Rambler</a></li>
        </ol>
        <a href="http://vk.com/" style="text-decoration:none;" title="Ссылка на вконтакте">Ссылка на Вконтакте без подечеркивания</a><br>
        <a href="http://vk.com/" style="color:#00FF00;" title="Ссылка на вконтакте">Ссылка на Вконтакте зеленая</a>
    </BODY>
</HTML>

 

< >

Поиск по сайту

Топ 10 активных пользователей

  • Имя пользователя Баллы
  • gawk
    44.20
  • hr@proovelab
    15.00
  • intuit89
    6.00
  • ZOMRO
    4.80
  • Varvarka
    4.00
  • Akyla58
    3.00
  • AnnaOl
    3.00
  • dimasik_3557
    3.00
  • ErcardSa
    3.00
  • Galinamuh
    3.00
 

Рекламные ссылки

IHC

Пожертвования

icon donate

Yandex.Money: 410011571748395

Webmoney:

R362907776401 (Рубли)

Z410919458006 (Доллары)

ihc 468x60 1 1

Последнее с форума

ZOMRO аватар
БЮДЖЕТНЫЕ VDS/VPS У нас Вы можете найти лучшие предложения бюджетных вариантов VDS/VPS: zomro.com/c...
Перейти в тему
ataman_web аватар
hydraruzxpnew4af.onion.loan/ гидра маркет в обход блокировок , пупить можно все...
Перейти в тему
ZOMRO аватар
Лучшее предложение! Тариф VDS/VPS «ADVANCED» Процессор: 3 ядра ОЗУ: 4096 Mb SSD NVMe: 48Gb ОС: Linu...
Перейти в тему

Последние статьи

Javascript функции

Функции - одна из основных концепций языка JavaScript. При этом есть кардинальное отличие от многих языков программирования, в JS каждая функция сама по себе является объектом, а соответственно и манипулировать с ней можно разными способами:

Ссылка на телефон

В этой статье мы рассмотрим простой и обычный способ создания ссылки на телефон.

CPA сети 30.01.2017
CPA сети

Сегодня мы подробно рассмотрим тему зарабатка на своих проектах (т.е. это не обязательно сайты) при помощи CPA сетей.