Подключение статических ресурсов

Виды статики

Стили
Скрипты
Шрифты
Картинки

Подключение скриптов

1. Внутренние скрипты

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <script>
            console.log('Hello, world!');
        </script>
    </body>
</html>

2. Внешние скрипты

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
       <script src="scripts.js"></script>
    </body>
</html>

Порядок исполнения внешних скриптов

Атрибут async

<script src="scripts.js" async></script>

Атрибут defer

<script src="scripts.js" defer></script>

Мета-тэги

Для чего нужны?

Влияют на отображение страницы в поисковой выдаче
Влияют на режим отображения страниц
Фиксируют данные о странице

Группы мета-тэгов

Name

HTTP-EQUIV

keywords
description
author
copyright

charset
сontent-language

keywords

<!DOCTYPE html>
  <html>
    <head>
      <title>keywords</title>
      <meta name="keywords" content="Frontend is awesome">
    </head>
</html>

Name

<!DOCTYPE html>
  <html>
  <head>
    <title>title</title>
    <meta name="description" content="Page about markup">
  </head>
</html>

description

Name

charset

<!DOCTYPE html>
  <html>
  <head>
    <title>charset</title>
    <meta charset="UTF-8">
  </head>
</html>

HTTP-EQUIV

content-language

<!DOCTYPE html>
  <html>
    <head>
      <title>Content-Language</title>
      <meta http-equiv="content-language" content="ru">
    </head>
</html>

<!-- HTML5 -->
<html lang="ru">

HTTP-EQUIV

<meta charset="utf-8">

Поддержка максимально доступной версии IE:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

Кодировка страницы

Настройки viewport'а

<meta name="viewport"
    content="initial-scale=1.0,width=device-width"
>

Важные мета-тэги

Пример использования viewport

Подключение изображений

Виды графики

Растровые картинки (gif, jpg, png, webp)
Векторные картинки (svg, шрифты, canvas)

PPI и dppx

SVG

Не теряет качества при масштабировании.
При помощи CSS можно менять параметры (фон, например).
Весят меньше, чем растровые изображения (но здесь есть ограничения: если использовать вектор, например, для фотографий, то такие изображения станут весить в разы больше).

<svg>
    <line x1="0" y1="0" x2="200" y2="200"
        stroke-width="1" stroke="rgb(0,0,0)"
    />
</svg>

SVG Symbols

<svg viewBox="0 0 80 20" xmlns="http://www.w3.org/2000/svg">
    <!-- В  symbol описываем фигуру в виде круга.-->
    <symbol id="myDot" width="10" height="10"
        viewBox="0 0 2 2">
      <circle cx="1" cy="1" r="1" />
    </symbol>

    <!-- Выводим эту фигуру, используя ссылку на нее d="myDot"-->
    <use xlink:href="#myDot"
        x="5"  y="5" style="opacity:1.0" />
    <use xlink:href="#myDot"
        x="20" y="5" style="opacity:0.8" />
    <use xlink:href="#myDot"
        x="35" y="5" style="opacity:0.6" />
 </svg>

Спрайты

https://www.sumka-style.ru/

Пример использования спрайта

.icon {
    width: 46px;
    left: 0;
    background: url('sprite.png') -65px 0;
 }

Использование для создания hover-эффекта

.icon {
    width: 45px;
    left: 0;
    background: url('sprite.png') -65px 0;
}

.icon:hover {
    width: 46px;
    left: 0;
    background: url('sprite.png') -110px 0;
}

Подключение изображений

Добавление картинки в html-страницу с помощью тега <img>

<img src="./images/img.png" alt="Растровая картинка">

Добавление картинки как бэкграунда

.main {
  background-image: url(./images/img.png);
}