vytvoření HTML 404! Chybová webová stránka

může existovat mnoho důvodů, proč uživatel nemůže získat přístup k webové stránce. Jeden z nich je známý jako 404! chyba. Jednoduše HTML 404! chybová zpráva je stavový kód Hypertext Transfer Protocol (HTTP), který indikuje, že server nemohl najít požadovanou webovou stránku. Jinými slovy, váš webový prohlížeč se může připojit ke serveru, ale konkrétní stránku, na kterou se pokoušíte získat přístup, nelze dosáhnout. V tomto tutoriálu vytvoříme webovou stránku s chybami HTML 404, abychom přizpůsobili, co návštěvník vidí, když tam přistane. Použijeme také některé CSS k dalšímu vylepšení stránky.

404! Chyba

proč 404! Zobrazí se chyba HTML

když se na obrazovce objeví HTTP 404, znamená to, že i když je server dosažitelný, konkrétní stránka, kterou hledáte, není. Webová stránka je buď rozbitá, nebo již neexistuje. Kód chyby 404 se může objevit v libovolném prohlížeči, bez ohledu na typ prohlížeče, který používáte.

existuje několik důvodů, proč byste mohli získat kód HTTP 404:

  • jedním typickým spouštěčem zprávy error 404 je, když byla stránka z webu odstraněna.
  • stránka byla přesunuta na jinou adresu URL a přesměrování bylo provedeno nesprávně.
  • zadali jste nesprávnou adresu URL.
  • i když se to stane velmi zřídka, někdy server selže.
  • zadaný název domény již neexistuje.

bohužel nefunkční odkazy jsou často ponechány po dlouhou dobu po odstranění nebo přesunutí stránky. I když majitelé webových stránek udržují své webové stránky, někdy může vlastník web smazat nebo změnit název webu. To znamená, že když někdo klikne na” starý ” odkaz, tento web již nebude moci najít. Bohužel, vzhledem k tomu, že mnoho lidí vkládá adresy URL na webové stránky všude, nakonec budou odkazy, které skutečně odkazují nikam.

je běžné, že majitelé webových stránek pravidelně nekontrolují své externí odkazy, což vede k tomu, že se uživatelé snaží získat přístup k mrtvému odkazu. Z tohoto důvodu je nezbytná údržba webu.

Vytvořte HTML webovou stránku “Stránka nenalezena”

pokud návštěvník vašeho webu dosáhne staré a neexistující webové stránky, server, který je hostitelem této webové stránky, zobrazí chybu “404”, která v podstatě říká, že stránku Nelze najít. Místo toho, aby server Zobrazit nevýrazné, výchozí chybová stránka, můžete vytvořit jeden z vašich vlastních a získat tak kreativní, jak chcete s ním.

pojďme skočit do prvního kroku našeho tutoriálu.

Krok 1: Vytvořte vstupní webovou stránku HTML

začněme jednoduše vytvořením základní stránky HTML. To bude základem pro vytvoření více vzrušující a informativní 404! Chyba webové stránky pro návštěvníky přistát na.

otevřete textový editor a uložte soubor jako ” shorelinesurfteam.html ” a vložte následující kód HTML. Po dokončení uložte soubor znovu.

<html>
<head>
<style type=text/css>


</style>

</head>

<body>


</body>

</html>

Chcete-li pomoci těm, kteří přistáli na této “neexistující” stránce, můžete přidat několik užitečných informací, které je povedou správnou cestou. Možná přidejte nějaké informace o tom, proč stránka již neexistuje. Přidejte něco takového do HTML. Neváhejte zkopírovat následující kód a znovu uložit soubor 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>

následující obrázek identifikuje text, který jsme přidali, aby byla stránka informativnější.

HTML kód image

Chcete-li vyrazit textové písmo, přidejte styl. Zkopírujte následující kód a uložte soubor 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>

přidejte obrázek a změňte barvu textu na vlastní hex barvu, pokud chcete také přidáním HTML pro odkaz na obrázek. Obrázek může jít do kořenového adresáře stejně.

!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: řekněte serveru, aby používal váš HTML 404! Chybová stránka

vytvořit “.htaccess” soubor. Tento textový soubor slouží k předávání pokynů serveru.

může již existovat .soubor htaccess v kořenové složce vašeho webhostingového prostoru. Pokud ano, stáhněte si ji a upravte ji. Může to být skrytý soubor. Pokud ano, možná budete muset upravit nastavení serveru, abyste mohli tento soubor zobrazit.

v tomto “.htaccess ” soubor budete muset přidat tento řádek:

ErrorDocument 404 / shorelinesurfteam.html

to je vše, co potřebujete přidat. Nemusíte přidávat žádný HTML kód.

co to dělá, je říct serveru, že když narazí na chybu 404, měl by načíst shorelinesurfteam.html soubor v kořenové složce.

Krok 3: Uložit .htaccess soubor do kořenového adresáře

Uložte “.htaccess ” soubor a nahrajte jej do kořenové složky vašeho webu. Když server narazí na nenalezenou chybu, zobrazí se vaše chybová stránka.

nyní, když návštěvník najde webovou stránku (podle našeho kódu výše)

místo toho, aby to viděl:

ukázková chybová stránka

zobrazí se následující informativní a přátelštější chybová stránka, kterou jste vytvořili.

vzorová chybová stránka

Chcete-li, aby zelený text vynikl více, můžete přidat prvek div s barevným pozadím jako takovým:

<html>
< head>
<style type=text / css>
p {
barva: # 0ecc8a;
font-weight: 900;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
}
div {
pozadí-Barva: Šedá;
}
</styl>
</hlava>
<tělo>
< a href=”#”><img src= ” web.jpg”></a>
<div>
< p> toto byla webová stránka pro organizaci, která dříve existovala. Tato organizace již neexistuje, protože byla nahrazena novou organizací, která učí surfovat děti hodnotám a lásce k oceánu. Nový web je: https://www.pleasurepointsurfclub.com/
<br>< br>
pokud jste na tuto stránku přišli omylem, zkuste zkontrolovat adresu URL ve webovém prohlížeči.</p>
</div>
</body>
</html>

to přinese následující:

ukázková chybová stránka

nyní můžete být tak umělecký, jak chcete vytvořit svůj efektní, informativní 404.stránka. Vždy mějte na paměti návštěvníka stránky, abyste vylepšili jejich zážitek.

podívejte se na rodiny písem HTML, kde se dozvíte, jak vylepšit text, a také se podívejte na tutoriál na pozadí CSS, kde se dozvíte, jak vylepšit pozadí vaší webové stránky.

Kam dál?

tento úvod do chyby stránky 404 by měl poskytnout výchozí bod pro další zkoumání správy webových stránek a neomezených kreativních aspektů, které HTML nabízí. V dalších blogech budete moci prozkoumat další oblasti designu HTML. Pokračujte v inspiraci, prozkoumejte další a ponořte se hlouběji do světa webdesignu.

přihlaste se do našeho úvodu k programování programu Nanodegree ještě dnes!

Začněte Se Učit

Leave a Reply