HTML adalah singkatan dari Hypertext
Markup Language. Disebut hypertext karena di dalam HTML sebuah text
biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat
berpindah dari satu halaman ke halaman lainnya hanya dengan meng-klik text tersebut.
Kemampuan text inilah yang dinamakan hypertext, walaupun pada implementasinya
nanti tidak hanya text yang dapat dijadikan link.
Disebut
Markup Language karena bahasa HTML menggunakan tanda (mark), untuk menandai
bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu
akan menjadi tebal, dan jika berada di antara tanda lainnya akan tampak besar.
Tanda ini di kenal sebagai HTML tag.
HTML
merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam membuat web,
jika hanya menggunakan HTML tampilan web terasa hambar. Terdapat banyak bahasa
pemograman web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript
dan PHP. Akan tetapi sebelum anda belajar JavaScript maupun PHP, memahami HTML
merupakan hal yang paling awal.
2.
Struktur HTML
Ok,
lanjut lagi. Struktur HTML terdiri dari <html> (tag html), <head>
(tag head), dan <body> (tag body). Perhatikan bagan berikut:
Suatu
dokumen html harus memuat struktur tersebut (lihat bagan di atas).
Bagian-bagian struktur tersebut memiliki fungsi masing-masing:
a.
html
<html>
(tag html) merupakan tag pembuka html yaitu awal dari dokumen html. html selalu
memiliki tag pembuka dan tag penutup. Tag penutup html yaitu </html> yang
merupakan akhir dari dokumen html.
b.
head
<head>
merupakan tag tempat meletakkan informasi header. Pada tag ini terletak tag
title, tag informasi web: meta, tag link dengan dokumen bahasa pemrograman lain
seperti css, javascript, php, dll. Tag head ini juga memiliki tag penutup,
yaitu </head>.
c.
title
<title>
merupakan tag untuk mendefinisikan judul web. Tag ini juga memiliki tag
penutup, yaitu </title>.
d.
body
<body>
merupakan tag sebagai tempat untuk meletakkan seluruh isi web. Tag penutup dari
tag ini adalah </body>. Seluruh isi web yang akan dibuat dikerjakan di
dalam tag body, yaitu antara tag pembuka dan tag penutupnya.
Setelah
mencakup seluruh bagian struktur tersebut, langkah selanjutnya yaitu menyimpan
file tersebut dengan type .html, misalnya: pertama.html. Setelah disimpan
jalankan file di web browser. Judul web tampak pada bagian tab, sedangkan
seluruh isi body ditunjukkan pada bagian isi web. Inilah hasilnya :
3.
Cara Membuat Daftar/ List di HTML
Dalam
HTML, tag list terdiri dari 2 jenis, ordered list (berurutan) dan unordered
list (tidak berurutan). Ordered list akan ditampilkan dengan angka atau huruf,
sedangkan unordered list dengan bulatan atau kotak.
Ordered
list menggunakan tag <ol>, dan unordered list menggunakan tag <ul>,
sedangkan untuk list sendiri menggunakan tag <li>. Penjelasan ini akan
lebih mudah jika menggunakan contoh.
Berikut
adalah contoh kode HTML untuk membuat ordered list menggunakan tag<ol>:
Berikut
adalah hasilnya :
4.
Cara Membuat Link di HTML
Tujuan
kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik akan
pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.
Link
ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap
tag <a> setidaknya memiliki sebuah atribut href. Dimana href berisi
alamat yang dituju (href adalah singkatan dari hypertext reference).
Agar
lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan
buat kode seperti dibawah ini.
Berikut
adalah hasilnya :
5.
Cara Menambahkan Gambar di HTML
Sulit
membayangkan sebuah halaman HTML tanpa gambar untuk standard web saat ini. Pada
tutorial belajar HTML cara menambahkan gambar di HTML ini kita akan mempelajari
cara penggunaan tag image. Tag Image digunakan untuk menampilkan gambar kedalam
halaman web, menggunakan <img>.
Atribut
src adalah singkatan dari source, merupakan atribut yang berisi alamat dari
gambar yang akan ditampilkan. Alamat ini bisa relatif atau absolute. (perbedaan
tentang alamat relatif dan alamat absolute telah kita bahas pada Belajar HTML:
Cara Membuat link di HTML).
Untuk
contoh kode HTML tentang image ini, sediakan sebuah gambar yang akan digunakan
sebagai tampilan, dan tempatkan gambar tersebut ke dalam satu folder dengan
halaman contoh. Gambar dapat berupa JPEG, PNG, maupun GIF.
Pada
contoh dibawah ini saya menggunakan sebuah gambar DSC_0368.jpg yang berada dalam
satu folder dengan halaman HTML saat ini. Savelah sebagai img.html
Atribut
lainnya membolehkan kita untuk menentukan besar dari gambar yang ditampilkan,
yaitu width dan height. Dibawah ini adalah screenshoot hasilnya :
Berikut
Adalah Source Code nya :
6.
Cara Membuat Table di HTML
Untuk
membuat tabel di HTML, kita membutuhkan setidaknya 3 tag, yaitu tag
<tabel>, tag <tr>, dan tag <td>:
Tag <tabel> digunakan untuk memulai
tabel
Tag <tr> adalah singkatan dari table
row, digunakan untuk membuat baris dari tabel.
Tag <td> adalah singkatan dari table
data, digunakan untuk menginput data ke tabel.
Agar
lebih jelas, kita akan langsung menggunakan contoh kode HTML:
Dan berikut
ini adalah source code dan hasilnya :
7.
Cara Membuat Form di HTML
Pengertian
tag <form>
Sebuah
form dalam HTML harus berada di dalam tag form, yang diawali dengan
<form> dan diakhiri dengan </form>. Tag form akan membutuhkan
beberapa atribut untuk dapat berfungsi dengan seharusnya.
Struktur
dasar form akan terlihat sebagai berikut:
<form
action="prosesdata.php" method="post">
...isi form...
</form>
Mengenal
tag <input>
Tag
input merupakan tag paling banyak digunakan di dalam form dan memiliki banyak
bentuk, mulai dari isian text biasa, text password, checkbox, radio, sampai
dengan tombol submit, semuanya dalam bentuk tag <input>.
Bentuk-bentuk
dari keluarga tag input ini dibedakan berdasarkan atribut type:
<input type=”text” /> atau bisa juga
<input /> adalah textbox inputan biasa yang menerima input berupa text,
contohnya digunakan untuk inputan nama, username, dan inputan yang berupa text
pendek. Input type text ini juga bisa memiliki atribut value yang bisa diisi
nilai tampilan awal dari text
<input type=”password” /> dalam
tampilannya sama dengan type text, namun teks yang diinput tidak akan terlihat,
akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk inputan yang
sensitif seperti password.
<input type=”checkbox” /> adalah
inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User
dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut
checked yang jika ditulis atau diisi dengan nilai checked, akan membuat
chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh
inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.
<input type=”radio” /> mirip dengan
checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type
radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya.
Contoh inputan type radio adalah jenis kelamin.
<input type=”submit” /> akan
menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir
dari form. Atribut value jika diisi akan membuat text tombol submit berubah
sesuai inputan nilai value.
Mengenal
tag <textarea>
Tag
textarea pada dasarnya sama dengan input type text, namun lebih besar dan dapat
berisi banyak baris. Panjang dan banyak baris untuk text area di atur melalui
atribut rows dan cols, atau melalui CSS.
Contoh
penggunaan textarea adalah sebagai berikut:
<textarea
rows="5" cols="20">
Text yang diisi dapat mencapai banyak baris
</textarea>
Elemen
yang berada diantara tag textarea akan ditampilkan sebagai text awal dari form.
Mengenal
tag <select>
Tag
select digunakan untuk inputan yang telah tersedia nilainya, dan user hanya
dapat memilih dari nilai yang ada. Tag select digunakan bersama-sama dengan tag
option untuk membuat box pilihan.
Contoh
penggunaan tag select adalah sebagai berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan
ketiga">Pilihan 3</option>
</select>
Ketika
form dikirim untuk diproses, nilai dari tag <option> akan dikirimkan.
Nilai ini adalah berupa text diantara tag option, kecuali jika kita memberikan
atribut value. Jika atribut value berisi nilai, maka nilai value-lah yang akan
dikirim. Ada atau tidaknya atribut value ini tidak akan tampak dalam tampilan
form.
Tag
select memiliki atribut selected yang dapat ditambahkan agar tag select berisi
nilai awal. Contoh penggunaanya adalah sebagai berikut:
<select>
<option>Pilihan 1</option>
<option>Pilihan 2</option>
<option value="pilihan ketiga"
selected>Pilihan 3</option>
</select>
Mengenal
Atribut: Name
Setiap
tag inputan di dalam form harus ditambahkan atribut name agar dapat diproses
oleh web server nantinya. Di dalam halaman proses (yang biasanya berupa bahasa
PHP atau ASP), nilai dari atribut name inilah yang akan menjadi variabel form.
Contoh pemakaiannya adalah sebagai berikut:
<input
type="text" name="username">
<input
type="text" name="email">
Kedua
input diatas akan tampak sama persis, namun pada saat pemrosesan data,
masing-masing akan dibedakan menurut atribut name.
Akhirnya,
Sebuah Form Utuh
Merangkum
seluruh tag form HTML yang telah kita bahas diatas, maka saatnya untuk membuat
sebuah form HTML. Silahkan buka text editor, dan tuliskan kode HTML berikut,
lalu save sebagai formulir.html
Dan berikut
hasilnya :
Oke teman
- teman ku semuanya, mungkin cuma itu yang bisa saya share kepada kalian mudah –
mudahan artikel ini dapat membantu teman – teman dalam membuat web menggunakan
HTML. Semoga bermanfaat :D
Terimakasih
dan sampai jumpa lagi.
