Главная » 2015 » Октябрь » 16 » Заметки разработчика (основы работы с HTML) - 6

Заметки разработчика (основы работы с HTML) - 6

Сегодня специалисты студии НИКА расскажут о том, что такое ссылка! Ссылка обычно выглядит как подчёркнутый участок текста, щёлкая на который вы переходите на другую страницу, открываете изображение или начинаете скачивать файл. Если представить, что интернет это огромная сеть из множества узлов, то ссылки будут нитками, соединяющими все узлы этой сети. НТML так и переводится - язык разметки гипертекста. Ссылки создаются с помощью очень простого и короткого тега <a>. Например, вот так:

<a href = "htps://nika-ws.ru/">NIKA Web Studio</a>

Получится следующее:

NIKA Web Studio

Тег <a> без адреса бесполезен, так как он описывает ссылку, которая никуда не ведёт. Адрес ссылки задаётся с помощью атрибута href. Значением атрибута является URL, который обычно называют просто адрес. Адреса бывают разные: абсолютные, относительные, указывающие на страницу, на файл, изображение, содержащие якорь и так далее. А значит и ссылка может указывать на любой объект в интернете.

Поговорим поподробнее об адресах. Они могут быть абсолютными и относительными.

Абсолютные адреса содержат в себе протокол, имя сервера и путь. Например, в адресе https://nika-ws.ru/courses

https:// - это протокол;

nika-ws.ru - имя сервера, домен или хост

/courses - путь

Абсолютный адрес хорош тем, что однозначно указывает расположение документа. Браузер просто запрашивает по указанному протоколу с указанного сервера документ с указанным путём. Иногда абсолютные адреса записываются в укороченном виде, например вот так: /courses.

В этом случае, браузер подставляет протокол и сервер текущей страницы. Например, если на сайте https://nika-ws.ru есть ссылка с адресом /courses, то браузер для запроса преобразует её в такую: https://nika-ws.ru/courses.

В относительных адресах нет ни протокола, ни имени сервера, а путь не начинается со слэша /. 

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

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

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

Однако, если браузер умеет обрабатывать файлы этого типа, то содержимое файла откроется прямо в браузере. Чаще всего так происходит с изображениями. В последнее время браузеры научились открывать .PDF файлы и многие другие.

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

Ссылка с якорем содержит символ #, после которого идёт идентификатор. Идентификатор создаётся с помощью атрибута id, который может быть задан у любого тега. Можно задать адрес, состоящий из одного якоря, например:

<a href = "#glava1/">Глава 1</a>

При щелчке на такую ссылку браузер найдёт на странице элемент с атрибутом id со значением glava1 и прокрутит окно страницы к нему. То есть перезагрузки страницы не произойдёт. Якорь можно использовать и в абсолютных адресах, тогда после перехода на нужную страницу произойдёт прокрутка к заданной части этой страницы. Для того, чтобы добавить ссылке всплывающую подсказку, надо использовать атрибут title. Например:

<a title="Подсказка" href+"#"> Подсказка появится, когда курсор задержится над ссылкой некоторое время. Подсказки помогают разъяснить назначение непонятных ссылок, а также ссылок-изображений.

Ссылки можно делать не только с помощью текста, но и с помощью изображений. Для этого нужно обернуть тег <img> в тег <a>. Например:

 

<a href ="http://nika-ws.ru">

 <img src ="nika.png" alt ="Логотип">

</a>

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

 

 

 

 

Категория: Заметки разработчика | Просмотров: 986 | Добавил: nikozavr | Рейтинг: 5.0/1
Всего комментариев: 0
avatar

Категории раздела

Заметки разработчика [8]
Заметки на тему работы с HTML. Уроки от дизайнеров и программистов студии НИКА. От простого к сложному.
Регламент веб-дизайнера [4]
Специалисты веб студии НИКА расскажут о секретках и правилах веб-дизайна.
Регламент копирайтера [2]
Специалисты студии НИКА пишут тексты с уникальностью до 100% на любую тематику. Некоторыми правилами и приемами копирайтинга делимся с начинающими писать.
Секреты дизайнера сайтов [2]
Основы работы с CSS
Опыт создания сайтов [1]
Специалисты студии НИКА рассказывают о нюансах при разработке веб-сайтов

Вход на сайт

Поиск