Bab 1:
Tak Kenal Maka
Tak Sayang HTML
Berkenalan dengan HTML ?
Sebelum kita masuk ke dalam inti pembahasan penulis akan coba singgung
terlebih dahulu beberapa hal kesalahan orang-orang yang baru belajar web
development. Hal ini penulis jelaskan bukan untuk menjatuhkan, melainkan sebagai
koreksi untuk mendorong anda agar lebih maju dalam ber-webdevelopment,
sehingga nantinya jadi tau arah ketika akan belajar web development.
Banyak orang yang bergelut dalam bidang web development awalnya tidak
melewati pembelajaran HTML terlebih dahulu, sebagian besar menggunakan CMS
(Content Management System), ataupun karena kemudahan penggunaan software
seperti Adobe Dreamweaver. Sehingga dari sinilah orang menyangka untuk bisa
membuat website, atau mahir dalam web development itu harus menggunakan
Adobe Dreamweaver, jadi ngapain harus repot-repot belajar HTML? Sebetulnya
pernyataan ini tidak 100% benar, dan juga tidak 100% salah.
Orang yang ketika pertama kali menggunakan Dreamweaver merasakan
teramat susahnya ketika belajar sendiri tanpa bantuan buku atau tutorial. Bahkan
meskipun ada buku ataupun tutorial pun masih tetap saja kesulitan menggunakan
Dreamweaver. Sehingga koreksi dari penulis, agar dapat dengan mudah mengerti
dalam menggunakan software webdevelopment para webdeveloper haruslah
memiliki basic yang HTML + CSS yang kuat, sehingga ketika memakai aplikasi
seperti Adobe Dreamweaver itu menjadi sangat mudah.
Bab 1: Mengenal HTML
1Pengertian HTML & Sejarah Singkat HTML
Hypertext Markup Language (HTML) adalah bahasa markup yang umum
digunakan untuk membuat halaman web. Sebenarnya HTML bukanlah sebuah
bahasa pemrograman. Apabila di tinjau dari namanya, HTML merupakan bahasa
markup atau penandaan terhadap sebuah dokumen teks. Tanda tersebut di gunakan
untuk menentukan format atau style dari teks yang di tandai.
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan
dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML
mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti
akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi
sebelumnya.
Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus
disetujui dulu oleh W3C untuk dievaluasi secara ketat. Setiap terjadi perkembangan
suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar
bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak
akan bisa menampilkan HTML tersebut.
HTML versi 1.0
Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph,
hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung
peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks
disekelilingnya (wrapping).
HTML versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya
untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita
dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan
pionir dari adanya homepage interaktif.
HTML versi 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini
yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML
versi 3.2.
Bab 1: Mengenal HTML
2HTML versi 4.0
HTML versi 4 ini merupakan HTML versi terakhir pada saat sumber ini
diambil.
Bab 1: Mengenal HTML
3Fungsi HTML
HTML telah mengubah dunia internet, kurang lebih berikut adalah fungsi
utama :
• Membuat, mendesain, dan mengontrol tampilan dari Web Page (Halaman
Web) dan isinya.
• Mempublikasikan document secara online sehingga bisa diakses, dilihat
dari keseluruh dunia.
• Membuat online form yang bisa di gunakan untuk menangani pendaftaran,
transaksi secara online.
• Menambahkan object – object seperti image, audio, video dan juga java
applet (aplikasi java seperti java game dll) dalam document HTML.
Bab 1: Mengenal HTML
4Bab 2:
Memulai Permainan:
Mengerti dan Memahami
Lebih dalam mengenai Struktur HTML ?
Pada dasarnya elemen HTML ada 2 kategori:
1. Elemen berfungsi untuk memberikan informasi atau mendeklarasikan
dokumen tersebut.
2. Elemen berfungsi untuk menentukan bagaimana isi suatu dokumen
ditampilkan pada browser.
Sebelum kita mengakhiri semua teori ini, ada 2 tools (alat) yang dibutuhkan :
1. Browser
Browser merupakan software yang di install di mesin client (komputer kita sebagai
pengguna website) yang berfungsi untuk menterjemahkan tag-tag HTML menjadi
halaman web. Contoh browser Internet Explorer, Mozila, opera dan masih banyak
yang lainya.
2. Editor
Editor adalah program yang bisa digunakan untuk membuat document HTML (Web
page/Halaman Web), ada banyak HTML editor yang bisa anda gunakan diantaranya:
Ms FrontPage, Dreamweaver, Notepad, dll.
Bab 2: Memulai Permainan : Mengerti dan Memahami
5STRUKTUR DOKUMEN HTML
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Hallo Word!
</body>
</html>
<html> ... </html> : merupakan tag pembuka dari dokumen html.
<head> ... </head> :
<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.
<body> ... </body> : merupakan body dari dokumen html. Segala sesuatu yang ingin
ditampilkan di dokumen html disimpan dalam tag bodvy ini.
Catatan :
Semua yang berada dalam kotak teks, cukup Anda tuliskan ulang, kemudian pindahkan ke
editor notepad, lalu save, ganti save as type di pojok bawah dari text documents txt, menjadi
all files, berikan nama filenya yakni nama-file.html
TAG BODY DAN ATRIBUTNYA
1.
BACKGROUND
Atribut ini digunakan untuk mengeset gambar untuk digunakan sebagai latar
belakang pada sebuah halaman. Kita cukup menggunakan atribut berikut untuk
memilih sebuah gambar untuk dijadikan latar belakang. Cara penulisannya
adalah sebagi berikut:
<body background="url gambar/lokasi penyimpanan gambar">
Contoh:
<html>
<head>
Bab 2: Memulai Permainan : Mengerti dan Memahami
6<title>Judul Dokumen</title>
</head>
<body background="images/bg.jpg">
Mengganti background dokumen HTML dgn gambar
</body>
</html>
2.
BGCOLOR
Bgcolor menentukan warna latar belakang dari halaman web. Misalnya, untuk
mengatur warna latar belakang halaman agar berwarna merah, kita dapat
menggunakan tag berikut :
<body bgcolor="#222222?” >
3.
4.
5.
6.
7.
8.
9.
TEXT
Atribut ini berguna untuk menentukan warna standar dari teks yang ada pada
halaman tersebut.
LINK
Atribut ini berguna untuk menentukan warna standar dari tautan (link) yang
ada pada halaman tersebut sebelum di-klik.
VLINK
Berguna untuk menentukan warna standar dari tautan (link) yang ada pada
halaman tersebut ketika telah di-klik.
ALINK
Berguna untuk menentukan warna standar dari tautan (link) pada halaman
tersebut ketika kursor berada diatasnya.
MARGIN
TOPMARGIN dan LEFTMARGIN digunakan untuk menentukan jarak atas dan
tepian pada halaman. Tag ini akan terbaca pada browser Internet Explorer,
sedangkan untuk browser Netscape tag yang digunakan adalah
MARGINHEIGHT dan MARGINWIDTH.
onLoad
Tag onLoad digunakan untuk menjalankan suatu perintah ketika suatu
halaman html dibuka. Contoh:
<body onload="alert('Selamat')">
onUnload
Bab 2: Memulai Permainan : Mengerti dan Memahami
7Tag onUnLoad digunakan untuk menjalankan suatu perintah ketika suatu
halaman html tutup. Contoh:
<body onUnload="alert('Selamat Tinggal')">
