dengan sebuah class bernama page mewarisi ukuran padding dari aturan CSS yang juga diterapkan dari elemen

Color

Pada bagian ini akan dipelajari cara mengatur warna pada CSS. Pengaturan warna pada CSS setidaknya memiliki tiga cara yang bisa anda pilih dan juga cara tambahan yang mulai ada pada CSS versi 3. Beberapa istilah pada pengaturan warna ini juga akan dibahas. Pemahaman tentang pengaturan warna ini selanjutnya akan dipakai pada saat membahas tentang teks dan dan konsep boxes. Foreground Color Color Property color memungkinkan anda untuk menentukan teks didalam sebuah elemen. Anda bisa menentukan warna dengan menggunakan salah satu dari tiga cara berikut ini RGB Values Cara ini menunjukkan warna dalam hal banyaknya warna merah, hijau dan biru. Misalnya rgb(100,100,90)

Hex Codes Merupakan enam digit kode yang mewakili jumlah dari warna merah, hijau dan biru dalam sebuah warna. Diawali dengan karakter #

Color Names Merupakan warna sejumlah 147 jenis warna yang telah didefiniskan sebelumnya yang telah dikenali oleh browser. Misalnya DarkCyan Background Color CSS memperlakukan setiap elemen HTML layaknya berada dalam sebuah kotak dan background-color akan mengatur warna latar belakang dari kotak tersebut. Anda bisa menentukan pilihan untuk background color dengan cara yang sama seperti foreground color yakni dengan menggunakan nilai RGB, kode Hexa, dan dengan menuliskan nama warna. Jika anda tidak menuliskan sebuah warna untuk background, maka secara default background akan transparan. Secara default, sebagian browser memiliki wawrna putih sebagai warna backgroundnya. Akan tetapi bisa

saja pengguna mengatur warna background bagi browser mereka masing-masing. Jadi untuk memastikan warna background web anda adalah warna putih, anda bisa mengaturnya pada elemen Mengenal Warna Setiap warna pada layar komputer terbuat dari campuran sejumlah warna merah, hijau dan biru. Untuk menemukan warna yang anda inginkan, anda bisa menggunakan software yang menyediakan fasilitas pemilihan warna. Monitor komputer terbuat dari ribuan kotak-kotak kecil yang bernama pixel. Saat monitor tidak dinyalakan, warnanya akan hitam karena tidak menimbulkan cahaya sama sekali. Saat dinyalakan, setiap pixelnya bisa memiliki warna yang berbeda yang akhirnya membentuk sebuah gambar. Warna tiap pixel pada layar ditampilkan dari hasil campuran antara merah, hijau dan biru, sama halnya dengan layar televisi. Fasilitas untuk memilih warna biasanya tersedia di beberapa program untuk editing gambar, misalnya Photoshop dan GIMP. Anda bisa melihat nilai RGB yang anda tentukan dari hasil warna yang dipilih. Selain itu anda juga bisa melihat nilai hexa yang ditandai dengan awalan karakter berupa #. Selain itu anda bisa menggunakan tool yang tersedia secara online, misalnya seperti coloschemedesigner.com

CSS3: Opacity CSS3 memperkenalkan property opacity yang memungkinkan anda untuk menentukan opacity dari sebuah elemen beserta sub elemennya. Nilainya antara 0.0 hingga 1.0. Sehingga nilai 0.5 berarti 50% opacity dan nilai 0.15 berarti 15% opacity. Property CSS3 rgba memunkinkan anda untuk menentukan warna seperti pada RGB, akan tetapi menyediakan nilai keempat yang berupa nilai tambahan untuk menentukan opacity. Nilai ini dikenal dengan alpha value dan nilainya antara 0.0 hingga 1.1. Karena beberapa browser versi lama belum mendukung fitur ini, anda harus menyiapkan pengaturan CSS warna yang ditampilkan tidak akan ditampilkan secara transparan. C. Langkah Kerja

Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan yang ada pada praktikum ini 1. Buatlah folder baru bernama “Praktikum6” dan pastikan anda menyimpan semua file percobaan di praktikum ini pada folder tersebut 2. Buat folder css 3. Buka teks editor pilihan anda 4. Ketikkan semua kode yang ada pada tiap percobaan 5. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor percobaan dengan ekstensi .html 6. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada “Save as Type” menjadi “All Files” 7. Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML. D. Hasil Percobaan dan Analisa Percobaan 1 : Pengenalan Syntax

Analisa :  sintax berfungsi untuk mencari letak halaman css, sedangkan atribut tipe text/css adalah menunjukkan bahwa file yang dicari adalah file css sehingga secara otomatis desain yang dicoding di file css digunakan di halaman web.  Tag

dipakai untuk nama dari bagian yang akan diatur style nya oleh css  dari hasil praktikum menunjukkan, bagian

dan

berwarna pink dan

berwana coklat muda Percobaan 2 : Menggunakan CSS Eksternal

Analisa :  sintax berfungsi untuk mencari letak halaman css, sedangkan atribut tipe text/css adalah menunjukkan bahwa file yang dicari adalah file css sehingga secara otomatis desain yang dicoding di file css digunakan di halaman web.  Tag

dipakai untuk nama dari bagian yang akan diatur style nya oleh css  Dari hasil praktikum terlihat bagian yang diubah adalah body dan h1 sesuai dengan apa yang dicoding di file css Percobaan 3 : Internal CSS

Analisa :  Dari hasil praktikum, coding css diletakkan pada satu halaman yang sama dengan html. Letaknya di dengan sintax <style> yang bertipe txt/css dimana hal ini menunjukkan bahwa didalam sintax <style> keseluruhannya adalah css untuk mengatur konten dari halaman tersebut.  Dari hasil praktikum, style yang dicoding di css adalah bagian body yang diubah font-family dan backgroundnya (sesuai gambar), dan bagian h1 yang mengatur warnanya dengan atribut rgb. Percobaan 4 : Inline Style

Analisa :  Pada percobaan ini coding css diletakkan di tiap-tiap elemen. Atribut style bisa digunakan di tiap elemen untuk menunjukkan bahwa dia punya css untuk mengatur tampilan halaman. Sayangnya cara ini sangat tidak efektif, sebab harus mengatur tampilan per bagian, apalagi jika halaman yang akan dibuat sangat banyak, hal ini bisa cukup merepotkan dan menghabiskan banyak space. Namun, kelebihannya bisa meminimalisir kesalahan, sehingga jika dari bagian elemen tidak sesuai dengan keinginan maka cepat ditemukan kesalahannya. Percobaan 5 : Urutan Penerapan Style dari CSS

Analisa :  Pada percobaan ini, menggunakan internal css yang diletakkan diantara sintax dengan elemen <style tipe = “text/css”> yang menunjukkan bahwa dia adalah file css  tanda * mengartikan seluru entire halaman yang font-family nya di set dengan arial, verdana, sanserif. Maksudnya adalah jika browser tidak support font arial maka font yang digunakan adlah verdana, jika tidak support pula maka yang digunakan adalah sans-serif, jika sans-serif tidak support maka biasanya mengikuti default font yang ada pada browser.  Pada h1, terdapat font-family yang dideklarasikan dengan tanda petik ataupun tidak dengan tanda petik, hasilnya sama saja sebenarnya, jika browser supprot maka font pertama yang akan digunakan.  P b maksudnya disini adalah css bagian ini mengatur elemen b yang ada dalam area elemen p, sehingga yang dieksekusi hanya bagian b didalam area p itu saja  p dengan tambahan atribut id = “intro” menunjukkan bahwa p ini bukan p biasa, p ini punya identitas yaitu intro, sehingga jika ingin mengedit p bagian ini diperlukan tambahan tanda pagar (#) yang menunjukkan id, sehingga menjadi p#intro  kalau p tanpa id maka jadi elemen p yang seperti biasanya, jika mau mengedit di css tinggal memanggil elemen p nya.

Percobaan 6 : Inheritance

Analisa:  Pada percobaan ini, menggunakan internal css yang diletakkan diantara sintax dengan elemen <style tipe = “text/css”> yang menunjukkan bahwa dia adalah file css  untuk css body bisa langsung diedit / dipaggil elemennya 

menunjukkan bahwa ia membuat area antara

hingga

dengan class bernama page. Untuk mengedit css pada area div tidak perlu memanggil div nya. Cukup memanggil nama kelas nya yaitu page namun ditambah dengan titik (.) didepannya sebab titik ini menunjukkan bahwa page adalah sebuah kelas.

Percobaan 7 : Multiple Stylesheet

Analisa :  Dari percobaan ini, dilakukan 2 cara yaitu menggunakan css di dalam halaman dan diluar halaman. Dua-dua nya akan sama-sama bekerja.  Yang didahulukan diantara kedua bagian css adalah yang di dalam halaman dulu.  Pada bagian dalam menggunakan sintax <style> saja tanpa mendeklarasikan tipe style, artinya dengan atau tanpa atribut style, css akan tetap mampu dieksekusi  bagian css diluar halaman mengatur body dan p  bagian css yang didalam mengatur hanya h3 saja Percobaan 8 : Comment & Foreground Color

Analisa :  Pada percobaan ini menggunakan internal css dengan deklarasi elemen style dan atribut type nya yaitu css  Yang diatur pada css adalah bagian h1, h2 dan p  /* ... */ artinya komen, dimana text diantara tanda tersebut tidaklah dieksekusi, sehingga tidak akan muncul di tampilan halaman web. Hal ini digunakan untuk menandai atau mengingatkan programmer tentang code yang dibuatnya tersebut, istilahnya seperti catatan kecil.  Color pada css bisa menggunakan nama warna langsung seperti black, blue, darkcyan,dsb. Bisa pula dengan code hexa warna atau juga dengan rgb.

Percobaan 9 : Background Color

Analisa :  Pada percobaan ini menggunakan internal css dengan deklarasi elemen style dan atribut type nya yaitu css  Color pada css bisa menggunakan nama warna langsung seperti black, blue, darkcyan,dsb. Namun tidak semua warna ada namanya. Sehingga css juga menyediakan color dengan inputan code hexa dari warna, diawali dengan tanda pagar kemudian 6 digit kode warna. Dan css juga menyediakan inputan rgb jika ingin mengatur tiap-tiap rgb nya, sehingga pencampuran warna bisa dilakukan di css.

Percobaan 10 : Transparansi pada background

Analisa :  Pada percobaan ini menggunakan internal css dengan deklarasi elemen style dan atribut type nya yaitu css  pada bagian css body, background color maksudnya adalah mewarnai seluruh latar dengan warna #dcc41f, sedangkan color artinya font yang berada dalam

sintax body berwarna putih atau #ffffff sampai ada sintax yang mengkhususkannya.  H1, h2 dan p masing-masing menggunakan background color dimana areanya hanya melingkupi latar tulisan saja.  p.two memanggil kelas two yang berada di elemen p, disini dia mengatur background color dengan rgb dan rgba. Rgba digunakan untuk mengatur 4 hal. Yaitu r (red), g (green), b (blue) dan a (opacity/transparansi). Yang digunakan adalah skala 0 sampai 1. 0.5 artinya opacity atau transparansi warnanya adalah 50%. tidak semua browser mendukung rgba, salah satunya adalah Internet Explorer. E. Tugas 1. Buatlah sebuah halaman dengan background gambar, dan buatlah sebuah kotak transparent yang didalamnya terdapat sebuah tulisan. Seperti contoh dibawah ini

2. Buatlah sebuah kotak gradient seperti gambar di bawah ini

Hasil Tugas Tugas 1 : http://noerrhiannah.mb.student.pens.ac.id/tasks/Praktikum4/tugas1.html

Tugas 2 : http://noerrhiannah.mb.student.pens.ac.id/tasks/Praktikum4/tugas2.html