Budi Aji's Website - Detail Post

Apa sih HTML itu?

Sekarang ini teknologi internet bukanlah suatu hal yang aneh bagi kita semua. Dengan adanya internet kita dapat melakukan kontak dengan orang lain yang jauh sekalipun, misalnya kerabat yang berada diluar negeri. Salah satu teknologi yang menerapkan internet adalah Website. Sedangkan kerangka dasar yang dipakai untuk membangun sebuah website adalah bahasa yang dinamakan HTML. Apa sih HTML itu ?.

HTML adalah singkatan dari Hypertext Markup Language. HTML adalah standar bahasa yang digunakan untuk membuat sebuah website. Karena HTML dapat berjalan di semua jenis browser. Jika anda belum pernah mengetahui HTML mungkin akan bingung dalam memahaminya. Tetapi memalui tulisan ini diharapkan dapat memudahkan pembaca dalam memahaminya.

Tulisan ini untuk siapa?

Ditujukan untuk Anda yang pemula

Tujuan Tulisan

Mengenal dan memahami HTML

Persiapan dan Tools

Browser (Internet Explorer atau Mozilla Firefox atau Opera atau lainnya)
Text Editor / Web Editor (Notepad atau Macromedia Dreamweaver)
Sistem Operasi : Windows XP

Asal mula terciptanya HTML dipicu karena besarnya peluang internet yang dipakai sebagai sarana bisnis. Beberapa ilmuan fisika dari CERN(the European Particle Physics Laboratory), menciptakan bahasa penuntun dan sistem terdistribusi yang mereka buat untuk membuat dan memungkinkan untuk berbagi multimedia, dokumen elektronik yang terintegrasi melalui internet. Lalu lahirlah HTML(Hypertext Markup Language), HTML dapat berjalan di berbagai browser karena HTML adalah standar bahasa yang digunakan untuk membuat halaman website. Halam website dapat berisi berbagai macam elemen didalamnya :

Text
Grafik
Form
Video
Audio
Aplikasi
Games
dan lainnya

Semua elemen akan dibungkus oleh HTML dan ditampilkan melalui browser. Untuk memahami lebih lanjut, lihat contoh berikut :

<HTML>
	<HEAD>
		<TITLE>Tes HTML 1</TITLE>
	</HEAD>
	<BODY>
		Hello World !!!
	</BODY>
</HTML>

Berikut output yang akan ditampilkan pada browser :

Pada dasarnya HTML adalah suatu rancangan dokumen yang memiliki urutan tertentu dalam merancangnya. Aturan ini biasa disebut tag. Tag adalah suatu format yang menandakan sebuah elemen HTML. misal tag yang menampilkan komponen image "<img />". Suatu elemen ditandai oleh awalan "<" dan akhiran "/>". Untuk membuat sebuah dokumen HTML diawali oleh tag <HTML> dan diakhiri <HTML/> dimana didalamnya berisi elemen HTML lainnya. Pada contoh Hello World diatas merupakan susunan HTML yang standar dimana setelah tag HTML didalamnya berisi tag HEAD dan tag BODY. Pada tag HEAD berisi penjelasan mengenai dokumen HTML tersebut, seperti judul dari halaman, meta data, dan lainnya. Sedangkan pada tag BODY merupakan isi dari dokumen HTML.

Jika ingin melihat sintaksis HTML dari suatu halaman website yang sudah ada, browser menyediakan fasilitas untuk menampilkan sintaksis tersebut. misal pada browser mozilla firefox dengan melakukan klik kanan pada halaman website dan pilih "view page source". Maka dengan seketika browser akan menampilkan sintaksis HTML yang terkandung didalamnya.

Contoh Kasus

Sekarang kita akan mencoba satu contoh kasus HTML. Karena dengan langsung mempraktikkan akan lebih mudah dalam memahami.

Buka text editor favorite Anda, misal Notepad.

Ketikkan sintaksis HTML dibawah ini pada Notepad:

<html>
	<head>
		<title>Contoh Kasus I</title>
	</head>
	<body>
		<h1>Belajar HTML</h1>
		<p>
			Mudahnya membuat halaman website dengan HTML :)
		</p>
		<h2>Elemen gambar :</h2>
		<img src="Blue hills.jpg" WIDTH="200" HEIGHT="100">
		<br />

		<form>
			<label>Nama</label> : <input type="text" /><br />
			<label>Email</label> : <input type="text" /><br />
			<label>Komentar</label> : <textarea></textarea><br />
			<input type="submit" value="Simpan" />
		</form>
	</body>
</html>

Save dokumen tersebut ke sebuah folder.

Pastikan saat melakukan save file berikan ekstensi .html dari nama file. Pada gambar diatas nama file yang disimpan adalah "home.html". Untuk dapat melakukan save file dengan ekstensi tertentu kita harus melakukan setting file agar dapat menampilkan ekstensi dari file. Untuk melakukan setting tersebut, buka windows explorer, pilih menu pada bagian atas tools > Folder Option > pilih tab View. Lalu hilangkan checklist pada item "Hide extensions for known file types".

Setelah itu baru kita dapat melakukan save file dengan ekstensi tertentu. Selanjutnya buka folder tersebut, taruh sebuah gambar/image di folder dengan nama "Blue hills.jpg" lalu eksekusi file tersebut dengan cara klik dua kali pada file tersebut.