Find best premium and Free Joomla templates at GetJoomlaTemplatesFree.com

CSS Lanjutan

lebih lanjut dengan css
kali ini kita akan membuat sebuah webpage dengan tampilan seperti dibawah ini.


siapkan bahan-bahannya...  (hehehehe kayak resep ayam goreng)
1. gambar berextensi .png ukuran 1000px X 250px, buatlah dengan menggunakan photoshop atau corel, beri nama bgheader00 , tentu saja gak harus sama dengan gambar yang disini, yang penting ukuran dan extensi filenya sama
2. gambar berukuran 400px X 380px extensi .jpeg, (yang ini optional, gambar ukuran apa saja okelah, tapi extensinya jpeg aja biar ntar gak bingung) beri nama gambarnya 001.jpg
3. file css
4. file html atau php

sebelumnya siapkan folder baru di public folder server anda (kalo wamp difolder "www" kalo xamp "htdocs"), beri nama terserah anda, kalo saya sih pake nama latian-css.
didalam folder "latian-css" saya bikin tiga folder baru, yang masing2 saya beri nama "css" , "images" , "gambar".
oke, kita mulai saja.
aktifkan text editor anda (notepad atau notepad++), lalu bikin file baru dan ketikkan code2 dibawah ini, (atau copas aja brooooooooo)
---------------------------------
/*body*/
.body001{background:#000000;color:#ececec;font-size:15px}
h1{font-size:25px;border:solid #ececec 1px;border-radius:15px;padding:5px;background-image:url('../images/bgh1.png');color:blue;padding:2px;text-align:center}
/*header*/
.header001{width:1000px;height:250px;position:absolute;top:2px;left:250px;background-image:url('../images/bgheader00.png');border:solid #ececec 1px;border-radius:15px;padding:5px}

/*menubar*/
.navbar{width:999px;height:30px;position:absolute;left:5px;
bottom:5px;background:url('../images/bgh1.png');border:solid #ececec 1px;border-radius:15px}
/*content*/
.main001{width:1000px;position:absolute;top:270px;left:250px;border:solid #ececec 1px;border-radius:15px;padding:5px}
.leftcontent{width:480px;height:500px;position:relative;top:5px;left:4px;border:solid #ececec 1px;border-radius:15px;padding:5px}
.rightcontent{width:480px;height:500px;position:absolute;top:10px;right:5px;border:solid #ececec 1px;border-radius:15px;padding:5px}

/*list*/
.myul{list-style-type:none;margin:0;padding:0;padding-top:6px;padding-bottom:6px;position:relative;left:8px;}
li{display:inline;}
a:link,a:visited{font-weight:bold;color:red;text-align:center;padding:2px;text-decoration:none;text-transform:uppercase;}
a:hover{color:blue;font-size:120%}
a:active{color:grey;}

/*gambar*/
.myimg{width:200px;height:180px;float:left}
.myimg02{width:200px;height:180px;float:right}
------------------------------------------------------
simpan file ini difolder "css" dengan nama style001 dan harus dengan extensi .css

file kedua.
buat file baru lagi dan masukkan code2 dibawah ini
-----------------------------------------------
<!DOCTYPE html>
<html><head>
<title>learn CSS</title> <link rel="stylesheet" type="text/css" href="/css/style001.css">

</head>
<body class="body001">
<div class="header001"> <div class="navbar"><ul class="myul">
<li><a href="#home">Home</a></li>
<li><a href="#home">Profile</a></li>
<li><a href="#home">artikel</a></li>
<li><a href="#home">menu</a></li>
<li><a href="#home">my page</a></li>
</ul></div></div>
<div class="main001">
<div class="leftcontent"><h1>judul kiri</h1>
<img class="myimg" src="/gambar/001.jpg"/>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda<br>


</div>
<div class="rightcontent"><h1>judul kanan</h1><img class="myimg02" src="/gambar/001.jpg"/>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br>
content anda content anda content anda content anda <br></div>
</div>
</body></html>
----------------------------------------
kalimat "content anda" bisa anda ganti semau anda.
save dan letakkan folder ini di folder "latian-css" dan simpan dengan nama mypage02 dengan extensi .html atau .php
gambar dengan nama 001.jpg harus ada difolder gambar
gambar dengan nama bgheader00.png harus ada difolder "images"

setelah semua terletak ditempat yang seharusnya, lakukanlah test.
masukkan di address bar browser anda localhost/latian-css/mypage.html atau mypage.php (tergantung extensi yang anda pilih)
selamat berkreasi.

Add comment


Security code
Refresh