Привет. Сегодня мы поговорим о гиперссылках,
или о ссылках, как их чаще всего называют. И о том, как их можно использовать для привязки
ваших документов к другим документам в сети. Именно ссылки делают
сеть всемирной паутиной. Идея в том, что разные ссылки,
объединяясь, становятся источником знаний, которым могут воспользоваться
поисковые системы или вы сами, переходя от страницы к странице
желательно с актуальным содержимым. Итак, давайте разберемся,
как создать ссылку на странице. Ссылки называются якорными
ссылками (anchor link), отсюда и буква a в теге. Когда вы используете тег a, нужно убедиться,
что у вас есть две разные части. Вам нужна гиперссылка
и содержимое. Гиперссылка — это всего лишь
ссылка на местонахождение нового содержимого. В этом случае я использовала
http://www.umich.edu. Это сообщает браузеру, что если кто-то нажмет эту ссылку,
по этому адресу нужно запросить новую страницу. Также нам необходимо содержимое. Содержимое — это то,
что пользователь может щелкнуть. В этом случае текст. Фактически я щелкаю
подчеркнутую строку «Мичиганский университет». Но в некоторых случаях
это может быть изображение. Какие типы ссылок существуют? Самые распространенные —
абсолютные ссылки. Также есть относительные ссылки. Внутренние ссылки и графические ссылки.
Я покажу вам пример каждого типа. Для создания абсолютной ссылки
в атрибут href необходимо вставить полный URL-адрес. Он должен начинаться с http или https, и по желанию можно
сослаться на дополнительный документ. Как вы помните, URL состоит из трех частей: нужны протокол,
сервер и документ. Для создания абсолютной ссылки
нужно включить все эти элементы. Все остальное действует
практически по тому же принципу. Для относительной ссылки нужно
немного изменить то, что заключено в тег
href. Мы не станем ссылаться на внешние или даже внутренние веб-страницы.
В этом случае мы укажем только имя файла. Итак, мы ссылаемся на page2.html. К этому можно добавить уточнение, например включить название папки. В этом случае мы ссылаемся
на файл page2.html, но он в другой папке — docs. В-третьих, относительную ссылку
можно использовать с тегом ID. Если href="#history", мы указываем на другую часть под названием history внутри
того же документа. Различия между
абсолютными и относительными ссылками. Когда мы используем абсолютные ссылки
и когда мы используем относительные ссылки? В случае с абсолютными ссылками
вы как бы говорите: «Это не моя страница, она принадлежит кому-то другому». Если вы ссылаетесь на чужую страницу, используйте абсолютную
ссылку с полным адресом. Относительные ссылки используются
при разработке собственного сайта. В этом случае удобнее использовать
относительные ссылки вместо абсолютных, потому что, если вы перемесите
свою страницу на другой сервер или в другую папку, не нужно
будет все переименовывать. Преимущество локальных ссылок в том, что не нужно так уж много всего обновлять. Кроме того, ни в коем случае
не создавайте ссылки, которые включают
какую-либо файловую структуру. Проверяйте ссылки. В них не должно быть
C:page, My Documents/page — всего, что относится
конкретно к вашему компьютеру. Этого не стоит делать по той причине, что если вы разместите свою страницу в сети... Вы создали ее, разместили на
сервере или хостинге, вы хотите, чтобы другие люди на нее заходили. Но они никак не могут получить
доступ к страницам, которые находятся на вашем компьютере. Таких конкретных локальных
ссылок нужно избегать. В своих ссылках вы также можете использовать изображения. Элемент, который нажимает пользователь,
не обязательно должен быть текстом. Вам это наверняка часто встречается. Это могут быть иконки, изображения, все в этом духе. Здесь я использовала
абсолютную ссылку в href, но в этот раз мы изменим не href, а содержимое между открывающим
и закрывающим тегами. Вместо текста я вставила изображение. Вместе с изображением также
необходимо указать альтернативный текст. И вот еще пример. Я сделала нечто похожее. Единственное различие — вместо локальной
ссылки на картинку я использовала абсолютную ссылку. Я вставила URL-адрес целиком. А теперь поговорим
о проблемах удобства и доступности. Если будете использовать
интерактивный элемент, убедитесь, что у него
информативное название. Существует специальное ПО,
которое перечисляет все ссылки на странице, для людей, которые что-то ищут,
но не могут получить доступ к странице обычным образом. Им, конечно, будет неудобно,
если все ссылки будут называться «нажми сюда», «нажми сюда», «нажми сюда». Нужно давать информативные названия. Также при использовании изображения в качестве интерактивного элемента нужно включить альтернативный текст или иную информацию для тех,
кто не сможет увидеть изображение. Давайте я покажу вам пример
таких ссылок в коде. Хорошо? Как видите, я ссылаюсь на абсолютные ссылки, относительные ссылки, изображения
как ссылки и встроенные ссылки. Если я нажму Washtenaw Dairy,
Rosie's Coffee Bar and Bakery или Dexter's Bakery, я попаду
на соответствующую страницу. Вернемся на мою страницу. Давайте я покажу вам одну хитрость. Когда я навожу курсор на ссылку, обратите внимание: в нижней части браузера отображается URL-адрес, по которому вы собираетесь перейти. Мне кажется, важно знать, что когда наводишь курсор на ссылку, надпись не соответствует ссылке,
отображающейся внизу страницы. Итак, абсолютные ссылки
ведут на другой сайт. Относительные ссылки ведут к
другому файлу в этой же папке. Здесь у меня изображение пончиков, например. Оно сохранено в моей папке. Я смогла сослаться на изображение,
используя только его имя. Вот так. В качестве ссылок можно
также использовать изображения. Я не стану писать «Пончики из Squire Shop»,
просто сделаю так, чтобы изображение
можно было щелкнуть и увеличить масштаб. Встроенные ссылки — это довольно интересно. Давайте вернемся к коду. Я покажу вам кое-что. Вот здесь есть раздел с относительными ссылками,
где id="relative". Вот здесь находятся встроенные ссылки с id="embedded", а выше у меня div id="absolute". Благодаря встроенным ссылкам я могу перейти
к другому разделу на той же странице. Я не перехожу на другую страницу, не открываю новую вкладку. Я просто перемещаюсь
к другому месту на странице. Так я перешла к абсолютным ссылкам, к относительным. Теперь попробую
перейти к встроенным ссылкам. Кажется, что ничего не произошло,
но на самом деле произошло. Просто мы уже в этом разделе. Вот так работают встроенные
или внутренние ссылки. Если вы в какой-то момент перестанете
понимать, как работает код, напомню, что вы можете перейти на вкладку «Вид», «Разработчику» > «Посмотреть код».
Так вы сможете понять, как другие создают подобные страницы
и как работают их ссылки. Теперь давайте разберем атрибут target. Якорные ссылки могут
отличаться по атрибуту target. Источник у нас есть. Добавим target. Можно указать target="_self". Это такое действие по умолчанию. Если вы ничего не укажете,
будет выбрано именно оно. Даже если вы не добавите target. Это означает,
что когда вы нажмете ссылку, она откроется в той же вкладке или окне. Если вы укажете target="_blank", вы покинете текущую страницу, а ссылка откроется в новой вкладке или окне. У этого есть свои плюсы и минусы. Плюс в том, что ваш сайт по-прежнему
будет открыт в другом окне. Минус в том, что многим не нравится, когда количество вкладок все увеличивается и увеличивается
по мере просмотра страницы. Есть еще два других варианта,
но о них мы подробно говорить не будем. Это атрибуты _top и _parent. Они связаны с открытием нескольких окон, фреймов и прочего. Давайте подытожим.
Очень важно понимать, как работают ссылки, чтобы успешно пройти этот курс
или понять принцип работы HTML. Прежде всего, страницы без ссылок
попадаются весьма редко. Если честно, это сложно назвать веб-страницей. Это всего лишь документ. Ссылки могут быть абсолютными, относительными и внутренними. Внутренние — это ссылки со значком #. Возможно, я их упомянула как относительные, но # указывает на то, что они внутренние. Следует с осторожностью использовать
изображения в ссылках. Не то чтобы это плохо,
я не говорю не делать этого вообще, но нужно соблюдать осторожность,
чтобы все пользователи, просматривающие вашу страницу,
имели равный доступ к ее содержимому.