Pertemuan 03
•Als PPT, PDF herunterladen•
0 gefällt mir•282 views
Dokumen tersebut membahas tentang link dan list pada pemrograman web. Link digunakan untuk menghubungkan dokumen satu ke dokumen lain, sedangkan list digunakan untuk menguraikan daftar menggunakan berbagai tag seperti ordered list, unordered list, dan definition list.
Empfohlen
Weitere ähnliche Inhalte
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Pertemuan 03
Ähnlich wie Pertemuan 03 (20)
Pertemuan 03
- 1. PEMROGRAMAN WEB I Oleh: ANDI IRMAYANA,S.Kom.,MT
- 3. LINK HTML • Dokumen HTML menggunakan hyperlink (anchor) untuk meng-hubungkan dokumen ke dokumen dalam web. • Hyperlink biasa disebut dengan hypertext link
- 4. Contoh
- 5. Tag Anchor • HTML menggunakan tag <a> untuk membuat link • Sintak: • Jenis Link: Link Relatif Link Absolut Link dalam satu dokumen <a Atribut> Teks Tampilan</a>
- 6. Atribut LINK HREF Menentukan source dokumen NAME Memberialamat pada lokasi tertetu pada sebuah halaman TARGET Menentukan target tampilan TITLE Menentukan judul link onClick Menambahkan event klik onMouseOver Event mouse di atas link onMouseOut Event mouse saat meninggalkan link
- 7. Link Relatif • Link dalam page ke page yang lain dalam satu komputer • Contoh: <body> Contoh Link Relatif<br> <a href="hr.html">Lihat Macam-macam Garis</a><br> <a href="heading.html">Lihat Heading</a><br> <a href="linebreak.html">Lihat Teks Pindah Baris</a> </body>
- 8. Link Absolut • Membuat link web page ke web site lain di Internet. • Contoh: <a href=“http://www.microsoft.com”> Microsoft</A> Membuat link ke Misrosoft <a href=“http://www.dipanegara.ac.id”> Dipanegara</A> Membuat link ke web site STMIK Dipanegara
- 9. Link ke Bagian lain dalam Dokumen • Link jenis ini dibuat apabila dokumen html cukup panjang • Link ini berpasangan dengan tag <A HREF="#yang_baru">Yang Baru Hari Ini</A> <A HREF=“coba.html?#yang_baru">Yang Baru Hari Ini</A> <A NAME="yang_baru"></A> <B><U>Yang Baru Hari Ini:</U></B>
- 10. Link ke Windows Baru • Melakukan link ke page lain dan membukanya pada jendela baru • Contoh: • Target link yang lainnya – TARGET = "_blank" | "_parent" | "_self" | "_top" | window name untuk FRAME <a href=“strike.htm” target=“_blank”>Cetak Coret</a>
- 11. Link yang tidak Tergarisbawahi • Link dapat ditampilkan teks yang tidak digaris bawahi. • Contoh: <a href="indent.html" target ="_blank" Style="text-decoration:none"> Indentasi Paragraf</a>
- 12. Mailto • Membuat link pada suatu pesan mail (tidak bisa bekerja jika mail client didak dipasang) • Contoh: <html> <head> <title>Document</title> </head> <body> <a href="mailto:anna.dsndp@gmail.com? subject=Konsultasi">Konsultasi</a> </body> </html>
- 13. LIST HTML • Bentuk umum untuk menguraikan suatu daftar • Bentuk-bentuk list List dengan nomor, abjad, Romawi (ordered list) List (unordered list) List Definisi
- 14. Ordered List • List dibuat dengan menggunkana angka d atau abjad • Type list ordered jika penomoran bukan Type Arti I Romawi Besar i Romawi Kecil A Abjad Huruf Besar a Abjad Huruf Kecil
- 15. • Type bila tidak disebutkan, list berbentuk angka • Tag yang digunakan adalah <OL><OL> dan berpadsangan dengan yag <LI><LI> ubtuk List-nya • Bentuk: <OL [[Type=”Tipe_list”]/[START=“angka”]]> <LI> Teks ….. <LI> Teks </OL>
- 16. Contoh: <HTML> <BODY> <B>SERBA GRATIS DARI INTERNET</B> <OL TYPE="I"> <!--level 1--> <B><LI>Penyelenggara E-mail Gratis!</B> <OL Type="A" > <LI>DALAM NEGERI : <!--level 2--> <OL> <LI>Telkom <!--level 3--> <LI>BolehMail <!--level 3--> </OL>
- 17. <LI>LUAR NEGERI : <!--level 2--> <OL> <LI>Yahoo <!--level 3--> <LI>Excite <!--level 3--> </OL> </OL> <!--level 1--> <B><LI>Penyelenggara Web Space Gratis!</B> </OL> </BODY> </HTML>
- 18. Hasil
- 19. Unordered List • List dibuat dengan menggunkana simbol (bullet) • Type list unordered Type Arti Disc Bulatan Penuh Circle Bulatan Kosong Square Segi empat penuh
- 20. • Tag yang digunakan adalah <UL><UL> berpasangan dengan tag <LI><LI> • Bentuk: <UL [Type=”Tipe_list]> <LI> Teks ….. <LI> Teks </UL>
- 21. Contoh: <HTML> <BODY> <B>SERBA GRATIS DARI INTERNET</B> <UL> <!-- level 1 --> <LI><B>Penyelenggara E-mail Gratis!</B> <UL> <LI>DALAM NEGERI : <!-- level 2 --> <UL> <LI><U>Telkom</U> <!-- level 3 --> <LI><U>BolehMail</U> <!-- level 3 --> </UL>
- 22. <LI>LUAR NEGERI : <!-- level 2 --> <UL> <LI><U>Yahoo</U> <!-- level 3 --> <LI><U>Excite</U> <!-- level 3 --> </UL> </UL> <!-- level 1 --> <LI><B>Penyelenggara Web Space Gratis!</B> </ul> <hr><center> <small><Strong>© '2006</Strong></small> </BODY> </HTML>
- 23. Hasil
- 24. Tag <DIR> • Sama dengan tag <UL> • Contoh: <HTML> <HEAD> <TITLE>DIR</TITLE> </HEAD> <BODY> <B>SERBA GRATIS DARI INTERNET</B> <DIR> <!-- level 1 --> <LI><B>Penyelenggara E-mail Gratis!</B> <DIR>
- 25. <LI>DALAM NEGERI : <!-- level 2 --> <DIR> <LI><U>Telkom</U> <!-- level 3 --> <LI><U>BolehMail</U> <!-- level 3 --> </DIR> <LI>LUAR NEGERI : <!-- level 2 --> <DIR> <LI><U>Yahoo</U> <!-- level 3 --> <LI><U>Excite</U> <!-- level 3 --> </DIR> </DIR> <!-- level 1 --> <LI><B>Penyelenggara Web Space Gratis!</B> </DIR> <hr><center> <small><Strong>© '2006</Strong></small> </BODY> </HTML>
- 27. Tag <LISTING> • Untuk membuat daftar urut tanpa penomoran. • karakter spasi dihitung • Font yang standar kalau tidak disebutkan
- 28. Contoh <HTML> <HEAD><TITLE>LISTING</TITLE></HEAD> <BODY> <LISTING> <FONT SIZE=6>Browser Makers</FONT><FONT SIZE=5> <A HREF="http://www.microsoft.com">Microsoft</A> W<SUP>3</SUP>3 Netscape Opera<BR> <FONT SIZE=6>Service Providers</FONT><FONT SIZE=5> AOL CompuServe </LISTING> </BODY>
- 30. Definition List • Untuk mendefinisikan indentasi biasa dan gantung • Tag yang digunakan Tag Kegunaan <DL> Definition List <DT> Definition Term <DD> Definition Description
- 31. Contoh 1: <HTML> <BODY> <DD><I>Bank yang tidak masuk dalam daftar likuidasi tetap berjalan seperti biasa. Jika terdapat selebaran palsu mengenai daftar Bank yang dikatakan bakal dilikuidasi, masyarakat jangan percaya. Itu selebaran palsu yang berisi omong kosong. Hanya 16 Bank yang telah dilikuidasi.</I> <DD>Demikian penegasan gubernur Bank Indonesia J. Soedradjad Djiwandono di gedung utama sekretariat kabinet, di Jakarta, Senin (3/11), usai pengumuman paket kebijaksanaan ekonomi 3 Nopember 1997. </BODY>
- 32. Hasil:
- 33. Contoh 2: <BODY> <DL> <DT><I>BAB I</I> <DD><B>Pendahuluan.</B> Menjelaskan mengenai Evolusi Cyberspace, Word Wide Web, Perancangan HomePage serta Editor-editor Web yang dapat digunakan untuk membuat HomePage. <DT><I>BAB II</I> <DD><B>Dasar-Dasar Bahasa HTML.</B>menjelaskan mengenai mengapa kita menggunakan tag-tagbeserta atribut-atributnya serta menjelaskan segala sesuatu tentang dasar-dasar HTML yang harus diketahui sebelum membuat HomePage. </DL></BODY>
- 34. Hasil: