Voeg 'n agtergrondprent by HTML: 13 stappe (met beelde)

Inhoud

Trappe

As jy `n prent by `n webblad wil voeg, is al wat jy nodig het HTML. As jy `n prent as agtergrond vir `n webblad wil gebruik, benodig jy beide HTML en CSS. HTML staan vir Hypertext Markup Language en is kode wat die blaaier vertel wat om op `n webblad te wys. CSS staan vir Cascading Style Sheets en word gebruik vir die voorkoms en formatering van `n webblad. Jy sal `n agtergrondprent nodig hê as jy dit vir jou webblad wil gebruik.

Trappe

Deel 1 van 5: Versamel jou lêers

1. Skep `n gids vir die HTML-lêer en die agtergrondprent. Skep `n vouer op jou rekenaar wat jy maklik op `n later tydstip kan vind.

Jy kan die vouer enige naam gee wat jy wil, maar as jy met HTML werk, is dit beter om lêers en vouers kort name te gee wat uit een woord bestaan.

2. Plaas die agtergrondprent in die gids met HTML-kode. Plaas die prent wat jy as agtergrond wil gebruik in die HTML-kode-lêergids.

Eenvoudige prente met `n onopvallende, herhalende patroon word die beste gebruik as agtergrondprente sodat jy steeds die teks in die prent kan lees.

As jy nie `n prent het nie, kan jy iewers `n gratis plakpapier aflaai. Plaas daardie prent in die gids van HTML-kode wat jy geskep het.

3. Skep `n HTML-lêer. Maak `n teksredigeerder oop en skep `n nuwe lêer. Stoor die lêer as indeks.html.

Jy kan enige teksredigeerder wat jy wil gebruik, selfs die Windows (Notepad) en Mac OS X (TextEdit) teksredigeerders.

As jy `n teksredigeerder wil gebruik wat toegewy is aan HTML-kodering, klik dan hier om Atom af te laai, `n teksredigeerder vir Windows, Mac OS X en Linux.

As jy TextEdit gebruik, klik op die Format-kieslys en dan Maak Plain Text, voordat jy in HTML begin kodeer. Hierdie instelling verseker dat die HTML-lêer korrek in die webblaaier laai.

Woordverwerkers soos Microsoft Word is nie geskik vir kodering in HTML nie omdat hulle onsigbare karakters en formatering byvoeg wat verhoed dat die HTML-lêer korrek in `n webblaaier vertoon word.

Deel 2 van 5: Skryf die HTML-lêer

1. Kopieer en plak die verstek HTML-kode. Kies en kopieer die HTML-kode hieronder, en plak dit dan in jou oop indeks.html lêer.

2. Voeg die URL van die agtergrondprent daarby. Soek in die indeks.html-lêer na die lyn agtergrond-prent: url(" ");. Plaas die wyser tussen hakies en tik dan die lêernaam van die agtergrondprent in. Maak seker dat u die agtergrondprentuitbreiding insluit.

agtergrond-prent: url("agtergrond.jpg");

As jy `n lêernaam sonder `n pad of URL gebruik, sal die webblaaier die webblad se gids vir die prent met daardie naam deursoek. As die lêer in `n ander vouer op jou stelsel is, sal jy die volledige pad by daardie lêer moet voeg.

Stoor die HTML-lêer.

Deel 3 van 5: Bekyk die HTML-lêer

1. Maak die HTML-lêer in `n webblaaier oop. Regskliek op die indeks.html en maak dit dan oop in die webblaaier van jou keuse.

Wanneer jou blaaier oopmaak en jy nie die prent sien nie, maak seker dat die prentlêernaam korrek in die indekskode gespel is.html.

Wanneer die blaaier oopmaak en jy sien HTML-kode in plaas van die agtergrondprent, dan het jy die indeks.html-lêer gestoor as rykteksdokument. Probeer om die HTML-lêer in `n ander teksredigeerder te wysig.

2. Wysig die HTML-lêer. In die teksredigeerder, plaas die wyser tussen dieHello Wêreld!. Herlaai die blaaiervenster om die teks bo-op die agtergrondprent te sien.

Deel 4 van 5: Die HTML-kode verduidelik

1. HTML- en CSS-etikette. HTML-kode bestaan uit oop- en toe-merkers. Die

2. Die DOCTYPE-merker. Elke HTML-bladsy moet begin met `n

3. Wysig die HTML-lêer. In die teksredigeerder, plaas die wyser tussen die

4. HTML- en CSS-etikette. HTML-kode bestaan uit oop- en toe-merkers. Die

5. Die titel tag. Die

6. Die styl tag. Die

7. Die lyfmerk. Enige teks tussen die

8. Wysig die HTML-lêer. In die teksredigeerder, plaas die wyser tussen die

Deel 5 van 5: Verduidelik die CSS-kode

1. Verstaan die CSS-kode. In jou indeks.HTML-kode, vertel CSS-kode tussen die

2. Kyk na die CSS-kode.

liggaam { agtergrond-beeld: url("agtergrond.jpg"); }

4. Uit watter dele bestaan CSS-kode. CSS-style bestaan uit twee dele, die keurder en die verklaring.

liggaam

agtergrond-prent: url("agtergrond.jpg")

`n Kieser kan enige HTML-merker wees.

Verklarings word altyd in hakies ingesluit { }.

5. Wat is `n CSS-verklaring. Die CSS-verklaring bestaan uit twee dele, die eiendom en die waarde. Tussen die draadjies,
agtergrondprent is die eiendom (eiendom) en url("agtergrond.jpg") is die waarde (waarde).

Die eienskap spesifiseer wat in `n styl gegooi word, en die waarde spesifiseer hoeveel `n styl op daardie eienskap toegepas word.

Die eiendom en die waarde daarvan word altyd deur `n dubbelpunt geskei.

CSS-verklarings eindig altyd met `n kommapunt.