HTML

Hyper Text Markup

Languange

Hyper Text Markup Languange merupakan bahasa pemrograman untuk

membuat website sederhana
1. Sejarah HTML
Pada tahun 1980 seorang ahli fisika, Tim Berners-Lee, dan juga seorang
kontraktor di CERN (Organisasi Eropa untuk Riset Nuklir) mengusulkan dan
menyusun ENQUIRE, sebuah sistem untuk ilmuwan CERN dalam membagi
dokumen. Sembilan tahun kemudian, Berners-Lee mengusulkan adanya
sistem markah berbasis internet.[2] Berners-Lee menspesifikasikan HTML
dan menulis jaringan beserta perangkat lunaknya di akhir 1990. Pada tahun
yang sama, Berners-Lee dan Robert Cailliau, insinyur sistem data CERN
berkolaborasi dalam sebuah permintaan untuk pendanaan, namun tidak
diterima secara resmi oleh CERN. Di catatan pribadinya [3] sejak 1990 dia
mendaftar[4] "beberapa dari banyak daerah yang menggunakan hypertext"
dan pertama-tama menempatkan sebuah ensiklopedia.
Penjelasan pertama yang dibagi untuk umum dari HTML adalah sebuah
dokumen yang disebut "Tanda HTML", pertama kali disebutkan di Internet
oleh Tim Berners-Lee pada akhir 1991.[5] Tanda ini menggambarkan 18
elemen awal mula, versi sederhana dari HTML. Kecuali untuk tag hyperlink,
yang sangat dipengaruhi oleh SGMLguid, in-house Standard Generalized
Markup Language (SGML) berbasis format dokumen di CERN. Sebelas
elemen ini masih ada di HTML 4.[6]
HTML adalah bahasa markah yang digunakan peramban untuk
menafsirkan dan menulis teks, gambar dan bahan lainnya ke dalam
halaman web secara visual maupun suara. Karakteristik dasar untuk setiap
item dari markah HTML didefinisikan di dalam peramban, dan karakteristik
ini dapat diubah atau ditingkatkan dengan menggunakan tambahan
halaman web desainer CSS. Banyak elemen teks ditemukan di laporan
teknis ISO pada tahun 1988 TR 9537 Teknik untuk menggunakan SGML,
yang pada gilirannya meliputi fitur bahasa format teks awal seperti yang
digunakan oleh komandan RUNOFF dikembangkan pada awal 1960-an
untuk sistem operasi: perintah-perintah format ini berasal dari perintah
yang digunakan oleh pengetik untuk memformat dokumen CTSS secara
manual. Namun, konsep SGML dari markah umum didasarkan pada unsur-
unsur daripada hanya efek cetak, dengan pemisahan struktur dan markah
juga; HTML telah semakin bergerak ke arah ini dengan CSS.

Sejarah versi HTML

 HTML 1.0 (Juni 1993)
HTML adalah bahasa markup yang akan ditampilkan dan dibaca oleh web
browser. Awalnya Tim Berners-Lee mengembangkan web browser sendiri
bernama WorldWideWeb yang kemudian berganti nama menjadi Nexus.
Pada tahun 1993, web browser lain banyak bermunculan seperti: Lynx,
Mosaic dan Arena tetapi, karena belum tersedia sebuah standar baku
bagaimana aturan HTML ditulis, masing-masing web browser
mendefinisikan versi HTML mereka sendiri.
Memiliki kemampuan antara lain heading, paragraph, hypertext, list, serta
cetak tebal dan miring pada teks
 HTML 2.0 (24 November 1995)
Karena draft HTML 1.0 mengalami permasalahan, pada awal 1994 IEFT
membentuk HTML Working Group (disingkat menjadi HTMLWG) yang
bertujuan untuk menyempurnakan HTML yang sebelumnya diusulkan oleh
Tim Berners-Lee dan Dave Raggett.

Pada Juli 1994, HTML 2.0 resmi menjadi standar HTML pertama yang di-
sah-kan oleh IEFT. HTML 2.0 memiliki spesifikasi yang didasari kepada draft
HTML 1.0 dengan penambahan beberapa fitur baru yang telah banyak
digunakan pada web browser saat itu.
penambahan kualitas HTML terletak pada kemampuannya untuk
menampilkan suatu form pada dokumen. Dengan adanya form ini, maka
kita dapat memasukkan nama, alamat, serta saran/kritik
 HTML 3.0 (28 Maret 1995)
 Pada tahun 1995, Dave Raggett mengajukan draft HTML 3.0 kepada
badan standarisasi IETF.
Namun, HTML 3.0 gagal menjadi standar baru, karena perbedaan antara
HTML 2.0 dengan HTML 3.0 begitu banyak.
Ini tentunya menyebabkan perdebatan tentang fitur-fitur yang harus
ditambahkan dan dihilangkan.
Menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut
juga sebagai HTML+
 HTML 3.2 (14 Januari 1997)
Pengembangan HTML kemudian dilanjutkan World Wide Web
Consortium (W3C).
Organisasi yang didirikan Tim Berners-Lee ini, mencoba memperbaiki
kembali draft HTML 3.0.
Pada akhirnya di bulan Januari 1997, HTML 3.2 resmi dirilis oleh W3C. Kali
ini W3C sendiri yang merilisnya, bukan melalui IETF. Ini karena HTMLWG
yang didirikan oleh IETF sudah bubar
 HTML 4.0 (24 April 1998)
Internet dan web semakin berkembang, ini membuat W3C mengajukan
lagi draft HTML yang baru. Yakni, HTML 4.0.
Pada versi ini, dilakukan penyempurnaan penulisan tag, mendukung CSS
secara penuh, dan menambahkan fitur multimedia.
Memuat banyak sekali perubahan dan revisi dari pendahulunya.
Perubahan ini terjadi hampir disemua perintah-perintah HTML seperti table,
image, link, text, meta, imagemaps, form, dan lain- lain.
 HTML 5 (22 Januari 2008)
10 Tahun lamanya, sejak rilis HTML 4 HTML 5 akhirnya lahir di tahun 2008.
Namun, di awal-awal HTML 5 belum bisa diterapkan.
Pada tahun-tahun ini, kira masih menikmati video player di web dengan
Flash Player.
Sejak direkomendasikan oleh W3C pada tahun 2014, Flash Player pun
mulai ditinggalkan dan digantikan dengan media player bawaan HTML 5.
Menambahkan prosedur pembuatan tampilan web baru yang merupakan
penggabungan antara CSS, HTML itu sendiri dengan Java Script

2. HTML memiliki fungsi tersendiri yaitu:

 Sebagai fondasi atau dasar dari sebuah website dengan membuat website
serta menentukan konten di dalam website melalui dokumen berbasis teks.

3. HTML dapat dibagi menjadi tiga kategori yaitu:

- Transisi DTD
Adalah berisi semua elemen dan atribut HTML

- Ketat (thight)
Yang dimana teks akan membungkus di sekitar objek dengan jarak
yang lebih dekat dan mengikuti kontur objek secara lebih rapat

- Frameset
Adalah kumpulan bingkai dan dapat menambahkan struktur ke
situs Web atau basis data

- Block and Inline

Setiap elemen HTML memiliki nilai tampilan default, tergantung

pada jenis elemen tersebut. Dua nilai tampilan yang paling umum
adalah blok dan sebaris.

 Elemen tingkat blok

Elemen tingkat blok selalu dimulai pada baris baru, dan browser
secara otomatis menambahkan beberapa spasi (margin) sebelum
dan sesudah elemen.
Elemen tingkat blok selalu mengambil lebar penuh yang tersedia
(membentang ke kiri dan kanan sejauh mungkin).
Dua elemen blok yang umum digunakan adalah: <p> dan <div>.

 The <p> mendefinisikan paragraf dalam dokumen HTML.

 The <div> mendefinisikan divisi atau bagian dalam dokumen
HTML.
 The <p> adalah elemen tingkat blok.
 The <div> adalah elemen tingkat blok.

 Inline Elements
Elemen sebaris tidak dimulai pada baris baru. Elemen inline hanya
mengambil lebar sebanyak yang diperlukan.
Ini adalah elemen
 <span> di dalam paragraf.
  <a> Menentukan hyperlink
 <strong> Mendefinisikan teks penting
 <input> Menentukan kontrol input
 <em> menampilkan gaya teks miring

- Basic HTML (Dasar HTML)

Tag Description

<! Menentukan jenis dokumen

DOCTYPE>

<html> Mendefinisikan dokumen HTML

<head> Berisi metadata/informasi untuk

dokumen

<title> Menentukan judul untuk dokumen

<body> Menentukan isi dokumen

<h1> to Mendefinisikan judul HTML

<h6>

<p> Mendefinisikan paragraf

<br> Menyisipkan satu jeda baris

<hr> Menentukan perubahan tematik dalam

konten

<!--...--> Mendefinisikan komentar

-
Formatting (Format)

Tag Description
<acronym Tidak didukung di HTML5. Gunakan <abbr>
> sebagai gantinya. Mendefinisikan akronim

<abbr> Mendefinisikan singkatan atau akronim

<address Menentukan informasi kontak untuk

> penulis/pemilik dokumen/artikel

<b> Mendefinisikan teks tebal

<bdi> Mengisolasi bagian teks yang mungkin

diformat ke arah yang berbeda dari teks lain di
luarnya

<bdo> Mengganti arah teks saat ini

<big> Tidak didukung di HTML5. Gunakan CSS

sebagai gantinya. Mendefinisikan teks besar

<blockquo Mendefinisikan bagian yang dikutip dari

te> sumber lain

<center> Tidak didukung di HTML5. Gunakan CSS

sebagai gantinya. Mendefinisikan teks yang
dipusatkan

<cite> Menentukan judul sebuah karya

<code> Mendefinisikan sepotong kode komputer

<del> Menentukan teks yang telah dihapus dari

dokumen

<dfn> Menentukan istilah yang akan didefinisikan

dalam konten

<em> Mendefinisikan teks yang ditekankan

<font> Tidak didukung di HTML5. Gunakan CSS
sebagai gantinya. Menentukan font, warna,
dan ukuran untuk teks

<i> Mendefinisikan bagian teks dalam suara atau

suasana hati alternatif

<ins> Menentukan teks yang telah disisipkan ke

dalam dokumen

<kbd> Menentukan input keyboard

<mark> Menentukan teks yang ditandai/disorot

<meter> Menentukan pengukuran skalar dalam rentang

yang diketahui (pengukur)

<pre> Menentukan teks yang telah diformat

sebelumnya

<progress Mewakili kemajuan tugas

>

<q> Mendefinisikan kutipan singkat

<rp> Menentukan apa yang akan ditampilkan di

browser yang tidak mendukung anotasi ruby

<rt> Mendefinisikan penjelasan/pengucapan

karakter (untuk tipografi Asia Timur)

<ruby> Mendefinisikan anotasi ruby (untuk tipografi

Asia Timur)

<s> Mendefinisikan teks yang tidak lagi benar

<samp> Menentukan contoh output dari program

komputer

<small> Mendefinisikan teks yang lebih kecil

 <strike> Tidak didukung di HTML5. Gunakan <del>
atau <s> sebagai gantinya. Menentukan teks
yang dicoret

<strong> Mendefinisikan teks penting

<sub> Mendefinisikan teks subskrip

<sup> Menentukan teks superskrip

<template Menentukan penampung untuk konten yang

> harus disembunyikan saat halaman dimuat

<time> Menentukan waktu (atau tanggalwaktu)

tertentu

<tt> Tidak didukung di HTML5. Gunakan CSS

sebagai gantinya. Mendefinisikan teks teletype

<u> Mendefinisikan beberapa teks yang tidak

diartikulasikan dan ditata berbeda dari teks
normal

<var> Mendefinisikan variabel

<wbr> Menentukan kemungkinan jeda baris

- ADVERTISEMENT (Peiklanan)

Forms and Input

Tag Description

<form> Menentukan formulir HTML untuk input

pengguna

<input> Menentukan kontrol input

 <textarea> Menentukan kontrol input multibaris
(area teks)

<button> Menentukan tombol yang dapat diklik

<select> Menentukan daftar drop-down

<optgroup Menentukan sekelompok opsi terkait

> dalam daftar drop-down

<option> Menentukan opsi dalam daftar drop-

down

<label> Menentukan label untuk elemen <input>

<fieldset> Mengelompokkan elemen terkait dalam

formulir

<legend> Defines a caption for a <fieldset>

element

<datalist> Menentukan daftar opsi yang telah

ditentukan sebelumnya untuk kontrol
input

<output> Menentukan hasil perhitungan

- Frames (Bingkai)

Tag Description

<frame> Tidak didukung di HTML5. Mendefinisikan

jendela (bingkai) dalam kumpulan
bingkai

<frameset Tidak didukung di HTML5. Menentukan

> sekumpulan bingkai

<noframes Tidak didukung di HTML5. Menentukan

 > konten alternatif untuk pengguna yang
tidak mendukung bingkai

<iframe> Menentukan bingkai sebaris

- Images (Gambar)

Tag Description

<img> Menentukan gambar

<map> Menentukan peta gambar sisi klien

<area> Menentukan area di dalam peta gambar

<canvas> Digunakan untuk menggambar grafik,

dengan cepat, melalui skrip (biasanya
JavaScript)

<figcaption Menentukan keterangan untuk elemen

> <figure>

<figure> Menentukan konten mandiri

<picture> Menentukan penampung untuk beberapa

sumber daya gambar

<svg> Menentukan kontainer untuk grafik SVG

- Audio / Video (Suara/Vidio)

Tag Description

<audio> Mendefinisikan konten suara

<source> Menentukan beberapa sumber daya

media untuk elemen media (<video>,
 <audio> dan <gambar>)

<track> Menentukan trek teks untuk elemen

media (<video> dan <audio>)

<video> Menentukan video atau film

- Links (Tautan/Hyperlink)

Tag Description

<a> Menentukan hyperlink

<link> Menentukan hubungan antara dokumen

dan sumber daya eksternal (paling
banyak digunakan untuk menautkan ke
lembar gaya)

<nav> Menentukan tautan navigasi

- Lists (Daftar)

Tag Description

<menu> Menentukan daftar alternatif yang tidak

berurutan

<ul> Menentukan daftar yang tidak berurutan

<ol> Menentukan daftar yang diurutkan

<li> Menentukan item daftar

<dir> Tidak didukung di HTML5. Gunakan <ul>

sebagai gantinya. Menentukan daftar
direktori

<dl> Menentukan daftar deskripsi

 <dt> Mendefinisikan istilah/nama dalam daftar
deskripsi

<dd> Menentukan deskripsi istilah/nama

dalam daftar deskripsi

- Tables (Tabel)

Tag Description

<table> Mendefinisikan tabel

<caption> Menentukan keterangan tabel

<th> Menentukan sel header dalam tabel

<tr> Menentukan baris dalam tabel

<td> Menentukan sel dalam tabel

<thead> Mengelompokkan konten header dalam

tabel

<tbody> Mengelompokkan konten isi dalam tabel

<tfoot> Mengelompokkan konten footer dalam

tabel

<col> Menentukan properti kolom untuk setiap

kolom dalam elemen <colgroup>

<colgroup> Menentukan grup satu atau beberapa

kolom dalam tabel untuk pemformatan

- Styles and Semantics (Gaya dan Semantik {Mempelajari gaya

bahasa})
Tag Description

<style> Menentukan informasi gaya untuk

dokumen

<div> Mendefinisikan bagian dalam dokumen

<span> Mendefinisikan bagian dalam dokumen

<header> Menentukan header untuk dokumen atau

bagian

<hgroup> Menentukan header dan konten terkait

<footer> Menentukan footer untuk dokumen atau

bagian

<main> Menentukan konten utama dokumen

<section> Mendefinisikan bagian dalam dokumen

<search> Menentukan bagian pencarian

<article> Mendefinisikan artikel

<aside> Mendefinisikan konten selain konten

halaman

<details> Menentukan detail tambahan yang dapat

dilihat atau disembunyikan pengguna

<dialog> Menentukan kotak dialog atau jendela

<summary Menentukan judul yang terlihat untuk

> elemen <detail>

<data> Menambahkan terjemahan yang dapat

dibaca mesin dari konten tertentu
- Meta Info (Informasi)

Tag Description

<head> Menentukan informasi tentang dokumen

<meta> Menentukan metadata tentang dokumen

HTML

<base> Menentukan URL/target dasar untuk

semua URL relatif dalam dokumen

<basefont> Tidak didukung di HTML5. Gunakan CSS

sebagai gantinya. Menentukan warna,
ukuran, dan font default untuk semua
teks dalam dokumen

- Programming

Tag Description

<script> Menentukan skrip sisi klien

<noscript> Menentukan konten alternatif untuk

pengguna yang tidak mendukung skrip
sisi klien

<applet> Tidak didukung di HTML5. Gunakan

<embed> atau <object> sebagai
gantinya. Mendefinisikan applet yang
disematkan

<embed> Menentukan kontainer untuk sumber

daya eksternal

<object> Menentukan kontainer untuk sumber

daya eksternal
 <param> Menentukan parameter untuk objek

4. HTML memiliki beberapa kerangka atau struktur sebagai

berikut:

- Head
Dokumen HTML diapit oleh tag <head>. Di dalam bagian ini biasanya
dimuat tag <title> yang menampilkan judul halaman pada titlenya
browser. Selain itu bookmark juga menggunakan tag <title> untuk
memberi mark suatu web site. Browser menyimpan “title”
sebagai bookmark dan juga untuk keperluan pencarian (searching)
biasanya title digunakan sebagai keyword. Header juga memuat
tag META yang biasanya dapat digunakan untuk menentukan informasi
tertentu mengenai dokumen HTML. Pengguna bisa menentukan author
name, keywords, dan lainnya pada tag META.
Contoh:
<meta name="author" content="ubuntu-online">
- Body
Bagian "body", yang dinyatakan dengan tag <body>, merupakan tubuh
atau isi dari dokumen HTML di mana pengguna meletakkan informasi yang
akan ditampilkan pada browser.
- Tag
HTML bersifat case-insensitive, yang berarti tidak membedakan
penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu
elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag
tersebut. Tag ini dinyatakan dengan tanda kurung sudut (< dan >).
Tag biasanya merupakan suatu pasangan yang disebut dengan:
 Tag awal, dinyatakan dalam bentuk <nama tag>
 Tag akhir, dinyatakan dalam bentuk </nama tag>
Formatnya: <nama tag> teks yang ditampilkan </nama tag>.
Contoh: untuk menampilkan teks dalam format teks miring Teks ini
terlihat miring di browser anda dengan perintah HTML <i>Teks ini terlihat
miring di browser Anda</i>
- Atribut
Tag awal bisa memiliki beberapa buah atribut yang menyatakan
karakteristik dari tag tersebut. Misalnya, <p style="text-align:
left;"> digunakan untuk membuat rata kiri suatu paragraf. Tag yang
digunakan adalah <p> dan atribut yang menyertainya adalah "style"
dengan nilai "text-align: left". Nilai atribut "style" ditulis dalam CSS.
<header>
Header dari sebuah section, mungkin lebih enak menyebutnya seperti itu.
Biasanya Header berfungsi untuk menentukan header dari website yang
berisi Logo/Nama Website atau deskripsi website
header juga bisa diletakkan diantara <section>, untuk menandakan judul
dari sebuah section
<section>
Section biasanya digunakan untuk meletakkan konten, sebuah section
biasanya diletakkan setelah Header, dan sebelum Footer
<nav>
Untuk mendefinisikan area navigasi, biasanya berisi daftar link.
<article>
Article biasanya untuk menempatkan entry independent dalam sebuah
blog, majalah, ringkasan dan sebagainya. Biasanya terletak didalam
section
<aside>
Sebuah aside menunjukan konten yang berkaitan dengan konten lain nya
yang ada di sekitar nya. Biasanya aside bisa digunakan untuk area sidebar
pada sebuah blog.
<footer>
Untuk menentukan bagian footer atau bagian bawah dari sebuah website,
biasanya berisi hak cipta dari sebuah website.
Penggunaan nya dalam struktur HTML selengkapnya sebagai
berikut:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<title>Your Website</title>
</head>
<body>
 <header>
<nav>
<ul>
<li>Your menu</li>
</ul>
</nav>
</header>

<section>
<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-
04T16:31:24+02:00">September 4th 2009</time> by <a
href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.</p>
</article>

<article>
<header>
<h2>Article title</h2>
<p>Posted on <time datetime="2009-09-
04T16:31:24+02:00">September 4th 2009</time> by <a
href="#">Writer</a> - <a href="#comments">6 comments</a></p>
</header>
<p>Pellentesque habitant morbi tristique senectus et
netus et malesuada fames ac turpis egestas.</p>
</article>

</section>
 <aside>
<h2>About section</h2>
<p>Donec eu libero sit amet quam egestas semper. Aenean
ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</aside>

<footer>
<p>Copyright 2009 Your name</p>
</footer>
</body>
</html>

Kesimpulan:
HTML merupakan dasar dari sebuah website yang telah berevolusi dari
versi 1.0 hingga sekarang yaitu versi 5.0. seperti yang kira gunakan
sekarang yang awalnya hanya bisa untuk mengetik paragraf hingga
sekarang bisa menggabungkan bahasa pemrograman CSS dan Java Script
serta menambahkan banyak tag dan atribut yang dapat membuat tampilan
website sehingga memungkinkan dapat membuat tampilan menjadi lebih
menarik.