— элемент ссылки
Этот атрибут сообщает о том, что эта ссылка должна быть использована для скачивания файла, и, когда пользователь нажимает на ссылку, ему будет предложено сохранить файл как локальный. Если у этого атрибута есть значение, оно будет использовано как заполненное название файла в Окне сохранения, которое открывается, когда пользователь нажимает на ссылку (пользователь может поменять название перед сохранением файла). Ограничений на позволенные значения нет (хотя оно будет конвертировано в нижние подчёркивания, предотвращая специфичные пути), но стоит обратить внимание, что у большинства файловых систем есть ограничения на то, какие знаки препинания поддерживаются файловой системой, и браузеры регулируют названия согласно ограничениям.
Примечание:
- Атрибут может быть использован вместе с blob: URLs и data: URLs , чтобы пользователи могли проще скачать контент, который сгенерирован с помощью JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования).
- Если представлен HTTP-заголовок Content-Disposition:, и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом.
- Если этот атрибут установлен и Content-Disposition: установлен на inline , Firefox отдаёт преимущество Content-Disposition , но в тоже время Chrome отдаёт преимущество атрибуту download .
- Этот атрибут соблюдается только на ресурсах с тем же доменом.
Единственный обязательный атрибут для определения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут href указывает ссылку: либо URL, либо якорь. Якорь — это название после символа # , который указывает на элемент (ID) на текущей странице. URL не ограничены только ссылками на HTTP, они могут использовать любой протокол, поддерживающийся браузером. Например, file , ftp и mailto работают в большинстве браузеров.
Этот атрибут сообщает язык документа по ссылке. Это чисто контрольная информация. Разрешённые значения определены в BCP47 для HTML5 и RFC1766 для HTML4. Используйте этот атрибут, только если задан href .
Этот атрибут уведомляет указанные в нём URL, что пользователь перешёл по ссылке.
Этот атрибут сообщает, какую информацию передавать ресурсу по ссылке:
- «no-referrer» не отправляет заголовок Referer .
- «no-referrer-when-downgrade» не отправляет заголовок Referer ресурсу без TLS (HTTPS). Это стандартное поведение браузера, если не указана иная политика.
- «origin» отправляет такую информацию о текущей странице, как адрес, протокол, хост и порт.
- «origin-when-cross-origin» отправляет другим ресурсам только протокол, хост и порт, а внутри ресурса также отправляет путь.
- «unsafe-url» отправляет только ресурс и адрес (но не пароли или никнеймы). Это значение небезопасно, так как могут утечь ресурс и адрес с TLS-защищённых ресурсов на небезопасные.
Для ссылок, которые содержат атрибут href , этот атрибут устанавливает отношения между ссылками. Значением является список значений (en-US) , разделённый пробелами. Значения и их семантика будут зарегистрированы другими сайтами, которые могут иметь произвольное значение к документу автора. Значением по умолчанию является void , если не задано иное. Используйте этот тег, только если задан атрибут href .
Этот атрибут определяет, где показать содержимое по ссылке. В HTML4, это название и ключевое слово фрейма. В HTML5, это название или ключевое слово в браузере (например, вкладка, окно или iframe). У следующих ключевых слов специальные значения:
- _self загружает документ в текущем фрейме в HTML4 (или текущей вкладке в HTML5) как текущий. Это значение по умолчанию, если не указано иное значение.
- _blank загружает документ в новой окне в HTML4 или вкладке в HTML5.
- _parent загружает документ в родительском фрейме в HTML4 или в родительской вкладке в HTML5. Если нет родителя, параметр будет вести себя как _self : Load the response into the HTML4 frameset parent of the current frame or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as _self .
- _top в HTML4 загружает документ в новом окне, игнорируя другие фреймы. В HTML5 загружает в окне высшего уровня. Если родителя нет, опция ведёт себя как _self .Используйте этот атрибут только если указан href .
Примечание: Используя target , вы должны добавлять rel=»noopener noreferrer» , чтобы избежать эксплуатацию API window.opener .
Этот атрибут определяет MIME-тип для документа по ссылке. Обычно это используется как контрольная информация, но в будущем браузеры могут добавлять маленькую иконку для медиафайлов. Например, браузер может добавить маленькую иконку мегафона, если тип файла установлен как audio/wav .Используйте этот атрибут только если указан href .
Устаревшие
Этот атрибут определяет кодировку документа по ссылке. Значением является разделённый пробелами или запятыми список кодировок. Значением по умолчанию является ISO-8859-1.
Предупреждение: Этот атрибут является устарелым в HTML5 и не должен использоваться. Чтобы достичь такого же эффекта, используйте HTTP-заголовок Content-Type на ссылающемся ресурсе.
Для использования с формой объекта, этот атрибут использует разделённый запятыми список чисел для определения координат объекта на странице.
Этот атрибут обязателен в определении якоря на странице. Значение имени схоже со значением id и должен быть уникальным идентификатором и состоять из букв и цифр. Согласно спецификации HTML 4.01, и id , и name могут быть использованы с элементом , пока у них идентичные значения.
Этот атрибут определяет обратную ссылку, обратные отношения атрибута rel . Это полезно, чтобы отобразить, откуда пришёл объект как автор или документ.
Этот атрибут используется, чтобы определить выбранный регион для ссылок на источник гипертекста, которые соединены с фигурой для создания изображения-карты. Значения для атрибута — circle , default , polygon и rect . Формат координат зависит от выбранной формы. Для circle — x , y , r , где x и y — пиксельные координаты центра круга и r — радиус в пикселях. Для rect — x , y , w , h , где x и y — координаты верхнего левого угла прямоугольника, а w и h — ширина и высота соответственно. Значениями polygon для координатор формы являются x1 , y1 , x2 , y2 . Каждая пара x , y определяет точку в полигоне, с последующей точкой становится прямой линией, и последняя точка объединяется с первой. Значение default для форм требует, чтобы полностью закрытая территория, например, изображение, было использовано.
Примечание: Желательно использовать атрибут usemap для элемента и связанного элемента , чтобы определить горячие точки вместо атрибутов формы.
Нестандартные
datafld Non-standard
Этот атрибут определяет название столбца из объекта исходных данных, который принимает связанные данные.
**Предупреждение:**Этот атрибут нестандартный и не должен использоваться. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как XMLHttpRequest, чтобы динамично заполнять страницу.
| Поддержка | Gecko | Presto | WebKit | Trident |
| Не реализована | Не реализована | Не реализована | IE4, IE5, IE6, IE7 (Убрана в IE8) | |
| Нормативный документ | Microsoft’s Data Binding: dataFld Property (MSDN) | |||
datasrc Non-standard
Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.
**Предупреждение:**Этот атрибут нестандартный и не должен использоваться. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как XMLHttpRequest, чтобы динамично заполнять страницу.
| Поддержка | Gecko | Presto | WebKit | Trident |
| Не реализована | Не реализована | Не реализована | IE4, IE5, IE6, IE7 (Убрана в IE8) | |
| Нормативный документ | Microsoft’s Data Binding: dataSrc Property (MSDN) | |||
methods Non-standard
Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута title ) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. Значения methods (MSDN).
Этот атрибут, предложенный Microsoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. Значения urn (MSDN).
Создание ссылок в HTML
Гиперссылка — основной элемент гипертекста, отличительная черта HTML-документов, связывающая веб-страницы и другие файлы между собой. У многих людей слово «Ссылка» небезосновательно ассоциируется со словом «Интернет».
Простые ссылки
Чтобы создать ссылку, нужно указать, какой элемент веб-страницы ею будет являться и по какому адресу она будет вести.
В языке HTML для создания ссылок используется тег и его атрибуты.
Пойдём от простого к сложному и для начала научимся добавлять в HTML-документ элементарные ссылки. Нам понадобятся следующие элементы языка:
— тег создания ссылки. Внутри него содержится отображающийся на экране текст, на который пользователь должен будет нажать, чтобы перейти по заданному адресу.
href — атрибут тега , значением которого и будет адрес ссылки. Ссылаетесь ли вы на сайт, веб-страницу или файл — не важно, отличаться будет только значение этого атрибута.
Теперь рассмотрим строку HTML-кода:
Вся строка создаёт ссылку, ведущую на главную страницу нашего сайта и называющуюся «Ссылка». В действии код будет выглядеть так:
Теперь рассмотрим каждый элемент строки.
— это тег, отвечающий за создание ссылки.
href=”http://seostop.ru” — атрибут и значение, благодаря которым обозреватель понимает, куда следует перейти.
Абсолютные и относительные ссылки
Абсолютная ссылка — это ссылка, адрес которой указывается полностью, включая протокол и URL домена. Ссылка из примера выше как раз была абсолютной.
Относительная ссылка — это ссылка, адрес в которой указывается относительно текущей веб-страницы.
Суть и назначение относительных ссылок, а также их отличие от абсолютных, можно объяснить простым примером. Вы спрашиваете на улице: «Где находится библиотека» и вам отвечают: «За углом слева». Это относительная ссылка. А если вам отвечают: «Россия, Москва, ул. Ленина, 5» — это уже ссылка абсолютная. Она не так коротка, как относительная, но зато очень точна. Если вы перейдёте на другую улицу, относительная ссылка «За углом слева» потеряет актуальность. Абсолютный же адрес останется актуальным. В Сети — то же самое.
Относительные ссылки можно использовать внутри сайта. Например, у вас на сервере (адрес сайта test1.ru) в одной и той же папке (пусть она будет называться pages) лежат две страницы: page1.html и page2.html. Со страницы page1.html вы хотите сослаться на документ page2.html.
Абсолютная ссылка будет выглядеть так:
Относительная будет такой:
Папка верхнего уровня обозначается как (..). Например, если со страницы page1.html вам надо сослаться на файл home.html, который лежит в корне сайта, ссылка будет выглядеть так:
Внутренние ссылки
Если внешние ссылки ведут с одной страницы на другую, то внутренние обеспечивают быстрый переход к разным частям текущего документа. Их удобно использовать на страницах с большим количеством контента. Особенно часто с помощью внутренних ссылок создают оглавления.
Чтобы на разделы страницы ссылаться, их надо как-то идентифицировать. Для этой цели используется якорь — специальное имя раздела, которое нужно будет задать в качестве значения атрибуту href, чтобы на раздел сослаться. Идентификатор должен быть уникальным (то есть на одной странице не должно быть двух одинаковых якорей) и состоять из букв латинского алфавита.
Имя якоря указывается в атрибуте id любого HTML-тега.
Например, внизу HTML-документа вы хотите разместить ссылку «Вверх», которая будет вести к его началу — заголовку «Начало страницы». Для этого вам нужно поставить в начале страницы якорь, а внизу страницы — ссылку на него.
Пусть якорь будет называться begin. Тогда в тег, к содержимому которого будет вести ссылка, нужно добавить атрибут id со значением begin.
Якорь установлен, и теперь остаётся только добавить ведущую на него ссылку. В нашем случае она будет выглядеть так:
Обратите внимание: перед названием якоря стоит решётка — это отличительная черта внутренних ссылок.
Графические ссылки
С появлением HTML 5 тег превратился в контейнер, способный вмещать в себя блочные элементы, так что ссылкой теперь может быть не только текст или картинка, но даже таблица, список или целая страница.
Создаётся ссылка-картинка, как и любая другая ссылка: значением атрибута href задаётся адрес ссылки, а между тегами вставляется любое содержимое, в рассматриваемом случае — изображение.
Например, если вы хотите сделать ссылкой на сайт mail.ru картинку с именем image.jpg, которая лежит в папке рядом с вашей веб-страницей, то нужный код будет таким (о вставке картинок на страницу читайте в другой статье):
Ссылки на e-mail и Skype
Для удобства посетителей сайта на странице можно не просто указывать свои контактные данные, но и делать их активными, чтобы при щелчке на адрес e-mail у пользователя сразу открывался почтовый клиент, а при щелчке на логин Skype программа сразу же запрашивала разрешение на звонок.
Чтобы вставить ссылку на e-mail, перед адресом электронной почты в значении атрибута href стоит написать mailto:. Например:
Для создания ссылки на логин Skype перед именем пользователя следует добавить skype:. Например:
Чтобы редактировать HTML online воспользуйтесь визуальным редактором по ссылке.
Полезные ссылки:
- Основы HTML — бесплатный 2-х часовой видеокурс по основам HTML;
- Бесплатный курс по верстке сайта — пример блочной вёрстки с чистого листа;
- Вёрстка сайта с нуля 2.0 — полноценный платный курс;
- Создание приложений для Android — для тех, кто давно хотел попробовать себя в мобильной разработке (не для новичков).
HTML первые шаги — урок 4 — Ссылки (гиперссылки)
Мы подошли к самым основам HTML, то ради чего HTML и затевался, а именно к гиперссылкам (или просто ссылки). Ссылки — это способ организации связи между различными материалами. Допустим у вас есть 100000 текстовых файлов, если для них делать рубрикатор, то даже есть в каждом рубрикаторе будет по 200 описаний текстовых документов, то вам потребуется 500 рубрик. Чтобы просмотреть все эти 500 рубрик и найти нужную вам информацию, вам потребуется много времени. Как же ссылки сделают нашу жизнь проще?
Ссылки связывают между собой два HTML-документа произвольным образом так что у каждого HTML-документа есть имя, причем имя уникальное. Таким образом из одного документа мы можем перейти в десять других похожих, популярных документов, что увеличивает наши шансы на успешное нахождение нужной информации.
Такой же принцип и на веб-сайтах. У страниц сайта есть уникальные имена URL ( Uniform Resource Locator — единообразный локатор (определитель местонахождения ресурса). Писать уникальные имена страницы, на которую мы будем ссылаться, нужно в теге . В общем виде это выглядит так:
В этом коде href — это атрибут тега A. Что такое атрибуты мы уже рассмотрели в прошлом уроке. Давайте теперь создадим еще один файл в той же папке где у вас лежит index.html. Назовем его file.html и поместим в него следующий код:
Мой второй HTML-документ Мой второй HTML-документ
А в index.html напишем такой код:
Мой первый HTML-документ Мой первый HTML-документ
Ссылка на второй документ
Теперь когда мы заходим в index.html через браузер мы имеем ссылку, по которой можно перейти на file.html. Давайте теперь потренируемся в написание путей к файлам. Когда оба файла лежат в одной папке, то мы пишем имя файла в атрибуте href и браузер понимает, что раз указано просто имя файла, то файл лежит в одной папке с исходным. А что если мы не хотим хранить файлы в одной папке, как тогда сделать ссылку? Тогда к нам на помощь приходят относительные пути ссылок.
Относительные пути
Относительные пути называют так потому что путь к файлу мы находим относительно исходного файла. Давайте создадим папку files в папке с файлом index.html. В эту папку мы переместим файл file.html. Теперь если вы пройдете в браузере по ссылке в файле index.html, то браузер уже не сможет найти файл file.html, потому что мы поменяли его положение относительно файла index.html.
Теперь мы будем использовать путь относительно index.html. Для указания папки используется косая черта, слэш. Например так
Чтобы указать начало отсчета пути мы пишем ./ (точка слэш). Таким образом путь к папке files от файла index.html будет выглядеть вот так:
Осталось только дописать имя файла в конце пути, чтобы указать что путь ведет к файлу file.html
Давайте теперь подправим путь к файлу в index.html:
Мой первый HTML-документ Мой первый HTML-документ
Ссылка на второй документ
Cохраните теперь документ index.html и обновите страницу браузера (должна быть открыта страница index.html). Теперь ссылка на file.html снова работает. Также обратите внимание, что вы можете написать так:
Браузер все равно поймет эту ссылку без ./ . Однако если вы напишите:
То это уже будет не правильный путь, потому что такой путь указан абсолютно, не относительно файла index.html. То есть если вы хотите написать относительный путь, то используйте точку-слэш или просто начинайте писать путь.
Осталось сделать обратную ссылку, от файла file.html к файлу index.html. Начнем с указания того что этот путь относительный:
Теперь нужно указать, что файл находится на уровень выше, то есть нужно выйти из каталога files, тогда мы найдем файл index.html. Для этого мы используем ../ (две точки слэш).
Если бы в папке files была еще одна папка и в этой папке лежал .html файл, то из этого файла ссылка начиналась так ./../../ , то есть на каждую папку мы писали бы по ../ .
И теперь давайте еще добавить имя файла index.html к пути:
Наш путь готов, давайте вставим его в файл file.html:
Мой второй HTML-документ Мой второй HTML-документ
Ссылка на первый документ
Теперь вы можете переходить с одной страницы на другую и обратно. Посмотрите как меняются URL в браузере с одного на другой.
Давайте теперь вернемся к тому моменту, когда я говорил о путях, которые начинаются со слэша без точки, это абсолютные пути.
Абсолютные пути
Абсолютные пути используются на сайтах в Интернете. Например в друпале все страницы сайта загружаются из одного файла index.php, поэтому когда мы пишем / то мы указываем путь от файла index.php. Если мы указываем абсолютный путь на своем компьютере в index.html, то путь начинается с корневого каталога вашего диска. Мы можем также указывать на сайте относительные ссылки, но абсолютные ссылки гораздо удобнее. Дело в том что при переносе папки, файла ваши пути поломаются если они указаны относительно, например вы переместили файл в каталог, то все пути должны стать на ../ длиннее. В этом отношении абсолютные пути удобнее.
Абсолютные пути начинаются с / или с имени сайта например https://drupalbook.org/ru/ . И так и так браузер поймет что мы имеем в виду. Абсолютные пути имееют следующий вид:
И если мы хотим из файлов index.html и file.html сделать ссылку на file2.html, то они будут выглядеть одинаково, несмотря на то что находятся в разных папка:
Как я писал выше этот код будет работать как в index.html, так и в file.html и даже в file2.html можно написать эту ссылку которая ссылается на свой же документ.
Атрибут target
Атрибут target очень важный, он часто нужен когда ссылка ведет на другой сайт с вашего сайта. Этот атрибут позволяет задать как будет открываться сайт по вашей ссылке:
_blank — в новом окне или вкладке;
_self — в том же окне где и ссылка;
_parent — в родительском фрейме (использование фреймов считается устаревшим, на их смену пришел AJAX);
_top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение работает как _self .
Пожалуй нам нужен будет только значение _blank, так как _self используется по умолчанию и его можно не писать.
Атрибут rel
Атрибут rel показывает отношение (relation — отношение) между текущим документом и тем документом на который указывает ссылка. Наиболее часто используется rel=»nofollow», который закрывает от индексации Google, Yandex эти ссылки. Например если вы ставите ссылку на сторонний сайт, то лучше ее закрыть через rel=»nofollow» и поставить target=»_blank».
как поставить обратную ссылку?
elektrik
21.04.2011 22:29 3 082
Подскажите, кто знает. Суть вопроса в следующем: у меня статичный сайт, но накопилось довольно много страниц и для удобства я решил распределить их по разным папкам. Но если ссылку с главной на внутренние страницы поставить довольно легко, например — papka1/stranica.html то как указать обратный путь, или путь в другую папку, чтобы не пришлось ставить внешние ссылки, типа site.ru/papka2/stranica.html
Ответы на пост (9) Написать ответ