Ushtrim 1: Ndertoni nje faqe te thjeshte ne te cilen vendosni dy textboxe n e te cilat ti krijoni perdoruesit emrin dhe mbiemrin.Emertojeni ...
Ushtrim 1:
Ndertoni nje faqe te thjeshte ne te cilen vendosni dy textboxe ne te cilat ti krijoni perdoruesit emrin dhe mbiemrin.Emertojeni faqen revista.html.
Ne faqen revsista.html te cilen krijuat ne ushtrimin e pare shtoni disa fusha te tjera te cilat duhet ti plotesoj perdoruesi si adresa qyteti shteti kodi zip.
Duke supozuar qe kjo faqe do sherbej per abonimin ne nje reviste, shtoni nje drop down list me 5 emra revistash te njohura si dhe dy radio buttona me ane te te cilave ne zgjdhim abonim nje vjacar apo 2 vjecar. Shtoni nje textbox ne te cilin abonuesi te lere komentet e tije.
Rezultati:
Ekzistojne 3 menyra shtimi te CSS ne nje dokument HTML.
1.Komunikimi me 2 skedare te vecante i cili njihet ndryshe edhe si ExternalCSS. Kjo eshte dhe forma me e zakonshme e lidhjes se CSS me HTML. Ajo perdor krahas dokumentit HTML
(.htm ose .html) dhe nje tjeter skedare (.css) ne te cilin shkruhen rregullat e CSS. Komunikimi midis ketyre 2 skedareve eshte nje rresht i vetem ne sesionin <head> te dokumentit HTML.
Ajo ka pamjen si me poshte:
2. Rregullat e CSS mund te vendosen edhe ne permbajte te dokumentit HTML. Kjo forme shtimi e CSS njihet si EmbeddedCSS. Per kete menyre shtojme kodin me poshte ne sesionin <head>
te dokumentit HTML:
3.Rregullat CSS shtohen dhe direkt ne elementin HTML. Per te bere kete gje duhet qe elementit perkatesi ti shtojme parametrin style dhe rregulalt css i si japim vlera per te.
Kjo menyre njihet si InlineCSS. Shembull per kete eshte implementimi ne dokument HTML si me poshte:
Ushtrim 2:
Shkruani CV tuaj duke perdorur elementet header list paragraph si dhe elemente te tjere.Aplikoni ne dokument Inline CSS dhe Embedded CSS.
Rezultati:
Ndertoni nje faqe te thjeshte ne te cilen vendosni dy textboxe ne te cilat ti krijoni perdoruesit emrin dhe mbiemrin.Emertojeni faqen revista.html.
Ne faqen revsista.html te cilen krijuat ne ushtrimin e pare shtoni disa fusha te tjera te cilat duhet ti plotesoj perdoruesi si adresa qyteti shteti kodi zip.
Duke supozuar qe kjo faqe do sherbej per abonimin ne nje reviste, shtoni nje drop down list me 5 emra revistash te njohura si dhe dy radio buttona me ane te te cilave ne zgjdhim abonim nje vjacar apo 2 vjecar. Shtoni nje textbox ne te cilin abonuesi te lere komentet e tije.
<!DOCTYPE html>
<html>
<head>
<title>Revista</title>
</head>
<body>
<form method="GET">
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" id="name" name="name"/>
</td>
</tr>
<tr>
<td>Address:</td>
<td>
<input type="text" id="address" name="address"/>
</td>
</tr>
<tr>
<td>City:</td>
<td>
<input type="text" id="city" name="city"/>
</td>
</tr>
<tr>
<td>State:</td>
<td>
<input type="text" id="state" name="state" size="10"/>
</td>
</tr>
<tr>
<td>Zip:</td>
<td>
<input type="text" id="zip" name="zip" size="10"/>
</td>
</tr>
<tr>
<td>Magazine:</td>
<td>
<select name="magazine" id="magazine" size="1">
<option name="name1">Magazine Name 1 </option>
<option name="name2">Magazine Name 2 </option>
<option name="name3">Magazine Name 3 </option>
<option name="name4">Magazine Name 4 </option>
<option name="name5">Magazine Name 5 </option>
</select>
</td>
</tr>
<tr>
<td>Subscription:</td>
<td>
<input type="radio" name="oneyear" checked />1 year
<input type="radio" name="2years"/>2 years
</td>
</tr>
<tr>
<td colspan="2">Additional Comments: <br/>
<textarea cols="40" rows="4" name="you comments"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="submit" id="submit" value="Send your order">
</td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Revista</title>
</head>
<body>
<form method="GET">
<table>
<tr>
<td>Name:</td>
<td>
<input type="text" id="name" name="name"/>
</td>
</tr>
<tr>
<td>Address:</td>
<td>
<input type="text" id="address" name="address"/>
</td>
</tr>
<tr>
<td>City:</td>
<td>
<input type="text" id="city" name="city"/>
</td>
</tr>
<tr>
<td>State:</td>
<td>
<input type="text" id="state" name="state" size="10"/>
</td>
</tr>
<tr>
<td>Zip:</td>
<td>
<input type="text" id="zip" name="zip" size="10"/>
</td>
</tr>
<tr>
<td>Magazine:</td>
<td>
<select name="magazine" id="magazine" size="1">
<option name="name1">Magazine Name 1 </option>
<option name="name2">Magazine Name 2 </option>
<option name="name3">Magazine Name 3 </option>
<option name="name4">Magazine Name 4 </option>
<option name="name5">Magazine Name 5 </option>
</select>
</td>
</tr>
<tr>
<td>Subscription:</td>
<td>
<input type="radio" name="oneyear" checked />1 year
<input type="radio" name="2years"/>2 years
</td>
</tr>
<tr>
<td colspan="2">Additional Comments: <br/>
<textarea cols="40" rows="4" name="you comments"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="submit" id="submit" value="Send your order">
</td>
</tr>
</table>
</form>
</body>
</html>
Rezultati:
Ekzistojne 3 menyra shtimi te CSS ne nje dokument HTML.1.Komunikimi me 2 skedare te vecante i cili njihet ndryshe edhe si ExternalCSS. Kjo eshte dhe forma me e zakonshme e lidhjes se CSS me HTML. Ajo perdor krahas dokumentit HTML
(.htm ose .html) dhe nje tjeter skedare (.css) ne te cilin shkruhen rregullat e CSS. Komunikimi midis ketyre 2 skedareve eshte nje rresht i vetem ne sesionin <head> te dokumentit HTML.
Ajo ka pamjen si me poshte:
<link rel="stylesheet" type="text/css" href="cssName.css" />2. Rregullat e CSS mund te vendosen edhe ne permbajte te dokumentit HTML. Kjo forme shtimi e CSS njihet si EmbeddedCSS. Per kete menyre shtojme kodin me poshte ne sesionin <head>
te dokumentit HTML:
<style type="text/css">
Rregullat CSS
</style>3.Rregullat CSS shtohen dhe direkt ne elementin HTML. Per te bere kete gje duhet qe elementit perkatesi ti shtojme parametrin style dhe rregulalt css i si japim vlera per te.
Kjo menyre njihet si InlineCSS. Shembull per kete eshte implementimi ne dokument HTML si me poshte:
<h2 style="color:red;background:black;"> Red heading with black background. </h2>Ushtrim 2:
Shkruani CV tuaj duke perdorur elementet header list paragraph si dhe elemente te tjere.Aplikoni ne dokument Inline CSS dhe Embedded CSS.
<!DOCTYPE html >
<html >
<head>
<title>CV</title>
<style type="text/css" >
.hdr{
padding-left: 250px;
padding-bottom: 10px;
color: #396B9E;
font-size: 24px;
font-family: sans-serif;
font-weight: bold;
font-style: italic;
border-bottom: 1px dashed #396B9E;
}
h1, h2 {
color:#111;
font-family: 'Trebuchet MS', verdana, geneva, Arial, Helvetica, sans-serif;
font-weight:normal
}
h1 {font-size: 2.5em;}
h2 {
font-size: 1.7em;
margin-top: 20px;
text-transform: uppercase;
letter-spacing:.1em;
border-top: 1px dashed #e6e6e6;
padding-top: 5px;
}
a {text-decoration:none;color:#0021a5;}
a:hover {text-decoration: underline;}
p { margin: 10px 0 }
ul {margin: 5px 0 0 10px;}
li, p {font-size: 1.1em;}
li {
list-style:none;
background: url(http://www.skov.com/_Layouts/Skov/images/bullet_icon.png) 2px 7px no-repeat;
padding: 2px 0 2px 17px;
}
#img {
padding: 3px;
border: 1px solid #333;
float: right;
}
</style>
</head>
<body style=" font-family: verdana, geneva, Arial, Helvetica, sans-serif;font-size: 11px;color: #222;margin: 30px;width: 700px;
line-height: 1.8em;">
<h1 class="hdr">Curriculum Vitae</h1>
<img src="images/you.jpg" id="img" height="195" width="170" border="0" alt="Your Photo" />
<div >
<h1 >Emri Juaj</h1>
<h3 >Ditelindja dd.mm.yyyy</h3>
<p>Vendlindja XXXX <br />
</p>
<p><span ><span >Celular</span>: <span >(355) xx xxx xxxx</span><br />
<span ><span>E-mail</span>: <a href="mailto:#">xxx@.fshn.edu.al</a></span>
<br/><span>Kontakt permes <a href="#">Facebook</a> ose <a href="#">LinkedIn</a></span></p>
</div>
<br />
<h2>Njohurite Kompjuterike</h2>
<ul>
<li>C++
<ul>
<li>Mire</li>
</ul>
</li>
<li>Java
<ul>
<li>Shume mire</li>
</ul>
</li>
<li>Programim Web
<ul>
<li>Shume mire</li>
</ul>
</li>
</ul>
<h2>Gjuhet e Huaja</h2>
<ul>
<li>Anglisht
<ul>
<li>Shume mire</li>
</ul>
</li>
<li>Italisht
<ul>
<li>Shume mire</li>
</ul>
</li>
<li>Frengjisht
<ul>
<li>Shume mire</li>
</ul>
</li>
</ul>
</body>
</html>
<html >
<head>
<title>CV</title>
<style type="text/css" >
.hdr{
padding-left: 250px;
padding-bottom: 10px;
color: #396B9E;
font-size: 24px;
font-family: sans-serif;
font-weight: bold;
font-style: italic;
border-bottom: 1px dashed #396B9E;
}
h1, h2 {
color:#111;
font-family: 'Trebuchet MS', verdana, geneva, Arial, Helvetica, sans-serif;
font-weight:normal
}
h1 {font-size: 2.5em;}
h2 {
font-size: 1.7em;
margin-top: 20px;
text-transform: uppercase;
letter-spacing:.1em;
border-top: 1px dashed #e6e6e6;
padding-top: 5px;
}
a {text-decoration:none;color:#0021a5;}
a:hover {text-decoration: underline;}
p { margin: 10px 0 }
ul {margin: 5px 0 0 10px;}
li, p {font-size: 1.1em;}
li {
list-style:none;
background: url(http://www.skov.com/_Layouts/Skov/images/bullet_icon.png) 2px 7px no-repeat;
padding: 2px 0 2px 17px;
}
#img {
padding: 3px;
border: 1px solid #333;
float: right;
}
</style>
</head>
<body style=" font-family: verdana, geneva, Arial, Helvetica, sans-serif;font-size: 11px;color: #222;margin: 30px;width: 700px;
line-height: 1.8em;">
<h1 class="hdr">Curriculum Vitae</h1>
<img src="images/you.jpg" id="img" height="195" width="170" border="0" alt="Your Photo" />
<div >
<h1 >Emri Juaj</h1>
<h3 >Ditelindja dd.mm.yyyy</h3>
<p>Vendlindja XXXX <br />
</p>
<p><span ><span >Celular</span>: <span >(355) xx xxx xxxx</span><br />
<span ><span>E-mail</span>: <a href="mailto:#">xxx@.fshn.edu.al</a></span>
<br/><span>Kontakt permes <a href="#">Facebook</a> ose <a href="#">LinkedIn</a></span></p>
</div>
<br />
<h2>Njohurite Kompjuterike</h2>
<ul>
<li>C++
<ul>
<li>Mire</li>
</ul>
</li>
<li>Java
<ul>
<li>Shume mire</li>
</ul>
</li>
<li>Programim Web
<ul>
<li>Shume mire</li>
</ul>
</li>
</ul>
<h2>Gjuhet e Huaja</h2>
<ul>
<li>Anglisht
<ul>
<li>Shume mire</li>
</ul>
</li>
<li>Italisht
<ul>
<li>Shume mire</li>
</ul>
</li>
<li>Frengjisht
<ul>
<li>Shume mire</li>
</ul>
</li>
</ul>
</body>
</html>
Rezultati:
COMMENTS