Cara Membuat Website Simple Dengan HTML + CSS Part 2
Cara simple buat website
di dalam tag body <body></body> tambahkan <div id=”bungkus”></div> yang gunanya untuk membungkus keseluruhan atau biasa di sebut wrapper/container jadinya ” <body><div id=”bungkus”></div></body> ” , kemudian buat lagi div dengan id bungkusinner maka code menjadi seperti ini ” <body><div id=”bungkus”><div id=”bungkusinner”></div></div></body> ” div bungkusinner digunakan untuk membungkus objek yang ada di dalam child bungkus .. dan semua CLASS/ID itu akan di deklarasikan di file style.css yang akan di bahas pada tahap selanjutnya …
<!-- Kosong --> <body> <div id="bungkus"> <div id="bungkusinner"> </div> </div> </body>
Membuat menubar dengan : * masukan ke dalam div id bungkus inner
<!-- Kosong --> <div id="menubar"> <div id="innermenu"> <ul> <a href="index.html"><li class="active">Beranda</li></a> <a href="guru.html"><li>Guru</li></a> <a href="jurusan.html"><li>Jurusan</li></a> <a href="karyawan.html"><li>Karyawan</li></a> <a href="nilai.html"><li>Cek Nilai</li></a> </ul> </div> <div id="logo"><img src="img/2.jpg" width="200" height="70" /> </div> </div>* Gunanya menubar dan innermenu untuk membedakan antara objek menubar dengan logo , sekaligus mempermudah styling
Membuat slider :
<!-- Kosong --> <div id="slider"> <img src="img/2.jpg" /> </div>
*Kode slider di atas belum di kombinasikan dengan javascript atau css untuk menggerakannya
Membuat Main content
<!-- Kosong -->
<div id="main">
<div id="kontent">
<!-- Posting Artikel -->
<div class="post-item">
<img src="img/2.jpg" alt="image post" width="200" height="200">
<h2>Judul Posting</h2>
<p class="meta"> 4/1/09 in inspiration </p>
<p> Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dol or sit amet . Lorem ipsum dolor sit amet . </p>
</div>
<div class="post-item">
<img src="img/2.jpg" alt="image post" width="200" height="200">
<h2>Judul Posting</h2>
<p class="meta"> 4/1/09 in inspiration </p>
<p> Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dol or sit amet . Lorem ipsum dolor sit amet . </p>
</div>
<div class="post-item">
<img src="img/2.jpg" alt="image post" width="200" height="200">
<h2>Judul Posting</h2>
<p class="meta"> 4/1/09 in inspiration </p>
<p> Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dol or sit amet . Lorem ipsum dolor sit amet . </p>
</div>
</div>
<div id="rightbar">
<!-- Bar Kanan -->
<div class="bar-kanan">
<p class="meta"> Plugin News </p>
<img src="img/2.jpg" alt="image post" width="200" height="200">
<p>Lorem ipsum dolor sit amet where ipsum lorem dolor sit amet dolor ipsum lorem ipsum sit amet dolor ipsum amet sit dolor ipsum sit amet dolor</p>
</div>
<div class="bar-kanan">
<p class="meta"> Plugin News </p>
<img src="img/2.jpg" alt="image post" width="200" height="200">
<p>Lorem ipsum dolor sit amet where ipsum lorem dolor sit amet dolor ipsum lorem ipsum sit amet dolor ipsum amet sit dolor ipsum sit amet dolor</p>
</div>
<!-- Bar Kanan -->
</div>
</div>
- Kenapa di buat ID Main … untuk mendefinisikan,mengatur ukuran,posisi,warna dari objek main
- Kenapa di balam ID main ada 2 ID kontent dan ID rightbar .. gunanya untuk membedakan rightbar dan Kontent
- Kenapa Div class post-item mempunyai tag <img> <p class=”meta”> <h2> <p> ?
- <img> untuk menampilkan gambar dari postingan tersebut
- <p class=”meta”> untuk menampilkan tanggal posting
- <h2> untuk menampilkan judul posting
- <p> untuk menampilkan isi posting
- Rightbar Penjelasannya kurang lebih sama
Membuat Footer :
<div id="footer">
<span>
Copyright @ RPL 2013 All Right Reseved
</span>
</div>
- Kenapa div harus di berikan id “footer” .. untuk memberikan gaya yang telah di tentukan untuk footer
- Kenapa text di dalam footer menggunakan span .. optional di sini kita bisa gunakan apa saja termasuk button/a/p/span dll
Hasil Akhir scriptnya Seperti berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tag -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="robots" content="index, follow">
<meta name="description" content="Utama Website Deplover menyediakan jasa pembuatan website murah, berkualitas">
<meta name="keywords" content="utama, website, utamaweb, deplover,">
<meta name="revisit-after" content="7">
<meta name="webcrawlers" content="all">
<meta name="spiders" content="all">
<!-- Set Icon -->
<link rel="shortcut icon" href="favicon.ico" />
<!-- Set Css -->
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<!-- Title Web --> <title>STMIK : Sekolah Tinggi Ilmu Komputer</title>
<!-- Start Body -->
<body>
<div id="bungkus">
<div id="bungkusinner">
<div id="menubar">
<div id="innermenu">
<ul>
<a href="index.html"><li class="active">Beranda</li></a>
<a href="guru.html"><li>Guru</li></a>
<a href="jurusan.html"><li>Jurusan</li></a>
<a href="karyawan.html"><li>Karyawan</li></a>
<a href="nilai.html"><li>Cek Nilai</li></a>
</ul>
</div>
<div id="logo"><img src="img/2.jpg" width="200" height="70" /> </div>
</div>
<div id="slider">
<img src="img/2.jpg" />
</div>
<div id="main">
<div id="kontent">
<!-- Posting Artikel -->
<div class="post-item">
<img src="img/2.jpg" alt="image post" width="200" height="200">
<h2>Judul Posting</h2>
<p class="meta"> 4/1/09 in inspiration </p>
<p> Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . </p>
</div>
<div class="post-item">
<img src="img/2.jpg" alt="image post" width="200" height="200">
<h2>Judul Posting</h2>
<p class="meta"> 4/1/09 in inspiration </p>
<p> Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . </p>
</div>
<div class="post-item">
<img src="img/2.jpg" alt="image post" width="200" height="200">
<h2>Judul Posting</h2>
<p class="meta"> 4/1/09 in inspiration </p>
<p> Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . Lorem ipsum dolor sit amet . </p>
</div>
<!-- Posting Artikel -->
</div>
<div id="rightbar">
<!-- Bar Kanan -->
<div class="bar-kanan">
<p class="meta"> Plugin News </p>
<img src="img/2.jpg" alt="image post" width="200" height="200">
<p>Lorem ipsum dolor sit amet where ipsum lorem dolor sit amet dolor ipsum lorem ipsum sit amet dolor ipsum amet sit dolor ipsum sit amet dolor</p>
</div>
<div class="bar-kanan">
<p class="meta"> Plugin News </p>
<img src="img/2.jpg" alt="image post" width="200" height="200">
<p>Lorem ipsum dolor sit amet where ipsum lorem dolor sit amet dolor ipsum lorem ipsum sit amet dolor ipsum amet sit dolor ipsum sit amet dolor</p>
</div>
<!-- Bar Kanan -->
</div>
</div>
<div id="footer">
<span>
Copyright @ RPL 2013 All Right Reseved
</span>
</div>
</div>
</div>
</body>
* Jika sudah coba anda lihat hasilnya di browser hasilnya masih belum indah karena kita belum menuliskan file style.css nya di tahap berikutnya style.css akan di bahas dan tampilan pun terlihat mulai membentuk
Tidak ada komentar :
Posting Komentar