Transcript HTML

HTML
Nje veshtrim i pergjithshem mbi
HTML
HTML

HyperText Markup Language (HTML) eshte
bashkesi kodesh te perdorur per te ndertuar
faqet Web.

Gjuhe programimi

Mundeson ndertimin, ndryshimin dhe
mirembajtjen e faqeve ne World Wide Web

WWW ose Web eshte nje bashkesi web serverash
ku jane publikuar sasi te medha dokumentash.
Cfare nuk eshte HTML?

E para, nuk eshte e veshtire ne te kuptuar
dhe perdorur.

E dyta, HTML nuk eshte nje gjuhe e
vertete programimi (me shume
formatimi). Nuk eshte nje gjuhe per te
shkruar programe Web.
Cfare nuk eshte HTML?



Termat dokument dhe faqe nuk tregojne te
njejten gje.
HTML perdoret per te krijuar dokumente
elektronike qe mund te lexohen ne sisteme te
ndryshme duke perdorur software te quajtur
browser. Browser-i perkthen kodet HTML ne
nje paraqitje ne ekran.
Teknikisht dokumenti eshte kodet te HTML
ndersa faqja eshte ajo cfare duket mbasi
perkthehet nga browseri.
Cfare eshte HTML?



H qendron per “hyper”.
Nje “hyper document” eshte nje dokument qe
permban linqe (lidhje) me pjese te tjera qe mund
te jete nje dokument tjeter ose brenda te njejtit
dokument.
Nje link kur aktivizohet nga klikimi i tij mundeson
hapjen e nje dokumenti tjeter, levizjen ne te
njejtin dokument, paraqitjen e nje imazhi etj.
Cfare HTML eshte?
T qendron per Text.
 Tregon se cfare paraqitet ne ekranin e
kompjuterit.
 Lejon portabilitet permes platformave
domethene lejon te gjithe llojet e
kompjuterave kudo ne bote te paraqesin
dokumentat qe permbajne kode HTML.
 Termi platforme i referohet kombinimit te
tipit te kompjuterit, sistemit te tij te
operimit, browserit etj.

Cfare HTML eshte?
ML qendron per “markup language”.
 HTML perdor shkronja te vendosura
ndermjet < dhe >.
 Nje koncept baze qe qendron per HTML
eshte qe ne jemi te pergjegjshem per
permbajtjen, por browseri menaxhon
paraqitjen.
 Pra ne kemi kontroll te kufizuar persa i
perket formatit, keshtu qe duhet te
kufizohemi ne permbajtje.

Browserat



Nje browser eshte nje program kompjuteri qe perdorim
per te eksploruar World Wide Web.
Programi i browserit perkthen dokumentat qe permbajne
gjuhen HTML ne fjale dhe imazhe ne ekran.
Shumica e browserave
1.
2.
3.
4.
5.
6.
7.
I pergjigjet butonave te navigimit si Forward, Back, Refresh, Home
etj
Paraqesin faqen.
Sigurojne nje rresht per te futur adresa Web.
Paraqesin imazhe.
Paraqesin dokumenta HTML te perkthyer si faqe
Paraqesin kodet HTML ne nje dokument
Paraqesin video me ndihmen e plug-in-ve, qe jane module programi
te pavarura qe mund t’i shtohen browser-it.
Browserat
Firefox, Internet Explorer, Chrome jane
jane tre shembuj programe browserash.
 Browserat grafik paraqesin Multimedia.
 Browseri i pare grafik Mosaic.

Cfare eshte nje URL?





URL qendron per Uniform Resource Locator.
Thjesht pershkuan vendndodhjen ose adresen e
internetit te burimit (resource) specifik qe ne
duam te perdorim per dokumentin tone.
URL eshte nje identifikues unik per nje faqe.
URL permban emrin e domainit te serverit ku
ndodhet faqja dhe emrin e skedarit.
Nje URL mund te shenoje ne nje faqe Web tjeter,
ne nje vend tjeter brenda faqes korente ose ne
nje komponent te faqes si nje imazh.
Cfare eshte nje URL?
Per te marre nje faqe browseri komunikon
me serverin nepermjet nje protokolli te
quajtur HTTP (HyperText Transfer
Protocol).
 Browseri i ben nje kerkese Web serverit
per nje faqe te caktuar dhe Web serveri
dergon permbajtjen e faqes emrin e se
ciles i dergoi browseri.
 Se fundmi, browseri interpreton kodin
HTML te derguar nga Web serveri dhe
afishon rezultatin.

Cfare eshte nje URL?
Te shohim si eshte ndertuar nje URL:
 Formati standart per URL e nje faqe konsiston
ne:
- Protokollin qe perdoret
- Emrin e domainit te serverit
- Pathin e skedarit/faqes brenda serverit
- Emrin e skedarit/faqes
Pra protokoll://domain name/path/filename
Psh: http://www.google.com/imghp


Cdo faqe Web duhet te kete nje URL unike.
Cfare eshte nje URL?
Nje shembull
 http://www.intersystems.com/education/i
ndex.html
 Protokolli=http
 Emri i domain-it=www.intersystems.com
 Path-i=education
 Emri i skedarit/faqes=index.html

URL




Protokolli
Protokolli i nje URL-je percakton formatin e
informacionit qe aksesohet nga interneti.
Protokolli i tregon browserit sesi eshte organizuar
informacioni qe merret.
Protokolle te njohur jane:
-
file
ftp
mailto
telnet
http
https
URL






-
Domain-i
Emri i domain-it eshte pjesa e dyte e URL.
Specifikon vendndodhjen fizike te skedarit ose burimin e
informacionit.
Internet Protocol (IP) adresa identifikojne kompjutera
specifike ne Internet.
Nqs perdorim emrin e nje domain-i ne vend te nje adrese
IP, nje program i vecante i quajtur Domain Name
Server(DNS) perpiqet te perktheje emrin e domain-it ne
nje adrese IP.
Emrat e domain-ve mbarojne me shtesa (extension) si psh
.com
.edu
.org etj.
URL

Path-i dhe emri i skedarit

Nqs burimi me te cilin lidhemi eshte nje
skedar (file), atehere URL mbaron me nje
emer skedari.
HTTP





HTTP eshte protokolli qe perdoret per transmetimin e
faqeve Web, si edhe informacioneve qe kane te bejne me
imazhe, tinguj, video etj.
Versioni me i fundit eshte 1.1 dhe ai percaktohet ne
referencen RFC 20068.
Porta e HTTP eshte 80.
Web serverat degjojne ne porten 80 per nje lidhje TCP
(Transmission Control Protocol). Kur browseri do te dergoje
nje kerkese HTTP, ai inicion krijimin e nje lidhje TCP ne
porten 80 ne serverin qe referohet ne URL e faqes se
kerkuar. Nese lidhja mund te realizohet browseri dergon
kerkesen HTTP mbi lidhjen TCP te krijuar pak me pare. Pasi
pergjigja HTTP eshte marre saktesisht nga browseri, serveri
inicion mbylljen e lidhjes se krijuar.
Lidhja TCP ne kete menyre operimi quhet jopersistente (e
paqendrueshme).
HTTP




Per cdo kerkese do te krijohet nje lidhje TCP e re. Ne
shume raste nje faqe Web mund te permbaje disa elemente
si imazhe, tinguj, video etj dhe per transferimin e secilit
prej tyre do te krijohen lidhje TCP.
Per te zvogeluar vonesen e shkaktuar ne rastet kur faqja
permban disa elemente disa browsera krijojne disa lidhje
TCP nje per cdo element.
Numri i lidhjeve te njekohshme qe mund krijoje nje
browser shkon deri ne 5 madje edhe deri ne 10.
Ndonese eshte e vertete qe kjo gje mund te zvogeloje
vonesen e shkaktuar nga trasferimi i cdo elementi ka nje
efekt negativ. Administrimi i disa lidhjeve konkurente per
cdo faqe kerkon kohe dhe burime si nga browseri dhe nga
serveri, sidomos te serverat qe mund te kene shume trafik
se mund te marrin qindra kerkesa njekohesisht.
HTTP





Per kete arsye qe nga versioni 1.1 i HTTP, serveri nuk e
mbyll lidhjen pas transmetimit te nje faqeje, por ajo eshte
aktive gjate kohes se nje sesioni.
Ne kete rast lidhja TCP quhet e qendrueshme, ndaj
browseri e serveri mund te dergojne disa kerkesa/pergjigje
duke perdorur te njejtin lidhje TCP. Kjo menyre operimi
redukton vonesen.
Sesioni mund te perfundoje nga ana e serverit me ane te
komandave te ekzekutuara atje.
Sesioni mund te perfundoje nga browseri – perdoruesi
shkon ne nje tjeter Web server ose mbyll browserin dhe
gjithashtu sesioni mund te perfundoje kur nuk ka me
kerkesa per nje kohe te caktuar (session time out).
Zakonisht ne disa web servera kjo kohe eshte 15 minuta.
Terminologji te HTML
Tags
 Jane kode HTML qe jane te mbyllur brenda
< dhe >.
 Psh <BR> vendos nje kthim ne rreshtin
tjeter.
 Tag-et jane ne dy tipe te pergjithshme
- Containers
- Tag-e bosh (nuk rrethojne ndonje tekst)

Terminologji te HTML
Container
 Nje container ka nje tag hapes dhe nje tag
mbylles.
 Brenda tag-ve ndodhet informacioni qe
kontrollohet nga container-i.
 Psh <B>bold</B>
 Cdo tag hapes duhet te shoqerohet nga
nje tag mbylles.

Terminologji te HTML






Atributet
Tag-et bosh ose ato container hapes mund te
permbajne elemente te tjere te HTML te quajtur
atribute, te cilet jane kode te vecante qe
modifikojne tag-et.
Psh tag-u <P>paragraph</P> container
percakton nje paragraf teksti.
Ka nje atribut align qe lejon te vendoset
paragrafi djathtas, majtas apo ne qender.
Tag-et mbylles nuk perfshijne atribute.
Nqs nuk specifikohet nje atribut merret vlera
default e tij.
Terminologji te HTML

World Wide Web Consortium (W3C)
vendos dhe kontrollon protokollet HTML
dhe tag-et.

Ekzistojne shume editore qe mundesojne
ndertimin e faqeve Web.
Faqja e pare Web








Elementi container hapes qe rrethon te gjithe
faqen Web eshte <HTML>.
<HTML>permbajtja e faqes</HTML>
Pershkrimi-Rreshti i pare dhe i fundit i cdo
dokumenti HTML.
Tipi-Container
Atributet-dir, lang, version
Version tregon versionin
Dir vendos drejtimin baze per te shfaqur apo
shtypur tekstin. Mund te jete LTR (Left To Right)
apo RTL (Right To Left).
Lang specifikon gjuhen baze te vlerave te
atributeve te elementeve.
Faqja e pare Web

<HEAD>
<TITLE> titulli i faqes </TITLE>
</HEAD>
<BODY>
Informacioni qe do te shfaqet ne web faqe
</BODY>
</HTML>
Shembull






















<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/REC-html40/strict.dtd">
<HTML dir="RTL" lang="en">
<!-- Author: Your Name -->
<!-- Created: mm/dd/yy -->
<HEAD>
<TITLE>Poetry by Robert Frost</TITLE>
</HEAD dir="RTL" lang="en">
<BODY>
<H1 align="CENTER">What Fifty Said</H1>
<P>When I was young my teachers were the old.
I gave up fire for form till I was cold.
I suffered like a metal being cast.
I went to school to age to learn the past.
</P>
<P>Now I am old my teachers are the young.
What can’t be molded must be cracked and sprung.
I strain at lessons fit to start a suture.
I go to school to youth to learn the future.
</P>
</BODY>
</HTML>
<HEAD>Te dhena te kokes</HEAD>
 Pershkrimi-Siguron informacione
pershkruese rreth nje dokumenti si pjese
e kokes.
 Tipi-Container
 Atributet-dir, lang

<TITLE>Titull pershkrues</TITLE>
 Pershkrimi-Siguron informacione
pershkruese rreth dokumentit ne pjesen e
siperme te ekranit, jo ne trupin e
dokumentit .
 Tipi-Container
 Atributet-dir, lang
 Cdo dokument HTML duhet te kete nje
element <TITLE>.

<BODY>Te dhena te trupit</BODY>
 Pershkrimi-Percakton permbajtjen e nje
faqeje Web.
 Tipi-Container
 Atributet-alink, background, bgcolor,
class, dir, id, link, onClick, onDblClick,
onKeyDown, onKeyPress, onKeyUp,
onLoad, onMouseDown, onMouseMove,
onMouseOut, onMouseOver, onMouseUp,
onUnload, style, text, title, vlink.

Stilet
Nje stil eshte nje bashkesi rregullash
formatimi qe i tregojne browserit sesi
autori pelqen te paraqese permbajtjen e
faqes.
 Stili percakton karakteristikat e vendosjes,
madhesise, ngjyres, fontit etj.
 Cascading Style Sheets (CSS) krijohen
stile nga vete autori dhe aplikohen pastaj
ne faqet Web.

Shembull














<HTML>
<HEAD>
<TITLE>Heading Tag (H1-H6) Demonstration</TITLE>
</HEAD>
<BODY>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6>
<H1 style="color: red; font-style: italic">Heading 1</H1>
</BODY>
</HTML>
<!—comment-->
 Pershkrimi-browserat injorojne cdo text te
vendosur brenda ketij tag-u.
 Tipi-s’ka
 Atributet-s’ka
 Perdor kete tag per te percaktuar autorin
dhe daten e krijimit te dokumentit.





<H1>Heading</H1><H2></H2><H3></H3><H
4></H4><H5></H5><H6></H6>
Pershkrimi-percakton nje nga gjashte nivelet te
titullit.
Tipi-Container
Atributet-align, class, dir, id, lang, onClick,
onDblClick, onKeyDown, onKeyPress, onKeyUp,
onLoad, onMouseDown, onMouseMove,
onMouseOut, onMouseOver, onMouseUp, style,
title.
<P>paragraf</P>
 Pershkrimi-percakton nje paragraf
 Tipi-container
 Atributet-align, class, dir, id, lang, onClick,
onDblClick, onKeyDown, onKeyPress,
onKeyUp, onLoad, onMouseDown,
onMouseMove, onMouseOut,
onMouseOver, onMouseUp, style, title.

Tag-e bosh
<BR>
 Pershkrimi-krijon nje kalim ne rreshtin
tjeter.
 Tipi-s’ka
 Atributet-class, clear, id, style, title

Tag-e bosh





<HR>
Pershkrimi-Krijon nje vije horizontale ne faqe
Tipi-s’ka
Atributet-align, class, id, noshade, onClick,
onDblClick, onKeyDown, onKeyPress, onKeyUp,
onLoad, onMouseDown, onMouseMove,
onMouseOut, onMouseOver, onMouseUp, style,
title, size, width.
Kur atributi noshade mundeson shfaqjen e nje
ngjyre solide.
Shembull




















<HTML>
<HEAD>
<TITLE>Poetry by Robert Frost</TITLE>
</HEAD>
<BODY>
<H1 align="CENTER">What Fifty Said</H1>
<HR align="CENTER" noshade size="4" width="50%">
<P align="CENTER">When I was young my teachers were the old.<BR>
I gave up fire for form till I was cold.<BR>
I suffered like a metal being cast.<BR>
I went to school to age to learn the past.<BR>
</P>
<P align="CENTER">Now I am old my teachers are the young.<BR>
What can’t be molded must be cracked and sprung.<BR>
I strain at lessons fit to start a suture.<BR>
I go to school to youth to learn the future.<BR>
</P>
<HR align="CENTER" size="2" width="50">
</BODY>
</HTML>
Atributet e tag-ut body
Atributi bgcolor kontrollon ngjyren e
sfondit te faqes.
 Psh <BODY bgcolor=“yellow”>
 Ose <BODY bgcolor=“#FFFF00”>
 Atributi background na lejon te vendosim
nje imazh ne sfond te faqes tone.
 Atributi text vendose ngjyren per te gjithe
tekstin ne faqe pervec tekstit qe
perfshihet brenda container <A>.

Shembull





















<HTML>
<HEAD>
<TITLE>Poetry by Robert Frost</TITLE>
</HEAD>
<BODY background="rocks.jpg" text="00FFFF">
<!-- text = cyan -->
<H1 align="CENTER">What Fifty Said</H1>
<HR align="CENTER" size="4" noshade width="75%">
<P align="CENTER">When I was young my teachers were the old.<BR>
I gave up fire for form till I was cold.<BR>
I suffered like a metal being cast.<BR>
I went to school to age to learn the past.<BR>
</P>
<P align="CENTER">Now I am old my teachers are the young.<BR>
What can’t be molded must be cracked and sprung.<BR>
I strain at lessons fit to start a suture.<BR>
I go to school to youth to learn the future.<BR>
</P>
<HR align="CENTER" size="2" width="50">
</BODY>
</HTML>
Alink, link, vlink
Keto tre atribute na lejojne te
kontrollojme ngjyren e linqeve.
 alink – kontrollon ngjyren e linkut aktiv,
ose linkut qe shenohet nga mouse-i.
Perdoret vetem nga Navigator, te tjeret e
injorojne.
 link – kontrollon ngjyren e te gjithe
hiperlinqeve qe perdoruesi nuk ka vizituar.
 vlink – kontrollon ngjyren e te gjithe
linqeve qe perdoruesi ka vizituar tashme.
