LOLA html5 PDF

MAKALAH HTML5 Ditujukan untuk memenuhi tugas mata kuliah Teknologi Informasi Komunikasi Dosen pengampu: Septia Lutfi
Disusun Oleh : Lola Muntri Oktafiyani NIM. 1102412082
KURIKULUM DAN TEKNOLOGI PENDIDIKAN FAKULTAS ILMU PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013
KATA PENGANTAR
Puji dan Syukur Penulis Panjatkan ke Hadirat Tuhan Yang Maha Esa karena berkat limpahan Rahmat dan Karunia-Nya sehingga penulis dapat menyusun makalah ini tepat pada waktunya. Makalah ini membahas tentang seluk beluk HTML5.
Dalam penyusunan makalah ini, penulis banyak mendapat tantangan dan hambatan akan tetapi dengan bantuan dari berbagai pihak tantangan itu bisa teratasi. Olehnya itu, penulis mengucapkan terima kasih yang sebesar-besarnya kepada semua pihak yang telah membantu dalam penyusunan makalah ini, semoga bantuannya mendapat balasan yang setimpal dari Tuhan Yang Maha Esa.
Penulis menyadari bahwa makalah ini masih jauh dari kesempurnaan baik dari bentuk penyusunan maupun materinya. Kritik konstruktif dari pembaca sangat penulis harapkan untuk penyempurnaan makalah selanjutnya.
Akhir kata semoga makalah ini dapat memberikan manfaat kepada kita sekalian.
DAFTAR ISI
KATA PENGANTAR DAFTAR ISI BAB I PENDAHULUAN A. Latar Belakang B. Rumusan Masalah C. Tujuan Penulisan D. Kegunaan Penulisan E. Metode Pengumpulan Data BAB II PEMBAHASAN A. Pengenalan HTML dan HTML5 B. Sejarah HTML dan HTML 5 C. Perkembangan HTML 5 D. Fitur fitur dalam HTML5 E. Kelebihan dan Kekurangan HTML 5 F. Fungsi microdata pada HTML5 G. Perbedaan HTML4 dengan HTML5 H. Tag-tag dalam HTML I. Kegunaan HTML5 J. Markah atau tanda dalam HTML5 K. Dasar kode HTML L. Penggunaaan HTML5 BAB III PENUTUP A. Kesimpulan DAFTAR PUSTAKA BAB I
PENDAHULUAN A. LATAR BELAKANG HTML 5 adalah generasi baru dari HTML, yang dirancang untuk memperbaiki teknologi HTML versi sebelumnya agar dapat mendukung teknologi multimedia terbaru dan tipe isi halaman web (content) lainnya agar mudah di jalanka oleh browser. HTML 5 merupakan hasil kerja sama antara World Wide Web Consortium (W3C, http://www.w3.org/) & WHATWG (Web HypertextApplication Teknologi Working Group ). Di HTML 5 struktur tipe dokumen pun lebih sederhana dengan menggunakan <!DOCTYPE html>,ketimbang di versi sebelumnya tipe dokumen yang digunakan cukup panjang. HTML 5 pun menyediakan elemen-elemen atau tag baru yang tidak tersedia di HTML versi sebelumnya.
B. RUMUSAN MASALAH Rumusan masalah yang dibahas pada makalah ini adalah : a. Apa itu HTML dan HTML5? b. Bagaimana sejarah awal mulanya tercipta HTML dan HTML5? c. Bagaimanakah perkembangan HTML dan HTML5? d. Apa saja fitur fitur yang terdapat dalam HTML5? e. Apa keunggulan dan kelemahan dari HTML5 secara umum? f. Apa Fungsi microdata pada HTML5? g. Apa Perbedaan HTML4 dengan HTML5? h. Apa saja Tag-tag dalam HTML? i. j. Apa Kegunaan HTML5? Apa Markah atau tanda dalam HTML5?
k. Apa Dasar kode HTML? l.

Bagaimana Penggunaaan HTML5?
C. TUJUAN PENULISAN
Adapun tujuan dari penulisan makalah ini antara lain : a. Untuk mengetahui apa itu HTML dan HTML5 b. Untuk mengetahui sejarah HTML dan HTML5 c. Untuk mengetahui perkembangan HTML5 d. Untuk mengetahui fitur fitur yang terdapat dalam HTML5 e. Untuk mengetahui keunggulan dan kelemahan HTML5 f. Untuk mengetahui penggunaan HTML 5 g. Untuk mengetahui Fungsi microdata pada HTML5? h. Untuk mengetahui Perbedaan HTML4 dengan HTML5? i. j. Untuk mengetahui saja Tag-tag dalam HTML? Untuk mengetahui Kegunaan HTML5?
k. Untuk mengetahui Markah atau tanda dalam HTML5? l.

Untuk mengetahui Dasar kode HTML?
m. Untuk mengetahui Penggunaaan HTML5?
D. KEGUNAAN PENULISAN Adapun kegunaan penulisan ini antara lain : a. Untuk mengetahui perkembangan HTML5 b. Untuk memenuhi tugas kuliah
E. METODE PENGUMPULAN DATA Dalam penulisan makalah ini, metode yang penulis gunakan adalah metode kepustakaan. Yaitu dimana penulis mencari referensi melalui internet yang berkaitan dengan pokok bahasan yang penulis kembangkan.
BAB II PEMBAHASAN A. Pengertian 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. HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang duntuk mengetahuit 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.
HTML 5 adalah versi terbaru dari HTML yang dibuat oleh World Wide Web Consortium (W3C). Konsep pertamanya sudah dipublikasikan pada tahun 2008, tetapi tidak banyak yang menggunakannya hingga tahun 2011. Pada tahun 2011, HTML 5 diterbitkan sepenuhnya dan orang-orang mulai menulis dan menggunakannya, namun peneruntuk mengetahuinnya pada masing-masing browser yang berbeda masih bisa dibilang buruk. Hari ini, seluruh browser utama (Chrome, Safari, Firefox, Opera, IE) duntuk mengetahuit mendukung HTML5, sehingga teknologi HTML terbaru duntuk mengetahuit digunakan dengan sebaik-baiknya. HTML 5 duntuk mengetahuit bekerja dengan CSS3 dan masih dalam tahap pengembangan. Sejak peluncurannya, HTML5 selalu mengalami pengembangan, W3C terus menambahkan dan mengembangkan fitur-fitur pada HTML5 dan berencana meluncurkan versi stable-nya di tahun 2014. HTML5 adalah suksesor dari HTML 4.01 yang diterbitkan pertama kali tahun 1999. Sejak saat itu, internet telah berubah secara signifikan dan kehadiran HTML5 terlihat sangat diharapkan. HTML5 dikembangkan berdasarkan standard yang sudah diatur sebelumnya :

Fitur-fitur baru harus berdasarkan HTML, CSS, DOM, dan JavaScript Kebutuhan akan plugin external (seperti Flash) harus dikurangi Penanganan error harus lebih mudah daripada versi sebelumnya Scripting harus diganti dengan lebih banyak markup HTML5 harus device-independent Proses pengembangan harus duntuk mengetahuit dilihat oleh publik
B. Sejarah awal munculnya 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.[2] Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0. [3]
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 untuk mengetahuipun di web."[4]
C. Perkembangan HTML 5 Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML. Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistemsistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML saat ini adalah HTML5. Sejarah dari standar HTML

HTML 2.0(RFC 1866) disetujui sebagai standar 22 September 1995, HTML 3.214 Januari 1996, HTML 4.018 Desember 1997, HTML 4.01 (minor fixes)24 Desember 1999, ISO/IEC 15445:2000 ("ISO HTML", berdasar pada HTML 4.01 Strict)15 HTML 5 masih dalam draft pengerjaanJanuari 2008.
Mei 2000.
D. Fitur-fitur dalam HTML 5 HTML5 dibuat untuk membuat proses coding menjadi lebih mudah dan logis. Fiturfitur unik dan mengesankan dari HTML5 datang di dalam departemen multimedia. Banyak dari fiturnya yang yang dibuat dengan pertimbangan bahwa pengguna harus duntuk mengetahuit menjalankan konten berat (heavy content) dalam device dengan tenaga rendah (low-powered device). Pada HTML5 terduntuk mengetahuit fitur elemen <video>,<audio> dan <canvas> , tetapi juga integrasi dari konten gambar grafis vektor (yang sebelumnya kita ketahui dengan tag <object>). Artinya, konten multimedia dan grafis dalam website akan duntuk mengetahuit ditangani dan dieksekusi dengan lebih mudah dan lebih cepat, tanpa membutuhkan plugin atau API tambahan. Ada banyak sekali syntax baru yang ditambahkan ke dalam HTML5, tetapi dibawah ini saya akan menyebutkan beberuntuk mengetahui syntax yang dirasa paling penting. Sisanya duntuk mengetahuit Anda lihat di HTML5 section W3C.
<article> tag ini mendefinisikan artikel, posting atau komentar dari <aside> tag aside pada HTML5 menandakan suatu konten yang terpisah <header>,<footer> Anda tidak perlu lagi mendefinisikan ID header atau <nav> navigasi pada website Anda duntuk mengetahuit ditaruh didalam tag
pengguna, atau suatu konten yang independen
(aside) dari konten sebuah halaman, seperti sebuah sidebar
footer, gunakan tag ini untuk menggantikannya
nav, yang duntuk mengetahuit secara otomatis membuat daftar Anda seperti sebuah navigasi
<section> - tag ini duntuk mengetahuit mendefinisikan section untuk
mengetahuipun dalam document Anda. Section bekerja kurang lebih seperti div yang memisahkan section yang berbeda
<audio>,<video> jelas sekali ini adalah tag penanda untuk konten suara dan
video, yang sekarang duntuk mengetahuit lebih mudah dijalankan dari berbagai device
<embed> tag baru ini berfungsi untuk menampilkan konten interaktif
(plugin) atau aplikasi eksternal
<canvas> canvas tag ini cukup menarik, memungkinkan Anda menggambar
menggunakan script kode seperti JavaScript.
E. Kelebihan dan kekurangan HTML Kelebihan yang dimiliki HTML antara lain HTML Versi 1.0
Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping). HTML Versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita duntuk mengetahuit memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif. HTML Versi 3.0
HTML versi 3.0 menambahkan beberuntuk mengetahui fasilitas baru seperti table. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2. HTML Versi 4.0
HTML versi 4 memuat banyak sekali perubahan dan revisi dari pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah HTML sepertitable, image, link, text, meta, imagemaps, form, dan lain- lain. HTML Versi

Dukungan yang lebih baik untuk penyimpanan secara offline Unsur kanvas untuk menggambar Video dan elemen audio untuk media pemutaran file multimedia Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav,
section
Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search
Duntuk mengetahuit ditulis dalam sintaks HTML (dengan tipe media
text/HTML) danXML.

Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya. Integrasi ('inline') dengan doctype yang lebih sederhana. Penulisan kode yang lebih efisien. Konten yang ada di situs lebih mudah terindeks oleh search engine. HTML5 merupakan perangkat mandiri Penanagan kesalahan yang lebih baik Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash ) Lebih markup untuk menggantikan scripting
Adapun kelebihan yang paling menonjol dari HTML 5 adalah kemudahan akses yang lebih baik. Tag Baru seperti header, footer, nav, section, asidedll memungkinkan browser untuk mengakses konten dengan mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class. Dengan tag html 5 yang baru, browser mampu menjelajah dokumen HTML dengan lebih baik lagi. Selain itu dukungan yang lebih baik terhadap video dan audio. Beberuntuk mengetahui Peramban yang sudah mendukung HTML 5 yaitu Safari, Chrome, Firefox, dan Opera.
Kelemahan yang ada pada HTML 5 Saat ini HTML5 masih dalam pengembangan, sehingga hanya beberuntuk mengetahui browser yang sudah mendukung HTML5, seperti fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberuntuk mengetahui browser. Beberuntuk mengetahui browser yang sudah mendukung HTML 5 seperti Safari, Chrome, Firefox, dan Opera. Namun kabarnya IE9 (Internet Explorer) akan mendukung beberuntuk mengetahui fitur dari HTML5. F. Fungsi microdata pada HTML5 Fungsi Microdata Untuk Blog Perlu ditegaskan, Microdata bukan untuk Optimasi atau Menaikkan Posisi Artikel atau Blog Anda di SERP, melainkan Microdata ini mempunyai Fungsi
untuk Merubah Tampilan Pada Hasil Pencarian, Yang Tentunya Akan Mengundang Orang Untuk Mengklik Situs Anda. Fungsi Microdata Untuk Search Engine Penggunaan Microdata pada Blog Anda pun juga memberikan dampak pada Search Engine, yaitu memudahkan penempatan suatu artikel pada direktori mereka (google) tentunya pesan ini disampaikan oleh Google sendiri yang menganjurka kita untuk menggunakan Microdata (ketimbang Microformat atau RDFa).
G. Perbedaan HTML4 dengan HTML5

HTML singkatan dari Hyper Text Markup Language,dalam arti umum,sebuah web adalah sebuah dokumen HTML,yang mana sebuah HTML itu sendiri merupakan bahasa yang menggunakaan tanda-tanda tertentu (Tag) untuk menyatakan kode-kode yang harus diterjemahkan oleh Browser,agar halaman duntuk mengetahuit di tampilkan secara benar. HTML saat ini dikendalikan oleh W3C ( World Wide Web Consortium ). 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).
Sejarah HTML : 1. HTML 2.0 (RFC 1866) disetujui sebagai standar 22 09 1995, 2. HTML 3.2 14 Januari 1996, 3. HTML 4.0 18 Desember 1997, 4. HTML 4.01 (minor fixes) 24 Desember 1999, 5. ("ISO HTML", berdasar pada HTML 4.01 Strict) 15 Mei 2000. 6. HTML 5 masih dalam draft pengerjaan Januari 2008 hingga sekarang.
HTML4
HTML5
Penulisan syntax DOCTYPE lebih panjang dan rumit Menggunakan Flash pada aplikasi audio dan video Penggunaan Browse Cache untuk penyimpanan sementara
Cukup dengan <!DOCTYPE HTML>
Terduntuk mengetahuit tag video, audio dan canvas Memiliki Data Storage untuk penyimpanan yang berkuntuk mengetahuisitas lebih besar Modern / telah memiliki support yang selalu UPDATE pada browsernya. Duntuk mengetahuit memperlancar tugas secara sekaligus.
Kuno / masih menggunakan Browser yang out of date JavaScript browser memperlambat kinerja komputer PERBEDAAN HTML4 dan HTML5 : Contoh Doctype : HTML4 / XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd"> HTML5 <!DOCTYPE HTML>
H. Tag-tag dalam HTML Berikut adalah beberuntuk mengetahui tag dari HTML 4.01 yang sudah dihapuskan dari HTML5, browser sudah tidak lagi men-support penggunaan tag ini. Anda mungkin ingin melihat lagi halaman HTML website Anda dan lihat untuk mengetahuikah hal ini mengacaukan design Anda pada browser terbaru atau tidak.

<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset>
<noframes> <strike> <tt>
Referensi Tag HTML5

HTML5 meningkatkan interoperabilitas dan mengurangi biaya pengembangan dengan membuat aturan yang tepat tentang bagaimana menangani semua elemen HTML, dan bagaimana memulihkan dari kesalahan. Beberuntuk mengetahui fitur baru dalam HTML5 adalah fungsi untuk embedding audio, video, dokumen grafis, penyimpanan data sisi klien , dan interaktif. HTML5 juga mengandung unsur-unsur baru seperti <nav>, <header>, <footer>, dan <figure>. Kelompok kerja HTML5 termasuk AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia, Opera, dan ratusan vendor lain
Label <- -!> <DOCTYPE!> <a> <abbr> <acronym> <address> <applet> <area> <article> Baru <aside> Baru <audio> Baru <b> <base> Deskripsi Mendefinisikan komentar Mendefinisikan jenis dokumen Mendefinisikan hyperlink Mendefinisikan sebuah singkatan Tidak didukung di HTML5 Mendefinisikan informasi kontak untuk penulis / pemilik dokumen / artikel Tidak didukung di HTML5 Mendefinisikan daerah dalam peta gambarMendefinisikan sebuah artikel Mendefinisikan konten selain dari konten halaman Mendefinisikan isi suara Mendefinisikan teks tebal Menentukan URL dasar / target untuk semua URL relatif dalam dokumen
<basefont> <bdi> Baru <bdo> <big> <blockquote> <body> <br> <button> <canvas> Baru <caption> <center> <cite> <code> <col>
Tidak didukung di HTML5 Mengisolasi bagian dari teks yang duntuk mengetahuit diformat dalam arah yang berbeda dari teks lain di luar itu Menimpa arah teks saat Tidak didukung di HTML5 Mendefinisikan bagian yang dikutip dari sumber lain Mendefinisikan tubuh dokumen Mendefinisikan ganti baris Mendefinisikan sebuah tombol untuk diklik Digunakan untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya) Mendefinisikan sebuah judul tabel Tidak didukung di HTML5 Mendefinisikan judul karya Mendefinisikan sepotong kode komputer Menentukan sifat kolom untuk setiap kolom dalam elemen <colgroup> Menentukan sekelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat Mendefinisikan tombol perintah bahwa seorang pengguna duntuk mengetahuit memanggil Menentukan daftar yang telah ditentukan pilihan untuk kontrol input Mendefinisikan deskripsi dari item dalam daftar definisi Mendefinisikan teks yang telah dihapus dari dokumen Mendefinisikan rincian tambahan bahwa pengguna duntuk mengetahuit melihat atau menyembunyikan
<colgroup>
<command> Baru
<datalist> Baru <dd> <del> <details> Baru
<dfn> <dir> <div> <dl> <dt> <em> Baru <fieldset> <figcaption> Baru <figure> Baru <font> <footer> Baru <form> <frame> <frameset> <h1> ke <h6> <head> <header> Baru <hgroup> Baru <hr> <html> <i> <iframe>
Mendefinisikan sebuah istilah definisi Tidak didukung di HTML5 Mendefinisikan bagian dalam dokumen Mendefinisikan sebuah daftar definisi Mendefinisikan sebuah istilah (item) dalam daftar definisi Mendefinisikan teks menekankan Mendefinisikan sebuah wadah untuk aplikasi eksternal (nonHTML). Grup terkait unsur-unsur dalam bentuk Mendefinisikan sebuah caption untuk elemen <figure> Menentukan mandiri konten Tidak didukung di HTML5 Mendefinisikan sebuah footer untuk dokumen atau bagian Mendefinisikan sebuah form HTML untuk input pengguna Tidak didukung di HTML5 Tidak didukung di HTML5 Mendefinisikan judul HTML Mendefinisikan informasi tentang dokumen Mendefinisikan sebuah header untuk dokumen atau bagian Grup pos (<h1> untuk <h6>) elemen Mendefinisikan perubahan tematik dalam konten Mendefinisikan akar dari sebuah dokumen HTML Mendefinisikan sebuah bagian dari teks dengan suara alternatif atau mood Mendefinisikan frame inline
<img> <input> <ins> <keygen> Baru <kbd> <label> <legend> <li> <link> <map> <mark> Baru <menu> <meta> <meter> Baru <nav> Baru <noframes> <noscript> <object> <ol> <optgroup> <option>
Mendefinisikan gambar Mendefinisikan kontrol input Mendefinisikan teks yang telah dimasukkan ke dalam dokumen Mendefinisikan sebuah bidang kunci-pair generator (untuk formulir) Mendefinisikan input keyboard Mendefinisikan label untuk sebuah elemen input Mendefinisikan sebuah caption untuk sebuah <fieldset>, <figure>, atau elemen <details> Mendefinisikan sebuah item daftar Mendefinisikan hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet) Mendefinisikan sebuah client-side image-peta Mendefinisikan teks yang ditandai / disorot Mendefinisikan daftar / menu perintah Mendefinisikan metadata tentang dokumen HTML Mendefinisikan pengukuran skalar dalam kisaran dikenal (alat ukur) Mendefinisikan navigasi Link Tidak didukung di HTML5 Mendefinisikan sebuah konten alternatif bagi pengguna yang tidak mendukung client-side script Mendefinisikan sebuah objek tertanam Mendefinisikan ordered list Mendefinisikan sebuah kelompok pilihan yang terkait dalam daftar drop-down Mendefinisikan pilihan dalam daftar drop-down
<output> Baru <p> <param> <pre> <progress> Baru <q> <rp> Baru
Mendefinisikan hasil penghitungan Mendefinisikan paragraf Mendefinisikan sebuah parameter untuk objek Mendefinisikan teks terformat Merupakan kemajuan tugas Mendefinisikan kutipan pendek Mendefinisikan untuk mengetahui yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby Mendefinisikan penjelasan / pengucuntuk mengetahuin karakter (tipografi untuk Asia Timur) Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur) Mendefinisikan teks yang tidak lagi benar Mendefinisikan contoh keluaran dari program komputer Mendefinisikan script sisi klien Mendefinisikan bagian dalam dokumen Mendefinisikan sebuah daftar drop-down Mendefinisikan teks kecil Mendefinisikan beberuntuk mengetahui sumber daya media untuk elemen media (<video> dan <audio>) Mendefinisikan bagian dalam dokumen Tidak didukung di HTML5 Mendefinisikan teks penting Mendefinisikan informasi style untuk dokumen Mendefinisikan teks subscript Mendefinisikan sebuah judul terlihat untuk elemen <details>
<rt> Baru
<ruby> Baru <S> <samp> <script> <section> Baru <select> <small> <source> Baru <span> <strike> <strong> <style> <sub> <summary> Baru
<sup> <table> <tbody> <td> <textarea> <tfoot> <th> <thead> <time> Baru <title> <tr> <track> Baru <tt> <u> <ul> <var> <video> Baru <wbr> Baru
Mendefinisikan teks superscripted Mendefinisikan tabel Grup isi tubuh dalam tabel Mendefinisikan sebuah sel dalam tabel Mendefinisikan sebuah kontrol input multiline (area teks) Grup isi footer dalam sebuah tabel Mendefinisikan sebuah sel header dalam tabel Grup isi header dalam sebuah tabel Mendefinisikan tanggal / waktu Mendefinisikan judul untuk dokumen Mendefinisikan baris dalam sebuah tabel Mendefinisikan trek teks untuk elemen media (<video> dan <audio>) Tidak didukung di HTML5 Mendefinisikan teks yang harus Gaya yang berbeda dari teks biasa Mendefinisikan daftar unordered Mendefinisikan variabel Mendefinisikan sebuah video atau film Mendefinisikan kemungkinan line-break
I. Kegunaan HTML Mengintegerasikan gambar dengan tulisan. Membuat Pranala. Mengintegerasikan berkas suara dan rekaman gambar hidup. Membuat form interaktif.
J. Markah atau tanda dalam HTML5 Secara garis besar, terduntuk mengetahuit 4 jenis elemen dari HTML:
Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, < h1> Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1
Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, < b> boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, < a href="http://www.wikipedia.org/">
Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),
Elemen widget yang membuat objek-objek lain seperti tombol (< button>), list (< li>), dan garis horizontal (< hr>). Konsep hypertext pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web, Ada tiga macam pranala (link) yang duntuk mengetahuit digunakan:
Pranala menuju bagian lain dari page. Pranala menuju page lain dalam satu web site. Pranala menuju resource atau web site yang berbeda.[4] Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets. Contoh dokumen HTML sederhana <!DOCTYPE html> <html> <head bgcolor=black text=white> <title>'''Selamat Datang''' HTML</title>
</head> <body> <p>Halo dunia!</p> </body> </html>
Head Dokumen HTML diapit oleh tag < HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan title sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya digunakan untuk menentukan informasi tertentu mengenai document HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META. Contoh: <meta name="author" content="ubuntu-online"> Elemen Body Bagian BODY, yang dinyatakan dengan tag < BODY></BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser. Tag HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>). Tag biasanya merupakan suatu pasangan yang disebut dengan:
Tag awal, dinyatakan dalam bentuk <nama tag> Tag akhir, dinyatakan dalam bentuk </nama tag> Formatnya: <nama tag> teks yang ditampilkan </nama tag>. Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML < i>Teks ini terlihat miring di browser Anda</i> Atribut Tag awal bisa memiliki beberuntuk mengetahui buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <P ALIGN=left> digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.
K. Dasar kode HTML Berikut ini ada beebruntuk mengetahui contoh dasar kode HTML Contoh Membuat Link Kodenya: <a href=http://www.pustakasekolah.com/ target=_blank>Pustaka Sekolah<a/> Penampakannya Pustaka sekolah Contoh Link Dengan gambar Kodenya: </a><a html.html href=http://www.pustakasekolah.com/pengertian-dan-contoh-kodetarget=_blank><img alt=Kode HTML
src=http://www.pustakasekolah.com/wp-content/uploads/2012/06/Pengertian-danContoh-Kode-HTML.jpeg border=0 height=250 width=350 /></a> Penampakannya:
Membuat Orientasi rata Kiri Kodenya: <left>Rata Kiri</left> Penampakannya Rata Kiri Membuat Orientasi rata kanan K0denya: <right>Rata Kanan</right> Penampakannya:
Rata kanan Membuat Orientasi Rata tengah Kodenya: <center>Rata Tengah</center> Penampakannya: Rata Tengah
Membuat Huruf tebal, Miring dan bergaris bawah Kodenya: <b>Hurup Tebal, Miring Dan bergaris Bawah Huruf tebal</b> Penampakannya: Huruf Tebal, Miring dan bergaris bawah Membuat Huruf Miring Kodenya: <i>Huruf Miring</i> Penampakannya Huruf Miring Membuat Huruf bergaris Tengah Kodenya: <del>Huruf Bergaris Tengah</del> penampakannya:
Huruf Bergaris tengah Membuat Huruf Bergaris Bawah Kodenya: <u>Huruf Bergaris bawah</u> Penampakannya: Huruf Bergaris bawah Memberi warna Teks Kodenya: <span style=color: rgb(172, 88, 250);> Warna Teks</span> Penampakannya: Warna Teks Membuat Backround warna pada teks Kodenya: <div style=background: rgb(129, 190, 247) none repeat scroll 0% 0%; -mozbackground-clip: border; -moz-background-origin: padding; -moz-background-inlinepolicy: continuous;>Backround Warna Teks</div>
Penampakannya: Backround Warna Teks L. Penggunaaan HTML5
gambar dengan canvas html5 Contoh menampilkan objek ini akan terlihat seperti gambar berikut jika browser anda mendukung HTML5
dan susunan perintah html5 sebagai berikut :

<!DOCTYPE HTML> <html> <head> <style> #myCanvas { border: 1px solid #9C9898; } </style> <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var centerX = canvas.width / 2; var centerY = canvas.height / 2; var radius = 70; context.beginPath(); context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); context.fillStyle = "#8ED6FF"; context.fill(); context.lineWidth = 5; context.strokeStyle = "black";
context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html>
Bisa juga dengan bentuk seperti gambar berikut :
dengan kode html5 sebagai berikut :

<!DOCTYPE HTML> <html> <head> <style> #myCanvas { border: 1px solid #9C9898; } </style> <script> window.onload = function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.beginPath(); context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath(); // add linear gradient var grd = context.createLinearGradient(230, 0, 370, 200); // light blue grd.addColorStop(0, "#8ED6FF"); // dark blue grd.addColorStop(1, "#004CB3"); context.fillStyle = grd; context.fill(); // add stroke context.lineWidth = 5; context.strokeStyle = "blue"; context.stroke(); }; </script> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> </body> </html>
Cukup
mudah
kan???
Kalo
mau
contoh
lengkapnya
bisa
dilihat
di
http://www.html5canvastutorials.com/ Menampilkan video dengan html5 Sama dengan canvas, jika browser anda tidak mendukung maka video tidak bisa ditampilkan. Browser anda tidak mendukung Berikut perintah html5 untuk menampilkan video
<!DOCTYPE HTML> <html> <head> </head> <body> <h2>Contoh video dalam html5</h2> <video src="/uploads/video/html5-video.ogg" controls="true"> Browser </video> </body> </html> anda tidak mendukung <a href="/uploads/video/html5video.ogg">dowload video disini.</a>
BAB III PENUTUP A. KESIMPULAN Berdasarkan uraian tersebut dapat disimpulkan bahwa 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. HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang duntuk mengetahuit 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. HTML 5 adalah versi terbaru dari HTML yang dibuat oleh World Wide Web Consortium (W3C). Konsep pertamanya sudah dipublikasikan pada tahun 2008, tetapi tidak banyak yang menggunakannya hingga tahun 2011. Pada tahun 2011, HTML 5 diterbitkan sepenuhnya dan orang-orang mulai menulis dan menggunakannya, namun peneruntuk mengetahuinnya pada masing-masing browser yang berbeda masih bisa dibilang buruk. Hari ini, seluruh browser utama (Chrome, Safari, Firefox, Opera, IE) duntuk mengetahuit mendukung HTML5, sehingga teknologi HTML terbaru duntuk mengetahuit digunakan dengan sebaik-baiknya. HTML 5 duntuk mengetahuit bekerja dengan CSS3 dan masih dalam tahap pengembangan. Sejak peluncurannya, HTML5 selalu mengalami pengembangan,
W3C terus menambahkan dan mengembangkan fitur-fitur pada HTML5 dan berencana meluncurkan versi stable-nya di tahun 2014.
DAFTAR PUSTAKA http://ahmadusandifadillah.ilearning.me/2013/09/04/perkembangan-sejarah-htmlkekurangan-dan-kelebihan-masing-masing-versi/ http://cute-periidola.blogspot.com/2013/10/kelebihan-dan-kekurangan-html-5.html http://kursuswebplus.wordpress.com/2012/09/15/172/ http://id.wikipedia.org/wiki/HTML http://www.mattjunior.com/2013/05/pengenalan-html-5-apa-itu-html-5-dan-apa-fitur-yangbaru-di-html-5/ http://www.zainalhakim.web.id/posting/contoh-penggunaan-html5.html http://www.pustakasekolah.com/pengertian-dan-contoh-kode-html.html http://desain-pemrograman-web.blogspot.com/2011/12/belajar-html5-dasar-pengenalan-tagtag.html http://berguruseo.blogspot.com/2013/08/pengertian-cara-fungsi-microdata-html5.html http://www.zainalhakim.web.id/posting/contoh-penggunaan-html5.html

LOLA html5 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

LOLA html5 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

MAKALAH HTML5 Ditujukan untuk memenuhi tugas mata kuliah Teknologi Informasi Komunikasi Dosen pengampu: Septia Lutfi

Disusun Oleh : Lola Muntri Oktafiyani NIM. 1102412082

k. Apa Dasar kode HTML? l.

k. Untuk mengetahui Markah atau tanda dalam HTML5? l.

m. Untuk mengetahui Penggunaaan HTML5?

pengguna, atau suatu konten yang independen

(aside) dari konten sebuah halaman, seperti sebuah sidebar

footer, gunakan tag ini untuk menggantikannya

<section> - tag ini duntuk mengetahuit mendefinisikan section untuk

<embed> tag baru ini berfungsi untuk menampilkan konten interaktif

(plugin) atau aplikasi eksternal

<canvas> canvas tag ini cukup menarik, memungkinkan Anda menggambar

menggunakan script kode seperti JavaScript.

Duntuk mengetahuit ditulis dalam sintaks HTML (dengan tipe media

G. Perbedaan HTML4 dengan HTML5

Cukup dengan <!DOCTYPE HTML>

<acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset>

<noframes> <strike> <tt>

Referensi Tag HTML5

<datalist> Baru <dd> <del> <details> Baru

Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),

</head> <body> <p>Halo dunia!</p> </body> </html>

src=http://www.pustakasekolah.com/wp-content/uploads/2012/06/Pengertian-danContoh-Kode-HTML.jpeg border=0 height=250 width=350 /></a> Penampakannya:

Penampakannya: Backround Warna Teks L. Penggunaaan HTML5

dan susunan perintah html5 sebagai berikut :

Bisa juga dengan bentuk seperti gambar berikut :

dengan kode html5 sebagai berikut :

Anda mungkin juga menyukai