Pengenalan XHTML
XHTML adalah cara penulisan perintah-perintah untuk menghasilkan tampilan halaman website. Halaman XHTML memiliki struktur seperti contoh berikut:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">Isi dari halaman website dituliskan pada bagian antara
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
</body>
</html>
<body> dan </body>. Sedangkan bagian <head> sampai dengan </head> digunakan untuk menyisipkan perintah (tag) lainnya seperti memanggil file javascript, mendeklarasikan kata kunci (keywords) dan menuliskan keterangan tentang halaman website (description). Perintah untuk memanggil file CSS juga ditempatkan pada bagian ini.Sedangkan kode-kode yang biasa digunakan untuk menuliskan isi dari halaman website adalah seperti contoh berikut:
<p> ... </p>
Untuk menempatkan teks yang berupa paragraf.<h1> ... </h1>,<h2> ... </h2>,<h3> ... </h3>
Untuk menuliskan judul dari kelompok paragraf.<div> ... </div>
Disebut sebagai layer yang berfungsi untuk mengelompokkan beberapa paragraf.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">Kode-kode XHTML lainnya yang bisa Anda pelajari dari file yang dapat diunduh dari sini.
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<div>
<h1>Contoh Halaman Website</h1>
<p>
Ini adalah isi paragraf
dari contoh halaman website
</p>
</div>
</body>
</html>
Penggunaan CSS
CSS dapat dibuat hanya dengan menggunakan Notepad atau text editor sederhana lainnya dan disimpan dengan ekstensi.css. Agar halaman website dapat membaca file CSS tersebut maka perlu ditambahkan baris kode tertentu pada bagian <head></head> halaman website tersebut seperti contoh di bawah ini:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">[URL] = Alamat URL tempat file CSS tersebut disimpan
<html>
<head>
<title>Judul Halaman</title>
<!-- Baris yang ditambahkan -->
<link rel="stylesheet" href="[URL]" type="text/css" media="screen" />
<!-- Akhir dari baris yang ditambahkan -->
</head>
<body>
<div>
<h1>Contoh Halaman Website</h1>
<p>
Ini adalah isi paragraf
dari contoh halaman website
</p>
</div>
</body>
</html>
Penulisan kode CSS
Kode CSS disebut dengan style. Penulisan kode CSS dalam sebuah file CSS adalah dengan format sebagai berikuttag { property: value; }tag = tag XHTML, atau nama layer dimana style tersebut berfungsi.property = Detail yang tampilannya diubah dengan style tersebut.
value = Nilai dari properti di atas.
Sebagai contoh, untuk mengubah format tampilah dari sebuah judul artikel (header) yang memiliki kode
<h1>Contoh Halaman Website</h1> menjadi bergaris bawah, berwarna biru dan berukuran 28 pixel, maka dalam file CSS dapat ditulis:h1 { text-decoration: underline, color: blue; font-size: 28px; }Hal tersebut akan menimbulkan efek yang sama untuk setiap kali kode <h1> ... </h1> digunakan dalam halaman XHTML.Cara penulisan lainnya adalah dengan mendefinisikan style berdasarkan class atau ID layer. Untuk cara ini, maka kode XHTML harus mendefinisikan nama class atau identitas layer yang digunakan seperti pada contoh berikut:
- Header dengan class bernama “judul”
Pada halaman XHTML ditulis:<h1 class="judul">Contoh Halaman Website</h1>
Pada file CSS didefinisikan:.judul { text-decoration: underline, color: blue; font-size: 28px; }Kode ini tidak merubah semua tag - Header dengan ID bernama “judul”
Pada halaman XHTML ditulis:<h1 class="judul">Contoh Halaman Website</h1>
Pada file CSS didefinisikan:#judul { text-decoration: underline, color: blue; font-size: 28px; }
Kode ini juga memiliki pengaruh yang sama dengan penggunaan berdasarkan class.
<h1> ... </h1>, namun akan merubah semua tag yang memiliki nama class yang sama seperti misalnya: <div class="judul"> ... </div>Hal utama yang perlu diperhatikan adalah bahwa penulisan style dalam CSS harus berurutan dan diperhatikan agar jangan sampai tumpang tindih. Untuk lebih jelasnya, perhatikan contoh berikut:
Pada CSS tertulis:
h1 { text-decoration: underline, color: blue; font-size: 28px; }
#pagetitle { font-size: 12px; }Pada halaman website tertulis:<h1 id="pagetitle">Contoh Halaman Website</h1>Maka yang terjadi adalah, pada tampilan website besar tulisan “Contoh Halaman Website” adalah hanya 12 pixel, bukan 28 pixel karena ID untuk tag h1 yaitu
#pagetitle dituliskan paling akhir.Class dan ID dalam CSS
Untuk memudahkan, berikut adalah penjelasan secara umum tentang penggunaan class dan ID dalam CSS dan XHTML.- ID juga dapat digunakan untuk menamai tag sebagai identifikasi pada javascript.
- ID bersifat unik pada setiap halaman, tidak boleh lebih dari satu tag memiliki id yang sama pada satu halaman yang sama.
- Class dapat digunakan berulang kali, satu tag dapat memiliki class lebih dari satu seperti misal:
<h1 class="judul besar kanan">Contoh Halaman Website</h1>
dimana judul, besar dan kanan memiliki style yang saling melengkapi. - ID biasanya bersifat global yang dibedakan menjadi blok-blok tertentu misalkan, header, content, sidebar dan footer. Class biasanya digunakan untuk membedakan style tertentu yang dibedakan antara misalnya warna, jenis huruf atau besar huruf.
- Class dapat digunakan untuk mempertegas style dari ID yang bersifat global dengan menggunakannya bersama-sama pada satu tag seperti misal:
<h1 id="pagetitle" class="judul">Contoh Halaman Website</h1>
0 komentar:
Posting Komentar