(Tutorial ini adalah sebagian materi pelatihan siswa “IT SMAPAN COMMUNITY” yang ikut klub web design, bagi yang mau belajar HTML bisa ikuti penjelasan berikut. CMIIW :P )

Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document web. HTML dibuat di dalam text editor atau web editor, sedangkan hasilnya ditampikan pada browser. Editor merupakan program yang digunakan untuk menulis kode HTML, contohnya Notepad, Textpad, Frontpage dan Macromedia Dreamweaver. Disini kita akan menggunakan Macromedia Dreamweaver sebagai editor karena memiliki fasilitas yang sangat lengkap. Sedangkan browser adalah suatu program yang berfungsi untuk menterjemahkan kode-kode HTML menjadi halaman web. Contoh dari browser yaitu Internet Explorer, Mozzila Firefox, Netscape Navigator dan lain sebagainya. Disini kita akan memakai Internet Explorer.

Ok, kita kembali ke HTML, kode-kode dalam HTML biasanya disebut TAG. Tag ditulis dengan tanda kurung siku buka dan ditutup dengan kurung siku tutup.

Contoh :

- Tag break line ditulis dengan : <BR>

Dalam HTML ada 2 jenis tag, yaitu tag yang tag yang harus diawali dan diakhiri dan tagdapat berdiri sendiri

Jenis-Jenis Penulisan Tag

Tag yang harus diawali dan diakhiri

Tag ini harus adan begin tag, dan end tag. Tata tulisnya secara umum adalah :

<begin tag> </end tag>

End tag selalu diawali dengan tanda /

Contoh : dalam penulisan HTML harus diawali dengan begin tag HTML dan end tag HTML, penulisannya adalah sebagai berikut :

<HTML>

</HTML>

Tag berdiri sendiri :

Tag ini ditulis sendirian, tanpa perlu diakhiri. Tata tulisnya adalah sebagai berikut :

<TAG>

Contoh : untuk memberi garis horishontal digunakan tag hr, penulisannya adalah <HR>

Penulisan Tag HTML secara umum

Tata tulis tag secara umum adalah sebagai berikut :

<Element Atribut=nilai>

Element = nama tag

Atribut = properti yang dimiliki oleh tag tersebut

Nilai = nilai dari properti tersebut

Analogi HTML Dalam Kehidupan Sehari-Hari

Nah, bagi anda yang baru mengenal dunia HTML atau website, kemungkinan besar anda akan kebingungan sedikit. Nah silakan minum air dulu dan inget pelajaran tadi. Sekarang kita akan mengumpamakan HTML itu dalam kehidupan sehari-hari. Silakan ketik kode-kode dibawah ini di dreamwever pada tab code.

<HTML></HTML>

Andaikan Website itu adalah tubuh manusia, maka ujung rambut manusia itu adalah tag awal HTML dan ujung kaki manusia itu adalah tag akhir HTML. Maka akan ditulis sebagai berikut:

<HTML>

<HTML>

<HEAD></HEAD>

Bagian atas manusia punya kepala(head), begitu juga dengan HTML mempunyai HEAD. Maka penulisannya akan menjadi berikut ini :

<HTML>

<HEAD>

</HEAD>

</HTML>

Dalam kepala manusia terdapat wajah, dari wajah kita bisa mengetahui nama sesorang. Dalam HTML juga begitu, diantara <HEAD> </HEAD> ada judul(Title) untuk mengetahui judul halaman web tersebut. Diantara <TITLE> </TITLE> anda menulis judul dokumen website anda. Jadi penulisannya menjadi berkembang menjadi seperti berikut ini :

<HTML>

<HEAD>

<TITLE>ini websitenya resika</HTML>

</HEAD>

</HTML>

<BODY></BODY>

Dibawah kepala manusia ada tubuh(body), begitu juga dalam HTML, dibawah <HEAD></HEAD> ada body. Jadi dokumen kita menjadi semakin lengkap seperti dibawah ini :

<HTML>

<HEAD>

<TITLE>ini websitenya resika</HTML>

</HEAD>

<BODY>

</BODY>

</HTML>

Nah, di dalam body ini lah kalian akan menuliskan seluruh komponen website, tag-tag html, tulisan, gambar dan lain sebagianya.

Contoh-contoh tag HTML :

Tag

Keterangan

<P></P>

Untuk membuat paragraf

<HR>

Membuat garis horishontal

<BR>

Membuar karakter enter

<H1></H1>

Membuat heading. Angka 1 bisa diganti dengan angka 2 sampai 7

<B></B>

Membuat tulisan tebal

<em></em>

Membuat tulisan miring

<U></U>

Membuat tulisan bergaris bawah

<marquee> </marquee>

Membuat tulisan bergerak

<a href=”index.htm”> kembali ke awal </a>

Membuat hyperlink

<img src=”rey.bmp”> </img>

Menyisipkan gambar

Contoh HTML

<html>
<head>
<title>Belajar Pascal</title>
</head>
<body>
<h1 align="center">SAYA BELAJAR PASCAL </h1>
<hr>
<marquee direction="left">Kreativitas Anak Bangsa</marquee>
<marquee direction="right">Mari Belajar HTML</marquee>
<hr>
</body>
</html>