belarusweb.net
© Петр Романовский Минск, 2016-2017.



belarusweb.net

Основы создания сайтов...

HTML >>>

3.3. Тег <link>

Как мы уже знаем, HTML отвечает за логическую разметку веб-документа. За внешний вид отвечают каскадные таблицы стилей, а за функциональность – JavaScript. Но ведь и таблицы, и скрипты в большинстве случаев находятся в отдельных файлах. Соответственно возникает необходимость каким-то образом сообщать браузеру, что при формировании и отображении веб-страницы он должен использовать данные, расположенные за пределами документа, т.е. во внешних файлах. Одним из элементов, служащих для этих целей, является пустой элемент 'link', формирующийся одиночным тегом <link>. Он как раз и устанавливает связь с внешними файлами, содержащими, например, необходимые стили CSS или другие данные.

Путь к требуемому файлу задается в качестве значения атрибута href элемента 'link'. Это может быть как абсолютный (полный), так и относительный адрес документа. Однако не стоит забывать, что 'link', в отличие от гиперссылки 'a', находится в заголовке документа 'head' и является служебным элементом. Следовательно, его содержимое предназначено только для браузера и на странице не отображается.

Чтобы браузер понимал с каким типом данных в подключаемом внешнем файле он будет иметь дело, в элементе 'link' необходимо указывать атрибут rel (от англ. relation), который в качестве значения принимает тип подключаемых данных. Нас будет интересовать только значение "stylesheet", соответствующее каскадным таблицам стилей. Использование элемента 'link' показано в примере 3.2.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">	
  <title>Элемент 'link'</title>

  <!-- Привязываем к нашей странице две таблицы стилей -->
  <link href="http://belarusweb.net/css/style_1.css" rel="stylesheet">
  <link href="http://belarusweb.net/css/style_2.css" rel="stylesheet">
	
</head>
<body>
  <!-- Применяем к абзацам классы из подключенных таблицы стилей -->
  <p class="orangeParagraph">
	К данному абацу применяется класс, который по логике, <br>
	должен находиться в одной из подключенных таблиц стилей.
  </p>

  <p class="mainFont">
	При разработке большого проекта (сайта) <br>
	таблиц стилей может быть много. По мере необходимости <br>
	они подключаются то к одной, то к другой странице.
  </p>

</body>
</html>

Пример 3.2. Использование элемента 'link'

Обычно при разработке объемных сайтов классы CSS объединяются в группы, которые размещаются в отдельных файлах с расширением .css. В дальнейшем, по мере необходимости, эти файлы подключаются к страницам при помощи элементов 'link'. В нашем примере было использовано две ссылки на таблицы стилей, но разрешается использовать столько элементов 'link', сколько потребуется.

В элементе 'link' используется еще один важный атрибут media. Он определяет устройство, для которого будет применяться подключаемая таблица стилей. Перечислим возможные значения атрибута:

Рассмотрим пример 3.3 кода, который даст наглядное представление о возможностях атрибута media.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">	
  <title>Элемент 'link' и его атрибут 'media'</title>
  
  <!-- Зададим базовый адрес -->
  <base href="http://belarusweb.net/">
  
  <!-- Эта таблица будет использоваться всегда, пока не  -->
  <!-- будет переопределена нижними таблицами   -->
  <link href="css/style_1.css" rel="stylesheet" media="all">
  
  <!-- Если смартфон, то будет использоваться style_2.css -->
  <link href="css/style_2.css" rel="stylesheet" media="handheld">
  
  <!-- Если принтер, то будет использоваться style_3.css -->
  <link href="css/style_3.css" rel="stylesheet" media="print">
 	
</head>
<body>
  Тут расположена выводимая информация.
</body>
</html>

Пример 3.3. Использование атрибута 'media' элемента 'link'

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

Также в элементе 'link' могут использоваться атрибуты type, hreflang, sizes и crossorigin. Мы их использовать скорее всего не будем. Однако, если информация о них все таки понадобится, то можно обратиться к официальной документации здесь.

Контрольные вопросы и задания

  1. Для чего используется элемент 'link'? В чем его отличие от элемента 'a'?

Словарь новых английских слов

target ['ta:git] – цель, назначение.
base [beɪs] – база, основа.
main [meɪn] – основной, главный.
link [lɪŋk] – звено, связь, связывать.
relation [ri'lei∫ən] – отношение, взаимосвязь.
media [ˈmiːdɪə] – носители, каналы, среды.
all [ɔːl] – все.
handheld [ˈhandhɛld] – портативный, переносной.
screen [skriːn] – экран.
size [saɪz] – размер, величина, объем.
content [kənˈtɛnt] – содержимое, содержание, суть.
author [ˈɔːθə] – автор, инициатор.
speech [spiːtʃ] – речь.
static [ˈstatɪk] – статичный, неподвижный,
стационарный.
state [steɪt] – состояние.
dynamic [dʌɪˈnamɪk] – динамичный, активный,
изменяющийся.
follow [ˈfɒləʊ] – следовать за.
revisit [riːˈvɪzɪt] – посетить вновь.
sheet [ʃiːt] – лист бумаги.
title [ˈtʌɪt(ə)l] – заглавие, название.
style [stʌɪl] – стиль, манера.
source [sɔːs] – источник.
asynchronously [ə'siɳkrənəsli] – асинхронно.

Комментарии (0)
Петр Романовский
1. Приветствуются комментарии, которые содержат дополнения к материалу текущей страницы, а также ваши ответы на вопросы других пользователей.
2. Если вам что-то непонятно - спрашивайте, не забывая написать, что именно и с какого места.
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!    
     
belarusweb.net © Петр Романовский, Минск, 2016-2017.
Связаться с автором
Наверх