Rabu, 20 Juni 2012

langkah menggabungkan file html dan css

1.       Inline Style
Inline Style adalah cara penulisan file CSS secara langsung kedalam Tag HTML, berikut ini contoh penulisan Inline Style:
<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
</head>
<body>

<p>
<h2 style=”color:#FFCC00″>Contoh untuk Inline Style
</p>
</h2
</body>
</html>
Keterangannya : tulisan ‘ Style ‘ itu merupakan perintah CSS untuk tulisan di H2 supaya warna font di rubah menjadi warna #FFCC00 ( Orange )
2.Embedded Style
Embedded Style merupakan cara penulisan CSS kedalam file HTML per halaman ( Page )
Berikut ini contoh penulisannya :
<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
<style type=”text/css”>
h2{
color:#FFCC00;
background:#CC0000;
}
</style>
</head>
<body>

<p>

<h2>Contoh untuk Embedded Style
</p>
</h2>
</body>
</html>

Seperti anda lihat contoh penulisan diatas untuk Embedded Style penulisan CSS di antara <head>…</head> disini tulisan CSS langsung di eksekusi oleh browser dan untuk type seperti ini cocok untuk website yang halamannya tidak banyak misalnya untuk company profil dll.


Untuk yang lebih komplek cocoknya menggunakan Link Style yang akan kita bahas di bawah ini.
3.Link Style


Untuk penulisan Link Style merupakan penulisan secara terpisah antara file HTML dan file CSS dan kita tinggal memasang link saja, dan pemasangan Link anda bisa taruh di antara <head>…</head>.
Berikut ini contoh penulisannya.
File HTML : ( anda simpan dengan nama index.html )
<html>
<head>
<title>Penggabungan File HTML dan CSS</title>
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>

<p>

<h2>Contoh untuk Link Style
</p>
</h2>
</body>
</html>
Anda buat folder baru dengan nama css dan anda simpan code dibawah ini dan  anda simpan ke dalam folder tersebut dengan nama  style.css  )
h2{
color: #FFCC00;
background: #CC0000;
}


Anda bisa melihat hasilnya dengan membuka file index.html pada browser anda dengan menklik 2 kali.
Anda masih bisa membuat file html dengan memberi nama yang lain dan letakkan di antara <head>…</head> anda beri linkini:
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
Dan anda bisa merubah tampilan seluruh halaman hanya dengan mengedit file style.css maka seluruh file juga ikut berubah mengikuti apa yang anda rubah.

Tidak ada komentar:

Poskan Komentar