Come Impostare lo Sfondo di una Pagina HTML

Co-redatto da Lo Staff di wikiHow

Se hai la necessità di inserire un'immagine in una pagina web, tutto quello di cui hai bisogno è conoscere il linguaggio HTML. Se invece hai bisogno di utilizzare un'immagine come sfondo di una pagina, occorre utilizzare sia il codice HTML sia i fogli di stile CSS. L'HTML, cioè "HyperText Markup Language" è un linguaggio di markup che permette di indicare a un browser internet come formattare, impaginare e visualizzare i contenuti all'interno di una pagina web.^{[1]
X
Fonte di ricerca} I fogli di stile CSS, cioè "Cascading Style Sheets", vengono utilizzati per modificare l'aspetto e lo stile di una pagina web.^{[2]
X
Fonte di ricerca} A questo punto non ti rimane che procurarti l'immagine da usare come sfondo della pagina e proseguire nella lettura.

Parte 1

Parte 1 di 4:

Preparare i File

1
Crea una cartella in cui memorizzare i file HTML e l'immagine da usare come sfondo. Crea una nuova cartella all'interno del computer in un punto che potrai raggiungere facilmente, inoltre assegnale un nome che sia facile da ricordare.
- Puoi scegliere di usare il nome che preferisci, ma quando si lavora con il codice HTML è meglio prendere la buona abitudine di usare nomi corti per file e cartelle, usando una sola parola che descriva perfettamente il contenuto o il ruolo dell'elemento a cui fa riferimento.
2
Salva l'immagine che userai come sfondo all'interno della cartella che hai appena creato.
- Se non ti preoccupa avere la certezza che il tuo sito web funzioni correttamente anche sui dispositivi più datati che sfruttano connessioni a internet lente, dovresti utilizzare un'immagine ad alta risoluzione come sfondo della pagina web. In alternativa, puoi optare per un'immagine semplice dai colori chiari con schemi o fantasie che si ripetono, dato che in questo modo sarà semplice leggere il testo visualizzato nella pagina.
Consiglio: se non hai a disposizione un'immagine da usare come sfondo, puoi scaricarla gratuitamente dal web. Anche in questo caso memorizzala all'interno della cartella che hai appena creato.
3
Avvia un editor di testo o un editor HTML. Per creare un file HTML è possibile utilizzare un semplice editor di testo come "Blocco note" in Windows o "TextEdit" su Mac. In alternativa, puoi usare un editor HTML della tipologia WYSIWYG (dall'inglese "What-You-See-Is-What-You-Get) dotato di interfaccia visuale come Adobe Dreamweaver.
- Se hai optato per utilizzare un editor HTML, clicca sull'opzione per creare un nuovo file HTML visibile direttamente sulla schermata iniziale del programma.
4
Clicca sul menu File. È visualizzato nella parte superiore della finestra del programma.
5
Clicca sulla voce Salva con nome (Blocco note) o Salva (TextEdit). È elencata nel menu a discesa "File". Se stai usando un PC, clicca sull'opzione Salva con nome del menu "File". Se stai usando un Mac, clicca sulla voce Salva del medesimo menu.
6
Assegna un nome al documento HTML. Normalmente la prima pagina di un normale sito web è chiamata "index", ma nessuno vieta di utilizzare il nome che si vuole. Digita il nome scelto all'interno del campo di testo "Nome file".
7
Modifica il formato del file in modo che venga salvato come documento HTML. Se stai usando un editor HTML WYSIWYG, dovrai semplicemente salvare il file. Se invece stai usando un editor di testo, come "Blocco note" o "TextEdit", per creare un file HTML dovrai seguire queste istruzioni:
- Blocco note: sostituisci l'estensione attuale del file ".txt", visibile nella parte finale del nome, con la nuova estensione ".html".
- TextEdit: usa il menu a discesa "Formato file" per selezionare l'opzione Pagina web (.html).
8
Clicca sul pulsante Salva. È collocato nell'angolo inferiore destro della finestra di dialogo di salvataggio. Il documento appena creato verrà salvato su disco sotto forma di documento HTML.

Pubblicità

Parte 2

Parte 2 di 4:

Creare il Codice HTML

1
Digita il codice <!DOCTYPE html> all'inizio del documento HTML. Il codice HTML si basa sull'utilizzo di tag per creare le varie sezioni di un documento, quindi avremo un tag di apertura e un tag di chiusura per ciascuna sezione. Qualsiasi documento HTML creato seguendo le regole standard dovrebbe sempre iniziare con la riga di codice <!DOCTYPE html>. Quest'ultima serve a indicare al browser internet che il documento in esame è a tutti gli effetti un file HTML e deve essere interpretato come tale.
2
Inserisci il tag <html> in una nuova riga del documento. Si tratta del tag di apertura della sezione del documento in cui andrà inserito tutto il codice HTML. In questo modo il browser saprà che il codice HTML avrà inizio da questo punto in poi.
3
Digita il tag <head> in una nuova riga del documento. Si tratta del tag di apertura della sezione "Head" di un documento HTML. All'interno di questa sezione vengono inseriti tutti i meta dati del documento che sono informazioni che non vengono visualizzate all'interno della pagina. In questa sezione vengono inseriti il titolo della pagina e i fogli di stile CSS che servono per formattare i contenuti della pagina e modificarne l'aspetto visivo.
4
Inserisci il codice <title>Titolo Pagina</title>. Questa coppia di tag HTML serve per definire il titolo della pagina web. Il tag "<title>" è il tag di apertura, mentre il tag "</title>" è il tag di chiusura. Tutto il testo presente all'interno dei due tag verrà interpretato come titolo della pagina. In questo caso sostituisci il testo "Titolo Pagina" con il titolo che vuoi assegnare alla tua pagina HTML. Questa informazione verrà visualizzata dal browser all'interno della linguetta della scheda relativa alla pagina web che trovi nella parte superiore della finestra.
5
Inserisci il tag </head> in una nuova riga del documento. Questo è il tag di chiusura della sezione "Head" del documento HTML. Se hai la necessità di inserire altre informazioni o fogli di stile nel tuo documento HTML, assicurati di inserirle nel codice dopo il tag "<head>" e prima del tag "</head>".
6
Digita il tag <body> in una nuova riga del documento. Si tratta del tag di apertura della sezione "Body" di un documento HTML. All'interno di questa sezione di qualsiasi pagina HTML vanno inseriti tutti i contenuti che dovranno essere visualizzati a video dal browser, come testo, immagini, pulsanti e qualsiasi altro elemento grafico che dovrà essere visibile nella pagina.
7
Digita il codice <div style="background-image:url('[percorso_immagine]');"> in una nuova linea di testo. Si tratta del tag HTML che serve per utilizzare un'immagine come sfondo della pagina. Sostituisci il parametro "[percorso_immagine]" con il percorso reale in cui hai memorizzato l'immagine da usare come sfondo. L'URL da usare in questo caso sarà l'indirizzo web del server su cui hai caricato l'immagine oppure l'indirizzo locale dove hai memorizzato l'immagine sul computer.^{[3]
X
Fonte di ricerca}
- In alternativa, puoi usare un foglio di stile CSS per usare un'immagine come sfondo della pagina.
- Quando si usa il nome dell'immagine (per esempio background-image: url("fotosfondo.png");), anziché un URL o un percorso locale, il browser web cercherà il file da usare direttamente all'interno della cartella del server web in cui è stato memorizzato il documento HTML della pagina. Se il file che contiene l'immagine da usare come sfondo è memorizzato in un'altra cartella del computer, dovrai utilizzare il percorso completo.
8
Completa il documento HTML. Se hai la necessità di aggiungere altri elementi grafici o altri contenuti, come testo, immagini, video, link, pulsanti e così via, assicurati di inserirli tutti all'interno della sezione "Body" del documento HTML.
9
Digita il tag </body> in una nuova linea del documento. Si tratta del tag di chiusura della sezione "Body" del file HTML. Quando hai finito di inserire il contenuto della pagina all'interno del codice HTML, chiudi la sezione "Body" usando il tag in oggetto.
10
Inserisci il tag </html> come ultima riga del documento. Si tratta del tag di chiusura dell'intero file HTML. Il tag in esame dovrebbe apparire come ultima riga del codice HTML.
11
Salva il file HTML. Dopo aver completato la creazione del codice HTML, clicca sul menu File e scegli l'opzione Salva per salvare tutto il tuo lavoro. Arrivato a questo punto il codice del documento HTML dovrebbe essere simile al seguente:
Pubblicità

Parte 3

Parte 3 di 4:

Usare i Fogli di Stile CSS

1
Crea un documento HTML. Usa i passaggi descritti nella seconda parte dell'articolo per creare un documento HTML standard. All'interno di quest'ultimo dovrebbero essere presenti i tag di apertura e chiusura delle seguenti sezioni: "HTML", "Head" e "Body". Per poter usare un'immagine come sfondo non hai la necessità di usare obbligatoriamente il codice HTML. Questa parte dell'articolo spiega come usare i fogli di stile per impostare un'immagine come sfondo della pagina senza dover usare il codice HTML.
2
Digita il tag <style> all'interno della sezione "Head" del codice HTML. Si tratta della sezione del documento in cui inserire i fogli di stile CSS. Il tag "<style>" va inserito nel codice dopo il tag "<head>" e prima del tag di chiusura corrispondente "</head>".
- In alternativa, puoi usare un foglio di stile CSS esterno e inserire nel codice HTML solo il link al file corrispondente.
3
Inserisci il codice body { nella riga di testo successiva del documento. In questo modo stai creando la parte del codice CSS relativa allo stile che dovrà avere la sezione "body" della pagina HMTL.
4
Inserisci il codice background-image: url('[url_immagine]'); nella riga successiva del documento. Questa riga di codice ha lo scopo di specificare l'immagine da usare come sfondo per la pagina. Sostituisci il parametro "[url_immagine]" con l'indirizzo reale dell'immagine da utilizzare.
- Quando si usa il nome dell'immagine (per esempio background-image: url("fotosfondo.png");), anziché un URL o un percorso locale, il browser web cercherà il file da usare direttamente all'interno della cartella del server web in cui è stato memorizzato il documento HTML della pagina. Se il file che contiene l'immagine da usare come sfondo è memorizzato in un'altra cartella del computer, dovrai utilizzare il percorso completo.
5
Inserisci il codice background-repeat:no-repeat; nella riga di testo successiva del documento. In questo modo si indica al browser di visualizzare l'immagine una sola volta, anziché ripeterla all'infinito.
6
Aggiungi il codice background-size: cover; nella riga successiva del documento. In questo modo indicherai al browser di usare l'immagine come sfondo per coprire tutta l'area della pagina.
7
Aggiungi la parentesi graffa chiusa } per indicare la fine della sezione "Body" del codice CSS del documento HTML. Se hai la necessità di includere altri tag CSS per modificare l'aspetto della tua pagina web, assicurati di inserirli nel documento prima della parentesi di chiusura. Digita il simbolo "}" come ultima riga di codice della sezione "Body" del file CSS per indicarne la conclusione.
8
Aggiungi il tag </style> per chiudere la sezione dedicata al codice CSS del tuo documento HTML. Dopo che avrai completato la creazione del codice CSS per gestire l'aspetto della tua pagina web aggiungi il tag di chiusura "</style>". In questo modo il browser saprà che il codice CSS della pagina è terminato.
9
Salva il file HTML. Dopo aver completato la creazione del codice HTML, clicca sul menu File e scegli l'opzione Salva per salvare tutto il tuo lavoro. Arrivato a questo punto il codice del documento HTML dovrebbe essere simile al seguente:
Pubblicità

Parte 4

Parte 4 di 4:

Visualizzare la Pagina Web

1
Clicca sul file HTML che hai creato con il tasto destro del mouse. Verrà visualizzato un menu contestuale sulla destra dell'icona del file.
2
Seleziona la voce Apri con. Verrà visualizzata una lista delle app e dei programmi che puoi usare per aprire il file HTML sul computer.
3
Seleziona il browser internet che usi normalmente per navigare nel web. Puoi aprire un file HTML usando un browser qualsiasi.
4
Esamina il risultato del tuo lavoro. Osserva l'aspetto della pagina web che hai creato per essere sicuro che tutti i contenuti siano visualizzati correttamente.
- Quando la finestra del browser apparirà sullo schermo del computer, se anziché vedere l'immagine della sfondo viene visualizzato il codice HTML, è probabile che ti sia dimenticato di modificare l'estensione ".txt" o ."rtf" in ".html" del file HTML della pagina. In questo caso prova a modificare il file HTML usando un editor di testo diverso da quello utilizzato in precedenza.
Nota: se dopo aver aperto la finestra del browser, l'immagine che hai usato come sfondo non è visibile, assicurati che il nome del file corrispondente sia digitato correttamente all'interno del documento "index.html" usando un editor di testo.
5
Modifica il codice del file HTML. Usa un editor di testo e sposta il cursore all'interno della sezione delimitata dai tag <body> </body>, quindi digita il testo Ciao mondo!. Salvando il file e aggiornando la pagina visualizzata nel browser dovresti vedere apparire la scritta "Ciao mondo!" mentre l'immagine scelta farà da sfondo.

Pubblicità