-Поиск по дневнику

Поиск сообщений в limada

 -Подписка по e-mail

 

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 22.05.2011
Записей: 17862
Комментариев: 28663
Написано: 50647


все для дневника

Вторник, 07 Июня 2011 г. 19:51 + в цитатник
Цитата сообщения Arnusha HTML & CSS - серия 5

Серия 1

Серия 2

Серия 3

Серия 4



Гиперссылки

Ссылка на http://...

Большинство ссылок в Интернете ведут на какую нибудь веб-страницу с адресом наподобие http://site.ru или http://site.ru/index.html.

Расширение
.html указывает на то, что мы имеем дело с файлом формата HTLM. Однако
cсылка может привести нас к документу практически любого формата: .jpg,
.doc, .pdf, .mp3, .zip... перечислять все было бы долго и бессмысленно.
Иногда она может оказаться прямой ссылкой на скачивание файла (возможно,
не вполне желательного).

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

Для этого используем парный тег <a...>...</a>. Напишем, например, следующее:

<a href="http://yandex.ru" title="Яндекс" target="_blank">Найдётся всё!</a>

Вот наша ссылка:

Найдётся всё!

Теперь - что здесь к чему.

http://yandex.ru
- тот адрес в сети, куда мы хотим отправить наших посетителей. Без
подобного указания наш тег вообще не будет работать. То, что идёт
дальше, писать не обязательно, но иногда полезно.

title="Яндекс" - всплывающая подсказка. Если здесь ничего не писать, то такой подсказки не будет.

target="_blank"
- указание браузеру открыть ссылку в отдельном окне (вкладке). По
умолчанию ссылка открывается в том же окошке, в котором находился
посетитель, просматривая Вашу страницу. Впоследствии, если он захочет
продолжить просмотр, ему придётся возвращаться назад.

Как удобнее открывать ссылки - дело вкуса. Казалось бы, новые окна (вкладки) хороши. Но часто их становится слишком много.

Между тегами <a...> и </a>
мы пишем то, что будет видеть посетитель страницы. Кстати, это не
обязательно должен быть текст - можно использовать изображение. Для
того, чтобы использовать картинку в качестве ссылки, напишем, например,

<a href="http://yandex.ru" title="Яндекс" target="_blank"><img src="http://www.promolive.ru/images/content/logo-yandex.gif"></a>

Получим вот такой результат:

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

Стили
гиперссылок на Яндексе заданы довольно жёстко. Цвет (а также вид, размер
шрифта и т.д.) самой гиперссылки ещё можно поменять. Делается это путём
добавления в тег <a...> аттрибута style (о нём шла речь в предыдущих сериях). Для примера поменяем только цвет, сделав его зелёным. Напишем:

<a href="http://yandex.ru" title="Яндекс" target="_blank" style="color:green">Найдётся всё!</a>

Получим:

Найдётся всё!

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

Ссылка на любое место на Вашей страничке*

Для
того, чтобы сослаться на определённое место на Вашей страничке, сначала
на этом месте надо установить "якорь". Например, мы пишем статью из
нескольких частей. Заголовок части 1 поместим внутри контейнера <a...>...</a>:

<a name="part 1">Часть 1. Вместо предисловия</a>

Если в имени якоря не используется пробел, то можно обойтись без кавычек: name=part1.

Далее пойдёт текст этой самой первой части. Добавим сюда часто используемый для тестирования текст "Lorem ipsum"** (чтобы ничего не придумывать). Вот как будет выглядеть наша первая часть:

Часть 1. Вместо предисловия

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.

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

<a href="#part 1">читать часть 1</a>

Получаем
гиперссылку, ничем принципиально не отличающуюся от "обычной" (к ней
применимо всё, что говорилось выше, в том числе - про возможность
добавить всплывающую подсказку, стиль и заставить открываться в новом
окне):

читать часть 1

Кликнув на этой ссылке, перейдём к началу части 1.



*На Я.ру работает в пределах одной записи.

**Lorem ipsum
- название классического текста-«рыбы». «Рыба» - слово из жаргона
дизайнеров, обозначает условный, зачастую бессмысленный текст,
вставляемый в макет страницы. Lorem ipsum представляет
собой искажённый отрывок из философского трактата Цицерона «О пределах
добра и зла», написанного в 45 году до нашей эры на латинском языке.
Впервые этот текст был применен для набора шрифтовых образцов
неизвестным печатником в XVI веке (информация из Википедии).

Другие виды ссылок

Вероятно, Вы встречали на некоторых сайтах ссылки вида "пишите мне". Подобная ссылка устроена следующим образом:

<a href="mailto:address@yandex.ru">пишите мне</a>

Вот она: пишите мне

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

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

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



Arnusha

Рубрики:  Все для дневников и блогов

 

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

Проверка орфографии: (найти ошибки)

Прикрепить картинку:

 Переводить URL в ссылку
 Подписаться на комментарии
 Подписать картинку