Может быть много причин, по которым пользователь не может получить доступ к веб-сайту. Один из них известен как 404! ошибка. Проще говоря, HTML 404! Сообщение об ошибке — это код состояния протокола передачи гипертекста (HTTP), указывающий, что серверу не удалось найти запрошенный веб-сайт.
Другими словами, ваш веб-браузер может подключиться к серверу, но конкретная страница, к которой вы пытаетесь получить доступ, не может быть достигнута. В этом уроке мы создадим веб-страницу с ошибкой HTML 404, чтобы настроить то, что увидит посетитель, когда он попадет на нее. Мы также будем использовать немного CSS для дальнейшего улучшения страницы.
404! Ошибка
Почему 404! Появляется ошибка HTML Когда на вашем экране появляется HTTP 404, это означает, что, хотя сервер доступен, конкретная страница, которую вы ищете, недоступна. Веб-страница либо сломана, либо больше не существует. Код ошибки 404 может появиться в любом браузере, независимо от типа используемого вами браузера.
Существует несколько причин, по которым вы можете получить код HTTP 404:
Типичным поводом для появления сообщения об ошибке 404 является удаление страницы с веб-сайта.
Страница была перенесена на другой URL-адрес, и перенаправление было выполнено неправильно.
Вы ввели неправильный URL-адрес.
Хотя это случается очень редко, иногда сервер дает сбои.
Введенное доменное имя больше не существует.
К сожалению, неработающие ссылки часто остаются в течение длительного времени после удаления или перемещения страницы. Даже если владельцы веб-сайтов поддерживают свои веб-сайты, иногда владелец может удалить сайт или изменить имя сайта. Это означает, что когда кто-то нажимает на «старую» ссылку, он больше не сможет найти этот сайт. К сожалению, из-за того, что многие люди повсюду размещают URL-адреса веб-сайтов, в конечном итоге появятся ссылки, которые на самом деле ведут в никуда.
Владельцы веб-сайтов часто не проверяют свои внешние ссылки регулярно, что приводит к тому, что пользователи пытаются получить доступ к неработающей ссылке. По этой причине обслуживание веб-сайтов имеет важное значение.
Создайте веб-страницу HTML «Страница не найдена»
Если посетитель вашего веб-сайта попадает на старую и несуществующую веб-страницу, сервер, на котором размещен этот веб-сайт, отобразит ошибку «404», которая, по сути, говорит о том, что страница не может быть найдена. Вместо того, чтобы позволять серверу показывать стандартную страницу ошибок по умолчанию, вы можете создать свою собственную и проявить к ней столько творчества, сколько захотите.Давайте перейдем к первому шагу нашего урока.
Шаг 1. Создайте целевую веб-страницу HTML Давайте начнем с простого создания базовой HTML-страницы. Это станет основой для создания более увлекательного и информативного 404! Веб-страница с ошибкой, на которую могут попасть посетители.
Откройте текстовый редактор, сохраните файл как « shorelinesurfteam.html » и вставьте следующий HTML-код. Когда закончите, сохраните файл еще раз.
<html>
<head>
<style type=text/css>
</style>
</head>
<body>
</body>
</html>
Чтобы помочь тем, кто попал на эту «несуществующую» страницу, вы можете добавить некоторую полезную информацию, которая направит их на правильный путь. Возможно, добавьте некоторую информацию о том, почему страница больше не существует. Добавьте что-то подобное в HTML. Не стесняйтесь скопировать следующий код и повторно сохранить HTML-файл.
<html>
<head>
<style type=text/css>
</style>
</head>
<body>
This was a web page for an organization that used to exist. This organization no longer exists as it has been replaced with a new organization to teach surf kids the values and love of the ocean. The new site is: pleasurepointsurfclub
If you came upon this page by mistake, try checking the URL in your web browser.
</body>
</html>
На следующей иллюстрации показан текст, который мы добавили, чтобы сделать страницу более информативной.
Чтобы увеличить шрифт текста, давайте добавим стиль . Скопируйте следующий код и повторно сохраните HTML-файл.
<!DOCTYPE html>
<html>
<head>
<style type=text/css>
p { color: blue;
font-weight: 900;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
Это была веб-страница существовавшей раньше организации. Эта организация больше не существует, поскольку ее заменила новая организация, которая обучает детей серфингу ценностям и любви к океану. Новый сайт: pleasurepointsurfclub.
Если вы попали на эту страницу по ошибке, попробуйте проверить URL-адрес в своем веб-браузере.
</html>
Добавьте изображение и измените цвет текста на собственный шестнадцатеричный цвет, если хотите, добавив HTML-код для ссылки на изображение. Изображение также может находиться в вашем корневом каталоге.
<!DOCTYPE html> <html>
<head>
<style type=text/css>
p { color: #0ecc8a;
font-weight: 900;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
}
</style>
</head>
<body>
<a href="#"><img src="site.jpg"></a>
This was a web page for an organization that used to exist. This organization no longer exists as it has been replaced with a new organization to teach surf kids the values and love of the ocean. The new site is: pleasurepointsurfclub
If you came upon this page by mistake, try checking the URL in your web browser.
</body>
</html>
Шаг 2. Скажите серверу, чтобы он использовал ваш HTML 404! Страница ошибки
Создайте файл « .htaccess ». Этот текстовый файл служит для передачи инструкций на сервер.
Возможно, в корневой папке вашего веб-хостинга уже есть файл .htaccess. Если есть, скачайте его и исправьте. Это может быть скрытый файл. В этом случае вам может потребоваться изменить настройки вашего сервера, чтобы вы могли просмотреть этот файл.
В этот файл « .htaccess » вам нужно будет добавить следующую строку:
Ошибка Документ 404 /shorelinesurfteam.html
Это все, что вам нужно добавить. Вам не нужно добавлять HTML-код.
Это сообщает серверу, что при обнаружении ошибки 404 он должен загрузить файлshorelinesurfteam.html в корневую папку.
Шаг 3. Сохраните файл .htaccess в корневом каталоге.
Сохраните файл « .htaccess » и загрузите его в корневую папку вашего веб-сайта. Когда сервер обнаружит необнаруженную ошибку, будет показана ваша страница с ошибкой.
Теперь, когда посетитель находит веб-страницу (согласно нашему коду выше)
Вместо того, чтобы увидеть это:
Они увидят следующую, более информативную и дружелюбную страницу ошибок, которую вы создали.
Чтобы зеленый текст выделялся больше, вы можете добавить элемент div с цветным фоном:
<html>
<head>
<style type=text/css>
p {
color: #0ecc8a;
вес шрифта: 900;
размер шрифта: 20 пикселей;
семейство шрифтов: Helvetica, Arial, без засечек;
}
<div> {
цвет фона: серый;
}
</style>
</head>
<body>
<a href="#"><img src="site.jpg"></a>
<div>
Это была веб-страница организации, которая использовала существовать. Эта организация больше не существует, поскольку ее заменила новая организация, которая обучает детей серфингу ценностям и любви к океану. Новый сайт: https://www.pleasurepointsurfclub.com/
Если вы попали на эту страницу по ошибке, попробуйте проверить URL-адрес в своем веб-браузере.
</body>
</html>
Это даст следующее:
Теперь вы можете проявлять столько творчества, сколько захотите, создавая свою необычную информативную страницу 404.html. Всегда помните о посетителе страницы, чтобы улучшить его впечатления.
См. раздел «Семейства шрифтов HTML» , чтобы узнать, как улучшить текст, а также ознакомьтесь с учебником по фону CSS , чтобы узнать, как улучшить фон вашей веб-страницы.
