MENGGUNAKAN ELEMEN DAN TAG HTML

1   

2   

3   

3.1  Membangun Tabel Sederhana

Tag <table> merupakan tag yang paling sering digunakan pada dokumen HTML, hal ini terjadi karena hampir semua dokumen HTML disusun dengan menggunakan tabel, sehingga menghasilkan tampilan yang rapi. Dalam tag <table> terdapat 2 tag yang tidak bisa dilepas dan selalu ada pada penggunaan tag <table>yaitu tag <tr></tr> yang berfungsi untuk membuat baris dan tag <td></td> yang berfungsi untuk membuat cell.

Contoh:

Bariske 4 record 3

Bariske 3 record 2

Bariske 2 record 1

Barisjudul

Simpan program tersebut dengan nama tabel.html, lalu jalankan, maka hasilnya adalah seperti berikut:

Untuk memberikan tampilan yang lebih menarik maka, properties dari tag yang digunakan dapat dimanfaatkan, seperti untuk membuat baris judul rata tengah maka kita dapat menggunakan property align dari tag <tr>dengan pilihan center. Contoh<tr align="center">. Jika script tersebut ditambahkan pada baris judul yang ada pada file tabel.html maka hasilnya adalah sebagai berikut:

Rata tengah

Dari gambar di atas kita dapat melihat bahwa baris judul sudah berubah menjadi rata tengah. Beda dengan gambar hasil sebelumnya dimana baris judul masih default yaitu rata kiri sesuai dengan standar HTML (jika perataannya tidak diatur maka teks otomatis rata kiri).

Selain properties tag <tr>, properties tag <table>dan tag <td>dapat juga kita kelola. Perhatikan sript berikut ini:

Catatan: dokumen ini merupakan pengambangan dari dokumen tabel.html, jadi nama filenya tetap sama dengan file tabel.html yang sudah dibuat sebelumnya.

Jika file di atas dijalankan maka hasilnya adalah sebagai berikut:

3.2  Menyatukan Cell PadaTabel

Saat menggunakan tabel, terkadang kita perlu menyatukan beberapa cell baik dalam baris maupun dalam kolom.

Untuk menghasilkan tabel seperti itu, maka kita dapat menggunakan properties tag <td>yaitu:

1.        Untuk menyatukan kolom adalah colspan

Contoh

<td colspan=”2”>

Artinya menggabungkan 2 kolom.

2.        Untuk menyatukan baris adalah rowspan

Contoh

<td rowspan=”4”>

Artinya menyatukan 4 baris.

Contoh perhatikan script berikut ini:

Simpan script di atas dengan nama tabel2.html.  Jika dokumen di atas dijalankan, maka hasilnya adalah sebagai berikut.

Dari tabel di atas kita dapat melihat cell Nomor, Nama, dan Rata-Rata, masing-masing merupakan penggabungan 2 baris, cell Hari merupakan penggabungan 3 kolom sedangkan cell Total merupakan penggabungan 2 kolom.

3.3  Mengolah Text

Ada beberapa tag yang dapat kita gunakan untuk mengelola teks. Tag-tag ini berfungsi untuk membuat perataan, membuat paragraph, mengatur style teks, member warna dan lain-lain.Tag-tag yang digunakan untuk mengolah teks antara lain:

1.      Tag <b>, <i>, <u>

Berfungsi untuk membuat cetak tebal, cetal miring dan teks bergaris bawah. Perhatikan script berikut ini:

Simpan file tersebut dengan nama file text1.html, kemudian jalankan maka hasilnya adalah sebagai berikut:

Selain menggunakan tag <b>, tag <i>,dan tag <u>kita juga dapat mengganti dengan tag <strong>untuk cetak tebal dan tag <em>untuk cetak miring, tag <ins>untuk garis bawah.

Hasil dari program di atas adalah sebagai berikut:

2.      Tag <big>, <small>, <strike>, dan<del>

Tag <big>merupakan tag yang berfungsi untuk membuat ukuran teks lebih besar, sedangkan tag <small>kebalikan dari tag <big>yaitu membuat ukuran teks lebih kecil. Tag <strike>dan tag <del>memiliki fungsi yang sama yaitu mencoret teks. Perhatian script di bawah ini:

Jika dijalankan maka hasil dari skrip di atas adalah sebagai berikut:

3.      Tag <pre></pre>

Merupakan tag yang berfungsi untuk menampilkan teks sesuai dengan bentuk yang sudah di buat pada dokumen. Perhatikan script program berikut ini:

Simpan program tersebut dengan nama file textpre.html, lalu jalankan maka hasilnya sebagai berikut:

4.      Tag heading

Tag heading merupakan tag yang berfungsi untuk mengatur ukuran teks dan ketebalan teks. Ada beberapa jenis tag heading yaitu: <H1>, <H2>,<H3>,<H4>,<H5>,<H6>,<H7>.Perhatikan script berikut ini:

Simpan script di atas lalu dengan nama file heading.html lalu jalankan, maka hasilnya sebagai berikut:

5.      Tag <font>

Menggunakan tag <font>, dapat kita gunakan untuk mengatur teks dengan cara menggunakan properties tag <font>itu sendiri. Contoh program:

<html>

<head>

<title>Mengolah Text</title>

</head>

<body>

<font color="#0000CC" face="Arial" size="+3" >

teksini di olah dengan menggunakan font

</font>

</body>

</html>

Hasil dari program di atas adalah sebagai  berikut:

6.      Tag <a>

Untuk menjelajahi setiap halaman yang ada pada web, dokumen html menyediakan fasilitas hyperlink sebagai menu untuk alat menghubungkan kehalaman yang lain. Untuk membuat contoh penggunaan tag <a>maka diperlukan minimal dua dokumen.   Perhatikan skrip berikut ini:

Simpan halaman ini dengan nama file halaman1.html. Dari skrip di atas ada beberapa hal yang perlu kita perhatikan yaitu:

<a href=”halaman1.html”>Halaman Utama</a>,

Keterangan:

<a>                      merupakan tag untuk memulai hyperlink

Href                     merupakan properties tag <a>untuk menampung file tujuan.

Halaman1.html    : nama file yang akan dituju

</a>                    : tag penutup hyperlink

       

Setelah membuat dokumen halaman1.html maka kita buat lagi dokumen yang lain dan disimpan dengan halaman2.html yang berisi skrip berikut ini:

Setelah selesai membuat dokumen halaman1.html, dan halaman2.html, selanjutnya kita jalankan dokumen halaman1.html, maka akan muncul tampilan seperti berikut:

Untuk mengaktifkan dokumen halaman2.html, kita tinggal mengklik menu Halaman kedua maka akan muncul tampilan seperti berikut ini:

Selanjutnya untuk kembali kehalaman sebelumnya kita dapat mengklik menu Halaman utama, demikian seterusnya.

7.      Tag <img>

Merupakan tag yang digunakan untuk menambahkan gambar pada dokomen html. Dengan menggunakan properties tag <img>kita dapat mengolah gambar tersebut sesuai dengan yang kita inginkan. Contoh

<html>

<head>

<title>Mengolah Gambar</title>

</head>

<body>

<table width="50%" border="0" cellspacing="0" cellpadding="4">

<tr>

<td>

<imgsrc="DSC_0280edit.jpg" width="200" height="250" border="4" align="right" title="GambarKeren" style="border-color:#00FF99">

</td>

</tr>

</table>

</body>

</html>

Keterangan:

<img>                    :  merupakan tag untuk menambah image/gambar

Src                          : perintah untuk mencari gambar yang diinginkan

DSC_0280.jpg       :alamat file gambar yang digunakan

Width                     : lebar gambar

Height                    : panjang gambar

Border                    : bingkai gambar

Align                      : perataan gambar

Title                        : Tulisan gambar saat pointer di arahkan

Style                       : mengganti style gambar dalam hal ini yang diganti adalah warna bingkai gambar

Hasil dari skrip di atas adalah sebagai berikut:

Kita dapat menyisipkan teks di gambar dengan menggunakan tag <blockquote></blockquote>, sehingga teks tidak mengganggu posisi gambar atau sebaliknya. Perhatikan skrip berikut ini:

<html>

<head>

<title>MengolahGambar</title>

</head>

<body>

<table width="50%" border="0" cellspacing="0" cellpadding="4">

<tr>

<td><blockquote>

<imgsrc="DSC_0280edit.jpg" width="200" height="250" border="4" align="right" title="GambarKeren" style="border-color:#00FF99">

Teks ini menyatu dengan gambar</blockquote></td>

</tr>

</table>

</body>

</html>

Hasilnya seperti berikut:

8.      Tag <li>, <ol>dan<ul>

Tag ini merupakan tag yang berfungsi untuk membuat list pilihan. Tag <li>berfungsi untuk membuat list sedangkan tag <ol>dan tag <ul>berfungsi untuk menentukan jenis listnya. Contoh:

<html>

<head>

<title>Membuat List</title>

</head>

<body>

Produktif Rekayasa Perangkat Lunak

<ol><li>Membuat Web Statis</li>

     <li>Dasar-Dasar Pemrograman</li>

<li>Mengoperasikan Aplikasi Basis Data </li>

<li>Membuat Basis Data menggunakan Query</li>

</ol>

Produktif Teknik Jaringan dan Komputer

<ul>

     <li>Mengoperasikan Sistem Operasi</li>

<li>Instalasi Sistem Operasi</li>

<li>Memperbaiki Periperal</li>

<li>Melakukan diagnose terhadap periperal</li>

</ul>

</body>

</html>

Hasil dari program di atas adalah sebagai berikut:

9.      Tag <sub>dan tag <sup>

Tag ini berfungsi untuk membuat teks Subscript dan Superscript. Contoh:

<html>

<head>

<title>Subscript dan superscrip</title>

</head>

<body>

<pre>

Rumus Phitagoras

C ² = a ² + b ²

Rumus Kimia

Air = H₂O

</pre>

</body>

</html>

Hasil dari program di atas adalah sebagai berikut:

10.  Tag <hr>dan<br>

Tag <hr>berfungsi untuk membuat garis, sedangkan<br>untuk memotong kalimat. Contoh penggunaan:

<html>

<head>

<title> HR dan BR</title>

</head>

<body>

Pengenalan Hypertext Markup Language

<hr>

Dengan menggunakan HTML

hal-hal yang dapat dilakukan antara lain:<br>

Mengontrol tampilan dari

web page dan contentnya<br>Mempublikasikan document

secara online sehingga bisa di akses dari seluruh dunia.

</body>

</html>

Hasil skrip di atas adalah sebagai berikut:

11.  Tag Form

Form biasanya digunakan untuk membuat formulir berupa isian maupun pilihan. HTML menyediakan script untuk membangun form, namun untuk memproses form biasanya HTML digabung dengan bahasa pemrograman lain yang sifatnya Server Side Scripting seperti PHP. Hal ini disebabkan karena HTML merupakan bahasa pemrograman Client Side Scripting, dimama bahasa tersebut merupakan bahasa pemrograman yang dapat membangun web statis, sedangkan pengunaan form biasanya diperlukan untuk membangun web yang sifatnya dinamis. Namun walaupun demikian, pada buku ini akan di buatkan contoh program penggunaan form, sehingga mempermudah penggunan buku ini untuk belajar pembuatan website dinamis. Untuk pembuatan form perhatikan skrip berikut ini:

<html>

<head>

<title>Membuat Form</title>

</head>

<body>

<form action="" method="post" enctype="multipart/form-data" name="form1">

<table width="50%" border="0" cellspacing="0" cellpadding="4">

<tr>

<td colspan="2">Form Data Siswa<hr></td>

</tr>

<tr>

<td width="20%">Nama</td>

<td width="80%"><label>

<input name="nama" type="text" id="nama" size="45">

</label></td>

</tr>

<tr>

<td>Kelas</td>

<td><label>

<select name="kelas" id="kelas">

<option>1</option>

<option>2</option>

<option>3</option>

</select>

</label></td>

</tr>

<tr>

<td><label>Jenis Kelamin</label></td>

<td><p>

<input type="radio" name="pria" id="radio" value="Pria">

Pria</p>

<p>

<label>

<input type="radio" name="wanita" id="radio2" value="wanita">

Wanita</label>

</p></td>

</tr>

<tr>

<td>Photo</td>

<td><label>

<input type="file" name="photo" id="photo">

</label></td>

</tr>

<tr>

<td>Keterangan</td>

<td><textarea name="keterangan" id="keterangan" cols="45" rows="5"></textarea></td>

</tr>

<tr>

<td><label>

<input type="submit" name="Submit" id="button" value="SIMPAN">

</label></td>

<td><label>

<input type="reset" name="button2" id="button2" value="BATAL">

</label></td>

</tr>

</table>

</form></body>

</html>

Jika dijalankan maka skrip di atas akan menghasilkan tampilan form seperti berikut ini:

Form tersebut dapat kita isi sesuai dengan daya yang ingin kita isikan. Jika form tersebut diisi maka hasilnya dapat dilihat seperti tampilan berikut ini:

Namun seperti yang sudah dijelaskan sebelumnya data yang diisikan pada form ini belum bisa diproses, untuk dapat mengisinya maka kita harus belajar lagi tentang bahasa pemrograman yang bersifat Server Side Scripting.