Kamis, September 12, 2019

HTML 5 Pendahuluan

HTML merupakan akronim dari Hyper Text Markup Language. HTML digunakan untuk merancang laman web menggunakan markup language. HTML adalah kombinasi dari Hypertext dan Markup language. Hypertext mendefinisikan antar link pada laman web. Markup language digunakan untuk mendefinisikan dokumen teks dengan tag yang mendefinisikan struktur dari laman web. HTML 5 adalah edisi kelima dari versi HTML sebelumnya. HTML 5 memiliki peningkatan dalam hal markup language yang tersedia sebelumnya untuk laman web dan memperkenalkan juga Application Programming Interfaces (API) serta Document Object Model (DOM).

Fitur:
satu, HTML 5 memperkenalkan fitur multimedia terbaru yang mendukung pengendalian audio dan video menggunakan tag <audio> dan <video>.
dua, Terdapat beberapa elemen grafik terbaru termasuk grafik vektor dan beberapa tag.
tiga, Diperkaya dengan konten semantik dengan <header>, <footer>, <article>, <section>, dan <figure> yang juga ikut ditambahkan.
empat, Fitur drag dan drop yang memungkinkan pengguna untuk mengambil objek dan membawanya kemudian meletakkannya pada lokasi atau posisi baru pada laman web.
lima, Fasilitas geolokasi membantu menemukan lokasi geografis dari klien.
enam, Fasilitas penyimpanan web yang menyediakan method aplikasi web untuk menyimpan data pada web browser.
tujuh, Penggunaan database SQL untuk menyimpan data secara offline.
delapan, Dimungkinkan untuk menggambar berbagai bentuk seperti segitiga, persegi panjang, lingkaran, dan lain sebagainya.
sembilan, Mampu untuk menangani sintak yang bermasalah.
sepuluh, Mudah untuk mendeklarasi DOCTYPE seperti <!doctype html>.
sebelas, Mudah melakukan encoding karakter seperti <meta charset="UTF-8">.

Elemen yang dihapus pada HTML 5: Terdapat banyak elemen yang digantikan pada HTML 5 seperti yang diperlihatkan berikut ini;
satu, Elemen <acronym> diganti dengan <abbr>.
dua, Elemen <applet> diganti dengan <object>.
tiga, Elemen <basefont> diganti penggunaannya dengan CSS.
empat, Elemen <big> diganti penggunaannya dengan CSS.
lima, Elemen <center> diganti penggunaannya dengan CSS.
enam, Elemen <dir> diganti penggunaannya dengan <ul>.
tujuh, Elemen <font> diganti penggunannya dengan CSS.
delapan, Elemen <frame> tidak dipergunakan lagi.
sembilan, Elemen <frameset> tidak dipergunakan lagi.
sepuluh, Elemen <noframes> tidak dipergunakan lagi.
sebelas, Elemen <isindex> tidak dipergunakan lagi.
duaBelas, Elemen <strike> diganti penggunaannya dengan CSS, <S> atau <del>.
tigaBelas, Elemen <tt> diganti penggunaannya dengan CSS.

Penambahan elemen baru pada HTML 5.
satu, <article>: Tag <article> digunakan untuk merepresentasikan artikel. Secara khusus, konten dengan tag <article> berdiri sendiri terhadap konten yang lain pada website meskipun berkaitan satu sama lain.

dua, <aside>: Tag <aside> digunakan untuk mendeskripsikan object utama dari laman web  untuk mempersingkat langkah seperti highlighter. Tag ini pada dasarnya mengidentifikasi konten yang berkaitan terhadap konten utama pada laman web tetapi bukan inti utama dari laman utama. Tag <aside> mengandung informasi utama author, link, dan konten lainnya yang berkaitan.

tiga, <figcaption>: Tag <figcaption> pada HTML digunakan untuk mengatur sebuah caption untuk elemen figure pada sebuah dokumen.

empat, <figure>: Tag <figure> pada HTML digunakan untuk menambah konten mandiri seperti ilustrasi, diagram, foto atau daftar kode dalam sebuah dokumen. Hal ini berkaitan dengan main flow tetapi dapat juga digunakan pada posisi apapun dari sebuah dokumen dan figure mengikuti arus (flow) dari dokumen dan jika dihapus maka tidak akan memberikan dampak terhadap flow dari dokumen.

lima, <header>: Mengandung heading section sama seperti halnya dengan konten yang lain, seperti link navigasi, daftar isi, dan lain sebagainya.

enam, <footer>: Tag <footer> pada HTML digunakan untuk mendefinisikan sebuah footer dari dokumen HTML. Section ini mengandung informasi footer (informasi author, informasi copyright, karir, dan lain sebagainya). Tag footer digunakan bersamaan dengan tag body. Tag <footer> adalah tag baru yang terdapat pada HTML 5. Elemen tag footer mensyaratkan penggunaan tag awalan dan juga tag akhiran.

tujuh, <main>: Menggambarkan konten utama dari body dokumen atau applikasi web.

delapan, <mark>: Tag <mark> pada HTML digunakan untuk mendefinisikan teks yang telah ditandai (marked). Tag ini digunakan untuk menyoroti bagian dari teks pada paragraf.

sembilan, <nav>: Tag <nav> digunakan untuk mendeklarasikan navigasi section pada dokumen HTML. Pada dasarnya sebuah website memiliki section bawaan untuk navigasi link, yang memungkinkan pengguna untuk melakukan navigasi pada situs. Link tersebut dapat ditempatkan di dalam tag nav.

sepuluh, <section>: Tag ini berfungsi membatasi tema grup dari konten.

sebelas, <details>: Tag <detail> digunakan untuk konten atau informasi yang awalnya tersembunyi tetapi dapat ditampilkan jika user ingin melihatnya. Tag ini digunakan untuk menciptakan widget interaktif dimana pengguna dapat membuka dan juga menutupnya. Konten dari tag lengkap akan terlihat jika sekumpulan atribut dibuka.

duaBelas, <summary>: Tag <summary> pada HTML digunakan untuk mendefinisikan ringkasan untuk elemen <details>. Elemen <summary> digunakan bersamaan dengan elemen <details> dan menyediakan ringkasan yang dapat dilihat oleh user. Ketika ringkasan di klik oleh pengguna, maka konten yang terdapat di dalam elemen <details> akan menjadi terlihat yang semulanya tersembunyi. Tag <summary> telah ditambahkan pada HTML 5. Tag <summary> mensyarakatkan opening tag dan juga closing tag.

tigaBelas, <time>: Tag <time> digunakan untuk menampilkan waktu. Tag ini juga bisa digunakan untuk melakukan encode tanggal dan waktu pada format baca mesin. Keuntungan utama untuk user atau pengguna adalah mereka dapat memberikan waktu pengingat ulang tahun atau jadwal kegiatan pada kalender dan mesin pencari dapat menampilkan hasil pencarian 'pintar'.

empatBelas, <bdi>: Tag <bdi> merujuk kepada Bi-Directional Isolation. Tag ini membedakan teks yang terdapat pada tag terhadap teks lainnya yang diformat ke dalam bentuk format yang berbeda. Tag ini digunakan ketika user membuat teks dengan arah yang tidak diketahui.

limaBelas, <wbr>: Tag <wbr> pada HTML merupakan akronim dari Word Break dan digunakan untuk mendefinisikan posisi dalam teks yang diperlakukan sebagai baris terpisah oleh browser. Secara umum digunakan ketika kata yang digunakan terlalu panjang dan terdapat kemungkinan bahwa browser dapat memecahnya (memisahkannya) pada penggalan kata yang salah untuk menyesuaikan ukuran teks terhadap browser.

enamBelas, <datalist>: Tag <datalist> digunakan untuk menyediakan fitur autocomplete pada file HTML. Tag ini dapat digunakan bersamaan dengan tag input sehingga user dapat dengan mudah mengisi data pada form menggunakan data seleksi.

tujuhBelas, <keygen>: Tag <keygen> pada HTML digunakan untuk menentukan sebuah kata field generator untuk kata sandi pada form. Tujuan dari elemen <keygen> adalah untuk menyediakan cara aman untuk autentikasi pengguna. Ketika form di-submit maka dua kunci akan di-generate antara private key dan public key. Private key akan disimpan secara lokal dan public key akan dikirim menuju server. Public key digunakan untuk generate sertifikat klien untuk melakukan autentikasi pengguna dikemudian hari.

delapanBelas, <output>: Tag <output> pada HTML digunakan untuk menampilkan hasil dari hasil perhitungan oleh script dari sisi klien seperti JavaScript.

sembilanBelas, <progress>: Digunakan untuk menampilkan hasil progres dari pengerjaan tugas. Tag ini juga mendefinisikan sudah sejauh mana laju pengerjaan yang telah diselesaikan dan sejauh mana peserta didik waktu download yang telah terpakai. Tag ini tidak digunakan untuk merepresentasikan sisa ruang yang dipakai untuk penyimpanan ataupun query lain yang berhubungan.

duaPuluh, <svg>: Merupakan akronim dari Scalable Vector Graphics yang dapat digunakan untuk melakukan manipulasi grafik pada laman web.

duaPuluhSatu, <canvas>: Tag <canvas> pada HTML digunakan untuk menggambar grafik pada laman web menggunakan JavaScript. Tag ini bisa digunakan untuk menggambar jalur, teks, gradien, dan penambahan image. Secara default tag ini tidaklah mengandung border dan juga teks.

duaPuluhDua, <audio>: Tag ini mendefinisikan musik atau konten audio.

duaPuluhTiga, <embed>: Tag ini mendefinisikan penampungan untuk aplikasi eksternal seperti video player.

duaPuluhEmpat, <source>: Mendefinisikan source untuk <video> dan <audio>.

duaPuluhLima, <track>: Mendefinisikan track untuk <video> dan <audio>.

duaPuluhEnam, <video>: Mendefinisikan konten video.

Keunggulan HTML 5:
satu, Didukung penggunannya oleh semua browser.
dua, Lebih banyak perangkat yang ramah digunakan.
tiga, Mudah digunakan dan diimplementasikan.
empat, HTML 5 jika diintegrasikan dengan CSS, JavaScript, dan lainnya dapat digunakan untuk membangun website yang indah.

Kekurangan:
satu, Skrip kode yang panjang membuat waktu pengerjaan menjadi lebih lama.
dua, Hanya browser tipe terbaru yang dapat mendukung penggunaan HTML 5.

Browser pendukung: Telah didukung oleh semua jenis browser.

Berikut ini adalah ilustrasi contoh konten HTML 5.

Contoh 1:
Output:
pengenalan html 5
Gambar 1 pengenalan html 5

Contoh 2:
Output:
pengenalan html 5
Gambar 2 pengenalan html 5






Tidak ada komentar:

Posting Komentar

Respon komentar 7 x 24 jam, so please be patient :D

Footer Adsense