MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL

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.

Menampilkan

…

daftar

item

(list)

tanpa

penomoran 2.

Menambahkan

tanda

bullet

didepan

masing-masing item. Tag ini ditambahkan dalam daftar item yang ada didalam tag

3.


…


Menampilkan daftar item dengan nomor urut

4.



…



Menampilkan daftar teks yang biasa untuk

daftar definisi 5.

…

Menampilkan

daftar

tanpa

penomoran

untuk menangani direktori 6.

<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 : … Berikut beberapa contoh script penggunaan link : halaman help
Web Developer Alumni Akakom
Kirimkan email jika ada pertanyaan 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 : No. Atribut Fungsi 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 : halaman help
Web Developer Alumni Akakom
Kirimkan email jika ada pertanyaan Atribut-atribut yang digunakan dalam tag link antara lain : No. Atribut 1.

Fungsi

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 : halaman help
Web Developer Alumni Akakom

tabindex="2">Kirimkan email jika ada pertanyaan TABEL Membuat Tabel Untuk membuat table dalam halaman HTML, dapat menggunakan tag berikut: No

Tag

1.



Fungsi … Membuat table dan sebagai tanda awal dan



akhir table

2.

…

Membuat baris dalam table

3.

…

Membuat kolom (sel)

4.

…

Membuat judul kolom

5.



… Membuat judul pada tabel

Adapun atribut-atribut yang ada dalam tag antara lain No. Atribut

Fungsi

1.

Menampilkan garis table dengan memberikan nilai

BORDER

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 , dan , dan

Beberapa atribut yang digunakan dalam	,
: No. Atribut Fungsi 1. ROWSPAN Digunakan dalam	. Atribut ini digunakan untuk menggabungkan beberapa baris sel 2. COLSPAN Digunakan dalam	atau	. 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 : <TITLE>Membuat List Teknologi web pada sisi server memungkinkan pemrosesan kode di dalam server sehingga kode yang sampai pada pemakai berbeda dengan asli pada server. Beberapa contoh teknologi yang berjalan diserver adalah: Common Gateway Interface Proprietary Web Server API Active Server Page(ASP) Server-Side JavaScript Java Servlets dab JavaServer Page(JSP) PHP Simpan script diatas dan jalankan di web browser. 2. Buatlah daftar item menggunakan tanda bullet. Dengan menambahkan tag didepan teks setiap item contoh : Common Gateway Interface . Simpan dan lihat perubahannya di browser. 3. Dengan menggunakan tag , buatlah setiap item agar menjadi sebuah link. Seperti contoh item teks nokia 9300 dihubungkan ke halaman nokia.php, maka scriptnya menjadi : Proprietary Web Server API 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 <TITLE>Membuat Tabel Daftar Harga Mie Instan Merk Harga Sedap 1.000 ABC 1.100 Gaga mie 1.500 Sarimi 980 5. Sekarang tambahkan atribut BORDER untuk membuat garis tepi pada sel (table), sehingga script menjadi . Cobalah border dengan nilai lain (contoh: border=”10”) Simpan dan lihat hasilnya. 6. Tambahkan atribut BORDERCOLOR pada tag untuk memberikan warna border (warna bebas) 7. Tambahkan warna latar untuk table dengan menggunakan BGCOLOR, sehingga script menjadi : atribut 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 × Report "MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL" Your name Email Reason -Select Reason- Pornographic Defamatory Illegal/Unlawful Spam Other Terms Of Service Violation File a copyright complaint Description Close Send × Sign In Email Password Remember me Forgot password? Sign In Our partners will collect data and use cookies for ad personalization and measurement. Learn how we and our ad partner Google, collect and use data. Agree & close