crearea unui HTML 404! Eroare pagină web
pot exista multe motive pentru care un utilizator nu poate avea acces la un site web. Unul dintre acestea este cunoscut sub numele de 404! eroare. Pur și simplu un HTML 404! mesajul de eroare este un cod de stare Hypertext Transfer Protocol (HTTP) care indică faptul că serverul nu a putut găsi site-ul solicitat. Cu alte cuvinte, browserul dvs. web se poate conecta cu serverul, dar pagina specifică pe care încercați să o accesați nu poate fi accesată. În acest tutorial, vom construi o pagină web de eroare HTML 404 pentru a personaliza ceea ce vede vizitatorul atunci când aterizează acolo. Vom folosi unele CSS, precum și pentru a îmbunătăți în continuare pagina.
404! Eroare
de ce 404! Eroare HTML apare
când apare un HTTP 404 pe ecran, înseamnă că, deși serverul este accesibil, pagina specifică pe care o căutați nu este. Pagina web este fie ruptă, fie nu mai există. Codul de eroare 404 poate apărea în orice browser, indiferent de tipul de browser pe care îl utilizați.
există mai multe motive pentru care s-ar putea să primiți un cod HTTP 404:
- un declanșator tipic pentru un mesaj de eroare 404 este atunci când pagina a fost ștearsă de pe site.
- pagina a fost mutată la o altă adresă URL și redirecționarea a fost făcută incorect.
- ați introdus o adresă URL incorectă.
- deși se întâmplă foarte rar, uneori serverul funcționează defectuos.
- numele de domeniu introdus nu mai există.
din păcate, legăturile rupte sunt adesea lăsate pentru perioade lungi de timp după ce pagina a fost ștearsă sau mutată. Chiar și atunci când proprietarii de web menține site-urile lor, uneori proprietarul poate șterge site-ul, sau schimba numele site-ului. Aceasta înseamnă că atunci când cineva face clic pe un link “vechi”, nu va mai putea găsi acel site. Din păcate, din cauza mulți oameni punerea URL-uri la site-uri web peste tot, în cele din urmă va fi link-uri care de fapt link-ul de nicăieri.
este obișnuit ca proprietarii de site-uri web să nu își verifice în mod regulat linkurile externe, ceea ce duce la utilizatorii care încearcă să acceseze o legătură moartă. Întreținerea Web este esențială din acest motiv.
creați o pagină web HTML “Page Not Found”
dacă un vizitator al site-ului dvs. web ajunge la o pagină web veche și inexistentă, serverul care găzduiește acel site web va afișa o eroare “404” care practic spune că pagina nu poate fi găsită. În loc să permiteți serverului să afișeze o pagină de eroare blandă, implicită, puteți crea una proprie și puteți obține cât de creativ doriți cu ea.
să trecem la pasul unu din tutorialul nostru.
Pasul 1: Creați o pagină web de destinație HTML
să începem prin a crea pur și simplu o pagină HTML de bază. Aceasta va fi fundamentul pentru crearea unui 404 mai interesant și mai informativ! Pagina web eroare pentru vizitatori să aterizeze pe.
deschideți un editor de text, salvați fișierul ca “shorelinesurfteam.html ” și introduceți următorul cod HTML. Salvați fișierul din nou când ați terminat.
<html><head>
<style type=text/css>
</style></head>
<body>
</body></html>
pentru a-i ajuta pe cei care au aterizat pe această pagină “inexistentă”, puteți adăuga câteva informații utile pentru a-i ghida pe calea cea bună. Poate adăugați câteva informații despre motivul pentru care pagina nu mai există. Adăugați ceva de genul acesta în HTML. Simțiți-vă liber să copiați următorul cod și să salvați din nou fișierul 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>
următoarea ilustrație identifică textul pe care l-am adăugat pentru a face pagina mai informativă.
pentru a lovi cu pumnul în sus fontul textului, să ne adăuga un stil. Copiați următorul cod și salvați din nou fișierul 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>
adăugați o imagine și schimbați culoarea textului într-o culoare hex personalizată, dacă doriți, adăugând HTML pentru a face referire la imagine. Imaginea poate merge și în directorul rădăcină.
!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>
Pasul 2: spuneți serverului să utilizeze HTML 404! Pagina de eroare
creați un “.htaccess” fișier. Acest fișier text servește scopului de a transmite instrucțiuni către server.
ar putea exista deja o .fișier htaccess în folderul rădăcină al spațiului dvs. de găzduire web. Dacă există, descărcați-l și modificați-l. Poate fi un fișier ascuns. Dacă da, poate fi necesar să ajustați setările serverului pentru a putea vizualiza acest fișier.
în acest”.htaccess ” fișier va trebui să adăugați această linie:
ErrorDocument 404 / shorelinesurfteam.html
aceasta este tot ce trebuie să adăugați. Nu trebuie să adăugați niciun cod HTML.
ceea ce face acest lucru este să spună serverului că atunci când întâlnește o eroare 404, ar trebui să încarce shorelinesurfteam.fișier html în folderul rădăcină.
Pasul 3: Salvați .fișier htaccess în directorul rădăcină
Salvați-vă “.htaccess” fișier și încărcați-l în folderul rădăcină al site-ului web. Când serverul întâlnește o eroare care nu a fost găsită, va fi afișată pagina dvs. de eroare.
acum, când un vizitator găsește pagina web (conform Codului nostru de mai sus)
în loc să vadă acest lucru:
vor vedea următoarea pagină de eroare mai informativă și mai prietenoasă pe care ați creat-o.
pentru a face textul verde iasă în evidență mai mult, puteți adăuga un element div cu un fundal de culoare ca atare:
<html >
<cap>
<Tip Stil=text/css>
p {
culoare: #0ecc8a;
font-greutate: 900;
font-size: 20px;
font-familie: Helvetica, Arial, sans-serif;
}
div {
fundal-culoare: gri;
}
</stil>
</cap>
<corp>
< a href=”#”><img src= ” site.jpg ” ></a>
<div>
<p> aceasta a fost o pagină web pentru o organizație care a existat. Această organizație nu mai există, deoarece a fost înlocuită cu o nouă organizație pentru a învăța copiii de surf valorile și dragostea oceanului. Noul site este: https://www.pleasurepointsurfclub.com/
<br><br>
dacă ați dat peste această pagină din greșeală, încercați să verificați adresa URL din browserul dvs. web.</p>
</div>
</body>
</html>
acest lucru va produce următoarele:
acum, puteți fi la fel de artistic cum doriți pentru a crea fantezie dvs., informativ 404.pagina html. Păstrați întotdeauna vizitatorul paginii în minte pentru a-și îmbunătăți experiența.
consultați familiile de fonturi HTML pentru a afla cum să vă îmbunătățiți textul și, de asemenea, consultați tutorialul de fundal CSS pentru a afla cum să îmbunătățiți fundalul paginii dvs. web.
încotro?
această introducere la eroarea de 404 pagini ar trebui să ofere un punct de plecare pentru o anchetă suplimentară asupra gestionării paginilor web și a aspectelor creative nelimitate pe care le oferă HTML. În următoarele bloguri, veți putea explora alte domenii ale designului HTML. Continuați să fiți inspirați, explorați mai departe și scufundați-vă mai adânc în lumea designului web.
Înscrieți-vă astăzi în programul nostru de programare Nanodegree!
Începeți Învățarea
Leave a Reply