HTML XHTML Mësimi 3: Formatimi Teksteve
Si fillim ju kujtoj që nëse vini në këtë mësim këtu të keni lexuar dy mësimet e para. Pa njohurit e marra aty nuk do mund të vazhdoni dot më tej. Mësimi i parë bën një hyrje në HTML kurse i dyti tregon disa karakteristika të XHTML. Në mësimin e tretë ju do të mësoni se si formatohen tekstet në html në mënyrë që të paraqiten bukur e pastër në shfletuesit e internetit. Do të marrim me radhë disa elementë e do ti shpjegojmë ato. Mos të humbim kohë edhe të nisim.</p>
- Hapësira (whitespace)</p>
Hapësira ose whitespace është një element i cili i përdorur më shumë se 1 herë injorohet nga brosweri. Me pak fjalë nëse ne jemi duke bër një dokument HTML edhe midis fjalëve kemi vendosur 3 apo 4 hapësira, brosweri ynë njeh vetëm të parën, të tjerat injorohen. E njëjta gjë vlen edhe kur në text editorin tonë ne shtypim “Enter” për të kaluar në një rrjeshtë të ri. Kjo gjë injorohet po ashtu nga brosweri edhe njiher si shumë hapësira njëra mbas tjetërës. Le të marrim një shembull që ta kuptoni më mirë. Ky është një pjesë dokumenti i rregullt në xhtml</p>
<p> Feniksi eshte faqja me e mire shqiptare me tutoriale. </p>
Si e shihni edhe vet ne kemi shkruar një fjali normale e cila paraqitet po e tillë edhe në shfletues. Tani nëse ne jemi duke punuar në një texeditor, psh Notepadd++, edhe shtojme disa hapësira kot me kot si:</p>
<p> Feniksi eshte faqja me e mire shqiptare me tutoriale </p>
Me syrin tonë këto lloj hapësirash në texteditor nuk kanë kuptim, por brosweri i injoron këto edhe teksti që shfaqet është i njëjtë me atë të parin. E njëjta gjë vlen edhe kur ne shkruajmë në rrjeshta të ndryshëm si psh:</p>
<p> Feniski
eshte faqja me
e mire shqiptare
me tutoriale </p>
Pra edhe në këtë rast hapësirat apo rrjeshtat e ri që ne vendosim në texteditor injorohen nga shfletuesi. Kjo është një gjë që ne mund ta shfrytezojmë kur punojmë me texteditor. Sepse mund të ndodhi që të kemi një fjali shumë të gjat edhe na duhet të kalojmë me maus anash për ta parë në texteditor. Kështu që ne e ndajmë fjalinë në rrjeshta që ta kemi në një shikim të parë të gjithën. Më vonë do ju tregoj edhe mënyrën që shfletuesi të shfaqi të njëjtën gjë që shihni në texteditor, por për momentin të keni parasysh këto që ju thash më lartë, në mënyrë që ta përdorni për avantazhin që ka.</p>
- Paragrafet</p>
Besoj do e keni vënë re që kur shkruaj në HTML përdor një simbol <p> si më lartë. Ky simbol është pikërisht për paragrafet. Pra një paragraf fillon më simbolin <p> edhe mbaron me atë </p>. Paragrafët në HTML janë container sepse ato përmbajnë tekste të tjerë apo figura që ne mund ti vendosim. Nëse në një dokument html ne shkruajmë dy paragrafe atëher ato kur paraqiten në broswer janë të ndarë nga njëri tjetri me një hapësirë boshe. Një tekst me dy paragrafe mund të jetë ky i mëposhtëmi:</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Paragrafet
</title>
</head>
<body bgcolor="#FFFFFF">
<p> Ky eshte paragrafi i pare i teksit </p>
<p> Ky eshte paragrafi i dyte i tekstit </p>
</body>
</html>
Nëse doni të shihni si duket në shfletues klikoni këtu. </p>
- Rrjeshtimi i paragrafëve </p>
Paragrafët mund të rrjeshtohen në katër mënyra të ndryshme. Ato janë:</p>
<p align=”left”> – në krahun e majtë, kjo është në default edhe nuk ka pse të shtohet extra por nëse doni mund ta bëni.
<p align=”right”> – në krahun e djathtë, nëse doni që çdo rrjeshtë i ri të filloj pikërisht në krahun e djathtë, atëher duhet të përdorni këtë lloj rrjeshtimi
<p align=”center”> – në këtë rast i gjithë teksti rënditet në qëndër
<p align=”justify”> – ky është një bashkim midis rënditjes në krahun e djathtë dhe asaj të krahut të majtë. Me pak fjalë kur nisin rrjeshtat e ri ato janë të “puthitur” me të dyja anët e shfletuesit. Që të arrihet kjo shpesh krijohen hapësirë midis fjalëve.
Për të kuptuar më mirë metodat e mësiperme edhe si paraqiten më poshtë po ju tregoj një kod të plotë XHTML edhe mënyrën se si shfaqet në shfletues:</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Renditja e paragrafeve
</title>
</head>
<body bgcolor="#FFFFFF">
<p align="left"> <b>Ky eshte paragrafi i renditur majtas</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, velit in convallis lacinia, dolor augue sagittis mi, nec sagittis purus
leo id nisl. Sed non vehicula nibh. Nullam a auctor nunc. Fusce velit libero, posuere quis elementum ut, vulputate vitae justo. Donec consequat
blandit urna, in aliquam eros mollis ut. Proin at urna quam. Nullam euismod felis nisi, eu dignissim ante. Sed lobortis euismod dapibus.
Vivamus consequat leo sed purus tincidunt et condimentum odio placerat. Suspendisse blandit, felis ut bibendum condimentum, turpis ligula
volutpat nulla, eu hendrerit ligula nisi eu odio. Maecenas gravida euismod ipsum, eu tempus nulla accumsan id. Vivamus tincidunt odio vel
ligula hendrerit pellentesque. Cras suscipit lorem ante, pellentesque pellentesque lorem. In hac habitasse platea dictumst. Quisque et mi
a mi lobortis mattis a ut leo.
</p>
<p align="right"><b> Ky eshte paragrafi i renditur djathtas</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, velit in convallis lacinia, dolor augue sagittis mi, nec sagittis purus
leo id nisl. Sed non vehicula nibh. Nullam a auctor nunc. Fusce velit libero, posuere quis elementum ut, vulputate vitae justo. Donec consequat
blandit urna, in aliquam eros mollis ut. Proin at urna quam. Nullam euismod felis nisi, eu dignissim ante. Sed lobortis euismod dapibus.
Vivamus consequat leo sed purus tincidunt et condimentum odio placerat. Suspendisse blandit, felis ut bibendum condimentum, turpis ligula
volutpat nulla, eu hendrerit ligula nisi eu odio. Maecenas gravida euismod ipsum, eu tempus nulla accumsan id. Vivamus tincidunt odio vel
ligula hendrerit pellentesque. Cras suscipit lorem ante, pellentesque pellentesque lorem. In hac habitasse platea dictumst. Quisque et mi
a mi lobortis mattis a ut leo.
</p>
<p align="center"> <b>Ky eshte paragrafi i renditur ne mes</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, velit in convallis lacinia, dolor augue sagittis mi, nec sagittis purus
leo id nisl. Sed non vehicula nibh. Nullam a auctor nunc. Fusce velit libero, posuere quis elementum ut, vulputate vitae justo. Donec consequat
blandit urna, in aliquam eros mollis ut. Proin at urna quam. Nullam euismod felis nisi, eu dignissim ante. Sed lobortis euismod dapibus.
Vivamus consequat leo sed purus tincidunt et condimentum odio placerat. Suspendisse blandit, felis ut bibendum condimentum, turpis ligula
volutpat nulla, eu hendrerit ligula nisi eu odio. Maecenas gravida euismod ipsum, eu tempus nulla accumsan id. Vivamus tincidunt odio vel
ligula hendrerit pellentesque. Cras suscipit lorem ante, pellentesque pellentesque lorem. In hac habitasse platea dictumst. Quisque et mi
a mi lobortis mattis a ut leo.
</p>
<p align="justify"> <b>Ky eshte paragrafi i renditur justify</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, velit in convallis lacinia, dolor augue sagittis mi, nec sagittis purus
leo id nisl. Sed non vehicula nibh. Nullam a auctor nunc. Fusce velit libero, posuere quis elementum ut, vulputate vitae justo. Donec consequat
blandit urna, in aliquam eros mollis ut. Proin at urna quam. Nullam euismod felis nisi, eu dignissim ante. Sed lobortis euismod dapibus.
Vivamus consequat leo sed purus tincidunt et condimentum odio placerat. Suspendisse blandit, felis ut bibendum condimentum, turpis ligula
volutpat nulla, eu hendrerit ligula nisi eu odio. Maecenas gravida euismod ipsum, eu tempus nulla accumsan id. Vivamus tincidunt odio vel
ligula hendrerit pellentesque. Cras suscipit lorem ante, pellentesque pellentesque lorem. In hac habitasse platea dictumst. Quisque et mi
a mi lobortis mattis a ut leo.
</p>
</body>
</html>
Nëse doni të shikoni rezultatin në shfletuesin klikoni këtu.</p>
- Rrjeshti i ri</p>
Më lartë tek pjesa e parë ku ju fola për hapësirat në texteditor ju thash që nëse ne kalojmë në një rrjesht të ri, atëherë në shfletuesin tonë nuk do të vihet re kjo edhe do të injorohet. Po mirë, po nëse ne duam realisht të fillojmë fjalinë e re në një rrjesht të ri? Përgjigja është e thjeshtë, ne duhet të përdorim një element në html që quhet breake e është me simbolet <br>. <br> është një element i cili vendoset në fund të fjalisë edhe na tregon ne që fjalia në fillim duhet të nisi në rrjesht të ri. Duke qënë se është një element i cili nuk përmban gjë brënda vetes, përdoret shkurtimi në shkruatje. Pra ju në vend të <br></br> mund të përdorni <br />. Le të marrim një shembull të vogël.</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Renditja e paragrafeve
</title>
</head>
<body bgcolor="#FFFFFF">
<p> Kjo eshte fjalia ime e pare. <br /> Kjo fjalia e dyt nis ne nje rrjeshte te ri. </p>
</body>
</html>
Nëse shpjegojmë rastin e mësipërm fjali e parë do të shfaqet në rrjeshtin e parë e fjalia e dytë në rrjeshtin e dytë. Në ndryshim nga paragrafet, rrjeshtat këtu nuk kanë hapësirë midis njëri tjetrit. Shihni si shfaqet në shfletues.</p>
- Formatimi i tekstit</p>
Për formatimin e tekstit kemi dy lloj elementës të ndryshëm nëse mund ti quaj të tillë. I pari është Phrase Markup Elements edhe i dyti është Font Marukup Elements. Megjithëse të dy shërbejnë pothuajse për të njëjtën gjë ato kanë një ndryshim të vogël midis njëri tjetrit. Të parët shërbejnë për ti treguar ose shënuar rëndësinë e frazës që ne përdorim. Nëse ne kemi një broswer jo vizual, ky i njeh këto element në bazë të markimit që ne i bëjmë. Kur përdoret kjo mënyrë ne më parë duhet ta testojmë sepse shfletues të ndryshëm e interpretojnë ndryshe.Të dytit (Font M. E.) shërbejnë për shikimin vizual. Normalisht këto nuk janë në thelbim e HTML por njihen edhe suportohen nga të gjithë shfletuesit. Këto shërbejnë sërisht për formatimin e tekstit edhe tregojnë saktësisht si duhet të jetë teksit. Ju mund ti përdorni të dy pa problem sepse si e thash më lartë suportohen nga të gjithë shfletuesit. Le ti rëndisim tani elementët e secilit. </p>
- Phrase Markup Elements</p>
<em> teksti </em> – me anë të këtij shfaqeim tekstin të pjerrët ose italic
<strong> teksti <strong> – bëhet teksti më i trash e duket më shumë
<q> teksti </q> – KUJDES!!! ky tag nuk është i suportuar nga të gjithë broswerat, mund të ndodh që ndonjë shfletues nuk e shfaq. Shërben për vendosjen e fjalës brënda thonjëzave.
<code> teksti </code> – shërben për shënimin e teksteve kur përdorim kode
Këtu po vendos një shembull kodi HTML:</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Phrase Markup Elements
</title>
</head>
<body>
<p>
Kjo eshte nje fjale e <em>pjerret</em>. <br />
Kjo tjetra eshte nje fjale e <strong>trashe</strong>. <br />
Kjo eshte nje fjale ne <q>thonjeza</q>. <br />
Kjo eshte nje fjale e <code>shkruar me kode</code>.
</p>
</body>
</html>
Nëse doni të shihni si shfaqet në shfletues, atëherë klikoni këtu.</p>
Ka edhe disa kode të tjera që shërbejnë kryesisht për mouse over dmth kur ne vendosim mausin sipër fjalën na shfaqe një shkrim. Ato janë:</p>
<abbr title=”Republika e Shqiperise”>R.SH</abbr> – nëse ne vendosim mausin sipër fjalës R.SH atëherë do na shfaqet ajo që kemi shkruar brënda title.
<acronym title=”Search Engine Optimisation”>SEO</acronym> – ka pothuajse të njëjtën kuptim si e mësipërmja, thjeshtë se e mësipërmja përdoret për shkurtime kurse kjo për akronime. (njësoj mo)
<dfn title=”kushte dhe ligje”>kushte</dfn> – definition ose definimi i një termi. Përdoret kryesisht kur ne duam të definojmë një term që përdorim në një shkrim.
Ka gjithashtu edhe disa atribute të tjerë që vizualisht nuk kanë ndonjë ndryshim të madh. Ato janë:</p>
<kbd> – ose keyboard element i cili vizualisht trajtohet si fonti monospace
<sample> – edhe ky trajtohet si monospace
<var> – ose variable e mund të përdoret kur shkruajmëndonjë variabel e trajtohet si italic nga shfletuesi.
Më poshtë keni kodin XHTML të përdorimit të këtyre atributeve.</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Phrase Markup Elements
</title>
</head>
<body>
<p> Miresevini ne <abr title="Repubika e Shqiperise">R.SH</abr>. <br />
<acronym titile"Search engine optimisation>SEO</acronym> eshte e rendesishme. <br />
Ky eshte nje <dfn title="definicion temporan">definicion</dfn>. <br />
Ky eshte nje element <kbd>keyboard</kbd>. <br />
Ky eshte nje element <sample>sample</sample>. <br />
Ky eshte nje element <var>variable</var>.
</p>
</body>
</html>
Nëse doni të shikoni si shfaqen në shfletues, atëherë klikoni këtu.</p>
- Font Markup Elements</p>
Elementët e këtij janë:</p>
<b>teksti</b> – e bën tekstin më të trashë
<big>teksti</big> – e bën tekstin më të madhë
<i>teksti</i> – kthen tekstin në italic (pjerrët)
<small>teksti</small> – e bën tekstin më të vogël
<u>teksti</u> – underline, dmth nënvizon tekstin
<strike>teksti</strike> – vendos një vizë në mes të tekstit.
<s>teksti</s> – është shkurtimi i strike edhe ka të njëjtin efekt.
<tt>teksti</tt> – përdor monospace font
Një shembull i përdorimit të këtyre në XHTML është më poshtë:</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Font Markup Elements
</title>
</head>
<body>
<p> <b>Ky teksti eshte i trashe</b>. <br />
<big>Ky tekst eshte i madh</big>. <br />
<i>Ky tekst eshte i pjerret</i>. <br />
<small>Ky tekst eshte i vogel</small>. <br />
<u>Ky tekst eshte i nenvizuar</u>. <br />
<strike>Ky tekst eshte me vije ne mes</strike>. <br />
<s>E njejta gje edhe per kete lloj teksti</s>. <br />
<tt>Ky tekst eshte me monospace font</tt>.
</p>
</body>
</html>
Nëse doni të shihni një shembull për rastet e mësipërme ju lutem Klikoni Këtu. </p>
- Heading</p>
Heading është një element shumë i rëndësishëm në stukturën e faqes tuaj. Me anë të heading ju ndihmoni motorrët e kërkimit me kuptuar strukturën e faqes. Pra nëse mendoni se Heading mund ta zëvendësoni me një text duke i ndryshuar parametrat jeni shumë gabim. Përdorni gjithmonë heading edhe stilojini ato më pas sipas dëshirës. Heading në XHTML – HTML shkruhen si më poshtë:</p>
<h1> teksti </h1>
<h2> teksti </h2>
<h3> teksti </h3>
<h4> teksti </h4>
<h5> teksti </h5>
<h6> teksti </h6>
Madhësia e teksteve vjen duke u zvogëluar nga i pari tek i gjashti. Në pamje të parë Heading janë me të vërtetë jo shumë të bukur, por ne mund ti stilojmë ato duke i shtuar disa atribute. Unë po ju tregoj se si bëhet por më konretish do ju flas më vonë. Përshembull nëse duam që një heading ta bëjmë më të madh sesa është edhe ti japim një font tjetr mund të përdorim kodin e mëposhtëm:</p>
<p> <h1 style="font-family: sans-serif; font-size: 125%"> Heading 1 </h1>
Më poshtë keni një kod të thjeshtë XHTML ku janë përdor Heading.
Si fillim ju kujtoj që nëse vini në këtë mësim këtu të keni lexuar dy mësimet e para. Pa njohurit e marra aty nuk do mund të vazhdoni dot më tej. Mësimi i parë bën një hyrje në HTML kurse i dyti tregon disa karakteristika të XHTML. Në mësimin e tretë ju do të mësoni se si formatohen tekstet në html në mënyrë që të paraqiten bukur e pastër në shfletuesit e internetit. Do të marrim me radhë disa elementë e do ti shpjegojmë ato. Mos të humbim kohë edhe të nisim.</p>
- Hapësira (whitespace)</p>
Hapësira ose whitespace është një element i cili i përdorur më shumë se 1 herë injorohet nga brosweri. Me pak fjalë nëse ne jemi duke bër një dokument HTML edhe midis fjalëve kemi vendosur 3 apo 4 hapësira, brosweri ynë njeh vetëm të parën, të tjerat injorohen. E njëjta gjë vlen edhe kur në text editorin tonë ne shtypim “Enter” për të kaluar në një rrjeshtë të ri. Kjo gjë injorohet po ashtu nga brosweri edhe njiher si shumë hapësira njëra mbas tjetërës. Le të marrim një shembull që ta kuptoni më mirë. Ky është një pjesë dokumenti i rregullt në xhtml</p>
<p> Feniksi eshte faqja me e mire shqiptare me tutoriale. </p>
Si e shihni edhe vet ne kemi shkruar një fjali normale e cila paraqitet po e tillë edhe në shfletues. Tani nëse ne jemi duke punuar në një texeditor, psh Notepadd++, edhe shtojme disa hapësira kot me kot si:</p>
<p> Feniksi eshte faqja me e mire shqiptare me tutoriale </p>
Me syrin tonë këto lloj hapësirash në texteditor nuk kanë kuptim, por brosweri i injoron këto edhe teksti që shfaqet është i njëjtë me atë të parin. E njëjta gjë vlen edhe kur ne shkruajmë në rrjeshta të ndryshëm si psh:</p>
<p> Feniski
eshte faqja me
e mire shqiptare
me tutoriale </p>
Pra edhe në këtë rast hapësirat apo rrjeshtat e ri që ne vendosim në texteditor injorohen nga shfletuesi. Kjo është një gjë që ne mund ta shfrytezojmë kur punojmë me texteditor. Sepse mund të ndodhi që të kemi një fjali shumë të gjat edhe na duhet të kalojmë me maus anash për ta parë në texteditor. Kështu që ne e ndajmë fjalinë në rrjeshta që ta kemi në një shikim të parë të gjithën. Më vonë do ju tregoj edhe mënyrën që shfletuesi të shfaqi të njëjtën gjë që shihni në texteditor, por për momentin të keni parasysh këto që ju thash më lartë, në mënyrë që ta përdorni për avantazhin që ka.</p>
- Paragrafet</p>
Besoj do e keni vënë re që kur shkruaj në HTML përdor një simbol <p> si më lartë. Ky simbol është pikërisht për paragrafet. Pra një paragraf fillon më simbolin <p> edhe mbaron me atë </p>. Paragrafët në HTML janë container sepse ato përmbajnë tekste të tjerë apo figura që ne mund ti vendosim. Nëse në një dokument html ne shkruajmë dy paragrafe atëher ato kur paraqiten në broswer janë të ndarë nga njëri tjetri me një hapësirë boshe. Një tekst me dy paragrafe mund të jetë ky i mëposhtëmi:</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Paragrafet
</title>
</head>
<body bgcolor="#FFFFFF">
<p> Ky eshte paragrafi i pare i teksit </p>
<p> Ky eshte paragrafi i dyte i tekstit </p>
</body>
</html>
Nëse doni të shihni si duket në shfletues klikoni këtu. </p>
- Rrjeshtimi i paragrafëve </p>
Paragrafët mund të rrjeshtohen në katër mënyra të ndryshme. Ato janë:</p>
<p align=”left”> – në krahun e majtë, kjo është në default edhe nuk ka pse të shtohet extra por nëse doni mund ta bëni.
<p align=”right”> – në krahun e djathtë, nëse doni që çdo rrjeshtë i ri të filloj pikërisht në krahun e djathtë, atëher duhet të përdorni këtë lloj rrjeshtimi
<p align=”center”> – në këtë rast i gjithë teksti rënditet në qëndër
<p align=”justify”> – ky është një bashkim midis rënditjes në krahun e djathtë dhe asaj të krahut të majtë. Me pak fjalë kur nisin rrjeshtat e ri ato janë të “puthitur” me të dyja anët e shfletuesit. Që të arrihet kjo shpesh krijohen hapësirë midis fjalëve.
Për të kuptuar më mirë metodat e mësiperme edhe si paraqiten më poshtë po ju tregoj një kod të plotë XHTML edhe mënyrën se si shfaqet në shfletues:</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Renditja e paragrafeve
</title>
</head>
<body bgcolor="#FFFFFF">
<p align="left"> <b>Ky eshte paragrafi i renditur majtas</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, velit in convallis lacinia, dolor augue sagittis mi, nec sagittis purus
leo id nisl. Sed non vehicula nibh. Nullam a auctor nunc. Fusce velit libero, posuere quis elementum ut, vulputate vitae justo. Donec consequat
blandit urna, in aliquam eros mollis ut. Proin at urna quam. Nullam euismod felis nisi, eu dignissim ante. Sed lobortis euismod dapibus.
Vivamus consequat leo sed purus tincidunt et condimentum odio placerat. Suspendisse blandit, felis ut bibendum condimentum, turpis ligula
volutpat nulla, eu hendrerit ligula nisi eu odio. Maecenas gravida euismod ipsum, eu tempus nulla accumsan id. Vivamus tincidunt odio vel
ligula hendrerit pellentesque. Cras suscipit lorem ante, pellentesque pellentesque lorem. In hac habitasse platea dictumst. Quisque et mi
a mi lobortis mattis a ut leo.
</p>
<p align="right"><b> Ky eshte paragrafi i renditur djathtas</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, velit in convallis lacinia, dolor augue sagittis mi, nec sagittis purus
leo id nisl. Sed non vehicula nibh. Nullam a auctor nunc. Fusce velit libero, posuere quis elementum ut, vulputate vitae justo. Donec consequat
blandit urna, in aliquam eros mollis ut. Proin at urna quam. Nullam euismod felis nisi, eu dignissim ante. Sed lobortis euismod dapibus.
Vivamus consequat leo sed purus tincidunt et condimentum odio placerat. Suspendisse blandit, felis ut bibendum condimentum, turpis ligula
volutpat nulla, eu hendrerit ligula nisi eu odio. Maecenas gravida euismod ipsum, eu tempus nulla accumsan id. Vivamus tincidunt odio vel
ligula hendrerit pellentesque. Cras suscipit lorem ante, pellentesque pellentesque lorem. In hac habitasse platea dictumst. Quisque et mi
a mi lobortis mattis a ut leo.
</p>
<p align="center"> <b>Ky eshte paragrafi i renditur ne mes</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, velit in convallis lacinia, dolor augue sagittis mi, nec sagittis purus
leo id nisl. Sed non vehicula nibh. Nullam a auctor nunc. Fusce velit libero, posuere quis elementum ut, vulputate vitae justo. Donec consequat
blandit urna, in aliquam eros mollis ut. Proin at urna quam. Nullam euismod felis nisi, eu dignissim ante. Sed lobortis euismod dapibus.
Vivamus consequat leo sed purus tincidunt et condimentum odio placerat. Suspendisse blandit, felis ut bibendum condimentum, turpis ligula
volutpat nulla, eu hendrerit ligula nisi eu odio. Maecenas gravida euismod ipsum, eu tempus nulla accumsan id. Vivamus tincidunt odio vel
ligula hendrerit pellentesque. Cras suscipit lorem ante, pellentesque pellentesque lorem. In hac habitasse platea dictumst. Quisque et mi
a mi lobortis mattis a ut leo.
</p>
<p align="justify"> <b>Ky eshte paragrafi i renditur justify</b>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eleifend, velit in convallis lacinia, dolor augue sagittis mi, nec sagittis purus
leo id nisl. Sed non vehicula nibh. Nullam a auctor nunc. Fusce velit libero, posuere quis elementum ut, vulputate vitae justo. Donec consequat
blandit urna, in aliquam eros mollis ut. Proin at urna quam. Nullam euismod felis nisi, eu dignissim ante. Sed lobortis euismod dapibus.
Vivamus consequat leo sed purus tincidunt et condimentum odio placerat. Suspendisse blandit, felis ut bibendum condimentum, turpis ligula
volutpat nulla, eu hendrerit ligula nisi eu odio. Maecenas gravida euismod ipsum, eu tempus nulla accumsan id. Vivamus tincidunt odio vel
ligula hendrerit pellentesque. Cras suscipit lorem ante, pellentesque pellentesque lorem. In hac habitasse platea dictumst. Quisque et mi
a mi lobortis mattis a ut leo.
</p>
</body>
</html>
Nëse doni të shikoni rezultatin në shfletuesin klikoni këtu.</p>
- Rrjeshti i ri</p>
Më lartë tek pjesa e parë ku ju fola për hapësirat në texteditor ju thash që nëse ne kalojmë në një rrjesht të ri, atëherë në shfletuesin tonë nuk do të vihet re kjo edhe do të injorohet. Po mirë, po nëse ne duam realisht të fillojmë fjalinë e re në një rrjesht të ri? Përgjigja është e thjeshtë, ne duhet të përdorim një element në html që quhet breake e është me simbolet <br>. <br> është një element i cili vendoset në fund të fjalisë edhe na tregon ne që fjalia në fillim duhet të nisi në rrjesht të ri. Duke qënë se është një element i cili nuk përmban gjë brënda vetes, përdoret shkurtimi në shkruatje. Pra ju në vend të <br></br> mund të përdorni <br />. Le të marrim një shembull të vogël.</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Renditja e paragrafeve
</title>
</head>
<body bgcolor="#FFFFFF">
<p> Kjo eshte fjalia ime e pare. <br /> Kjo fjalia e dyt nis ne nje rrjeshte te ri. </p>
</body>
</html>
Nëse shpjegojmë rastin e mësipërm fjali e parë do të shfaqet në rrjeshtin e parë e fjalia e dytë në rrjeshtin e dytë. Në ndryshim nga paragrafet, rrjeshtat këtu nuk kanë hapësirë midis njëri tjetrit. Shihni si shfaqet në shfletues.</p>
- Formatimi i tekstit</p>
Për formatimin e tekstit kemi dy lloj elementës të ndryshëm nëse mund ti quaj të tillë. I pari është Phrase Markup Elements edhe i dyti është Font Marukup Elements. Megjithëse të dy shërbejnë pothuajse për të njëjtën gjë ato kanë një ndryshim të vogël midis njëri tjetrit. Të parët shërbejnë për ti treguar ose shënuar rëndësinë e frazës që ne përdorim. Nëse ne kemi një broswer jo vizual, ky i njeh këto element në bazë të markimit që ne i bëjmë. Kur përdoret kjo mënyrë ne më parë duhet ta testojmë sepse shfletues të ndryshëm e interpretojnë ndryshe.Të dytit (Font M. E.) shërbejnë për shikimin vizual. Normalisht këto nuk janë në thelbim e HTML por njihen edhe suportohen nga të gjithë shfletuesit. Këto shërbejnë sërisht për formatimin e tekstit edhe tregojnë saktësisht si duhet të jetë teksit. Ju mund ti përdorni të dy pa problem sepse si e thash më lartë suportohen nga të gjithë shfletuesit. Le ti rëndisim tani elementët e secilit. </p>
- Phrase Markup Elements</p>
<em> teksti </em> – me anë të këtij shfaqeim tekstin të pjerrët ose italic
<strong> teksti <strong> – bëhet teksti më i trash e duket më shumë
<q> teksti </q> – KUJDES!!! ky tag nuk është i suportuar nga të gjithë broswerat, mund të ndodh që ndonjë shfletues nuk e shfaq. Shërben për vendosjen e fjalës brënda thonjëzave.
<code> teksti </code> – shërben për shënimin e teksteve kur përdorim kode
Këtu po vendos një shembull kodi HTML:</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Phrase Markup Elements
</title>
</head>
<body>
<p>
Kjo eshte nje fjale e <em>pjerret</em>. <br />
Kjo tjetra eshte nje fjale e <strong>trashe</strong>. <br />
Kjo eshte nje fjale ne <q>thonjeza</q>. <br />
Kjo eshte nje fjale e <code>shkruar me kode</code>.
</p>
</body>
</html>
Nëse doni të shihni si shfaqet në shfletues, atëherë klikoni këtu.</p>
Ka edhe disa kode të tjera që shërbejnë kryesisht për mouse over dmth kur ne vendosim mausin sipër fjalën na shfaqe një shkrim. Ato janë:</p>
<abbr title=”Republika e Shqiperise”>R.SH</abbr> – nëse ne vendosim mausin sipër fjalës R.SH atëherë do na shfaqet ajo që kemi shkruar brënda title.
<acronym title=”Search Engine Optimisation”>SEO</acronym> – ka pothuajse të njëjtën kuptim si e mësipërmja, thjeshtë se e mësipërmja përdoret për shkurtime kurse kjo për akronime. (njësoj mo)
<dfn title=”kushte dhe ligje”>kushte</dfn> – definition ose definimi i një termi. Përdoret kryesisht kur ne duam të definojmë një term që përdorim në një shkrim.
Ka gjithashtu edhe disa atribute të tjerë që vizualisht nuk kanë ndonjë ndryshim të madh. Ato janë:</p>
<kbd> – ose keyboard element i cili vizualisht trajtohet si fonti monospace
<sample> – edhe ky trajtohet si monospace
<var> – ose variable e mund të përdoret kur shkruajmëndonjë variabel e trajtohet si italic nga shfletuesi.
Më poshtë keni kodin XHTML të përdorimit të këtyre atributeve.</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Phrase Markup Elements
</title>
</head>
<body>
<p> Miresevini ne <abr title="Repubika e Shqiperise">R.SH</abr>. <br />
<acronym titile"Search engine optimisation>SEO</acronym> eshte e rendesishme. <br />
Ky eshte nje <dfn title="definicion temporan">definicion</dfn>. <br />
Ky eshte nje element <kbd>keyboard</kbd>. <br />
Ky eshte nje element <sample>sample</sample>. <br />
Ky eshte nje element <var>variable</var>.
</p>
</body>
</html>
Nëse doni të shikoni si shfaqen në shfletues, atëherë klikoni këtu.</p>
- Font Markup Elements</p>
Elementët e këtij janë:</p>
<b>teksti</b> – e bën tekstin më të trashë
<big>teksti</big> – e bën tekstin më të madhë
<i>teksti</i> – kthen tekstin në italic (pjerrët)
<small>teksti</small> – e bën tekstin më të vogël
<u>teksti</u> – underline, dmth nënvizon tekstin
<strike>teksti</strike> – vendos një vizë në mes të tekstit.
<s>teksti</s> – është shkurtimi i strike edhe ka të njëjtin efekt.
<tt>teksti</tt> – përdor monospace font
Një shembull i përdorimit të këtyre në XHTML është më poshtë:</p>
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
Font Markup Elements
</title>
</head>
<body>
<p> <b>Ky teksti eshte i trashe</b>. <br />
<big>Ky tekst eshte i madh</big>. <br />
<i>Ky tekst eshte i pjerret</i>. <br />
<small>Ky tekst eshte i vogel</small>. <br />
<u>Ky tekst eshte i nenvizuar</u>. <br />
<strike>Ky tekst eshte me vije ne mes</strike>. <br />
<s>E njejta gje edhe per kete lloj teksti</s>. <br />
<tt>Ky tekst eshte me monospace font</tt>.
</p>
</body>
</html>
Nëse doni të shihni një shembull për rastet e mësipërme ju lutem Klikoni Këtu. </p>
- Heading</p>
Heading është një element shumë i rëndësishëm në stukturën e faqes tuaj. Me anë të heading ju ndihmoni motorrët e kërkimit me kuptuar strukturën e faqes. Pra nëse mendoni se Heading mund ta zëvendësoni me një text duke i ndryshuar parametrat jeni shumë gabim. Përdorni gjithmonë heading edhe stilojini ato më pas sipas dëshirës. Heading në XHTML – HTML shkruhen si më poshtë:</p>
<h1> teksti </h1>
<h2> teksti </h2>
<h3> teksti </h3>
<h4> teksti </h4>
<h5> teksti </h5>
<h6> teksti </h6>
Madhësia e teksteve vjen duke u zvogëluar nga i pari tek i gjashti. Në pamje të parë Heading janë me të vërtetë jo shumë të bukur, por ne mund ti stilojmë ato duke i shtuar disa atribute. Unë po ju tregoj se si bëhet por më konretish do ju flas më vonë. Përshembull nëse duam që një heading ta bëjmë më të madh sesa është edhe ti japim një font tjetr mund të përdorim kodin e mëposhtëm:</p>
<p> <h1 style="font-family: sans-serif; font-size: 125%"> Heading 1 </h1>
Më poshtë keni një kod të thjeshtë XHTML ku janë përdor Heading.
HTML:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[url]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/url]
<html xmlns="[url]http://www.w3.org/1999/xhtml">[/url]
<head>
<title>
Heading
</title>
</head>
<body>
<p>
<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>
</p>
</body>
</html>
Nëse doni ta shihni në shfletues si shfaqe Klikoni Këtu.</p>
Besoj se kaq është e mjaftueshme për këtë herë. Studiojini mirë gjërat e mësipërme sepse do t’ju duhen gjithmonë kur punoni me HTML XHTML.</p>
Doni të testoni njohuritë e marra në këtë mësim? Atëher provoni të bëni Quizin tonë:</p>
[img]http://www.feniksi.com/wp-content/uploads/2010/02/beni-quizin.png[/img]</p>
HTML – XHTML Mësimi 3: Formatimi Teksteve është një postim nga: Feniksi.Com - Thesari i Njohurive</p>
Per me shume artikuj te ngjashem vizitoni: [url]http://www.feniksi.com/?p=442[/url]