List dan Link
A. Tujuan Praktikum
1. Mahasiswa dapat membuat List dan Link yang terurut maupun tidak terurut.
2. Mahasiswa dapat membuat Link Halaman.
B. Dasar Teori
Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item
yang ada memilki nomor urut atau bisa juga berupa tanda-tanda khusus/simbol. Terdapat 2 tipe list
yang dapat digunakan yaitu :
Unorderet List: <UL> untuk membuat daftar item dengan tanda bullet (tidak bernomor). List
entries didefenisikan dengan tag <LI>. Pada jenis ini tidak memerlukan pengurutan data. Bentuk
Item tanda pada Unorderet List dapat diubah dengan menggunakan atribut TYPE kedalam tag
<UL> dengan nilai "circle" untuk bentuk lingkaran tengahnya putih, "square" untuk bentuk
kotak padat hitam dan "disc" bentuk lingkaran pada warna hitam.
Ordered List: <OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item
dapat menggunakan angka arab atau angka romawi. List entries juga didefenisikan dengan <LI>
tag. Atribut yang ada pada ordered List adalah TYPE dan START. Type terdiri dari 1 default), i (ii,
iii,...), I (II,III,...), a (a,b,c,...) dan type A (A,B,C,...)
Link digunakan untuk membuat link/penghubung antara satu halaman dengan halaman lain, ke
URL lain, juga digunakan dalam satu halaman untuk berpindah ke sub judul yang lain atau ke
lokasi tertentu dalam satu halaman yang sama.
Sintak tag lain adalah sebagai berikut:
<a href=url_tujuan>nama_link</a>
url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah nilai
yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan yang terletak
antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat diatur
dalam tag <body>.
Berikut contoh-contoh skripnya :
skrip3.1 List Tidk Terurut___________________________________________________________
1. <html>
2. <head>
3. <title>List Takterurut</title>
4. </head>
5. <body>
6. Pekerjaan hari ini yang harus dilakukan:
7. <ul>
8. <li>Servis motor </li>
9. <li>Belanja sembako</li>
10.<li>Ngajari anak belajar</li>
11.</li>Memberi makan ikan</li>
12.</ul>
13.</body>
14.</html>
skrip3.2 List Terurut_______________________________________________________________
1. <html>
2. <head>
3. <title>List Terurut</title>
4. </head>
5. <body>
6. Pekerjaan hari ini yang harus dilakukan:
7. <ol>
8. <li>Servis motor </li>
9. <li>Belanja sembako</li>
10.<li>Ngajari anak belajar</li>
11.</li>Memberi makan ikan</li>
12.</ol>
13.</body>
14.</html>
skrip3.3 List dalam list_____________________________________________________________
1. <html>
2. <head>
3. <title>List Dalam List</title>
4. </head>
5. <body>
6. <font color= "ff0000"> <h1>Universitas Ahmad Dahlan Kampus 3
7. </h1> </font>
8. <font size="4" color="#000066">
9. <ol>
10. <li> Fakultas Matematika dan Ilmu Pengetahuan Alam
11. <ul>
12. <li>Program Studi Sistem Informasi</li>
13. <li>Program Studi matematika</li>
14. <li>Program Studi Fisika</li>
15. <li>Progam Studi Biologi</li>
16. </ul>
17. </li>
18. <li>Fakultas Farmasi
19. <ul>
20. <li>Program Studi Farmasi</li>
21. <li>Program Studi Kedokteran</li>
22. <ul>
23. </li>
24. <li> Fakultas Teknologi Industri
25. <ul>
26. <li>Program Studi Teknik Informatika</li>
27. <li>Program Studi Teknik Industri</li>
28. <li>Program Studi Teknik Elektro</li>
29. <li>Program Studi Teknik Kimia</li>
30. </ul>
31. </li>
32. <li>Fakultas Teknologi Pendidikan
33. <ul>
34. <li>Program Studi Matematika</li>
35. <li>Program Studi Biologi</li>
36. <li>Program Studi Fisika</li>
37. </ul>
38. </li>
39. </ol>
40.</font>
41.</body>
42.</html>
skrip3.4 Link Eksternal____________________________________________________________
1. <html>
2. <head>
3. <title>Percobaan Link Eksternal</title>
4. </head>
5. <body>
6. <font color= "000080">
7. <h3>Mau Link ke.....</h3>
8. </font>
9. <ul>
10.<li> <a href="prg22.html#Here">Melihat Rumus Matematika</a></li>
11.<li> <a href="#prg28.html#Here">UAD Kampus 3 </a> </li>
12.<li> <a href="http://www.google.co.id/"> Ke Google </a> </li>
13.<li> <a href="http://uad.ac.id/"> Universitas Ahmad Dahlan Yog Yess
14. </a> </li>
15.</ul>
16.</body>
17.</html>
skrip3.5 Link Internal_______________________________________________________________
1. <html>
2. <head>
3. <title>Link Internal</title>
4. </head>
5. <body>
6. <a href="#kunci1">Etimologi </a> <br>
7. <a href="#kunci2">Terminologi </a> <br>
8. <a href="#kunci3">Nama-nama lain Al-Qur'an </a> <br>
9. <a href="#kunci4">Struktur da pembagian Al-Qur'an </a> <br>
10. <a href="#kunci5">Surat, ayat, dan Ruku' </a> <br>
11. <a href="#kunci6">Juz dan Manzil </a> <br>
12. <hr>
13 .<font color="0000ff"><a name="#kunci1"> Etimologi </a> </font>
14. <p>
15. Uraaian tentang Etimologi
16. </p>
17. <font color="0000ff"><a name="#kunci2"> Terminologi </a> </font>
18. <p>
19. Uraian Terminologi
20. <P>
21.<font color="0000ff"><a name="#kunci3"> Nama-nama lain Al-Qur'an </a> </font>
22. <p>
23. Dalam Al-Qur'an sendiri terdapat beberapa ayat yang menyertakan nama lain
24. yang digunakan untuk merujuk kepada Al-Qur'an itu sendiri
25. Berikut adalah nama-nama tersebut dan ayat yang mencantumkannya:
26. <ul>
27. <li>Al-Kitab QS(2:2), QS(44:2)</li>
28. <li>Al-Furqan (pembeda benar salah): QS(25:1)</li>
29. <li>Adz-Zikr (pemberi peringatan): QS(15:9)</li>
30. <li>Al-Mau'idah9pelajaran/nasihat): QS(10:57)</li>
31. <li>Al-Hukm (peraturan/hukum): QS(13:37)</li>
32. <li>Al-Hikmah (kebijaksanaan): QS(17:39)</li>
33. <li>Asy-Syifa' (obat/penyembuh): QS(10:57), QS(17:82)</li>
34. <li>Al-Huda (petunjuk): QS(72:13), QS(19:33)</li>
35. <li>At-Tanzil (yang diturunkan): QS(26;192)</li>
36. <li>Ar-Rahmat (karunia): QS(22:77)</li>
37. <li>Ar-Ruh (Ruh): QS(42:52)</li>
38. <li>Al-Bayan (penerang): QS(3:138)</li>
39. <li>Al-Kalam (ucapan/firman): QS(9:6)</li>
40. <li>Al-Busyra (kabar gembira ): QS(16:102)</li>
41. <li>An-Nur (cahaya): QS(4:174)</li>
42. <li>Al-Basha'ir (pedoman): QS(45:20)</li>
43. <li>Al-Balagh (penyampaian/kabar): QS(14:52)</li>
44. <li>Al-Qaul (perkataan/ucapan): QS(28:51)</li>
45. </ul>
46. </p>
47. <font color="0000ff"> <a name="#kunci4">Struktur dan pembagian Al-Qur'an </a>
48. </font>
49. <p>
50. Artikel utama untuk bagian ini adalah: Surat dalam Al-Qur'an, Makkiyah, dan Madaniyah
51. </p>
52. <font color="#0000ff"> <a name="kunci5">Surat, ayat, dan Ruku'
55. <p>
56. <font color="#0000ff"> <a name="kunci6">Juz dan Manzil </a> </font>
57. <p>Dalam skema pembagian lain, Al-Qur'an juga terbagi menjadi 30 bagian
58. dengan panjang ama yang dikenal dengan nama juz.
59. Pembagian ini untuk memudahkan mereka yang ingin mrnuntaskan bacaan
60. Al-Qur'an dalam 30 hari (satu bulan).
61. Pembagian lain yakni manzil memecah Al-Qur'an menjadi 7 bagian
62. dengan tujuan menyelesaikan bacaan dalam 7 hari (satu minggu).
63. Kedua jenis pembgian ini tidak meiliki hubungan dengan pembagian subyek bahasan
64. tertentu.
65. </P></body>
66. </html>
C. Tugas
1. Ketiklah skrip 3.1 dengan notepad simpan dengan nama prg31.html
2.Doubleklik-lah file:prg31.html amati hasilnya gantilah baris 7 dengan <ul type="circle"> atau
<ul type="square">
3. Ketiklah skrip 3.2 dengan notepad simpan dengan nama prg32.html
4. Double klik-lah file: prg32.html amati hasilnya gantilah baris 7 dengan <ol type="i"> atau
<ol type="A">
5. Cobalah skrip 3.3 sampai 3.5 amati hasilya.
6. Buatlah link internal yang dapat kembali kehalaman atas.
A. Tujuan Praktikum
1. Mahasiswa dapat membuat List dan Link yang terurut maupun tidak terurut.
2. Mahasiswa dapat membuat Link Halaman.
B. Dasar Teori
Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item
yang ada memilki nomor urut atau bisa juga berupa tanda-tanda khusus/simbol. Terdapat 2 tipe list
yang dapat digunakan yaitu :
Unorderet List: <UL> untuk membuat daftar item dengan tanda bullet (tidak bernomor). List
entries didefenisikan dengan tag <LI>. Pada jenis ini tidak memerlukan pengurutan data. Bentuk
Item tanda pada Unorderet List dapat diubah dengan menggunakan atribut TYPE kedalam tag
<UL> dengan nilai "circle" untuk bentuk lingkaran tengahnya putih, "square" untuk bentuk
kotak padat hitam dan "disc" bentuk lingkaran pada warna hitam.
Ordered List: <OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item
dapat menggunakan angka arab atau angka romawi. List entries juga didefenisikan dengan <LI>
tag. Atribut yang ada pada ordered List adalah TYPE dan START. Type terdiri dari 1 default), i (ii,
iii,...), I (II,III,...), a (a,b,c,...) dan type A (A,B,C,...)
Link digunakan untuk membuat link/penghubung antara satu halaman dengan halaman lain, ke
URL lain, juga digunakan dalam satu halaman untuk berpindah ke sub judul yang lain atau ke
lokasi tertentu dalam satu halaman yang sama.
Sintak tag lain adalah sebagai berikut:
<a href=url_tujuan>nama_link</a>
url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah nilai
yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan yang terletak
antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat diatur
dalam tag <body>.
Berikut contoh-contoh skripnya :
skrip3.1 List Tidk Terurut___________________________________________________________
1. <html>
2. <head>
3. <title>List Takterurut</title>
4. </head>
5. <body>
6. Pekerjaan hari ini yang harus dilakukan:
7. <ul>
8. <li>Servis motor </li>
9. <li>Belanja sembako</li>
10.<li>Ngajari anak belajar</li>
11.</li>Memberi makan ikan</li>
12.</ul>
13.</body>
14.</html>
skrip3.2 List Terurut_______________________________________________________________
1. <html>
2. <head>
3. <title>List Terurut</title>
4. </head>
5. <body>
6. Pekerjaan hari ini yang harus dilakukan:
7. <ol>
8. <li>Servis motor </li>
9. <li>Belanja sembako</li>
10.<li>Ngajari anak belajar</li>
11.</li>Memberi makan ikan</li>
12.</ol>
13.</body>
14.</html>
skrip3.3 List dalam list_____________________________________________________________
1. <html>
2. <head>
3. <title>List Dalam List</title>
4. </head>
5. <body>
6. <font color= "ff0000"> <h1>Universitas Ahmad Dahlan Kampus 3
7. </h1> </font>
8. <font size="4" color="#000066">
9. <ol>
10. <li> Fakultas Matematika dan Ilmu Pengetahuan Alam
11. <ul>
12. <li>Program Studi Sistem Informasi</li>
13. <li>Program Studi matematika</li>
14. <li>Program Studi Fisika</li>
15. <li>Progam Studi Biologi</li>
16. </ul>
17. </li>
18. <li>Fakultas Farmasi
19. <ul>
20. <li>Program Studi Farmasi</li>
21. <li>Program Studi Kedokteran</li>
22. <ul>
23. </li>
24. <li> Fakultas Teknologi Industri
25. <ul>
26. <li>Program Studi Teknik Informatika</li>
27. <li>Program Studi Teknik Industri</li>
28. <li>Program Studi Teknik Elektro</li>
29. <li>Program Studi Teknik Kimia</li>
30. </ul>
31. </li>
32. <li>Fakultas Teknologi Pendidikan
33. <ul>
34. <li>Program Studi Matematika</li>
35. <li>Program Studi Biologi</li>
36. <li>Program Studi Fisika</li>
37. </ul>
38. </li>
39. </ol>
40.</font>
41.</body>
42.</html>
skrip3.4 Link Eksternal____________________________________________________________
1. <html>
2. <head>
3. <title>Percobaan Link Eksternal</title>
4. </head>
5. <body>
6. <font color= "000080">
7. <h3>Mau Link ke.....</h3>
8. </font>
9. <ul>
10.<li> <a href="prg22.html#Here">Melihat Rumus Matematika</a></li>
11.<li> <a href="#prg28.html#Here">UAD Kampus 3 </a> </li>
12.<li> <a href="http://www.google.co.id/"> Ke Google </a> </li>
13.<li> <a href="http://uad.ac.id/"> Universitas Ahmad Dahlan Yog Yess
14. </a> </li>
15.</ul>
16.</body>
17.</html>
skrip3.5 Link Internal_______________________________________________________________
1. <html>
2. <head>
3. <title>Link Internal</title>
4. </head>
5. <body>
6. <a href="#kunci1">Etimologi </a> <br>
7. <a href="#kunci2">Terminologi </a> <br>
8. <a href="#kunci3">Nama-nama lain Al-Qur'an </a> <br>
9. <a href="#kunci4">Struktur da pembagian Al-Qur'an </a> <br>
10. <a href="#kunci5">Surat, ayat, dan Ruku' </a> <br>
11. <a href="#kunci6">Juz dan Manzil </a> <br>
12. <hr>
13 .<font color="0000ff"><a name="#kunci1"> Etimologi </a> </font>
14. <p>
15. Uraaian tentang Etimologi
16. </p>
17. <font color="0000ff"><a name="#kunci2"> Terminologi </a> </font>
18. <p>
19. Uraian Terminologi
20. <P>
21.<font color="0000ff"><a name="#kunci3"> Nama-nama lain Al-Qur'an </a> </font>
22. <p>
23. Dalam Al-Qur'an sendiri terdapat beberapa ayat yang menyertakan nama lain
24. yang digunakan untuk merujuk kepada Al-Qur'an itu sendiri
25. Berikut adalah nama-nama tersebut dan ayat yang mencantumkannya:
26. <ul>
27. <li>Al-Kitab QS(2:2), QS(44:2)</li>
28. <li>Al-Furqan (pembeda benar salah): QS(25:1)</li>
29. <li>Adz-Zikr (pemberi peringatan): QS(15:9)</li>
30. <li>Al-Mau'idah9pelajaran/nasihat): QS(10:57)</li>
31. <li>Al-Hukm (peraturan/hukum): QS(13:37)</li>
32. <li>Al-Hikmah (kebijaksanaan): QS(17:39)</li>
33. <li>Asy-Syifa' (obat/penyembuh): QS(10:57), QS(17:82)</li>
34. <li>Al-Huda (petunjuk): QS(72:13), QS(19:33)</li>
35. <li>At-Tanzil (yang diturunkan): QS(26;192)</li>
36. <li>Ar-Rahmat (karunia): QS(22:77)</li>
37. <li>Ar-Ruh (Ruh): QS(42:52)</li>
38. <li>Al-Bayan (penerang): QS(3:138)</li>
39. <li>Al-Kalam (ucapan/firman): QS(9:6)</li>
40. <li>Al-Busyra (kabar gembira ): QS(16:102)</li>
41. <li>An-Nur (cahaya): QS(4:174)</li>
42. <li>Al-Basha'ir (pedoman): QS(45:20)</li>
43. <li>Al-Balagh (penyampaian/kabar): QS(14:52)</li>
44. <li>Al-Qaul (perkataan/ucapan): QS(28:51)</li>
45. </ul>
46. </p>
47. <font color="0000ff"> <a name="#kunci4">Struktur dan pembagian Al-Qur'an </a>
48. </font>
49. <p>
50. Artikel utama untuk bagian ini adalah: Surat dalam Al-Qur'an, Makkiyah, dan Madaniyah
51. </p>
52. <font color="#0000ff"> <a name="kunci5">Surat, ayat, dan Ruku'
55. <p>
56. <font color="#0000ff"> <a name="kunci6">Juz dan Manzil </a> </font>
57. <p>Dalam skema pembagian lain, Al-Qur'an juga terbagi menjadi 30 bagian
58. dengan panjang ama yang dikenal dengan nama juz.
59. Pembagian ini untuk memudahkan mereka yang ingin mrnuntaskan bacaan
60. Al-Qur'an dalam 30 hari (satu bulan).
61. Pembagian lain yakni manzil memecah Al-Qur'an menjadi 7 bagian
62. dengan tujuan menyelesaikan bacaan dalam 7 hari (satu minggu).
63. Kedua jenis pembgian ini tidak meiliki hubungan dengan pembagian subyek bahasan
64. tertentu.
65. </P></body>
66. </html>
C. Tugas
1. Ketiklah skrip 3.1 dengan notepad simpan dengan nama prg31.html
2.Doubleklik-lah file:prg31.html amati hasilnya gantilah baris 7 dengan <ul type="circle"> atau
<ul type="square">
3. Ketiklah skrip 3.2 dengan notepad simpan dengan nama prg32.html
4. Double klik-lah file: prg32.html amati hasilnya gantilah baris 7 dengan <ol type="i"> atau
<ol type="A">
5. Cobalah skrip 3.3 sampai 3.5 amati hasilya.
6. Buatlah link internal yang dapat kembali kehalaman atas.
Tidak ada komentar:
Posting Komentar