Chapter 3. Grouping Elemen, Penomoran ( listing ), Hyperlink dan Image 3.1. Grouping Element Tag DIV dan SPAN digunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content, sementara div digunakan untuk blocklevel content. Latihan 13.html <title>div dan Span</title> <div> Divisi 1 <p> Div tag digunakan untuk mengelompokkan group element biasanya untuk blocklevel element. </p> Divisi 2 <p> Ini didalam devisi kedua. di tulis dengan alignment kanan. </p> <span style="font:georgia; color:#66cc00; font-size:30"> baris ini dalam span dengan warna hijau. </span>
Latihan 14.html <title>nazneen Online Bookstore</title> <h1 align="right"><font color="#0000cc"> NAZNEEN ONLINE BOOKSTORE</font> <h1 align="right"><font color="#0066ff" size="-1">jl. Cempaka 143 A Condong Catur Depok Sleman Yogyakarta<br> Telp.0274-882174</font> 3.2. Listing atau penomoran 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 modul ini, hanya ordered list dan unordered list yang dibahas.
3.2.1. Ordered List ( Numbering ) 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 ) Anda buka Latihan 12.html sebelumnya, kemudian Anda tambahkan script yang dicetak tebal berikut ini dan simpan sesuai dengan namanya ( Latihan 13.html ). Latihan 15.html <title>nazneen Online Bookstore</title> <h1 align="right"><font color="#0000cc"> NAZNEEN ONLINE BOOKSTORE</font> <h1 align="right"><font color="#0066ff" size="-1">jl. Cempaka 143 A Condong Catur Depok Sleman Yogyakarta<br> Telp.0274-882174</font> <h2 align="left"><font color="#0066ff">kategori Buku </font></h2> <ol> <li>multimedia <li>database <li>pemrograman Web <li>ekonomi <li>hukum </ol>
Latihan 16.html <title>nazneen Online Bookstore</title> <h1 align="right"><font color="#0000cc"> NAZNEEN ONLINE BOOKSTORE</font> <h1 align="right"><font color="#0066ff" size="-1">jl. Cempaka 143 A Condong Catur Depok Sleman Yogyakarta<br> Telp.0274-882174</font> <h2 align="left"><font color="#0066ff">kategori Buku </font></h2> <ol type="a"> <li>multimedia <li>database <li>pemrograman Web <li>ekonomi <li>hukum </ol> Coba Anda jalankan script diatas dan Anda perhatikan perbedaan antara Latihan 13.html dan Latihan 14.html!
3.2.2. Unordered List ( Bullet ) 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 ) Latihan 17.html <title>nazneen Online Bookstore</title> <h1 align="right"><font color="#0000cc"> NAZNEEN ONLINE BOOKSTORE</font> <h1 align="right"><font color="#0066ff" size="-1">jl. Cempaka 143 A Condong Catur Depok Sleman Yogyakarta<br> Telp.0274-882174</font> <h2 align="left"><font color="#0066ff">kategori Buku </font></h2> <ul type="square"> <li>multimedia <li>database <li>pemrograman Web <li>ekonomi <li>hukum </ul>
3.3. 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> Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu disediakan nama anchor lokasi tujuan dari link tersebut. Fungsi anchor sangat berguna jika dokumen HTML yang Anda buat memuat banyak informasi. Nama anchor dibuat dengan menambahkan atribut NAME. Contoh : < A NAME = HTML dan CSS > HTML dan CSS </A> Cara melakukan link ke bagian tersebut yaitu : < A HREF = nama_anchor > Teks pada browser </A> Agar Anda lebih memahami penggunaan hyperlink diatas, cobalah latihan berikut ini : Latihan 18.html <title>hyperlink</title> <h1 align="left"><font color="#0000cc"> BOOKS AVAILABLE</font> <a name="lengkap">judul Buku</a> <blockquote> <p><li><font color="#0066ff" size="+2">html dan CSS</font><a href="#html dan CSS">info lengkap</a> <p><li><font color="#0066ff" size="+2">myob</font> <p><li><font color="#0066ff" size="+2">spss</font> <p><li><font color="#0066ff" size="+2">analisis Desain Sistem Informasi</font> <p><li><font color="#0066ff" size="+2">pemrograman Web</font> <p><a href="latihan 14.html">More Info...</a> </blockquote> <p><a name="html dan CSS">HTML dan CSS</a> <blockquote> Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan document web. <br>yang bisa anda lakukan dengan HTML yaitu: <br><li>mengontrol tampilan dari web page dan contentnya. <br><li>mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia. <br><li>membuat online form yang bisa di gunakan untuk menangani pendaftaran,transaksi secara online. <br><li>menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML. </blockquote> <p><a href="#lengkap">kembali keatas</a>
Latihan 19.html <title>hyperlink tujuan</title> <h1 align="left"><font color="#0000cc"> BOOKS AVAILABLE</font> <br><li><font color="#0066ff" size="+2">e-commerce</font> <br><li><font color="#0066ff" size="+2">pengantar Komputer</font> <br><li><font color="#0066ff" size="+2">kupas Tuntas CSS</font> <br><li><font color="#0066ff" size="+2">membangun Aplikasi Penjualan dengan JSE</font> <br> <br><a href="latihan 13.html">Kembali</a>
3.3.1. Link Relative Link Relative URL yang tidak menyebutkan protocol dan network locationnya (hanya path dan nama filenya). Contoh : jitc/materi/html/chapter1.pdf 3.3.2. Link Absolut Link absolut merupakan full internet address (URL) yang meliputi protocol, network location, dan path serta nama file. Contoh : http ://www.yahoo.com/index.html
3.3.3. 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) HTML menyediakan tag <IMG> untuk menampilkan image ke dalam halaman web. Standar penulisan tag <img> yaitu : <img src = file_gambar ALT = nama_alternatif > Atribut src digunakan untuk menentukan sumber gambar. Atribut ALT berfungsi sebagai teks pengganti gambar untuk browser yang tidak bias mendukung grafik. Sebagai latihan, Anda buka kembali Latihan 15.html kemudian ubahlah scripnya menjadi seperti berikut kemudian simpan dengan nama Latihan 18.html dan jalankan script tersebut pada browser Anda masing-masing. Latihan 20.html <title>nazneen Online Bookstore</title> <img src="cawkrcxz.jpg" align="left" alt="nazneen Online Bookstore" width="100" height="100"> <h1 align="right"> <font color="#0000cc"> NAZNEEN ONLINE BOOKSTORE</font> <h1 align="right"><font color="#0066ff" size="-1"> Jl. Cempaka 143 A Condong Catur Depok Sleman Yogyakarta <br> Telp.0274 882174 </font> <h2 align="left"> <font color="#0066ff">kategori Buku </font> </h2> <ul type="square"> <li>multimedia <li>database <li>pemrograman Web <li>ekonomi <li>hukum </ul>