Angalia ukurasa wowote wa wavuti mtandaoni mtandaoni na utaona kwamba wanagawana mambo fulani kwa kawaida. Moja ya sifa hizo zilizoshirikiwa ni picha. Picha zenye haki zinaongeza sana kwenye uwasilishaji wa tovuti. Baadhi ya picha hizo, kama alama ya kampuni, husaidia brand brand na kuunganisha kwamba chombo digital kwa kampuni yako ya kimwili.
Ili kuongeza picha, icon, au graphics kwenye ukurasa wako wa wavuti, unahitaji kutumia lebo katika msimbo wa HTML wa ukurasa. Unaweka tangazo la IMG katika HTML yako hasa ambapo unataka graphic kuonyesha. Kivinjari cha wavuti ambacho hutoa kificho cha ukurasa kitasimamia kitambulisho hiki na kielelezo kinachofaa wakati ukurasa utazotazamwa. Kurudi nyuma kwenye mfano wa alama ya kampuni yetu, hapa ndio jinsi unaweza kuongeza picha hiyo kwenye tovuti yako:
Tabia za picha
Kuangalia kanuni ya HTML hapo juu, utaona kwamba kipengele kinajumuisha sifa mbili. Kila mmoja wao anahitajika kwa picha hiyo.
Sifa ya kwanza ni "src". Hii ni faili halisi ya picha ambayo unataka kuonyeshwa kwenye ukurasa. Katika mfano wetu tunatumia faili inayoitwa "logo.png". Huu ni picha ambayo kivinjari cha wavuti kitaonyeshea wakati ulipotoa tovuti.
Utaona pia kwamba kabla ya jina hili la faili, tuliongeza maelezo ya ziada, "/ images /". Hii ndiyo njia ya faili. Slash ya awali ya mbele inaelezea seva ili kuangalia ndani ya mizizi ya saraka. Kisha utaangalia folda inayoitwa "picha" na hatimaye faili inayoitwa "logo.png". Kutumia folda inayoitwa "picha" kuhifadhi picha zote za tovuti ni mazoea ya kawaida, lakini njia yako ya faili ingebadilishwa na chochote kinachofaa kwa tovuti yako.
Sifa ya pili inahitajika ni maandishi ya "alt". Huu ndio "maandishi mengine" yanaonyeshwa ikiwa picha haiwezi kupakia kwa sababu fulani. Nakala hii, ambayo katika mfano wetu inasoma "Kampuni ya Rangi" itaonyeshwa ikiwa picha haiwezi kupakia. Kwa nini hilo litatokea? Sababu mbalimbali:
- Njia ya faili isiyo sahihi
- Jina la faili sahihi au misspelling
- Hitilafu ya uhamisho
- Faili imefutwa kutoka kwenye seva
Haya ni uwezekano mdogo tu kwa sababu picha yetu inaweza kuwa haipo. Katika matukio haya, maandishi yetu ya alt yanaonyesha badala yake.
Nakala ya maandishi pia hutumiwa na programu ya msomaji wa skrini ili "kusoma" picha kwa mgeni ambaye hana maono. Kwa kuwa hawawezi kuona picha kama sisi, maandishi haya yanawawezesha kujua picha hiyo yenyewe. Ndiyo sababu maandishi ya hifadhi yanahitajika na ni kwa nini inapaswa kufafanua wazi picha!
Kutokuelewana kwa kawaida kwa maandishi ya dhahabu ni kwamba ni maana ya malengo ya utafutaji. Hii si kweli. Wakati Google na vituo vingine vya utafutaji vinaweza kusoma maandiko haya ili kuamua ni picha gani (kumbuka, hawawezi "kuona" picha yako), haipaswi kuandika maandishi ya kuvutia tu kwa injini za utafutaji. Mwandishi wazi wazi maandiko ambayo ni maana ya binadamu. Ikiwa unaweza pia kuongeza baadhi ya maneno katika lebo ambayo inakatafuta injini za utafutaji, ni vizuri, lakini daima uhakikishe kuwa maandishi ya dhahabu yanatumikia kusudi lake kuu kwa kusema nini picha ni kwa mtu yeyote ambaye hawezi kuona faili ya graphics.
Sifa nyingine
Kitambulisho cha IMG pia kina sifa nyingine mbili ambazo unaweza kuziona zinatumiwa wakati unapoweka alama kwenye ukurasa wako wa wavuti - upana na urefu. Kwa mfano, ikiwa unatumia mhariri wa WYSIWYG kama Dreamweaver, huongeza maelezo haya kwa moja kwa moja. Hapa ni mfano:
Tabia za WIDTH na HEIGHT zinaiambia kivinjari ukubwa wa picha. Kivinjari basi anajua ni kiasi gani cha nafasi katika mpangilio wa kugawa, na inaweza kuendelea hadi kipengele cha pili kwenye ukurasa wakati wa kupakuliwa kwa picha. Tatizo la kutumia habari hii katika HTML yako ni kwamba huenda unataka picha yako kuonyeshwa kwa ukubwa sawa kabisa. Kwa mfano, ikiwa una tovuti ya msikivu ambao mabadiliko ya sizing yanategemea skrini ya wageni na ukubwa wa kifaa, utahitaji pia picha zako kuwa rahisi. Ikiwa unasema katika HTML yako ukubwa uliowekwa, utapata vigumu sana kuingilia kati na maswali ya vyombo vya habari vya CSS . Kwa sababu hii, na kudumisha utengano wa mtindo (CSS) na muundo (HTML), inashauriwa kuwa usiongezee upana na sifa za urefu kwenye msimbo wako wa HTML.
Kumbuka moja: Ikiwa utaondoa maagizo haya ya sizing mbali na usifafanue ukubwa katika CSS, kivinjari kitaonyesha picha kwa ukubwa wake, ukubwa wa asili hata hivyo.
Iliyotengenezwa na Jeremy Girard