HTML – Njohuri themelore
HTML është gjuha kryesore shënjuese për përshkrimin e strukturës së ueb faqeve.
HTML është akronim nga HyperText Markup Language. HTML është blloku themelor i Rrjetit Mbarë Botëror – World Wide Web.
Hypertext është teksti i paraqitur në një kompjuter ose pajisje tjetër elektronike me referenca në një tekst tjetër në të cilin shfrytëzuesi mund të qaset menjëherë, zakonisht me anë të një klikimi të mausit ose shtypjes së tastit.
Përveç tekstit, hiperteksti mund të përmbajë tabela, lista, forma, imazhe dhe elemente tjera prezantuese. HTML është një format i lehtë për t’u përdorur dhe fleksibël për të ndarë informacionin përmes Internetit.
Gjuhët e shënjimit përdorin grupe të etiketave (tags) të shënjimit për të karakterizuar elementet e tekstit brenda një dokumenti, i cili u jep udhëzime ueb shfletuesve (web browsers) se si duhet të shfaqet dokumenti.
HTML u krijua fillimisht nga Tim Berners-Lee në vitin 1990. Ai është i njohur gjithashtu si babai i Uebit. Në vitin 1996, Konsorciumi World Wide Web (W3C) u bë autoriteti për të mirëmbajtur specifikimet HTML. HTML gjithashtu u bë një standard ndërkombëtar (ISO) në vitin 2000. HTML5 është versioni i fundit i HTML. HTML5 siguron një qasje më të shpejtë dhe më të fuqishme për zhvillimin e uebit.
Çfarë mund të bëni me HTML?
Ka shumë më tepër gjëra që ju mund të bëni me HTML.
- Mund të publikoni në Internet dokumente me tekst, imazhe, lista, tabela, etj.
- Mund të përdorni burimet e uebit siç janë imazhet, videot ose dokument tjetër HTML përmes lidhjeve të ndryshme.
- Mund të krijoni formularë për të mbledhur të dhënat e përdorueseve, si emri, adresa e postës elektronike, komentet, etj.
- Mund të përfshini imazhe, video, klipe zanore, video, aplikacione dhe dokumente të tjerë HTML direkt brenda një dokumenti HTML.
- Mund të krijoni një version offline të ueb sajtit tuaj që funksionon pa internet.
- Mund të ruani të dhëna në shfletuesin e përdoruesit dhe t’ju qaseni më vonë.
- Mund të gjeni vendndodhjen aktuale të vizitorit në ueb sajtin tuaj.
Lista nuk mbaron këtu, ka shumë gjëra të tjera interesante që mund të bëni me HTML.
Shënim: HTML siç u përshkrua më herët është një gjuhë e shënjimit dhe jo një gjuhë programimi, si Java, C++, PHP, etj. Ju nevojitet një ueb shfletues për të parë faqet HTML. Ueb shfletuesit nuk shfaqin etiketat HTML, por përdorin etiketat për të interpretuar përmbajtjen e ueb faqeve.
HTML – Hyrje
Është shumë e lehtë të krijoni një dokument HTML, pra një ueb faqe. Për të filluar kodimin në HTML ju nevojiten së paku dy gjëra: një tekst editorë i thjeshtë dhe ueb shfletuesi.
Krijimi për herë të parë i një dokumenti HTML
Le të lëvizim nëpër hapat e mëposhtëm. Në fund të kësaj kaptine, ju do të keni krijuar një fajll HTML që shfaq mesazhin "Përshëndetje Botë" në ueb shfletuesin tuaj.
Hapi 1: Krijimi i fajllit HTML
Hapni një tekst-editorë të thjeshtë në kompjuterin tuaj dhe krijoni një fajll.
Këshillë: Ju sugjerojmë të përdorni Notepad (në Windows), TextEdit (në Mac) ose ndonjë tekst-editorë tjetër të thjeshtë për ta bërë këtë; mos përdorni Word ose WordPad!
Hapi 2: Shënoni ca kod HTML
Filloni me një dritare të zbraztë dhe shkruani kodin e dhënë në shembullin e mëposhtëm.
Shembull:
<!DOCTYPE html>
<html lang="sq">
<head>
<title>Dokument i thjeshtë HTML</title>
</head>
<body>
<p>Përshëndetje Botë!<p>
</body>
</html>
Hapi 3: Ruajtja e fajllit
Tani ruani fajllin në desktop kësisoj "uebfaqja.html ".
Shënim: Është e rëndësishme që shtojca (extension) .html të specifikohet - pasi disa editorë teksti, siç është Notepad, do ta ruajnë automatikisht si .txt
Për të hapur fajllin e ruajtur në një shfletues, navigoni tek fajlli juaj, pastaj klikoni dy herë mbi të. Do të hapet në ueb shfletuesin tuaj të parazgjedhur. Nëse jo, hapni shfletuesin tuaj dhe tërhiqeni fajllin në të.
Shpjegimi i kodit
Mund të pyetni se për çfarë ishte ai kod. Pra, le ta zbulojmë.
- Rreshti i parë <!DOCTYPE html> është deklarata për llojin e dokumentit. I jep udhëzim ueb shfletuesit e që ky dokument është një dokument HTML5. Është i pandjeshëm në llojin e shkronjave – të mëdha apo të vogla (case-insesetive).
- Elementi <head> është një konteiner për etiketat që ofrojnë informacion në lidhje me dokumentin, për shembull, etiketa <title> përcakton titullin e dokumentit.
- Elementi <body> përmban në vete përmbajtjen aktuale të dokumentit (paragrafë, lidhje, imazhe, tabela etj.) e që paraqitet në ueb shfletues dhe i shfaqet përdoruesit.
Tani në fillim thjesht do të përqendrohemi në strukturën themelore të dokumentit HTML, pa ju qasur detajeve.
Shënim: Deklarata DOCTYPE shfaqet në krye të çdo ueb faqeje përpara se të gjithë elementet tjerë. Megjithatë vetë deklarata e dok-tipit nuk është etiketë HTML. Çdo dokument HTML kërkon një deklaratë për tipin e dokumentit për të siguruar që faqet tuaja të shfaqen në mënyrë korrekte.
Këshillë: Etiketat <html>, <head> dhe <body> përbëjnë skeletin bazë të çdo ueb faqeje. Përmbajtja brenda <head> dhe </head> është e padukshme për përdoruesit me një përjashtim: teksti midis etiketave <title> dhe </title> i cili shfaqet si titull në tab-in të shfletuesit.
Etiketat (tags) dhe elementet e HTML-së
HTML është shkruar në formën e elementeve HTML të përbërë nga etiketa shënjuese. Këto etiketime shënjuese janë karakteristika themelore e HTML-së. Çdo etiketë e shënimit përbëhet nga një fjalë kyçe, e rrethuar nga simbolet më e vogël (<) dhe më e madhe (>), të tilla si <html>, <head>, <body>, <title>, <p>, etj.
Etiketat HTML zakonisht vijnë në çifte si <html> dhe </html>. Etiketa e parë në një çift shpesh quhet etiketimi i hapjes (ose etiketa e fillimit), dhe etiketimi i dytë quhet etiketimi i mbylljes (ose etiketa e fundit).
Një etiketë e hapjes dhe një etiketë e mbylljes janë identike, përveç një vize të pjerrtë (/) pas simbolit më e vogël të etiketës mbyllëse, për t'i thënë shfletuesit që komanda është kryer.
Në mes të etiketave fillestare dhe përfundimtare mund të vendosni përmbajtjen e duhur. Për shembull, një paragraf, i cili përfaqësohet nga elementi p, do të shkruhej si:
Shembull:
<p>Ky është një paragraf.</p>
<!-- Paragraf me elemente të vendosura -->
<p>Ky është <b>një tjetër</b> paragraf.</p>
Elementet e HTML-së
Një element HTML është një komponentë individuale e një dokumenti HTML që përfaqëson semantikën, ose kuptimin. Për shembull, elementi title përfaqëson titullin e dokumentit.
Shumica e elementeve HTML janë shkruar me një etiketë fillestare (ose etiketë hapëse) dhe një etiketë përfundimtare (ose etiketë mbyllëse), me përmbajtje në mes tyre. Elementet gjithashtu mund të përmbajnë atribute që përcaktojnë vetitë e tyre shtesë. Për shembull, një paragraf, i cili përfaqësohet nga elementi p, do të shkruhej si:
Shënim: Të gjithë elementët nuk kërkojnë që të kenë të pranishëm etiketën mbyllëse ose etiketimin përfundimtar. Këto i referohen elementëve të zbrazët ose elementeve me vetë-mbyllje.
Etiketat krahas Elementeve
Teknikisht, një element HTML është grumbull i etiketës hapëse, atributeve të tij, etiketës mbyllëse dhe gjithçkaje në mes tyre. Nga ana tjetër, një etiketë HTML (hapëse ose mbyllëse) përdoret për të shënuar fillimin ose fundin e një elementi, siç mund ta shihni në ilustrimin e mësipërm.
Sidoqoftë, në zbatimet e zakonshme termat element HTML dhe etiketë HTML janë të këmbyeshëm d.m.th. një etiketë është një element i një etiketë. Për shkak të thjeshtësisë së këtij materiali mësimor, termat "etiketë" dhe "element" përdoren për të kuptuar të njëjtën gjë – pra do të definoj diçka në ueb faqen tuaj.
Mosndjeshmëria nga lloji i shkrimit në etiketa dhe atribute
Në HTML, emërimet e etiketave dhe atributeve nuk janë të ndjeshëm në atë se cilat lloj shkronja përdoren, të mëdha apo të vogla shkronja të mëdha (por shumica e vlerave të atributeve janë të ndjeshëm ndaj llojit të shkronjave). Kjo nënkupton se etiketa <P> dhe etiketa <p> definojnë të njëjtën gjë në HTML e cila është një paragraf.
Shembull:
<p>Ky është paragraf.</p>
<P>Ky është gjithashtu një paragraf valid.</P>Këshillë: Rekomandohet përdorimi i shkronjave të vogla për emërtimet e etiketave dhe atributeve në HTML, pasi duke bërë këtë ju mund ta bëni dokumentin tuaj më të pajtueshëm për përditësimet e ardhshme.
Elementet e zbrazët
Elementet e zbrazët (gjithashtu të quajtur elemente me vet-mbyllje) nuk janë etiketa me përmbajtje – që nënkupton se nuk mund të shkruani diçka kësisoj: <hr>ndonjë përmbajtje</hr> ose <br>ndonjë përmbajtje</br>.
Një shembull tipik i një elementi të zbrazët, është elementi <br>, i cili përfaqëson një ndërprerje të rreshtit. Disa elementë tjerë të zakonshëm të zbrazët janë <img>, <input>, <link>, <meta>, <hr>, etj.
Shembull:
<p>Ky paragraf është i <br> ndërprerë.</p>
<img src="foto/qielli.jpg" alt="Qielli i kaltër">
<input type="text" name="emri">
Shënim: Në HTML, një element vetë-mbyllës shkruhet thjesht si p.sh. <br>. Në XHTML, një element vetë-mbyllës kërkon një hapësirë dhe një prerje mbrapa, siç është <br />.
Fole elementesh
Shumica e elementeve HTML mund të përmbajnë elemente tjerë brenda vetes (përveç elementeve të zbrazët), të cilët, nga ana tjetër, përbëhen nga etiketat, atributet dhe përmbajtja ose elementë të tjerë.
Shembulli i mëposhtëm tregon disa elementë të vendosur brenda elementit <p>.
Shembull:
<p>Ky është tekst <b>i trashë</b>.</p>
<p>Ky është tekst <em>i pjerrtë</em>.</p>
<p>Ky është tekst <mark>i shënjuar</mark>.</p>Këshillë: Vendosja e një elementi brenda një tjetri quhet fole (nesting). Një element i nënvendosur, i quajtur gjithashtu një element fëmijë (child element), mund të jetë gjithashtu një element prind (parent element) nëse elemente tjerë janë të vendosur brenda tij.
Etiketat HTML duhet të vendosen në radhën e duhur. Ato duhet të mbyllen në radhën e kundërt të mënyrës se si janë hapur, kjo do të thotë që së pari të mbyllet etiketimi i fundit.
Shembull:
<p><strong>Këto etiketa janë vendosur si duhet.</strong></p>
<p><strong>Këto etiketa nuk janë vendosur si duhet.</p></strong>Shkrimi i komenteve
Komentet zakonisht shtohen me qëllim që ta bëjnë kodin burimor më të lehtë për t'u kuptuar. Mund t’i ndihmojë zhvilluesin tjetër (ose juve në të ardhmen kur ndryshoni kodin burimor) të kuptojnë se çfarë përpiqeshit të bënit me HTML. Komentet nuk shfaqen në shfletues.
Një koment HTML fillon me <!-- dhe përfundon me -->, siç tregohet në shembullin e mëposhtëm:
Shembull:
<!-- Ky është një koment në HTML -->
<!-- Ky është një koment HTML në shumë rreshta,
i cili mund të jetë i gjatë -->
<p>Kjo është një pjesë normale e tekstit në paragraf.</p>Gjithashtu mund të komentoni një pjesë të kodit tuaj HTML me qëllim korrigjimi, siç tregohet më poshtë:
Shembull:
<!-- Fshehja e këtij imazhi për testim
<img src="foto/qielli.png" alt="Qielli i kaltër">
-->Tipet e elementeve
Elementet mund të ndahen në dy grupe të posaçme: elemente bllok dhe elementët në linjë (block and inline elements). Të parët përbëjnë strukturën e dokumentit, ndërsa të dytët veshin përmbajtjen e një blloku.
Gjithashtu, një element bllok zë 100% të gjerësisë së disponueshme dhe jepet me një ndërprerje linje para dhe pas. Ndërsa, një element në linjë do të zërë aq hapësirë sa i nevojitet.
Elementët më të zakonshëm të nivelit të bllokut janë <div>, <p>, <h1> deri <h6>, <form>, <ol>, <ul>, <li>, etj. Ndërsa, elementët e nivelit në linjë të përdorur zakonisht janë <img>, <a>, <span>, <strong>, <b>, <em>, <i>, <code>, <input>, <button>, etj.
Shënim: Elementet e nivelit të bllokut nuk duhet të vendosen brenda elementeve të nivelit inline. Për shembull, elementi <p> nuk duhet të vendoset brenda elementit <b>.
Atributet
Atributet përcaktojnë karakteristikat ose vetitë shtesë të elementit siç janë p.sh. gjerësia dhe lartësia e një imazhi. Atributet specifikohen gjithmonë në etiketën fillestare (ose etiketën hapëse) dhe zakonisht përbëhet nga emri/vlera si emri="vlera". Vlerat e atributeve duhet të jenë gjithmonë të mbyllura në thonjëza.
Gjithashtu, disa atribute janë të domosdoshme për elemente të caktuar. Për shembull, një etiketë <img> duhet të përmbajë atribute src dhe alt. Le të hedhim një vështrim në disa shembuj të përdorimeve të atributeve:
Shembull:
<img src="foto/qielli.png" width="320" height="240" alt="Qielli">
<a href="https://www.google.com/" title="Motor kërkimi">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="Filan Fisteku">Në shembullin e mësipërm src brenda etiketës <img> është një atribut dhe vlera e tij është lokacioni i imazhit. Në mënyrë të ngjashme href brenda etiketës <a> është një atribut dhe linku i dhënë është vlera e tij, etj.
Këshillë: Si thonjëzat e njëfishta ashtu edhe ato të dyfishta mund të përdoren për të cituar vlerat e atributeve. Sidoqoftë, thonjëzat e dyfishta zakonisht përdoren. Në situatat kur vetë vlera e atributit përmban thonjëza të dyfishta është e nevojshme që citimin e atributit ta bëjmë me thonjëza të njëfishta.
Ka disa atribute në HTML5 që nuk përbëhen nga çifti emri/vlera e atributit, por përbëhet vetëm nga emri. Atributet e tilla quhen atribute Boolean. Shembuj të disa atributeve Boolean që përdoren zakonisht janë checked, disabled, readonly, required, etj.
Shembull:
<input type="email" required>
<input type="submit" value="Paraqit" disabled>
<input type="checkbox" checked>
<input type="text" value="Tekst vetëm për lexim" readonly>Shënim: Vlerat e atributeve zakonisht nuk janë të ndjeshme në shkronja të mëdha, përveç vlerave të caktuara të atributeve, si atributi id dhe class. Sidoqoftë, Konsorciumi World Wide Web (W3C) rekomandon të përdoren shkronja të vogla për vlerat e atributeve në specifikimet e tyre.
Atributet e qëllimit të përgjithshëm
Ka disa atribute, të tilla si id, title, class, style, etj., të cilët mund t'i përdorni në shumicën e elementeve HTML. Në vazhdim do të përshkruhet përdorimi i tyre.
Atributi id
Atributi id përdoret për t'i dhënë një emër unik ose identifikues një elementi brenda një dokumenti. Kjo e bën më të lehtë zgjedhjen e elementit duke përdorur CSS ose JavaScript.
Shembull:
<input type="text" id="emri">
<div id="konteiner">Përmbajtja me tekst</div>
<p id="infoTekst">Ky është një paragraf.</p>Shënim: Vlera e atributit id të një elementi duhet të jetë unik brenda një dokumenti të vetëm. Asnjë element në të njëjtin dokument nuk mund të emërohet me të njëjtën id dhe çdo element mund të ketë vetëm një id.
Atributi class
Ashtu si atributi id, atributi class gjithashtu përdoret për të identifikuar elementet. Por ndryshe nga id, atributi class nuk duhet të jetë unik në dokument. Kjo do të thotë që mund të përdorni të njëjtën klasë në shumë elemente në një dokument, siç tregohet në shembullin vijues:
Shembull:
<input type="text" class="bllok">
<div class="bllok theksuar">Përmbajtja me tekst</div>
<p class="theksuar">Ky është një paragraf.</p>Këshillë: Meqenëse një class mund të përdoret në shumë elemente, andaj çdo stil që është shkruar në atë class do të zbatohet për të gjithë elementët që kanë atë class.
Atributi title
Atributi i titullit title përdoret për të siguruar një tekst këshillues për një element ose përmbajtjen e tij. Provoni shembullin vijues për të kuptuar se si funksionon kjo në të vërtetë.
Shembull:
<abbr title="Konsorciumi World Wide Web ">W3C</abbr>
<a href="foto/natyra.jpg" title="Kliko për të parë foton më të madhe">
<img src="foto/natyra-thumb.jpg" alt="natyra">
</a>Këshillë: Vlera e atributit të titullit title (d.m.th. teksti i titullit) shfaqet si këshillë (tooltip) nga ueb shfletuesit kur shfrytëzuesi vendos kursorin e miut mbi element.
Atributi style
Atributi style ju lejon të specifikoni rregullat e stilit CSS, të tilla si ngjyra e tekstit, fonti, kufiri i elementit, etj. drejtpërdrejt brenda elementit. Le ta shohim një shembull për të parë se si funksionon:
Shembull:
<p style="color: blue;">Ky është një paragraf.</p>
<img src="foto/qielli.jpg" style="width: 300px;" alt="Qielli blu">
<div style="border: 1px solid red;">Përmbajtja me tekst</div>Do të njoftoheni më shumë rreth stilizimit të elementeve HTML në kaptinën stilet në HTML.
Titujt
Titujt ndihmojnë në përcaktimin e hierarkisë dhe strukturës së përmbajtjes në ueb faqe.
HTML-ja ofron gjashtë nivele të etiketave të titujve, <h1> deri në <h6>; sa më i lartë të jetë numri i nivelit të titullit, aq më e madhe është rëndësia e tij - prandaj etiketa <h1> përcakton titullin më të rëndësishëm, ndërsa etiketa <h6> përcakton titullin më pak të rëndësishëm në dokument.
Si parazgjedhje, shfletuesit paraqesin titujt me font më të madh dhe më të trash se sa teksti normal. Gjithashtu, titujt <h1> paraqiten me font më të madh, ndërsa titujt <h6> paraqiten me font më të vogël.
Shembull:
<h1>Titull - niveli 1</h1>
<h2>Titull - niveli 2</h2>
<h3>Titull - niveli 3</h3>
<h4>Titull - niveli 4</h4>
<h5>Titull - niveli 5</h5>
<h6>Titull - niveli 6</h6>Rezultati i shembullit të mësipërm do të duket kësisoj:
Shënim: Sa herë që vendosni një etiketë të titullit në ueb faqe, stili i integruar i ueb shfletuesit krijon automatikisht hapësirë të zbraztë (të quajtur margjinë - margin) para dhe pas çdo titulli. Mund të përdorni vetinë CSS: margin për të anashkaluar stilin e paracaktuar nga ueb shfletuesi.
Këshillë: Shumë lehtë mund të personalizoni pamjen e titullit në HTML, si madhësia, trashësia dhe lloji i fontit, duke përdorur vetinë CSS: font.
Rëndësia e titujve
- Titujt HTML ofrojnë informacion të vlefshëm duke nxjerrë në pah tema të rëndësishme dhe duke theksuar strukturën e dokumentit, prandaj optimizoni ato me kujdes për të përmirësuar angazhimin e përdoruesit.
- Mos përdorni tituj për ta bërë tekstin tuaj të duket i MADH ose i trashë. Përdorni ato vetëm për të theksuar titullin e dokumentit tuaj dhe për të treguar strukturën e dokumentit.
- Meqenëse motorët e kërkimit, të tillë si Google, i përdorin titujt për të indeksuar strukturën dhe përmbajtjen e ueb faqeve, për këtë arsye përdorni me shumë mençuri në ueb faqen tuaj.
- Përdorni titujt <h1> si tituj kryesorë të ueb faqes tuaj, të ndjekur nga titujt <h2>, pastaj titujt më pak të rëndësishëm <h3>, etj.
Këshillë: Përdorni etiketën <h1> për të shënuar titullin më të rëndësishëm i cili zakonisht është në krye të faqes. Një dokument HTML në përgjithësi duhet të ketë saktësisht një titull <h1>, i ndjekur nga titujt e nivelit më të ulët si <h2>, <h3>, <h4>, etj.
Paragrafët
Elementi i paragrafit përdoret për të publikuar tekst në ueb faqe.
Paragrafët definohen me etiketën <p>. Etiketa e paragrafit është një etiketë shumë themelore dhe tipike e gjithashtu edhe etiketë e parë që do t'ju duhet për të publikuar tekstin tuaj në ueb faqe.
Shembull:
<p>Ky është një paragraf.</p>
<p>Ky është një tjetër paragraf.</p>Shënim: Stili i integruar i shfletuesve krijon automatikisht një hapësirë sipër dhe poshtë përmbajtjes së një paragrafi (të quajtur margjinë - margin), por ju mund ta ndryshoni atë duke përdorur CSS.
Elementi mbyllës i paragrafit
Në HTML4 dhe versionet e mëparshme, ishte e mjaftueshme për të inicuar një paragraf të ri duke përdor etiketën hapëse. Shumica e shfletuesve do të shfaqin HTML-në saktësisht edhe nëse harroni etiketën mbyllëse.
Shembull:
<p>Ky është një paragraf.
<p>Ky është një tjetër paragraf.Kodi HTML në shembullin e mësipërm do të funksionojë në shumicën e ueb shfletuesve, por sidoqoft ju përdorni etiketën mbyllëse. Mungesa e etiketës mbyllëse mund të prodhojë rezultate ose gabime të papritura.
Krijimi i ndërprerjeve të linjave
Etiketa <br> përdoret për të ndërprerë rreshtin në një ueb faqe.
Meqenëse etiketa <br> është element i zbrazët, andaj nuk është e nevojshme t’i korrespondoj etiketa mbyllëse </br>.
Shembull:
<p>Ky është një paragraf<br>me ndërprerje të rreshtit.</p>
<p>Ky është <br>një tjetër paragraf<br>me ndërprerje të rreshtave.</p>Shënim: Mos përdorni paragraf të zbraztë, d.m.th. <p></p> për të shtuar hapësirë shtesë në ueb faqet tuaja. Shfletuesi mund të injorojë paragrafët e zbraztë pasi janë etiketa logjike. Përdorni vetinë CSS: margin në vend të kësaj për të rregulluar hapësirën rreth elementeve.
Krijimi i rregullave horizontale
Mund të përdorni etiketën <hr> për të krijuar rregulla horizontale ose linjë horizontale për të ndarë vizualisht seksionet e përmbajtjes në një ueb faqe. Ashtu si <br>, etiketa <hr> është gjithashtu një element i zbrazët.
Shembull:
<p>Ky është një paragraf.</p>
<hr>
<p>Ky është një tjetër paragraf.</p>Menaxhimi i hapësirave boshe
Normalisht shfletuesi do të shfaq hapësira të shumta të krijuara brenda kodit HTML duke klikuar butonin space ose butonin tab në tastierë si një hapësirë të vetme. Ndërprerjet e shumëfishta të rreshtave të krijuara brenda kodit HTML përmes klikimit së tastit enter gjithashtu shfaqen si një hapësirë e vetme.
Paragrafët e mëposhtëm do të shfaqen në një rresht të vetëm pa ndonjë hapësirë shtesë:
Shembull:
<p>Ky paragraf përmban hapësira boshe të
shumëfishta në kodin burimor.</p>
<p>
Ky paragraf përmban
klikime të shumëfishta të
butonit tab në kodin burimor.
</p>Futni për krijimin e hapësirave ekstra boshe të njëpasnjëshme, ndërsa vendosni etiketën <br> për krijimin e ndërprerjeve të rreshtave në ueb faqe, siç demonstrohet në shembullin vijues:
Shembull:
<p>Ky paragraf ka hapësira të shumëfishta.</p>
<p>Ky paragraf<br><br>ka ndërprerje të<br><br><br>shumëfishta.</p>Përcaktimi i tekstit të paraformatuar
Ndonjëherë, përdorimi i , <br>, etj. për administrimin e hapësirave nuk është shumë i përshtatshëm. Përndryshe, mund të përdorni etiketën <pre> për të shfaqur hapësira boshe, ndërprerjen e rreshtave, etj., saktësisht siç shkruhet në fajllin HTML. Është shumë e dobishme gjatë paraqitjes së tekstit ku hapësirat dhe ndërprerjet e rreshtave janë të rëndësishme si p.sh. poezi ose kod të ndonjë programi.
Shembulli i mëposhtëm do të shfaqë tekstin në shfletues ashtu siç është në kodin burimor:
Shembull:
<pre>
Vëllezër shqipëtarë!
Të prekim urtësinë,
Të zëm' udhën e mbarë,
Të ngjallim Shqipërinë.
</pre>Këshillë: Teksti brenda elementit <pre> jepet zakonisht nga shfletuesit në një font me një hapësirë ose me gjerësi fikse, siç është Courier, por ju mund ta ndryshoni këtë duke përdorur vetinë CSS: font.
Linqet
Një link ose hiperlink është një lidhje nga një burim uebi në një tjetër. Linqet ju lejojnë përdoruesëve të lëvizin lehtësisht nga një faqe në një tjetrën, në çdo server kudo në botë.
Një link ka dy skaje, të shënuara me a (anchor). Linku fillon në burim dhe tregon për lokacionin e destinacionit, e cila mund të jetë çdo burim uebi, për shembull, një imazh, një klip audio ose video, një fajll PDF, një dokument HTML ose një element brenda vetë dokumentit, etj.
Me parazgjedhje, linqet do të shfaqen në shumicën e shfletuesve kësisoj:
- Linku i pavizituar është i nënvizuar dhe me ngjyrë të kaltër.
- Linku i vizituar është i nënvizuar dhe me ngjyrë të purpurtë.
- Linku aktiv është i nënvizuar dhe me ngjyrë të kuqe.
Megjithatë, mund t’i ndryshoni këto duke përdorur CSS-në. Do të mësoni më shumë në njësinë stilizimi i linqeve.
Sintaksa e linkut
Linqet specifikohen në HTML duke përdorur etiketën <a>.
Linku apo hiperlinku mund të jetë një fjalë, grup fjalësh ose një imazh.
<a href="url">Teksti i linkut</a>Gjithçka në mes etiketës hapëse <a> dhe etiketës mbyllëse </a> bëhet pjesë e linkut, të cilën përdoruesi e sheh dhe mund të klikoj në atë. Ja disa shembuj të linqeve:
Shembull:
<a href="https://www.google.com/">Kërko në Google</a>
<a href="http://www.sezisurroi.com/">SHM Sezai Surroi</a>
<a href="foto/qielli.jpg">
<img src="qielli-mini.jpg" alt="qielli">
</a>Atributi href specifikon cakun e linkut. Vlera e tij mund të jetë një URL absolute ose relative.
Një URL absolute është URL që përfshin çdo pjesë të formatit URL, të tilla si protokolli, emri i hostit dhe shtegu i dokumentit, p.sh., https://www.google.com/, https://www.shembull.com/forma.html, etj. Ndërsa URL-të relative janë shtigje relative të faqes, p.sh. kontakti.html, foto/qielli.jpg, etj. Një URL relative nuk përfshin kurrë prefiksin http:// ose https://.
Vendosja e caqeve (targets) për linqet
Atributi target i tregon shfletuesit se ku të hapë dokumentin e lidhur. Ekzistojnë katër targete të definuara, dhe secili emër i targetit fillon me një karakter të nënvizuar (_):
- _blank – Hap dokumentin e lidhur në një dritare ose tab të ri.
- _parent – Hap dokumentin e lidhur në dritaren prind.
- _self – Hap dokumentin e lidhur në të njëjtën dritare ose tab të njëjtë si dokument burimor. Kjo është e paracaktuar, prandaj nuk është e nevojshme të specifikohet qartë kjo vlerë.
- _top – Hap dokumentin e lidhur në dritaren e plotë të shfletuesit.
Provoni shembullin e mëposhtëm për të kuptuar se si funksionon në thelb targeti i linkut:
Shembull:
<a href="/rrethmeje.html" target="_top">Rreth Meje</a>
<a href="https://www.google.com/" target="_blank">Google</a>
<a href="foto/qielli.jpg" target="_parent">
<img src="qielli-mini.jpg" alt="Qielli i kaltër">
</a>Këshillë: Nëse ueb faqja juaj është vendosur brenda një iframe, mund të përdorni target="_top" në linqet për të dalë nga iframe dhe për të treguar faqen e target-uar në dritaren e plotë të shfletuesit.
Krijimi i fletshënimeve (bookmarkeve)
Gjithashtu mund të krijoni bookmarke për të lejuar përdoruesit të kalojnë në një seksion specifik të një ueb faqeje. Bookmarket janë veçanërisht të dobishme nëse keni një ueb faqe shumë të gjatë.
Krijimi i bookmarkeve është një proces me dy hapa: s’pari shtoni atributin id në elementin ku dëshironi të kaloni, pastaj përdorni atë vlerë të atributit id të paraprirë nga shenja hash (#) si vlerë e atributit href të etiketës <a> , siç tregohet në shembullin vijues:
Shembull:
<a href="#seksioniA">Kalo tek Seksioni A</a>
<h2 id="seksioniA">Seksioni A</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>Këshillë: Mund të kaloni edhe në një seksion të një ueb faqeje tjetër duke specifikuar URL-në e asaj faqe së bashku me tagun a (dmth. #elementiId) në atributin href, për shembull, <a href="faqjaime.html#temaA"> Kalo tek TemaA </a>.
Krijimi i Linqeve për Shkarkim
Gjithashtu mund të krijoni link për shkarkim të fajllit në të njëjtën mënyrë sikur vendosja e linqeve me tekst. Thjesht vendos URL-në e destinacionit në fajllin që dëshiron të jetë i disponueshëm për shkarkim.
Në shembullin vijues ne kemi krijuar linqet e shkarkimit për fajllat ZIP, PDF dhe JPG.
Shembull:
<a href="shkarkime/testi.zip">Shkarko fajllin Zip</a>
<a href="shkarkime/dokument.pdf">Shkarko fajllin PDF</a>
<a href="shkarkime/imazh.jpg">Shkarko imazhin</a>Shënim: Kur klikoni në një link që lidhet me një fajll PDF ose imazh, fajlli nuk shkarkohet drejtpërdrejt në hard diskun tuaj. Do të hapet fajlli vetëm në ueb shfletuesin tuaj. Më tej ju mund ta ruani ose shkarkoni atë në hard disk mbi një bazë të përhershme.
Formatimi i tekstit
HTML ofron disa etiketa që mund t’i përdorni për të bërë që një pjesë të tekstit në ueb faqet tuaja të shfaqen ndryshe nga teksti normal, për shembull, mund të përdorni etiketën <b> për ta bërë tekstin e trashë, etiketën <i> për ta bërë tekstin e pjerrët, etiketën <mark> për ta theksuar tekstin, etiketën <code> për ta shfaqur një fragment të kodit kompjuterik, etiketat <ins> dhe <del> për të shënjuar insertimin dhe fshirjen e tekstit, etj.
Shembulli i mëposhtëm demonstron etiketat më të përdorura të formatimit.
Shembull:
<p>Ky është <b>tekst i trashë</b>.</p>
<p>Ky është <strong>tekst mjaft i rëndësishëm</strong>.</p>
<p>Ky është <i>tekst i pjerrtë</i>.</p>
<p>Ky është <em>tekst i pjerrtë i thekstuar</em>.</p>
<p>Ky është <mark>tekst i theksuar</mark>.</p>
<p>Ky është <code>kod kompjuterik</code>.</p>
<p>Ky është <small>tekst më i vogël</small>.</p>
<p>Ky është <sub>nëntekst</sub> dhe <sup>mbitekst</sup>.</p>
<p>Ky është <del>tekst i fshirë</del>.</p>
<p>Ky është <ins>tekst i insertuar</ins>.</p>Si parazgjedhje, etiketa <strong> zakonisht paraqitet në shfletues si <b>, ndërsa etiketa <em> paraqitet si <i>. Sidoqoftë, ekziston një ndryshim në kuptimin e këtyre etiketave.
Diferenca në mes etiketës <strong> dhe <b>
Të dy etiketat <strong> dhe <b> e paraqesin tekstin e mbyllur në një tekst të trashë në mënyrë të paracaktuar, por etiketa <strong> tregon se përmbajtja e tij ka rëndësi të madhe, ndërsa etiketa <b> përdoret thjesht për të tërhequr vëmendjen e lexuesit pa përcjellë ndonjë rëndësi të veçantë.
Shembull:
<p><strong>KUJDES!</strong> Ju lutemi keni kujdes.</p>
<p>Shfaqja do të mbahet në <b>Shtëpinë e Kulturës</b> në Bujanoc.</p>Diferenca në mes etiketës <em> dhe <i>
Në mënyrë të ngjashme, të dy etiketat <em> dhe <i> e paraqesin tekstin e pjerrët si parazgjedhje, por etiketimi <em> tregon se përmbajtja e tij përveç se është e pjerrtë është gjithashtu e rëndësishme, ndërsa etiketimi <i> përdoret për ta bërë tekstin e pjerrtë për arsye të lexueshmërisë, si një term teknik, një frazë idiomatike nga një gjuhë tjetër, një mendim, etj.
Shembull:
<p>Macet janë kafshë <em>të bukura</em>.</p>
<p><i>KF Tërnoci</i> fitoi ndeshjen e djeshme.</p>Shënim: Përdorni etiketat <em> dhe <strong> kur përmbajtja e faqes tuaj kërkon që disa fjalë ose fraza të caktuara duhet të kenë theks ose rëndësi të veçantë. Gjithashtu, në HTML5 etiketat <b> dhe <i> janë ridefinuar, më herët ato nuk kishin ndonjë kuptim semantik.
Formatimi i kuotimeve
Lehtë mund të formatoni blloqe të citateve nga burime tjera me etiketën <blockquote>.
Blloqet e kuotimeve zakonisht shfaqen me kufijtë e prerë majtas dhe djathtas, së bashku me pak hapësirë shtesë të shtuar sipër dhe poshtë. Le të provojmë një shembull për të parë se si funksionon:
Shembull:
<blockquote>
<p>Mësoni nga e djeshmja, jetoni për të sotmen, shpresoni për të nesërmen. E rëndësishme është të mos ndaloni së pyeturi.</p>
<cite>— Albert Ajnshtajn</cite>
</blockquote>Këshillë: Etiketa cite përdoret për të përshkruar një referencë ndaj një vepre krijuese. Duhet të përmbajë titullin e asaj vepre ose emrin e autorit (njerëz ose organizatë) ose një referencë URL.
Për kuotime të shkurta në linjë, mund të përdorni etiketën <q>. Shumica e shfletuesve i shfaqin kuotimet në linjë duke e rrethuar tekstin me thonjëza.
Shembull:
<p>Sipas Organizatës Botërore të Shëndetësisë (OBSH): <q>Shëndeti është një gjendje e mirëqenies së plotë fizike, mendore dhe shoqërore.</q></p>Paraqitja e akronimeve
Një akronim është një formë e shkurtuar e një fjale, fraze ose emri.
Mund të përdorni etiketën <abbr> për të treguar një akronim. Atributi title përdoret brenda këtij etiketimi për të siguruar kuptimin e plotë të akronimit, e cila paraqitet nga shfletuesit si një këshillë (tooltip) kur kursori i mausit vendoset mbi atë element.
Shembull:
<p><abbr title="World Wide Web Consortium">W3C</abbr> është organizata kryesore ndërkombëtare e standardeve për <abbr title="World Wide Web">WWW ose W3</abbr>. Ajo u themelua nga Tim Berners-Lee.</p>Shënimi i adresave të kontaktit
Ueb Faqet shpesh ofrojnë përfshirjen e adresave të rrugëve ose adresa postare. HTML ofron një etiketë të veçantë <address> për të prezantuar informacionin e kontaktit (fizik dhe/ose digjital) për një person, njerëz ose organizatë.
Kjo etiketë duhet të përdoret në mënyrë ideale për të shfaqur informacionin e kontaktit që lidhet me vetë dokumentin, siç është autori i artikullit. Shumica e shfletuesve shfaqin një bllok adresash me tekst të pjerrtë.
Shembull:
<address>
SHM Sezai Surroi<br>
rr. Migjeni pn<br>
Bujanoc, SRB
</address>Stilet në HTML
HTML është mjaft i kufizuar kur bëhet fjalë për prezantimin e ueb faqes. Fillimisht u krijua si një mënyrë e thjeshtë e prezantimit të informacionit. CSS (Cascading Style Sheets) u prezantua në Dhjetor të vitit 1996 nga Konsorciumi World Wide Web (W3C) për të siguruar një mënyrë më të mirë për të stilizuar HTML elementet.
Me CSS, bëhet shumë e lehtë të cilësosh gjëra të tilla si, madhësia dhe fonti i tekstit, ngjyra e tekstit dhe sfondet, shtrirja e tekstit dhe imazheve, sasia e hapësirës midis elementeve, kufiri dhe vija e jashtme e elementeve dhe shumë veti tjera të stilizimit.
Shtimi i stileve në elementet HTML
Informacioni i stilit mund të bashkëngjitet si një dokument i veçantë ose i futur në vet dokumentin HTML. Këto janë tri metodat e zbatimit të stilizimit në një dokument HTML.
- Stili në linjë (inline) – Përdor atributin style në etiketën fillestare
- Stili i brendshëm – Përdor elementin <style> në seksionin head të dokumentit.
- Stili i jashtëm – Përdor elementin <link>, për të lidhur me një fajll të jashtëm CSS.
Shënim: Stilet inline kanë prioritet më të lartë, gjersa stili i jashtëm është me prioritet më të ultë. Pra, do të thotë nëse cilësoni stilet për paragrafët tuaj, sikur stilin e brendshëm ashtu edhe atë të jashtëm, rregulli i konfliktit të stilit të brendshëm do ta mbishkruaj stilin e jashtëm.
Stilet inline
Stilet inline përdoren për të aplikuar rregullat e stilit unik në një element, duke vendosur rregullat CSS direkt në etiketën fillestare. Ky stil mund t'i bashkëngjitet një elementi duke përdorur atributin style.
Atributi i stilit përfshin një varg të vetive dhe vlerave të CSS-së. Çdo veti:vlerë është e ndarë me pikëpresje (;), ashtu si do të shkruani në një stili të brendshëm apo të jashtëm. Por, në stilin inline duhet që këto të dhëna të jenë të gjitha në një rresht.
Shembulli i mëposhtëm tregon se si të vendosni ngjyrën dhe madhësinë e shkronjave në tekst:
Shembull:
<h1 style="color:red; font-size:30px;">Ky është një titull</h1>
<p style="color:green; font-size:18px;">Ky është një paragraf.</p>
<div style="color:blue; font-size:16px;">Ky është një tekst.</div>Përdorimi i stileve inline zakonisht konsiderohet si një praktikë jo e mirë. Meqenëse rregullat e stilit janë të futura direkt brenda etiketës HTML, kjo bën që prezantimi (stilizimi) të përzihet me përmbajtjen e dokumentit, gjë që e bën shumë të vështirë përditësimin ose mirëmbajtjen e një ueb sajti.
Shënim: Është e pamundur të stilizosh pseudo-elemente dhe pseudo-klasa përmes stileve inline. Prandaj, duhet të shmangni përdorimin e atributeve brenda fajllit tuaj HTML. Përdorimi i stilit të jashtëm është mënyra e preferuar për të shtuar stil në një dokument HTML.
Stilet e brendshëm
Stilet e brendshëm definohen në seksionin <head> të një dokumenti HTML duke përdorur etiketën <style>. Mund të definoni cilindo numër të elementeve <style> brenda seksionit <head>.
Shembulli i mëposhtëm demonstron se si rregullat e stilit janë të lidhura brenda një ueb faqeje.
Shembull:
<head>
<style>
body { background-color: YellowGreen; }
h1 { color: blue; }
p { color: red; }
</style>
</head>Stili i jashtëm
Një stil i jashtëm është ideal kur stili zbatohet në shumë faqe.
Një stil i jashtëm mban të gjitha rregullat e stilit në një dokument të veçantë të cilin mund ta lidhni nga çdo dokument HTML në sajtin tuaj. Stili i jashtëm është më fleksibil, sepse me një stil të jashtëm, mund të ndryshoni pamjen e një ueb sajti në tërësi duke përditësuar vetëm një fajll.
Ju mund të bashkëngjitni stilin e jashtëm në dy mënyra – përmes lidhjes dhe importimit:
Lidhja e stilit të jashtëm
Një stil i jashtëm mund të lidhet me një dokument HTML duke përdorur etiketën <link>.
Etiketa <link> vendoset brenda seksionit <head>, siç tregohet më poshtë:
Shembull:
<head>
<link rel="stylesheet" href="css/stili.css">
</head>Importimi i stilit të jashtëm
Rregulli @import është një mënyrë tjetër për të ngarkuar stil të jashtëm. Deklarata @import udhëzon shfletuesin të ngarkojë një stili të jashtëm dhe të përdorë stilet e saj.
Mund ta përdorni këtë stil në dy mënyra. Mënyra më e thjeshtë është ta përdorni atë brenda elementit <style> në seksionin <head>. Vini re, rregullat e tjera të CSS mund të përfshihen ende në elementin <style>.
Shembull:
<style>
@import url("css/stili.css");
p {
color: blue;
font-size: 16px;
}
</style>Ngjashëm, mund të përdorni rregullin @import për të importuar një stili brenda një stili tjetër.
Shembull:
@import url("css/paraqitja.css");
@import url("css/ngjyrat.css");
body {
color: blue;
font-size: 14px;
}Shënim: Të gjithë rregullat @import duhet të ndodhin në fillim të fletës së stilit. Çdo rregull stili i definuar në fletën e stilit vetëvetiu mbizotëron rregullin kontradiktor në stilin e importuar. Rregulli @import mund të shkaktojë probleme të performancës, në përgjithësi duhet të shmangni importimin e stileve në këtë mënyrë.
Imazhet
Futja e imazheve në ueb faqe
Imazhet përmirësojnë pamjen vizuale të ueb faqeve duke i bërë ato më tërheqëse dhe më piktoresk.
Etiketa <img> përdoret për të vendosur imazhe në dokumentet HTML. Është një element i zbraztë dhe përmban vetëm atribute. Sintaksa e etiketës <img> duket kësisoj:
<img src="url" alt="teksti_alternativ">Shembulli i mëposhtëm vendos tri imazhe në ueb faqe:
Shembull:
<img src="natyra.jpg" alt="Natyra e gjallë">
<img src="qielli.jpg" alt="Qielli i kaltër">
<img src="balonat.jpg" alt="Balonat">Çdo imazh duhet të ketë të paktën dy atribute: atributin src dhe atributin alt.
Atributi src i tregon shfletuesit se ku mund ta gjejë imazhin. Vlera e tij është URL-ja e fajllit të imazhit.
Atributi alt ofron një tekst alternativ për imazhin, nëse ai imazh nuk është i disponueshëm ose nuk mund të shfaqet për ndonjë arsye. Vlera e tij duhet të jetë një zëvendësim kuptimplotë i imazhit.
Shënim: Ashtu sikur <br>, elementi <img> është gjithashtu një element i zbratë dhe nuk ka një etiketë mbyllëse. Sidoqoftë, në XHTML mbyllet duke përfunduar me "/>".
Këshillë: Atributi i kërkuar alt siguron një përshkrim alternativ tekstual për një imazh nëse përdoruesi për ndonjë arsye nuk mund ta shohë atë për shkak të lidhjes së ngadaltë, imazhi nuk është i disponueshëm në URL-në e specifikuar, etj.
Cilësimi i gjerësisë dhe lartësisë së imazhit
Atributet width dhe height përdoren për të specifikuar gjerësinë dhe lartësinë e një imazhi.
Vlerat e këtyre atributeve interpretohen në piksell si parazgjedhje.
Shembull:
<img src="natyra.jpg" alt="Natyra" width="300" height="300">
<img src="qielli.jpg" alt="Qielli" width="250" height="150">
<img src="balonat.jpg" alt="Balonat" width="200" height="200">Gjithashtu mund të përdorni atributin style për të specifikuar gjerësinë dhe lartësinë e imazheve. Kjo parandalon që fletët e stilit të mos ndryshojnë madhësinë e imazhit aksidentalisht, pasi stili inline ka prioritet më të lartë.
Shembull:
<img src="natyra.jpg" alt="Natyra" style="width: 300px; height: 300px;">
<img src="qielli.jpg" alt="Qielli" style="width: 250px; height: 150px;">
<img src="balonat.jpg" alt="Balonat" style="width: 200px; height: 200px;">Shënim: Është një praktikë e mirë të specifikoni atributet width dhe height për një imazh, në mënyrë që shfletuesi të mund të alokojë atë hapësirë për imazhin përpara se të paraqitet. Përndryshe, ngarkimi i imazhit mund të shkaktojë shtrembërim ose dridhje të përmbajtjes në ueb sajtin tuaj.
Përdorimi i elementit HTML5 picture
Ndonjëherë, shkallëzimi i një imazhi në vlera të larta ose të poshtme për t'iu përshtatur pajisjeve të ndryshme (ose madhësive të ekranit) nuk funksionon siç janë pritshmëritë. Gjithashtu, zvogëlimi i dimensionit të figurës duke përdorur atributin ose vetinë width dhe height nuk zvogëlon madhësinë origjinale të fajllit. Për të adresuar këto probleme, HTML5 ka prezantuar etiketën <picture> që ju lejon të përcaktoni shumë versione të një imazhi e për të synuar lloje të ndryshme të pajisjeve.
Elementi <picture> nuk përmban asnjë element <source> ose mund të përmbaj disa të tillë, e të cilët ju referohen burimeve të ndryshme të imazhit si dhe një elementi <img> në fund. Gjithashtu çdo element <source> ka atributin media që specifikon një kushtëzim të medias (të ngjashme me media query) që përdoret nga shfletuesi për të përcaktuar se kur duhet të përdoret një burim i veçantë:
Shembull:
<picture>
<source media="(min-width: 1000px)" srcset="logo-madhe.png">
<source media="(max-width: 500px)" srcset="logo-vogel.png">
<img src="logo.png" alt="Logoja ime">
</picture>Shënim: Shfletuesi do të vlerësojë secilin element fëmijë <source> dhe do të zgjedhë atë që përputhet më mirë midis tyre; nëse nuk përputhet asnjë vlerë, përdoret URL-ja e atributit src të elementit <img>. Gjithashtu, etiketa <img> duhet të specifikohet si fëmija i fundit i elementit <picture>.
Puna me hartat e imazheve
Harta e imazhit (image maps) ju lejon të përcaktoni pikat e rëndësishme (hotspots) në një imazh që të veprojnë si hiperlidhje.
Ideja themelore pas krijimit të hartës së imazhit është sigurimi i një mënyrë të thjeshtë për tu lidhur me pjesë të ndryshme të një imazhi pa e ndarë atë në fajlla të posaçëm. Për shembull, një hartë e botës mund të ketë hiperlidhje për secilin vend me informacione të mëtejshme në lidhje me atë vend.
Le të provojmë një shembull të thjeshtë për të kuptuar se si funksionon në të vërtetë:
Shembull:
<img src="objekte.png" usemap="#objekte" alt="Objekte"><map name="objekte">
<area shape="circle" coords="137,231,71" href="ora.html" alt="Ora">
<area shape="poly" coords="363,146,273,302,452,300" href="trekendesh.html" alt="Trekëndësh">
<area shape="rect" coords="520,160,641,302" href="libri.html" alt="Libri"></map>Atributi name i etiketës <map> përdoret për t’ju referuar hartës nga etiketa <img> duke përdorur atributin e saj usemap. Etiketa <area> përdoret brenda elementit <map> për të definuar zonat e klikueshme në një imazh. Ju mund të përcaktoni shumë zona të klikueshme brenda një imazhi.
Shënim: Hartat e imazhit nuk duhet të përdoret për navigim të ueb sajtit. Ato nuk janë miqësorë për motorët e kërkimit. Një përdorim i vlefshëm i një harte imazhi është harta gjeografike.
Këshillë: Ka shumë në dispozicion vegla në Internet për krijimin e hartave të imazheve. Disa editorë të avancuar si Adobe Dreamweaver gjithashtu ofrojnë një sërë veglash për krijimin e lehtë të hartave nga imazhet.
Tabelat
Tabela HTML ju lejon t’i paraqitni të dhënat në rreshta dhe kolona. Ato përdoren zakonisht për të shfaqur të dhëna tabelare si p.sh. listat e produkteve, detajet e klientëve, raportet financiare, etj.
Mund të krijoni një tabelë duke përdorur elementin <table>. Brenda elementit <table>, ju mund të përdorni elementet <tr> për të krijuar rreshta, ndërsa për të krijuar kolona brenda një rreshti mund të përdorni elementet <td>. Gjithashtu mund të definoni një celulë si një kokë për një grup celulash të tabelës duke përdorur elementin <th>.
Shembulli i mëposhtëm demonstron strukturën më themelore të një tabele.
Shembull:
<table>
<tr>
<th>Nr.</th>
<th>Emri</th>
<th>Mosha</th>
</tr>
<tr>
<td>1</td>
<td>Agim Bajrami</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Vlora Hyseni</td>
<td>17</td>
</tr>
</table>Tabelat nuk kanë asnjë kufizë si parazgjedhje. Mund të përdorni vetinë CSS border për të shtuar kufij në tabela. Gjithashtu, celulat e tabelës janë me madhësi aq të mëdha sa të përshtaten me përmbajtjen si parazgjedhje. Për të shtuar më shumë hapësirë përreth përmbajtjes në celulat e tabelës mund të përdorni vetinë CSS padding .
Rregullat e mëposhtme të stilizimit shtojnë një kufizë prej 1 pikselli në tabelë dhe 10 piksell hapësirë në celulat e saj.
Shembull:
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}Si parazgjedhje, kufijtë rreth tabelës dhe celulat e tyre janë të ndara nga njëra-tjetra. Por ju mund t'i bashkoni ato në një duke përdorur vetinë border-collapse në elementin <table>.
Gjithashtu, teksti brenda elementeve <th> shfaqet me font të trashë, i radhitur në mënyrë horizontale në qendër të celulës si parazgjedhje. Për të ndryshuar radhitjen e paracaktuar mund të përdorni vetinë CSS text-align.
Rregullat e mëposhtme të stilizimit bashkojnë kufijtë e tabelës dhe zhvendosin tekstin e kokës së tabelës në anën e majtë.
Shembull:
table {
border-collapse: collapse;
}
th {
text-align: left;
}Shënim: Numër më i madh i atributeve të elementit <table> siç janë border, cellpadding, width, align, etj. për stilizimin e tabelave është përdorur në versionet e mëhershme të HTML-së, kështu që shmangni përdorimin e tyre. Përdorni CSS për të stilizuar tabelat HTML.
Bashkimi i rreshtave dhe kolonave të shumëfishta
Bashkimi ju lejon të zgjasni rreshtat dhe kolonat e tabelës në shumë rreshta dhe kolona të tjera.
Normalisht, një celulë e tabelës nuk mund të kalojë në hapësirën poshtë ose mbi një celulë tjetër të tabelës. Por, mund të përdorni atributet rowspan ose colspan për të shtrirë rreshta ose kolona të shumëfishta në një tabelë.
Le të provojmë shembullin e mëposhtëm për të kuptuar se si punon në thelb colspan:
Shembull:
<table>
<tr>
<th>Emri</th>
<th colspan="2">Telefonat</th>
</tr>
<tr>
<td>Filan Fisteku</td>
<td>017653726</td>
<td>017653826</td>
</tr>
</table>Në mënyrë të ngjashme, mund të përdorni atributin rowspan për të krijuar një celulë që përfshin më shumë se një rresht. Le të provojmë një shembull për të kuptuar se si funksionon në përgjithësi rowspan:
Shembull:
<table>
<tr>
<th>Emri:</th>
<td>Filan Fisteku</td>
</tr>
<tr>
<th rowspan="2">Telefonat:</th>
<td>017653226</td>
</tr>
<tr>
<td>017653826</td>
</tr>
</table>Shtimi i një mbishkrimi në tabela
Mund të specifikoni një mbishkrim (ose titull) për tabelat tuaja duke përdorur elementin <caption>.
Elementi <caption> duhet të vendoset menjëherë pas etiketës hapëse <table>. Si parazgjedhje, mbishkrimi shfaqet në krye të tabelës, por mund ta ndryshoni pozicionin e saj duke përdorur vetinë CSS caption-side.
Shembulli i mëposhtëm tregon mënyrën e përdorimit të këtij elementi në një tabelë.
Shembull:
<table>
<caption>Informacione për përdoruesit</caption>
<tr>
<th>Nr.</th>
<th>Emri</th>
<th>Mosha</th>
</tr>
<tr>
<td>1</td>
<td>Agim Salihu</td>
<td>16</td>
</tr>
<tr>
<td>2</td>
<td>Luana Kadriu</td>
<td>17</td>
</tr>
</table>Definimi i kreut, trupit dhe fundit të tabelës
HTML ofron një seri etiketash <thead>, <tbody> dhe <tfoot> që ju ndihmojnë të krijoni një tabelë më të strukturuar, duke përcaktuar përkatësisht seksionet e kokës, trupit dhe fundit të tabelës.
Shembulli i mëposhtëm demonstron përdorimin e këtyre elementeve.
Shembull:
<table>
<thead>
<tr>
<th>Artikuj</th>
<th>Shpenzimet</th>
</tr>
</thead>
<tbody>
<tr>
<td>Patundshmëritë</td>
<td>2,000</td>
</tr>
<tr>
<td>Orenditë</td>
<td>10,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Totali</th>
<td>12,000</td>
</tr>
</tfoot>
</table>Shënim: Në HTML5, elementi <tfoot> mund të vendoset para ose pas elementeve <tbody> dhe <tr>, por duhet të shfaqet pas çdo elementi <caption>, <colgroup> dhe <thead>.
Këshillë: Mos përdorni tabela për krijimin e planit të ueb faqeve (layouts). Planet e ueb faqeve të krijuara me tabela janë më të ngadalta në paraqitje dhe shumë të vështira për tu mirëmbajtur. Tabelat duhet të përdoret vetëm për të shfaqur të dhëna tabelore.
Listat
Listat HTML përdoren për të paraqitur sa më mirë lista të informacionit në mënyrë semantike. Ekzistojnë tri lloje të ndryshme të listave në HTML dhe secila prej tyre ka një qëllim dhe kuptim specifik.
- Listat e parenditura (Unordered list) – Përdoret për të krijuar një listë të artikujve të lidhur, pa ndonjë renditje të posaçme.
- Lista e renditura (Ordered list) – Përdoret për të krijuar një listë të artikujve të lidhur, në një renditje specifike.
- Listat përshkruese (Description list) – Përdoret për të krijuar një listë të termave dhe përshkrimet e tyre.
Shënim: Brenda një artikulli të listës mund të vendosni tekst, imazhe, linqe, etj. Gjithashtu mund të vendosni një listë të tërë brenda një artikulli të listës për të krijuar listë brenda listës.
Listat e parenditura
Një listë e parenditur krijohet duke përdorur elementin <ul> dhe secili artikull i listës fillon me elementin <li>.
Artikujt e listave në listat e parenditura shënohen me pika, të ashtuquajtur bullets.
Shembull:
<ul>
<li>Kafe</li>
<li>Qumësht</li>
<li>Mollë</li>
</ul>Rezultati i shembullit të mësipërm do të duket kësisoj:
Gjithashtu mund të ndryshoni llojin e pikës në listën tuaj të parenditur duke përdorur vetinë CSS list-style-type. Rregulli i mëposhtëm i stilit ndryshon llojin e pikës nga disku i paracaktuar në katror:
Shembull:
ul {
list-style-type: square;
}Listat e renditura
Një listë e renditur krijohet duke përdorur elementin <ol> dhe secili artikull i listës fillon me elementin <li>. Listat e renditura përdoren kur renditja e artikujve të listës është e rëndësishme.
Artikujt e listës në një listë të renditur shënohen me numra.
Shembull:
<ol>
<li>Janar</li>
<li>Shkurt</li>
<li>Mars</li>
</ol>Rezultati i shembullit të mësipërm do të duket kësisoj:
Numërimi i artikujve në një listë të renditur zakonisht fillon nga numri 1. Megjithatë, nëse dëshironi ta ndryshoni, mund të përdorni atributin start, siç tregohet në shembullin vijues:
Shembull:
<ol start="10">
<li>Tetor</li>
<li>Nëntor</li>
<li>Dhjetor</li>
</ol>Rezultati i shembullit të mësipërm do të duket kësisoj:
Ashtu sikur tek lista e parenditur, gjithashtu mund të përdorni vetinë CSS list-style-type për të ndryshuar llojin e numërimit në një listë të renditur. Rregulli i mëposhtëm i stilit ndryshon llojin e shënuesit në numra romakë.
Shembull:
ol {
list-style-type: upper-roman;
}Këshillë: Gjithashtu mund të përdorni atributit type për të ndryshuar llojin e numërimit p.sh. type = "I". Sidoqoftë, duhet t’i shmangeni këtij atributi, në vend të saj përdorni vetinë CSS list-style-type.
Listat përshkruese
Një listë përshkrimi është një listë e artikujve me një përshkrim ose përkufizim të secilit artikull.
Lista përshkruese krijohet duke përdorur elementin <dl>. Elementi <dl> përdoret së bashku me elementin <dt> që specifikon një term dhe elementin <dd> që specifikon përkufizimin e atij termi.
Ueb shfletuesit zakonisht paraqesin listat e përkufizimeve duke vendosur termat dhe përkufizimet në rreshta të veçantë, ku përkufizimet e termit shtyhen paksa në të djathtë.
Shembull:
<dl>
<dt>Bukë</dt>
<dd>Ushqim i pjekur i bërë nga mielli.</dd>
<dt>Kafe</dt>
<dd>Pije e bërë nga kokrrat e pjekura të kafesë.</dd>
</dl>Rezultati i shembullit të mësipërm do të duket kësisoj:
Format
Format në HTML nevojiten për të mbledhur lloje të ndryshme të të dhënave të përdoruesve, të tilla si detajet e kontaktit si emri, adresa e postës elektronike, numrat e telefonit ose informacioni i kartës së kreditit, etj.
Format përmbajnë elemente të veçanta të quajtur forma kontrolluese si inputbox, checkbox, radio-butona, butonat e dorëzimit, etj. Përdoruesit zakonisht plotësojnë një formë duke plotësuar kontrollet e saj p.sh. futja e tekstit, zgjedhja e artikujve, etj. dhe dorëzimi i kësaj forme në një ueb server për përpunim të mëtejshëm.
Etiketa <form> përdoret për të krijuar një formë në HTML.
Shembull:
<form>
<label>Përdoruesi: <input type="text"></label>
<label>Fjalëkalimi: <input type="password"></label>
<input type="submit" value="Dorëzo">
</form>Sektorët e mëposhtëm përshkruajnë tipe të ndryshme të kontrolleve që mund të përdorni në formën tuaj.
Elementi Input
Ky është elementi zakonisht më i përdorur në format e HTML-së.
Kjo ju lejon të specifikoni lloje të ndryshme të fushave të përdoruesit, në varësi nga atributi type. Një element input mund të jetë i tipit text, password, checkbox, radio, submit, reset, etj.
Fushat e tekstit
Fushat e tekstit janë sipërfaqe me një rresht që i lejojnë përdoruesin të fusë tekst.
Kontrollet e futjes së tekstit në një rresht krijohen duke përdorur elementin <input>, atributi type i të cilit ka vlerën text.
Shembull:
<form>
<label for="perdoruesi">Përdoruesi:</label>
<input type="text" name="perdoruesi" id="perdoruesi">
</form>Rezultati i shembullit të mësipërm do të duket kësisoj:
Shënim: Etiketa <label> përdoret për të përcaktuar emërtimet për elementet <input>. Nëse dëshironi që përdoruesi juaj të fusë disa rreshta, atëherë duhet të përdorni <textarea>.
Fusha e fjalëkalimit
Fushat e fjalëkalimit janë të ngjashme me fushat e tekstit. I vetmi ndryshim është; karakteret në një fushë fjalëkalimi janë të maskuara, d.m.th. ato tregohen si yje ose pika. Kjo bëhet për të parandaluar që dikush tjetër të lexojë fjalëkalimin në ekran. Ky është gjithashtu një kontroll për futje teksti në një rresht duke përdorur elementin <input> atributi type i të cilit ka vlerën password.
Shembull:
<form>
<label for="user-pwd">Fjalëkalimi:</label>
<input type="password" name="user-password" id="user-pwd">
</form>Rezultati i shembullit të mësipërm do të duket kësisoj:
Butonat radio
Butonat e radios përdoren për t’ju mundësuar përdoruesit të zgjedhë saktësisht një opsion nga një grup opsionesh të paracaktuar. Krijohet duke përdorur element <input> atributi type i të cilit ka vlerën radio.
Shembull:
<form>
<input type="radio" name="gjinia" id="mashkull">
<label for="mashkull">Mashkull</label>
<input type="radio" name="gjinia" id="femer">
<label for="femer">Femër</label>
</form>Rezultati i shembullit të mësipërm do të duket kësisoj:
Checkbox-at
Checkbox-at i lejojnë përdoruesit të zgjedhë një ose më shumë opsione nga një grup opsionesh të paracaktuara. Krijohet duke përdorur elementin <input> atributi type i të cilit ka vlerën checkbox.
Këtu keni një shembull të checkbox-ave që mund të përdoren për të mbledhur informacione në lidhje me hobin e përdoruesve:
Shembull:
<form>
<input type="checkbox" name="hobi" id="futboll">
<label for="futboll">Futboll</label>
<input type="checkbox" name="hobi" id="basketboll">
<label for="basketboll">Basketboll</label>
<input type="checkbox" name="hobi" id="vrapim">
<label for="vrapim">Vrapim</label>
</form>Rezultati i shembullit të mësipërm do të duket kësisoj:
Shënim: Nëse dëshironi me parazgjedhje ta bëni një radio-buton ose një checkbox të zgjedhur, mund të shtoni atributin checked në elementin input, si <input type="checkbox" checked>.
Zgjedhja e fajllit
Fushat e fajllit i lejojnë një përdoruesi të kërkojë një fajll lokal dhe ta dërgojë atë si një bashkëngjitje me të dhënat e formularit. Ueb shfletuesit si Google Chrome dhe Firefox paraqesin një fushë input të zgjedhjes së fajllit me një buton për shfletim që i mundëson përdoruesit të navigoj në hard diskun lokal dhe të zgjedhë një fajll.
Kjo gjithashtu krijohet duke përdorur elementin <input>, atributi type i të cilit ka vlerën file.
Shembull:
<form>
<label for="zgjedh-fajllin">Ngarko:</label>
<input type="file" name="ngarko" id="zgjedh-fajllin">
</form>Rezultati i shembullit të mësipërm do të duket kësisoj:
Këshillë: Ekzistojnë edhe disa tipe të tjerë të input-eve. Shfletoni në Internet për këto tipe tjera.
Textarea – sipërfaqe teksti
Textarea është një futje e tekstit në shumë rreshta që i lejon përdoruesit të fusë më shumë se një rresht teksti. Kontrollet e futjes së tekstit me shumë rreshta krijohen duke përdorur elementin <textarea>.
Shembull:
<form>
<label for="adresa">Adresa:</label>
<textarea rows="3" cols="30" name="adresa" id="adresa"></textarea>
</form>Rezultati i shembullit të mësipërm do të duket kësisoj:
Kutia zgjedhëse – Select box
Një kuti e zgjedhjes është një listë zbritëse e opsioneve që u lejon përdoruesëve të zgjedhë një ose më shumë opsione nga një listë rënëse. Kutia e zgjedhjes krijohet duke përdorur elementin <select> dhe elementin <option>.
Elementet <option> brenda elementit <select> definojnë secilin artikull të listës.
Shembull:
<form>
<label for="qyteti">Zgjidh qytetin:</label>
<select name="qyteti" id="qyteti">
<option value="bujanoc">Bujanoc</option>
<option value="presheve">Preshevë</option>
<option value="medvegje">Medvegjë</option>
</select>
</form>Rezultati i shembullit të mësipërm do të duket kësisoj:
Butonat e dorëzimit dhe resetimit
Butoni i dorëzimit përdoret për të dërguar të dhënat e formularit në një ueb server. Kur klikohet butoni i dorëzim, të dhënat e formularit dërgohen në fajllin e specifikuar me atributin action të formës për të procesuar të dhënat e paraqitura.
Butoni resetimit rivendos të gjitha kontrollet e formave në vlerat e paracaktuara. Provoni shembullin vijues duke shkruar emrin tuaj në fushën e tekstit dhe klikoni në butonin dorëzoj për ta parë atë në veprim.
Shembull:
<form action="action.php" method="post">
<label for="emri">Emri juaj:</label>
<input type="text" name="emri" id="emri">
<input type="submit" value="Dorëzo">
<input type="reset" value="Reset">
</form>Rezultati i shembullit të mësipërm do të duket kësisoj:
Shënim: Mund të krijoni butona gjithashtu duke përdorur elementin <button>. Butonat e krijuar me elementit <button> kanë funksion të ngjashëm ashtu si butonat e krijuar me elementin input, por ato ofrojnë mundësi më të pasura paraqitjes duke lejuar vendosjen e elementeve të tjerë HTML.
Grupimi i kontrolleve të formave
Gjithashtu mund të gruponi kontrollet dhe etiketat e ndërlidhura logjikisht brenda një ueb forme duke përdorur elementin <legend>. Grupimi i kontrolleve të formave në kategori e bën më të lehtë për përdoruesit që të gjej një kontroll e cila e bën formën më miqësore për përdoruesit.
Shembull:
<form>
<fieldset>
<legend>Detaje të kontaktit</legend>
<label>E-mail: <input type="email" name="email"></label>
<label>Nr. tel.: <input type="text" name="tel"></label>
</fieldset>
</form>Rezultati i shembullit të mësipërm do të duket kësisoj:
iFrame
Një iFrame (Inline Frame – kornizë në linjë) përdoret për të shfaqur objekte të jashtme, përfshirë ueb faqe të tjera brenda një ueb faqe. Një iframe pothuajse vepron si një mini shfletues brenda një shfletuesi. Gjithashtu, përmbajtja brenda një iframe ekziston plotësisht e pavarur nga elementët përreth.
Sintaksa themelore për shtimin e një iframe në një ueb faqe mund të duket kësisoj:
<iframe src="URL"></iframe>URL-ja e specifikuar në atributin src tregon për vendndodhjen e një objekti të jashtëm ose një ueb faqe.
Shembulli i mëposhtëm paraqet fajllin "faqe.html" brenda një iframe në dokumentin aktual.
Shembull:
<iframe src="faqe.html"></iframe>Vendosja e gjerësisë dhe lartësisë në një iFrame
Atributet height dhe width përdoren për të specifikuar lartësinë dhe gjerësinë e iframe-it.
Shembull:
<iframe src="faqe.html" width="400" height="200"></iframe>Gjithashtu mund të përdorni CSS-në për të vendosur gjerësinë dhe lartësinë e një iframe.
Shembull:
<iframe src="faqe.html" style="width:400px; height:200px;"></iframe>Shënim: Vlerat e atributeve width dhe height specifikohen në piksell si parazgjedhje, por gjithashtu mund t'i vendosni këto vlera në përqindje, të tilla si 50%, 100%, etj. Gjerësia e paracaktuar e një iframe është 300 piksell, ndërsa lartësia e paracaktuar është 150 piksell.
Heqja e kufizës së parazgjedhur
Iframe ka një kufizë rreth tij si parazgjedhje. Sidoqoftë, nëse doni të modifikoni ose hiqni kufijtë e iframe-it, mënyra më e mirë është të përdorni vetinë CSS border.
Shembulli i mëposhtëm thjesht do të paraqes një iframe pa asnjë kufizë.
Shembull:
<iframe src="faqe.html" style="border: none;"></iframe>Në mënyrë të ngjashme, mund të përdorni vetinë border për të paraqitur kufiza që i zgjidhni në një iframe. Shembulli i mëposhtëm do të paraqes iframe-in me kufizën e kaltër me trashësi 2 piksell.
Shembull:
<iframe src="faqe.html" style="border: 2px solid blue;"></iframe>Përdorimi i një iFrame me target linku
Një iframe mund të përdoret gjithashtu si një target për hiperlidhjet.
Një iframe mund të emërohet duke përdorur atributin name. Kjo nënkupton që kur klikohet një link me një atribut target me atë emër si vlerë, burimi i lidhur do të hapet në atë iframe.
Le të provojmë një shembull për të kuptuar se si funksionon në thelb:
Shembull:
<p><a href="http://www.sezaisurroi.com" target="korniza">Ueb faqja: Sezai Surroi</a></p>
<iframe src="foto.jpg" name="korniza"></iframe>Audio
Vendosja e audios në dokumentin HTML
Vendosja e audios në një ueb faqe nuk ishte e lehtë më parë, sepse ueb shfletuesit nuk kishin një standard uniform për përcaktimin e vendosjes së medieve siç është audio.
Në këtë njësi ne do të demonstrojmë disa nga mënyrat për të vendosur zërin në ueb faqen tuaj, nga përdorimi i një linku të thjeshtë deri te përdorimi i elementit të fundit HTML5 <audio>.
Përdorimi i Elementit HTML5 audio
Elementi i ri në HTML5 <audio> ofron një mënyrë standarde për të vendosur audion në ueb faqe. Sidoqoftë, elementi audio është relativisht i ri por funksionon në shumicën e ueb shfletuesve modern.
Shembull:
<audio controls="controls" src="media/audio.mp3">
Shfletuesi juaj nuk e mbështetë elementin HTML5 Audio.
</audio>Një audio, duke përdorur grupin e paracaktuar të kontrolleve të shfletuesit, me burime alternative.
Shembull:
<audio controls="controls">
<source src="media/audio.mp3" type="audio/mpeg">
<source src="media/audio.ogg" type="audio/ogg">
Shfletuesi juaj nuk e mbështetë elementin HTML5 Audio.
</audio>Formati 'ogg' në shembullin e mësipërm funksionon në Firefox, Opera dhe Chrome, ndërsa i njëjti audio në formatin 'mp3' shtohet për ta bërë audion të funksionojë në Internet Explorer dhe Safari.
Lidhja tek fajllat audio
Ju mund të krijoni linqe me fajllat tuaj audio dhe ta luani duke klikuar në to.
Le të provojmë shembullin vijues për të kuptuar se si funksionon kjo në thelb:
Shembull:
<a href="media/audio1.mp3">Audio 1</a>
<a href="media/audio2.mp3">Audio 2</a>Përdorimi i elementit object
Elementi <object> përdoret për të vendosur lloje të ndryshme të media fajllave në një dokument HTML. Fillimisht, ky element është përdorur për të futur kontrollet ActiveX, por sipas specifikimit, një objekt mund të jetë çdo media objekt si audio, video, fajlla PDF, animacione Flash apo edhe imazhe.
Shembull:
<object data="media/audio.mp3"></object>
<object data="media/audio.ogg"></object>Paralajmërim: Elementi <object> nuk mbështetet gjerësisht dhe varet shumë nga lloji i objektit që është vendosur. Metoda të tjera siç janë elementi HTML5 <audio> ose lexuesit audio HTML5 të palëve të treta mund të jenë një zgjedhje më e mirë në shumë raste.
Përdorimi i Elementit embed
Elementi <embed> përdoret për të vendosur përmbajtjen multimediale në një dokument HTML.
Fragmenti i kodit të mëposhtëm vendos fajllat audio në një ueb faqe.
Shembull:
<embed src="media/audio.mp3">
<embed src="media/audio.ogg">Paralajmërim: Meqenëse elementi <embed> mbështetet shumë mirë në shfletuesit aktualë dhe përcaktohet si standard në HTML5, por audio juaj mund të mos luhet për shkak të mungesës së mbështetjes së shfletuesit për atë format të fajllit ose mungesës së disponueshmërisë së shtojcave.
Video
Vendosja e videos në dokumentin HTML
Vendosja e videos ngjashëm sikur vendosja e audios në një ueb faqe nuk ishte e lehtë më parë, sepse ueb shfletuesit nuk kishin një standard uniform për përcaktimin e vendosjes së medieve siç është video.
Në këtë njësi do të demonstrojmë disa nga mënyrat e shumta të shtimit të videove në ueb faqe, nga elementi më i fundit në HTML5 <video> deri tek videot e njohura nga YouTube.
Përdorimi i elementit HTML5 video
Elementi i ri në HTML5 <video> ofron një mënyrë standarde për të vendosur video në ueb faqe. Sidoqoftë, elementi video është relativisht i ri por funksionon në shumicën e ueb shfletuesve modern.
Shembull:
<video controls="controls" src="media/video.mp4">
Shfletuesi juaj nuk e mbështetë elementin HTML5 Video.
</video>Një video, duke përdorur grupin e paracaktuar të kontrolleve të shfletuesit, me burime alternative.
Shembull:
<video controls="controls">
<source src="media/video.mp4" type="video/mp4">
<source src="media/video.ogg" type="video/ogg">
Shfletuesi juaj nuk e mbështetë elementin HTML5 Video.
</video>Përdorimi i elementit object
Elementi <object> përdoret për të vendosur lloje të ndryshme të media fajllave në një dokument HTML. Fillimisht, ky element është përdorur për të futur kontrollet ActiveX, por sipas specifikimit, një objekt mund të jetë çdo media objekt si audio, video, fajlla PDF, animacione Flash apo edhe imazhe.
Fragmenti i mëposhtëm i kodit vendos një video Flash në një ueb faqe.
Shembull:
<object data="media/video.swf" width="400px" height="200px"></object>Vetëm shfletuesit ose aplikacionet që mbështesin Flash-in do të luajnë këtë video.
Paralajmërim: Elementi <object> nuk mbështetet gjerësisht dhe varet shumë nga lloji i objektit që është vendosur. Metodat e tjera mund të jenë një zgjedhje më e mirë në shumë raste. Pajisjet iPad dhe iPhone nuk mund të shfaqin videon Flash.
Përdorimi i Elementit embed
Elementi <embed> përdoret për të vendosur përmbajtjen multimediale në një dokument HTML.
Fragmenti i kodit të mëposhtëm vendos videon Flash në një ueb faqe.
Shembull:
<embed src="media/video.swf" width="400px" height="200px">Paralajmërim: Meqenëse elementi <embed> mbështetet shumë mirë në ueb shfletuesit aktualë dhe përcaktohet gjithashtu si standard në HTML5, megjithatë videoja juaj mund të mos shfaqet për shkak të mungesës së mbështetjes së shfletuesit për Flash ose mungesës së disponueshmërisë së shtojcave.
Vendosja e videove nga YouTube
Kjo është mënyra më e lehtë dhe më e popullarizuar për të futur video fajlle në ueb faqe. Ngarkoni videon tuaj në YouTube dhe shënoni kodin HTML për ta shfaqur atë video në ueb faqen tuaj.
Këtu kemi një shembull, ku shpjegohet i gjithë procesi:
Hapi 1: Ngarko video
Shkoni në faqen e ngarkimit të videos në YouTube dhe ndiqni udhëzimet për të ngarkuar videon tuaj.
Hapi 2: Krijimi i kodit HTML për të vendosur videon
Kur hapni videon tuaj të ngarkuar në YouTube do të shihni diçka të ngjashme si në figurën vijuese në pjesën e poshtme të videos. Tani shikoni butonin e ndarjes “share” që ndodhet poshtë videos, siç tregohet në figurë.
Kur klikoni në butonin e ndarjes “share”, do të hapet një dritare që shfaq disa butona për shpërndarje. Tani klikoni në butonin Embed, ai do të gjenerojë kodin HTML për ta vendosur direkt videon në ueb faqen tuaj. Thjesht kopjoni dhe ngjisni këtë kod në dokumentin tuaj HTML ku dëshironi të shfaqni videon dhe gjithçka është gati. Me parazgjedhje video vendoset brenda një iframe.
Ju mund ta personalizoni më tej këtë kod të vendosur siç është ndryshimi i madhësisë së videos duke ndryshuar më pas vlerën e atributeve width dhe height në kodin e vendosur.
Shembulli i mëposhtëm thjesht do të vendos videon nga YouTube.
Shembull:
<!DOCTYPE html>
<html lang="sq">
<head>
<meta charset="utf-8">
<title>Video nga YouTube</title>
</head>
<body>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/UB1O30fR-EE"
frameborder="0" allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen>
</iframe>
</body>
</html>Faqja HTML – Layout
Krijimi i një faqeje në ueb sajt paraqet aktivitetin e pozicionimit të elementeve të ndryshëm që e bëjnë një ueb faqe mirë të strukturuar dhe i japin një pamje tërheqëse ueb sajtit.
Sigurisht keni parë që shumica e ueb sajteve zakonisht shfaqin përmbajtjen e tyre në disa rreshta dhe kolona, të formatuara ngjashëm sikur një revistë ose gazetë për t'ju siguruar përdoruesve një mjedis më të mirë leximi dhe shkrimi. Kjo mund të arrihet lehtësisht duke përdorur etiketat HTML, të tilla si <table>, <div>, <header>, <footer>, <section>, etj., dhe duke shtuar stilizim CSS në to.
Paraqitja e faqes bazuar në tabelë
Tabela ofron mënyrën më të thjeshtë për krijimin e faqeve në HTML. Në përgjithësi, kjo përfshin procesin e vendosjes së përmbajtjeve, si tekst, imazhe e kështu me radhë në rreshta dhe kolona.
Paraqitja e mëposhtme është krijuar duke përdorur një tabelë HTML me 3 rreshta dhe 2 kolona - rreshti i parë dhe i fundit bashkojnë të dy kolonat duke përdorur atributin colspan të tabelës:
Shembull:
<!DOCTYPE html>
<html lang="sq">
<head>
<meta charset="utf-8">
<title>Faqja HTML me tabelë</title>
</head>
<body style="margin:0px;">
<table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;">
<tr>
<td colspan="2" style="padding:10px 20px; background-color:#acb3b9;">
<h1 style="font-size:24px;">Veglat Softuerike</h1>
</td>
</tr>
<tr style="height:170px;">
<td style="width:35%; padding:20px; background-color:#d4d7dc; vertical-align: top;">
<ul style="list-style:none; padding:0px; line-height:24px;">
<li><a href="#" style="color:#333;">Ballina</a></li>
<li><a href="#" style="color:#333;">Rreth nesh</a></li>
<li><a href="#" style="color:#333;">Kontakti</a></li>
</ul>
</td>
<td style="padding:20px; background-color:#f2f2f2; vertical-align:top;">
<h2>Mirë se vini në ueb sajtin tonë!</h2>
<p>Këtu do të mësoni si ndërtohen ueb sajtet...</p>
</td>
</tr>
<tr>
<td colspan="2" style="padding:5px; background-color:#acb3b9; text-align:center;">
<p>copyright © veglat.netlify.app</p>
</td>
</tr>
</table>
</body>
</html>Kodi HTML më lart do të gjenerojë rezultatin e mëposhtëm:
Paralajmërim: Metoda e përdorur për krijimin e faqes në shembullin e mësipërm nuk është e gabuar, por nuk rekomandohet. Shmangni tabelat dhe stilet inline për krijimin e faqeve. Faqet e krijuara duke përdorur tabela shpesh lexohen shumë ngadalë. Tabelat duhet të përdoren vetëm për të shfaqur të dhëna tabelore.
Paraqitja e faqes bazuar në div
Përdorimi i elementeve <div> është metoda më e zakonshme për krijimin e faqeve në HTML. Elementi <div> (që nënkupton ndarje – division) përdoret për të shënuar një bllok të përmbajtjes, ose për të grupuar disa elemente të tjerë brenda një dokumenti HTML. Gjithashtu mund të përmbajë më tej elementë të tjerë div nëse kërkohet.
Shembulli i mëposhtëm përdor elementët div për të krijuar kolona të shumëfishta të faqes. Gjithashtu do të prodhojë të njëjtin rezultat si në shembullin e mëparshëm ku përdoren elementet e tabelës:
Shembull:
<!DOCTYPE html>
<html lang="sq">
<head>
<meta charset="utf-8">
<title>Faqja HTML me DIV</title>
<style>
body {
font: 14px Arial,sans-serif;
margin: 0px;
}
.header {
padding: 10px 20px;
background: #acb3b9;
}
.header h1 {
font-size: 24px;
}
.container {
width: 100%;
background: #f2f2f2;
}
.nav, .section {
float: left;
padding: 20px;
min-height: 170px;
box-sizing: border-box;
}
.nav {
width: 35%;
background: #d4d7dc;
}
.section {
width: 65%;
}
.nav ul {
list-style: none;
line-height: 24px;
padding: 0px;
}
.nav ul li a {
color: #333;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.footer {
background: #acb3b9;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>Veglat Softuerike</h1>
</div>
<div class="wrapper clearfix">
<div class="nav">
<ul>
<li><a href="#">Ballina</a></li>
<li><a href="#">Rreth nesh</a></li>
<li><a href="#">Kontakti</a></li>
</ul>
</div>
<div class="section">
<h2>Mirë se vini në ueb sajtin tonë!</h2>
<p>Këtu do të mësoni si ndërtohen ueb sajtet...</p>
</div>
</div>
<div class="footer">
<p>copyright © veglat.netlify.app</p>
</div>
</div>
</body>
</html>Kodi HTML më lart do të gjenerojë rezultatin e mëposhtëm:
Kemi krijuar këtë faqe duke përdorur teknikat CSS float, pasi që shumica e shfletuesve i mbështesin ato. Përndryshe, mund të përdorni gjithashtu CSS3 flexbox për të krijuar faqe moderne dhe më fleksibile.
Këshillë: Paraqitjet më të mira të ueb sajteve mund të krijohen duke përdorur elementet DIV dhe CSS. Mund të ndryshoni paraqitjen e të gjitha faqeve të ueb sajtit tuaj duke edituar vetëm një fajll CSS. Mësoni më shumë rreth CSS.
Përdorimi i elementeve strukturore HTML5
HTML5 ka prezantuar elementet e reja strukturore të tilla si <header>, <footer>, <nav>, <section>, etj., për të përcaktuar pjesët e ndryshme të ueb faqes në një mënyrë më semantike.
Mund t'i konsideroni këto elemente si një zëvendësim të klasave të përdorura zakonisht si .header, .footer, .nav, .section, etj. Shembulli i mëposhtëm përdor elementet e rinj strukturorë HTML5 për të krijuar të njëjtën paraqitje që kemi krijuar në shembujt e mëparshëm.
Shembull:
<!DOCTYPE html>
<html lang="sq">
<head>
<meta charset="utf-8">
<title>Paraqitja e ueb faqes - HTML5</title>
<style>
body {
font: 14px Arial,sans-serif;
margin: 0px;
}
header {
padding: 10px 20px;
background: #acb3b9;
}
header h1 {
font-size: 24px;
}
.container {
width: 100%;
background: #f2f2f2;
}
nav, section {
float: left;
padding: 20px;
min-height: 170px;
box-sizing: border-box;
}
nav {
width: 35%;
background: #d4d7dc;
}
section {
width: 65%;
}
nav ul {
list-style: none;
line-height: 24px;
padding: 0px;
}
nav ul li a {
color: #333;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
footer {
background: #acb3b9;
text-align: center;
padding: 5px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Veglat Softuerike</h1>
</header>
<div class="wrapper clearfix">
<nav>
<ul>
<li><a href="#">Ballina</a></li>
<li><a href="#">Rreth nesh</a></li>
<li><a href="#">Kontakti</a></li>
</ul>
</nav>
<section>
<h2>Mirë se vini në ueb sajtin tonë!</h2>
<p>Këtu do të mësoni si ndërtohen ueb sajtet...</p>
</section>
</div>
<footer>
<p>copyright © veglat.netlify.app</p>
</footer>
</div>
</body>
</html>Kodi HTML më lart do të gjenerojë rezultatin e mëposhtëm:
Tabela e mëposhtme jep një përmbledhje të shkurtër të elementeve të reja strukturore në HTML5.
|
Etiketa |
Përshkrimi |
|
<header> |
Përfaqëson kokën e një dokumenti ose të një seksioni. |
|
<footer> |
Përfaqëson fundin e një dokumenti ose të një seksioni. |
|
<nav> |
Përfaqëson një seksion të lidhjeve të navigimit. |
|
<section> |
Përfaqëson një pjesë të një dokumenti, të tilla si header, footer etj. |
|
<article> |
Përfaqëson një artikull, postim në blog, ose njësi tjetër informacioni të pavarur. |
|
<aside> |
Përfaqëson disa përmbajtje të lidhura me përmbajtjen e faqes. |