HTML (HyperText
Markup Language) adalah bahasa dengan tanda-tanda khusus yang digunakan
di awal era web untuk menyajikan informasi. HTML merupakan script yang
digunakan untuk menyusun/membuat dokumen web yang apabila kita melakukan desain
terhadap html berarti kita telah melakukan tindakan pemograman. Namun HTML
bukanlah sebuah bahasa pemograman karena hanya berisikan perintah-perintah tertentu
agar dapat diakses atau diterjemahkan oleh browser. Jika kita ingin membuat
suatu website atau blog maka pengetahuan tentang html ini sangat penting
sebagai dasar utama. Secara mendasar, dokumen html mempunyai susunan sebagai
berikut:
<html>
<head>
<title>Judul</title>
</head>
<body>
.
.
.
</body>
</html>
Kode HTML diawali dengan <html> dan diakhiri
dengan </html>. Beberapa hal penting dalam kode html :
- Tanda <> menyatakan sebuah tag
- Pada umumnya tag berpasangan. Contohnya <html> dengan </html>,
<head> dengan </head> dan <body> dengan </body>.
- Tag yang tidak berpasangan antara lain adalah <br> dan <hr>.
- Pada tag yang berpasangan, tag yang berkedudukan sebagai tag penutup
mempunyai bentuk berupa </>.
Contoh: Ketiklah script di bawah ini kemudian simpan dengan nama lat1.html.
<head>
<title>Belajar HTML</title>
</head>
<body>
Ini adalah web pertama saya.
</body>
</html>
Untuk melihat hasilnya, silakan jalankan browser
favorit Anda, dengan cara membuka file lat1.html yang sudah Anda buat tadi
dengan menggunakan browser seperti contoh tampilan dibawah ini saya menggunakan
browser Mozila Firefox :
Keterangan:
- Tag <TITLE> digunakan untuk memberi judul
dokumen HTML. Judul ini dapat Anda lihat pada pojok kiri atas (title bar)
browser. Ketika orang akan mem-bookmark web Anda, maka judul inilah yang
akan disimpan. Pada contoh di atas judul dokument html yaitu "Belajar
HTML"
- <BODY> adalah isi dokumen yang akan ditampilkan
dibrowser Anda. Isi dokumen pada contoh di atas adalah " Ini adalah
web pertama saya."
Terdapat dua pilihan dalam mendesain html :
- Menuliskan secara manual tag-tag html ke dalam dokumen html. Bagi para
pemula pilihan ini dirasa lebih tepat karena dengan menuliskan tag-tag
html satu persatu maka akan menambah pemahaman mengenai cara kerja dan
perintah-perintah dalam HTML, meskipun cara ini akan menguras
banyak waktu tetapi segala sesuatu tidak ada yang instan oleh karenanya
berusaha lebih keras akan lebih baik dan akan terasa hasilnya ketika kita
sudah mampu mengusai html. Cara manual ini dapat dilakukan dengan
menuliskan kode-kode html pada program editor seperti notepad.
- Menggunakan editor praktis yaitu sebuah program khusus yg didesain
untuk membuat, melakukan editing bahkan mempublishnya ke internet. Adobe
dreamweaver merupakan salah satu program yang banyak digunakan oleh
para desainer web dalam mendesain html. Para pemula yang malas untuk
belajar kebanyakan memilih pilihan yang kedua ini karena praktis dan tidak
menguras waktu.
Struktur Dasar
HTML
Struktur dasar html secara umum terbagi menjadi 2
bagian yaitu header dan body. Komponen penyusun dari html meliputi tag, elemen,
dan atribut.
Tag adalah suatu teks khusus (markup) yang terdiri dari dua karakter yaitu
< dan >. HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil
dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada
dalam tag-tag tersebut.Tag biasanya merupakan suatu pasangan yang disebut
dengan : 1. Tag awal, dinyatakan dalam bentuk <nama tag> 2. Tag akhir,
dinyatakan dalam bentuk </nama tag>. Format : <nama tag> teks yang
ditampilkan </nama tag>. Contoh : untuk menampilkan teks dalam format
teks miring Teks ini terlihat miring di browser anda dengan perintah HTML
<i>Teks ini terlihat miring di browser Anda</i>
Contoh ketiklah kode berikut lalu simpan dengan nama tag.html
<<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Ini adalah web pertama saya.
<h1>Ini adalah heading 1</h1>
<h2>Ini adalah heading 2</h2>
<h3>Ini adalah heading 3</h3>
<h4>Ini adalah heading 4</h4>
<h5>Ini adalah heading 5</h5>
<i>tulisan ini terlihat miring</i>
<b>tulisan ini terlihat tebal</b>
<u>tulisan ini bergaris bawah</u>
Maka setelah
dokumen tag.html dibuka dengan menggunakan mozilla firefox maka
tampilannya akan seperti gambar di bawah ini.
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Tag-tag
yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang
tindih dengan pasangan tag-tag lainnya.Contoh untuk menampilkan judul dokumen
pada browser digunakan element title yaitu:
<title> merupakan tag pembuka,
Diisi dengan judul (isi)
</title> merupakan tag penutup
Berikut ini contoh beberapa macam element:
Merupakan
kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di
antara tag <html> dan tag </html>.
Sintaks:
<html>
...........
</html>
Merupakan judul
dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag
<title> dan tag </title> terletak di antara tag <head> dan
tag </head>.
Sintaks:
<title>
.........
</title>
Elemen
<head> merupakan elemen yang berisikan informasi mengenai halaman web
yang tengah dibuka, yang tidak akan ditampilkan secara visual di halaman
browser. Sintaks
<head>
.....
</head>
Pada halaman
web modern, umumnya elemen mengandung:
- elemen title, yang menunjukkan judul dari halaman yang tengah dibuka
dan muncul pada toolbar browser.
- elemen meta, yang menunjukan informasi meta data mengenai halaman
web yang tengah diakses.
- elemen link, yang menunjukan hubungan antara halaman web yang dibuka
dan file lain. Umumnya digunakan untuk “memasukkan” file CSS ke halaman
web yang bersangkutan.
- elemen script, digunakan untuk memasukkan script yang bekerja pada
sisi klien seperti JavaScript.
Selain keempat
elemen di atas, terdapat juga elemen style yang digunakan untuk memasukkan
perintah stylesheet dan base untuk menetapkan alamat dan target dari semua link
yang berada di dalam halaman web. Bagaimanapun, elemen base jarang dijumpai
penggunaannya dan elemen style jarang digunakan karena paradigma saat ini untuk
memisahkan stylesheet dengan halaman web agar mudah dalam pengorganisasiannya.
Element ini
untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body>
terletak di bawah tag <head> dan tag </head>.
Element BODY mempunyai atribut-atribut yang menspesifikasikan khususnya warna
dan latar belakang dokumen yang akan ditampilkan pada browser.
Sintaks:
<body text="v" bgcolor="w"
background="uri" link="x" alink="y"
vlink="z">
..............
</body>
Pada dasarnya,
elemen yang diletakkan diantara tag <body> terdiri dari tiga jenis:
- Markup struktural: menunjukan tujuan dari text. contoh, tag heading
<h2></h2>
- Markup presentasional: menunjukan tampilan dari informasi, terlepas
dari fungsinya. contoh: <strong></strong>
- Markup hypertext: markup yang membuat bagian dari dokumen menghubungkan
ke dokumen yang lain. contoh: <a href=""></a>
Atribut
·
Atribut text memberikan warna pada teks, bgcolor
memberikan warna pada latar belakang dokumen HTML, background memberikan latar
belakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk
link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan
warna untuk link yang telah dikunjungi. Jika atribut bgcolor dan background
keduanya dispesifikasikan maka atribut background yang akan digunakan, akan tetapi
jika nilai atribut background (gambar) tidak ditemukan pada dokumen HTML maka
atribut bgcolor yang akan digunakan.
·
Atribut mendefinisikan property dari suatu element
HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:
<tag>
nama-attr="nilai-attr"
nama-attr="nilai-attr"
.................
>
.................
</tag>