Legg til et bakgrunnsbilde i html: 13 trinn (med bilder)

Innhold

Trinn

Hvis du vil legge til et bilde på en nettside, trenger du bare HTML. Hvis du vil bruke et bilde som bakgrunn for en nettside, trenger du både HTML og CSS. HTML står for Hypertext Markup Language og er kode som forteller nettleseren hva den skal vise på en nettside. CSS står for Cascading Style Sheets og brukes for utseende og formatering av en nettside. Du trenger et bakgrunnsbilde hvis du vil bruke det til nettsiden din.

Trinn

Del 1 av 5: Samle inn filene dine

1. Lag en mappe for HTML-filen og bakgrunnsbildet. Lag en mappe på datamaskinen din som du enkelt kan finne på et senere tidspunkt.

Du kan gi mappen et hvilket som helst navn du vil, men hvis du jobber med HTML er det bedre å gi filer og mapper korte navn som består av ett ord.

2. Legg bakgrunnsbildet i mappen med HTML-kode. Plasser bildet du vil bruke som bakgrunn i HTML-kodemappen.

Enkle bilder med et diskret, repeterende mønster brukes best som bakgrunnsbilder slik at du fortsatt kan lese teksten i bildet.

Hvis du ikke har et bilde, kan du laste ned et gratis bakgrunnsbilde et sted. Plasser bildet i mappen med HTML-koden du opprettet.

3. Lag en HTML-fil. Åpne et tekstredigeringsprogram og lag en ny fil. Lagre filen som indeks.html.

Du kan bruke hvilket som helst tekstredigeringsprogram du vil, til og med Windows (Notepad) og Mac OS X (TextEdit) tekstredigeringsprogram.

Hvis du vil bruke et tekstredigeringsprogram dedikert til HTML-koding, klikk deretter her for å laste ned Atom, et tekstredigeringsprogram for Windows, Mac OS X og Linux.

Hvis du bruker TextEdit, klikk på Format-menyen og deretter Lag ren tekst, før du begynner å kode i HTML. Denne innstillingen sikrer at HTML-filen lastes inn riktig i nettleseren.

Tekstbehandlere som Microsoft Word er ikke egnet for koding i HTML fordi de legger til usynlige tegn og formatering som hindrer HTML-filen i å vises riktig i en nettleser.

Del 2 av 5: Skrive HTML-filen

1. Kopier og lim inn standard HTML-koden. Velg og kopier HTML-koden nedenfor, og lim den inn i den åpne indeksen.html-fil.

2. Legg til URL-en til bakgrunnsbildet. Søk i indeksen.html-fil til linjen bakgrunnsbilde: url(" ");. Plasser markøren i parentes og skriv inn filnavnet til bakgrunnsbildet. Sørg for å inkludere bakgrunnsbildeutvidelsen.

bakgrunnsbilde: url("bakgrunn.jpg");

Hvis du bruker et filnavn uten bane eller URL, vil nettleseren søke i nettsidens mappe etter bildet med det navnet. Hvis filen er i en annen mappe på systemet ditt, må du legge til hele banen til den filen.

Lagre HTML-filen.

Del 3 av 5: Vise HTML-filen

1. Åpne HTML-filen i en nettleser. Høyreklikk på indeksen.html og åpne den i nettleseren du ønsker.

Når nettleseren din åpnes og du ikke ser bildet, sørg for at bildefilnavnet er stavet riktig i indekskoden.html.

Når nettleseren åpnes og du ser HTML-kode i stedet for bakgrunnsbildet, har du indeksen.html-fil lagret som rik tekstdokument. Prøv å redigere HTML-filen i et annet tekstredigeringsprogram.

2. Rediger HTML-filen. I tekstredigeringsprogrammet plasserer du markøren mellomHei Verden!. Last inn nettleservinduet på nytt for å se teksten på toppen av bakgrunnsbildet.

Del 4 av 5: HTML-koden forklart

1. HTML- og CSS-tagger. HTML-kode består av åpne- og lukkekoder. De

2. DOCTYPE-taggen. Hver HTML-side bør starte med en

3. Rediger HTML-filen. I tekstredigeringsprogrammet plasserer du markøren mellom

4. HTML- og CSS-tagger. HTML-kode består av åpne- og lukkekoder. De

5. Titteltaggen. De

6. Stillappen. De

7. Kroppsmerket. Enhver tekst mellom

8. Rediger HTML-filen. I tekstredigeringsprogrammet plasserer du markøren mellom

Del 5 av 5: Forklaring av CSS-koden

1. Forstå CSS-koden. I indeksen din.HTML-kode, forteller CSS-kode mellom

2. Se CSS-koden.

kropp { bakgrunnsbilde: url("bakgrunn.jpg"); }

4. Hvilke deler består CSS-koden av. CSS-stiler består av to deler, velgeren og erklæringen.

kropp

bakgrunnsbilde: url("bakgrunn.jpg")

En velger kan være en hvilken som helst HTML-tag.

Erklæringer er alltid satt i klammeparenteser { }.

5. Hva er en CSS-erklæring. CSS-erklæringen består av to deler, eiendommen og verdien. Mellom seler,
bakgrunnsbilde er eiendommen (eiendommen) og url("bakgrunn.jpg") er verdien (verdi).

Egenskapen spesifiserer hva som legges inn i en stil, og verdien spesifiserer hvor mye en stil brukes på den egenskapen.

Eiendommen og dens verdi er alltid atskilt med et kolon.

CSS-deklarasjoner ender alltid med semikolon.