Materi Pertemuan 1

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.