ಮಾರ್ಕ್ಅಪ್ನ en ೆನ್ ಮಾಸ್ಟರ್ ಆಗಲು ಕಲಿಯಿರಿ

ಮಾರ್ಕ್ಅಪ್, ಅಥವಾ ಮಾರ್ಕ್ಅಪ್, ಮಾರ್ಕ್ಅಪ್ ಅಥವಾ ಟ್ಯಾಗಿಂಗ್ ಭಾಷೆಗಳನ್ನು ಸೂಚಿಸುತ್ತದೆ ಎಚ್ಟಿಎಮ್ಎಲ್ ಮತ್ತು ಸಿಎಸ್ಎಸ್, ಮತ್ತು ವೆಬ್ ಟೆಂಪ್ಲೇಟ್ ರಚಿಸಲು ಲೇಬಲ್‌ಗಳನ್ನು ಒಂದೊಂದಾಗಿ ತೆರೆಯುವುದು ಮತ್ತು ಮುಚ್ಚುವುದು ಎಷ್ಟು ನೋವು ಎಂದು ನಮಗೆಲ್ಲರಿಗೂ ತಿಳಿದಿದೆ ...

ಖಂಡಿತವಾಗಿಯೂ ಇದಕ್ಕೆ ಪರಿಹಾರಗಳಿವೆ, ಅವುಗಳಲ್ಲಿ ಒಂದು ಐಡಿಇಯೊಂದಿಗೆ ಸ್ವಯಂ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆ ಡ್ರೀಮ್ವೇವರ್ ಶಿಟ್ ಬ್ಲೂಗ್ರಿಫಾನ್ ನೀವು ಅವನಿಂದ ಪ್ಲಗ್‌ಇನ್‌ಗಳನ್ನು ಖರೀದಿಸದಿದ್ದರೆ ಕಿರಿಕಿರಿ o ಕೊಮೊಡೊ ಸಂಪಾದನೆ ತುಂಬಾ ಭಾರ… ವಿಷಯವೆಂದರೆ ಐಡಿಇ ಅಥವಾ ಕೋಡ್ ಸಂಪಾದಕರು ತುಂಬಾ ಆಯ್ಕೆಗಳೊಂದಿಗೆ ಲೋಡ್ ಆಗಿದ್ದು, the ಹಿಸಲಾಗದ ರೀತಿಯಲ್ಲಿ ಕೆಲಸಕ್ಕೆ ಅಡ್ಡಿಯಾಗುತ್ತದೆ; ಅಂತಹ ಸಂದರ್ಭ ಡ್ರೀಮ್ವೇವರ್ ಅದು ನೀವು ಚಿತ್ರಾತ್ಮಕವಾಗಿ ಉತ್ಪಾದಿಸುವ ಮತ್ತು ಭಾರವಾದ, ದುಬಾರಿ ಮತ್ತು ಕೊಳಕು ಎಂದು ಕಸ ಕೋಡ್ ಅನ್ನು ತುಂಬುತ್ತದೆ. ಬ್ಲೂಗ್ರಿಫಾನ್ ಇದು ಹೆಚ್ಚಾಗಿ ಕಿರಿಕಿರಿ ಏಕೆಂದರೆ ಅದು ಉಚಿತ, ಉಚಿತ, ಆದರೆ ಅರ್ಧದಷ್ಟು ಆಯ್ಕೆಗಳನ್ನು ಪಾವತಿಸಿದ ಬಳಕೆದಾರರಿಗಾಗಿ ಕಾಯ್ದಿರಿಸಲಾಗಿದೆ… ಅದು ಖುಷಿಯಲ್ಲ. ಮತ್ತು ಅಂತಿಮವಾಗಿ ನಾವು ಹೊಂದಿದ್ದೇವೆ ಕೊಮೊಡೊ-ಸಂಪಾದನೆ, ಇದು ಸಾಕಷ್ಟು ಒಳ್ಳೆಯದು, ಶಕ್ತಿಯುತ ಮತ್ತು ಆಯ್ಕೆಗಳಿಂದ ಕೂಡಿದೆ ಆದರೆ ಭಾರವಾಗಿರುತ್ತದೆ (100mb ಇಡಿಲ್) ಮತ್ತು ಅದನ್ನು ಹೊಂದಿಸುವುದು ಬೇಸರದ ಸಂಗತಿಯಾಗಿದೆ.

ವೆಬ್ ಡೆವಲಪರ್ ಅಥವಾ ವೆಬ್ ಡಿಸೈನರ್‌ನ ಅತ್ಯುತ್ತಮ ಆಯುಧವೆಂದರೆ ಐಡಿಇಗಳು ಯುದ್ಧ ಟ್ಯಾಂಕ್ ಶೈಲಿಯಲ್ಲಿ ಒಂದು ಸಾವಿರ ಶಸ್ತ್ರಾಸ್ತ್ರಗಳನ್ನು ಹೊಂದಿಲ್ಲ, ಇದು ಸರಳ ಪಠ್ಯ ಸಂಪಾದಕ, ಕೆಲವು ಪ್ಲಗ್‌ಇನ್‌ಗಳು ಮತ್ತು ಅನಾರೋಗ್ಯದ ವ್ಯಕ್ತಿಯಂತೆ ಟೈಪ್ ಮಾಡುವ ಸಾಮರ್ಥ್ಯ ... ಅದಕ್ಕೆ ಮ್ಯಾಜಿಕ್ ಸೇರಿಸಿ En ೆನ್ ಕೋಡಿಂಗ್ ಮತ್ತು ಇದುವರೆಗೆ ರಚಿಸಲಾದ ಗುರುತು ಮಾಡುವ ಅತ್ಯುತ್ತಮ ಸಾಧನವನ್ನು ಅವರು ತಮ್ಮ ಬೆರಳುಗಳಲ್ಲಿ ಹೊಂದಿರುತ್ತಾರೆ (ಕನಿಷ್ಠ ನನಗೆ).

ಆದರೆ ... ಏನು ನರಕ En ೆನ್ ಕೋಡಿಂಗ್?

ಸರಳ, ಇದು ರಚಿಸಲಾದ HTML ಮತ್ತು CSS ಗಾಗಿ ಡ್ರಾಪ್-ಡೌನ್ ಅಮೂರ್ತ ಪದರವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ವಿಶೇಷ ಪ್ಲಗಿನ್ ಆಗಿದೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಅನೇಕ ಪ್ರಸಿದ್ಧ ಪ್ರಕಾಶಕರಿಗೆ ಲಭ್ಯವಿದೆ (ನೋಟ್‌ಪ್ಯಾಡ್ ++, ಕೊಮೊಡೊ-ಸಂಪಾದನೆ, ಗೆಡಿಟ್, ಕೇಟ್, ಬ್ಲೂಫಿಶ್, ಜಿಯಾನಿ, ಡ್ರೀಮ್‌ವೇವರ್, ಇತ್ಯಾದಿ.).

ಆಹಾ, ನೀವು ಏನು ಹೇಳುತ್ತಿದ್ದೀರಿ ಎಂದು ನನಗೆ ಇನ್ನೂ ಅರ್ಥವಾಗುತ್ತಿಲ್ಲ ...

ಹಾಗಾಗಿ ಸರಳ ಉದಾಹರಣೆಯೊಂದಿಗೆ ನಾನು ನಿಮಗೆ ತೋರಿಸುತ್ತೇನೆ; ಡ್ರಾಪ್-ಡೌನ್ ಅಮೂರ್ತತೆಯ ವಿಷಯ ನೆನಪಿದೆಯೇ? ಸರಿ, ಅದನ್ನು ಕುಗ್ಗುವಿಕೆಗೆ ಬದಲಾಯಿಸಿ, ನೀವು HTML / CSS ಕೋಡ್‌ನ ಒಂದು ಸಾಲನ್ನು ಒಂದು ಸಾಲಿನಲ್ಲಿ ತೆಗೆದುಕೊಂಡು ಅದನ್ನು ಪರದೆಯಂತೆ ಬಿಚ್ಚಿಡಬಹುದು ಅಥವಾ ಅದನ್ನು ಹಿಂದಕ್ಕೆ ಮಡಿಸಬಹುದು ಎಂದು imagine ಹಿಸಿ ... ಹೇಗೆ ಎಂದು ನೋಡಲು ಬಯಸುವಿರಾ? ಅದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನಿಮ್ಮ ಬಳಿ ಎರಡು ವಿಷಯಗಳಿವೆ ಎಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕು:

ಹ್ಯಾವ್ En ೆನ್ ಕೋಡಿಂಗ್ ನಿಮ್ಮ ಸಂಪಾದಕದಲ್ಲಿ ಸ್ಥಾಪಿಸಲಾಗಿದೆ.
ಅದನ್ನು ಬಳಸಲು ಆಜ್ಞೆಗಳು ಮತ್ತು ಸಿಂಟ್ಯಾಕ್ಸ್ ಅನ್ನು ತಿಳಿಯಿರಿ.

ಸರಿ, ಕೋಡ್‌ಗೆ ಬೆರಳುಗಳು:

html>head+body

ಆ ಕೋಡ್ ಅನ್ನು ನೋಡಿ? ಅದು HTML ಗಾಗಿ ಸಿಂಟ್ಯಾಕ್ಸ್ ಆಗಿದೆ, ಇದು ಸರಳವಾಗಿದೆ:

ಮೊದಲು ನೀವು ಟ್ಯಾಗ್‌ನ ಹೆಸರನ್ನು (HTML) ಇರಿಸಿ ನಂತರ ಆ ಟ್ಯಾಗ್ (>) ಒಳಗೆ ಯಾವ ಟ್ಯಾಗ್‌ಗಳು ಇರಲಿವೆ ಎಂದು ಸೂಚಿಸುತ್ತೀರಿ ಮತ್ತು ಆ ಟ್ಯಾಗ್‌ನ ಒಳಗೆ ಹೋಗುವ ಟ್ಯಾಗ್‌ಗಳ ಹೆಸರು (ತಲೆ ಮತ್ತು ದೇಹ). '+' ಚಿಹ್ನೆಯು ತಲೆ ಮತ್ತು ದೇಹವು ಎರಡು ವಿಭಿನ್ನ ಲೇಬಲ್‌ಗಳಾಗಿವೆ ಮತ್ತು ಇನ್ನೊಂದರೊಳಗೆ ಇರುವುದಿಲ್ಲ ಎಂದು ಸೂಚಿಸುತ್ತದೆ, ಅದು ಹೇಳುವಂತಿದೆ «ಒಟ್ಟಿಗೆ ಆದರೆ ಮಿಶ್ರಣವಾಗಿಲ್ಲ«… ನಂತರ, ಮ್ಯಾಜಿಕ್ ಕೀಗಳನ್ನು ಒತ್ತುವ ಸಂದರ್ಭದಲ್ಲಿ ಆ ಕೋಡ್‌ನ ಸಾಲು ಏನು ಉತ್ಪಾದಿಸುತ್ತದೆ ಎಂದು ನೋಡೋಣ (ನನ್ನ ಸಂದರ್ಭದಲ್ಲಿ CTRL + E.):

ನಿಖರವಾಗಿ, 4 ಸಾಲುಗಳ ಕೋಡ್‌ಗಳನ್ನು ಒಂದನ್ನಾಗಿ ಮಾಡಲಾಗಿದೆ, ನೀವು ಸರಿಯಾದ ಕೀ ಸಂಯೋಜನೆಯನ್ನು ಒತ್ತಿದಾಗ ಅದು ಮಾಂತ್ರಿಕವಾಗಿ ಗೋಚರಿಸುತ್ತದೆ… ಮತ್ತು ಅದು ಇನ್ನೂ ಹಲವು ಆಗಿರಬಹುದು; ಉದಾಹರಣೆಗೆ:

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

ಅದೇ ಸಿಂಟ್ಯಾಕ್ಸ್, ಆದರೆ ನಾವು ಬೇರೆ ಯಾವುದನ್ನಾದರೂ ಸೇರಿಸುತ್ತೇವೆ ... ನಿಮಗೆ ಕೆಲವು ಸಿಎಸ್ಎಸ್ ತಿಳಿದಿದ್ದರೆ ನಾವು ಐಡಿ, ತರಗತಿಗಳು ಮತ್ತು ನಿಮಗೆ ಖಂಡಿತವಾಗಿ ತಿಳಿದಿಲ್ಲದ ಯಾವುದನ್ನಾದರೂ ಸೇರಿಸುತ್ತಿದ್ದೇವೆ ಎಂದು ನಿಮಗೆ ತಿಳಿಯುತ್ತದೆ; ಮಲ್ಟಿಪ್ಲೈಯರ್‌ಗಳು… ಇದೆಲ್ಲವೂ ಏನು!? ನೀವು ನನ್ನನ್ನು ಗೊಂದಲಗೊಳಿಸುತ್ತೀರಿ!

ಶಾಂತವಾಗು, ಇದು ತುಂಬಾ ಸರಳವಾಗಿದೆ, ದೇಹದೊಳಗಿನ ಒಂದು ಟ್ಯಾಗ್ ಅನ್ನು ನಮೂದಿಸಿ ಎಂದು ನಾವು ಹೇಳಿದ್ದೇವೆ «ul», ವಿಚಿತ್ರವೇನೂ ಇಲ್ಲ, ನಾನು ಇದನ್ನು ಮೇಲೆ ವಿವರಿಸಿದ್ದೇನೆ, ನಂತರ, ನಾವು ಒಂದು ID ಯನ್ನು ನಿಯೋಜಿಸಿದ್ದೇವೆ, ನಿಮಗೆ CSS ತಿಳಿದಿದ್ದರೆ ಇವುಗಳನ್ನು ಚಿಹ್ನೆಯೊಂದಿಗೆ ಗುರುತಿಸಲಾಗಿದೆ ಎಂದು ನಿಮಗೆ ಅರ್ಥವಾಗುತ್ತದೆ '#', ಮತ್ತು ಆ ಕ್ರಮವಿಲ್ಲದ ಪಟ್ಟಿಯೊಳಗೆ (ಉಲ್) ನಾವು ವರ್ಗ (ವರ್ಗ) ಲಿಸ್ಟಿಲ್ಲಾದೊಂದಿಗೆ ಐದು ಲೇಬಲ್‌ಗಳನ್ನು ಸೇರಿಸುತ್ತೇವೆ, ನಾನು ಇದನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ವಿವರಿಸುತ್ತೇನೆ. ವಾಸ್ತವವಾಗಿ ಇದು ತುಂಬಾ ಸರಳವಾಗಿದೆ, '#' ಇದು ಒಂದು ಐಡಿ ಎಂದು ಸೂಚಿಸುತ್ತದೆ, ನಂತರ 'li.listilla' ನಾವು «li class ಅನ್ನು ವರ್ಗ« li class = listilla with ನೊಂದಿಗೆ ರಚಿಸಬೇಕು ಎಂದು ಹೇಳುತ್ತದೆ ಮತ್ತು ನಂತರ ನಾವು sayಕೊನೆಯ ಐದು ಬಾರಿ ಪುನರಾವರ್ತಿಸಿ«. ಇದರ ಪರಿಣಾಮವಾಗಿ ನಮಗೆ ಏನು ನೀಡುತ್ತದೆ:

ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಮತ್ತು ಕಡಿಮೆ ಸಮಯದಲ್ಲಿ ಬರೆದ ಹನ್ನೆರಡು ಸಾಲುಗಳ ಕೋಡ್

ಮತ್ತು ಅದನ್ನು ಸಿಎಸ್ಎಸ್ ಮೂಲಕವೂ ಮಾಡಬಹುದು, ಆದರೂ ನಾನು ಸ್ಪಷ್ಟವಾದದನ್ನು ತೋರಿಸುವ ಮೂಲಕ ಲೇಖನವನ್ನು ಉದ್ದಗೊಳಿಸುವುದಿಲ್ಲ (ಕೆಳಗೆ ನಾನು ನಿಮಗೆ ಚೀಟ್ಸ್ನ ಸಂಪೂರ್ಣ ಪಟ್ಟಿಯನ್ನು ರವಾನಿಸುತ್ತೇನೆ En ೆನ್ ಕೋಡಿಂಗ್).

ಒಂದರಲ್ಲಿ illion ಿಲಿಯನ್ ಲಕ್ಷ ಸಾಲುಗಳನ್ನು ಮಾಡಲು ಇದು ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ ಎಂದು ನಾನು ಒತ್ತಿ ಹೇಳಬೇಕಾಗಿದೆ, ಓಹ್, ಇದಕ್ಕೆ ಮಿತಿ ಮತ್ತು ಅದನ್ನು ಬಳಸಲು ಒಂದು ಮಾರ್ಗವಿದೆ. ಉದಾಹರಣೆಗೆ ನಾವು ಈ ರೀತಿ ಏನಾದರೂ ಮಾಡಲು ಬಯಸಿದರೆ:

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

ಸಿದ್ಧಾಂತದಲ್ಲಿ ಏನು ನಮಗೆ ಇದನ್ನು ನೀಡಬೇಕು (ಕೊನೆಯ ಚಿತ್ರದಲ್ಲಿ ಹೈಲೈಟ್ ಮಾಡಿದ ರೇಖೆಯನ್ನು ನೋಡಿ):

ಇದು ನಮಗೆ ಇದನ್ನು ನೀಡುತ್ತದೆ:

ಇದರೊಂದಿಗೆ ನೀವು ಮ್ಯಾಜಿಕ್ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ ಎಂದು ಇದು ತೋರಿಸುತ್ತದೆ; ಕೋಡ್‌ನ en ೆನ್ ಮಾಸ್ಟರ್ ನಿಖರವಾಗಿ ಮತ್ತು ವೇಗವಾಗಿರಬೇಕು ಎಂಬುದನ್ನು ನೆನಪಿಡಿ, ಮತ್ತು ತಪ್ಪಾಗಿ ಮಾಡಿದ ಕೆಲಸಗಳನ್ನು ಮಾಡಲು ಸಮಯ ಮತ್ತು ವೇಗ ಬೇಕಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ, ತ್ವರಿತವಾಗಿ ಮತ್ತು ಇದರೊಂದಿಗೆ ಬರೆಯಲು ಸರಿಯಾದ ತಂತ್ರ En ೆನ್ ಕೋಡಿಂಗ್ ಇದು ಹೀಗಿರುತ್ತದೆ:

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

ನೀವು ವಿಸ್ತರಿಸುತ್ತೀರಿ ಮತ್ತು ಹೆಡ್ ಟ್ಯಾಗ್ ಒಳಗೆ:

title+meta

ಇದು ನಿಮಗೆ ಸರಿಯಾದ ಕೋಡ್ ನೀಡುತ್ತದೆ:

ಆದಾಗ್ಯೂ En ೆನ್ ಕೋಡಿಂಗ್ ನಿಮಗೆ ತೋರಿಸಲು ಇನ್ನೂ ಹಲವು ವಿಷಯಗಳಿವೆ ಮತ್ತು ಬಹುಶಃ ತಲೆಯೊಳಗೆ ಮತ್ತೊಂದು ಆಜ್ಞಾ ಸಾಲಿನ ಬರೆಯುವುದು ಉತ್ತಮವಲ್ಲ, ಆದ್ದರಿಂದ ನಾವು ಇನ್ನೊಂದು ಆಜ್ಞೆಯನ್ನು ಬಳಸುತ್ತೇವೆ, «ಸಂಕ್ಷೇಪಣದೊಂದಿಗೆ ವಿಸ್ತರಿಸಿ"ನನ್ನ ವಿಷಯದಲ್ಲಿ ctrl + alt + e ಇದು ಸಣ್ಣ ಪಟ್ಟಿಯನ್ನು ತೆರೆಯುತ್ತದೆ, ಅಲ್ಲಿ ನಾವು en ೆನ್ ಕೋಡ್ ಬರೆಯಬಹುದು ಮತ್ತು ಅದು ನೈಜ ಸಮಯದಲ್ಲಿ ಹೇಗೆ ಗೋಚರಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡಬಹುದು. ಜಾಗರೂಕರಾಗಿರಿ, ಇದರೊಂದಿಗೆ ಎಲ್ಲವನ್ನೂ ಬರೆಯಲು ನಾನು ಶಿಫಾರಸು ಮಾಡುವುದಿಲ್ಲ ಆದರೆ ಈಗಾಗಲೇ ರಚಿಸಲಾದ ರಚನೆಗಳೊಳಗೆ ಬರೆಯಿರಿ, ಅಂದರೆ, ಮೊದಲು ದೊಡ್ಡ ರಚನೆಗಳನ್ನು ರಚಿಸಿ ಮತ್ತು ನಂತರ ನೀವು ಈ ಆಯ್ಕೆಯೊಂದಿಗೆ ಅವುಗಳೊಳಗೆ ವಿವರ ನೀಡುತ್ತೀರಿ.

ಮತ್ತು ಒಳಗೆ ಸೂಪರ್ ಕೂಲ್ ಆಜ್ಞೆಗಳ ಬಹುಸಂಖ್ಯೆಯಿದೆ En ೆನ್ ಕೋಡಿಂಗ್, ವಿಷಯವೆಂದರೆ ನೀವು ಅವುಗಳನ್ನು ಸ್ಥಾಪಿಸಿದ ನಂತರ ಅವುಗಳನ್ನು ತನಿಖೆ ಮಾಡಿ ಮತ್ತು ಅವುಗಳನ್ನು ಬಳಸಲು ಕಲಿಯಿರಿ; ಈ ಪ್ಲಗ್‌ಇನ್‌ನೊಂದಿಗೆ ನಿಮಗೆ CSS ಅಥವಾ HTML ಗಾಗಿ ಸ್ವಯಂಪೂರ್ಣತೆ ಅಥವಾ ತುಣುಕುಗಳ ಅಗತ್ಯವಿರುವುದಿಲ್ಲ, ವಾಸ್ತವವಾಗಿ, ಈ ಆಯ್ಕೆಗಳು ಈ ಎರಡು ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳಲ್ಲಿ ಒಟ್ಟು ಸಮಯ ವ್ಯರ್ಥ ಎಂದು ನೀವು ಅರಿತುಕೊಳ್ಳುತ್ತೀರಿ

ಮತ್ತು ಆಸಕ್ತರಿಗಾಗಿ, ಅಧಿಕೃತ ಚೀಟ್‌ಶೀಟ್ ಇಲ್ಲಿದೆ En ೆನ್ ಕೋಡಿಂಗ್, ನೀವು ಅದನ್ನು ಸ್ವರೂಪದಲ್ಲಿ ನೋಡಬಹುದು ಒಡಿಎಫ್ o ಪಿಡಿಎಫ್ ನ್ಯಾಯೋಚಿತ ಇಲ್ಲಿ