Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Tabel sangat penting artinya dalam desain web. Karena dengan tag table dapat dibuat halaman web yang terbagi pada beberapa kolom dan baris. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan tabel yaitu, <table>, <tr> dan <td>. Yang perlu diingat yaitu bahwa tag <tr> dan <td>  harus terletak diantara tag <table> dan </table>

Windows dalam browser yang dibagi menjadi beberapa windows disebut Frame. Model ini sering digunakan untuk lebih memperjelas penyajian informasi, dengan menu sajian selalu ditampilkan.

Sintaks: <FRAMESET BORDER=# {[ROWS|COLS]}={#,[#[,…]]}>

  <FRAME SRC=”url” NAME=”nama frame”> </FRAMESET>

LISTING PROGRAM

web1.html

<html>

<head>

<title> taeyeon.com</title>

</head>

<body>

<h1 style=”text-align:center;font-family:fantasy;color:white;background-color:black”>Taeyeon’s World</h1>

<img src=”taeng.jpg” alt=”Taeyeon” />

<marquee align=”center” direction=”right” scrollamount=”2″ > Taeyeon Official Website </marquee>

<p style=”font-family:times;color:white;background-color:black;”>

<a href=”http://www.taeyeon.com&#8221; target=”_blank”>

|HOME|</a>

<a href=”http://www.taeyeon.com/profil&#8221; target=”_blank”>

|PROFIL|</a>

<a href=”http://www.taeyeon.com/music&#8221; target=”_blank”>

|MUSIC|</a>

<a href=”http://www.taeyeon.com/video&#8221; target=”_blank”>

|VIDEO|</a>

<a href=”http://www.taeyeon.com/about&#8221; target=”_blank”>

|ABOUT|</a></p>

<h4><img src=”taeng2.jpg” width=”86″ height=”88″ alt=”KimTaeyeon” /> Profile <u>Taeyeon :</u></h4>

<ol type = “circle”>

<li>Stage Name: Tae Yeon</li>

<li>Real Name: Kim Tae Yeon</li>

<li>Nicknames: Taeng, Umma, Ajumma, Kid Leader</li>

<li>Birthday: March 9, 1989</li>

<li>Age:19</li>

<li>Height:1.62m</li>

<li>Weight: 44kg</li>

<li>Blood Type: O</li>

<li>Group: So Nyuh Shi Dae / Girls’ Generation</li>

<li>Position: Leader, Main Vocalist</li>

<li>Specialty: Chinese, Swimming</li>

<li>Homeplace: Jeonrado Jeonju</li>

<li>School: Jeonju Art High School, Graduated</li>

</ol>

<a href=”web2.html”>Next>>></a>

</body>

</html>

web2.html

<html>

<head>

<title>SNSD</title>

<link rel=”stylesheet” type=”text/css” href=”web2.css”/>

</head>

<body>

<center>

<h1>So Nyeo Shi Dae</h1>

<table border=”4″ id=”tabel”>

<tr><td width=”10%”>No</td><td width=”60%”>Nama</td><td width=”30%”>Posisi</td></tr>

<tr><td>1</td><td>Taeyeon</td><td>Leader,Lead Vocalist</td></tr>

<tr><td>2</td><td>Jessica</td><td>Main Vocalist</td></tr>

<tr><td>3</td><td>Sunny</td><td>Sub Vocalist</td></tr>

<tr><td>4</td><td>Tiffany</td><td>Sub Vocalist</td></tr>

<tr><td>5</td><td>Hyoyeon</td><td>Sub Vocalist,Lead Dancer</td></tr>

<tr><td>6</td><td>Yuri</td><td>Sub Vocalist,Main Dancer</td></tr>

<tr><td>7</td><td>Sooyoung</td><td>Sub Vocalist,Main Dancer</td></tr>

<tr><td>8</td><td>Yoona</td><td>Sub Vocalist,Main Dancer</td></tr>

<tr><td>9</td><td>Seohyun</td><td>Main Vocalist</td></tr>

</table>

<div id=”style”>

<p>SM Entertainment</p>

<p>2011</p>

</div>

</center>

</body>

</html>

web2.css

#tabel{

width: 480px;

border-color: black;

border-style: solid;

background-color: #E6E6E6;

}

#style{

font: bold;

font-size: large;

}

web2(frame).html

<html >

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />

<title>Test Frame</title>

</head>

<frameset rows=”*” cols=”*,640″ framespacing=”0″ frameborder=”no” border=”1″>

<frame src=”web1.html” name=”leftFrame” id=”” title=”” />

<frame src=”web2.html” name=”rightFrame” id=”” title=”” />

</frameset>

<body>

</body>

</html>

PENJELASAN PROGRAM

Untuk mendefinisikan judul page (title) maka kita dapat melakukannya dengan meletakkan naskah judul di antara tag <TITLE> dan </TITLE>.  Judul ini akan ditampilkan pada title bar web browserPada file web1.html dibuat sebuah page dengan judul “taeyeon.com”. Untuk mendefinisikan head,  kita dapat menambahkan tag <HEAD> dan </HEAD>  setelah penggunaan tag <HTML>. Sedangkan bagian body adalah tempat dimana kita dapat menempatkan teks dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web page. Bagian ini dapat didefinisikan dengan meletakkan tag <BODY> dan </BODY> di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan sesudah tag </HEAD>. Tag <h1> digunakan untuk memberikan ukuran font level 1 (paling besar). Tag <img> digunakan untuk menambahkan gambar, diikuti dengan src untuk menunjukkan sumber gambar, sedangkan alt digunakan untuk menampilkan teks jika gambar tidak muncul di halaman web. Untuk mengatur tinggi dan lebar gambar bisa menggunakan perintah height untuk panjang gambar, dan width untuk lebar gambarnya. Tag <marquee> digunakan untuk membuat teks berjalan. Tag ini memiliki beberapa atribut, yaitu “direction” untuk mengatur arah gerakan teks (dari kiri ke kanan/sebaliknya), “scrollamount” untuk mengatur kecepatan gerakan dalam satuan pixel. Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga untuk membuat atau mendefinisikan naskah dalam bentuk paragraf harus ditambahkan tag khusus yakni <p>.  Selanjutnya, tag <a href> digunakan untuk membuat link ke halaman lain atau ke bagian lain dari halaman tersebut. Disini terdapat 5 link yang masing-masing menuju ke linknya masing-masing. Tag<u> digunakan untuk membuat teks bergaris bawah. Tag <ol> digunakan untuk membuat Ordered List atau list yang disusun beraturan. Di dalam tag <ol> ini terdapat item-item yang dimaksud dimana penulisan list item  tersebut menggunakan tag <li>.  Tag <a href=”web2.html”>Next>>></a> digunakan untuk membuat link ke file web2.html yang berisi tabel.

            Pada file web2.html terdapat tag link yang berfungsi menghubungkan file html dengan file css. Tag <centre> agar semua isi halaman web berada di tengah.  Selanjutnya dibuat heading dengan menggunakan tag <h1></h1>. Lalu dibuat tabel yang terdiri dari 3 kolom dan 6 baris, dengan ketentuan tabel memiliki border dengan ketebalan 4px dan pada tabel tersebut terdapat id yang berisi variabel dari file css, sehingga nantinya tabel tersebut akan meload pengaturan pada file css tersebut. Untuk kolom pertama, lebar kolom 10% dari lebar kesuluruhan tabel. Untuk kolom kedua, lebar kolom 60% dari lebar kesuluruhan tabel. Untuk kolom ketiga, lebar kolom 30% dari lebar kesuluruhan tabel. Selanjunya digunakan tag <div> yang berisi id dengan variabel style. Diantara tag <div> dan </div> tersebut terdapat 2 buah paragraf.

Dalam file web2.css terdapat pengaturan pada id dengan variabel tabel, lebar tabel keseluruhan adalah 480px dengan warna border hitam. Style border adalah solid dan warna background tabel adalah abu-abu muda. Untuk  pengaturan id dengan variabel style  adalah font akan dicetak tebal dengan ukuran font besar.

Terakhir dalam file web2(frame).html, tag frame “<frameset rows=”*” cols=”*,640″ framespacing=”0″ frameborder=”no” border=”1″>” berfungsi sebagai tag pembuka untuk membuat frame dan digunakan untuk mengatur tampilan frame itu sendiri. Kemudian tag “<frame src=”web1.html” name=”leftFrame” id=”” title=”” />” digunakan sebagai  frame bagian kiri dan pada frame ini memanggil file web1.HTML untuk ditampilkan pada bagian kiri frame. kemudian “<frame src=”web2.html” name=”rightFrame” id=”” title=”” />” digunakan sebagai  frame bagian kanan dan pada frame ini memanggil file web2.HTML untuk ditampilkan pada bagian kiri frame. lalu tutup dengan tag </frameset>.

 OUTPUT PROGRAM

 web1.html

web2.html

web2(frame).html