SEJARAH & PERKEMBANGAN HTML

Hypertext Markup Language (HTML) adalah suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. Namun HTML bukanlah sebuah bahasa pemrograman, melainkan adalah sebuah standar yang digunakan secara luas
untuk menampilkan halaman web. HTML saat ini merupakan standar internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, harus disetujui oleh W3C untuk dievaluasi secara ketat. Dengan demikian, setiap terjadi perkembangan level, HTML memiliki suatu kelebihan yang baru dalam hal penampilannya ketimbang versi-versi sebelumnya. Jika ada bug pada perintah-perintah tertentu dapat dihindari.

Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. HTML itu sendiri awalnya dari bahasa SGML (Standard Generalized MarkUp Language), yang sudah digunakan sejak dulu untuk memformat dokumen agar bersifat portabel. Tata cara penulisan HTML merupakan penyederhanaan SGML.

Sejarah HTML

Sejarah HTML atau Hypertext Markup Language telah menjadi teknologi utama untuk Web sejak awal tahun 1990-an. Tim Berners-Lee menciptakan HTML pada tahun 1989 sebagai cara sederhana namun efektif untuk mengkodekan dokumen elektronik. Bahkan, tujuan awal dari web browser adalah untuk melayani pembaca untuk membuka dokumen berformat HTML.

Perkembangan HTML

Didalam HTML telah mengalami berbagai perkembangan dari tiap-tiap versinya. Berikut adalah versi-versi dari perkembangan HTML tersebut:

HTML Versi 1.0

HTML Versi 1.0 merupakan pionir yang di dalamnya masih terdapat banyak sekali kelemahan hingga wajar jika tampilan yang dihasilkan sangat sederhana. Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraf, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan teks di sekelilingnya (wraping)

HTML Versi 2.0

Pada HTML Versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, kita dapat memasukkan nama, alamat, serta saran dan kritik. HTML versi 2.0 ini merupakan pionir dari adanya web interaktif.

HTML Versi 3.0

Versi HTML 3.0 menambahkan beberapa fasilitas baru seperti FIGURE yang merupakan perkembangan dari IMAGE untuk meletakkan gambar dan tabel. Selain itu, HTML ini juga mendukung adanya rumus-rumus matematika dalam dokumennya. Versi ini yang disebut HTML+- tidak bertahan lama dan segera digantikan dengan versi 3.2.

HTML Versi 3.2

HTML versi ini merupakan HTML yang sering digunakan. Di dalamnya terdapat suatu teknologi untuk meletakkan teks di sekeliling gambar, gambar sebagai latar belakang, tabel, frame, style sheet dan lain-lain. Selain itu pada HTML versi ini Kita bisa menggunakan script di luar HTML untuk mendukung kinerja HTML kita tersebut, seperti Javascript, VBScript dan lain-lain.

HTML Versi 4

HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya yaitu HTML 3.2. Perubahan ini hampir terjadi di segala perintah HTML seperti tabel, image, link, text, meta, imagemaps, form dan lain-lain.

HTML Versi 4.01

HTML versi 4.01 merupakan revisi dari HTML 4.0. Versi terbaru ini memperbaiki kesalahan-kesalahan kecil (minor errors) pada versi terdahulunya. HTML 4.01 ini juga menjadi standarisasi untuk elemen dan atribut dari script XHTML 1.0.

HTML Versi 5.0

Teknologi ini mulai diluncurkan pada tahun 2009, tetapi pada tanggal 4 Maret 2010 terdapat sebuah informasi bahwa W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0 telah mengmbangkan versi HTML terbaru, yaitu versi 5.0.

HTML 5 adalah sebuah prosedur pembuatan tampilan web baru yang merupakan penggabungan antara CSS, HTML itu sendiri dengan JavaScript.

Beberapa kelebihan yang dimiliki oleh HTML5 adalah:

Cleaner code
Karena sebagian besar kode telah termasuk di dalam sintaks HTML5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara HTML, CSS dan Java Script.

Greater consistency
HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.

Improve Semantics
Berbagai elemen kode di dalam HTML5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya. Selain itu juga terbentuk dalam sebuah “machine readible format”.

Improved Accessibility
Teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenai halaman web.

Client-side Database
HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.

Geolocation
HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.

Offline Aplication Cache
Pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.

Smarter Forms
Terdapat semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll)

Sharper focus on Web Application Requiments
HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi.

STRUKTUR DASAR HTML 

a. Elemen

Elemen terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup.Contonya untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML.

b. Tag
Tag merupakan teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. Tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body>ini adalah tag penutup isi dokumen HTML. Yang merupakan tag-tag dasar dalam HTML adalah:

<html> </html>

Tag <html> dan </html> digunakan untuk menandai awal dan akhir dari suatu file HTML.

 <title> </title>

Tulisan yang berada diantara tag <title> dan </title> akan ditampilkan oleh browser pada bagian title dan merupakan title dari jendela browser.

 <head> </head>

Berisi keterangan informasi, seperti title dan jenis dokumen, ditulis diantara <head> </head>.

 <body> </body>

Bagian tag <body> </body> menandai awal dan akhir dari badan dokumen HTML. Tag ini memiliki sejumlah attribut yang dapat ditentukan.

Contoh :

<html>

<head>

<title>Contoh Document HTML</title>

</head>

<body>

Hallo Pembaca Makalah Pemrograman Dasar WEBsite dengan HTML.

</body>

</html>

c. Atribut

Atribut terdapat di dalam script sebuah elemen dan memberikan informasitambahan tentang elemen. Atribut selalu ditentukan dalam tag awal Atribut ditulis dalam pasangan nama / nilai.

Nilai dari atribut harus selalu tertutup dalam tanda kutip. Tanda kutip ganda adalah yang paling umum, tapi gaya tanda kutip tunggal juga diperbolehkan. Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip, maka perlu menggunakan tanda kutip tunggal Misalnya: name = 'John "shotgun" Nelson'.

Di bawah ini adalah daftar dari beberapa atribut yang dapat digunakan pada setiap elemen HTML :

Atribut	Deskripsi
Class	Menentukan satu atau lebih classnames untuk sebuah elemen(mengacu pada kelas dalam style sheet).
Id	Menentukan id unik untuk sebuah elemen.
Style	Menentukan inline CSS style untuk elemen.
Title	Menentukan informasi tambahan mengenai elemen (ditampilkan sebagai tool tip).

D.      Pengaturan Halaman HTML  

1. Mengatur Tulisan pada Halaman HTML


Agar tulisan pada halaman sebuah web terlihat rapi, maka perlu pemformatan dalam tulisan tersebut. Baik tata cara pencetakannya maupun pengaturan tulisan yang lain. Adapun pengaturan format tersebut antara lain  :

a. Heading
Heading adalah hal yang penting dalam sebuah Document HTML. Heading didefinisikan dengan tag <h1> sampai dengan <h6>. Semakin besar angka dalam penulisan tag Heading semakin kecil ukuran yang tercetak dalam Browser.

      Contoh:

<html>

<body>

<h1>Penulisan heading 1</h1>

<h2>Penulisan heading 2</h2>

<h3>Penulisan heading 3</h3>

<h4>Penulisan heading 4</h4>

<h5>Penulisan heading 5</h5>

<h6>Penulisan heading 6</h6>

</body>

</html>

b. Paragraf

Membuat paragraf dalam HTML dapat menggunakannya dengan tag <p>. Pada browser, secara otomatis penulisan paragraf akan  menambahkan baris kosong sebelum dan sesudah paragraf.

Sebagian besar browser akan membenarkan penulisan HTML Paragraf, bahkan jika kita melupkan tag tersebut. Tetapi, tidak menuliskan tag dalam penulisan paragraf membuat hasil tulisan yang tercetak pada HTML tidak tertulis rapi.

Dalam penulisan paragraf, untuk mengganti baris dalam paragraf tersebut dapat kita gunakan tag break, dapat di tulis <br> atau <br \>.

Contoh :

<html>

<body>

<p>Penulisan Paragraf 1. </p>

<p>Penulisan Paragraf 2. </p>

<p>Penulisan <br \> Paragraf 3. </p>

</body>

</html>

c. Format Teks  

Banyak sekali tag yang digunakan untuk menformat sebuah tulisan dalam HTML. Menformat paragraf yang di maksudkan adalah membuat text bercetak tebal, bercetak miring, subscript text, superscript text dan masih banyak format yang lainnya. Untuk lebih jelasnya lihat tabel.

HTML tags Formating Text

Tags	Description
<b>	Mendefinisikan Teks bercetak tebal
<i>	Mendefinisikan Teks bercetak miring
<small>	Mendefinisikan Teks kecil
<strong>	Mendefinisikan Teks penting
<sub>	Mendefinisikan Teks Subscript
<sup>	Mendefinisikan Teks Superscript
<ins>	Mendefinisikan Teks yang dimasukan
<del>	Mendefinisikan Teks yang dihapus

HTML Computer Output Tags

Tags	Descriptions
<code>	Mendefinisikan Kode Komputer
<kbd>	Mendefinisikan tekx Keyboard
<samp>	Mendefinisikan Sampel kode komputer
<var>	Mendefinisikan Variabel
<pre>	Mendefinisikan teks terformat

 HTML Citations, Quotations, dan Definition Tags

Tags	Descriptions
<abbr>	Mendefinisikan sebuah singakatan atau akronim
<address>	Mendefinisikan informasi kontak untuk penulis / pemilik document
<bdo>	Mendefinisikan arah teks
<blockquote>	Mendefinisikan bagian yang dikutip dari sumber lain
<q>	Mendefinisikan sebuah inline (pendek) kutipan
<cite>	Mendefinisikan Judul karya
<dfn>	Mendefinisikan sebuah istilah definisi

d. Mengatur Pemerataan Paragraf

Pemerataan tulisan sangat mempengaruhi tampilan dari halaman web anda, ada kalanya tulisan tertentu perlu ditampilkan pada tengah halaman, atau pun justified. Tag-tag HTML yang mengatur pemerataan tulisan pada satu halaman:

·           <CENTER> </CENTER>

Tag ini akan menampilkan tulisan/gambar ditengah baris.

·           <P ALIGN=LEFT|CENTER|RIGHT> </P>

Tag paragraf digunakan untuk memulai suatu paragraf baru disertai dengan pemerataan teks ke kiri, tengah, atau kanan dari tampilan browser untuk paragraf bersangkutan. Suatu paragraf dapat terdiri dari teks, gambar, hyperlink, dan element HTML lainnya.

·           <H# ALIGN=LEFT|CENTER|RIGHT> </H#>

Ini akan merapikan tulisan ke kiri, tengah atau kanan dari tulisan yang diberi tingkat heading.

e. Menyisipkan Gambar

<html>

<body>

<img src="../images.jpg">

</body>

</html>

Dalam HTML, gambar didefinisikan dengan tag <img>. Tag <img> kosong, yang berarti mengandung atribut saja, dan tidak memiliki tag penutup. Untuk menampilkan gambar pada halaman, Anda perlu menggunakan atribut src. Src singkatan dari "sumber". Nilai dari atribut src adalah URL gambar yang ingin ditampilkan.

Sintaks untuk mendefinisikan gambar:

<img src="url" alt="some_text">

URL menunjuk ke lokasi di mana gambar disimpan. Sebuah gambar bernama "image.jpg", yang terletak luar direktori dari file “image.html”.

Browser menampilkan gambar di mana tag <img> terjadi dalam dokumen. Jika Anda menempatkan tag gambar antara dua paragraf, browser menunjukkan paragraf pertama, maka gambar, dan kemudian paragraf kedua.

f. Link ke Dokumen atau Situs yang Lain

HTML tag <a> mendefinisikan hyperlink. Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat Anda klik untuk melompat ke dokumen lain.

Bila Anda memindahkan kursor di atas link dalam sebuah halaman Web, panah akan berubah menjadi sedikit tangan. Atribut yang paling penting dari elemen <a> adalah atribut href, yang menunjukkan tujuan link.

Secara default, link akan muncul sebagai berikut di semua browser:

·      Link belum dikunjungi digarisbawahi dan biru

·      Sebuah link dikunjungi digarisbawahi dan ungu

·      Link aktif digarisbawahi dan merah

Contoh Penulisan tags Link :

<a href=”http://www.example.com/”>Klik Link</a>

g. Penulisan Komentar dalam HTML

Komentar dalam penulisan HTML hanyal untuk menandai sebuah tags agar kita dapat lebih memahami maksud dari tujuan dari tags yang kita buat. Penulisan Komentar tidak dapat di tampilkan dalam sebuah Browser. Tags dari komentar adalah <!---->

Contoh :

<!-- Tulis Komentar disini -->

2. Membuat List

Agar dokumen kita mudah dibaca dan jelas, ada bagian tertentu yang perlu ditampilkan dalam list. List yang paling umum di Gunakan adalah Unordered List dan Ordered List :

a. Unordered List

Unordered list ditandai dengan tag <ul> dan setiap daftar item ditandai dengan <li>. Hasil dari Unordered List adalah lingkarang bulat kecil.

Contoh :

<html>

<body>

<ul>

        <li>Unordered List 1</li>

        <li>Unordered List 2</li>

        <li>Unordered List 3</li>

</ul>

</body>

</html>

b. Ordered List

Ordered list dimulai dengan tag <ol> dan setiap item daftar dimulai dengan tag <li>. Daftar item ditandai dengan angka.

Contoh :

<html>

<body>

<ol>

        <li>Ordered List 1</li>

        <li>Ordered List 2</li>

        <li>Ordered List 3</li>

</ol>

</body>

</html>

3. Membuat Tabel dan Pengaturannya

Tabel didefinisikan dengan tag <table>. Sebuah tabel dibagi menjadi baris (dengan tag <tr>), dan setiap baris dibagi menjadi beberaapa kolom (dengan tag <td>).

Di dalam tag <tabel> harus terdapat attribut “border” dan tebal dari border tersebut. Jika Anda tidak menentukan atribut border, tabel akan ditampilkan tanpa batas atau garis.

Contoh :

<table border="1">

            <tr>

            <td>Baris 1, Kolom 1</td>

        <td>Baris 1, Kolom 2</td>

            </tr>

    <tr>

            <td>Baris 2, Kolom 1</td>

        <td>Baris 2, Kolom 2</td>

    </tr>

</table>

Tags	Descriptions
<table>	Mendefinisikan Tabel
<th>	Mendefinisikan sel header Tabel
<tr>	Mendefinisikan Tabel baris
<td>	Mendefinisikan Tabel Kolom
<caption>	Mendefinisikan Judul Tabel
<colgroup>	Menentukan sekelompok dari satu atau lebih kolomdalam sebuah tabel untuk memformat
<col>	Menentukan sifat kolom untuk setiap kolom dalam elemen <colgroup>
<thead>	Grup isi header dalam sebuah tabel
<tbody>	isi tubuh dalam sebuah tabel
<tfoot>	isi footer dalam sebuah tabel

4. Membuat Form dan Pengaturannya

From digunakan untuk membuat sebuah inputan untuk pengguna yang nantinya akan dikirim ke server. Bentuk form terdiri dari beberapa elemen diantaranya teks, checkbox, radio button, tombol submit dan banyak lagi. Form juga dapat berisi daftar pilih, textarea, fieldset, legenda, dan elemen label. Untuk lebih jelasnya lihat Tabel :

Element pada Form

Element	Descriptions
text	Mendefinisikan satu baris field input yang pengguna dapat memasukkan teks
password	Mendefinisikan satu baris field input yang pengguna dapat memasukkan teks yang dirahasiakan
radio	mendefinisikan satu baris field input yang pengguna dapat memilih hanya satu saja
checkbox	mendefinisikan satu baris field input yang pengguna dapat tidak memilih atau pilih semua.
button / submit / reset	Mendefinisikan bentuk tombol untuk mengirim semua form
file	mendefinisikan satu baris field input yang pengguna dapat upload file
hidden	mendefinisikan satu baris field input yang pengguna dapat menyembunyikan form

Tags Pada Form

Tags	Descriptions
<form>	Mendefinisikan sebuah form HTML untuk input pengguna
<input>	Mendefinisikan sebuah kontrol input
<textarea>	Mendefinisikan sebuah kontrol input multiline (text area)
<label>	Mendefinisikan sebuah label untuk sebuah elemen
<fieldset>	terkait unsur-unsur dalam bentuk
<legend>	Mendefinisikan sebuah caption untuk elemen <fieldset>
<select>	Mendefinisikan sebuah daftar drop-down
<optgroup>	Mendefinisikan sebuah kelompok pilihan yang terkait dalam daftar drop-down
<option>	Mendefinisikan pilihan dalam daftar drop-down
<button>	Mendefinisikan sebuah tombol diklik
<datalist>	Baru Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input
<keygen>	Baru Mendefinisikan kunci-pair bidang pembangkit(untuk formulir)
<output>	Baru Mendefinisikan hasil penghitungan

5.    Menggunakan Karakter Khusus

Berikut ini tata cara pengetikkan untuk menampilkan karakter khusus padahalaman html :

Symbol	Description	Caracter
©	Copyright symbol	©
®	registered trademark symbol	®
™	trademark symbol	™
 	nonbreaking space

&lt;	less-than symbol	<
&gt;	greater-than symbol	>
&amp;	Ampersand	&
&quot;	quotation mark	“

Pada tabel di atas hanyalah sebagian dari banyak karakter yang ada dalam HTML. kita hanya mengetikan “&” dan pilih karakter yang akan anda gunakan. <![endif]-->

SOURCE :

http://www.global-komputer.com/blog/artikel-19-sejarah-dan-perkembangan-html.html  

http://computertoons.blogspot.co.id/2013/10/struktur-dasar-html-dalam-pembuatan-web.html 
https://id.wikipedia.org/wiki/HTML