dmylogi.com

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.

stappe

Deel 1
Stel die lêers op

Prent getiteld 2627945 1 1
1
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.
  • Prent getiteld 2627945 2 1
    2
    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.
  • Prent getiteld 2627945 3 1
    3
    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

    Prent getiteld 2627945 4 1
    1
    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
  • Prent getiteld 2627945 5 1
    2
    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.
  • Prent getiteld 2627945 6 1
    3
    Stoor die HTML-lêer.
  • Deel 3
    Wys die HTML-lêer

    Prent getiteld 2627945 7 1
    1
    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.
  • Prent getiteld 2627945 8 1
    2
    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

    Prent getiteld 2627945 9 1
    1
    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.
  • Prent getiteld 2627945 10 1
    2
    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.


  • Prent getiteld 2627945 11 1
    3
    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.
  • Prent getiteld 2627945 12 1
    4
    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.
  • Prent getiteld 2627945 13 1
    5
    Leer om die titeletiket te gebruik. Die etiket verskyn in die titelbalk van die blaaier venster en word ook in die blaaier-oortjies vertoon.
  • Prent getiteld 2627945 14 1
    6
    Leer om die style-tag te gebruik. Die etiket
  • Prent getiteld 2627945 15 1
    7
    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.
  • Prent getiteld 2627945 16 1
    8
    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 5
    Verstaan ​​die CSS-kode

    Prent getiteld 2627945 17 1
    1
    Leer om die CSS-kode te gebruik. In die indeks.html-lêer het al die CSS-kode tussen die etikette gevind
  • Prent getiteld 2627945 18 1
    2
    Kyk na die volgende CSS-kode.
    liggaam (agtergrond-beeld: url ("imagendefondo.jpg") -)
  • Prent getiteld 2627945 19 1
    3
    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 ({}).
  • Prent getiteld 2627945 20
    4
    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
    Hoe om die handelsmerk simbool in HTML by te voegHoe om die handelsmerk simbool in HTML by te voeg
    Hoe om `n agtergrond by `n webwerf te voegHoe om `n agtergrond by `n webwerf te voeg
    Hoe om `n prent in HTML te sentreerHoe om `n prent in HTML te sentreer
    Hoe om `n prent skakel in HTML te skepHoe om `n prent skakel in HTML te skep
    Hoe om `n aftreklys in HTML sonder Java te skepHoe om `n aftreklys in HTML sonder Java te skep
    Hoe om vas te stel of jаvascript nie geaktiveer is nieHoe om vas te stel of jаvascript nie geaktiveer is nie
    Hoe om `n HTML-lêer uit te voerHoe om `n HTML-lêer uit te voer
    Hoe om die agtergrondkleur in HTML te stelHoe om die agtergrondkleur in HTML te stel
    Hoe om `n interaktiewe lessenaar agtergrond te maakHoe om `n interaktiewe lessenaar agtergrond te maak
    Hoe om `n vervangingsbeeld in jаvascript te maakHoe om `n vervangingsbeeld in jаvascript te maak
    » » Hoe om `n agtergrond prent in HTML op te los
    © 2024 dmylogi.com