Panduan Dasar HTML Lanjutan

Pada bahasan sebelumnya Kode-kode HTML Anda sudah diperkenalkan tata cara atau aturan penulisan kode HTML beserta urutan-urutannya. Setelah Anda paham mengenai tata cara penulisan kode-kode HTML sekarang saatnya bagi Anda untuk dibawa lebih jauh mengenai tag atau perintah yang berlaku pada HTML. Tak perlu banyak pengantar lagi, sekarang saya akan menjelaskan mengenai TAG HTML ini satu persatu.

1. <center> dan </center>

Tag ini mempunyai fungsi untuk membuat suatu objek berada di tengah suatu bidang yang ditentukan. Objek itu dapat berupa teks, image maupun tabel. Suatu objek akan tetap berada di tengah sampai Tag penutup </center> ditemukan. Jadi setelah Anda memberi Tag <center> jangan lupa untuk memberikan Tag penutupnya yaitu </center> pada akhir dari objek yang akan diposisikan pada tengah suatu bidang.

2. <b> dan </b>

Tag ini mempunyai fungsi untuk membuat huruf atau karakter yang ditampilkan menjadi tebal (BOLD).

Contoh penggunaan nya di dalam program :

Panduan HTML <b>Secara Global</b> Lanjutan.

Hasil:

Panduan HTML Secara Global  Lanjutan.

Pada contoh diatas, kalimat Secara Global diapit dengan tag <b> dan </b> , maka ketika Anda jalankan di browser kalimat tersebut akan tercetak dengan huruf tebal.

3. <font> dan </font>

Tag ini berfungsi untuk mengatur tampilan jenis, warna, dan ukuran suatu karakter atau huruf (font), Anda lihat huruf-huruf yang ada pada tutorial ini, warna-warna dari huruf-huruf itu sengaja saya buat demikian agar Anda dapat membedakan yang mana Objek, keterangan, dan subjek nya. Huruf pada Objek ini ditandai dengan huruf berwarna merah, keterangan ditandai dengan huruf hitam dan subjek dengan warna biru.

Atribut dari Tag <font> ini ada beberapa jenis antara lain :

a. color : Untuk merubah warna dari huruf atau karakter.

b. size :   Untuk merubah ukuran huruf, besar kecilnya ukuran huruf di deklarasikan dengan angka 1 sampai 6.

c. face : Untuk merubah jenis dari huruf yang akan kita gunakan seperti Arial, Times New Roman, Verdana dan sebagainya.

Atribut color :

contoh penggunaan nya di dalam program :

<font color="black">Tulisan ini berwarna hitam</font>
<font color="red">Tulisan ini berwarna merah</font>
<font color="blue">Tulisan ini berwarna biru</font>
<font color="green">Tulisan ini berwarna hijau</font>

Anda dapat merubah warna dari huruf atau karakter sesuka hati Anda, contoh diatas hanya beberapa warna saja yang di sajikan. Selain dengan nama warna dalam bahasa inggris, Anda juga dapat menggunakan kode HEXA seperti dapat dilihat pada link ini Tabel warna dan kode warna.

Atribut size :

Contoh penggunaan nya di dalam program :

<font size="1">Huruf ini mempunyai ukuran 1</font>
<font size="2">Huruf ini mempunyai ukuran 2</font>
<font size="3">Huruf ini mempunyai ukuran 3</font>
<font size="4">Huruf ini mempunyai ukuran 4</font>
<font size="5">Huruf ini mempunyai ukuran 5</font>

Selain dengan angka, Anda juga dapat mendeklarasikan ukuran huruf dengan besarnya PIXEL

contoh : <font size="1px">

Atribut face :

Contoh penggunaan nya di dalam program :

<font face="arial">Huruf ini type ARIAL</font>
<font face="times new roman">Huruf ini type TIMES NEW ROMAN</font>
<font face="verdana">Huruf ini type VERDANA</font>
<font face="tahoma">Huruf ini type TAHOMA</font>

4. <u> dan </u>

Tag ini berfungsi untuk memberikan efek garis bawah (underlines) pada suatu huruf atau karakter.

Contoh penulisannya di dalam program :

Teknologi terus berkembang <u>sejalan dengan</u> perkembangan jaman.


Teknologi terus berkembang sejalan dengan perkembangan jaman.

Pada contoh kalimat diatas kalimat SEJALAN DENGAN diapit oleh tag <u> dan </u> bila dijalankan pada browser maka kalimat yang di apit oleh tag itu akan diberi tanda garis bawah (underlines).


5. <br>

Tag ini berfungsi untuk berpindah baris ke baris berikutnya. Misalkan Anda membuat sebuah karya tulis yang tentunya tulisan itu cukup panjang untuk dibaca, atau Anda mennginginkan sesuatu kalimat harus berada dibawahnya walaupun kalimat itu hanya terdiri dari beberapa kata, Anda dapat menggunakan tag <br> untuk memisahkannya. Untuk Tag <br> tidak perlu ditutup seperti halnya tag-tag yang telah disinggung diatas. jadi cukup Anda berikan tag <br> dimana Anda menginginkannya.

Contoh penggunaanya dalam program :

Ini baris kesatu, <br>Ini baris kedua, <br>Ini baris ketiga.

Setelah Anda menjalankannya di Browser, maka Kalimat diatas akan menjadi seperti ini.

Ini baris kesatu,
Ini Baris kedua,
Ini baris ketiga.


6. <p>

Tag ini mempunyai fungsi untuk membuat sebuah paragraf baru. Didalam sebuah artikel tentunya banyak sekali paragraf-paragraf untuk memisahkan pokok pikiran yang terkandung dalam kumpulan kalimat tersebut, untuk memisahkan paragraf yang satu dengan yang lainnya, maka Tag <p> ini digunakan. Atribut dari Tag <p> ini ada 3 jenis yaitu Rata kanan ( align="right") , rata kiri ( align="left" ), rata kanan kiri ( align="justify" ). dan rata tengah ( align="center" ).

Contoh penggunaan nya di dalam program :

Rata kiri <p align="left">

paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata kiri, sehingga semua huruf yang berada di bagian kiri halaman akan terlihat rapi.

Rata kanan <p align="right">

paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata kanan, sehingga semua huruf yang berada di bagian kanan halaman akan terlihat rapi.

Rata kanan-kiri <p align="justify"> paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata kanan-kiri, sehingga semua huruf yang berada di bagian kanan dan kiri halaman akan terlihat rapi.

Rata tengah <p align="center">
paragraf yang ada di bagian ini akan disusun berdasarkan paragraf dengan aturan rata tengah, sehingga semua huruf akan terpusatkan dibagian tengah.

7. _dan

Tag ini mempunyai fungsi untuk membuat sebuah huruf atau karakter berada sedikit kebawah dari huruf atau karakter yang lain. Misalnya kita ingin menuliskan rumus suatu senyawa kimia, maka tag <sub> ini diperlukan.

Contoh penggunaan nya di dalam program :

H₂O tampilan di browser : H₂O
FeCl₃ tampilan di browser : FeCl₃
CO₂ tampilan di browser : CO₂


8. ^dan

Tag ini merupakan kebalikan dari tag <sub>, bila kita ingin membuat suatu huruf atau karakter agak sedikit keatas maka tag <sup> ini diperlukan. Misalnya kita ingin menuliskan suatu persamaan matematika maka kita gunakan tag ini untuk membuat suatu karakter atau huruf berada sedikit diatas yang lainnya.

Contoh penggunaan nya di dalam program :

X ² + Y ² + X + Y + 1 = 0

tampilan di browser : X² + Y² + X + Y + 1 = 0


9. <i> dan </i>

Tag <i> ini berfungsi untuk membuat huruf atau karakter menjadi ITALIC.

Contoh penggunaannya:

Teknologi terus berkembang <i>sejalan dengan</i> perkembangan jaman.

Kalimat diatas bila di jalankan pada browser menjadi seperti berikut ini :

Teknologi terus berkembang sejalan dengan perkembangan jaman.


10. <hr>

Tag ini berfungsi untuk memberikan garis batas.


PENEMPATAN GAMBAR / IMAGES

Tag untuk menempatkan images pada document HTML sebagai berikut :
<img src="lokasi file" alt="keterangan gambar" border="tebalnya bingkai">
Pada tag diatas ada beberapa atribut yang harus Anda tuliskan untuk menampilkan suatu image pada Dokumen HTML. Antara lain :

img

Tag ini merupakan inti dari perintah untuk menampilkan image pada Halaman Web.

src

Atribut ini merupakan bagian dari tag yang berfungsi untuk memberitahukan kepada browser tentang nama file image yang akan ditampilkan serta lokasi dari file image itu berada. Anda juga dapat menggunakan url dari situs yang lain, misal gambar tersebut Anda simpan di http://www.test.com/upload. maka penulisan atribut src nya menjadi seperti berikut ini: src="http://www.test.com/upload/gambar1.jpg"

Untuk dapat menampilkan gambar pada website, Anda dapat menggunakan fasilitas web yang memberikan layanan file uploader, seperti Rapidshare, Box.net, Media Fire, Megaupload dan lain-lain, 4shared.com, www.imageshack.us, atau web sejenis lainnya. Setelah Anda mengupload gambar Anda, copy link yang diberikan ke halaman yang Anda inginkan.

alt

Atribut ini digunakan untuk memberikan keterangan terhadap images tersebut. teks yang dituliskan pada atribut ini akan ditampilkan oleh browser dengan latar belakang kuning ketika mouse mendekati gambar tersebut.

border

Atribut ini untuk memberikan efek garis tepi, yang besarnya dapat kita tentukan dengan ukuran pixel, misalnya kita ingin memberikan efek garis tepi sebesar 2 pixel pada file image, maka penulisannya menjadi seperti ini : border="2"

PEMBUATAN TABEL

TAG untuk membuat TABEL yang wajib dikuasai.

<table> : Tag ini merupakan inti dari perintah untuk membuat tabel pada dokumen HTML

</table> : Tag ini merupakan penutup dari perintah untuk membuat tabel pada dokumen HTML

<thead> : Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah HEADER atau Bagian yang paling atas dari sebuah tabel. dan dituliskan setelah Tag <table> kemudian harus ditutup dengan perintah </thead>

<tbody> : Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah BODY atau badan dari suatu tabel, bisa juga isi dari suatu table. dan dituliskan setelah Tag <table> kemudian harus ditutup dengan perintah </tbody>

<tfoot> : Tag ini merupakan bagian dari perintah pembuatan tabel. Biasanya Tag ini digunakan untuk menandakan bahwa tabel yang dibuat adalah FOOTER atau bagian akhir dari suatu tabel, bisa juga merupakan sebuah penutup dari suatu table. dan dituliskan setelah Tag <table> kemudian harus ditutup dengan perintah </tfoot>

<tr> : Tag ini digunakan untuk membuat BARIS pada suatu tabel, dan merupakan satu kesatuan dengan perintah <table>, penulisan nya pun harus setelah Tagini. Setiap per pindahan BARIS harus ditutup dengan perintah </tr>

<td> : Tag ini digunakan untuk membuat KOLOM pada suatu tabel, dan merupakan satu kesatuan dengan perintah <table>, penulisan nya pun harus setelah Tag ini. Setiap perpindahan KOLOM harus ditutup dengan perintah </td>

<th> : Tag ini fungsinya hampir sama dengan tag <td> hanya bila kita menggunakan tag ini, maka border (garis luar) dari tabel tidak ditampilkan, dan karakter yang ada dalam perintah ini akan di anggap Header sehingga hurufnya menjadi agak besar dan dicetak tebal oleh browser. Tag ini merupakan bagian dari tag <tr>, penulisan nya pun harus sesudah tag <tr>. Atribut dari tag ini adalah : scope dengan value nya col untuk KOLOM dan row untuk BARIS. (lihat contoh penggunaannya dibagian bawah)

Untuk atribut-atribut dari tabel akan dibahas pada bagian tersendiri.

Urutan penulisan tabel pada umumnya seperti dibawah ini

<table>

<thead>

<tr>

<td>

isi header atau pembuka dari tabel

</td>
</tr>
</thead>
<tbody>
<tr>
<td>
isi badan atau materi dari tabel
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
isi footer atau penutup dari tabel
</td>
</tr>
</tfoot>
</table>

Contoh penulisan nya dalam program

<table cellpadding="5" cellspacing="0" border="1">

<thead>

<tr>

<td colspan="3" align="center">Ini adalah bagian HEADER dari TABEL

</td>

</tr>

</thead>

<tbody>

<tr>

<td>BARIS ke 1 KOLOM ke 1</td>

<td>BARIS ke 1 KOLOM ke 2</td>

<td>BARIS ke 1 KOLOM ke 3</td>

</tr>

<tr>

<td>BARIS ke 2 KOLOM ke 1</td>

<td>BARIS ke 2 KOLOM ke 2</td>

<td>BARIS ke 2 KOLOM ke 3</td>

</tr>

<tr>

<td>BARIS ke 3 KOLOM ke 1</td>

<td>BARIS ke 3 KOLOM ke 2</td>

<td>BARIS ke 3 KOLOM ke 3</td>

</tr>

</tbody>

<tfoot>
<tr>
<td colspan="3" align="center">Ini adalah bagian FOOTER dari TABEL
</td>
</tr>
</tfoot>
</table>

Setelah dijalankan di Browser akan ditampilkan seperti dibawah ini.

Ini adalah bagian HEADER dari TABEL
BARIS ke 1 KOLOM ke 1	BARIS ke 1 KOLOM ke 2	BARIS ke 1 KOLOM ke 3
BARIS ke 2 KOLOM ke 1	BARIS ke 2 KOLOM ke 2	BARIS ke 2 KOLOM ke 3
BARIS ke 3 KOLOM ke 1	BARIS ke 3 KOLOM ke 2	BARIS ke 3 KOLOM ke 3
Ini adalah bagian FOOTER dari TABEL

Contoh yang lain dengan menggunakan Tag <th>

<table cellpadding="5" cellspacing="0" border="1">

<tr>

<th scope="col">Nama : </th>

<th scope="col">Alamat : </th>

<th scope="col">Tanggal lahir : </th>

</tr>

<tr>

<td align="center">Tongtong</td>

<td align="center">Dunia Maya</td>

<td align="center">1 Januari 2015</td>

</tr>

</table>

Setelah Dijalankan di Browser maka akan ditampilkan seperti dibawah ini :

Nama :	Alamat :	Tanggal lahir :
Tongtong	Dunia Maya	1 Januari 2015

Nah setelah Anda paham mengenai hirarki dari pembuatan tabel, sekarang mari kita terapkan pembuatan tabel untuk men-design sebuah halaman web. Dari Contoh sebelumnya, Anda sudah diperkenalkan tentang atribut dari sebuah tabel. Atribut tabel ini penting untuk mengatur tampilan di browser yang merupakan sebuah tabel yang majemuk. Ada beberapa atribut dari sebuah tabel yang wajib Anda ketahui, antara lain :

1. cellpadding - Atribut ini dipakai untuk menentukan besarnya jarak bagian dalam (cell) dengan bagian luar (border) dari sebuah tabel. contoh : cellpadding="2"

2. cellspacing - Atribut ini dipakai untuk menentukan besarnya jarak cell yang satu dengan cell yang lainnya. contoh : cellspacing="5"

3. border - Atribut ini dipakai untuk menentukan besarnya border (bingkai) dari sebuah tabel. contoh : border="2"

4. width - Atribut ini digunakan untuk menentukan lebar dari sebuah tabel, ukuran ini bisa menggunakan satuan pixel atau persentasi. contoh : width="75%", width="100%", width="800", width="200"

5. bordercolor - Atribut ini digunakan untuk menentukan warna border atau garis tepi dari sebuah tabel. contoh : bordercolor="black"

6. bgcolor - Atribut ini digunakan untuk menentukan warna latar dari sebuah tabel atau cell. contoh : bgcolor="#FFFFFF", bgcolor="#000000", bgcolor="blue", bgcolor="red"

7. valign - Atribut ini digunakan untuk menentukan posisi Vertikal objek dari sebuah tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan dalam perintah pembuatan baris dari tabel / <tr>. Atribut ini punya beberapa pilihan posisi yaitu :

o top - pilihan ini akan menempatkan objek berada pada posisi teratas dari cell.

o middle - pilihan ini akan menempatkan objek berada pada tengah cell.

o bottom - pilihan ini akan menempatkan objek berada pada bagian bawah dari cell.

Contoh : <tr valign="top">, <tr valign="middle">, <tr valign="bottom">

8. align - Atribut ini digunakan untuk menentukan posisi Horizontal objek dari sebuah tabel yang dapat berisi teks maupun gambar, atribut ini dituliskan dalan perintah pembuatan kolom dari tabel / <td>. Atribut ini juga punya beberapa pilihan yaitu :

o left - pilihan ini akan menempatkan objek berada pada bagian kiri dari cell, bila objek berbentuk teks maka teks tersebut akan dijadikan rata kiri.

o center - pilihan ini akan menempatkan objek berada pada bagian tengan dari cell, bila objek berbentuk teks maka teks tersebut akan dijadikan rata tengah.

o right - pilihan ini akan menempatkan objek berada pada bagian kanan dari cell, bila objek berbentuk teks maka teks tersebut akan dijadikan rata kanan.

Contoh : <td align="left">, <td align="center">, <td align="right">.

9. rowspan - Atribut ini digunakan untuk menyatukan dua buah baris tabel menjadi satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah pembuatan kolom dari tabel / <td>

10. colspan - Atribut ini digunakan untuk menyatukan dua buah kolom tabel menjadi satu kesatuan atau kelompok. atribut ini dituliskan dalam perintah pembuatan kolom dari tabel / <td>

Contoh : <td rowspan="2">, <td colspan="2">

Agar lebih jelas mengenai rowspan dan colspan ini cobalah perhatikan contoh penulisan kode tabel dibawah ini.

<table width="300" cellpadding="5" cellspacing="1" border="5" bordercolor="red">
<tr>
<td align="center">Kolom 1 baris 1</td>
<td align="center">Kolom 2 baris 1</td>
<td align="center">Kolom 3 baris 1</td>
<td align="center">Kolom 4 baris 1</td>
</tr>
<tr>
<td align="center">Kolom 1 baris 2</td>
<td align="center">Kolom 2 baris 2</td>
<td colspan="2" bgcolor="blue" align="center">

Gabungan Kolom 3 dan 4 baris ke 2</td>
</tr>
<tr>
<td rowspan="2" bgcolor="blue" align="center">
Gabungan baris 3 dan 4 kolom ke 1</td>
<td align="center">kolom 2 baris 3</td>
<td align="center">kolom 3 baris 3</td>
<td align="center">kolom 4 baris 3</td>
</tr>
<tr>
<td align="center">kolom 2 baris 4</td>
<td align="center">kolom 3 baris 4</td>
<td align="center">kolom 4 baris 4</td>
</tr>
</table>

Setelah di jalankan di browser maka perintah diatas akan menjadi tabel seperti dibawah ini :

Kolom 1 baris 1	Kolom 2 baris 1	Kolom 3 baris 1	Kolom 4 baris 1
Kolom 1 baris 2	Kolom 2 baris 2	Gabungan Kolom 3 dan 4 baris ke 2
Gabungan baris 3 dan 4 kolom ke 1	kolom 2 baris 3	kolom 3 baris 3	kolom 4 baris 3
	kolom 2 baris 4	kolom 3 baris 4	kolom 4 baris 4

Perhatikan baik-baik contoh penulisan diatas...!. Setelah Anda memberi perintah colspan maka untuk kolom selanjutnya Anda jangan menambahkan lagi perintah pembuatan kolom baru / <td>, sebab sudah di merger begitu juga setelah Anda memberikan perintah rowspan maka untuk baris berikutnya Anda jangan memberikan perintah untuk membuat baris baru / <tr>. Bila ini Anda lakukan maka tabel yang Anda buat bentuknya tidak karuan alias kacau. Sekali lagi berlatihlah dengan serius mengenai ini, serta coba-cobalah untuk membuat gabungan cell yang lain sesuai yang Anda kehendaki.

Contoh penulisannya dalam program :

<table width="50%" cellpadding="5" cellspacing="0" border="2" bgcolor="blue">
<tr valign="middle">
<td align="right">
Ini adalah Contoh pembuatan tabel dengan menggunakan atribut-atribut yang dikemukakan diatas, tabel ini berukuran 50% dari bidang yang disediakan dan mempunyai warna latar biru.

Sedangkan teks ini akan disusun berdasarkan aturan rata kanan.
</td></tr>
<tr valign="middle">
<td align="center">
Kalau teks ini ada di tengah,<br> berarti sudah benar.
</td></tr></table>

Baris perintah pembuatan tabel ini akan memberikan dua buah baris tabel yang mempunyai jarak dari bagian dalam tabel (cell) dengan bagian luar (border) sebesar 5 px, spasi antar cell rapat atau tidak diberi spasi, dan border atau garis tepi dari tabel berukuran sebesar 2 pixel, warna latar dari tabel akan diberi warna biru, sedangkan konten yang berupa teks akan disusun dalam tabel tersebut berdasarkan aturan rata kanan. Pada baris kedua tabel tersebut, akan ditempatkan sebuah images yang ditempatkan ditengah-tengah dari cell yang telah ditentukan.

Bila dijalankan di browser maka perintah tabel diatas akan menjadi seperti dibawah ini :

Ini adalah Contoh pembuatan tabel dengan menggunakan atribut-atribut yang dikemukakan diatas, tabel ini berukuran 50% dari bidang yang disediakan dan mempunyai warna latar biru. Sedangkan teks ini akan disusun berdasarkan aturan rata kanan.

Kalau teks ini ada di tengah, berarti sudah benar.

Yang perlu Anda garis bawahi dari pembuatan tabel adalah : Anda dapat membuat tabel baru atau tabel yang lain (secondary) didalam sebuah cell yang ada dalam tabel utama (primary) dan didalam cell tabel secondary Anda juga masih boleh membuat tabel yang lain.

Sumber: www.fastraax.com