MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL A. MAKSUD DAN TUJUAN 1. MAKSUD a. Merapikan teks yang berupa daftar (list) dan table dengan tag HTML b. Membuat halaman web terhubung dengan halaman lain (link) 2. TUJUAN a. Mahasiswa dapat membuat table dan mengatur sel-sel dalam table untuk ditampilkan dalam dokumen web b. Mahasiswa dapat membuat link untuk menghubungkan halamanhalaman web B. DASAR TEORI Daftar Item (List) Seringkali sebuah dokumen berisikan teks yang berupa daftar sehingga penulisannya harus ditampilkan dalam bentuk sebuah daftar item (list). Dengan menggunakan tag, halaman HTML juga dapat menampilkan teks berupa daftar (list). Tag yang digunakan antara lain : No. Tag Fungsi 1. <UL> </UL> Menampilkan daftar item (list) tanpa penomoran 2. <LI> Menambahkan tanda bullet didepan masing-masing item. Tag ini ditambahkan dalam daftar item yang ada didalam tag <UL> 3. <OL> </OL> Menampilkan daftar item dengan nomor urut 4. <DL> </DL> Menampilkan daftar teks yang biasa untuk
daftar definisi 5. <DIR> </DIR> Menampilkan daftar tanpa penomoran untuk menangani direktori 6. <MENU> </MENU> Menampilkan menu pilihan tanpa penomoran Penentuan bentuk bullet pada atribut type Nilai untuk type Bentuk bullet CIRCLE DISK SQUARE LINK Untuk membuat link atau hyperlink, dapat menggunakan tag : <A HREF> </A> Berikut beberapa contoh script penggunaan link : <A HREF= help.htm >halaman help </A><br> <A HREF= http://www.bestcamp.net >Web Developer Alumni Akakom</A><BR> <A HREF= mailto:info@akakom.ac.id >Kirimkan email jika ada pertanyaan</a> Jika dijalankan di web browser akan tampak seperti berikut :
Secara default, link pada halaman web diberi garis bawah dan umumnya berwarna biru. Ada beberapa atribut untuk mengatur warna link dan juga pengaturan lainnya. Atribut-atribut ini diletakkan dalam tab. Berikut atribut yang digunakan untuk mengatur link : 1. LINK Menentukan warna link 2. ALINK Menentukan warna link ketika diklik dan halaman link belum terbuka 3. VLINK Menentukan warna link jika link tersebut sudah pernah dibuka Contoh pengaturan warna link dengan menggunakan script sebelumnya : <BODY LINK= olive ALINK= #000000 VLINK= red > <A HREF = help.htm >halaman help </A><br> <A HREF = http://www.bestcamp.net >Web Developer Alumni Akakom</A><BR> <A HREF = mailto:info@akakom.ac.id >Kirimkan email jika ada pertanyaan</a> Atribut-atribut yang digunakan dalam tag link <A> antara lain : 1. TABINDEX Menentukan urutan link pada halaman web dengan memanfaatkan tombol TAB 2. TARGET Menampilkan halaman link dengan membuka jendela browser yang baru. Nilai yang ada untuk TARGET yaitu blank, parent, top, self Contoh berikut script yang menambahkan atribut dalam tag <A> : <A HREF= help.htm tabindex="1" target="_blank">halaman help </A><br> <A HREF= http://www.bestcamp.net/ tabindex="3" target="_parent">web Developer Alumni Akakom</A><BR> <A HREF= "mailto:info@akakom.ac.id" target="_self"
tabindex="2">kirimkan email jika ada pertanyaan</a> TABEL Membuat Tabel Untuk membuat table dalam halaman HTML, dapat menggunakan tag berikut: No Tag Fungsi 1. <TABLE> </TABLE> Membuat table dan sebagai tanda awal dan akhir table 2. <TR> </TR> Membuat baris dalam table 3. <TD> </TD> Membuat kolom (sel) 4. <TH> </TH> Membuat judul kolom 5. <CAPTION> </CAPTION> Membuat judul pada tabel Adapun atribut-atribut yang ada dalam tag <TABLE> antara lain 1. BORDER Menampilkan garis table dengan memberikan nilai untuk BORDER 2. BGCOLOR Membuat warna latar belakang table 3. HEIGHT Mengatur tinggi table (tinggi sel) 4. WIDTH Mengatur lebar sel 5. CELLSPACING Mengatur jarak bagian sel terhadap tepi dalam bingkai table 6. CELLPADDING Mengatur jarak teks terhadap tepi kiri Atribut-atribut untuk <TH> <TR>, dan <TD> Beberapa atribut yang digunakan dalam <TH>, <TR>, dan <TD> : 1. ROWSPAN Digunakan dalam <TD>. Atribut ini digunakan untuk
menggabungkan beberapa baris sel 2. COLSPAN Digunakan dalam <TH> atau <TD>. Berfungsi untuk menggabungkan beberapa sel dalam satu baris 3. ALIGN Mengatur peletakan dengan memberikan nilai LEFT, CENTER, atau RIGHT 4. VALIGN Mengatur teks menurut posisi vertical dengan memberikan nilai TOP, MIDDLE, atau BOTTOM C. PRAKTEK 1. Ketikkan script HTML berikut : <HTML> <HEAD> <TITLE>Membuat List</TITLE> </HEAD> <p align="justify">teknologi web pada sisi server memungkinkan pemrosesan kode di dalam server sehingga kode yang sampai pada pemakai berbeda dengan asli pada server.</p><br> <H2>Beberapa contoh teknologi yang berjalan diserver adalah:</h2> <UL>Common Gateway Interface<BR> Proprietary Web Server API<BR> Active Server Page(ASP)<BR> Server-Side JavaScript<BR> Java Servlets dab JavaServer Page(JSP)<BR> PHP<BR> </UL> </HTML> Simpan script diatas dan jalankan di web browser. 2. Buatlah daftar item menggunakan tanda bullet. Dengan menambahkan tag <LI> didepan teks setiap item contoh : <LI> Common Gateway Interface <BR>. Simpan dan lihat perubahannya di browser. 3. Dengan menggunakan tag <A>, buatlah setiap item agar menjadi sebuah link. Seperti contoh item teks nokia 9300 dihubungkan ke halaman nokia.php, maka scriptnya menjadi : <a href="api.php"> Proprietary Web Server API </a> Buatlah link-link tersebut untuk menghubungkan ke halaman web yang telah dibuat sebelum ini (hubungkan ke halaman web pada praktik BAB I)
4. Ketikkan script berikut untuk membuat sebuah table. Simpan dan lihat hasilnya di browser <HTML> <HEAD> <TITLE>Membuat Tabel</TITLE> </HEAD> <big>daftar Harga Mie Instan</big> <Table> <tr><th>merk</th><th>harga</th></tr> <tr><td>sedap</td><td>1.000</td></tr> <tr><td>abc</td><td>1.100</td></tr> <tr><td>gaga mie</td><td>1.500</td></tr> <tr><td>sarimi</td><td>980</td></tr></table> </HTML> 5. Sekarang tambahkan atribut BORDER untuk membuat garis tepi pada sel (table), sehingga script <table> menjadi <Table BORDER = 1 >. Cobalah border dengan nilai lain (contoh: border= 10 ) Simpan dan lihat hasilnya. 6. Tambahkan atribut BORDERCOLOR pada tag <table> untuk memberikan warna border (warna bebas) 7. Tambahkan warna latar untuk table dengan menggunakan atribut BGCOLOR, sehingga script <Table> menjadi : <Table border="1" bgcolor="red"> D. LATIHAN Susunlah script HTML agar menghasilkan tampilan halaman web seperti berikut :
E. TUGAS Keterangan : warna latar halaman body web adalah merah. pengaturan table sebagai berikut : border = 2, cellpadding = 1, cellspacing = 1, dan warna latar table = aqua