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>


ċ
bootstrap-3.3.2-dist.zip
(254k)
Leogena Zhaka,
Feb 5, 2015, 3:12 AM
ċ
bootstrap-3.3.2.zip
(3138k)
Leogena Zhaka,
Feb 5, 2015, 3:12 AM