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
Hapësirat, kufizimet dhe dimensionet
Në një ueb faqe për të ndarë shënimet që ato të dukën më qartë për përdoruesin shpesh herë na duhet të krijojmë hapësira ose kufizime mes elementeve. Me anën e CSS mundësohen hapësirat mes elementeve me anën e veçorisë margin, hapësirat brenda elementit me padding dhe kufizimet me anën e border.
Hapësira – Margin dhe Padding
Margina – pastron një hapësirë rreth një tagu. Margin është transparente dhe ka 4 veçori, lartë, poshtë, majtë dhe djathtë.
Padding – për dallim nga margina kjo vlen vetëm përbrenda tagu. Në vijim po paraqesim veçoritë për margin dhe padding
- margin-top:100px; – krijon hapësirë për tagun nga lartë për 100 px
- margin-bottom:100px; – krijon hapësirë për tagun nga poshtë për 100 px
- margin-right:50px; – krijon hapësirë për tagun nga djathtë për 100 px
- margin-left:50px; – krijon hapësirë për tagun nga majtë për 100 px
- padding-top:100px; – krijon hapësirë për shënimin brenda tagun nga lartë për 100 px
- padding-bottom:100px; – krijon hapësirë për shënimin brenda tagun nga poshtë për 100 px
- padding-right:50px; – krijon hapësirë për shënimin brenda tagun nga djathtë për 100 px
- padding-left:50px; – krijon hapësirë për shënimin brenda tagun nga majtë për 100 px
Veçorit për margin mund të përdorën dhe si kombinim në një rresht si:
- margin:25px 50px 75px 50px; – lartë margjina është 25px, djathtë është 50,poshtë është 75 dhe majtë është 50px.
- margin:25px 50px 75px; – lartë margjina është 25px, djathtë dhe majtë është 50px, poshtë margjina është 75px.
- margin:25px 50px; – lartë dhe poshtë margjina është 25px, djathtë dhe majtë është 50px
- margin:25px; – gjithkah është 25px
Shënim: Përdorimi i veçorive të lartë përmendura për margin vlen dhe për padding
Kufizimi – Border
Kufizimet(Border) – Kjo veçori na mundëson që të vendosim kufizime në një elementi.
Me anën e border-style vendoset kufizimi si : solid, double, groove, ridge, inset, outset, dashed, dotted, none.
Me anën e border-width caktohet gjerësia e kufizimit, disa nga vlerat e definuar: thin, medium, ose thick.
Me anën e border-color caktohet ngjyra e kufizimit.
Kufizimi mund të vendose dhe si kombinim border:1px solid black – e para gjërsia, pastaj stili dhe në fund ngjyra.
Kufizimi mund të bëhet vetëm në pjesë specifike si: lartë, poshtë, majtas, djathtas. border-top – lartë.Veçori tjetër për kufizime është dhe border-radius – e cila mundëson krijimin e këndeve me thyerje. Gjithashtu mund te vendosim dhe imazhe në pjesën e kufijve me anën e border-image.
Ushtrimi i për hapësira dhe kufizime në CSS – hapsiradhekufizimi.html
<html>
<head>
<style>
p {
margin:20px 10px;
border-style:solid;
border-bottom:thick dotted #ff0000;
}
</style>
</head>
<body>
<p>This is some text in a paragraph.</p>
<p style="margin-right: 55px; border:1px solid black;">
This is a paragraph with a specified right margin
</p>
<p style="padding-bottom: 55px; padding-left: 55px;margin-left: 55px; border:1px solid black; border-radius:7px">
This is a paragraph with a specified bottom padding
</p>
</body>
</html>
Dimensionet dhe Paraqitja
Dimension – veçoria mundëson kontrollimin e gjerësisë dhe gjatësisë së elementit. P.sh. height, min-height, max- height, width, min-width, max-width.
Veçoria overflow na mundëson që në raste kur teksti është më i madhe se hapësira ku do vendoset të e heqë atë tekst me vlerën hiden ose ta mundësoj leximin me vlerën scroll.
Paraqitja(CSS Display dhe Visibility) -Veçoria display specifikon mënyrën e paraqitjes për një element. Kemi mundësin none, inline dhe block. Shënime: Me anë të ushtrimit sqarohet funksioni i secilës nga to.
Ushtrimi për dimensionet dhe paraqitje në CSS – paraqitjadimensionet.html
<html>
<head>
<style>
#header{
width:800px;
min-height:200px;
height:auto;
border:1px solid black;
}
p{
display:inline;
}
span{display:block;}
h1{display:none;}
</style>
</head>
<body>
<div id="header">
TICK Education Center
</div>
<p>A display property with a value of "inline" results in</p>
<p>no distance between two elements.</p>
<span>A display property with a value of "block" results in</span>
<span>a line break between the two elements.</span>
<h1>A none property with a value of "none" results </h1>
</body>
</html>