માર્કઅપના ઝેન માસ્ટર બનવાનું શીખો

માર્કઅપ, અથવા માર્કઅપ, માર્કઅપ અથવા ટેગિંગ ભાષાઓનો સંદર્ભ આપે છે એચટીએમએલ અને સીએસએસ, અને આપણે બધા જાણીએ છીએ કે વેબ નમૂના બનાવવા માટે એક પછી એક લેબલ્સ ખોલવું અને બંધ કરવું કેટલું દુ painfulખદાયક છે ...

અલબત્ત આના માટે ઉકેલો છે, તેમાંથી એક એ IDE ની જેમ સ્વતomપૂર્ણતા છે ડ્રીમવીવર છી બ્લુગ્રાફીન હેરાન કરશો જો તમે તેની પાસેથી પ્લગઈનો ન ખરીદો o કોમોડો સંપાદન ઘણું ભારે… મુદ્દો એ છે કે આઇડીઇ અથવા કોડ સંપાદકો પણ વિકલ્પોથી ભરેલા હોય છે, જે ઘણી વાર અકલ્પ્ય રીતે કામમાં અડચણ ઉભો કરે છે; આવા કેસ છે ડ્રીમવીવર જે તમને ગ્રાફિકલી જનરેટ કરે છે તે કચરો કોડ ભરે છે અને ભારે, ખર્ચાળ અને નીચ છે. બ્લુગ્રાફીન તે મોટે ભાગે હેરાન કરે છે કારણ કે તે મફત, મફત છે, પરંતુ અડધા વિકલ્પો પેઇડ વપરાશકર્તાઓ માટે અનામત છે ... તે આનંદ નથી. અને છેવટે અમારી પાસે છે કોમોડો-સંપાદન, જે એકદમ સારું, શક્તિશાળી અને વિકલ્પોથી ભરેલું છે પરંતુ તે ભારે છે (100 મીડબ્લmbડમાં) અને તેને સેટ કરવું કંટાળાજનક છે.

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

પરંતુ ... આ શું છે? ઝેન કોડિંગ?

સરળ, તે એક વિશિષ્ટ પ્લગઇન છે જે HTML અને CSS માં બનેલા ડ્રોપ-ડાઉન એબ્સ્ટ્રેક્શન સ્તરનું કામ કરે છે જાવાસ્ક્રિપ્ટ અને ઘણાં પ્રખ્યાત પ્રકાશકો માટે ઉપલબ્ધ (નોટપેડ ++, કોમોડો-એડિટ, ગેડિટ, કેટ, બ્લુફિશ, જિની, ડ્રીમવીવર, વગેરે).

આહા, હું હજી પણ એક ખરાબ વિચાર સમજી શકતો નથી કે તમે શું કહી રહ્યાં છો ...

તેથી હું તમને એક સરળ ઉદાહરણ બતાવીશ; ડ્રોપડાઉન એબ્સ્ટ્રેક્શન વસ્તુ યાદ છે? ઠીક છે, તેને સંકોચોમાં બદલો, કલ્પના કરો કે તમે HTML / CSS કોડની લાઇન એક જ લાઇનમાં પડી અને તેને પડદાની જેમ ઉઘાડી શકો છો અથવા તેને ફરીથી ફોલ્ડ કરી શકો છો ... કેવી રીતે જોવા માંગો છો? તમારે તેને સુનિશ્ચિત કરવું પડશે કે તમારી પાસે તેને કાર્યરત કરવા માટે બે વસ્તુઓ છે:

છે ઝેન કોડિંગ તમારા સંપાદકમાં સ્થાપિત.
તેનો ઉપયોગ કરવા આદેશો અને વાક્યરચના જાણો.

ઠીક છે, કોડની આંગળીઓ:

html>head+body

કોડની તે લાઈન જુઓ? સારું, એચટીએમએલ માટેનું સિન્ટેક્સ છે, તે સરળ છે:

પહેલા તમે ટેગનું નામ (એચટીએમએલ) મૂક્યું પછી તમે સૂચવે છે કે તે ટ )ગ (>) ની અંદર કયા ટsગ્સ હશે અને પછી તે ટ tagગનું નામ જે તે ટ tagગ (માથા અને શરીર) ની અંદર જાય છે. '+' સંકેત સૂચવે છે કે માથું અને શરીર બે અલગ અલગ લેબલ્સ છે અને તે એક બીજામાં સમાયેલ નથી, એવું કહેવા જેવું છે «એક સાથે પરંતુ મિશ્રિત નથી«… પછી, ચાલો જોઈએ કે જાદુની કી દબાવતી વખતે કોડની તે લાઇન શું ઉત્પન્ન કરે છે (મારા કિસ્સામાં CTRL + E):

બરાબર, કોડની 4 લીટીઓ એકમાં બનેલી છે, જ્યારે તમે સાચા કી સંયોજનને દબાવો છો ત્યારે જાદુઈ રીતે દેખાય છે ... અને ત્યાં ઘણા વધુ હોઈ શકે છે; દાખ્લા તરીકે:

html>head+body>ul#lista_ordenada>li.listilla*5

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

શાંત થાઓ, આ એકદમ સરળ છે, અમે ઉપર જણાવ્યું હતું કે અંદરના ભાગમાં એક ટેગ દાખલ કરો «ઉલ», આમાં કંઈ વિચિત્ર નથી, મેં આ ઉપર સમજાવ્યું, ત્યારબાદ, અમે એક આઈડી સોંપી, જો તમને સીએસએસ ખબર હોય તો તમે સમજી શકશો કે આ ઓળખાઈ છે. ચિહ્ન '#', અને તે અordર્ડર્ડ સૂચિની અંદર (ઉલ) અમે વર્ગ (વર્ગ) લિસ્ટિલા સાથે પાંચ લેબલ ઉમેરીએ છીએ, હું ટૂંકમાં આને સમજાવું છું. હકીકતમાં તે ખૂબ જ સરળ છે, '#' સૂચવે છે કે તે આઈડી છે, પછી 'લિ.લિસ્ટિલા' કહે છે કે આપણે લિસ્ટિલા «લિ વર્ગ = લિસ્ટિલા class વર્ગ સાથે« લિ a લેબલ બનાવવું પડશે, અને પછી, આપણે કહીશું «તે છેલ્લા પાંચ વખત પુનરાવર્તન કરો«. અમને પરિણામે શું આપે છે:

કોડની બાર રેખાઓ એક જ લાઇનમાં અને ખૂબ ઓછા સમયમાં લખેલી

અને તે સીએસએસ સાથે પણ થઈ શકે છે, જોકે હું સ્પષ્ટ બતાવીને લેખને લંબાવીશ નહીં (નીચે હું તમને માટે ચિટ્સની સંપૂર્ણ સૂચિ આપીશ ઝેન કોડિંગ).

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

html>head>title+meta+body>ul#lista_ordenada>li.listilla*5

શું, સિદ્ધાંતમાં તે આપણને આ આપવું જોઈએ (છેલ્લી છબીમાં પ્રકાશિત લાઇન જુઓ):

તે આપણને આ આપશે:

જે બતાવે છે કે તમે આની સાથે જાદુ પણ કરી શકતા નથી; યાદ રાખો કે કોડનો ઝેન માસ્ટર ચોક્કસ અને ઝડપી હોવો જોઈએ, અને ખોટી રીતે કરવામાં આવતી કામગીરી કરવામાં ઝડપ અને સમય લે છે, તેથી ઝડપથી અને સાથે લખવાની સાચી તકનીક ઝેન કોડિંગ આ હશે:

html>head>body>ul#lista_ordenada>li.listilla*5

તમે વિસ્તૃત અને મુખ્ય ટ tagગ અંદર:

title+meta

જે તમને સાચો કોડ આપશે:

તેમ છતાં ઝેન કોડિંગ તમને બતાવવા માટે તેમાં ઘણી વધુ બાબતો છે અને કદાચ માથામાં બીજી આદેશ વાક્ય લખવી શ્રેષ્ઠ નથી, તેથી અમે બીજી આદેશનો ઉપયોગ કરીએ છીએ, «સંક્ષેપ સાથે વિસ્તૃત" મારા કિસ્સામાં ctrl + Alt + e જે એક નાનો પટ્ટી ખોલશે જ્યાં આપણે ઝેન કોડ લખી શકીએ અને રીઅલ ટાઇમમાં તે કેવી રીતે દેખાય છે તે જોઈ શકીશું. સાવચેત રહો, હું આ સાથે બધું લખવાની ભલામણ કરતો નથી, પરંતુ પહેલેથી બનાવેલા બંધારણોમાં લખીશ, મારો મતલબ છે કે, પહેલા મોટા structuresાંચો બનાવો અને પછી તમે આ વિકલ્પ સાથે તેમની વિગતવાર વિગતો દર્શાવશો.

અને ત્યાં સુપર કૂલ આદેશોની ભીડ છે ઝેન કોડિંગ, વસ્તુ એ છે કે એકવાર તમે તેને ઇન્સ્ટોલ કરો અને તેનો ઉપયોગ કરવાનું શીખો પછી તમે તેમની તપાસ કરો; આ પલ્ગઇનની મદદથી તમારે CSS અથવા html માટે સ્વતomપૂર્ણતા અથવા સ્નિપેટ્સની જરૂર પડશે નહીં, હકીકતમાં, આની સાથે તમને ખ્યાલ આવશે કે આ વિકલ્પો આ બે પ્રોગ્રામિંગ ભાષાઓમાંનો સમયનો બગાડ છે 😉

અને રસ ધરાવતા લોકો માટે, અહીંની સત્તાવાર ચીટશીટ છે ઝેન કોડિંગ, તમે તેને ફોર્મેટમાં જોઈ શકો છો ઓડીએફ o પીડીએફ વાજબી અહીં