Hoe om `n eenvoudige webblad met html te skep

Disteaches Jy Hoe om `n eenvoudige webblad te skryf met HTML (Hypertext Markup-taal). HTML is een van die kernkomponente van die World Wide Web, wat die struktuur van webblaaie opstel. Sodra jy jou webblad geskep het, kan jy dit as `n HTML-dokument stoor en dit in jou webblaaier sien. Die skep van `n HTML-bladsy is moontlik om basiese teksredakteurs op beide Windows en Mac-rekenaars te gebruik.

Stappe

Deel 1 van 6:
Voeg `n kop by jou HTML
  1. Beeld getiteld 4082 1 2
1. Maak `n teksredakteur oop. Op `n rekenaar wat die Windows-bedryfstelsel bestuur, gebruik jy gewoonlik Notepad, of Notepad ++, terwyl MacOS-gebruikers TextEdit sal gebruik en Chromeos-gebruikers sal teks gebruik:
  • Vensters - Oopmaak Aanskakel
Beeld getiteld WindowsStart.jpg
, tik in notaboek, of notaboek++ en klik Notaboek of "Notaboek + + of sublieme" Aan die bokant van die venster.
  • macos - Kliek Kollig
    Beeld getiteld macspotlight.jpg
    , tik in TextEdit, en dubbelkliek TextEdit Aan die bokant van die resultate.
  • Chromeos - Open Launcher, klik dan op teks. (Die ikoon sê kodeblok).
  • Beeld getiteld 4082 2 2
    2. Tik in en druk ↵ Tik. Dit vertel die webblaaier dat dit `n HTML-dokument is.
  • Beeld getiteld 4082 3 2
    3. Tik en druk ↵ Tik. Hierdie openingstag vir u HTML-kode.
  • Beeld getiteld 4082 4 2
    4. Tik in en druk ↵ Tik. Dit is die merker wat jou HTML-kop oopmaak. Die HTML-hoofinligting wat nie gewoonlik op u webblad vertoon word nie. Hierdie inligting kan insluit, die titel, meta data, CSS styl velle, en ander skriptale.
  • Beeld getiteld 4082 5 2
    5. Tik in . Dit is die merker om `n titel op jou bladsy by te voeg.
  • Beeld getiteld 4082 6 2
    6. Tik `n titel vir jou webblad. Dit kan enige titel wees wat u u webblad wil noem.
  • Beeld getiteld 4082 7 2
    7. Tik in en druk ↵ Tik. Dit is die merker om jou titel tag te sluit.
  • Beeld getiteld 4082 8 2
    8. Tik en druk ↵ Tik. Dit is die merker om jou kop te sluit. Jou HTML-kode moet so iets lyk.
    • Deel 2 van 6:
    Voeg `n liggaam en teks by jou HTML
    1. Beeld getiteld 4082 9 2
    1. Tik onder die geslote in "Kop" merk. Hierdie merker maak die liggaam van u HTML-dokument oop. Alles wat in die HTML-liggaamsuitstallings op die webblad gaan.
  • Beeld getiteld 4082 10 2
    2. Tik in . Dit is die merker om `n opskrif by u HTML-dokument te voeg. `N Opskrif is groot vet teks wat tipies bo-aan jou HTML-dokument gaan.
  • Beeld getiteld 4082 11 2
    3. Tik `n opskrif vir jou bladsy. Dit kan die titel van jou bladsy of `n groet wees.
  • Beeld getiteld 4082 12 2
    4. Tik na jou opskrif teks en druk ↵ Tik. Hierdie tag sluit jou opskrif.
  • Voeg bykomende opskrifte by soos jy gaan. Daar is ses verskillende opskrifte wat jy kan skep deur die deur middel van tags te gebruik. Hierdie skep opskrifte van verskillende groottes. Om byvoorbeeld drie verskillende opskrifte in opeenvolging te skep, kan u die volgende skryf:
  • Die opskrifte toon die prioriteit of belangrikheid van die teks. Maar dit is nie nodig om `n hoër opskrif te gebruik as jy enige onderste opskrif wil gebruik nie. `N Mens kan H3 direk gebruik, selfs al is daar geen H1 in jou pos nie.
  • Beeld getiteld 4082 13 2
    5. Tipe . Dit is die merker om `n paragraaf oop te maak. Paragraaf teks word gebruik om normale grootte teks te vertoon.
  • Beeld getiteld 4082 14 2
    6. Tik `n paar teks. Dit kan `n beskrywing vir u webblad of enige ander inligting wees wat u wil deel.
  • Beeld getiteld 4082 15 2
    7. Tik na jou teks en druk ↵ Tik. Dit is die merker om jou paragraaf teks te sluit. Die volgende is `n voorbeeld van paragraaf teks in HTML:
  • U kan verskeie paragraaflyne in `n ry byvoeg om `n reeks paragrawe onder een opskrif te skep.
  • U kan die kleur van enige teks verander deur die teks met die en tags te raam. Maak seker dat u voorkeurkleur in die "kleur" afdeling (jy sal die aanhalings hou). U kan enige teks draai (e.heid g., opskrifte) in `n ander kleur met hierdie stel etikette. Byvoorbeeld, om `n paragraaf se teks blou te maak, sal jy die volgende kode skryf:

    Walvisse is majestueuse wesens.

  • U kan vetgedrukte, kursief en ander teksformate byvoeg wat HTML gebruik.Die volgende is voorbeelde van hoe u teks kan gebruik met HTML-tags:
  • As u vet en kursiese teks gebruik vir klem, nie net vir stilering nie, gebruik die en elemente in plaas van en . Dit maak jou webblad makliker om te verstaan ​​wanneer tegnologieë gebruik word soos `n skermleser of die lesermodus wat in sommige blaaiers voorsien word.
    • Deel 3 van 6:
    Voeg bykomende elemente by jou HTML toe
    1. Beeld getiteld 4082 16 2
    1. Voeg `n foto by jou bladsy. U kan `n prent by u HTML voeg deur die volgende stappe te gebruik:
    • Tipe Om jou prentetiket oop te maak.
    • Kopieer en plak die prent URL na die "=" Teken in aanhalingstekens.
    • Tipe > Na die beeld-URL om jou beeldetiket te sluit. Byvoorbeeld, as die beeld se URL is "http: // my prentjie.com / Lake", U sal die volgende skryf:
  • Beeld getiteld 4082 17 2
    2. Skakel na `n ander bladsy. U kan `n skakel by u HTML voeg deur die volgende stappe te gebruik:
  • Tipe Om jou skakel tag te open.
  • Kopieer en plak URL na die "=" Teken in aanhalingstekens.
  • Tipe > Na die URL om die skakelgedeelte van die HTML te sluit.
  • Tik `n naam vir die skakel na die sluitingsbeugel.
  • Tik na die skakelnaam om die HTML-skakel te sluit. Die volgende is `n voorbeeld van `n skakel na Facebook.
    <`n href ="https: // facebook.mededelbaan">Facebooka>.
  • Beeld getiteld 4082 18 2
    3. Voeg `n lynbreuk by jou HTML. Jy kan `n lynbreuk byvoeg deur te tik
    na jou HTML. Dit skep `n horisontale lyn wat gebruik kan word om verskillende afdelings van u bladsy te verdeel.
    • Deel 4 van 6:
    Pas kleure aan
    1. Beeld getiteld 4082 19 3
    1. Kyk na die lys van amptelike HTML-kleurname en kodes. Die World Wide Web Consortium (W3C) bestuur `n amptelike lys van kleure wat u sal vind by https: // w3.Org / Wiki / CSS / Properties / Kleur / Sleutelwoorde. Elke kleur het `n amptelike naam, 6-syfer-heksadesimale kode, en `n desimale waarde. U kan enige van hierdie waardes gebruik om kleure aan elemente van u webblad te voeg. Vir hierdie voorbeeld gebruik ons ​​die amptelike kleurname.
  • Beeld getiteld 4082 20 3
    2. Stel die agtergrondkleur in die merker. Jy sal dit doen deur die styl Attribuut aan die merker. Kom ons sê jy wou die agtergrondkleur van die hele bladsy maak laventel:
  • Beeld getiteld 4082 21 3
    3. Stel die teks kleur vir enige merker. U kan ook die styl attribuut om te spesifiseer watter kleur jy wil hê dat alle teks binne `n bepaalde tag moet wees. Byvoorbeeld, kom ons sê jy wou die teks in een van jou etikette maak middernagblue:
  • Die kleurverandering sal slegs die teks binne daardie tag beïnvloed. As jy later `n ander merker begin, moet dit ook wees middernagblue, Jy moet ook die styl kenmerk stel.
  • Beeld getiteld 4082 22 3
    4. Stel die agtergrondkleur vir `n kop of paragraaf. Soortgelyk aan hoe jy die agtergrondkleur vir die liggaamsmerk stel, kan jy ook agtergrondkleure vir ander etikette stel. Kom ons sê jy wou die agtergrondkleur van `n ligte grys, en die agtergrondkleur van `n H1-stylopskrif LightSkyBlue, Jy sal gebruik:
    • Deel 5 van 6:
    Sluit jou HTML-dokument
    1. Beeld getiteld 4082 19 2
    1. Tik om jou liggaam te sluit. Nadat u al u teks, beelde en ander elemente by die liggaam van u HTML-dokument bygevoeg het, voeg hierdie merker onderaan u HTML-dokument by om die liggaam van u HTML-dokument te sluit.
  • Beeld getiteld 4082 20 2
    2. Tik om jou HTML-dokument te sluit. Hierdie merker gaan onder die merker om jou HTML-liggaam aan die einde van jou HTML-dokument te sluit. Dit vertel die webblaaier daar is nie meer HTML-kode na hierdie merker nie. Jou hele HTML-dokument moet so iets lyk:
    • Deel 6 van 6:
    Besparing en opening van u webblad
    1. Beeld getiteld 4082 21 2
    1. Omskep jou dokument na gewone teks (slegs Mac-gebruikers). Klik op die Formaat Menu-item bo-aan die skerm, klik dan Maak gewone teks In die gevolglike keuselys-spyskaart.
    • Hierdie stap is nie nodig of op Windows nie.
  • Beeld getiteld 4082 22 2
    2. Kliek lêer. Dit is in die menubalk bo-aan die skerm.
  • Beeld getiteld 4082 23 2
    3. Kliek Stoor as. Dit is in die keuselys hieronder "lêer".
  • Alternatiewelik kan jy druk Ctrl+S (Windows) of ⌘ opdrag+S (Mac) om dit te doen.
  • Beeld getiteld 4082 24 2
    4. Voer `n naam in vir u HTML-dokument. Tik wat jy wil noem jou dokument in die "Lêernaam" (Windows) of "Naam" (Mac) tekskassie.
  • Beeld getiteld 4082 25 2
    5. Verander die dokument se lêer tipe. U moet die dokument van `n tekslêer na `n HTML-lêer verander. Gebruik die volgende stappe om die lêer tipe te verander:
  • Vensters - Klik op die "Stoor as tipe" Drop-down boks, kliek Alle lêers, en tik dan .html Aan die einde van die lêer se naam.
  • Macos - Vervang die .txt Aan die einde van die lêer se naam met .html in stede van.
  • Chromeos - Klik op die "Stoor as" knoop. Noem die lêer met .html aan die einde. Die begin is aan jou.
  • Beeld getiteld 4082 26 2
    6. Kliek Spaar. Dit is aan die onderkant van die venster. Dit sal `n HTML-lêer skep.
  • HTML-lêers is tipies oop met u standaard webblaaier.
  • Beeld getiteld 4082 27 2
    7. Sluit jou teksredakteur. Op hierdie punt is jy gereed om jou HTML-lêer in jou blaaier oop te maak sodat jy jou webblad kan sien.
  • Beeld getiteld 4082 28 2
    8. Maak die HTML-dokument oop met jou blaaier. In die meeste gevalle kan u die HTML-dokument dubbelklik om dit te doen. As die dokument dubbelklik op `n fout, doen die volgende:
  • Vensters - Regskliek op die dokument, kies Maak oop met, en klik op jou voorkeur blaaier.
  • Mac - Klik op die dokument een keer, kliek lêer, uitkies Maak oop met, en klik op jou voorkeur blaaier.
  • Beeld getiteld 4082 29 2
    9. Wysig die HTML-dokument indien nodig. U kan `n fout in u HTML-bladsy sien. Om dit te verander, kan u die HTML-dokument se teks wysig:
  • Op Windows kan jy die regskliek op die dokument en klik Redigeer In die gevolglike aftrekkieslys (as jy NotaPad ++ geïnstalleer het, sal dit sê Wysig met notaboek++ In plaas daarvan).
  • Op Mac wil jy die dokument klik om dit te kies, kliek lêer, uitkies Maak oop met, en klik TextEdit. U kan ook die dokument in TextEdit sleep.
  • Op Chromebook, sluit die teksprogram, maak die lêers oop, vind jou lêer, en klik dan daarop.

    • Voorbeeld HTML

    HTML Cheat Sheet
    Voorbeeld webblad met HTML

    Video

    Deur hierdie diens te gebruik, kan sommige inligting met YouTube gedeel word.

    Wenke

    Tags moet altyd in `n spieëlbeeld van hul oop eweknieë gesluit word. Byvoorbeeld, moet gesluit wees as .
  • Jy kan `n kant-blaai teks by jou webwerf voeg met die tag, maar onthou dat hierdie merker nie deur sommige blaaiers erken kan word nie.
  • Baie mense Gebruik notaboek++ om hul kode te skryf en op te stel.
  • As jy `n beeld in jou bladsy wil sentreer, kan jy tik na die beeld se naam in die deverebelde Tag (byvoorbeeld,).

    • Waarskuwings

    Dit is die beste om jou eie beelde op Imgur of soortgelyke aan te bied as jy beplan om beelde op jou webblad op te laai. Om ander mense se prente te plaas, kan lei tot kopieregskending.
    Deel op sosiale netwerke:
    Soortgelyk