Leksion 3

Email: endrit.xhina@fshn.edu.
al
Leksion Nr. 3
Ndertimi i layout bazuar ne tabela dhe

CSS
Ne kete leksion
 Ndertimi i layout te faqes nepermjet tabelave

o 1.1 Ushtrim - Pershtatja e faqes shuma2.html brenda nje tabele
 2 Shembull me bootstrap
Ndertimi I faqjeve web Html dhe formati I struktures se tyre duke perdorur tabelat dhe CSS.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My home page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link style="text/css" href="my.css" rel="stylesheet">
</head>
<body>
<div id="koka">
<h1>Welcome to our website</h1>
</div>
<div id="trupi">
<div id="menu">menuja</div>
<div id="permbajtja">Permbajtja</div>
</div>
<div id="fundi">
Email: endrit.xhina@fshn.edu.al
<p>
Copyright Information
</p>
</div>
</body>
</html>
Ketu ruajme style.css file-in e CSS, qe e therrasim tek .html ne baze te clasave dhe id-ve
/* CSS Document */
#koka
background-color:#336699;
min-height:120px;
width:700px;
margin-left:auto;
margin-right:auto;
box-shadow: 5px 5px 3px #cccccc;
padding:10px;
/* ridefinimi i tageve html*/
#koka h1
color:#ffffff;
visibility:visible;
font-size:24px;
#trupi
background-color:#fafafa;
min-height:200px;
width:700px;
margin-left:auto;
margin-right:auto;
padding:10px;
#fundi
background-color:#336699;
min-height:40px;
width:700px;
margin-left:auto;
margin-right:auto;
padding:10px;
#fundi p
{
color:#ffffff;
text-align:center;
font-style:italic;
#menu
min-height:200px;
width:150px;
background-color:#6699cc;
Ndertimi i layout me layers
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Layers</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-
1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="koka">
<div id="logo">
<img src="images/logo.png">
</div>
<div id="social">
<a href="http://www.facebook.com">f</a>
<a href="http://www.twitter.com">t</a>
<a href="http://www.instagram.com">i</a>
</div>
</div>
<div id="trupi">
<div id="side_panel">
paneli anash
</div>
<div id="main_content">
<div class="big_banner">
baner i madh
</div>
<div class="small_banner">
baner i vogel
</div>
baner i vogel
</div>
baner i vogel
</div>
baner i vogel
</div>
baner i vogel
</div>
</div>
</div>
<div id="fundi">
copyright etj
</div>
</body>
</html>
style.css
#koka {
background-color: #0099FF;
width: 90%;
min-height:100px;
margin-left:auto;
margin-right:auto;
#logo
float:left;
}
#logo img
width:150px;
margin-left:15px;
margin-top:15px;
#social
float:right;
margin-top:35px;
margin-right:15px;
#social a
padding-top:10px;
padding-left:17px;
padding-bottom:10px;
padding-right:17px;
color:#333333;
font-weight:bold;
font-size:24px;
line-height:24px;
text-decoration:none;
border-radius:25px;
}
#social a:hover
background-color:#cccccc;
font-size:28px;
color:#6699ff;
#trupi
width:90%;
min-height:350px;
margin-left:auto;
margin-right:auto;
#fundi
width:90%;
min-height:50px;
margin-left:auto;
margin-right:auto;
#side_panel
min-height:350px;
width:20%;
float:left;
background-color:#cccccc;
#main_content
min-height:350px;
width:80%;
float:left;
.big_banner
min-height:150px;
width:95%;
margin-left:auto;
margin-right:auto;
margin-top:10px;
margin-bottom:10px;
box-shadow:5px 5px 3px #cccccc;
.small_banner
{
min-height:150px;
width:250px;
margin-left:10px;
margin-bottom:10px;
float:left;
box-shadow:5px 5px 3px #cccccc;
Ndertimi i layout te faqes nepermjet tabelave

Shembull- Do ndertojme te njejtin shembull si gjetja e shume se dy numrave, po tashme duke e
strukturuar me ane te tabeles dhe duke I vendosur stilizime. Kur mouse eshte mbi textbox te behet me
ngjyre blu.
tabele1.html
<html>
<head>
<title>table sample</title>
</head>
<body>
<table width="700" border="1" align="center">
<tr>
<td bgcolor="#00CCFF"> </td>
</tr>
<tr>
<td>
<table width="100%" border="1">
<tr>
<td width="100">
<p><img src="images/twiter.png" width="100" ></p>
<p>
<table width="100%" border="1">
<thead>
<tr>
<th>Site Menu</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">item1</a></td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
</p>
<p> </p>
<p> </p>
<p> </p>
<p>menu</p></td>
<td>content</td>
<td width="150">baner</td>
</tr>
</table>
</td>
</tr>
<tr>
<td> </td>
</tr>
</table>
</body>
</html>
Ushtrim - Pershtatja e faqes shuma2.html brenda nje

tabele
shuma3.html
<html>
<head>
<title>DOM</title>
<script language="JavaScript">
function shuma()
{
var a,b,c;
a=document.getElementById('nr1');
b=document.getElementById('nr2');
c=document.getElementById('sh');
c.value=parseInt(a.value)+parseInt(b.value);
function boshatis2()
{
document.myform.nr2.value='';
}
</script>
</head>
<body>
<form name="myform">
<table width="250">
<tr>
<td height="40" onMouseOver="this.bgColor='#0099FF';"
onMouseOut="this.bgColor='#FFFFFF';">
<p>Nr1: €
<input type="text" value="enter nr1" name="nr1" id="nr1"
onClick="this.value='';" >
</p>
</td>
</tr>
<tr>
<p>Nr2: ¥
<input name="nr2" type="text" id="nr2" onClick="this.value='';"
value="enter nr2" size="10" maxlength="5">
</p>
</td>
</tr>
<tr>
<p>
Shuma:
<input name="sh" type="text" id="sh">
</p>
</td>
</tr>
<tr>
<p>
<input type="button" value="gjej shumen" onClick="shuma();" >
</p>
</td>
</tr>
</table>
</form>
<br>
</body>
</html>
Shembull me bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
</head>
<body>
<div>
<div class="page-header">
<h1>Butona</h1>
</div>
<p>
<button type="button" class="btn btn-lg btn-default">Default</button>
<button type="button" class="btn btn-lg btn-primary">Primary</button>
<button type="button" class="btn btn-lg btn-success">Success</button>
<button type="button" class="btn btn-lg btn-info">Info</button>
<button type="button" class="btn btn-lg btn-warning">Warning</button>
<button type="button" class="btn btn-lg btn-danger">Danger</button>
<button type="button" class="btn btn-lg btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-sm btn-default">Default</button>
<button type="button" class="btn btn-sm btn-primary">Primary</button>
<button type="button" class="btn btn-sm btn-success">Success</button>
<button type="button" class="btn btn-sm btn-info">Info</button>
<button type="button" class="btn btn-sm btn-warning">Warning</button>
<button type="button" class="btn btn-sm btn-danger">Danger</button>
<button type="button" class="btn btn-sm btn-link">Link</button>
</p>
<p>
<button type="button" class="btn btn-xs btn-default">Default</button>
<button type="button" class="btn btn-xs btn-primary">Primary</button>
<button type="button" class="btn btn-xs btn-success">Success</button>
<button type="button" class="btn btn-xs btn-info">Info</button>
<button type="button" class="btn btn-xs btn-warning">Warning</button>
<button type="button" class="btn btn-xs btn-danger">Danger</button>
<button type="button" class="btn btn-xs btn-link">Link</button>
</p>
<h1>Tabela</h1>
</div>
<div class="row">
<div class="col-md-5">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@TwBootstrap</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-condensed">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
<h1>Labela</h1>
</div>
<p>
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

</p>
<h1>Badges</h1>
</div>
<p>
<a href="#">Inbox <span class="badge">42</span></a>
</p>
<br/><br/>
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span

class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span

class="badge">3</span></a></li>
</ul>
<h3>Navs</h3>
</div>
<ul class="nav nav-tabs" role="tablist">
<li class="active"><a href="#">Home</a></li>
<li ><a href="#">Profile</a></li>
<li ><a href="#">Messages</a></li>
</ul>
<br/><br/>
<ul class="nav nav-pills" role="tablist">
<li ><a href="#">Profile</a></li>

<li ><a href="#">Messages</a></li>
</ul>
<h3>Navbars</h3>
</div>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-

toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"

role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-

toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="#">Project name</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"

role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li><a href="#">Separated link</a></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<h1>Alerts</h1>
</div>
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important

alert message.
</div>
<div class="alert alert-info" role="alert">
<strong>Heads up!</strong> This alert needs your attention, but it's

not super important.
</div>
<div class="alert alert-warning" role="alert">

<strong>Warning!</strong> Best check yo self, you're not looking too

good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting

again.
</div>
<h1>Progress bars</h1>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-

valuemin="0" aria-valuemax="100" style="width: 60%;"><span class="sr-
only">60% Complete</span></div>
</div>
<div class="progress-bar progress-bar-success" role="progressbar"

aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:
40%"><span class="sr-only">40% Complete (success)</span></div>
</div>
<div class="progress-bar progress-bar-info" role="progressbar" aria-

valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"><span
class="sr-only">20% Complete</span></div>
</div>
<div class="progress-bar progress-bar-warning" role="progressbar"

60%"><span class="sr-only">60% Complete (warning)</span></div>
</div>
<div class="progress-bar progress-bar-danger" role="progressbar"

80%"><span class="sr-only">80% Complete (danger)</span></div>
</div>
<div class="progress-bar progress-bar-striped" role="progressbar"

60%"><span class="sr-only">60% Complete</span></div>
</div>
<div class="progress-bar progress-bar-success" style="width:

35%"><span class="sr-only">35% Complete (success)</span></div>
<div class="progress-bar progress-bar-warning" style="width:

20%"><span class="sr-only">20% Complete (warning)</span></div>
<div class="progress-bar progress-bar-danger" style="width:

10%"><span class='sr-only'>10% Complete (danger)</span></div>
</div>
<h1>List groups</h1>
</div>
<div class="row">
<div class="col-sm-4">
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Porta ac consectetur ac</li>
<li class="list-group-item">Vestibulum at eros</li>
</ul>
</div>

<div class="list-group">
<a href="#" class="list-group-item active">
Cras justo odio
</a>
<a href="#" class="list-group-item">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item">Morbi leo risus</a>
<a href="#" class="list-group-item">Porta ac consectetur ac</a>
<a href="#" class="list-group-item">Vestibulum at eros</a>
</div>
</div>
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item

heading</h4>
<p class="list-group-item-text">Donec id elit non mi porta

gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
</a>
<a href="#" class="list-group-item">

heading</h4>

</a>
<a href="#" class="list-group-item">

heading</h4>

</a>
</div>
</div>
</div>
<h1>Panels</h1>
</div>
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
Panel content
</div>
</div>
<div class="panel panel-primary">
</div>
Panel content
</div>
</div>
</div>
<div class="panel panel-success">

</div>
Panel content
</div>
</div>
<div class="panel panel-info">
</div>
Panel content
</div>
</div>
</div>
<div class="panel panel-warning">
</div>
Panel content
</div>
</div>
<div class="panel panel-danger">
</div>
Panel content
</div>
</div>
</div>
</div>
</div> 


<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></scr
ipt>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="bootstrap/js/docs.min.js"></script>
</body>
</html>

Leksion 3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Leksion 3

Uploaded by

Copyright:

Available Formats

Email: endrit.xhina@fshn.edu.

Ndertimi i layout bazuar ne tabela dhe

 Ndertimi i layout te faqes nepermjet tabelave

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<title>My home page</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link style="text/css" href="my.css" rel="stylesheet">

<h1>Welcome to our website</h1>

box-shadow: 5px 5px 3px #cccccc;

/* ridefinimi i tageve html*/

box-shadow: 5px 5px 3px #cccccc;

box-shadow: 5px 5px 3px #cccccc;

Ndertimi i layout me layers

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

box-shadow: 5px 5px 3px #cccccc;

box-shadow: 5px 5px 3px #cccccc;

box-shadow: 5px 5px 3px #cccccc;

box-shadow:5px 5px 3px #cccccc;

box-shadow:5px 5px 3px #cccccc;

Ndertimi i layout te faqes nepermjet tabelave

Ushtrim - Pershtatja e faqes shuma2.html brenda nje

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">

<button type="button" class="btn btn-lg btn-default">Default</button>

<button type="button" class="btn btn-lg btn-primary">Primary</button>

<button type="button" class="btn btn-lg btn-success">Success</button>

<button type="button" class="btn btn-lg btn-info">Info</button>

<button type="button" class="btn btn-lg btn-warning">Warning</button>

<button type="button" class="btn btn-lg btn-danger">Danger</button>

<button type="button" class="btn btn-lg btn-link">Link</button>

<button type="button" class="btn btn-default">Default</button>

<button type="button" class="btn btn-primary">Primary</button>

<button type="button" class="btn btn-success">Success</button>

<button type="button" class="btn btn-info">Info</button>

<button type="button" class="btn btn-warning">Warning</button>

<button type="button" class="btn btn-danger">Danger</button>

<button type="button" class="btn btn-link">Link</button>

<button type="button" class="btn btn-sm btn-default">Default</button>

<button type="button" class="btn btn-sm btn-primary">Primary</button>

<button type="button" class="btn btn-sm btn-success">Success</button>

<button type="button" class="btn btn-sm btn-info">Info</button>

<button type="button" class="btn btn-sm btn-warning">Warning</button>

<button type="button" class="btn btn-sm btn-danger">Danger</button>

<button type="button" class="btn btn-sm btn-link">Link</button>

<button type="button" class="btn btn-xs btn-default">Default</button>

<button type="button" class="btn btn-xs btn-primary">Primary</button>

<button type="button" class="btn btn-xs btn-success">Success</button>

<button type="button" class="btn btn-xs btn-info">Info</button>

<button type="button" class="btn btn-xs btn-warning">Warning</button>

<button type="button" class="btn btn-xs btn-danger">Danger</button>

<button type="button" class="btn btn-xs btn-link">Link</button>

<table class="table table-striped">

<table class="table table-bordered">

<td colspan="2">Larry the Bird</td>

<table class="table table-condensed">

<td colspan="2">Larry the Bird</td>

<span class="label label-default">Default</span>

<span class="label label-primary">Primary</span>

<span class="label label-success">Success</span>

<span class="label label-info">Info</span>

<span class="label label-warning">Warning</span>

<span class="label label-danger">Danger</span>

<a href="#">Inbox <span class="badge">42</span></a>