Nambahkeun Gambar jeung Web Kaca

Tingali iraha wae kaca web online kiwari sarta anjeun bakal aya bewara nu aranjeunna bagikeun tangtu hirup di umum. Salah sahiji jalma Tret dibagikeun mangrupa gambar. Gambar katuhu nambahkeun pisan kana presentasi ramatloka urang. Sababaraha pamadegan Gambar, kawas logo hiji parusahaan, mantuan brand situs jeung nyambung nu éntitas digital mun parusahaan fisik Anjeun.

Nambahkeun hiji gambar, ikon, atawa grafik ka kaca web, anjeun kudu make tag dina kode HTML kaca urang. Anjeun nempatkeun tag IMG di anjeun HTML persis dimana rék grafis ka nembongkeun. Web browser anu ngajadikeun kode kaca urang bakal ngaganti tag ieu jeung grafis luyu sakali kaca ieu ditempo. Balik deui ka conto logo parusahaan urang, didieu nyaeta kumaha anjeun bisa nambahkeun gambar nu keur situs anjeun:

atribut gambar

Pilari di kode HTML luhur, anjeun bakal nempo yén unsur ngawengku dua atribut. Tiap di antarana anu diperlukeun pikeun gambar.

The atribut kahiji teh "src". Ieu rada sacara harfiah nu file gambar nu Anjeun hoyong dipintonkeun dina kaca. Dina conto urang urang maké file disebut "logo.png". Ieu teh grafis yén web browser bakal nembongkeun lamun eta rendered loka.

Anjeun oge bakal aya bewara nu sateuacan ngaran file ieu, kami nambahan sababaraha émbaran tambahan, "/ gambar /". Ieu jalur file. Maju slash awal ngabejaan ka server kasampak kana akar diréktori kana. Ieu lajeng bakal néangan hiji folder disebut "Gambar" sarta pamustunganana file nu disebut "logo.png". Maké folder disebut "Gambar" pikeun nyimpen sakabeh grafik situs urang téh prakték geulis umum, tapi jalur file anjeun bakal robah jadi naon anu relevan pikeun situs anjeun.

The atribut required kadua téks "alt". Ieu teh "téks alternatif" anu dipidangkeun lamun gambar gagal pikeun muka pikeun sababaraha alesan. téks ieu, nu dina conto urang maos "Company Logo" bakal dipintonkeun lamun gambar gagal pikeun muka. Naha nu bakal lumangsung? A-rupa alesan:

Ieu ngan sababaraha kemungkinan keur naha gambar kami dieusian bisa jadi leungit. Dina kasus ieu, alt téks kami bakal nembongkeun gantina.

Alt téks ogé dipaké ku software layar maca ka "maca" gambar ka nganjang saha visi impaired. Kusabab aranjeunna moal bisa nempo gambar nu kawas urang ngalakukeun, teks ieu ngamungkinkeun aranjeunna nyaho naon gambar sorangan. Ieu naha alt téks anu diperlukeun na naha sakuduna jelas nangtang naon gambar téh!

A salah paham umum tina alt téks téh nya éta anu dimaksud pikeun tujuan search engine. Ieu teu bener. Bari Google tur mesin pencari séjén ngalakukeun baca téks ieu keur nangtukeun naon gambar kasebut (inget, aranjeunna moal bisa "tingali" gambar anjeun boh), anjeun teu kudu nulis alt téks pikeun banding solely kana mesin milarian. Panulis jelas alt téks anu dimaksudkan pikeun manusa. Lamun ogé bisa nambahan sababaraha kecap konci kana tag nu daya tarik pikeun mesin milarian, éta téh rupa, tapi salawasna pastikeun nu alt téks ieu porsi tujuan utamana na ku nyarios naon gambar kanggo saha anu teu tiasa ningali file grafik.

atribut sejenna

Tag IMG ogé boga dua atribut sejenna nu bisa Anjeun tempo di pamakéan lamun anjeun tiasa nyimpen grafis dina kaca web Anjeun - lebar tur jangkung. Contona, lamun ngagunakeun pangropéa WYSIWYG kawas Dreamweaver, éta otomatis nambihan info keur anjeun. Di dieu hiji conto:

Lebar tur jangkungna atribut ngabejaan browser nu ukuran gambar. browser nu lajeng weruh persis sabaraha spasi dina perenah ka allocate, sarta eta tiasa ngalih kana kana unsur hareup dina kaca bari undeuran gambar. Masalah sareng ngagunakeun informasi ieu dina HTML anjeun nu bisa jadi teu salawasna hayang gambar anjeun pikeun nembongkeun di nu ukuranana pasti. Contona, upami anjeun gaduh ramatloka responsif anu parobahan dumasar kana layar datang tur alat ukuranana sizing, anjeun bakal oge hoyong Gambar anjeun janten fléksibel. Lamun nangtang dina HTML anjeun naon ukuran dibereskeun téh, anjeun bakal manggihan eta pisan hésé override kalawan responsif queries média CSS . Ku sabab kitu, sarta pikeun ngajaga separation tina gaya (CSS) jeung struktur (HTML), eta Dianjurkeun yén anjeun teu nambahan lebar tur jangkungna atribut kana kode HTML Anjeun.

Hiji catetan: Mun anjeun ninggalkeun ieu parentah sizing dipareuman jeung ulah tangtukeun ukuranana dina CSS, browser bakal némbongkeun gambar dina standar na, ukuranana asli baé.

Diédit ku Jeremy Girard