Pemrograman Berorientasi Platform (IN315B) Enumerasi, Images & Table Pemrograman Berorientasi Platform (IN315B)
Enumerasi (List, Unnumbered List, Ordered List) List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Ada tiga macam list yang bisa anda tambahkan ke document HTML: Unordered List (Bullet) Ordered List (Numbering) Definition List
Unordered List
Ordered List
contoh
DEFINITION LIST Berbeda dengan ordered list dan unordered list, pada definition list tidak menggunakan tanda khusus (numbering maupun bulleting) pada item-item sebuah list. Definition list umumnya digunakan untuk sebuah artikel pada HTML yang isinya merupakan uraian umum mengenai suatu hal yang berkaitan dengan ilmu pendidikan dan ilmiah.
... Untuk membuat sebuah definition list, web designer dapat menggunakan tag <dl> (definition list) yang ditutup dengan tag </dl>. Berbeda dengan ordered maupun unordered list yang menggunakan tag <li>, maka pada definition list digunakan tag <dt> untuk memasukan item-item pada list yang bersangkutan dan diakhiri dengan tag </dt>. Kemudian jika ingin memasukan sub-item pada list tersebut maka dapat menggunakan tag <dd> dan </dd>.
...
...
Horizontal Line <hr> membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) : <hr />
Background Digunakan untuk memberikan warna/image latar belakang pada elemen html Bisa ditempatkan pada elemen html seperti <body> <table> <tr> <td>, dll.. Tag yang digunakan Menggunakan warna: <body bgcolor="#000000"> <body bgcolor="rgb(0,0,0)"> <body bgcolor="black">
… Menggunakan image: <body background="clouds.gif">
Tag Gambar (Image) <img src="NamaFileGambar"> Atribut src digunakan untuk menentukan source dari image yang akan ditampilkan. Image: ekstensi .GIF, .JPG, atau .PNG. Value lokasi image bisa merujuk ke absolute path src = ”c:/gambar/logo.gif” src = http://www.google.co.id/intl/id_id/images/logo.gif Value lokasi image bisa juga merujuk ke relative path src=”images/logo.gif” src=”../../images/logo.gif”
atribut Atribut alt Alt digunakan untuk mendefinisikan alternate text untuk sebuah image Contoh : <img src="boat.gif" alt="Big Boat"> Alt juga akan memberitaukan kepada pengunjung web bila gambar yang apa yang sedang ditampilkan bila gambarnya tidak muncul
atribut Atribut align Gunakan atribut align untuk mentukan posisi dari gambar bila diletakan dalam paragraf (tag <p> </p> ) Value dari align : absbottom, absmiddle, baseline, bottom, left, middle, right, texttop, top Contoh : <p> Fakultas Teknologi Informasi <img src=”logo.gif” align=”bottom”> UKSW</p>
contoh
atribut Atribut width dan height Digunakan untuk menyesuaikan besar image Width (lebar) dan height (tinggi) didefinisikan dalam bentuk pixel.
contoh <p> <img src ="logo.gif" align ="left" width="48px" height="48px"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p>
Menggunakan image sebagai sebuah link Image juga bisa digunakan untuk menggantikan teks pada link Contoh : <a href=”http://www.google.com”><img src=”logo.gif” border=”0”></a> Perhatikan atribut border=”0” digunakan untuk mengilangkan border pada image yang akan muncul secara otomatis bila image digunakan pada link
Tag Tabel <table> definisi tabel </table> Tag untuk penanda baris adalah <tr> definisi baris </tr> Tag untuk penanda kolom adalah <td>data</td>
Contoh pendefinisian tabel :
…
Latihan
Latihan
Blog: ramos672006005.wordpress.com