மார்க்அப்பின் ஜென் மாஸ்டராக இருக்க கற்றுக்கொள்ளுங்கள்

மார்க்அப், அல்லது மார்க்அப், மார்க்அப் அல்லது டேக்கிங் மொழிகளைக் குறிக்கிறது HTML மற்றும் CSS, மேலும் ஒரு வலை வார்ப்புருவை உருவாக்க லேபிள்களை ஒவ்வொன்றாக திறந்து மூடுவது எவ்வளவு வேதனையானது என்பதை நாம் அனைவரும் அறிவோம் ...

நிச்சயமாக இதற்கு தீர்வுகள் உள்ளன, அவற்றில் ஒன்று ஐடிஇ போன்றவற்றுடன் தானாக நிறைவு செய்யப்படுகிறது ட்ரீம்வீவர் மலம் ப்ளூகிரிஃபோன் நீங்கள் அவரிடமிருந்து செருகுநிரல்களை வாங்கவில்லை என்றால் எரிச்சலூட்டும் o கொமோடோ திருத்த மிகவும் கனமானது… புள்ளி என்னவென்றால், விருப்பங்களுடன் ஏற்றப்பட்ட ஐடிஇ அல்லது குறியீடு எடிட்டர்கள் பெரும்பாலும் கற்பனைக்கு எட்டாத வழிகளில் வேலைக்கு இடையூறு விளைவிக்கும்; இது போன்றது ட்ரீம்வீவர் நீங்கள் வரைபடமாக உருவாக்கும் மற்றும் கனமான, விலை உயர்ந்த மற்றும் அசிங்கமான குப்பைக் குறியீட்டை இது நிரப்புகிறது. ப்ளூகிரிஃபோன் இது பெரும்பாலும் எரிச்சலூட்டுகிறது, ஏனெனில் இது இலவசம், இலவசம், ஆனால் விருப்பங்களில் பாதி பணம் செலுத்திய பயனர்களுக்காக ஒதுக்கப்பட்டுள்ளது… அது வேடிக்கையாக இல்லை. இறுதியாக எங்களிடம் உள்ளது கொமோடோ-திருத்து, இது மிகவும் நல்லது, சக்திவாய்ந்த மற்றும் விருப்பத்தேர்வுகள் நிறைந்ததாக இருக்கிறது, ஆனால் அது கனமானது (100mb இல் iddle) மற்றும் அதை அமைப்பது கடினமானது.

ஒரு வலை டெவலப்பர் அல்லது வலை வடிவமைப்பாளரின் சிறந்த ஆயுதம் ஐடிஇ என்பது ஆயிரம் ஆயுதங்களைக் கொண்ட போர் தொட்டியின் பாணியில் இல்லை, இது ஒரு எளிய உரை திருத்தி, சில செருகுநிரல்கள் மற்றும் நோய்வாய்ப்பட்ட நபரைப் போல தட்டச்சு செய்யும் திறன் ... ஜென் கோடிங் இதுவரை உருவாக்கியதைக் குறிக்கும் சிறந்த கருவியாக அவர்கள் விரல்களில் இருப்பார்கள் (குறைந்தபட்சம் எனக்கு).

ஆனால் ... என்ன ஆச்சு ஜென் கோடிங்?

எளிமையானது, இது உருவாக்கப்பட்ட HTML மற்றும் CSS க்கான கீழ்தோன்றும் சுருக்க அடுக்காக செயல்படும் ஒரு சிறப்பு சொருகி ஜாவா மற்றும் பல பிரபலமான வெளியீட்டாளர்களுக்கு கிடைக்கிறது (நோட்பேட் ++, கொமோடோ-எடிட், கெடிட், கேட், ப்ளூபிஷ், ஜீனி, ட்ரீம்வீவர்முதலியன).

ஆஹா, நீங்கள் என்ன சொல்கிறீர்கள் என்று எனக்கு இன்னும் புரியவில்லை ...

எனவே ஒரு எளிய உதாரணத்துடன் நான் உங்களுக்குக் காட்டுகிறேன்; கீழ்தோன்றும் சுருக்கம் நினைவில் இருக்கிறதா? சரி, அதை சுருக்கமாக மாற்றவும், நீங்கள் HTML / CSS குறியீட்டின் ஒரு வரியை ஒரு வரியாக எடுத்து ஒரு திரை போல் திறக்கலாம் அல்லது அதை மீண்டும் மடிக்கலாம் என்று கற்பனை செய்து பாருங்கள் ... எப்படி என்று பார்க்க வேண்டுமா? அதைச் செயல்படுத்துவதற்கு உங்களிடம் இரண்டு விஷயங்கள் உள்ளன என்பதை உறுதிப்படுத்த வேண்டும்:

வேண்டும் ஜென் கோடிங் உங்கள் எடிட்டரில் நிறுவப்பட்டுள்ளது.
அதைப் பயன்படுத்த கட்டளைகளையும் தொடரியல் தெரிந்து கொள்ளுங்கள்.

சரி, குறியீட்டிற்கு விரல்கள்:

html>head+body

குறியீட்டின் அந்த வரியைப் பார்க்கவா? இது HTML க்கான தொடரியல், இது எளிது:

முதலில் நீங்கள் குறிச்சொல்லின் பெயரை (html) வைத்து, அந்த குறிச்சொல்லுக்குள் (>) எந்த குறிச்சொற்கள் இருக்கப் போகின்றன என்பதைக் குறிக்கிறீர்கள், பின்னர் அந்த குறிச்சொல்லின் உள்ளே செல்லும் குறிச்சொற்களின் பெயர் (தலை மற்றும் உடல்). '+' அடையாளம் தலை மற்றும் உடல் இரண்டு வெவ்வேறு லேபிள்கள் என்பதையும், மற்றொன்றுக்குள் இல்லை என்பதையும் குறிக்கிறது, இது sayஒன்றாக ஆனால் கலக்கவில்லை«… பின்னர், மேஜிக் விசைகளை அழுத்தும் போது அந்தக் குறியீடு என்ன உருவாக்குகிறது என்பதை பார்ப்போம் (என் விஷயத்தில் CTRL + E.):

சரியாக, குறியீட்டின் 4 வரிகள் ஒன்றில் உருவாக்கப்பட்டுள்ளன, அவை சரியான விசை கலவையை அழுத்தும்போது மாயமாக தோன்றும்… மேலும் இது இன்னும் பலவாக இருக்கலாம்; உதாரணத்திற்கு:

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

அதே தொடரியல், ஆனால் நாங்கள் வேறு எதையாவது சேர்க்கிறோம் ... சில CSS உங்களுக்குத் தெரிந்தால், நாங்கள் ஒரு ஐடி, வகுப்புகள் மற்றும் உங்களுக்கு நிச்சயமாகத் தெரியாத ஒன்றைச் சேர்ப்பதை நீங்கள் புரிந்துகொள்வீர்கள்; பெருக்கிகள்… இதெல்லாம் என்ன!? ஃபக் நீ என்னை குழப்புகிறாய்!

அமைதியாக இருங்கள், இது மிகவும் எளிது, உடலின் உள்ளே ஒரு குறிச்சொல் «ul» ஐ உள்ளிடவும், விசித்திரமாக ஒன்றுமில்லை, இதை நான் மேலே விளக்கினேன், பின்னர், நாங்கள் ஒரு ஐடியை ஒதுக்கினோம், உங்களுக்கு CSS தெரிந்தால் இவை அடையாளத்துடன் அடையாளம் காணப்படுகின்றன என்பதை நீங்கள் புரிந்துகொள்வீர்கள் '#', மற்றும் அந்த வரிசைப்படுத்தப்படாத பட்டியலில் (உல்) நாங்கள் வகுப்பு (வகுப்பு) பட்டியலுடன் ஐந்து லேபிள்களைச் சேர்க்கிறோம், இதை நான் சுருக்கமாக விளக்குகிறேன். உண்மையில் இது மிகவும் எளிது, '#' இது ஒரு ஐடி என்பதைக் குறிக்கிறது, பின்னர் 'li.listilla' நாம் «li class என்ற வகுப்பை« li class = listilla with உடன் உருவாக்க வேண்டும் என்று கூறுகிறது, பின்னர், நாங்கள் சொல்கிறோம் «கடைசி ஐந்து முறை மீண்டும் செய்யவும்«. இதன் விளைவாக நமக்கு என்ன தருகிறது:

ஒற்றை வரியில் எழுதப்பட்ட குறியீட்டின் பன்னிரண்டு வரிகள் மற்றும் மிகக் குறைந்த நேரத்தில்

இது CSS உடன் கூட செய்யப்படலாம், இருப்பினும் வெளிப்படையானதைக் காண்பிப்பதன் மூலம் நான் கட்டுரையை நீட்டிக்க மாட்டேன் (ஏமாற்றுக்காரர்களின் முழு பட்டியலையும் கீழே தருகிறேன் ஜென் கோடிங்).

ஒன்றில் ஒரு ஜில்லியன் இலட்சம் வரிகளை உருவாக்க இது வேலை செய்யாது என்பதை நான் வலியுறுத்த வேண்டும், ஓ, இது ஒரு வரம்பும் அதைப் பயன்படுத்த ஒரு வழியும் உள்ளது. உதாரணமாக நாம் இதைப் போன்ற ஏதாவது செய்ய விரும்பினால்:

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

கோட்பாட்டில் எது நமக்கு இதைக் கொடுக்க வேண்டும் (கடைசி படத்தில் சிறப்பிக்கப்பட்ட வரியைப் பாருங்கள்):

இது நமக்கு இதைக் கொடுக்கும்:

இதை நீங்கள் மந்திரம் செய்ய முடியாது என்பதைக் காட்டுகிறது; குறியீட்டின் ஜென் மாஸ்டர் துல்லியமாகவும் வேகமாகவும் இருக்க வேண்டும் என்பதை நினைவில் கொள்ளுங்கள், தவறாகச் செய்த காரியங்களைச் செய்வதற்கு வேகமும் நேரமும் தேவைப்படுகிறது, எனவே விரைவாகவும் விரைவாகவும் எழுத சரியான நுட்பம் ஜென் கோடிங் இது இருக்கும்:

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

நீங்கள் தலை குறிச்சொல்லை விரிவுபடுத்துகிறீர்கள்:

title+meta

இது உங்களுக்கு சரியான குறியீட்டை வழங்கும்:

இருப்பினும் ஜென் கோடிங் உங்களுக்குக் காண்பிக்க இன்னும் பல விஷயங்கள் உள்ளன, மேலும் தலைக்குள் மற்றொரு கட்டளை வரியை எழுத வேண்டியது சிறந்தது அல்ல, எனவே நாங்கள் மற்றொரு கட்டளையைப் பயன்படுத்துகிறோம், «சுருக்கத்துடன் விரிவாக்குங்கள்" என்னுடைய வழக்கில் ctrl + alt + e இது ஒரு சிறிய பட்டியைத் திறக்கும், அங்கு நாம் ஜென் குறியீட்டை எழுதலாம் மற்றும் அது எவ்வாறு உண்மையான நேரத்தில் தோன்றும் என்பதைக் காணலாம். கவனமாக இருங்கள், இதனுடன் எல்லாவற்றையும் எழுத நான் பரிந்துரைக்கவில்லை, ஆனால் ஏற்கனவே உருவாக்கிய கட்டமைப்புகளுக்குள் எழுத வேண்டும், அதாவது முதலில் பெரிய கட்டமைப்புகளை உருவாக்குங்கள், பின்னர் இந்த விருப்பத்துடன் அவற்றுள் விரிவாகப் பார்ப்பீர்கள்.

மற்றும் பல சூப்பர் கூல் கட்டளைகள் உள்ளன ஜென் கோடிங், விஷயம் என்னவென்றால், நீங்கள் அவற்றை நிறுவியவுடன் அவற்றை விசாரித்து அவற்றைப் பயன்படுத்த கற்றுக்கொள்ளுங்கள்; இந்த சொருகி மூலம் உங்களுக்கு CSS அல்லது HTML க்கான தானியங்குநிரப்புதல் அல்லது துணுக்குகள் தேவையில்லை, உண்மையில், இந்த இரண்டு நிரலாக்க மொழிகளிலும் இந்த விருப்பங்கள் மொத்த நேரத்தை வீணடிப்பதை நீங்கள் புரிந்துகொள்வீர்கள்

ஆர்வமுள்ளவர்களுக்கு, இங்கே அதிகாரப்பூர்வ சீட்ஷீட் உள்ளது ஜென் கோடிங், நீங்கள் அதை வடிவத்தில் பார்க்கலாம் ODF o எம் வலது இங்கே