03 Ndertimi i layout bazuar ne tabela dhe CSS

Ne kete leksion

<!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">

<p>

Copyright Information

</p>

</div>

</body>

</html>

/* 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;

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

padding:10px;

}

#fundi

{

background-color:#336699;

min-height:40px;

width:700px;

margin-left:auto;

margin-right:auto;

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

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>

<div class="small_banner">

baner i vogel

</div>

<div class="small_banner">

baner i vogel

</div>

<div class="small_banner">

baner i vogel

</div>

<div class="small_banner">

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;

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

}

#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;

background-color:#fafafa;

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;

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

}

#fundi

{

width:90%;

min-height:50px;

margin-left:auto;

margin-right:auto;

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

}

#side_panel

{

min-height:350px;

width:20%;

float:left;

background-color:#cccccc;

}

#main_content

{

min-height:350px;

width:80%;

float:left;

background-color:#fafafa;

}

.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

tabele1.html

<html>

<head>

<title>table sample</title>

</head>

<body>

<table width="700" border="1" align="center">

<tr>

<td bgcolor="#00CCFF">&nbsp;</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>

<td><a href="#">item1</a></td>

</tr>

<tr>

<td><a href="#">item1</a></td>

</tr>

<tr>

<td><a href="#">item1</a></td>

</tr>

</tbody>

</table>

</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>&nbsp;</p>

<p>menu</p></td>

<td>content</td>

<td width="150">baner</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>&nbsp;</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: &nbsp; &euro;

<input type="text" value="enter nr1" name="nr1" id="nr1" onClick="this.value='';" >

</p>

</td>

</tr>

<tr>

<td height="40" onMouseOver="this.bgColor='#0099FF';" onMouseOut="this.bgColor='#FFFFFF';">

<p>Nr2: &nbsp; &yen;

<input name="nr2" type="text" id="nr2" onClick="this.value='';"

value="enter nr2" size="10" maxlength="5">

</p>

</td>

</tr>

<tr>

<td height="40" onMouseOver="this.bgColor='#0099FF';" onMouseOut="this.bgColor='#FFFFFF';">

<p>

Shuma:

<input name="sh" type="text" id="sh">

</p>

</td>

</tr>

<tr>

<td height="40" onMouseOver="this.bgColor='#0099FF';" onMouseOut="this.bgColor='#FFFFFF';">

<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>

<div class="page-header">

<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>

<div class="col-md-5">

<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">

<div class="col-md-5">

<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>

<div class="col-md-5">

<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>

<div class="page-header">

<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>

<div class="page-header">

<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>

<div class="page-header">

<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 class="active"><a href="#">Home</a></li>

<li ><a href="#">Profile</a></li>

<li ><a href="#">Messages</a></li>

</ul>

<div class="page-header">

<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>

<span class="icon-bar"></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 class="active"><a href="#">Home</a></li>

<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><!--/.nav-collapse -->

</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>

<span class="icon-bar"></span>

<span class="icon-bar"></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 class="active"><a href="#">Home</a></li>

<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><!--/.nav-collapse -->

</div>

</nav>

<div class="page-header">

<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>

<div class="page-header">

<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">

<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">

<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">

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

</div>

<div class="progress">

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

</div>

<div class="progress">

<div class="progress-bar progress-bar-striped" 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">

<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>

<div class="page-header">

<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><!-- /.col-sm-4 -->

<div class="col-sm-4">

<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><!-- /.col-sm-4 -->

<div class="col-sm-4">

<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">

<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">

<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>

</div>

</div><!-- /.col-sm-4 -->

</div>

<div class="page-header">

<h1>Panels</h1>

</div>

<div class="row">

<div class="col-sm-4">

<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 class="panel-heading">

<h3 class="panel-title">Panel title</h3>

</div>

<div class="panel-body">

Panel content

</div>

</div>

</div><!-- /.col-sm-4 -->

<div class="col-sm-4">

<div class="panel panel-success">

<div class="panel-heading">

<h3 class="panel-title">Panel title</h3>

</div>

<div class="panel-body">

Panel content

</div>

</div>

<div class="panel panel-info">

<div class="panel-heading">

<h3 class="panel-title">Panel title</h3>

</div>

<div class="panel-body">

Panel content

</div>

</div>

</div><!-- /.col-sm-4 -->

<div class="col-sm-4">

<div class="panel panel-warning">

<div class="panel-heading">

<h3 class="panel-title">Panel title</h3>

</div>

<div class="panel-body">

Panel content

</div>

</div>

<div class="panel panel-danger">

<div class="panel-heading">

<h3 class="panel-title">Panel title</h3>

</div>

<div class="panel-body">

Panel content

</div>

</div>

</div><!-- /.col-sm-4 -->

</div>

</div> <!-- /container -->

<!-- Bootstrap core JavaScript

================================================== -->

<!-- Placed at the end of the document so the pages load faster -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="bootstrap/js/bootstrap.min.js"></script>

<script src="bootstrap/js/docs.min.js"></script>

</body>

</html>