Hoe om `n agtergrond prent in HTML op te los

As jy `n prentjie op jou webblad wil byvoeg, benodig jy net HTML. As jy `n prent as agtergrond op jou webblad wil stel, het jy HTML en CSS nodig. HTML beteken "hiperteks opmaak taal" en is die kode wat blaaiers vertel wat hulle op `n webblad moet wys. CSS beteken "cascading style sheets" en dit word gebruik om die voorkoms en ontwerp van `n webblad te verander. Om te begin sal jy die agtergrond prentjie wat jy op jou webblad wil gebruik, benodig.

conținut

Stappe
Deel 1stel die lêers op
Deel 2skryf die html-lêer
Deel 3wys die html-lêer
Deel 4verstaan die html-kode
Deel 5verstaan die css-kode

stappe

Deel 1
Stel die lêers op

Skep `n gids om jou HTML-lêer en die agtergrond prent op te slaan. Skep `n gids op jou rekenaar en gee dit `n naam waarmee jy dit maklik kan identifiseer.

U kan dit noem as u wil, maar aangesien u met HTML werk, is dit beter om gewoond te raak aan die kies van kort, een-woord name vir u lêers en dopgehou.

Plaas die agtergrond prent in die HTML-gids. Vind die prentjie wat jy as agtergrond wil gebruik en stoor dit in jou HTML-gids.

In die algemeen is dit raadsaam om eenvoudige beelde met gladde en herhalende patrone as `n agtergrondbeeld te gebruik sodat teks wat bo die agtergrond is, maklik leesbaar kan wees.

As jy nie `n prent het nie, kan jy `n gratis agtergrond prent van die internet aflaai. As jy `n prent wil aflaai, moet jy dit in jou HTML-gids stoor.

Skep `n HTML-lêer. Maak `n teksredakteur oop en skep `n nuwe lêer. Stoor die lêer met die naam index.html.

U kan die teksredakteur wat u wil gebruik, insluitend die teksredakteurs wat by die bedryfstelsel kom (Notepad in die geval van Windows en TextEdit in die geval van Mac).

As jy `n teksredakteur wil gebruik wat spesiaal ontwerp is om met HTML te werk, kliek hier Atom aflaai, `n teksredakteur wat werk met Windows, Mac OS X en Linux bedryfstelsels.

As jy TextEdit gaan gebruik, moet jy eers die HTML-lêer druk om die HTML-lêer te skryf "formaat" en kies dan "Skakel na normale teks" (of "Skakel na gewone teks"). Op hierdie manier sal jy seker maak dat jou HTML-lêer korrek in `n webblaaier gelaai is.

Woordverwerkers soos Microsoft Word is nie `n goeie keuse vir die skryf van HTML-kode nie, omdat hulle onsigbare karakters en formatering byvoeg. Hierdie karakters kan die HTML-lêer bederf en dit nie korrek vertoon in `n webblaaier nie.

Deel 2
Skryf die HTML-lêer

Kopieer en plak die volgende standaard HTML-kode. Kies en kopieer die kode hieronder en plak dit dan in die oop index.html-lêer.

Titel van die bladsy

Voeg die URL van die prent by. Soek die indeks.html-lêer vir die reël agtergrond-beeld: url (" ") -. Plaas die wyser tussen die hakies en skryf die naam van die lêer wat die agtergrond prent bevat. Maak seker dat u die uitbreiding van die prentlêer insluit.

As jy klaar is, moet jy so lyk:
agtergrond-beeld: url ("imagendefondo.jpg") -

Elke keer as u `n lêernaam gebruik sonder die pad of URL, sal die webblaaier soek na die prent in die gids waar die webblad gestoor word. As die lêer in `n ander gids op die stelsel is, moet u die volle pad van die lêer byvoeg.

Stoor die HTML-lêer.

Deel 3
Wys die HTML-lêer

Open die HTML-lêer op `n webbediener. Regskliek op die index.html-lêer en kies die opsie om dit oop te maak met die webblaaier wat jy wil.

As die prent nie verskyn wanneer u die blaaier oopmaak nie, maak seker dat die naam van die prent korrek gespel is in die teksredigeerder se venster waar u die indeks.html geskep het.
As u die blaaier oopmaak in plaas van die prentjie te sien, verskyn die HTML-kode. Dit beteken dat die indeks.html lêer gestoor is as `n ryk teksdokument. Probeer die HTML-kode met `n ander teksredigeerder te wysig.

Wysig die HTML-lêer. Plaas die wyser tussen die etikette in die teksredigeerder en en skryf dan "Hallo wêreld!". Werk die blaaier venster op om te sien of die teks bo die agtergrond prent verskyn.

Deel 4
Verstaan die HTML-kode

Leer hoe om HTML- en CSS-etikette te gebruik. Die HTML-kode bestaan uit openings- en sluitingsetikette. Die etiket is die opening etiket van die liggaam van die bladsy en Dit is die sluitingsteken. In HTML moet alle openingsetikette hul ooreenstemmende sluitingsteken hê sodat die bladsy korrek vertoon kan word.

Leer wat die DOCTYPE-tag beteken. Alle goed geskrewe HTML-bladsye moet begin . Dit is wat die leser vertel dat die HTML-lêer `n HTML-lêer is.

Leer om HTML- en CSS-etikette te gebruik. Die HTML-kode bestaan uit openings- en sluitingsetikette. Die etiket is die opening etiket van die liggaam van die bladsy en Dit is die sluitingsteken. In HTML moet alle openingsetikette hul ooreenstemmende sluitingsteken hê sodat die bladsy korrek vertoon kan word.

Leer om die titeletiket te gebruik. Die etiket verskyn in die titelbalk van die blaaier venster en word ook in die blaaier-oortjies vertoon.

Leer om die style-tag te gebruik. Die etiket

Leer om die liggaamsmerkkie te gebruik. Al die teks wat tussen die etikette verskyn, word geskryf sal verskyn as geskryf, tensy dit HTML of CSS kode is.

Deel 5
Verstaan die CSS-kode

Leer om die CSS-kode te gebruik. In die indeks.html-lêer het al die CSS-kode tussen die etikette gevind

Kyk na die volgende CSS-kode.

liggaam (agtergrond-beeld: url ("imagendefondo.jpg") -)

Leer om die gedeeltes van die CSS-kode te identifiseer. Die CSS style sheets bestaan uit twee dele: `n selector en `n verklaring.

In die voorbeeld, is die selector en agtergrond-beeld: url ("imagendefondo.jpg") Dit is die stelling.

Die keurders kan HTML-etikette wees.

Die stellings gaan altyd in hakies ({}).

Dit sluit die CSS-verklarings in. Die CSS-verklarings word op sy beurt in twee dele verdeel: `n eiendom en `n waarde. In die vorige voorbeeld, binne wat is tussen die sleutels, agtergrond-beeld is die eiendom en url ("imagendefondo.jpg") Dit is die waarde.

Die eiendom is verantwoordelik om te spesifiseer watter voorwerp geformateer moet word en die waarde beskryf hoe die styl van die eiendom toegepas word.

Eiendom en waarde word altyd geskei deur `n kolon (:).

CSS-stellings eindig altyd in `n semikolon (-).

Deel op sosiale netwerke:

Verwante