HTML5
·
Tentang HTML 5
HTML 5 (sebelumnya dieja HTML5 [a])
adalah bahasa markup yang digunakan untuk penataan dan penyajian konten di
World Wide Web. Ini adalah versi utama kelima dan terkini dari standar HTML,
dan subsumes XHTML. Saat ini ada dalam dua bentuk standar. HTML 5.2 Rekomendasi
[4] oleh World Wide Web Consortium (W3C, koalisi organisasi yang luas), yang
ditujukan terutama untuk pengembang konten Web; dan HTML Living Standard [5]
oleh WHATWG (konsorsium kecil dari empat vendor browser), ditujukan terutama
untuk pengembang browser, meskipun itu juga ada dalam versi pengembang Web yang
singkat. [6] Ada konflik kecil antara spesifikasi kedua kelompok. HTML 5
pertama kali dirilis dalam bentuk publik pada tanggal 22 Januari 2008, [7]
dengan pembaruan besar dan status "Rekomendasi W3C" pada bulan
Oktober 2014. [2] [8] Tujuannya adalah untuk meningkatkan bahasa dengan
dukungan untuk multimedia terbaru dan fitur baru lainnya; untuk menjaga agar
bahasa mudah dibaca oleh manusia dan secara konsisten dipahami oleh komputer
dan perangkat seperti browser Web, parser, dll., tanpa kekakuan XHTML; dan juga
untuk tetap kompatibel dengan perangkat lunak lama. HTML 5 dimaksudkan untuk
menambahkan tidak hanya HTML 4, tetapi juga XHTML 1 dan DOM Level 2 HTML, [9]
spesifikasi HTML 4 dan XHTML diumumkan sebagai digantikan oleh HTML 5.2 pada
tanggal 27 Maret 2018. [10], W3Schools (2012)
HTML 5 mencakup model pemrosesan
terperinci untuk mendorong implementasi yang lebih interoperabel; itu
memperluas, meningkatkan dan merasionalisasi markup yang tersedia untuk
dokumen, dan memperkenalkan markup dan antarmuka pemrograman aplikasi (API)
untuk aplikasi web yang rumit. [11] Untuk alasan yang sama, HTML 5 juga
merupakan kandidat untuk aplikasi seluler lintas platform, karena menyertakan
fitur yang dirancang dengan perangkat bertenaga rendah.
Struktur HTML
Pada posting saya kali ini akan mengulas mengenai salah satu
bahasa pemrograman web, yaitu pemrograman menggunakan bahasa HTML. HTML (Hyper
Text Markup Languange) menurut versi saya merupakan suatu bahasa atau kode yang
digunakan untuk membangun dan mengembangkan sebuah web. Tentunya para programer
telah mengenal bahasa HTML. Tapi, tak apalah, saya akan berbagi informasi
sambil menyimpan memori saya melalui blog ini. Semoga informasi ini dapat
membantu siapa saja yang mulai belajar mengenai pemrograman web.
Posting ini membahas mengenai struktur HTML serta fungsinya. Suatu dokumen HTML dibangun berdasarkan suatu struktur. Struktur ini harus ada dalam file HTML. Apabila salah satu bagian dari struktur ini diabaikan / tidak tercantum dalam file HTML, maka file HTML tersebut tidak dapat dijalankan di web browser.
Posting ini membahas mengenai struktur HTML serta fungsinya. Suatu dokumen HTML dibangun berdasarkan suatu struktur. Struktur ini harus ada dalam file HTML. Apabila salah satu bagian dari struktur ini diabaikan / tidak tercantum dalam file HTML, maka file HTML tersebut tidak dapat dijalankan di web browser.
Web browser merupakan suatu aplikasi untuk membuka halaman
website. Contoh dari web browser yang sering digunakan dan compatible/cocok
untuk diterapkan dengan berbagai bahasa pemrograman web adalah mozilla firefox.
Ok, lanjut lagi. Struktur HTML terdiri dari <html> (tag
html), <head> (tag head), dan <body> (tag body).
Suatu dokumen html harus memuat struktur tersebut (lihat
bagan di atas). Bagian-bagian struktur tersebut memiliki fungsi masing-masing:
a.
html
<html> (tag html) merupakan tag pembuka html yaitu awal dari dokumen html. html selalu memiliki tag pembuka dan tag penutup. Tag penutup html yaitu </html> yang merupakan akhir dari dokumen html.
<html> (tag html) merupakan tag pembuka html yaitu awal dari dokumen html. html selalu memiliki tag pembuka dan tag penutup. Tag penutup html yaitu </html> yang merupakan akhir dari dokumen html.
b.
head
<head> merupakan tag tempat meletakkan informasi header. Pada tag ini terletak tag title, tag informasi web: meta, tag link dengan dokumen bahasa pemrograman lain seperti css, javascript, php, dll. Tag head ini juga memiliki tag penutup, yaitu </head>.
<head> merupakan tag tempat meletakkan informasi header. Pada tag ini terletak tag title, tag informasi web: meta, tag link dengan dokumen bahasa pemrograman lain seperti css, javascript, php, dll. Tag head ini juga memiliki tag penutup, yaitu </head>.
c.
title
<title> merupakan tag untuk mendefinisikan judul web. Tag ini juga memiliki tag penutup, yaitu </title>.
<title> merupakan tag untuk mendefinisikan judul web. Tag ini juga memiliki tag penutup, yaitu </title>.
d.
body
<body> merupakan tag sebagai tempat untuk meletakkan seluruh isi web. Tag penutup dari tag ini adalah </body>. Seluruh isi web yang akan dibuat dikerjakan di dalam tag body, yaitu antara tag pembuka dan tag penutupnya.
<body> merupakan tag sebagai tempat untuk meletakkan seluruh isi web. Tag penutup dari tag ini adalah </body>. Seluruh isi web yang akan dibuat dikerjakan di dalam tag body, yaitu antara tag pembuka dan tag penutupnya.
Setelah mencakup
seluruh bagian struktur tersebut, langkah selanjutnya yaitu menyimpan file
tersebut dengan type .html, misalnya: pertama.html. Setelah disimpan jalankan
file di web browser. Judul web tampak pada bagian tab, sedangkan seluruh isi
body ditunjukkan pada bagian isi web.
Kumpulan
Tag pada HTML Beserta Fungsinya
Karena banyak sekali
Tag dan atribut pada HTML, saya akan bantu untuk mendefinisikan kegunaan Macam-
macam Tag secara satu persatu, pada tabel dibawah ini:
Tag
|
Penjelasan
|
|
<!--...-->
|
Mendefinisikan
Komentar
|
|
<!DOCTYPE>
|
Mendefinisikan tipe
atau jenis dokumen
|
|
<a>
|
Mendefinisikan
hyperlink
|
|
<abbr>
|
Mendefinisikan
sebuah singkatan atau akronim
|
|
<acronym>
|
Tag ini tidak
didukung pada HTML5. Gunakan <abbr> sebagai penggantinya pada
HTML5. Mendefinisikan akronim
|
|
<address>
|
Mendefinisikan
informasi kontak penulis atau pemilik dokumen
|
|
<applet>
|
Tag ini tidak
didukung pada HTML5. Gunakan <embed> atau <object> sebagai
penggantinya pada HTML5. Mendefinisikan embedded applet
|
|
<area>
|
Mendefinisikan
sebuah area didalam image-map
|
|
<article>
|
Mendefinisikan
sebuah artikel
|
|
<aside>
|
Mendefinisikan
selain dari konten halaman
|
|
<audio>
|
Mendefinisikan
konten suara
|
|
<b>
|
Mendefinisikan teks
bold atau cetak tebal
|
|
<base>
|
Menentukan basis URL
atau target untuk semua URL relatif dalam dokumen
|
|
<basefont>
|
Tag ini tidak
didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Menentukan
warna default, ukuran, dan font untuk semua teks dalam dokumen
|
|
<bdi>
|
Isolat bagian teks
yang mungkin diformat dalam arah yang berbeda dari teks lain di luar itu
sendiri
|
|
<bdo>
|
Mengganti arah teks
saat ini
|
|
<big>
|
Tag ini tidak
didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan
teks besar
|
|
<blockquote>
|
Mendefinisikan
bagian yang dikutip dari sumber lain
|
|
<body>
|
Mendefinisikan tubuh
atau badan dokumen
|
|
<br>
|
Mendefinisikan satu
baris tunggal atau sama dengan fungsi enter
|
|
<button>
|
Mendefinisikan
sebuah tombol
|
|
<canvas>
|
Digunakan untuk
menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript)
|
|
<caption>
|
Mendefinisikan
caption dari sebuah tabel
|
|
<center>
|
Tag ini tidak
didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan
teks yang posisinya berada ditengah
|
|
<cite>
|
Mendefinisikan Judul
karya
|
|
<code>
|
Mendefinisikan
bagian dari code pada komputer
|
|
<col>
|
Menentukan sifat
kolom untuk setiap kolom dalam <colgroup> element
|
|
<colgroup>
|
Menentukan kelompok
dari satu atau lebih kolom dalam sebuah tabel untuk memformat
|
|
<datalist>
|
Menentukan daftar
pilihan yang telah ditentukan untuk kontrol input
|
|
<dd>
|
Mendefinisikan
deskripsi / nilai istilah dalam daftar deskripsi
|
|
<del>
|
Mendefinisikan teks
yang telah dihapus dari dokumen
|
|
<details>
|
Mendefinisikan
rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
|
|
<dfn>
|
Merupakan contoh
mendefinisikan istilah
|
|
<dialog>
|
Mendefinisikan sebuah
kotak dialog atau jendela
|
|
<dir>
|
Tag ini tidak
didukung pada HTML5. Gunakan <ul> sebagai penggantinya pada
HTML5. Mendefinisikan daftar direktori
|
|
<div>
|
Mendefinisikan
sebuah bagian dalam sebuah dokumen
|
|
<dl>
|
Mendefinisikan
daftar deskripsi
|
|
<dt>
|
Mendefinisikan
istilah / nama dalam daftar deskripsi
|
|
<em>
|
Mendefinisikan
menekankan teks
|
|
<embed>
|
Mendefinisikan
sebuah wadah untuk eksternal (non-HTML) aplikasi
|
|
<fieldset>
|
Sebauh Grup untuk
pengelompokan dalam form
|
|
<figcaption>
|
Mendefinisikan
sebuah caption untuk <figure> element
|
|
<figure>
|
Menentukan konten
mandiri
|
|
<font>
|
Tag ini tidak
didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan
font, warna, dan ukuran dari sebuah teks
|
|
<footer>
|
Mendefinisikan
sebuah footer dari sebuah dokumen atau section
|
|
<form>
|
Mendefinisikan
sebuah form HTML untuk input pengguna
|
|
<frame>
|
Tag ini tidak
didukung pada HTML5. Mendefinisikan sebuah jendela (frame) dalam sebuah
frameset
|
|
<frameset>
|
Tag ini tidak
didukung pada HTML5. Mendefinisikan sebuah satu set frames
|
|
<h1> sampai
<h6>
|
Mendefinisikan
headings pada HTML
|
|
<head>
|
Mendefinisikan
informasi tentang dokumen
|
|
<header>
|
Mendefinisikan
sebuah header untuk dokumen atau bagian dokumen
|
|
<hr>
|
Mendefinisikan
perubahan tematik dalam konten atau memberikan garis pada dokumen
|
|
<html>
|
Mendefinisikan root
dari sebuah dokumen HTML
|
|
<i>
|
Mendefinisikan
sebuah bagian dari teks dengan suara alternatif atau suasana hati
|
|
<iframe>
|
Mendefinisikan
sebuah frame inline
|
|
<img>
|
Mendefinisikan
sebuah image
|
|
<input>
|
Mendefinisikan
sebuah input control
|
|
<ins>
|
Mendefinisikan teks
yang telah dimasukkan ke dalam dokumen
|
|
<kbd>
|
Mendefinisikan input
keyboard
|
|
<keygen>
|
Mendefinisikan
sebuah key-pair generator field (for forms)
|
|
<label>
|
Mendefinisikan
sebuah label dari sebuah <input> element
|
|
><legend>
|
Mendefinisikan
sebuah caption dari sebuah <fieldset> element
|
|
<li>
|
Mendefinisikan
sebuah daftar item
|
|
<link>
|
Mendefinisikan
hubungan antara dokumen dengan sumber daya eksternal (digunakan untuk link ke
style sheet)
|
|
<main>
|
Menentukan konten
utama dari dokumen
|
|
<map>
|
Mendefinisikan
client-side image-map
|
|
<mark>
|
Mendefinisikan
ditandai / teks yang disorot
|
|
<menu>
|
Mendefinisikan
daftar / menu perintah
|
|
<menuitem>
|
Mendefinisikan item
perintah / menu bahwa pengguna dapat memanggil dari menu popup
|
|
<meta>
|
Mendefinisikan
metadata tentang sebuah dokumen HTML
|
|
<meter>
|
Mendefinisikan
pengukuran skalar dalam kisaran dikenal (gauge)
|
|
<nav>
|
Mendefinisikan
navigasi untuk links
|
|
<noframes>
|
Tag ini tidak
didukung pada HTML5. Mendefinisikan sebuah konten alternatif untuk
pengguna yang tidak mendukung frame
|
|
<noscript>
|
Mendefinisikan
sebuah konten alternatif untuk pengguna yang tidak mendukung script sisi
klien
|
|
<object>
|
Mendefinisikan
sebuah embedded objek
|
|
<ol>
|
Mendefinisikan
sebuah daftar tersusun
|
|
<optgroup>
|
Mendefinisikan
sekelompok opsi terkait dalam daftar drop-down
|
|
<option>
|
Mendefinisikan
sebuah option dari sebuah daftar drop-down
|
|
<output>
|
Mendefinisikan hasil
dari sebuah perhitungan
|
|
<p>
|
Mendefinisikan
sebuah paragraph
|
|
<param>
|
Mendefinisikan
sebuah parameter untuk sebuah object
|
|
<pre>
|
Mendefinisikan teks
preformatted
|
|
<progress>
|
Menggambarkan
kemajuan tugas
|
|
<q>
|
Mendefinisikan
sebuah kutipan singkat
|
|
<rp>
|
Mendefinisikan apa
yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby
|
|
<rt>
|
Mendefinisikan
sebuah penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
|
|
<ruby>
|
Mendefinisikan
sebuah penjelasan ruby (untuk tipografi Asia Timur)
|
|
<s>
|
Mendefinisikan teks
yang sudah tidak benar
|
|
<samp>
|
Mendefinisikan
contoh output dari program komputer
|
|
<script>
|
Mendefinisikan
sebuah script dari sisi klien
|
|
<section>
|
Mendefinisikan
sebuah section didalam sebuah dokumen
|
|
<select>
|
Mendefinisikan
sebuah daftar drop-down
|
|
<small>
|
Mendefinisikan teks
kecil
|
|
<source>
|
Mendefinisikan lebih
dari satu sumber media untuk elemen media seperti (<video> dan
<audio>)
|
|
<span>
|
Mendefinisikan
sebuah section didalam sebuah dokumen
|
|
<strike>
|
Tag ini tidak
didukung pada HTML5. Gunakan <del> atau <s> sebagai penggantinya
pada HTML5. Mendefinisikan teks strikethrough
|
|
<strong>
|
Mendefinisikan teks
yang penting
|
|
<style>
|
Mendefinisikan
informasi style untuk sebuah dokumen
|
|
<sub>
|
Mendefinisikan teks
subscripted
|
|
<summary>
|
Mendefinisikan
sebuah judul yang terlihat dalam sebuah <details> element
|
|
<sup>
|
Mendefinisikan teks
superscripted
|
|
<tabel>
|
Mendefinisikan
sebuah tabel
|
|
<tbody>
|
Grup isi tubuh dalam
sebuah tabel
|
|
<td>
|
Mendefinisikan
sebuah cell didalam sebuah tabel
|
|
<teksarea>
|
Mendefinisikan
sebuah input control multiline atau teks area
|
|
<tfoot>
|
Grup isi footer
dalam sebuah tabel
|
|
<th>
|
Mendefinisikan
sebuah header cell didalam sebuah tabel
|
|
<thead>
|
Grup header dalam
sebuah tabel
|
|
<time>
|
Mendefinisikan
sebuah tanggal atau waktu
|
|
<title>
|
Mendefinisikan
sebuah title untuk dokumen
|
|
<tr>
|
Mendefinisikan
sebuah row didalam sebuah tabel
|
|
<track>
|
Mendefinisikan trek
teks untuk elemen media yang (<video> dan <audio>)
|
|
<tt>
|
Tag ini tidak
didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan
teletype teks
|
|
<u>
|
Mendefinisikan teks
yang harus berbeda dari teks biasa
|
|
<ul>
|
Mendefinisikan
sebuah unordered list
|
|
<var>
|
Mendefinisikan
sebuah variable
|
|
<video>
|
Mendefinisikan
sebuah video atau movie
|
|
<wbr>
|
Mendefinisikan
sebuah kemungkinan line-break
|
|
Contoh Kode HTML
Setelah sobat mengetahui pengertian,
sejarah, dan versi-versi dari HMTL, kuy sekarang kita mengenal skrip kode dasar
pada HTML. Mari buka aplikasi teks editor di komputer sobat, dan copy skrip
kode HTML dibawah ini, lalu paste-kan di aplikasi teks editor sobat, simpan
dengan ektensi .html
*contoh: kode.html
<html>
<head>
<title>Kuy Belajar HTML</title>
</head>
<body>
Saya Lagi Belajar HTML
</body>
</html>
Penjelasan
:
- Tag <html> digunakan
untuk memulai sebuah file HTML, dan harus di akhiri dengan </html>
- Tag <head> digunakan
untuk bagian header, tempat untuk menyisipkan link file CSS atau
Javascript external, dan harus di akhiri dengan </head>
- Tag <title>
digunakan untuk memberi judul file HTML sobat, dan harus di akhiri dengan
</title>
- Tag <body> disini
lah tempat sobat untuk merangkai skrip HTML untuk menghasilkan sebuah
Website, dan harus di akhiri dengan </body>
Setelah itu
silahkan sobat buka file html yang tadi telah sobat buat dengan aplikasi web
browser yang tersedia di komputer sobat. Cukup mudah bukan mempelajari HTML?
mari kita sama-sama belajar untuk terus meningkatkan kempampuan coding kita.
Cukup sekian dulu dari saya, semoga bisa bermanfaat dan Keep Coding!
