Memahami Tag HTML

Ini merupakan artikel pertama yang
saya tulis di website saya ini. Karena
diwebsite ini saya akan membagi-
bagikan ilmu apa aja tentang
pembuatan website, maka kita
pelajari biangnya dulu, dasar dari
semua dasar pembuatan website
yaitu HTML.
HTML (Hypertext Markup Language)
merupakan bahasa yang digunakan
untuk membuat website.
Menggunakan tag untuk
mendeklarasikan sesuatu dan tag
tersebut tidak ditampilkan tetapi tag
tersebut memberi tahu browser
bagaimana cara menampilkan
dokumen website. Serta dapat
saling berhubungan dengan
dokumen HTML lain yang dikenal
dengan istilah link.
Suatu halaman website sebenarnya
hanya sebuah halaman teks, jika
anda menggunakan browser
internet explorer dan anda mengklik
view - source, maka anda dapat
melihat teks dari web tersebut.
Tetapi teks tersebut diterjemahkan
oleh browser menjadi halaman
website yang enak dilihat. Teks
merupakan bahasa universal bagi
komputer, yang berarti setiap
dokumen teks (termasuk website)
yang anda buat melalui Windows
dapat dibaca di sistem perasi lain
seperti Mac OS, Linux, Unix dan
lainnya.
HTML dan hal-hal yang berkaitan
dengan website distandarisasi oleh
sebuah badan yang disebut World
Wide Web Consortium (W3C).
Standard terbaru, konsep dan
proposal mengenai starndarisasi
web dapat dilihat di http://
www.w3.org. Standar untuk HTML
terbaru adalah HTML 4.0 yang telah
didukung oleh bermacam-macam
browser seperti Microsoft Internet
Explorer, Netscape Navigator,
Opera, Mozilla, Safari dan masih
banyak lagi. Browser
menterjemahkan t a g yang
terdapat pada dokumen HTML. Kita
akan segera membicarakan
mengenai tag.
Suatu halaman web merupakan file
teks yang berarti anda dapat
membuatnya hanya dengan
menggunakan notepad saja. Bahkan
jika anda masih pertama kali
mempelajari HTML, notepad
merupakan alat yang tepat. Saya
menyarankan untuk menggunakan
editplus karena menurut saya enak
aja dipakainya, tetapi anda bebas
menggunakan teks editor lain.
Jika anda baru pertama kali
mengenal HTML, hindari Program
WYSIWIG (What You See Is What
You Get) seperti Dreamweaver atau
Frontpage/Web Expression.
Program-program ini memang
memudahkan anda membuat
website tetapi anda akan kurang
memahami HTML, gunakan
Frontpage atau Dreamweaver
apabila anda sudah paham
mengenai HTML.
Sekarang buka saja notepad anda
dan kita mulai.
Kode HTML pertama
Buka notepad dan tuliskan kode
dibawah ini
H e l l o W o r l d
Simpan file tersebut dengan nama
hello.html didalam suatu folder
(misal c:\webku) dan buka file HTML
tersebut dengan browser kesukaan
anda. Hasilnya seperti ini:
Hello World!!
Oke jadi apa yang dimaksud oleh
"<" dan ">", ketika anda menuliskan
sesuatu diantara tanda "<" dan ">"
maka anda membuat sesuatu yang
disebut dengan tag, kalau anda lihat
dikamus bahasa inggris tag artinya
tanda/label. Sebagai contoh tag
< b > maksudnya untuk memulai
huruf tebal (bold) dan tag < / b >
merupakan tag penutup untuk
menghentikan huruf tebal.
Sebuah halaman HTML yang baik
harus memiliki tag < h e a d > dan
< b o d y > , tapi kita akan
membicarakan masalah ini
belakangan. Yang penting sekarang
pahami dulu mengenai tag HTML.
Sekarang akan kita pelajari lebih jauh
mengenai tag HTML.
Tag HTML dibagi menjadi dua, yaitu
tag HTML yang memiliki penutup
(containers) atau yang berdiri sendiri
(standalone).
Containers
Kebanyakan tag HTML adalah
containers (kita sebut containers saja
sebab sulit mencari terjemahannya
dalam bahasa Indonesia) yang
berarti tag tersebut memiliki
pembuka (batas awal) dan penutup
(batas akhir). Teks yang berada
diantara tag pembuka dan penutup
akan berubah sesuai dengan fungsi
dari tag tersebut. Perhatikan contoh
berikut:
H e l l o < i >W o r l d ! ! < / i > < b r >
Hasil:
Hello World!!
Tag berguna untuk
memiringkan teks (italic) tag
memiliki penutup yaitu . Tag
penutup selalu ditandai dengan "/".
Contoh diatas terdapat teks World!!
diantara tag pembuka dan tag
penutup sehingga
menghasilkan tulisan World!! yang
miring. Tag pembuka memiliki
atribut tetapi tag penutup tidak
memiliki atribut.
Standalone Tag
Beberapa tag tidak memerlukan
penutup sebab tag tersebut hanya
berfungsi untuk menempatkan
sebuah elemen pada halaman web.
Sebagai contoh tag < i m g > yang
merupakan tag untuk memasang
sebuah gambar didalam halaman
web. Tag lain yang tidak memiliki
penutup adalah < b r > yang
berguna untuk memberi jarak antar
teks dan tag < h r > untuk memberi
garis. Tag HTML cukup banyak
jumlahnya, anda dapat mencarinya
dibuku-buku atau mencarinya
melalui google untuk mengetahui
apa saja jenis tag HTML. Tapi saya
akan beritahu yangpenting-penting
saja.
Atribut
Atribut dipasang didalam tag
pembuka untuk menambahkan
fungsi dari tag tersebut. Setiap tag
memiliki beberapa atribut dan
dipasang sesudah nama tag dibatasi
oleh spasi. Urutan atribut tidak perlu
diperhatikan. Kebanyakan atribut
memiliki nilai yang dipanggil dengan
menggunakan tanda "=" sesudah
nama atribut. Bingung? coba kode
berikut ini dijamin anda mengerti:
H e l l o < f o n t f a c e = " v e r d a n a " s i z e = " 2 " c o l o r = " r e d " >W o r l d ! ! < / f o n t >
Hasilnya:
Hello World!!
Tulisan World!! terletak ditengah tag
< f o n t > nah tag < f o n t >
memiliki atribut face, size dan color
yang dapat anda ubah nilainya.
Cobalah untuk mengubah ukuran
(size) menjadi 3 atau jenis fontnya
ubahlah dari verdana menjadi arial.
Kira-kira seperti itu kegunaan atribut.
Bagaimana? lanjut?
HTML Entity
Jika anda ingin menuliskan karakter
khusus dalam web, maka anda
perlu menulisnya menggunakan
kode khusus. Kode khusus ini
dikenal dengan istilah HTML entity.
Sebagai contoh anda ingin menulis
seperti ini:
Saya belajar web
Anda lihat ada jarak spasi antara
belajar dan web. Anda tidak bisa
membuat spasi dengan menekan
tombol space bar berkali-kali.
Meskipun pada kode HTML hasilnya
terdapat jarak namun browser
hanya membacanya sekali, jadi
sebanyak apapun space bar yang
tekan browser hanya membacanya
satu spasi. Lalu bagaimana caranya?
Spasi dalam HTML memiliki kode
HTML entity yaitu & n b s p ; jadi
untuk membuat seperti contoh
diatas anda perlu menulisnya seperti
ini:
S a y a b e l a j a r & n b s p ; & n b s p ; & n b s p ; & n b s p ; we b
HTML entity selalu diawali dengan
"&" dan diakhiri dengan ";" ada
banyak sekali HTML entity anda
dapat mencarinya, dan lagi-lagi saya
akan menyuruh anda mencarinya
sendiri melalui google.