KOMPUTER APLIKASI IT XHTML & CSS MODUL 05

Presentasi berjudul: "KOMPUTER APLIKASI IT XHTML & CSS MODUL 05"— Transcript presentasi:

1 KOMPUTER APLIKASI IT XHTML & CSS MODUL 05

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

3 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>

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

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

6 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>

7 KOMPUTER APLIKASI IT - XHTML & CSS MODUL 05
LIST HASILNYA

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

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

10 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

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

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

13 /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=“???”

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

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

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

17 <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

18 <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” />

19 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” />

20 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

21 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

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

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

24 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???

25 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 )

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