02 - pendahuluan html
DESCRIPTION
Pengenalan HTMLTRANSCRIPT
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Pendahuluan HTMLPendahuluan HTMLPertemuan ke-2Pertemuan ke-2
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
PendahuluanPendahuluan
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Struktur Web DokumenStruktur Web Dokumen
Struktur + teks + media lain
SintaksSintaks
SemantikSemantik HiasanHiasan((stylestyle))
PerilakuPerilaku((behaviourbehaviour))
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Layer Aplikasi Web ModernLayer Aplikasi Web Modern
StrukturStruktur
PresentasiPresentasi
InteraktifInteraktif
HTMLHTML
CSSCSS
JavascriptJavascript
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
StrukturStruktur
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
SemantikSemantik
Struktur HTML sehingga objek dan isi yang berada di Struktur HTML sehingga objek dan isi yang berada di dalam halaman web dapat dimengerti dan dalam halaman web dapat dimengerti dan ditampilkan oleh perambah webditampilkan oleh perambah web
Menyatakan semantik suatu elemenMenyatakan semantik suatu elemen
<h1>Konggres PSSI</h1><h1>Konggres PSSI</h1> <p>Nurdin Halid bersikeras untuk tetap menjadi <p>Nurdin Halid bersikeras untuk tetap menjadi
pimpinan.</p>pimpinan.</p> Artinya: halaman web tersebut membahas Artinya: halaman web tersebut membahas
konggres PSSI.konggres PSSI. Ramah terhadap mesin pencari, halaman web dapat Ramah terhadap mesin pencari, halaman web dapat
dengan mudah diindeksdengan mudah diindeks
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Pengertian HTMLPengertian HTML
HyperText Markup LanguageHyperText Markup Language HTML dokumen HTML→HTML dokumen HTML→ Cara kerja:Cara kerja:
Melalui HTTP (Hypertext Transfer Protocol) Melalui HTTP (Hypertext Transfer Protocol) sebagai pengirim data dari web server ke sebagai pengirim data dari web server ke komputer komputer clientclient atau sebaliknya atau sebaliknya
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Contoh Dokumen HTML Contoh Dokumen HTML sederhanasederhana
0101 || <html><html>0202 || <head><head>0303 || <title>Judul Halaman Web</title><title>Judul Halaman Web</title>0404 || </head></head>0505 || <body><body>0606 || <p>Halo dunia!</p><p>Halo dunia!</p>0707 || </body></body>0808 || </html></html>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Sejarah HTMLSejarah HTML
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Institusi yang menentukan Institusi yang menentukan Standardisasi HTMLStandardisasi HTML
CERN – Organisasi Eropa di bidang Penelitian CERN – Organisasi Eropa di bidang Penelitian NuklirNuklir
Lembaga pertama kali yang menerapkan aplikasi Lembaga pertama kali yang menerapkan aplikasi terdistribusiterdistribusi
IETF – Internet Engineering Task ForceIETF – Internet Engineering Task Force W3C – World Wide Web StandardW3C – World Wide Web Standard WHATWG - Web Hypertext Application WHATWG - Web Hypertext Application
Technology Working GroupTechnology Working Group AppleApple
Mozilla FondationMozilla Fondation
Opera SoftwareOpera Software
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
http://www.appleinsider.com/articles/09/09/19/why_apple_is_betting_on_html_5_a_web_history.html&page=2http://www.appleinsider.com/articles/09/09/19/why_apple_is_betting_on_html_5_a_web_history.html&page=2
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
HTML5?HTML5?
Belum final, masih didiskusikan antara Belum final, masih didiskusikan antara W3C dan WHATWGW3C dan WHATWG
3 tujuan utama HTML53 tujuan utama HTML5 Menentukan perilaku perambah web yang Menentukan perilaku perambah web yang
dapat dioperasikandapat dioperasikan Mendefinisikan penanganan kesalahan Mendefinisikan penanganan kesalahan
untuk pertama kalinyauntuk pertama kalinya Memudahkan pengembangan aplikasi webMemudahkan pengembangan aplikasi web
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Keunggulan HTML5Keunggulan HTML5
Saat ini dapat bekerja di banyak perambah web Saat ini dapat bekerja di banyak perambah web modernmodern
Lebih banyak markup yang deskriptifLebih banyak markup yang deskriptif
Multimedia tanpa pluginMultimedia tanpa plugin
Pesan lintas dokumenPesan lintas dokumen
Web socket koneksi yang terus menerus ke server →Web socket koneksi yang terus menerus ke server →(contohnya aplikasi web untuk (contohnya aplikasi web untuk chattingchatting))
Penyimpanan Penyimpanan client-sideclient-side Antar muka, aksesibilitas, dan form yang lebih baikAntar muka, aksesibilitas, dan form yang lebih baik
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Visi dan Prinsip Desain Visi dan Prinsip Desain HTML5HTML5
Kompatibel dengan versi sebelumnyaKompatibel dengan versi sebelumnya Tidak membuat dari awalTidak membuat dari awal Menyempurnakan yang sudah adaMenyempurnakan yang sudah ada Pemisahan antara presentasi dan isiPemisahan antara presentasi dan isi
SederhanaSederhana Akses universalAkses universal Paradigma bebas pluginParadigma bebas plugin
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
PresentasiPresentasi
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
CSSCSS
Cascading Style SheetCascading Style Sheet digunakan untuk digunakan untuk menjelaskan tampilan dari struktur menjelaskan tampilan dari struktur semantik atau bagaimana struktur semantik atau bagaimana struktur semantik dilihat dan diformatsemantik dilihat dan diformat
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Teks dan StrukturTeks dan Strukturtanpa CSStanpa CSS
Teks dan StrukturTeks dan Struktur+ CSS+ CSS
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
CSS1CSS1
Rekomendasi W3C tahun 1996Rekomendasi W3C tahun 1996 FontsFonts ColorsColors TextText AlignmentAlignment Margin & PaddingMargin & Padding ID dan ClassID dan Class
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
CSS2CSS2
Super Set CSS1Super Set CSS1 Mulai direkomendasikan pada tahun 1998Mulai direkomendasikan pada tahun 1998
PositioningPositioning Z-indexZ-index Media types, print, presentationMedia types, print, presentation
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
CSS3CSS3
Masih dalam tahap pengembanganMasih dalam tahap pengembangan Rounded borderRounded border Border imagesBorder images Text shadowsText shadows Multiple backgroundMultiple background OpacityOpacity Attribute selectorAttribute selector etcetc
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
InteraktifInteraktif//
Document BehaviourDocument Behaviour
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Document Object ModelDocument Object Model
DOM adalah model objek standar yang DOM adalah model objek standar yang bersifat bebas dari platformbersifat bebas dari platform
DOM tidak dibutuhkan oleh perambah web DOM tidak dibutuhkan oleh perambah web untuk menampilkan HTMLuntuk menampilkan HTML
DOM dibutuhkan oleh JavaScript untuk DOM dibutuhkan oleh JavaScript untuk mengubah web secara dinamismengubah web secara dinamis
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
http://id.wikipedia.org/wiki/Document_Object_Model
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
JavaScriptJavaScript
Adalah bahasa skrip yang digunakan Adalah bahasa skrip yang digunakan untuk mengatur objek yang berada pada untuk mengatur objek yang berada pada halaman webhalaman web
jQuery adalah salah satu dari banyak jQuery adalah salah satu dari banyak framework javascript yang digunakan framework javascript yang digunakan secara luassecara luas
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Mesin Layout & JavaScriptMesin Layout & JavaScriptPerambah WebPerambah Web
http://userpages.umbc.edu/~dhood2/http://userpages.umbc.edu/~dhood2/
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
LatihanLatihan
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Perkakas Mokup WebPerkakas Mokup Web
Ada berbagai macam softwareAda berbagai macam software Rata-rate berlisensi komersilRata-rate berlisensi komersil Ada yang berbasis aplikasi webAda yang berbasis aplikasi web Balsamiq yang terbaik dan terlengkapBalsamiq yang terbaik dan terlengkap
Lisensi (US$79 penggunaan personal)→Lisensi (US$79 penggunaan personal)→
PencilPencil Lisensi: GPL 2Lisensi: GPL 2 Berupa Pengaya (Berupa Pengaya (Add-onAdd-on) di Mozilla Firefox) di Mozilla Firefox Aplikasi desktop di WindowsAplikasi desktop di Windows
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
http://pencil.evolus.vn/en-US/Home.aspxhttp://pencil.evolus.vn/en-US/Home.aspx
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
TugasTugas
Rancang Website menggunakan PencilsRancang Website menggunakan Pencils Buat beberapa Layout halaman webBuat beberapa Layout halaman web Tentukan temaTentukan tema Target pengunjungTarget pengunjung Informasi yang ditampilkanInformasi yang ditampilkan
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
??
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
ReferensiReferensi
[1] [1] Why Apple is betting on HTML 5: a web Why Apple is betting on HTML 5: a web historyhistory http://www.appleinsider.com/articles/09/09/19/whhttp://www.appleinsider.com/articles/09/09/19/why_apple_is_betting_on_html_5_a_web_history.htmly_apple_is_betting_on_html_5_a_web_history.html
[2] [2] Introduction Scripting LanguagesIntroduction Scripting Languages http://userpages.umbc.edu/~dhood2/courses/cmschttp://userpages.umbc.edu/~dhood2/courses/cmsc433/spring2010/?433/spring2010/?section=Notes&topic=Web+Basics¬es=00section=Notes&topic=Web+Basics¬es=00