#21 HTML tingkat lanjut


HTML Tingkat Lanjut

Setelah sebelumnya saya memposting mengenai pengertian HTML dan beberapa perintah dasarnya, kali ini saya akan memposting mengenai perintah – perintah tingkat lanjut dari HTML

Mengapa disebut tingkat lanjut ? Hal ini dikarenakan pada bahasan ini akan dilanjutkanbagaimana menggunakan grafik dalam halaman web. Tabel merupakan salah satu yang akandigunakan dalam pembuatan web. Dan dalam pembuatan tabel nanti Anda akan mempelajari bagian yang penting dalam pembuatan web yang dinamis yaitu tabel dan form.

Ordered List <ol>

Digunakan untuk membuat daftar dimana tiap bagian memiliki nomor secara berurut. Tag inimenggunakan tag <OL> dan diakhiri dengan </OL>. Sedangkan untuk tiap bagiannyadigunakan tag <LI>, dan tidak menggunakan penutup.Ketika menggunkan OL ini maka penomoran dimulai 1,2,3,… , namun hal ini dapat diubahdengan menggunkan atribut TYPE pada tag <OL>TYPE=1; daftar berurut dengan 1, 2, 3,TYPE=I; daftar berurut dengan I, II, III,TYPE=a; daftar berurut dengan a, b, c,

[codesyntax lang=”text”]

<HTML>
<HEAD>
<TITTLE>Ordered List</TITTLE>
</HEAD>
<BODY>
Urutan mobil berdasar peminat :
<OL>
<LI>Mercedest Benz
<LI>BMW
<LI>Honda
<LI>Hyundai
</OL>
</BODY>
</HTML>

[/codesyntax]

Unordered List <ul>

Dalam unordered list, tidak dijumpai urutan dalam suatu daftar. Setiap bagian dari unordered listditandai dengan bullet yang merupakan default dari unordered list. Untuk membuat tag inidigunakan tag <UL> dan diakhiri dengan </UL> dan tiap bagiannya digunakan <LI>. Juga bisadigunakan tanda cakram/disk, lingkaran, dll.

[codesyntax lang=”text”]

<HTML>
<HEAD>
<TITTLE>Ordered List</TITTLE>
</HEAD>
<BODY>
Urutan mobil berdasar peminat :
<UL TYPE=”square”>
<LI>Mercedest Benz
<LI>BMW
<LI>Honda
<LI>Hyundai
</UL>
</BODY>
</HTML>

[/codesyntax]

Grafik dalam Halaman Web <img>

Dalam HTML digunakan tag <IMG> untuk menampilkan gambar dalam halaman web. Formatgambar yang paling sering digunakan dalam halaman web yaitu GIF dan JPEG, dengan formatpenulisan : <IMG SRC=”file_gambar” ALT=”nama_alternatif”>.

Atribut SRC digunakan untukmenentukan sumber gambar. Sedangkan ALT digunakan sebagai teks pengganti gambar.Ada beberapa atribut dalam tag <IMG> yaitu :

• BORDER: memberikan suatu batas atau border pada gambar defaultnya=0

• HEIGHT,WEIGHT: menentukan tinggi dan lebar gambar dalam pixel

• HSPACE,VSPACE: menentukan jarak spasi horizontal dan spasi vertical antara gambardengan obyek sekitarnya.

• ALIGN: mengatur perataan gambar terhadap obyek disekelilingnya.

Table <table>

Table dapat Anda gunakan karena dapat menampilkan informasi dalam bentuk yang ringkas danmudah dibaca. Tag awal yang digunakan adalah <TABLE> dan tag penutupnya </TABLE>.

Tag <TABLE> mewakili beberapa bagian penting :

• <CAPTION> …</CAPTION> digunakan untuk membentuk judul table. Judul table akan terletak di luar table di bagian atas atau di bagian bawah

.• <TH>…</TH> digunakan untuk meletakkan judul table di bagian paling atas ataubagian paling kiri dari table.

• <TD> …</TD> digunakan sebagai tempat menulis data atau informasi dalam table.

[codesyntax lang=”text”]

<html>
<head>
<title>Tabel</title>
</head>
<body>
<table>
<caption>seputar liga italia</caption>
<tr>
<th>nama klub</th>
<th>berita</th>
</tr>
<tr>
<td>Ac milan</td>
<td>Ac milan mengalahkan Intermilan di semifinal liga champion</td>
</tr>
<tr>
<td>Juventus</td>
<td>Juventus juara liga italia musim 2002/2003</td>
</tr>
<td>
<tr>Roma</tr>
<tr>Roma akan berhadapan dengan Milan di final copa italia</tr>
</td>
</table>
</body>
</html>

[/codesyntax]

Table ALIGN dan WIDTH

Dalam perataan horizontal menggunakan atribut ALIGN, dimana bisa bernilai left untukperataan kiri, right untuk perataan kanan. Untuk perataan vertical Anda dapat menggunakan VALIGN, bernilai TOP untuk perataan atas, bernilai MIDDLE untuk perataan tengah dan BOTTOM untuk perataan bawah. Sedangkan untuk WIDTH digunakan untuk mengatur lebar table biasanya dinyatakan dalam (%) atau dinyatakan dengan pixel yang berarti ukuransesungguhnya.

[codesyntax lang=”text”]

<html>
<head>
<title>Tabel dengan width dan align</title>
</head>
<body>
<table width="88%" height="210">
<tr>
<td width="30%" height="110" valign="top">lihatlah
valign=&quot;top&quot;<br>
jangan kamu malu pada sesuatu yang tidak kamu ketahui
</td>
<td width="34%" height="110" valign="middle">bandingkan
dengan valign=&quot;middle&quot;<br>
</td>
<td width="36%" height="110" valign="bottom">bagaimana dengan
valign=&quot;bottom&quot;<br>
</td>
</tr>
</table>
</body>
</html>

[/codesyntax]

Table CELLSPACING dan CELLPADDING

Atribut CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara duabuah cell. CELLPADDING digunakan untuk mengatur jumlah spasi yang terdapat antar batas/border dengan isi atau teks di dalam cell tersebut.

[codesyntax lang=”text”]

<html>
<head>
<title>cellspacing dan cellpadding</title>
</head>
<body>
<table width="85%" border="3" cellspacing="5" cellpadding="5">
<tr>
<td width="43%">baris 1, kolom 1</td>
<td width="57%">baris1, kolom 2</td>
</tr>
<tr>
<td>baris 2, kolom 1</td>
<td>baris 2, kolom 2</td>
</tr>
</table>
</body>
</html>

[/codesyntax]

Table COLSPAN dan ROWSPAN

Atribut COLSPAN digunakan untuk menghubungkan beberapa kolom menjadi 1 kolom.ROWSPAN digunakan untuk menghubungkan beberapa baris menjadi satu.

[codesyntax lang=”text”]

<html>
<head>
<title>colspan dan rowspan</title>
</head>
<body>
<table width="85%" border="3" cellspacing="5" cellpadding="5">
<tr>
<td width="43%" rowspan="2">baris 1, kolom 1 <p>baris 2, kolom 1</td>
<td width="57%">baris 1, kolom 1</td>
</tr>
<tr>
<td width="57%">baris 2, kolom 2</td>
</tr>
<tr>
<td width="100%" colspan="2">baris 3, kolom 1 <p> baris 3, kolom 2</td>
</tr>
</table>
</body>
</html>

[/codesyntax]

Table COLOR

Selain warna pada background, border juga bisa ditentukan warnanya. Untuk backgrounddigunakan atribut BGCOLOR dan untuk memberi warna pada border digunakan atribut BORDER COLOR.

[codesyntax lang=”text”]

<html>
<body>
<table width="100%" border="3" cellpadding="5" cellspacing="5"
bordercolor="#FF0000">
<tr>
<td width="50%" bgcolor="#808080">&nbsp;</td>
<td width="50%">&nbsp;</td>
</tr>
<tr>
<td width="50%">&nbsp;</td>
<td width="50%" bgcolor="#008080">&nbsp;</td>
</tr>
</table>
<table width="100%" border="3" cellpadding="5" cellspacing="5"
bordercolorlight="008080"
bordercolordark="800080">
<tr>
<td width="100%">&nbsp;</td>
</tr>
</table>
</body>
</html>

[/codesyntax]

Form <form>…</form>

Tag <FORM> dan <INPUT> digunakan bersama-sama untuk meminta masukan dari user untukdikirim ke server. Tag <FORM> membuat kerangka dan tag <INPUT> menyediakan elemen antarmuka dengan user.

Untuk standar penulisan form adalah sebagai berikut :<FORM METHOD =”POST/GET” ACTION =”URL”>………</FORM>Atribut METHOD memiliki 2 nilai POST dan GET.

Metode GET mengirimkan data pada serverdengan cara meletakkan data pada bagian akhir URL yang ditunjuk. Metode POST mengirimkandatanya secara terpisah. Jika masukan banyak maka disarankan Anda menggunakan POST.

ACTION akan berisi URL dari program yang dipanggil form tersebut. Input teks <input type=”text”>Textbox adalah salah satu jenis control untuk memasukkan data.

HTML menyediakan tag<INPUT> dengan atribut TYPE=”text” untuk membuat kotak input. Untuk atribut VALUE digunakan untuk memberi nilai input, dan SIZE digunakan utuk menentukan batas terpanjangdari sebuah masukan.

[codesyntax lang=”text”]

<html>
<head>
<TITLE>form input dengan textbox</TITLE>
<body>
<p>Rancangan awal BUKU TAMU</p>
<table border="0" cellpadding="0" cellspacing="2">
<tr>
<td width="11%">Nama</td>
<td width="3%">:</td>
<td width="86"><input type="text" name="nama" size="20"></td>
</tr>
<tr>
<td width="11%" height="22">Alamat</td>
<td width="3%">:</td>
<td width="86"><input type="text" value="jember" name="alamat"
size="20"></td>
</tr>
<tr>
<td width="11%">Sekolah</td>
<td width="3%">:</td>
<td width="86"><input type="text" name="sekolah" size="20"></td>
</tr>
</table>
</body>
</head>
</html>

[/codesyntax]

Input Checkbox <input type=”checkbox”>

Anda juga bisa memberikan atribut TYPE dengan menggunakan Checkbox yang berfungsiuntuk memberikan user pilihan.

Contoh :

[codesyntax lang=”text”]

<html>
<head>
<title>Check Box</title>
</head>
<body>
<p>Berikan poling !</p>
<p>Daftar mobil</p>
<p>
<input type="checkbox" name="c1" checked>mercedes<br>
<input type="checkbox" name="c2" checked>bmw<br>
<input type="checkbox" name="c3" checked>honda<br>
<input type="checkbox" name="c4" checked>toyota
</p>
</body>
</html>

[/codesyntax]

Input Radio Button <input type=”radio”>

Jika atribut TYPE=”checkbox” diganti dengan TYPE=”radio”, maka user harus memilih salahsatu pilihan yang tersedia. User tidak bisa memilih lebih dari satu pilihan. Atribut CHECKED digunakan memberi tanda bahwa pilihan tersebut sedang diaktifkan.

Contoh :

[codesyntax lang=”text”]

<html>
<head>
<title>Radio Button</title>
</head>
<body>
<p>berikan piihan Anda</p>
<p>Rentang Usia</p>
<p>
<input type="radio" value="v1" checked name="R1">15 tahun<br>
<input type="radio" value="v2" checked name="R1">15-19 tahun<br>
<input type="radio" value="v3" checked name="R1">19-25 tahun <br>
<input type="radio" value="v4" checked name="R1">25-30 tahun<br>
</p>
</body>
</html>

[/codesyntax]

Sekian Sudah postingan saya mengenai HTML…

Semoga dapat digunakan untuk metode pembelajaran…

./croot

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s