Scribd Logo
Unggah

Selamat datang di Scribd!

  • 1.4 Gambar

    Diunggah oleh

    Muhamad Ridwan
    11 tayangan5 halaman
    Dokumen tersebut membahas tentang penggunaan gambar dalam halaman web, termasuk cara menampilkan gambar secara inline dan eksternal serta menggunakan gambar sebagai link. Juga dibahas tentang kriteria pemilihan format gambar seperti GIF, JPEG, dan Animated GIF.

    Deskripsi Asli:

    Judul Asli

    1.4 GAMBAR

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Dokumen tersebut membahas tentang penggunaan gambar dalam halaman web, termasuk cara menampilkan gambar secara inline dan eksternal serta menggunakan gambar sebagai link. Juga dibahas tentang kriteria pemilihan format gambar seperti GIF, JPEG, dan Animated GIF.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    11 tayangan5 halaman

    1.4 Gambar

    Diunggah oleh

    Muhamad Ridwan
    Dokumen tersebut membahas tentang penggunaan gambar dalam halaman web, termasuk cara menampilkan gambar secara inline dan eksternal serta menggunakan gambar sebagai link. Juga dibahas tentang kriteria pemilihan format gambar seperti GIF, JPEG, dan Animated GIF.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 5

    GAMBAR (IMAGE) HTML

    2.1 Pendahuluan
    Cara untuk menampilkan gambar dalam halaman web:

     Inline Image
    Gambar dikatakan ditampilkan secara internal jika gambar tersebut secara langsung
    muncul pada saat halaman web dimuat dalam browser yang berbasiskan grafik

     External Image
     Gambar yang tidak ditampilkan secara otomatis ketika suatu halaman web
    dimuat.
     Gambar ini hanya akan keluar jika link yang mewakilinya diklik.
     Link ini dapat berupa suatu teks atau gambar lain yang biasanya berukuran
    lebih kecil dari external image yang diwakilinya

    2.2 Mendefinisikan Inline Image


     Inline image dapat diletakkan pada suatu dokumen HTML dengan menggunakan tag
    tunggal <IMG>. Sintaks umum untuk menampilkan inline image adalah <IMG SRC =
    “URL_gambar”>.
     Dimana SRC merupakan atribut yang digunakan untuk menentukan sumber dari inline
    image dan URL_ gambar adalah lokasi dari sumber inline image yang akan ditampilkan.
    Contoh inline image :
    Nama File : Inline.html
    <!-- Dokumen HTML 18 -->
    <HTML><HEAD><TITLE>Inline Image</TITLE></HEAD>
    <BODY>
    <H2>Inline Image</H2>
    Inline image adalah suatu gambar yang muncul di dalam
    <BR>teks pada suatu halaman web, seperti gambar berikut
    <BR><BR><IMG SRC="cloud.gif">.
    </BODY></HTML>

    Tampilan kode HTML di atas :


    2.3 Membuat Link Dengan Gambar
    Gambar dapat berfungsi sebagai link jika digunakan bersama-sama dengan tag <A>. Jika
    gambar diklik, maka link akan menuju ke informasi yang diberikan pada tag <A>. Contoh :

    Nama File : linkimage.html


    <!-- Dokumen HTML 19 -->
    <HTML>
    <HEAD>
    <TITLE>Link Teks dan Gambar</TITLE>
    </HEAD>
    <BODY>
    Berbagai macam variasi link:
    <UL>
    <LI><A HREF="belajar.html">Cloud</A> <P>
    <LI><A HREF="belajar.html"><IMG SRC="cloud.gif" height = 30px></A><P>
    <LI><A HREF="belajar.html"><IMG SRC="cloud.gif" height = 30px>Cloud</A><P>
    </UL>
    </BODY>
    </HTML>

    Tampilan kode HTML di atas :

    2.4 Mendefinisikan External Image


    External image dinyatakan melalui link. Jika link ini diklik, maka gambar dari external image
    yang diwakili oleh link tersebut akan ditampilkan. Contoh :

    Nama file : External.html


    <!-- Dokumen HTML 20 -->
    <HTML>
    <HEAD>
    <TITLE>External Image</TITLE>
    </HEAD>
    <BODY>
    <A HREF="cloud.gif"> Cloud (12 KB) </a>
    <BR><BR>
    Link tersebut jika diklik akan menghasilkan gambar
    "cloud.gif".
    </BODY>
    </HTML>

    Tampilan kode HTML di atas :

    2.5 Kriteria Pemilihan Gambar

    a. GIF (Graphics Interchange Format);


     Warna 8 bit (256), tidak digunakan untuk menyimpan file gambar berupa foto
    karena lebih dari 256 warna.
     Tidak cocok untuk gambar yang mengandung garis
     Jenis file GIF terdiri dari :
     Interlacing, gambar dapat terlihat dalam band (pita), gambar dapat ditampilkan
    secara bertahap tidak perlu harus semua file terkirim terlebih dahulu
     Transparent, background gambar transparent
     Animated, beberapa gambar disatukan, ditampilkan secara bergantian menjadi
    seperti animasi

    b. JPEG (Joint Photographics Experts Group);


     Warna terdiri dari 24 bit, dioptimasi untuk menyimpan file gambar berupa foto, hasil
    seni natural, dan bahan yang menyerupai dengan kompresi (4:1).
     Digunakan untuk membuat warna grayscale
     Tidak cocok untuk gambar yang mengandung garis atau gambar dengan sisi yang
    tajam
     Jenisnya terdiri dari :
     Progressive JPEG – mirip seperti interlacing GIF
     Optimasi gambar dengan mengurangi jumlah warna
     Gunakan thumbnails, yaitu membuat gambar dengan ukuran kecil yang mewakili
    gambar besar yang sebenarnya
     Blur image sebelum membuat lebih kecil
     Tambahkan teks ke dalam gambar yang telah dikonversi ke dalam format 256 warna

    c. Animated GIF;
     adalah sebuah format file gambar gif
     Di dalamnya tersimpan beberapa gambar gif yang disatukan dalam satu file,
     File ini dibuat untuk membuat gambar yang bisa bergerak (animasi).
    Kerjakan soal-soal dibawah ini :
    1. Kerjakan contoh latihan diatas : Inline.html;
    External.html; linkimage.html

    Kerjakan kode-kode html dibawah ini :

    2. Nama File : menu.html

    Nama File : left.html

    3. Nama File : right.html


    4. Nama File : middle.html

    Anda mungkin juga menyukai