કોઈપણ વેબ પેજને આજે ઓનલાઇન જુઓ અને તમે જોશો કે તેઓ સામાન્ય રીતે અમુક વસ્તુઓને શેર કરે છે. આમાંના એક ચિત્રમાં છબીઓ છે. યોગ્ય છબીઓ વેબસાઇટની પ્રસ્તુતિમાં ખૂબ જ ઉમેરે છે તેમાંથી કેટલીક છબીઓ, એક કંપનીના લોગોની જેમ, સાઇટને બ્રાન્ડ બનાવવામાં સહાય કરે છે અને ડિજિટલ એન્ટિને તમારી ભૌતિક કંપની સાથે કનેક્ટ કરે છે.
તમારા વેબ પૃષ્ઠ પર એક છબી, આયકન અથવા ગ્રાફિક્સ ઉમેરવા માટે, તમારે પૃષ્ઠના HTML કોડમાં ટૅગનો ઉપયોગ કરવાની જરૂર છે. તમે તમારા HTML માં IMG ટૅગને બરાબર મૂકો છો જ્યાં તમે ગ્રાફિકને પ્રદર્શિત કરવા માંગો છો. વેબ બ્રાઉઝર જે પેજના કોડનું રેન્ડરિંગ કરે છે, તે પૃષ્ઠને જોવામાં આવે તે પછી આ ટેગને યોગ્ય ગ્રાફિક સાથે બદલવામાં આવશે. અમારી કંપનીના લોગો ઉદાહરણ પર પાછા જવું, અહીં તમે તમારી સાઇટ પર તે છબી શામેલ કરી શકો છો:
છબી લક્ષણો
ઉપરના HTML કોડને જોતાં, તમે જોશો કે તત્વમાં બે લક્ષણો શામેલ છે. તેમને દરેક ઇમેજ માટે જરૂરી છે.
પ્રથમ લક્ષણ "સ્રોત" છે. આ તદ્દન શાબ્દિક ઈમેજ ફાઇલ છે જે તમે પૃષ્ઠ પર પ્રદર્શિત કરવા માંગો છો. અમારા ઉદાહરણમાં આપણે "logo.png" નામની ફાઇલનો ઉપયોગ કરી રહ્યા છીએ. આ તે ગ્રાફિક છે જે વેબ બ્રાઉઝર જ્યારે સાઇટને રેન્ડર કરે ત્યારે પ્રદર્શિત થશે.
તમે પણ નોંધશો કે આ ફાઇલ નામ પહેલાં, અમે કેટલીક વધારાની માહિતી ઉમેરી છે, "/ images /". આ ફાઈલ પાથ છે. પ્રારંભિક ફોરવર્ડ સ્લેશ સર્વરને ડિરેક્ટરીના રુટમાં તપાસ કરવા કહે છે. તે પછી "ઈમેજો" તરીકે ઓળખાતા ફોલ્ડર અને છેલ્લે "લોગો." નામની ફોલ્ડર જોવા મળશે. તમામ સાઇટના ગ્રાફિક્સને સંગ્રહિત કરવા માટે "છબીઓ" નામના ફોલ્ડરનો ઉપયોગ કરવો એ એક સામાન્ય પ્રથા છે, પરંતુ તમારી ફાઇલ પાથ તમારી સાઇટ માટે જે સંબંધિત છે તેને બદલવામાં આવશે.
બીજા આવશ્યક વિશેષતા એ "alt" ટેક્સ્ટ છે. આ "વૈકલ્પિક ટેક્સ્ટ" છે જે બતાવવામાં આવે છે કે છબી કોઈ કારણોસર લોડ કરવામાં નિષ્ફળ રહી છે. આ ટેક્સ્ટ, જે અમારા ઉદાહરણમાં "કંપની લોગો" વાંચે છે જો ઇમેજ લોડ કરવામાં નિષ્ફળ જાય તો પ્રદર્શિત થશે. તે શા માટે થાય છે? વિવિધ કારણો:
- ખોટો ફાઇલ પાથ
- ખોટો ફાઇલ નામ અથવા ખોટી જોડણી
- ટ્રાન્સમિશન ભૂલ
- ફાઇલ સર્વરમાંથી કાઢી નાખવામાં આવી હતી
અમારી સ્પષ્ટ છબી શા માટે ગુમ થઈ શકે છે તે માટે આ થોડીક શક્યતાઓ છે આ કિસ્સાઓમાં, અમારા મૂળ ટેક્સ્ટ તેના બદલે પ્રદર્શિત થશે.
Alt ટેક્સ્ટ સ્ક્રીન રીડર સૉફ્ટવેર દ્વારા છબીને મુલાકાતીને "વાંચવા" માટે પણ ઉપયોગમાં લેવાય છે, જે દ્રષ્ટિની નબળાઈ છે. કારણ કે તેઓ અમારા જેવા છબીને જોઈ શકતા નથી, આ લખાણ તેમને જાણવા દે છે કે છબી શું છે. એટલા માટે એસ્ટ ટેક્સ્ટ આવશ્યક છે અને શા માટે તે છબીને સ્પષ્ટપણે જણાવવું જોઈએ!
Alt ટેક્સ્ટની સામાન્ય ગેરસમજ એ છે કે તે સર્ચ એન્જિન હેતુઓ માટે જ છે. આ સાચુ નથી. જ્યારે Google અને અન્ય શોધ એન્જિનો આ ટેક્સ્ટને છબીમાં શું છે તે નક્કી કરવા માટે વાંચે છે (યાદ રાખો, તેઓ તમારી છબીને "જોઈ શકતા નથી"), ફક્ત સર્ચ એન્જિનોને અપીલ કરવા માટે તમારે ફક્ત Alt ટેક્સ્ટ ન લખવો જોઈએ. લેખકો મનુષ્યો માટે જેનો સ્પષ્ટ શબ્દ છે જો તમે ટૅગમાં કેટલાક કીવર્ડ્સ ઉમેરી શકો છો જે શોધ એન્જિન્સને અપીલ કરે છે, તે સારું છે, પરંતુ હંમેશાં ખાતરી કરો કે Alt ટેક્સ્ટ એ તેના પ્રાથમિક ઉદ્દેશ્યને બતાવ્યું છે કે છબી કોઈ પણ વ્યક્તિ માટે છે જે ગ્રાફિક્સ ફાઇલને જોઈ શકતી નથી.
અન્ય વિશેષતાઓ
IMG ટેગમાં બે અન્ય વિશેષતાઓ પણ છે જે તમે તમારા વેબ પૃષ્ઠ પર ગ્રાફિક મૂકી ત્યારે ઉપયોગમાં જોઈ શકો છો - પહોળાઈ અને ઊંચાઈ. ઉદાહરણ તરીકે, જો તમે ડ્રીમવિવર જેવા WYSIWYG સંપાદકનો ઉપયોગ કરો છો, તો આપમેળે આ માહિતી તમારા માટે ઉમેરે છે. અહીં એક ઉદાહરણ છે:
WIDTH અને HEIGHT લક્ષણો બ્રાઉઝરને ઇમેજનું કદ જણાવશે. પછી બ્રાઉઝર જાણે છે કે લેઆઉટમાં ફાળવવા માટે કેટલું જગ્યા છે, અને જ્યારે છબી ડાઉનલોડ થાય ત્યારે તે પૃષ્ઠ પર આગલા ઘટક પર જઈ શકે છે. તમારા HTML માં આ માહિતીનો ઉપયોગ કરવામાં સમસ્યા એ છે કે તમે હંમેશાં તમારી છબીને તે ચોક્કસ કદ પર દર્શાવવા માંગતા નથી. ઉદાહરણ તરીકે, જો તમારી પાસે એક પ્રતિસાદી વેબસાઇટ હોય, જેના મુલાકાતીઓ સ્ક્રીન અને ઉપકરણ કદ પર આધારિત કદ બદલવાનું બદલાતું હોય, તો તમે ઇચ્છો કે તમારી છબીઓ લવચીક હોય. જો તમે તમારા એચટીએમએલમાં જણાવેલ છો કે નિશ્ચિત કદ શું છે, તો તમને પ્રતિભાવશીલ સીએસએસ માધ્યમ ક્વેરીઝ સાથે ઓવરરાઇડ કરવું ખૂબ જ મુશ્કેલ લાગશે. આ કારણોસર, અને શૈલી (CSS) અને માળખા (HTML) ના અલગ જાળવવા માટે, એ આગ્રહણીય છે કે તમે તમારા HTML કોડ માટે પહોળાઈ અને ઊંચાઈ એટ્રીબ્યુટ્સને ઉમેરશો નહીં.
એક નોંધ: જો તમે આ કદ બદલવાનું સૂચનોને બંધ કરી દો છો અને CSS માં કોઈ કદનો ઉલ્લેખ કરતા નથી, તો બ્રાઉઝર છબીને તેના ડિફૉલ્ટ, મૂળ કદથી કોઈપણ રીતે બતાવશે.
જેરેમી ગીરર્ડ દ્વારા સંપાદિત