SlideShare a Scribd company logo
1 of 22
Oleh :
Nama : Siti Rusmiatun
NIM : 2114R0811
Dosen Pengampu : Septia Lutfi
PENGERTIAN
HTML5
HTML5 adalah suatu spesifikasi sebagai hasil perbaikan
dari standard HTML(Hypertext Markup Language) sebelumnya yang
dikeluarkan oleh W3C( world Wide Web Consurtium) dan partner
kerjanya yaitu Web Hypertext Application technology Working
Group. Tujuan adanya revisi yang semula HTML menjadi HTML5
adalah untuk meningkatkan bahasa pada system multimedia yang
sedang in yang dengan mudah dapat terbaca oleh manusia dan
dimengerti oleh computer itu sendiri sebagai perangkat. Selain
itu, juga bertujuan untuk mengurangi penggunaan plugin-plugin
3rd party pada HTML sehingga dapat mempercepat kinerja web itu
sendiri. Contoh plugin itu sendiri adalah, Adobe Flash, Microsoft
Silverlight, Java dan lain-lainnya.
HTML5 adalah sebuah bahasa markah untuk
menstrukturkan dan menampilkan isi dari WWW, sebuah teknologi
inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang
pertama kali diciptakan pada tahun 1990 dan versi keempatnya,
HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam
pengembangan. Tujuan utama pengembangan HTML5 adalah untuk
memperbaiki teknologi HTML agar mendukung teknologi
multimedia terbaru, mudah dibaca oleh manusia dan juga mudah
dimengerti oleh mesin.
HTML5 merupakan salah satu karya Konsortium Waring
Wera Wanua (World Wide Web Consortium, W3C) untuk
mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis
dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban
atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini
berjalan terpisah, dan diimplementasikan secara berbeda-beda
oleh banyak perangkat lunak pembuat web.
B. SEJARAH HTML5
Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web
Hypertext Application Technology Working Group, WHATWG) mulai
membuat standar baru ini pada tahun 2004 ketika Konsortium W3C
sedang fokus pada pengembangan XHTML 2.0 di masa depan,
sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000.
Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam
pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja
Pengembangan XHTML 2.0.
Meskipun HTML5 telah dikenal luas oleh para pengembang
web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO
Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan
HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan
video atau menyaksikan konten apapun di web."
C. Kelebihan dan kekurangan HTML5
Kelebihan :
*Cleaner code, karena sebagian besar kode telah termasuk di dalam
sintaks html5, maka kode nampak terlihat lebih sederhana
daripada penggabungan antara html, css dan java script.
*Greater consistency, HTML5 telah melakukan banyak sekali
penambahan sintaks yang dibuat dalam struktur lebih baik dan
lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini
membuat developer terbantu dalam meningkatkan konsistensi
dalam membangun sebuah web.
*Improve Semantics, dengan berbagai elemen kode di dalam html5
yang telah distandarisasi, maka nilai semantik dari sebuah web
dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web
seperti header, nav, footer dan beberapa bagian lainnya terdefinisi
dengan jelas maksud serta tujuannya selain itu juga terbentuk
dalam sebuah “machine readible format”
*Improved Accessibility, dengan teknologi HTML5 yang memudahkan
struktur pembangunan sebuah web, maka developer dapat
membangun pemahaman yang lebih detil mengenaik halaman web.
*Client-side Database, HTML5 menyediakan model database SQL
yang baru dengan API yang dapat dibangun dalam konsep lokal,
dalam hal ini di sisi client.
*Geolocation, HTML5 mempunyai API yang terintegrasi terhadap
geolocation, fasilitas tersebut dapat diakses melalui GPS atau
fasilitas lain seperti Google Latitude pada iphone.
*Offline Aplication Cache, pengguna dapat terus melakukan
interaksi dengan aplikasi meskipun mereka terputus dari jaringan
internet.
*Smarter Forms, terdapat semacam reguler expression (regex) yang
membuat form mampu mengenali secara lebih baik tentang input,
validasi data dan interaksi dengan elemen lain (misal : format
email, password, dll)
*Sharper focus on Web Application Requiments, HTML5 membuat
sebuah mekanisme yang lebih mudah dalam hal pembuatan front
end, aplikasi chat, tools drag and drop, video player, pengolah
grafis dan masih banyak lagi.
*Bersifat ompatibel dengan semua browser
KEKURANGAN :
Saat ini HTML5 masih dalam pengembangan, sehingga hanya
beberapa browser yang sudah mendukung HTML5, seperti fitur-fitur
pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada
beberapa browser. Beberapa browser yang sudah mendukung HTML 5
seperti Safari, Chrome, Firefox, dan Opera. Namun kabarnya IE9
(Internet Explorer) akan mendukung beberapa fitur dari HTML5.
*Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini
hanya support untuk browser modern/terbaru
*Karena bahasa HTML5 ini masih dalam perkembangan, jadi
beberapa elemen yang ada bisa saja berubah
*Fitur keamanan yang ditawarkan HTML5 masih terbatas
*HTML5 tidak dapat diandalkan dalam hal format karena web
browser yang berbeda disebabkan mereka tidak mendukung
salah satu format tunggal.
D. FITUR BARU DALAM HTML5
Fitur – fitur dalam HTML5
*Canvas
Canvas adalah media yang bisa dicoret-coret langsung dan tidak
memerlukan plugin khusus. Canvas memberikan pilihan kepada para
penggunanya. Dulu, saat ingin menggambar di halaman web maka
harus menggunakan applet Java atau flash namun sekarang dapat
menggunakan canvas, dengan cara menambahkan canvas dan
javascript saja maka kita sudah dapat menggambar di halaman web.
*Video dan Audio
Karena sudah ada tag <audio> dan <video> maka kita tidak
memerlukan flash lagi untuk memutar audio. Untuk masuk di
dalamnya dapat menggunakan berbagai format, yang paling
menonjol adalah Ogg Theora dan H.264. namun sampai sekarang
penggunaan kode masih dipertanyakan kembali.
*Local storage
Fitur ini merupakan standard dalam HTML5. Fitur ini dapat
menyimpan data yang memiliki kapasitas besar dibanding yang lain
tanpa harus mengimplementasikan trik dengan cookie atau flash.
*Web workers
Kita sebelumnya pernah menikmati fitur ini dalam Google gears.
Web workers ini mempunyai kelebihan dibanding dengan javascript,
missal saja saat kita mengoperasikan computer dengan javascript
maka akan menyebabkan computer melambat, nah ini yang
membedakan dengan web workers.
*Semantics
Fitur ini sangatlah cocok bagi para perancang yang sering meng-
abuse div dan span sebagian elemen nav, fret no more. Semantic ini
bermanfaat sekali, karena bukan hanya untuk mencari informasi
namun juga dapat melakukan seperti yang dijelaskan diatas.
fitur pemrograman terbaru pada HTML5, yaitu:
* Kemunculan Elelmen <Hgroup>
Ketika memasang judul diikuti dengan subheading di bagian header
website, anda mungkin biasa menggunakan tag standar yaitu <h1>
dan <h2>. Sayangnya. tidak ada cara yang semantik untuk
mengaitkan hubungan di antara keduanya. Padahal secara
hirarki,tag <h2> seharusnya berada di bawah <h1>. Nah, dengan
elemen <hgroup>, kini kita dapat mengelompokkan tag heading agar
sesuai hirarki, tanpa sedikipun memengaruhi skema aliran dokumen.
<header>
<hgroup>
<h1></h1>
<h2>supersite in just click away Supersite in just click way </h2>
</hgroup>
</header>
*Kemunculan Elemen <Figure>
Perhatikan kode berikut, yang saat ini mungkin seringkali anda
gunakan untuk menampilkan sebuah gambar.
<img src="path/to/image" alt="Leonidas" />
<p>Leonidas Berteriak Spartan. </p>
Sayangnya, kode di atas tidak semantik. Caption yang dibungkus
dalam tag paragraf <p> benar-benar terpisah elemen <img> di
atasnya. HTML5 memperbaiki hal ini dengan mengenalkan elemen
<figure>. Jika anda mengkombinasikan dengan elemen <figcaption>,
maka anda sekarang bisa mengasosiasikan caption yang secara
hirarki sesuai dengan gambar masing-masing.
<figure>
<img src="path/to/image" alt="Leonidas" />
<figcaption> <p> Leonidas Berteriak Spartan. </p> </figcaption>
</figure>
*Kemunculan Elemen <Mark>
Bayangkan sebuah efek stabilo yang muncul setiap kali anda
melakukan pencarian kata di suatu halaman. Maka elemen <mark>
adalah senjata baru HTML5 yang memungkinkan anda untuk
memunculkannya. Anda dapat menggabungkan dengan JavaScript
pula. Contohnya,jika ada penggunjung yang mencari kata "Spartan!"
di website saya, saya bisa memanfaatkan JavaScript untuk wrap
setiap string yang cocok dengan kata "Spartan!" dengan tag <mark>
untuk memunculkan efek stabile.
<h3> Hasil Pencarian </h3><p> Di hadapan Leonidas berbaris
100.000 pasukan Persia. Namun tanpa sedikitpun rasa gentar, dia
menyerukan, <mark>"Spartan1"</mark>. </p>
*HTML5 Melengkapi <Form> Dengan Berbagai Atribut Baru
Setiap programmer pasti tahu bagaimana caranya membuat form.
Tambahkan sebuah tag <form> berisi elemen <input type="text">,
<input type="password">, dan sebuah <input type="submit">, maka
jadilah. Namun rupanya form yang sekarang ini anda kenal sudah
tidak relevan lagi. HTML5 telah melengkapi form dengan sejumlah
atribut-atribut baru yang lebih menarik, dinamis, dan mungkin tidak
pernah anda kenal sebelumnya. Misalnya <placeholder>,
<autofocus>. dan <type> dengan kapabilitas masing-masing.
Sayangnya fitur-fitur baru ini mungkin masih belum dapat
ditampilkan potensi sepenuhnya pada beberapa browser. Namun
tidak ada salahnya untuk dipelajari dan diterapkan sekarang atau
ketika di masa depa dimana browser versi lama telah kehilangan
peminat dan punah dari permukaan bumi.
*Form Dilengkapi Email Validation
Jika anda terapkan type "email" pada form, maka anda dapat
memerintahkan browser untuk hanya mengijinkan isian yang sesuai
dengan struktur alamat email saja. Artinya, HTML5 sudah dilengkapi
email validation didalamnya. Meskipun pada beberapa browser
(sebut saja IE), hasilnya tidak akan ditampilkan sesuai dengan yang
anda inginkan.
<!DOCTYPE html>
<head> <title>untitled</title> </head>
<body>
<form action="" method="get">
<label for="email">Email:</label>
<input id="email" name="email" type"email" />
<button type="submit"> Submit Form </button> </form>
</body> </html>
*Munculnya Attribut <Required> pada Form
Form pada HTML5 kini juga telah dilengkapi atribut <required>,
yang mampu membuat isian tertentu menjadi wajib diisi.
<input type="text" name="isian" required>
Dengan kode ini, maka sebuah form tidak dapat disubmit bila field
"isian" dibiarkan kosong. Berikut adalah contoh singkat mengenai
penerapannya.
<form method="post" action="">
<label for="isian"> Nama: </label>
<input type="text" id="isian" name="isian" place-holder="King Xerxes"
required>
<button type="submit">Go</button>
</form>
*Elemen baru HTML5
Demi mewujudkan struktur halaman web yang lebih baik semantik
dan aksesibilitasnya, dikenalkanlah beberapa elemen baru,
diantaranya:
*section serupa seperti h1-h6.
*article bisa berupa entri blog atau tulisan konten.
*aside menyajikan konten pelengkap.
*header bisa menyajikan judul, deskripsi, bahkan nav untuk
navigasi.
*footer berisi catatan kaki seperti informasi hak cipta, penulis,
kontak, dan sebagainya.
*dialog yang dikombinasikan dengan dt dan dd (seperti pada
halaman FAQ) dapat digunakan untuk menyajikan percakapan.
*yang fenomenal adalah penggunaan elemen figure, video, audio,
source, embed, canvas, dan elemen terkait berkas multimedia
lainnya.
*manfaat dan kegunaan HTML5
HTML5 Design menawarkan banyak manfaat lainnya yang
seharusnya membuat Anda berpikir tentang menggunakan versi
ini dalam situs web Anda.
*Pemberian pertolongan
Untuk meningkatkan kegunaan, web designer saat membuat website
yang sangat interaktif dengan memasukkan memutar musik dan
pilihan streaming video, animasi cairan dan situs jejaring sosial
seperti Twitter dan Facebook di situs tersebut. Namun, sebelum
HTML5 debut, mereka hanya bisa melakukannya dengan
menggunakan Silverlight atau Flash, JavaScript atau Flex alat yang
tidak hanya membuat aplikasi web lebih rumit, tetapi juga
dikonsumsi banyak waktu. Namun, HTML5 Desain membuatnya lebih
mudah untuk menanamkan audio dan video, animasi berkualitas
tinggi, grafik dan gambar nyaman tanpa perlu menggunakan
program pihak ketiga lainnya atau plugin.
*peningkatan semantic
Berkat HTML5, sekarang mudah untuk melihat header, footer, nav
dan bagian lain dari halaman web sebagai tag sekarang lebih spesifik
dan memahami tujuan utama mereka dan makna seluruh format
yang. Kode desain web sangat standar sehingga meningkatkan
semantik.
*kode peningkatan
Dengan menggunakan HTML5, web designer dan pengembang
menikmati bekerja dengan rapi dan kode bersih dengan menghapus
sebagian besar tag div di situs.
*konsistensi
Sebagai website mengadopsi unsur-unsur baru dari HTML5, hal ini
membantu untuk mencapai konsistensi yang lebih besar ketika
datang untuk menggunakan HTML dalam pengkodean halaman web.
Dengan demikian, HTML5 Desain jauh lebih mudah dan dimengerti
dan desainer dapat dengan mudah mengetahui struktur dari
halaman web.
*Bentuk elegan
Web desainer dapat menggunakan bentuk pengujian dan HTML5 juga
membuat validasi bentuk asli ke HTML, meningkatkan antarmuka
pengguna dan mengurangi kebutuhan untuk javascript dalam
pengembangan website
Manfaat utama lainnya yang terkait dengan HTML5 yang seperti
dukungan Geolocation dan meningkatkan aksesibilitas dari halaman
web. Ini hanya menyoroti manfaat dari HTML5 dan para ahli percaya
bahwa HTML5 akan berkembang menjadi bahasa pengembangan
secara online penting dalam waktu dekat.
He is my lecturer
His name is Septia lutfi
It’s me, My name is Siti Rusmiatun

More Related Content

What's hot

What's hot (18)

Tugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaTugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarina
 
html
htmlhtml
html
 
Ristianawati 2114 r0800 html5
Ristianawati 2114 r0800 html5Ristianawati 2114 r0800 html5
Ristianawati 2114 r0800 html5
 
PPT HTML5
PPT HTML5PPT HTML5
PPT HTML5
 
Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
Html 5
Html 5Html 5
Html 5
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Tugas 8 rekweb
Tugas 8   rekwebTugas 8   rekweb
Tugas 8 rekweb
 
Asas cakephp-mvc
Asas cakephp-mvcAsas cakephp-mvc
Asas cakephp-mvc
 
Tugas 2
Tugas 2Tugas 2
Tugas 2
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Powerpoint Html5
Powerpoint Html5Powerpoint Html5
Powerpoint Html5
 
Html5
Html5Html5
Html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Modul webdesign
Modul webdesignModul webdesign
Modul webdesign
 
H t m l
H t m lH t m l
H t m l
 

Similar to Html5 ppt

Similar to Html5 ppt (20)

Tugas 8
Tugas 8Tugas 8
Tugas 8
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Html5
Html5 Html5
Html5
 
Pengenalan html5
Pengenalan html5Pengenalan html5
Pengenalan html5
 
Html5
Html5Html5
Html5
 
Tugas 8 – rekayasa web
Tugas 8 – rekayasa webTugas 8 – rekayasa web
Tugas 8 – rekayasa web
 
Tugas 6 rekayasa web
Tugas 6 rekayasa webTugas 6 rekayasa web
Tugas 6 rekayasa web
 
Tugas 8
Tugas 8Tugas 8
Tugas 8
 
Tugas 8 – rekayasa web
Tugas 8 – rekayasa webTugas 8 – rekayasa web
Tugas 8 – rekayasa web
 
TUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYO
TUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYOTUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYO
TUGAS 8 – REKAYASA WEB (KU) - 1311511057 - RADEN DONI WIJOYO
 
Html 5
Html 5Html 5
Html 5
 
Tugas 8 rekayasa web
Tugas 8 rekayasa webTugas 8 rekayasa web
Tugas 8 rekayasa web
 
Html power point
Html power pointHtml power point
Html power point
 
Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982Tugas8 ku-0316-debbiemistikaweni-1412510982
Tugas8 ku-0316-debbiemistikaweni-1412510982
 
Tugas rekweb 4
Tugas rekweb 4Tugas rekweb 4
Tugas rekweb 4
 
Tugas 8 ku - 0316 1311511529
Tugas 8   ku - 0316 1311511529Tugas 8   ku - 0316 1311511529
Tugas 8 ku - 0316 1311511529
 
Tugas 6
Tugas 6Tugas 6
Tugas 6
 
Presentation1 rekweb
Presentation1 rekwebPresentation1 rekweb
Presentation1 rekweb
 
Tugas 8 - Rekayasa Web
Tugas 8 - Rekayasa WebTugas 8 - Rekayasa Web
Tugas 8 - Rekayasa Web
 

More from menghilang

More from menghilang (7)

Cloud computing ppt
Cloud computing pptCloud computing ppt
Cloud computing ppt
 
Cloud computing ppt
Cloud computing pptCloud computing ppt
Cloud computing ppt
 
Mikrotik ppt
Mikrotik pptMikrotik ppt
Mikrotik ppt
 
Mikrotik ppt
Mikrotik pptMikrotik ppt
Mikrotik ppt
 
Jquery ppt
Jquery pptJquery ppt
Jquery ppt
 
Java ppt
Java pptJava ppt
Java ppt
 
Andoid ppt
Andoid pptAndoid ppt
Andoid ppt
 

Recently uploaded

implementasu Permendikbudristek no 53 2023
implementasu Permendikbudristek no 53 2023implementasu Permendikbudristek no 53 2023
implementasu Permendikbudristek no 53 2023DodiSetiawan46
 
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdfShintaNovianti1
 
Ppt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada AnakPpt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada Anakbekamalayniasinta
 
Aksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru PenggerakAksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru Penggeraksupriadi611
 
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques  Rousseau.pdfPEMIKIRAN POLITIK Jean Jacques  Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdfMMeizaFachri
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxJamhuriIshak
 
Petunjuk Teknis Aplikasi Pelaksanaan OSNK 2024
Petunjuk Teknis Aplikasi Pelaksanaan OSNK 2024Petunjuk Teknis Aplikasi Pelaksanaan OSNK 2024
Petunjuk Teknis Aplikasi Pelaksanaan OSNK 2024budimoko2
 
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptxPPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptxalalfardilah
 
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxadap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxmtsmampunbarub4
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxnerow98
 
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptx
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptxPPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptx
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptxHeruFebrianto3
 
Edukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajiiEdukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajiiIntanHanifah4
 
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfModul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfSitiJulaeha820399
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5KIKI TRISNA MUKTI
 
IPA Kelas 9 BAB 10 - www.ilmuguru.org.pptx
IPA Kelas 9 BAB 10 - www.ilmuguru.org.pptxIPA Kelas 9 BAB 10 - www.ilmuguru.org.pptx
IPA Kelas 9 BAB 10 - www.ilmuguru.org.pptxErikaPuspita10
 
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxTopik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxsyafnasir
 
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxModul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxherisriwahyuni
 
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdf
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdfLAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdf
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdfChrodtianTian
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdftsaniasalftn18
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)3HerisaSintia
 

Recently uploaded (20)

implementasu Permendikbudristek no 53 2023
implementasu Permendikbudristek no 53 2023implementasu Permendikbudristek no 53 2023
implementasu Permendikbudristek no 53 2023
 
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
1.2.a.6. Demonstrasi Konstektual - Modul 1.2 (Shinta Novianti - CGP A10).pdf
 
Ppt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada AnakPpt tentang perkembangan Moral Pada Anak
Ppt tentang perkembangan Moral Pada Anak
 
Aksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru PenggerakAksi Nyata Modul 1.1 Calon Guru Penggerak
Aksi Nyata Modul 1.1 Calon Guru Penggerak
 
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques  Rousseau.pdfPEMIKIRAN POLITIK Jean Jacques  Rousseau.pdf
PEMIKIRAN POLITIK Jean Jacques Rousseau.pdf
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
 
Petunjuk Teknis Aplikasi Pelaksanaan OSNK 2024
Petunjuk Teknis Aplikasi Pelaksanaan OSNK 2024Petunjuk Teknis Aplikasi Pelaksanaan OSNK 2024
Petunjuk Teknis Aplikasi Pelaksanaan OSNK 2024
 
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptxPPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
PPT_AKUNTANSI_PAJAK_ATAS_ASET_TETAP.pptx
 
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptxadap penggunaan media sosial dalam kehidupan sehari-hari.pptx
adap penggunaan media sosial dalam kehidupan sehari-hari.pptx
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
 
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptx
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptxPPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptx
PPT Materi Jenis - Jenis Alat Pembayaran Tunai dan Non-tunai.pptx
 
Edukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajiiEdukasi Haji 2023 pembinaan jemaah hajii
Edukasi Haji 2023 pembinaan jemaah hajii
 
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdfModul 1.2.a.8 Koneksi antar materi 1.2.pdf
Modul 1.2.a.8 Koneksi antar materi 1.2.pdf
 
Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5
 
IPA Kelas 9 BAB 10 - www.ilmuguru.org.pptx
IPA Kelas 9 BAB 10 - www.ilmuguru.org.pptxIPA Kelas 9 BAB 10 - www.ilmuguru.org.pptx
IPA Kelas 9 BAB 10 - www.ilmuguru.org.pptx
 
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptxTopik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
Topik 1 - Pengenalan Penghayatan Etika dan Peradaban Acuan Malaysia.pptx
 
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docxModul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
Modul Ajar Bahasa Indonesia - Menulis Puisi Spontanitas - Fase D.docx
 
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdf
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdfLAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdf
LAPORAN PKP KESELURUHAN BAB 1-5 NURUL HUSNA.pdf
 
Kelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdfKelompok 2 Karakteristik Negara Nigeria.pdf
Kelompok 2 Karakteristik Negara Nigeria.pdf
 
Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)Karakteristik Negara Mesir (Geografi Regional Dunia)
Karakteristik Negara Mesir (Geografi Regional Dunia)
 

Html5 ppt

  • 1. Oleh : Nama : Siti Rusmiatun NIM : 2114R0811 Dosen Pengampu : Septia Lutfi PENGERTIAN HTML5
  • 2. HTML5 adalah suatu spesifikasi sebagai hasil perbaikan dari standard HTML(Hypertext Markup Language) sebelumnya yang dikeluarkan oleh W3C( world Wide Web Consurtium) dan partner kerjanya yaitu Web Hypertext Application technology Working Group. Tujuan adanya revisi yang semula HTML menjadi HTML5 adalah untuk meningkatkan bahasa pada system multimedia yang sedang in yang dengan mudah dapat terbaca oleh manusia dan dimengerti oleh computer itu sendiri sebagai perangkat. Selain itu, juga bertujuan untuk mengurangi penggunaan plugin-plugin 3rd party pada HTML sehingga dapat mempercepat kinerja web itu sendiri. Contoh plugin itu sendiri adalah, Adobe Flash, Microsoft Silverlight, Java dan lain-lainnya.
  • 3. HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari WWW, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin. HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web. B. SEJARAH HTML5
  • 4. Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0. Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web."
  • 5. C. Kelebihan dan kekurangan HTML5 Kelebihan : *Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script. *Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web. *Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”
  • 6. *Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web. *Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client. *Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone. *Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet. *Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password, dll)
  • 7. *Sharper focus on Web Application Requiments, HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi. *Bersifat ompatibel dengan semua browser
  • 8. KEKURANGAN : Saat ini HTML5 masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser. Beberapa browser yang sudah mendukung HTML 5 seperti Safari, Chrome, Firefox, dan Opera. Namun kabarnya IE9 (Internet Explorer) akan mendukung beberapa fitur dari HTML5. *Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini hanya support untuk browser modern/terbaru *Karena bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada bisa saja berubah *Fitur keamanan yang ditawarkan HTML5 masih terbatas *HTML5 tidak dapat diandalkan dalam hal format karena web browser yang berbeda disebabkan mereka tidak mendukung salah satu format tunggal.
  • 9. D. FITUR BARU DALAM HTML5 Fitur – fitur dalam HTML5 *Canvas Canvas adalah media yang bisa dicoret-coret langsung dan tidak memerlukan plugin khusus. Canvas memberikan pilihan kepada para penggunanya. Dulu, saat ingin menggambar di halaman web maka harus menggunakan applet Java atau flash namun sekarang dapat menggunakan canvas, dengan cara menambahkan canvas dan javascript saja maka kita sudah dapat menggambar di halaman web. *Video dan Audio Karena sudah ada tag <audio> dan <video> maka kita tidak memerlukan flash lagi untuk memutar audio. Untuk masuk di dalamnya dapat menggunakan berbagai format, yang paling menonjol adalah Ogg Theora dan H.264. namun sampai sekarang penggunaan kode masih dipertanyakan kembali.
  • 10. *Local storage Fitur ini merupakan standard dalam HTML5. Fitur ini dapat menyimpan data yang memiliki kapasitas besar dibanding yang lain tanpa harus mengimplementasikan trik dengan cookie atau flash. *Web workers Kita sebelumnya pernah menikmati fitur ini dalam Google gears. Web workers ini mempunyai kelebihan dibanding dengan javascript, missal saja saat kita mengoperasikan computer dengan javascript maka akan menyebabkan computer melambat, nah ini yang membedakan dengan web workers. *Semantics Fitur ini sangatlah cocok bagi para perancang yang sering meng- abuse div dan span sebagian elemen nav, fret no more. Semantic ini bermanfaat sekali, karena bukan hanya untuk mencari informasi namun juga dapat melakukan seperti yang dijelaskan diatas.
  • 11. fitur pemrograman terbaru pada HTML5, yaitu: * Kemunculan Elelmen <Hgroup> Ketika memasang judul diikuti dengan subheading di bagian header website, anda mungkin biasa menggunakan tag standar yaitu <h1> dan <h2>. Sayangnya. tidak ada cara yang semantik untuk mengaitkan hubungan di antara keduanya. Padahal secara hirarki,tag <h2> seharusnya berada di bawah <h1>. Nah, dengan elemen <hgroup>, kini kita dapat mengelompokkan tag heading agar sesuai hirarki, tanpa sedikipun memengaruhi skema aliran dokumen. <header> <hgroup> <h1></h1> <h2>supersite in just click away Supersite in just click way </h2> </hgroup> </header>
  • 12. *Kemunculan Elemen <Figure> Perhatikan kode berikut, yang saat ini mungkin seringkali anda gunakan untuk menampilkan sebuah gambar. <img src="path/to/image" alt="Leonidas" /> <p>Leonidas Berteriak Spartan. </p> Sayangnya, kode di atas tidak semantik. Caption yang dibungkus dalam tag paragraf <p> benar-benar terpisah elemen <img> di atasnya. HTML5 memperbaiki hal ini dengan mengenalkan elemen <figure>. Jika anda mengkombinasikan dengan elemen <figcaption>, maka anda sekarang bisa mengasosiasikan caption yang secara hirarki sesuai dengan gambar masing-masing. <figure> <img src="path/to/image" alt="Leonidas" /> <figcaption> <p> Leonidas Berteriak Spartan. </p> </figcaption> </figure>
  • 13. *Kemunculan Elemen <Mark> Bayangkan sebuah efek stabilo yang muncul setiap kali anda melakukan pencarian kata di suatu halaman. Maka elemen <mark> adalah senjata baru HTML5 yang memungkinkan anda untuk memunculkannya. Anda dapat menggabungkan dengan JavaScript pula. Contohnya,jika ada penggunjung yang mencari kata "Spartan!" di website saya, saya bisa memanfaatkan JavaScript untuk wrap setiap string yang cocok dengan kata "Spartan!" dengan tag <mark> untuk memunculkan efek stabile. <h3> Hasil Pencarian </h3><p> Di hadapan Leonidas berbaris 100.000 pasukan Persia. Namun tanpa sedikitpun rasa gentar, dia menyerukan, <mark>"Spartan1"</mark>. </p>
  • 14. *HTML5 Melengkapi <Form> Dengan Berbagai Atribut Baru Setiap programmer pasti tahu bagaimana caranya membuat form. Tambahkan sebuah tag <form> berisi elemen <input type="text">, <input type="password">, dan sebuah <input type="submit">, maka jadilah. Namun rupanya form yang sekarang ini anda kenal sudah tidak relevan lagi. HTML5 telah melengkapi form dengan sejumlah atribut-atribut baru yang lebih menarik, dinamis, dan mungkin tidak pernah anda kenal sebelumnya. Misalnya <placeholder>, <autofocus>. dan <type> dengan kapabilitas masing-masing. Sayangnya fitur-fitur baru ini mungkin masih belum dapat ditampilkan potensi sepenuhnya pada beberapa browser. Namun tidak ada salahnya untuk dipelajari dan diterapkan sekarang atau ketika di masa depa dimana browser versi lama telah kehilangan peminat dan punah dari permukaan bumi.
  • 15. *Form Dilengkapi Email Validation Jika anda terapkan type "email" pada form, maka anda dapat memerintahkan browser untuk hanya mengijinkan isian yang sesuai dengan struktur alamat email saja. Artinya, HTML5 sudah dilengkapi email validation didalamnya. Meskipun pada beberapa browser (sebut saja IE), hasilnya tidak akan ditampilkan sesuai dengan yang anda inginkan. <!DOCTYPE html> <head> <title>untitled</title> </head> <body> <form action="" method="get"> <label for="email">Email:</label> <input id="email" name="email" type"email" /> <button type="submit"> Submit Form </button> </form> </body> </html>
  • 16. *Munculnya Attribut <Required> pada Form Form pada HTML5 kini juga telah dilengkapi atribut <required>, yang mampu membuat isian tertentu menjadi wajib diisi. <input type="text" name="isian" required> Dengan kode ini, maka sebuah form tidak dapat disubmit bila field "isian" dibiarkan kosong. Berikut adalah contoh singkat mengenai penerapannya. <form method="post" action=""> <label for="isian"> Nama: </label> <input type="text" id="isian" name="isian" place-holder="King Xerxes" required> <button type="submit">Go</button> </form>
  • 17. *Elemen baru HTML5 Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya: *section serupa seperti h1-h6. *article bisa berupa entri blog atau tulisan konten. *aside menyajikan konten pelengkap. *header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi. *footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya. *dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan. *yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas, dan elemen terkait berkas multimedia lainnya.
  • 18. *manfaat dan kegunaan HTML5 HTML5 Design menawarkan banyak manfaat lainnya yang seharusnya membuat Anda berpikir tentang menggunakan versi ini dalam situs web Anda. *Pemberian pertolongan Untuk meningkatkan kegunaan, web designer saat membuat website yang sangat interaktif dengan memasukkan memutar musik dan pilihan streaming video, animasi cairan dan situs jejaring sosial seperti Twitter dan Facebook di situs tersebut. Namun, sebelum HTML5 debut, mereka hanya bisa melakukannya dengan menggunakan Silverlight atau Flash, JavaScript atau Flex alat yang tidak hanya membuat aplikasi web lebih rumit, tetapi juga dikonsumsi banyak waktu. Namun, HTML5 Desain membuatnya lebih mudah untuk menanamkan audio dan video, animasi berkualitas tinggi, grafik dan gambar nyaman tanpa perlu menggunakan program pihak ketiga lainnya atau plugin.
  • 19. *peningkatan semantic Berkat HTML5, sekarang mudah untuk melihat header, footer, nav dan bagian lain dari halaman web sebagai tag sekarang lebih spesifik dan memahami tujuan utama mereka dan makna seluruh format yang. Kode desain web sangat standar sehingga meningkatkan semantik. *kode peningkatan Dengan menggunakan HTML5, web designer dan pengembang menikmati bekerja dengan rapi dan kode bersih dengan menghapus sebagian besar tag div di situs. *konsistensi Sebagai website mengadopsi unsur-unsur baru dari HTML5, hal ini membantu untuk mencapai konsistensi yang lebih besar ketika datang untuk menggunakan HTML dalam pengkodean halaman web. Dengan demikian, HTML5 Desain jauh lebih mudah dan dimengerti dan desainer dapat dengan mudah mengetahui struktur dari halaman web.
  • 20. *Bentuk elegan Web desainer dapat menggunakan bentuk pengujian dan HTML5 juga membuat validasi bentuk asli ke HTML, meningkatkan antarmuka pengguna dan mengurangi kebutuhan untuk javascript dalam pengembangan website Manfaat utama lainnya yang terkait dengan HTML5 yang seperti dukungan Geolocation dan meningkatkan aksesibilitas dari halaman web. Ini hanya menyoroti manfaat dari HTML5 dan para ahli percaya bahwa HTML5 akan berkembang menjadi bahasa pengembangan secara online penting dalam waktu dekat.
  • 21. He is my lecturer His name is Septia lutfi
  • 22. It’s me, My name is Siti Rusmiatun