<!DOCTYPE html PUBLIC "-//w3c//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>NongkrongMu - halaman utama</title>
<meta http-equiv="Content-Langue" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Gembalak Corporation" />
<style type="text/css" media="all">@import "style/style.css";</style>
<style type="text/css" media="all">@import "style/style.css";</style>
</head>
</body>
</html>
Setelah itu kita buat bagian-bagian dari website dengan menggunakan div tag.
kira-kira seperti berikut:
<div id="header">Ini Header</div>
<div id="content"></div>
<div id="Kiri">Ini Kiri</div>
<div id="Kanan">Ini Kanan</div>
</div>
<div id="footer">Ini Footer</div>
Lalu kita beri style pada bagian index.html agar dapat melihat bagian dari div yang telah kita buat tadi. letakkan style pada direktori style. beri nama style dengan nama style.css lalu kita beri warna pada setiap bagian div agar kita dapat melihat bagian-bagian dari website.
html, body{
margin:0;
padding:0;
}
#header{
background-color:green;
height:30px;
}
#content{
}
#Kiri{
background-color:grey;
height:30px;
}
#Kanan{
background-color:red;
height:30px;
}
#footer{
background-color:orange;
height:30px;
}
Lalu tampilan nya akan menjadi seperti ini
Setelah itu kita rubah ukuran tinggi pada masing-masing bagian div rubah kode style.css seperti berikut:
#header{
background-color:green;
height:75px;
}
#content{
}
#Kiri{
background-color:grey;
height:800px;
}
#Kanan{
background-color:red;
height:800px;
}
#footer{
background-color:orange;
height:90px;
}
Rencananya saya akan membuat bagian Kiri dan Kanan pada content berjejeran maka tambahkan kode sebagai berikut:
#Kiri{
float:left;
background-color:grey;
width:35%;
height:800px;
}
#Kanan{
float:right;
background-color:red;
width:65%;
height:800px;
}
Lalu tampilan nya akan seperti berikut:
Namun pada tampilan tersebut style pada footer yang awalnya orange menjadi menghilang. untuk mengatasi nya tambahkan kode berikut pada style css:
#footer{
clear:both;
background-color:orange;
height:90px;
}
dan style footer akhirnya kembali lagi seperti ini:
Bagian Header
Setelah itu mari kira utak atik bagian header nya. Kita akan memberi judul dan form login yang terdiri dari label, input text dan tombol submit. tambahkan kodingan berikut dalam tag header pada file index.html:
<table>
<tr>
<td><label for="nama">Email</label></td>
<td><label for="password">Password</label></td>
</tr>
<tr>
<td><input type="text" name="email" value="Email"/></td>
<td><input type="password" name="password" value="Password"/></td>
<td><input type="submit" name="submit" value="Masuk"/></td>
</tr>
</table>
<h1>NongkrongMu<h1>
</table>
tampilan nya akan berubah seperti berikut:
terlihat tampilan judul nya malah masuk pada bagian content sehingga terlihat tidak teratur. Mari kita tambahkan edit pada bagian style agar tampilan nya sedikit teratur, kira-kira seperti berikut:
#header h1{
color:white;
float:right;
padding-right:50px; /*jarak judul dengan bagian tepi kanan*/
padding-bottom:0;
}
#header table{
color:white; /*mengubah font menjadi warna putih*/
float:left;
font-size:12pt;
margin-top:7px; /*jarak table dengan top*/
margin-left:10px;
}
Nah tampilan nya akan jadi seperti berikut:
Bagian Content
Sekarang kita akan menguta-atik bagian content web nya tambahkan form pendaftaran pada conten bagian Kiri dengan code sebagai berikut pada index.html:
<div id="Kiri">
<h1>Mendaftar</h1>
<table>
<tr>
<td><label for="nama">Nama Lengkap</label></td>
<td><input type="text" name="nama" value="Nama"/></td>
</tr>
<tr>
<td><label for="email">Email</label></td>
<td><input type="text" name="email" value="Email"/></td>
</tr>
<tr>
<td><label for="password">Password</label></td>
<td><input type="password" name="password" value="Password"/></td>
</tr>
<tr>
<td><label for="password2">Konfirmasi Password</label></td>
<td><input type="password" name="password2" value="Konfirmasi Password" /></td>
</tr>
<tr>
<td><label for="tanggal">Tanggal Lahir</label></td>
<td><input type="date" name="tanggal" /></td>
</tr>
<tr><td>Jenis Kelamin:</td>
<form method="post" action="#">
<td><input type="radio" name="jk" value="Laki"/>Laki-laki
<input type="radio" name="jk" value="Perempuan"/>Perempuan</td>
</tr>
</table>
</form>
<input type="submit" name="submit" value="Mendaftar"/>
</div>
Setelah itu kita akan beri style pada table content bagian kiri yang digunakan untuk membuat form tersebut dengan menambahkan code css sebagai berikut pada style.css:
#Kiri table{
padding:7px;
line-height:3;
}
Lalu kita otak atik pada bagian kanan dengan menambahkan sedikit deskripsi tentang web nya. Tambahkan code sebagai berikut pada index.html:
<div id="Kanan">
<h1>NongkrongMu<br>
Temukan pengalaman baru, teman-teman baru, event-event seru dan jadilah nongkronger sejati</h1>
</div>
Setelah itu tampilan nya akan berubah seperti berikut:
setelah itu kita hilangkan background warna untuk diganti gambar agar terlihat menarik, ubah kode pada style.css pada bagian kiri kanan sebagai berikut:
#Kiri{
float:left;
/* background-color:grey; */
width:35%;
height:800px;
}
#Kiri table{
padding:7px;
line-height:3;
}
#Kanan{
float:right;
/* background-color:red; */
width:65%;
height:800px;
}
kita akan beri background gambar pada bagian body agar terlihat lebih menarik tambahkan tag sebagai berikut. anda bisa menambahkan sendiri gambar sesuai dengan kreasi anda:
<body background="images/city.jpg">
Nah tampilan nya akan menjadi seperti berikut:
Bagian Footer
Sekaran kita akan mengutak atik bagian footer. tambahkan code seperti berikut pada bagian footer pada index.html:
<div id="footer">
<div id="altnav">
<a href="#">Tentang</a>
<a href="#">Pengembang</a>
<a href="#">Iklan</a>
<a href="#">Lowongan</a>
<a href="#">Term of Trade</a>
<a href="http://www.Gembalak.com/">Gembalak</a>
<a href="http://www.StrongDeathPeople.com/">StrongDeathPeople</a>
</div>
Copyright © Gembalak.com<br>
</div>
Setelah itu kita beri style pada footer tersebut. Kita tambahkan code berikut pada style.css:
#footer {
margin-top:7px;
padding-left:15%;
background:white;
height:90px;
}
#footer a{
padding:7px;
}
tampilan nya akan berubah seperti berikut:
Font
Kemudian agar lebih menarik ubah font default dengan menambahkan code berikut pada style.css:
html, body{
margin:0;
padding:0;
font-family:"segoe ui",arial,sans-serif;
}
h1,h2,h3,h4,h5,h6{
font-family:"Museo Slab 500", impact, arial, sans-serif;
font-weight:normal;
}
Nah tampilan akhirnya akan seperti berikut:
Nah sekian turotorial kali ini. anda dapat berkreasi sekreatif anda. tidak harus terpaku pada turotorial saya ini. apabila ada yang kurang mohon koreksinya. masalahnya saya juga masih newbie. hhe
Tidak ada komentar:
Posting Komentar