Server Side Programming - Pertemuan 4

 

Server Side Programming
Pertemuan 4 (Pengenalan CSS)

A.     CSS

CSS merupakan kependekan dari Casading Style Sheet. CSS adalah kode-kode yang dibuat untuk mengatur tampilan dari sebuah halaman web (kode html). CSS mendukung tampilan halaman website agar lebih menarik tanpa mengganggu ataupun mengubah kode-kode html  beserta isinya.

B.      Penulisan (Syntax)

Berbeda dengan kode html yang ditulis dengan menggunakan tag pembuka dan penutup, penulisan css lebih mirip dengan cara menuliskan atribute.

 

CSS terdiri dari empat bagian penyusun, yaitu:

1.       Properties

Properties di sini merupakan kode atau perintah utama yang nanti akan dibaca oleh browser.

Contoh: Color, border, margin, padding dsb.

2.       Titik Dua (Colon)

(:)

3.       Value

Value ibarat sebuah kriteria yang mengikuti properties. Properties memiliki valuenya masing-masing.

4.       Titik koma (Semi Colon)

(;)

C.      Contoh Penulisan CSS dalam Tag Pembuka (INLINE)

Contoh 1:

<h1 style =”Color: blue”

Contoh 2:

<p style=”margin:5px;padding :5px”> Ini adalah paragraf dengan jarak atas, kanan, kiri, bawah dan atas sebanyak 5 pixel </p>

Jika dalam satu tag pembuka terdapat lebih dari satu atribut, maka antar atribut harus diberikan tanda titik koma (;) sebagai pemisah agar dapat dibaca oleh browser.

D.      Tambahan

Terdapat kode-kode html yang sudah memiliki perubahan tampilan secara otomatis. Contoh sederhananya adalah tag <h1></h1> dan sejenisnya yang dapat merubah tampilan isi menjadi lebih tebal. Hal tersebut terjadi karena browser menambahkan kode CSS ketika membaca kode tersebut, kemudian mengaplikasikannya pada kode-kode yang sesuai. Sedangkan, jika menginginkan tampilan yang lebih beragam seperti ukuran, warna dan lain sebagainya, kita dapat menambahkan style CSS secara langsung pada kode yang kita buat.

 

Praktikum 4

A.     Tag Span <span></span>

Span element merupakan element inline (elemen yang tidak membentuk garis baru) yang digunakan untuk memisahkan satu element dari efek element yang lain dengan cara mengelompokkan elemen-elemen yang dimaksud. Span element hanya digunakan pada sebuah konten yang tidak mempresentasikan apapun

B.      Beberapa Jenis Display HTML

Di dalam html ada beberapa jenis display html element. Antara lain:

1.       Block (Berdiri Sendiri)

Display ini memakan tempat satu baris, sehingga akan mengekspansi tempat baru dan membuat kode setelahnya ditampilkan di bawahnya sekalipun tanpa memasukkan tag <br>. Contoh tag yang termasuk jenis ini adalah tag <h1></h1>.

2.       Inline

Dalam suatu baris, jenis in berbagi dengan elemen-elemen yang lain sebagaiana tag <img></img>. Jenis ini akan ditampilkan secara berurutan dalam satu baris sampai tempat dalam baris tersebut habis kecuali jika kita menggunakan tag <br>

 

C.      Menentukan Warna Dalam CSS

Dalam menentukan color (warna) dalam tampilan CSS, baik untuk font, border dan lain sebagainya. Terdapat 3 cara.

1.       Menggunakan nama warna umum seperti red, green, blue, black dan lain sebagainya.

Contoh: <h1 style=”color:blue;”> Ini Adalah Heading  dengan Teks Berwarna Biru</h1>

 

2.       Menggunakan rumus RGB (Red, Green, Blue) yang merupakan 3 warna primer untuk mendapatkan warna baru. Atribut RGB ditulis sebagai berikut: <p style=”color: rgb(nilai red, nilai green, nilai blue);”></p>.

Masing-masing nilai dari ketiga warna tersebut diisi dengan skala angka antara 0 (terendah) sampai 255 (tertinggi). Nilai-nilai tersebutlah yang akan menentukan warna apa yang akan dihasilkan.

Contoh: <p style=”color: rgb (0, 255, 255);”>Ini adalah paragraf berwarna ‘cyan’ yang didapat dari kode rgb (0,255,255)</p>.

 

Mode warna ini, dalam komputer bernilai 8bit. Untuk mengetahui komposisi rgb suatu warna, kita dapat mengunjungi website html color code atau menggunakan tool-tool eksternal lainnya.

 

3.       Menggunakan kode kombinasi yang mewakili suatu warna. Kode tersbut bersifat unik, tidak dapat ditukar dengan kode warna lain dan biasanya terdiri dari simbol tagar, huruf dan angka.

 

Contoh: <p style=”color: #00ffff;”>Ini adalah paragraf berwarna ‘cyan’ yang didapat dari kode rgb #00ffff</p>.

 

Mode warna ini, dalam komputer bernilai 16bit dan lebih kaya dari mode warna sebelumnya. Untuk mengetahui komposisi ini, sama dengan cara sebelumnya, kita dapat mengunjungi website html color code atau menggunakan tool-tool eksternal lainnya.