Tekst, imazhe dhe lidhje

Përtej titujve dhe paragrafëve

Tashmë di ta ndërtosh skeletin e një faqeje. Tani e mbushim me përmbajtjen për të cilën vërtet vijnë njerëzit. Tri lloje elementesh mbajnë pjesën më të madhe të peshës në një faqe të vërtetë: listat që organizojnë njësi, imazhet që tregojnë në vend që të përshkruajnë, dhe lidhjet që e kthejnë një faqe të vetmuar në pjesë të web-it. Asnjëra nuk është e vështirë. Secila është një ose dy etiketa, dhe deri në fund të këtij mësimi mund të bashkosh një faqe që ndihet vërtet e dobishme.

Listat: me radhë dhe pa radhë

Sa herë që informacioni është një grup njësish, një listë e bën shumë më të lehtë për t'u lexuar sesa një mur me presje. HTML të jep dy.

Një listë pa radhë përdor <ul> dhe e shfaq çdo njësi me një pikë. Përdore kur rendi nuk ka rëndësi.

<ul>
  <li>Bukë</li>
  <li>Ullinj</li>
  <li>Djathë</li>
</ul>

Një listë me radhë përdor <ol> dhe i numëron njësitë vetvetiu. Përdore kur radha ka rëndësi, si hapat e një recete.

<ol>
  <li>Vlo ujin</li>
  <li>Shto makaronat</li>
  <li>Prit dhjetë minuta</li>
</ol>

Në të dyja, çdo njësi mbështillet me <li>, shkurt për njësi liste (list item). Ta kalosh një listë nga pika te numra është ndryshim aq i vogël sa <ul> te <ol>; njësitë mbeten saktësisht të njëjta.

Imazhet

Një imazh vendoset me <img>, një nga ato etiketa të zbrazëta që nuk ka nevojë për mbyllëse. I mban udhëzimet e veta në atribute, që janë cilësime shtesë të shkruara brenda etiketës hapëse si emri="vlera".

<img src="kopshti.jpg" alt="Radhë me fidanë të rinj domatesh">

Atributi src, shkurt për burim (source), thotë cilin skedar të shfaqë. Nëse imazhi rri në të njëjtën dosje me faqen tënde, mjafton vetëm emri i skedarit. Atributi alt jep një përshkrim të shkurtër me fjalë. Lexohet me zë nga lexuesit e ekranit për njerëzit që nuk e shohin imazhin, dhe shfaqet nëse skedari nuk arrin të ngarkohet. Të shkruash një alt të vërtetë nuk është mirësjellje fakultative; është pjesë e të bërit të punës si duhet.

Lidhjet

Lidhjet janë ato që e bëjnë një web dhe jo një grumbull faqesh të veçanta. Një lidhje përdor etiketën <a>, shkurt për spirancë (anchor), dhe atributi i saj href mban adresën e destinacionit.

<a href="https://example.org">Vizito faqen tonë</a>

Teksti mes etiketave është ai që vizitori sheh dhe klikon; href është vendi ku e çon klikimi. Mund të lidhësh me një faqe tjetër, ose me një skedar tëndin duke e emërtuar, si href="rreth-nesh.html". Shkruaj tekst lidhjeje që thotë ku të çon: "lexo recetën e plotë" i thotë lexuesit shumë më tepër se një "kliko këtu" i thatë.

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

Le t'i bashkojmë të tria në një faqe për një supë të thjeshtë me thjerrëza. Ka një listë me radhë për hapat, një imazh të gjellës së gatshme, dhe një lidhje ku lexuesi mund të gjejë më shumë.

<html>
  <head>
    <title>Supë me thjerrëza</title>
  </head>
  <body>
    <h1>Supë me thjerrëza për një ditë të ftohtë</h1>
    <img src="supa.jpg" alt="Një tas supë me thjerrëza dhe bukë">
    <h2>Hapat</h2>
    <ol>
      <li>Zbut një qepë në vaj</li>
      <li>Shto thjerrëzat dhe ujin</li>
      <li>Ziej derisa të zbuten</li>
    </ol>
    <p><a href="me-shume-receta.html">Shih më shumë receta</a></p>
  </body>
</html>

Lexoje nga lart poshtë dhe zhvillohet me radhë: një titull, një foto, hapa të numëruar, pastaj një mënyrë për të vazhduar. Kjo është një faqe e vogël e plotë dhe e ndershme, dhe çdo pjesë e saj është një etiketë që tani e njeh. Struktura e mban në këmbë; kjo përmbajtje është ajo për të cilën erdhën njerëzit.

Provoje tani

Hap një skedar të ri, ruaje si favourites.html, dhe ndërto një faqe të vogël për diçka që të pëlqen: një titull <h1>, një listë <ul> me tri njësi, një <img> me një përshkrim alt të vërtetë, dhe një lidhje <a> drejt një faqeje të lidhur. Hape në shfletues dhe kontrollo që lista të shfaqë pikat dhe lidhja të çojë atje ku e mendove.

Provo veten

Po shkruan hapat e montimit të një mobilje, ku po e bëre hapin e tretë para të dytit, del keq. Cili lloj liste përshtatet, dhe pse?
Çfarë bën atributi alt te një imazh, dhe përmend dy situata të ndryshme ku ka rëndësi për një vizitor të vërtetë.
Te <a href="rreth-nesh.html">Njihu me ne</a>, cila pjesë është destinacioni dhe cilën pjesë e sheh e klikon vërtet vizitori?

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