July 2018 - Dr. Kone

Membuat layout web dengan CSS bagian 2

July 30, 2018

Kita akan lanjutkan pembuatan layout kita pada materi sebelum nya. Dari gambar di atas kita akan mengubah background (yang berwarna abu-abu) dengan image. Langkah pertama, seperti biasa kita harus membuat bagian-bagian elemen dahulu menggunakan division (div). Berikut ini adalah code dasar untuk setiap elemennya. Contoh <body> <div id="content"> <div id="header">...

Membuat layout web dengan CSS

July 29, 2018

Pada pembahasan kali ini kita akan lebih jauh mengenal CSS, kita akan sedikit membahas penggunaan CSS dalam mendesain sebuah layout website. Kelebihan CSS dalam layout web dibandingkan tabel adalah fleksibilitas dan juga lebih meminimalisasi jumlah byte file. Apabila Anda menggunakan tabel untuk mendesain layout, maka semakin banyak sel yang dibuat, akan semakin besar ukuran...

Membuat text decoration dengan CSS

July 29, 2018

Anda dapat membuat text decoration seperti underline, overline, line-trough, maupun blink dengan properti text-decoration : option; dengan option dapat diganti dengan underliner, overline, line-trough atau blink. Untuk melihat perbedaannya, perhatikan contoh berikut. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...

Membuat drop cap menggunakan CSS

July 25, 2018

Setelah sebelumnya kita mempelajari text case, kali ini kita akan membahas cara membuat drop cap. Drop cap di gunakan untuk mempercantik tampilan paragraf di huruf yang pertamanya. Berikut ini contoh penulisan style nya : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">...

Mengubah text case dengan CSS

July 23, 2018

Dengan menggunakan CSS, Anda dapat pula mengubah suatu teks menjadi huruf kecil semua (lowercase), besar semua (uppercase), atau capitalize (hanya huruf pertama dari kata yang dibuat besar). Hal ini dilakukan dengan menggunakan properti text-transform : option; dengan option dapat diganti dengan lowercase, uppercase, atau capitalize. Contoh: <!DOCTYPE...

Alignment text dengan CSS

July 23, 2018

Kali ini kita akan membahas perataan text (alignment). Ada pula di antara nya adalah seperti left, center, right dan justify. Sintak nya : text-align : jenis; dengan value jenis dapat digantikan dengan left, center, right dan justify. Contoh <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...

Membuat text indent menggunakan CSS

July 23, 2018

Text indent adalah text pada awal paragraf yang menjorok ke dalam kalimat. text-indent : jarak; Contoh <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Guide</title> <style type="text/css"> p { ...

Mengatur jarak spasi antar Text

July 23, 2018

CSS juga dapat di gunakan untuk mengatur spasi antar text, perhatikan contoh berikut : Pada judul heading terlihat bahwa antar kata dan huruf terdapat jarak tertentu. Jarak tersebut diatur dengan menggunakan properti sbb: word-spacing : jarak; letter-spacing : jarak; Properti pertama di atas digunakan untuk mengatur jarak antar kata, sedangkan yang kedua untuk mengatur jarak...

Mengubah warna background teks dengan CSS

July 22, 2018

Apabila Anda ingin mengubah warna background text, maka berikut ini adalah propertinya: background : warna; cara penulisan value dari warna sama dengan color, yaitu dapat berupa nama eksplisit warna yang diinginkan maupun kode hexadesimalnya. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...

Mengubah warna teks menggunakan CSS

July 22, 2018

Untuk mengubah warna font, propertinya adalah: color : warna; dengan value warna diisikan dengan warna yang diinginkan, dapat berupa kode hexadesimalnya, maupun nama eksplisitnya. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">...

Mengatur jarak Baris menggunakan CSS

July 22, 2018

Di sini kita akan mempelajari bagaimana mengatur jarak baris dalam suatu paragraf. Berikut ini adalah nama properti nya line-height : size; dengan size diisi angka yang menyatakan ukuran disertai satuannya. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">...

Mengatur ukuran font menggunakan CSS

July 21, 2018

Pengaturan ukuran font dapat dilakukan dengan style yang menggunakan properti font-size : size; dengan size di isi angka yang menyatakan ukuran disertai satuannya. Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>...

Membuat teks Bold dengan CSS

July 21, 2018

Kita akan membahas bagaimana menggunakan CSS untuk membuat teks bold (bercetak tebal). Untuk membuat teks tebal atau bold, properti yang digunakan adalah font-weight : bold; Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">...

Membuat teks italic dengan css

July 21, 2018

Membuat teks italic dapat pula dilakukan melalui style. Berikut ini cara penulisannya font-style : italic; Contoh: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS Guide</title> <style type="text/css">...

Style untuk font family

July 21, 2018

Font family digunakan untuk menentukan jenis huruf/font pada suatu tampilan teks. Berikut ini adalah nama properti dan penulisan valuenya: font-family: name; dengan name adalah jenis font yang Anda inginkan. Contoh: p { font-family: arial; } Anda juga dapat memberikan jenis font lebih dari satu yang dipisahkan dengan koma. Contoh: p { font-family...

Penulisan CSS Eksternal

July 21, 2018

Pada bagian bagian sebelumnya kita hanya menggunakan cara penulisan CSS internal. Sekarang kita akan membahas mengenai penulisan CSS di file terpisah (eksternal). Contoh <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>CSS...

Value pada CSS

July 21, 2018

Pada bagian ini kita akan membahas tentang aturan penulisan value, ada beberapa jenis value yang dapat di berikan pada properti style, Antara lain berupa predefined value, bilangan, prosentase, url, dan juga warna. Predefined Value Predefined value merupakan nilai yang sudah terdefinisikan oleh (X)HTML. Nilai ini dapat dipilih dari beberapa alternatif pilihan yang...

Inside Post