હેડલાઇન્સને સજાવટ માટે ફોન્ટ્સ, બોર્ડર્સ અને છબીઓનો ઉપયોગ કરો
મોટા ભાગના વેબ પૃષ્ઠો પર હેડલાઇન્સ સામાન્ય છે વાસ્તવમાં, કોઈ પણ ટેક્સ્ટ દસ્તાવેજ ઓછામાં ઓછું એક મથાળું ધરાવે છે જેથી તમે જે વાંચી રહ્યાં છો તેનું શીર્ષક જાણો છો. આ હેડલાઇન્સને એચટીએમએલ મથાળું ઘટકો - એચ 1, એચ 2, એચ 3, એચ 4, એચ 5, અને એચ 6 નો ઉપયોગ કરીને કોડેડ કરવામાં આવે છે.
કેટલીક સાઇટ્સ પર, તમને લાગે છે કે હેડલાઇન્સ આ ઘટકોનો ઉપયોગ કર્યા વિના કોડેડ કરવામાં આવે છે. તેના બદલે, હેડલાઇન્સ તેમને ઉમેરવામાં આવેલા ચોક્કસ વર્ગના લક્ષણો અથવા વર્ગ તત્વો સાથે વિભાગો સાથે ફકરાઓનો ઉપયોગ કરી શકે છે. આ અયોગ્ય પ્રથા વિશે મને વારંવાર સાંભળવા માટેનું કારણ એ છે કે ડિઝાઇનર "હેડિંગ જોવાની રીતને પસંદ નથી" ડિફૉલ્ટ રૂપે, શીર્ષકોની બોલ્ડમાં પ્રદર્શિત થાય છે અને તે કદમાં મોટા હોય છે, ખાસ કરીને એચ 1 અને એચ 2 તત્વો જે બાકીનાં ફોટાનું કદ કરતાં વધુ પૃષ્ઠના ટેક્સ્ટ કરતાં પ્રદર્શિત થાય છે. ધ્યાનમાં રાખો કે આ ફક્ત આ ઘટકોનો મૂળભૂત દેખાવ છે! CSS સાથે, જો તમે ઇચ્છો છો તો તમે મથાળું દેખાવ કરી શકો છો! તમે ફોન્ટનું કદ બદલી શકો છો, બોલ્ડ દૂર કરી શકો છો, અને ઘણું બધું. શીર્ષકો એ પૃષ્ઠની હેડલાઇન્સને કોડ કરવાની યોગ્ય રીત છે અહીં શા માટે કેટલાક કારણો છે
શા માટે ડીવીવી અને સ્ટાઇલ કરતાં મથાળું ટૅગ્સ વાપરવો
મથાળા ટૅગ્સ જેવા શોધ એન્જિન્સ
આ મથાળાઓનો ઉપયોગ કરવાનો શ્રેષ્ઠ કારણ છે, અને તેને યોગ્ય ક્રમમાં (એટલેકે, h1, પછી h2, પછી h3, વગેરે) નો ઉપયોગ કરો. શોધ એંજીન ટૅગ્સના મથાળાની અંદર શામેલ ટેક્સ્ટને સૌથી વધુ ભાર આપે છે કારણ કે તે ટેક્સ્ટમાં સિમેન્ટીક મૂલ્ય છે. બીજા શબ્દોમાં, તમારા પૃષ્ઠ શીર્ષક H1 ને લેબલ કરીને, તમે સર્ચ એન્જિન સ્પાઈડરને કહી શકો છો કે તે પૃષ્ઠના # 1 ફોકસ છે. H2 શીર્ષકોના # 2 પર ભાર મૂકવામાં આવે છે, અને તેથી વધુ.
તમને તમારી હેડલાઇન્સ વ્યાખ્યાયિત કરવા માટે કયા વર્ગોનો ઉપયોગ કરવામાં આવ્યો છે તે યાદ રાખવું નહીં
જ્યારે તમે જાણો છો કે તમારા બધા વેબ પૃષ્ઠો H1 પાસે જઈ રહ્યા છે જે બોલ્ડ, 2em અને પીળા છે, તો પછી તમે તે એકવાર તમારી સ્ટાઇલશીટમાં વ્યાખ્યાયિત કરી શકો છો અને પૂર્ણ કરી શકો છો. 6 મહિના પછી, જ્યારે તમે બીજા પૃષ્ઠ ઉમેરી રહ્યા છો, ત્યારે તમે તમારા પૃષ્ઠની ટોચ પર ફક્ત H1 ટેગ ઉમેરો છો, તમારે મુખ્ય પૃષ્ઠને વ્યાખ્યાયિત કરવા માટે કયા શૈલી ID અથવા વર્ગનો ઉપયોગ કર્યો છે તે જાણવા માટે તમારે અન્ય પૃષ્ઠો પર પાછા જવું પડશે નહીં. હેડલાઇન અને પેટા હેડ.
તેઓ એક મજબૂત પૃષ્ઠ રૂપરેખા પૂરી પાડે છે
આઉટલાઇન્સ વાંચવા માટે ટેક્સ્ટને સરળ બનાવે છે એટલા માટે મોટાભાગના યુ.એસ. શાળાઓ વિદ્યાર્થીઓને કાગળ લખતા પહેલા એક રૂપરેખા લખવા માટે શીખવતા હતા. જ્યારે તમે આઉટલાઇન ફોર્મેટમાં મથાળા ટૅગ્સનો ઉપયોગ કરો છો, ત્યારે તમારા ટેક્સ્ટમાં એક સ્પષ્ટ માળખું છે જે ખૂબ ઝડપથી દેખાય છે. ઉપરાંત, સાધનો એવા છે જે સારાંશ પ્રદાન કરવા માટે પૃષ્ઠની રૂપરેખાની સમીક્ષા કરી શકે છે, અને તે બાહ્યરેખાના માળખા માટેના ટૅગ્સને આધારે આધાર રાખે છે.
સ્ટાઇલ ચાલુ હોવા છતાં તમારું પૃષ્ઠ સેન્સ કરશે
દરેક વ્યક્તિ સ્ટાઇલ શીટ્સ જોઈ શકે છે અથવા તેનો ઉપયોગ કરી શકે છે (અને આ # 1 પર પાછો આવે છે - શોધ એંજીન્સ તમારા પૃષ્ઠની સામગ્રી (પાઠ્ય), સ્ટાઇલ શીટ્સ નહીં) જુઓ. જો તમે હેડિંગ ટેગ્સનો ઉપયોગ કરો છો, તો તમે તમારા પૃષ્ઠોને વધુ સુલભ બનાવી રહ્યા છો કારણ કે હેડલાઇન્સ એવી માહિતી પૂરી પાડે છે કે જે DIV ટેગ નહીં કરે.
તે સ્ક્રીન રીડર્સ અને વેબસાઈટ સુલભતા માટે ઉપયોગી છે
શીર્ષકોનો યોગ્ય ઉપયોગ દસ્તાવેજને લોજિકલ માળખું બનાવે છે. આ સ્ક્રીન વાચકો વિઝ્યુઅલ ડિવાયરમેન્ટ સાથે સાઇટ પર "વાંચવા" માટે ઉપયોગ કરશે, જે તમારી સાઇટને અપંગ લોકો માટે સુલભ કરશે.
તમારા હેડલાઇન્સના ટેક્સ્ટ અને ફૉન્ટનો પ્રકાર
શીર્ષકોના ટૅગ્સના "મોટા, બોલ્ડ, અને બિહામણું" સમસ્યાથી દૂર થવાનો સૌથી સહેલો રસ્તો એ છે કે ટેક્સ્ટને તમે જે રીતે જોવા માંગો છો તેને શૈલીમાં લખવું. હકીકતમાં, જ્યારે હું નવી વેબસાઇટ પર કામ કરું છું, ત્યારે હું ખાસ કરીને ફકરો, એચ 1, એચ 2, અને એચ 3 શૈલીઓ પ્રથમ વસ્તુ લખું છું. હું સામાન્ય રીતે માત્ર ફૉન્ટ પરિવાર અને કદ / વજન સાથે વળગી રહું છું. ઉદાહરણ તરીકે, આ એક નવી સાઇટ માટેની પ્રારંભિક શૈલી શીટ હોઈ શકે છે (આ ફક્ત અમુક ઉદાહરણ શૈલીઓ છે જેનો ઉપયોગ કરી શકાય છે):
body, html {margin: 0; પેડિંગ: 0; } પૃષ્ઠ {ફોન્ટ: 1em એરિયલ, જીનીવા, હેલ્વેટિકા, સાન્સ-સેરીફ; } h1 {font: bold 2em "ટાઇમ્સ ન્યૂ રોમન", ટાઇમ્સ, સેરીફ; } h2 {font: bold 1.5em "ટાઇમ્સ ન્યૂ રોમન", ટાઇમ્સ, સેરીફ; } h3 {font: બોલ્ડ 1.2 એમ એરિયલ, જીનીવા, હેલ્વેટિકા, સાન્સ-સેરીફ; }તમે તમારી હેડલાઇનના ફોન્ટ્સને સંશોધિત કરી શકો છો અથવા ટેક્સ્ટ શૈલી અથવા ટેક્સ્ટ રંગ બદલી શકો છો. આ બધા તમારા "બિહામણું" હેડલાઇનને વધુ ગતિશીલ અને તમારા ડિઝાઇન સાથે રાખવામાં આવશે.
h1 {font: બોલ્ડ ઇટાલિક 2em / 1em "ટાઇમ્સ ન્યૂ રોમન", "એમએસ સેરીફ", "ન્યૂ યોર્ક", સેરીફ; હાંસિયો: 0; પેડિંગ: 0; રંગ: # e7ce00; }બોર્ડર્સ હેડલાઇન્સ ઉપર પહેરવેશ કરી શકશે
સરહદો તમારી હેડલાઇન્સને બહેતર બનાવવા માટે એક સરસ રીત છે અને સરહદો ઉમેરવા માટે સરળ છે. પરંતુ સરહદો સાથે પ્રયોગ કરવાનું ભૂલશો નહીં - તમારે તમારા હેડલાઇનની દરેક બાજુ પર સરહદની જરૂર નથી. અને તમે માત્ર સાદા કંટાળાજનક સરહદો કરતાં વધુ ઉપયોગ કરી શકો છો.
h1 {font: બોલ્ડ ઇટાલિક 2em / 1em "ટાઇમ્સ ન્યૂ રોમન", "એમએસ સેરીફ", "ન્યૂ યોર્ક", સેરીફ; હાંસિયો: 0; પેડિંગ: 0; રંગ: # e7ce00; સીમા-ટોચ: ઘન # e7ce00 માધ્યમ; સરહદ તળિયે: પથરાયેલા # e7ce00 પાતળા; પહોળાઈ: 600px; }કેટલીક રસપ્રદ દ્રશ્ય શૈલીઓ રજૂ કરવા માટે મેં મારા નમૂનાની મથાળાની ટોચ અને તળિયે સીમા ઉમેર્યું છે તમે ઇચ્છો તે ડિઝાઇન શૈલીને હાંસલ કરવા ઇચ્છતા કોઈપણ રીતે બોર્ડર્સને ઉમેરી શકો છો
પણ વધુ Pizazz માટે તમારી હેડલાઇન્સ માટે પૃષ્ઠભૂમિ છબીઓ ઉમેરો
ઘણા વેબ સાઇટ્સ પાસે પેજની ટોચ પર હેડર વિભાગ છે જેમાં હેડલાઇનનો સમાવેશ થાય છે - ખાસ કરીને સાઇટ શીર્ષક અને ગ્રાફિક. મોટાભાગના ડિઝાઇનરો આને બે જુદા ઘટકો તરીકે વિચારે છે, પરંતુ તમારે આવશ્યક નથી. જો ગ્રાફિક ત્યાં માત્ર હેડલાઇનને સુશોભિત કરવા માટે છે, તો શા માટે તે શીર્ષકોની શૈલીમાં ઉમેરતા નથી?
h1 {font: બોલ્ડ ઇટાલિક 3em / 1em "ટાઇમ્સ ન્યૂ રોમન", "એમએસ સેરીફ", "ન્યૂ યોર્ક", સર્ફ; પૃષ્ઠભૂમિ: #fff url ("fancyheadline.jpg") પુનરાવર્તન- x તળિયું; ગાદી: 0.5 અંશ 90 પીએક્સ 0; ટેક્સ્ટ-સંરેખિત: કેન્દ્ર; હાંસિયો: 0; સીમા-તળિયું: નક્કર # e7ce00 0.25em; રંગ: # e7ce00; }આ હેડલાઇનમાંની યુક્તિ એ છે કે મને ખબર છે કે મારી છબી 90 પિક્સેલ ઊંચી છે. તેથી મેં 90px (પેડિંગ: 0.5 0 90px 0p;) ની હેડલાઇનના તળિયે પેડિંગ ઉમેર્યું . જ્યાં તમે ઇચ્છો ત્યાં બરાબર પ્રદર્શિત કરવા માટે હેડલાઇનના ટેક્સ્ટને મેળવવા માટે તમે માર્જિન, લાઇન-ઊંચાઈ અને પેડિંગ સાથે રમી શકો છો.
છબીઓનો ઉપયોગ કરતી વખતે યાદ રાખવું એક વસ્તુ એ છે કે જો તમારી પાસે એક પ્રતિભાવ વેબસાઇટ છે (જે તમારે કરવી જોઈએ) જે સ્ક્રીન માપો અને ઉપકરણો પર આધારિત બદલાતી રહે છે, તો તમે હેડલાઇન હંમેશાં સમાન કદ નહીં હોત. જો તમને તમારી હેડલાઇનને ચોક્કસ માપની જરૂર હોય, તો તે સમસ્યાઓ ઊભી કરી શકે છે. તે એક કારણ છે કે હું સામાન્ય રીતે હેડલાઇનમાં પૃષ્ઠભૂમિ છબીઓને ટાળીએ છીએ, તે ઠંડી છે કારણ કે તે ક્યારેક જોવા મળે છે.
હેડલાઇન્સમાં ઇમેજ રિપ્લેસમેન્ટ
વેબ ડીઝાઇનરો માટે આ એક લોકપ્રિય તકનીક છે કારણ કે તે તમને ગ્રાફિકલ હેડલાઇન બનાવવાની પરવાનગી આપે છે અને તે છબી સાથેના મથાળા ટેગની ટેક્સ્ટને બદલો. આ સચોટ રીતે વેબ ડીઝાઇનરો તરફથી એક પ્રાચીન પ્રથા છે જે ખૂબ થોડા ફોન્ટ્સની ઍક્સેસ ધરાવે છે અને તેમના કામમાં વધુ વિદેશી ફોન્ટ્સનો ઉપયોગ કરવા માગે છે. વેબ ફોન્ટ્સનું ઉદય ખરેખર બદલાઈ ગયું છે કે કેવી રીતે ડિઝાઇનર્સ સાઇટ્સનો સંપર્ક કરે છે. હેડલાઇન્સ હવે વિવિધ પ્રકારના ફોન્ટ્સ અને ઈમેજો સાથે સેટ કરી શકાય છે, જે એમ્બેડેડ ફોન્ટ્સ સાથે લાંબા સમય સુધી જરૂરી નથી. જેમ કે, તમે જૂની સાઇટ્સ પર ફક્ત હેડલાઇન્સ માટે CSS છબીઓ રિપ્લેસમેન્ટ મેળવશો જે હજુ સુધી વધુ આધુનિક પદ્ધતિઓમાં અપડેટ કરવામાં આવ્યાં નથી.
જેનિફર કિનાન દ્વારા મૂળ લેખ. 9/6/17 પર જેરેમી ગીરર્ડ દ્વારા સંપાદિત