Dasar-Dasar HTML
HTTP
(Hypertext transfer protocol) merupakan protokol yang digunakan untuk
mentransfer data antara web server ke web browser. Protocol ini mentransfer
dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup
Language). Dikatakan markup language karena HTML berfungsi untuk ‘memperindah’
file teks biasa untuk ditampilkan pada program web browser hal ini dilakukan
dengan menambahkan elemen atu sering disebut sebagai tag-tag pada file teks
biasa tersebut.
Saat
ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak
didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia pada HTML5 antara
lain sebagai berikut.
o
Canvas. Memungkinkan
pembuatan gambar dalam kanvas. Jadi, gambar tidak lagi diambil dari gambar
utuh, melainkan bisa disusun sendiri, bak menggunakan program Paint.
o
Header. Berguna untuk
menyatakan suatu judul, yang bisa diisi dengan elemen logo dan nama perusahaan.
o
Footer. Merupakan
kebalikan dari header. Sebagai catatan kaki, elemen ini berguna untuk menaruh
informasi di bagian bawah halaman web.
o
Time. Elemen ini
berguna untuk menyajikan informasi tentang waktu.
o
Audio. Memungkinkan
penyajian player untuk memutar suara.
o
Video. Memungkinkan
player untuk memainkan film.
Secara
prinsip, fitur pada HTML dapat dikelompokkan ke dalam :
o
Struktur halaman ;
o
Presentasi visual ;
o
Peranti penyaji
gambar ;
o
Pendukung media ; dan Peningkatan
koneksi dengan JavaScript.
Tag HTML biasanya berupa tag-tag yang
berpasangan dan ditandai dengan symbol lebih besar (<) dan (>). Pasangan
dari sebuah tag ditandai dengan symbol garis miring (/). Misalnya pasangan dari
tag <contoh > adalah</contoh>. Dalam hal ini <contoh> kita
sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut
untuk mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis
dengan atributnya adalah sebagai berikut:
<contoh
atribut1=”nilai_atribut1”atribut2=”nilai_atribut2=”…>.
Dalam
penulisan tag HTML tidaklah case sensitive artinya pengguna huruf kecil ataupun
capital tidaklah menjadi masalah.
Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar atau susunan
file sebagai berikut :
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Berisi tentang text, gambar,
atau apapun yang
tampil pada dokumen web.
</body>
</html>
Seperti
terlihat, struktur file HTML diawali dengan sebuah tag<html> dan ditutup
dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar,
yaitu yang diapit oleh tag <head>…</head> dan tag
<body>…</body>.
Bagian
yang diapit oleh tag HEAD merupakan
header dari halaman HTML dan tidak
ditampilkan pada browser. Bagian ini berisi tag-tag header seperti
<tittle>… </tittle> yang berpungsi untuk mengeluarkan judul pada
tittle bar window web browser.
Bagian
kedua, yang diapit ole tag BODY merupakan bagian yang akan ditampilkan pada
halaman web browser nantinya. Pada bagian ini anada akan menuliskan semua jenis
informasi berupa teks dengan bermacam format maupun gambar yang ingin sampaikan
pada pengguna nantinya.
Pengaturan Properti Dokumen
Properti
document diatur melalui atribut-atribut yang terdapat dalam elemen
<body>. Sebagai contoh adalah pengaturan warna latar belakng halaman, wana
teks, warna link dan lain-lain.
Kode Warna
Dalam
pengaturan warna menggunakan kode RGB yang mana ditampilkan dalam nilai
heksadesimal. Setiap bagian dua gigit kode menunjukkan banyaknya intensitas
dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit
pertama berarti tidak ada warna merah dalam kobinasi warna berikut ini adalah
contoh kode warna :
Atribut
Elemen <body>
BACKGROUND = Lokasi dan nama file (latar belakng
dokumen image dokumrn)
BGCOLOR = Warna (warna latar belakng
dokumen, default putih)
TEXT =
Warna (warna teks dokumen, default hitam)
LINK =
Warna (warna link dokumen, default biru)
VLINK = Warna (warna visited
link dokumen, default ungu)
ALINK = Warna (warna aktif
link dokumen, default merah)
Elemen
Heading <h1>… <h6>
Tag
heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu
halam web. Heading ini akan memperbesar ukuran huruf unruk setiap jenis
heading. Ad 7 buah heading yang dikenal di HTML, yaitu dari <h1> sampai
<h6>.
Elemen yang dihilangkan di HTML5
§ Berikut ini elemen HTML 4.01 yang
dihilangkan di HTML5:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
Dokumen
HTML5
Sebuah dokumen HTML5 seperti berikut
ini, cukup ditulis dengan Text Editor ataupun HTML Editor :
<! DOCTYPE HTML>
<html>
<head>
<title>Tes
HTML5</title>
</head>
<body>
Selamat
belajar HTML5
</body>
</html>
|
Berikut ini penjelasan dari dokumen
HTML5 di atas :
o Sebuah dokumen HTML5 diawali dengan
<!DOCTYPE HTML>.
o Tanda seperti <html> disebut tag.
Sebuah tag seperti itu menyatakan sebuah elemen dalam dokumen html.
o Beberapa tag berpasangan. Sebagai contoh,
<head> berpasangan dengan </head>.
o Namun, tidak semua tag berpasangan. Sebagai
contoh, <br> tidak punya pasangan. Khusus untuk tag seperti ini, tidak
ada keharusan untuk menyertakan tanda / sebelum >. Pada XHTML, tanda seperti
/ memang diharuskan untuk ditulis.
o Pasangan <html>..</html>
menyatakan awal dokumen HTML.
o Di dalam <html>..</html> terdapat
pasangan <head>..</head> dan <body>..</body>.
o Pasangan <head>..</head>
menyatakan bagian judul dokumen HTML. Isinya paling tidak berupa pasangan
<tittle>..</tittle>.
o Pasangan <body>..</body>
menyatakan bagian tubuh dokumen. Pada contoh,
Selamat belajar HTML5
muncul pada badan dokumen.
Apabila dibuka di
web browser tampilannya sebagai berikut :
berikut ini memperlihatkan penjelasan secara
visual terhadap dokumen HTML di depan
Silahkan berkomentar dengan sopan sesuai topik yang dibahas. Mohon tidak meninggalkan URL. Silahkan berkomentar dengan sopan serta sesuai topik dan dimohon untuk tidak meninggalkan link aktif.
Terima Kasih.
EmoticonEmoticon