Pendahuluan HTML                                 Pertemuan ke-2  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusu...
Pendahuluan  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Struktur Web Dokumen                                         Sintaks                                 Struktur + teks + med...
Layer Aplikasi Web Modern                            Interaktif   Javascript                          Presentasi       CSS...
Struktur  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Semantik           Struktur HTML sehingga objek dan isi yang berada di          dalam halaman web dapat dimengerti dan   ...
Pengertian HTML           HyperText Markup Language           HTML → dokumen HTML           Cara kerja:                ...
Contoh Dokumen HTML                  sederhana           01 |         <html>           02 |         <head>           03 | ...
Sejarah HTML  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Institusi yang menentukan           Standardisasi HTML           CERN – Organisasi Eropa di bidang Penelitian         Nuk...
http://www.appleinsider.com/articles/09/09/19/why_apple_is_betting_on_html_5_a_web_history.html&page=2  Materi kuliah Desa...
HTML5?           Belum final, masih didiskusikan antara         W3C dan WHATWG           3 tujuan utama HTML5           ...
Keunggulan HTML5           Saat ini dapat bekerja di banyak perambah web          modern           Lebih banyak markup y...
Visi dan Prinsip Desain                    HTML5           Kompatibel dengan versi sebelumnya                           ...
Presentasi  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
CSS           Cascading Style Sheet digunakan untuk         menjelaskan tampilan dari struktur         semantik atau baga...
Teks dan Struktur     tanpa CSS                 Teks dan Struktur                      + CSS  Materi kuliah Desain Web,   ...
CSS1           Rekomendasi W3C tahun 1996                                    Fonts                                    C...
CSS2           Super Set CSS1           Mulai direkomendasikan pada tahun 1998                                    Posit...
CSS3           Masih dalam tahap pengembangan                                    Rounded border                        ...
Interaktif                          /                  Document Behaviour  Materi kuliah Desain Web,   Teknik Informatika ...
Document Object Model           DOM adalah model objek standar yang         bersifat bebas dari platform           DOM t...
http://id.wikipedia.org/wiki/Document_Object_Model  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wa...
JavaScript           Adalah bahasa skrip yang digunakan         untuk mengatur objek yang berada pada         halaman web...
Mesin Layout & JavaScript            Perambah Web  Materi kuliah Desain Web,      http://userpages.umbc.edu/~dhood2/   Tek...
Latihan  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Perkakas Mokup Web           Ada berbagai macam software           Rata-rate berlisensi komersil           Ada yang ber...
http://pencil.evolus.vn/en-US/Home.aspx  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Tugas           Rancang Website menggunakan Pencils                                    Buat beberapa Layout halaman web ...
?  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Referensi  [1] Why Apple is betting on HTML 5: a web    history      http://www.appleinsider.com/articles/09/09/19/wh     ...
Upcoming SlideShare
Loading in …5
×

02 - Pendahuluan HTML

4,305 views

Published on

Pengenalan HTML

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,305
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
220
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

02 - Pendahuluan HTML

  1. 1. Pendahuluan HTML Pertemuan ke-2 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  2. 2. Pendahuluan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  3. 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. 4. Layer Aplikasi Web Modern Interaktif Javascript Presentasi CSS Struktur HTML Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  5. 5. Struktur Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  6. 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. 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. 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. 9. Sejarah HTML Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  10. 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. 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. 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. 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. 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. 15. Presentasi Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  16. 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. 17. Teks dan Struktur tanpa CSS Teks dan Struktur + CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  18. 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. 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. 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. 21. Interaktif / Document Behaviour Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  22. 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. 23. http://id.wikipedia.org/wiki/Document_Object_Model Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  24. 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. 25. Mesin Layout & JavaScript Perambah Web Materi kuliah Desain Web, http://userpages.umbc.edu/~dhood2/ Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  26. 26. Latihan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  27. 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. 28. http://pencil.evolus.vn/en-US/Home.aspx Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  29. 29. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  30. 30. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  31. 31. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  32. 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. 33. ? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  34. 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

×