Penerapan HTML (Part 15)

 I.Latar Belakang. 

Latar belakang kali ini kita masih mengenal sintag tentang HTML apa saja yang di butuhkan untuk membuat web dasar

II.Alat dan Bahan.   Laptop / PC
    W3SCHOOLS
    Sublime text

III.Tujuan. untuk mengetahui langkah dasar untuk membuat web yang sederhana.

IV.Penjelasan.
HTML5 Pendahuluan

Apa yang Baru di HTML5?
Deklarasi DOCTYPE untuk HTML5 sangat sederhana:
<! DOCTYPE html>

Karakter pengkodean (charset) deklarasi juga sangat sederhana:
<Meta charset = "UTF-8">

HTML5 Elemen
Yang paling menarik elemen HTML5 baru
elemen semantik baru seperti <header>, <footer>, <article>, dan <section>.
atribut baru dari unsur bentuk seperti nomor, tanggal, waktu, kalender, dan jangkauan.
unsur-unsur baru grafis: <svg> dan <canvas>.
unsur-unsur baru multimedia: <audio yang> dan <video>.
Dalam bab berikutnya, HTML5 Support, Anda akan belajar bagaimana untuk "mengajarkan" browser lama untuk menangani "tidak diketahui" (baru) elemen HTML.

New HTML5 API (Application Programming Interfaces)
Yang paling menarik baru API di HTML5 adalah:

•     Geolocation HTML
•     Drag HTML dan Drop
•     HTML Penyimpanan Lokal
•     HTML Aplikasi Cache
•     Pekerja Web HTML
•     HTML SSE

Elemen dihapus di HTML5
Berikut unsur-unsur HTML4 telah dihapus di HTML5:

Sejarah HTML

Sejak hari-hari awal dari World Wide Web, ada banyak versi HTML:

Dari tahun 1991 hingga 1999, HTML dikembangkan dari versi 1 ke versi 4.

Pada tahun 2000, World Wide Web Consortium (W3C) direkomendasikan XHTML 1.0. Sintaks XHTML adalah ketat, dan pengembang dipaksa untuk menulis valid dan "well-formed" kode.

Pada tahun 2004, W3C memutuskan untuk menutup pengembangan HTML, mendukung XHTML.

Pada tahun 2004, WHATWG (Web Hypertext Application Technology Working Group) dibentuk. WHATWG ingin mengembangkan HTML, konsisten dengan bagaimana web itu digunakan, sementara kompatibel dengan versi HTML.

Pada 2004 - 2006, WHATWG mendapatkan dukungan oleh vendor browser utama.

Pada tahun 2006, W3C mengumumkan bahwa mereka akan mendukung WHATWG.

Pada tahun 2008, draft publik HTML5 pertama dirilis.

Pada 2012, WHATWG dan W3C memutuskan pemisahan:

WHATWG ingin mengembangkan HTML sebagai "Living Standard". Sebuah standar hidup selalu diperbarui dan diperbaiki. Fitur baru dapat ditambahkan, tapi fungsi tua tidak dapat dihapus.

WHATWG HTML5 Living Standard diterbitkan pada tahun 2012, dan terus diperbarui.

W3C ingin mengembangkan HTML5 definitif dan standar XHTML.
W3C HTML5 rekomendasi dirilis Oktober 2014 28.
W3C juga menerbitkan sebuah HTML 5.1 Calon Rekomendasi pada 21 Juni 2016.

HTML5 Dukungan Browser

HTML5 Dukungan Browser
HTML5 didukung di semua browser modern.

Selain itu, semua browser, lama dan baru, secara otomatis menangani elemen yang belum diakui sebagai elemen inline.

Karena ini, Anda dapat "mengajar" browser lama untuk menangani "tidak diketahui" elemen HTML.

Anda bahkan bisa mengajar IE6 (Windows XP 2001) bagaimana menangani elemen HTML tidak diketahui.

Mendefinisikan Elemen Semantic sebagai Blok Elements
HTML5 mendefinisikan delapan elemen semantik baru. Semua ini adalah elemen blok-tingkat.

Untuk mengamankan perilaku yang benar di browser lama, Anda dapat mengatur properti tampilan CSS untuk elemen HTML ini ke blok:
header, bagian, footer, samping, nav, utama, artikel, angka {
    display: block;
}

Add New Elemen untuk HTML
Anda juga dapat menambahkan elemen baru ke halaman HTML dengan trik browser.

JavaScript pernyataan document.createElement ( "myHero") diperlukan untuk membuat elemen baru di IE 9, dan sebelumnya.

Masalah Dengan Internet Explorer 8
Anda bisa menggunakan solusi yang dijelaskan di atas untuk semua elemen HTML5 baru.
Namun, IE8 (dan sebelumnya) tidak memungkinkan styling dari unsur yang tidak diketahui!
Untungnya, Sjoerd Visscher menciptakan HTML5Shiv! The HTML5Shiv adalah solusi JavaScript untuk mengaktifkan styling elemen HTML5 di versi Internet Explorer sebelum versi 9.
Anda akan memerlukan HTML5shiv untuk menyediakan kompatibilitas untuk IE Browser tua dari IE 9.

Sintaks Untuk HTML5Shiv
HTML5Shiv ditempatkan dalam <head> tag.
HTML5Shiv adalah file javascript yang dirujuk dalam <script> tag.
Anda harus menggunakan HTML5Shiv bila Anda menggunakan elemen HTML5 baru seperti: <article>, <section>, <aside>, <nav>, <footer>.
Anda dapat men-download versi terbaru dari HTML5shiv dari github atau referensi versi CDN di https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js

Sintaksis

<Head>
  <! - [If lt IE 9]>
    <Script src = "/ js / html5shiv.js"> </ script>
  <! [Endif] ->
</ Head>

HTML5Shiv Contoh
Jika Anda tidak ingin men-download dan menyimpan HTML5Shiv di situs Anda, Anda dapat referensi versi ditemukan di situs CDN.
HTML5Shiv Script harus ditempatkan dalam <head> elemen, setelah setiap stylesheet

Contoh :

Maka outputnya :

HTML5 New Elements

Elemen baru di HTML5

Di bawah ini adalah daftar elemen HTML5 baru, dan deskripsi dari apa yang mereka digunakan untuk.
New Semantic Elemen / Struktural

HTML5 menawarkan unsur-unsur baru untuk struktur dokumen yang lebih baik:

Form Baru Elemen

Jenis Masukan baru

HTML5 - Atribut New Sintaks

HTML5 memungkinkan empat sintaks yang berbeda untuk atribut.

HTML5 Graphics

New Media Elements

HTML5 Semantic Elements

Semantik adalah studi tentang makna kata-kata dan frase dalam bahasa.
unsur semantik = elemen dengan makna.

Apa Elements Semantic?
Unsur semantik jelas menggambarkan artinya untuk kedua browser dan pengembang.
Contoh elemen non-semantik: <div> dan <span> - Menceritakan apa-apa tentang isinya.
Contoh elemen semantik: <form>, <table>, dan <article> - Jelas mendefinisikan isinya.

HTML5 elemen semantik yang didukung di semua browser modern.
Selain itu, Anda dapat "mengajar" browser lama bagaimana menangani "unsur-unsur yang tidak diketahui".
Membacanya di HTML5 Browser Support.

Elemen Semantic baru di HTML5
Banyak situs web berisi kode HTML seperti: <div id = "nav"> <div class = "header"> <div id = "footer">
untuk menunjukkan navigasi, header, dan footer.

HTML5 menawarkan elemen semantik baru untuk menentukan bagian yang berbeda dari halaman web

•     <article>
•     <aside>
•     <details>
•     <figcaption>
•     <figure>
•     <footer>
•     <header>
•     <main>
•     <mark>
•     <nav>
•     <section>
•     <summary>
•     <time>

 HTML5 <section> Elemen

<section> elemen mendefinisikan bagian dalam sebuah dokumen.
 Menurut W3C dokumentasi HTML5: "Bagian adalah pengelompokan tematik konten, biasanya dengan judul."
Sebuah halaman rumah bisa biasanya dibagi menjadi beberapa bagian untuk pengenalan, konten, dan informasi kontak.

HTML5 <article> Elemen<Article> elemen menentukan independen, konten mandiri.
Sebuah artikel harus masuk akal sendiri, dan itu harus mungkin untuk membacanya secara independen dari sisa situs web.

Contoh di mana <article> elemen dapat digunakan:

•         posting forum
•         blog post
•         Artikel koran

Bersarang <article> di <section> atau Wakil Versa?
<Article> elemen menentukan independen, konten mandiri.
<section> elemen mendefinisikan bagian dalam sebuah dokumen.

Dapatkah kita menggunakan definisi untuk memutuskan bagaimana sarang unsur-unsur? Tidak, kita tidak bisa!

Jadi, di Internet, Anda akan menemukan halaman HTML dengan <section> elemen berisi <article> elemen, dan <article> elemen yang mengandung <bagian> elemen.

Anda juga akan menemukan halaman dengan <section> elemen berisi <section> elemen, dan <article> elemen yang mengandung <article> elemen.

Misalnya untuk sebuah koran: The artikel olahraga di bagian olahraga, mungkin memiliki bagian teknis di setiap artikel.
 
HTML5 <header> Elemen<header> elemen menentukan header untuk dokumen atau bagian.
<header> elemen harus digunakan sebagai wadah untuk konten pengantar.
Anda dapat memiliki beberapa <header> elemen dalam satu dokumen.

Contoh berikut mendefinisikan header untuk sebuah artikel

HTML5 <footer> Elemen
<footer> elemen menentukan footer untuk dokumen atau bagian.
<footer> elemen harus berisi informasi tentang elemen yang mengandung.

Sebuah footer biasanya berisi penulis informasi dokumen, hak cipta, link ke persyaratan penggunaan, informasi kontak, dll

Anda mungkin memiliki beberapa <footer> elemen dalam satu dokumen. 

HTML5 <nav> Elemen
<nav> mendefinisikan satu set link navigasi.
Perhatikan bahwa tidak semua link dari dokumen harus di dalam <nav> elemen. The <nav> elemen dimaksudkan hanya untuk blok utama dari link navigasi. 

HTML5 <aside> Elemen<aside> Elemen mendefinisikan beberapa konten selain dari konten itu ditempatkan di (seperti sidebar).
Samping konten harus berkaitan dengan isi sekitarnya. 

 HTML5 <figure> dan <figcaption> Elemen
Tujuan dari sosok caption adalah menambahkan penjelasan visual untuk gambar.
Dalam HTML5, gambar dan keterangan dapat dikelompokkan bersama dalam sebuah <figure> elemen

 <Img> elemen mendefinisikan gambar, <figcaption> mendefinisikan judul.
 
Elemen mengapa Semantic?
Dengan HTML4, pengembang menggunakan nama-nama id / kelas mereka sendiri untuk unsur-unsur gaya: header, atas, bawah, footer, menu, navigasi, utama, wadah, konten, artikel, sidebar, topnav, dll

Hal ini membuat tidak mungkin untuk mesin pencari untuk mengidentifikasi konten halaman web yang benar.

Dengan unsur-unsur HTML5 baru (<header> <footer> <nav> <section> <article>), ini akan menjadi lebih mudah.

Menurut W3C, Semantic Web: "Memungkinkan data yang akan dibagi dan digunakan kembali seluruh aplikasi, perusahaan, dan masyarakat."

Elemen semantik di HTML5
Di bawah ini adalah daftar abjad dari unsur-unsur semantik baru di HTML5.
Link pergi ke kami HTML5 Referensi lengkap.
 

 

Rangkuman Contoh :

Maka outputnya :

 

Migrasi HTML5

Migrasi dari HTML4 ke HTML5

Bab ini sepenuhnya tentang bagaimana untuk bermigrasi dari HTML4 ke HTML5.

Bab ini menunjukkan bagaimana mengkonversi halaman HTML4 ke dalam halaman HTML5, tanpa merusak apapun dari konten asli atau struktur.

Sebuah HTML4 Halaman Khas

Contoh :

Maka outputnya:

Ubah ke HTML5 DOCTYPE

Mengubah DOCTYPE:
<! DOCTYPE HTML PUBLIC "- // W3C // DTD HTML 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">

dengan DOCTYPE HTML5:
Contoh
<! DOCTYPE html>
Ubah ke HTML5 Encoding

Mengubah informasi encoding:<Meta http-equiv = "Content-Type" content = "text / html; charset = utf-8">

untuk HTML5 encoding:
Contoh
<Meta charset = "utf-8">

Tambahkan The HTML5Shiv

HTML5 elemen semantik baru didukung di semua browser modern. Selain itu, Anda dapat "mengajar" browser lama bagaimana menangani "unsur-unsur yang tidak diketahui".

Namun, IE8 dan sebelumnya, tidak memungkinkan styling dari unsur yang tidak diketahui. Jadi, HTML5Shiv adalah solusi JavaScript untuk mengaktifkan styling elemen HTML5 di versi Internet Explorer sebelum versi 9.

Tambahkan HTML5Shiv:
Contoh

<! - [If lt IE 9]>
  <Script src = "https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"> </ script>
<! [Endif] ->

Ubah ke HTML5 Semantic Elements
CSS yang ada berisi id dan kelas untuk styling elemen

Contoh :

Maka outputnya :

Perbedaan Antara <article> <section> dan <div>Ada membingungkan (kurangnya) perbedaan dalam standar HTML5, antara <article> <section> dan <div>.

Dalam standar HTML5, <section> elemen didefinisikan sebagai sebuah blok elemen terkait.
<Article> elemen didefinisikan sebagai sebuah blok lengkap, mandiri elemen terkait.
<Div> elemen didefinisikan sebagai sebuah blok elemen anak.

Bagaimana menafsirkan itu?
Dalam contoh di atas, kita telah menggunakan <section> sebagai wadah untuk terkait <artikel>.
Tapi, kita bisa menggunakan <article> sebagai wadah untuk artikel juga.

V.Kesimpulan.

dapat kita simpulkan bahwa trik trik dasar itu harus kita pelajari agar kita dapat membuat suatu web sederhana yang maximal.

VI.Refrensi.
    http://www.w3schools.com/html