В этом уроке мы с вами изучим такой важный момент как ссылки, потому что даже если просто расшифровать аббревиатуру HTML – это будет «гипертекстовый язык разметки текста». Гипертекстовый как раз означает, что в тексте могут быть ссылки на другие документы. Как же эти ссылки создаются? Если мы обратим внимание на текст статьи, которую мы взяли для своей работы, мы увидим что между первым и вторым подзаголовком есть ссылочка, которая ведет на сайт программы typepilot. В нашем случае эта ссылка не работает, у нас это просто текст http://www.howtocorp.com/typepilot и наша задача сделать ее ссылкой.
Делаем гиперссылку
Переходим в HTML код и спускаемся до того момента пока не увидим этот текст. Далее открываем тег <a> (англ. Anchor, т.е якорь) который создает ссылку, это парный тег, поэтому там где у нас ссылка заканчивается мы должны эту ссылку закрыть.
Здесь у нас такая же история как с картинкой – если мы просто указываем тег <a>, браузеру это еще ничего не говорит, браузеру не понятно, что это за ссылка, куда она ведет. Чтобы сделать это на самом деле ссылкой мы должны дописать атрибуты. Если вы сейчас проверите, то увидите что на странице никакой ссылки не создано, хотя мы и прописали тег <a>. Дело в том, что нужно указать обязательный атрибут href, это самый важный атрибут для ссылки, так же как src для картинки указывает, где лежит картинка, так же и здесь href указывает, куда ведет эта ссылка. В нашем случае эта ссылка ведет туда же куда и указано в тексте, поэтому мы просто копируем это значение.
Указываем способ открытия
Если мы теперь сохраним и проверим то увидим что у нас этот текст превратился в ссылку и если мы по нему кликнем, то у нас откроется совсем другая страница, причем обратите внимание, она откроется вместо нашей. Это очень неудобно, потому что так вы можете даже потерять посетителя, который щелкнет по ссылке и вместо вашего сайта загрузится другой. Поэтому для ссылок есть специальный атрибут target (англ. Цель), и в нашем случае если мы хотим чтобы наша ссылка открывалась в новом окне, мы должны прописать значение _blank.
Сейчас если мы щелкнем по нашей ссылке, то она открывается в новом окне, а наша страница остается нетронутой.
Делаем подсказку
Часто бывает нужно подсказать пользователю, куда ведет ссылка. Если мы наведем курсор на ссылку, то должна всплывать подсказка. Для этого нужно использовать атрибут title, он универсальный, его можно использовать и с другими тегами. Давайте напишем в этой подсказке, куда ведет эта ссылка, например «Программа type pilot».
Ссылка на скачку
Следующий момент, который нам нужно изучить – это ссылки, которые позволяют скачивать файлы. Я думаю, вы с ними сталкивались еще чаще, чем с простыми ссылками, когда есть ссылка с надписью «скачать». Как делаются такие ссылки? Для этого нам понадобится какой-нибудь файл. Пусть это будет pdf файл, и мы внизу сделаем ссылочку «скачать эту статью в формате pdf». Для файлов я советую так же завести отдельный каталог в папке HTML, и назовем этот каталог «files» и сюда закинем файл time.pdf. Возвращаемся в HTML код и в самом низу создадим параграф «скачать эту статью в формате pdf». Теперь наша задача сделать этот параграф ссылкой на закачку файла. Пишем <a href=""> и туда мы уже пишем ссылку не на html страницу, а ссылку на конкретный файл, который у нас лежит в папке files и имеет название time.pdf.
Обратите внимание, что ссылка должна быть вложена в параграф, а не наоборот. Если вы хотите чтобы закачка начиналась в новом окне, вы можете указать атрибут target="_blank". В данном случае стоит заметить, что мы указали относительную ссылку. Почему относительную? Потому что мы указали ссылку относительно документа index.html, он у нас лежит в «корне» и мы указываем ссылку относительно «корня». Иногда это бывает удобно, но иногда, если страница переместится в другое место, такие ссылки перестанут быть работоспособными. Если страница, в которой вы указали относительную ссылку уйдет, например, в архив и у вас будет отдельная папочка archives, то браузер будет пытаться найти в этой папке папку files, а уже там файл time.pdf, поэтому здесь относительные ссылки могут не сработать. Когда будете делать уже настоящий сайт, указывайте абсолютные ссылки, т.е. когда у вас будет конкретный адрес сайта, вы сможете указать www.адрес_сайта/files/time.pdf и это будет уже абсолютная ссылка. Здесь я это объяснил, потому что у людей часто возникает вопрос: что такое абсолютная ссылка, что такое относительная ссылка? Здесь нужно понимать что в относительных ссылках мы указываем путь именно относительно того документа в котором мы указываем путь. На этом все, встретимся в следующем уроке, в котором мы научимся создавать еще несколько типов ссылок.