Bootstrap: Grid Dasar

Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Mmbuat Grid Dasar pada Bootstrap.

Bootstrap Sistem Grid

Sistem Grid Bootstrap memungkinkan untuk membuat 12 kolom pada sebuah halaman.

Jika Anda tidak ingin menggunakan 12 kolom secara individual, Anda dapat mengelompokkan kolom untuk menciptakan kolom yang lebih luas:

Sistem Grid Bootstrap bersifat responsif, dan kolom akan menata kembali secara otomatis, tergantung ukuran layar.

Kelas Grid

Sistem Bootstrap jaringan memiliki 4 kelas:

1. xs (untuk ponsel) 
2. sm (untuk table) 
3. md (untuk desktop) 
4. lg (untuk desktop yang lebih besar)

Kelas-kelas di atas dapat dikombinasikan untuk membuat layout yang lebih dinamis dan fleksibel.

Struktur dasar dari Bootstrap Grid

Berikut ini adalah struktur dasar dari grid Bootstrap:

Contoh:

Sekian Cara Membuar Grid Dasar pada Bootstrap.

Semoga Bermanfaat...!!!

Referensi: www.w3schools.com

Wassalamu'alaikum wr.wb

Read More

Bootstrap: Mengenal Bootstrap

Assalamu'alaikum wr.wb

Kali ini saya akan berbagi tentang Bootstrap. Mungkin sobat bertanya-tanya Apa Sih Bootstrap itu??

Pengertian Bootstrap

Bootstrap adalah Aplikasi sumber terbuka yang berupa kerangka kerja (framework) untuk membangun website dinamis dengan menggunakan bahasa script CSS. BOOTSTRAP memudahkan developer dan designer untuk membuat sebuah aplikasi web menjadi cepat dan mudah dibandingkan dengan membuatnya dari awal.

Kerangka Kerja Aplikasi (Framework)

Kerangka Kerja (Framework) secara sederhana diartikan sebagai kumpulan dari fungsi-fungsi/prosedur-prosedur dan class-class untuk tujuan tertentu yang sudah siap digunakan sehingga bisa lebih mempermudah dan mempercepat pekerjaan seorang programer, tanpa harus membuat fungsi atau class dari awal.

Fitur umum framework:

• Mempercepat dan mempermudah pembangunan sebuah apikasi web.
• Relatif memudahkan dalam proses maintenance karena sudah ada pola tertentu dalam sebuah framework (dengan syarat programmer mengikuti pola standar yang ada).
• Umumnya framework menyediakan fasilitas-fasilitas yang umum dipakai sehingga kita tidak perlu membangun dari awal.
• Lebih bebas pengembangannya jika dibandingkan CMS.

Itulah pengertian singkat dari Bootstrap.

Semoga Bermanfaat...!!!

Referensi: https://id.wikipedia.org/wiki/PHP_Bootstrap

Wassalamu'alaikum wr.wb

Read More

Cara Menyimpan pengaturan kecerahan layar di Linux Mint

Assalamu'alaikum wr.wb

Kali ini saya akan membagikan Cara Menyimpan pengaturan kecerahan layar di Linux Mint.

Mungkin sobat pernah mengalami dimana pengaturan kecerahan mereset pada setiap reboot, jadi kita harus secara manuual menyesuaikan terus-menerus.

Jika sobat ingin menyimpan pengaturan kecerahan layar pada Linux Mint sobat, maka simak langkah-langkah berikut:

• Buka Terminal (Ctrl+Alt+T)
• Ketikkan:

for i in /sys/class/backlight/*; do echo $i; cat $i/brightness; cat $i/actual_brightness; cat $i/max_brightness; done cat $i/max_brightness; done

• Ketikkan:

gksu gedit /etc/rc.local

• Tambahkan kode berikut disebelum baris terakhir 'exit 0'

echo 408 > /sys/class/backlight/intel_backlight/brightness

NB: 480 adalah level kecerahan yang mau diterapkan

• Save & Reboot

Referensi: https://unlockforus.com/remember-screen-brightness-settings-in-linux-mint-17-2-rafaela/
 

Sekian Cara Menyimpan pengaturan kecerahan layar di Linux Mint.

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb

Read More

CSS: Cara Membuat Teks Underline, Overline, dan Line-through

Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Membuat Teks Underline, Overline, dan Line-through.

Penggunaan property CSS text-decoration untuk mendapatkan efek garis bawah (underline), garis atas (overline) dan garis tercoret (line-through) cukup sederhana, kita tinggal menginput nilai tersebut sebagai nilai properti dari text-decoration.

Contoh:

Selain ketiga nilai tersebut, properti text-decoration memiliki 2 nilai tambahan, yakni blink dan none. text-decoration: blink ditujukan untuk membuat teks berkedip (blink!) namun karena efeknya yang mengganggu, umumnya web browser modern mengabaikan efek ini. Sedangkan untuk menghapus efek dekorasi teks, kita bisa menggunakan perintah text-decoration: none. Perintah none ini biasa digunakan untuk menghapus efek underline dari tag <a> yang merupakan setingan bawaan web browser.

Contoh penggunaan properti text-decoration:

Dalam contoh kode diatas, saya membuat class untuk masing-masing efek. Perhatikan bahwa class=”blink”, efek text-decoration: blink akan diabaikan oleh web browser. Untuk class=”all”, saya membuat 3 efek dalam 1 selector. Tiap-tiap nilai dipisahkan dengan spasi.

Kode CSS text-decoration: none untuk tag <a> pada baris terakhir adalah penggunaan paling sering untuk text-decoration. Menghapus efek garis bawah dari sebuah link membuat kita bisa mendesain link dengan lebih baik, terutama jika tag <a> digunakan pada menu navigasi dari website.

Sekian Cara Membuat Teks Underline, Overline, dan Line-through.

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb

Read More

CSS: Cara Mengatur Lebar (spasi) Antar Huruf dan Kata Teks HTML dengan CSS

Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Mengatur Lebar (spasi) Antar Huruf dan Kata Teks HTML dengan CSS.

Cara Mengatur Lebar Spasi Antar Huruf dengan CSS

Oroperti CSS letter-spacing digunakan untuk mengatur spasi atau jarak antar huruf. Nilai yang digunakan bisa berupa pixel, persen, em atau satuan ukuran text lainnya.

Jika kita memberikan nilai positif untuk letter-spacing, spasi antar karakter akan semakin menjauh. Untuk membuat spasi antar karakter semakin berdekatan, gunakan nilai negatif.

Contoh penulisan properti letter-spacing:

Nilai letter-spacing: normal bisa digunakan untuk membuat spasi antar karakter kembali ke nilai awal (nilai default).

Cara Mengatur Lebar (spasi) Antar Kata

Selain pengaturan spasi antar karakter, CSS juga menyediakan cara untuk mengatur jarak atau spasi antar kata dengan properti word-spacing. Sama seperti letter-spacing, kita bisa menggunakan nilai positif atau negatif untuk memperlebar atau memperkecil spasi antara sebuah kata dengan kata lainnya.

Contoh penulisan properti word-spacing:

Nilai word-spacing: normal bisa digunakan untuk membuat spasi antar kata kembali ke nilai awal (nilai default).

Tutorial Cara Mengatur Lebar Antar Huruf dan Kata

Contoh kode HTML dan CSS untuk penggunaan letter-spacing dan word-spacing:

Pehatikan contoh kita diatas, efek letter-spacing dan word-spacing yang terlalu berdekatan atau terlalu jauh akan membuat tulisan susah dibaca. Namun dengan mengkombinasikan efek ini dengan berbagai efek teks CSS lain, kita bisa membuat tampilan text yang lebih beragam.

Sekian Cara Mengatur Lebar (spasi) Antar Huruf dan Kata Teks HTML dengan CSS.

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb

Read More

CSS: Cara Mengatur Rata Teks HTML dengan CSS (text-align)

Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Mengatur Rata Teks HTML dengan CSS (text-align).

Untuk mengatur rata text HTML dengan CSS, kita menggunakan property text-align. Property text-align memiliki 4 nilai yang bisa dipilih, yakni: left, right, center, atau justify. Sesuai dengan namanya, kita menggunakan text-align: left dan text-align: right untuk membuat rata teks kiri dan rata teks kanan. Untuk membuat text berada di tengah, kita mengunakan: text-align: center.

Perintah text-align: justify digunakan untuk membuat text rata kiri dan kanan. Namun efek justify ini perlu menjadi catatan. Membuat text rata kiri dan kanan sekaligus akan membuat web browser menambah jarak (spasi) antar kata, terutama untuk kata yang panjang. Hal ini bisa membuat tulisan akan susah dibaca, terutama jika diakses dari smartphone yang memiliki layar kecil. Efek justify lebih cocok jika digunakan untuk media cetak seperti buku atau majalah.

Cara Mengatur Rata Text dengan CSS

Dalam tutorial kali ini saya akan membuat teks HTML sederhana, yang terdiri dari 4 paragraf menggunakan tag <p>. Masing-masing paragraf ini memiliki kode CSS text-align yang ‘ditempelkan’ menggunakan class selector.

Contoh penggunaan property text-align:

 

Sekian pembahasan Cara Mengatur Rata Teks HTML dengan CSS (text-align).

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb

Read More

Cara Install Dia / Diagram Editor Pada Linux Mint

Assalamu'alaikum wr.wb

Kali ini saya akan membagikan Cara Install Dia / Diagram Editor Pada Linux Mint. Dia ( Aplikasi Menggambar Diagram dan Flow Chart ) adalah Aplikasi menggambar yang memungkinkan untuk menggambar diagram dengan cara yang sama seperti pada Microsoft Visio. Dia juga dapat memungkinkan kita untuk menggambar diagram UML, diagram jaringan, diagram SADT/IDEF0,Flowchart dan lain-lain.


Langkah Instalasi

• Buka Terminal (Ctrl+Alt+T)
• Masuk sebagai superuser dengan mengetikkan "sudo su" kemudian masukkan password.

• Update pakcage linux sobat ( Optional ) dengan mengetikkan "apt-get update".

• Install aplikasinya dengan mengetiikat "apt-get install dia".

• Tunggu proses instalasi sampai selesai. Jika ada pertanyaan jawab saja "y" lalu Enter
• Untuk membuka aplikasinya Pilih Menu > Ketikka dia > Buka aplikasinya

• Selesai....

Sekian Cara Install Dia / Diagram Editor Pada Linux Mint.

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb

Read More

CSS: Cara Mengubah Ukuran Font HTML dengan CSS (font-size)

Assalamu'alaikum wr.wb

Kali ini saya akan berbagi Cara Mengubah Ukuran Font HTML dengan CSS (font-size).

Mengenal Property CSS

Untuk mengubah besar atau ukuran dari sebuah font atau teks dengan CSS, kita menggunakan properti font-size. Properti font-size cukup sederhana dan ditulis seperti contoh berikut ini:

Dengan menulis kode CSS diatas, semua teks di dalam tag <p> akan memiliki font dengan ukuran 14 pixel.

Yang membuat menarik (dan juga memusingkan) adalah CSS menyediakan banyak “satuan ukuran” teks yang bisa dipilih, dimulai dari pixel seperti contoh diatas, keyword seperti small, medium, large, ukuran satuan persen, em, dan juga ukuran lain seperti cm, mm, pt, dan pica.

Ukuran satuan cm, mm, pt dan pica berasal dari media cetak seperti koran dan majalah. Satuan ini cocok untuk media yang bersifat pasti (dimana kita bisa menentukan sendiri ukuran kertas yang akan digunakan). Namun satuan ukuran tersebut tidak cocok di dalam media elektronik seperti web. Karena media yang digunakan oleh pengunjung web bisa bermacam-macam mulai dari smartphone dengan lebar layar 2 inchi sampai dengan monitor desktop 20 inchi atau lebih. Satuan ukuran cm, mm, pt dan pica menjadi tidak relevan, sehingga jarang digunakan.

Satuan Ukuran Font: Pixel (px)

Satuan ukuran pixel relatif mudah dipahami karena ia tidak terikat dengan setingan browser. Ketika kita mendefenisikan ukuran font sebesar 20 pixel, maka web browser akan menampilkannya sebesar (tentu saja) 20 pixel. Satuan pixel ini banyak digunakan karena ditampilkan secara konsisten di dalam berbagai web browser.

Contoh penggunaan pixel:

Dalam menulis nilai satuan dalam pixel, tidak boleh terdapat spasi diatara angka dan “px”. Sebagai contoh, 16px adalah benar, namun 16 px adalah salah (perhatikan karakter spasinya).

Satuan Ukuran Font: Persen (%)

Satuan persen adalah satuan yang bersifat relatif. Perhitungan ukuran persen akan mendapatkan ukuran font dari setingan parent element. Jika kita mendefenisikan ukuran font tag <p> sebesar 100%, maka tag <p> akan memiliki ukuran yang sama dengan parent element. Namun jika tag <p> dibuat sebesar 120%, maka ukurannya akan sebesar 120% dari parent element. Parent element adalah tag induk dimana selector CSS tersebut berada didalamnya.



Contoh kode HTML:

Dalam kode HTML diatas, terdapat 4 tag atau elemen, yakni tag <div>, <p>,<span>, dan <i>. Tag <div> berada pada element terluar, sehingga ia merupakan parent element dari tag <p>. Di dalam tag <p> terdapat tag <span> dan tag <i>, sehingga tag <p> merupakan parent element dari keduanya.

Jika kita membuat ukuran font tag <p> sebesar 80%, maka ukuran font tersebut adalah sebesar 80% dari ukuran font tag <div>. Jika tag <div> memiliki ukuran teks 14 pixel, maka tag <p> akan berukuran 80%*14px = 11,2px.

Namun bagaimana jika kita membuat ukuran tag <div> sebesar 80% juga? maka kita harus melihat ukuran teks dari parent elemen tag <div>. Apabila parent element tag <div> adalah tag <body> yang ukuran fontnya tidak dinyatakan, maka perent element akan ditentukan oleh ukuran default text web browser. Ukuran default web browser ini disebut sebagai base text size yang umumnya berukuran 16px.

Contoh:

Dalam contoh diatas, untuk paragraf pertama dengan class=”satu” saya membuat ukuran text sebesar 100%. Karena tag <body> yang berfungsi sebagai parent element tidak memiliki ukuran text, maka ukuran 100% jatuh kepada base text size web browser yang berukuran 16pixel. Paragraf kedua saya buat berukuran 16px sebagai perbandingan.


Untuk paragraf ketiga, saya membuat ukurannya sebesar 80%. Sehingga ukuran teks menjadi 80%*16px=12.8px.

Di dalam paragraf ketiga, terdapat tag <span> yang juga memiliki ukuran font sebesar 80%. Namun karena parent elemen dari tag <span> adalah tag <p class=”tiga”>, maka ukuran akhir fontnya di dapat dari perhitungan 80%*12.8px=10.24px. Saya sengaja mengubah warna font menjadi biru untuk menandakan bagian tag <span> yang jika diperhatikan berukuran lebih kecil dibandingkan tag <p> ketiga, walaupun ukuran teks sama-sama di set sebesar 80%.

Satuan Ukuran Font: em

Jika anda telah memahami cara penggunaan satuan persen, maka anda tidak akan kesulitan memahami satuan em, karena keduanya nyaris sama. Web desainer lebih banyak menggunakan em karena em berasal dari konsep typography.

Kata “em” berasal dari typography media cetak dimana ia merujuk kepada ukuran huruf ‘m’ dari sebuah font. Namun konsep itu tidak dipakai untuk pengertian em pada CSS. 1em di dalam CSS sama dengan 100%, 0.5em sama dengan 50%, 1.2em sama dengan 120% dan seterusnya. Konsep parent element dari pembahasan kita mengenai satuan persen juga berlaku untuk satuan em.

Contoh:

Contoh kode CSS dan HTML diatas hampir sama dengan contoh yang kita gunakan dalam contoh satuan persen. Namun perhatikan bahwa saya mendefenisikan ukuran font untuk tag <body> sebesar 14px, sehingga tag lain yang menggunakan satuan em akan menyesuaikan ukuran dengan patokan base font 14px.

Karena satuan em akan menggunakan parent element sebagai rujukan ukuran font, maka ukuran tag <body> sebesar 14px akan menjadi ukuran dasar untuk semua tag. Dengan menggunakan cara seperti ini saya dapat dengan mudah mengubah ukuran font untuk seluruh halaman dengan tetap mempertahankan ukuran proporsional nya. Lebih jauh lagi, konsep ini juga menjadi salah satu dasar pembuatan layout responsive (Responsive Web Design).

Sekian Pembahasan tentang Cara Mengubah Ukuran Font HTML dengan CSS (font-size).

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb

Read More

CSS: Cara Merubah Jenis Font HTML dengan CSS (font-family)

Assalamu'alaikum wr.wb

Kali ini saya akan membagikan Cara Merubah Jenis Font HTML dengan CSS (font-family). Font adalah jenis huruf yang digunakan di dalam sebuah dokumen.

Jika anda menginstall program tambahan seperti Adobe Photoshop, aplikasi ini juga membawa font sendiri yang akan ditambahkan ke dalam jenis-jenis font yang terdapat di dalam Windows, dan karena font ini adalah bawaan aplikasi, maka tidak semua komputer memiliki font ini.

Apabila kita membuat sebuah dokumen dan mencetaknya langsung, menggunakan font apapun yang tersedia di komputer tidak akan menjadi masalah. Namun jika anda membuat dokumen yang akan digunakan di dalam komputer lain, sebaiknya menggunakan font standar yang kemungkinan besar akan tersedia di komputer tujuan.

Dalam memilih jenis font untuk website, kondisi yang sama juga menjadi pertimbangan penting. Di dalam CSS, kita bisa menggunakan berbagai jenis font sesuai dengan desain yang diinginkan. Namun font yang akan ditampilkan pada web browser sepenuhnya berasal dari komputer user (pengunjung web). Jika kita memilih font yang tidak standar, maka desain web yang telah dirancang serapi mungkin akan menjadi ’kacau’ karena bisa saja font yang kita pilih tidak tersedia di komputer pengunjung.

Untuk mengatasi hal ini, salah satunya adalah dengan menggunakan font ’standar’ yang umum tersedia di dalam berbagai sistem operasi seperti Windows, Linux, Mac OS, dll. Menggunakan font-font standar ini akan ’menjamin’ desain web yang telah dirancang dapat didukung oleh mayoritas web browser.

Mengenal Jenis-Jenis Font Standar CSS

Font Standar / Font Generik adalah jenis font yang umumnya tersedia pada hampir semua sistem. Jika kita membagi jenis font berdasarkan ’bentuknya’, terdapat 5 jenis font generik, yaitu serif, sans-serif, monospace, cursive, dan fantasy.

Font Serif

Font ‘serif’ adalah jenis font yang memiliki ‘kaki’ pada setiap hurufnya. Contoh jenis font serif adalah Times New Roman dan Georgia. Font jenis ini biasanya digunakan untuk media cetak kertas karena akan terkesan rapi dan mudah dibaca.

Font Sans-Serif

Font dengan jenis ‘sans-serif’ adalah jenis font yang tidak memiliki ‘kaki’ pada setiap ujung karakternya. Contoh dari font jenis ini adalah Arial, Verdana, Trebuchet MS, Helvetica, dan Calibri. Font jenis ini sering digunakan di media elektronik seperti web.

Font Monospace 

Font berjenis ‘monospace’ adalah tipe font yang lebar setiap karakternya sama panjangnya. Huruf ‘i’ akan mengambil panjang yang sama dengan huruf ‘w’. Contoh dari font jenis ini adalah Courier, Courier New, dan Andale Mono. Biasanya font jenis ini digunakan untuk hal yang bersifat teknis, seperti penulisan contoh kode program.

Font Cursive

Font jenis ‘cursive’ adalah jenis font yang ‘meniru’ tulisan tangan atau kaligrafi. Contoh dari font ini adalah Comic Sans. Font jenis ini biasanya digunakan untuk aspek tulisan yang tidak terlalu ‘formal’.

Font Fantasy

Font dengan jenis ‘fantasy’ adalah font yang bersifat visual dengan karakter font khusus seperti font disney, matrix, dll. Font jenis ini jarang digunakan untuk text halaman.

Cara Merubah Jenis Font dengan Property font-family

Untuk menentukan jenis font dari sebuah text HTML, kita bisa menggunakan property CSS : font-family. Berikut adalah contoh penulisan kode CSSnya:

Seperti yang terlihat, nilai yang didukung oleh property font-family adalah nama-nama font yang diinginkan. Saya menyebutnya ‘nama-nama’ karena kita bisa memberikan lebih dari 1 nama font untuk 1 jenis elemen HTML.

ujuan dari memberikan lebih dari 1 font, terkait dengan pembahasan pada bagian awal tutorial ini, yakni tentang keterbatasan font yang terdapat di dalam komputer pengunjung web kita.

Ketika kita mendefenisikan nilai font-family sebagai: “Duru Sans”, Verdana, sans-serif, dapat dilihat bahwa terdapat 3 jenis font, yakni font Duru Sans, font Verdana, dan font sans-serif.

Web browser pertama kali akan mencoba ‘mencari’ font dengan nama “Duru Sans” di komputer user (pengunjung web) jika tidak ditemukan, maka web browser akan mencari font di urutan selanjutnya, yakni font Verdana. Dan jika tidak ditemukan juga, maka web browser akan menampilkan font dengan jenis generik: sans-serif.

Font jenis generik ini bisa bernilai 1 dari nilai berikut: serif, sans-serif, monospace, cursive, dan fantasy. Jika kita menuliskan font-family: serif, maka web browser akan mencari font standar dengan kategori serif yang terdapat di dalam komputer user. Penulisan font generik ini biasanya digunakan sebagai pilihan terakhir dalam nilai font-family.

CSS tidak membatasi seberapa banyak jenis font yang boleh ’disiapkan’ untuk nilai font-family. Kita bahkan bisa menulis 10 jenis font untuk 1 nilai font-family. Namun rata-rata web designer hanya membuat 3 pilihan, dimulai dari yang paling spesifik, sampai dengan jenis font yang paling umum (jenis font generik).

Dalam memberikan nilai untuk nama font, terdapat beberapa aturan penulisan. Aturan tersebut adalah sebagai berikut:

1. Untuk setiap penulisan nama font, huruf pertama pada tiap kata harus menggunakan huruf besar, contohnya: penulisan font “arial” harus ditulis menjadi “Arial” . Tetapi aturan ini tidak berlaku untuk font ‘generik’ seperti monospace dan sans-serif.
2. Untuk memisahkan antara satu font dengan font lainnya, gunakan tanda koma.
3. Jika nama font memiliki spasi, maka harus ditulis didalam tanda kutip, seperti: ”Times New Roman”.

Contoh penggunaan property font-family CSS dengan HTML

Untuk melengkapi tutorial cara mengubah jenis font HTML menggunakan CSS, kita akan langsung mempraktekkannya menggunakan contoh program.

Berikut adalah contoh penggunaan property font-family dalam CSS:

Dalam contoh penggunaan property font-family diatas, saya mencoba mengubah jenis font untuk selector CSS: body, h3 dan id:paragraf.

Sekian Cara Merubah Jenis Font HTML dengan CSS (font-family).

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb

Read More

CSS: Mengenal Satuan Nilai (Value) dalam CSS

Assalamu'alaikum wr.wb

Pada postingan kali ini saya akan membahas tentang Mengenal Satuan Nilai (Value) dalam CSS. Dalam merancang halaman web, kadang ada saatnya kita membutuhkan fleksibilitas dalam menentukan nilai atau value tertentu untuk suatu properti, seperti tinggi sebuah box, besar ukuran font maupun besar border dari tabel. Untuk keperluan ini, CSS menyediakan berbagai ukuran seperti pixel, em, point, in, pc, dan pt.

Sebuah nilai dalam CSS dapat bernilai positif maupun negatif, bisa berupa angka bulat, maupun angka desimal. Namun beberapa properti juga memiliki batasan, seperti warna yang hanya bisa bernilai 0-255 atau 0 sampai FF.

Nilai Absolut

Nilai absolut adalah sebuah nilai CSS, dimana nilai tersebut tidak dipengaruhi kondisi tag induknya (parent), dan didasarkan pada ukuran sebenarnya di media printing. Di dalam CSS, nilai absolut ini adalah: milimeter (mm), centimeter (cm), inchi (in), point (pt), dan pica (pc).

Karena nilai absolut ini berasal dari media percetakan. Kita tentunya sudah familiar dengan ukuran seperti milimeter dan centimeter. Sedangkan 1 inchi adalah sekitar 25,4 mm.

Ukuran point (pt) sering digunakan dalam media cetak offline seerti microsoft word dalam menentukan ukuran dari font. 1 inchi setara dengan 72pt, sehingga ukuran font normal sebesar 12pt setara dengan seperdeapan inchi. Contoh penggunaannya dalam CSS: p {font-size: 18pt;} sama dengan p {fontsize: 0.25in;}.

Ukuran pica (pc) mungkin tidak terlalu familiar. 1pc setara dengan 12pt. contoh penulisannya dalam CSS adalah p {font-size: 1.5pc;}.

Kelima nilai absolut tersebut, selain pt tidak terlalu sering digunakan, karena konversi dari ukuran dunia nyata ke dalam monitor dipengaruhi banyak hal, 1cm di satu monitor bisa jadi berbeda dengan 1cm pada monitor lainnya, sehinga agak menyulitkan dalam mendesain kode CSS yang “pas”.

Nilai Relatif 

Berbeda dengan nilai absolut, nilai relatif didalam CSS dipengaruhi oleh tag disekitarnya. CSS mendukung banyak nilai relatif, beberapa yang kita bahas adalah: pixel (px), Em-height (em), dan X-height (ex).

Ukuran pixel (px), merupakan ukuran yang paling sering digunakan dalam CSS. Di dalam CSS, pixel termasuk nilai relatif karena ia tidak terikat dengan perbandingan media tertentu. Didalam spesifikasi CSS2. 1, 1 pixel disamakan dengan 0.26mm atau 1/96 inci, namun banyak browser yang mengabaikan spesifikasi ini dan menyamakan 1 pixel dengan 1 pixel sesungguhnya yang terdapat di monitor.

1 unit Em-height (em) sama dengan besar ukuran asal yang diturunkan tag tersebut. Ketika kita mendefenisikan sebuah paragraf sebesar 12pt, maka sebuah tag <em> yang berada di dalam paragraf tersebut disebut secara inheritance akan berukuran 1em. Jika kita merubahnya menjadi em {font-size: 1.2em;} maka tag <em> tersebut akan berukuran 1,2 kali lebih besar dari ukuran tag p.

Ukuran relatif terakhir yaitu X-height (ex). ex berasal dari tinggi sebuah karakter “x” (huruf x kecil) dari sebuah font. Namun, banyak font yang tidak mendukung hal ini, sehingga browser kadang kala menyamakan 1ex dengan 0,5em.

Nilai Persentasi

Nilai persentasi adalah sebuah nilai per seratus (%) dari suatu property yang relatif terhadap induk (parent) dari tag tersebut. Misalkan kita membuat sebuah defenisi CSS sebagai p {font-size: 10pt;}, dan em {font-size: 120%;}. Maka jika terdapat tag <em> didalam tag <p>, maka ukuran font dari tag <em> akan menjadi 120% dari 10pt, atau sekitar 12pt.

Dengan membuat nilai font lainnya menjadi persen, hal ini akan memudahkan jika suatu saat kita ingin merubah seluruh tampilan web. Hanya merubah ukuran tag <p>, maka secara langsung tag <em> akan menyesuaikan tampilannya.

Contoh:

Jika diperhatikan lagi, saya membuat sebuah selector body {font-size:14pt;} pada bagian awal definisi CSS. Selector body akan menurunkan (inherit) ukuran font ini ke seluruh tag <p> yang berada di dalam tag <body>, namun pada masing-masing tag <p>, saya menambahkan property HTML “class”, sehingga ukuran font akan ditimpa (override) oleh nilai lainnya.

Khusus untuk class=lima, class=enam, dan class=tujuh, saya menggunakan nilai relatif em, ex, dan %, sehingga nilainya bergantung dengan nilai induknya (parent), yakni body {font-size:14pt;}. Cobalah mengubah ukuran font-size pada body ini, lalu jalankan kembali perbandingan_fontsize.html, maka secara otomatis ketiga kalimat tersebut juga akan berubah ukurannya.

Sekian pembahasan tentang Mengenal Satuan Nilai (Value) dalam CSS.

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb

Read More

CSS: Penulisan Kode Warna pada CSS

Assalamu'alaikum wr.wb

Kali ini saya akan berbagi tentang Penulisan Kode Warna pada CSS.

Mengenal Model Warna RGB

Dalam desain di media visual seperti televisi maupun monitor komputer, model warna yang digunakan adalah model warna RGB (Red Green Blue). Disebut RGB, karena warna merah, hijau dan biru inilah dasar dari warna lainnya. Warna seperti kuning, coklat, pink, hitam dan putih berasal dari perpaduan ketiga warna ini.

Didalam desain web, CSS mendukung hingga 16.777.216 kombinasi warna. Warna ini berasal dari perpaduan warna merah, hijau dan biru tersebut. Masing-masing warna dasar ini dapat bernilai 0 sampai 255, dimana 0 adalah tanpa warna, 255 adalah warna maksimal. Dalam dunia ilmu komputer, kombinasi warna ini dikenal dengan 24bit warna, atau disebut juga true color. Perpaduan ketiga warna ini akan memberi kita 256 kombinasi merah x 256 kombinasi hijau x 256 kombinasi biru = 16.777.216 kombinasi warna.

Misalkan, untuk mendapatkan warna kuning, sebenarnya warna kuning adalah perpaduan warna merah dan hijau. Untuk mendapatkan warna kuning terang, maka kita harus mencampurkan merah sebanyak 255, hijau sebanyak 255, dan biru sebanyak 0.

Format #RRGGBB

Selain menggunakan format warna 6 digit, CSS juga mendukung penulisan 3 digit. Format penulisan 3 digit ini merupakan penulisan singkat dari 6 digit. Contohnya #RGB merupakan penulisan singkat dari #RRGGBB, #F0F adalah singkatan dari #FF00FF, #09A sama dengan #0099AA (merah=00, hijau=99, biru=AA).

Penulisan Desimal

Selain penulisan hexadesimal, CSS juga menyediakan penulisan warna menggunakan angka desimal. Format penulisannya adalah: rgb(0, 160, 255) atau rgb(0%, 63%, 100%), dimana urutan warna adalah merah, hijau, dan biru. Menggunakan format pertama, 255 sama dengan 100%. Jika kita menuliskan nilai diluar dari angka yang seharusnya, yakni 0 – 255 atau 0% – 100% maka CSS secara otomatis akan menyamakannya dengan nilai yang terdekat. Format penulisan warna seperti ini tidak terlalu sering digunakan.

Kata Warna (Keyword)

Selain menggunakan kode warna dengan format RGB, CSS juga mendukung 17 kata warna dalam bahasa inggris, yakni: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow. Kata-kata ini berasal dari warna dasar VGA pada Windows dan dikenal juga dengan istilah classic internet color. Berikut daftar kata warna CSS:

Keywoard Warna	Nilai RGB
aqua	#00FFFF
black	#000000
blue	#0000FF
fuchsia	#FF00FF
gray	#808080
green	#008000
lime	#00FF00
maroon	#800000
navy	#000080
olive	#808000
orange	#FFA500
purple	#800080
red	#FF0000
silver	#C0C0C0
teal	#008080
white	#FFFFFF
yellow	#FFFF00

Nilai property: Transparent

Pada kasus tertentu, kita ingin sebuah tag dalam CSS menjadi transparan, untuk keperluan ini CSS menyediakan keyword transparent sebagai nilai. Dengan memberikan nilai transparan, sebuah tag akan ‘melewatkan’ warna dari tag dibelakangnya.

Contoh:

Seperti yang terlihat dari kode HTML di atas, setiap kalimat diset menggunakan kode warna yang berbeda-beda. Yang menjadi menarik, nilai transparent yang diberikan kepada selector class=”lima” menjadi tidak terlihat, dan hanya terlihat jika di blok.

Sekian pembahasan tentang Penulisan Kode Warna pada CSS.

Semoga Bermanfaat...!!!

Wassalamu'alaikum wr.wb

Read More