Korrikula e Trajnimit
-
Hyrje në HTMLLeksioni1.1
-
Tekstet dhe ListatLeksioni1.2
-
Linqet dhe ImazhetLeksioni1.3
-
Detyra për ushtrime – Pjesa ILeksioni1.4
-
Tabelat dhe FormatLeksioni1.5
-
Tagje dhe funksionalitete tjeraLeksioni1.6
-
Video dhe AudioLeksioni1.7
-
Detyra për ushtrime – Pjesa IILeksioni1.8
-
Kuizi – HTMLLeksioni1.9
-
Hyrje në CSSLeksioni2.1
-
Prapavija dhe veçoritë për teksteLeksioni2.2
-
Hapësirat, kufizimet dhe dimensionetLeksioni2.3
-
Detyra për ushtrime – Pjesa ILeksioni2.4
-
Linqe, Lista, Tabela dhe FormaLeksioni2.5
-
Pseudo class | elementet , float dhe pozicionimiLeksioni2.6
-
Detyra për ushtrime – Pjesa IILeksioni2.7
HTML 9
CSS 7
HTML & CSS Projekti 1
Linqet dhe Imazhet
Linqet
Me anën e tagut <a> definohet linku në HTML. Linqet mundësojnë kalimin nga një faqe në html në një faqe tjetrën.
Shembuj në vijim për përdorimin e linqeve:
<a href=”http://www.probit-ks.com”>Përshkrimi i linkut</a>
<a href=”aplikimi.html” target=”_blank”>Përshkrimi i linkut</a>
a-tagu që definon linkun, href-atributi që tregon destinacionin, target=”_blank” – hapjen e faqes në dritare të re.
Absolute URL – Nëse linku kalon në një web faqe tjetër jashtë domainit të faqes që shënojmë html duhet të përdorim URL e plotë që njihet si Absolute URL, p.sh.<a href=”https://probitacademy.com”> Përshkrimi i linkut</a>.
Relative URL – Kur linku kalon nga një faqe në një faqe tjetër brenda web faqes(domainit) njihet si Relative URL dhe e shënojmë <a href=”aplikimi.html” target=”_blank”> Përshkrimi i linkut</a>.
Mailto – Në rastin kur dëshirojmë që pasi të klikojmë linkun të na hapet forma për dërgimin e emailit si vlerë pas atributit href përdorim mailto si në vijim: <a href=”mailto:info@probitacademy.com “>Probit Info </a>
Kalimi në pjesë specifike të faqes – Me anën e linqeve mund të kalojmë nga një pjesë në tjetrën brenda një faqe. Në pjesën që dëshirojmë të kalojmë shënojmë <h2 id=”lart”> Titulli I faqes</h2> kurse në pjesën që dëshirojmë që të na mundësoj kalimin te tagu h2 shënojmë <a href=”#lart”> Kalimi te titulli i faqes</a>
Lokacioni – Në raste kur dëshirojmë të bëjmë ndarje më mirë të web faqes atëherë HTML dokumentet i ruajmë në folder të ndryshëm dhe na duhet pastaj kalimi nga një folder në tjetrin.
| Lokacioni i njëjtë
Në rastin kur edhe html dokumenti që shënojmë linkun dhe dokumenti që dëshirojmë ta hapim janë në lokacion i njëjtë atëherë kemi kodin si në vijim <a href=”aplikimi.html” >Aplikimi </a> |
| Lokacioni i një hierarki më lartë
Në rastin kur edhe html dokumenti që shënojmë linkun ndodhet në një folder kurse dokumenti që dëshirojmë ta hapim është në një folder më lartë atëherë kemi kodin si në vijim |
| Lokacioni i një hierarki më poshtë
Në rastin kur edhe html dokumenti që shënojmë linkun ndodhet në një folder kurse dokumenti që dëshirojmë ta hapim është në një folder më poshtë atëherë kemi kodin si në vijim |
Imazhet
Përdorën për paraqitjen fotografive brenda HTML dokumentit, mundësohet duke përdorur tagun img. Brenda një sajti shpesh na duhet paraqitja e fotografive, preferohet që ato fotografi që thirren brenda sajtit të ruhen në një folder, në ushtrimet tona kemi përdorur folderin me emrin images.
Në vijim po japim përdorimin e imazheve:
<img src=”images/probitlogo.png” alt=”TICK logo” title=”Llogoja e Probit Academy”>
img-tagu që definon imazhin, src – hapësira ku është e vendosur fotografia, alt – alternativja që shfaqet nëse nuk gjendet imazhi dhe title – kur kalojmë me maus mbi na shfaqet titulli.
Ushtrimi në vijim për linqet dhe imazhet – linqetimazhet.html
Shënim përdor fajllat e ofruar në fillim për të krijuar zgjidhjen si në vijim.
<!DOCTYPE html>
<html>
<head>
<!-- Perdor tagjet per tekstin brenda kllapave-->
<title>Linqet dhe imazhet</title>
</head>
<body>
<h1>Linku Absolute URL</h1>
<!-- Perdor tagun për Absolute URL -->
<a href="https://probitacademy.com">Probit Academy</a>
<h1>Linku Relative URL</h1>
<!-- Perdor tagun për Relative URL -->
<a href="lista.html">Dokumenti Lista</a>
<h1>Linku Relative URL</h1>
<!-- Perdor tagun per Relative URL ne foler te jashtem -->
<a href="../css/informata.html">Info ne CSS</a>
<h1>Foto e llogos se Probit</h1>
<!-- Perdor tagun per images URL -->
<img src="images/probitlogo.png" alt="Probit Academy Logo" title="Llogoja e Probit">
</body>
</html>