HTML 404: n luominen! Virhe Web Page

voi olla monia syitä, miksi käyttäjä ei voi päästä verkkosivustolle. Yksi näistä tunnetaan nimellä 404! virhe. Yksinkertaisesti HTML 404! virheilmoitus on Hypertext Transfer Protocol (HTTP) – tilakoodi, joka osoittaa, ettei palvelin löytänyt pyydettyä verkkosivustoa. Toisin sanoen selaimesi voi muodostaa yhteyden palvelimeen, mutta tiettyä sivua, jota yrität käyttää, ei voida tavoittaa. Tässä opetusohjelmassa, rakennamme HTML 404 virhe web-sivun muokata mitä kävijä näkee, kun he laskeutuvat sinne. Käytämme joitakin CSS sekä edelleen parantaa sivun.

The 404! Virhe

miksi 404! HTML-virhe ilmestyy

kun HTTP 404 ilmestyy näytöllesi, se tarkoittaa, että vaikka palvelin on tavoitettavissa, etsimäsi sivu ei ole. Verkkosivu on joko rikki tai sitä ei enää ole. 404-virhekoodi voi näkyä missä tahansa selaimessa riippumatta käyttämästäsi selaimesta.

on useita syitä, miksi saatat saada HTTP 404-koodin:

  • yksi tyypillinen laukaisija virhe 404-viestille on, kun sivu on poistettu verkkosivustolta.
  • sivu siirrettiin toiseen URL-osoitteeseen ja uudelleenohjaus tehtiin väärin.
  • annoit väärän URL-osoitteen.
  • vaikka sitä tapahtuu hyvin harvoin, joskus palvelimen toimintahäiriöt.
  • annettua verkkotunnusta ei ole enää olemassa.

valitettavasti Rikkinäiset linkit jätetään usein pitkiksi ajoiksi sen jälkeen, kun sivu on poistettu tai siirretty. Vaikka web omistajat ylläpitää web-sivustoja, joskus omistaja voi poistaa sivuston, tai muuttaa sivuston nimeä. Tämä tarkoittaa sitä, että kun joku napsauttaa “vanhaa” linkkiä, hän ei enää pysty löytämään kyseistä sivustoa. Valitettavasti, koska monet ihmiset pystyttämisestä URL-osoitteita web-sivustoja kaikkialla, siellä lopulta linkkejä, jotka todella linkki mihinkään.

on tavallista, että verkkosivustojen omistajat eivät tarkista ulkoisia linkkejään säännöllisesti, mikä johtaa siihen, että käyttäjät yrittävät käyttää kuollutta linkkiä. Web huolto on välttämätöntä tästä syystä.

luo” sivua ei löydy “HTML-sivu

jos sivustosi kävijä saavuttaa vanhan ja olemattoman web-sivun, kyseistä verkkosivustoa ylläpitävä palvelin näyttää” 404 ” – virheen, joka periaatteessa sanoo, ettei sivua löydy. Sen sijaan, että antaisit palvelimen näyttää mitäänsanomattoman, oletusvirhesivun, voit luoda oman ja saada sillä niin luovaa kuin haluat.

hypätäänpä opetusohjelman ensimmäiseen vaiheeseen.

Step 1: Create an HTML Landing Web Page

Let us started by simply creating a basic HTML page. Tämä on perusta luoda entistä jännittävä ja informatiivinen 404! Error web page for visitors to land on.

avaa tekstieditori, tallenna tiedosto nimellä ” shorelinesurfteam.html ” ja laita seuraava HTML-koodi. Tallenna tiedosto uudelleen, Kun valmis.

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


</style>

</head>

<body>


</body>

</html>

auttaaksesi niitä, jotka ovat laskeutuneet tälle “olemattomalle” sivulle, voit lisätä joitakin hyödyllisiä tietoja, jotka opastavat heidät oikealle tielle. Ehkä lisätä joitakin tietoja siitä, miksi sivu ei ole enää olemassa. Lisää jotain tällaista HTML: ään. Voit vapaasti kopioida seuraavan koodin ja tallentaa html-tiedoston uudelleen.

<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>

seuraavassa kuvituksessa mainitaan teksti, jonka lisäsimme tehdäksemme sivusta informatiivisemman.

HTML-koodikuva

tekstifontin näppäilemiseksi lisätään tyyli. Kopioi seuraava koodi ja tallenna HTML-tiedosto uudelleen.

!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>

Lisää kuva ja Muuta tekstin väri mukautetun hex väri, jos haluat sekä lisäämällä HTML viitata kuvan. Kuva voi mennä myös juurihakemistoon.

!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>

Vaihe 2: Kerro palvelimelle käyttää HTML 404! Virhesivu

luo “.htaccess ” – tiedosto. Tämän tekstitiedoston tarkoituksena on välittää ohjeita palvelimelle.

saattaa jo olla .htaccess-tiedosto web hosting-tilan pääkansiossa. Jos on, lataa se ja muuta sitä. Se voi olla piilotettu tiedosto. Jos näin on, sinun on ehkä säädettävä palvelinasetuksiasi, jotta voit tarkastella tätä tiedostoa.

tässä”.htaccess ” tiedosto sinun täytyy lisätä tämä rivi:

ErrorDocument 404 / shorelinesurfteam.html

tämä on kaikki mitä sinun tarvitsee lisätä. Sinun ei tarvitse lisätä mitään HTML-koodia.

tämä kertoo palvelimelle, että kun se kohtaa 404 virheen, sen pitäisi ladata shorelinesurfteam.html-tiedosto pääkansiossa.

Vaihe 3: Tallenna .htaccess-tiedosto juurihakemistoon

Tallenna”.htaccess ” tiedosto ja ladata sen pääkansioon web-sivuston. Kun palvelin kohtaa löytämättömän virheen, virhesivusi näkyy.

nyt kun kävijä löytää verkkosivun (yllä oleva koodi)

sen sijaan, että näkisi tämän:

sample error page

he näkevät seuraavan informatiivisemman ja ystävällisemmän virhesivun, jonka olet luonut.

 otosvirhesivu

jotta vihreä teksti erottuisi paremmin, voit lisätä div-elementin väritaustalla sellaisenaan:

<html>
<head>
style type=text/css>
p {
color: #0ecc8a;
font-weight: 900;
font-size: 20px;
font-family: Helvetica, Arial, sans-serif;
}
div {
taustaväri: harmaa;
}
</tyyli>
</Pää>
< ruumis>
< a=”#”><img src= ” site.jpg ” >< / a>
<div>
<p>tämä oli olemassa olleen organisaation www-sivu. Tätä järjestöä ei enää ole, koska se on korvattu uudella organisaatiolla, joka opettaa surffilapsille meren arvoja ja rakkautta. Uusi sivusto on: https://www.pleasurepointsurfclub.com/
<br><br>
jos olet tullut tälle sivulle vahingossa, kokeile tarkistaa URL selaimessasi.</p>
</div>
</body>
</html>

näin saadaan seuraavat tulokset:

sample error page

Now, you can be as artistic as you like to create your fancy, informative 404.html-sivu. Pidä aina sivulla kävijä mielessä, jotta voit parantaa heidän kokemustaan.

katso HTML-Kirjasinperheet oppiaksesi parantamaan tekstiäsi, ja tutustu myös CSS Background Tutorialiin oppiaksesi parantamaan verkkosivusi taustaa.

minne seuraavaksi?

tämän johdannon 404 sivun virheeseen pitäisi olla lähtökohta lisäselvityksille verkkosivujen hallinnasta ja HTML: n tarjoamista rajoittamattomista luovista näkökohdista. Seuraavissa blogeissa, voit tutkia muita alueita HTML design. Edelleen innoittamana, tutkia edelleen ja sukeltaa syvemmälle maailmaan web design.

Ilmoittaudu tänään Nanodegree-ohjelman Introomme!

Aloita Opiskelu

Leave a Reply