Senin, 22 Februari 2021

HTML #8 : Menampilkan Gambar

By Rado Simarmata   04.15 // No comments

 

Pada artikel kali ini, kita akan mempelajari bagaimana caranya memasukkan gambar di HTML. Gambar dapat kita tambakan di HTML dengan menggunakan tag <img>. Tag ini memiliki atribut wajib, yakni src. Jika kita tidak mengisi atribut src, maka gambar tidak akan ditampilkan. Alamat URL gambar pada atribut src dapat berupa URL maupun alamat path. Lalu tag <img> harus ditutup dengan menambahkan garis miring.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML#8</title>
</head>
<body>
  <h1>Menampilkan Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="Sawah.jpg" />
  </p>
</body>
</html>
Hasilnya :

Pada contoh di atas, kita menuliskan langsung nama file dari gambar. Ini karena kita menaruh gambar di dalam folder yang sama dengan file HTML. Apabila file gambarnya tersimpan di folder yang berbeda, maka kita hanya perlu menuliskan alamat path-nya.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML#8</title>
</head>
<body>
  <h1>Menampilkan Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="images/Sawah.jpg" />
  </p>
</body>
</html>
Hasilnya :
Hasilnya akan sama seperti yang di awal kita buat.
Untuk menampilkan gambar dari internet atau yang sudah diupload, kita tinggal menambahkan link atau url lengkap dari gambar terserbut.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML#8</title>
</head>
<body>
  <h1>Menampilkan Gambar di HTML</h1>
  <p>Berikut ini adalah gambar Danau Toba:</p>
  <p>
    <img src="https://i.ibb.co/pbNFYR2/danau-toba-169.jpg" />
  </p>
</body>
</html>
Hasilnya :

Atribut Tag <img>

Ada beberapa atribut yang sering digunakan pada tag <img>:

Atribut alt

Atribut alt adalah atribut untuk memberikan teks alternatif pada gambar saat gambar gagal ditampilkan.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML#8</title>
</head>
<body>
  <h1>Menampilkan Gambar di HTML</h1>
  <p>Berikut ini adalah gambar Danau Toba:</p>
  <p>
    <img src="" alt="danautoba" />
  </p>
</body>
</html>
Hasilnya :
Pada contoh tersebut, kita sengaja mengosongkan nilai atribut src. Akibatnya gambar gagal ditampilkan dan yang akan digampilkan adalah teks alternatif.

Atribut width dan height

Atribut width dan height adalah atribut yang digunakan untuk menentukan lebar dan tinggi dari gambar.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML#8</title>
</head>
<body>
  <h1>Menampilkan Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="images/Sawah.jpg" width="200" height="150" alt="Sawah"/>
    <img src="images/Sawah.jpg" width="150" height="100" alt="Sawah"/>
    <img src="images/Sawah.jpg" width="50" height="50" alt="Sawah"/>
  </p>
</body>
</html>
Hasilnya :

Satuan yang digunakan untuk nilai width dan height adalah piksel (px). Jika kita memberikan nilai 200, artinya kita memberikan nilai 200px.

Atribut style

Atribut style merupakan atribut untuk menambahkan style CSS pada sebuah elemen. Atribut ini sering digunakan pada gambar untuk memberikan style atau efek tertentu.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML#8</title>
</head>
<body>
  <h1>Style Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <img src="images/Sawah.jpg" style="width: 160px;border: 3px solid red;" />
    <img src="images/Sawah.jpg" style="width: 160px;border-radius: 10px;" />
    <img src="images/Sawah.jpg" style="width: 100px;height: 100px;border-radius: 100%;" />
  </p>
</body>
</html>
Hasilnya :

Gambar pertama kita berikan style garis (border) dengan ukuran 3px, jenis solid, dan warnanya adalah merah. Lalu gambar kedua, kita berikan style border-radius untuk menciptkan lengkungan pada pojok gambar. Pada gambar ketiga, kita berikan nilai 100% pada border-radius yang akan menciptkan lingkaran.

Membuat Gambar Background

Agar gambar bisa ditampilkan sebagai background, maka kita harus menggunakan CSS dengan atribut background-image lalu diisi dengan URL dari gambar.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML#8</title>
</head>
<body style="background-image: url(images/Sawah.jpg);">
  <h1>Background dengan Gambar</h1>
  <p>Halaman ini menggunakan gambar sebagai background</p>
</body>
</html>
Hasilnya :

Membuat Link dengan Gambar

Cara membuat link dengan gambar adalah dengan menggabungkan tag <a> dan tag <img>. Tag <a> harus mengapit tag <img>.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML#8</title>
</head>
<body>
  <h1>Gambar Sebagai Link</h1>
  <p>Coba klik gambar ini:</p>
  <p>
    <a href="https://radohtsimarmata.blogspot.com/">
      <img src="images/Sawah.jpg" width="160"/>
    </a>
  </p>
</body>
</html>
Hasilnya :

Tag <figure>

Tag figure berfungsi untuk membungkus tag <img> atau gambar dengan teks caption. Teks caption adalah teks yang menjelaskan tentang gambar. Teks caption bisa dibuat dengan tag <figcaption>.
Contoh :
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML#8</title>
</head>
<body>
  <h1>Menampilkan Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>
    <figure>
      <img src="images/Sawah.jpg" width="300" alt="Sawah"/>
      <figcaption>Landscape sawah dan langit</figcaption>
    </figure>
  </p>
</body>
</html>
Hasilnya :


Tag <picture>

Tag <picture> ini berfungsi untuk menentukan gambar mana yang akan ditampilkan pada ukuran layar tertentu.
Contoh :
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Contoh Gambar di HTML</title>
</head>

<body>
  <h1>Menampilkan Gambar di HTML</h1>
  <p>Berikut ini adalah gambar sawah:</p>
  <p>

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

  </p>
   
</body>
</html>
Hasilnya :

Format File Gambar untuk HTML

Nama FormatNama PanjangEkstensi
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg
WebPWeb Picture.webp

HTML #7 : Text Formating HTML

By Rado Simarmata   03.05 // No comments

 

Text formatting yaitu melakukan pengaturan / konfigurasi pada teks yang akan dijadikan isi dari sebuah halaman web. Pengaturan tersebut akan terlihat secara real, sehingga apa yang diinputkan pada dokumen HTML akan diperlihatkan oleh web browser.

HTML #6 : Heading HTML

By Rado Simarmata   02.29 // No comments

Heading adalah sebuah judul yang biasanya diberikan pada halaman atau beberapa bagian dari artikel.

Cara membuat Heading di HTML

Judul pada HTML dapat kita buat dengan tag <h1> sampai <h6>. Tag <h1> digunakan pada judul level pertama. Lalu tag lainnya digunakan pada sub heading atau level berikutnya. Masing-masing judul akan ditampilkan dengan ukuran teks yang bebeda. Tag <h1> adalah yang paling besar, dan tag <h6> paling kecil.

HTML #5 : Membuat Paragraf

By Rado Simarmata   02.01 // No comments

 

Paragraf HTML

Paragraf adalah kumpulan dari beberapa kalimat. Pada web, Paragraf biasanya digunakan untuk menampilkan teks atau artikel.Paragraf pada HTML dibuat dengan tag <p>. Selain tag ini, ada juga tag pendukung lain seperti <div>, <hr>, <br>, dan <pre>.

Minggu, 21 Februari 2021

HTML #4 : Elemen HTML

By Rado Simarmata   23.58 // No comments

 


Elemen dalam HTML adalah sebuah komponen yang menyusun dokumen HTML. Elemen kadang juga disebut sebagai node, karena ia merupakan salah satu jenis node yang menyusun dokumen HTML dalam diagram HTML tree.
Langganan: Postingan (Atom)