You are on page 1of 12

BAB 1

Pengenalan HTML
1.1.

Sejarah Penemuan HTML

Pada tahun 1980, perusahaan IBM merupakan pelopor utama dunia komputer dan
sistem informasi, IBM memiliki suatu ide yang cenderung berdasarkan pada pengetahuan,
bahwa setiap dokumen mempunyai ciri-ciri umum, seperti judul, alamat, isi dan elemenelemen lain yang sangat mirip dari satu dokumen ke dokumen lainnya.
IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari
dokumen dengan suatu tanda tertentu. Dengan cara ini, penampilan dan pencetakan
dokumen tidak akan banyak bergantung pada jenis hardware tertentu, sekalipun sistem
seperti ini memerlukan suatu software untuk menampilkan atau mencetak dokumendokumen tersebut.
IBM kemudian mengembangkan suatu jenis bahasa yang menggunakan tanda-tanda
sebagai basisnya. IBM menambahkan sistem ini dengan Markup Language. IBM menamakan
sistem ini dengan Generalizes Markup Language (GML). Setelah itu, pada tahun 1986 ISO
(International Standard Organization) menyatakan bahwa markup language sebagai standar
untuk pembuatan dokumen-dokumen dan memberinya nama SGML (Standard Generalized
Markup Language) dan akhirnya sekarang bahasa ini dikenal dengan nama HTML.

1.2.

Mengenal HTML

HTML (Hyper Text Markup Language) adalah file teks murni yang dapat dibuat dengan
editor teks sembarang. Dokumen ini dikenal sebagai Web Page. Dokumen HTML sebenarnya
adalah suatu dokumen teks biasa, sehingga platform apapun dokumen tersebut dapat dibaca.
Dokumen HTML disebut Markup Language karena mengandung tanda-tanda tertentu yang
digunakan untuk menentukan tampilan teks dan tingkat kepentingan dari teks tersebut dalam
suatu dokumen. Misalnya Anda dapat menempatkan letak gambar dan jenis pemformatan apa
yang berlaku pada suatu kumpulan teks tertentu. Anda juga dapat membuat tabel, form atau
dokumen dengan bingkai-bingkai di dalamnya dengan menggunakan tanda-tanda HTML.
Di dalam benak kita, terutama bagi mereka yang awam terhadap dunia Cyber atau
lebih dikenal dengan dunia Internet, untuk membuat halaman Web atau Homepage pasti
rumit dan susah. Namun kalau kita sudah mengetahuinya, untuk membuat Halaman Web atau
Homepage disini kita tidak memerlukan pengetahuan bahasa (script) pemrograman yang
rumit. Kenapa tidak rumit?, karena bahasa pemrograman untuk Internet termasuk non
prosedural programming. Bahasa pemrograman yang digunakan untuk membuat Halaman
Web dikenal dengan nama HTML (Hyper Text Markup Language).
Merancang Halaman Website dengan Script HTML

1

HTML adalah bahasa pemrograman Internet (biasa disebut Internet Script) yang tidak
sama dengan bahasa pemrograman yang lainnya. HTML tidak perlu dieksekusi oleh suatu
software tertentu yang bertindak sebagai kompiler, misalnya bahasa pemrograman Pascal,
program dieksekusi oleh Pascal Compiler. Namun, pada script HTML, dieksekusi oleh Browser
Internet.
Adapun manfaat yang diperoleh jika Anda membuat script HTML, yaitu :
a. Mengontrol tampilan dari halaman Web berikut content-nya;
b. Mempublikasikan dokumen secara online, sehingga dapat diakses dari seluruh dunia;
c. Membuat online form, yang bisa digunakan untuk menangani pendaftaran dan transaksi
secara online;
d. Menambahkan objek-objek, seperti image, audio, video dan juga java applet dalam
dokumen HTML, dan lain-lain.

1.3.

Browser dan Editor

1.3.1. Browser
Browser merupakan software yang diinstall pada mesin client yang berfungsi untuk
membuka halaman web atau untuk membaca dokumen yang berisi script HTML dengan kata
lain menterjemahkan tag-tag HTML menjadi halaman Web. Browser yang sering digunakan
biasanya antara lain : Internet Explorer, Opera, Netscape Navigator, Mozilla Firefox, dan lain
sebagainya.
1.3.2. Text Editor
Untuk membuat script HTML ini bisa dibuat dengan menggunakan beberapa text editor
yang sederhana seperti Notepad, Wordpad, Microsoft Frontpage, Microsoft Share Point
Designer, Macromedia Dreamweaver, Web Edit, Hot Metal, CuteHTML, Ultra Edit atau text
editor lain. Untuk selanjutnya file tersebut disimpan ke dalam bentuk format file .html atau
.htm. Dalam buku ini, program text editor yang digunakan yaitu dengan menggunakan
program Ultra Edit. Jadi, sebelumnya Anda harus menginstall terlebih dulu program tersebut.
a.

Cara meng-install Program Ultra Edit
Sebelum Anda meng-install program Ultra Edit, maka Anda harus memiliki program Ultra
Edit terlebih dulu. Program ini mempunyai kapasitas 11.8 MB.
Setelah Anda memiliki program Ultra Edit, langkah untuk menginstall-nya lakukan langkah
berikut ini :
 Nyalakan komputer Anda
 Jalankan Windows Explorer
 Lalu lacak atau cari file program Ultra Edit
 Klik dua kali file uesetup, hingga muncul pesan
 Klik tombol Yes, tunggu beberapa saat hingga muncul tampilan berikut :

Merancang Halaman Website dengan Script HTML

2



Pilih English (United Stated)
Next
Next, hingga muncul tampilan berikutnya :




Aktifkan Yes, I agree with all the terms of this license agreement
Next
Next
Next, hingga muncul tampilan berikut :

Pilih Normal Installation, lalu Next

Merancang Halaman Website dengan Script HTML

3

Next

Next

Next

Merancang Halaman Website dengan Script HTML

4

b.

Next, tunggu beberapa saat hingga muncul tampilan berikut :



Klik Finish, hingga di jendela desktop muncul icon Ultra Edit.
Jalankan program Ultra Edit-nya, hingga muncul tampilan berikut :
Klik OK

Tampilan Jendela Ultra Edit
Menu
Bar

Toolbar

Tab File
Name
Folder
Text
Editor

Status
Bar

c.

Mengetik Script HTML
Anda dapat mengetik program atau script HTML pada jendela Text Editor, misalnya script HTML
seperti yang tampak di bawah ini :

Merancang Halaman Website dengan Script HTML

5

d.

Menyimpan File
Jika program atau script HTML di atas telah diketik, simpan dengan langkah berikut :
 Klik menu File, Save (Ctrl-S) atau klik tool Save File, hingga muncul tampilan berikut :






e.

Pindahkan terlebih dulu letak direktorinya pada Data D: atau E:
Buat Folder Baru dengan Nama Anda diikuti dengan NPM/NIM Anda
Kemudian pada File Name, ketik nama filenya misal : MODUL-1
Pada Save as Type, pilih jenis penyimpanannya HTML/Java File (*.HTML)
Klik tombol Save

Menampilkan/Menjalankan Program
Setelah program atau script HTML selesai Anda ketik, program sudah dapat dijalankan tanpa atau
sudah di simpan. Untuk menampilkan atau menjalankan program (melihat hasilnya pada browser
Internet) :
 Klik menu Windows, Show File in Browser, atau;
 Klik toolbar Show File in Default Browser, hingga muncul hasilnya Mozilla Firefox atau Internet
Explorer berikut :

Merancang Halaman Website dengan Script HTML

6

 Apa yang Anda ketik di layar Text Editor program Ultra Edit, hasilnya sama dengan tampilan di
Internet (What you see, is what you get).
f.

Membuka/Mengaktifkan File
Untuk membuka atau mengaktifkan file yang telah tersimpan pada dokumen Anda, lakukan
langkah berikut :
 Klik menu File, Open (Ctrl-O) atau klik toolbar Open File, hingga muncul tampilan berikut :





g.

Pindahkan letak direktorinya pada Data D: atau E:
Aktifkan folder Nama Anda
Lalu pilih dan klik misal file MODUL-1
Klik tombol Open

Keluar dari Program Ultra Edit

Jika Anda telah selesai mengerjakan pekerjaan dan segera ingin mengakhiri dan keluar
dari program Ultra Edit, klik tombol X (Close) atau klik menu File, Exit.

1.4.

Elemen

Dokumen HTML disusun oleh elemen-elemen. Elemen merupakan istilah bagi
komponen-komponen dasar pembentuk dokumen HTML. Elemen dibagi dua kategori, yaitu
elemen <head> yang digunakan untuk menyampaikan informasi tentang dokumen tersebut,
seperti judul dokumen. Sedangkan elemen yang lainnya yaitu elemen <body> yang berisi
suatu dokumen yang kelak akan ditampilkan dalam browser, seperti paragraf, list, tabel, dan
lainnya.
Merancang Halaman Website dengan Script HTML

7

1.5.

Atribut Tag
Perintah HTML biasanya disebut dengan istilah Tag. Tag digunakan untuk menentukan
tampilan dari dokumen HTML. Dalam HTML kita akan mengenal bentuk “<” (tanda lebih kecil)
atau “>” (tanda lebih besar) . Bentuk ini dalam HTML disebut Tag. Dan dalam tag itu ada yang
fungsinya sebagai tag pembuka <nama tag> dan tag penutup </nama tag>. Tag penutup dalam
HTML ditandai dengan tanda garis miring “/” atau yang disebut slash.
Contoh tag yang berpasangan :
<b>
</b>
Tag yang pertama menunjukkan tag awal cetak tebal yang berarti awal elemen, dan
yang kedua menunjukkan tag akhir cetak tebal berarti akhir elemen. Pada prinsipnya dalam
HTML, setiap ada perintah pembuka akan ada perintah penutup (berpasangan), tetapi ada
beberapa elemen yang tidak mengharuskan tagnya berpasangan, misalnya adalah tag <br>
perintah pindah baris, dan tag <hr> perintah garis datar, dan lain sebagainya.
Penulisan tag HTML tidak case sensitive, artinya penulisannya boleh huruf besar atau
kecil atau huruf kapital yang pertamanya, contoh : <html> atau <HTML> atau <Html>
ketiganya akan menghasilkan output yang sama. Tetapi dalam hal penulisan di sini, dianjurkan
untuk penulisan tag dengan menggunakan huruf kecil semuanya.
Bentuk dari tag HTML adalah sebagai berikut :
<Element Attribute=Value>
Keterangan :
Element : nama tag atribut
Attribute : atribut dari tag
Value : nilai dari atribut
Contoh :
<body bgcolor=”blue”>
Body merupakan Element, bgcolor (background) merupakan atribut, yang memiliki value
(nilai) yaitu Blue.
1.6.

Struktur HTML

Struktur HTML dapat berupa dokumen HTML yang terdiri dari teks, gambar (image),
suara (audio) dan video. Perbedaan dokumen HTML dengan dokumen-dokumen lainnya, yaitu
dokumen HTML terdapat elemen-elemen HTML beserta tag-tagnya.
Merancang Halaman Website dengan Script HTML

8

Format standar dalam penyusunan HTML terdapat struktur yang perlu diperhatikan,
contohnya adalah seperti dibawah ini :
<html>
<head>
<title>JUDUL HALAMAN</title>
</head>
<body>ISI HALAMAN</body>
</html>
Dan kita bisa melakukan format yang minimal seperti berikut tanpa judul halaman :
<html>
isi halaman
</html>
Tapi sebenarnya format ini tidak disarankan dalam pembuatan web, karena fungsinya menjadi
berkurang dan bagi programmer akan kesulitan membuat setiap definisi yang diperlukan
HTML. Sekarang mari kita bahas satu persatu struktur dalam penyusunan HTML :
• Tag <html> dan </html>
Tag HTML ini merupakan inti sebagai sebuah tanda yang menyatakan bahwa script ini
adalah script HTML dan isi yang berada antara tag pembuka dan tag penutup html
merupakan struktur penyusunan HTML selanjutnya. Tag penutup HTML </html> harus
selalu diakhir dari suatu script HTML.
Bagian yang terdapat dalam <html> dan </html> yang umumnya di antara tag HTML ini
terdapat dua bagian, yaitu : Kepala (head), dan Badan (body)
• Tag <head> dan </head>
Tag HEAD merupakan tanda suatu header suatu HTML. Tag HEAD biasanya berisi tag TITLE
<title> dan tag meta <meta> yang biasanya di gunakan untuk menentukan informasi
tertentu mengenai dokumen HTML, anda bisa menentukan author name, keywords, dan
lainnya pada tag META.
• Tag <title> dan </title>
Tag TITLE merupakan tag yang menampilkan judul suatu halaman web pada browser. Tag
TITLE ini berguna selain sebagai penamaan suatu halaman juga sebagai keyword (kata
kunci) untuk pencarian (searching).
• Tag <body> dan </body>
Seperti yang telah dibahas sebelumnya tag BODY merupakan bagian badan dari HTML Tag
BODY, yang merupakan isi dari suatu HTML. Tag BODY ini di dalam perintahnya memiliki
banyak fungsi, seperti yang akan dijelaskan pembahasan berikut.
Merancang Halaman Website dengan Script HTML

9

1.7.

Menambahkan Komentar

Komentar merupakan bagian yang selalu dituliskan dalam membuat kode program
untuk memudahkan programmer untuk memeriksa kembali program yang diperlukan. Dalam
HTML komentar merupakan keterangan yang berguna bagi pembaca kode, bahkan bagi yang
awam sekalipun.
Sebuah komentar diawali dengan <!--dan diakhiri dengan -->. Di dalam kedua tanda
tersebut, Anda bisa memberikan keterangan apa saja dan bahkan bisa mencakup beberapa
baris. Contoh :
<!-- komentar ini tidak akan ditampilkan -- >
Komentar ini dapat dituliskan dimana saja dibagian HTML sesuai dengan keterangan yang
ingin Anda berikan. Dan tentunya komentar ini tidak akan keluar pada bagian preview suatu
halaman web.

1.8.

Menggunakan Tag <br>

Dalam HTML untuk berpindah baris baru atau pindah baris dengan menggunakan tag
<br> atau singkatan Break. Tag <br> ini dalam penggunaannya tidak perlu menggunakan tag
penutup. Dan penyusunannya dituliskan setelah objek maka objek setelah tag <br> akan
berada pada baris baru.

Merancang Halaman Website dengan Script HTML

10

PRAKTEK MODUL-1 :
1.

Menjalankan Program Editor Ultra Edit
Langkah-langkahnya :
 Klik tombol Start, All Programs
 Pilih UltraEdit-32, atau;
 Klik ikon UltrEdit-32 pada jendela Desktop Windows, sehingga akan muncul tampilan
berikut :

2.

Membuat Script HTML Sederhana
a. Ketik Script HTML berikut pada jendela Text Editor seperti di bawah ini :
<html>
<head>
<title>Membuat Script HTML Sederhana</title>
</head>
<body>
Ini adalah pelajaran pertama saya belajar Script HTML
</body>
</html>
b. Setelah Anda ketik script di atas, simpan dengan menekan toolbar
klik menu File, Save, hingga muncul kotak dialog Save As :

Merancang Halaman Website dengan Script HTML

Save File atau

11

c. Pada tombol pilihan Save in, pindahkan letak drive-nya ke Data D: atau E:, kemudian
buat folder dengan menekan tombol
Create New Folder, lalu buat Folder Nama
dan Kelas Anda atau NPM/NIM Anda.
d. Pada kotak isian File Name, ketik nama filenya MODUL-1
e. Pada tombol pilihan Save as type, pilih HTML/Java Files.(*.HTML)
f. Klik tombol Save
3.

Menampilkan Program
a. Klik menu Windows, Show File in Default Browser atau klik toolbar
Show File in
Default Browser
b. Untuk kembali ke tampilan program Ultra Edit, Anda tidak perlu keluar dari jendela
Mozilla Firefox atau Internet Explore, tapi cukup dengan meng-klik icon yang ada pada
baris Task Bar, klik icon
Ultra Edit

TUGAS :
1.

Buat file baru dengan struktur HTML seperti contoh sebelumnya dengan nama file
MODUL-1A, di mana isi halaman yang ingin ditampilkan seperti berikut :
Nama Lengkap :
Tempat/Tanggal Lahir :
Jenis Kelamin :
Agama :
Status Marital :
Pekerjaan :
Hobby :
Alamat Rumah :
No. Telp Rumah :
No. Handphone :
Alamat email :
Kota/Kab. :
Kode Pos :

2.

a. Jika sudah diketik dan diisi datanya, lalu tampilkan hasilnya. Apa yang terjadi ?
b. Tampilan data yang Anda tambahkan hasilnya tidak sesuai dengan yang Anda ketikkan
di mana hasilnya tampak dalam satu baris (tidak pindah baris)!
c. Beri tag <br> pada setiap akhir baris, agar supaya tampilan sesuai dengan yang Anda
ketikkan. Kemudian tampilkan kembali, sekarang bagaimana hasilnya, apa ada
perubahan?
Beri komentar apa saja terserah Anda, dan letakkan sebelum perintah <html>

Merancang Halaman Website dengan Script HTML

12