Korrikula e Trajnimit

Totali i mësimeve: 17 mësime Koha: 15 orë

Linqe, Lista, Tabela dhe Forma

Linqe

Në HTML linqet përdorën për të kaluar nga një dritare në tjetrën në kuadër të një web aplikacioni.
Teksti që paraqitet te linku mund të rregullohen përmes veçorive të përmendura si: color, font-family, background, etj.
Gjithashtu ata mund të përshtaten sipas gjendjes që linku ka a:link, a:hover, a-active, a:visited.

a:link {color:#FF0000;} /* Link i pa vizituar */
a:visited {color:#00FF00;} /* Link i vizituar */
a:hover {color:#FF00FF;} /* Kur vendoset mausi mbi link */
a:active {color:#0000FF;} /* Linku i zgjedhur */

Renditja e përdorimit – a:hover duhet të vije pas a:link dhe a:visited, a:active duhet të vije pas a:hover.

Ushtrimi për linqet në CSS – linqet.html

<html>
    <head>
    <style>
    a:link{ 
        color:#000000; 
        border:1px solid #98bf21;
        width:150px; 
        text-align:center;
        padding:10px; 
        text-decoration:none;
    }
    a:hover{background-color:#7A991A;color:#fff}
    </style>
    </head>
    <body>
        <a href="http://www.tick-ks.com" target="_blank">TICK</a>
        <a href="http://www.probit-ks.com" target="_blank">PROBIT</a>
    </body>
</html>

Lista

Në HTML kemi mësuar për listat të cilat i kemi ndarë në tre lloje të renditura, jo të renditura dhe të definuar. Për këto lloje mund përdorim css për të ndryshuar paraqitjen e tyre si në tekste që paraqitet si në pozicionime, etj. Në vijim disa nga llojet e veçorive të përdorura për lista.

List-style-type – veçori që lejon kontrollimin e vijës ose paraqitjes së shenjës.
sh. ul {list-style-type: circle;} ul.b {list-style-type: square;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;}
List-style-image – veçori që përcaktojnë imazhe si shenjë në vend të pikës ose numrit të listës. P.sh. ul{list-style-image: url(‘sqpurple.gif’);}
List-style-position veçori që shërben për caktimin e pozitës së imazhit ose shenjës
sh. list-style-position:inside; list-style-position:outside;
List-style-type:none shërben për heqjen e shenjës listës

Ushtrimi për listat në CSS – lista.html

<html>
<head>
    <style>
        ul li{
            margin-left:5px;
            margin-bottom:5px;              
        }
        ol{
            list-style-type:none;
        }
        ol li{
            display:inline;
            border:1px solid black;
            padding:10px 20px;
        }
    </style>
</head>
<body>
    <h1>Ushtrimi me lista </h1>
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ul>
        
    <h1>Ushtrimi me lista e renditur </h1>
    <ol>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Coca Cola</li>
    </ol>
</body>
</html>

Tabela

Në HTML kemi mësuar për HTML tabelën, për tabelën mund përdorim css për të ndryshuar paraqitjen e saj.

Mund të përdorim veçoritë e mësuar për stilizimin e tabelës
Empty-cells – tregon nëse duhet të shfaqet muret nëse kolona është e zbrazët.
empty-cels: show|hide;
Border-spacing – definon gjerësinë në mesë të kolonave të tabelës.
sh. border-spacing: 2px 4px
Border-collapse – definon paraqitjen e teheve te tabelës. Vlera seperate mundëson ndarjen e teheve te kolonave, colapse hek duplikimn e teheve dhe eleminon ndarjen.

Shënim: Gjithashtu në tabel mund të përdoren veçoritë e përmendura në pjesën e pjesëve bazike si në vijim.

Ushtrimi për tabelat në CSS – tabela.html

<html>
<head>
    <style>
        #customers 
        {
            font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
            width:70%;
            border-spacing:10px;
            empty-cells: hide; 
            border-spacing: 2px 4px;
            border-collapse: separate;
        }
        #customers td, #customers th 
        {
            font-size:1em;
            border:1px solid #98bf21; 
            padding:3px 7px 2px 7px;
        }
        #customers th 
        {
            font-size:1.1em;
            text-align:left;
            padding-top:5px;
            padding-bottom:4px;
            background-color:#A7C942;
            color:#ffffff;
        }
        #customers tr.alt td 
        {color:#000000;background-color:#EAF2D3;}

    </style>
</head>
<body>
    <h1>Ushtrimi me tabela </h1>
    
    <table id="customers">
        <tr><th>Kompania</th><th>Emri dhe Mbiemri</th><th>Ora e  hyrjes</th></tr>
        <tr>
            <td>PROBIT</td><td>Berat Perçuku</td><td>10:20</td>
        </tr>
        <tr class="alt">
            <td>Trainkos sh.a</td><td>Burim Avdiu</td><td>12:00</td>
        </tr>
        <tr>
            <td>Probit</td><td>Labinot Hasani</td><td>11:00</td>
        </tr>
        <tr class="alt">
            <td>Infrakos</td><td>Mirhan Thaçi</td> <td></td>
        </tr>
    </table>
</body>
</html>

Format

Të gjitha tagjet dhe atributet që përdoren në kuadër të formës mund të ju shtohet stil. Në vijim po japim detajet e disa stileve për forma.

Tagu

Përshkrimi

Input type

input{} – still për të gjitha inputet.
input[type= “email “]{}- still për inputet që kan type email.input[type= “url “]{} – still për inputet që kan type url.

input[type= “text “]{} – still për inputet që kan type text.

input[type= “submit”]{} – still për inputet që kan type submit.

Fieldset

Label

Legend

Select

Still për të gjitha tagjet.

Ushtrimi për format në CSS – format.html

<!doctype html>
<html>
<head>
    <title>jQuery Projekti</title>
    <script type="text/javascript" src="jquery-1.12.1.js"></script>
</head>
    <style>
        input[type="text"],input[type="email"],select,input[type="date"],textarea,input[type="submit"]{
            height:35px;
            width: 100%;
            border-radius:10px;
            padding-left:5px;
            border:1px solid gray;
        }
        label{
            height:35px;
            width: 100%;
            text-align:left;
            margin:0;padding:0;
            margin-top:10px;
        }
        fieldset{
            margin-top:15px;
            margin-left:10px;
            color: #070707;
        }
        input[type="radio"],input[type="checkbox"]{
            height:20px;
            width: 20px;
        }
        input[type="submit"]{
            width:50%;
            margin-top:20px;
        }
        legend{
            width:50%;
            font-size:1.2em;
            text-align:left;
            font-weight:bold;
            margin-bottom:10px;
        }

    </style>

<body>
    <form action="" method="" style="width: 700px">
        <legend>Forma per regjistrimin e studentit</legend> 
        <fieldset>
            <legend>Detajet e studentit</legend>
            <label>Emri:</label>
            <input type="text" name="emri" id="emri" maxlength="30">
            <label>Mbiemri: </label>
            <input type="text" name="mbiemri" id="mbiemri">
            <label>Gjinia:</label><br />
            <input type="radio" name="gjinia" value="mashkull">Mashkull<br />
            <input type="radio" name="gjinia" value="femer">Femer<br />
            <label>Email:</label>
            <input type="email" name="email" id="email"><br />
        </fieldset>
        <fieldset>
            <legend>Detajet e te trajnimit</legend>
            <label>Trajnimi:</label>
            <select name="trajnimi" id="trajnimi">
                <option value="">Zgjedh Trajnimin</option>
                <option value="1">Java Fundamentals</option>
                <option value="2">C# Fundamentals</option>
                <option value="3">Web Development I & II</option>
                <option value="4">CCNA</option>
            </select><br />
            <label>Orari:</label> <br />
<input type="checkbox" name="orari" value="paradite"> Paradite <br />
<input type="checkbox" name="orari" value="pasdite">Pasdite <br />
            <label>Data e aplikimit:</label> <br />
            <input type="date" name="dataaplikimi" ><br />
            <label>Komente:</label> <br />
            <textarea name="komente"></textarea><br />
        </fieldset> 
        
        <input type="submit" value="Apliko">
    </form>

</body>
</html>

Nga ushtrimet po shohim se përpos stilit që mund të bëhet për tagje mund të bëhet stil dhe për atribute të tagjeve. Në forma kemi bërë stile për atributin type.

Prev Detyra për ushtrime – Pjesa I

Next Pseudo class | elementet , float dhe pozicionimi

HTML & CSS

Korrikula e Trajnimit

HTML 9

CSS 7

HTML & CSS Projekti 1

Linqe, Lista, Tabela dhe Forma

Linqe

Lista

Tabela

Format

Leave A Reply Anuloje përgjigjen

Kyçu në sistem

Regjistrohu si student/trajner