Makalah HyperText Markup Language 5 ( HTML5) | One-Inspirations

MAKALAH

HyperText Markup Language 5 ( HTML5 )

“ Makalah Ini Diajukan Guna Melengkapi Mata Kuliah Teknologi Informasi dan Komunikasi ”

Dosen Pengampu      : 

1. Septia Lutfi, S.Kom, M.Kom

2. Yuli Utanto, M.Pd

Disusun Oleh :

Nama                           : Ali Mustofa

NIM                            : 1102412087

Prodi                            : Kurikulum dan Teknologi Pendidikan

Mata Kuliah                 : Teknologi Infomasi dan Komunikasi

Rombel                        : 02

UNIVERSIATAS NEGERI SEMARANG

2013

DAFTAR ISI

LEMBAR HALAMAN ................................................................................................  i

DAFTAR ISI ................................................................................................................  ii

BAB     I PENDAHULUAN

  A.    Latar Belakang Masalah.......................................................................................  1
  B.     Rumusan Masalah ................................................................................................  2
  C.    Tujuan ....................................................................................................................  3

BAB II     PEMBAHASANA.  Tentang HTML5. ........................................................  4
  B.   Sejarah dan Perkembangan HTML5 ....................................................................  6
  C.  Perkembangan Teknologi WEB HTML5 .............................................................  9
    1.      Standarisasi W3C ..................................................................................................  9
    2.      Penanaman API Baru ............................................................................................ 10
    3.      MarkUp HTML5 .................................................................................................. 12
    4.      Penanganan Masalah HTML.....5 ........................................................................... 14
    5.      Media HTML5 ...................................................................................................... 15
    6.      Microdata HTML5 ................................................................................................ 24
D.  Perbedaan Dengan HTML 4.01 dengan XHTML ................................................. 26
E.   Dasar-Dasar Syntak HTML5 ................................................................................. 26
  1.      Struktur HTML5 ...................................................................................................... 27
   1.1 Struktur Dasar HTML5 ........................................................................................... 27

   1.2 Penjelasan Atribut dan Syntak HTML5 .................................................................... 31

   1.3 Membuat Kode Dasar HTML5 ............................................................................... 38

F. Kelebiahn dan Kekurangan HTML5 ........................................................................ 42

G. Membuat Game Ular Sederhana dengan HTML5 .................................................. 43

BAB III    PENUTUPA.  Kesimpulan...................................................................................................................... 43

DAFTAR PUSTAKA ..................................................................................................... 48

BAB I

PENDAHULUAN

      A.    Latar Belakang Masalah

Perkembangan dunia teknologi pendidikan kini tidak terbendung lagi, baik itu dalam yang disumabangkan dalam bidang sain, bidang politik, bidang pendidikan itu sendiri, dan bidang-bidang yang lain. Keberadaan teknologi khsusunya dalam dunia informasi dan komunikasi itu sangatlah dibutuhkan karena hal ini sangatlah mendukung perkembangan perkembangan yang lainnya. Misalnya keberadaan WEB Brouser/ internet, media ini sangatlah membantu keberadaan dan segala aktifitas manusia bahkan bisa dibilang keberadaan WEB Brouser ini merupakan pengganti kamus ilmu pengetahuan dan juga sebagai sumber ladang ilmu pengetahuan, sebagai pendorong dan penyosong dalam dunia pendidikan, politik, social, dan budaya. Dengan pentingnya keberadaan WEB Brouser/ Internet dalam kehidupan masyarakat, manusia sendiri sebagai pengguna haruslah mampu mengetahui seluk beluk dan segala keguanaan yang ada dalam Internet dan/atau web brouwser, bahkan diharapkan mampu untuk memahami dan mengolah berbagai ilmu pengetahuan yang dibawanya dan juga element dasar web brouser itu sendiri, sehingga diharapakan kita/manusia mampu bukan saja menggunakan perkembangan teknologi informasi namun juga menyeimbangi perkembangan dunia teknologi informasi sehingga kita tidak tertinggal dengan perkembangan dunia teknologi informasi dan komunikasi dalam hal ini adalah permkembangan WEB Brouser dan/atau Internet.

            Dari berbagai kemajuan teknologi informasi dan komunikasi sesuai yang terpapar diatas merupakan teknologi informasi berbasis WEB, WEB  atau Word Wide Web adalah suatu ruang informasi yang dipakai oleh pengenal global yang disebut Pengidentifikasi Sumber Seragam untuk mengenal pasti sumber daya berguna. WWW sering dianggap sama dengan Internet secara keseluruhan, walaupun sebenarnya ia hanyalah bagian daripada Internet. Kegunaan ini tergolong masih baru dibandingkan surat elektronik, sebenarnya WWW merupakan kumpulan dokumen yang tersimpan di peladen web, dan yang peladennya tersebar di lima benua termasuk Indonesia yang terhubung menjadi satu melalui jaringan Internet. Dokumen-dokumen informasi ini disimpan atau dibuat dengan format HTML (Hypertext Markup Language), salah satunya degnan aplikasi HTML terbaru versi 5. HTML berbagai versi  disempurnakan oleh versi HTML5merupakan suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen yang didalamnya terdapat code-code atau fungsi-fungsi yang bertujuan untuk membuat sebuah aplikasi atau tampilan yang berbasis Website (WEB). Keberadaan HTML ini sangatlah penting dalam dunia Internet yang menjadi pengolah, penjalan segala informasi yang ada diinternet.  Dengan pentingnya keberadaan HTML dalam dunia internet diharapakan, kita tidak hanya mampu sebagai penikmat hasil dari programmer namun juga harus mampu sebagai penganalisis dan juga pembuat, sehingga kita juga ikut serta sebagai pengembangn dunia teknologi informasi dan komunikasi.

Dengan hadirnya Aplikasi HTML dengan versi terbarunya HTML5 membuat dunia pengemangan WEB/ internet ini semakin tak terbendung, dunia teknologi informasi dan komnikasi seakan meninggalkan jauh dunia perkembangan manusia, sehingga sangat penting sekali bagi para pelajar/ pendidik untuk dapat bisa dan mampu untuk mengoperasikan dunia WEB dan/atau internet lebihnya menggunakan HTML5 sebagai pengelola dunia informasi kompunikasi berbasis WEB/internet.

      B.     Rumusan Masalah

Berdasarkan latar belakang di atas, rumusan masalah yang akan dibahas pada makalah ini adalah mengenai perkembangan dunia teknologi informasi berbasis WEB/Internet dengan keberadaan HTML5 dan juga pentingnya bagi para pelajar/ pendidikan dan berbagai kalangan dalam mendukung perkembangan pendidikan di indonesia, lebih detailnya adalah mengenai:

1.      Apakan HTML5 (Hypertext Markup Language) dan bagaimanakan keberadaanya dalam dunia teknologi informasi dan komunikasi.

2.      Bagaimanakah sejarah lahir dan keberadaan HTML5 (Hypertext Markup Language)?

3.      Bagaimanakah perkembangan HTML5 (Hypertext Markup Language) hingga saat ini?

4.      Apakah perbedaan-perbedaan HTML5 (Hypertext Markup Language) dengan versi sebelumnya

5.      Bagaimanakah cara kerja dasar HTML5 (Hypertext Markup Language)?

6.      Apa sajakah kelebihan dan kekurangan HTML5 (Hypertext Markup Language)?

7.      Apa sajakan struktur element dasar dariHTML5 (Hypertext Markup Language)?

8.      Bagaimankah cara menggunakan HTML5 (Hypertext Markup Language) dalam WEB/ Internet?

      C.    Tujuan

Tujuan dari penyusunan Makala ini adalah:

a.       Sebagai syarat untuk menyelesaikan mata kuliah Teknologi Informasi dan Komunikasi.

b.      Sebagai bahan pembelajaran mengenai perkembangan teknologi informasi khususnya HTML5 (Hypertext Markup Language).

c.       Dapat memahami, mengerti dan mendalami tentang teknologi HTML5 (Hypertext Markup Language), yang meliputi:

1.      HTML5 (Hypertext Markup Language) keberadaanya dalam dunia teknologi informasi dan komunikasi dan dunia pendidikan.

2.      sejarah lahir dan keberadaan HTML5 (Hypertext Markup Language).

3.      Perkembangan HTML5 (Hypertext Markup Language) hingga saat ini.

4.      Perbedaan-perbedaan HTML5 (Hypertext Markup Language) dengan versi sebelumnya.

5.      Cara kerja dasar HTML5 (Hypertext Markup Language).

6.      Kelebihan dan kekurangan HTML5 (Hypertext Markup Language)?

7.      Struktur element dasar dari HTML5 (Hypertext Markup Language)?

8.      Menggunakan HTML5 (Hypertext Markup Language) dalam WEB/ Internet?

BAB I

PEMBAHASAN

A.    Tentang HTML5

HTML (HyperText Markup Language) merupakan suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen yang didalamnya terdapat code-code atau fungsi-fungsi yang bertujuan untuk membuat sebuah aplikasi atau tampilan yang berbasis Website (WEB). Markup language  dalam HTML berfungsi untuk memformat file dokumen teks biasa untuk dan agar bisa ditampilkan di dalam web browser seperti contohnya mozilla firefox, google chrome, opera mini, dan lain-lain yang bisa diatur sedemikian rupa sesuai dengan keinginan kita, dengan menambahkan elemen atau sering disebut dengan sebutan tag-tag HTML.  HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program.

Jika diartikan berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :

1.      Hypertext
Link hypertext adalah kata atau frase yang dapat menghubungkan suatu naskah dokumen dengan naskah-naskah lainnya. Jika diklik pada kata atau frase (yang mempunyai link) maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju sesuai dengan link yang disebut.

2.      Markup
Markup Pada HTML menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.

3.      Language
HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.

Hal lain dari HTML adalah sebuah susunan program untuk menandai naskah dalam menstrukturkan dan menampilkan isi dari Word Wide Web(suatu ruang informasi yang dipakai oleh pengenal global yang disebutPengidentifikasi Sumber Seragam untuk mengenal pasti sumber daya berguna) yang menjadi teknologi inti dari Internet. HTML5/HTML versi 5 merupakan sebuah bahasa (web) dunia maya yang berguna untuk menayangkan halaman web dan informasi dengan format hiperteks (perangkat lunak pengolah kata) sederhana yang berjenis ASCII (American Standard Code for Information Interchange/ standar kode yang digunakan Amerika untuk pertukaran informasi pada perangkat komputer, komunikasi maupun peralatan berat) sehingga dapat tampil secara visual dalam bentuk teks.

HTML5 diciptakan dalam pengembangan bahasa HTML untuk memperbaiki konten dan memperbarui teknologi multimedia yang sudah ada pada HTML 4 dan versi sebelumnya agar mudah dijalankan oleh browser dan mudah dimengerti. HTML5merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Teknologi Working Group (WHATWG), yang bekerja dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk bekerja sama dan membuat versi baru dari HTML yaitu HTML5.

W3C adalah sebuah komunitas internasional yang bekerja bersama para anggotanya untuk merumuskan dan membuat standarisasi dari web, mengembangkan pemrograman, dan forum-forum pelatihan untuk desain web. Misi dari W3C bertujuan untuk mendorong semua potensi penuh dari dunia web yang bisa dikembangkan dengan menyediakan protocol-protokol dan panduan-panduan untuk menjamin pertumbuhan jangka panjang dari web itu sendiri.fungsi W3C yaitu memberikan rekomandasi bagaimana membuat website/blog yang baik dan bisa diakses dengan baik pula oleh semua perangkat baik itu PC, tablet, mobile phone, smartphone, internet TV dll, dan berjalan dengan baik pula di semua software dan hardware.

Sedangkan WHATWG adalah sebuah komunitas orang yang tertarik dalam mengembangkan teknologi HTML, WHATWG ini didirikan oleh orang-orang dari Apple, Yayasan Mozilla dan Opera Software.

HTML5 adalah pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

Sedangkan XHTML merupakan bentuk reformulasi dari HTML yang menggunakan paradigma XML.XHTML adalah bahasa markup penerus dan pengembangan dari HTML dengan kemampuan mirip HTML, tapi dengan aturan sintaks yang lebih ketat. HTML adalah aplikasi dari SGML (Standard Generalized Markup Language/ bahasa pemrograman markup yang dipakai untuk sebuah dokumen yang standar.) yang sangat fleksibel, sedangkan XHTML adalah aplikasi dari XML, turunan SGML yang lebih terbatas.

Karena XHTML harus memiliki keteraturan-bentuk (mengikuti sintaks yang tepat), dokumen XHTML dapat diproses otomatis dengan menggunakan standar pemroses XML - tidak seperti HTML yang membutuhkan pemroses yang cukup sulit dan kompleks. XHTML dapat dianggap sebagai perpaduan antara HTML dan XML ((Extensible Markup Language) adalah bahasa markup untuk keperluan umum yang disarankan oleh W3C untuk membuat dokumen markup keperluan pertukaran data antar sistem yang beraneka ragam).

B.     Sejarah dan Perkembangan HTML

Sejarah awal kelahiran HTML pada tahun 1980, ketika IBM berniat membuat bahsa kode untuk menggabungkan teks dengen perintah pemformatan agar mengenali elemen dokumen. Bahasa yang menggunakan tanda-tanda ini dinamakan dengan markup language, sedangkan IBM memberinya nama Generalized Markup language (GML). Namun pada tahun 1986, ISO mengeluarkan standarisasi bahasa markup berdasarkan GML dengan nama Standard generalized Markup Language (SGLML). Bahasa SGML ini kemudian banyak diguankan di dunia penerbitan dan percetakan.

Pada tahun 1989, caillau Tim bekerja sama dengan Barners Lee Robert, ketika mereka bekerja di CERN, sebuah lembaga penelitian fisika energy tinggi di Jenewa, mencoba mengembangkan SGML. Dari merekalah lahir HTML atau Hyper Text Markup Language, yang digunakan untuk membuat halaman website. HTML dipopulerkan pertamakali oleh browser Mosaic.

Web browser pertama kali dibuat hanya berbasiskan teks pada komputer saat ini. Namun, penggunaan web browser tersebut perlahan-lahan ditinglakan sejak kedatang web browser yang bernama Mosaic. Mosaic merupakan hasi dari sebuah penelitian yang lebih baik, karena memudahkan pengguna dalam mengoperasikannya juga sudah berbsis grafik. Kemudian, kepopuleran mosaic digantikan oleh Netscape Navigator ciptaan Silicon Graphics. Microsoft juga ikut meramaikan hadirnya web browser bernama internet explorer.

Sejak tahun 1990, bahasa pemformatan ini mengalami perkembangan yang sangat pesat dan sejak tahun 1996, Word Wide Web Consortium (W3C) tertarik mengembangkan HTML dan mengeluarkan HTML versi 3.2. sejak waktu itu HTML digunakan sebagai bahasa standard internet yang dikendalikan penggunaannya oleh W3C.

Pada tahun 1994, Netscape Navigator merupakan Web Browser yang banyak diunakan selain internet Eksploler. Hingga saat ini banyak web browser selain exsploler dan netscape, diantaranya Mozilla Firefox buatan Mozilla Corporations dan Opera buatan Opera Software ASA.

Perkembangan Teknologi Web HTML

Berawal pada tahun 1980, IBM mulai membuat suatu bahasa pemrograman dimana Text dan format sebuah dokumen dijadikan satu dalam sebuah bahasa pemrograman yang disebut GML(Generalized Markup Language), lalu pada tahun 1986 ISO pun mulai membuat sebuah standardarisasi bahasa pemrograman tersebut dan mengubah GML menjadi SGML(Standard Generalized Markup Language). Mulailah kelahiran HTML pada tahun 1989 yang muncul dari pemikiran Caillau Tim dan rekannya Banners Lee Robert yang mengembangkan bahasa pemrograman ini dan mempopulerkannya dengan browser Mosaic, setelah itu  mulailah HTML semakin berkembang dan populer di tahun 1990. Sehingga muncullah perkembangan HTML berbagai versi, diantaranya adalah:

1.      HTML versi 1.0 adalah versi pertama sejak lahirnya nama html tersebut, memiliki sebuah kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping (memperbolehkan meletakkan teks disekelilingnya) serta memiliki dukungan dalam peletakan sebuah gambar.

2.      HTML versi 2.0 yang diremsikan 14 Januari 1996, pada versi ini ada beberapa tambahan kemampuan diantaranya penambahan form commentar, kita dapat memasukkan nama, alamat, serta saran/kritik, hal ini menyebabkan adanya sebuah interaktif dan mulai dari versi ini yang menjadikan sebuah awal mula dalam perkembangan homepage interaktif.

3.      HTML versi 3.0 diluncurkan pada 18 Desember 1997 yang sering disebut sebut sebagai HTML+ yang mempunyai kemampuan dalam beberapa fasilitas diantaranya adalah penambahan fitur table dalam paragraph.

4.      Pada tanggal 24 Desember  1999yaitu HTML versi 4.0 di releas, seperti yang kita kenal HTML pada saat ini penambahan link, meta, imagemaps , image dan lain lain sebagai penyempurnaan versi 3.2

HTML versi 4.01, HTML versi 4.01 menjadi rekomendasi W3C. HTML 4.01 adalah minor update-koreksi dan perbaikan bug dari HTML 4.0

5.      HTML versi 5.0

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. Keberadaan HTML 4.01 yang belum pernah diperbarui sejak tahun 2000 maka pada tahun 2009, W3C dan WHATWG bekerja sama untuk mengembangan HTML5 sebagai langkah untuk memperbaiki berbagai kelemahan-kelemahan HTML 4.01. Hal ini dilakukan setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.

Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasanya HTML versi 5.0masih dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0.Keberadaan HTML5 yang dikenal luas oleh para pengembang web beberapa tahun yang lalu, namun HTML5 baru mencuat pada April 2010 setelah CEOApple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web.

HTML 5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yang tepat tentang bagaiman untuk menangani semua elemen HTML, dan bagaimana memulihakan dari kesalahan. Beberapa fitur dalam HTML 5 adalah fungsi untuk audio embedding, video, grafik, sisi penyimpanan data klien, dan dokumen interaktif. HTML 5 juga mengandung unsur-unsur baru seperti <nav>, <header><footer>, dan <figure>. Yang termasuk kelompok kerja diantaranya AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera dan banyak lagi vendor lainnya.

HTML 5 merupakan suatu spesifikasi atau standard yang dikeluarkan oleh W3C (World Wide Web Consortium) sebagai revisi dari standard HTML. Saat ini ditulis kita banyak aplikasi web yang masih menggunakan standard HTML4 namun beberapa sudah mulai migrasi ke standard web HTML5.

Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight, sebagai penambal kelemahan HTML4.Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda.

C.    Perkembangan Teknologi Web HTML5

1.      Standarisasi W3C

Keberadaan WHATWG mulai menspesifikasikan HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0., hingga pada bulan maret 2010 spesifikasi ini masuk ke bagian draft standar di WHATWG, dan ke dalam bagian pengurusan draft di W3C. Ian Hickson mewakili Google ,Inc menjadi editor HTML5.

Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru yang mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008.Spesifikasi ini berstatus dalam tahap pengerjaan, dan diperkirakan akan tetap demikian selama bertahun-tahun, meskipun sebagian dari HTML5 sudah dalam tahap penyelesaian dan diimplementasikan pada penjelajah web sebelum keseluruhan spesifikasinya mencapai status rekomendasi final.

Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C.WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.

Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012. Kriteria di W3C agar sebuah spesifikasi dapat berstatus - Direkomendasikan - adalah "yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda". Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk.

2.      Penanaman API Baru

Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs). Antar muka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa APIs terbaru pada HTML5 antara lain :

·         Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat spesifikasi 1.0 untuk canvas 2D.

Elemen kanvas adalah bagian dari HTML5 dan memungkinkan untuk dinamis, skrip render bentuk 2D dan gambar bitmap. Ini adalah tingkat rendah, model prosedural yang update bitmap dan tidak memiliki grafik adegan built-in.

·         Timed media playback

·         Media penyimpanan luring (aplikasi web luring)/ Web Storage.

Adalah aplikasi perangkat lunak berbasis web dan protokol yang digunakan untuk menyimpan data pada sebuahpenjelajah web. Media ini mendukung penyimpanan data secara persistent, sama dengan konsep cookies.

·         Penyuntingan dokumen

·         Drag and Drop

Drag dan drop adalah gerakan perangkat penunjuk di mana pengguna memilih objek virtual dengan "meraih" dan menyeretnya ke lokasi yang berbeda atau ke benda virtual lain. Secara umum, dapat digunakan untuk memanggil berbagai jenis tindakan, atau membuat berbagai jenis asosiasi antara dua benda abstrak. Sebagai fitur, drag-and-drop dukungan tidak ditemukan di semua perangkat lunak, meskipun kadang-kadang dengan teknik cepat dan mudah untuk belajar. Namun, tidak selalu jelas bagi pengguna bahwa item dapat menyeret dan menjatuhkan, yang dapat menurunkan kegunaan.

·         Cross-document messaging.

Mencegah serangan cross-site scripting ketika asal dan data divalidasi. untuk alasan keamanan dan privasi, mencegah dokumen dalam domain yang berbeda dari mempengaruhi satu sama lain, yaitu, cross-site scripting adalah batasan. Walaupun ini merupakan fitur keamanan yang penting, mencegah halaman dari domain yang berbeda dari berkomunikasi bahkan ketika halaman tersebut tidak bermusuhan. Bagian ini memperkenalkan sistem messaging yang memungkinkan dokumen untuk berkomunikasi satu sama lain terlepas dari domain sumber mereka, dengan cara yang dirancang untuk tidak mengaktifkan serangan cross-site scripting.

·         Manajemen sejarah kunjungan penjelajah web

·         Tipe MIME dan penanggung jawab protokol registrasi.

Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesifikasi milik WHATWGHTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah :

·         Geolocation

·         Web SQL Database, media penyimpanan database lokal.

·         API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB).

·         Web Speech APIm

3.      MarkUp Html5

Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik, semantic adalah  cabang linguistik yang mempelajari arti/makna yang terkandung pada suatu bahasa, kode, atau jenis representasi lain. Dengan kata lain, Semantik adalahpembelajaran tentang makna. Semantik biasanya dikaitkan dengan dua aspek lain: sintaksis, pembentukan simbol kompleks dari simbol yang lebih sederhana, serta pragmatika, penggunaan praktis simbol oleh komunitas pada konteks tertentu.

MarkUp pada blok yang umum digunakan yaitu:

Elemen (<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia <audio> dan <video>. Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet(CSS).

3.11          Semantic MarkUp HTML5

Markup Semantik merupakan penandaan kata. HTML5 mempunyai struktur elemen baru yang akan memudahkan para developer untuk membedakan isi dari sebuah dokumen web. Menggunakan metode markup baru HTML5 tidakakan berpengaruh secara langsung kepada pengguna, namun markup baru ini dapat menyederhanakan penulisan halaman pada struktur isi HTML.

Terlebih lagi, markup baru ini akan membuat halaman HTML menjadi lebih mudah dibaca oleh mesin, tentunya juga mudah diakses. Sebagai contoh, pencarian dan sindikasi mesin pencari pasti akan mengambil beberapa unsur seperti sistem crawl yang mencari halaman indeks.

Google dan Opera menganalisis jutaan halaman dan menemukan pengulangan nama“id” pada tag DIV Cascading Style Sheet (CSS). Sebagai contoh, para developer menggunakan <div id=”footer”> untuk mengindikasikan bahwa bagian ini adalah untuk footer.HTML5 menyediakan set elemen bagian baru yang dapat digunakan dalam browser modern sekarang. Berikut adalah tabel yang telah saya buat sebagai 6 pembagian elemen-elemen baru HTML5:

3.12          Tentang CSS

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.

Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan styl lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas.Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML.

CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen.  Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

4.      Penanganan Kesalahan Pada HTML5

Sebuah peramban web HTML5 (text/html) akan fleksiblel dalam menangani kesalahan sintaks. HTML5 telah didesain agar peramban web lama dapat dengan aman mengabaikan konstruksi HTML5 yang baru. Perbedaan mendasar dengan HTML 4.01 adalah spesifikasi HTML5 memberikan aturan detail untuk meleksikalkan dan memecah-mecah suatu rangkaian sebagai persyaratan agar berbagai peramban web tetap memberikan hasil yang sama saat terjadi kesalahan sintaks.Meskipun HTML5 telah memiliki perilaku konsisten untuk menangani dokumen-dokumen "Tag Soup", dokumen seperti ini tidak dapat dikatakan telah memenuhi standar HTML5.

"tag soup" mengacu pada pemformatan bahasa markah yang ditulis untuk halaman web yang sangat mirip sekali dengan HTML, tetapi tidak memiliki susunan sintaks HTML dan struktur dokumen yang benar. Karena peramban web menyimpan rekaman kesalahan sintaks dan struktur HTML secara moderat, maka para web developer ditekankan agar mengikuti standar spesifikasi W3C, oleh karena itu pula peramban web akan menerima dan memperbaiki halaman web yang terlihat seperti "tag soup" baik itu dari sisi kesalahan sintaks ataupun struktur.

5.      Html Media

5.1  Canvas HTML

<canvas> di HTML 5 adalah element yang digunakan untuk menggambar grafik, object di website yg umumnya melalui script javascript. <canvas> hanya merupakan wadah untuk menggambar, dan untuk menggambarnya anda harus menggunakan script, misal javascript. <canvas> memiliki beberapa metode untuk menggambar Garis, kotak, lingkaran, karakter, dan menambahkan gambar.

5.1.1        Membuat Canvas

·         Media canvas berbentuk persegi yang secara default memiliki border dan isi.

·         Menggambar canvas dengan javascript :

·         Koordinat Canvas

Kanvas adalah grid dua dimensi.

Sudut kiri atas kanvas memiliki koordinat (0,0)

Jadi, fillRect () metode di atas memiliki parameter (0,0,150,75).

Ini berarti: Mulai di pojok kiri atas (0,0) dan menggambar piksel persegi panjang 150×75.

itik origin koordinat canvas dimulai dari sudut kiri atas, dengan sumbu x ke kanan semakin besar, dan sumbu y ke bawah semakin besar pula.

·         Canvas – Path

Untuk menggambar garis lurus di atas kanvas, kita akan menggunakan dua metode berikut:

moveTo (x, y) mendefinisikan titik awal baris

lineto (x, y) mendefinisikan titik akhir baris
Untuk benar-benar menarik garis, kita harus menggunakan salah satu dari methtod tinta (ink), seperti stroke ().

Tentukan titik awal dalam posisi (0,0), dan titik akhir pada posisi (200.100). Kemudian gunakan stroke () metode untuk menarik garis:

contoh :

·         Menggambar lingkaran pada canvas

Menggambar lingkaran pada kanvas menggunakan method arc();

contoh :

·         Canvas – Text

Untuk menggambar teks pada kanvas, properti  dan metode yang paling penting adalah:

Font – mendefinisikan properti font untuk teks fillText (teks, x, y) – Mengisi teks pada kanvas strokeText (teks, x, y) - Meletakkan teks pada kanvas (tidak mengisi).

·         Canvas – Gradients

Gradien dapat digunakan untuk mengisi persegi panjang, lingkaran, garis, teks, dll Bentuk pada kanvas tidak terbatas pada warna solid.Ada dua jenis gradien:createLinearGradient (x, y, x1, y1) – Menciptakan gradien linier dan createRadialGradient (x, y, r, x1, y1, r1) Membuat gradien radial / melingkarSetelah kita memiliki objek gradien, kita harus menambahkan dua atau lebih warna.

Method addColorStop () digunakan untuk menentukan berhentinya warna, dan posisinya di sepanjang gradien. Posisi gradien dapat di mana saja antara 0 sampai dengan 1.Untuk menggunakan gradien, mengatur fillStyle atau strokeStyle properti untuk gradien, dan kemudian menggambar bentuk, seperti persegi panjang, teks, atau garis.

·         Canvas – Images

Untuk menggambar sebuah gambar pada kanvas, kami akan menggunakan metode berikut: drawImage (gambar, x, y)

Dengan adanya canvas sangat membantu dalam pembuatan game berbasis web.

5.2  HTML5 Video

HTML5 video dimaksudkan oleh penciptanya untuk menjadi cara standar baru untuk menampilkan video di web tanpa plugin, tetapi telah terhambat oleh kurangnya kesepakatan untuk yang format video harus didukung dalam browser web.

HTML5 merupakan sebuah standar untuk menstrukturkan dan menampilkan isi pada World Wide Web. Standar bahasa tersebut memperkenalkan fitur baru seperti memutar video serta drag and drop. Sebelumnya fitur tersebut bergantung pada plugins pihak ketiga di penjelajah web seperti Adobe Flash dan Microsoft Silverlight. Pada HTML5 jika ingin menyisipkan video, gunakan tag <video>.

Berikut contoh pengguna script tag vido pada HTML5:

<video width=”320″ height=”240″ controls=”controls”>

<source src=”movie.mp4″ type=”video/mp4″/>

<source src=”movie.oog” type=”movie/oog”/>

Pesan yang muncul jika browser tidak mendukung

</video>

Sampai saat ini, tidak pernah ada sebuah standar untuk menampilkan video pada halaman web.saat ini, video yang paling akan ditampilkan melalui plugin (seperti flash). Namun, tidak semua browser memiliki plugin yang sama. Maka HTML5 menetapkan cara standar untuk memasukkan video, dengan elemen video Format video

Saat ini, ada 3 format video yang didukung untuk elemen video:

Format	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

·         Ogg = Ogg file dengan codec video Theora dan Vorbis audio codec

·         MPEG4 = MPEG 4 file dengan codec H.264 video dan AAC audio codec

·         WebM = WebM file dengan VP8 codec video dan audio codec Vorbis

Cara Bekerja

Untuk menampilkan video dalam HTML5, ini adalah semua yang Anda butuhkan:

<video src=”movie.ogg” controls=”controls”>

</video>

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume.

Hal ini juga selalu ide yang baik untuk menyertakan atribut lebar dan tinggi.

Sisipkan konten antara <video> dan </ video> tag untuk browser yang tidak mendukung elemen video:

<html>

<body>

<video src=”movie.ogg”  width=”320″ height=”240″ controls=”controls”>

Your browser does not support the video tag.

/video>

</body>

</html>

Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome.Untuk membuat karya video di Internet Explorer, Safari dan Chrome versi masa depan, kita harus menambahkan MPEG4 dan file WebM.

Elemen elemen video memungkinkan beberapa sumber. Sumber elemen dapat link ke file video yang berbeda. Browser akan menggunakan format diakui pertama:

<html>

<body>

<video width=”320″ height=”240″ controls=”controls”>

<source src=”movie.ogg” type=”video/ogg” />

<source src=”movie.mp4″ type=”video/mp4″ />

<source src=”movie.webm” type=”video/webm” />

Your browser does not support the video tag.

</video>

</body>

</html>

<video>

Semua Atribut

Attribute	Value	Description
Audio	muted	Defining the default state of the the audio. Currently, only “muted” is allowed
Autoplay	autoplay	If present, then the video will start playing as soon as it is ready
Controls	controls	If present, controls will be displayed, such as a play button
Height	pixels	Sets the height of the video player
Loop	loop	If present, the video will start over again, every time it is finished
Poster	url	Specifies the URL of an image representing the video
Preload	preload	If present, the video will be loaded at page load, and ready to run. Ignored if “autoplay” is present
Src	url	The URL of the video to play
Width	pixels	Sets the width of the video player

  

5.3  HTML5 Audio

HTML5 menyediakan standar untuk memutar Audio di Web. Sampai saat ini, tidak pernah ada standar untuk memainkan audio di sebuah halaman web. Saat ini, sebagian besar audio diputar melalui sebuah plugin (seperti flash). Namun, tidak semua browser memiliki plugin yang sama.HTML5 menetapkan cara standar untuk memasukkan audio, dengan unsur audio.Unsur audio bisa memutar file suara, atau stream audio.

Saat ini, terdapat 3 format yang didukung untuk unsur audio:

Format	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis	No	Yes	Yes	Yes	No
MP3	Yes	No	No	Yes	Yes
Wav	No	Yes	Yes	No	Yes

Cara Bekerja

Untuk memutar file audio di HTML5, ini adalah semua yang Anda butuhkan:

<audio src=”song.ogg” controls=”controls”>

</audio>

Atribut kontrol untuk menambahkan play, pause, dan kontrol volume.

Sisipkan konten antara <audio> dan </ audio> tag untuk browser yang tidak mendukung elemen audio:

<html>

<body>

<audio src=”song.ogg” controls=”controls”>

Your browser does not support the audio element.

</audio>

</body>

</html>

Contoh di atas menggunakan file ogg, dan akan bekerja di Firefox, Opera dan Chrome.Untuk membuat karya audio di Internet Explorer dan Safari, menambahkan file audio jenis MP3.Elemen elemen audio memungkinkan beberapa sumber. Sumber elemen dapat link ke file audio yang berbeda. Browser akan menggunakan format diakui pertama:

<html>

<body>

<audio controls=”controls”>

<source src=”song.ogg” type=”audio/ogg” />

<source src=”song.mp3″ type=”audio/mpeg” />

Your browser does not support the audio element.

</audio>

</body>

</html>

<audio>

Semua Atribut

Attribute	Value	Description
Autoplay	autoplay	Specifies that the audio will start playing as soon as it is ready.
Controls	controls	Specifies that controls will be displayed, such as a play button.
Loop	loop	Specifies that the audio will start playing again (looping) when it reaches the end
Preload	preload	Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.
Src	url	Specifies the URL of the audio to play

6.      Microdata HTM5

Microdata adalah spesifikasi HTML WHATWG digunakan untuk metadata sarang dalam konten yang ada pada halaman web. Search engine, web crawler, dan browser dapat mengekstrak dan memproses Microdata dari halaman web dan menggunakannya untuk memberikan pengalaman browsing yang lebih kaya bagi pengguna. Search engine sangat merasakan manfaat dari akses langsung ke data ini terstruktur karena memungkinkan mesin pencari untuk memahami informasi pada halaman web dan memberikan hasil yang lebih relevan bagi pengguna. Microdata menggunakan kosakata yang mendukung untuk menggambarkan item dan nama-nilai pasangan untuk memberikan nilai pada sifat-sifatnya. Microdata merupakan upaya untuk menyediakan cara sederhana annotating elemen HTML dengan tag dapat dibaca mesin daripada pendekatan serupa menggunakan RDFa dan Microformats.

6.1  Microdata vocabularies

Microdata kosakata menyediakan semantik, atau makna dari Item. Web developer dapat merancang kosakata kustom atau menggunakan kosakata yang tersedia di web. Sebuah koleksi yang umum digunakan kosakata markup disediakan oleh skema Schema.org yang meliputi: Orang, Event, Organisasi, Produk, Review, Review-agregat, Breadcrumb, Penawaran, Penawaran-agregat. Operator mesin pencari besar seperti Google, Microsoft dan Yahoo! mengandalkan markup ini untuk meningkatkan hasil pencarian. Untuk beberapa tujuan, kosakata yang ad-hoc memadai. Bagi yang lain, kosakata akan perlu dirancang. Bila memungkinkan, penulis didorong untuk kembali menggunakan kosakata yang ada, karena hal ini membuat konten lebih mudah digunakan kembali.

6.2  Microdata Glogal Attributes

§  Itemscope - Membuat Item dan menunjukkan bahwa keturunan elemen ini berisi informasi tentang hal itu.

§  Itemtype - Sebuah URL yang valid dari sebuah kosa kata yang menjelaskan barang dan sifat konteksnya.

§  Itemid - Menunjukkan pengenal unik item.

§  Itemprop - Menunjukkan bahwa tag mengandung yang memegang nilai properti item tertentu. Sifat nama dan konteks nilai dijelaskan oleh kosakata. Nilai properti biasanya terdiri dari nilai string, tetapi juga dapat menggunakan URL menggunakan elemen dan atribut href nya, elemen img dan atribut src-nya, atau elemen lain yang link ke atau menanamkan sumber daya eksternal.

§  Itemref - Properti yang tidak keturunan elemen dengan atribut itemscope dapat dikaitkan dengan item menggunakan atribut ini. Menyediakan daftar id elemen (tidak itemids) dengan sifat tambahan di tempat lain dalam dokumen.

......................................................................................................................................................

Break -Materi In The Link

......................................................................................................................................................

BAB III

PENUTUP

A.    Kesimpulan

HTML lebih dikenal sebagai standar bahasa untuk membuat dokumen web. Sesungguhnya Hypertext Markup Language (HTML versi 5) justru tidak dibuat untuk mempublikasikan informasi di web, namun oleh karena kesederhanaan serta kemudahan penggunaanya, HTML kemudian dipilih orang untuk mendistribusikan informasi di web.

File HTML sebenarnya adalah file teks biasa yang selain berisi informasi yang hendak ditampilkan kepada pengguna, juga mempunyai perintah-perintah untuk mengatur tampilan data tersebut. Browserlah yang memiliki kuasa penuh dalam menterjemahkan perintah-perintah yang ada dalam struktur file berbasis program HTML.

Perkembangan dunia informatika yang semakin canggih pada saat ini menawarkan kemudahan bagi setiap orang dalam membantu menyelesaikan segala kebutuhan dan pekerjaannya. Internet sebagai salah satu bukti nyata dengan adanya perkembangan ini. Maka dari itu, para programmer berusaha untuk merancang beberapa pemrograman di internet. HTML5 adalah salah satu unsur penting dalm pemrograman di internet. Di dalam HTML5 terdapat terdapat komponen-komponen dokumen HTML5 dan elemen-elemen dasar HTML5.

Untuk itu, bagi para programmer, khususnya pemula yang ingin membuatHTML5 yang baik, sebaiknya sebelum membuat HTML5 harus mengetahui definisi,strukntur dasar, komponen-komponen HTML5 dan elemen-elemen dasarnya. Danseperti yang telah disampaikan sebelumnya, selain itu ia juga harus menguasailangkah-langkah membuat HTML5 beserta tampilannya yang menarik yang akandiberikan kepada pengguna nantinya. Semoga makalah yang telah disusun inidapat menjadi pedoman bagi pemula sebelum membuat HTML5.

DAFTAR PUSTAKA

Syamsiyah, Siti. 2009. Mengenal Pemrograman HTML. Yogyakarta: Bina Sarana Informatika.

Roghib, Muhammad. 2013. Tentang CSS dan HTML. http://cssdanhtm.blogspot.com/2013/04/makalah-tentang-css-dan-html.html. 20-10-2013

Fluider. 2013. Membuat Game Ular Sederhana Menggunakan HTML5. http://blogs.mervpolis.com/roller/fluiderid/entry/membuat_game_sederhana_menggunakan_html5. 20-10-2013

Kurniawan, Edi. 2013. Sejarah dan Pengertian HTML5. http://ti-cenatcenut.blogspot.com/2013/01/sejarah-dan-pengertian-html5.html. 20-10-2013.

Ekawati, Amelia. 2013. Makalah WEB HTML. http://sismartamelia.wordpress.com/2013/04/18/makalah-html/. 18-20-2013.

Wikipedia. 2013. HTML5. http://id.wikipedia.org/wiki/Html5. 18-20-2013.

Haqqi, Muhammad Fauzil. 2011. Menggunakan canvas pada HTML5. http://blog.haqqi.net/2011/04/menggunakan-canvas-pada-html5/. 18-10-2013.       

P, Adhi. 2012. Belajar Element Video HTML5. http://prothelon.com/belajar/belajar-html5/belajar-elemen-video-html5. 18-10-2013.

P, Adhi. 2012. Belajar HTML5 Audio. http://prothelon.com/belajar/belajar-html5/belajar-html5-audio. 18-10-2013.

Untuk mempelajari tentang HTML secara lengkap, makalah lengkapnya versi PDF bisa langsung download disini. atau datap juga mendapatkan ringkasan power pointnya Download Disini