Menyisipkan Gambar pada html

Selain teks, halaman web juga dapat memuat   gambar/image. Terdapat beberapa jenis   format gambar yang dapat digunakan pada   halaman web, ...



Selain teks, halaman web juga dapat memuat gambar/image. Terdapat beberapa jenis format gambar yang dapat digunakan pada halaman web, antara lain :

▫ GIF (Graphical Interchange Format) (.gif)

▫ JPEG (Joint Photographic Expert Image) (.jpg)

▫ PNG( Portable Network Graphic) (.png)

▫ BMP (Bitmap) (.bmp)

Untuk menyisipkan suatu gambar dalam halaman web dapat dilakukan dengan menggunakan tag <IMG>.

Atribut <IMG>

Tag tersebut memiliki elemen tambahan sebagai berikut :

Attribute

Value

Description

alt

text

Specifies an alternate text for an image

crossorigin

anonymous
use-credentials

Allow images from third-party sites that allow cross-origin access to be used with canvas

height

pixels

Specifies the height of an image

ismap

ismap

Specifies an image as a server-side image map

longdesc

URL

Specifies a URL to a detailed description of an image

width

pixelsSpecifies the width of an image

sizes

sizes

Specifies image sizes for different page layouts

src

URL

Specifies the path to the image

srcset

URL

Specifies the path to an image to use in different situations

usemap

#mapname

Specifies an image as a client-side image map


Alamat gambar (Path)

Terdapat dua cara untuk memuat gambar dalam web dengan menggunakan tag <IMG>, yaitu:

 pada folder yang sama dengan halaman  web, sehingga cukup dipanggil nama filenya saja, atau dapat berupa alamat dari suatu website. Contoh :

<img src=”http://techpedia04.my.id/image/logo.gif”>

<img src=”logo.gif”>

 pada folder yang terpisah dengan folder halaman webnya. Contoh :

<img src=”/image/logo.gif”>

<img src=”../logo.gif”>

Contoh :

<html>

<body>

<p><img src="facebook3.jpg" width="144" height="50" border=”1”><br>

Contoh penyisipan gambar <img src="facebook2.jpg" width="48" height="48">tinggal

meletakkan tag IMG di bagian yang akan disisipi gambar. Secara default atribut align

adalah <i><b>bottom</b></i> </p>

<p><img src="facebook2.jpg" width="60" height="60" align="top">Atribut align

<u>TOP</u></p>

<p><img src="twitter1.jpg" width="60" height="60" align="middle">Atribut align

<u>MIDDLE</u></p>

<p><img src="twitter3.jpg" width="60" height="60" align="right">Atribut align

<u>RIGHT</u></p>

<p><img src="android.png" width="100" height="60" alt="logo android">Penggunaan

Atribut <u>Alt</u>, karena gambar tidak dapat dimunculkan </p>

<p><img src="images/android.png" width="100" height="60" alt="logo

android">Penggunaan <u>relative address</u>, karena letak gambar berada di folder

lain </p>

</body>

</html>

Hasil:


Sekian pembasaran mengenai bagaimana menyisipkan gambar pada html, untuk menyisipkan link saya akan buat di postingan selanjutnya terimakasih.

COMMENTS

Nama

Apple,6,Artikel,126,ASUS Rog Zephyrus g14,1,Backlink,1,Bahasa Indonesia,1,Bulu Tangkis,1,Console,14,Cyberpunk 2077,1,Dlc 2,1,fotografi,3,Game,13,guest post,1,History,4,html,3,Jenis Laptop,1,Masa Depan,2,NFC,1,Pc,3,pes 2013,3,pes 2020,3,pes 2021,4,Rekomendasi,1,Samsung,2,SepakBola,2,smartphone,3,soal rpl,3,soal tkj,19,Soal TKJ Kelas XI,1,Soal TKJ Kelas XII,1,Software Android,7,Software Pc,30,Steam,1,Teknik Informatika,1,Template,6,Ti,2,Tips,5,Tutorial,1,Xiaomi,1,
ltr
item
TECH PEDIA 04: Menyisipkan Gambar pada html
Menyisipkan Gambar pada html
https://1.bp.blogspot.com/-j99mWttAr_A/XyOoKKz0aEI/AAAAAAAABuA/UDqn9IwbpEwxMgLI6MpSPxykiMU8S3FigCNcBGAsYHQ/s320/Untitled-1.png
https://1.bp.blogspot.com/-j99mWttAr_A/XyOoKKz0aEI/AAAAAAAABuA/UDqn9IwbpEwxMgLI6MpSPxykiMU8S3FigCNcBGAsYHQ/s72-c/Untitled-1.png
TECH PEDIA 04
https://www.techpedia04.my.id/2020/07/menyisipkan-gambar-pada-html.html
https://www.techpedia04.my.id/
https://www.techpedia04.my.id/
https://www.techpedia04.my.id/2020/07/menyisipkan-gambar-pada-html.html
true
3352910743458521246
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content