Pemrograman Web

Dasar Pemrograman Web Adam Hendra Brata

 Konsep Dasar Desain Web  HTML  CSS

HTML

 HTML (HyperText Markup Language)  Bahasa standar yang digunakan untuk menampilkan document web.  Mengontrol tampilan dari web page dan contentnya.  Mempublikasikan document secara online sehingga bisa di akses.  Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.  Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML.

 HyperText Markup Language  Bahasa umum untuk web  Ditransmisikan lewat Hyper Text Transfer Protocol  Client mengirim string request (dengan parameter)  Server mengembalikan document yang diminta  Mendeksripsikan konten dokumen dan strukturnya  Format terstruktur  Konten dan struktur pada dokumen yang sama  Browser dan formatter bertanggung jawab dalam proses rendering  Dokumen yang formatnya salah dapat ditampilkan secara parsial  Beda browser bisa berbeda hasil penampilan

 Tag HTML  Kalau pada bahasa pemrograman kita mengenal keyword code, maka pada HTML kita mengenal yang namanya tag.  Contoh tag html adalah ,

Homepage Isi…Teks Isi…Tabel. Isi…Audio, Video, dll.

Tubuh

Ini adalah latihan pemrograman web pertamaku

 Layout dalam Desain Web  Layout menjadi hal utama dalam desain web, karena tata letak yang tepat dari sebuah website menentukan keberhasilan dari tujuan web tersebut.  Layout secara umum dibagi menjadi :  Frame layout  Table Layout  CSS Layout

 Frame Layout  Frame layout dibentuk dengan menggunakan beberapa halaman web terpisah yang “disatukan” dengan menggunakan frame  Ciri utamanya dalam script webnya ditemukan tag

 Frame Layout  Teknik frame layout adalah teknik yang sangat “jadul”  Kelebihan frame layout adalah pada kesederhanaannya dan bisa menjaga elemen website tidak terkena scroll  Frame layout memiliki kekurangan : 1. Frame merusak penyatuan dari sebuah Web 2. Frame menyebabkan permasalahan kepada robot search engine 3. Frame membuat URL berhenti bekerja 4. Frame mempersulit Bookmarking dan dalam pencetakan 5. Frame mempersulit aksesibilitas 6. Frame secara teknis memperumit kompleksitas Web

 Table Layout  Table layout dibentuk dengan menggunakan elemen table dalam HTML yang disusun sedemikan rupa sehingga menjadi sebuah layout web  Ciri utamanya dalam script webnya ditemukan penggunaan tag dan banyak sekali kombinasi pemakaian tag dan

 Table Layout  Teknik table layout adalah teknik yang yang populer di era pertengahan perkembangan web (2000-an)  Kelebihan table layout adalah : 1. Sangat mudah dipahami dan dimaintain karena sistematis 2. Relatif mudah jika ingin mengubah yg bersifat parsial 3. Tingkat presisi posisi elemen lebih tinggi  Table layout memiliki kekurangan : 1. Ukuran file menjadi besar 2. Terkadang tampilan rusak jika browser yang dipakai tidak support 3. Tidak cocok untuk digunakan pada web yang memiliki layout bersifat dinamis

 CSS Layout  CSS layout dibentuk dengan menggunakan elemen CSS yang mengkombinasikan tag dan style dalam HTML  Ciri utamanya dalam script webnya ditemukan banyak penggunaan tag

 Interaksi Manusia dan Komputer  IMK didefinisikan sebagai disiplin ilmu yang berhubungan dengan perancangan, evaluasi, dan implementasi sistem komputer interaktif untuk digunakan oleh manusia dan studi tentang fenomena di sekitarnya.  IMK pada prinsipnya membuat agar sistem dapat berdialog dengan penggunanya “seramah” mungkin.  Faktor IMK yang menjadi fokus utama pada desain web adalah penggunaan warna, layout, penggunaan gambar dan penggunaan huruf.

 Interaksi Manusia dan Komputer

 Interaksi Manusia dan Komputer  Warna  Warna secara umum memiliki arti dan kesan yang berbeda-beda, bahkan di beberapa negara warna memiliki arti yang lebih spesifik  Merah = panas, semangat, kuat, marah  Merah di Cina dianggap sebagai warna keberuntungan namun warna merah di Afrika dianggap sebagai warna duka cita

 Layout  Tata letak unsur-unsur website yang baik membuat pengguna merasa nyaman untuk memakai website, sehingga desain layout menjadi hal yang sangat penting sebelum melakukan pemrograman lebih lanjut

 Interaksi Manusia dan Komputer  Gambar  Penggunaan gambar di web memberikan kesan memperjelas dan mempercantik tampilan  Namun perlu diingat bahwa pemakaian gambar yang kurang tepat, juga dapat memberi nilai minus pada desain kita  Penggunaan gambar harus disesuaikan dengan tema dan kebutuhan  Huruf  Penggunaan huruf yang baik menjadi kunci keberhasilan sebuah website  Huruf harus bisa dibaca dengan jelas, sesuai kaidah umum dan sesuai dengan tema web

CSS

 Cascading Style Sheet  CSS = Cascading Style Sheet  Fungsi : mendefinisikan style untuk suatu teks dengan jenis huruf, ukuran , warna tertentu.  Dalam pemakaian HTML murni kita pasti menggunakan tag dan tag lain untuk mengontrol bagaimana layout dari halaman anda. Hal ini mengikat presentasi halaman web dengan isinya, dan terasa menyulitkan dalam perancangan dan pengembangannya.  CSS adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur , CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.

 Cascading Style Sheet  Jika web memiliki sekian halaman yang memiliki format yang seragam, dan kemudian ingin merubah format dasarnya, tentu yang dilakukan adalah mengubah tiap halaman tersebut.  Dengan Style Sheet dapat mengontrol seluruh layout dari site yang dibuat, dan jika ingin mengubah tampilan dari web site tersebut cukup dengan memodifikasi style sheet.  Keuntungan menggunakan CSS  Memisahkan presentation sebuah dokumen dari content document itu sendiri.  Mempermudah dan Mempersingkat pembuatan dan pemeliharaan dokumen web  Mempercepat proses rendering/pembacaan HTML.

 Cascading Style Sheet  Terdapat 3 teknik dasar penggunaan CSS :  Inline Style Sheet  Embedded Style Sheet  Linked Style Sheet

 Inline Style Sheet

 Mengetikkan langsung dalam tag html sebagai atribut

 Embedded Style Sheet

 Menggunakan tag style di dalam tag head.

 Linked Style Sheet

 Menyimpan informasi style ke dalam sebuah file dengan ekstensi/type file css dan memanggil file css dalam html dengan tag link yang diletakkan dalam tag head.

 Linked Style Sheet

 Aturan Penulisan CSS  Selector  Terdiri dari tag,class,ID  Declaration  Mendeskripsikan property dan value  Contoh H1 { Color : #0000FF }  Keterangan :  Selector : H1  Property : Color  Value : #0000FF

 Selector  Secara umum ada 3 jenis selector dalam CSS :  Tag HTML  ID  Class  Class  Diawal penulisan menggunakan tanda titik, pada HTML ditambahkan class  ID  Diawali dengan tanda #, dapat digunakan untuk mendefinisikan header,content, dan footer dalam desain web krn didefiniskan dengan ID berbeda.

 Class

 ID

 CSS Layout  CSS Layout sangat populer digunakan dalam desain web  Kelebihan CSS Layout  Update tampilan lebih mudah  Beban bandwidth lebih kecil  Modifikasi web template lebih mudah  Lebih mudah digunakan pada mobile phone  Seacrh engine friendly  Kekurangan CSS Layout  Memerlukan ketelitian tinggi dalam menuliskan tag tag div terutama lay out yang kompleks  Terkadang efek tampilan di tiap browser berbeda

 CSS Layout

Perhatian

 Perhatian  Dikarenakan materi yang disampaikan pada presentasi kuliah ini hanya sebagai pengantar dasar saja, maka diharapkan membaca dan mencari referensi lain sebagai pengayaan pengetahuan tentang dasar – dasar desain web.  Cari dan baca artikel / tutorial dari internet atau buku tentang desain web.  Explorasi kembali materi tentang desain web dan HTML-CSS.

Terimakasih dan Semoga Bermanfaat ^^