Posts

Jun 20, 2010

Membuat Halaman Website dengan HTML

Sunday, June 20, 2010 Posted by: Blogger Indo
Categories:
Pada pembahasan "Perintah Dasar HTML" kemarin saya sudah bilang kalau mau bikin halaman website seperti gambar disamping. Halaman website ini menggunakan HTML dengan di tambah CSS sebagai stylenya, tetapi sebelum kita membuat persis seperti ini, maka sebelumnya kita rancang halaman websitenya dengan HTML.

Pada dasarnya struktur dasar yang akan kita gunakan adalah seperti ini:
<!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">
 <meta name="author" content="Ade Tiawan">
 <meta name="description" content="Deskripsi website Anda disini" />
 <meta name="keywords" content="Masukkan, kata, kunci, website, anda, seperti, ini" />
 <title>Welcome to my website</title>
</head>
<body>
DISINI TEMPAT YANG AKAN KITA GUNAKAN UNTUK MEMBUAT HALAMAN
</body>
</html> 
 
Selanjutnya kita akan memulai edit source HTML tersebut, menjadi seperti ini:

<!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">
 <meta name="author" content="Ade Tiawan">
 <meta name="description" content="Deskripsi website Anda disini" />
 <meta name="keywords" content="Masukkan, kata, kunci, website, anda, seperti, ini" />
 <title>Welcome to my website</title>
</head>
<body>
<div id="title"><h1>www.yourdomain.com</h1><br/></div>
<div id="contain"><div id="sidebar">
<h2>Site menu</h2>
<a class="menu" href="index.html">Home</a>
<a class="menu" href="#">Sample HTML</a>
<a class="menu" href="#">Sample CSS 1</a>
<a class="menu" href="#">Sample CSS 2</a>
<a class="menu" href="#">Sample CSS 3</a>
<hr>
<h2>Advertising</h2>
<a href="http://adf.ly/Q3o"><img src="easy.gif"/></a>
<a href="http://tinyurl.com/377uf4m"><img src="blogclicker.gif" width="125"/></a>
</div>
<div id="main">
<h2><maruee>Welcome to my website</marquee></h2>
<img src="aku.png" width="125" height="125" alt="ade tiawan" />
<p>Disini adalah tempat text Anda nanti</p>
<p class="copy"><strong>© 2010 Alls Right Reserved</strong> | Design by <a href="http://matakuliahteknik.blogspot.com">Blogger Indo</a><br />
Template sponsored by <a href="http://matakuliahteknik.blogspot.com">Mata Kuliah Teknik</a></p>
</div><div id="footer"></div>
</div></body></html> 
Untuk gambar bisa Anda ganti sendiri sesuai keinginan Anda. Dan ini kalau dijalankan maka akan tampak seperti ini:
Terlihat bahwa setelah kita jalankan, tata letak belum tertata dengan baik. Selanjutnya, kita akan menambah style CSS pada HTML ini agar bisa seperti gambar


Namun untuk itu, akan kita lanjutkan pada pembahasan selanjutnya, jadi tunggu pembahasan selanjutnya dari http://matakuliahteknik.blogspot.com.

Dan untuk source code dari pembahasan ini bisa Anda download di sini, sebagai latihan Anda.

0 Comments:

Post a Comment

Your comments are very helpful this blog in the future. but do not spread the SPAM on this blog!

Subscribe to: Post Comments (Atom)

Followers

 

Mata Kuliah Teknik. Copyright 2010 All Rights Reserved.Template by Bloganol.com Detiablog