HTML5: Подключение CSS и JS файлов — руководство для начинающих

Подключение CSS файлов с помощью тега <link>

Для подключения файлов CSS используется тег <link>. Этот тег необходимо размещать в <head> HTML-документа. Его структура следующая:

<link>

Сам по себе тег <link> не выполняет никаких действий без атрибутов. Необходимые атрибуты:

  • rel="stylesheet": указывает, что подключаемый файл — таблица стилей.
  • href="…": указывает путь к CSS-файлу. Путь может быть абсолютным (полный URL файла на другом сайте) или относительным (путь к файлу внутри проекта).

Например, для файла main.css в папке css проекта используется следующий код:

<link rel=»stylesheet» href=»css/main.css»>

Перезагрузка страницы не приведёт к видимым изменениям, если файл main.css пуст.

Подключение JavaScript файлов с помощью тега <script>

Для подключения JavaScript файлов используется тег <script>. Его можно размещать как в <head>, так и в <body>. Рекомендуется размещать его в конце <body>, перед закрывающим тегом </body>. Это связано с тем, что JavaScript может замедлять загрузку страницы. Размещение в конце <body> обеспечивает загрузку всего HTML-кода перед выполнением JavaScript.

<script>

Внутри тега <script> можно писать JavaScript-код:

function myFunction() {
  // ...ваш код...
}

Или подключать внешний JavaScript-файл с помощью атрибута src:

  • src="…": указывает путь к JavaScript-файлу. Путь может быть абсолютным или относительным.

Например, для файла main.js в папке js проекта используется:

<script src=»js/main.js»></script>

Важные различия

Важно помнить о различиях в атрибутах:

  • Тег <link> использует атрибут href.
  • Тег <script> использует атрибут src.

Не следует путать эти атрибуты.

В этом уроке рассмотрены теги <link> для подключения CSS файлов и <script> для подключения JavaScript файлов. Рекомендуется размещать тег <script> в конце <body> для оптимизации скорости загрузки страницы.

Что будем искать? Например,программа