1 Praktikum I Desain Website Tujuan : > Mempelajari dan Mengerti Layout Website atau Wireframe Website Teori : Sebuah wireframe website, juga dikenal ...
Praktikum I Desain Website Tujuan : > Mempelajari dan Mengerti Layout Website atau Wireframe Website Teori : Sebuah wireframe website, juga dikenal sebagai cetak biru skema atau layar halaman, adalah panduan visual yang merupakan kerangka dari sebuah website. Wireframe melukiskan tata letak halaman atau pengaturan isi website, termasuk elemen antarmuka dan sistem navigasi, dan bagaimana mereka menyatu menjadi sebuah Website. Wireframe biasanya tidak menonjolkan gaya tipografi, warna, atau gambar, karena fokus utama terletak pada fungsi, perilaku, dan prioritas isi. Dengan kata lain, berfokus pada : "Bagaimana yang tampak dilayar, bukan apa yang tampak dilayar". Wireframes fokus pada : * Jenis informasi yang ditampilkan * Kisaran fungsi yang tersedia * Prioritas relatif dari informasi dan fungsi * Aturan untuk menampilkan beberapa jenis informasi * Efek dari skenario yang berbeda pada layar Brown, Dan M. Communicating Design: Developing Web Site Documentation for Design and Planning, Second Edition. New Riders, 2011, p. 169. Wireframe website menghubungkan struktur konseptual, arsitektur informasi atau desain visual dari situs web. Wireframe membantu membangun fungsionalitas, dan hubungan antara layar yang berbeda dari sebuah website. Membuat wireframes adalah cara yang efektif untuk membuat prototipe halaman dengan cepat, Hal ini digunakan sebagai cara praktis menuangkan konsep desain. Wireframing biasanya dimulai dengan diagram alur , rancangan struktur atau petaan link dan kemudian halaman desain situs. Dalam proses membangun website, wireframing adalah cara menuangkan ide menjadi kenyataan.
Latihan : Buatlah wireframe untuk website anda yang akan anda diteruskan untuk bab selanjutnya.
1
Praktikum II Pemrograman HTML, XHTML dan CSS Tujuan : > Mempelajari dan Mengerti HTML > Mempelajari dan Mengerti Layout Management (Pengaturan letak komponen GUI) > Mempelajari dan Mengerti Java Swing dan Event Handling Teori : HTML (Hypertext Markup Language) adalah bahasa pengkodean untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web. Namun HTML bukanlah sebuah bahasa pemrograman. tetapi hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu. HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990, HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF ( Internet Engineering Task Force ). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993). HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah Usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997). HTML harus di awali dan diakhiri dengan kode-kode html dimana menunjukkan bagaimana keluarannya pada saat di jalankan pada sebuah web browser. Bahasa pemrograman itu dipahami oleh semua komputer di dunia atau internet. Perintah html harus berada didalam tanda <..>, yang digunakan untuk menampilkan fungsi – fungsi tertentu misalnya fungsi link dan sebagainya. Dinamakan Hypertext karena kita bias membaca isi dari sebuah dokumen/berita tanpa harus membacanya baris demi baris. Kita bias melompat – lompat dari satu topik ke topik lainnya. Dinamakan MarkUp Languange karena dokumen html mengandung tanda atau perintah tertentu untuk menentukan tampilan teks, gambar, dan sebagainya beserta fungsi – fungsi yang diinginkan. XHTML adalah pada dasarnya gabungan dari HTML (didesain untuk menampilkan data) dan XML (didesain untuk menjelaskan data). XHTML adalah tambahan HTML, ini sangat mirip dengan HTML4.01 dan ini seharusnya untuk mengganti HTML. XHTML lebih “bersih” dibanding HTML dan juga sebuah bahasa mark-up yang disiplin. XHTML adalah sebuah aplikasi dari XML (Extensible Mark-up Languange). XHTML direkomendasikan oleh W2C pada january 2000.
2
Alasan utama HTML kurang bagus karena HTML terlalu flexibel, anda dapat menulis code yang tidak benar dan mungkin akan ditampilkan dengan benar, tetapi tidak pada semua browser! dan kita dalam situasi yang tidak diduga pada sebuah prosentase yang paling besar dari web site adalah berisi kode yang buruk! kita juga dalam zaman dimana beberapa orang menggunakan PDA dan mobile phone untuk surfing www, beberapa type dari browser tidak dapat mengerti kode yang buruk. XHTML bermaksud untuk memberikan beberapa solusi dari masalah seperti ini karena ini disiplin dan bersih. Struktur Dasar HTML Seperti umumnya dokumen lain, dokumen HTML terdiri dari teks-teks dan bahkan lebih dari dari itu. Dokumen HTML juga dapat mengandung suatu gambar, suara, ataupun video. Satu hal yang membedakan dokumen HTML dengan dokumen-dokumen lainnya adalah adanya elemen-elemen HTML beserta tag-tagnya. Elemen dan tag HTML berfungsi untuk menformat atau menandai suatu bagian tertentu dari dokumen HTML dan juga untuk menentukan struktur bagian tersebut dalam dokumen. HTML.Elemen dan Tag inilah yang merupakan ciri utama dari suatu dokumen HTML. Secara garis besar, untuk menulisakn sebuah dokumen HTML dibutuhkan kerangka penulisan dengan tag-tag dasar, yaitu HTML, HEAD,TITLE dan BODY. TAG
FUNGSI
HTML
Untuk penanda bahwa dokumen yang dibuat adalah dokumen web
HEAD
Untuk judul, boleh ada atau tidak
TITLE
Judul untuk masing-masing halaman, ditampilkan di atas browser
BODY
Informasi yang ingin dimunculkan diletakkan di bagian ini
Elemen Dasar HTML HTML tidak hanya menyediakan teks saja dalam dokumennya, tetapi juga mampu menampilkan objek-objek multimedia seperti gambar, suara, video, dan bahkan telah merambah lebih jauh dengan adanya VRML serta applet-applet Java. Untuk informasi yang berupa teks, HTML telah menyediakan bermacam-macam elemen, seperti : a) Paragraph, untuk membuat suatu paragraph b) Blockquote, untuk membuat suatu kutipan teks c) preformatted text, untuk menampilkan teks seperti yang dituliskan d) divider, digunakan untuk mengelompokkan suatu teks tertentu 1) Kode Warna Dalam pengaturan warna menggunakan kode RGB yang mana ditampilkan dalam nilai
3
heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna merah dalam kombinasi warna. Berikut ini adalah contoh kode warna. Color Hexadecimal Color Hexadecimal White #FFFFFF Black #000000 Red #FF0000 Green #00FF00 Blue #0000FF Magenta #FF00FF Cyan #00FFFF Yellow #FFFF00 Apa Itu CSS? CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke kode lain yang saling berhubungan. Jadi kalau di tulis lengkap dalam bahasa Indonesia kira-kira arti CSS adalah: kumpulan kodekode yang berurutan dan saling berhubungan untuk mengatur format / tampilan suatu halaman HTML. Keuntungan Penggunaan CSS Jika anda memiliki beberapa halaman website dimana anda menggunakan font arial untuk tulisannya, lalu suatu hari anda bosan dengan arial dan ingin mengganti ke trebuchet, anda harus merubah satu per satu halaman website anda dan merubah tipe font dari arial menjadi trebuchet. Dengan menggunakan css, dimana semua halaman web memakai css yang sama, anda cukup merubah satu baris kode css untuk merubah font di semua halaman web dari arial ke trebuchet. Ada tiga cara penulisan kode CSS dalam HTML, yaitu : Internal CSS. Yaitu menuliskan langsung scritp CSS di file HTML-nya. Belajar CSS <style type=”text/css”> p {color: white; } body {background-color: black; }
Selamat Datang CSS
4
External CSS Yaitu memanggil file CSS dari tempat lain, dengan kata lain file CSS terpisah dengan file HTML. Untuk lebih jelasnya kita lihat contoh dibawah ini: Belajar CSS
Selamat Datang CSS
Inline CSS Yaitu penulisan kode CSS dalam tag HTML. Lihat contoh dibawah ini: Belajar CSS