Адресация, подключение стилей, шрифтов, скриптов

В HTML адреса указываются в атрибутах тегов href и src.

Адреса, URL

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

<title>Заголовок веб-ресурса</title>
<script src="js/scripts.js"></script> <!-- Относительный адрес -->
<link rel="shortcut icon" href="ico/favicon.png" sizes="32x32" /> <!-- Относительный адрес -->
<base href="http://dev.hive.pro" /> <!-- Абсолютный адрес -->

<p><a href="https://ru.wikipedia.org/wiki/URL"></a></p> <!-- Внешний адрес -->

Как стало ясно из примера, внешний адрес — это адрес, ведущий на сторонний сайт. Он включает в себя протокол (http:// или https://), собственно адрес сайта (возможно, с поддоменами) ru.wikipedia.org (в данном случае частица ru. — это поддомен) и последующими разделами сайта (папка wiki, в ней папка URL).

Каждый слеш после имени сайта, но до символа «?» означает папку.

Ещё в адресе могут встретиться конструкции, типа get-запросов, например index.php?q=51. А также порты, например examplesite.ru:8080. Или якоря, например index.php#section01. Но об всём этом позже.

Абсолютный адрес

Абсолютный адрес — это внутренний адрес сайта. Он может начинаться как со слеша /, что означает корень сайта, так и с полного URL-адреса, включающего в себя протокол, поддомены, если есть, и имя сайта. В последнем случае, структура его аналогична структуре внешнего адреса. В примере выше в теге <base /> вы можете видеть абсолютный адрес. Кстати, тег <base /> указывает, что для данной страницы все относительные адреса будут интерпретироваться относительно указанного в атрибуте href URLа. То есть сам файл может находиться по адресу http://www.site.ru/folder1/folder2/index.html, но если в <base /> параметр href равен http://www.site.ru/, то иконка сайта <link rel="shortcut icon" href="ico/favicon.png" /> будет искаться по адресу http://www.site.ru/ico/favicon.png. Если <base /> не задать явно, то браузер запросит иконку из http://www.site.ru/folder1/folder2/ico/favicon.png.

Если тег <base /> не указан, то мы всё равно можем указать абсолютный путь к файлу иконки (а так же файлу стиля, картинки и т.п., не принципиально) так: /ico/favicon.png.

Относительный адрес

На картинке ниже изображено дерево файловой системы сайта с некоторыми открытыми папками. Оно нам понадобится для примеров.

css/style.css Самый распространённый вариант относительного адреса. Он показывает путь относительно текущего файла.

./css/style.css То же самое, только длиннее.

../ Когда требуется выйти на уровень выше, при этом мы не знаем, как называется папка уровнем выше или каково её положение относительно корня. Самый живой пример, допустим из /css/style.css мы подключаем файлы шрифтов в /fonts/. В этом случае в CSS файле мы напишем следующий код.

@font-face {
	font-family:"glyphicons"; /* Как будет называться шрифт, когда будем его определять для тегов */
		src:url(../fonts/glyphicons-halflings-regular.eot);
		src:url(../fonts/glyphicons-halflings-regular.eot#iefix) format("embedded-opentype"),
			url(../fonts/glyphicons-halflings-regular.woff) format("woff"),
			url(../fonts/glyphicons-halflings-regular.ttf) format("truetype"),
			url(../fonts/glyphicons-halflings-regular.svg#fontello) format("svg");
	font-weight:normal; /* Начертание, бывает 100 - очень тонкий, 200 - чуть толще и т.д. до 900. Основные - это 400, можно указать normal вместо 400, и 700, он же bold (на самом деле должен быть semibold или ПОЛУжирный) */
	font-style:normal; /* Стиль. Бывает ещё italic - курсивый, oblique - наклонный (немного отличается от предыдущего) и inherit - наследуется от родителя */
}

Или разбирая адрес ../fonts/glyphicons-halflings-regular.eot на части:

  1. ../ — подняться на уровень выше.
  2. fonts/ — перейти вниз, в папку fonts.
  3. glyphicons-halflings-regular.eot — целевой файл.

Конструкцию ../ можно указывать несколько раз, поднимаясь в дереве документов всё выше: ../../../folder. Но такое редко встречается, обычно выше двух уровней не приходится подниматься, если файловая структура проекта не сложна.

Тег style, @import, inline стили

Существуют другие пути подключения CSS-файлов, кроме тега <link />.

Стили можно включать прямо в разделе head в теге <style>.

<!DOCTYPE html>

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Вёрстка - введение</title>
	<link rel="shortcut icon" href="ico/favicon.png" sizes="32x32" />
	<style>
		html, body {
			min-width:320px;
			font-size:16px;
			margin:0;
			padding:0;
			height:100%;
		}
		body {
			font-family:Roboto, Calibri, Arial, sans-serif;
			color:#252525;
		}
		h1 {
			font-size:36px;
			line-height:48px;
			text-align:center;
			margin-bottom:12px;
		}
	</style>

</head>

<body>

	<h1>Привет мир!</h1>

</body>

</html>

Ещё есть конструкция @import, подобно тому, как @font-face подключает шрифты, она подключает стилевые файлы.

<!DOCTYPE html>

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Вёрстка - введение</title>
	<link rel="shortcut icon" href="ico/favicon.png" sizes="32x32" />
	<style>
		@import url("css/style.css");
	</style>

</head>

<body>

	<h1>Привет мир!</h1>

</body>

</html>

Её можно использовать непосредственно из файла стилей для подключения ещё одного файла.

@import url("monokai-sublime.css");

Внутри CSS-файла @import не разрешено вставлять после любых объявлений кроме @charset или другого @import. @charset устанавливает кодировку файла стилей. Браузеры давно уже сами определяют её верно. Но раньше в начале стилевого файла можно было встретить надпись:

@charset "windows-1251";

Стили можно включать непосредственно в тег. Этой практики избегаем по максимуму. Валидатор делает замечание, если стили расположены в теге инлайн. Инлайн — это так:

<!DOCTYPE html>

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Вёрстка - введение</title>
	<link rel="stylesheet" href="css/style.css" />
	<link rel="shortcut icon" href="ico/favicon.png" sizes="32x32" />

</head>

<body>

	<h1 style="color:#fff;background:#8b3fc0;padding:20px;">Привет мир!</h1>

</body>

</html>

Скрипты

Раньше было два скриптовых языка, которые можно было подключить, поэтому в теге <script> указывали параметр type="text/javascript" или type="text/vbscript". Теперь, когда стандартом стал язык JavaScript, этот параметр стал необязательным.

Тег <script> можно включать как в разделе head, так и в разделе body. Хорошим тоном считается подключать скрипты перед закрывающим тегом </body>. Дело в том, что в отличие от стилей и шрифтов, скрипт прерывает загрузку страницы, пока не загрузится целиком. Исключение делается лишь для библиотеки modernizr. Она должна находится в разделе head. Примеры подключения:

<!DOCTYPE html>

<html lang="ru">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta name="author" content="" />
	<title>Вёрстка - введение</title>
	<link rel="stylesheet" href="css/style.css" />
	<link rel="shortcut icon" href="ico/favicon.png" sizes="32x32" />
	<script src="js/modernizr.js"></script> <!-- Пример подключения скрипта в шапке -->

</head>

<body>

	<h1 id="greeting">Привет мир!</h1>

	<script> <!-- Пример inline скрипта -->
		document.getElementById("greeting").innerText = "Здравствуй мир!";
		document.getElementById("adieu").innerText = "Всем пока!";<!-- На момент выполнение этого скрипта элемент с id = adieu ещё не существует -->
	</script>

	<h2 id="adieu"></h1>

	<script src="js/jquery.min.js"></script> <!-- Пример стандартного подключения скрипта -->

</body>

</html>

Для работы примера выше не обязательно скачивать библиотеки modernizr и jQuery, хоть они и подключаются, но не используются.