Strona typu 404

20 lutego, 2012 w kategoriach: Web developing, HTML, xHTML, .htacces

2,139 2
Dane:
  • Czas pracy: 15 minut
  • Poziom: Podstawowy
Opis:

Poradnik przedstawiający jak wykonać własną stronę błędu 404.

Pliki do pobrania

Pokaż/Ukryj wszystko

Witam. W tym poradniku opiszę jak wykonać własną stronę błędu 404 – Not found. Błąd ten ukazuje nam się, gdy dana stronie nie została znaleziona.

Efekt końcowy:
Alt image2

Zapraszam do kolejnego kroku, gdzie stworzymy plik htaccess. ;)


Wydawnictwo Strefa Kursów

.htaccess – domyślna nazwa pliku konfiguracyjnego serwera Apache, który umożliwia zmianę konfiguracji dla konkretnego katalogu. Plik może zostać utworzony w każdym katalogu. (wiki)

Otwórzmy więc notatnik. Wklejmy do niego instrukcję:

ErrorDocument 404 /404.html

Gdzie ‚404.html’ to nasza strona błędu. Co ciekawe możesz tworzyć strony także dla innych błędów tj 403.

Zapiszmy więc nasz plik jako ‚.htaccess’ (ważna kropka) w kodowaniu ANSI. Typ zaznaczamy na ‚wszystkie pliki’.
Alt img1
Plik konfiguracyjny został już stworzony. Musimy go teraz wrzucić na nasz serwer oraz utworzyć stronę 404.html. Zapraszam do kolejnego kroku.

Oczywiście jeśli chcemy importujemy plik css. Ja jednak na potrzeby poradnika tego robić nie będę, gdyż ostyluję tylko nagłówek, co mogę w łatwy sposób zrobić w kodzie HTML.

Tworzymy podstawową strukturę:

<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fatal error</title>
</head>

W sekcji body implementujemy styl w typie css i do niego wrzucamy nasz nagłówek (h2).

<body>
<style type="text/css">
h2 {
color: #C00;
text-align: center;
}
</style>

No i oczywiście umieszczamy nasz nagłówek.

<h2>Błąd typu 404. Nie znaleziono poszukiwanej strony. Spróbuj wpisać poprawny adres.</h2>

Kończymy sekcję body oraz html.

</body>
</html>

Wgrywamy obydwa pliki na serwer. W zależności, gdzie posiadamy hosting wpisujemy do naszej przeglądarki adres strony, dołączając do niej ‚/’ i wymyśloną nazwę pliku np.
www.nasz-adres.pl/asdasd.html
Powinniśmy uzyskać taki rezultat:
Alt image2
Zachęcam do używania tego małego triku, gdyż nasza strona będzie ładniej, schludniej wyglądać.

Pozdrawiam, Fisz ;)

Pokaż/Ukryj wszystko

Tutorial się podobał? Podziel się z innymi:

Dyskusja (2 wypowiedzi)

Dodaj odpowiedź

Dodaj komentarz