Deleng ing kaca web sing ana online saiki lan sampeyan bakal ngelingi yen padha nuduhake barang sing umum. Salah sijine ciri sing dituduhake yaiku gambar. Gambar sing bener nambah akeh presentasi situs web. Sawetara gambar kasebut, kaya logo perusahaan, bantuan merek situs kasebut lan nyambungake entitas digital kasebut marang perusahaan fisik panjenengan.
Kanggo nambah gambar, lambang, utawa grafis menyang kaca web sampeyan, sampeyan kudu nggunakake tag ing kode HTML kaca. Sampeyan nyetel tag IMG ing HTML sampeyan kanthi persis ing ngendi sampeyan pengin grafis ditampilake. Browser web sing nyithak kode kaca bakal ngganti tag kasebut kanthi grafis sing tepat sawisé kaca ditampilake. Mbalik maneh karo logo perusahaan, umpama sampeyan bisa nambah gambar kasebut ing situs sampeyan:
Atribut Gambar
Nggoleki kode HTML ing ndhuwur, sampeyan bakal weruh yen unsur kasebut kalebu loro atribut. Saben uwong dibutuhake kanggo gambar kasebut.
Atribut pisanan minangka "src". Iki cukup secara harfiah gambar file sing pengin ditampilake ing kaca. Contone, kita nggunakake file sing disebut "logo.png". Iki minangka grafis sing bakal ditampilake browser web nalika digawé situs kasebut.
Sampeyan uga bakal sok dong mirsani sing sadurunge jeneng berkas iki, kita nambahake sawetara informasi tambahan, "/ images /". Iki path file. Slash maju dhisikan ngandhani server kanggo nggoleki root direktori. Bakal nggoleki folder sing disebut "gambar" lan pungkasane file sing disebut "logo.png". Nggunakake folder sing disebut "gambar" kanggo nyimpen kabeh grafik situs iku praktik cukup umum, nanging path file bakal diganti karo apa wae sing cocog kanggo situs sampeyan.
Atribut kapindho sing dibutuhake yaiku teks "alt". Iki minangka "teks alternatif" sing dituduhake yen gambar gagal dimuat sakperangan alesan. Tèks iki, sing ing conto kita bisa maca "Logo Perusahaan" bakal ditampilake yen gambar gagal dimuat. Apa sing kelakon? Alasan macem-macem:
- Path file sing ora bener
- Jeneng berkas salah utawa salah ejaan
- Kesalahan transmisi
- File dibusak saka server
Iki mung sawetara kemungkinan kanggo ngapa gambar sing ditemtokake kita bisa ilang. Ing kasus kasebut, teks alt kita bakal dituduhake.
Teks teks uga digunakake dening perangkat lunak maca layar kanggo "maca" gambar kanggo pengunjung sing sesanti cacat. Awit padha ora bisa ndeleng gambar kaya kita, teks iki nyedhiyakake dheweke ngerti apa gambar kasebut. Mulane tèks alt iki kudu dibutuhake lan ngapa tegese nyatakake apa gambar kasebut!
Kesalahan umum alt teks yaiku sing dimaksudake kanggo tujuan mesin telusuran. Iki ora bener. Nalika Google lan mesin telusur liyane maca teks iki kanggo nemtokake apa gambar kasebut (eling, ora bisa "ndeleng" gambar sampeyan), sampeyan ora kudu nulis teks kanggo mréntahake mung kanggo nggolèki mesin. Pangarang teks asli sing ditrapake kanggo manungsa. Yen sampeyan uga bisa nambah sawetara tembung kunci menyang tag sing nyenengi mesin telusur, sing apik, nanging mesthine manawa teks alt serves minangka tujuan utamane kanthi nyatakake apa gambar kanggo sapa sing ora bisa ndeleng file grafis.
Atribut liyane
Tag IMG uga nduweni rong atribut liyane sing bisa digunakake nalika nggawe grafis ing kaca web - lebar lan dhuwur. Contone, yen sampeyan nggunakake editor WYSIWYG kaya Dreamweaver, kanthi otomatis nambah info iki kanggo sampeyan. Punika conto:
Atribut WIDTH lan HEIGHT ngandhani browser ukuran gambar kasebut. Browser banjur mangerteni persis manawa spasi ing tata letak wis diparengake, lan bisa pindhah menyang elemen sabanjure ing kaca nalika undhuhan gambar. Masalah karo nggunakake informasi iki ing HTML yaiku sampeyan mesthi ora pengin supaya gambar sampeyan bisa ditampilake kanthi ukuran sing tepat. Contone, yen sampeyan duwe situs web responsif sing owah-owahan sizing adhedhasar layar pengunjung lan ukuran piranti, sampeyan uga pengin gambar sampeyan fleksibel. Yen sampeyan nyatakake ing HTML apa ukuran tetep, sampeyan bakal nemokake banget angel kanggo ngatasi karo pitakon media CSS responsif. Mulane, lan njaga pemisahan gaya (CSS) lan struktur (HTML), disaranake sampeyan ora nambah atribut lebar lan dhuwur kanggo kode HTML sampeyan.
Siji cathetan: Yen sampeyan ninggalake instruksi sizing iki lan ora nemtokake ukuran ing CSS, browser bakal nuduhake gambar ing gawan, ukuran asli uga.
Diedit dening Jeremy Girard