CSS Tahap Lanjut BAB Cascade dan Inheritance Cascade

(1)

(2)

BAB 6

CSS Tahap Lanjut

Pada bagian ini, kita akan melihat tahap berikutnya dalam penggunaan CSS dan aspek-aspek selanjutnya dalam penggunaan CSS ini. Kita mempelajari tahap ini untuk mengetahui lebih dalam tentang aspek-aspek rumit dalam CSS dan kekuatan dalam penggunaan style sheet (CSS) dalam sebuah halaman web.

6.1 Cascade dan Inheritance

Anda mungkin bertanya-tanya apakah arti dari cascading dalam cascading style sheet (CSS). Pada section ini kita akan mempelajari tentang cascade dan inheritance(pewarisan nilai). Kedua komponen ini harus anda mengerti dalam pembatan web menggunakan CSS untuk mengetahui perbedaan antar keduanya dan cara penggunaannya dalam sebuah halaman web.

6.1.1 Cascade

Penggunaan sebuah dokumen style sheet dalam penentuan tampilan pada sebuah halaman web sangat berarti untuk sebuah situs yang kecil, penggunaan sebuah style sheet sudah mencukupi kebutuhan format tampilan pada halaman web tersebut, tapi untuk situs dengan skala besar, khususnya situs yang diatur oleh banyak orang (mungkin saja sebuah team dimana team ini terpisah jarak jauh dan tidak pernah berkomunikasi), untuk ini satu buah style sheet tidak akan menyediakan cukup akses dalam mengedit situs tersebut, dan banyak keterbatasan yang akan didapat.

Cascading style sheet tidak seperti style sheet yang anda gunakan dalam pembuatan web menggunakan word processing seperti Microsoft frontpage dan microsoft publisher. Ini karena CSS dapat dihubungkan bersama dalam sebuah halaman web untuk menciptakan suatu susunan yang hierarki dari style sheet yang berhubungan tersebut. Proses penghubungan antara style sheet inilah yang disebut cascading. Selanjutnya kita akan melihat mengapa menggunakan cascading adalah ide yang bagus untuk membangun sebuah web.

(3)

Mengatur style untuk situs yang besar menggunakan @import

Bayangkan bagaimana sebuah situs untuk organisasi yang besar, sebut saja sebuah korporasi, akan terstruktur. Seiring berkembangnya sebuah web, divisi individu, departemen dan grup kerja akan lebih bertanggung jawab untuk masing-masing section yang mereka dapat dalam sebuah web. Kita sudah dapat melihat adanya suatu masalah disini. Bagaimana kita akan menjamin website akan konsisten dan mempunyai tampilan yang selalu berkembang untuk pengaturan situs besar seperti ini.

Sebuah tim pengembang yang terpadu bisa menjamin style sheet yang dibuat akan mengikuti petunjuk agar situs tersebut tidak mengalami kegagalan tampil pada browser.

Jika kita hanya menggunakan halaman HTML biasa, maka kegagalan dalam kerja sama untuk sebuah web mungkin tidak akan tercipta. Tapi dengan sebuah file style sheet, pengaturan situs akan lebih mudah. Pengaturan seluruh tampilan halaman web, bisa diatur dalam satu buah file saja, sangat mudah untuk diedit dan dikembangkan. Akan tetapi ada masalah baru muncul bagaimana caranya agar setiap grup kerja yang bertugas mengubah dan mengatur style sheet tersebut mempunyai tampilan yang sama dengan yang lain dan versi terakhir dari style sheet tersebut telah disebarkan ke masing-masing grup dan sudah diperbaharui.

Jika anda memikirkan bahwa pada situs besar kita hanya membuat sebuah style sheet dan akan diatur oleh beberapa grup kerja, maka hal itu tidak mungkin, bagaimana jika kebutuhan tampilan pada masing-masing divisi grup kerja berbeda-beda, misalkan pada suatu perusahaan, mereka mempunyai beberapa divisi kerja misalkan saja divisi pembangunan akan berbeda tampilan halaman webnya dengan tampilan dari divisi hubungan masyarakat, tapi tampilan-tampilan dari berbagai divisi kerja ini masih mempunyai bentuk dasar dan tema situs awal perusahaan tersebut.

CSS (Cascading Style Sheet) bisa melakukan semua ini, dengan menggunakan cascade, kode-kode pada CSS yang digunakan untuk menentukan tampilan setiap divisi kerja pada perusahaan tadi akan mudah dibuat secara terpisah meskipun berada pada satu file style sheet.

CSS tidak harus berdiri sendiri. CSS bisa mengimport style dari file CSS lain.

Style sheet yang mengimport style dari file CSS lain disebut cascade dari file CSS tersebut.

Disini kita akan membahas bagaimana cara menggunakan sebuah file CSS tadi untuk menyelesaikan kasus perusahaan seperti yang telah dikemukakan diatas.

(4)

Pada tingkatan atas file CSS, perusahaan bisa meletakkan style sheet yang utama, dimana style sheet ini dapat menentukan tampilan dasar dan tema situs dari perusahaan tersebut. Ini dapat berisi aspek font, warna, warna background dan seterusnya.

Setiap divisi akan mempunyai style sheet tersendiri. Style sheet ini tidak harus memproduksi style sheet utama lagi, cukup menambahkan style yang ditentukan pada style sheet divisi tersebut. Untuk menjamin bahwa style sheet divisi ini membawa style sheet utama dari perusahaan tersebut kita cukup menambahkan penghubung yaitu aturan @import

Menggunakan cara seperti itu, kita dapat mengatur situs besar seperti perusahaan yang kita deskripsikan di atas. Setiap perubahan yang kita lakukan pada setiap divisi style sheet maupun style sheet utama akan dapat berpengaruh pada masing- masing divisi dan tampilan halaman utama pada web.

Specificity (pengkhususan)

Pada poin ini, kita akan membahas specificity. Apa yang tejadi jika dua buah properti pada aturan yang terpisah berlaku pada satu buah elemen yang sama dan satu sama lain saling berlawanan. Sayangnya, dua buah properti ini tidak dapat diberlakukan pada sebuah elemen pada halaman web (contohnya sebuah text pada elemen tidak mungkin berwarna merah dan biru). CSS menyediakan mekanisme dalam permasalahan ini, yang disebut specificity (pengkhususan).

Beberapa selektor mungkin lebih spesifik daripada yang lain. Sebagai contohnya, class dan selektor ID lebih spesifik dari selektor elemen HTML. Jika dua buah aturan memilih elemen yang sama dan properti-nya berlawanan satu sama lain, aturan dengan selektor yang lebih spesifik akan didahulukan. Beberapa keadaan terkait dengan specificity ini diantaranya dapat diselesaikan dengan cara seperti berikut,

• selektor ID lebih spesifik daripada selektor lain

• Selektor class lebih spesifik daripada selektor elemen HTML dan selektor lain seperti kontekstual, pseudo class dan pseudo elemen.

• Selektor kontekstual dan selektor lain yang melibatkan lebih banyak selektor elemen HTML akan lebih spesifik daripada menggunakan satu buah selektor elemen.

Ada waktu ketika dua buah aturan akan mempunyai specificity yang sama. Dalam kasus ini, aturan yang lebih belakang yang akan menang dan diberlakukan.

(5)

Sebagai contohnya, jika sebuah aturan style sheet di-import dan yang lain berada pada style sheet tersebut sendiri, aturan yang berada pada style sheet yang mengimport akan didahulukan. Jika dua buah aturan berada pada style sheet yang sama, aturan yang lebih jauh letaknya dari awal style sheet akan lebih didahulukan dan akan diberlakukan pada elemen tersebut.

6.2 Inheritance (Pewarisan Nilai)

Setiap halaman HTML terdiri dari banyak elemen seperti heading, paragraf, list dan sebagainya. Biasanya pengembang menggunakan sebutan ‘tag’ untuk mengacu pada sebuah elemen, dengan contoh ‘tag p’. Tetapi secara sederhana <p></p>

bagian dari sebuah elemen. Banyak pengembang web yang tidak mengetahui bahwa setiap elemen adalah dimuat oleh elemen yang lain dan mungkin memuat elemen lain. Secara teknis, ini disebut susunan hirarki sebuah halaman web.

Pada bagian atas dari susunan ini adalah elemen <html> dari halaman tersebut.

Setiap elemen yang ada pada sebuah web akan berada di dalam elemen <html>.

Sama seperti banyak elemen akan dimuat dalam sebuah paragraf, sedangkan paragraf itu sendiri berada dalam elemen <body>. Lihat gambar 6.1.

Gambar 6.1 Contoh adanya inheritance pada struktur CSS

(6)

Dengan menggunakan CSS, elemen biasanya akan diwarisi nilai dari properti yang memuat mereka, dimana properti ini disebut elemen induk. Ini berarti jika anda memberikan elemen body pada sebuah halaman beberapa properti tertentu (sebagai contohnya font dan warna) maka setiap elemen yang berada dalam halaman ini akan mewarisi properti – properti ini. Tidak perlu kita mengatur kembali jenis font dan warna pada setiap elemen, seperti list item atau paragraf.

6.2 Konten Ter-generate Otomatis

Jika Anda mengingat kembali apa fungsi utama sebuah file style sheet CSS, memisahkan tampilan dari konten. Sekarang kita akan berbicara tentang konten yang tergenerate secara otomatis menggunakan CSS. Nah jika CSS juga memuat konten tersebut, apakah kita sudah melanggar sebuah tujuan utama penggunaan file CSS?. Ini sudah menjadi perdebatan antara ahli CSS. Kita akan mempelajari bagaimana cara membuat konten yang ter-generate secara otomatis ini.

Pertama, catat bahwa jenis dari konten yang ter-generate ini sudah muncul pada CSS1. Anda dapat mengambil contoh list yang memuat bullet list dan number list. Penambahan penomoran list ini menggunakan cara yaitu menambah sebuah bullet atau nomor secara otomatis pada setiap item list yang baru.

Properti pada CSS2 memperkenalkan cara untuk membuat konten ter-generate secara otomatis yang lebih kuat. Disini kita akan mempelajarinya.

Ada dua aspek untuk meng-generate konten secara otomatis, diantaranya:

• Pertama, kita perlu mengetahui dimana konten ini akan diletakkan

• Kemudian kita akan menentukan konten apa yang akan dimasukkan Dimana konten ini akan diletakkan?

Untuk menjawab pertanyaan ini, CSS 2 sudah memperkenalkan class pseudo yang kita lihat pada bahasan sebelumnya. Aturan :before dan :after pada class pseudo tergantung pada selektor dan memperbolehkan peletakkan konten yang ter-generate di sebelum dan setelah elemen yang terpilih. Sebagai contoh anda menginginkan meletakkan sesuatu sebelum heading 1. Selektor elemen pseudo untuk melakukan ini adalah h1:before

Konten apa yang akan dimasukkan ?

Untuk melakukan ini kita akan menggunakan properti baru yang diberi nama content Properti content ini dapat mendefinisikan konten yang akan dimasukkan sebelum dan setelah elemen terpilih.

(7)

Content

Apa yang dilakukan properti ini?

Properti content menentukan apakah konten akan ditambahkan setelah atau sebelum elemen yang terpilih (:before dan :after class pseudo). Ini hanya bisa diaplikasikan dengan selektor class pseudo.

Nilai properti (properti value)

Seperti disebutkan diatas, properti content terdiri dari beberapa bagian, yaitu:

• String text

• Gambar dan sumber yang lain

• Counter

• Kata kunci yang menyatakan elemen

• Hasil dari fungsi attr()

6.2.1 String text

Nilai pada properti ini akan memasukkan string text sebelum atau sesudah elemen terpilih.

Syntax

Misalkan kita ingin memunculkan konten “chapter” sebelum heading 1 pada halaman web.

h1:before

{content:”chapter”}

Untuk ini yang anda butuhkan hanya meletakkan text yang ingin anda munculkan diantara tanda petik seperti contoh diatas.

6.2.2 Counter dan Counters

Nilai counter cukup banyak terlibat dalam halaman web. Counter dapat dibilang sebuah versi istimewa dari list dengan penomoran. Counter mempunyai nama dan format tampilan.

(8)

Anda membuat counter ini dengan fungsi counter, kemudian menggunakan fungsi ini untuk digabungkan dengan properti content untuk menambahkan penanda untuk sebuah dokumen

Ada dua bentuk dari fungsi counter diantaranya:

• Bentuk counter

• Bentuk counters

Fungsi counter mempunyai bentuk counter(identifier, list style). Identifier tersebut adalah nama dari nilai counter yang akan dimasukkan, sedangkan (optional0 list- style menentukan style counter yang anda inginkan(seperti lower-roman). Style- style ini sama dengan tipe list-style untuk elemen web. Jika browser menemukan fungsi counter, browser akan menentukan nilai counter tersebut pada dokumen, kemudian memasukkannya pada dokumen. Bagaimana cara browser menentukan nilai ini?. Anda dapat mempelajarinya pada properti counter yang sesaat lagi akan kita bahas lebih detail.

Bentuk counters mirip dengan counter, tetapi bentuk ini memperbolehkan beberapa counters dimasukkan pada dokumen dalam satu waktu, dipisahkan dengan string. Anda dapat mempelajarinya pada properti counter yang sesaat lagi akan kita bahas lebih detail.

6.2.3 Kata Kunci yang Menyatakan Elemen

Sampai saat ini, nilai kata kunci ini masih terbatas untuk memperbolehkan dimasukkannya tipe-tipe yang bervariasi dari tanda petik (quote).

• open-quote (menempatkan tanda petik pembuka sesuai dengan yang didefinisikan pada properti quote untuk elemen)

• close-quote (menempatkan tanda petik penutup sesuai dengan yang didefinisikan pada properti quote untuk elemen)

• no-open-quote (tidak menempatkan konten, tetapi menaikkan tingkatan dari struktur dari tanda petik)

• no-close-quote (tidak menempatkan konten, tetapi menurunkan tingkatan dari struktur tanda petik.

Secara sederhana akan bekerja seperti ini. Anda menggunakan properti content dengan nilai kata kunci yang akan didefinisikan, sebagai contohnya, perlunya

(9)

sebuah tanda petik pembuka pada sebuah elemen tertentu. Anda kemudian menggunakan properti quotes untuk menentukan jenis dari tanda petik yang akan ditampilkan. Jika anda tidak menentukan maka secara default, yang akan ditampilkan akan sesuai browser yang dipakai.

6.2.4 attr() function

Nilai terakhir yang mungkin dipasangkan dengan properti content, dan salah satu yang unik adalah fungsi attr(). Properti ini mengembalikan niai dari nama atribut dari elemen yang terpilih. Nilai yang dikembalikan tersebut kemudian dimasukkan sebagai string. Sebagai contohnya, dengan sebuah link, title dari link tersebut bisa dimasukkan setelah link itu sendiri dengan cara seperti berikut,

a:after {

content:attr(title) }

Ini bisa digunakan ketika digabungkan dengan aturan @media untuk menentukan pada saat akan mem-print dokumen halaman tersebut, URL dari link tersebut bisa ditampilkan setelah link itu sendiri. Caranya seperti berikut,

@media print { a:after{

content:attr(href) }}

Bagaimana konten akan ditambahkan?

Konten ditambahkan sebagai inline, block maupun elemn penanda (marker).

Akan tetapi statement yang membuat konetn bisa mengatur tampilan dari konten untuk menjadi sebuah elemen block daripada sebuah elemen inline. Sebagai contohnya:

body:after { content: “Tamat”;

display: block;

margin-top: 2em;

text-align: center;

}

Pada kode diatas, kata dengan string “tamat” akan ditempatkan pada bagian bawah dari halaman sebagai block elemen.

(10)

Nilai default properti

Jika nilai dari properti content ini tidak ditentukan maka secara default akan ditampilkan string kata yang kosong.

Apakah pewarisan nilai (value inheritance) berlaku pada properti ini?

Sebuah elemen tidak mewarisi properti content dari elemen yang mengandung properti ini.

6.2.5 quote

Apa yang dilakukan properti ini ?

Tanda kutip (quote) yang akan digambarkan pada halaman web akan didefinisikan pada properti quote. Properti ini memperbolehkan penggunaan tanda kutip yang berbeda yang akan dibuat pada elemen berbeda (contohnya pada pengisian tanda kutip pada bahasa yang berbeda, dengan menggunakan properti ini kita akan dapat menentukan secara otomatis dimana letak tanda kutip pada bahasa yang berbeda tersebut).

Propery quote menentukan tanda kutip yang akan digunakan untuk tigkatan pemberian tanda kutip yang berbeda. Ini akan digunakan untuk digabungkan dengan nilai kata kunci untuk properti content yang kita lihat diatas. Jika konten mengambil nilai dari properti open-quote dan close-quote, tanda kutip buka dan tutup akan dimasukkan sesuai dengan yang didefinisikan oleh properti quote.

Tanda kutip didefinisikan sebagai daftar dari pasangan string. Setiap pasangan didefinisikan sebagai tanda kutip pembuka dan tanda kutip penutup. Pasangan tersebut dipisahkan menggunakan spasi. Sebagai contohnya, statement berikut ini akan membuat pemberian tanda kutip yang berbeda pada jenis bahasa yang berbeda.

q:lang(en) { quotes: ‘”’ ‘”’ “’” “’” } q:lang(fr) { quotes: “«“ “»” “<” “>” }

Pada bahasa Inggris (q:lang(en)), menurut statement diatas, tingkatan pertama dari tanda kutip adalah tanda kutip double, sedangkan tingkatan kedua dari quote adalah satu buah quote. Pada bahasa Perancis (q:lang(fr)), menurut statement diatas, tingkatan pertama dari tanda kutip akan menggunakan “«“ dan “»”

sedangkan tingkatan keduanya akan menggunakan “<” “>”.

(11)

Jika tidak ada nilai dari properti quote yang ditentukan maka secara default nilainya akan ditentukan oleh browser yang dipakai oleh pengguna.

Sebuah elemen induk akan mewarisi nilai properti quote ke elemen turunannya.

6.6.6 Properti counter dan counters

6.2.6.1 counter

Counter sangat menarik dan salah satu properti yang kuat dan tidak mengejutkan lebih dari sekadar rumit. Tapi jangan takut, sedikit logika dan properti ini akan dapat diatur. Berikut ini bagaimana cara properti ini bekerja.

Counter digunakan secara khusus oleh properti content untuk memasukkan penomoran (seperti “1.5”)sebeleum atau sesudah elemen. Anda tidak perlu membuat sebuah counter. Anda hanya perlu membuat acuan untuk counter ini, maka secara otomatis properti ini akan muncul. Singkatnya, anda dapat membuat aturan sederhana seperi berikut:

h1:before {content: counter(chapter)}

Aturan ini menginstruksikan browser untuk menambah nilai dari counter yang dinamakan “chapter” sebelum setiap tag h1 (heading 1). Tapi apa nilai dari counter?

Kita akan membahas tentang nilai ini sesaat lagi. Jika anda tidak mengatur nilai counter ini maka nilai dari counter akan menjadi 0. Kita tidak menginginkan hal itu. Kita menginginkan heading yang pertama diterima sebagai 1 dan yang kedua diterima sebagai 2 dan seterusnya, bukan heading pertama menjadi 0. Untuk melakukan ini, kita akan menggunakan properti counter-increment. Properti ini akan menaikkan nilai dari counter dengan memberikan nilai kenaikkannya ini (anda dapat menaikkan 2 kali atau menurunkan sekali (menggunakan niai -1) sama seperti menaikkan 1).

Untuk menggunakan properti counter-increment, namai counter yang ingin anda naikkan menggunakan identifier (pengenal) untuk counter tersebut, dan kemudian berikan nilai yang akan digunakan. Pada contoh berikut ini, kita akan menaikkan nilai dari counter dengan menggunakan identifier “judul” untuk setiap elemen

<h1>

h1 {counter-increment: judul 1}

(12)

Anda bisa menggabungkan dua buah aturan yang sempat dilihat diatas, sehingga akan menjadi seperti ini,

h1:before {

content: counter(judul);

counter-increment: judul 1 }

Pada kode diatas, properti ini akan menaikkan nilai counter, kemudian ditambahkan sebelum elemen <h1>. Catat bahwa kasus spesial, yaitu jika anda menaikkan nilai dan menggunakan counter dengan aturan yang sama, dan counter ini dinaikkan sebelum konten utama dimasukkan meskipun jika properti content ada sebelum properti yang dinaikkan nilainya.

Contohnya seperti ini:

<h1>1. Judul</h1>

...<h1>2. Pengenalan</h2>

Kita meninggalkan proses penomoran karena ini sudah dilakukan otomatis.

Ini akan membantu dalam proses mengubah atau menulis, karena section yang dipindah, subsection dan seterusnya, atau menghapus section, memasukkan section baru tidak akan perlu mengulang memasukkan penomoran.

Mari kita lihat contoh yang lebih kompleks, menggunakan subsection. Kita juga akan melihat penggunaan properti counter-reset disini. Beberapa dokumen pasti akan terpisah menjadi bagian section dan subsection. Pada penjelasan diatas, kita sudah melihat bagaimana cara memberi penomoran pada bagian section, tapi bagaimana cara kita untuk meberikan penomoran pada subsection?. Kita akan melihat contoh kode yang digunakan,

h1:before {content: counter(judul);

counter-increment: judul 1 counter-reset: subjudul 0 }

Pada contoh tersebut, kita mengubah lagi nilai dari counter yang bernama subjudul ke nilai 0 setiap kali kita akan memulai section baru(mengansumsikan h1 adalah section baru). Sekarang kita perlu menaikkan nilai dari counter subjudul, untuk setiap subjudul (h2), kemudian memasukkan konten dari subjudl sehingga mendapat penomoran yang benar. Coba kita lihat kode berikut,

h2:before {content: counter(judul) “.” counter(subjudul);

counter-increment: subjudul 1 }

(13)

Ini akan menaikkan nilai counter dari subsection yang bernama subjudul, kemudian akan memasukkan penomoran dengan bentuk “2.5” sebelum tulisan pada heading (h2)

6.2.6.2 counters

Hal terakhir yang kita ketahui tentang penggunaan counter akan lebih terlibat dalam halaman web. Jika kita membuat list (<ol> maupun <ul>) pada sebuah halaman web HTML, list ini akan mempunyai sublist yang memuat sublist kembali dan seterusnya. Tidak akan mengetahui berapa tingkatan yang telah dibuat, jadi bagaimana kita akan mengatur hal seperti ini?. Beruntungnya, W3C mengetahui soal ini dan sudah menemukan solusi untuk permasalahan ini. Counter mempunyai jangkauan khusus yang sering dipanggil “scope”. Jika dibuat sebuah counter, maka jangkauannya dimulai dari tingkatan pertama dimana counter ini dibuat sampai semua tingkatan turunannya

Lihat contoh kode berikut dalam penggunaannya:

ol { counter-reset: item } li { display: block }

li:before { content: counter(item) “. “; counter-increment:

item }

dan halaman HTML nya akan seperti berikut:

</ol>

</ol>

</ol>

</ol>

(14)

Dapat dilihat diatas, setiap tag <ol> akan membuat counter yang bernama “item”.

Setiap daftar dengan text item di dalam <ol> menaikkan nilai dari counter, kemudian akan memasukkan nomor sebelum text item.

Setiap <ol> membuat sebuah counter dinamakan item. Setiap list item di dalam tag <ol> menaikkan nilai dari counter tersebut, kemudian memasukkan nomor di depan list item. Akan tetapi, jika kita mendapati tag <ol> di dalam tag <ol> yang lain, sebuah counter baru yang dinamakan item akan dibuat. Tag <ol> yang lain tidak hilang, hanya akan menunggu sampai jangkauan tag tersebut terpenuhi.

Bayangkan anda ingin memasukkan penomoran yang lengkap untuk setiap list item (sebagai contohnya 2.5.1). dengan menggunakan fungsi counter anda bisa memasukkan nilai untuk counter dengan satu nama. Pada kasus ini adalah nilai pada counter dengan nama item pada tingkatan dimana item tersebut berada.

Bagaimana menentukan counter dengan nama tersebut yang relevan dengan tingkatan dimana counter tersebut berada. Dengan menggunakan fungsi counters.

Kita melihat fungsi counters ini pada properti content diatas. Coba kita review fungsi ini. Fungsi counters mempunyai bentuk,

counters(identifier, string, list-style)

Penggunaan list-style pada kode diatas bersifat optional. Pada dasarnya properti counter relevan jika diletakkan didalam setiap elemen turunan elemen induknya.

Kode ini dapat disimpukan seperti counters(item,”.”).

6.2.6.3 counter-reset Apa yang dilakukan properti ini ?

Properti counter-reset berfungsi mengatur ulang sebuah nilai counter dari sebuah elemen.

Properti counter-reset mengambil nilai dari nama counter yang akan diatur ulang.

Nama dari counter adalah identifier dan kata yang terdiri dari bilangan dan tanda penghubung. Counter ini juga mengambil nilai bilangan bulat dimana akan mengatur nilai dari identifier tadi.

Properti counter-reset juga mengambil daftar dari identifier dan bilangan bulat yang bersifat optional, untuk mengatur nilai dari beberapa counter secara simultan. Seperti contoh berikut, kode ini hanya akan mengatur hanya counter dengan nama counter2:

(15)

h1 { counter-reset: counter1 -1 } h1 { counter-reset: counter2 99 }

Untuk mengatur ulang konfigurasi diatas, kita perlu menggunakan kode berikut:

h1 { counter-reset: counter1 -1 counter2 99 }

Jika tidak ada nilai dari properti counter-reset ini yang ditentukan makasecara default nilainya adalah none.

Sebuah elemen turunan tidak mewarisi nilai dari properti counter-reset ini dari elemen induknya.

6.2.6.4 counter-increment Apa yang dilakukan properti ini ?

Properti counter-increment akan menaikkan nilai dari counter yang telah diberi nama dengan nilai tertentu.

Properti counter-increment akan mengambil nilai dari counter untuk dinaikkan.

Nama dari counter adalah identifier dan kata yang terdiri dari bilangan dan tanda penghubung. Counter ini juga mengambil nilai bilangan bulat dimana akan mengatur nilai dari identifier tadi. Jika tidak ada nilai bilangan bulat yang ditentukan, maka counter akan dinaikkan dinaikkan nilainya sebesar 1.

Properti dari counter-increment bisa juga mengambil daftar identifier dan bilangan bulat opsional, untuk mengatur beberapa counter secara simultan.

Kode ini hanya akan mengatur hanya counter dengan nama counter2.

h1 { counter-increment: counter1 -1 } h1 { counter-increment: counter2 99 }

Untuk mengatur ulang konfigurasi diatas, kita perlu menggunakan kode berikut:

h1 { counter-increment: counter1 -1 counter2 99 }

Jika tidak ada nilai dari properti counter-increment ini yang ditentukan maka secara default nilainya adalah none.

(16)

Sebuah elemen turunan tidak mewarisi nilai dari properti counter-increment ini dari elemen induknya

6.3 Media

Asumsi pada CSS1 yang sebenarnya sangat salah yaitu halaman web ditampilkan menggunakn PC (personal computer) dan monitor. Tetapi, masih banyak terddapat cara untuk menampilkan halaman web daripada hanya menggunakan media PC dan monitor. Dan setiap media yang berbeda ini mempunyai karakteristiknya masing-masing. Media ini mugnkin monokrom, terbatas dalam ukuran dan lain-lain. Media ini juga dapat berupa WebTV. Dan jika kitda melihat ke depan, mungkin akan lebih banyak media yang muncul.

CSS2 memperbolehkan pengaturan untuk masing-masing media yang akan digunakan untuk menampilkan halaman web itu. Pada style sheet CSS yang sama anda dapat menentukan cara mem-print halaman tersebut, alat yang digunakan sebagai media dan seterusnya. Sebagai tambahan, style sheet CSS yang berbeda bisa di-import tergantung media yang akan digunakan untuk browsing.

6.3.1 Aturan @media

Aturan @media adalah subset dari style sheet untuk medium tertentu atau sekumpulan media. Sebuah aturan @media menentukan medium atau media yang mana akan menerapkan aturan ini, kemudian berisi beberapa statement yang biasa kita temukan pada style sheet CSS. Statement ini hanya dapat diaplikasikan hanya jika langsung berhubungan dengan file CSS ini yang nantinya akan ditampilkan pada media dimana aturan @media ini diaplikasikan.

Aturan @media terdiri dari:

• Kata kunci @media

• Daftar dari tipe media, dipisahkan dengan koma.

• Statement yang diaplikasikan pada media ini akan ditempatkan dalam kurung kurawal “{“ “}”

Sebagai contohnya, aturan berikut ini akan membuat background putih dan tulisan text dengan warna hitam pada bagian body dari halaman web ketika halaman tersebut akan ditampilkan pada sebuah browser atau alat penampil web (handheld device).

(17)

@media print, handheld { background: white;

color: black }

6.3.2 Tipe Media

Rekomendasi CSS2 menyediakan tipe-tipe media seperti berikut ini:

• all (cocok untuk segala medium penampil web)

• aural (dimaksudkan untuk penyatu suara (speech synthesizers))

• braille (dimaksudkan untuk medium penampil braile)

• embossed (dimaksudkan untuk halaman print penampil braille)

• handheld (dimaksudkan untuk medium yang portabel seperti screen kecil, monokrom, bandwidth yang terbatas/kecil)

• print (dimaksudkan untuk halaman yang ditampilkan dalam mode tampilan print)

• projection (dimaksudkan untuk presentasi dibantu dengan medium seperti projector atau kertas transparan)

• screen (dimaksudkan untuk layar komputer berwarna)

• tty (dimaksudkan untuk penggunaan medium dengan menggunakan karaktr grid, seperti teletype atau alat portabel dengan kemampuan tampilan yang kecil. Pemilik web seharusnya tidak menggunakan pixel jika ingin menggunakan media “tty”)

• tv (dimaksudkan untuk medium dengan tipe televisi (resolusi kecil, warna rendah dan kemampuan scroll halaman yang rendah)).

6.3.3 Import Media Spesifik dengan Aturan @import

Sebagai tambahan untuk aturan media, CSS2 memperbolehkan melakukan import style sheet (sesuai keadaan) berdasarkan pada medium tampilan halaman web.

Ini berarti sebuah style sheet tertentu hanya akan di-import jika sesuai dengan mediumnya. Ini sangat berguna pada medium yang mempunyai bandwidth yang kecil seperti handphone, yang biasanya wireless dan tidak dapat menerima halaman web dengan bandwidth besar. Dengan menggunakan style sheet khusus yang hanya men-download beberapa statement yang mengontrol bagian utama web, maka besar ukuran web akan jauh berkurang.

(18)

Untuk melakukan import style sheet berdasarkan medium yang digunakan, buatlah aturan @import , tetapi tambahkan nama dari media yang akan menyebabkan style sheet akan di-import segera pada sebagai aturan pada sebuah halaman web.

Singkatnya, untuk meng-import style sheet dengan nama monokrom.css jika ditampilkan pada mode print view (print) atau alat portabel seperti handphone(handheld), anda bisa membuat aturan @import seperti berikut ini,

@import URL(monokrom.css)print, handheld Petunjuk dan saran

Melakukan import media spesific akan menghasilkan hasil akhir yang sama dengan menggunakan aturan @media yang telah dijelaskan diatas. Perbedaannya adalah dengan menggunakan aturan @import, browser tidak perlu mendownload semua style sheet yang diimport, kecuali style sheet tersebut relevan dengan medium yang dimaksud. Ini akan menjadi salah satu teknologi yang kuat dalam men-design web untuk medium portable dan memerlukan bandwidth kecil seperti handphone. Medium seperti ini akan sangat penting untuk bisa men-support penggunaan aturan @import ini.

6.4 Printing

CSS2 memperkenalkan sebuah mekanisme pengaturan tampilan ketika sebuah halaman web akan di-print menggunakan format tampilan dari style sheet Ada 2 hal yang perlu diperhatikan ketika akan melakukan print terhadap sebuah halaman yaitu halaman itu sendiri dan konten di dalamnya.

Untuk halaman itu sendiri, kita perlu memperhatikan ukurannya, apakah akan dibuat portrait atau landscape, tanda print apa yang harus dimiliki dan berapa margin dari halaman tersebut.

Untuk konten pada halaman tersebut kita perlu memperhatikan dimana halaman tersebut akan mengalami break dan apa yang dilakukan garis pada text yang tidak berguna dan seterusnya (kita akan membahas ini selanjutnya).

Pada CSS2, properti page didefinisikan oleh aturan @page sedangkan beberapa properti baru mengatur halaman untuk break.

6.4.1 Aturan @page

Unsur utama dalam melakukan print dengan CSS adalah aturan @page. Ini mirip

(19)

seperti aturan @media.

Aturan @page mengatur konteks untuk melakukan print. Intinya @page akan menentukan lembaran halaman yang akan digunakan sebagai medium print.

Aturan @page bekerja seperti layaknya sebuah style sheet, karena @page akan mengkhususkan ke dalam properti tentang page (halaman web) dan tidak menggunakan statement lain, @page juga harus berisi margin yang telah ditentukan.

Properti dari sebuah halaman bisa diaplikasikan untuk setiap halaman, atau dapat menentukan tampilan bagian kiri dan kanan dari sebuah halaman.

• Untuk menentukan properti dari setiap halaman, aturan @page mempunyai bentuk, @page{/*properti dinyatakan disini*/}

• Untuk menentukan tampilan properti pada bagian kiri halaman, Aturan

@page mempunyai bentuk, @page:left{/*properti dinyatakan disini*/}

• Untuk menentukan tampilan properti pada bagian kanan halaman, Aturan @page berbentuk, @page:right{/*properti dinyatakan disini*/}

Halaman yang dinamai

Aturan @page bisa dinamai, dengan dihubungkan dengan properti page yang akan kita lihat dibawah berikut ini, properti ini memperbolehkan elemen khusus untuk di-print pada jenis kertas yang khusus. Misalkan kita akan melakukan print terhadap halaman web dan kita akan melakukannya dengan format mode landscape. Kita bisa menamai halamannya seperti ini.

@page figures { size: landscape

Nama dari halaman tersebut akan secara sederhana diletakkan setelah kata kunci }

@page dan sebelum properti dari aturan tersebut. Di bawah kita akan melihat bagaimana cara properti halaman menginstruksikan browser untuk melakukan print pada sebuah halaman tergantung aturan @page yang dipakai.

6.4.2 Properti Page Spesifik

Terdapat dua set properti yang berhubungan dengan bagaimana halaman web tersebut akan di-print.

• Properti yang langsung berhubungan dengan halaman web itu sendiri yaitu properti margin. Properti ini hanya bisa dipalikasikan pada aturan

(20)

@page (Page properti).

• Properti yang berhubungan dengan bagaimana konten tersebut akan ditampilkan pada halaman web. Properti tersebut diantaranya page- break-before, page-break-after, widow dan orphan. Ini bisa diaplikasikan kepada setiap elemen (Page break property.

1. margin, margin-left, margin-right, margin-top, margin-bottom

Margin adalah properti umum dari CSS yang bisa diaplikasikan pada halaman web. Properti margin akan mengatur bagian atas, kiri, bawah, kanan dan semua amrgin pada halaman web.

Margin bisa ditentukan dengan menggunakan persentase, nilai panjang atau menggunakan kata kunci auto.

Margin juga bisa mengambil nilai negatif.

Persentase

Nilai margin dengan persentase akan mengatur margin yang dipilih berdasarkan persentase lebar dan tinggi dari halaman tersebut. Singkatnya, margin-right:20%

akan mengatur lebar dari margin kanan sebanyak 20% dari lebar halaman web.

margin-top:20% mengatur tinggi margin atas sebanyak 20% dari tinggi halaman Nilai Panjang

Dengan menggunakan nilai panjang, anda bisa mengatur nilai absolut atau relatif dari margin kepada elemennya sendiri. Catat bahwa sebuah halaman tidak mempunyai konsep font, maka ukuran em dan ex tidak dapat digunakan pada margin sebuah halaman.

Jika tidak ada nilai margin yang diketahui maka margin dari sebuah halaman adalah nol (0).

2. Page Breaking Properti (Pemisahan Halaman)

Jika sebuah konten halaman akan di-print, kita harus memperhatikan apa yang terjadi jika terjadi pemisahan halaman (page break). Biasanya section baru akan ditempatkan pada halaman baru. Seorang designer web mungkin menginginkan

(21)

pemisahan halaman agar tidak menganggu tabel maupun gambar ilustrasi.

CSS2 menyediakan dua buah properti yang memperbolehkan kontrol terhadap dimana halaman tersebut akan mengalami pemisahan jika halaman tersebut di- print. Properti ini adalah page-break-before dan page-break-after. Properti ini bisa diaplikasikan pada bermacam-macam elemen. Properti ini bisa diaplikasikan pada pemisahan pada bagian h1 maupun class tertentu yang kita buat sendiri (contohnya class=”section”).

Masalah lain pada saat print ini adalah ketika hanya beberapa paragraf atau baris yang hanya mencukupi bagian bawah halaman web (ini disebut orphan), atau hanya beberapa baris atau paragraf yang tersisa pada bagian atas (heading) halaman web untuk di-print. CSS2 menyediakan dua buah properti untuk menentukan apa yang terjadi pada baris yang menjadi widow maupun orphan pada halaman web.

• page-break-before

Properti page-break-before menentukan bagaimana atau apa sebuah pemisahan elemen terjadi sebelum letak sebuah elemen. Anda dapat menentukan sebuah halaman tidak mengalami pemisahan halaman sebelum elemen tertentu, atau harus mengalami pemisahan halaman , dan halaman berikutnya berada pada sebelah kiri atau sbelah kanan halaman web.

Properti page-break-before mempunyai beberapa kata kunci diantaranya

• auto (memperbolehkan atau tidak memperbolehkan adanya pemisahan halaman pada sebuah elemen)

• always (selalu ‘memaksa’ sebuah halaman untuk mengalamai pemisahan halaman sebelum elemen tertentu)

• avoid (menghindari pemisahan halaman sebelum elemen tertentu)

• left (untuk menampilkan kiri dan kanan halaman ; ‘memaksa’ satu atau dua halaman terpisah sebelum elemen sehingga halaman berikutnya diformat sebagai kiri halaman)

• right (untuk menampilkan kiri dan kanan halaman ; ‘memaksa’ satu atau dua halaman terpisah sebelum elemen sehingga halaman berikutnya diformat sebagai kanan halaman)

(22)

Jika tidak ada nilai yang ditentukan, maka secara default nilai dari properti page- break-before adalah auto.

Elemen turunan tidak mewarisi nilai dari properti yg diturunkan dari induknya.

• page-break-after

Properti page-break-after menentukan bagaimana atau apa sebuah pemisahan elemen terjadi setelah letak sebuah elemen. Anda dapat menentukan sebuah halaman tidak mengalami pemisahan halaman setelah elemen tertentu, atau harus mengalami pemisahan halaman , dan halaman berikutnya berada pada sebelah kiri atau sebelah kanan halaman web.

Properti page-break-after mempunyai beberapa kata kunci diantaranya

• auto (memperbolehkan atau tidak memperbolehkan adanya pemisahan halaman pada sebuah elemen)

• always (selalu ‘memaksa’ sebuah halaman untuk mengalami pemisahan halaman setelah elemen tertentu)

• avoid (menghindari pemisahan halaman setelah elemen tertentu)

• left (Untuk menampilkan kiri dan kanan halaman ; ‘memaksa’ satu atau dua halaman terpisah setelah elemen sehingga halaman berikutnya diformat sebagai kiri halaman)

• right (Untuk menampilkan kiri dan kanan halaman ; ‘memaksa’ satu atau dua halaman terpisah setelah elemen sehingga halaman berikutnya diformat sebagai kanan halaman)

Jika tidak ada nilai yang ditentukan, maka secara default nilai dari properti page- break-after adalah auto.

(23)

• page-break-inside

Apa yang dilakukan properti ini ?

Properti page-break-inside mengontrol apakah sebuah pemisahan halaman terjadi di dalam sebuah elemen tertentu. Anda dapat menentukan pemisahan halaman tidak terjadi di dalam sebuah elemen tertentu.

Properti page-break-inside ini memiliki beberapa nilai diantaranya,

• auto (memperbolehkan atau tidak memperbolehkan adanya pemisahan halaman di dalam sebuah elemen)

• avoid (menghindari pemisahan halaman di dalam elemen) Nilai default properti

Jika tidak ada nilai yang ditentukan, maka secara default nilai dari properti page- break-inside adalah auto.

• orphan

Properti orphan menentukan jumlah baris paling sedikit dari sebuah elemen yang harus tersisa pada bagian bawah halaman web jika terjadi pemisahan halaman pada saat dilakukan print halaman. Jika jumlah baris lebih sedikit dari ketentuan orphan ini, maka baris dapat diletakkan pada bagian bawah halaman web, jika terjadi kelebihan baris maka baris tersebut akan pindah ke halaman berikutnya.

Properti orphan mengambil nilai bilangan bulat. Nilai ini menyatakan berapa baris terkecil (orphan) yang dapat diletakkan pada bagian bawah halaman web.

Jika tidak ada nilai dari properti yang ditentukan maka defaultnya bernilai 2.

(24)

• widow

Properti widow menentukan jumlah baris terkecil dari sebuah elemen yang harus tersisa pada bagian atas halaman web jika terjadi pemisahan halaman sebelumnya.

Jika lebih sedikit jumlahnya, baris tersebut dapat diletakkan pada bagian atas halaman web berikutnya.

Properti widow memiliki nilai bilangan bulat. Nilai ini menentukan jumlah dari baris widow yang diperbolehkan.

Jika tidak ada nilai dari properti ini yang ditentukan maka secara default, widow akan bernilai 2.

Sebuah elemen turunan tidak mewarisi nilai dari properti ini yang diturunkan dari elemen induknya.

6.5 CSS pada Mobile Phone

Salah satu keuntungan yang paling besar dari menggunakan CSS adalah kemampuan CSS untuk menciptakan halaman web yang ringan dan memerlukan sedikit bandwidth. Ini jauh lebih baik daripada kita men-design sebuah web menggunakan HTML. Penampil web bukan sekadar PC melainkan berbagai alat penampil lain yang lebih ringan dan portabel. Dengan alat-alat seperti ini, kita perlu memperkecil ukuran halaman web untuk memudahkan akses user pada halaman web tersebut.

Seperti contohnya adalah penggunaan mobile phone. Kita dapat mem-browse berbagai web melalui alat ini. Sekarang penggunaan mobile phone semakin besar karena kemudahannya untuk dibawa dan akses mudah yang diberikan alat ini untuk membuka berbagai halaman web seperti facebook.com, twitter.

com. Penggunaan mobile phone ini memerlukan biaya yaitu pulsa baik prabaya maupun pasca bayar. Biasanya besar biaya ini dikenakan per bandwidth yang dikeluarkan. Untuk itu, pembuat web wajib menyediakan halamn yang ringan untuk memperkecil ukuran bandwidth yang dikeluarkan sehingga akan jauh lebih hemat. Dengan penggunaan CSS yang baik, bandwidth web yang keluar akan jauh lebih hemat.

(25)

Tidak semua aspek pada CSS dapat digunakan oleh semua mobile platform. Jadi W3C telah mengembangkan CSS Mobile Profile 1.0, diman menjadi salah satu kandidat rekomendasi (tahap terakhir untuk menjadi rekomendasi) pada July 2002. Versi mobile profile ini adalah pemangkasan versi dari spesifikasi CSS 2.1, yang ditujukan untuk mobile dan alat wireless. Faktanya mobile profile ini mirip dengan CSS1. Aturan CSS yang umum dimasukkan dalam mobile profile dan synatxnya masih sama dengan CSS 2.1. aturan @import dan @media juga menjadi sangat penting dalam spesifikasi ini. Ini dapat membuat para designer web untuk mengatur tampilan webnya sesuai dengan dimana halaman web tersebut ditampilkan.

6.5.1 Selektor CSS pada Mobile Phone

Beberapa selektor yang ada pada CSS untuk mobile phone diantaranya:

• Selektor type

• Selektor descendant

• Selektor child

• Selektor link pseudo class (hanya untuk keadaan link dan visited)

• Selektor dynamic pseudo class hanya untuk keadaan active dan focus (bukan hover)

• Selektor class

• selektor ID

6.5.2 Properti CSS pada Mobile Phone

Beberapa selektor yang ada pada CSS untuk mobile phone diantaranya,

• background

• background-color

• background-image

• background-position

• background-repeat

• properti border

(26)

• clear

• color

• display

• float

• font

• font-family

• font-size

• font-style

• font-variant

• font-weight

• height

• list-style

• list-style-image

• list-style-position

• list-style-type

• properti margin

• properti padding

• text-align

• text-decoration

• text-indent

• text-transform

• vertical-align

• visibility

• white-space

• width

Semua properti dan selektor ini sama penggunaannya dengan rekomendasi CSS 2.1. Anda bisa membaca kembali properti dan selektor yang telah dibahas sebelumnya.

(27)

6.6 Validasi File HTML dan CSS

6.6.1 Informasi Dasar Validasi HTML dan CSS

Bagi yang tidak terlalu familier dengan arti dari validasi HTML dan CSS. Validasi file CSS dan HTML adalah sebuah layanan online yang memeriksa website yang anda buat apakah berisi error atau tidak.

Biasanya, seuah HTML validator memeriksa secara pasti kode yang ada pada web anda memenuhi aturan dari W3C Konsorsium. Terdapat beberapa tipe dari validator, diantaranya emeriksa terjadinya error pada website anda, yang lain menyarankan kode yang baik digunakan pada website anda.

W3C memiliki online validator bagi dokumen web. Anda dapat mencobanya pada www.validator.w3.org.

Sebuah validator CSS memeriksa style sheet CSS yang anda punya dengan cara yang sama, kebanyakan akan memastikan bahwa kode CSS tersebut kompatibel dengan standar yang diberikan oleh W3C.

Validator file CSS dapat dilihat di www.jigsaw.w3.org/css-validator

Catat bahwa memvalidasi halaman web anda tidak menjamin bahwa halaman web tersebut akan dapat tampil pada berbagai halaman web. Ini hanya menjamin bahwa kode yang anda buat jauh dari syntax error.

6.6.2 Mengapa Perlu Memvalidasi HTML dan CSS?

Ada beberapa alasan mengapa anda harus memvalidasi kode HTML maupun CSS anda

1. Membantu untuk diakses pada berbagai browser (Cross-Browser), berbagai platform system (Cross-platform) dan kompatibilitas halaman web di masa depan.

Meskipun halaman web anda dapat tampil pada halaman browser favorit anda, ini tidak berarti bahwa web anda jauh dari HTML atau CSS error yang tidak terlihat ketika browser ditampilkan. Dan ketika ada pengunjung yang menggunakan browser berbeda maka halaman tersebut tidak akan ditampilkan secara sempurna.

Koding CSS dan HTML untuk sebuah web dikatakan berhasil jika halaman web tersebut dapat berjalan pada berbagai browser dan platform system dan

(28)

harus kompatibel dengan berbagai perubahan-perubahan yang terjadi pada browser dan platform ini.

2. Kemampuan akses search engine

Jika terdapat error pada sebuah halaman web, maka browser berusaha mengkompensasi error yang terjadi ini. Pada beberapa browser, kesalahan error pada kode ini akan diacuhkan, sedangkan browser yang lain berusaha untuk mengkompensasi error ini.

Seperti browser, search engine (mesin pencari seperti google.com, yahoo.com, dan lain-lain), juga memiliki respon yang berbeda-beda terhadap kerusakan yang terjadi. Beberapa search engine mungkin akan menhentikannindexnya pada saat terjadi kerusakan kode, tapi ada juga beberapa yang langsung meloncati kesalahan tersebut. Ini akan menjadi buruk jika kesalahan terjadi pada awal kode dan menyebabkan halaman web tidak di-index oleh search engine.

Jalur yang paling aman yaitu menjamin bahwa web yang kita buat bebas dari error. Sehingga search engine akan lebih mudah mengakses halaman tersebut.

3. Professional

Meskipun, web anda sudah dapat berjalan pada berbagai web browser dan berbagai operating system, tapi jika halaman web anda tersebut masih mempunyai error, maka kemampuan anda sebagai pembuat web masih diragukan.

6.6.3 Kenapa Kita Tidak Memvalidasi HTML dan CSS?

Ada beberapa pendapat yang menyatakan bahwa memvalidasi sebuah file HTML tidaklah perlu. Alasannya sebagai berikut,

1. Memvalidasi halaman web tersebut bukan jaminan bahwa web akan berjalan dengan baik.

Meskipun anda sudah memvalidasi kode HTMLdan CSS anda, anda masih harus tetap mencobanya pada berbagai browser. Mempunyai kode tanpa error didalamnya tidak berarti HTML dan CSS bynag anda punya dapat berjalan dengan baik pada browser. Karena beberapa designer web lebih mementingkan tampilan web pada browser dan dapat dinikmati pengunjung daripada berpatokan pada standar yang belum tentu menjamin bahwa halaman tersebut akan berjalan dengan baik.

(29)

2. Mengkonversi halaman web menjadi halaman yang tidak berisi error memakan waktu banyak.

Idealnya, anda membutuhkan halaman web yang tidak berisi error, tapi kenyataannya, anda tidak harus membuat semua halaman web yang anda punya untuk bebas dari kode yang error, selama halaman web ini dapat tampil dengan baik pada browser. Karena, jika anda mempunyai beratus-ratus halaman web, kecil kemungkinan semua halaman tersebut dapat bebas dari kode yang error dan waktu yang digunakan untuk membebaskan halaman ini dari error sangatlah lama. Untuk itu, selama halaman web tersebut masih dapat tampil dengan baik, maka kita tidak tidak perlu mengecek kode error yang terjadi.

3. Pengunjung rata-rata tidak akan memeriksa source kode halaman web anda.

Pengunjung web biasanya tidak akan memeriksa kode yang anda miliki.

Kecil kemungkinan mereka akan melihat error yang terjadi pada file HTML dan CSS yang anda miliki. Bagi pengunjung, tampilan design dari halaman web merupakan hal terpenting yang harus dimiliki sebuah halaman web.

6.6.4 Seberapa Sering Kita Memvalidasi Website?

Beberapa pemilik website akan memvalidasi kode-kodenya ketika mereka melakukan suatu perubahan pada halaman web mereka. Yang lainnya melakukan validasi ketika mereka melakukan perubahan yang besar pada website mereka.

Seberapa seringnya kita memvalidasi halaman web kita, tergantung dari seberapa sering kita melakukan perubahan pada website kita.

6.6.5 Kesimpulan

Dengan memvalidasi kode HTML dan CSS, anda dapat mempunyai beberapa keuntungan diantaranya ; melindungi halaman web anda dari masalah yang muncul ketika terjadi synatx error seperti terhentinya peng-index-an website anda karena kesalahan terjadi pada awal kode halaman web. Dengan tampilan web yang baik dan ditambah dengan kode yang bebas error, halaman web anda akan menjaid lebih kuat dan semakin mudah diakses.