Dasar Pemrograman Web 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 <head>, <title>, <body>, <html>, <img>, dan lain-lain. Tag html tidak bersifat case sensitive <body> sama dengan <BODY> Bentuk umum penulisan tag html adalah: <ELEMENT ATTRIBUTE = value> Element - nama tag Attribute - atribut dari tag Value - nilai dari atribut Contoh: <BODY BGCOLOR=lavender>
Contoh Tag HTML <html> Penanda Dokumen <head> Header <title> Judul dokumen <body> Isi dokumen <h1> Judul paragraf <p> Paragraf <b> <i> <u> <sup> <sub> Atribut <br> Ganti baris < font> Font <li> Enumerasi <hr> Garis mendatar <img> Gambar <a> Link (kaitan) <table> Tabel <!----> Komentar
Struktur HTML Homepage Kepala <head> <Head> </Head> <Title> </Title> Judul Homepage Tubuh <body> <Body> </Body> Isi Teks Isi Tabel. Isi Audio, Video, dll.
<html> <head> </head> <body> </body> </html> <title>halaman Latihan</title> <h1>ini adalah latihan pemrograman web pertamaku </h1>
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 <frameset></frameset>
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 <table> </table> dan banyak sekali kombinasi pemakaian tag <tr></tr> dan <td></td>
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 <div></div>
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 <font> 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 ^^