Langsung ke konten utama

Belajar HTML dasar bersama part 6 : Mengenal dan cara menampilkan gambar dengan tag Images

 


dimana-mana dalam internet gambar merupakan suatu hal yang wajib yang harus ada, dan ternyata di HTML kita juga akan mencoba yang namanya gambar dengan menggunakan tag images atau img, tapi sebelum kita mulai izinkan saya terlebih dahulu mengucapkan

salam sobat semua

Alhamdulillah yang tak terhingga sekali, sehingga kali ini kita masih bisa sharing-sharing tulisan, video dengan kalian lagi.

pada kesempatan kali ini kita akan mencoba dengan yang namanya tag img atau tag images. mungkin dari nama tag saja kalian akan bisa meraba-raba fungsinya,

karena images berarti gambar. 


ya tag ini berhubungan dengan yang namanya gambar. tag inilah yang akan berfungsi menampilkan gambar dalam halaman HTML kita semua.

dan ini adalah pengenalan dasar, yang mana nanti ada lanjutan-lanjutan untuk mempercantik gambar yang banyak bertebaran tutorialnya di internet.


langsung saja kita praktek kawan biar kita semua tahu bagaimana cara kerja dan fungsi tag image sebenarnya.

- oke sekarang kita langsung buka notepad++ nya dan kita tulis kode berikut atau copy paste saja biar cepat.


<html>

<head>

<title>Website Pertama</title>

</head>

<body>

<p>Belajar penggunaan Image pada HTML</p>

</body>

</html>

1. kemudian kita tambahin tag imagesnya kawan, tapi sebelumnya kita letakkan dulu file images atau gambar yang mau kita tampilkan dalam satu folder

file htmlnya biar tidak terlalu ruwet dalam pemanggilan gambarnya atau pengisian nilai atau value dari attribut src tag images.


- setelah dipindah seperti gambar diatas maka kita tuliskan atau copy paste kan kode berikut kawan

<html>

<head>

<title>Website Pertama</title>

</head>

<body>

<p>Belajar penggunaan Image pada HTML</p>

<p><img src="th.jpg"></p>

</body>

</html>

2. jika hasil dari kode kalian seperti gambar berikut maka kalian dinyatakan sukses kawan.


- kemudian bagaimana kalo kita ingin rapi, dan semua gambar yang kita panggil berada dalam satu folder, maka penulisan srcnya juga harus benar. dan sekarang buatlah

folder dengan nama gambar, dan kemudian pindah gambar th.jpg ke folder gambar, dan kemudian tulis atau copy paste kdoe berikut.

<html>
<head>
<title>Website Pertama</title>
</head>
<body>
<p>Belajar penggunaan Image pada HTML</p>
<p><img src="gambar/th.jpg"></p>
</body>
</html>

- dari dua kode diatas, apakah kalian bisa melihat perbedaannya???. ya perbedaannya pada nilai srcnya. di kode pertama nilai src hanya nama file gambar atau

src="th.jpg" , dan kode yang kedua nilai src ada tambahan nama folder gambar seperti src="gambar/th.jpg".

- selain attribut src untuk pemanggilan atau menampilkan gambar, ada juga attribut untuk ukuran gambar yaitu witdh untuk ukuran lebar gambar dan height untuk

ukuran tinggi gambar, dan untuk satuan yang digunakan banyak, tapi saya lebih suka pake px atau pixel. sekarang kita langsung tulis atau copy paste

code berikut

<html>

<head>

<title>Website Pertama</title>

</head>

<body>

<p>Belajar penggunaan Image pada HTML</p>

<p><img src="gambar/th.jpg" width="350px" height="300px"></p>

</body>

</html>

- maka dengan menggunakan kode diatas ukuran gambar yang akan tampil akan mengikuti nilai dari attribut width dan height.

- dan yang terakhir yaitu attribut align dan valign. align ini berfungsi untuk mengatur letak gambar pada posisi horisontal atau kanan kirinya, dan valign

berfungsi untuk mengatur letak gambar pada posisi vertikal atau atas bawah. jadi untuk nilai align itu adalah left (kiri), right (kanan), center (tengah).

dan untuk nilai valign yaitu top (atas), bottom (bawah), dan middle (tengah). oke kita langsung saja tulis atau copy paste kode berikut

<html>

<head>

<title>Website Pertama</title>

</head>

<body>

<p>Belajar penggunaan Image pada HTML</p>

<p><img src="gambar/th.jpg" width="350px" height="300px" align="right"></p>

</body>

</html>

- jadi dengan kode diatas maka posisi letak gambar akan berpindah ke sebelah kanan.

dan untuk pembelajaran bisa download filenya  disini

cukup sekian dulu pada kali ini kawan. kita lanjut di next share dan belajar barengnya.

see you next time

salam sobat semua

#html #images #tag #width #height #align #valign #desktop #websites #free #share #gratis #berbagi #belajar #study 

 

 

 

 

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

belajar CSS dasar bersama part 3 : Cara mengetahui dan menetapkan nilai hex warna pada CSS atau HTML dengan offline beserta kelebihannya

   warna di css merupakan bagian terpenting, karena warna akan mempercantik sebuah tampilan website yang nanti akan kita buat, namun kita harus tahu bagaimana cara membuat atau memberi nilai atau value hex warna di css sehingga tampilan HTML kita akan cantik dan menarik, tapi sebelum kita memulai izinkan saya untuk mengucapkan Salam sobat semua Alhamdulillah atas segala sesuatu nikmat yang telah Allah berikan kepada diri ini, dan salah satu nya nikmat masih di beri kesempatan untuk bisa menulis dan berbagi dengan kalian. dalam kesempatan kali ini sesuai janji saya pada tulisan sebelumnya bahwa kita akan mencoba bagaimana caranya mendapat nilai hex warna pada CSS atau html secara offline. dan untuk kali ini kita akan memakai aplikasi pembantu yaitu adobe photoshop. dan ini sudah saya lakukan bertahun-tahun dalam pembuatan websites ataupun blog. bagi yang belum punya adobe photoshop di perangkatnya silahkan kalian  baca tutorial sebelumnya tentang adobe photshop disini. kal...
Posting Komentar
Baca selengkapnya

Install Notepad ++

Install Notepad ++ Salam semuanya sobat Pada kesempatan kali ini saya ingin menyimpan tata cara instal notepad ++ dan filenya. Agar tidak usah mencari di blog lain hehehehe. Fungsi notepad ++ ini sangatlah banyak dan sering saya gunakan untuk keperluan sehari-hari seperti koding php, html, perl dan lain-lain. Bagi saya tools kecil ini sangat bermanfaat. Dan siapa tahu juga bermanfaat buat kalian semua pembaca. Oke langsung saja download aplikasi notepad ++ nya disini Kemudian ekstrak filenya dan klik file exe installernya dua kali, sehingga akan tampil serperti pada gambar, dan kemudian pilih english saja dan klik ok. Kemudian klik next seperti pada gambar  Kemudian klik i agree Dan kemudian klik next saja kalo ingin letak folder installer atau pemasangannya di defaultkan oleh kita.  Kalau ingin dipindah, tinggal klik browse saja dan kemudian pilih letak foldernya  Kemudian ada beberapa pilihan atau opsi. Ikuti seperti gambar ya hehehehe: D  Dan yang terkahir seles...
Posting Komentar
Baca selengkapnya