Skip to main content

menampilkan gambar pada halaman website

Hai, kawan seperti yang sudah saya bilang di postingan sebelumnya tentang inline element dan block element tag html . Kali ini saya akan sharing tentang menampilkan gambar pada halaman website.

Pada halaman website tentu perlu juga kita tambahkan gambar gambar agar tampilan halaman website kita terlihat cantik dan enak dilihat, sehingga pengunjung tidak bosan. nah bagaimana cara menampilkan gambar tersebut ? .



Tag atau element yang digunakan untuk menampilkan file gambar pada halaman website kita adalah:
<img /> 
merupakan bentuk penulisan tag atau element di  HTML 5. Agar lebih jelasnya silahkan ikuti contoh berikut:

pertamatama silahkan download file gambar berikut gambar.jpg , atau kamu bisa menggunakan file gambar kamu sendiri yang penting kamu harus tau nama gambar dan letak folder gambar kamu.

setelah kamu menggunduh file gambar.jpg atau kamu sudah siapkan file gambar sendiri. Saya sarankan mengganti nama gambar sesuai keinginan dan mudah di ingat. Letakkan file gambar tersebut satu folder dengan file html kamu. setalah itu ketik script berikut :

contohnya:
<!DOCTYPE html>
<html lang="en-US">
  <head>
     <title>gambar</title>
  </head>
 <body>
   <img src="gambar.jpg" alt="ini gambar logo" />
 </body>
</html>
penjelasan:
<img /> 
Merupakan tag html yang digunakan untuk menampilkan file gambar pada halaman website
src="..."
merupakan atribut yang digunakan pada tag atau element img ,
src (source) digunakan untuk mendefinisikan lokasi atau sumber file gambar yang akan di tampilkan, isi atau value dari atribut src harus tepat, lokasi dan nama file gambar. jika file gambar ada didalam folder dan folder tersebut berada di folder yang sama dengan file html kamu value src nya seperti berikut :
src="foldergambar/namagambar.extensi"
 jika file gambar berada di luar folder tempat file html kamu , script src nya kurang lebih seperti berikut
src="../namagambar.extensi"
../ merupakan kode perintah dasar seperti di terminal linux yang menandakan bahwa kita keluar satu tingkat dari folder asal. saya harap kamu memahami juga peritah perintah dasar terminal linux :) .
alt="..."
merupakan atribut pada tag atau element img yang digunakan sebagai alternatif apabila file gambar gagal tampil , sehingga yang tampil sebagai penggati adalah teks pengganti gambar tersebut.

contoh hasil:
gambar : 1
Dalam menampilkan gambar di halaman website, kita juga bisa mengatur besar kecilnya gambar dengan menambahkan atribut width untuk lebar gambar dan height untuk tinggi gambar. Perlu diperhatikan untuk memberikan ukuran width dan height , apabila kita memberikan nilai ukuran untuk width saja maka ukuran height gambar akan automatis menyesuaikan ukuran width , dan sebaliknya. namun jika kita memberi nilai width dan memberi juga nilai pada height harus memberikan nilai yang tepat agar gambar tampak presisi dan tidak merusak tampilan gambar.

contohnya :
<!DOCTYPE html>
<html lang="en-US">
  <head>
     <title>ukuran gambar</title>
  </head>
 <body>
gambar ini hanya diberi width 100px
   <img src="gambar.jpg" alt="ini gambar logo" width="100px" />
   <br />
gambar ini diberi ukuran width 100px dan height 30px
   <img src="gambar.jpg" alt="ini gambar logo" width="100px" height="30px" />
 </body>
</html>
penjelasan:
width="..." dan height="..."
merupakan atribut untuk memberikan ukuran gambar yang tampil di halaman website
100px  dan 30px
merupakan contoh value ukuran untuk width dan height yang memiliki satuan px (pixel) , kita bisa mengubah satuan px (pixel) tersebut sesuai keinginan.

contoh hasil :
 gambar: 2

Dari tampilan gambar 2 dapat kita lihat perbedaan jika kita memberikan ukuran gambar hanya pada width saja , dibandingkan dengan apabila kita memberi ukuran pada width dan height .

demikian penjelasan saya mengenai menampilkan gambar pada halaman website. Untuk postingan berikutnya saya akan sharing tentang hyperlink dan penggunaannya

Ok.. terimakasih sudah berkunjung . semoga postingan ini bermanfaat :)

Penulis : Seno Apriliyadi

Comments

  1. We don’t have to add disgrace where disgrace doesn’t have to exist. Money has been altering hands based on the outcomes of sporting events for longer than any of us have been alive, so I’d quite or not it's open, clear, and controlled than relegated to again alleys and shady parlors. One cause casino.edu.kg I was so desperate to try out these apps is that I thought I knew what I was betting on. I study sports with a ardour and thought my insight could assist me win cash, like Derevensky said. It turns out this stuff is essentially random — gamers can get harm, or have psychological lapses, or an oblong-shaped soccer can just bounce in a method it shouldn't.

    ReplyDelete
  2. Other software platforms happily permit free slot games, however Android and iOS gadgets present the best high quality 토토사이트 in online on line casino playing right now. This half in} mode presents an opportunity to play and discover pokies fundamentals free of charge earlier than making an actual cash dedication. Use the moment play button to “play now” with no download or registration. Players can switch to immediate play solely in free slot machines. To play for real cash, register and make a deposit, which takes time.

    ReplyDelete

Post a Comment

Popular posts from this blog

Format tanggal dan jam pada bahasa pemrograman PHP (Date Format)

PHP (PHP: Hypertext Processor) Merupakan salah satu bahasa pemrograman yang sangat dikenal di kalangan programer. dan versi PHP paling terbaru pada tahuin postingan ini dibuat adalah versi 7.3. Artikel kali ini berkaitan dengan salah satu parameter pada fungsi yang sering digunakan untuk menampilkan maupun memformat output tanggal dan jam (waktu). beberapa fungsi yang sering digunakan diantaranya date() dan date_format(). Fungsi date() fungsi date() umumnya digunakan untuk mengambil waktu dari sytem / waktu server. fungsi date memiliki beberapa parameter diantaranya: $format: Digunakan untuk menentukan bentuk output waktu yang di inginkan. $timestamp:  (Opsional)  Nilai satuan waktu dalam UNIX sytem , bertipedata integer. Fungsi date_format() fungsi date_format() adalah fungsi untuk merubah bentuk output dari variable yang bertipedata date. fungsi ini biasanya didahului dengan fungsi date_create(),   yaitu salah satu fungsi php yang membuat...

Merubah Folder Publik Pada Laravel 5.8

Laravel merupakan salah satu framework yang saat ini sedang ramai digunakan, Laravel memiliki struktur direktori / folder yang cukup mudah dipahami bahkan kita bisa membuat custom folder sendiri sesuai keperluan. Kali ini saya ingin berbagi hal yang saya dapat setelah mempelajari laravel dan berkeliling dari situs ke situs. yaitu bagaimana merubah folder publik pada laravel (saya menggunakan laravel v5.8). Sebagai Catatan umumnya setiap webserver selalu mencari & membaca terlebih dahulu file index pada publik direktori (folder) pada website. dan pada laravel terletak pada folder public.  Berikut Contoh struktur folder pada laravel : / /app /bootstrap /config /database /public     /index.php /resources /routes /storage Namaun pada saat kita akan mengupload / deploy website kita ke server Hosting yang pada umumnya menggunakan nama folder public_html . tentu suatu hal yang mungkin membuat kita sedikit bingung untuk merubah nama folder dari project kita ka...

Struktur dasar penuliasan tag HTML

Dalam membangun sebuah website ada hal hal yang perlu kamu pelajari dan mengerti. salah satunya penyusunan script atau tulisan kode penyusun halaman website kamu HTML ( Hyper Text Markup Language ) merupakan bahasa markah yang menyusun sebuah halaman website. Penulisan bahasa HTML diapit dengan tag < ... >  . Contohnya :  < H1 > ( kontent atau teks ) </H1>