Desain Blog Simple dengan CSS
Pertama buat kerangka dahulu dengan menggunakan CSS, lalu isi tiap tiap bagian kerangka.
Simpan file dengan nama mystyle.css
#wrapper {
margin: auto;
width: 1000px;
border: 1px solid black;
background: grey;
}
#top {
margin:auto ;
width: 999px;
height:25px;
border: 1px solid black;
background: black;
}
#right {
float: right;
width: 200px;
height: 20px;
background: purple;
border: 2px solid black;
margin: 3px 5px 0px 0px ;
}
#right2 {
clear: both;
float: right;
width: 200px;
height: 130px;
background: black;
border: 2px solid black;
margin: 0px 5px 0px 0px ;
}
#right3 {
clear: both;
float: right;
width: 200px;
height: 20px;
background: purple;
border: 2px solid black;
margin: 3px 5px 0px 0px ;
}
#right4 {
clear: both;
float: right;
width: 200px;
height: 160px;
background: black;
border: 2px solid black;
margin: 0px 5px 5px 0px ;
}
#content {
margin: 0px 0px 0px 40px;
width: 700px;
height: 340px;
img float left padding 2px 2px 2px 2px;
border: 2px solid grey;
}
#header {
clear: both;
background-image:url(header.jpg);
height: 70px;
border: 0px solid blue;
}
#footer {
clear: both;
height: 50px;
border: 1px solid black ;
background-image:url(footer2.jpg);
}
Buat isi bagian –bagian kerangka dari web wang akan dibuat
Simpan dengan nama Desain Layout1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Desain Layout</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<div id = "wrapper">
<div id="header">
<table width="993" height="35">
<tr>
<td> <h2> <p align="left"><font color="white"face="Verdana">Simple Blog Desain</font> </b> <h2></td>
<td><b><h4 align="right">
<form name="form1" method="post" action="">
<label>Search
<input type="text" name="textfield">
</label>
</form>
<h4> </td>
</tr>
</table>
</div>
<div id="top">
<tr id="main">
<td><a href="index.html"> Home |</a></td>
<td><a href="#">Sitemap |</a></td>
<td><a href="#">RSS |</a></td>
<td><a href="contact.html">Contact |</a></td>
<td><a href="aboutus.html">About Us</a></td>
</tr>
</div>
<div id="right">KATEGORI</div>
<div id="right2">
<ul id="main">
<li><a href="index.html"> Program</a></li>
<li><a href="#">News & Media</a></li>
<li><a href="tutorial.html">Tutorial</a></li>
<li><a href="trik&tips.html">Trik& Tips</a></li>
</ul>
</div>
<div id="right3">LOGIN</div>
<div id="right4">
<form action="" method="post">
<table align="left" bgcolor="#000000" border="0" cellpadding="" cellspacing="0" width="10%">
<tr>
<td> <font color="white"face="TIME NEW ROMAN" size"10"> user id: </font></td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td> <p align="left"><font color="white"face="TIME NEW ROMAN" size"10">password:</font> </td>
</tr>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td> <input type="submit" value="login" /> </td>
</tr>
</table>
</form>
</div>
<div id="content"><marquee behavior="scroll">"Selamat Datang Di Warung Belajar UM"</marquee> <hr/>
<p> </p>
<b>Pengertian Web Browser<br/></b>
<br/><img src="browser.jpg"align="left" />
Browser adalah program aplikasi yang menterjemahkan kode HTML dan merepresentasikan halaman,</br>
website. Aplikasi inilah yang paling sering kita gunakah setiap hari untuk melakukan browsing di dunia </br>
maya. Macam browser sekarang semakin banyak saja dianataranya adalah: Internet Explorer, Netscape, </br>
Mozilla, Chrome, Safari, dll.</br>
Pendekatan fungsi ditinjau dari arah pengguna atau top down view</br>
Dilakukan berdasarkan pada kenyataan bahwa struktur internal sistem komputer pada aras bahasa mesin sangat </br>
primitif dan tidak fleksibel untuk pemrograman terutama untuk proses input/output</br>
Sistem operasi dibuat untuk menyembunyikan keadaan sesungguhnya dari perangkat keras dengan tampilan yang</br>
menyenangkan dan mudah digunakan. Disini sistem operasi berperan sebagai penyedia interface yang</br>
sesuai berupa perluasan mesin (extended machine) atau mesin semu (virtual machine)</br>
</div>
<div id="footer"><h6 align="right">kikimen050@gmail.com</h6></div>
</div>
</body>
</html>
Maka hasilnya seperti gambar di bawah:
Tidak ada komentar:
Posting Komentar