Aggiungi un'immagine di sfondo a html: 13 passaggi (con immagini)

Contenuto

Passi

Se vuoi aggiungere un`immagine a una pagina web, tutto ciò di cui hai bisogno è HTML. Se vuoi usare un`immagine come sfondo per una pagina web, hai bisogno sia di HTML che di CSS. HTML sta per Hypertext Markup Language ed è un codice che dice al browser cosa visualizzare su una pagina web. CSS sta per Cascading Style Sheets e viene utilizzato per l`aspetto e la formattazione di una pagina Web. Avrai bisogno di un`immagine di sfondo se desideri utilizzarla per la tua pagina web.

Passi

Parte 1 di 5: Raccogliere i tuoi file

1. Crea una cartella per il file HTML e l`immagine di sfondo. Crea una cartella sul tuo computer che potrai trovare facilmente in un secondo momento.

Puoi dare alla cartella qualsiasi nome tu voglia, ma se stai lavorando con HTML è meglio dare a file e cartelle nomi brevi che consistono in una parola.

2. Metti l`immagine di sfondo nella cartella con il codice HTML. Posiziona l`immagine che desideri utilizzare come sfondo nella cartella del codice HTML.

Le immagini semplici con uno schema discreto e ripetuto vengono utilizzate al meglio come immagini di sfondo in modo da poter ancora leggere il testo nell`immagine.

Se non hai un`immagine, puoi scaricare uno sfondo gratuito da qualche parte. Posiziona quell`immagine nella cartella del codice HTML che hai creato.

3. Crea un file HTML. Apri un editor di testo e crea un nuovo file. Salva il file come indice.html.

Puoi utilizzare qualsiasi editor di testo che desideri, anche gli editor di testo di Windows (Notepad) e Mac OS X (TextEdit).

Se vuoi usare un editor di testo dedicato alla codifica HTML, quindi clicca qui per scaricare Atom, un editor di testo per Windows, Mac OS X e Linux.

Se stai usando TextEdit, fai clic sul menu Formato e poi su Crea testo normale, prima di iniziare a scrivere codice in HTML. Questa impostazione garantisce che il file HTML venga caricato correttamente nel browser web.

Gli elaboratori di testi come Microsoft Word non sono adatti per la codifica in HTML perché aggiungono caratteri invisibili e formattazione che impediscono la corretta visualizzazione del file HTML in un browser web.

Parte 2 di 5: Scrittura del file HTML

1. Copia e incolla il codice HTML predefinito. Seleziona e copia il codice HTML qui sotto, quindi incollalo nel tuo indice aperto.file html.

2. Aggiungi l`URL dell`immagine di sfondo. Cerca nell`indice.html alla riga immagine di sfondo: url(" ");. Posizionare il cursore tra parentesi e quindi digitare il nome del file dell`immagine di sfondo. Assicurati di includere l`estensione dell`immagine di sfondo.

immagine di sfondo: url("sfondo.jpg");

Se utilizzi un nome file senza un percorso o un URL, il browser web cercherà nella cartella della pagina web l`immagine con quel nome. Se il file si trova in un`altra cartella sul tuo sistema, dovrai aggiungere il percorso completo a quel file.

Salva il file HTML.

Parte 3 di 5: Visualizzazione del file HTML

1. Apri il file HTML in un browser web. Fare clic con il tasto destro sull`indice.html e poi aprilo nel browser web di tua scelta.

Quando il browser si apre e non vedi l`immagine, assicurati che il nome del file dell`immagine sia scritto correttamente nel codice dell`indice.html.

Quando il browser si apre e vedi il codice HTML invece dell`immagine di sfondo, allora hai l`indice.html salvato come documento RTF. Prova a modificare il file HTML in un altro editor di testo.

2. Modifica il file HTML. Nell`editor di testo, posizionare il cursore tra iCiao mondo!. Ricarica la finestra del browser per vedere il testo sopra l`immagine di sfondo.

Parte 4 di 5: Spiegazione del codice HTML

1. Tag HTML e CSS. Il codice HTML è costituito da tag di apertura e chiusura. Il

2. Il tag DOCTYPE. Ogni pagina HTML dovrebbe iniziare con a

3. Modifica il file HTML. Nell`editor di testo, posizionare il cursore tra i

4. Tag HTML e CSS. Il codice HTML è costituito da tag di apertura e chiusura. Il

5. Il tag del titolo. Il

6. L`etichetta di stile. Il

7. L`etichetta del corpo. Qualsiasi testo tra i

8. Modifica il file HTML. Nell`editor di testo, posizionare il cursore tra i

Parte 5 di 5: Spiegazione del codice CSS

1. Comprendi il codice CSS. Nel tuo indice.Codice HTML, dice al codice CSS tra i

2. Visualizza il codice CSS.

corpo { immagine di sfondo: url("sfondo.jpg"); }

4. In quali parti è composto il codice CSS. Gli stili CSS sono costituiti da due parti, il selettore e la dichiarazione.

corpo

immagine di sfondo: url("sfondo.jpg")

Un selettore può essere qualsiasi tag HTML.

Le dichiarazioni sono sempre racchiuse tra parentesi graffe { }.

5. Che cos`è una dichiarazione CSS. La dichiarazione CSS è composta da due parti, la proprietà e il valore. Tra le parentesi graffe,
immagine di sfondo è la proprietà (proprietà) e URL("sfondo.jpg") è il valore (valore).

La proprietà specifica cosa viene versato in uno stile e il valore specifica quanto uno stile viene applicato a quella proprietà.

La proprietà e il relativo valore sono sempre separati da due punti.

Le dichiarazioni CSS terminano sempre con un punto e virgola.