Tilføj et baggrundsbillede til html: 13 trin (med billeder)

Indhold

Trin

Hvis du vil tilføje et billede til en webside, er alt hvad du behøver, HTML. Hvis du vil bruge et billede som baggrund for en webside, skal du bruge både HTML og CSS. HTML står for Hypertext Markup Language og er kode, der fortæller browseren, hvad den skal vise på en webside. CSS står for Cascading Style Sheets og bruges til udseende og formatering af en webside. Du skal bruge et baggrundsbillede, hvis du vil bruge det til din webside.

Trin

Del 1 af 5: Indsamling af dine filer

1. Opret en mappe til HTML-filen og baggrundsbilledet. Opret en mappe på din computer, som du nemt kan finde på et senere tidspunkt.

Du kan give mappen et hvilket som helst navn, du ønsker, men hvis du arbejder med HTML, er det bedre at give filer og mapper korte navne, der består af et ord.

2. Læg baggrundsbilledet i mappen med HTML-kode. Placer det billede, du vil bruge som baggrund, i HTML-kodemappen.

Simple billeder med et diskret, gentagende mønster bruges bedst som baggrundsbilleder, så du stadig kan læse teksten i billedet.

Hvis du ikke har et billede, kan du downloade et gratis tapet et sted. Placer billedet i mappen med HTML-kode, du har oprettet.

3. Opret en HTML-fil. Åbn en teksteditor og opret en ny fil. Gem filen som indeks.html.

Du kan bruge enhver teksteditor, du ønsker, selv Windows (Notesblok) og Mac OS X (TextEdit) teksteditorer.

Hvis du vil bruge en teksteditor dedikeret til HTML-kodning, så klik her at downloade Atom, en teksteditor til Windows, Mac OS X og Linux.

Hvis du bruger TextEdit, skal du klikke på Format-menuen og derefter Lav almindelig tekst, før du begynder at kode i HTML. Denne indstilling sikrer, at HTML-filen indlæses korrekt i webbrowseren.

Tekstbehandlingsprogrammer som Microsoft Word er ikke egnede til kodning i HTML, fordi de tilføjer usynlige tegn og formatering, der forhindrer HTML-filen i at blive vist korrekt i en webbrowser.

Del 2 af 5: Skrivning af HTML-filen

1. Kopiér og indsæt standard HTML-koden. Vælg og kopier HTML-koden nedenfor, og indsæt den derefter i dit åbne indeks.html-fil.

2. Tilføj URL`en til baggrundsbilledet til det. Søg i indekset.html-fil til linjen baggrundsbillede: url(" ");. Placer markøren i parentes og skriv derefter filnavnet på baggrundsbilledet. Sørg for at inkludere udvidelsen til baggrundsbilledet.

baggrundsbillede: url("baggrund.jpg");

Hvis du bruger et filnavn uden en sti eller URL, vil webbrowseren søge i websidens mappe efter billedet med det navn. Hvis filen er i en anden mappe på dit system, skal du tilføje den fulde sti til denne fil.

Gem HTML-filen.

Del 3 af 5: Visning af HTML-filen

1. Åbn HTML-filen i en webbrowser. Højreklik på indekset.html, og åbn den derefter i den valgte webbrowser.

Når din browser åbner, og du ikke kan se billedet, skal du sørge for, at billedfilnavnet er stavet korrekt i indekskoden.html.

Når browseren åbner, og du ser HTML-kode i stedet for baggrundsbilledet, så har du indekset.html-fil gemt som RTF-dokument. Prøv at redigere HTML-filen i en anden teksteditor.

2. Rediger HTML-filen. I teksteditoren skal du placere markøren mellemHej Verden!. Genindlæs browservinduet for at se teksten oven på baggrundsbilledet.

Del 4 af 5: HTML-koden forklaret

1. HTML og CSS tags. HTML-kode består af åbne og lukke tags. Det

2. DOCTYPE-mærket. Hver HTML-side skal starte med en

3. Rediger HTML-filen. I teksteditoren skal du placere markøren mellem

4. HTML og CSS tags. HTML-kode består af åbne og lukke tags. Det

5. Titelmærket. Det

6. Stilmærket. Det

7. Kropsmærket. Enhver tekst mellem

8. Rediger HTML-filen. I teksteditoren skal du placere markøren mellem

Del 5 af 5: Forklaring af CSS-koden

1. Forstå CSS-koden. I dit indeks.HTML-kode, fortæller CSS-kode mellem

2. Se CSS-koden.

legeme { baggrundsbillede: url("baggrund.jpg"); }

4. Hvilke dele består CSS-kode af. CSS-stile består af to dele, vælgeren og erklæringen.

legeme

baggrundsbillede: url("baggrund.jpg")

En vælger kan være et hvilket som helst HTML-tag.

Erklæringer er altid omgivet af klammer { }.

5. Hvad er en CSS-erklæring. CSS-deklarationen består af to dele, egenskaben og værdien. Mellem bøjlerne,
baggrundsbillede er ejendommen (ejendommen) og url("baggrund.jpg") er værdien (værdien).

Egenskaben angiver, hvad der hældes ind i en typografi, og værdien angiver, hvor meget en typografi anvendes på egenskaben.

Ejendommen og dens værdi er altid adskilt af et kolon.

CSS-erklæringer slutter altid med et semikolon.