Cara menggunakan 250 tag html

Question

HTML Fadlullah Fadul December 3, 2018

Table of Contents Show

Deskripsi Penjelasan HTML img (image) tag
Attributes Atribut HTML Tag <img>
Global Attributes Atribut Secara Global (Keseluruhan)
Event Attributes Atribut event (Peristiwa)
Contoh Memasukkan image (gambar) di dalam HTML
Contoh Lengkap
Contoh 2 Link dengan image (gambar)
Bagaimana cara penulisan tag HTML yang benar?
Tag tag HTML apa saja?
Apa fungsi tag title pada HTML?
Apa fungsi dari tag I?

Referensi belajar HTML image (img) tag. Tutorial dan panduan mengenai element <img /> yang digunakan untuk memasukkan gambar di dalam dokumen HTML. Mencakup pembahasan lebih detail dan lengkap yang disertai contoh kode penggunaan sebagai rujukan untuk materi belajar HTML elemen <img> (image).

Deskripsi Penjelasan HTML img (image) tag

img menunjukkan image yang berarti gambar dan oleh karenanya digunakan untuk menyisipkan gambar. Gambar didalam sebuah dokumen HTML tidak dimasukkan sepenuhnya pada file (.html, misalnya) akan tetapi, hanya merujukkan file sumber gambar tersebut berada (disimpan).

img element, ibarat sebuah rumah atau penampung (container) bagi sebuah file gambar (picture). Anda dapat memasukkan file gambar seperti .jpg, .gif dan .png didalam element img dengan merujukkan (link) file gambar tersebut yang di ditulis pada src attribute.

HTML <img> element memiliki beragam attribute yang dapat ditulis sesuai kebutuhan. Akan tetapi, hanya dua attribute yang wajib ditulis pada setiap <img /> element, yaitu src dan alt attribute. src attribute menujukkan sumber file tersebut berada, sedangkan alt menujukkan alternatif text yang akan muncul sebagai pengganti apabila gambar tersebut tidak dapat ditampilkan.

HMTL img element, tidak memiliki tag penutup (end/closing tag), jadi hanya ditulis <img /> bukannya <img></img>.

Attributes Atribut HTML Tag <img>

Menunjukkan sebuah alternate text (teks pengganti) yang akan muncul apabila gambar tidak dapat ditampilkan.

Contoh:

<img src="https://www.apacara.com/logo.png" alt="logo apacara.com" />

tulisan "logo apacara.com" akan muncul apabila gambar logo.png tidak dapat ditampilkan.

Mengijinkan website pihak ketiga untuk memperbolehkan akses cross-origin yang dapat digunakan kembali didalam element <canvas>.

height berarti tinggi, digunakan untuk menentukkan tinggi gambar.

Contoh:

<img src="https://www.apacara.com/logo.png" height="90" alt="" />

menentukkan tinggi gambar logo.png diatas, menjadi 90px. Di dalam HTML, hanya ditulis angka saja tanpa akhiran px.

Menunjukkan bahwa gambar (image) adalah bagian dari gambar peta sisi server (server-side image-map). Jika ditulis, maka koordinat tertentu yang diklik akan dikirim ke server.

Menentukkan daftar ukuran gambar berdasarkan jendela layar browser yang ditampilkan. Melibatkan media query dan ukuran gambar (source-size) yang ingin ditampilkan sesuai kondisi tertentu.

Contoh:

<img src="/media/images/orange.jpg"
  srcset="/media/images/apple.jpg 1024w, /media/images/grape.jpg 640w, /media/images/banana.jpg 320w"
  sizes="(min-width: 900px) 50vw, 100vw"
  alt="">

Lihat hasilnya

Attribute sizes pada contoh diatas, berarti: Apabila layar browser lebih lebar dari 900px, maka ukuran (size) gambar akan ditampilkan 50 persen, atau 50 viewport width (50 persen dari lebar layar). Jika sebaliknya (kurang dari 900px) maka akan ditampilkan 100 (persen) atau sepenuh gambar.

Attribute ini wajib ditulis untuk menentukkan source atau sumber alamat (lokasi) dimana gambar tersebut dimpan (berada).

Contoh:

<img src="/media/images/banana.png" alt="" />

Dari contoh diatas, file gambar yang ingin ditampilkan adalah "banana.png" yang berada pada direktori "media/images/" di website (URL) www.apacara.com .

Memasukkan deretan gambar pilihan yang dapat digunakan oleh browser sesuai kebutuhan atau situasi tertentu (Misalnya, untuk layar kecil, layar dengan resolusi tinggi, dan sebagainya.). Penulisannya, dipisahkan dengan tanda koma (,) per-item gambar.

Contoh:

<img src="gambar-src.png" srcset="gambar-1x.png 1x, gambar-2x.png 2x,
                             gambar-3x.png 3x, gambar-4x.png 4x">

Mengasosiasikan nama dari peta gambar (image map) yang ditulis dengan diawali tanda pagar (#). Attribute ini tidak dapat digunakan apabila <img> ditulis didalam <a> atau <button> element.

width berarti lebar, digunakan untuk menentukkan lebar gambar.

Contoh:

<img src="https://www.apacara.com/logo.png" width="160" alt="" />

menentukkan lebar gambar logo.png diatas, menjadi 160px. Di dalam HTML, hanya ditulis angka saja tanpa akhiran px.

Global Attributes Atribut Secara Global (Keseluruhan)

<img> tag mencakup global attributes, yang artinya tag tersebut dapat disisipkan semua attributes yang termasuk dalam global attributes yang secara umum berlaku untuk semua HTML tags.

Event Attributes Atribut event (Peristiwa)

<img> tag mencakup event attributes, yang artinya attribute tersebut dijalankan ketika ada interaksi dari user atau dalam suatu peristiwa (kejadian). Contoh: menjalankan script (JavaScript) ketika halaman web pada jendela browser hendak ditutup, dan lain sebagainya.

Contoh Memasukkan image (gambar) di dalam HTML

Bagaimana memasukkan gambar dalam HTML?

<img src="https://www.apacara.com/images/anak-lucu.jpg" alt="anak lucu usia 3 tahun" />

Anda dapat memasukkan gambar pada sebuah halaman HTML dengan menggunakan tag <img kemudian diikuti dengan src attribute, tanda =, dan tanda petik ganda (""). Didalam tanda petik ganda merupakan letak file gambar yang ingin kita tampilkan pada halaman web (HTML). Tulis juga alt attribute untuk menentukkan alternatif teks yang mewakili gambar tersebut. Terakhir, yaitu penutup (/>).

Contoh diatas, dapat diedit sendiri dan dilihat hasilnya pada demo editor dibawah ini (klik demo link).

Contoh Lengkap

Contoh source code lengkap disertai dengan link "editor" untuk mencoba (try it) dan melihat hasil (preview) kode.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Demo HTML img tag</title>
    <style>

    </style>
  </head>
  <body>
    <img src="/media/images/mouse.jpg" alt="gambar tikus lucu" />
  </body>
</html>

Contoh 2 Link dengan image (gambar)

Bagaimana membuat link gambar? atau gambar yang dapat diklik dan menuju halaman/website lain.

<a href="http://www.apacara.com">
  <img src="/media/images/apacaracom.png" alt="apacara.com home">
</a>

Untuk membuat link pada sebuah gambar, tulis/tempatkan <img> didalam <a> element.

Jika halaman web Anda menggunakan AMP HTML, maka Anda harus menggunakan <img> tag sebagai ganti HTML <img> tag

Bagaimana cara penulisan tag HTML yang benar?

Tag adalah sebauh penanda awalan dan akhiran dari sebuah elemen di HTML. Tag dibuat dengan kurung siku ( <...> ), lalu di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut. Contoh: <p> , <a> , <body> , <head> , dan sebagainya. Tag selalu ditulis berpasangan.

Tag tag HTML apa saja?

Kode HTML Dasar untuk Blog.

Title Tag. Tag HTML yang pertama yaitu title tag. ... .

Meta Description. Berikutnya, ada meta description. ... .

3. Heading Tag. Heading tag merupakan judul dan sub-judul yang terdapat pada halaman website. ... .

4. Anchor Text dan Link. ... .

Nofollow. ... .

6. Image Alt Text. ... .

7. Tag Kanonikal. ... .

9. Tag Huruf Tebal (Bold).

Apa fungsi tag title pada HTML?

Fungsi title tag adalah sebagai backlink yang akan menghubungkan user kepada situs anda. Title tag pada tampilan mesin pencari akan menarik user untuk mengklik website anda.