Untuk membuat sebuah website personal yang sederhana pertama kamu mesti paham dulu konsep dari website tersebut. Umumnya website dibagi menjadi3 bagian, Header, Content, dan Footer.
Untuk membagi halaman web menjadi 3 bagian (header, content, footer). Bisa menggunakan tag <table>, namun hal ini tidak disarankan, karena akan sulit untuk kedepannya apabila ingin membuat website 3 colom atau membuat bagian baru lagi di halaman web.
Cara lain yaitu dengan menggunakan CSS. Pada tahap ini akan dijelaskan step by step membuat web personal dengan css.
1. Pertama sediakan sebuah file html yang memuat link file css. Save dengan nama personal.html
<html>
<head>
<title>Personal WEB</title>
</head>
<link href="webstyle.css" rel="stylesheet" type="text/css"/>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
</body>
</html>
Penjelasan : href="webstyle.css" adalah nama file css yang kita gunakan.
2. Selanjutnya pada bagian body, bagi halaman menjadi 3 bagian dengan cara memberi tag <div>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
Fungsi tag <div> adalah untuk membagi halaman menjadi beberapa bagian. Pada masing-masing <div> diberi id agar bisa di seleksi pada file css.
3. Buat file css simpan dengan nama "webstyle.css", (letakkan difolder yang sama dengan file personal.html). buka file css tersebut dan masukkan koding berikut.
#header {
Width:90%; height:50px;
Padding: 10px 5% 10px 5%;
Background-color : #efeffe;
}
Coba save file css kemudian buka personal.html, terlihat berbeda kan?. Lanjutkan dengan mengetik koding berikut
#footer {
Width:100%; height:50px;
Padding: 10px 0 5px 0;
Text-align:center; Font-size:12px; Color:#ffffff;
Background-color : #3f3f3f;
}
Kemudian berikan property untuk id content di file css.
#content{
Width:1000px; height:450px;
margin:auto;
border-left: 3px #efefff solid;
border-right: 3px #efefff solid;
}
Oke silahkan buka file html kamu dan lihat hasilnya akan seperti ini.
4. Kemudian beri tulisan pada file HTML kamu
<div id="header"><h2>WEB Personal<h2></div>
<div id="content">Isi dari web ini dapat berupa artikel dan lain lain</div>
<div id="footer">© WEB Personal 2011<br> Workshop Pemrograman WEB</div>
Simpan dan refresh file personal.html kamu.
5. Percantik header dengan menambahkan koding berikut yang bertujuan mengubah format h2 yang ada didalam tag <div id="header"> pada file css
#header h2 {
font-family : tahoma, verdana, serif;
font-size: 18px;
color : #e33;
}
6. Ubah isi content!, Pada bagian content kita akan membuat sebuah form inputan yang akan digunakan ketika mempelajari php. Lihat koding berikut.
<div id="content">
<form name="form1" action="">
<table>
<tr> <td width="120px">Nama </td> <td><input type="text" name="nama"></td></tr>
<tr> <td>Jenis Kelamin </td> <td><input type="radio" name="jkel" value="Pria"> Pria <input type="radio" name="jkel" value="Wanita"> Wanita</td></tr>
<tr> <td>Jurusan </td> <td>
<select name="jurusan">
<option>T Informatika</option>
<option> T Industri </option>
<option> Matematika </option>
<option> Sis Informasi </option>
<option> T Elektro </option>
</select>
</td></tr>
<tr><td> </td> <td><input type="submit" name="submit" value="submit"></td></tr>
</table>
</form>
</div>
hasil akhir seperti ini
personal.html :
<html>
<head><title>Personal WEB</title>
<link href="webstyle.css" rel="stylesheet" type="text/css"/>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" >
<div id="header"><h2>WEB Personal<h2></div>
<div id="content">
<form name="form1" action="">
<table>
<tr> <td width="120px">Nama </td> <td><input type="text" name="nama"></td></tr>
<tr> <td>Jenis Kelamin </td> <td><input type="radio" name="jkel" value="Pria"> Pria <input type="radio" name="jkel" value="Wanita"> Wanita</td></tr>
<tr> <td>Jurusan </td> <td>
<select name="jurusan">
<option>T Informatika</option>
<option> T Industri </option>
<option> Matematika </option>
<option> Sis Informasi </option>
<option> T Elektro </option>
</select>
</td></tr>
<tr><td> </td> <td><input type="submit" name="kirim" value="kirim"></td></tr>
</table>
</form>
</div>
<div id="footer">© WEB Personal 2011<br> Workshop Pemrograman WEB</div>
</body>
</html>
webstyle.css :
#header {
Width:90%; height:50px;
Padding: 10px 5% 10px 5%;
Background-color : #efeffe;
}
#header h2 {
font-family : tahoma, verdana, serif;
font-size: 18px;
color : #e33;
}
#footer {
Width:100%; height:50px;
Padding: 10px 0 5px 0;
Text-align:center; Font-size:12px; Color:#ffffff;
Background-color : #3f3f3f;
}
#content{
Width:1000px; height:450px;
margin:auto;
border-left: 3px #efefff solid;
border-right: 3px #efefff solid;
}
good luck.. :)
