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 <span style="font:Georgia; color:#66CC00; font-size:30"> baris ini dalam span dengan warna hijau.

Created by Ahlihi Masruro, S.Kom

Latihan 14.html

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.

Created by Ahlihi Masruro, S.Kom

3.2.1. Ordered List ( Numbering ) Ordered list digunakan untuk membuat daftar dimana setiap bagiannya memiliki nomor secara terurut. Ordered list dimulai dengan tag

dan diakhiri dengan

. Untuk menyatakan tiap bagiannya digunakan tag

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

NAZNEEN ONLINE BOOKSTORE

Jl. Cempaka 143 A Condong Catur Depok Sleman Yogyakarta
Telp.0274 - 882174

---

Kategori Buku

1. Multimedia
2. Database
3. Pemrograman Web
4. Ekonomi
5. Hukum

Created by Ahlihi Masruro, S.Kom

Latihan 16.html

NAZNEEN ONLINE BOOKSTORE

Jl. Cempaka 143 A Condong Catur Depok Sleman Yogyakarta
Telp.0274 - 882174

---

Kategori Buku

1. Multimedia
2. Database
3. Pemrograman Web
4. Ekonomi
5. Hukum

Coba Anda jalankan script diatas dan Anda perhatikan perbedaan antara Latihan 13.html dan Latihan 14.html !

Created by Ahlihi Masruro, S.Kom

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

dan tag penutup

dan untuk tiap bagiannya digunakan tag

tanpa tag penutup. Atribut elemen list ,yaitu : TYPE = [ disc | squre | circle ] ( default disc ) Latihan 17.html

NAZNEEN ONLINE BOOKSTORE

Jl. Cempaka 143 A Condong Catur Depok Sleman Yogyakarta
Telp.0274 - 882174

---

Kategori Buku

• Multimedia
• Database
• Pemrograman Web
• Ekonomi
• Hukum

Created by Ahlihi Masruro, S.Kom

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 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 Cara melakukan link ke bagian tersebut yaitu : < A HREF = “nama_anchor “> Teks pada browser Agar Anda lebih memahami penggunaan hyperlink diatas, cobalah latihan berikut ini : Latihan 18.html

BOOKS AVAILABLE

---

Judul Buku

HTML dan CSSinfo lengkap

MyOB

SPSS

Analisis Desain Sistem Informasi

Pemrograman Web

More Info .....

HTML dan CSS

Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan document web.
Yang bisa anda lakukan dengan HTML yaitu:

Mengontrol tampilan dari web page dan contentnya.

Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.

Membuat online form yang bisa di gunakan untuk menangani pendaftaran,transaksi secara online.

Menambahkan object-object seperti image, audio, video dan juga java applet dalam document HTML.

Kembali keatas

Created by Ahlihi Masruro, S.Kom

Latihan 19.html

BOOKS AVAILABLE

---

E-Commerce

Pengantar Komputer

Kupas Tuntas CSS

Membangun Aplikasi Penjualan dengan JSE

Kembali

Created by Ahlihi Masruro, S.Kom

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

Created by Ahlihi Masruro, S.Kom

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 untuk menampilkan image ke dalam halaman web. Standar penulisan tag yaitu : 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

NAZNEEN ONLINE BOOKSTORE

Jl. Cempaka 143 A Condong Catur Depok Sleman Yogyakarta
Telp.0274 – 882174

---

Kategori Buku

• Multimedia
• Database
• Pemrograman Web
• Ekonomi
• Hukum

Created by Ahlihi Masruro, S.Kom

Created by Ahlihi Masruro, S.Kom