Belajar Mengenal Dasar-dasar HTML (Hyper Text Marquee Languange):
Sebagai seorang blogger baik blogger profesional maupun blogger personal sebaiknya kita menguasai dasar-dasar dari bahasa HTML karena dengan mengerti bahasa HTML
akan memudahkan kita dalam mengoprek dan mengoptimasi website atau blog
yang kita miliki, oleh karena itu saya akan menulis sedikit tentang
dasar-dasar bahasa HTML yang semoga bisa memberi sedikit pencerahan bagi
kita semua.
A.
DEFINISI HTML
HTML
(Hypertext Markup Language) merupakan suatu bahasa pemrograman untuk
membangun sebuah dokumen dalam bentuk halaman di web (walaupun banyak orang
yang keberatan) menyebut HTML sebagai
bahasa pemrograman Karena dirasa terlalu sederhana, hanya terdiri dari tag
<html> sampai </html>, selain itu juga, HTML tidak memiliki ‘looping’ seperti bahasa
pemrograman lain. Namun dalam hal ini, tidak bisa dipungkiri bahwa HTML selalu
ada pada sebuah halaman web page, karena HTML dapat dipergunakan sebagai hypertext link yang mampu membentuk
hubungan antara teks dan dokumen lain. Dengan demikian pembaca dokumen bisa
melompat dari satu dokumen ke dokumen yang lain dengan mudah.
B. STRUKTUR
DASAR HTML
Adapun
susunan penulisan HTML, secara mudah mempunyai struktur sebagai berikut
berikut:
<html>
<head>
<title>
Nama judul yang akan muncul pada browser
</title>
</head>
<body>
semua data, baik itu tulisan,gambar,maupun suara akan
ditampilkan disini.
</body>
</html>
Dalam HTML juga terdapat suatu komponen (tag)
yang kegunaannya dapat dilihat dibawah ini:
Tag Dasar
|
|
Mendefinisikan sebuah dokumen
HTML
|
<head>…</head>
|
Mendefinisikan isi atau badan
sebuah dokumen HTML
|
<body>…</body>
|
Mendefinisikan judul, deskripsi dan meta tag sebuah dokumen HTML
|
|
|
C. MENGENAL TAG PADA HTML
1.
Tag
Headline
Dalam model tag headline ada beberapa macam
yang sering digunakan untuk memformat tampilan huruf dari kecil dan besar yang
dimulai dari <H1></H1> sampai <H6></H6>.
Contoh penggunaan :
<html>
<head>
</head>
<body>
<h1> Heading h1</h1>
<h2> Heading h2</h2>
<h3> Heading h3</h3>
<h4> Heading h4</h4>
<h5> Heading h5</h5>
<h6> Heading h6</h6>
<h7> Heading h7</h7>
</body>
</html>
2.
Tag List
Tag ini biasanya
digunakan untuk menampilkan informasi dalam bentuk daftar (list). Adapun jenis
tag list ini ada dua yaitu format bullet (bulleted list) dan dalam bentuk nomor
(ordered list). Biasanya ditambahkan dengan tag yang berbeda yaitu dengan tag <UL> dan <OL>.
Contoh penggunaan :
<html>
<head>
</head>
<body>
<h2> Daftar Nama Dalam Bentuk Nomor </h2>
<ol>
<li>rian
<li> Bumi
<li> Sasongko
</ol>
<h3>
Daftar Nama Dalam Bentuk Bullet </h3>
<ul>
<li> Aryasatya
<li> Bumi
<li> Sasongko
</ul>
</body>
</html>
3.
Tag hr
Tag <hr>
digunakan untuk membuat garis batas horizontal dan sekaligus akan membentuk baris baru.
4.
Tag Br
Tag <br>
biasanya digunakan untuk penggantian baris baru. Sehingga kita dapat membuat
baris baru bagi dokumen yang memerlukan pergantian baris.
D.
MEMFORMAT FONT DAN MENEMPATKAN GAMBAR
Dalam halaman web kita juga dapat melakukan
pengaturan font dan gambar sehingga halaman web kita dapat terlihat lebih indah
dan menarik. Penulisan perintah untuk memformat Font adalah sebagai
berikut :
<font atribut></font>,
untuk atribut dapat berupa size, face maupun lainnya.
Sedangkan
penulisan perintah untuk menempatkan gambar adalah sebagai berikut <img scr="/url/nama_file"> dengan format yang sering digunakan adalah JPG, GIF dan PNG.
Tag
<img> selalu diikuti dengan atribut src yang menunjukkan lokasi dan nama
file grafik yang ingin kita tampilkan. URL (Universal Resources Locator)
adalah alamat absolut dari file grafik tersebut.
Atribut tambahan untuk instruksi
<img> adalah Align. Atribut ini
mengendalikan letak (alignment) teks yang berada di baris yang sama
dengan grafik terhadap sisi vertikal gambar. Atribut Align ditulis
dengan cara sebagai berikut :
<img src="gambar.gif" align=top>
Anda
dapat melihat atribut pada image seperti pada table dibawahi ini:
Tabel
2. Atribut pada image
ATRIBUT
|
KEGUNAAN
|
Width
|
Memberikan informasi mengenai ukuran lebar gambar kepada
browser sebelum file grafiknya sendiri dikirimkan.
|
Height
|
Memberikan informasi mengenai ukuran vertikal gambar
kepada browser sebelum file grafiknya sendiri dikirimkan.
|
Vspace
|
Menentukan jarak diatas dan dibawah
|
Hspace
|
menentukan jarak diatas dan dibawah
|
Border
|
Menentukan garis pinggir disekitar gambar.
|
E.
MEMBUAT TABLE DENGAN HTML
Keberadaan tabel sangatlah penting dalam
menampilkan dokumen atau informasi yang memerlukan banyak kolom dan baris.
Namun lebih dari itu, table dapat menjadi alat utama dalam HTML untuk
mengendalikan tata letak dokumen pada web kita..
Table
3. Struktur table
Tag
|
Kegunaan
|
|
|
Digunakan untuk menampilkan data dalam bentuk table
|
|
|
Digunakan untuk menampilkan judul pada kolom
|
|
|
Digunakan untuk menentukan baris (table row)
|
|
|
Digunakan untuk menampilkan data pada setiap table (table data)
|
Anda dapat lebih memahami tag tag diatas
dengan mencoba membuat table dengan kode HTML dibawah ini.
Contoh penggunaan :
<html>
<head>
<title> Pengunaan table</title>
</head>
<body >
<table border="1">
<tr>
<th>kolom1</th>
<th>kolom2</th>
<th>kolom3</th>
<tr>
<td>isi baris 1 kolom 1</td>
<td>isi baris 1 kolom 2</td>
<td>isi baris 1 kolom 3</td>
</tr>
<tr>
<td>isi baris 2 kolom 1</td>
<td>isi baris 2 kolom 2</td>
<td>isi baris 2 kolom 3</td>
</tr>
</table>
<br>
<br>
<table border ="1">
<tr>
<td>isi baris 3 kolom 1</td>
<td>isi baris 3 kolom 2</td>
<td>isi baris 3 kolom 3</td>
</tr>
</table>
</body>
</html>
F.
MEMBUAT LINK
Kelebihan
HTML adalah dapat berpindah dari satu halaman ke halaman yang lain.
Suatu link hypertext, dalam suatu dokumen Web, dapat berupa gambar atau teks.
Bila Anda mengklikkan mouse pada link-link tersebut, browser akan membawa Anda
menuju ke dokumen lain yang ditunjukkan oleh link tersebut. Beberapa model link
yang dapat anda gunakan adalah seperti dibawah ini:
1. Model link Absolute
Model
ini dapat ditulis sebagai berikut dengan intruksi:
<a href=” http://
www.yahoo.com”>
2. Model berpindah Halaman
<a href=” dokumen.htm”>
3. Model link satu halaman
<a href=”# nama_link”>
Dengan catatan nama_link telah
didefinisikan terlebih dahulu dengan cara:
<a name=” nama_link”>
G. ELEMEN FORM
Keberadaan form dalam HTML sangatlah
penting, Form dalam HTML ditandai dengan tag <FORM> dan </FORM>.
Sewaktu kita membuat elemen form, kita perlu menentukan bagaimana dan kemana
data yang diisikan ke dalam form tersebut akan dikirimkan dari browser ke Web
server. Hal ini dilakukan dengan pernyataan Action
dan Method. Action menunjukkan
lokasi tempat program CGI yang hendak dijalankan, sedangkan Method menunjukkan bagaimana informasi
yang diisikan dalam form harus dikirimkan ke web server. method yang umum
adalah get dan post.
1.
Elemen Textarea
Textarea biasanya dipakai, bila kita
menginginkan tempat bagi user web untuk memasukkan informasi yang panjangnya
beberapa baris. perintah yang dipergunakan adalah : <textarea name=”nama” rows=n
col=n>
Name
menyatakan nama data yang akan dimasukkan ke dalam textarea ini. cols dan rows berturut-turut menentukan banyak lebar textarea dan jumlah baris di dalam textarea. bila cols dan rows tidak ditentukan dalam kode
textarea, maka nilai yang akan dipergunakan adalah 40 karakter lebar dan 4
baris tinggi.
2.
Elemen select
Terkadang Anda ingin menyediakan beberapa
pilihan kepada user dokumen Web Anda sebagai masukan. <SELECT> akan
menampilkan suatu daftar yang dapat dipilih oleh user , baik dalam bentuk menu
pop-up maupun menu gulung.
3.
Elemen input
Adapun elemen
input ini biasanya terdiri dari:
a.
Textbox
Elemen ini
digunakan untuk membuat kotak text yang mampu menerima masukkan berupa string
atau bisa juga text yang teleh dienkripsi.
Untuk model text
biasa
Nama: <input type ="text" name=tnama
size=xx>
Dimana type yang
digunakan yaitu berupa text
Untuk model text
yang telah dienkripsi.
Password:
<input type
="password" maxlenght=”6”>
b.
Radio button
Elemen ini
digunakan untuk menampilkan suatu daftar masukan berupa pilihan, dimana
pengguna hanya diperbolehkan memilih satu dari pilihan yang ada.
Contoh:
jenis kelamin :
<input type ="radio"
name=jenkel value="laki-laki">
laki-laki
<input type ="radio"
name=jenkel value="perempuan">
perempuan
c.
Tombol
Elemen ini
digunakan untuk menampilkan tombol, baik itu tombol Submit , maupun Reset.
Contoh.
<input type ="submit"
value="kirim">
<input type ="reset"
value="batal">
1)
Submit
digunakan untuk membuat tombol yang fungsinya untuk mengirimkan dara form agar
diolah
2)
Reset
digunakan untuk membuat tombol yang fungsinya untuk menghapus seluruh isian
form yang telah diberikan
d.
Checkbox
Serupa dengan
tombol, Checkbox memungkinkan user dokumen untuk memilih suatu pilihan dari
beberapa pilihan yang tersedia, bedanya Checkbox mengijinkan user memilih lebih
dari satu pilihan. Perintah yang digunakan :
Table 4. Daftar atribut yang digunakan pada elemen form
Atribut
|
Keterangan
|
Name
|
Mendefinisikan
nama dari suatu objek
|
Size
|
Menentukan
ukuran kotak teks
|
Maxlenght
|
Menentukan
jumlah maksimum karakter yang dapat dimasukkan pada kotak teks
|
Value
|
Pada
elemen kotak teks digunakan untuk menentukan teks yang tertulis. pada elemen
check box atau radio digunakan untuk menentukan nilai item yang dipilih
sedangkan Pada elemen submit dan reset yaitu digunakan untuk menentukan teks
yang tertulis pada tombol
|
Checked
|
Digunakan
hanya pada checkbox atau radio untuk menentukan pilihan secara default
|
Type
|
Menentukan
tipe input yang akan dibuat
|
