HTML5

Last updated 4 years ago

Was this helpful?

HTML5

HTML5 adalah evolusi terbaru dari HTML. HTML5 ini dirilis dengan tujuan utama meningkatkan pengalaman bagi pengembang dan pengguna web. HTML5 sudah mendukung multimedia (video, audio), grafik dan efek (canvas, svg), mode offline, storage (penyimpanan di sisi client) serta semantik (tag yang memiliki arti seperti header, nav, article, footer).

Video

Sebelum versi HTML5, video hanya bisa dijalankan di browser menggunakan plug-in seperti flash. Di HTML5, video dapat dijalankan di browser menggunakan tag <video>.

Beberapa versi browser pertama yang sudah mendukung video antara lain:

Kemudian format video yang didukung antara lain MP4, WebM, dan Ogg. Berikut format video yang didukung oleh masing-masing browser dapat dilihat pada tabel di bawah ini

Tabel atribut tag <video>

Contoh penggunaan tag <video> pada HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Video</title>
</head>
<body>
    <video width="400" controls>
        <source src="video/mov_bbb.mp4" type="video/mp4">
        Your browser does not support HTML5 video.
    </video>
</body>
</html>

Berikut hasil penggunaan tag dapat dilihat pada gambar di bawah ini

Audio

Sama seperti video, sebelum versi HTML5, audio hanya bisa dijalankan di browser menggunakan plug-in seperti flash. Di HTML5, audio dapat dijalankan di browser menggunakan tag <audio>. Beberapa versi browser pertama yang sudah mendukung audio seperti tabel di bawah ini.

Kemudian format audio yang didukung antara lain MP3, Ogg, dan Wav. Berikut format audio yang didukung oleh masing-masing browser dapat dilihat pada tabel di bawah ini

Tabel atribut tag <audio>

Contoh penggunaan tag <audio> pada HTML.

<!DOCTYPE html>
<html>
<head>
    <title>Audio</title>
</head>
<body>
    <audio width="400" controls>
        <source src="audio/horse.ogg" type="audio/mpeg">
        Your browser does not support HTML5 audio.
    </audio>
</body>
</html>

Berikut hasil penggunaan tag <audio> dapat dilihat pada gambar di bawah ini.

Semantic Tag HTML

Semantic Tag HTML adalah tag HTML yang memiliki arti atau makna untuk mendefinisikan struktur konten halaman Web. Misalnya tag <p>, digunakan untuk membuat paragraf, tag <h1> untuk membuat judul, serta tag <table> untuk membuat tabel, semua tag ini memiliki arti yang jelas, sehingga termasuk kedalam semantic tag.

Berikut beberapa semantic tag baru pada HTML5:

Pada HTML5 terdapat semantic tag baru seperti <header>, <nav>, <section>, <article>, <aside> dan <footer> yang dapat digunakan untuk mengelompokkan konten pada halaman web.

Berikut contoh penggunaan semantic tag :

<!DOCTYPE html>
<html lang="id">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Semantic</title>
</head>

<body>
    <header>
        <h1>STMIK MDP</h1>
        <p>STMIK MDP merupakan perguruan tinggi terbaik di Sumatera Selatan. STMIK MDP memiliki 2 program studi S1 yaitu
            Teknik Informatika dan Sistem Informasi</p>
    </header>
    <nav>
        <ul>
            <li><a href="#ti">Teknik Informatika</a></li>
            <li><a href="#si">Sistem Informasi</a></li>
        </ul>
    </nav>
    <main>
        <article id="ti">
            <h2>Teknik Informatika</h2>
            <p>
                Dibukanya Program Studi Teknik Informatika STMIK MDP, tidak lain bertujuan menyiapkan tenaga profesional
                di bidang IT, khususnya komputer dan komunikasi, sebagai upaya kontribusi nyata lembaga terhadap
                permintaan akan tenaga profesional bidang IT pada bidang lintas sektoral.

                Kurikulum Program Studi Teknik Informatika dirancang dengan berbasiskan kurikulum nasional dan kurikulum
                lokal yang lebih melihat kepada kebutuhan pasar, sehingga tenaga profesional yag dihasilkan telah siap
                dalam menjawab tantangan dan keinginan pasar.

                Secara menyeluruh Program Studi Teknik Informatika berorientasi penguasaan pada bidang jaringan komputer
                (multi user), pemrograman dan komputasi, rekayasa piranti lunak dan sistem basis data serta teknologi
                informasi yang berkonsepkan pemanfaatan dan pengembangan. Dengan adanya kolaborasi pengetahuan praktis,
                seperti diadopsinya kurikulum Cisco melalui kerjasama dengan Cisco Networking Academy.

                Program Studi Teknik Informatika menghasilkan sarjana yang berkompeten dalam bidang Teknologi Informasi,
                yang mencakup bidang Rancang Bangun, Kecerdasan Buatan, Jaringan Komputer dan bidang-bidang yang
                berhubungan dengan Teknologi Informasi.</p>
        </article>
        <article id="si">
            <h2>Sistem Informasi</h2>
            <p>
                Program Studi Sistem Informasi jenjang pendidikan Strata-1 menyelenggarakan pendidikan yang mampu
                mengisi tuntutan perkembangan bisnis, dan mampu menerjemahkan gerak sinergi dari pelaku bisnis dengan
                Teknologi Informasi untuk menghasilkan produktivitas yang tinggi.

                Program Studi Sistem Informasi mencakup studi pemrograman dan database, pengembangan sistem informasi,
                dan manajemen sistem informasi. Sehingga sarjana komputer sistem informasi berkompeten di bidang
                Rekayasa dan Rancang Bangun Sistem Informasi serta bidang lain yang berhubungan dengan Pengembangan
                Sistem Informasi yang dapat meningkatkan efisiensi dan keunggulan organisasi dalam berorganisasi.
            </p>
        </article>
    </main>
    <footer>
        <p>&copy; 2020 Belajar Pemrograman Web I</p>
    </footer>

</body>

</html>

PreviousHTML Lanjutan NextLatihan

Last updated 4 years ago

Was this helpful?