Introduction to Web & HTML Pertemuan 08 Matakuliah : L0182 / Web & Animation Design Tahun : 2008 Introduction to Web & HTML Pertemuan 08
Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Memahami dasar-dasar dalam mendesain Web yang baik Mengetahui sintaks-sintaks dasar pada HTML Bina Nusantara
Outline Materi User Interface Delapan Aturan Emas (Eight Golden Rules) World Wide Web Top Ten Mistakes in Web Design Keuntungan Menggunakan Web HTML HTML Tags HTML Tag Attributes Bina Nusantara
User Interface User Interface adalah penghubung antara manusia dan alat atau sistem yang memungkinkan manusia untuk berinteraksi dengan alat atau sistem tersebut. User interface menyediakan alat untuk : Input, memungkinkan user untuk memanipulasi sistem Output, memungkinkan sistem untuk memproduksi efek dari manipulasi yang dilakukan oleh user Saat ini, tipe-tipe user interface berikut adalah yang paling umum : Graphical User Interface (GUI) menerima input melalui suatu alat seperti keyboard komputer dan mouse dan menyediakan tampilan grafis yang komunikatif pada monitor. Web User Interface (WUI) menerima input dan menyediakan tampilan dengan men-generate halaman-halaman web yang ditransmisikan melalui Internet dan ditampilkan melalui web browser Bina Nusantara
Rancangan Interaksi Yang Baik Untuk mendapatkan kegunaan terbaik dari suatu aplikasi, sangat penting untuk memiliki interface yang dirancang dengan baik. “Delapan Aturan Emas Perancangan Interface” dari Ben Shneiderman : Berusaha untuk konsisten Memungkinkan user untuk menggunakan shortcut Memberikan umpan balik yang informatif Merancang dialog yang memberikan penutupan Menawarkan penanganan kesalahan yang sederhana Memungkinkan pembalikan aksi yang mudah Mendukung internal locus of control Mengurangi beban ingatan jangka pendek Bina Nusantara
Alat Perancangan CAI software : Macromedia Authorware, IconAuthor, Quest. Multimedia construction tools : HyperCard, Macromedia Director, Macromedia Flash. Slide presentation software : Microsoft PowerPoint. Visual programming tools : Microsoft Visual Basic, Visual Studio .NET), Borland Delphi. Web design tools : Macromedia Dreamweaver, Macromedia Fireworks. Bina Nusantara
World Wide Web World Wide Web (sering disingkat sebagai Web) adalah suatu sistem yang menghubungkan dokumen hypertext yang diakses melalui internet. Dengan suatu web browser, seorang user melihat halaman web yang mungkin berisi text, image, video, dan multimedia lainnya dan dihubungkan menggunakan hyperlinks. Bina Nusantara
Top Ten Mistakes in Web Design Jakob Nielsen's Top Ten Mistakes in Web Design : Menggunakan Frame Penggunaan teknologi baru yang sembarangan Scrolling Text, Marquees, dan Animasi yang terus berjalan URL yang kompleks Halaman yatim Halaman yang terlalu panjang Kurangnya dukungan navigasi Warna link yang tidak standar Informasi yang ketinggalan Waktu download terlalu lama Bina Nusantara
Keuntungan Penggunaan Web Audiens yang umum Dioperasikan 24 jam, 7 hari seminggu Relatif murah Mengiklankan produk Mendistribusikan katalog produk Online surveys Pengumuman Online discussion forums Mendapatkan feedback dari pelanggan Distribusi Informasi yang cepat Multimedia Kemampuan melakukan pemformatan Bina Nusantara
HTML HyperText Markup Language (HTML) adalah bahasa markup yang digunakan untuk menstrukturkan text dan dokumen multimedia dan untuk mengatur hypertext links antar dokumen, sangat banyak digunakan pada World Wide Web. Halaman Web dibangun dengan HTML tags (codes) yang disatukan dalam text. HTML mendefinisikan tampilan halaman, tulisan dan elemen grafis. Untuk membuat suatu halaman interaktif, programming code disatukan dalam suatu halaman HTML. Contoh : JavaScript dan VBScript Bina Nusantara
HTML Tags HTML Tags adalah perintah yang ditulis diantar tanda lebih kecil (<) dan lebih besar (>), yang juga dikenal sebagai angle brackets, yang mengindikasikan bagaimana browser akan menampilkan text. Bina Nusantara
Basic HTML Tags Tag Description <html> </html> Defines an HTML document <body> </body> Defines the document's body <h1> </h1> to <h6> </h6> Defines header 1 to header 6 <p> </p> Defines a paragraph <br> Inserts a single line break <hr> Defines a horizontal rule <!-- --> Defines a comment Catatan : browser akan mengenali HTML code walaupun ditulis dengan huruf kapital atau huruf kecil atau campuran keduanya. Bina Nusantara
Basic HTML Tags (cont..) Headings Paragraphs Line breaks <h1>This is a heading</h1> Paragraphs <p>This is a paragraph</p> Line breaks <p>This<br>is a paragraph<br>with line breaks</p> <!-- This is a comment --> Bina Nusantara
HTML Tag Attributes Attributes menyediakan informasi tambahan untuk suatu elemen HTML. Attributes selalu dispesifikasikan pada tag awal dari suatu elemen HTML. Nilai Attribute selalu ditampilkan dalam quotes. Double style quotes adalah yang paling umum, tetapi single style quotes juga diperbolehkan. Contoh: name="value". Contoh : <h1 align="center"> has additional information about the alignment.</h1> <body bgcolor="yellow"> has additional information about the background color.</body> <table border="1"> has additional information about the border around the table.</table> Bina Nusantara
Nesting Tags Dalam beberapa kasus, memungkinkan untuk memodifikasi isi halaman dengan lebih dari satu tag. Ada dua hal yang perlu diingat : Tidak semua tag dapat mengandung jenis tag yang lain. Urutan adalah penting. Kapanpun suatu tag penutup digunakan harus berkorespondensi pada tag pembuka terakhir. Contoh: <H1>Web<I>Animation</I></H1> correct <H1>Web<I>Animation</H1></I> incorrect Bina Nusantara
Simple HTML Code Bina Nusantara