Pengenalan HTML 5

Imam Ibnu Badri Pemrograman Web 19.03

DAFTAR ISI

Materi

HTML5 telah dipublikasikan secara resmi oleh W3C pada bulan Mei 2011 dan masih terus dikembangkan. HTML5 adalah singkatan Hyper Text Markup Language Versi 5, HTML5 merupakan sebuah teknologi penerus dari generasi sebelumnya yang dikeluarkan oleh W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group), dengan tambahan feature- feature baru untuk memperbaiki dan melengkapi dari HTML versi sebelumnya.

Feature baru pada HTML5 antara lain:

New Semantic Elements : Ini seperti pada elemen <header>, <footer>, and <section>.
Forms 2.0 : Perbaikan form web HTML di mana atribut baru telah diperkenalkan tag <input>.
Persistent Local Storage : Untuk menghilangkan ketergantungan pada plugin pihak ketiga.
WebSocket : Sebuah generasi teknologi terbaru komunikasi dua arah untuk aplikasi web.
Server-Sent Events : memperkenalkan even yang mengalir dari web server ke web browser yang disebut Server-Sent Events (SSE).
Canvas : Ini mendukung gambar dua dimensi surface yang dapat diprogram dengan JavaScript.
Audio & Video : Anda dapat menanamkan/embed audio atau video pada halaman web Anda tanpa menggunakan plugin pihak ketiga.
Geolocation : Pengunjung dapat memilih untuk berbagi lokasi fisik mereka dengan aplikasi web Anda..
Microdata : Ini memungkinkan Anda membuat kosakata Anda sendiri di luar HTML5 dan memperluas halaman web Anda dengan kostum semantics.
Drag and drop : Drag dan drop item dari satu lokasi ke lokasi lain pada halaman web yang sama.

Latihan

Pada praktikum ini hanya mencoba beberapa tag HTML5, tidak semua tag HTML5 seperti di https://www.w3schools.com/html/htm15 intro.asp. Untuk setiap praktikum dibawah ini akan selalu menggunakan tag html dengan kode HTML5 berikut:
(harap kode sumber dituliskan diatara tag <body>...</body>)...!

<!DOCTYPE html>
<head>
 <meta charset="UTF-8 ">
 <title>Praktikum tentang ???</title>
</head> 
<body>
 di-sini kode sumber (source) praktikum ...???
</body>
</html>

Membuat Struktur Dokumen HTML5 (Semantic Elements) :

<html>
    <head>
        <meta charset="UTF-8"></meta>        
    </head>
    <body>
        <header role="banner">
            <h1>Contoh Struktur Dokumen HTML5</h1>
            <p>HTML5 memiliki dukungan lebih balk terhadap struktur Tag HTML.</p>
        </header>
        <nav>
            <li><a href="#">Pengena1an HTML5</a></li>
            <li><a href="#">EIemen, Tag dan Atribut</a></li>
            <li><a href="#">Heading dan Paragraf</a></li> 
            <li><a href="#">Formating</a></li> 
        </nav>
        <article>
            <section>
            <h3>Satu artikel dapat memiliki lebih dari satu sections</h3>
            </section>
        </article>
        <aside>
            <p>Ini adalah aside, bagian dari konten</p> 
        </aside>
        <figure align="right">
            <img src="logo.png" alt="Logo" width="350" height="100">
        </figure>
        <footer>
            <p>Created by <a href="#">FTIE</a></p> 
        </footer>
    </body>
</html>

HTML Graphics
a. Canvas

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">    
</canvas>
<!-- Selanjutnya bias mencoba source dari :
https://www.w3schools.com/html/html5canvas.asp -->

b. SVG (Scalable Vector Graphics)

<svg width="100" height="100">
 <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow"/>
</svg>

<svg width="400" height="180">
    <rect x="50" y="20" rx="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5"/>
</svg>

<svg width="300" height="200">
    <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;"/> 
</svg>

<svg height="130" width="500">
    <defs>
        <linearGradient id="gradl" x1="0%" y1="0%" x2="100" y2="0%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1"/>
            <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1"/>
        </linearGradient>
    </defs>
    <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)"/>
    <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
    Sorry, your browser does not support inline SVG.
</svg>

c. Google Map

<div id="googleMap" style="width:100%;height:400px;"></div>

<script>
    function myMap(){
        var map Prop= { 
            center:new google.maps.LatLng(51.508742,-0.120850), 
            zoom:5,
        };
        var map=new
        google.maps.Map(document.getElementById("googleMap"),mapProp);
    }
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=myMap"></script>

<!-- !!! YOUR KEY ==> di dapat dari register di google dulu -->

HTML Multimedia
a. Video

<video width="320"  heigh="240" controls> <!-- controls bisa diganti autoplay -->
    <source src="movie.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
    Your browser does not support the video tag. 
</video>

b. Audio

<audio controls>
    <source scr="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

c. Plug-ins

<object width="400" height="50" data="bookmark.swf"></object>
<embed width="400" height="50" src="bookmark.swf">

<!-- data, src bisa file html ataupun jpeg -->

d. Youtube

<iframe width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k"></iframe> <iframe width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k?autoplay=1"></iframe> <iframe width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k?pIay1ist=XGSy3_Czz8k&100p=1"></iframe> <iframe width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k?controls=0"></iframe>  <object width=" 420" height="315" data="https://www.youtube.com/embed/XGSy3_Czz8k"></object> <embed width="420" height="315" src="https://www.youtube.com/embed/XGSy3_Czz8k">

Drag & Drop

<html> <head> <script> function allowDrop(ev){ ev.prevent_Default(); } function drag(ev){ ev.dataTransfer.setData("text",ev.target.id); } function drop(ev){ ev.preventDefault(); var data ev.dataTransfer.getData("text"); ev.target.appendChi1d(document.getElementById(data)); } </script> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69"> </body> </html>

Tugas

Buatlah tag htm15 yang berkaitan dengan:

HTML5 Input Types
HTML Input Attributes
HTML Form Elements

Daftar Isi - Pemrograman Web

TeachMeSoft