Какие ссылки используются в html документе

— элемент ссылки

Этот атрибут сообщает о том, что эта ссылка должна быть использована для скачивания файла, и, когда пользователь нажимает на ссылку, ему будет предложено сохранить файл как локальный. Если у этого атрибута есть значение, оно будет использовано как заполненное название файла в Окне сохранения, которое открывается, когда пользователь нажимает на ссылку (пользователь может поменять название перед сохранением файла). Ограничений на позволенные значения нет (хотя оно будет конвертировано в нижние подчёркивания, предотвращая специфичные пути), но стоит обратить внимание, что у большинства файловых систем есть ограничения на то, какие знаки препинания поддерживаются файловой системой, и браузеры регулируют названия согласно ограничениям.

Примечание:

• Атрибут может быть использован вместе с blob: URLs и data: URLs , чтобы пользователи могли проще скачать контент, который сгенерирован с помощью JavaScript (например, картинка, созданная с помощью онлайн-сайта для рисования).
• Если представлен HTTP-заголовок Content-Disposition:, и он содержит иное название, у HTTP-заголовка есть преимущество над атрибутом.
• Если этот атрибут установлен и Content-Disposition: установлен на inline , Firefox отдаёт преимущество Content-Disposition , но в тоже время Chrome отдаёт преимущество атрибуту download .
• Этот атрибут соблюдается только на ресурсах с тем же доменом.

Единственный обязательный атрибут для определения ссылки в HTML4, но больше необязательный в HTML5. Упущение этого атрибута создаёт ссылку-заполнитель. Атрибут href указывает ссылку: либо URL, либо якорь. Якорь — это название после символа # , который указывает на элемент (ID (en-US) ) на текущей странице. 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, чтобы динамично заполнять страницу.

datasrc Non-standard

Этот атрибут сообщает ID объекта исходных данных, который принимает связанные данные с этим элементом.

**Предупреждение:**Этот атрибут нестандартный и не должен использоваться. Для достижения такого же эффекта, используйте скрипты и такие механизмы, как XMLHttpRequest, чтобы динамично заполнять страницу.

methods Non-standard

Значение этого атрибута предоставляет информацию о функциях, которые могут быть выполнены на объекте. Обычно значения даны HTTP-протоколом, когда он использован, но может (для похожих целей, как для атрибута title ) быть полезным для включения контрольной информации в ссылке. Например, браузер может выбрать другой тип рендеринга для ссылки как функцию определённых методов; что-то, что может быть найдено, может иметь другую иконку, или внешняя ссылка может получить индикатор перехода с текущего сайта. Этот элемент не понимается или не поддерживается полностью даже браузером Internet Explorer 4, который определил этот атрибут. Значения methods (MSDN).

Этот атрибут, предложенный Microsoft, определяет отношения уникального названия ресурса (URN) с ссылкой. Хотя он основан на стандартах работы нескольких лет назад, значение URN всё ещё не определено полностью, поэтому этот атрибут не имеет значения. Значения urn (MSDN).

Абсолютные и относительные ссылки

Это короткая шпаргалка о том, как правильно ставить ссылки и не теряться в адресах.

Абсолютные ссылки

Абсолютная ссылка — это адрес ресурса целиком. Обычно такие ссылки ставят на сторонние ресурсы и надеются, что адрес не изменится.

https://htmlacademy.ru https://htmlacademy.ru/blog/boost/tools/chrome-devtools-2 

Не забывайте — если вы используете абсолютные ссылки на сайте, то при смене структуры папок или перемещении файлов большинство ссылок могут сломаться.

Относительные ссылки

То, куда ведут относительные ссылки, зависит от расположения текущей страницы. Посмотрим на примере:

Предположим, мы загрузили страницу по такому адресу:

https://htmlacademy.ru/blog/frontend/html/index.html 

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

Ссылка на файл в той же папке

1.html https://htmlacademy.ru/blog/frontend/html/1.html 

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

Ссылка на файл в папке ниже текущей

directory/3.html https://htmlacademy.ru/blog/frontend/html/directory/3.html 

Файл в дочерней папке относительно текущей. Перед именем файла через / пишем название папки.

dir1/dir2/5.html https://htmlacademy.ru/blog/frontend/html/dir1/dir2/5.html 

Страница находится на две папки ниже текущей.

Ссылка относительно корня сайта

/2.html https://htmlacademy.ru/2.html 

Файл расположен в корневой папке сайта. Для ссылки относительно корня используется / . Такая ссылка сработает только на веб-сервере — с локальными файлами на компьютере это не сработает.

/dir1/dir2/4.png https://htmlacademy.ru/dir1/dir2/4.png 

Файл на два уровня ниже корня сайта.

Ссылка на папку выше текущей

../6.html https://htmlacademy.ru/blog/frontend/6.html 

На одну папку «вверх» относительно текущей. Для «подъёма» используется синтаксис ../ .

../../7.html https://htmlacademy.ru/blog/7.html 

На две папки вверх. Синтаксис ../ может повторяться сколько угодно раз, главное, чтобы все папки «по пути» существовали.

Комбинированная ссылка

../../../dir1/dir2/8.html https://htmlacademy.ru/dir1/dir2/8.html 

На три папки вверх и на две папки вниз относительно текущей — поднялись до корня и последовательно спустились в папки dir1 и dir2 .

Все приведённые примеры одной картинкой:

id-ссылки (якорные ссылки)

Якорные ссылки пригодятся, если нужно сослаться на определенное место документа — например, на заголовок. Для этого заголовку нужно установить определенный атрибут id , а в ссылке через # дописать этот атрибут в конце.

Содержание первой главы
 

Ставим якорную ссылку на той же странице:

Ставим якорную ссылку на другую страницу:

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

Что будет, если ошибиться

Файл, на который вы ссылаетесь, не загрузится — появится ошибка 404. Если так случилось, можно посмотреть через Chrome DevTools, что с адресом.

Ещё можно по незнанию поставить ссылку на файл на своём компьютере, а потом удивляться, почему не грузятся картинки. Такое в 1998 произошло на сайте Microsoft Game Studios. Разработчики оставили ссылку на файл на диске H:/ .

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

Ссылки — сила:

• Что такое ссылки и как их ставить. Тег a
• Как ставить пустые ссылки
• Что лучше использовать: ссылки или кнопки

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

Читать дальше

Знакомство с HTML

Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.

Что такое HTML?

HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.

Основы разметки

Всё начинается с тегов. Тег — это элемент языка разметки, который определяет, какой тип содержимого будет представлен.

Теги обычно идут парами: открывающий тег и закрывающий тег . Например:

Мой заголовок
 
Это мой первый абзац. Привет, мир!
 

Некоторые теги можно не закрывать:

Теги и атрибуты

У тегов могут быть атрибуты. Это дополнительные характеристики, которые помогают определить свойства элемента. Например, у тега атрибут src указывает путь к изображению:

Атрибут alt описывает изображение, это полезно, если изображение не загрузится или для программ чтения экрана.

Формы и элементы форм

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

• — это тег формы.
• action — куда отправляются данные.
• method — метод отправки (обычно get или post ).
• — поле для ввода данных. Тип text означает текстовое поле.
• — метка для поля ввода.

Списки в HTML

Списки позволяют нам организовывать данные в упорядоченном (нумерованном) или неупорядоченном (с маркерами) виде.

Упорядоченные списки создаются с помощью тегов (ordered list) и (list item):

1. Первый элемент списка
2. Второй элемент списка
3. Третий элемент списка

• Элемент списка с маркером
• Еще один элемент с маркером

Ссылки и навигация

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

Таблицы

 
 
Имя
 
Возраст
 
 
Джон
 
30
 
 
Элис
 
25
 
 
 

Использование изображений

Семантическая разметка

Семантическая разметка важна для доступности и SEO. Это использование элементов HTML по их предназначению, например:

 
 
Заголовок статьи
 
 
Первый абзац статьи.
 
  
 

Это основы, которые сформируют крепкий фундамент для начала работы с HTML. Следующий шаг — погружение в CSS, чтобы оживить и улучшить визуальную составляющую ваших веб-страниц. Но об этом — в нашей следующей статье. Стройте свои веб-страницы с удовольствием и не бойтесь экспериментировать! ��

• 1 ноября 2023

Специальные символы в HTML

HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.

• 23 октября 2023

Простое диалоговое окно на HTML

Вот короткое демо:

• 18 октября 2023

Зачем нужен метатег viewport

Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .

Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.

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

• 18 сентября 2023

Атрибут class в HTML на примерах

Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.

Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.

• 14 сентября 2023

В чём отличия цитат blockquote, cite и q

В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.

• 12 сентября 2023

Осмысленный alt-текст: 6 правил

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

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

• 31 июля 2023

Растровая и векторная графика

Давайте попробуем разобраться, в чём отличие растровой графики от векторной.

• 13 июня 2023

Как понять, что перед вами заголовок

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

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

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

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

• 8 июня 2023

Как правильно вставлять SVG

Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.

SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.

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

�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ 

Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.

SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.

Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.

• 1 июня 2023

Какие ссылки используются в html документе

Гипертекстовые ссылки являются отличительной особенностью гипертекстовых WEB – публикаций. Введение гипертекстовых ссылок (далее — ссылки) позволяет объединить любое множество документов в единое издание. Они делают набор документов связанным и структурированным, что позволяет читателю (пользователю) получать необходимую ему информацию максимально быстро и в полном объеме.

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

Различают глобальные и локальные ссылки. Глобальные ссылки могут указывать на другой документ в рамках сети Internet , например, запрашивать файл по FTP-протоколу для отображения его браузером. URL – адрес в ссылке позволяет вызывать документы используя рассмотренную ранее систему именования Internet . Именно этот подход используется при организации больших структурированных W eb — серверов.

Локальные ссылки используются в рамках одного документа. В этом случае ссылка используется для организации связь между некоторыми элементами или фрагментами Web – публикации в виде прямого соединения отдельных точек в документе с другими точками в том же самом Web — документ t .

В HTML терминологии конечные точки связей часто называют anchors (якорь).

Существуют два конца связи (якоря): связь осуществляется от одной точки к другой. Последняя, называемая целью (target) связи, часто является началом документа.

Связанный текст ( аббревиатура HUT), действует, как связь к Web — документу, который объясняет это сокращение и дает информацию о нем. Отображение текста связи возможно по-разному: текст связи может быть подчеркнут, окрашен или выделен в текстовом материале каким-то другим образом. Пользователь (читатель) может узнать, как связи отображены в каждом отдельном окружении.

HTML использует множество условных оборотов для текстовых и структурированных документов. Ссылки связывают один Web — ресурс с другим например, изображением, видеоклипом, звуковым файлом, программой, HTML — документом, элементом в документе HTML и т.д. Несмотря на простоту, ссылки стали основным залогом успеха Web — технологий.

По умолчанию со ссылкой бывает связана загрузка другого Web — ресурса. Запуск ссылки достигается обычно путем выбора ссылки курсором мыши и последующего щелчка левой клавишей мыши (или с помощью ввода с клавиатуры).

Web – ресурс задается UR L — адресами:

— Абсолютным URL – адресом, например , http://www.mycompany.com /one. html#anchor-one.

— Относительным UR L — адресом: */* /one.html#anchor-one.

— Именем файла, на который указывает ссылка, если этот файл размещен в той же директории (папке): one.html#anchor-one one . htm .

— Если ссылка определена в том же документе: #anchor-one.

Это внешний вид URL. Для того, чтобы браузер отобразил ссылку на URL — адрес, необходимо отметить этот адрес в HTML-документе специальными управляющими элементами (тэгами). Синтаксис HTML, позволяющий это сделать иллюстрируется следующим примером:

Рис. 8.25 Визуализация ссылки

Тэг URL«> открывает описание ссылки, а тэг — закрывает его. Любой текст, находящийся между открывающим и закрывающим тэгами подсвечивается специальным образом Web-браузером (рис. 8.25). Обычно этот текст отображается подчеркнутым и выделенным синим (или другим заданным пользователем) цветом. Код, обозначающий URL — адрес, браузером не отображается, а используется только для выполнения предписанных им действий при активизации ссылки. Отметим, что при совмещении курсора мыши с полем текста ссылки, курсор изменяет свою форму (пиктограмма руки с выпрямленным указательным пальцем).

Путем активизации этих ссылок (с помощью щелчка левой клавишей мыши, ввода с клавиатуры, голосовых команд и т.д.) пользователи могут перейти к этим ресурсам. Напомним, что атрибут href в каждом исходном якоре указывает адрес целевого якоря с использованием UR L — адреса.

Целевые якоря в HTML — документах могут указываться с помощью элемента A (и атрибута name ) или с помощью других управляющих элементов HTML (используя атрибут id ). Таким образом, например, можно создавать оглавление, элементы которого являются ссылками на элементы заголовков H 1 – H 6 и т.д. в том же документе.

Используя элемент A для создания целевых якорей, можно записать:

Содержание ;

Введение

. раздел 1.

Предыстория

. раздел 2.

Более конкретные заметки

. раздел 2.1.

Визуализация приведенного выше HTML – кода в окне браузера иллюстрируется рис. 8.26.

Рис. 8. 26 Визуализация ссылок, созданных с помощью элемента А и атрибутов href и name.

Такого же эффекта можно достигнуть, сделав якорями сами элементы заголовка:

Содержание

Введение

В последней записи использованы атрибуты href и id. Вид HTML – документа в окне браузера остается без изменений.

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

Роли ссылок, определяемых элементами A или Link , указываются с помощью атрибутов rel и rev . Тип первой ссылки — «prev», второй — «next» (два из ряда распознаваемых типов ссылок).

Для задания заголовков ссылок используется атрибут title (для элементов A и LINK ).

Рассмотрим управляющие элементы HTML , использующиеся при создании ссылок.

Управляющий элемент A — якорь (точка ссылки).

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

— name = cdata . Этот атрибут присваивает якорю имя. Значением этого атрибута должно быть уникальное имя. Область действия этого имени распространяется на текущий документ. Этот атрибут использует общее пространство имен с атрибутом id .

— href = URL . Этот атрибут определяет местоположение ресурса Web. Он определяет связь между текущим элементом (исходным якорем) и целевым якорем.

— hreflang = langcode . Этот атрибут задает базовый язык ресурса, назначаемого атрибутом href .

— type = content – type. Этот атрибут определяет тип части содержимого, например, результат обратного действия ссылки на ресурс

— rel = link – type. Этот атрибут описывает отношение из текущего документа к якорю, заданному атрибутом href . Значением этого атрибута является разделенный пробелами список типов ссылок.

— rev = link – type. Этот атрибут используется для описания обратной ссылки из якоря, задаваемого атрибутом href , в текущий документ. Значением этого атрибута является разделенный пробелами список типов ссылок.

— charset = charset . Этот атрибут задает кодировку символов назначаемого ссылкой ресурса.

Каждый элемент A определяет якорь:

— Содержимое управляющего элемента A определяет положение якоря.

— Атрибут name этого элемента задает имя якоря, так что он может служить пунктом назначения любого числа ссылок.

— Атрибут href назначает якорь пунктом назначения для одной ссылки.

В качестве примера приведем содержание некоторого HTML – документа, состоящее из четырех глав:

Содержание:

Здесь ссылки даются на HTML – файлы, размещенные в той же директории, что и файл данного примера.

На рис.8.27 приведен визуальный вид Содержания в окне браузера.

Рис. 8.27 Вид исходного HTML — документа в окне браузера

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

При наличии HTML – файлов (целевых якорей), на которые производится ссылка, браузер выведет этот файл на экран компьютера (рис. 8.28).

Рис. 8.28 Вид оглавления первой главы в окне браузера

Как видно из приведенного рисунка, в составе оглавления первой главы представлены слова (выделенные подчеркиванием), в свою очередь являющиеся исходными якорями для ссылок на конкретный материал определенного параграфа.

При создании вышеприведенных примеров использован атрибут href .

Ссылки на точки внутри документа. В процессе создания Web — публикации можно делать ссылки на различные участки или разделы одного и того же документа, используя специальных скрытый маркер для этих разделов. Это позволяет быстро переходить от раздела к разделу внутри документа, не используя скроллирование экрана. Как только вы щелкнете на ссылке, браузер выведет на экране указанный раздел документа, а строка, в которой стоит маркер данного раздела (обычно, первая строка раздела или заголовок раздела) будет размещена в качестве первой строки окна браузера (если данная строка не присутствует на экране браузера в момент активизации ссылки).

Для создания такой ссылки создается маркер раздела, который вызывается по ссылке, и создается сама ссылка на данный маркер:

— Маркер раздела. Синтаксис данного маркера следующий:

— Ссылка на данный маркер:

В качестве примера приведем начальный текстовой фрагмент данного параграфа:

8.8 Ссылки

< P >Гипертекстовые ссылки являются отличительной особенностью гипертекстовых WEB — публикаций. Введение гипертекстовых ссылок (далее — ссылки) позволяет объединить любое множество документов в единое издание. Они делают набор документов связанным и структурированным, что позволяет читателю (пользователю) получать необходимую ему информацию максимально быстро и в полном объеме.

< P >Ссылки имеют стандартный формат, что позволяет браузеру интерпретировать их и выполнять необходимые функции (вызывать методы) в зависимости от типа ссылки.

< P >Различают глобальные и < A HREF ="# ex 1">локальные ссылки . Глобальные ссылки могут указывать на другой документ в рамках сети Internet , например, запрашивать файл по FTP-протоколу для отображения его браузером. < A HREF ="# ex 2">URL — адрес в ссылке позволяет вызывать документы используя рассмотренную ранее систему именования Internet . Именно этот подход используется при организации больших структурированных W eb — серверов.

< P > < A NAME ="# ex 1">Локальные ссылки используются в рамках одного документа. В этом случае ссылка используется для организации связь между некоторыми элементами или фрагментами Web — публикации в виде прямого соединения отдельных точек в документе с другими точками в том же самом Web — документ .

< P >В HTML терминологии конечные точки связей часто называют < I >anchors (якорь).

< P >Существуют два конца связи (якоря): связь осуществляется от одной точки к другой. Последняя, называемая < I >целью (target) I > связи, часто является началом документа.

      Учебник по HTML5   

      Параграф 1 | Параграф 2 | Параграф 3 
Параграф 1
 
Содержание параграфа 1
 
Параграф 2
 
Содержание параграфа 2
 
Параграф 3
 
Содержание параграфа 3
   

     a:link a:visited a:hover a:active Учебник по HTML5