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

Install Perl

  Salam Sobat Semua ALhamdulillah Sholawat serta salam tetap tercurah kepada sang panutan sayyidina Muhammad S.A.W. untuk kesempatan kali ini saya ingin berbagi tentang Applikasi perl dan Instalasi nya. mungkin kebanyakan orang applikasi perl ini tidak begitu penting apalagi di kalangan designer. tapi lain kata dengan kalangan yang suka melakukan aktifitas hacking,cracking,carding dan programming. mereka akan sangat membutuhkan applikasi ini karena memang ada beberapa tool atau alat yang terbuat dari bahasa perl. dan Insya Allah nanti saya akan berbagi juga dasar dasar perl oke :D heheheh. ok langsung saja.  - Download applikasi instalasi perl di https://adsafelink.com/4vKs7DHTY7 - ekstrak dari winrar nya 1. klik dua kali applikasi instalasi perl yang sudah di download dan setalah muncul jendela seperti di gambar maka klik next 2. Pilih option i accept dan kemudian klik next seperti tampak pada gambar 3. di bagian jendela ini untuk settingannya kita pakai yang standard saja ti...
Posting Komentar
Baca selengkapnya

Belajar HTML bersama part 2(mengenai Tag Heading)

  Alhamdulillah segala puji bagi Rabb semesta alam yang masih di beri kesempatan bisa bertemu lagi di tulisan atau video ini. pada kesempatan kemaren kita sudah mencoba membuat file html. dan sekarang ayo kita mencoba yang lebih dalam mengenai HTML. di dalam file kemaren atau bacaan atau video kemaren ada beberapa isi body yang kita tahu. yaitu <h1> dan <p>. untuk kesempatan kali ini saya mencoba memberitahukan arti h1 itu dulu, dan next bacaan atau video kita lanjutkan yang lain. untuk h1 kalau dalam teori disebut heading yang fungsinya membuat tulisan di dalam body itu berukuran menurut ukuran sesuai sistem. h1 ini terdiri sampai h6. jadi kita nanti kita akan coba h1 sampai h6. sekarang kita coba buka notepad lagi dan tulis atau copy paste tulisan berikut <html> <head> <title>Website Pertama</title> </head> <body> </body> </html> kemudian diantara tag body kita tulis atau copy paste tag h1 kemudian di sav...
Posting Komentar
Baca selengkapnya