PEMOGRAMAN WEB: dasar dasar web programming(3)

Buat file baru lagi, kemudian ketik kode berikut:

1.

<html>

2.

<head>

3.

<title>

Daftar situs favorit JSL

</title>

4.

</head>

5.

<body>

6.

<h2>

Daftar Situs favoritku

</h2>

7.

<ol>

8.

<li><a

target

=

"_blank"

href

=

"http://www.google.com/"

>

Om Google

</a></li>

9.

<li><a

target

=

"_blank"

href

=

"http://www.milw0rm.com"

>

10.

Cacing Underground

</a></li>

11.

</ol>

12.

<p><a

href

=

"profilku.html"

>

Lihat profil lengkap

</a></p>

13.

</body>

14.

</html>

Simpan dilokasi yang sama dengan

profilku.html

dan beri nama

daftarsitus.html

Buka file profilku.html dengan browser anda, dan coba klik link yang ada untuk memahami

cara kerjanya

Gambar 1.3

1.5 Membuat Tabel

Untuk membuat tabel kita dapat menggunakan tag <table></table>. Dalam beberapa tahun terakhir,

penggunaan tabel sebagai layout website sudah tidak relevan lagi, dan digantikan oleh tag DIV. Saat

ini penggunaan tabel dikhususkan hanya untuk menampilkan data secara tabular saja tidak untuk

design halaman.

Beberapa tag yang sering digunakan saat membuat tabel adalah:

Tag Keterangan

<tr></tr> Digunakan untuk membuat baris baru

<th></th>* Digunakan untuk membuat header tabel

<td></td>* Digunakan untuk membuat kolom

* Tag tersebut selalu berada didalam tag <tr>...</tr>

Seperti halnya tag lain yang digunakan untuk presentasi teks, seperti <

span>

, anda dapat

menggunakan attribut

style

untuk memformat tampilan tampilan tabel. Berikut ini adalah contoh pembuatan tabel menggunakan HTML.

Buka teks editor (gedit/Notepad++)

Ketik kode berikut:

1.

<html>

2.

<head>

3.

<title>

TABEL IPS/IPK

</title>

4.

</head>

5.

<body>

6.

<h2>

Tabel IP Sampai semester 4:

</h2>

7.

<table

style

=

"width:600px;"

border

=

"1"

>

8.

<tr

style

=

"background­color:#cfcfcf"

>

9.

<th>

SEMESTER

</th>

10.

<th>

IPS

</th>

11.

</tr>

12.

<tr>

13.

<td>

SEMESTER 1

</td><td

style

=

"text­align:right"

>

4.0

</td>

14.

</tr>

15.

<tr>

16.

<td>

SEMESTER 2

</td><td

style

=

"text­align:right"

>

4.0

</td>

17.

</tr>

18.

<tr>

19.

<td>

SEMESTER 3

</td><td

style

=

"text­align:right"

>

4.0

</td>

20.

</tr>

21.

<tr>

22.

<td>

SEMESTER 4

</td><td

style

=

"text­align:right"

>

4.0

</td>

23.

</tr>

24.

<tr

style

=

"text­align:right;background­color:#FFCB68;font­weight:bold"

>

25.

<td

style

=

"text­align:center;"

>

NILAI IPK 

&gt;&gt;&gt;

</td>

26.

<td

style

=

"text­align:inherit;"

>

4.0

</td>

27.

</tr>

28.

</table>

29.

</body>

30.

</html>

Simpan denan nama

tabel.html

PEMOGRAMAN WEB