HYPERTEXT MARKUP LANGUAGE

Dasar sebuah halaman website adalah bahasa pemrograman yang digunakan, salah satunya adalah HyperText Markup Language atau yang biasa disingkat HTML.  HTML menyusun situs menjadi tampilan seperti yang diinginkan oleh web desainer. Versi terbaru dari HTML adalah HTML5 yang dapat mengakses hirarki objek di dalam suatu website, akses tersebut dilakukan via Javascript. Di dalam HTML5 terdapat CSS (Cascading Style Sheets) yang mengatur konten grafis pada website.

Javascript dan CSS adalah bahasa pemrograman yang sudah sangat lama dan tidak cukup untuk memenuhi kebutuhan saat ini. HTML5 hadir sebagai standar baru yang bisa memenuhi segala fungsi yang dibutuhkan.

SEJARAH HTML

Standard HTML merupakan kesepakatan antara World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG). Landasan dari Working Group adalah:

  • Standardnya menggunakan HTML, CSS, DOM, Javascript
  • Tidak ada Plugin
  • Lebih banyak Markup, tidak menonjol, mengurangi scripting langsung
  • Tidak bergantung dengan perangkat
Versi HTML Tahun
HTML 1991
HTML+ 1993
HTML2 1995
HTML3.2 1997
HTML4.01 1999
XHTML1.1 2001
WHATWG 2004
WHATWG and W3C Cooperation 2006
HTML5 2012
XHTML5 2013
HTML5.2 2015 – 2016
XML Dasar pada HTML

Pengetahuan tentang struktur dokumen XML juga dibutuhkan karena XML menggunakan konsep yang sama. Kebalikan dari bahasa pemrograman, Bahasa Markup (Markup Languages) digunakan untuk mendeskripsikan isi dari konten.

Markup
Struktur dan Fitur dari XML.

Struktur pada dokumen XML mengikuti aturan yang tegas. Peraturan-peraturan ini memungkinkan sistem diproses secara otomatis. Di sisi lain, pekerjaan harus universal dan sesuai dengan saran dari XML. Aturan mengizinkan pengecekan dokumen oleh program pengolah data tanpa harus mengetahui tata bahasa dari program yang diperiksa. Istilah tersebut adalah Shapeliness yang berarti “terbentuk dengan baik” yang merupakan dasar dari bahasa markup. Sebuah dokumen dianggap Shapely (indah) jika mengikuti aturan yang berlaku:

  • Semua tag benar secara sintaks. Tag awalan selalu diakhiri dengan end tag, perbedaan huruf besar dan huruf kecil diperhatikan.
  • Semua atribut benar secara sintaks. Parameter dari suatu attribute selalu ditempati diantara tanda quote (<tag attr= “parameter”>). Attribut yang disingkat tidak dibolehkan.
  • Nesting yang benar sangat diperlukan. Tag yang digunakan harus saling berpaut dengan benar. Contohnya <a><i></i></a>.

Semua tag yang strukturnya menjelaskan sesautu pada XML disebut dengan Markup:

  • Tags untuk memulai suatu bagian: <startTag>. Contoh <head> ;
  • Tags untuk mengakhiri suatu bagian: </endTag>. Contoh </head>;
  • Element Kosong: <EmptyElement/>;
  • Referensi Entity: &amp;
  • Referensi Karakter: &x0f;
  • CDATA limiter: <![CDATA[ no XML ]]>;
  • Instruksi untuk proses: <? include (“data.php”) ?> ;
  • Komentar: <!– Comment –> ;
  • Deklarasi XML : <?xml version=”1.0″?> ;
  • Deklarasi tipe dokumen <!DOCTYPE HTML PUBLIC ;
  • Deklarasi Teks: <?xml encoding=”utf-8″ ?> ;

Spesial karakter

  • &amp; untuk karakter &
  • &gt; untuk karakter <
  • &lt; untuk karakter >

Quotes:

  • &quot; untuk karakter “
  • &apos; untuk karakter ‘

Grammar harus selalu di periksa. Karena hal tersebut bersangkutan dengan tags yang dibolehkan dan attribute yang mungkin dapat diaplikasikan. Langkah ini disebut dengan validation. Sebelum diproses, sintaks harus dinyatakan valid. Terdapat prosedur-prosedur pada validation tersebut.

Empty Element

Dalam bahasa Markup terdapat fitur Empty element. Empty element tidak ada isinya. Empty element yang biasa dikenal seperti: <br> , <hr>, <meta> dan lainnya. Empty element yang jarang digunakan yaitu, <area>, <base>, <track>. Empty element tidak bisa menggunakan coding seperti <br></br> namun ditulis <br>.

STRUKTUR HTML
				
					<!DOCTYPE html>
<html lang="en" >
<head>
<title>Your Website</title>
</head>
<body>
</body>
</html>

Tag body menunjukkan isi dari konten website HTML. Tag head adalah blok atau bagian kontrol pada website. Setiap dokumen wajib memiliki <!DOCTYPE> untuk deklarasi tipe dokumen tersebut, browser akan mengidentifikasi sebagai website jika DOCTYPE dokumen tersebut didekalarasikan sebagai HTML.

HEAD AREA
				
					 <!doctype html>            
<head>
<meta charset="utf-8">
<meta name="viewport">
<content="width=device-width, initial-scale=1.0">
 <meta name="keywords">
<content="your website">
 	 	 	 	<link rel="stylesheet" href="style.css">
<style>
<!--- style  -->
</style>
 <title> Your Site  </title>
</head>

Coding diatas merupakan bagian dari Head Area yang terdiri dari meta name, content dan lainnya. Encoding yang digunakan harus dideklarasikan secara spesifik. Salah satu standar adalah UTF-8 yang memiliki karakter special. Untuk mencegah halaman web terlihat kecil di smartphone dapat dideklarasikan dengan <meta name=”viewport”> yang dapat beradaptasi dengan layar. Title tags berfungsi untuk menampilkan judul website pada Tab bar di web browser.

STRUKTUR HTML 5
				
					<!doctype html>            
<html>
<head>
<meta charset="utf-8">
 <title>Struktur HTML 5</title>
 </head>
 <body>
 <header>
<img decoding="async" src="logo.png" alt="logo">




<h1>Your Website</h1>




</header>
<footer>
<a href="contactus.html">Hubungi kami</a>

&copy;   by your website
</footer>
</body>
</html>

Kebanyakan halaman website memiliki page header yang terdapat pada sebelum bagian body. Biasanya page header mengandung logo, judul, dan elemen navigasi website.

Pada coding diatas terdapat footer yang berupa kontak dan copyright. Terkadang terdapat juga sitemap. Namun footer tidak diharuskan ada pada halaman html.