Tutorial Tutorial HTML

Tutorial HTML Image: Menambahkan Gambar di HTML

/ by | Leave a comment

Tutorial HTML

Gambar sangat penting dalam sebuah halaman web. Gambar bisa membuat website Anda menjadi lebih menarik dan dapat menyederhanakan sebuah konsep yang kompleks. Pada tutorial ini akan dibahas secara detail bagaimana menambahkan gambar ke halaman HTML beserta fitur apa saja yang berkaitan dengan gambar.

Menambahkan Gambar di HTML

Menambahkan gambar pada di HTML bisa menggunakan tag <img>. Gunakan atribut src untuk mengatur nama file gambar yang disisipkan. Gambar tidak dimasukkan langsung ke halaman web, tetapi masih terhubung dengan lokasi file aslinya. Tag <img> hanya memiliki atribut tidak terdapat isi dan tutup tag.

<!DOCTYPE html>
<html>

<head>
    <title>Image</title>
</head>

<body>
    <img src="html-logo.png">
</body>

</html>

Hasilnya:

HTML Image

Atribut alt pada tag <img>

Atribut alt dan src bersifat required (harus diisi). Browser akan menampilkan nilai pada atribut alt jika gagal menampilkan gambar, baik karena koneksi terputus maupun jika gambar tidak ditemukan.

<!DOCTYPE html>
<html>

<head>
    <title>Image Alt</title>
</head>

<body>
    <img src="images/tidak-ada.png" alt="Logo HTML">
</body>

</html>

Hasilnya:

HTML Image Alt

Mengatur Tinggi dan Lebar Gambar

Gunakan atribut height dan width untuk mengatur tinggi dan lebar gambar. Jika mengisi salah satu saja, maka gambar akan dibuat proporsional sesuai rasio aslinya.

<!DOCTYPE html>
<html>

<head>
    <title>Image Width Height</title>
</head>

<body>
    <img src="images/html-logo.png" alt="Logo HTML" width="200" height="150">
    <img src="images/html-logo.png" alt="Logo HTML" width="100">
    <img src="images/html-logo.png" alt="Logo HTML" height="50">
</body>

</html>

Hasilnya:

HTML Image Width Height

Sebagai alternatif, mengatur ukuran gambar bisa menggunakan inline CSS style="width: 200px; height: 100px" pada tag <img>.

Gambar di folder yang Berbeda

Lokasi gambar sebaiknya disimpan di direktori yang sama dengan file html. Terkadang ada beberapa gambar yang Anda tambahkan ke website, sehingga perlu mengelompokkannya ke dalam sebuah direktori lagi. Misal struktur direktori seperti berikut:

HTML Image Folder

Maka dalam atribut src diganti menjadi:

<!DOCTYPE html>
<html>

<head>
    <title>Image Folder</title>
</head>

<body>
    <img src="images/html-logo.png">
</body>

</html>

Jika ingin membuat nama sub direktori lagi untuk gambar, tinggal menambahkan nama direktorinya diikuti "/" misal src="images/html/html-logo.png".

Gambar dari Website yang Berbeda

Jika ingin menampilkan gambar dari server atau website lain, pada atribut src harus ditulis lengkap nama domain dan protokolnya. Misalnya:

<!DOCTYPE html>
<html>

<head>
    <title>Image Website</title>
</head>

<body>
    <img src="https://www.tugasakhir.id/html-logo.png">
</body>

</html>

Menambahkan Gambar Animasi

Anda bisa memasukkan gambar dengan format GIF ke dalam tag <img>.

<!DOCTYPE html>
<html>

<head>
    <title>Image GIF</title>
</head>

<body>
    <img src="images/computer.gif" alt="Logo HTML" style="height: 200px">
</body>

</html>

Hasilnya:

HTML Image GIFF

Format File Gambar di HTML

Berikut adalah beberapa format gambar yang bisa dimasukkan ke dalam HTML yang didukung oleh semua browser (Chrome, Edge, Firefox, Safari, Opera).

Singkatan Format File Ekstensi File
APNG Animated Portable Network Graphics .apng
GIF Graphics Interchange Format .gif
ICO Microsoft Icon .ico, .cur
JPEG Joint Photographic Expert Group image .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG Portable Network Graphics .png
SVG Scalable Vector Graphics .svg

Mengatur Gambar sebagai Latar

Gambar bisa dijadikan sebagai latar belakang (background) hampir di semua tag HTML. Gunakan properti CSS background-image untuk mengisi latar dengan gambar.

<!DOCTYPE html>
<html>

<head>
    <title>Image Background</title>
</head>

<body>
    <p style="background-image: url('images/html-logo.png');">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. A iusto voluptas odio quasi! Facilis ad explicabo dolor
        eos atque repellat provident. Aperiam harum ex quisquam voluptatum minima porro culpa nesciunt. Lorem, ipsum
        dolor sit amet consectetur adipisicing elit. Impedit maxime illo tempore laboriosam ex voluptatibus quam,
        ducimus minima ea temporibus numquam qui rem blanditiis similique. Eaque necessitatibus consectetur commodi.
        Vitae.
    </p>
</body>

</html>

Hasilnya:

HTML Image Background

Untuk mengetahui lebih lanjut tentang mengatur latar gambar dengan CSS, bisa dilihat di Tutorial CSS Background.

Membuat Link dengan Gambar

Untuk membuat gambar sebagai link, masukkan tag <img> dalam tag <a>.

<!DOCTYPE html>
<html>

<head>
    <title>Image Link</title>
</head>

<body>
    <p>Klik gambar berikut untuk membuka halaman lain di tab baru.</p>
    <a href="https://tugasakhir.id" target="_blank">
        <img src="images/html-logo.png" style="height: 50px;">
    </a>
</body>

</html>

Hasilnya:

HTML Image Link

Membuat Link di Bagian Gambar

Gunakan tag <map> dan <area> untuk membuat bagian tertentu dari gambar bisa diklik. Anda bisa menambahkan lebih dari satu tag <area> untuk mendefinisikan bagian-bagian dalam satu gambar.

<!DOCTYPE html>
<html>

<head>
    <title>Image Map</title>
</head>

<body>
    <img src="images/tempat-kerja.jpg" alt="Tempat Kerja" usemap="#map">
    <map name="map">
        <area shape="rect" coords="34,44,270,350" alt="Komputer" href="https://id.wikipedia.org/wiki/Komputer">
        <area shape="rect" coords="290,172,333,250" alt="Telepon Genggam"
            href="https://id.wikipedia.org/wiki/Telepon_genggam">
        <area shape="circle" coords="337,300,44" alt="Kopi" href="https://min.wikipedia.org/wiki/Kopi">
    </map>
</body>

</html>

Hasilnya:

Tempat Kerja Komputer Telepon Genggam Kopi

Coba klik gambar kopi, laptop atau telepon genggam di gambar.

Gambar Float (Mengambang)

Gunakan CSS float untuk menempatkan gambar di kiri atau kanan teks.

<!DOCTYPE html>
<html>

<head>
    <title>Image Float</title>
</head>

<body>
    <p style="text-align: justify;">
        <img src="images/html-logo.png" style="float:left; height: 50px">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate eaque, dolorem, a recusandae earum animi
        repudiandae deleniti dolore culpa tempora repellendus cum placeat commodi perspiciatis quasi ullam impedit.
        Perspiciatis, vero.
    </p>
    <p style="text-align: justify;">
        <img src="images/html-logo.png" style="float:right; height: 50px">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum ad pariatur ea voluptas aliquid, culpa beatae sint
        fugiat ut dolore molestiae enim, autem saepe suscipit. Amet dolore rerum blanditiis vero.
    </p>
    <p style="text-align: justify;">
        <img src="images/html-logo.png" style="height: 50px">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate eaque, dolorem, a recusandae earum animi
        repudiandae deleniti dolore culpa tempora repellendus cum placeat commodi perspiciatis quasi ullam impedit.
        Perspiciatis, vero.
    </p>
    <p style="text-align: justify;">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum ad pariatur ea voluptas aliquid, culpa beatae sint
        fugiat ut dolore molestiae enim, autem saepe suscipit. Amet dolore rerum blanditiis vero.<img
            src="images/html-logo.png" style="height: 50px">
    </p>
</body>

</html>

Hasilnya:

HTML Image Float

Pada gambar di atas perbandingan gambar yang menggunakan float dan tidak. Paragraf pertama float: left, paragraf kedua float: right, paragraf 3 dan 4 tanpa float.

Tag <figure> untuk Gambar

Gunakan tag <figure> dan <figcaption> untuk membungkus gambar dan captionnya menjadi satu. Caption adalah teks singkat yang berisi informasi tentang gambar.

<!DOCTYPE html>
<html>

<head>
    <title>Image Figure</title>
</head>

<body>
    <h1>HTML 5</h1>
    <figure>
        <img src="images/html-logo.png" height="300">
        <figcaption>Hypertext Markup Language (HTML) adalah bahasa markah standar untuk dokumen yang dirancang untuk
            ditampilkan di peramban internet.</figcaption>
    </figure>
</body>

</html>

Hasilnya:

HTML Image Figure

Tag <picture> untuk Gambar

Tag <picture> membuat kita lebih mudah dalam menentukan pilihan gambar yang mana yang akan ditampilkan. Tag <picture> bisa terdiri dari satu atau lebih tag <source>. Browser akan menampilkan gambar yang paling sesuai dengan view/device yang digunakan.

<!DOCTYPE html>
<html>

<head>
    <title>Image Picture</title>
</head>

<body>

    <picture>
        <source media="(min-width: 650px)" srcset="images/workspace-lg.png">
        <source media="(min-width: 450px)" srcset="images/workspace-sm.png">
        <img src="images/workspace.png">
    </picture>

</body>

</html>

Hasilnya:

HTML Image Picture

Alasan kenapa menggunakan tag <picture> adalah:

  • Bandwidth, jika pengunjung menggunakan device yang kecil, tidak perlu untuk memuat gambar yang besar. Browser akan menampilkan <source> pertama sesuai dan mengabaikan <source> yang lain.
  • Dukungan Format, beberapa browser atau device mungkin tidak mendukung gambar yang ditampilkan, sehingga perlu memberikan beberapa alternatif pilihan <source> dengan format yang berbeda-beda.

Kesimpulan

Kesimpulan dalam Tutorial HTML Gambar ini adalah:

  • Gunakan tag HTML <img> untuk menambahkan gambar
  • Gunakan atribut HTML src untuk mengisi lokasi gambar
  • Gunakan atribut HTML alt untuk mengisi tulisan jika gagal memuat gambar
  • Gunakan atribut HTML height dan width untuk mengatur ukuran gambar
  • Tambahkan nama direktori diikuti "/" jika menaruh gambar di dalam direktori
  • Gunakan alamat web lengkap dengan domain dan protokol jika menampilkan gambar dari luar server atau website
  • Gunakan format GIF jika ingin menampilkan gambar animasi
  • HTML mendukung gambar dengan format APNG, GIF, ICO, JPEG, PNG dan SVG
  • Gambar bisa digunakan sebagai latar menggunakan CSS background-image
  • Tambahkan HTML tag <img> dalam tag <a> jika ingin link berupa gambar
  • Gunakan HTML tag <map> dan <area> untuk membuat bagian tertentu gambar bisa diklik
  • Gunakan properti CSS float untuk membuat posisi gambar mengambang (float)
  • Gunakan HTML tag <figure> dan <figcaption> untuk menambahkan caption pada gambar
  • Gunakan HTML tag <picture> dan <source> untuk memberikan pilihan browser dalam menampilkan gambar dengan berbagai situasi dan format

Apa berikutnya?

Untuk berikutnya kita akan membahas tentang Tutorial HTML List : Membuat Daftar di HTML atau cek semua daftar Tutorial HTML.

Leave a Comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses

To top