tag HTML dan atributnya
Sebelum memulai sekedar mengingatkan apakah anda sudah membuat folder di drive C:\ yang bernama HTML jika tidak, buatlah sekarang. Lalu buatlah folder yang bernama bab 1, bab2 dan seterusnya. Jika anda praktik pada bab 2 maka simpanlah file anda pada folder bab 2. Demikian untuk seterusnya.
Pada pembahasan kali ini materi yang diharapkan dapat anda kuasai antara lain:
- Menggunakan berbagai attribut dari tag diantaranya:
Tag p, font, table, form, input, select, option, a, body, img, ul, ol, li dan attribut universal
Contoh-contoh penggunaan tag dan atributnya
Pada bab sebelumnya telah anda pelajari macam-macam atribut dari tag yang terdapat pada HTML. Sekarang saatnya kita menerapkan atribut tersebut dalam sebuah file. Untuk lebih memudahkan anda dalam memahami kita langsung saja pada contoh.
- Pertama jalankan software “PHP DESIGNER 2006” atau Macromedia Dreamweaver.
- Klik menu File – New – HTML/XHTML
Maka akan nampak sebuah ruang kerja mirip dengan dengan Microsoft Word. Untuk contoh yang pertama ini kita akan menggunakan atribut dari tag <p>…</p>.
A. Tag <p>…</p>
Tag <p> digunakan untuk membuat paragraf dalam sebuah halaman web. Kita semua tahu kalau paragraph ada yang bertipe rata kiri, tengah, kanan dan justify. Untuk lebih memperjelas ketik kode di bawah ini.
<html>
<head>
<title>Atribut Tag <P></title>
</head>
<body>
</html>
<head>
<title>Atribut Tag <P></title>
</head>
<body>
<p align="left"><b>Teks ini berada di kiri</p></body>
<p align="center">Teks ini berada di tengah</p>
<p align="right">Teks ini berada di kanan</b></p>
<p align="justify">Paragraph ini bertipe justify. Dimana semua teks akan dibuat lurus sama dengan batas tepi halaman. Oh ya, tag <p></p> merupakan default atau bentuk baku tag <p></p> dimana teks atau paragraf akan berformat rata kiri. Jika anda tidak memberi atribut <i>align</i> pada tag <p> maka browser akan menganggap rata kiri.</p>
</html>
Setelah selesai simpan file tersebut dengan mengklik menu File – Save. Akan muncul kotak dialog Save, arahkan ke drive C:\ lalu HTML(jika anda membuat folder lain silahkan simpan di folder anda tersebut) lalu Bab 2. Pada isian File Name isikan tag_p.html dan pastikan Save as Type adalah HTML Document. Untuk menjalankan anda cukup tekan tombol F5 maka akan muncul output dari kode anda. Untuk menampilkan File tersebut Buka IE atau FireFox klik File – Open, arahkan dimana anda menyimpan file tag_p.html tadi.
B. Tag <font>…</font>
Fungsi tag <font> adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf. Pada artikel sebelumnya telah kita singgung penggunaan atribut font. Namun kita akan lebih bereksperimen dengan atribut ini. Seperti biasa klik File – New – HTML/XHTML. Ketik kode di bawah ini.
<html>
<head>
<title>Atribut dari Tag Font</tile>
</head>
<body>
</html>
<head>
<title>Atribut dari Tag Font</tile>
</head>
<body>
<p><font face="Arial">Ini Font Arial</font></p></body>
<p><font face="Arial"><i>Ini Font Arial dan miring</i></font></p>
<p><font face="verdana" size="4" color="blue"><b>Ini Font Verdana berukuran 12 pt
berwarna biru sekaligus tebal</b></font>
<p align="center"><font face="Tahoma" color="red"><b>Ini Font Tahoma berwarna
merah, tebal dan berada di tengah</b></font><p>
<p align="center"><font face="Arial" color="red">Ini Font Arial berwarna Merah,
</font><font face="Verdana" color="blue">Sedangkan ini adalah font Verdana
berwarna biru</font></p>
</html>
Setelah selesai simpan dengan nama tag_font.html simpan pada folder bab 2 sama dengan tag_p.html.
C. Tag <table>...</table>
C. Tag <table>...</table>
Tag <table> adalah salah satu tag yang memiliki atribut terbanyak. Lihat tabel daftar tag pada artikel sebelumnya untuk melihat daftar atributnya. Dalam tag <table> juga terdapat 2 tag yang penting yang penting yaitu tag <tr></tr> untuk membuat baris dan tag <td></td> untuk membuat kolom.Tag <table> adalah tag yang penting dalam pendesainan sebuah tampilan situs. Jadi anda harus cukup menguasai tag ini.
OK, sekarang buatlah file baru seperti biasa klik File – New – HTML/XHTML. Ketik kode dibawah ini.
<html>
<head>
<title>Atribut dari tag tabel</title>
</head>
<body>
<p><b>Membuat Tabel</b></p>
<head>
<title>Atribut dari tag tabel</title>
</head>
<body>
<p><b>Membuat Tabel</b></p>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="8" cellspacing="0" width="100%">
<tr> <!-- <tr> artinya membuat sebuah baris -->
<td>Ini kolom 1 pada baris 1</td> <!-- <td> = membuat sebuah kolom. -->
<td>Ini kolom 2 pada baris 1</td> <!-- </td> mengakhiri sebuah kolom --></tr> <!-- mengakhiri sebuah baris -->
<tr><td>Ini kolom 1 pada baris 2</td></tr>
<td>Ini kolom 2 pada baris 2</td>
</table>
<p><b>Contoh 2: Membuat Tabel</b></p>
<table border="1" bordercolor="black" bgcolor="white" cellpadding="8" cellspacing="0" width="100%">
<tr bgcolor="yellow">
<td align="center">Ini kolom 1 pada baris 1</td>
<td align="right">Ini kolom 2 pada baris 1</td></tr>
<tr><td align="center" bgcolor="red"><font color="white">Ini kolom 1 pada baris 2</font></td></tr>
<td align="right">Ini kolom 2 pada baris 2</td>
</table>
<p><b><font color="blue">Tabel sebagai bingkai dari paragraf</font></b></p>
<table border="1" style="border-collapse: collapse" cellpadding="8" bgcolor="white" width="100%" bordercolor="black">
<tr><td><p>Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web. Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman web.</p>
<p>Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi. Sebenarnya itu adalah tabel hanya saja atribut <font color="red"><b>border="0"</b></font> sehingga tabel seakan tidak ada(transparan).</p>
<p>Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkai paragraf. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama. Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabel yang berada di dalam tabel utama</p>
<p align="center">
<!-- tag <table> untuk tabel anak --><table border="1" style="border-collapse: collapse" bgcolor="white" bordercolor="black" cellpadding="8" width="80%">
<tr bgcolor="yellow"><!-- </table ini untuk menutup tabel anak -->
<td><b>Nama Barang</b></td></tr>
<td><b>Harga Barang</b></td>
<tr>
<td>Monitor</td><td>Rp. 500.000,-</td></tr>
<tr>
<td>CDRW</td><td>Rp. 245.000,0</td></tr>
</table>
</td>
</tr></table>
</body>
</html>
Setelah itu simpan dengan nama tag_tabel.html serta tetap simpan di folder bab 2.
D. Tag <form>...</form>
D. Tag <form>...</form>
Tag <form> berguna untuk mengirimkan(mem-post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut. Tag-tag yang biasa digunakan bersama tag form adalah tag <input> dan <textarea>.
Atribut form yang banyak digunakan adalah method dan action. Atribut method menentukan jenis pengiriman data bisa berupa “POST” atau “GET”. Sedangkan action adalah file tujuan yang akan memproses data yang ada diantara tag <form>...</form>. Untuk lebih jelasnya lihatlah cuplikan script di bawah ini.
<form action="coba.php" method="post">
......................................
ISI
......................................
</form>
Seperti dikatakan sebelumnya tag form tidak dapat digunakan sendirian. Ia harus mempunyai data didalamnya untuk itulah digunakan tag-tag lain.
E. Tag <input>
E. Tag <input>
Tag <input> memiliki atribut type yang fungsinya sangat vital dalam output tampilan. Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox, password box, checkbox, radio button dan sebagainya.
Daripada banyak berteori lebih baik kita praktek saja. Seperti biasa buat file baru dan ketik kode di bawah ini.
<html>
<head>
<title>Atribut tag Form dan Input</title>
</head>
<body><font face="verdana" size="2">
<head>
<title>Atribut tag Form dan Input</title>
</head>
<body><font face="verdana" size="2">
<form action="coba.php" method="post">
<p><b>Tag input dengan atribut type="text"</b><br>
<input type="text" name="teks_ku" size="16" maxlength="20"><br>
Ini textbox dengan nama <i>teks_ku</i> ukuran <i>16 chr</i> dan maksimal karakrer yang dapat ditampung <i>20 chr(character)</i>.</p>
<p><b>Tag input dengan atribut type="password"</b><br>
<input type="password" name="password_ku" size="16" maxlength="20"<br>
Ini passwordbox dengan nama <i>password_ku</i> ukuran <i>16 chr</i> dan maksimal karakrer yang dapat ditampung <i>20 chr(character)</i>.</p>
<p><b>Tag input dengan atribut type="radio"</b><br>
<input type="radio" name="radio_ku" value="isi_1">Radio 1 --> nama
<i>radio_ku</i> isi/value <i>isi_1</i><br>
<input type="radio" name="radio_ku" value="isi_2">Radio 2 --> nama
<i>radio_ku</i> isi/value <i>isi_2</i><br>
<b>Jika nama radio tidak sama maka tidak dianggap satu pilihan. Untuk membuktikannya silahkan ganti salah satu nama dari radio diatas untuk mengetahui perbedannya.</b></p>
<p><b>Tag input dengan atribut type="checkbox"</b><br>
<input type="checkbox" name="checkbox_ku_1" value="isi_1">Checkbox 1 --> nama
<i>checkbox_ku_1</i> isi/value <i>isi_1</i><br>
<input type="checkbox" name="checkbox_ku_2" value="isi_2">Checkbox 2 --> nama
<i>checkbox_ku_2</i> isi/value <i>isi_2</i><p>
<p><b>Tag input dengan atribut type="submit"</b><br>
<input type="submit" value="Tombol Submit"><br>
Tombol ini berguna untuk mem-post(mengirimkan variabel dan isi variabel yang ada pada form ke file tujuan (action="file_tujuan"))</p>
<p><b>Tag input dengan atribut type="reset"</b><br>
<input type="reset" value="Bersihkan"><br>
Tombol ini berguna untuk membersihkan seluruh tulisan yang ada pada seluruh isian form. Coba isikan semua textbox dan radio lalu tekan tombol ini.</p>
<p><b>Tag input dengan atribut type="hidden"</b><br>
<input type="hidden" value="data_ku" name="data">
Tipe ini berguna jika si webmaster menginkan variabel yang sifatnya sudah didefinisikan. Dan tidak menampilkan output apapun.</p>
<p><b>Tag input dengan propeti type="image"</b><br>
<input type="image" src="/letak_file_gambar_anda" height="98" width="98"><br>
Image memiliki fungsi yang sama dengan type submit</p>
</form></font>
</body>
</html>
</html>
Simpan dengan nama tag_form_input.html dan jalankan.
F. Tag <select>...</select> dan <option>
F. Tag <select>...</select> dan <option>
Mengapa kita langsung membahas 2 tag?. Pertanyaan yang bagus dan jawabannya sama dengan dengan pembahasan diatas. Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output. Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat.
Sekarang mari kembali bermain kode. Buat file baru dan ketik kode dibawah ini!
Sekarang mari kembali bermain kode. Buat file baru dan ketik kode dibawah ini!
<html>
<head>
<title>Propeti tag Select dan Option</title>
</head>
<body>
<head>
<title>Propeti tag Select dan Option</title>
</head>
<body>
<p><b>Penggunaan select dan dan option</b></p>
<p>Daftar kategori silahkan pilih kategori</p>
<form action="coba.php" method="post">
Kategori: <select name="Pilihan">
<option value="Kategori 1">Kategori 1
<option value="Kategori 2">Kategori 2
<option value="Kategori 3">Kategori 3
</select>
<p>
<input type="submit" value="KIRIM"></p>
</form>
</body>
</html>
</html>
Simpan dengan nama tag_form_select.html lalu jalankan pada browser. Ingat agar Save as type nya adalah HTML Document.
G. Tag <a>...</a>
G. Tag <a>...</a>
Anda tentu sering surfing di internet dan mengklik suatu tulisan atau gambar yang menuju halaman website lainnya. Tulisan atau gambar itu adalah link. Ya, link adalah tulisan atau gambar yang merujuk/membuka halaman suatu website. Segala tulisan atau tag lainnya yang diapit tanda <a> dan </a> akan dianggap link oleh browser.
Nah, waktunya melemaskan tangan. Ketik kode dibawah ini.
<html>
<head>
<title>Atribut dari tag A</title>
</head>
<body>
<head>
<title>Atribut dari tag A</title>
</head>
<body>
<p>Tag a digunakan untuk menuju/membuka link alamat suatu website. Link merupakan tulisan yang merujuk suatu alamat website. Semua tulisan ataupun tag yang berada dalam tag <a> dan </a> akan dianggap link oleh browser. Atribut yang sangat penting dalam tag a adalah atribut <i>href</i>. Isi dari atribut ini adalah alamat website yang dituju.</p>
<p>Contoh link ke alamat Google</p>
<a href="http://www.google.com">Ini link ke google.com</a>
<p>Link juga mempunyai atribut <i>target</i> yang fungsinya berhubungan dengan window. Isi dari atribut target dapat berupa "_blank", "_self", "_parent", "_top". Atribut "_blank" akan membuka alamat website pada window yang baru. Isi atribut default dari target adalah "_self" dimana alamat website akan dibuka pada window yang sama.
<p>Untuk atribut target lainnya silahkan bereksperimen sendiri. Karena Thomas Alfa Eddison pun melakukan ribuan percobaan sebelum akhirnya ia dapat menemukan bohlam.</p>
</body>
</html>
</html>
Simpan dengan nama tag_a.html lalu jalankan.
H. Tag <body>...</body>
H. Tag <body>...</body>
Seperti namanya body artinya tubuh. Maka atribut yang diset pada tag body akan berpengaruh pada seluruh tubuh/body dokumen. Pada tag body terdapat beberapa atribut namun ada dua yang terpenting yaitu background dan bgcolor. Atribut background digunakan untuk membuat sebuah gambar menjadi latar dari halaman. Sedangkan bgcolor digunakan untuk menset warna dari latar halaman website. Kali ini yang akan dibahas hanyalah tag bgcolor karena tag background nilainya sama dengan tag image yang akan dibahas kemudian.
Saatnya melemaskan tangan kembali. Ketik kode di bawah ini.
<html>
<head>
<title>Atribut dari Tag Image</title>
</head>
<body bgcolor="#000000" link="http://www.google.com">
<head>
<title>Atribut dari Tag Image</title>
</head>
<body bgcolor="#000000" link="http://www.google.com">
<font color="#ffffff" face="verdana">
<p><b>Ini body dengan bgcolor="#000000" atau samadengan "black"</b><br> dan font color diset ="#ffffff" atau samadengan "white".</p>
<p>Di dalam html anda dapat menggunakan perpaduan warna antara angka dan huruf seperti "#cgcgcg" akan menghasilkan warna abu-abu.</p>
</body>
</html>
</html>
Simpan dengan nama tag_body.html dan buka dengan browser.
I. Tag <img>
I. Tag <img>
Suatu website yang bagus pasti memiliki gambar di dalamnya. Dan suatu waktu anda tentu ingin menambahkan gambar didalam website anda. Untuk menampilkan gambar pada halaman dapat digunakan tag <img>. Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP, JPG, GIF, TGA dan lain-lain.Tag img memiliki beberapa atribut yaitu
- src : letak file gambar yang akan ditampilkan
- border: tebal bingkai gambar
- height: menentukan tinggi image/gambar
- width: menentukan lebar image/gambar
Nilai dari atribut src jika letak file gambar berada pada direktori yang sama dengan direktori file html anda. Maka cukup tuliskan nama filenya saja, contohnya src=”nama_file.jpg”. Dan jika letak filenya berada pada sub folder/direktori maka nilainya adalah src=”sub_folder/nama_file.jpg”. Lalu bagaimana jika letaknya pada folder/direktori diatas file html saya?. Caranya hampir sama hanya saja ditambahkan tanda ../(titik dua dan slash). Yang artinya pindah satu folder keatas, jika letaknya di dua folder diatas file html saya. Sama tinggal menambah ../../ (artinya pindah dua folder ke atas). Contohnya src=”../nama_folder/nama_file.jpg”.
Untuk contoh kali ini masuklah ke direktori/folder HTML yang telah anda buat sebelumnya. Buatlah satu buah folder dalam direktori HTML tersebut. Dan berilah nama folder itu gambar. Lalu copykan satu gambar apa saja kedalam folder gambar tersebut. Lalu ketiklah kode berikut ini. Ingat ganti nilai dari src sesusai dengan nama file gambar anda.
<html>
<head>
<head>
<title>Atribut dari Tag img</title>
</head>
<body>
<head>
<head>
<title>Atribut dari Tag img</title>
</head>
<body>
<p><b>Tag img hanya dengan atribut <i>src</i></b></p>
<img src="/../gambar/fotoku.jpg">
<p><b>Tag img dengan border="1"</b></p>
<img src="/../gambar/fotoku.jpg" border="1"</b><p>
<p><b>Tag img dengan height dan width</b></p>
<img src="/../gambar/fotoku.jpg" border="1" height="300" width="200">
</body>
</html>
</html>
Lalu simpan dengan nama tag_img.html dan jalankan.
J. Tag <ol>...</ol>, <ul>...</ul> dan <li>...</li>
J. Tag <ol>...</ol>, <ul>...</ul> dan <li>...</li>
Kali ini kita akan membahas 3 tag sekaligus. Karena masing-masing tag tidak dapat dipisahkan. Tag <ol> dan <ul> keduanya membutuhkan tag <li> agar dapat menampilkan output. Tag-tag ini berguna untuk menyusun suatu daftar yang ingin anda tonjolkan pada pengunjung website. Ah..., capek teori lebih baik langsung praktek saja OK. Ketik kode dibawah ini.
<html>
<head>
<title>Atribut dari tag ol, ul dan li</title>
</head>
<body>
<head>
<title>Atribut dari tag ol, ul dan li</title>
</head>
<body>
<p><b>Penggunaan tag ol dengan li</b></p>
<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
<li>Ini nomor 3</li>
</ol>
<p><b>Penggunaan tag ul dengan li</b></p>
<ul>
<li>Ini bullet 1</li>
<li>Ini bullet 2</li>
<li>Ini bullet 3</li>
</ul>
<p><b>Gabungan tag ol, ul dan li</b></p>
<ul>
<li>Ini bullet 1</li>
<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
</ol>
<li>Ini bullet 2</li>
<ol>
<li>Ini nomor 1</li>
<li>Ini nomor 2</li>
</ol>
</ul>
</body>
</html>
</html>
Setelah selesai simpan dengan nama tag_ol_ul_li.html lalu jalankan pada browser.
K. Atribut universal
K. Atribut universal
Yang dimaksud atribut universal dalam hal ini adalah suatu atribut yang pasti terdapat pada tag apapun. Kita semua tahu tidak semua atribut dapat dimasukkan dalam tag tertentu. Contohnya atribut cellpadding milik tag <table> tidak dapat digunakan oleh tag <p>.
Berikut ini adalah daftar beberapa atribut universal yang penting.
- name: atribut ini untuk memberi nama pada tag yang digunakan(sangat penting dalam tag yang memerlukan input dari user.
- class: atribut ini digunakan khususnya jika anda menggunakan CSS(akan dibahas pada bab khusus).
- title: atribut ini menampilkan keterangan yang telah ditentukan oleh pembuat(istilahnya tooltips pada windows. Gerakkan mouse anda pada jam komputer akan muncul tulisan, itulah tooltips).
Category:
html
