Merancang Layout Web Dengan HTML & CSS
Setelah mengumpulkan niat sedalam-dalamnya dan atas berkat rahmat Tuhan YME, akhirnya saya berinisiatif membuat kembali tutorial :D. Kali ini saya ingin berbagi tutorial klasik yang sudah banyak dibahas sebenarnya, namun jika ada yang mampir atau nyasar di blog saya ini, semoga bagi yang udah master kasih masukan dan bagi yang ingin belajar bisa dapat di pahami tutorial ini :).
Oke langsung saja, apa itu HTML? apa itu CSS? silahkan cari definisi bisa dari buku atau dari goole lah lebih gampang :D. Oke, sebelumnya siapkan dulu editornya, sebaiknya gunakan Notepad++ selain ringan ini juga freeware alias gratis dan bebas untuk komersil.
Oke langsung saja, kali ini karena lumayan banyak jadi saya langsung memberi source nya biasa hanya memberi screenshoot saja :p.
Untuk file HTML-nya:
Untuk file HTML-nya:
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <title>Halaman Sederhana!</title></head> <body> <center> <!--memanggil header !--> <img src="header.jpg" class="banner"> <!--akhir pemanggilan header!--> </center> <!--membuat tabel baru!--> <table border="1" align="center" class="menuatas"> <tr> <td><a href="#">Home</a></td> <td><a href="#">Berita Politik</a></td> <td><a href="#">Berita Ekonomi</a></td> <td><a href="#">Berita Internasional</a></td> <td><a href="#">Berita Olahraga</a></td> <td><a href="#">Berita Teknologi</a></td> <td><a href="#">Berita Hiburan</a></td> </tr> </table> <!--penutup tabel perta!--> <!--membuat tabel kedua!--> <table border="1" align="center" class="tabelisi"> <tr> <td valign="top" width="200"> </td> <td valign="center" align="center"> </td> </tr> </table> <!--penutup tabel kedua!--> </body> </html>
Untuk file CSS-nya:
.banner{
width:800;
height:150;
}
body{
background-color:#cccccc;
}
.menuatas{
width:800px;
background:white;
border-left:2px;
border-collapse:collapse;
border-right:20px;
border-right-color:gray;
border:hidden;
padding:2px 2px 2px 2px;
padding-top:10px;
}
.menuatas td:hover{
background:yellow;
font-size:20px;
}
a{
text-decoration:none;
text-align:center;
font:bold;
color:blue;
}
.tabelisi{
background:#0099ff;
border-collapse:collapse;
width:800;
height:400;
}
Simpan file tadi dalam satu folder, dan untuk file HTML beri nama index.html sedangkan file CSS-nya beri nama style.css. Oh iya seharusnya bagian awal tapi ga apa deh, buat sebuah header yang ukurannya 150x800(px) dan beri nama header.jpg(fyi:header pada tutorial ini saya pake header orang males buat sendiri :D), gimana membingungkan ya tutorialnya ? kalau masih ada kebingungan silahkan tanya saja ya :D, salam blogger :)
Eh ada yang ketinggalan, ini dia hasil akhirnya:
0 komentar :
Post a Comment
Gunakan bahasa yang santun ya :)