Rabu, 06 Mei 2015
Membuat tampilan
Website menggunakan CSS
CSS adalah singkatan
dari Cascading Style Sheet yang berarti kumpulan kode-kode yang
berurutan & saling berhubungan untuk mengatur
format / tampilan suatu halaman HTML.
CSS
berfungsi mengatur beberapa gaya / style elemen-elemen HTML seperti mengganti
jenis font, ukuran font, perataan dalam dokumen, & sebagainya. Penggunaan CSS lebih
dianjurkan daripada menggantikan jenis font & sebagainya dengan menggunakan atribut
HTML.
CSS lebih mudah terapkan karena untuk merubah banyak elemen HTML dengan
style yang sama hanya dengan membuatkan satu style, beda dengan HTML yang
diharuskan merubah setiap atributnya.
Pada tugas 1 untuk membuat tabel kita menggunakan
tag <table> untuk membuat daftar nama mahasiswa STT Ibnu Sina Batam akan tetapi pada tugas 2 ini kita akan menggunakan tag <div>
untuk membuat tabel karena lebih mudah digunakan.
Berikut contoh tag <div> untuk membuat table
:
<div style="background-color:#0000FF">
<h1>this is table with div</h1>
</div>
<h1>this is table with div</h1>
</div>
Hasilnya, browser akan menampilkan seperti
berikut :
Setelah itu kita akan menggabungkan tag CSS dan
HTML seperti pada tag dibawah ini:
<html>
<head>
<style>
#header{
background-color:#2A2A2A;
color:white;
text-align:center;
padding:5px;
}
#nav{
line-height:30px;
background-color:#EEEEEE;
height:500px;
width:200px;
float:left;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
background-color:#2A2A2A;
color:yellow;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<font
face="century gothic">
<div
id="header">
<h1>CITY
GALLERY</hi>
</div>
<div
id="nav">
<li><a
href ="RAP.html">Raja Ampat Papua</a></li>
<li><a
href ="BALI.html">Pulau Bali</a></li>
<li><a
href ="BNK.html">Bunaken</a></li>
<li><a
href ="YKG.html">Yogyakarta</a></li>
<li><a
href ="LBK.html">Lombok</a></li>
<li><a
href ="BRM.html">Bromo</a></li>
<li><a
href ="KMD.html">Komodo</a></li>
<li><a
href ="TOB.html">Danau Toba</a></li>
<li><a
href ="WTB.html">Wakatobi</a></li>
<li><a
href ="TRJ.html">Toraja</a></li>
</div>
<div
id= "section">
<h1></h1>
<p>
Choose
Your City....
</p>
</div>
<div
id ="footer">
copyright© 3Idiot.com
</div>
</font>
</body>
</html>
copyright© 3Idiot.com
</div>
</font>
</body>
</html>
Hasilnya,
browser akan menampilkan seperti berikut ini :
Akan lebih bagus jika kita menambahkan banyak
file html pada website tersebut.
Demikian terimakasih !!!
Download Disini !!!
