HTML digunakan untuk membangun suatu halaman web. Sekalipun
banyak orang menyebutnya sebagai suatu bahasa pemrograman, HTML sama
sekali bukan bahasa pemrograman, tapi merupakan bahasa markup
(penandaan), terhadap sebuah dokumen teks. Simbol markup yang digunakan
oleh HTML ditandai dengan tanda lebih kecil ( < ) dan tanda lebih
besar ( > ) yang biasa disebut tag.
1. Dokumen dan Penamaan HTML
Sebuah file HTML merupakan file teks biasa yang mengandung tag-tag HTML.
Karena merupakan file teks, maka HTML dapat dibuat dengan menggunakan
teks editor yang sederhana, misalnya notepad. Dapat juga menggunakan
HTML editor yang bersifat WYSIWYG ( What You See Is What You Get ),
misalnya Frontpage atau Dreamwaver.Untuk menandai bahwa sebuah file teks
merupakan file HTML, maka ciri yang paling nampak jelas adalah ekstensi
filenya, yaitu .htm atau .html. Dalam pemberian nama sebuah dokumen
bersifat case sensitive sehingga dokumen dengan nama a.html
akan berbeda dengan dokumen A.html.
2. Elemen dan Tag HTML
Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML.
Untuk menandainya. Elemen dapat berupa teks murni, atau bukan teks, atau
keduanya.Untuk menandai sebuah elemen dalam suatu dokumen HTML
digunakan tag. Tag HTML terdiri dari sebuah simbol lebih kecil ( < )
dan dan lebih besar ( > ).Nama elemen ditunjukkan oleh nama dari
tagnya. Suatu elemen biasanya ditandai dengan
pasangan tag, walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa
harus berpasangan. Diantaranya:
- Image ( <img /> )
- Ganti Baris – Break ( <br /> )
- Horizontal Rule ( <hr /> )
- Input Field ( <input /> )
Tag dapat mempunyai atribut. Atribut mendefinisikan sesuatu tentang tag
tersebut. Atribut digunakan untuk mengubah default pemformatan dokumen
dengan tag yang bersangkutan.
Struktur Element : <p align="center"> ..... </p>
Struktur Dasar HTML :
3. Penggunaan Tag dan Atributnya
Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag HTML, memiliki syarat penulisan yaitu:
- Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
- Tag HTML secara normal selalu berpasangan misal (<i>...</i>)
- Tag pertama dalam suatu pasangan adalah tag awal, dan tag yang kedua merupakan tag akhir.
Tag Pembuka Tag Penutup Element :
- Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>
- Jika dalam suatu tag terdapat tag lain, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>
4. Tag Dasar HTML
a. HTML
Merupakan tag dasar yang mendifinisikan bahwa dokumen adalah dokumen
html. Tag ini merupakan suatu keharusan bagi pemrogram web untuk
menuliskannya sebagai tag pertama dalam dokumen html. Penulisan tag
seperti berikut ini : <html> pada awal dokumen dan </html> pada akhir dokumen.
b. Head
Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi
pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML.
Isi bagian head – kecuali judul dokumen – tidak akan terlihat oleh
pembaca dokumen tersebut. Penulisan tag seperti berikut ini :
<head> di awal setelah <html> dan </head> di akhir section head.
Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut :
- Menyediakan judul dokumen
- Menjembatani hubungan antar dokumen
- Memberitahu browser untuk membuat form pencarian
- Menyediakan metode untuk mengirim pesan ke tipe browser
Elemen yang mungkin terdapat pada bagian head :
- Tag <title>, digunakan untuk memberi judul dokumen. Penggunaannya adalah sebagai berikut : <title>Judul Dokumen</title>
- Tag <base>, digunakan untuk menentukan basis URL sebuah dokumen. Contoh penggunaannya adalah sebagai berikut berikut : <base href="//www.alamat.com/direktori" />
- Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.Tag ini mempunyai beberapa atribut :
Atribut Fungsi
href = Menunjuk pada URL / dokumen lain rel Mendefinisikan relasi terhadap sebuah dokumendan dokumen lain yang berisi informasi tentang personil yang member kontribusi terhadap dokumen tersebut.
rel = Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain.
type = Menentukan tipe dan paramenter dari relasi.
Contoh penggunaannya adalah sebagai berikut : <link rel="stylesheet" href="http://alamat.com/style.css" type="text/css" />.
- Tag <meta>, digunakan untuk mendefinisikan informasi-informasi di luar HTML Informasi meta dapat digunakan oleh browser untuk menjalankan suatu aktivitas yang belum didukung oleh HTML. Tag <meta> mempunyai atribut :
Atribut Fungsi :
http-equiv = Mendefinisikan properti dari elemen.
name = Menyediakan deskripsi tambahan dari elemen.
url = Mendefinisikan target dokumen dari sebuah properti content Menyediakan nilai respon dari properti.
Contoh penggunaannya adalah sebagai berikut : <meta http-equiv="refresh" content="60" url="www.alamat.com" />. Pada properti Keyword untuk mengindeks dokumen dan menggunakan teks yang terdapat pada properti Description untuk mendeskripsikan indeks tersebut.
c. BODY
Merupakan isi dari dokumen HTML. Semua informasi yang
akan ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan
ditempatkan di bagian ini.
Seperti telah disebutkan di atas, bagian BODY diawali oleh tag <body> dan ditutup </body>.
Atribut Fungsi :
alink = Menunjukkan warna link aktif.
background = Merujuk URL atau direktori dari gambar yang digunakan sebagai latar belakang.
bgcolor = Menentukan warna latar belakang.
bgproperties = Jika nilai atribut diisi “FIXED”, maka gambar latar belakang tidak ikut tergulung.
leftmargin = Batas kiri dokumen..
link = Menentukan warna link yang belum dikunjungi
text = Menentukan warna teks.
topmargin = Menentukan batas atas.
vlink = Menentukan warna link yang telah dikunjungi.
d. Memberikan Komentar
Untuk mempermudah pembacaan kembali kode-kode HTML,
kadang-kadang ditambahkan komentar ke dalam sebuah dokumen. Agar
komentar tidak dapat dibaca pada browser, maka harus digunakan tanda
khusus, yaitu <!-- dan diakhiri dengan tanda -->.
e. Memformat Dokumen HTML
Dalam HTML terdapat beberapa tag yang dapat digunakan untuk memformat dokumen.
Tag-tag tersebut diantaranya adalah :
- Tag <h#>, membuat heading sebuah dokumen. Nilai n berkisar antara 1 hingga 6.
- Tag <br />, membuat baris baru, tidak memerlukan penutup </br>
- Tag <p>, memulai paragaraf baru.
- Tag <hr />, membuat garis batas horizontal, tidak memerlukan penutup </hr>
- Tag <pre>, membuat tampilan dokumen HTML pada browser sama dengan tampilan pada teks editor. Dengan tag <pre>, maka tag <p> dan tag <br /> jadi tidak diperlukan lagi.
- Tag <center>, membuat teks rata tengah.
- Tag <ul> dan <ol>, pemformat dokumen lain yang akan sangat banyak berguna adalah LIST (daftar). Ada dua macam daftar, yaitu ORDERED lists (ol) dan UNORDERED lists (ul).
f. Memformat Karakter
Melakukan format terhadap karakter yang ditampilkan akan sangat berguna untuk
membuat sebuah dokumen menjadi menarik dan informatif.
1. Logical Format
1. Logical Format
Logical format akan menerapkan layout dokumen secara logis dan terstruktur. Semua tag
ini memerlukan tag penutup. Tag-tag yang termasuk logical format adalah sebagai
berikut :
• <cite>, digunakan untuk menandai suatu kutipan (citation).
• <code>, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa C.
• <em>, digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh penulis.
• <kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard.
• <samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
• <strong>, digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu teks.
• <var>, digunakan untuk menampilkan nama variabel.
• <dfn>, digunakan untuk menandai sebuah subdefinisidari daftar definisi.
2. Physical Format
Physical format adalah format terhadap fisik suatu font. Semua tag ini
memerlukan tag penutup. Tag-tag yang termasuk physical format adalah
sebagai berikut :
• <b>, untuk menampilkan huruf tebal.
• <i>, untuk menampilkan huruf miring.
• <u>, untuk menampilkan garis bawah pada teks. <tt>, untuk menampilkan huruf seperti huruf mesin ketik.
• <strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.
• <big>, untuk menampilkan ukuran huruf yang lebih besar.
• <small>, untuk menampilkan ukuran huruf yang lebih kecil.
• <sub>, untuk menampilkan subscript.
• <sup>, untuk menampilkan superscript.
3. Tag Font
Tag font digunakan untuk mengatur jenis, ukuran dan warna font. Contoh penggunaannya:
- <font face="arial" size="3" color="#ff0000">Jenis font ini adalah Arial, berwarna merah, ukurannya 3
</font>
- <font face="times new roman" size="6" color="blue">Jenis font ini adalah Times New Roman, berwarna biru, ukurannya 6
</font>
g. Menambahkan Gambar
Dokumen HTML akan terlihat lebih menarik apabila disisipkan gambar.
Format gambar yang dapat ditampilkan : GIF, JPEG, PCX, PNG, WMF, dll.
Sedangkan format gambar yang dikenal oleh hampir semua browser adalah
GIF dan JPEG. Untuk menambah gambar digunakan tag <img />.
Tag <img /> mempunyai Atribut Fungsi :
src = Merujuk kepada URL atau direktori lokasi gambar.
align = Posisi text disekitar gambar, nilainya adalah top, middle, bottom, left, right.
width = Lebar gambar dalam satuan pixel.
height = Tinggi gambar dalam satuan pixel.
align = Posisi text disekitar gambar, nilainya adalah top, middle, bottom, left, right.
width = Lebar gambar dalam satuan pixel.
height = Tinggi gambar dalam satuan pixel.
alt = Menampilkan text pengganti jika gambar tidak tampil.
h. Menambahkan Link
Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat
tertentu. Jika Link diklik maka dokumen HTML akan menuju ke alamat
tersebut. Ditandai dengan Anchor, yaitu tag <a>. Tag <a>
mempunyai atribut HREF yang digunakan sebagai link tujuan.
contohnya :
<a href="http://www.yahoo.com">Klik disini</a> untuk menuju situs Yahoo.com.</a>
Atau dapat juga dengan mengklik gambar ini :
<a href="http://www.yahoo.com">
<img src="bubbles.jpg" alt="gambar gelembung" align="middle" />
</a>
i. Tabel
HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu:
• Tag <table>, Mendefinisikan sebuah tebel.
• Tag <tr>, Mendefinisikan baris tabel.
• Tag <th>, Mendefinisikan judul kolom.
• Tag <td>, Mendefinisikan isi tiap kolom.
0 komentar:
Posting Komentar