KOMPUTER APLIKASI IT XHTML & CSS MODUL 05

BUKA DI BROWSER UNTUK MENDOWNLOAD MATERI ( MODUL 5 ): http://192. 168

XHTML Juga Mendukung List KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 LIST XHTML Juga Mendukung List Terdapat 2 Jenis, Yaitu Ordered List <ol> dan Unordered list <ul> Tag <li> digunakan untuk menampilkan Item List-nya. Sintax: <ol> <li>Satu</li> <li>Dua</li> <li>Tiga</li> </ol> <ul> </ul>

<ol></ol> <ul></ul> KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 LIST <ol></ol> <ul></ul>

KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 LIST <ol> - Ordered List, Menampilkan List/Daftar dengan menyisipkan nomor ordernya, (1, 2, 3, dst), (a, b, c, dst). <ul> - Unordered List, Menampilkan List/Daftar dengan menggunakan bullet/simbol, tanpa ada nomor ordernya.

List bisa berada di dalam list lain, seperti pada contoh berikut: KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 LIST LIST DIDALAM LIST List bisa berada di dalam list lain, seperti pada contoh berikut: <ul> <li>Satu</li> <li>Dua <ol> <li>Dua - Satu</li> <li>Dua - Dua</li> </ol> </li> <li>Tiga</li> </ul>

KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 LIST HASILNYA

IMAGE / GAMBAR DALAM XHTML IMAGE KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE IMAGE / GAMBAR DALAM XHTML

GUNAKAN TAG <img /> KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE GUNAKAN TAG <img /> Dengan Attribut src=“url-image”

Mengakses file lain dalam XHTML selalu menggunakan URL KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE Masih Ingat URL?? Mengakses file lain dalam XHTML selalu menggunakan URL

KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE <img /> Merupakan Tag Yang Berdiri Sendiri Seperti Halnya <br /> dan <hr />

<img src=“balon.jpg” /> KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE Coba Tag Berikut <img src=“balon.jpg” />

/latihan/aksesoris/balon.jpg /latihan/gambar.html Apa Isi src=“???” KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE Bila Image yang dituju berada di folder: /latihan/aksesoris/balon.jpg Dan File XHTML berada di folder /latihan/gambar.html Apa Isi src=“???”

<img src=“aksesoris/balon.jpg” /> KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE URL pada src harus: <img src=“aksesoris/balon.jpg” />

KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE INGAT src Bukan href

APA LAGI ATTRIBUT YANG WAJIB?? KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE APA LAGI ATTRIBUT YANG WAJIB?? width height alt

<img src=“balon.jpg” width=“300” /> KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE WIDTH W3C Mewajibkan attribute ini untuk diisi dengan ukuran panjang (kiri ke kanan) image. <img src=“balon.jpg” width=“300” /> Ukuran dalam Pixel

<img src=“balon.jpg” width=“300” height=“80” /> KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE HEIGHT Sama Halnya dengan width, Height juga diwajibkan W3C untuk diisi dengan ukuran tinggi image (atas ke bawah ). <img src=“balon.jpg” width=“300” height=“80” />

KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE ALT ALT juga diwajibkan W3C, sebagai text pengganti bila image yang dimaksud tidak dapat ditampilkan browser. <img src=“balon.jpg” width=“300” height=“80” alt=“Gambar Balon” />

FORMAT IMAGE YANG DIDUKUNG KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE FORMAT IMAGE YANG DIDUKUNG PNG – Portable Network Graphics JPEG - Joint Photographic Experts Group GIF - Graphics Interchange Format

PNG ( *.png ) Lisensi Terbuka ( Open ) dan Gratis KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE PNG ( *.png ) Lisensi Terbuka ( Open ) dan Gratis Lossless, Menggunakan gzip untuk kompresi Bagus Untuk gambar-gambar dengan garis tegas seperti diagram. Mendukung Alpha Transparancy ( Semi Transparan ) Kualitas Gambar tidak Menurun

JPEG ( *.jpg ) Format Standard Untuk Foto KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE JPEG ( *.jpg ) Format Standard Untuk Foto Lossy Compression, dengan mengandalkan batas penglihatan manusia. Ukuran relatif lebih kecil untuk Foto Bagus Untuk Foto yang memiliki banyak warna tapi kurang baik untuk gambar dengan garis yang tegas.

GIF ( *.gif ) Software yang dapat membuatnya harus membayar lisensi. KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE GIF ( *.gif ) Software yang dapat membuatnya harus membayar lisensi. Jumlah warna terbatas hanya sampai 256 Mendukung Animasi Mendukung Transparasi ( non alpha ) Ukuran relatif kecil, bagus untuk gambar-gambar berukuran kecil...

FORMAT LAINNYA Mana yang akan kalian gunakan??? BMP SVG WebP IMAGE KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE FORMAT LAINNYA BMP SVG WebP Mana yang akan kalian gunakan???

Mengenal Attribute <img /> Lainnya KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 IMAGE Mengenal Attribute <img /> Lainnya align – menentukan posisi image dengan text [ left | right | top | bottom | middle ] hspace – menentukan margin/jarak antara image dengan text (horizontal) vspace – seperti hspace ( vertikal ) border – menentukan ukuran border dalam image ( Lebih baik gunakan css )

TERIMA KASIH DAN SELAMAT BELAJAR PENUTUP KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05 PENUTUP TERIMA KASIH DAN SELAMAT BELAJAR