ચિત્રો અને ઑબ્જેક્ટ્સ માટે HTML IMG ટેગનો ઉપયોગ
HTML IMG ટેગ વેબ પેજની અંદરની ચિત્રો અને અન્ય સ્થિર ગ્રાફિકલ ઓબ્જેક્ટોને સામેલ કરે છે. આ સામાન્ય ટૅગ અનેક ફરજિયાત અને વૈકલ્પિક વિશેષતાઓને સપોર્ટ કરે છે જે આકર્ષક, છબી-કેન્દ્રિત વેબસાઇટને ડિઝાઇન કરવાની તમારી ક્ષમતામાં અતિશયતા ઉમેરે છે.
એક સંપૂર્ણ રચના HTML IMG ટેગનું ઉદાહરણ આના જેવું દેખાય છે:
આવશ્યક IMG ટૅગ એટ્રીબ્યૂટ્સ
એસઆરસી વેબ પેજ પર દર્શાવવા માટે તમારે એકમાત્ર એટ્રિબ્યુટની જરૂર છે જે એસઆરસી (SRC) એટ્રિએટ છે. આ લક્ષણ પ્રદર્શિત કરવા માટે ઇમેજ ફાઇલના નામ અને સ્થાનને ઓળખે છે.
ALT માન્ય એક્સએચટીએમએલ અને HTML4 લખવા માટે, ALT લક્ષણ પણ જરૂરી છે. છબીને વર્ણવે છે તેવા ટેક્સ્ટ સાથે અજાણ્યાં બ્રાઉઝર્સને પ્રદાન કરવા માટે આ વિશેષતાનો ઉપયોગ કરવામાં આવે છે. બ્રાઉઝર્સ વૈકલ્પિક ટેક્સ્ટને અલગ અલગ રીતે પ્રદર્શિત કરે છે જ્યારે તમે છબી પર તમારા માઉસને મૂકાતા હો ત્યારે કેટલાક તેને પોપ-અપ તરીકે પ્રદર્શિત કરે છે, અન્ય લોકો તેને ગુણધર્મો પર પ્રદર્શિત કરે છે જ્યારે તમે છબી પર જમણું-ક્લિક કરો છો, અને કેટલાક તે બધાને પ્રદર્શિત કરતા નથી.
વેબ પેજના લખાણ માટે સંબંધિત અથવા મહત્વપૂર્ણ ન હોય તેવી છબી વિશે વધારાની વિગતો આપવા માટે ઑપ્ટ ટેક્સ્ટનો ઉપયોગ કરો. પરંતુ યાદ રાખો કે સ્ક્રીન રીડર્સ અને અન્ય ટેક્સ્ટ-ફક્ત બ્રાઉઝર્સમાં, ટેક્સ્ટને પૃષ્ઠ પરના બાકીના ટેક્સ્ટ સાથે ઇનલાઇન વાંચવામાં આવશે. મૂંઝવણને અવગણવા માટે, વર્ણનાત્મક Alt ટેક્સ્ટનો ઉપયોગ કરો જે કહે છે (ઉદાહરણ તરીકે), ફક્ત "લોગો" ની જગ્યાએ "વેબ ડીઝાઇન અને એચટીએમએલ વિશે".
HTML5 માં, ALT લક્ષણ હંમેશા જરૂરી નથી, કારણ કે તમે તેને વધુ વર્ણન ઉમેરવા માટે કૅપ્શનનો ઉપયોગ કરી શકો છો. તમે ID ને સૂચવવા માટે ARIA-DESCRIBEDBY ની વિશેષતાનો ઉપયોગ કરી શકો છો જેમાં સંપૂર્ણ વર્ણન શામેલ છે.
Alt ટેક્સ્ટ જરૂરી નથી પણ જો છબી શુદ્ધ રીતે સુશોભિત હોય છે, જેમ કે વેબ પૃષ્ઠ અથવા આયકનની ટોચ પરના ગ્રાફિક. પરંતુ જો તમને ખાતરી ન હોય તો, ફક્ત કિસ્સામાં Alt ટેક્સ્ટનો સમાવેશ કરો.
ભલામણ કરેલ IMG વિશેષતાઓ
WIDTH અને HEIGHT તમને WIDTH અને HEIGHT લક્ષણોનો હંમેશાં ઉપયોગ કરવાની ટેવ હોવી જોઈએ અને તમારે હંમેશા વાસ્તવિક કદનો ઉપયોગ કરવો જોઈએ અને બ્રાઉઝર સાથે તમારી છબીઓનું કદ બદલવું જોઈએ નહીં.
આ એટ્રિબ્યુટ્સ પૃષ્ઠના રેન્ડરીંગને ઝડપી બનાવે છે કારણ કે બ્રાઉઝર છબી માટે ડિઝાઇનમાં જગ્યા ફાળવી શકે છે, અને પછી સમગ્ર છબીને ડાઉનલોડ કરવા માટે રાહ જોવાને બદલે, બાકીની સામગ્રી ડાઉનલોડ કરવાનું ચાલુ રાખો.
અન્ય ઉપયોગી IMG વિશેષતાઓ
TITLE આ લક્ષણ એ એક વૈશ્વિક વિશેષતા છે જે કોઈપણ HTML ઘટક પર લાગુ કરી શકાય છે. તદુપરાંત, TITLE લક્ષણ તમને છબી વિશે વધારાની માહિતી ઉમેરવા દે છે
મોટાભાગનાં બ્રાઉઝર્સ TITLE લક્ષણને સમર્થન આપે છે, પરંતુ તેઓ તેને અલગ અલગ રીતે કાર્ય કરે છે કેટલાક પોપ અપ તરીકે ટેક્સ્ટ પ્રદર્શિત કરે છે જ્યારે અન્યો તેને માહિતી સ્ક્રીનમાં પ્રદર્શિત કરે છે જ્યારે વપરાશકર્તા છબી પર જમણું ક્લિક કરે છે. તમે છબી વિશે વધારાની માહિતી લખવા માટે TITLE એટ્રિબ્યુટનો ઉપયોગ કરી શકો છો, પરંતુ છુપા અથવા દૃશ્યમાન હોવા પર આ માહિતી પર ગણતરી ન કરો. શોધ એન્જિનો માટે કીવર્ડ્સ છુપાવવા માટે તમારે સૌથી વધુ ચોક્કસપણે આનો ઉપયોગ કરવો જોઈએ નહીં. આ પ્રથાને હવે મોટા ભાગના શોધ એંજીન્સ દ્વારા દંડ કરવામાં આવે છે.
USEMAP અને ISMAP આ બે લક્ષણો ક્લાઈન્ટ બાજુ () અને સર્વર-બાજુ (ISMAP) છબી નકશાને તમારી છબીઓ પર સેટ કરે છે.
LONGDESC આ લક્ષણ URL ને લાંબા સમય સુધી વર્ણન કરવા માટે આધાર આપે છે આ સુવિધા તમારા છબીઓને વધુ સુલભ બનાવે છે.
અપ્રચલિત અને અપ્રચલિત IMG વિશેષતાઓ
કેટલીક વિશેષતાઓ હવે HTML5 માં અપ્રચલિત છે અથવા HTML4 માં નાપસંદગી છે. શ્રેષ્ઠ HTML માટે, તમારે આ લક્ષણોનો ઉપયોગ કરવાને બદલે અન્ય ઉકેલો શોધવા જોઈએ.
બોર્ડર એટ્રીબ્યુટ છબીની કોઈપણ સરહદના પિક્સેલમાં પહોળાઈને વ્યાખ્યાયિત કરે છે. તે HTML4 માં CSS તરફેણમાં દૂર કરવામાં આવેલ છે અને HTML5 માં અપ્રચલિત છે
ALIGN આ લક્ષણ તમને ટેક્સ્ટની અંદર એક છબી મૂકવા અને તેની આસપાસનો ટેક્સ્ટ ફ્લો ધરાવે છે. તમે જમણી કે ડાબી બાજુ પર એક છબી ગોઠવી શકો છો તે HTML4 માં ફ્લોટ સીએસએસ પ્રોપર્ટીની તરફેણમાં દૂર કરવામાં આવ્યું છે અને HTML5 માં અપ્રચલિત છે.
HSPACE અને VSPACE આ HSPACE અને VSPACE વિશેષતાઓ આડા (HSPACE) અને ઊભી સફેદ જગ્યા (VSPACE) ઉમેરે છે. વ્હાઇટ જગ્યા ગ્રાફિક (ટોચ અને તળિયે અથવા ડાબે અને જમણે) બંને બાજુ ઉમેરવામાં આવશે, તેથી જો તમને માત્ર એક બાજુ જ જગ્યાની જરૂર હોય, તો તમારે CSS નો ઉપયોગ કરવો જોઈએ. એચટીએમએલ 4 માં માર્જીન સી.એસ.એસ. પ્રોપર્ટીના તરફેણમાં આ લક્ષણોનો ઉપયોગ કરવામાં આવ્યો છે, અને તે HTML5 માં અપ્રચલિત છે.
LOWSRC LOWSRC લક્ષણ વૈકલ્પિક છબી પ્રદાન કરે છે જ્યારે તમારું છબી સ્રોત એટલું મોટું છે કે તે અત્યંત ધીરે ધીરે ડાઉનલોડ કરે છે. ઉદાહરણ તરીકે, તમારી પાસે એવી છબી હશે જે 500KB છે જે તમે તમારા વેબ પેજ પર દર્શાવવા માંગતા હો, પરંતુ 500KB ડાઉનલોડ કરવા માટે લાંબો સમય લેશે. તેથી તમે છબીની ઘણી ઓછી કૉપિ બનાવી શકો છો, કદાચ કાળી અને શ્વેતમાં અથવા ફક્ત અત્યંત ઑપ્ટિમાઇઝ કરેલ છે, અને તેને LOWSRC એટ્રીબ્યુટમાં મૂકો. નાની છબી પ્રથમ ડાઉનલોડ કરશે અને દર્શાવશે, અને પછી જ્યારે મોટી છબી દેખાય છે ત્યારે તે લો-સ્રોતની એકને બદલશે.
LOWSRC લક્ષણને નેટસ્કેપ નેવિગેટર 2.0 માં IMG ટેગમાં ઉમેરવામાં આવ્યું હતું. તે DOM સ્તર 1 નો ભાગ હતો પરંતુ તે પછી DOM સ્તર 2 માંથી દૂર કરવામાં આવ્યું હતું. બ્રાઉઝર સપોર્ટ આ વિશેષતા માટે સ્કેચી છે, જો કે ઘણી સાઇટ્સ દાવો કરે છે કે તે તમામ આધુનિક બ્રાઉઝર્સ દ્વારા સમર્થિત છે તે HTML4 માં અપ્રચલિત નથી અથવા HTML5 માં અપ્રચલિત નથી કારણ કે તે ક્યાં તો સ્પષ્ટીકરણનો કોઈ સત્તાવાર ભાગ નથી.
આ વિશેષતાનો ઉપયોગ કરવાનું ટાળો અને તેને બદલે તમારી છબીઓને ઑપ્ટિમાઇઝ કરો જેથી તેઓ ઝડપથી લોડ કરે. પૃષ્ઠ લોડિંગની ગતિ સારી વેબ ડિઝાઇનનો એક મહત્વપૂર્ણ ભાગ છે, અને મોટી છબીઓ ધીમું પૃષ્ઠો નીચે અત્યંત-જો તમે LOWSRC લક્ષણનો ઉપયોગ કરો છો તો પણ.