BAB IX

Pemrograman Web

Tujuan Pembelajaran

Di akhir topik ini, mahasiswa akan mampu:

• Tentukan Hypertext Markup Language (HTML) dan standar yang digunakan untuk
pengembangan Web
• Menjelaskan alat yang digunakan untuk membuat dokumen HTML

HTML

HTML adalah bahasa Markup yang populer untuk mengembangkan dokumen hypertext. Secara
khusus, Web browser seperti Internet Explorer akan bertindak seperti mesin yang akan menafsirkan
HTML dan menampilkannya dalam bentuk yang benar. Versi HTML asli dikembangkan oleh Tim
Berners-Lee yang juga merupakan salah satu pencipta World Wide Web (WWW).

Meskipun HTML memiliki dasar aturan yang kuat, standar untuk versi baru masih terus
berkembang. Pengguna mungkin menemukan bahwa setiap web browser di pasar dapat
mendukung variasi HTML yang berbeda.

Cascading Style Sheets

Seperti halnya HTML, style sheets juga mengikuti standar dan aturan bahasa yang ditetapkan.
Bahasa ini, disebut Cascading Style Sheets, atau CSS, memungkinkan pengembang Web untuk
menulis pernyataan kode yang mengontrol gaya elemen pada halaman Web. Cascading Style
Sheets memungkinkan pengguna mengontrol gaya dan tata letak halaman web. Bahasa ini akan
memungkinkan pengguna untuk menentukan link styles, font, margin, tabel, warna/colors, sizes,
alignments/keselarasan dan banyak lagi di seluruh halaman web. Dengan CSS pengguna akan
mendapatkan cara yang lebih mudah untuk memberi halaman Web Anda format dan tampilan
yang konsisten menggunakan style sheets..

Apakah itu Cascading Style Sheet?

Sebuah style adalah aturan yang menentukan tampilan elemen di halaman Web. style sheet adalah
serangkaian aturan yang menentukan style/gaya untuk halaman Web atau seluruh situs Web.
Cascading Style Sheets digunakan untuk menentukan style/gaya tertentu untuk sebuah karakter,
kata, sekelompok kata, halaman atau seluruh situs web.

Meskipun pengguna dapat mengubah hampir semua tampilan menggunakan style ini, termasuk
beberapa tampilan yang tidak mungkin dilakukan dalam HTML, CSS bukan merupakan bahasa
yang berdiri sendiri atau lengkap, style/gaya tersebut digunakan untuk mengontrol item
tampilan atau bagian pada halaman web.
CSS juga bukan merupakan HTML. Ini adalah bahasa terpisah yang digunakan untuk
meningkatkan kemampuan tampilan HTML. World Wide Web Consortium (W3C), organisasi
yang sama yang mendefinisikan standar HTML, menentukan spesifikasi CSS. CSS tidak
digunakan untuk menambahkan konten apa pun ke situs Web penggguna; CSS hanya membuat
konten pengguna terlihat lebih stylist/baik

Manfaat Menggunakan Cascading Style Sheets

Ada beberapa keuntungan menggunakan cascading style sheets. Keuntungan tersebut adalah:

1. Kode HTML pada halaman web berfungsi untuk mengontrol konten, dan CSS mengontrol
HTML. Hal ini memungkinkan pengguna membuat halaman web yang sesuai untuk semua
browser.

2. Salah satu manfaat terbaik menggunakan CSS dalam halaman web adalah kemudahan
memperbarui halaman web. Jika pengguna/pembuat ingin membuat perubahan pada desain,
daripada harus mengubah lusinan atau bahkan ratusan halaman web di situs, pembuat web
dapat membuat satu perubahan sederhana pada file CSS, dan itu akan secara otomatis
memperbarui semua halaman situs web yang dikembangkan.

3. Dengan CSS pengguna dapat menambahkan elemen visual seperti warna, batas, margin,
dan font style ke halaman Web.
4. Style sheets memungkinkan pengembang untuk mengubah style/gaya untuk satu elemen di
halaman Web, seperti paragraf, atau untuk mengubah style/gaya elemen di semua halaman
di situs Web.

Tipe dari Cascading Style Sheets

Ada tiga teknik utama yang digunakan untuk menerapkan style: inline, embedded, atau
external. Teknik-teknik ini tidak berlaku eksklusif; dengan kata lain, pengguna dapat
menggunakan satu, dua, atau semuanya pada halaman yang sama atau pada halaman yang
diperlukan. Tabel 2.13 merangkum fungsi dari tiga jenis style sheets.

Tabel 9.1 Tipe dari Style Sheets dan Fungsinya

Tipe Fungsi
Inline • Ditambahkan dalam tag standar HTML pembuat halaman.
Style mengubah tag spesifik tersebut, tetapi tidak
memengaruhi tag lainnya di dalam dokumen.
• Gunakan inline style sheets untuk style individu.
Embedded • Ditambahkan ke style sheet dalam tag <head> dari
Dokumen HTML untuk menentukan style seluruh Web
halaman.
• Gunakan style sheet embedded untuk style satu halaman
Web.
Eksternal • Juga dikenal sebagai linked style sheet (tertaut), di sini
pengguna membuat sebuah file teks yang berisi semua
style/gaya yang ingin diterapkan, dan kemudian disimpan
file teks dengan ekstensi file .css., kemudian
menambahkan link ke external style sheet di web page
yang dikehendaki pada website
• Style sheets eksternal memberi penggguna fleksibilitas
dan sangat ideal untuk dapat diterapkan format yang sama
ke semua halaman Web di situs Web. Style sheet eksternal
juga memudahkannya mengubah format dengan cepat di
seluruh halaman Web.
• • Gunakan style sheet eksternal untuk style yang Anda
inginkan situs Web.

HTML Tag dan CSS Precedent

Setiap tipe style sheet juga memiliki tingkat prioritas atau precedence yang berbeda dalam
hubungannya dengan yang lain. Karena setiap style sheet/lembar gaya memiliki tingkat
prioritas yang berbeda, maka ketiga jenis style sheet dapat digunakan pada satu halaman Web.
Berikut adalah cara memprioritaskan tag:
• Tag HTML menimpa semua tag lainnya.
• Tag inline CSS menggantikan tag yang embedded dan linked tags
• Tag embedded CSS menggantikan linked tag.
• Tag linked CSS tidak akan menimpa tag lainnya.

Sintaks untuk CSS

Apa pun jenis style sheet yang pengguna gunakan, maka harus menggunakan pernyataan
style untuk menentukan style. Kode berikut menunjukkan contoh pernyataan style yang
digunakan dalam embedded atau eksternal style sheet:
p { font-family: arial;

font-size: 12px;

color: blue }

CSS tags akan diformat sebagai berikut:

selector adalah perintah dari browser command, yang biasanya tag HTML yang ingin diformat.
Ini adalah bagian dari pernyataan style yang mengidentifikasi elemen halaman. Dalam contoh di
atas, selektornya adalah p (tag paragraf) yang kemudian diikuti oleh properti, yang merupakan
atribut yang ingin pengguna tentukan. Font-family, font-size dan color adalah properti pada style
sheet di atas. Nilainya menentukan nilai properti. Titik dua setelah properti, kemudiamn diikuti
dengan nilai dan diapit dengan tanda kurung kurawal.
Pernyataan style yang disematkan di atas dapat ditulis ulang menjadi inline style sheet sebagai
berikut:
<p style=”font-family: arial; font-size: 12px; color: blue”>