Erstellen eines HTML 404! Fehler Webseite
Es kann viele Gründe geben, warum ein Benutzer keinen Zugriff auf eine Website erhalten kann. Eines davon ist als 404 bekannt! Fehlermeldung. Ganz einfach ein HTML 404! die Fehlermeldung ist ein HTTP-Statuscode (Hypertext Transfer Protocol), der angibt, dass der Server die angeforderte Website nicht finden konnte. Mit anderen Worten, Ihr Webbrowser kann eine Verbindung zum Server herstellen, aber die spezifische Seite, auf die Sie zugreifen möchten, kann nicht erreicht werden. In diesem Tutorial erstellen wir eine HTML 404-Fehlerwebseite, um anzupassen, was der Besucher sieht, wenn er dort landet. Wir werden auch einige CSS verwenden, um die Seite weiter zu verbessern.
Die 404! Fehler
Warum die 404! HTML-Fehler wird angezeigt
Wenn ein HTTP 404 auf Ihrem Bildschirm angezeigt wird, bedeutet dies, dass der Server zwar erreichbar ist, die gesuchte Seite jedoch nicht. Die Webseite ist entweder defekt oder existiert nicht mehr. Der 404-Fehlercode kann in jedem Browser angezeigt werden, unabhängig vom verwendeten Browsertyp.
Es gibt mehrere Gründe, warum Sie möglicherweise einen HTTP 404-Code erhalten:
- Ein typischer Auslöser für eine Fehlermeldung 404 ist, wenn die Seite von der Website gelöscht wurde.
- Die Seite wurde zu einer anderen URL verschoben und die Umleitung wurde falsch durchgeführt.
- Sie haben eine falsche URL-Adresse eingegeben.
- Obwohl es sehr selten vorkommt, funktioniert der Server manchmal nicht.
- Der eingegebene Domainname existiert nicht mehr.
Leider bleiben defekte Links oft für längere Zeit bestehen, nachdem die Seite gelöscht oder verschoben wurde. Selbst wenn Webbesitzer ihre Websites pflegen, kann der Eigentümer die Website manchmal löschen oder den Namen der Website ändern. Dies bedeutet, dass jemand, der auf einen “alten” Link klickt, diese Site nicht mehr finden kann. Unglücklicherweise, Aufgrund vieler Leute, die überall URLs zu Websites erstellen, Es wird letztendlich Links geben, die tatsächlich zu nichts führen.
Es ist üblich, dass Eigentümer von Websites ihre externen Links nicht regelmäßig überprüfen, was dazu führt, dass Benutzer versuchen, auf einen toten Link zuzugreifen. Web-Wartung ist aus diesem Grund unerlässlich.
Erstellen Sie eine HTML-Webseite “Seite nicht gefunden”
Wenn ein Besucher Ihrer Website eine alte und nicht vorhandene Webseite erreicht, zeigt der Server, der diese Website hostet, einen “404” -Fehler an, der im Grunde besagt, dass die Seite nicht gefunden werden kann. Anstatt zuzulassen, dass der Server eine langweilige Standardfehlerseite anzeigt, können Sie eine eigene erstellen und so kreativ werden, wie Sie möchten.
Lassen Sie uns in Schritt eins unseres Tutorials springen.
Schritt 1: Erstellen Sie eine HTML-Zielwebseite
Lassen Sie uns zunächst einfach eine grundlegende HTML-Seite erstellen. Dies wird die Grundlage für die Schaffung eines aufregenderen und informativeren 404 sein! Fehler Web-Seite für Besucher zu landen.
Öffnen Sie einen Texteditor, speichern Sie die Datei als “shorelinesurfteam.html” und geben Sie den folgenden HTML-Code ein. Speichern Sie Ihre Datei erneut, wenn Sie fertig sind.
<html><head>
<style type=text/css>
</style></head>
<body>
</body></html>
Um denjenigen zu helfen, die auf dieser “nicht existenten” Seite gelandet sind, können Sie einige hilfreiche Informationen hinzufügen, um sie auf den richtigen Weg zu führen. Vielleicht fügen Sie einige Informationen hinzu, warum die Seite nicht mehr existiert. Fügen Sie so etwas in den HTML-Code ein. Kopieren Sie den folgenden Code und speichern Sie Ihre HTML-Datei erneut.
<html>
<head>
<style type=text/css>
</style></head>
<body><p>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: https://www.pleasurepointsurfclub.com/
<br><br>
If you came upon this page by mistake, try checking the URL in your web browser.</p>
</body>
</html>
Die folgende Abbildung zeigt den Text, den wir hinzugefügt haben, um die Seite informativer zu gestalten.
Um die Textschrift zu verbessern, fügen wir einen Stil hinzu. Kopieren Sie den folgenden Code und speichern Sie Ihre HTML-Datei erneut.
!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><p>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: https://www.pleasurepointsurfclub.com/
<br><br>
If you came upon this page by mistake, try checking the URL in your web browser.</p>
</body></html>
Fügen Sie ein Bild hinzu und ändern Sie Ihre Textfarbe in eine benutzerdefinierte Hex-Farbe, wenn Sie möchten, indem Sie den HTML-Code hinzufügen, um auf das Bild zu verweisen. Das Bild kann auch in Ihrem Stammverzeichnis gespeichert werden.
!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>
<p>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: https://www.pleasurepointsurfclub.com/
<br><br>
If you came upon this page by mistake, try checking the URL in your web browser.</p>
</body></html>
Schritt 2: Weisen Sie den Server an, Ihr HTML 404 zu verwenden! Fehlerseite
Erstellen Sie eine “.htaccess” Datei. Diese Textdatei dient der Weitergabe von Anweisungen an den Server.
Möglicherweise gibt es bereits eine .htaccess-Datei im Stammordner Ihres Webhosting-Bereichs. Wenn ja, laden Sie es herunter und ändern Sie es. Es kann sich um eine versteckte Datei handeln. In diesem Fall müssen Sie möglicherweise Ihre Servereinstellungen anpassen, damit Sie diese Datei anzeigen können.
In diesem “.htaccess” -Datei müssen Sie diese Zeile hinzufügen:
Fehlerdokument 404 / shorelinesurfteam.HTML-code
Dies ist alles, was Sie hinzufügen müssen. Sie müssen keinen HTML-Code hinzufügen.
Dies teilt dem Server mit, dass er das Shorelinesurfteam laden soll, wenn ein 404-Fehler auftritt.HTML-Datei im Stammordner.
Schritt 3: Speichern .htaccess-Datei in das Stammverzeichnis
Speichern Sie Ihre “.htaccess” -Datei und laden Sie sie in den Stammordner Ihrer Website hoch. Wenn der Server einen nicht gefundenen Fehler feststellt, wird Ihre Fehlerseite angezeigt.
Wenn ein Besucher nun die Webseite findet (gemäß unserem obigen Code)
Anstatt dies zu sehen:
Sie sehen die folgende informativere und freundlichere Fehlerseite, die Sie erstellt haben.
Um den grünen Text stärker hervorzuheben, können Sie ein div-Element mit farbigem Hintergrund als solches hinzufügen:
< html>
< kopf>
< stil typ = text/css>
p {
farbe: #0ecc8a;
font-gewicht: 900;
font-size: 20px;
font-familie: Helvetica, Arial, sans-serif;
}
div {
Hintergrundfarbe: grau;
}
</ stil>
</ kopf>
<körper>
<a href=”#”>< img src=”Seite.jpg”></a>
<div>
<p>Dies war eine Webseite für eine Organisation, die früher existierte. Diese Organisation existiert nicht mehr, da sie durch eine neue Organisation ersetzt wurde, um Surfkindern die Werte und die Liebe zum Meer beizubringen. Die neue Website ist: https://www.pleasurepointsurfclub.com/
< br><br>
Wenn Sie versehentlich auf diese Seite gestoßen sind, überprüfen Sie die URL in Ihrem Webbrowser.</p>
</div>
</body>
</html>
Dies wird Folgendes ergeben:
Jetzt können Sie so künstlerisch sein, wie Sie möchten, um Ihren ausgefallenen, informativen 404 zu erstellen.HTML-Seite. Denken Sie immer an den Besucher der Seite, um seine Erfahrung zu verbessern.
In den HTML-Schriftfamilien erfahren Sie, wie Sie Ihren Text verbessern können, und im CSS-Hintergrund-Tutorial erfahren Sie, wie Sie den Hintergrund Ihrer Webseite verbessern können.
Wohin als nächstes?
Diese Einführung in den 404-Seitenfehler sollte einen Ausgangspunkt für weitere Untersuchungen zum Webseitenmanagement und den unbegrenzten kreativen Aspekten von HTML bieten. In den nächsten Blogs können Sie andere Bereiche des HTML-Designs erkunden. Lassen Sie sich weiterhin inspirieren, erkunden Sie weiter und tauchen Sie tiefer in die Welt des Webdesigns ein.
Melden Sie sich noch heute für unser Intro to Programming Nanodegree-Programm an!
Lernen beginnen
Leave a Reply