Si të shkruani një faqe HTML

Autor: Laura McKinney
Data E Krijimit: 3 Prill 2021
Datën E Azhurnimit: 1 Korrik 2024
Anonim
Pjestimi në Shtyllë me Pjestues Një Shifror.
Video: Pjestimi në Shtyllë me Pjestues Një Shifror.

Përmbajtje

HTML (HyperText Markup Language) është një gjuhë themelore për ndërtimin e faqeve në internet. Shtë krijuar si një gjuhë e lehtë dhe fleksibile e kodimit. Pothuajse çdo faqe në internet është zhvilluar me një formë të këtij kodi (ColdFusion, XML, XSLT). HTML është i lehtë për tu kuptuar, por ju mund të vazhdoni të mësoni për të për një kohë të gjatë nëse jeni të interesuar për funksionalitetin e tij gjithëpërfshirës. Për të shtuar ngjyra dhe argëtim në faqen tuaj të internetit, ju mund të mësoni CSS bazë sa më shpejt që të mësoheni me një faqe themelore HTML.

Hapat

Pjesa 1 nga 4: Ndërtimi i një dokumenti

  1. Hapni një redaktues të thjeshtë teksti. NotePad është një mundësi e mirë dhe mund të shkarkohet falas. Ju mund të shkruani HTML me shumicën e redaktorëve të tekstit, por softueri më kompleks me aftësi të formatimit automatik mund ta bëjë të vështirë organizimin e faqes tuaj HTML.
    • Mos përdorni TextEdit, pasi zakonisht ruan skedarin në një format që shfletuesi juaj nuk mund ta njohë si HTML.
    • Ju gjithashtu mund të përdorni një redaktues në internet HTML. Programet e dedikuara të redaktimit HTML nuk rekomandohen për fillestarët.

  2. Ruani një skedar si një faqe në internet. Zgjidhni Skedarin → Ruaje si në menunë në krye. Ndryshoni formatin e skedarit në "Uebfaqe", ".html" ose ".htm". Ruani skedarin aty ku mund ta gjeni lehtë.
    • Nuk ka asnjë ndryshim midis këtyre tre opsioneve.
  3. Hapni skedarin në një shfletues. Klikoni dy herë në skedar dhe automatikisht do të hapet si një faqe e bardhë në shfletuesin tuaj. Përndryshe, mund të hapni një shfletues, si Firefox ose Internet Explorer, dhe më pas të përdorni Skedarin → Hap skedarin për të zgjedhur dokumentin.
    • Kjo faqe në internet nuk është online. Mund të shikohet vetëm në kompjuterin tuaj.

  4. Rifresko faqen e internetit dhe shiko ndryshimet e bëra. Shkruani sa vijon në dokumentin tuaj bosh: Përshëndetje. Ruani dokumentin. Rifreskoni faqen e bardhë të internetit në shfletuesin tuaj dhe duhet të shihni fjalën "Përshëndetje" me shkronja të zeza të shfaqet në krye të faqes. Kurdoherë që dëshironi të provoni HTML-në tuaj të ri gjatë këtij tutoriali, ruani dokumentin .htm dhe pastaj rifreskoni dritaren e shfletuesit tuaj për të parë se si përpilohet HTML.
    • Nëse i shihni fjalët ""dhe""" Shfaqet në shfletuesin tuaj, skedari nuk është përpiluar si duhet në HTML. Provoni një redaktues tjetër teksti ose një shfletues tjetër.

  5. Mësoni etiketat. Komandat HTML janë shkruar në "etiketa" që i tregojnë shfletuesit se si të përpilojë dhe shfaqë faqen tuaj në internet. Ato shkruhen gjithmonë brenda citateve të vetme , dhe nuk shfaqen në faqen e internetit siç i keni përdorur në shembullin e mësipërm:
    • është një "kartë fillestare" ose "kartë hapëse". Çdo gjë e shkruar pas këtij etiketimi do të përkufizohet si "e theksuar" (e theksuar në një faqe në internet).
    • është një "etiketë fundore" ose "etiketë mbyllëse", të cilën mund ta dalloni nga simboli / shenja. Ai tregon fundin e tekstit të theksuar. Shumica e etiketave (jo të gjitha) kanë nevojë për një etiketë fundore për të funksionuar, sigurohuni që ta përfshini.
  6. Ndërtoni dokumentin tuaj. Fshini gjithçka në dokumentin tuaj HTML. Filloni me tekstin vijues, saktësisht siç ishte shkruar (minus pikat e plumbit). Ky kod HTML i tregon shfletuesit se çfarë lloji të HTML po përdorni, dhe se e gjithë HTML juaj do të vendoset brenda etiketave. dhe .
  7. Shtoni etiketat e kokës (kokës) dhe trupit. Dokumentet HTML janë të ndara në dy pjesë. Seksioni "sipër" është për informacione të veçanta, si titulli i faqes. Seksioni "trupi" përmban përmbajtjen kryesore të faqes. Shtoni të dyja këto seksione në dokumentin tuaj dhe mos harroni të përfshini etiketat përfundimtare. Teksti i sapo shtuar është i theksuar:
  8. Jepi një titull faqes tënde. Shumica e kartave në pjesën e kokës janë të parëndësishme për t'u mësuar me një fillestar. Sidoqoftë, etiketa e titullit është e lehtë për t'u përdorur dhe do të përcaktojë se çfarë shfaqet si emri i dritares së shfletuesit ose në skedën e shfletuesit. Vendosni etiketat tuaja të fillimit dhe mbarimit të titullit brenda etiketave të kokës dhe shkruani çdo titull që ju pëlqen midis atyre etiketave:
    • Faqja ime e parë HTML.
    reklamë

Pjesa 2 nga 4: Formatimi i tekstit

  1. Shtoni tekst në trupin tuaj. Për këtë seksion, ne do të punojmë vetëm me etiketat e trupit. Teksti tjetër do të jetë akoma në dokumentin tuaj, por ne do të kursejmë hapësirë ​​duke mos e përsëritur atë në këtë manual. Shkruaj çfarëdo që dëshiron midis kartave dhe , dhe do të shfaqet si përmbajtja e parë në faqen tuaj. Për shembull:
    • Unë ndoqa udhëzimet wikiHow për të shkruar një faqe HTML.
  2. Shtoni tituj për tekstin. Organizoni faqen tuaj me etiketat e titullit, të cilat udhëzojnë shfletuesin të shfaqë tekst midis tyre në një madhësi më të madhe të shkronjave. Këto etiketa përdoren gjithashtu nga motorët e kërkimit dhe mjete të tjera për të përcaktuar se për çfarë flet faqja juaj në internet dhe si është e organizuar.

    është titulli më i madh dhe mund të krijoni tituj më të vegjël deri në
    . Provojini në faqen tuaj:
    • Mirësevini në faqen time

    • Unë ndoqa udhëzimet wikiHow për të shkruar një faqe HTML.
    • Qëllimi im sot:

    • Qëllimet e përfunduara:
    • Mësoni si të përdorni tituj.
    • Qëllimet e paplotësuara:
    • Mësoni më shumë etiketa të formatimit të tekstit.
  3. Mësoni më shumë etiketa të formatimit të tekstit. Ju tashmë keni parë etiketën "e fortë", por ka shumë mënyra të tjera për të formatuar tekstin tuaj. Provoni këto etiketime, ose me etiketa të shumta në të njëjtën kohë për të njëjtën varg teksti. Mos harroni të shtoni etiketat e mbarimit në pjesën e pasme!
    • Tekst i rëndësishëm, i shfaqur me shkronja të zeza në shfletues.
    • Tekst i theksuar, i shfaqur me shkronja të pjerrëta në shfletues.
    • Teksti pak më i vogël se zakonisht. Ky tekst automatikisht do të ndryshojë madhësinë nëse përdoret në një titull.
    • Teksti nuk është më i rëndësishëm, shfaqet me një vizatim të trupit.
    • Teksti futet më vonë se dokumentet e tjera, shfaqet me nënvizime.
  4. Organizoni tekstin në faqen tuaj. Ju mund të vini re se shtypja e butonit "enter" nuk mjafton që teksti të shfaqet në një rresht tjetër. Këto etiketa mund t'ju ndihmojnë të krijoni paragrafë dhe ndërprerje të rreshtave, ose të rregulloni tekstin tuaj në mënyra të tjera:
    • Shkurtër për "paragraf", (paragrafi) etiketa do të mbajë të gjithë tekstin midis këtyre etiketave në një paragraf, dhe do ta ndajë atë nga teksti sipër dhe poshtë tij.


    • Kjo etiketë do të gjenerojë ndërprerje të linjave. Mos i shtoni një etiketë fundore, pasi nuk ndërhyn me ndonjë përmbajtje tjetër. Përdorni këtë etiketë në poezi ose rreshta adresash, jo paragrafë.
    • Nëse keni nevojë të shfaqni tekstin me shumë saktësi, kjo etiketë e vendos tekstin brenda tij në një font me gjerësi fikse (secila shkronjë ka të njëjtën gjerësi) dhe ju lejon të krijoni intervale Boshllëqet dhe ndërprerjet e linjave siç ju pëlqen për redaktim të rregullt në vend të etiketave.
    • Kjo etiketë përcakton llojin e tekstit që citohet nga një burim.
      Ju mund ta përshkruani burimin më vonë me kartë citimi.
  5. Shto tekst të titullit të padukshëm. Etiketat e komenteve nuk shfaqen në faqen e internetit. Ato ju lejojnë të shënoni veten në dokumentin HTML pa ndikuar në përmbajtje. Mos shtoni një etiketë fundore.
    • Kartat që shkojnë vetëm pa përfunduar etiketat quhen "etiketa boshe".
  6. Kombinojini së bashku. Mënyra më e mirë për të kujtuar këto etiketa është t'i përdorni ato në faqen tuaj të internetit. Këtu është një shembull duke përdorur kartat në hapat që keni mësuar deri më tani. Mundohuni të parashikoni se si do të shfaqen ato në shfletues, pastaj kopjoni ato në dokumentin tuaj dhe zbuloni.
    • Faqja ime e parë HTML.
    • Mirësevini në faqen time te internetit

    • Shpresoj se ju pëlqen kjo faqe!

      Unë e bëra atë vetëm për ju.

    • Pjesa 1: Si e zbulova HTML

    • Unë kam mësuar HTML tashmë në një dyorë, kështu që tani unë jam një ekspert.
    reklamë

Pjesa 3 nga 4: Shtimi i Lidhjeve dhe Imazheve

  1. Mësoni rreth atributeve. Etiketat mund të kenë informacione shtesë të shkruara brenda tyre, të quajtura atribute. Këto atribute përfaqësohen nga fjalë shtesë brenda vetë etiketave, në formë emri i pronës = "vlera specifike". Për shembull, çdo etiketë HTML mund të ketë tiparin e titullit:
    • Paragrafi hyrës është këtu.

      Titullo paragrafin "Hyrje", i cili do të shfaqet kur kaloni mbi paragrafin në faqen e internetit.
  2. Lidhje me faqet e internetit të tjera. Përdorimi i kartave për të krijuar një hiperlidhje me ndonjë faqe tjetër në internet. Vendosni URL-në e faqes në internet për tu lidhur me përdorimin e atributit href. Këtu keni një shembull që lidhet me faqen në internet që po lexoni:
  3. Shtoni një atribut id në etiketë. Një tjetër atribut që çdo etiketë HTML mund të përdorë është elementi "id". Në çdo kartë, shkruaj id = "vidu" ose përdorni ndonjë emër që nuk përmban hapësira. Nuk prodhon ndonjë efekt të dukshëm, por ne do ta përdorim atë në hapin tjetër.
    • Për shembull, shtoni sa vijon në dokumentin tuaj:

      Ky paragraf është përdorur si një shembull për të përshkruar se si funksionon tipari id.

  4. Lidhje me një element me një ID të caktuar. Tani mund të përdorim etiketën e hiperlidhjes, , për t'u lidhur me një vendndodhje tjetër në të njëjtën faqe. Në vend të një URL-je, ne do të përdorim simbolin #, të ndjekur nga vlera e id-së në të cilën duam të lidhemi. Për shembull, Ky tekst do të lidhet me tekstin me id "vidu".
    • Të gjitha vlerat HTML janë të ndjeshme në shkronja të mëdha. "#VIDU" dhe "#vidu" do të lidhen të dy në të njëjtin vend.
    • Nëse faqja juaj është mjaft e shkurtër për të shfaqur të gjithë faqen në të njëjtën kohë, ju ndoshta nuk do të vini re asgjë që ndodh duke klikuar në një lidhje në shfletuesin tuaj. Ndryshoni përmasat e dritares derisa të shfaqet shiriti lëvizës dhe provoni përsëri.
  5. Shtoni foto. Kartelë është një etiketë boshe, që do të thotë se nuk ka nevojë për asnjë etiketë fundore. Të gjitha informacionet që shfletuesi ka nevojë për të shfaqur imazhin shtohen duke përdorur atributet. Këtu keni një shembull për të shfaqur logon wikiHow, me një përshkrim për secilën atribut prapa:
    • Logoja e WikiHow
    • Vetitë src = "" i tregon shfletuesit se ku është fotografia. (Vini re se postimi i një foto nga faqja e dikujt tjetër konsiderohet e papërshtatshme - dhe fotografia do të zhduket kur faqja të mos jetë më aktive.)
    • Vetitë stili = "" Mund të bëjë shumë gjëra, por më e rëndësishmja është se përdoret për të vendosur gjerësinë dhe lartësinë e një imazhi në pixel. (Ju gjithashtu mund të përdorni atributet e ndara gjerësia = "" dhe lartësia = "" në vend të kësaj, por kjo mund të çojë në probleme të çuditshme të ndryshimit të madhësisë nëse përdorni CSS.)
    • Vetitë alt = "" është një përshkrim i shkurtër i imazhit që përdoruesi do të shohë nëse imazhi nuk u ngarkua. Kjo konsiderohet si një kërkesë, pasi përdoret për lexuesit e ekranit për vizitorët e faqeve të internetit që janë të verbër.
    reklamë

Pjesa 4 nga 4: Mësoni më shumë Shtimi dhe Marrja e Uebfaqes Tuaj Online

  1. Konfirmoni HTML-në tuaj. Vlerësimi HTML kontrollon për gabime në kodin tuaj. Nëse faqja juaj nuk po shfaqet si duhet, vërtetimi mund t'ju ndihmojë të gjeni gabimin që po shkakton problemin. Ai gjithashtu mund t'ju mësojë më shumë rreth HTML duke përcaktuar që kodi duket mirë në ekran, por nuk rekomandohet më për shkak të azhurnimeve të reja në standardin HTML. Përdorimi i HTML i pavlefshëm nuk e bën faqen tuaj të padobishme, por mund të shkaktojë probleme ose shfaqje e paqëndrueshme në shfletues të ndryshëm.
    • Provoni një shërbim falas të vlefshmërisë në internet nga W3C, ose kërkoni për një tjetër mjet të vlefshmërisë HTML 5 në internet.
  2. Mësoni më shumë etiketat dhe atributet. Ka shumë etiketime dhe atribute të tjera HTML, dhe shumë vende për t'i mësuar ato:
    • Provoni w3schools dhe HTML Dog për më shumë udhëzime dhe lista të plota të etiketave.
    • Gjeni një faqe në internet që ju pëlqen mënyra se si duket, pastaj përdorni funksionin "Shiko burimin e faqes" të shfletuesit tuaj për të marrë vetë kodin HTML. Kopjoni atë në dokumentin tuaj dhe studioni se si funksionon.
    • Lexoni artikuj të tjerë dhe mësoni se si të krijoni tabela në HTML, të përdorni meta tags për të rritur shanset tuaja për ta gjetur atë përmes motorëve të kërkimit, ose të përdorni një ndarje. vendosni një zonë në faqe) dhe hapësirën (përdoret për të specifikuar stilin e elementit të tekstit) për të ndihmuar stilin përmes CSS.
  3. Merrni faqen tuaj në internet. Zgjidhni një shërbim për të pritur faqen tuaj të internetit dhe më pas mund të ngarkoni sa më shumë faqe HTML sa të doni në domenin tuaj personal të uebit. Për ta bërë këtë, do t'ju duhet të përdorni softuerin e ngarkimit FTP, por shumë shërbime me qira në internet ofrojnë gjithashtu këtë shërbim.
    • Kur lidheni me faqe ose imazhe që janë drejtpërdrejt në faqen tuaj, do të duhet të përdorni adresën e plotë të faqes. Për shembull, nëse emri juaj i domain-it është www.chuyengiahtmlsieudang.com, atëherë teksti është në këto etiketa do të lidhet me "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
  4. Shtoni stile me CSS. Nëse faqja juaj HTML duket pak monotone, provoni të mësoni bazat e CSS për të shtuar ngjyra, gërma të ndryshme dhe kontroll më të mirë se ku vendosen elementet. Lidhja e një "stili stili" të CSS me një faqe HTML do t'ju lejojë të bëni ndryshime drastike në lëvizje, duke rregulluar automatikisht stilin e të gjithë tekstit brenda një etikete të caktuar. Ju mund të luani me shtresën themelore të formatimit pak këtu, ose të gërmoni pak më shumë me HTML CSS Tutorial.
  5. Shtoni JavaScript në faqen tuaj të internetit. JavaScript është një gjuhë programimi që përdoret për të shtuar shumë funksione në faqet tuaja HTML. Komandat JavaScript futen midis etiketave fillestare dhe përfundimtare , dhe mund të përdoret për të shtuar butona ndërveprues, llogaritjen e problemeve të matematikës, dhe më shumë. Gjeni më shumë në shembujt e w3c. reklamë

Këshilla

  • Deklarata e doctype (Deklarata e Llojit të Dokumentit e përdorur) e përdorur në këtë udhëzues është "HTML 4.0.1 lirshëm kalimtar" (HTML 4.0.1 tranzicion jo i ngushtë), një format i thjeshtë. që fillestarët t’i përdorin. Përdorni () një alternativë për të kërkuar që shfletuesi ta përpilojë atë në një format të rreptë HTML 5, i cili është stili standard i rekomanduar (megjithëse përdoret më rrallë).

Paralajmërim

  • Qëllimi i HTML është të mbajë përmbajtjen në një format global. Nuk kontrollon prezantimin e faqes suaj të internetit, siç është ngjyra e sfondit dhe vendosja e saktë e elementeve. Ndërsa ka akoma etiketa që ju lejojnë ta bëni këtë, është një ide e mirë të përdorni CSS për të krijuar një faqe në internet më të kontrollueshme dhe të qëndrueshme.

Çfarë ju duhet

  • Një redaktues i thjeshtë teksti, si NotePad ose TextEdit
  • Një shfletues uebi, për shembull Internet Explorer ose Mozilla Firefox
  • (Opsionale) Një redaktues HTML si Adobe Dreamweaver, Aptana Studio ose Microsoft Expression Web