#12 - Подключение файлов

#12 - Подключение файлов

К каждому HTML файлу дополнительно подключаются другие файлы со стилями, скриптами или же картинками. Мы узнаем как можно делать такое, а также разберемся с тегом head и узнаем для чего он нужен.

Видеоурок

HTML тег head существует для создания описания страницы, а также для подключения различных стилей и скриптов. Чтобы к странице подключить CSS стили вам потребуется использовать специальный тег link, который дополнительно не требует закрывающего тега и выглядит следующим образом:

<link href="style.css" rel=stylesheet type="text/css">
В атрибуте href необходимо указывать путь к самому css файлу. Также необходимо добавлять атрибуты rel и type для указания информации о том, что конкретно находиться в подключаемом файле.

Добавление скриптов на сайт

Помимо стилей мы также можем подключать различные скрипты, которые помещаются в теге <script>. Вы можете указать атрибут src и путь к файлу со скриптами или же сразу поместить небольшой кусочек кода между тегами script.

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

Описание сайта в meta-тегах

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

К некоторым основным мета-тегам можно отнести такие теги, как: тег с описанием страницы, тег с ключевыми словами, тег с указанием кодировки сайта.

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

Онлайн редактор кода

Загрузка...

Задание к уроку

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

Большое задание по курсу

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

Также стоит посмотреть

Современная вёрстка адаптивного веб-сайта
Создание адаптивного сайта
4 урока
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Верстка сайта на HTML5 и CSS3
13 уроков
Изучение препроцессора SASS / SCSS
7 уроков
Комментарии для сайта Cackle