SlideShare a Scribd company logo
1 of 15
HTML 5
By Dyah Noviati Kusumaningrum
PENGERTIAN, KONSEP ,SEJARAH DAN
FUNGSI HTML

Pengertian dan konsep HTML itu sendiri adalah bahasa
dari Worl Wide Web (www) yang dipergunakan utntuk
menyusun dan membentuk dokumen agar dapat
ditampilkan pada program web browser. HTML juga
dapat disebut sebagai protocol yang digunakan untuk
mentransfer data atau dokumen dari web server ke
browser.
HTML dibuat oleh kolaborasi Caillau TIM dengan
Berners-lee robert ketika mereka bekerja di CERN pada
tahun 1989 (CERN adalah lembaga penelitian fisika
energi tinggi di Jenewa).
Ada 2 fungsi utama dalam HTML yaitu :
1. Membentuk tata letak document, dalam hal ini
menentukan jenis huruf, gambar, dan komponen
dokumen lainnya.
2. Menentukan hubungan ke dokumen lain, HTML
merupakan suatu bahasa pemrograman yang termasuk
dalam kategori SGML (Standart Generalized Markup
Language) dimana bentuknya merupakan standar ASCII
yang berisi kode-kode untuk mengatur dokumen.
DEFINISI, SEJARAH DAN TUJUAN
HTML5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan
menampilkan isi dari Waring Wera Wanua, 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.
PERBEDAAN HTML5, APLIKASI, FITURFITUR DALAM HTML5 DAN
IMPLEMENTASINYA

Beberapa peraturan untuk HTML5 telah ditubuhkan:
a)
Ciri-ciri baru perlu berdasarkan HTML, CSS, DOM, dan JavaScript
b)
Mengurangkan keperluan untuk plugins luaran (seperti Flash)
c)
Kesilapan yang lebih baik pengendalian
d)
Markup Lebih untuk menggantikan skrip
e)
HTML5 harus peranti bebas
f)
Proses pembangunan perlu dilihat kepada orang awam
Aplikasi HTML5
Dengan HTML5, pembangunan aplikasi web adalah lebih mudah
berbanding sebelum ini :
a)
Penyimpanan data Lokal
b)
Fail akses tempatan
c)
Tempatan SQL pangkalan data
d)
Cache aplikasi
e)
Javascript pekerja
f)
XHTML HttpRequest 2
Pengembangan pada HTML 5 meliputi fitur - fitur yang
telah di perbaharui dan diganti dengan yang lebih baik
seperti :
•
Canvas
•
Video dan Audio
•
Local Storage
•
Web Workers
•
Semantics
KELEBIHAN DAN MANFAAT SERTA
KEKURANGAN PENGGUNAAN HTML5

Manfaat dan kelebihan HTML5 antara lain :
•
Dukungan suara dan video
•
Peningkatan membentuk elemen objek
•
Geo-Lokasi
•
User-friendly interface
Kekurangan HTML5 adalah :
HTML5 tidak dapat diandalkan dalam hal format karena
web browser yang berbeda karena mereka tidak
mendukung salah satu format tunggal. diambil dari situs
orang pandai cerita
ELEMEN HTML5 YANG SERING DIGUNAKAN:
1. <header>
Elemen header sebagaimana dengan terjemahannya yang
berkaitan dengan “kepala” memiliki arti atas, bagian atas dari
dokumen, layout dlsb. Di dalam header ini bisa saja berisi elemen
lain seperti <hgroup>, <h1> sampai <h6>, <nav>, metadata
dlsb
2. <hgroup>
Elemen <hgroup> digunakan untuk title dan subtitle dengan tag
heading seperti <h1>-<h6>.
3. <nav>
Elemen baru ini digunakan untuk menu navigasi. <nav> dapat digunakan
diluar maupun didalam elemen lainnya, seperti didalam <aside> atau
<header> maupun <footer>.
4. <section>
Seperti <div> yang berfungsi sebagai box atau pengelompokan beberapa
elemen, akan tetapi sebenernya tidak sama dengan <div>. section adalah
elemen yang digunakan untuk ngelompokkan beberapa elemen yang sejenis.
5. <article>
Tag ini digunakan untuk menampilkan satu artikel penuh dalam halaman html.
Untuk memepermudah pemahaman, bayangkan saja perngertian dari artikel.
Artikel biasanya terdiri dari Judul, mungkin sub judul, catatan dan deskripsi.
6. <footer>
Tag <footer>, berlawanan arti dengan tag <header>. Tag ini memang
digunakan di bagian bawah sebuah halaman html dokumen maupun
didalam elemen html. Isi dari tag <footer> bisa berupa info konten
seperti copyright, author website atau navigasi.

7. <figure> dan <figcaption>
Menampilkan gambar dapat memanfaatkan tag <figure>, sedangkan tag
<figcaption> adalah caption dari gambar tersebut. Jika mengkiuti
aturan semantik yang sebenarnya <figure> ini digunakan untuk
menampilkan gambar dalam suatu artikel, dimana gambar terbut
berkaitan/ada hubungannya dengan konten artikel.
Bagian Head
Bagian head HTML5 digunakan untuk menyimpan berbagai
informasi mengenai isi dokumen tersebut. Paling sedikit, bagian head harus
mengandung judul dokumen. Judul dokumen ini diapit oleh tag <title> dan
</title> serta akan ditampilkan pada bagian title bar browser.
Selain judul dokumen, bagian head dapat mengandung informasi-informasi
berikut:
• Metadata: berisi berbagai data tambahan tentang dokumen HTML5 seperti
nama pengarang/penulis, tanggal publikasi, deskripsi isi dokumen, kata kunci,
dan lain-lain. Informasi ini dinyatakan oleh tag <meta> saja, tanpa tag
penutup </meta>.
• Base URL: menentukan basis lokasi untuk link-link yang ada pada dokumen.
Informasi ini dinyatakan oleh tag <base> saja, tanpa tag penutup </base>.
• Link: menentukan link ke dokuman lain yang terkait erat dengan dokumen
HTML5, misalnya skrip CSS yang digunakan dalam desain halaman web.
Informasi ini dinyatakan oleh tag <link> saja, tanpa tag penutup </link>.
• Objek: berisi informasi mengenai objek yang mungkin ada pada dokumen
HTML5. Objek yang mungkin terkandung pada dokumen HTML5 antara lain
adalah video, audio, dan animasi flash. Informasi ini dinyatakan dengan diapit
oleh tag <object> dan </object>.
• Skrip: berisi informasi mengenai skrip pemrograman yang mungkin ada pada
dokumen HTML5. Skrip pemrograman ini umumnya bersifat client-side
seperti JavaScript. Informasi ini dinyatakan dengan diapit oleh tag <script>
dan </script>.
• Style: berisi informasi mengenai desain halaman web dalam format CSS yang
langsung dituliskan di bagian head, bukan pada dokumen terpisah. Jika hendak
dituliskan pada dokumen terpisah, gunakan link. Informasi ini dinyatakan
dengan diapit oleh tag <style> dan </style>.
Bagian Body
Bagian body HTML5 merupakan bagian yang nantinya
diterjemahkan dan ditampilkan oleh browser. Di bagian inilah
terkandung berbagai tag yang menyatakan desain dokumen HTML. Jadi
bisa dibayangkan pastilah akan banyak terdapat tag HTML yang bisa
digunakan di bagian ini.
Yang pertama adalah paragraf. Sebuah dokumen yang terstruktur dengan
baik pastilah terdiri dari beberapa paragraf. Untuk memisahkan antara satu
paragraf dengan paragraf yang lain digunakan tag <p>. Tag ini harus ditutup
dengan pasangannya, yaitu </p>.
Untuk sekedar ganti baris tanpa ganti paragraf, digunakan tag <br>.
Karena tag ini tidak memiliki pasangan maka ditulis dengan <br />. Ganti baris
pada dokumen HTML5 perlu diberi tag sendiri karena meski pada kode HTMLnya ganti baris tetapi browser tidak akan menampilkannya pada baris terpisah.
THANKS

More Related Content

What's hot

Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiResa Firmansyah
 
Mengelolaisihalamanweb1 (ind)
Mengelolaisihalamanweb1 (ind)Mengelolaisihalamanweb1 (ind)
Mengelolaisihalamanweb1 (ind)Sayugo
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen htmlDeka M Wildan
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)T Ghazali
 
Webprograming
WebprogramingWebprograming
Webprogramingandreboys
 
Mengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTMLMengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTMLNurdin Al-Azies
 
Pengenalan internet 10
Pengenalan internet 10Pengenalan internet 10
Pengenalan internet 10Suparno Oke
 
Modul 2-form html-css
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-cssFajar Baskoro
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtmlgueste0c708
 

What's hot (17)

Dasar html
Dasar htmlDasar html
Dasar html
 
Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasi
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Mengelolaisihalamanweb1 (ind)
Mengelolaisihalamanweb1 (ind)Mengelolaisihalamanweb1 (ind)
Mengelolaisihalamanweb1 (ind)
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
 
Html for xi grade
Html for xi gradeHtml for xi grade
Html for xi grade
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
 
Webprograming
WebprogramingWebprograming
Webprograming
 
Ppt materi
Ppt materiPpt materi
Ppt materi
 
Mengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTMLMengenal Struktur Web dan Bahasa Pemerograman HTML
Mengenal Struktur Web dan Bahasa Pemerograman HTML
 
01 html
01 html01 html
01 html
 
Pengenalan internet 10
Pengenalan internet 10Pengenalan internet 10
Pengenalan internet 10
 
Modul 2-form html-css
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-css
 
Tugas 2 rekayasa web
Tugas 2 rekayasa webTugas 2 rekayasa web
Tugas 2 rekayasa web
 
Pertemuan1
Pertemuan1Pertemuan1
Pertemuan1
 
Introduction to xhtml
Introduction to xhtmlIntroduction to xhtml
Introduction to xhtml
 

Similar to HTML5 ELEMEN DAN FUNGSINYA

Tugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaTugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaosta92
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisrahmantaufik00
 
Html power point
Html power pointHtml power point
Html power pointminmon
 
Tugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art davidTugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art davidart david
 
Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020Ppt html5 rully_amrizal_1102412020
Ppt html5 rully_amrizal_1102412020mutia902
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepadSamsuri14
 
MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxssuser71d74a
 
Makalah internet dan html
Makalah internet dan htmlMakalah internet dan html
Makalah internet dan htmlShinta Ta'Cuco
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt044249
 
2.struktur dasar html (ok)
2.struktur dasar html (ok)2.struktur dasar html (ok)
2.struktur dasar html (ok)Nacha Evangelion
 

Similar to HTML5 ELEMEN DAN FUNGSINYA (20)

Laporan pratikum 1
Laporan pratikum 1Laporan pratikum 1
Laporan pratikum 1
 
Html 5
Html 5Html 5
Html 5
 
Tugas 8 rekayasa web
Tugas 8   rekayasa webTugas 8   rekayasa web
Tugas 8 rekayasa web
 
Makalah html 5
Makalah html 5Makalah html 5
Makalah html 5
 
Training HTML
Training HTMLTraining HTML
Training HTML
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
Tugas 8 rekayasa web
Tugas 8 rekayasa webTugas 8 rekayasa web
Tugas 8 rekayasa web
 
Tugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarinaTugas 8 rekayasa web 1312510231 rostarina
Tugas 8 rekayasa web 1312510231 rostarina
 
Html 5
Html 5Html 5
Html 5
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamis
 
Html power point
Html power pointHtml power point
Html power point
 
Tugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art davidTugas 8 rekayasa web 1211510944 art david
Tugas 8 rekayasa web 1211510944 art david
 
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
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
 
MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptx
 
Makalah html
Makalah htmlMakalah html
Makalah html
 
Makalah internet dan html
Makalah internet dan htmlMakalah internet dan html
Makalah internet dan html
 
Html5 ppt
Html5 pptHtml5 ppt
Html5 ppt
 
2.struktur dasar html (ok)
2.struktur dasar html (ok)2.struktur dasar html (ok)
2.struktur dasar html (ok)
 

HTML5 ELEMEN DAN FUNGSINYA

  • 1. HTML 5 By Dyah Noviati Kusumaningrum
  • 2. PENGERTIAN, KONSEP ,SEJARAH DAN FUNGSI HTML Pengertian dan konsep HTML itu sendiri adalah bahasa dari Worl Wide Web (www) yang dipergunakan utntuk menyusun dan membentuk dokumen agar dapat ditampilkan pada program web browser. HTML juga dapat disebut sebagai protocol yang digunakan untuk mentransfer data atau dokumen dari web server ke browser. HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
  • 3. Ada 2 fungsi utama dalam HTML yaitu : 1. Membentuk tata letak document, dalam hal ini menentukan jenis huruf, gambar, dan komponen dokumen lainnya. 2. Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa pemrograman yang termasuk dalam kategori SGML (Standart Generalized Markup Language) dimana bentuknya merupakan standar ASCII yang berisi kode-kode untuk mengatur dokumen.
  • 4. DEFINISI, SEJARAH DAN TUJUAN HTML5 HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, 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.
  • 5. PERBEDAAN HTML5, APLIKASI, FITURFITUR DALAM HTML5 DAN IMPLEMENTASINYA Beberapa peraturan untuk HTML5 telah ditubuhkan: a) Ciri-ciri baru perlu berdasarkan HTML, CSS, DOM, dan JavaScript b) Mengurangkan keperluan untuk plugins luaran (seperti Flash) c) Kesilapan yang lebih baik pengendalian d) Markup Lebih untuk menggantikan skrip e) HTML5 harus peranti bebas f) Proses pembangunan perlu dilihat kepada orang awam
  • 6. Aplikasi HTML5 Dengan HTML5, pembangunan aplikasi web adalah lebih mudah berbanding sebelum ini : a) Penyimpanan data Lokal b) Fail akses tempatan c) Tempatan SQL pangkalan data d) Cache aplikasi e) Javascript pekerja f) XHTML HttpRequest 2
  • 7. Pengembangan pada HTML 5 meliputi fitur - fitur yang telah di perbaharui dan diganti dengan yang lebih baik seperti : • Canvas • Video dan Audio • Local Storage • Web Workers • Semantics
  • 8. KELEBIHAN DAN MANFAAT SERTA KEKURANGAN PENGGUNAAN HTML5 Manfaat dan kelebihan HTML5 antara lain : • Dukungan suara dan video • Peningkatan membentuk elemen objek • Geo-Lokasi • User-friendly interface Kekurangan HTML5 adalah : HTML5 tidak dapat diandalkan dalam hal format karena web browser yang berbeda karena mereka tidak mendukung salah satu format tunggal. diambil dari situs orang pandai cerita
  • 9. ELEMEN HTML5 YANG SERING DIGUNAKAN: 1. <header> Elemen header sebagaimana dengan terjemahannya yang berkaitan dengan “kepala” memiliki arti atas, bagian atas dari dokumen, layout dlsb. Di dalam header ini bisa saja berisi elemen lain seperti <hgroup>, <h1> sampai <h6>, <nav>, metadata dlsb 2. <hgroup> Elemen <hgroup> digunakan untuk title dan subtitle dengan tag heading seperti <h1>-<h6>.
  • 10. 3. <nav> Elemen baru ini digunakan untuk menu navigasi. <nav> dapat digunakan diluar maupun didalam elemen lainnya, seperti didalam <aside> atau <header> maupun <footer>. 4. <section> Seperti <div> yang berfungsi sebagai box atau pengelompokan beberapa elemen, akan tetapi sebenernya tidak sama dengan <div>. section adalah elemen yang digunakan untuk ngelompokkan beberapa elemen yang sejenis. 5. <article> Tag ini digunakan untuk menampilkan satu artikel penuh dalam halaman html. Untuk memepermudah pemahaman, bayangkan saja perngertian dari artikel. Artikel biasanya terdiri dari Judul, mungkin sub judul, catatan dan deskripsi.
  • 11. 6. <footer> Tag <footer>, berlawanan arti dengan tag <header>. Tag ini memang digunakan di bagian bawah sebuah halaman html dokumen maupun didalam elemen html. Isi dari tag <footer> bisa berupa info konten seperti copyright, author website atau navigasi. 7. <figure> dan <figcaption> Menampilkan gambar dapat memanfaatkan tag <figure>, sedangkan tag <figcaption> adalah caption dari gambar tersebut. Jika mengkiuti aturan semantik yang sebenarnya <figure> ini digunakan untuk menampilkan gambar dalam suatu artikel, dimana gambar terbut berkaitan/ada hubungannya dengan konten artikel.
  • 12. Bagian Head Bagian head HTML5 digunakan untuk menyimpan berbagai informasi mengenai isi dokumen tersebut. Paling sedikit, bagian head harus mengandung judul dokumen. Judul dokumen ini diapit oleh tag <title> dan </title> serta akan ditampilkan pada bagian title bar browser. Selain judul dokumen, bagian head dapat mengandung informasi-informasi berikut: • Metadata: berisi berbagai data tambahan tentang dokumen HTML5 seperti nama pengarang/penulis, tanggal publikasi, deskripsi isi dokumen, kata kunci, dan lain-lain. Informasi ini dinyatakan oleh tag <meta> saja, tanpa tag penutup </meta>. • Base URL: menentukan basis lokasi untuk link-link yang ada pada dokumen. Informasi ini dinyatakan oleh tag <base> saja, tanpa tag penutup </base>. • Link: menentukan link ke dokuman lain yang terkait erat dengan dokumen HTML5, misalnya skrip CSS yang digunakan dalam desain halaman web. Informasi ini dinyatakan oleh tag <link> saja, tanpa tag penutup </link>.
  • 13. • Objek: berisi informasi mengenai objek yang mungkin ada pada dokumen HTML5. Objek yang mungkin terkandung pada dokumen HTML5 antara lain adalah video, audio, dan animasi flash. Informasi ini dinyatakan dengan diapit oleh tag <object> dan </object>. • Skrip: berisi informasi mengenai skrip pemrograman yang mungkin ada pada dokumen HTML5. Skrip pemrograman ini umumnya bersifat client-side seperti JavaScript. Informasi ini dinyatakan dengan diapit oleh tag <script> dan </script>. • Style: berisi informasi mengenai desain halaman web dalam format CSS yang langsung dituliskan di bagian head, bukan pada dokumen terpisah. Jika hendak dituliskan pada dokumen terpisah, gunakan link. Informasi ini dinyatakan dengan diapit oleh tag <style> dan </style>.
  • 14. Bagian Body Bagian body HTML5 merupakan bagian yang nantinya diterjemahkan dan ditampilkan oleh browser. Di bagian inilah terkandung berbagai tag yang menyatakan desain dokumen HTML. Jadi bisa dibayangkan pastilah akan banyak terdapat tag HTML yang bisa digunakan di bagian ini. Yang pertama adalah paragraf. Sebuah dokumen yang terstruktur dengan baik pastilah terdiri dari beberapa paragraf. Untuk memisahkan antara satu paragraf dengan paragraf yang lain digunakan tag <p>. Tag ini harus ditutup dengan pasangannya, yaitu </p>. Untuk sekedar ganti baris tanpa ganti paragraf, digunakan tag <br>. Karena tag ini tidak memiliki pasangan maka ditulis dengan <br />. Ganti baris pada dokumen HTML5 perlu diberi tag sendiri karena meski pada kode HTMLnya ganti baris tetapi browser tidak akan menampilkannya pada baris terpisah.