Добавили title, который будет отображаться во вкладке браузера.
Указали description страницы, который описывает ее суть.
Используем viewport, который необходим для масштабируемости (адаптивности) страницы.
Если обратить внимание - все добавленные мета-теги также являются базовыми в структуре HTML-страницы. Все что относится к странице ошибки - это контент, который мы добавляем внутрь тегов title и description.
Перейдем к содержимому body страницы ошибки и добавим:
Текущая структура подразумевает, что внизу нашей страницы будет заголовок (код ошибки) и ссылка на главную страницу сайта. Эти элементы обернуты в элемент, который мы прижмем вниз страницы при помощи CSS-стилей.
Также мы имеем блок overlay, который мы будем использовать для затемнения фона. Например, если мы захотим добавить изображение в качестве фона (на весь экран) - трюк с затемнением поможет тексту внизу страницы быть видимым и не сливаться с изображением.
Стили довольно простые и все что мы тут делаем - позиционируем элементы, меняем цвет фона и текста.
Для универсальности шаблона этой страницы (для использования картинок или GIF'ок в качестве полноэкранного фона) - добавим еще несколько атрибутов в файл стилей:
body { background-position: center; background-repeat: no-repeat; background-size: cover; }
Теперь можно добавлять файл в качестве фона для body и он будет красиво отцентрован и немного притемнен, чтобы текст внизу страницы хорошо читался.
Добавить фон можно через инлайновые стили или непосредственно в CSS-файл.
Для демонстрационной версии с фоновым изображением использовался API от Unsplash, который позволяет по URL (можно задать некоторые параметры) получать случайное изображение.
Для демонстрационной версии c GIF'кой в качестве фона предполагалось использование GIPHY API, но для его использования необходим ключ. Поэтому для простоты была использована прямая ссылка на GIF-анимацию.
Если подытожить - данная заметка полезна не только для создания страниц ошибок, но и любых других, где необходимо сделать при помощи HTML/CSS фон (картинка/анимация/цвет) на всю страницу.
Весь код доступен на GitHub и совершенно бесплатен. При использовании контента (картинок/анимаций) - незабывайте публиковать обратные ссылки на их авторов.
theglitchy.com использует файлы cookie, чтобы предоставлять вам наилучшие услуги на нашем веб-сайте, измерять посещаемость и эффективность, а также размещать рекламу. Продолжая использовать этот сайт, Вы соглашаетесь на использование наших файлов cookie. Подробнее