Tutorial HTML (për fillestarët)

Tutorial HTML për fillestarëtDëshironi të mësoni disa HTML?


Kjo tingëllon si një ide e shkëlqyer. Prandaj arsyeja pse ne e kemi bashkuar këtë udhëzues HTML për fillestarët.

Ka të paktën 1.7 miliardë faqet e internetit sot në botë. Praktikisht të gjitha këto faqe interneti përdorin HTML në një mënyrë ose tjetrën.

P.S: Nëse nuk doni të mësoni HTML dhe filloni të ndërtoni faqen tuaj të internetit menjëherë, pa kërkuar kodim, hidhini një sy këtij udhëzuesi: Si të bëni një faqe interneti FALAS (pa mësuar HTML).

Hyrje në HTML


Farë është HTML?

Farë është HTMLHTML, një akronim për HyperText Markup Language, është një gjuhë kompjuterike për krijimin e faqeve të internetit dhe aplikacioneve në internet. Krijimi kryesisht i serive të kodeve që zakonisht shkruhen në një skedar teksti dhe ruhen si HTML, kodi i shkruar në gjuhën HTML përkthehet në një tekst të bukur, të mirë-formatuar ose një kombinim të tekstit dhe mediave kur shihet përmes një shfletuesi..

HTML u zhvillua për herë të parë nga fizikani britanik Tim Berners-Lee në 1990, dhe ajo ka kaluar nëpër kaq shumë evolucione që nga ajo kohë që versioni më i fundit mund të arrijë shumë më tepër sesa imagjinohej e mundur kur gjuha u shpik për herë të parë.

Në këtë tutorial, ne do të kalojmë në bazat e gjuhës HTML dhe gjithçka që duhet të dini për të filluar me HTML si fillestar.

Versione HTML

Së pari, një përmbledhje e shpejtë e të gjitha versioneve HTML që kur u shpik HTML.

  • HTML 1.0: Ky ishte versioni barebones i HTML dhe lirimi i parë i gjuhës.
  • HTML 2.0: Ky version u prezantua në 1995. gradualisht evoluoi, duke lejuar aftësi shtesë duke përfshirë ngarkimin e skedarëve të bazuar në formë, tabelat, hartat e imazheve nga klienti dhe ndërkombëtarizimin.
  • HTML 3.2: Në një përpjekje për të siguruar zhvillimin e standardeve për World Wide Web, Konsorciumi World Wide Web (W3C) u themelua nga Tim Berners-Lee në 1994. Deri në 1997, ata publikuan HTML 3.2.
  • HTML 4.0: Më vonë në 1997, W3C lëshoi ​​HTML 4.0 – një version që adoptoi shumë lloje dhe atribute të elementeve specifike të shfletuesit.
  • HTML 4.0 u ribotua më vonë me redaktime të vogla në 1998.
  • HTML 4.01: Në Dhjetor 1999 u lëshua HTML 4.01.
  • XHTML: Specifikimet u prezantuan në vitin 2000 dhe rekomandohej të përdoret si standard i përbashkët me HTML 4.01. Ai përfshiu XML për të siguruar që kodi është shkruar si duhet dhe për të siguruar ndërveprimin midis gjuhëve të programimit.
  • HTML5: W3C publikoi HTML5 si rekomandim në Tetor 2014 dhe më vonë lëshoi ​​HTML 5.1 në Nëntor 2016.

Zgjedhja e Redaktorit tuaj HTML

Zgjidhni redaktorin HTMLNëse jeni duke menduar të krijoni faqe në internet në HTML, ju duhet një redaktues HTML. Ka shumë përfitime për të përdorur një redaktues HTML.

Një redaktues i mirë HTML do ta mbajë kodin tuaj të pastër dhe të organizuar. Do të zbulojë gjithashtu kur të hapni një etiketë të re dhe ta mbyllni automatikisht për të mos ju pasur një kod të gabuar dhe si rezultat të zvogëloni sa shtypni që duhet të bëni. Shumica e redaktuesve HTML sot ju lejojnë të shikoni faqen tuaj të internetit për të parë se si do të duket në një shfletues në internet duke përdorur funksionin e tyre WYSIWYG.

Ka shumë redaktues të lirë dhe të paguar HTML, më poshtë janë disa nga opsionet kryesore që mund të zgjidhni nga:

Blloqet themelore të ndërtimit të HTML


Pasi të keni vendosur për redaktorin HTML që dëshironi të përdorni, hapi tjetër është të kuptoni blloqet e ndërtimit të HTML. Kur kodoni në HTML, është thelbësore të kuptoni këto blloqe ndërtimi. Ato përfshijnë etiketa, atribute dhe elemente. Ne do t’i hedhim një vështrim themelor në ato më poshtë:

Hyrje në Etiketa

Sapo të futeni në HTML, gjëja e parë që duhet të kuptoni janë etiketat. Në thelb, etiketat veçojnë tekstin normal nga kodi HTML.

Si pasojë, kur bëhet fjalë për HTML, etiketat bëjnë dallimin midis faktit nëse dokumenti juaj shfaqet si tekst i zakonshëm ose “tekst i transformuar” i cili në thelb është një kod teksti i cili duket se shfaq një seri gjërash (lidhjet, imazhet, media ose të tjera) metodat e formatimit) bazuar në atë që udhëzohet të shfaqet bazuar në etiketa.

Le ta shqyrtojmë fjalën “Ai është një djalë” si shembull:

  • Në formatin e zakonshëm të tekstit, ju merrni: Ai është një djalë.
  • Në formatin e guximshëm të tekstit, ju merrni: Ai është një djalë

Për të arritur atë që kemi në formatin e guximshëm ju duhet ta përdorni etiketë.

duke e bërë tekstin të guximshëm në HTML

Në HTML të papërpunuar kemi Ai është një djalë të cilin shfletuesi pastaj e përkthen në këtë: Ai është një djalë.

“Ai është një djalë” gjithashtu mund të dalë i italizuar.

Kjo arrihet duke përdorur etiketë.

duke e bërë tekstin të italizuar në html

Ne kemi: Ai është një djalë e cila më pas del si Ai është një djalë.

Lidhja lidhëse arrihet duke përdorur etiketë.

duke e bërë tekstin të lidhur në HTML në HTML

Në HTML të papërpunuar kemi: Ai është një djalë i cili tregon pasi është djalë.

Ka disa gjëra që duhet të kuptoni për etiketat:

  • Etiketat janë praktikisht bllok ndërtimi i HTML – nuk mund të bëni HTML pa etiketa! Nëse jeni ngecur në cilën etiketë për të përdorur, sigurohuni që të shikoni tabelën tonë periodike HTML.
  • Pothuajse çdo etiketë e hapur duhet të jetë e mbyllur. Mbani në mend se ka përjashtime. Një shembull i një etikete që nuk duhet të mbyllet është një etiketë boshe, siç është thyerja e vijës:
    .
  • Etiketat përmbajnë më pak se (“<”) and greater than (“>“) Kllapa këndore. Etiketat përmbyllëse përmbajnë një presje tërheqëse që bëhet para se të mbyllet emri i etiketës. Shembull i një etikete të hapur: . Shembull i një etikete të mbyllur .
  • Filedo skedar HTML fillon me etiketën e hapjes dhe mbaron me etiketën përmbyllëse. Rreshti i parë i skedarit HTML duhet të deklarojë llojin e dokumentit në mënyrë që shfletuesi të dijë se çfarë shije HTML ju përdorni. Kjo është arsyeja pse ju shihni faqet HTML fillojnë me “”Para se të fillojë kodi HTML.

Para se të shtohet përmbajtja, shumica e skedarëve HTML në thelb duken kështu:

HTML--

Seksioni që pason etiketa zakonisht përmban informacione rreth dokumentit, siç janë titulli i tij, etiketat meta dhe ku mund të gjeni skedarin e tij CSS – përmbajtje që nuk është e dukshme drejtpërdrejt në faqen e shfletuesit. Seksioni midis “ dhe“(Të cilën ne e përfaqësuam me” përmbajtjen kryesore “) është vendi ku përmbajtja kryesore e skedarit HTML, që shikuesi do ta shohë në shfletues, është e vendosur. Kjo përfshin gjithçka nga paragrafi i parë tek lidhjet deri te formatimi në multimedia dhe gjithçka tjetër.

Hyrje në Elemente

prezantimi i elementeve

Në HTML, një “element” konsiston në etiketën hapëse dhe mbyllëse, si dhe përmbajtjen midis etiketave.

Në “Ai është një djalë“(Me theks të theksuar), ne e kemi këtë në HTML: Ai është një djalë. Teksti “Ai është një djalë” është i rrethuar nga një etiketë e hapur dhe e mbyllur. Gjithçka, përfshirë etiketën e hapjes, përmbajtjen dhe etiketën e ngushtë është një element.

Kur hapet një etiketë, futet përmbajtja dhe etiketa është e mbyllur, ne kemi një element.

Një element mund të jetë në një formë themelore ose në një formë komplekse. Pse? Sepse çdo gjë në mes një etiketë të hapur dhe një etiketë përmbyllëse, si dhe atyre etiketave është një element. Do të thotë që ne mund të kemi elemente brenda një elementi. Në shembullin tonë aktual, “ai është një djalë” (Ai është një djalë) është një element.

Do të vini re që ne thamë më herët që dokumentet HTML përmbajnë shënoni përpara se të fillojë përmbajtja. Përmbajtja mund të përfshijë qindra elementë të ndryshëm, por të gjithë këta elementë janë pjesë e elementit “trup” (pasi elementi i trupit është i hapur, përmban përmbajtje dhe më pas mbyllet).

Hyrje në atributet

Ndërsa dokumentet HTML në thelb përdorin etiketa për gjithçka, ne ndonjëherë dëshirojmë të komunikojmë informata shtesë brenda një elementi. Në këtë rast, ne përdorim një atribut. Atributi përdoret për të përcaktuar karakteristikat e një elementi, ai përdoret brenda etiketës fillestare të elementit. Atributet përbëhen nga një emër dhe një vlerë.

Vini re se vlera e një atributi vendoset brenda një shenje kuotimi duke përdorur formatin Teksti juaj.

shembull i një atributi

shembull:

Ai është një djalë

Në këtë shembull, ne po udhëzojmë që “Ai është një djalë” është rreshtuar në qendër të dokumentit.

Fillimi me HTML


Fillimi me HTMLDuke supozuar se dëshironi të krijoni dokumentin tuaj themelor HTML sot, si filloni? Nga krijimi i titujve të faqeve deri në krijimin e formave, ne do t’ju ndjekim se si të filloni me HTML më poshtë.

Krijimi i HTML element

Kur krijoni një dokument HTML, një nga gjërat e para që do të krijoni është element. Kjo përmban metadata (ose të dhëna në lidhje me dokumentin HTML). Kjo përfshin informacione të tilla si grupi i karaktereve, titulli i dokumentit, stilet e dokumenteve, skriptet, etj.

Disa nga elementet në përfshijnë titullin, i cili është krijuar me etiketë.</p><p><strong>shembull</strong>:</p><pre><title>Ky është titulli i faqes tonë

Ky titull do të shfaqet në skedën e shfletuesit. Shtë gjithashtu ajo që do të indeksohet si titulli i faqes kur botët e motorit të kërkimit zvarriten në faqen tuaj të internetit.

Kjo gjithashtu përfshin element, i cili shpesh përdoret për të specifikuar motorët e kërkimit të informacionit që mund të përdorin për të përshkruar përmbajtjen në listat e tyre. Kjo përfshin përshkrimin, fjalët kyçe, informacionin e autorit, etj elementi gjithashtu specifikon karakterin e caktuar që përdor dokumenti HTML.

Krijimi i titujve në HTML

krijimin e titujve në html

Titujt luajnë një rol të madh në suksesin e një faqe në internet. Së pari, ata e bëjnë më të lehtë për lexuesit që të skanojnë përmbajtjen e faqeve tuaja. Së dyti, dhe ndoshta më e rëndësishmja, ata komunikojnë strukturën e faqeve tuaja në internet për motorët e kërkimit dhe për këtë arsye shpesh ndikojnë në atë se si përmbajtja juaj renditet në rezultatet e motorit të kërkimit.

Thënë kjo, është e rëndësishme të shmangni përdorimin e etiketave të titullit për ta bërë tekstin tuaj të madh apo të guximshëm. Ka etiketa të tjera që mund të përdoren për këtë (të cilat do t’i marrim më vonë në këtë seksion). Përkundrazi, titujt e titujve duhet të përdoren vetëm për strukturë.

Ekzistojnë gjashtë etiketa të titujve në HTML:

, me

etiketë që tregon titullin më të rëndësishëm dhe
etiketë që tregon titullin më pak të rëndësishëm.

Për të krijuar tituj, thjesht vendosni se çfarë kreu po krijoni, hapni titullin me etiketën e titullit të rregullt dhe mbani mend gjithmonë të mbyllni etiketat pasi të keni bërë.

Shembuj të Titujve HTML:

  • Ky është Titulli juaj i parë HTML

    (me e madhja)

  • Ky është Titulli juaj i dytë HTML

  • Ky është Kreu juaj i Tretë HTML

  • Ky është Kreu juaj i katërt HTML

  • Ky është Kreu i Pesti juaj HTML
  • Ky është Titulli juaj i gjashtë HTML

Krijimi i paragrafëve

krijimin e paragrafëve në HTML

Hapi tjetër është të filloni krijimin e paragrafëve. Paragrafët mund të krijohen me

etiketë.

shembull:

Ky është paragrafi juaj i parë.

Ky është paragrafi juaj i dytë dhe do të krijoni shumë paragrafë.

Mbani në mend se shkrimi në HTML është shumë i ndryshëm nga të shkruarit në tekst të pastër. Prandaj, nëse ndani tekstin brenda HTML pa filluar një paragraf të ri, nuk do të ketë rëndësi kur teksti shfaqet nga shfletuesi. Në vend të kësaj, ju dëshironi të përdorni një ndërprerje të linjës, e cila përfaqësohet nga
etiketë.

shembull:

Ky është një paragraf i ri. Dhe unë dua të përdor një numër linjash të reja. Kështu që unë po e copëtoj.

Kjo nuk do të dalë si më poshtë:

Ky është një paragraf i ri.
Dhe unë dua të përdor një numër linjash të reja.
Kështu që unë po e copëtoj.

Në vend të kësaj, do të dalë kështu:

Ky është një paragraf i ri. Dhe unë dua të përdor një numër linjash të reja. Kështu që unë po e copëtoj.

Pra, si i copëtoni tekstet në rreshta të rinj, në mënyrë që të tregohej kështu:

Ky është një paragraf i ri.
Dhe unë dua të përdor një numër linjash të reja.
Kështu që unë po e copëtoj.

Duke përdorur pushimet e linjës.

shembull:

Ky është një paragraf i ri.
Dhe unë dua të përdor një numër linjash të reja.
Kështu që unë po e copëtoj.

Thënë kjo, është e rëndësishme të theksohet se prishja e vijës (
) etiketa është një etiketë bosh, kështu që nuk duhet të mbyllësh.

Formatimi i tekstit në HTML

formatimin e tekstit në HTML

Hapi tjetër është që të formatoni tekstin tuaj në HTML. Këtu mund të tregoni nëse dëshironi që teksti juaj të dalë i guximshëm, i italizuar, nënvizuar, i abonuar, i mbishkruar, etj. Ky është një udhëzues bazë, kështu që kjo pjesë nuk do të jetë e gjitha-fundja për të formatuar. Në vend të kësaj, ne do të përfshijmë vetëm disa etiketa themelore të formatimit. Procesi i përdorimit të formave të tjera të formatimit është i thjeshtë – thjesht gjeni etiketën që dëshironi dhe shkoni përpara:

Duke përdorur të guximshme: Ai është një djalë del si Ai është një djalë

Përdorimi i italikëve: Ai është një djalë del si Ai është një djalë

Nënvizimi i tekstit: Ai është një djalë del si Ai është një djalë. Vlen të përmendet se etiketa u zhvlerësua në HTML 4.01 dhe u ripërcaktua për të përfaqësuar tekstin stilistikisht të ndryshëm në HTML5. Si rezultat, rekomandohet të përdorni CSS për të treguar tekstin që duhet të nënvizohet. Meqenëse ky artikull është një udhëzues bazë, ne po e mbajmë atë të thjeshtë.

Duke përdorur abonimin: Ai është një djalë del si Ai është një djalë

Duke përdorur superscript: Ai është një djalë del si Ai është një djalë

Për etiketat e tjera që mund të përdoren për të formatuar, ju mund të dëshironi të hidhni një vështrim në fjalorin në fund të këtij burimi, ku ne kemi përfshirë mjaft etiketa përkatëse HTML.

Listat e porositura dhe të pakontrolluara

Herët a vonë do të duhet të krijoni lista. Listat mund të porositen (d.m.th. të numëruara) ose të pakontrolluara (d.m.th. të panumërta).

Këtu është një shembull i një liste të porositur:

  1. Pika 1
  2. Pika 2
  3. Pika 3

Ja se si ta krijoni atë:

  1. Pika 1
  2. Pika 2
  3. Pika 3

Këtu është një shembull i një liste të pakontrolluar:

  • Pika 1
  • Pika 2
  • Pika 3

Ja se si ta krijoni atë:

  • Pika 1
  • Pika 2
  • Pika 3

Nëse nuk është tashmë e qartë. Këtu është një ndarje:

  • etiketa përdoret për të treguar secilën artikull në listë. Kur bëni një listë, mund të përdorni
      etiketë për të treguar një listë të porositur (“o” = porositur dhe “l” = listë) ose