HTML Mësimi 5 Imazhet edhe vendosja e tyre
Ne ju këshillojmë që të lexoni edhe leksionet e mëparshme përpara se të vazhdoni me këtë këtu. Nëse doni të arrini të mësoni HTML duhet të ndiqni të gjithë mësimet. Më poshtë i keni të listuara.</p>
Prezantimi i HTML
Prezantimi i XHTML
Formatimi i Teksteve
Listat dhe disa Formatime
Si e thashë edhe më lartë në këtë mësim do të flasim vetëm për imazhet edhe vendosjen e tyre në tekste. Tagu që përdoret për vendosjen e imazheve është një inline tag edhe qëndron gjithmonë i vetëm. Nuk ka një tag specifik mbyllës por mbyllet nga karakteri / në fund. Ky tag përmban shumë atribute e më të rëndësishmet do i shpjegoj më poshtë.</p>
Më mirë të marrim një shembull e ta shpjegojmë më konrektisht:</p>
<img src="imazhi.jpg" alt="Testim" title="Une jam mausi" width="24" height="24" />
Si e shihni edhe vet tagu për imazhet është <img ……. /></p>
Atributet e mësipërme që janë përdorur:</p>
src – tregon vendodhjen e imazhit ose fotografisë që duam të vendosim. Vlen i njëjti argument si te shpjegimi i linkeve që vendodhja është relative me vendodhjen e dokumentit qëvendosim kodin. Gjithashtu mund të vendosni edhe link nga faqe eksterne ose të jashtëme. Mos harroni të vendosni gjithmonë mbaresën e fotografisë sepse ka shumë rëndësi (në rastin tonë .jpg)
alt – ose alternative. Ky është një atribut i rëndësishëm sepse nëse shfletuesi juaj gabon në ngarkimin e imazhit i del fjala që është e shkruar në alt. Nëse dikush psh nuk e ka të aktivizuar shfaqjen e imazheve i shfaqet ky tekst që i bën të ditur që aty ka një imazh. Këshillohet të vendoset gjithmonë
title – funksionon pothuajse si në taget e tjera. I jep titullin figurës.
width / height – gjërësia dhe gjatësia e fotos që vendosim. Shumë persona mund të thonë që kjo gjë nuk është e nevojshme, por që në të vërtet luan një rol në shpejtësinë e hapjes së një faqeje webi. Kur një shfletues hap një faqe webi e kupton që ka fotografi edhe din përmasat e tyre, atëher ai nuk ka pse llogarit gjë edhe hapet direkt. Nëse ne nuk kemi vendosur të dhënat, shfletuesi duhet të llogarisi njiher përmasat e fotos e pastaj të hapet. Pra kemi një vonesë edhe pse në realiteti kjo është shumë shumë e vogël por ndikon për keq.
Nëse doni të shihni një figurë të shfaqur në një tekst Klikoni Këtu.</p>
- Rënditja e imazheve</p>
Imazhet mund të rënditen në mënyrë të ndryshme në një faqe në bazë të atributeve që ne përdorim. Këtu ka disa atribute që ne po i shpjegojmë:</p>
align – shërben për rënditjen majtas ose djathtas të imazhit në shfletues. Kështu që merr dy atributet left edhe right
hspace – ose horizontal space tregon hapësirën e imazhit nga teksti ose imazhet e tjera majtas edhe djathtas
vspace - ose vertical space tregon hapësirën e imazhit nga teksti ose imazhet e tjera poshtë edhe lartë
border – shërben për vendosjen e kornizave figurës tonë
Le të marrim një shembull kodi të mëposhtëm për të parë si funksionojnë këto atribute.</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>
Imazhet
</title>
</head>
<body>
<p><img src="imazhe/romeolab.jpg" alt="RomeoLab" title="Informatika Shqiptare" height="125" width="125" align="right" vspace="20" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mollis ante at tempor. Aliquam ornare dapibus enim a tristique.
Praesent congue venenatis feugiat. Suspendisse est leo, aliquet ut vestibulum non, placerat faucibus nisi. In venenatis venenatis tortor,
mattis ultricies elit pulvinar id. Proin eget est felis. Donec convallis turpis ut dui eleifend aliquam. Aliquam erat metus, imperdiet ac dapibus at,
viverra sit amet tellus. Etiam eleifend felis augue. Praesent sit amet massa non erat interdum venenatis ut at ipsum.</p>
<p> Proin sollicitudin rutrum massa in dictum. Curabitur ac sapien vulputate dui molestie scelerisque. Ut ut nunc massa.
Integer eget nulla ut magna imperdiet viverra vitae ut libero. Suspendisse eu leo malesuada felis pharetra rhoncus.
Donec non urna nibh. Vestibulum feugiat iaculis feugiat. Pellentesque viverra condimentum tortor eu imperdiet.
Donec accumsan, mauris sed elementum pharetra, mi lorem convallis erat, ut congue metus justo at mauris.
Sed sit amet lorem sit amet velit luctus dignissim. Fusce non neque nulla, eu luctus turpis.
Praesent eu libero felis, a tempus dui. Integer sapien est, tempor eu mattis vitae, tristique eu velit.
Duis ante nisl, rutrum a aliquam at, hendrerit ut magna.</p>
<p><img src="imazhe/romeolab.jpg" alt="RomeoLab" title="Informatika Shqiptare" height="125" width="125" align="left" hspace="20" border="5" /> Sed cursus, augue eget adipiscing vehicula, purus enim vestibulum sem, vel laoreet ligula arcu convallis urna.
Nunc quam quam, tincidunt eu pretium nec, blandit non ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas molestie arcu molestie tellus convallis interdum. Integer ante est, placerat in pretium a, tempus ut urna.
Maecenas accumsan posuere enim ut tempus. Cras non tortor id nisi pulvinar venenatis. Nulla suscipit nisi massa, ac tempor purus.
Maecenas consequat sem ut mauris molestie condimentum. Donec quis nisl enim. Sed non cursus purus. </p>
</body>
</html>
Nëse doni ta shikoni në shfletues se si shfaqen imazhet atëherë Klikoni Këtu.</p>
- Përdorimi i atributit Clear</p>
Ne kemi mësuar se kur vendosim tagun <br /> fjala ose fjalia në vazhdim na shfaqen në një rrjesht të ri. Nëse e bëjmë këtë gjë kur kemi të vendosur një fotografi, atëher do të ndodh e njëjta gjë. Po sikur ne duam që rrjeshti i ri të nisi poshtë fotografisë edhe jo anash saj? Atëher duhet të përdorim tagun <br /> me një atribut që quhet clear. Ky lloj atributi mund të jetë:</p>
left – pastron objektet që floating (lundrojnë nga e majta
right – pastron objektet nga e djathta
both – pastron nga të dyja anët
Më poshtë do të përdorim një kod HTML edhe nga shfaqja në shfletues do e veni re se ku qëndron vërtet ndryshimi i përdorimit të një tagu <br /> pa atributin clear edhe njërit me përdorimin e atributit clear.</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>
Imazhet
</title>
</head>
<body>
<h1> Pa atributin Clear</h1>
<p><img src="imazhe/romeolab.jpg" alt="RomeoLab" title="Informatika Shqiptare" height="125" width="125" align="right" /> Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Morbi rutrum mollis ante at tempor. Aliquam ornare dapibus enim a tristique.
Praesent congue venenatis feugiat. Suspendisse est leo, aliquet ut vestibulum non,<br /> placerat faucibus nisi. In venenatis venenatis tortor,
mattis ultricies elit pulvinar id. Proin eget est felis. Donec convallis turpis ut dui eleifend aliquam. Aliquam erat metus, imperdiet ac dapibus at,
viverra sit amet tellus. Etiam eleifend felis augue. Praesent sit amet massa non erat interdum venenatis ut at ipsum.
Proin sollicitudin rutrum massa in dictum. Curabitur ac sapien vulputate dui molestie scelerisque. Ut ut nunc massa.
Integer eget nulla ut magna imperdiet viverra vitae ut libero. Suspendisse eu leo malesuada felis pharetra rhoncus.
Donec non urna nibh. Vestibulum feugiat iaculis feugiat. Pellentesque viverra condimentum tortor eu imperdiet.
Donec accumsan, mauris sed elementum pharetra, mi lorem convallis erat, ut congue metus justo at mauris.
Sed sit amet lorem sit amet velit luctus dignissim. Fusce non neque nulla, eu luctus turpis.
Praesent eu libero felis, a tempus dui. Integer sapien est, tempor eu mattis vitae, tristique eu velit.
Duis ante nisl, rutrum a aliquam at, hendrerit ut magna.</p>
<h1> Me atributin Clear </h1>
<p><img src="imazhe/romeolab.jpg" alt="RomeoLab" title="Informatika Shqiptare" height="125" width="125" align="right" /> Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Morbi rutrum mollis ante at tempor. Aliquam ornare dapibus enim a tristique.
Praesent congue venenatis feugiat. Suspendisse est leo, aliquet ut vestibulum non,<br clear="right" /> placerat faucibus nisi. In venenatis venenatis tortor,
mattis ultricies elit pulvinar id. Proin eget est felis. Donec convallis turpis ut dui eleifend aliquam. Aliquam erat metus, imperdiet ac dapibus at,
viverra sit amet tellus. Etiam eleifend felis augue. Praesent sit amet massa non erat interdum venenatis ut at ipsum.
Proin sollicitudin rutrum massa in dictum. Curabitur ac sapien vulputate dui molestie scelerisque. Ut ut nunc massa.
Integer eget nulla ut magna imperdiet viverra vitae ut libero. Suspendisse eu leo malesuada felis pharetra rhoncus.
Donec non urna nibh. Vestibulum feugiat iaculis feugiat. Pellentesque viverra condimentum tortor eu imperdiet.
Donec accumsan, mauris sed elementum pharetra, mi lorem convallis erat, ut congue metus justo at mauris.
Sed sit amet lorem sit amet velit luctus dignissim. Fusce non neque nulla, eu luctus turpis.
Praesent eu libero felis, a tempus dui. Integer sapien est, tempor eu mattis vitae, tristique eu velit.
Duis ante nisl, rutrum a aliquam at, hendrerit ut magna.</p>
</body>
</html>
Nëse doni të shikoni konkretisht dallimet midis rastit të parë edhe rastit të dytë kur është përdorur clear Klikoni Këtu.</p>
Ju uroj mësim të këndëshëm edhe të keni parasysh ti fiksoni gjërat e mësipërme mirë që mos të keni në të ardhmen probleme me shfaqjen e figurave në tekstet tuaja.</p>
Doni të testoni njohuritë e marra në këtë mësim? Atëher provoni të bëni Quizin tonë:</p>
<p style="text-align: center;">
</p>
HTML Mësimi 5 – Imazhet edhe vendosja e tyre është një postim nga: Feniksi.Com - Thesari i Njohurive</p>
Per me shume artikuj te ngjashem vizitoni: http://www.feniksi.com/?p=603
Ne ju këshillojmë që të lexoni edhe leksionet e mëparshme përpara se të vazhdoni me këtë këtu. Nëse doni të arrini të mësoni HTML duhet të ndiqni të gjithë mësimet. Më poshtë i keni të listuara.</p>
Prezantimi i HTML
Prezantimi i XHTML
Formatimi i Teksteve
Listat dhe disa Formatime
Si e thashë edhe më lartë në këtë mësim do të flasim vetëm për imazhet edhe vendosjen e tyre në tekste. Tagu që përdoret për vendosjen e imazheve është një inline tag edhe qëndron gjithmonë i vetëm. Nuk ka një tag specifik mbyllës por mbyllet nga karakteri / në fund. Ky tag përmban shumë atribute e më të rëndësishmet do i shpjegoj më poshtë.</p>
Më mirë të marrim një shembull e ta shpjegojmë më konrektisht:</p>
<img src="imazhi.jpg" alt="Testim" title="Une jam mausi" width="24" height="24" />
Si e shihni edhe vet tagu për imazhet është <img ……. /></p>
Atributet e mësipërme që janë përdorur:</p>
src – tregon vendodhjen e imazhit ose fotografisë që duam të vendosim. Vlen i njëjti argument si te shpjegimi i linkeve që vendodhja është relative me vendodhjen e dokumentit qëvendosim kodin. Gjithashtu mund të vendosni edhe link nga faqe eksterne ose të jashtëme. Mos harroni të vendosni gjithmonë mbaresën e fotografisë sepse ka shumë rëndësi (në rastin tonë .jpg)
alt – ose alternative. Ky është një atribut i rëndësishëm sepse nëse shfletuesi juaj gabon në ngarkimin e imazhit i del fjala që është e shkruar në alt. Nëse dikush psh nuk e ka të aktivizuar shfaqjen e imazheve i shfaqet ky tekst që i bën të ditur që aty ka një imazh. Këshillohet të vendoset gjithmonë
title – funksionon pothuajse si në taget e tjera. I jep titullin figurës.
width / height – gjërësia dhe gjatësia e fotos që vendosim. Shumë persona mund të thonë që kjo gjë nuk është e nevojshme, por që në të vërtet luan një rol në shpejtësinë e hapjes së një faqeje webi. Kur një shfletues hap një faqe webi e kupton që ka fotografi edhe din përmasat e tyre, atëher ai nuk ka pse llogarit gjë edhe hapet direkt. Nëse ne nuk kemi vendosur të dhënat, shfletuesi duhet të llogarisi njiher përmasat e fotos e pastaj të hapet. Pra kemi një vonesë edhe pse në realiteti kjo është shumë shumë e vogël por ndikon për keq.
Nëse doni të shihni një figurë të shfaqur në një tekst Klikoni Këtu.</p>
- Rënditja e imazheve</p>
Imazhet mund të rënditen në mënyrë të ndryshme në një faqe në bazë të atributeve që ne përdorim. Këtu ka disa atribute që ne po i shpjegojmë:</p>
align – shërben për rënditjen majtas ose djathtas të imazhit në shfletues. Kështu që merr dy atributet left edhe right
hspace – ose horizontal space tregon hapësirën e imazhit nga teksti ose imazhet e tjera majtas edhe djathtas
vspace - ose vertical space tregon hapësirën e imazhit nga teksti ose imazhet e tjera poshtë edhe lartë
border – shërben për vendosjen e kornizave figurës tonë
Le të marrim një shembull kodi të mëposhtëm për të parë si funksionojnë këto atribute.</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>
Imazhet
</title>
</head>
<body>
<p><img src="imazhe/romeolab.jpg" alt="RomeoLab" title="Informatika Shqiptare" height="125" width="125" align="right" vspace="20" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi rutrum mollis ante at tempor. Aliquam ornare dapibus enim a tristique.
Praesent congue venenatis feugiat. Suspendisse est leo, aliquet ut vestibulum non, placerat faucibus nisi. In venenatis venenatis tortor,
mattis ultricies elit pulvinar id. Proin eget est felis. Donec convallis turpis ut dui eleifend aliquam. Aliquam erat metus, imperdiet ac dapibus at,
viverra sit amet tellus. Etiam eleifend felis augue. Praesent sit amet massa non erat interdum venenatis ut at ipsum.</p>
<p> Proin sollicitudin rutrum massa in dictum. Curabitur ac sapien vulputate dui molestie scelerisque. Ut ut nunc massa.
Integer eget nulla ut magna imperdiet viverra vitae ut libero. Suspendisse eu leo malesuada felis pharetra rhoncus.
Donec non urna nibh. Vestibulum feugiat iaculis feugiat. Pellentesque viverra condimentum tortor eu imperdiet.
Donec accumsan, mauris sed elementum pharetra, mi lorem convallis erat, ut congue metus justo at mauris.
Sed sit amet lorem sit amet velit luctus dignissim. Fusce non neque nulla, eu luctus turpis.
Praesent eu libero felis, a tempus dui. Integer sapien est, tempor eu mattis vitae, tristique eu velit.
Duis ante nisl, rutrum a aliquam at, hendrerit ut magna.</p>
<p><img src="imazhe/romeolab.jpg" alt="RomeoLab" title="Informatika Shqiptare" height="125" width="125" align="left" hspace="20" border="5" /> Sed cursus, augue eget adipiscing vehicula, purus enim vestibulum sem, vel laoreet ligula arcu convallis urna.
Nunc quam quam, tincidunt eu pretium nec, blandit non ante. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Maecenas molestie arcu molestie tellus convallis interdum. Integer ante est, placerat in pretium a, tempus ut urna.
Maecenas accumsan posuere enim ut tempus. Cras non tortor id nisi pulvinar venenatis. Nulla suscipit nisi massa, ac tempor purus.
Maecenas consequat sem ut mauris molestie condimentum. Donec quis nisl enim. Sed non cursus purus. </p>
</body>
</html>
Nëse doni ta shikoni në shfletues se si shfaqen imazhet atëherë Klikoni Këtu.</p>
- Përdorimi i atributit Clear</p>
Ne kemi mësuar se kur vendosim tagun <br /> fjala ose fjalia në vazhdim na shfaqen në një rrjesht të ri. Nëse e bëjmë këtë gjë kur kemi të vendosur një fotografi, atëher do të ndodh e njëjta gjë. Po sikur ne duam që rrjeshti i ri të nisi poshtë fotografisë edhe jo anash saj? Atëher duhet të përdorim tagun <br /> me një atribut që quhet clear. Ky lloj atributi mund të jetë:</p>
left – pastron objektet që floating (lundrojnë nga e majta
right – pastron objektet nga e djathta
both – pastron nga të dyja anët
Më poshtë do të përdorim një kod HTML edhe nga shfaqja në shfletues do e veni re se ku qëndron vërtet ndryshimi i përdorimit të një tagu <br /> pa atributin clear edhe njërit me përdorimin e atributit clear.</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>
Imazhet
</title>
</head>
<body>
<h1> Pa atributin Clear</h1>
<p><img src="imazhe/romeolab.jpg" alt="RomeoLab" title="Informatika Shqiptare" height="125" width="125" align="right" /> Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Morbi rutrum mollis ante at tempor. Aliquam ornare dapibus enim a tristique.
Praesent congue venenatis feugiat. Suspendisse est leo, aliquet ut vestibulum non,<br /> placerat faucibus nisi. In venenatis venenatis tortor,
mattis ultricies elit pulvinar id. Proin eget est felis. Donec convallis turpis ut dui eleifend aliquam. Aliquam erat metus, imperdiet ac dapibus at,
viverra sit amet tellus. Etiam eleifend felis augue. Praesent sit amet massa non erat interdum venenatis ut at ipsum.
Proin sollicitudin rutrum massa in dictum. Curabitur ac sapien vulputate dui molestie scelerisque. Ut ut nunc massa.
Integer eget nulla ut magna imperdiet viverra vitae ut libero. Suspendisse eu leo malesuada felis pharetra rhoncus.
Donec non urna nibh. Vestibulum feugiat iaculis feugiat. Pellentesque viverra condimentum tortor eu imperdiet.
Donec accumsan, mauris sed elementum pharetra, mi lorem convallis erat, ut congue metus justo at mauris.
Sed sit amet lorem sit amet velit luctus dignissim. Fusce non neque nulla, eu luctus turpis.
Praesent eu libero felis, a tempus dui. Integer sapien est, tempor eu mattis vitae, tristique eu velit.
Duis ante nisl, rutrum a aliquam at, hendrerit ut magna.</p>
<h1> Me atributin Clear </h1>
<p><img src="imazhe/romeolab.jpg" alt="RomeoLab" title="Informatika Shqiptare" height="125" width="125" align="right" /> Lorem ipsum dolor sit
amet, consectetur adipiscing elit. Morbi rutrum mollis ante at tempor. Aliquam ornare dapibus enim a tristique.
Praesent congue venenatis feugiat. Suspendisse est leo, aliquet ut vestibulum non,<br clear="right" /> placerat faucibus nisi. In venenatis venenatis tortor,
mattis ultricies elit pulvinar id. Proin eget est felis. Donec convallis turpis ut dui eleifend aliquam. Aliquam erat metus, imperdiet ac dapibus at,
viverra sit amet tellus. Etiam eleifend felis augue. Praesent sit amet massa non erat interdum venenatis ut at ipsum.
Proin sollicitudin rutrum massa in dictum. Curabitur ac sapien vulputate dui molestie scelerisque. Ut ut nunc massa.
Integer eget nulla ut magna imperdiet viverra vitae ut libero. Suspendisse eu leo malesuada felis pharetra rhoncus.
Donec non urna nibh. Vestibulum feugiat iaculis feugiat. Pellentesque viverra condimentum tortor eu imperdiet.
Donec accumsan, mauris sed elementum pharetra, mi lorem convallis erat, ut congue metus justo at mauris.
Sed sit amet lorem sit amet velit luctus dignissim. Fusce non neque nulla, eu luctus turpis.
Praesent eu libero felis, a tempus dui. Integer sapien est, tempor eu mattis vitae, tristique eu velit.
Duis ante nisl, rutrum a aliquam at, hendrerit ut magna.</p>
</body>
</html>
Nëse doni të shikoni konkretisht dallimet midis rastit të parë edhe rastit të dytë kur është përdorur clear Klikoni Këtu.</p>
Ju uroj mësim të këndëshëm edhe të keni parasysh ti fiksoni gjërat e mësipërme mirë që mos të keni në të ardhmen probleme me shfaqjen e figurave në tekstet tuaja.</p>
Doni të testoni njohuritë e marra në këtë mësim? Atëher provoni të bëni Quizin tonë:</p>
<p style="text-align: center;">
HTML Mësimi 5 – Imazhet edhe vendosja e tyre është një postim nga: Feniksi.Com - Thesari i Njohurive</p>
Per me shume artikuj te ngjashem vizitoni: http://www.feniksi.com/?p=603