Pembuatan Desain Layout Halaman Web Dengan Cascading Style Sheet

Contoh pembuatan desain layout halaman web dengan HTML
Untuk membuat desain layout halaman web dengan menggunakan HTML, maka ikutilah langkah-langkah berikut ini :


1.Pertama-tama, kita membuat kerangkanya terlebih dahulu sesuai dengan keinginan kita. Ketikkan kode berikut ini:


#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 544px;
height: 330px;
border: 1px solid green;
}
#Top {
float:right;
width: 544px;
height:90px;
border: 1px solid red;
}

#Bottom {
float:right;
width: 544px;
height:238px;
border: 1px solid green;
}
#Left {
float:Left;
width: 330px;
height: 230px;
border: 1px solid red;
}
#Right {
float:right;
margin-left: 20px;
width: 190px;
height: 150px;
border: 1px solid red;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}Simpan dengan nama mystyle.css

2. Selanjutnya ketikkan kode berikut ini juga :

<meta equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css">


<div id="wrapper">
<div id="header">
header
</div>

<div id="inner">
<div id="sidebar">
Sidebar
</div>

<div id="content">
<div id="Top">
Top
</div>
<div id="Bottom">
<div id="Left">
Content
</div>
<div id="Right">
Right
</div>
</div>
</div>
</div>

<div id="footer">
Footer
</div>
</div>

Simpan file dalam bentuk html (CSS.html)

3.Buka file html, maka hasilnya adalah :



Untuk mendesain kolom yang telah dibuat ikuti langkah-berikut :
1. tulis program berikut ini
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid white;
}
#header {
height: 100px;
background: yellow;
border: 1px solid white;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid white;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #CCFF99;
border: 1px solid white;
}

#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid white;
}

#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: #FFFFCC;
border: 1px solid white;
}

#right {
float: right;
width: 357px;
height: 165px;
background: #CCFF99;
border: 1px solid white;
}

#footer {
clear:both;
height: 50px;
background: #6cae15;
border: 1px solid white;
}

#leftmenu ul {
width: 175px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: #6cae15 no-repeat left center;
margin: 0px 0px 1px; color: #ffffff;
}
#leftmenu a:hover {
background: #5e9711 no-repeat left center; color: #ffffff
}

#box1 {
float: left;
margin-right:10px;
width: 91px;
height: 98px;
background: #cccccc;
border: 1px solid white;
}
#box2 {
float: left;
margin-right: 25px;
margin-top: 2px;
width: 490px;
height: 85px;
background: yellow;
border: 1px solid yellow;
}
#box7{
float: right;
margin-right:5px;
margin-top: 7px;
width: 60px;
height: 20px;
background: yellow;
border: 1px solid yellow;
}
#box6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: yellow;
border: 1px solid yellow;
}
#box5{
float: right;

margin-top: 7px;
width: 40px;
height: 20px;
background: yellow;
border: 1px solid yellow;
}

#box10{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: yellow;
border: 1px solid yellow
}
#box11{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 40px;
height: 20px;
background: yellow;
border: 1px solid yellow;
}

#box3{
float: right;
margin-right: 30px;
margin-top: 7px;
width: 100px;
height: 20px;
background: #FFFFFF;
border: 1px solid yellow;
}
#box4{
float: right;
margin-right: 30px;
margin-top: 7px;
width: 50px;
height: 20px;
background: yellow;
border: 1px solid yellow;
}

#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
2. simpan dengan nama desain1.css
3. ketikklah kode html berikut ini:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="cobatgs.css" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id = "box1">
<img src="um.jpg"/>
</div>
<div id = "box2"><h1>TEKNIK ELEKTRO</h1>
</div>
<div id = "box7">
<a href="link.html">About Us</a>
</div>
<div id = "box6">
<a href="link.html"> Contact|</a>
</div>
<div id = "box5">
<a href="link.html"> RSS| </a>
</div>
<div id = "box10">
<a href="link.html">Sitemap|</a>
</div>
<div id = "box11">
<a href="link.html"> Home|</a>
</div>
<div id = "box3">
</div>
<div id = "box4"> Search :
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Articel</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips and Tricks</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "box8">
<img src="jember_cin.jpg"/>
</div>
<div id = "box9">
<img src="angkatan_Q1.jpg"/>
</div>
</div>
<div id="content">
<b>Teori Konstruktivisme <br/></b>
<br/>
Teori Konstruktivisme didefinisikan sebagai pembelajaranyang bersifat generatif, yaitu tindakan mencipta sesuatu makna dari apa yang dipelajari. Konstruktivisme sebenarnya bukan merupakan gagasanyang baru, apa yang dilalui dalam kehidupan kita selama ini merupakan himpunan dan pembinaan pengalaman demi pengalaman. Ini menyebabkan seseorang mempunyai pengetahuandan menjadi lebih dinamis. Pendekatan konstruktivisme mempunyai beberapa konsep umum seperti:
1. Pelajar aktif membina pengetahuan berasaskan pengalaman yang sudah ada.
2. Dalam konteks pembelajaran, pelajar seharusnya membina sendiri pengetahuan mereka.
3. Pentingnya membina pengetahuan secara aktif oleh pelajar sendiri melalui proses saling mempengaruhi antara pembelajaran terdahulu dengan pembelajaran terbaru.
4. Unsur terpenting dalam teoriini ialah seseorang membina pengetahuan dirinya secara aktif dengan cara membandingkan informasibaru dengan pemahamannya yang sudah ada.
5. Ketidakseimbangan merupakan faktor motivasipembelajaran yang utama. Faktor ini berlaku apabila seorang pelajar menyadari gagasan-gagasannya tidak konsisten atau sesuai dengan pengetahuan ilmiah.
6. Bahan pengajaran yang disediakan perlu mempunyai perkaitan dengan pengalaman pelajar untuk menarik minat pelajar.<br/>
</div>
<div id="right">
<b>Event :</b>
<ul>
<li>Kuliah Tamu "Video Streaming" </li>
<li>Electro English Club (E2C)</li>
<li>Seminar Nasional "Hacking and Security"</li>
</ul>
</div>
</div>
<div id="footer">
<h3 align="center"><b>Andi Corporation</b></h3>
</div>
</div>
</body>
</html>

4. simpan dengan nama misalnya desain2.html
5.maka hasilnya sebagai berikut: