એક છબી આસપાસ લખાણ લપેટી કેવી રીતે

કોઈપણ વેબ પૃષ્ઠ જુઓ અને તમે ટેક્સ્ટ સામગ્રી અને છબીનો સંયોજન જોશો. આ બંને ઘટકો એક વેબસાઇટની સફળતામાં આવશ્યક ઘટકો છે. ટેક્સ્ટ સામગ્રી એ છે કે સાઇટ મુલાકાતીઓ શું વાંચશે અને શોધ એન્જિન કેવી રીતે તેનો રેન્કિંગ ઍલ્ગોરિધમ્સના ભાગ રૂપે ઉપયોગ કરશે . છબીઓ સાઇટ પર વિઝ્યુઅલ રુચિ ઉમેરશે અને ટેક્સ્ટ સામગ્રીને વધુ ને વધુ આકર્ષિત કરવામાં મદદ કરશે.

વેબસાઇટ્સ પર ટેક્સ્ટ અને છબીઓ ઉમેરવાનું સરળ છે. ફકરા, શીર્ષકો અને સૂચિ જેવા પ્રમાણભૂત HTML ટૅગ્સ સાથે ટેક્સ્ટ ઉમેરવામાં આવે છે, જ્યારે છબીઓ ઘટક સાથે પૃષ્ઠ પર મૂકવામાં આવે છે. એકવાર તમે તમારા વેબ પૃષ્ઠ પર એક છબી ઉમેર્યા પછી, તેમછતાં, તમે તેને નીચે સંરેખિત કરવાને બદલે છબીની આગળનો ટેક્સ્ટ ફ્લો મેળવવાની ઇચ્છા રાખી શકો છો (જે એ HTML કોડમાં ઉમેરવામાં આવેલી છબી બ્રાઉઝરમાં રેન્ડર કરશે તે મૂળભૂત રીત છે). ટેક્નિકલ રીતે, તમે આ દેખાવ પ્રાપ્ત કરી શકો છો, ક્યાં તો CSS (ભલામણ) નો ઉપયોગ કરીને અથવા વિઝ્યુઅલ સૂચનાઓ સીધી એચટીએમએલમાં ઉમેરીને (આગ્રહણીય નથી, કારણ કે તમે તમારી વેબસાઇટ માટે શૈલી અને માળખાની અલગ જાળવવા માંગો છો).

CSS નો ઉપયોગ કરવો

પૃષ્ઠના ટેક્સ્ટ અને છબીઓ લેઆઉટને કેવી રીતે બદલવું અને બ્રાઉઝરમાં તેમની વિઝ્યુઅલ સ્ટાઇલ કેવી રીતે દેખાય છે તે બદલવા માટેનો યોગ્ય રસ્તો CSS છે જસ્ટ યાદ રાખો, કારણ કે અમે પૃષ્ઠ પર દ્રશ્ય બદલાવ (એક છબી આસપાસ ટેક્સ્ટ ફ્લો બનાવવા) વિશે વાત કરી રહ્યા છીએ, આનો અર્થ એ કે તે કેસ્કેડીંગ સ્ટાઇલ શીટ્સનું ડોમેઈન છે.

1. પ્રથમ, તમારી છબી તમારા વેબ પૃષ્ઠ પર ઉમેરો. તે HTML થી કોઈપણ વિઝ્યુઅલ લાક્ષણિકતાઓ (જેમ કે પહોળાઈ અને ઊંચાઈ મૂલ્યો) બાકાત રાખવાનું યાદ રાખો. આ ખાસ કરીને એક પ્રતિભાવ વેબસાઇટ માટે મહત્વપૂર્ણ છે જ્યાં છબીનું કદ બ્રાઉઝર પર આધારિત હશે. એડોબ ડ્રીમવેઅર જેવી અમુક સૉફ્ટવેર, પહોળાઈ અને ઉંચાઈ માહિતીને તે સાધન સાથે શામેલ કરવામાં આવશે તે છબીઓને ઉમેરશે, તેથી HTML કોડથી આ માહિતીને દૂર કરવી તેની ખાતરી કરો! ચોક્કસ અલ્ટેટ ટેક્સ્ટ શામેલ કરવા માટે, તેમ છતાં, ખાતરી કરો . અહીં તમારું HTML કોડ કેવી રીતે દેખાશે તેનું એક ઉદાહરણ છે:
2. સ્ટાઇલ હેતુઓ માટે, તમે છબીમાં વર્ગ ઉમેરી શકો છો. આ વર્ગનું મૂલ્ય એ છે કે આપણે આપણા સીએસએસ ફાઈલમાં ઉપયોગ કરીશું. નોંધ કરો કે અહીં આપણે જે મૂલ્યનો ઉપયોગ કરીએ છીએ તે મનસ્વી છે, જો કે, આ ચોક્કસ શૈલી માટે, અમે "ડાબે" અથવા "જમણા" ના મૂલ્યોનો ઉપયોગ કરીએ છીએ, જે રીતે આપણે આપણી છબીને સંરેખિત કરવા જોઈએ. અમે તે સરળ વાક્યરચનાને સારી રીતે કામ કરવા અને અન્ય લોકો માટે સરળ બનાવીએ છીએ જેમને ભવિષ્યમાં સમજવા માટે કોઈ સાઇટનું સંચાલન કરવું પડી શકે છે, પરંતુ તમે ઇચ્છો તે કોઈપણ વર્ગ મૂલ્ય આપી શકો છો.
   2. પોતે જ, આ વર્ગનું મૂલ્ય કંઇપણ કરશે નહીં. છબી આપમેળે ટેક્સ્ટની ડાબી બાજુથી ગોઠવાશે નહીં. આ માટે, હવે આપણે આપણા સીએસએસ ફાઈલને ચાલુ કરવાની જરૂર છે.

1. તમારા સ્ટાઇલશીટમાં, તમે હવે નીચેની શૈલી ઉમેરી શકો છો:
   1. .left {
   2. ફ્લોટ: ડાબે;
   3. ગાદી: 0 20px 20px 0;
   4. }
   5. તમે અહીં શું કર્યું છે તે CSS "ફ્લોટ" પ્રોપર્ટીનો ઉપયોગ કરે છે, જે ઇમેજને સામાન્ય દસ્તાવેજ પ્રવાહમાંથી ખેંચી લેશે (જે રીતે છબી સામાન્ય રીતે પ્રદર્શિત થશે, તે નીચે ટેક્સ્ટ સાથે સંરેખિત થશે) અને તે તેના કન્ટેનરની ડાબી બાજુએ તેને સંરેખિત કરશે . ટેક્સ્ટ કે જે તેના પછી HTML માર્કઅપમાં આવે છે તેની આસપાસ હવે લપેટી છે. અમે કેટલાક પેડિંગ મૂલ્યો પણ ઉમેર્યા છે જેથી આ ટેક્સ્ટ છબીની વિરુદ્ધ સીધો જ નહીં. તેને બદલે, તેમાં સરસ જગ્યા હશે જે પૃષ્ઠની ડિઝાઇનમાં દૃષ્ટિની આકર્ષક હશે. પેડિંગ માટેના સીએસએસ લઘુલિપિમાં, અમે છબીના ટોચ અને ડાબી બાજુ પર 0 મૂલ્યો ઉમેર્યાં છે, અને તેના ડાબા અને તળિયે 20 પિક્સેલ્સ ઉમેર્યા છે. યાદ રાખો, તમારે ડાબા સંરેખિત છબીની જમણી બાજુએ કેટલાક પેડિંગ ઉમેરવાની જરૂર છે. જમણા સંરેખિત છબી (જે અમે એક ક્ષણે જોશું) તેના ડાબા બાજુ પર પેડિંગ લાગુ પડશે.
2. જો તમે બ્રાઉઝરમાં તમારા વેબપેજને જોશો, તો તમારે હવે જોવું જોઈએ કે તમારી છબી પૃષ્ઠની ડાબી બાજુથી ગોઠવાયેલ છે અને ટેક્સ્ટ તેની આસપાસ આવરણમાં છે. આનો બીજો રસ્તો એ છે કે ઈમેજ "ડાબેથી શરૂ થાય છે"

1. જો તમે આ છબીને જમણે સંરેખિત કરવા માંગો છો (જેમ કે ફોટો ઉદાહરણમાં જે આ લેખ સાથે છે), તે સરળ હશે. પ્રથમ, તમારે ખાતરી કરવી જ જોઇએ કે, શૈલી ઉપરાંત અમે ફક્ત "ડાબે" વર્ગના મૂલ્ય માટે અમારા CSS માં ઉમેર્યાં છે, અમારી પાસે યોગ્ય-સંરેખણ માટે પણ એક છે. તે આના જેવું દેખાશે:
   1. .right {
   2. ફ્લોટ: જમણે;
   3. ગાદી: 0 20 20x20px;
   4. }
   5. તમે જોઈ શકો છો કે આ આપણે લખ્યું છે તે પ્રથમ સીએસએસ જેવું છે. માત્ર એટલો જ તફાવત એ છે કે અમે "ફ્લોટ" પ્રોપર્ટી અને અમે ઉપયોગ કરીએ છીએ તે પેડિંગ વેલ્યુ (જમણી બાજુના બદલે અમારી છબીની ડાબી બાજુએ કેટલાકને ઉમેરીને) માટે ઉપયોગ કરીએ છીએ.
2. છેલ્લે, તમે તમારા HTML માં "ડાબી" થી "જમણે" માંથી ઇમેજ વર્ગના મૂલ્યને બદલશો:
3. હવે તમારા પૃષ્ઠને બ્રાઉઝરમાં જુઓ અને તમારી છબી તેના આસપાસ સરસ રીતે લપેટેલો ટેક્સ્ટ સાથે જમણી તરફ ગોઠવાવી જોઈએ. અમે આ શૈલીઓ, "ડાબે" અને "રાઇટ" બંને અમારા સ્ટાઈલશીટમાં ઉમેરતા હોય છે, જેથી જ્યારે અમે વેબ પૃષ્ઠો બનાવી રહ્યા હોઈએ ત્યારે આવશ્યક દ્રશ્ય શૈલીનો ઉપયોગ કરી શકીએ. આ બે પ્રકારો સરસ, ફરીથી વાપરી શકાય તેવી સુવિધાઓ બની શકે છે જ્યારે અમે તેમની આસપાસ ટેક્સ્ટ વીંટિંગ સાથે શૈલીની છબીઓની જરૂર હોય ત્યારે ફરી ચાલુ કરી શકીએ છીએ.

સીએસએસ (અને તમે શા માટે નહીં આ કરવું જોઈએ) ને બદલે HTML નો ઉપયોગ કરવો

ભલે એચટીએલ (HTML) સાથેની છબીની આસપાસ લપેટી ટેક્સ્ટ કરવું શક્ય હોય, પણ વેબ સ્ટાન્ડર્ડ એ સુનિશ્ચિત કરે છે કે CSS (અને ઉપર પ્રસ્તુત કરેલા પગલાં) એ જવાનો રસ્તો છે જેથી અમે માળખું (HTML) અને શૈલી (CSS) ની અલગ જાળવી રાખી શકીએ. આ ખાસ કરીને મહત્વનું છે જ્યારે તમે વિચારો કે, કેટલાક ઉપકરણો અને લેઆઉટ્સ માટે, તે ટેક્સ્ટને છબીની ફરતે ફ્લોર કરવાની જરૂર નથી. નાની સ્ક્રીનો માટે, એક પ્રતિસાદશીલ વેબસાઇટનું લેઆઉટ આવશ્યક છે કે ટેક્સ્ટ ખરેખર છબીની નીચે ગોઠવે છે અને તે છબી સ્ક્રીનની સંપૂર્ણ પહોળાઈને વિસ્તરે છે. આ સરળતાથી મીડિયા ક્વેરીઝ સાથે કરવામાં આવે છે જો તમારી શૈલીઓ તમારા HTML માર્કઅપથી અલગ છે. આજની મલ્ટિ-ડિવાઇસ વિશ્વમાં, જ્યાં વિવિધ મુલાકાતીઓ અને જુદી જુદી સ્ક્રીનો પર છબીઓ અને ટેક્સ્ટ અલગ રીતે દેખાશે, વેબ પેજની લાંબા-ગાળાની સફળતા અને સંચાલન માટે આ વિભાજન જરૂરી છે.