Tworzenie HTML 404! Błąd strona internetowa
może być wiele powodów, dla których Użytkownik nie może uzyskać dostępu do strony internetowej. Jeden z nich jest znany jako 404! błąd. Po prostu HTML 404! komunikat o błędzie to kod stanu protokołu HTTP (Hypertext Transfer Protocol) wskazujący, że serwer nie może znaleźć żądanej strony internetowej. Innymi słowy, twoja przeglądarka internetowa może połączyć się z serwerem, ale nie można uzyskać dostępu do konkretnej strony, do której próbujesz uzyskać dostęp. W tym samouczku zbudujemy stronę błędu HTML 404, aby dostosować to, co widzi odwiedzający, gdy tam wyląduje. Będziemy również używać CSS do dalszego ulepszania strony.
404! Błąd
dlaczego 404! Błąd HTML pojawia się
gdy na ekranie pojawia się HTTP 404, oznacza to, że chociaż serwer jest dostępny, konkretna strona, której szukasz, nie jest dostępna. Strona jest albo zepsuta, albo już nie istnieje. Kod błędu 404 może pojawić się w dowolnej przeglądarce, niezależnie od typu używanej przeglądarki.
istnieje kilka powodów, dla których możesz otrzymywać kod HTTP 404:
- jednym z typowych wyzwalaczy Komunikatu o błędzie 404 jest usunięcie strony z witryny.
- strona została przeniesiona pod inny adres URL i przekierowanie zostało wykonane nieprawidłowo.
- podałeś nieprawidłowy adres URL.
- chociaż zdarza się to bardzo rzadko, czasami serwer działa nieprawidłowo.
- wprowadzona nazwa domeny już nie istnieje.
niestety niedziałające linki są często pozostawiane na dłuższy czas po usunięciu lub przeniesieniu strony. Nawet jeśli właściciele stron internetowych utrzymują swoje witryny internetowe, czasami właściciel może usunąć witrynę lub zmienić jej nazwę. Oznacza to, że gdy ktoś kliknie “Stary” link, nie będzie już w stanie znaleźć tej strony. Niestety, ze względu na wiele osób umieszczających adresy URL do stron internetowych w całym miejscu, ostatecznie pojawią się linki, które faktycznie prowadzą donikąd.
często właściciele stron internetowych nie sprawdzają regularnie swoich linków zewnętrznych, co prowadzi do tego, że użytkownicy próbują uzyskać dostęp do martwego linku. Utrzymanie sieci jest niezbędne z tego powodu.
Utwórz stronę HTML” nie znaleziono strony ”
jeśli odwiedzający Twoją witrynę osiągnie starą i nieistniejącą stronę internetową, serwer hostujący tę witrynę pokaże błąd “404”, który zasadniczo mówi, że strony nie można znaleźć. Zamiast pozwalać serwerowi na wyświetlanie mdłej, domyślnej strony błędu, możesz stworzyć własną i uzyskać z nią tak kreatywną, jak chcesz.
przejdźmy do pierwszego kroku naszego samouczka.
Krok 1: Utwórz stronę docelową HTML
zacznijmy od stworzenia podstawowej strony HTML. Będzie to podstawa do stworzenia bardziej ekscytującego i pouczającego 404! Błąd strony internetowej dla odwiedzających, aby wylądować na.
otwórz edytor tekstu, Zapisz plik jako ” shorelinesurfteam.html ” i wstawić następujący kod HTML. Zapisz plik ponownie po zakończeniu.
<html><head>
<style type=text/css>
</style></head>
<body>
</body></html>
aby pomóc tym, którzy wylądowali na tej “nieistniejącej” stronie, możesz dodać kilka przydatnych informacji, aby poprowadzić ich na właściwej drodze. Być może dodaj informacje, dlaczego strona już nie istnieje. Dodaj coś takiego do HTML. Możesz skopiować poniższy kod i ponownie zapisać plik html.
<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>
Poniższa ilustracja identyfikuje tekst, który dodaliśmy, aby strona była bardziej informacyjna.
aby podkręcić czcionkę tekstu, dodajmy styl. Skopiuj poniższy kod i ponownie zapisz plik 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><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>
Dodaj obraz i zmień kolor tekstu na niestandardowy kolor szesnastkowy, jeśli chcesz, dodając kod HTML, aby odnieść się do obrazu. Obraz może również znaleźć się w katalogu głównym.
!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>
Krok 2: Powiedz serwerowi, aby użył twojego HTML 404! Strona błędu
Utwórz “.htaccess” plik. Ten plik tekstowy służy do przekazywania instrukcji do serwera.
może już być .plik htaccess w folderze głównym Twojej przestrzeni hostingowej. Jeśli tak, pobierz go i popraw. Może to być ukryty plik. Jeśli tak, konieczne może być dostosowanie ustawień serwera, aby można było wyświetlić ten plik.
w tym “plik htaccess ” musisz dodać tę linię:
ErrorDocument 404 / shorelinesurfteam.html
to wszystko, co musisz dodać. Nie musisz dodawać żadnego kodu HTML.
to, co robi, to mówi serwerowi, że gdy napotka błąd 404, powinien załadować shorelinesurfteam.plik html w folderze głównym.
Krok 3: Zapisz .plik htaccess do katalogu głównego
Zapisz “.htaccess ” plik i przesłać go do folderu głównego witryny sieci web. Gdy serwer napotka błąd nie znaleziony, zostanie wyświetlona strona błędu.
teraz, gdy odwiedzający znajdzie stronę (według naszego kodu powyżej)
zamiast tego:
zobaczysz następującą, bardziej pouczającą i przyjazną stronę błędu, którą utworzyłeś.
aby zielony tekst wyróżniał się bardziej, możesz dodać element div z kolorowym tłem jako taki:
<html >
<head>
<style type=text/css>
p {
color: #0ecc8a;
font-weight: 900;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
}
div {
background-color: gray;
}
</styl>
</Głowa>
<ciało>
<a href=”#”><img src = ” strona.jpg”></a>
<div>
<p>to była strona internetowa dla organizacji, która kiedyś istniała. Ta organizacja już nie istnieje, ponieważ została zastąpiona nową organizacją, która uczy surf kids wartości i miłości do oceanu. Nowa strona jest: https://www.pleasurepointsurfclub.com/
<br>< br>
jeśli trafiłeś na tę stronę przez pomyłkę, spróbuj sprawdzić adres URL w przeglądarce.</p>
</div>
</body>
</html>
da to następujące rezultaty:
teraz możesz być tak artystyczny, jak chcesz, aby stworzyć swój fantazyjny, pouczający 404.strona html. Zawsze należy pamiętać o odwiedzającym stronę, aby poprawić ich wrażenia.
Zobacz rodziny czcionek HTML, aby dowiedzieć się, jak poprawić swój tekst, a także sprawdź samouczek CSS Background, aby dowiedzieć się, jak poprawić tło swojej strony internetowej.
gdzie dalej?
to wprowadzenie do błędu strony 404 powinno stanowić punkt wyjścia do dalszych badań nad zarządzaniem stroną internetową i nieograniczonymi kreatywnymi aspektami, które oferuje HTML. W kolejnych blogach będziesz mógł zgłębić inne obszary projektowania HTML. Kontynuuj inspirację, eksploruj dalej i zanurz się głębiej w świat projektowania stron internetowych.
Zapisz się do naszego programu Intro to Programming Nanodegree już dziś!
Rozpocznij Naukę
Leave a Reply