Media Belajar Bahasa Pemrograman | by APPKEY

HTML/CSS Tutorial HTML/CSS 7 : Cara Memasukkan dan Memodifikasi Gambar...

Tutorial HTML/CSS 7 : Cara Memasukkan dan Memodifikasi Gambar di HTML

-

Gambar menjadi salah satu komponen penting dalam suatu website atau konten online tertentu untuk membuat website maupun konten tersebut menarik.

Pada artikel kali ini kami akan membahas tentang cara memasukkan atau memodifikasi gambar khususnya di HTML. Ada beberapa cara untuk menyematkan gambar di HTML yang akan kami bahas pada tutorial berikut ini.

Menggunakan Tag Gambar HTML

Untuk mendefinisikan gambar HTML Anda perlu menggunakan <img> tag:

<img src="gambar-kucing1.jpg" alt="Kucing" width="150" height="150">

Anda juga dapat menggunakan tag image HTML untuk menganimasikan gambar dengan ekstensi .gif:

<img src="cutecat1.gif" alt="GIF Kucing" style="width: 100px; height: 100px;">

Perlu Anda ingat bahwa image HTML hanya dapat mengatribusikan dan tidak ada konten yang pasti. Hal ini berarti, ia mendefinisikan sebuah elemen kosong dan tidak membutuhkan tag penutup.

Artikel Terkait  Tutorial HTML/CSS 9 : Cara Membuat Table di HTML untuk Pemula

Gambar HTML Interaktif

Sebuah gambar juga dapat bertindak sebagai link jika Anda menempatkan tag gambar HTML di dalam sepasang tag anchor.

<a href="index.html">
<img src="space-view1.jpg" alt="Index Image Link" style="width: 105px; height: 105px;">
</a>

Perlu Anda pehatikan bahwa dalam kasus ini Anda perlu memasukan dua alamat URL yang merupakan sumber dari gambar dan URL yang baru untuk terhubung dengan user.

Gambar Peta di HTML

Satu gambar dapat berisikan banyak area yang dapat diklik dengan link berbeda-beda. Hal ini disebut dengan HTML image map atau gambar peta HTML. Untuk mendefinsikan salah satunya, Anda perlu menggunakan tag <map>:

<img src="homepage.jpg" width="500" height="500" alt="Image" usemap="#newmap">

<map name="newmap">
  <area shape="circle" coords="200, 100, 50" alt="Google" href="https://www.google.com">
  <area shape="rect" coords="145, 88, 213, 200" alt="Facebook" href="http://www.facebook.com">
  <area shape="circle" coords="300, 150, 22" alt="Instagram" href="http://www.instagram.com">
</map>

Sebuah gambar HTML membuat area yang dapat diklik pada gambar HTML secara spesifik.  Untuk mengkoneksikan gambar peta ke gambar yang tepat, Anda harus terlebih dahulu menentukan nama untuk peta tersebut, lalu memasukkannya sebagai nilai untuk atribut peta pengguna dalam tag gambar HTML.

Untuk menentukan area yang dapat diklik dalam peta gambar, Anda perlu menggunakan elemen <area> sebagai anak dari elemen <map>:

<img src="home.jpg" alt="Home image" usemap="#indexmap" style="width: 200px; height: 200;">

<map name="indexmap">
  <area shape="circle" coords="100, 50, 82" alt="test" href="home.html">
  <area shape="circle" coords="95, 80, 30" alt="test-2" href="home.html">
</map>

Dimensi dan Penempatan Gambar

html

Untuk mengubah lebar dan tinggi image HTML Anda, Anda memerlukan beberapa gaya CSS dasar. Gunakan atribut style dan tentukan properti lebar dan tinggi dalam piksel:

<img src="home.jpg" alt="Home image" style="width: 500px; height: 500px;">

HTML5 memperkenalkan atribut width dan height yang terpisah. Artinya, Anda dapat memodifikasi dimensi tanpa menggunakan atribut style. Namun, kami sarankan untuk tetap menggunakan style, karena menggunakan inline styling menyelamatkan Anda dari lembar gaya lain yang memengaruhi gambar Anda dalam HTML. Sebagai contoh:

<img src="Banner1.jpg" alt="Banner 1 Image" style="width: 250px; height: 250px;">
<img src="Banner2.jpg" alt="Banner 2 Image" width="250" height="250">

Menggunakan atribut style membuat Anda dapat juga mengatur gambar agar muncul dari kanan ke kiri. Hal ini berarti gambar tersebut akan menempel pada salah satu sisi dan akan tetap berada di sana.

<img src="cutecat2.jpg" alt="Cat image on right" style="float: right; width: 100px; height: 100px;">
 Image float set: right
<img src="cutecat3.jpg" alt="Cat image on left" style="float: left; width: 100px; height: 100px;">
 Image float set: left

Berbagai Atribut HTML yang Sering Digunakan

Alt

Atribut Alt berguna untuk mengatur teks alternatif untuk ditampilkan jika gambar tidak dapat ditampilkan. Anda dapat memberi nama atau mendeskripsikan gambar HTML untuk memberikan gambaran kepada pengguna tentang seperti apa gambar yang akan Anda tampilkan:

<img src="home.jpg" alt="Home image" style="width: 100px; height: 100px;">

Src

Atribut src mendefinisikan sumber tempat gambar tersebut diambil. Gambar HTML bisa ditempatkan di berbagai folder dari website Anda. Tag <img> harus memiliki atribut src dengan jalur yang benar ke folder tertentu agar gambar Anda ditampilkan:

Sebagian besar file image HTML juga dapat diakses melalui alamat URL langsung. Untuk mengunggah gambar dari server lain, Anda perlu memasukkan alamat URL di atribut src:

Artikel Terkait  Tutorial HTML/CSS 16 : Menambahkan Variasi Text Khusus dengan Text Formatting

Usemap

Dengan menggunakan usemap, Anda dapat mengkoneksikan gambar Anda dengan elemen <map> untuk mendefinsikan gambar map:

<img src="home.jpg" alt="Home image" usemap="#homemap" style="width: 150px; height: 150px;">

<map name="homemap">
  <area shape="rect" coords="30, 50, 74, 106" alt="about" href="about.html">
  <area shape="rect" coords="90, 55, 110, 110" alt="profile" href="profile.html">
</map>

Height

Atribut height ini berguna untuk mengatur ketinggian gambar Anda pada HTML:

Width

Atribut width mendefinisikan width dari gambar Anda di HTML:

<img src="Homepage.png" alt="Homepage" width="100" >

Style

Atribut style ini memudahkan Anda untuk mengaplikasikan inline stye untuk gambar di HTML:

<img src="homepage.png" alt="Homepage" style="height: 100px; width: 100px;">

Beberapa yang harus dilakukan ketika menerapkan gambar HTML:

  1. Ketika memodifikasi dimensi dari gambar ingatlah simbol px harus dimasukan dalam atribut style tapi bisa dihilangkan dalam height dan width.
  2. Pilih nama untuk gambar HTML Anda dengan bijak. Mesin pencari yang akan mempertimbangkannya, jadi nama yang lebih jelas dapat membantu meningkatkan kemudahan situs Anda untuk ditemukan.

Demikianlah penjelasan tentang cara memasukan dan memodifikasi gambar menggunakan HTML. Jika Anda tertarik untuk belajar lebih banyak tentang HTML maupun bahasa pemrograman yang lain, simak terus artikel-artikel kami selanjutnya.


Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial Swift 2 : Tahap Awal Persiapan dan Mengatur Lingkungan Kerja pada Swift

Setelah Anda mengenal bahasa pemrograman Swift 4, langkah selanjutnya adalah Anda perlu memulai pemrograman Swift 4 dengan cara install...

Tutorial Javascript 1 : Pengenalan Javascript untuk Pemula

Ada banyak sekali jenis bahasa pemrograman yang bisa Anda pelajari untuk menjadi seorang programmer profesional. Salah satunya adalah belajar...

Tutorial Javascript 6 : Cara Membuat Event pada Javascript

Event JavaScript adalah tindakan atau proses khusus yang terjadi dalam program atau situs web yang akan Anda kembangkan. Anda...

Tutorial Javascript 2 : Tahap Awal Cara Mudah Menulis Kode di Javascript

Kembali lagi di seri belajar Javascript bersama Codekey! Setelah di postingan sebelumnya Anda belajar Javascript terkait konsep-konsep dasarnya, kini...

Tutorial Dart 1 : Pengenalan Bahasa Pemrogaman Dart untuk Pemula

Halo pembaca setia Codekey! Belajar pemrograman saat ini menjadi keharusan bagi semua orang yang ingin berkarir sebagai programmer, hal...

Tutorial HTML/CSS 3 : Pengenalan Elemen Dasar di HTML

HTML adalah bahasa Markup yang terdiri dari elemen dan tag. Artikel ini akan memberi penjelasan kepada Anda tentang elemen-elemen...

Tutorial Dart 3 : Belajar Menggunakan Syntax atau Perintah dasar Dart

Setelah mengatur lingkungan kerja serta instalasi Dart ke dalam sistem operasi yang kalian miliki, dalam pembuatan suatu program baik...

Tutorial HTML/CSS 1 : Pengenalan HTML untuk Pemula

Jika Anda seorang pemula dalam dunia coding dan ingin mengetahui atau belajar HTML dasar, maka artikel ini akan cocok...

Tutorial Javascript 9 : Cepat dan Mudah Cara Mengurutkan Data Array di Javascript

Pada artikel sebelumnya Anda mungkin telah membaca dan mempelajari tentang Array di JavaScript. Pada artikel kali ini, kami akan...

Tutorial Python 7 : Tutorial Dasar Cara Mengoperasikan String pada Python

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya