Selasa, 09 Desember 2014

PENDAHULUAN HTML


  • 1. Pendahuluan HTML Pertemuan ke-2 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 2. Pendahuluan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 3. Struktur Web Dokumen Sintaks Struktur + teks + media lain Hiasan Perilaku Semantik (style) (behaviour) Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 4. Layer Aplikasi Web Modern Interaktif Javascript Presentasi CSS Struktur HTML Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 5. Struktur Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 6. Semantik  Struktur HTML sehingga objek dan isi yang berada di dalam halaman web dapat dimengerti dan ditampilkan oleh perambah web  Menyatakan semantik suatu elemen  <h1>Konggres PSSI</h1>  <p>Nurdin Halid bersikeras untuk tetap menjadi pimpinan.</p>  Artinya: halaman web tersebut membahas konggres PSSI.  Ramah terhadap mesin pencari, halaman web dapat dengan mudah diindeks Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 7. Pengertian HTML  HyperText Markup Language  HTML → dokumen HTML  Cara kerja:  Melalui HTTP (Hypertext Transfer Protocol) sebagai pengirim data dari web server ke komputer client atau sebaliknya Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 8. Contoh Dokumen HTML sederhana 01 | <html> 02 | <head> 03 | <title>Judul Halaman Web</title> 04 | </head> 05 | <body> 06 | <p>Halo dunia!</p> 07 | </body> 08 | </html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 9. Sejarah HTML Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 10. Institusi yang menentukan Standardisasi HTML  CERN – Organisasi Eropa di bidang Penelitian Nuklir  Lembaga pertama kali yang menerapkan aplikasi terdistribusi  IETF – Internet Engineering Task Force  W3C – World Wide Web Standard  WHATWG - Web Hypertext Application Technology Working Group  Apple  Mozilla Fondation  Opera Software Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 11. http://www.appleinsider.com/articles/09/09/19/why_apple_is_betting_on_html_5_a_web_history.html&page=2 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 12. HTML5?  Belum final, masih didiskusikan antara W3C dan WHATWG  3 tujuan utama HTML5  Menentukan perilaku perambah web yang dapat dioperasikan  Mendefinisikan penanganan kesalahan untuk pertama kalinya  Memudahkan pengembangan aplikasi web Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 13. Keunggulan HTML5  Saat ini dapat bekerja di banyak perambah web modern  Lebih banyak markup yang deskriptif  Multimedia tanpa plugin  Pesan lintas dokumen  Web socket → koneksi yang terus menerus ke server (contohnya aplikasi web untuk chatting)  Penyimpanan client-side  Antar muka, aksesibilitas, dan form yang lebih baik Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 14. Visi dan Prinsip Desain HTML5  Kompatibel dengan versi sebelumnya  Tidak membuat dari awal  Menyempurnakan yang sudah ada  Pemisahan antara presentasi dan isi  Sederhana  Akses universal  Paradigma bebas plugin Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 15. Presentasi Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 16. CSS  Cascading Style Sheet digunakan untuk menjelaskan tampilan dari struktur semantik atau bagaimana struktur semantik dilihat dan diformat Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 17. Teks dan Struktur tanpa CSS Teks dan Struktur + CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 18. CSS1  Rekomendasi W3C tahun 1996  Fonts  Colors  Text  Alignment  Margin & Padding  ID dan Class Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 19. CSS2  Super Set CSS1  Mulai direkomendasikan pada tahun 1998  Positioning  Z-index  Media types, print, presentation Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 20. CSS3  Masih dalam tahap pengembangan  Rounded border  Border images  Text shadows  Multiple background  Opacity  Attribute selector  etc Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 21. Interaktif / Document Behaviour Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 22. Document Object Model  DOM adalah model objek standar yang bersifat bebas dari platform  DOM tidak dibutuhkan oleh perambah web untuk menampilkan HTML  DOM dibutuhkan oleh JavaScript untuk mengubah web secara dinamis Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 23. http://id.wikipedia.org/wiki/Document_Object_Model Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 24. JavaScript  Adalah bahasa skrip yang digunakan untuk mengatur objek yang berada pada halaman web  jQuery adalah salah satu dari banyak framework javascript yang digunakan secara luas Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 25. Mesin Layout & JavaScript Perambah Web Materi kuliah Desain Web, http://userpages.umbc.edu/~dhood2/ Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 26. Latihan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 27. Perkakas Mokup Web  Ada berbagai macam software  Rata-rate berlisensi komersil  Ada yang berbasis aplikasi web  Balsamiq yang terbaik dan terlengkap  Lisensi (US$79 → penggunaan personal)  Pencil  Lisensi: GPL 2  Berupa Pengaya (Add-on) di Mozilla Firefox  Aplikasi desktop di Windows Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 28. http://pencil.evolus.vn/en-US/Home.aspx Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 29. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 30. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 31. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 32. Tugas  Rancang Website menggunakan Pencils  Buat beberapa Layout halaman web  Tentukan tema  Target pengunjung  Informasi yang ditampilkan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 33. ? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 34. Referensi [1] Why Apple is betting on HTML 5: a web history http://www.appleinsider.com/articles/09/09/19/wh y_apple_is_betting_on_html_5_a_web_history.html [2] Introduction Scripting Languages http://userpages.umbc.edu/~dhood2/courses/cmsc 433/spring2010/? section=Notes&topic=Web+Basics&notes=00 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi                      
Diposting oleh di Tidak ada komentar:

PENDAHULUAN HTML


  • 1. Pendahuluan HTML Pertemuan ke-2 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 2. Pendahuluan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 3. Struktur Web Dokumen Sintaks Struktur + teks + media lain Hiasan Perilaku Semantik (style) (behaviour) Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 4. Layer Aplikasi Web Modern Interaktif Javascript Presentasi CSS Struktur HTML Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 5. Struktur Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 6. Semantik  Struktur HTML sehingga objek dan isi yang berada di dalam halaman web dapat dimengerti dan ditampilkan oleh perambah web  Menyatakan semantik suatu elemen  <h1>Konggres PSSI</h1>  <p>Nurdin Halid bersikeras untuk tetap menjadi pimpinan.</p>  Artinya: halaman web tersebut membahas konggres PSSI.  Ramah terhadap mesin pencari, halaman web dapat dengan mudah diindeks Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 7. Pengertian HTML  HyperText Markup Language  HTML → dokumen HTML  Cara kerja:  Melalui HTTP (Hypertext Transfer Protocol) sebagai pengirim data dari web server ke komputer client atau sebaliknya Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 8. Contoh Dokumen HTML sederhana 01 | <html> 02 | <head> 03 | <title>Judul Halaman Web</title> 04 | </head> 05 | <body> 06 | <p>Halo dunia!</p> 07 | </body> 08 | </html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 9. Sejarah HTML Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 10. Institusi yang menentukan Standardisasi HTML  CERN – Organisasi Eropa di bidang Penelitian Nuklir  Lembaga pertama kali yang menerapkan aplikasi terdistribusi  IETF – Internet Engineering Task Force  W3C – World Wide Web Standard  WHATWG - Web Hypertext Application Technology Working Group  Apple  Mozilla Fondation  Opera Software Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 11. http://www.appleinsider.com/articles/09/09/19/why_apple_is_betting_on_html_5_a_web_history.html&page=2 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 12. HTML5?  Belum final, masih didiskusikan antara W3C dan WHATWG  3 tujuan utama HTML5  Menentukan perilaku perambah web yang dapat dioperasikan  Mendefinisikan penanganan kesalahan untuk pertama kalinya  Memudahkan pengembangan aplikasi web Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 13. Keunggulan HTML5  Saat ini dapat bekerja di banyak perambah web modern  Lebih banyak markup yang deskriptif  Multimedia tanpa plugin  Pesan lintas dokumen  Web socket → koneksi yang terus menerus ke server (contohnya aplikasi web untuk chatting)  Penyimpanan client-side  Antar muka, aksesibilitas, dan form yang lebih baik Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 14. Visi dan Prinsip Desain HTML5  Kompatibel dengan versi sebelumnya  Tidak membuat dari awal  Menyempurnakan yang sudah ada  Pemisahan antara presentasi dan isi  Sederhana  Akses universal  Paradigma bebas plugin Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 15. Presentasi Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 16. CSS  Cascading Style Sheet digunakan untuk menjelaskan tampilan dari struktur semantik atau bagaimana struktur semantik dilihat dan diformat Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 17. Teks dan Struktur tanpa CSS Teks dan Struktur + CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 18. CSS1  Rekomendasi W3C tahun 1996  Fonts  Colors  Text  Alignment  Margin & Padding  ID dan Class Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 19. CSS2  Super Set CSS1  Mulai direkomendasikan pada tahun 1998  Positioning  Z-index  Media types, print, presentation Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 20. CSS3  Masih dalam tahap pengembangan  Rounded border  Border images  Text shadows  Multiple background  Opacity  Attribute selector  etc Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 21. Interaktif / Document Behaviour Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 22. Document Object Model  DOM adalah model objek standar yang bersifat bebas dari platform  DOM tidak dibutuhkan oleh perambah web untuk menampilkan HTML  DOM dibutuhkan oleh JavaScript untuk mengubah web secara dinamis Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 23. http://id.wikipedia.org/wiki/Document_Object_Model Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 24. JavaScript  Adalah bahasa skrip yang digunakan untuk mengatur objek yang berada pada halaman web  jQuery adalah salah satu dari banyak framework javascript yang digunakan secara luas Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 25. Mesin Layout & JavaScript Perambah Web Materi kuliah Desain Web, http://userpages.umbc.edu/~dhood2/ Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 26. Latihan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 27. Perkakas Mokup Web  Ada berbagai macam software  Rata-rate berlisensi komersil  Ada yang berbasis aplikasi web  Balsamiq yang terbaik dan terlengkap  Lisensi (US$79 → penggunaan personal)  Pencil  Lisensi: GPL 2  Berupa Pengaya (Add-on) di Mozilla Firefox  Aplikasi desktop di Windows Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 28. http://pencil.evolus.vn/en-US/Home.aspx Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 29. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 30. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 31. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 32. Tugas  Rancang Website menggunakan Pencils  Buat beberapa Layout halaman web  Tentukan tema  Target pengunjung  Informasi yang ditampilkan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 33. ? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 34. Referensi [1] Why Apple is betting on HTML 5: a web history http://www.appleinsider.com/articles/09/09/19/wh y_apple_is_betting_on_html_5_a_web_history.html [2] Introduction Scripting Languages http://userpages.umbc.edu/~dhood2/courses/cmsc 433/spring2010/? section=Notes&topic=Web+Basics&notes=00 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi                      
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)