Scribd Logo
Unggah

Selamat datang di Scribd!

  • SESI 4 - Image

    Diunggah oleh

    Adnani Ihsan
    10 tayangan5 halaman

    Judul Asli

    SESI 4_Image

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

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

    SESI 4 - Image

    Diunggah oleh

    Adnani Ihsan

    Hak Cipta:

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

    IMAGE HTML

    Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung suatu
    web site. Umumnya web site dilengkapi dengan gambar-gambar untuk membuat
    orang tertarik untuk melihat dan membaca isi yang ada di suatu web site.
    Untuk menyertakan sebuah image harus meligat dulu jenis format gambarnya,
    contoh perintah menyisipkan gambar format jpg : <img src=”nama gambar.format
    gambar”>. Dan jika gambar ingin dijadikan background halaman keseluruhan, input
    nama gambar dan formatnya didalam attribut background
    Contoh : <body background=“Koala.jpg”>
    Kita harus menambahkan 2 atribut tambahan untuk memberi tahu browser web
    ukuran image yang harus ditampilkan dalam browser. Atribut tersebut adalah height
    untuk menyatakan tinggi gambar dan width untuk mendefinisikan ukuran lebar
    dengan nilai dalam pixel/px. Contoh :

    Langkah-langkah memasukan
    gambar pada halaman WEB
    1. Copy gambar yang diinginkan
    2. Paste gambar tersebut di lokasi file notepad di simpan (satu folder)
    3. Input nama gambar pada attribut src harus sesuai besar kecil hurufnya
    4. Sertakan format gambar setelah nama gambar diinput didahulukan dengan,
    Misal : <img src=“gambar1.jpg”>
    IMAGE HTML

    Beberapa attribut pada perintah tag elemen gambar :

    Width : Untuk mengatur tinggi gambar


    Height : Untuk mengatur lebar gambar
    Alt : alternate – tulisan yang akan muncul jika kursor
    berada diatasnya
    Class : pilih Class jika menggunakan definisi CSS.
    Map : jika image digunakan sebagai link
    V Space : jarak image dari tulisan atasnya
    H Space : jarak image dari tulisan disampingnya.
    Border : tebal bingkai image
    Align : letak posisi image – Right | Left | Center
    IMAGE HTML
    Penyisipan gambar terdiri dari 3 cara :
    1. Menyisipkan gambar pada folder yang sama
    2. Menyisipkan gambar pada direktori yang berbeda
    3. Menyisipkan gambar melalui alamat website yang lain

    Contoh perintah penyisipan gambar Gambar Koala dalam folder yang sama
    dengan 3 cara tersebut : Hasil di browser

    Gambar tulips dari folder yang berbeda Gambar unidra dari www.unindra.ac.id
    Gambar penguins dari folder yang sama
    IMAGE HTML
    TUGAS 4

    Buatlah 1 Halaman WEB menampilkan gambar seperti contoh yang ada pada slide 4
    (gambar yang kalian buat bebas yaitu dengan tema foto keluarga anda) dengan
    ketentuan :
    1. Judul teks halaman “Menampilkan gambar keluarga saya” yaitu teksnya bergerak
    bolak balik dengan kecepatan 11, jenis huruf forte berukuran 6 dan berwarna
    yellow
    2. Ada 4 gambar bebas yang tampil dalam halaman web tersebut, yaitu :
     Gambar 1 sebagai background halaman web
     Gambar 2 berada di kiri dengan ukuran lebar=120 piksel dan tinggi= 100 piksel
     Gambar 3 berada tepat ditengah halaman dengan ukuran lebar=120 piksel dan
    tinggi= 100 piksel
     Gambar 4 berada di kanan dengan ukuran lebar=120 piksel dan tinggi= 100 piksel
    3. Terdapat 3 garis berwarna pink sebagai pemisah antara gambar 2,3 dan 4 dengan
    ukuran 5

    Buat folder dengan nama : tugas4_HTML


    Nama File notepad dalam folder tersebut adalah : NPM_tugas4.html

    Kirim dalam bentuk RAR dengan nama file RAR : kelas_NPM_tugas4


    Didalam RAR tersebut terdapat (folder,1file notepad dan 4 gambar)

    Anda mungkin juga menyukai