HTML 5
halooo gays... kali ini saya akan mencoba membuat tutorial skrip yang sangat sederhana namun mungkin bisa bermanfaat bagi kita semuanya..
gak usah basa basi lagi brayy langsung saja lihat dibawah ini
HTML 5 INTRO
Deklarasi DOCTYPE untuk HTML 5 sangat sederhana :
<!DOCTYPE html>
Karakter pengkodean juga sangat sederhana :
<meta charset="UTF-8">
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
Deklarasi DOCTYPE untuk HTML 5 sangat sederhana :
<!DOCTYPE html>
Karakter pengkodean juga sangat sederhana :
<meta charset="UTF-8">
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
Content of the document......
</body>
</html>
ELEMENT
BARU HTML 5
Unsur-unsur baru yang paling menarik adalah:
Unsur-unsur baru yang paling menarik adalah:
1.
elemen
semantik baru seperti <header>, <footer>, <article>, dan
<section>
2.
bentuk
kontrol baru seperti nomor, tanggal, waktu, kalender, dan jangkauan.
3.
unsur-unsur
baru grafis: <svg> dan <canvas>.
4.
unsur-unsur
baru multimedia: <audio yang> dan <video>.
NEW
HTML 5 API’S
Yang paling menarik dari HTML ini adalah :
1.
HTML
Geolocation
2.
HTML
Drag and Drop
3.
HTML
Local Storage
4.
HTML
Aplication Cache
5.
HTML
Web Wolkers
6.
HTML
SSE
ELEMENT
YANG DIHAPUS DI DALAM HTML 5
Berikut nama element HTML 4 yang dihapus
dalam HTML 5
HTML
HISTORY
Sejak hari-hari munculnya WEB, ada banyak
versi HTML yang diciptakan, yaitu:
Tim Berners-Lee menciptakan "World Wide Web" atau WWW pada tahun 1989, dan internet melepas pada 1990-an. Dari tahun 1991 hingga 1998, 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, WHATWG (Web Hypertext Application Technology Working Group) dibentuk sebagai jawaban untuk memperlambat perkembangan W3C, dan keputusan W3C untuk menutup pengembangan HTML, mendukung XHTML. WHATWG ingin mengembangkan HTML, konsisten dengan bagaimana web itu digunakan, sementara kompatibel dengan versi HTML.
Pada periode 2004-2006, inisiatif WHATWG mendapat 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 akan mengembangkan HTML sebagai "Living Standard".
Sebuah standar hidup tidak pernah sepenuhnya lengkap, tapi selalu diperbarui dan diperbaiki. Fitur baru dapat ditambahkan, tapi fungsi tua tidak dapat dihapus. WHATWG Living Standard diterbitkan pada tahun 2012, dan terus diperbarui. W3C akan mengembangkan HTML5 definitif dan standar XHTML5, sebagai "snapshot" dari WHATWG.
HTML BROWSER SUPPORT
HTML 5 sangat didukung oleh semua browser. Selain itu, semua browser lama atau baru secara automatis menangani element yang belum diakui sebagai element inline.
Mendefinisikan HTML 5 ELEMENT sebagai Blog ELEMENT
HTML 5 mengartikan 8 element HTML semantik baru. Semua itu adalah element-element tingkat blok. Untuk mengamankan perikalu yang baik dan benar di browser lama, kita dapat mengatur properti tampilan CSS untuk memblokirnya :
Example
header, section, footer, aside, nav, main, article, figure {
display: block;
}
MENAMBAHKAN ELEMENT BARU UNTUK HTML
Kita dapat menambahkan element baru ke HTML dengan cara menambahkan.
Contoh ini menambahkan element baru yang disebut <myHero> untuk HTML, dan mengartikan gaya tampilan untuk itu :
<!DOCTYPE html>
<html>
<head>
<title>Styling the article element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display:block;
background-color:#ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
Ketika kita buka di browser :
Pada tahun 2004, WHATWG (Web Hypertext Application Technology Working Group) dibentuk sebagai jawaban untuk memperlambat perkembangan W3C, dan keputusan W3C untuk menutup pengembangan HTML, mendukung XHTML. WHATWG ingin mengembangkan HTML, konsisten dengan bagaimana web itu digunakan, sementara kompatibel dengan versi HTML.
Pada periode 2004-2006, inisiatif WHATWG mendapat 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 akan mengembangkan HTML sebagai "Living Standard".
Sebuah standar hidup tidak pernah sepenuhnya lengkap, tapi selalu diperbarui dan diperbaiki. Fitur baru dapat ditambahkan, tapi fungsi tua tidak dapat dihapus. WHATWG Living Standard diterbitkan pada tahun 2012, dan terus diperbarui. W3C akan mengembangkan HTML5 definitif dan standar XHTML5, sebagai "snapshot" dari WHATWG.
HTML BROWSER SUPPORT
HTML 5 sangat didukung oleh semua browser. Selain itu, semua browser lama atau baru secara automatis menangani element yang belum diakui sebagai element inline.
Mendefinisikan HTML 5 ELEMENT sebagai Blog ELEMENT
HTML 5 mengartikan 8 element HTML semantik baru. Semua itu adalah element-element tingkat blok. Untuk mengamankan perikalu yang baik dan benar di browser lama, kita dapat mengatur properti tampilan CSS untuk memblokirnya :
Example
header, section, footer, aside, nav, main, article, figure {
display: block;
}
MENAMBAHKAN ELEMENT BARU UNTUK HTML
Kita dapat menambahkan element baru ke HTML dengan cara menambahkan.
Contoh ini menambahkan element baru yang disebut <myHero> untuk HTML, dan mengartikan gaya tampilan untuk itu :
<!DOCTYPE html>
<html>
<head>
<title>Styling the article element</title>
<script>document.createElement("myHero")</script>
<style>
myHero {
display:block;
background-color:#ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
Ketika kita buka di browser :
PROBLEM WITH INTERNET EXPLORER
Kita bisa menggunakan solusi yang dijelaskan diatas, untuk semua element HTML 5, tetapi : Sjoerd Visscher membuat “HTML 5 Enabling JavaScript”,”the shiv”
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Kode diatas adalah komentar, tetapi versi sebelumnya untuk IE9 akan membacanya (dan mengerti atau paham).
The Complete Shiv Solution
<!DOCTYPE html>
<html>
<head>
<title>Styling HTML5</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</script>
<![endif]-->
</head>
<body>
<h1>My First Article</h1>
<article>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</article>
</body>
Jika ditampilkan dalam WEB : bisa diedit dengan menggunakan notepad++
HTML Migration
coba kita lihat skipt dibawah ini..
dan coba kita run via firefox
dan coba kita run via firefox
<!DOCTYPE html>
<html lang="en">
<title>Menu Sarapan Pagi</title>
<meta charset="utf-8">
<style>
body {
font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
border:1px solid grey;
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
</style>
<body>
<header>
<h1>Universitas X News</h1>
</header>
<nav>
<ul>
<li>News</li>
<li>Gosip</li>
<li>capek gan</li>
</ul>
</nav>
<section>
<h2>BERITA BARU</h2>
<article>
<h2>BUNUH DIRI!!!!</h2>
<p>dikabarkan mahasiswa ada yang bunuh diri akibat tugas yang berlebihan</p>
<p>dengan kondisi yang mengenaskan</p>
<p>kita sebagai orang dewasa harus mengerti keadaan mahasiswa kita sendiri </p>
</article>
<article>
<h2>BERITA BARU</h2>
<p>dikabarkan kembali mahasiswa yang lainnya juga ikut bunuh diri</p>
<p>yang lainnya keluar dari kampus alias drop out</p>
<p>dikabarkan universitas tersebut bangkrut dan para dosen menyesal</p>
</article>
</section>
<footer>
<p>@2016 universitas X All rights reserved.</p>
</footer>
</body>
</html>
<html lang="en">
<title>Menu Sarapan Pagi</title>
<meta charset="utf-8">
<style>
body {
font-family:Verdana,sans-serif;font-size:0.8em;
}
header,footer,section,article {
border:1px solid grey;
margin:5px;margin-bottom:15px;padding:8px;
background-color:white;
}
header,footer {
color:white;background-color:#444;margin-bottom:5px;
}
section {
background-color:#ddd;
}
nav ul {
margin:0;padding:0;
}
nav ul li {
display:inline; margin:5px;
}
</style>
<body>
<header>
<h1>Universitas X News</h1>
</header>
<nav>
<ul>
<li>News</li>
<li>Gosip</li>
<li>capek gan</li>
</ul>
</nav>
<section>
<h2>BERITA BARU</h2>
<article>
<h2>BUNUH DIRI!!!!</h2>
<p>dikabarkan mahasiswa ada yang bunuh diri akibat tugas yang berlebihan</p>
<p>dengan kondisi yang mengenaskan</p>
<p>kita sebagai orang dewasa harus mengerti keadaan mahasiswa kita sendiri </p>
</article>
<article>
<h2>BERITA BARU</h2>
<p>dikabarkan kembali mahasiswa yang lainnya juga ikut bunuh diri</p>
<p>yang lainnya keluar dari kampus alias drop out</p>
<p>dikabarkan universitas tersebut bangkrut dan para dosen menyesal</p>
</article>
</section>
<footer>
<p>@2016 universitas X All rights reserved.</p>
</footer>
</body>
</html>
dan hasilnya kita lihat di bawah ini
saat ini pengembang web sering tidak pasti tentang gaya pengkodean dan sintaks untuk digunakan dalam HTML.
Antara tahun 2000 dan 2010, banyak pengembang web dikonversi dari HTML ke XHTML. Dengan XHTML, pengembang terpaksa menulis valid dan "well-formed" kode. HTML5 adalah sedikit lebih ceroboh ketika datang untuk kode validasi.
Dengan HTML5, Anda harus membuat sendiri Best Practice, Style Guide dan Coding Konvensi.
Gunakan Bawah Kasus Nama Element
HTML5 memungkinkan pencampuran huruf besar dan huruf kecil dalam nama elemen.
Kami merekomendasikan menggunakan nama elemen huruf kecil:
Pencampuran nama besar dan huruf kecil yang buruk
Pengembang digunakan untuk menggunakan nama huruf kecil (seperti dalam XHTML)
Huruf kecil terlihat lebih bersih
Huruf kecil lebih mudah untuk menulis
kita lihat dari website resminya w3school...di bawah ini:
s
Komentar
Posting Komentar