Hyperlink
advertisement
Chapter 3 Grouping Elemen Penomoran ( listing ) Hyperlink dan Image Created By Barka Satya 7/24/2017 Grouping Element Tag <DIV> dan <SPAN> digunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content, sementara div digunakan untuk blocklevel content. 7/24/2017 Contoh <html> <head> <title>Div dan Span</title> </head> <body> <div> Divisi 1 </div> <div align="right"> Divisi 2 <p> Ini didalam devisi kedua. di tulis dengan alignment kanan. </p> </div> <span style="font:Georgia; color:#66CC00; font-size:30"> baris ini dalam span dengan warna hijau. </span> </body> </html> 7/24/2017 Contoh 2 <html> <head> <title>Nazneen Online Bookstore</title> </head> <body> <div align="right"> <h1 align="right"> <font color="#0000CC"> NAZNEEN ONLINE BOOKSTORE</font> </h1> <h1 align="right"> <font color="#0066FF" size="-1">Jl. Cempaka 143 A Condong Catur Depok Sleman Yogyakarta<br> Telp.0274 - 882174</font> </h1> <hr color="#990000" align="right" size="3" width="100%"> </div> </body> </html> 7/24/2017 Listing List digunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). HTML menyediakan lima cara untuk membuat daftar atau list , yaitu : a. Ordered List b. Unordered List c. Directory List d. Menu List e. Definition List Untuk praktikum ini, hanya ordered list dan unordered list yang dibahas. 7/24/2017 Ordered List Ordered list digunakan untuk membuat daftar dimana setiap bagiannya memiliki nomor secara terurut. Ordered list dimulai dengan tag <ol> dan diakhiri dengan </ol>. Untuk menyatakan tiap bagiannya digunakan tag <li> dan tidak diperlukan tag penutup. Atribut elemen list,yaitu : TYPE = [ 1 | a | A | i | I ] ( default 1 ) 7/24/2017 Contoh <html> <head> <title>Ordered List</title></head> <body> <ol type="A"> <li>Multimedia <li>Database <li>Pemrograman Web <li>Ekonomi <li>Hukum </ol> </body> </html> 7/24/2017 Created By Ahlihi Masruro, S.Kom Unordered List Berbeda dengan ordered list, dalam ordered list tidak dijumpai urutan dalam suatu daftar. Setiap bagian dari unordered list ditandai dengan tanda bullet. Untuk membuat daftar dengan tanda ini digunakan tag awal <ul> dan tag penutup </ul> dan untuk tiap bagiannya digunakan tag <li> tanpa tag penutup. Atribut elemen list ,yaitu : TYPE = [ disc | squre | circle ] ( default disc ) 7/24/2017 Created By Ahlihi Masruro, S.Kom Hyperlink Ini merupakan salah satu keistimewaan yang dimiliki web. Dengan hyperlink ini berbagai halaman web yang berbeda dapat saling dihubungkan. Untuk membuat link Anda dapat menggunakan perintah ancor ( A ). Untuk membuat link ke dokumen HTML lain digunakan perintah berikut : <A HREF =“nama_dokumen”> Teks pada browser </A> 7/24/2017 Contoh link1.html <html> <head> <title>Hyperlink</title> </head> <body> <ul type="square"> <li>Multimedia <li>Database <li>Pemrograman Web <li>Ekonomi <li>Hukum </ul> <a href="link2.html">Info selengkapnya</a> </body> </html> 7/24/2017 link2.html <html> <head> <title>Hyperlink</title> </head> <body> <ul type="square"> <li>Multimedia <li>Database <li>Pemrograman Web <li>Ekonomi <li>Hukum <li>Arsitektur <li>Desain Grafis <li>Java </ul> <a href="link1.html">Yuk Kembali...</a> </body> </html> 7/24/2017 Image Biasanya, untuk memperindah tampilan web, digunakan image. Ada banyak format image, tapi ada tiga jenis format yang paling sering digunakan, yaitu : o GIF (Graphical Interchange Format) (.GIF) o JPEG (Joint Photographic Expert Image) (.JPG) o PNG (Portable Network Graphics) Standar penulisan tag <img> yaitu : <img src =”file_gambar” ALT =”nama_alternatif”> 7/24/2017 Contoh <html> <head> <title>Image</title> </head> <body> <img src="CAWKRCXZ.jpg" align="left" alt=“Gambar apa ini?" width="100" height="100"> <ul type="square"> <li>Multimedia <li>Database <li>Pemrograman Web </ul> </body> </html> 7/24/2017 Buatlah Script HTML agar hasilnya tampak seperti berikut ini : 7/24/2017
