Главная » Уроки » Как сделать заглушку на сайт с помощью кода html

Как сделать заглушку на сайт с помощью кода html

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

Бывают случаи, что при смене дизайна или проведении технических работ на сайте, он отображается не совсем корректно.

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

Поэтому в сегодняшней статье мы будем выяснять, как сделать на сайт заглушку с помощью html.

С чего начать

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

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

Создание заглушки для сайта с помощью html

Делать страницу мы будем в Блокноте.

Для этого мы создаем новый документ и сохраняем его в созданной на предыдущем этапе папке.

Документу даем название index.html и сохраняем его: «все файлы» с кодировкой UTF-8.

Так теперь выглядит содержимое нашей папки.

как сделать заглушку на сайт html в блокноте

Теперь мы переходим непосредственно к созданию заглушки.

После сохранения файла index.html, а он у нас открыт, надо написать следующий код:

начинаем писать в html код для страницы заглушки на сайт

Чтобы случайно не потерять результаты, советую периодически сохранять изменения в файле через кнопки в меню «файл» или с помощью клавиш Ctrl + S.

Любая web–страница состоит из тегов, которые мы написали.

Теперь между тегами <head></head> мы можем написать заголовок, добавив код:

как сделать заглушку на сайт html в блокноте

После этого можно открыть страницу в браузере и посмотреть на результат.

Добавляем фоновую картинку

Для этого идем в google картинки и выбираем красивую картинку, которую можно было бы сделать фоном для страницы.

Важно: ширина картинки должна быть не менее 1920 px.

Для этого в поисковую строку вводим 1920 backgrounds и выбираем нужную картинку.

После этого мы ее открываем в полном размере и сохраняем ее (в формате jpg и называем bg) в нашу папку с картинками (images).

В качестве фонового изображения сайта я выбрала эту картинку:

красивая фоновая картинка для страницы-заглушки

Теперь надо к странице прикрепить фоновое изображение, для чего придется воспользоваться стилями CSS:

как сделать заглушку на сайт html css

В код я добавила стили: задала шрифт Arial и белый текст.

  • Теперь создадим блок, ширина которого будет составлять 900 px.
  • Поместим в него текст, а сам блок выровняем по центру.

Напишем заголовок и сам текст:

как сделать заглушку на сайт html css

Таким образом, получилось следующее:

как сделать в html и css заглушку на сайт

Теперь можно добавить контакты, чтобы пользователи смогли связаться с нами сразу, а не ждать окончания технических работ на сайте.

А пока добавим несколько блоков: для телефона, скайпа, эл. почты.

добавить контакные данные для сайта-заглушки

Поработаем со стилями

  • Выровняем заголовок по центру, немного опустим и изменим его размер.
  • Сделаем шрифт абзаца 20px и чуть отступим от заголовка.
  • В нижней части текста сделаем границу, чтобы отделить контактную информацию.
  • Блоки с контактами разместим в три столбца в центре экрана, сделаем крупнее шрифт и поменяем цвет текста.

шаблон кода для заглушки страницы для сайта

В результате мы получили красивую страницу-заглушку.

как сделать красивую фоновую страницу-заглушку на сайт

Она поможет не только спрятать косяки, которые могут проявляться во время проведения технических работ на сайте, но и удержать посетителя.

Что делать с файлом

На помощь придет файл .htaccess.

заглушка для сайта файл .htaccess

  • Эти строки надо добавить в корень сайта в файл .htaccess
  • Далее создаем файл closed.html с кодом заглушки.

И теперь все запросы будут перенаправляться на closed.html

Похожие статьи:

Как самому создать сайт html

Комментарий о “Как сделать заглушку на сайт с помощью кода html

  1. А если надо сделать заглушку на 2-х языках и более как этот момент реализовать?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*


*

Конфиденциальность гарантирована!