Apa itu HTML dan cara menggunakannya

Bagian 1: HTML | Bagian 2: HTML Attribute | Bagian 3: Table HTML | Bagian 4: Colspan dan Rowspan

HTML singkatan dari Hyper Text Markup Language, merupakan bahasa komputer yang ditulis pada suatu halaman file untuk memberitahu browser anda bagaimana sebuah halaman hendak ditampilkan. HTML adalah bahasa yang digunakan untuk memberitahu browser bagaimana untuk menampilkan suatu halaman sesuai dengan yang kita inginkan, seperti posisi, ukuran, warna dan lain- lain. Bahasa tersebut terdiri dari berbagai kode- kode yang masing- masing memiliki fungsi dan tugasnya masing- masing. Ketika anda melihat sebuah halaman di browser komputer anda, yang anda lihat sebenarnya adalah penerjemahan perintah HTML yang dilakukan oleh browser anda dari sebuah halaman.

Anda bisa melihat kode- kode HTML apa saja yang terdapat pada sebuah halaman di internet dengan meng-klik “View” dan setelah itu pilih “Source” diatas kiri browser anda, jika anda menggunakan Firefox anda bisa tekan Ctrl + U pada keyboard anda. Untuk orang- orang yang tidak mengerti HTML dan cara menggunakannya mungkin kode- kode tersebut akan terlihat sangat complex dan menakutkan. Padahal sebenarnya bahasa HTML amatlah mudah dipahami dan mudah dipelajari. Jika anda ingin bisa membuat website, anda harus belajar apa itu HTML dan cara menggunakannya.

Kode HTML terdiri dari tag (atau disebut juga dengan markup tag atau HTML tag) dan tagnya itu sendiri terdiri dari kata kunci yang terdapat dalam braket sudut. Sebagian besar tag HTML dimulai dengan tag pembuka dan diakhiri dengan tag penutup. Dokumen HTML terdiri dari 2 bagian: Head (informasi tentang halaman itu, apa yang anda tulis di bagian ini tidak akan ditampilkan atau terlihat pada browser komputer anda) dan Body (informasi yang membentuk sebuah halaman, apa yang anda letakkan/ tulis di bagian ini akan ditampilkan pada browser).

Masih bingung? Baiklah, mari kita praktek saja. Praktek mampu membuat anda jauh lebih mengerti dengan cepat dari pada hanya sekedar teori. Mari kita mulai...

Buka Notepad, copy dan paste kode HTML di bawah ini pada Notepad tersebut:

<html>

<head>

<title>Ini adalah website pertamaku!</title>

</head>

<body>

Ini kalimat kesatu

Ini kalimat kedua

Ini kalimat ketiga

</body>

</html>

Simpan Notepadnya dan beri dengan nama apa saja tapi diakhiri dengan “.htm” seperti halamanku.htm atau fileku.htm. Jangan lupa pilih “All Files” jika tidak anda akan menyimpannya dalam bentuk text dokumen dan bukan dokumen HTML.

“.htm” dari nama akhir file tersebut mengartikan bahwa itu adalah dokumen HTML, anda juga bisa mengakhiri dengan nama “.html”, hasilnya akan sama. Setelah disimpan, cobalah buka file tersebut dengan double-klik filenya. Lihat dan perhatikan apa yang terjadi pada ketiga kalimat tersebut, perintah tag yang berlainan akan menghasilkan efek yang berbeda kepada tiap teks tersebut.

Berikut adalah kode basic HTML umum lainnya:

<HTML> </HTML>	Untuk membuat halaman Web. Semua halaman Web mengandung perintah tag ini.
<HEAD> </HEAD>	Semua elemen head diletakkan disini, apa yang anda tulis di area ini tidak akan ditampilkan atau terlihat. Elemen di dalam head tag termasuk script, meta informasi, memerintahkan browser dimana untuk menemukan style sheet dan lain- lain.
<TITLE> </TITLE>	Menampilkan judul di title bar.
<BODY> </BODY>	Apa yang anda tulis disini akan terlihat dan ditampilkan pada browser.
<B> </B> atau <strong> </strong>	Menebalkan huruf atau teks
<I> </I> atau <em> </em>	Memiringkan huruf atau teks dalam model Italics
<u> </u>	Menggaris bawahi teks.
<strike> </strike>	~~Menggambar garis lurus di tengah- tengah teks.~~
<CENTER> </CENTER>	Meletakkan atau memposisikan sesuatu di tengah halaman.
<H1> </H1>	Heading 1
<H2> </H2>	Heading 2
<H3> </H3>	Heading 3
<H4> </H4>	Heading 4
<H5> </H5>	Heading 5
<H6> </H6>	Heading 6
<BR>	Line baru. Membuat sebuah spasi diantara lines (contohnya dua kalimat ini).
<P> </p>	Paragraph baru. Membuat double spasi diantara lines, paragraphs (contohnya dua kalimat ini).
	Spasi.
<HR>	Membuat garis horizontal pada dokumen.
<ul> <li>Daftar list</li> <li>Daftar list lain</li> </ul>	Daftar list informasi Daftar list informasi lain
<ol> <li>List pertama</li> <li>List kedua</li> </ol>	List informasi pertama List informasi kedua

artinya "bold"
 artinya "italics"
 artinya "emphasis"
 artinya "underline"
<h1> artinya "heading 1"
 artinya "break"
 artinya "paragraph"
<hr> artinya "horizontal"
<ul> artinya "unordered list"
<ol> artinya "ordered list"

Tidak akan berpengaruh jika anda mengetik perintah tagnya dalam huruf kecil atau huruf besar, hasilnya akan sama.

Dalam kode HTML, ada yang namanya attribute. Attribute memerankan peranan yang tidak kalah penting. Apa itu attribute? Mari kita kita bahas dalam halaman selanjutnya.