HTML: struktura e një faqeje

Një faqe është strukturë, jo zbukurim

Çdo faqe web-i që ke hapur ndonjëherë është, poshtë saj, thjesht një skedar teksti. HTML, shkurt për HyperText Markup Language, është grupi i etiketave që e kthejnë atë tekst në një faqe që shfletuesi di ta vendosë në ekran. Ia vlen ta themi qartë, sepse i habit njerëzit: HTML nuk është gjuhë programimi. Nuk ka cikle, nuk ka if, nuk ka variabla. Bën një punë të vetme, dhe e bën mirë. Përshkruan strukturën e një faqeje: kjo pjesë është titull, kjo pjesë është paragraf, kjo pjesë është listë.

Mendoje si skeletin e një shtëpie para bojës. HTML vendos ku janë dhomat. Mësimet e mëvonshme shtojnë stilin dhe sjelljen. Tani për tani, struktura është e gjithë loja.

Etiketat: tullat e ndërtimit

Strukturën e shënon me etiketa (tags). Një etiketë është një fjalë kyçe e mbështjellë me kllapa këndore. Shumica vijnë në çift: një etiketë hapëse dhe një mbyllëse me një vijë të pjerrët, ndërsa përmbajtja rri mes tyre.

<p>Ky është një paragraf.</p>

Këtu <p> hap një paragraf dhe </p> e mbyll. Shfletuesi e lexon gjithçka mes tyre si një paragraf të vetëm. Disa etiketa rrinë vetëm dhe nuk kanë nevojë për mbyllëse, sepse shënojnë një vend të vetëm në vend që të mbështjellin përmbajtje. <hr> vizaton një vijë horizontale, ndërsa <br> detyron një ndërprerje rreshti. Këto quhen etiketa të zbrazëta.

Gjëja që i pengon fillestarët është ndërthurja. Etiketat futen brenda etiketave të tjera, dhe duhet të mbyllen në rendin e kundërt nga si u hapën, si mbyllja e një grupi kllapash. Hap A, hap B, mbyll B, mbyll A. Kurrë mos i kryqëzo.

Skeleti që e ndan çdo faqe

Një faqe e plotë ka një formë të jashtme të fiksuar. Mësoje një herë dhe do ta shkruash me vite.

<html>
  <head>
    <title>Kopshti i lagjes</title>
  </head>
  <body>
    <h1>Mirë se vini në kopshtin tonë</h1>
    <p>Kushdo nga rruga është i mirëpritur të ndihmojë.</p>
  </body>
</html>

Këtu kanë rëndësi tri pjesë. I gjithë dokumenti rri mes <html> dhe </html>. <head> mban informacion rreth faqes, jo përmbajtjen që sheh në të; <title> brenda tij bëhet emri që shfaqet te skeda e shfletuesit. <body> mban gjithçka që vizitori vërtet e sheh. Nëse nuk është brenda <body>, nuk shfaqet në faqe.

Titujt dhe paragrafët

Brenda body-t, dy veglat e tua kryesore janë titujt dhe paragrafët. Titujt vijnë në gjashtë madhësi, nga <h1> (më i madhi, titulli kryesor) deri te <h6> (më i vogli). Nuk janë thjesht tekst i madh: sinjalizojnë rëndësi dhe rend, gjë që i ndihmon lexuesit dhe motorët e kërkimit ta kuptojnë faqen.

<h1>Plani i fundjavës</h1>
<h2>E shtunë</h2>
<p>Në mëngjes mbjellim domate.</p>
<h2>E diel</h2>
<p>Ujitim gjithçka dhe pushojmë.</p>

Përdor një <h1> për titullin kryesor të faqes, pastaj <h2> për seksionet e saj, e kështu me radhë. Mos e zgjidh nivelin e titullit se sa i madh duket; zgjidhe se çfarë do të thotë. Stilizimi i madhësisë vjen më vonë, me CSS.

Një shembull i punuar: një faqe e vogël njoftimi

Le të themi se do një faqe të vogël që njofton një këmbim librash në bibliotekën e lagjes. Nis nga skeleti, jepi një titull të arsyeshëm, pastaj mbushe body-n me një titull kryesor, një paragraf të shkurtër dhe një titull seksioni.

<html>
  <head>
    <title>Këmbim librash</title>
  </head>
  <body>
    <h1>Këmbim librash të premten</h1>
    <p>Sill një libër që e ke mbaruar dhe merr një që nuk e ke lexuar.</p>
    <h2>Ku</h2>
    <p>Salla e leximit, kati i dytë.</p>
    <hr>
    <p>Sill sa libra të duash.</p>
  </body>
</html>

Ruaje si skedar që mbaron me .html, hape në çdo shfletues dhe ke një faqe web-i të vërtetë. Vër re se nuk ka as edhe një rresht programimi në të. Ti përshkrove strukturën, dhe shfletuesi e bëri vizatimin. Ajo ndarje, struktura më parë e sjellja më vonë, është ideja mbi të cilën është ndërtuar pjesa tjetër e këtij moduli.

Provo veten

HTML shpesh quhet gjuhë shënimi (markup) dhe jo gjuhë programimi. Duke u nisur nga çfarë bën, pse është i drejtë ky dallim?
Cili është ndryshimi mes asaj që futet brenda <head> dhe asaj që futet brenda <body>, dhe ku do të rrinte një titull që do ta lexojë vizitori?
E sheh <br> të përdorur pa asnjë mbyllëse </br>. Pse është kjo e saktë, dhe si ndryshon nga një etiketë si <p>?

Nga vjen ky mësim

Ndërtuar mbi

Data Structures and Algorithms: web development session

Kurset e alphaPlan ndërtohen mbi programe të zhvilluara në klasë, e nuk shpiken për web-in. Kur një pohim mbështetet mbi një standard të jashtëm ose mbi një rast të raportuar, ai emërtohet më sipër që ta kontrollosh vetë e të mos na besosh në fjalë.

Ky kurs u zhvillua nga alphaPlan Center mbi bazën e programeve të realizuara në partneritet me rrjetin American Corners.

Gjete diçka të paqartë, të vjetruar ose që mund të përmirësohet? Sugjero një përmirësim