1 / 14

Chapter 3

Chapter 3. Grouping Elemen Penomoran ( listing ) Hyperlink dan Image. Grouping Element. Tag <DIV> dan <SPAN> digunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content, sementara div digunakan untuk blocklevel content. Contoh.

john-franklin
Download Presentation

Chapter 3

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 3 Grouping Elemen Penomoran ( listing ) Hyperlink dan Image Created By Barka Satya

  2. Grouping Element Tag <DIV> dan <SPAN> digunakanuntukmengelompokkan element-element HTML. Span digunakanuntukmendefinisikan inline content, sementara div digunakanuntukblocklevel content.

  3. Contoh <html> <head> <title>Div dan Span</title> </head> <body> <div> Divisi 1 </div> <div align="right"> Divisi 2 <p> Inididalamdevisikedua. ditulisdengan alignment kanan. </p> </div> <span style="font:Georgia; color:#66CC00; font-size:30"> barisinidalam span denganwarnahijau. </span> </body> </html>

  4. 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>

  5. 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.

  6. 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. 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> Created By Ahlihi Masruro, S.Kom

  8. 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 ) Created By Ahlihi Masruro, S.Kom

  9. 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>

  10. 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>

  11. 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>DesainGrafis <li>Java </ul> <a href="link1.html">Yuk Kembali...</a> </body> </html>

  12. 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”>

  13. Contoh <html> <head> <title>Image</title> </head> <body> <imgsrc="CAWKRCXZ.jpg" align="left" alt=“Gambarapaini?" width="100" height="100"> <ul type="square"> <li>Multimedia <li>Database <li>Pemrograman Web </ul> </body> </html>

  14. Buatlah Script HTML agar hasilnya tampak seperti berikut ini :

More Related