Belajar HTML Image, Tables dan Iframes

 

Halo teman-teman pada postingan kali ini, saya akan menjelaskan tentang HTML Images, tables, dan iframes. Pada saat kita membuka suatu website misalnya blog ini pasti kalian melihat gambar yang berkaitan dengan judul artikel. Mungkin ada dari kalian yang belum tahu tentang bagaimana cara menyisipkan gambar ke dalam website. Untuk melakukan hal tersebut kita perlu menuliskan tag <img> pada file HTML yang kita buat. Selain itu masih ada banyak hal-hal menarik yang perlu kita pelajar tentang HTML berikut ini adalah beberapa tag menarik yang sudah saya rangkum:

HTML Images

Seperti yang telah saya singgung sebelumnya bahwa tag <img> digunakan untuk menampilkan gambar pada website. Tag <img> hanya berisi atribut dan tidak memiliki tag penutup. Atribut yang biasa digunakan di dalam tag <img> antara lain: 

• src : digunakan untuk menunjukkan lokasi sumber file gambar berada
• alt : digunakan untuk menampilkan alternatif text yang akan muncul sebagai pengganti apabila gambar tersebut tidak dapat ditampilkan.

Contoh penulisan

<img src=“coba.jpg” alt=“coba”/>

HTML Image Maps

Gambar yang ditampilkan pada website juga dapat kita berikan link pada area tertentu di dalam gambar tersebut. Misalnya kita memiliki gambar kopi dan teh, ketika kita klik gambar kopi kita bisa mengarahkan halaman ke jenis-jenis kopi sedangkan bila kita klik gambar teh maka akan menampilkan jenis-jenis teh. Memberikan link pada area tertentu di gambar atau istilah lainnya Image Map dapat dilakukan dengan menggunakan tag <map>. Tag <map> ini nantinya berkaitan dengan atribut usemap pada tag <img>. Di dalam tag <map> terdapat tag <area> yang digunakan untuk mendefinisikan daerah dalam peta gambar. Berikut adalah contoh penggunaan Image Map:

<img src="map_ex.jpg" usemap="#image-map">
<map name="image-map">
    <area target="" alt="wayang" title="wayang" href="wayang.html" coords="138,244,150,254,122,252,134,228,123,231,104,233,97,221,102,128,134,126,173,116,150,90,160,75,174,71,187,78,190,88,178,79,165,90,175,100,200,92,218,127,208,124,198,124,190,118,184,122,180,219,202,230,179,227,178,137,168,146,171,193,168,228,168,244,182,258,160,249,160,225,153,220,147,226" shape="poly">
    <area target="" alt="reog" title="reog" href="reog.html" coords="461,273,438,263,438,244,428,242,429,220,388,217,388,192,377,182,370,164,374,139,382,126,387,94,406,81,441,71,452,53,462,69,502,75,524,90,530,131,538,160,530,183,520,188,528,214,480,215,475,239,475,257,476,271" shape="poly">
</map>

Atribut coords berguna untuk menentukan area gambar yang akan diberi link. Untuk memudahkan meng-generate nilai di dalam atribut coords, kalian bisa menggunakan tools online pada link berikut image-map area.

HTML Background Images 

Gambar juga dapat digunakan sebagai background pada suatu website. Untuk menambahkan background gambar pada element HTML kita dapat menggunakan atribut style.

Contoh 1:

<div style="background-image: url('image_A.jpg');"> 

Contoh 2:

body {
   background-image: url('img_A.jpg');
}

HTML Tables

Pembahasan selanjutnya yaitu tentang cara membuat table di HTML. Untuk melakukannya kita perlu memahami beberapa tag berikut:

• Tag <table> digunakan untuk membungkus tabel
• Tag <thead> digunakan untuk membungkus bagian kepala tabel
• Tag <tbody> digunakan untuk membungkus bagian body dari tabel
• Tag <tr> (table row) digunakan untuk membuat baris
• Tag <td> (table data) digunakan untuk membuat sel
• Tag <th> (table head) digunakan untuk membuat judul pada header

Contoh:

<table border="1">
	<thead>
		<tr>
			<th>NIM</th>
			<th>NAMA</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>18051234</td>
			<td>Arjuna</td>
		</tr>
		<tr>
			<td>18051235</td>
			<td>Gatotkaca</td>
		</tr>
	</tbody>
</table>

Atribut border digunakan untuk menampilkan garis tabel, value 1 berarti ukuran ketebalan.

HTML Iframes

Merupakan tag HTML yang berfungsi untuk menampilkan halaman website tanpa harus membuka website tersebut. Berikut ini adalah contoh iframes yang biasa dipakai untuk menampilkan video dari youtube ke halaman website

<iframe width="560" height="315" src="https://www.youtube.com/embed/5nClo-E9098" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Untuk menambah pemahaman tentang HTML image, tables dan iframes kalian bisa melihat video berikut

Demikian penjelasan singkat tentang tag Images, Images Map, Tables dan Iframes semoga bermanfaat untuk teman-teman dan bila ada kritik atau saran yang membangun atau mungkin juga ada yang ingin ditanyakan silahkan komen di bawah. Terima kasih telah berkunjung ^_^