• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
02 - Pendahuluan HTML
 

02 - Pendahuluan HTML

on

  • 4,096 views

Pengenalan HTML

Pengenalan HTML

Statistics

Views

Total Views
4,096
Views on SlideShare
4,094
Embed Views
2

Actions

Likes
0
Downloads
206
Comments
0

2 Embeds 2

http://www.edmodo.com 1
http://smkn1julok.blogspot.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    02 - Pendahuluan HTML 02 - Pendahuluan HTML Presentation Transcript

    • Pendahuluan HTML Pertemuan ke-2 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • Pendahuluan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • Struktur Web Dokumen Sintaks Struktur + teks + media lain Hiasan Perilaku Semantik (style) (behaviour) Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • Layer Aplikasi Web Modern Interaktif Javascript Presentasi CSS Struktur HTML Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • 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 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
    • 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
    • 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
    • Sejarah HTML Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • 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
    • 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
    • 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
    • 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
    • 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
    • Presentasi Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • 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
    • Teks dan Struktur tanpa CSS Teks dan Struktur + CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • 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
    • 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
    • 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
    • Interaktif / Document Behaviour Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • 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
    • http://id.wikipedia.org/wiki/Document_Object_Model Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • 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
    • Mesin Layout & JavaScript Perambah Web Materi kuliah Desain Web, http://userpages.umbc.edu/~dhood2/ Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • 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 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
    • 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  Tentukan tema  Target pengunjung  Informasi yang ditampilkan Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • ? 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 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