Berjumpa lagi pada Pertemuan kedua Web Programming! Pada Perkuliahan pekan ini, kita akan mempelajari dasar-dasar penggunaan HTML5 dan CSS3. Kedua scripting itu kita akan gunakan untuk membuat design layout dari tampilan web. Gunakan Editor Anda, dan ikuti langkah-langkah pembelajaran yang disampaikan berikut ini. Diharapkan setelah mengikuti pertemuan ini, mahasiswa memperoleh capaian sebagai berikut, dapat memberikan contoh penerapan HTML dan CSS pada pembuatan layout dan design web memahami syntax dasar HTML dan CSS dan mampu menuliskannya dengan baik Pengenalan HTML5 dan CSS3 HTML merupakan bahasa untuk scripting (tanpa perlu proses compiling) menerjemahkan hypertext kedalam bentuk tampilan layout web. Sedangkan untuk CSS , digunakan pada pembuatan design tampilan web itu sendiri. (gambar diambil dari Sitepoint, http://www.sitepoint.com/simply-javascript-2/ ) Secara umum dikenal istilah Three Layer Web Development, First Layer, Content or Structure . Pada bagian ini digunakan HTML untuk mengatur layout dan mengisi konten dari halama web yang akan dibuat. Second Layer, Style or Presentation . Pada bagian ini scripting CSS digunakan untuk membuat tampilan design dari web, termasuk hal-hal yang berkaitan dengan attribut seperti jenis huruf, warna, ukuran, gambar, dan lainnya. Third Layer, Behavior . Pada bagian ini digunakan berbagai varian dari Javacript untuk membantu pemrosesan tampilan web. Misalnya dalam pembuatan animasi tampilan, validasi inputan form, proses navigasi, penggunaan Ajax, dan banyak lagi. Pemahaman mendasar tentang hal ini, bisa Anda dapatkan juga dengan membaca buku "Learning Web Design" Chapter 3 . Untuk lebih memahami penggunaan dasar HTML dan CSS, silahkan nikmati video lecture notes berikut ini. Youtube Tag Dasar HTML yang wajib Anda ketahui? Anda disarankan untuk mencoba seluruh Tag HTML5 yang ada, dan diharapkan bisa menghapalkan sebagian besar dari Tag tersebut. Selain itu disetiap Tag terdapat juga berbagai attribute/properties yang perlu Anda coba dan pahami cara penggunaannya. Berikut ini beberapa Tag dan Attribute penting yang perlu Anda coba, Tag : http://www.w3schools.com/tags/default.asp Attribute : http://www.w3schools.com/tags/ref_standardattributes.asp Tips : perhatikan dulu contoh penggunaan Tag atau Attribute pada link diatas, sehingga Anda memahami kegunaan dari syntax tersebut. Kemudia jika diperlukan Anda bisa membaca penjelasannya lebih lanjut. Dasar Penggunaan CSS? Berbeda halnya dengan HTML (untuk pembuatan layout), CSS digunakan untuk membuat design tampilan web. Beberapa hal yang bisa Anda lakukan dengan CSS adalah, Mengubah format tampilan seperti warna, bentuk, ukuran, gambar, dll Menambahkan animasi atau interaksi secara terbatas Untuk lebih memahami penggunaan CSS tersebut silahkan Anda nikmati video Tutorial berikut ini, Youtube Penjelasan lebih lanjut mengenai dasar penggunaan CSS bisa Anda lihat pada dokumen Slide CSS yang diberikan dibagian bawah. Referensi utama untuk Materi ini, Buku : "Learning Web Design 4th edition", Part II dan Part III Link : http://www.w3schools.com/html/default.asp Link : http://www.w3schools.com/css/default.asp
Course Modules Materi Perkuliahan Topik 2
Referensi Tag HTML
Slide Materi CSS
Contoh penggunaan script HTML5
Contoh penggunaan script CSS3
Contoh Layout Web sederhana
Buku: Niederst, Jennifer. Learning Web Design (4th...
Tugas Topik 2
Tugas Layout & Design Web
Latihan Design Web HTML 5
Aktifitas Pendukung
Diskusi materi layout & design
Chat Layout & Design Web
Rangkuman Materi Topik #2