02 - Pendahuluan HTML

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



PendahuluanPendahuluan



Struktur Web DokumenStruktur Web Dokumen

Struktur + teks + media lain

SintaksSintaks

SemantikSemantik HiasanHiasan((stylestyle))

PerilakuPerilaku((behaviourbehaviour))



Layer Aplikasi Web ModernLayer Aplikasi Web Modern

StrukturStruktur

PresentasiPresentasi

InteraktifInteraktif

HTMLHTML

CSSCSS

JavascriptJavascript



StrukturStruktur



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



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



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>



Sejarah HTMLSejarah HTML



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



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



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



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



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



PresentasiPresentasi



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



Teks dan StrukturTeks dan Strukturtanpa CSStanpa CSS

Teks dan StrukturTeks dan Struktur+ CSS+ CSS



CSS1CSS1

Rekomendasi W3C tahun 1996Rekomendasi W3C tahun 1996 FontsFonts ColorsColors TextText AlignmentAlignment Margin & PaddingMargin & Padding ID dan ClassID dan Class



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



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



InteraktifInteraktif//

Document BehaviourDocument Behaviour



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



http://id.wikipedia.org/wiki/Document_Object_Model



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



Mesin Layout & JavaScriptMesin Layout & JavaScriptPerambah WebPerambah Web

http://userpages.umbc.edu/~dhood2/http://userpages.umbc.edu/~dhood2/



LatihanLatihan



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



http://pencil.evolus.vn/en-US/Home.aspxhttp://pencil.evolus.vn/en-US/Home.aspx



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



??



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&notes=00section=Notes&topic=Web+Basics&notes=00

02 - Pendahuluan HTML

Education

Transcript of 02 - Pendahuluan HTML