HTML: Tag Dasar dalam HTML (2)

Untuk membuat halaman web yang bagus, kita harus bisa memadukan elemen-elemen tag html. Ada banyak tag HTML yang harus kita ketahui. Sebelumnya sudah dijelaskan beberapa tag dasar yang berhubungan dengan pengolahan teks. Sekarang akan kita bahas tag-tag lain yang berhubungan dengan tampilan website. Penasaran kan? Ikuti terus tutorialnya. :)

1. Frames
Dengan Frame, kamu dapat menampilkan lebih satu dokumen HTML dalam satu halaman website. Masing-masing dokumen disebut frame, dan masing-masing frame berdiri sendiri. Ada 3 macam tag dalam Frames, yaitu :

Tag Frameset
Tag <Frameset> digunakan untuk membagi window kedalam beberapa frame.
masing-masing frame bisa dibuat berdasarkan pembagian row (baris) dan
cols (kolom) dalam frameset.

Tag Frame
Tag <frame> digunakan untuk mendefinisikan dokumen HTML yang diletakkan dalam tiap-tiap frame yang telah dibagi pada tag<frameset> diatas.

Pada Contoh dibawah akan ditunjukkan frameset yang dibagi dalam 2 kolom. Kolom pertama bernilai 25% dari lebar windows pada browser. Kolom kedua bernilai 75% dari lebar windows pada browser. Dokumen HTML “frame_a.htm” diletakkan pada kolom pertama, dan dokumen HTML “frame_b.htm” diletakkan pada kolom kedua. Jadi sebelumnya kamu harus membuat halaman HTML “frame_a.htm” dan “frame_b.htm”.

Kode HTML Frameset :

<HTML>
<HEAD>
<TITLE> Frameset </TITLE>
</HEAD>
<frameset cols=”25%,75%”>
<frame src=”frame_a.htm” mce_src=”frame_a.htm”>
<frame src=”frame_b.htm” mce_src=”frame_b.htm”>
</frameset>
</HTML>

Dokumen frame_a.htm misal seperti ini :

<HTML>
<HEAD>
<TITLE>Dokumen frame_a.htm </TITLE>
</HEAD>
<BODY>
<B> Ini adalah Dokument Frame A </B>
</BODY>
</HTML>

Dan dokumen frame_b.htm adalah :

<HTML>
<HEAD>
<TITLE>Dokumen frame_b.htm </TITLE>
</HEAD>
<BODY>
<I> Ini adalah Dokument Frame B </I>
</BODY>
</HTML>

Maka akan diperoleh hasil seperti gambar dibawah :

Gambar diatas menampilkan 2 buah halaman HTML dalam 1 window.

Tag Iframe
Tag <Iframe> digunakan untuk mendefinisikan frame didalam frame
yang sifatnya fleksibel (bisa dibuat dimana saja).

Contoh :

<HTML>
<HEAD>
<TITLE>Dokumen frame_a.htm </TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD><iframe src=”frame_a.htm”></iframe></TD>
<TD><iframe src=”frame_B.htm”></iframe></TD>
</TR>
</TABLE>
</BODY>
</HTML>

Hasilnya adalah sebagai berikut :

2. Tables
Tables didefinisikan dengan tag<table>. Sebuah table dibagi kedalam baris (dengan tag <tr>), dan setiap baris dibagi menjadi beberapa kolom (dengan tag <td>). Data yang akan ditulis diletakkan di antara tag <td> dan </td> yang bisa berisi text, images, lists, paragraphs, forms,rules, tables, etc.
Dalam contoh tag <iFrame> diatas sudah diberikan contoh penggunakan tables.

Contoh lain penggunakan table:

<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

Hasilnya :

row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2

OK, untuk sementara ini dulu aja, silahkan dicoba dahulu.
kalau ada pertanyaan atau tanggapan kasih komentar, ok !!! :)

Baca Artikel selanjutnya mengenai Dasar HTML di sini

About these ads
Ditulis dalam HTML. 5 Comments »

5 Tanggapan to “HTML: Tag Dasar dalam HTML (2)”

  1. HTML : Pengenalan HTML « Welcome …. Says:

    [...] HTML: Tag Dasar dalam HTML (2) « Welcome …. berkata, [...]

  2. HTML: Tag Dasar dalam HTML (1) « Welcome …. Says:

    [...]  Tag Dasar dalam HTML (2) [...]

  3. awalakhir Says:

    Baguusss…. hehehe.. tp gw cuma ngerti dikit…
    Bos, gimana sih cara buat bacground kaya bos nih.. terus bikin atau naruh kodenya di mana, karna itu yg gw bingung..hehehehe..blog gw amburadul..

    Tolong yach Bos Nakula…

  4. Sardi Says:

    Bagus banget gue suka….truz gue mau nanya nich kalo boleh, bagaimana sejarah HTML ? kalo bisa penjelasannya kirim ke E-mail Q donk

    tolong ya… makasi sebelumnya

  5. anisa Says:

    aku mau coba dech tapi kalau mau nambahin list bagaimana?


Berikan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Logout / Ubah )

Twitter picture

You are commenting using your Twitter account. Logout / Ubah )

Facebook photo

You are commenting using your Facebook account. Logout / Ubah )

Google+ photo

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

Ikuti

Get every new post delivered to your Inbox.

%d blogger menyukai ini: