Creazione di un HTML 404! Errore Pagina Web

Ci possono essere molte ragioni per cui un utente non può accedere a un sito web. Uno di questi è conosciuto come un 404! errore. Molto semplicemente un HTML 404! il messaggio di errore è un codice di stato HTTP (Hypertext Transfer Protocol) che indica che il server non è riuscito a trovare il sito Web richiesto. In altre parole, il browser Web può connettersi con il server, ma la pagina specifica a cui si sta tentando di accedere non può essere raggiunta. In questo tutorial, costruiremo una pagina Web di errore HTML 404 per personalizzare ciò che il visitatore vede quando atterrano lì. Useremo anche alcuni CSS per migliorare ulteriormente la pagina.

Il 404! Errore

Perché il 404! Errore HTML Appare

Quando un HTTP 404 appare sullo schermo, significa che, sebbene il server sia raggiungibile, la pagina specifica che stai cercando non lo è. La pagina web è rotta o non esiste più. Il codice di errore 404 può essere visualizzato in qualsiasi browser, indipendentemente dal tipo di browser che si sta utilizzando.

Ci sono diversi motivi per cui si potrebbe ottenere un codice HTTP 404:

• Un trigger tipico per un messaggio di errore 404 è quando la pagina è stata eliminata dal sito web.
• La pagina è stata spostata su un altro URL e il reindirizzamento è stato eseguito in modo errato.
• È stato inserito un indirizzo URL errato.
• Anche se accade molto raramente, a volte il server non funziona correttamente.
• Il nome di dominio inserito non esiste più.

Sfortunatamente, i collegamenti interrotti vengono spesso lasciati per lunghi periodi di tempo dopo che la pagina è stata eliminata o spostata. Anche quando i proprietari di siti web mantengono i loro siti web, a volte il proprietario può eliminare il sito o modificare il nome del sito. Ciò significa che quando qualcuno fa clic su un link “vecchio”, non sarà più in grado di trovare quel sito. Purtroppo, a causa di molte persone mettendo URL a siti web in tutto il luogo, ci sarà in ultima analisi, i link che in realtà link da nessuna parte.

È comune che i proprietari di siti Web non controllino regolarmente i loro link esterni, il che porta gli utenti a tentare di accedere a un link morto. La manutenzione del web è essenziale per questo motivo.

Crea una pagina Web HTML “Pagina non trovata”

Se un visitatore del tuo sito Web raggiunge una pagina Web vecchia e inesistente, il server che ospita quel sito Web mostrerà un errore “404” che in pratica dice che la pagina non può essere trovata. Invece di consentire al server di mostrare un blando, pagina di errore di default, è possibile creare uno dei vostri propri e ottenere creativo come si desidera con esso.

Saltiamo in fase uno del nostro tutorial.

Passo 1: Creare una pagina Web di destinazione HTML

Iniziamo semplicemente creando una pagina HTML di base. Questa sarà la base per creare un 404 più eccitante e informativo! Pagina web di errore per i visitatori di atterrare su.

Aprire un editor di testo, salvare il file come ” shorelinesurfteam.html ” e inserire il seguente codice HTML. Salva di nuovo il tuo file al termine.

Per aiutare coloro che sono sbarcati su questo “inesistente” pagina, è possibile aggiungere alcune informazioni utili per guidarli sulla strada giusta. Forse aggiungere alcune informazioni sul motivo per cui la pagina non esiste più. Aggiungi qualcosa di simile nell’HTML. Sentiti libero di copiare il seguente codice e salvare nuovamente il tuo file html.

La seguente illustrazione identifica il testo che abbiamo aggiunto per rendere la pagina più informativa.

Per perforare il carattere del testo, aggiungiamo uno stile. Copia il seguente codice e salva nuovamente il tuo file HTML.

Aggiungere un’immagine e cambiare il colore del testo di un custom colore hex se si desidera e aggiungendo il codice HTML per fare riferimento all’immagine. L’immagine può andare anche nella tua directory principale.

Passo 2: Raccontare il Server per l’Utilizzo di HTML 404! Pagina di errore

Crea un “.htaccess” file. Questo file di testo ha lo scopo di trasmettere le istruzioni al server.

Potrebbe esserci già un .htaccess file nella cartella principale del vostro spazio di web hosting. Se c’è, scaricalo e modificalo. Potrebbe essere un file nascosto. In tal caso, potrebbe essere necessario regolare le impostazioni del server in modo da poter visualizzare questo file.

In questo “.htaccess ” file è necessario aggiungere questa riga:

Questo è tutto ciò che devi aggiungere. Non è necessario aggiungere alcun codice HTML.

Ciò che fa è dire al server che quando incontra un errore 404, dovrebbe caricare shorelinesurfteam.file html nella cartella principale.

Passo 3: Salva .htaccess File nella directory principale

Salva il tuo “.htaccess ” file e caricarlo nella cartella principale del tuo sito web. Quando il server rileva un errore non trovato, verrà visualizzata la pagina di errore.

Ora quando un visitatore trova la pagina web (per il nostro codice sopra)

Invece di vedere questo:

Vedranno la seguente pagina di errore più informativa e amichevole che hai creato.

Per far risaltare maggiormente il testo verde, è possibile aggiungere un elemento div con uno sfondo a colori in quanto tale:

Questo consente di ottenere i seguenti:

Ora, si può essere artistico come volete creare la vostra fantasia, informativo 404.pagina html. Tenere sempre a mente il visitatore della pagina per migliorare la loro esperienza.

Vedere le famiglie di font HTML per imparare a migliorare il testo, e anche controllare il Tutorial Sfondo CSS per imparare a migliorare lo sfondo della tua pagina web.

Dove andiamo?

Questa introduzione all’errore di 404 pagine dovrebbe fornire un punto di partenza per ulteriori indagini sulla gestione delle pagine Web e sugli aspetti creativi illimitati offerti da HTML. Nei prossimi blog, sarai in grado di esplorare altre aree del design HTML. Continua a essere ispirato, esplora ulteriormente e immergiti più a fondo nel mondo del web design.

Iscriviti alla nostra Introduzione al programma di programmazione Nanodegree oggi!

Inizia ad imparare