વર્ડ પ્રોસેસર તરીકે HTML અને CSS. આ તમારે જાણવાની જરૂર છે

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

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

ટેક્સ્ટ્સ માટે HTML અને CSS: એક માન્ય વિકલ્પ

પ્રથમ જાણવાની વાત તે છે .html દસ્તાવેજ જોવા માટે તમારે વેબ બ્રાઉઝરની જરૂર છે. આ તે છે જે તેને પ્રસ્તુત કરવા અને તેની સામગ્રી પ્રદર્શિત કરવા માટે જવાબદાર છે, અને તે પણ જે અમને દસ્તાવેજ છાપવાની મંજૂરી આપશે. તે સૉફ્ટવેર નથી કે જે આપણે અલગથી ઇન્સ્ટોલ કરવું પડશે, કારણ કે અમારી પાસે પહેલાથી જ કોઈપણ પીસી અથવા મોબાઇલ ઉપકરણ પર છે.

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

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

બધા ટૅગ્સ "મોટા કરતાં" (<) અને "ઓછા કરતાં" (>) ચિહ્નો સાથે ખુલે છે અને બંધ થાય છે, પરંતુ બંધ થતા ટૅગમાં સામાન્ય રીતે તેની આગળ સ્લેશ (/) હોય છે.

આ સમજાવવા સાથે, ચાલો સૌથી મહત્વની બાબત તરફ આગળ વધીએ.

HTML અને CSS માં રક્તસ્ત્રાવ

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

HTML હેડરો

HTML હેડરો "h" સાથે લખવામાં આવે છે અને ત્યારબાદ 1 થી 6 સુધીની સંખ્યા આવે છે. ઉદાહરણ તરીકે, "HTML હેડર્સ" માં અગાઉનું લખાણ "h2" છે અને સંપૂર્ણ ટેક્સ્ટ આ હશે:

HTML હેડરો

બોલ્ડ, ઇટાલિક, સ્ટ્રાઇકથ્રુ અને હાઇલાઇટિંગ

માર્કડાઉન લેખના ક્રમને અનુસરીને, આગળ બોલ્ડ, ઇટાલિક, સ્ટ્રાઇકથ્રુ અને હાઇલાઇટિંગ છે. તેઓ આના જેવા હશે:

બોલ્ડ ટેક્સ્ટ ઇટાલિક  ક્રોસ કરેલ ટેક્સ્ટ હાઇલાઇટ કરેલ ટેક્સ્ટ

તે આ બતાવશે:

બોલ્ડ ટેક્સ્ટ
ઇટાલિક ટેક્સ્ટ
પટ્ટીવાળા લખાણ
હાઇલાઇટ કરેલ ટેક્સ્ટ

પાવર અને સબસ્ક્રીપ્ટ

જો આપણે એક નાનો અને કંઈક અંશે વધેલો નંબર (પાવર) અથવા સામેની બાજુએ (સબસ્ક્રિપ્ટ) મૂકવા માંગીએ છીએ, તો અમે આ લેબલ્સ સાથે કરી શકીએ છીએ:

પાવર સબઇન્ડેક્સ

ફકરા

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

આ બે ટૅગ્સ વચ્ચે આપણે જે બધું મૂકીશું તે ફકરો હશે. જો આપણે બીજી એક મૂકીએ, તો બંને વચ્ચે રેખા વિરામ હશે. બ્લોક લેબલની અંદર અન્ય પણ હોઈ શકે છે, જેમ કે બોલ્ડ પોઈન્ટ વગેરે, અને અન્ય ઇનલાઈન લેબલ. સિદ્ધાંતમાં, અહીંની દરેક વસ્તુ સતત ફકરો હશે. જો આપણે તેને અલગ કરવા માંગીએ છીએ, તો અમારે અન્ય ઉમેરવા પડશે અથવા ટૅગ્સનો ઉપયોગ કરવો પડશે જેનો અમે પછીથી ઉલ્લેખ કરીશું.

સૂચિ

એચટીએમએલમાં ઓછામાં ઓછી સૌથી મૂળભૂત સૂચિઓ ક્રમાંકિત અને અવ્યવસ્થિત છે. જેઓ તેમને જાણતા નથી તેમના માટે તેઓ મૂંઝવણમાં મૂકે છે, પરંતુ વિઝ્યુઅલ સ્ટુડિયો કોડ જેવા સંપાદક વસ્તુઓને સરળ બનાવે છે. તેનું સિન્ટેક્સ આ હશે:

આઇટમ 1 ઓર્ડર વિના તત્વ 2 ઓર્ડર વિના તત્વ 3 ઓર્ડર વિના આઇટમ 1 સૉર્ટ કરેલ આઇટમ 2 સૉર્ટ આઇટમ 3 સૉર્ટ

આ બતાવશે

• આઇટમ 1 ઓર્ડર વિના
• આઇટમ 2 ઓર્ડર વિના
• આઇટમ 3 ઓર્ડર વિના

1. આઇટમ 1 સૉર્ટ કરેલ
2. આઇટમ 2 સૉર્ટ કરેલ
3. આઇટમ 3 સૉર્ટ કરેલ

સૂચિઓ લેબલો સાથે ખોલવામાં અને બંધ કરવામાં આવે છે, જો તે અવ્યવસ્થિત હોય તો "ul" આગળ એક બોલ બતાવશે, અને "ol" જો તેઓ ઓર્ડર કરે તો અને મૂળભૂત રીતે આગળ એક નંબર મૂકશે. ક્રમાંકિત રાશિઓ આપમેળે ક્રમાંકિત થાય છે, એટલે કે, શરૂઆતના ટેગ પછીના પ્રથમ ઘટકની આગળ 1, બીજામાં 2 અને તેથી વધુ.

સૂચિ સંયોજનો માટે, તમારે સમાન ટૅગ્સ ("ul" અથવા "ol") સાથે સબલિસ્ટ્સ શરૂ કરવી પડશે.

વ્યાખ્યા સૂચિઓ પણ છે, જે "dl" લેબલથી શરૂ થાય છે અને સમાપ્ત થાય છે અને અંદર આ વાક્યરચના સાથેના શબ્દો (dt) અને વ્યાખ્યાઓ (dd) છે:

Linux સિસ્ટમો અમને ગમે છે વિન્ડોઝ સિસ્ટમો કે જેનો આપણે અહીં વધુ ઉપયોગ કરતા નથી

તે આ બતાવશે:

Linux

    સિસ્ટમો અમને ગમે છે

વિન્ડોઝ

    સિસ્ટમો કે જેનો આપણે અહીં વધુ ઉપયોગ કરતા નથી

કાર્ય યાદીઓ

HTML માં કોઈ કાર્ય સૂચિઓ નથી, પરંતુ તે બનાવી શકાય છે. આ હાંસલ કરવા માટે તમારે એક ચેક બોક્સ ઉમેરવું પડશે, અને તે આના જેવું દેખાશે:

પ્રથમ તત્વ બીજું તત્વ ત્રીજું તત્વ

તે આ બતાવશે:

• પ્રથમ તત્વ
• બીજું તત્વ
• ત્રીજું તત્વ

અહીં અમે યાદીઓમાં ડિફોલ્ટ રૂપે દેખાતી ડિસ્કને દૂર કરવા માટે CSS નિયમ રજૂ કર્યો છે. અને અમે તેને થોડું જટિલ કર્યું છે, પરંતુ તેને સરળ બનાવી શકાય છે. લેબલનો ભાગ અવગણવામાં આવી શકે છે, પરંતુ જો તે ઉદાહરણ તરીકે મૂકવામાં આવે, તો ટેક્સ્ટ જ્યારે ક્લિક કરવામાં આવે ત્યારે બૉક્સને ચિહ્નિત કરવા માટે પણ સેવા આપશે.

HTML માં લિંક્સ

લિંક્સ "a" ટૅગ સાથે બનાવવામાં આવે છે, અને આ માળખું ધરાવે છે:

<a href="https://linuxadictosLinux (અને HTML?) વિશે તમારો બ્લોગ

તે આ બતાવશે:

Linux (અને HTML?) વિશે તમારો બ્લોગ

લિંક "href" એટ્રિબ્યુટ પછી જાય છે, અને ટેક્સ્ટ ઓપનિંગ અને ક્લોઝિંગ ટૅગ્સ વચ્ચે જાય છે.

લિંક્સ ઓળખકર્તાને નિર્દેશ કરી શકે છે. ઉદાહરણ તરીકે, જો આપણે ઓપનિંગ ટેગમાં કોઈ એલિમેન્ટમાં id=”test” ઉમેરીએ, તો અમે #test લિંકનો ઉપયોગ કરી શકીએ છીએ જેથી તેના પર ક્લિક કરવાથી તે એલિમેન્ટ પર લઈ જઈએ, જ્યાં સુધી તે સમાન પેજ પર હોય. નહિંતર, હેશ અને ઓળખકર્તા .html પછી મૂકવામાં આવશે.

HTML માં છબીઓ

HTML છબીઓને "img" ટૅગમાં આ રીતે ઉમેરવામાં આવે છે:

હવે, જો આપણે બધું એક ડોક્યુમેન્ટમાં હોય તેવું ઈચ્છીએ છીએ, તો આપણે તેને base64 માં કન્વર્ટ કરી શકીએ છીએ અને તેને બીજી રીતે ઉમેરી શકીએ છીએ

જો આપણે ઈચ્છીએ છીએ કે ઈમેજ આપણને બીજા વેબ પેજ પર લઈ જાય, તો આપણે તેને તેના અનુરૂપ "href" સાથે "a" વડે ઘેરવું પડશે.

નિમણૂક

અવતરણના બે પ્રકાર છે, પરંતુ સૌથી વધુ ઉપયોગમાં લેવાતા અવતરણો બ્લોક અવતરણો છે. પ્રારંભિક ફકરા સાથે સંયુક્ત, તે આના જેવો દેખાશે:

અને પાબ્લિનક્સે કહ્યું: અમે HTML અને CSS નો ઉપયોગ કરીને ટેક્સ્ટ ડોક્યુમેન્ટ્સ કેવી રીતે બનાવવું તે સમજાવવા જઈ રહ્યા છીએ.

તે આ બતાવશે:

અને પાબ્લિનક્સે કહ્યું:

અમે HTML અને CSS નો ઉપયોગ કરીને ટેક્સ્ટ ડોક્યુમેન્ટ્સ કેવી રીતે બનાવવું તે સમજાવવા જઈ રહ્યા છીએ.

અમે "ઉદ્ધરણ" ટૅગ સાથે ઇનલાઇન અવતરણોનો સમાવેશ કરી શકીએ છીએ, જે સામાન્ય રીતે તેને ઇટાલિકમાં મૂકે છે. જો દસ્તાવેજ અમારા માટે છે, તો અમે "i" અથવા "em" નો ઉપયોગ પણ કરી શકીએ છીએ અને અમે સમાન અસર પ્રાપ્ત કરીશું. તે ટેક્સ્ટને અવતરણમાં મૂકવાની ભલામણ કરવામાં આવે છે.

જો આપણે અવતરણો નેસ્ટ કરવા માંગતા હોય, તો આપણે ફક્ત એક "બ્લોકક્વોટ" બીજાની અંદર મૂકવો પડશે.

HTML કોડ

HTML માં કોડ "કોડ" ટૅગ્સ વચ્ચે મૂકવામાં આવે છે, અને તેમાં વધુ રહસ્ય નથી. તે સામાન્ય રીતે તેને મોનોસ્પેસવાળા ફોન્ટ સાથે રજૂ કરે છે, અને તેના ટૅગ્સનો ઉપયોગ કરીને આપણે સિમેન્ટીકલી સાચા હોઈ શકીશું (આ એક HTML મુદ્દો છે) અને અમે બધા કોડને એક વિશિષ્ટ ફોર્મેટ પણ આપી શકીએ છીએ. તે કેટલાકની જેમ સુંદર બનશે નહીં માર્કડાઉન સંપાદકો, જ્યાં સુધી અમે તેને એક ફોર્મેટ આપીએ છીએ જે અહીં સ્વચાલિત થશે નહીં.

કોષ્ટકો

સૂચિઓની જેમ, કોષ્ટકો પણ બનાવવા માટે થોડી જટિલ હોઈ શકે છે, પરંતુ આ બિંદુને ઉમેરીને આપણે HTML અને CSS સાથે અમારા ટેક્સ્ટ દસ્તાવેજોમાં વધુ કરી શકીએ છીએ. તે કરવાની સાચી રીતમાં ત્રણ ભાગો હશે: "thead", "tbody" અને "tfoot" જે "ટેબલ" ટૅગની અંદર જશે, પરંતુ જો કોષ્ટકો સરળ હોય અને અમારે અલગ કરવાની જરૂર ન હોય તો તમે ત્રણેયને છોડી શકો છો. તેમની સામગ્રી.

કોષ્ટકોની અંદર આપણે ડેટા (td) સાથે રેખાઓ (tr) બનાવવાની છે અને માળખું આના જેવું હશે:

એક હેડર અન્ય હેડર ત્રીજું હેડર ફ્રન્ટ લાઇન પર માહિતીનો ટુકડો ફ્રન્ટ લાઇન પરની માહિતીનો બીજો ભાગ પ્રથમ પંક્તિમાં ત્રીજી હકીકત બીજી લાઇન પરની માહિતીનો ટુકડો બીજી લાઇન પર અન્ય માહિતી બીજી લાઇનમાં ત્રીજો ડેટા ત્રીજી લાઇન પર માહિતીનો ટુકડો ત્રીજી લાઇન પર અન્ય માહિતી ત્રીજી લાઇનમાં ત્રીજો ડેટા પ્રથમ પરિણામ બીજું પરિણામ ત્રીજું પરિણામ

તે આને પ્રદર્શિત કરશે (ફોર્મેટ મૂળભૂત રીતે દેખાવું જોઈએ નહીં):

કોષ્ટકો વધુ જટિલ બની શકે છે, અને અમે તે કેવી રીતે બનાવવામાં આવે છે તેના પર ધ્યાન કેન્દ્રિત કરી શકતા નથી અથવા અમે ઘણો સમય અને જગ્યા લઈશું. હા, આપણે કહી શકીએ કે આપણે સાવચેત રહેવું જોઈએ કે તે સારી રીતે ફિટ થાય અને બોક્સને તેના અનુરૂપ "td" માં "colspan" વિશેષતા ઉમેરીને એક કરતા વધુ પહોળાઈ પર કબજો કરવા માટે બનાવી શકાય છે અને તે પછી આપણને જોઈએ છે તે બોક્સની સંખ્યા. કબજો કરવો (ઉદાહરણ તરીકે, colspan =”2″). સમાન વસ્તુ માટે પરંતુ ઊભી રીતે, "રોસ્પાન" નો ઉપયોગ થાય છે (ઉદાહરણ પંક્તિ =”3″).

આડી રેખાઓ અને રેખા વિરામ

જો આપણે દસ્તાવેજના એક ભાગથી બીજા ભાગમાં જાય તેવી આડી રેખા બનાવવા માંગીએ છીએ, તો અમે લેબલનો ઉપયોગ કરીશું. , અને જો આપણે લાઇન બ્રેક બનાવવા માંગીએ છીએ .

HTML અને CSS સાથે અમારા દસ્તાવેજને શૈલીઓ આપવી

અત્યાર સુધી, આપણી પાસે જે છે તે એક જટિલ માર્કડાઉન સિવાય બીજું કંઈ નથી, ખરું ને? આ બધાનો કોઈ અર્થ નથી જો તે હકીકત ન હોત કે આપણે CSS નો પણ ઉપયોગ કરી શકીએ છીએ, અને અહીં કેટલીક ટીપ્સ છે.

જો આપણે ઇચ્છીએ છીએ કે બધું એક જ દસ્તાવેજમાં હોય, CSS ને "શૈલી" ટેગની અંદર ઉમેરવું પડશે અથવા એ જ નામના એટ્રિબ્યુટમાં HTML ટૅગની અંદર, ઉદાહરણ તરીકે અમે અક્રમ વિનાની સૂચિને ડિફૉલ્ટ રૂપે ડિસ્ક બતાવવાથી રોકવા માટે ઉપયોગ કર્યો છે.

CSS આપણને ઘણું બધું કરવા દે છે, અને તે જ સમયે અનેક તત્વો પણ. જો આપણે બધા પ્રકાર 2 (h2) શીર્ષકોને કેન્દ્રમાં અને લાલ કરવા માંગતા હોય, તો આપણે તેને "હેડ" ની અંદર "શૈલી" ટૅગમાં ઉમેરવું પડશે:

h2 { text-align:center; રંગ:લાલ; }

ઉપરોક્ત સાથે અમે કહીએ છીએ: "બધા h2 ટૅગ્સ પર કેન્દ્રિત ટેક્સ્ટ નિયમ અને રંગ લાલ લાગુ કરો." જો આપણે ઇચ્છીએ છીએ કે તે બધા હેડર હોય, તો બ્રેસ પહેલાં આપણે પસંદગીકાર "h1, h2, h3, h4, h5, h6" ઉમેરવો પડશે. બધું મૂળભૂત રીતે ડાબી બાજુએ છે અને જો આપણે "કેન્દ્ર" ને બદલે "જમણે" નો ઉપયોગ કરીએ તો તેને જમણી બાજુએ પણ સેટ કરી શકાય છે.

અન્ય ભલામણ કરેલ નિયમો

• પૃષ્ઠભૂમિ-રંગ: પસંદ કરેલ_રંગ;, જ્યાં "chosen_color" એ અસ્તિત્વમાંના શબ્દ સાથેનો રંગ હશે, જેમ કે "લાલ", અથવા RGB અથવા HSL કોડ, અન્યની વચ્ચે. તત્વને પૃષ્ઠભૂમિ રંગ આપે છે.
• સરહદ-ત્રિજ્યા: પસંદ કરેલ_વક્ર, જ્યાં "chosen_curve" પિક્સેલ અથવા ટકામાં હશે. તે ખૂણાઓને વળાંક આપે છે, અને તમે તેમાંના દરેક માટે સ્વતંત્ર મૂલ્યો સેટ કરી શકો છો.
• ટેક્સ્ટ-શેડો: 1px 2px 2px કાળો;, જ્યાં મૂલ્યો અન્ય હોઈ શકે છે. તે ટેક્સ્ટને પડછાયો આપે છે, પ્રથમ મૂલ્ય X અક્ષ પર, બીજું Y પર, ત્રીજું અસ્પષ્ટ અને ચોથું રંગ છે.
• બોક્સ-શેડો: 1px 2px 2px કાળો;, અગાઉના મુદ્દાની જેમ જ, પરંતુ સમગ્ર બૉક્સમાં અને માત્ર ટેક્સ્ટ જ નહીં.
• ફોન્ટ-સાઇઝ: a_size;, જ્યાં "a_size" એક કદ હશે જે વિવિધ એકમોનું હોઈ શકે છે, સામાન્ય રીતે પિક્સેલ્સમાં.
• ફોન્ટ-વજન: a_thickness;, જ્યાં "a_thickness" એ ફોન્ટની જાડાઈ હશે. જો ફોન્ટ પ્રકાર તેમને સપોર્ટ કરે તો અમે "બોલ્ડ" અથવા "બોલ્ડર" જેવા શબ્દો અથવા 100 થી 900 સુધીના એકમોનો ઉપયોગ કરી શકીએ છીએ.
• ફોન્ટ-ફેમિલી: ફોન્ટ_ટાઇપ;, જ્યાં "font_type" ફોન્ટ હશે.
• સરહદ: 1px ઘન વાદળી;, પ્રથમ જાડાઈ, બીજું પ્રકાર અને ત્રીજું રંગ જે અલગ હોઈ શકે છે. આ તત્વમાં સરહદ ઉમેરશે.
• ગાદી y ગાળો તે બંને આપણને તત્વની આસપાસ માર્જિન આપે છે, પરંતુ એક તફાવત સાથે: પેડિંગ એ તત્વનો જ એક ભાગ છે, જ્યારે માર્જીંગ એ તત્વની નહીં પણ જગ્યા ધરાવે છે. વિવિધ પ્રકારના માપ દાખલ કરી શકાય છે, જેમાં સૌથી સામાન્ય પિક્સેલ છે.
• પહોળાઈ y ઊંચાઈ તેઓ તત્વોની પહોળાઈ અને ઊંચાઈ દર્શાવવા માટે સેવા આપે છે. તેનો ઉપયોગ ટેક્સ્ટ પ્રકારમાં ઓછો થાય છે (ફોન્ટ-સાઇઝ આ માટે છે), પરંતુ કન્ટેનરમાં (જે આપણે અહીં જોયા નથી) અને છબીઓ જેવા તત્વોમાં વધુ વપરાય છે. વિવિધ પ્રકારના માપનો ઉપયોગ થાય છે, જેમ કે પિક્સેલ.
• વધુ માં ડીએનડી.

HTML અને CSS માં દસ્તાવેજ છાપવા માટેની ટીપ

HTML અને CSS સાથે દસ્તાવેજો બનાવતી વખતે આપણને એક સમસ્યા આવી શકે છે તે છે બ્રાઉઝર્સ વસ્તુઓને અમે ઇચ્છીએ તે રીતે છાપતા નથી. ઉદાહરણ તરીકે, તે સૂચિઓ જેવા ઘટકોને વિભાજિત કરશે, અને આ કંઈક છે જે આપણે કદાચ જોવા માંગતા નથી.

મારી સલાહ એ છે કે, જ્યારે તમે બ્રાઉઝર વડે પ્રિન્ટ પર ક્લિક કરો (Ctrl+P મોટા ભાગના કિસ્સાઓમાં), અમે ઓછામાં ઓછા ઉપર અને નીચે કસ્ટમ માર્જિન ઉમેરીએ છીએ. આ એ ભૂલને સુધારશે કે ટેક્સ્ટ્સ ઉપર અને નીચેની ધારની ખૂબ નજીક હોઈ શકે છે (તમે તેને હેડર અને ફૂટર ન બતાવી શકો છો).

CSS વિભાગમાં આ નિયમ ઉમેરીને વિભાજિત તત્વોની સમસ્યા હલ થાય છે:

@મીડિયા પ્રિન્ટ{ બોડી { બેકગ્રાઉન્ડ-રંગ: સફેદ; } ul, ol{ બ્રેક-ઇનસાઇડ: ટાળો; /* છાપતી વખતે યાદીઓ કાપતી નથી* } }

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

બીજી વસ્તુ જે આપણે કરી શકીએ તે છે નીચેનાનો ઉપયોગ કરવા માટે ફોર્સ પેજ બ્રેક્સ અમે જ્યાં ઇચ્છીએ ત્યાં માન્ય, ઉદાહરણ તરીકે, પ્રકરણ સમાપ્ત કરવા માટે અને પછીના પૃષ્ઠ પર શું દેખાય છે તે માટે (જો તે કામ કરતું નથી, તો પેજ-બ્રેક-આફ્ટર, જે તેઓ કહે છે કે ભવિષ્યમાં કામ કરવાનું બંધ કરશે):

એક વધુ વિકલ્પ

અને આ બધું હશે. HTML અને CSS સાથે અમારી પાસે માર્કડાઉન કરતાં વધુ નિયંત્રણ છે અને તે મારા દૃષ્ટિકોણથી, LaTeX કરતાં વધુ સરળ છે, જોકે તેઓ જુદી જુદી લીગમાં રમે છે. તે એક વધુ વિકલ્પ છે.