Materi Pertemuan 1 Pengenalan Web Design Bagian I : Dasar- dasar CSS lilih suhaeri WATERFIRE DEV. Kelaskita.com
Pengenalan Web Design 1. Sejarah singkat tentang website Sejak awal kelahiran website di awal tahun 1990, para programer dan graphic desainer mendapatkan sebuah lahan baru untuk karya mereka, yang kemudian disebut web design. Seiring perkembangannya, web design akhirnya tumbuh menjadi segmen design tersendiri yang jelas-jelas terpisah dari graphic design. Skill yang dibutuhkan pun juga berbeda dengan graphic design, karena web design juga melibatkan berbagai bahasa pemrogaman. Hingga saat ini, ada dua golongan utama pekerja web design. Golongan pertama adalah orang-orang yang dulunya programer, dan golongan kedua adalah orang-orang yang dulunya graphic designer. Karakter web yang dihasilkan dua kelompok ini cukup bertentangan. Mantan programer biasanya lebih mementingkan sistem, sedangkan mantan graphic designer lebih mementingkan tampilan. Kami pun juga berpendapat bahwa web desain yang sempurna selalu dihasilkan oleh minimal dua orang: satu orang graphic designer sebagai seniman, dan satu orang programer sebagai pengatur sistem. Website pertama kali dibuat oleh Tim Berners-Lee pada bulan Agustus 1991. Website pertama itu bernama World Wide Web. Bentuknya sangat sederhana. Semua masih
menggunakan script html standar tanpa ada unsur apapun. Website pertama tersebut masih ada dan bisa diakses hingga saat ini. Silahkan Klik di sini untuk melihatnya. Lahirnya website pertama merupakan babak baru bagi perkembangan komputer dan teknologi informasi. 2. Sejarah singkat tentang html, css dan lainnya yang mendukung. a. Sejarah HTML (Hyper Text Markup Language) Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintahperintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tandatanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML. Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya
meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML saat ini adalah HTML5. b. Sejarah CSS (Cascading Style Sheet) Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian membentuk hubungan ayah-anak (parent-child) pada setiap style. CSS sendiri merupakan sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996. Setelah CSS distandarisasikan, Internet Explorer dan Netscape melepas browser terbaru mereka yang telah sesuai atau paling tidak hampir mendekati dengan standar CSS. c. Sejarah jquery Petama kali dibuat oleh John Resig pada tahun 2005, JQuery sendiri pertama kali dirilis tanggal 14 Januari 2006. Dan versi terbaru dari JQuery udah sampe versi 1.9.x Dia terinspirasi dari Behavior code. Saat itu, Dia ngerasa hasil dari Behavior Code tidak elegan dan masih jelek, maka dikembangkannya JQuery. Dimana dengan penulisan code JQuery jadi lebih simple, gampang dan tentunya dengan hasil yang memuaskan.
jquery adalah library JavaScript OpenSource yang menekankan pada interaksi antara JavaScript dan HTML. Apa bedanya dengan situs-situs yang tidak menggunakan JQuery? banyak bedanya, misalnya browser seakan tidak merefresh sebuah page ketika kita men-submit sebuah data kedalam server mereka. Dan lebih hebatnya lagi JQuery mempunyai animasi tanpa menggunakan flash(.swf), jadi lebih cepeat diload didalam browser dan tanpa harus install plugins.
Bagian I : Dasar-dasar CSS Sebelum kita mulai mempelajari dasar dasar css kita harus benar- benar memahami dulu dasar dari css ( meskipun membosankan ). Kenapa harus paham? Mungkin dasar dasar ini bisa diabaikan untuk website yang berskala kecil. Tapi jika kita membuat website dengan skala besar atau tingkat kedinamisan website horror itu sangat mempengaruhi performa website itu sendiri. Karena pasti adanya style sheet yang berulang ulang kita deskripsikan. Jadi kesimpulan dari hasil curcol saya adalah kita harus mengikuti standard rules dari css itu sendiri. Ok. Let s Play 1. Pengenalan CSS Web desain Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman. 1.1. Cara Kerja CSS CSS adalah file text biasa yang di embed diantara tag <head> </head> dari sebuah dokument HTML yang membantu memisahkan konten dan tampilannya. Perhatikan Gambar berikut ini :
Gambar 1.1. Cara Kerja CSS Keterangan : Dokumen HTML Dokumen HTML ini adalah kumpulan dari tag tag dan deklarasi style yang digunakan pada halaman HTML tersebut. File css File css ada kumpulan dari style style yang akan digunakan oleh halaman HTML. Dihubungkan Penghubungan yang dilakukan disini adalah pemanggilan file css dari dokumen HTML dengan mendeklarasikan file css di dalam lingkup <head> </head>.
Informasi Informasi disini bermaksud membaca tag html dan style secara structural untuk kemudian melakukan pengechekan tag html apa saja yang yang bersangkutan dengan file css untuk mendapatkan nilai propertinya dari masing masing tag. Browser Disini berperan sebagai transalator dari dokument html dan code css untuk kemudian ditampilkan. Tampilan yang akan dilihat user Mungkin sebagian teman teman yang disini masih merasa bingung dengan penjelasan diatas. Nah itu hal biasa. Mungkin setelah belajar selector mengerti arti maksud diatas. 2. Mengunakan Selector Dasar Sebelum kita menggunakan selector, kita harus mengenal dulu selector itu apa? CSS memungkin kita menggunakan beberapa selector diantaranya sebagai berikut : a. Selector Type (tulisan) Adalah selector dimana dia akan memilih tag HTML yang anda deklarasikan di html. Sebagai contoh bisa di download disini.
b. Selector Class Selector Class dalam penulisan CSS nya terlebih dahulu harus mendeklarasikan dengan. (titik) sebelum nama classnya. Solid ID Class Solid id class adalah selector yang berdiri sendiri sebagai class dan Solid ID Class ini bisa digunakan beberapa kali. Relative Selector Class Relative ID class adalah selector yang hanya mengubah elemen yang dipasanginya. Dan Relative Class ini tidak bisa digunakan selain dengan pasangan elemnnya. Contoh Selector Class bisa didownload disini. c. Selector ID Selector ID dalam penulisan CSS nya terlebih dahulu harus mendeklarasikan dengan # (Sharp) sebelum nama classnya. Contohnya gunakan saja contoh Selector Class cuman tinggal ganti.(titik) dengan #(sharp). d. Selector Descendant (Turunan) Selector ini adalah selector yang mempunyai bapak dan anak. Mereka saling ketergantungan didalamnya. Contohnya seperti disini.