dmylogi.com

Hoe om `n bladsy in HTML te skryf

Die HTML-taal (HyperText Markup Language) is `n basiese taal vir die ontwikkeling van webblaaie. Dit is geskep met die doel om `n maklike en buigsame taal vir die kode te maak. Byna alle internet bladsye is geskep met `n variasie van hierdie kode (ColdFusion, XML, XSLT). HTML is maklik om te verstaan, maar dit kan lank neem as jy belangstel om sy volle funksies te leer. Om meer kleur en opwinding op jou webblaaie te voeg, kan jy die noodsaaklike aspekte van CSS leer sodra jy gemaklik voel met `n basiese HTML-bladsy.

stappe

Deel 1
Stel die dokument op

Prent getiteld Skryf `n HTML-bladsy Stap 1
1
Maak `n eenvoudige teksredakteur oop. Notepad is `n goeie opsie wat jy gratis kan aflaai. Jy kan HTML skryf met amper enige teksredigeringprogram, maar die meer komplekse programme met outomatiese formaat maak dit moeiliker om jou HTML-bladsy te organiseer.
  • Dit word nie aanbeveel om TextEdit te gebruik nie, aangesien dit dikwels die lêer stoor in `n formaat wat u blaaier moontlik nie as HTML herken nie.
  • U kan ook aanlyn `n HTML-redakteur gebruik. HTML-redigering programme word nie aan beginners aanbeveel nie.
  • Prent getiteld Skryf `n HTML-bladsy Stap 2
    2
    Stoor `n lêer as `n webblad. Kies Lêer → Stoor as. Verander die lêerformaat deur "webwerf", "Html" of "htm". Stoor dit op `n plek waar jy dit maklik kan vind.
  • Daar is geen verskil tussen hierdie drie opsies nie.
  • Prent getiteld Skryf `n HTML-bladsy Stap 3
    3
    Maak die lêer oop in `n webblaaier. Dubbelklik op die lêer en dit moet outomaties oopmaak as `n leë webblad in u blaaier. As alternatief kan jy `n blaaier oopmaak, byvoorbeeld Firefox of Internet Explorer en gebruik "argief" → "Oop lêer" om die dokument te kies.
  • Hierdie webwerf sal nie aanlyn wees nie. Dit kan net op jou rekenaar gesien word.
  • Prent getiteld Skryf `n HTML-bladsy Stap 4
    4
    Verfris die webwerf om die gestoorde veranderinge te sien. Skryf dit in jou leë dokument: hallo Stoor die dokument Herlaai die leë bladsy en jy moet sien dit verskyn "hallo" bo-aan die bladsy, in vet druk. Elke keer as jy jou nuwe HTML wil probeer tydens hierdie tutoriaal, slaan jy die .html-dokument op en werk dan die blaaier venster op om te sien hoe jou HTML geïnterpreteer word.
  • As die woorde "" en "" verskyn in u blaaier, u lêer word nie korrek geïnterpreteer as HTML nie. Probeer `n ander teksredigeringsprogram of `n ander blaaier.
  • Prent getiteld Skryf `n HTML-bladsy Stap 5
    5
    Verstaan ​​wat etikette is HTML instruksies word deur geskryf "etikette" (tags, in Engels), wat die leser vertel hoe om die webblad te interpreteer en te vertoon. Hulle word altyd in hoekhakies geskryf en hulle word nie op die webblad vertoon nie. Jy het hulle reeds in die vorige voorbeeld gebruik:
  • Dit is `n "opening tag" of "begin tag". Alles wat na daardie etiket geskryf word, sal gedefinieer word as "vet teks" (gewoonlik op die webwerf sal vetdruk vertoon word).
  • Dit is `n "sluitingsteken" of "einde tag". Toon die punt waar die teks vetdruk. Die meeste etikette (nie almal nie) het `n sluitingsteken nodig om te werk, moenie vergeet om dit in te sluit nie.
  • Prent getiteld Skryf `n HTML-bladsy Stap 6
    6
    Stel jou dokument op Verwyder al die inhoud van jou HTML-dokument. Begin weer met die volgende teks wat presies geskryf is (negeer bullet punte). Hierdie HTML-kode vertel die blaaier watter tipe HTML jy gaan gebruik en dat al jou HTML tussen die etikette vervat sal wees en .
  • Prent getiteld Skryf `n HTML-bladsy Stap 7
    7
    Voeg koptekst en liggaamsmerke by. HTML-dokumente word in twee afdelings verdeel. Die gedeelte van die "kop" (kop, in Engels) is vir spesiale inligting, soos die titel van die bladsy. Die gedeelte van die "liggaam" (liggaam, in Engels) sluit die hoofinhoud van die bladsy in. Voeg albei by jou dokument, onthou om ook die sluitingsetikette in te sluit. Die nuwe teks wat bygevoeg moet word, is die vetdruk:
  • Prent getiteld Skryf `n HTML-bladsy Stap 8
    8
    Gee `n titel op die bladsy. Om `n beginner te wees, is nie belangrik om die meeste van die etikette wat in die gedeelte van die koptekstie gaan, te leer nie. Die titeletiket is egter maklik om te gebruik en sal bepaal wat sal verskyn as die naam van die blaaier venster of oortjie. Plaas die opening en sluitingsetikette van die titel in die koptekste en skryf die titel wat jy wil hê tussen hulle:
  • My eerste HTML-bladsy

  • Deel 2
    Formateer die teks

    Prent getiteld Skryf `n HTML-bladsy Stap 9
    1
    Voeg `n bietjie teks by die liggaamsafdeling. In hierdie afdeling werk jy net binne die liggaamsmerke. Die res van die teks sal in die dokument bly, maar in hierdie gids sal u voorkom dat u hulle herhaal om die spasie te spaar. Skryf wat jy wil tussen die etikette en en dit sal as die eerste inhoud op jou webblad verskyn. Byvoorbeeld:
    • Ek volg die wikiHow-gids om `n HTML-bladsy te skryf
  • Prent getiteld Skryf `n HTML-bladsy Stap 10
    2
    Voeg die opskrifte by die teks. Organiseer jou bladsy met hoofletters, wat die leser sal vertel om die teks wat tussen hulle in `n groter grootte vertoon word, te vertoon. Hierdie word ook gebruik deur Botsings van soekenjins en ander gereedskap om te bepaal waaroor jou bladsy gaan en hoe dit georganiseer word. is die grootste koptekst en jy kan kleiner opskrifte skep na. Probeer dit op jou bladsy:

  • Welkom op my webwerf

  • Ek volg die wikiHow-gids om `n HTML-bladsy te skryf

  • My doelwitte vandag:

  • Doelwitte voltooi:
  • Leer hoe om opskrifte te gebruik
  • Doelwitte wat nie vervul is nie:
  • Kom meer te wete teks formaat tags
  • Prent getiteld Skryf `n HTML-bladsy Stap 11
    3
    Leer meer etikette om die teks te formateer. Jy ken die etiket reeds "sterk", maar daar is baie ander maniere om `n teks te formateer. Speel saam met hulle of gebruik verskillende etikette om dieselfde teksreeks. Onthou om altyd die sluitingsdatum later by te voeg!
  • Belangrike teks Dit word vetdruk in die blaaiers.
  • Beklemtoonde teks Dit sal kursief vertoon word in blaaiers.
  • Teks `n bietjie kleiner as gewoonlik. Dit sal outomaties afgeskaal word as dit in `n koptekst gebruik word.
  • Teks wat nie meer van toepassing is nie. Dit sal met `n lyn uitgekruis word.
  • Prent getiteld Skryf `n HTML-bladsy Stap 12
    4
    Sorteer die teks op die bladsy. U het dalk opgemerk dat die sleutel gedruk word ⌅ Tik Dit is nie genoeg om jou teks op `n ander lyn te wys nie. Hierdie etikette kan u help om paragrawe te vorm en lynbreuke in te voeg of u teks op `n ander manier te bestel:

  • Dit beteken "paragraaf" en dit sal jou help om al die teks wat tussen hierdie etikette in `n enkele paragraaf is, te hou en dit te skei van die teks wat bo of onder dit is.

  • Dit sal `n lynbreuk skep. Moet nie `n sluitingsteken in hierdie geval insluit nie, aangesien dit nie enige ander inhoud sal verander nie. Gebruik dit vir gedigte of adreslyne, om nie paragrawe te skei nie.
  • As u teks baie akkuraat moet vertoon, sal hierdie merker die teks wat binne hierdie etikette is, as `n vaste wydte font (elke letter sal dieselfde breedte hê) en sal u toelaat om spasies en lynpaaie te skep soos u normaalweg sou wou skryf deur middel van etikette.
  • Dit definieer die teks as aangehaalde teks deur middel van `n bron.
    Dan kan jy die bron beskryf deur die afspraak tag..
  • Prent getiteld Skryf `n HTML-bladsy Stap 13
    5
    Voeg onsigbare teksopmerkings by Kommentaar etikette is nie sigbaar op die webblad nie. Hulle laat jou toe om notas vir jouself in die HTML-dokument te skryf sonder dat dit inmeng met die inhoud. Moenie `n sluitingsteken byvoeg nie.
  • Etikette wat selfstandig is en nie sluitingsetikette gebruik nie, staan ​​bekend as "leë etikette".


  • Prent getiteld Skryf `n HTML-bladsy Stap 14
    6
    Plaas alles saam. Die beste manier om hierdie etikette te onthou, is om dit op u eie webwerf te gebruik. Hier is `n voorbeeld van hoe om etikette vir elk van die stappe wat jy tot dusver geleer het, te gebruik. Probeer voorspel hoe dit in `n blaaier sal lyk in plaas van om alles in jou dokument te kopieer en te plak om uit te vind.
  • My eerste HTML-bladsy

  • Welkom op my webwerf

  • Ek hoop jy geniet die webwerf!

    Ek het dit spesiaal vir jou geskep.

  • Deel 1: Hoe ek HTML ontdek het

  • Ek het vir HTML geleer `n ure, so ek is `n kenner.

    • Deel 3
    Voeg skakels en beelde by

    Prent getiteld Skryf `n HTML-bladsy Stap 15
    1
    Leer wat die eienskappe is Die etikette kan addisionele inligting in hulle bevat. Hierdie inligting staan ​​bekend as "eienskappe". Eienskappe verskyn as bykomende woorde binne dieselfde etiket, in die vorm: attribuut naam ="spesifieke waarde". Byvoorbeeld, byna enige HTML-tag kan die kenmerk hê "titel" (Titel):

    • Hier gaan die inleidende paragraaf

      Hierdie kenmerk voeg `n titel by die paragraaf, "inleiding", wat verskyn wanneer jy oor die paragraaf op die webblad beweeg.
  • Prent getiteld Skryf `n HTML-bladsy Stap 16
    2
    Skep `n skakel na `n ander webblad. Gebruik die etikette om `n skakel na `n ander webblad te skep. Voeg die URL van die bestemmingswebblad in deur die href-kenmerk te gebruik. Hier is `n voorbeeld wat jou dokument skakels na die bladsy wat jy nou lees.
  • Besoekers op u webwerf kan op hierdie teks klik om die skakel te volg.
  • Prent getiteld Skryf `n HTML-bladsy Stap 17
    3
    Voeg `n id-kenmerk by jou etikette. Nog `n kenmerk wat jy byna enige HTML-tag kan insluit, is die element "id". Binne elke etiket, skryf id ="byvoorbeeld" of gebruik enige naam wat nie spasies insluit nie. Dit sal nie `n sigbare effek hê nie, maar jy sal dit in die volgende stap gebruik.
  • Voeg dit byvoorbeeld by jou dokument:

    Hierdie paragraaf sal as voorbeeld gebruik word om te wys hoe die id-kenmerk werk.

  • Prent getiteld Skryf `n HTML-bladsy Stap 18
    4
    Skep `n skakel na `n spesifieke ID. Nou kan jy die hyperlink tags gebruik om `n skakel na `n ander punt op dieselfde bladsy te skep. In plaas van `n URL, moet jy die # simbool gebruik, gevolg deur die id waarde waarheen jy die skakel gaan maak. Byvoorbeeld, Hierdie teks sal `n skakel skep na die paragraaf wat die ID bevat "byvoorbeeld".
  • Geen HTML-waarde is hoofletter sensitief nie. "#Example" en "Ek #Example" Hulle sal jou na dieselfde plek neem.
  • As u bladsy klein genoeg is om al die inhoud op dieselfde skerm te wys, sal u dalk nie enige veranderinge opmerk as u op die skakel met die blaaier klik nie. Verander die grootte van die venster totdat `n skuifbalk verskyn en probeer dan weer.
  • Prent getiteld Skryf `n HTML-bladsy Stap 19
    5
    Voeg `n prent by Die etiket Dit is `n leë tag, wat beteken dat dit nie nodig is om `n sluitingsteken in te sluit nie. Al die inligting wat die leser nodig het om die prent te vertoon, sal bygevoeg word deur eienskappe. Hier is `n voorbeeld wat die wikiHow-logo sal wys, gevolg deur `n beskrywing van elke kenmerk:
  • wikiHow logo
  • Die kenmerk src =" " (bron) vertel die blaaier waar die prent moet gevind word (onthou dat dit gewoonlik aanstootlik is om die prent van `n ander persoon se webwerf te publiseer en dat die prent verdwyn as die webwerf waaruit dit kom, ontkoppel is).
  • Die kenmerk styl =" " (Style) Jy kan baie dinge doen, maar die belangrikste ding is om die breedte en hoogte van `n beeld in pixels aan te pas (jy kan ook die eienskappe gebruik breedte =" " (breedte) en hoogte =" " (hoogte) afsonderlik, maar jy kan `n paar vreemde grootte probleme hê as jy CSS gaan gebruik.)
  • Die kenmerk alt =" " is `n kort beskrywing van die beeld wat die gebruiker sal sien as die prentjie nie laai nie. Dit word beskou as `n vereiste aangesien dit deur skermlesers gebruik word vir blinde besoekers.

    • Deel 4
    Kom meer te wete en plaas jou bladsy aanlyn

    Prent getiteld Skryf `n HTML-bladsy Stap 20
    1
    Bevestig jou HTML HTML-validering kontroleer vir foute in die kode. As u webblad nie korrek vertoon word nie, kan die validering u help om die fout te vind wat die probleem veroorsaak. Dit kan jou ook meer leer oor HTML deur kode te identifiseer wat op die skerm goed lyk, maar dit word nie aanbeveel weens opdaterings van die HTML-standaarde nie. Die gebruik van ongeldige HTML beteken nie dat jou werf nie gebruik kan word nie, maar dit kan probleme veroorsaak of `n teenstrydige vertoning in verskillende blaaiers vertoon.
    • Probeer die gratis aanlyn validering diens van W3C of soek na `n ander HTML 5 aanlyn-validator.
  • Prent getiteld Skryf `n HTML-bladsy Stap 21
    2
    Kom meer te sien etikette en eienskappe. Daar is baie ander HTML-tags en eienskappe en baie plekke waar jy hulle kan leer:
  • Probeer met w3schools en HTML Dog as u meer tutoriale en meer volledige lyste etikette benodig.
  • Soek vir `n webblad waar jy van sy voorkoms hou en gebruik die funksie "Sien bladsy bron" om jou HTML self te sien. Kopieer en plak dit op jou eie dokument en speel daarmee om te sien hoe dit werk.
  • Lees ander artikels om te leer hoe om HTML-tabelle te skep Gebruik metatags om jou sigbaarheid in soekenjins te verhoog of om div en span te gebruik om jou te help met die CSS-styl.
  • Prent getiteld Skryf `n HTML-bladsy Stap 22
    3
    Plaas jou webblad aanlyn. Kies `n web hosting diens of web hosting en jy kan soveel HTML-bladsye oplaai as wat jy wil hê op jou persoonlike webdomein. Om dit te doen, moet u `n FTP oordrag program, maar baie van die hosting dienste bied ook hierdie diens aan.
  • As jy skakels na ander bladsye of beelde van jou eie webwerf wil vestig, is dit nie nodig om volledige adresse te gebruik nie. Byvoorbeeld, as jou domeinnaam elmejorcodificadordehtml.com is, dan is die adres Die teks binne hierdie etikette sal `n skakel met die adres vestig "superskilledhtmlcoder.com/journal/monday.html".
  • Prent getiteld Skryf `n HTML-bladsy Stap 23
    4
    Voeg styl by CSS As jou HTML-bladsy te elementêr lyk, probeer om basiese CSS-funksies te leer om meer kleur, verskillende bronne en meer beheer oor die ligging van die elemente by te voeg. Koppel `n CSS-stylblad (CSS style sheet) Met u HTML-bladsye kan u vinnig veranderinge aanbring, die styl van al die teks wat binne `n sekere merker is, aan te pas. Hier kan jy sien hoe om te speel met basiese style sheets of jy kan dieper in meer gedetailleerde tutoriale gebruik maak van die HTML Dog CSS Guide.
  • Prent getiteld Skryf `n HTML-bladsy Stap 24
    5
    Voeg jаvascript-kode by jou bladsy. jаvascript is `n programmeertaal wat gebruik word om meer funksies by HTML-bladsye te voeg. jаvascript-opdragte word tussen die opening- en sluitingsetikette ingevoeg en kan gebruik word om interaktiewe knoppies by te voeg, wiskundeprobleme te bereken en nog baie meer. Kom meer te wete met die voorbeelde van w3c.

    • wenke

    • Die tipe dokument (in Engels doctype), wat in hierdie handleiding gebruik word, is "los HTML 4.0.1 oorgang", `n maklik om te gebruik formaat vir beginners. Gebruik () sodat die leser die kode met streng HTML 5-formaat interpreteer, wat die mees aanbevole standaard is (ten spyte daarvan dat dit een van die minste gebruik word).

    waarskuwings

    • HTML het die doel om die inhoud van die bladsy in `n universele formaat te handhaaf. Dit is nie bedoel om die aanbieding van u webblad te beheer nie, soos die agtergrondkleur en die presiese ligging van die elemente. Alhoewel daar etikette is wat jou toelaat om hierdie dinge te beheer, word dit sterk aanbeveel om CSS te gebruik om `n meer beheerbare en konsekwente webblad te skep.

    Dinge wat jy nodig het

    • `N Eenvoudige teksredakteur, soos Notepad of TextEdit
    • `N Webleser, soos Internet Explorer of Mozilla Firefox
    • `N HTML-redakteur soos Adobe Dreamweaver, Aptana Studio of Microsoft Expression Web (opsioneel)
    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 skakel te skep om terug te keer na die beginHoe om `n skakel te skep om terug te keer na die begin
    Hoe om `n sakrekenaar met behulp van HTML te skepHoe om `n sakrekenaar met behulp van 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 `n agtergrond prent in HTML op te losHoe om `n agtergrond prent in HTML op te los
    Hoe om `n HTML skakel knoppie te maakHoe om `n HTML skakel knoppie te maak
    Hoe om `n webblad in HTML te maakHoe om `n webblad in HTML te maak
    Hoe om digitale tyd in HTML te vertoonHoe om digitale tyd in HTML te vertoon
    » » Hoe om `n bladsy in HTML te skryf
    © 2024 dmylogi.com