સી.એસ.એસ. સાથે એચટીએમએલમાં જગ્યાઓ અને ભૌતિક અલગ બનાવવું
એચટીએમએલમાં જગ્યાઓનું ભૌતિક વિભાજન બનાવવું અને શરૂઆતમાં વેબ ડિઝાઈનર માટે સમજવું મુશ્કેલ બની શકે છે. આનું કારણ એ છે કે એચટીએમએલ પાસે એક સંપત્તિ છે જેને '' સફેદજગ્યાના પતન '' તરીકે ઓળખવામાં આવે છે. પછી ભલે તમે તમારા HTML કોડમાં 1 જગ્યા અથવા 100 લખો, વેબ બ્રાઉઝર આપમેળે તે ખાલી જગ્યાઓને એક જ જગ્યામાં તૂટી જાય છે. આ માઈક્રોસોફ્ટ વર્ડ જેવી પ્રોગ્રામથી અલગ છે, જે દસ્તાવેજ સર્જકોને તે દસ્તાવેજોના શબ્દો અને અન્ય ઘટકોને અલગ કરવા માટે બહુવિધ જગ્યાઓ ઉમેરવા માટે પરવાનગી આપે છે.
વેબસાઇટ ડિઝાઇન અંતરનું કામ કેવી રીતે થાય તે નથી.
તો, તમે HTML માં વ્હાઇટસ્પેસેસ કેવી રીતે ઉમેરશો જે વેબ પૃષ્ઠ પર દેખાય છે ? આ લેખમાં જુદી જુદી રીતો છે.
CSS માં HTML માં સ્થાન
તમારા એચટીએમએલમાં જગ્યાઓ ઉમેરવા માટેની પ્રાધાન્યવાળી રીત કેસ્કેડીંગ સ્ટાઇલ શીટ્સ (સીએસએસ) છે . વેબપેજના કોઈપણ દ્રશ્ય પાસાઓને ઉમેરવા માટે સીએસએસનો ઉપયોગ થવો જોઈએ, અને કારણ કે અંતર એ પૃષ્ઠની વિઝ્યુઅલ ડિઝાઇન લાક્ષણિકતાઓનો ભાગ છે, CSS છે જ્યાં તમે આ કરવા માંગો છો.
CSS માં, તમે તત્વોની ફરતે જગ્યા ઉમેરવા માટે માર્જિન અથવા પેડિંગ ગુણધર્મોનો ઉપયોગ કરી શકો છો. વધુમાં, ટેક્સ્ટ ઇન્ડેન્ટ પ્રોપર્ટી ટેક્સ્ટની આગળના ભાગમાં જગ્યા ઉમેરે છે, જેમ કે ફકરાને ઇન્ડેન્ટેંગ કરવા માટે
અહીં તમારા બધા ફકરાઓની આગળ જગ્યા ઉમેરવા માટે CSS નો ઉપયોગ કેવી રીતે કરવો તે એક ઉદાહરણ છે. નીચેની બાહ્ય અથવા આંતરિક શૈલી શીટ પર CSS ઉમેરો:
પૃષ્ઠ {
ટેક્સ્ટ ઇન્ડેન્ટ: 3em;
}
HTML માં સ્થાનો: ઇનસાઇડ યોર ટેક્સ્ટ
જો તમે તમારા ટેક્સ્ટમાં વધારાની જગ્યા અથવા બે ઉમેરવા માંગો છો, તો તમે નૉન-બ્રેકિંગ સ્પેસનો ઉપયોગ કરી શકો છો.
આ પાત્ર માત્ર એક સ્ટાન્ડર્ડ સ્પેસ પાત્રની જેમ કામ કરે છે, ફક્ત તે બ્રાઉઝરની અંદર તૂટી પડતું નથી.
ટેક્સ્ટની લાઇનની અંદર પાંચ સ્થાનોને કેવી રીતે ઉમેરવું તેનો અહીં એક ઉદાહરણ છે:
આ ટેક્સ્ટની અંદર પાંચ વધારાની જગ્યા છે
HTML નો ઉપયોગ કરે છે:
આ ટેક્સ્ટમાં & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; છે તેની અંદરની પાંચ વધારાની જગ્યાઓ
તમે વધારાનો રેખા બ્રેક ઉમેરવા માટે ટૅગનો ઉપયોગ પણ કરી શકો છો.
આ સજામાં તેના અંતમાં પાંચ લાઇન બ્રેક્સ છે
એચટીએમએલમાં કેમ અંતર ખરાબ આઈડિયા છે
જ્યારે આ વિકલ્પો બંને કામ કરે છે - બિન-તોડવું જગ્યાઓના ઘટક ખરેખર તમારા ટેક્સ્ટને અંતર ઉમેરશે અને લાઇન બ્રેક્સ ઉપર દર્શાવેલ ફકરા નીચે અંતર ઉમેરશે - આ તમારા વેબપૃષ્ઠમાં અંતર બનાવવાનો શ્રેષ્ઠ રસ્તો નથી. તમારા HTML પર આ ઘટકો ઉમેરવાથી વિઝ્યુઅલ સ્ટાઇલ (CSS) માંથી પૃષ્ઠ (HTML) ના માળખાને અલગ કરવાનીને બદલે કોડમાં વિઝ્યુઅલ માહિતી ઉમેરવામાં આવે છે. શ્રેષ્ઠ પદ્ધતિઓ સૂચવે છે કે આ ભવિષ્યના અને સમગ્ર ફાઇલ કદ અને પૃષ્ઠ પ્રદર્શનમાં અપડેટ કરવામાં સરળતા સહિત, ઘણા કારણોસર અલગ રહેવું જોઈએ.
જો તમે તમારી બધી શૈલીઓ અને અંતરને નિર્ધારિત કરવા માટે બાહ્ય સ્ટાઇલ શીટનો ઉપયોગ કરો છો, તો પછી સમગ્ર સાઇટ માટે તે શૈલીઓ બદલવી સરળ છે, કારણ કે તમારે ફક્ત એક શૈલી શીટને અપડેટ કરવું પડશે.
સજાના ઉપરના ઉદાહરણને અંતે પાંચ ટેગ સાથે ધ્યાનમાં રાખો. જો તમે ઇચ્છતા હો કે પ્રત્યેક ફકરાના તળિયે અંતરનો જથ્થો, તો તમારે તે HTML કોડને તમારી સંપૂર્ણ સાઇટમાં દરેક ફકરામાં ઉમેરવાની જરૂર રહેશે. તે વધારાની માર્કઅપનો ન્યાયી જથ્થો છે જે તમારા પૃષ્ઠોને ફૂંકશે.
વધુમાં, જો તમે રસ્તા નક્કી કરો છો કે આ અંતર ખૂબ જ અથવા ખૂબ ઓછું છે, અને તમે તેને થોડી ફેરફાર કરવા માંગો છો, તો તમારે તમારી સંપૂર્ણ વેબસાઇટમાં દરેક એક ફકરો બદલવાની જરૂર છે. નહીં અાભાર તમારો!
આ અંતર તત્વોને તમારા કોડમાં ઉમેરવાને બદલે, CSS નો ઉપયોગ કરો.
પૃષ્ઠ {
પેડિંગ-તળિયું: 20 પીએક્સ;
}
તે એક લીટી CSS તમારા પૃષ્ઠના ફકરાઓ હેઠળ અંતર ઉમેરશે. જો તમે ભવિષ્યમાં તે અંતરને બદલવા માગો છો, તો આ એક લીટી (તમારા સમગ્ર સાઇટના કોડને બદલે) ને સંપાદિત કરો અને તમે જઇ શકો છો!
હવે, જો તમારે તમારી વેબસાઇટના એક ભાગમાં એક ખાલી જગ્યા ઉમેરવાની જરૂર હોય, તો
ટેગ અથવા એક જ બિન-ભંગાણ જગ્યાનો ઉપયોગ કરવો એ વિશ્વનો અંત નથી, પરંતુ તમારે સાવચેત રહેવાની જરૂર છે.
આ ઇનલાઇન HTML અંતર વિકલ્પોનો ઉપયોગ એક લપસણો ઢાળ હોઈ શકે છે. જ્યારે એક અથવા બે તમારી સાઇટને નુકસાન નહીં કરે, જો તમે તે પાથને ચાલુ રાખો છો, તો તમે તમારા પૃષ્ઠોમાં સમસ્યાઓનો પ્રસ્તુત કરશો. અંતે, તમે HTML અંતર માટે CSS તરફ વળ્યાં છે, અને અન્ય તમામ વેબપૃષ્ઠ દ્રશ્ય જરૂરિયાતો