際際滷

際際滷Share a Scribd company logo
PEMROGRAMAN WEB I
Oleh:
ANDI IRMAYANA,S.Kom.,MT
Agenda
 Link
 List
LINK HTML
 Dokumen HTML menggunakan hyperlink
(anchor) untuk meng-hubungkan
dokumen ke dokumen dalam web.
 Hyperlink biasa disebut dengan hypertext
link
Contoh
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>
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
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>
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
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>
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>
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>
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>
LIST HTML
 Bentuk umum untuk menguraikan suatu
daftar
 Bentuk-bentuk list
 List dengan nomor, abjad, Romawi
(ordered list)
 List (unordered list)
 List Definisi
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
 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>
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>
<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>
Hasil
Unordered List
 List dibuat dengan menggunkana simbol
(bullet)
 Type list unordered
Type Arti
Disc Bulatan Penuh
Circle Bulatan Kosong
Square Segi empat penuh
 Tag yang digunakan adalah <UL><UL>
berpasangan dengan tag <LI><LI>
 Bentuk:
<UL [Type=Tipe_list]>
<LI> Teks
..
<LI> Teks
</UL>
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>
<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>&copy '2006</Strong></small>
</BODY>
</HTML>
Hasil
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>
<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>&copy '2006</Strong></small>
</BODY>
</HTML>
Pertemuan 03
Tag <LISTING>
 Untuk membuat daftar urut tanpa
penomoran.
 karakter spasi dihitung
 Font yang standar kalau tidak disebutkan
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>
Pertemuan 03
Definition List
 Untuk mendefinisikan indentasi biasa dan
gantung
 Tag yang digunakan
Tag Kegunaan
<DL> Definition List
<DT> Definition Term
<DD> Definition Description
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>
Hasil:
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>
Hasil:

More Related Content

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
  • 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>&copy '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>&copy '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>
  • 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>