Lägg till en bakgrundsbild i html: 13 steg (med bilder)

Steg

Om du vill lägga till en bild på en webbsida behöver du bara HTML. Om du vill använda en bild som bakgrund för en webbsida behöver du både HTML och CSS. HTML står för Hypertext Markup Language och är kod som talar om för webbläsaren vad den ska visa på en webbsida. CSS står för Cascading Style Sheets och används för utseende och formatering av en webbsida. Du behöver en bakgrundsbild om du vill använda den för din webbsida.

Steg

Del 1 av 5: Samla in dina filer

1. Skapa en mapp för HTML-filen och bakgrundsbilden. Skapa en mapp på din dator som du enkelt kan hitta vid ett senare tillfälle.

Du kan ge mappen vilket namn du vill, men om du arbetar med HTML är det bättre att ge filer och mappar korta namn som består av ett ord.

2. Lägg bakgrundsbilden i mappen med HTML-kod. Placera bilden du vill använda som bakgrund i HTML-kodmappen.

Enkla bilder med ett diskret, återkommande mönster används bäst som bakgrundsbilder så att du fortfarande kan läsa texten i bilden.

Om du inte har en bild kan du ladda ner en gratis bakgrundsbild någonstans. Placera bilden i mappen med HTML-kod du skapade.

3. Skapa en HTML-fil. Öppna en textredigerare och skapa en ny fil. Spara filen som index.html.

Du kan använda vilken textredigerare du vill, även Windows (Anteckningar) och Mac OS X (TextEdit) textredigerare.

Om du vill använda en textredigerare dedikerad till HTML-kodning, klicka sedan här för att ladda ner Atom, en textredigerare för Windows, Mac OS X och Linux.

Om du använder TextEdit, klicka på Format-menyn och sedan Make Plain Text, innan du börjar koda i HTML. Den här inställningen säkerställer att HTML-filen laddas korrekt i webbläsaren.

Ordbehandlare som Microsoft Word är inte lämpliga för kodning i HTML eftersom de lägger till osynliga tecken och formatering som förhindrar att HTML-filen visas korrekt i en webbläsare.

Del 2 av 5: Skriva HTML-filen

1. Kopiera och klistra in standard HTML-koden. Välj och kopiera HTML-koden nedan och klistra sedan in den i ditt öppna index.html-fil.

2. Lägg till webbadressen till bakgrundsbilden till den. Sök i indexet.html-fil till raden bakgrundsbild: url(" ");. Placera markören inom parentes och skriv sedan filnamnet på bakgrundsbilden. Se till att inkludera bakgrundsbildtillägget.

bakgrundsbild: url("bakgrund.jpg");

Om du använder ett filnamn utan sökväg eller URL kommer webbläsaren att söka i webbsidans mapp efter bilden med det namnet. Om filen finns i en annan mapp på ditt system måste du lägga till hela sökvägen till den filen.

Spara HTML-filen.

Del 3 av 5: Visa HTML-filen

1. Öppna HTML-filen i en webbläsare. Högerklicka på indexet.html och öppna den sedan i den webbläsare du väljer.

När din webbläsare öppnas och du inte ser bilden, se till att bildens filnamn är rättstavat i indexkoden.html.

När webbläsaren öppnas och du ser HTML-kod istället för bakgrundsbilden, då har du indexet.html-fil sparad som RTF-dokument. Försök att redigera HTML-filen i en annan textredigerare.

2. Redigera HTML-filen. I textredigeraren placerar du markören mellanHej världen!. Ladda om webbläsarfönstret för att se texten ovanpå bakgrundsbilden.

Del 4 av 5: HTML-koden förklaras

1. HTML och CSS-taggar. HTML-koden består av öppna och stängda taggar. De

2. DOCTYPE-taggen. Varje HTML-sida bör börja med en

3. Redigera HTML-filen. I textredigeraren placerar du markören mellan

4. HTML och CSS-taggar. HTML-koden består av öppna och stängda taggar. De

5. Titeltaggen. De

6. Stiltaggen. De

7. Kroppsetiketten. Vilken text som helst mellan

8. Redigera HTML-filen. I textredigeraren placerar du markören mellan

Del 5 av 5: Förklara CSS-koden

1. Förstå CSS-koden. I ditt index.HTML-kod, berättar CSS-kod mellan

2. Se CSS-koden.

kropp { bakgrundsbild: url("bakgrund.jpg"); }

4. Vilka delar består CSS-koden av. CSS-stilar består av två delar, väljaren och deklarationen.

kropp

bakgrundsbild: url("bakgrund.jpg")

En väljare kan vara vilken HTML-tagg som helst.

Deklarationer är alltid omgivna av klammerparenteser { }.

5. Vad är en CSS-deklaration. CSS-deklarationen består av två delar, egenskapen och värdet. Mellan hängslen,
bakgrundsbild är fastigheten (fastigheten) och url("bakgrund.jpg") är värdet (värdet).

Egenskapen anger vad som hälls in i en stil, och värdet anger hur mycket en stil tillämpas på den egenskapen.

Egenskapen och dess värde separeras alltid med ett kolon.

CSS-deklarationer slutar alltid med semikolon.