Menampilkan Gambar
Gambar adalah suatu media visual yang hanya dapat dilihat saja, akan tetapi tidak mengandung unsur suara atau audio. Atau definisi Media gambar yang lainnya adalah segala sesuau yang dapat diwujudkan secara visual kedalam bentuk 2 (dua) dimensi sebagai curahan ataupun pemikiran yang bermacam-macam misalnya seperti: potret, slide, lukisan, film, strip, opaque proyektor dan sebagainya.
Sedangkan pengertian media gambar seri adalah suatu urutan dari gambar yang mengikuti suatu percakapan dalam hal memperkenalkan ataupun menyajikan arti yang terdapat pada gambar tersebut. Disebut dengan gambar seri, sebab gambar satu dengan gambar lainnya mempunyai hubungan atau saling berkaitan.Tujuannya adalah supaya media gambar tersebut dapat membantu dalam menyajikan suatu kejadian atau peristiwa yang kronologisnya dengan menghadirkan benda, orang dan juga latar.
Sedangkan pengertian media gambar seri adalah suatu urutan dari gambar yang mengikuti suatu percakapan dalam hal memperkenalkan ataupun menyajikan arti yang terdapat pada gambar tersebut. Disebut dengan gambar seri, sebab gambar satu dengan gambar lainnya mempunyai hubungan atau saling berkaitan.Tujuannya adalah supaya media gambar tersebut dapat membantu dalam menyajikan suatu kejadian atau peristiwa yang kronologisnya dengan menghadirkan benda, orang dan juga latar.
Element yang dibutuhkan untuk memasukkan gambar kedalam halaman website adalah element <img>. Atrbut- atribut yang akan sering digunakan pada element ini adalah :
- src, nama dan alamat sumber tempat gambar berada,
- height, untuk menentukan tinggi gambar pada browser,
- width, untuk mengatur lebar gambar pada browser,
- align, untuk mengatur posis gambar, di bagian kiri, tengah atau kanan halaman. Atribut ini juga untuk mengatur posisi teks relatif pada gambar, di sisi top midle atau bottom,
- hspace, untuk mengatur lebar spasi horsontal,
- vspace, untuk mengatur lebar spasi vertikal,
- border, untuk mengatur ketebalan border gambar,
- alt, sebagai informasi alternatif untuk gambar.
Nilai bilangan untuk atribut height dan width menggunakan satuan pixel. Penambahan tanda (%), akan menyebabkan ukuran gambar yang dimasukkan adalah ukuran relatiif terhadap ukuran browser.
 |
| Memasukan Gambar |
Contoh pemanggilan gambar yang muncul pada gambar di atas, dapat anda dilihat pada kode dokumen berikut :
<html>
<head>
<title> Gambar </title>
</head>
<body>
<img src="57UKydQS.png" alt="tux" align="top">
Gambar Jendela
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Gambar Sebagai Latar belakang
Gambar dapat ditampilkan sebagai latar belakang dokumen HTML. Gambar dapat dimasukkan ke dalam tag <body> dengan atribut background.
Contoh program :
Gambar dapat ditampilkan sebagai latar belakang dokumen HTML. Gambar dapat dimasukkan ke dalam tag <body> dengan atribut background.
Sintak : <body background="lokasi gambar">
Contoh program :
<html>
<head>
<title> Belajar Image di dalam HTML </title>
</head>
<body background="back.jpg">
HTML dengan background image..
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Hasil akan seperti di bawah :
 |
| Background halaman website dengan gambar |
Alignment Gambar
Penulisan gambar di dalam dokumen HTML bersama dengan teks, akan membuat suatu teks ditampilkan sejajajt pada bagian bawah dari gambar. Gambar dapat diposisikan di sebelah kiri maupun kanan dari teks. Perhatikan contoh program berikut :
<html>
<head>
<title> Belajar Image di dalam HTML </title>
</head>
<body>
<img src="Jendela.png" align="right"> </img>
Ini teks sebelah gambar jendela..
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Contoh diatas menggunakan alignment "right". Cobalah juga untuk alignment : left, center, middle, top, bottom dan perhatikan hasil dokumen di atas seperti gambar dibawah.
Hasilnya contoh gambar dengan alignment "right" di atas browser :
 |
| Penggunaan alignment pada gambar |
Memanipulasi Ukuran Gambar
Gambar memiliki ukuran dengan dimensi piksel (pixel), yaitu lebar x tinggi (width x height). Pada saat gambar ditampilkan di atas browser, maka gambar tersebut ditampilkan dalam ukuran sebenarnya. Kita dapat memanipulasi ukuran gambar yang ditampilkan di atas browser dengan memberikan atribut width dan weight di dalam tag <img>.
Contoh program :
Hasil dari kode HTML di atas sebagai berikut :
Alternate Text
Atribut alt dapat digunakan di dalam tag img untuk memberikan alternate text dari suatu gambar. Alternate teks ini di tampilkan ketka browser tidak dapat meload gambar.
Contoh program :
Kode HTML diatas, ditampilkan di dalam browser sebagai berikut :
Perhatikan, karena gambar Jendela.jpg tidak ada, sehingga tidak dapat di load. Maka muncul keterangan dari gambar tersebut. Bila gambar tersebut ada dan dapat di load, maka keterangan (alt) akan muncul pada saat mouse di dekatkan pada gambar tersebut.
Sebagai tambahan, Untuk memberikan border pada gambar dapat anda tambahkan atribut Border pada tag <img>. Misalnya :
Catatan :
Contoh program :
<html>
<head>
<title> Belajar Image di dalam HTML </title>
</head>
<body>
<center>
<img src="Jendela.png" width="175" height="210"> </img>
<img src="Jendela.png" width="250" height="290"> </img>
<img src="Jendela.png" width="120" height="160"> </img>
<br> Kiri ke kanan : ukuran asli (175x210) -- di perbesar (250x290) -- di perkecil (120x160)
</center>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Hasil dari kode HTML di atas sebagai berikut :
 |
| Memanipulasi ukuran gambar |
Alternate Text
Atribut alt dapat digunakan di dalam tag img untuk memberikan alternate text dari suatu gambar. Alternate teks ini di tampilkan ketka browser tidak dapat meload gambar.
Contoh program :
<html>
<head>
<title> Belajar Image di dalam HTML </title>
</head>
<body>
<img src="Jendela.jpg" alt="Ini gambar Jendela"></img>
<!-- Website Complete Coding Blogspot -->
</body>
</html>
Kode HTML diatas, ditampilkan di dalam browser sebagai berikut :
 |
| Penggunaan alternate pada gambar |
Perhatikan, karena gambar Jendela.jpg tidak ada, sehingga tidak dapat di load. Maka muncul keterangan dari gambar tersebut. Bila gambar tersebut ada dan dapat di load, maka keterangan (alt) akan muncul pada saat mouse di dekatkan pada gambar tersebut.
Sebagai tambahan, Untuk memberikan border pada gambar dapat anda tambahkan atribut Border pada tag <img>. Misalnya :
<img border="1" src="Jendela.jpg">
Catatan :
Besarnya ukuran gambar yang ditampilkan di dalam dokumen HTML, mempengaruhi kecepatan browser untuk me-load dokumen HTML tersebut. Semakin besar ukuran gambar yang di tampilkan, semakin lama browser me-load dokumen HTML pada browser yang kalian buka.
1xbet - Best Bet in 1xBet - Download or Install for Android
BalasHapus1xbet is the best 1xbet 먹튀 betting app in 검증 바카라 사이트 the world created for esports. It is a one of the safest and most trusted names 토토 사이트 추천 among players. cheap retro jordans It offers a user 슬롯 friendly interface