langsung saja langkah pertama kopi paste kode HTML berikut pada text editor (notepad,notepad++, atau lainya) kemudian save dengan akhiran .htm misal : test_web2kolom.htm.
<html>
<head>
<title>2 kolomsederhana</title>
<link rel="stylesheet" href="test_web2kolom.cs" type="text/css" media="screen" />
<style type="text/css" media="screen">
/* <![CDATA[ */ @import url(test_web2kolom.css); /* ]]> */
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Contoh Link 1</a></li>
<li><a href="#">Contoh Link 2</a></li>
<li><a href="#">Contoh Link 3</a></li>
</ul>
</div>
<div id="content">
<h1>Layout dua kolom sederhana</h1>
<p><strong>Step x - bold text here...</strong> More text here...</p>
<p>More text here...</p>
<p>More text here...</p>
<p>More text here...</p>
</div>
</body>
jika sudah selesai, tinggal kopi paste kode css dibawah ini,
lalu simpan dengan akhiran .css misal : test_web2kolom.css
Kkarena contoh ini menggunakan style sheet (file CSS) yang terpisah atau Eksternal, maka jika ingin contoh ini berjalan dengan baik harus mengganti tulisan/kode yang sudah saya tandai dengan warna merah dan tebal.
Setelah selesai semuanya tinggal kita pindahkan dua file tadi ke folder C:\xampp\htdocs\folder_anda\
untuk me-review hasilnya buka browser (mozzila atau lainnya) ketik http://localhost/folder_anda/test_web2kolom.htm akan nampak seperti gambar di bawah.untuk lainnya silahkan berkreasi sendiri,menurut saya kita bisa kalau kita sering melakukannya,awalnya pasti sering salah,tapi lama-kelamaan kita akan semakin mengerti.
Silahkan mencoba..
•body {margin:0px; padding:0px; font: 1em verdana, arial, sans-serif;}
•div#nav {position:absolute; left:0px; top:0px; width:150px; padding:.5em 0 0 0; margin:22px 0 0 15px; border-top:2px solid #069; border-bottom:1px solid #069;}
•div#nav ul {margin-top:0px; margin-bottom:.8em;}
•div#nav li {margin-bottom:.5em; font-weight:bold; font-size:.75em;}
•div#content {margin:20px 0 0 165px; padding: 0 1em;}
•div#content h1{font-size:1em;}
•div#content p {font-size:.8em;}
•div#content li {font-size:.75em;}
Kkarena contoh ini menggunakan style sheet (file CSS) yang terpisah atau Eksternal, maka jika ingin contoh ini berjalan dengan baik harus mengganti tulisan/kode yang sudah saya tandai dengan warna merah dan tebal.
Setelah selesai semuanya tinggal kita pindahkan dua file tadi ke folder C:\xampp\htdocs\folder_anda\
untuk me-review hasilnya buka browser (mozzila atau lainnya) ketik http://localhost/folder_anda/test_web2kolom.htm akan nampak seperti gambar di bawah.untuk lainnya silahkan berkreasi sendiri,menurut saya kita bisa kalau kita sering melakukannya,awalnya pasti sering salah,tapi lama-kelamaan kita akan semakin mengerti.
No comments:
Post a Comment