ಟ್ಯಾಬ್ಗಳು ಮತ್ತು ಸ್ಪೇಸಿಂಗ್ ರಚಿಸಲು HTML ಮತ್ತು CSS ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು

ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಬಿಳಿ ಜಾಗವನ್ನು ಬ್ರೌಸರ್ಗಳ ಮೂಲಕ ಹೇಗೆ ಪರಿಗಣಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡೋಣ

ನೀವು ಒಂದು ಆರಂಭದ ವೆಬ್ ಡಿಸೈನರ್ ಆಗಿದ್ದರೆ, ಸೈಟ್ನ ಕೋಡ್ನಲ್ಲಿನ ಬಿಳಿ ಜಾಗವನ್ನು ವೆಬ್ ಬ್ರೌಸರ್ಗಳು ನಿರ್ವಹಿಸುವ ರೀತಿಯಲ್ಲಿ ನೀವು ಮುಂಚೆಯೇ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಬೇಕಾದ ಅನೇಕ ವಿಷಯಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ.

ದುರದೃಷ್ಟವಶಾತ್, ಬ್ರೌಸರ್ಗಳು ಜಾಗವನ್ನು ನಿಭಾಯಿಸುವ ವಿಧಾನವು ಮೊದಲಿಗೆ ಬಹಳ ಅರ್ಥಗರ್ಭಿತವಲ್ಲ, ವಿಶೇಷವಾಗಿ ನೀವು ಎಚ್ಟಿಎಮ್ಎಲ್ಗೆ ಬಂದಾಗ ಮತ್ತು ವರ್ಡ್ ಪ್ರೊಸೆಸಿಂಗ್ ಪ್ರೊಗ್ರಾಮ್ಗಳಲ್ಲಿ ಬಿಳಿ ಜಾಗವನ್ನು ಹೇಗೆ ನಿಭಾಯಿಸಬಹುದು ಎಂಬುದನ್ನು ಹೋಲಿಸಿದರೆ, ನೀವು ಹೆಚ್ಚು ಪರಿಚಿತರಾಗಿರಬಹುದು.

ವರ್ಡ್ ಪ್ರೊಸೆಸಿಂಗ್ ಸಾಫ್ಟ್ವೇರ್ನಲ್ಲಿ ನೀವು ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಸಾಕಷ್ಟು ಅಂತರ ಅಥವಾ ಟ್ಯಾಬ್ಗಳನ್ನು ಸೇರಿಸಬಹುದು ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ನ ವಿಷಯದ ಪ್ರದರ್ಶನದಲ್ಲಿ ಅಂತರವು ಪ್ರತಿಫಲಿಸುತ್ತದೆ. ಇದು HTML ಅಥವಾ ವೆಬ್ ಪುಟಗಳೊಂದಿಗೆ ಅಲ್ಲ. ಹಾಗಾಗಿ, ವೆಬ್ ಬ್ರೌಸರ್ಗಳ ಮೂಲಕ ಬಿಳಿ ಜಾಗವು ಹೇಗೆ ನಿಭಾಯಿತವಾಗಿದೆ ಎಂಬುದನ್ನು ಕಲಿಯುವುದು ಬಹಳ ಮುಖ್ಯ.

ಮುದ್ರಣದಲ್ಲಿ ಅಂತರ

ವರ್ಡ್ ಪ್ರೊಸೆಸಿಂಗ್ ಸಾಫ್ಟ್ವೇರ್ನಲ್ಲಿ, ಮೂರು ಪ್ರಾಥಮಿಕ ಜಾಗವನ್ನು ಹೊಂದಿರುವ ಜಾಗಗಳು ಸ್ಪೇಸ್, ​​ಟ್ಯಾಬ್ ಮತ್ತು ಕ್ಯಾರೇಜ್ ರಿಟರ್ನ್. ಈ ಪ್ರತಿಯೊಂದು ಕಾರ್ಯವು ಒಂದು ವಿಭಿನ್ನ ರೀತಿಯಲ್ಲಿ, ಆದರೆ ಎಚ್ಟಿಎಮ್ಎಲ್ನಲ್ಲಿ ಬ್ರೌಸರ್ಗಳು ಅವುಗಳನ್ನು ಎಲ್ಲವನ್ನೂ ಒಂದೇ ರೀತಿ ನಿರೂಪಿಸುತ್ತದೆ. ನಿಮ್ಮ ಎಚ್ಟಿಎಮ್ಎಲ್ ಮಾರ್ಕ್ಅಪ್ನಲ್ಲಿ ನೀವು ಒಂದು ಜಾಗವನ್ನು ಅಥವಾ 100 ಸ್ಥಳಗಳನ್ನು ಇರಿಸಿ ಅಥವಾ ಟ್ಯಾಬ್ಗಳು ಮತ್ತು ಕ್ಯಾರೇಜ್ ರಿಟರ್ನ್ಸ್ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಅಂತರವನ್ನು ಮಿಶ್ರಣ ಮಾಡಲಿ, ಪುಟವು ಬ್ರೌಸರ್ನಿಂದ ಪ್ರದರ್ಶಿಸಿದಾಗ ಇವುಗಳೆಲ್ಲವೂ ಒಂದೇ ಸ್ಥಳಕ್ಕೆ ಸಾಂದ್ರೀಕರಿಸಲ್ಪಡುತ್ತವೆ. ವೆಬ್ ವಿನ್ಯಾಸ ಪರಿಭಾಷೆಯಲ್ಲಿ, ಇದನ್ನು ವೈಟ್ ಸ್ಪೇಸ್ ಕುಸಿತ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ. ವೆಬ್ ಪುಟದಲ್ಲಿ ವೈಟ್ಸ್ಪೇಸ್ ಅನ್ನು ಸೇರಿಸಲು ನೀವು ಈ ವಿಶಿಷ್ಟ ಅಂತರದ ಕೀಗಳನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಬ್ರೌಸರ್ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸಿದಾಗ ಬ್ರೌಸರ್ ಅನೇಕ ಸ್ಥಳಗಳನ್ನು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿ ಕುಸಿಯುತ್ತದೆ,

ಯಾರಾದರೂ ಯಾಕೆ ಟ್ಯಾಬ್ಗಳನ್ನು ಬಳಸುತ್ತಾರೆ?

ವಿಶಿಷ್ಟವಾಗಿ, ಜನರು ಪಠ್ಯ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಟ್ಯಾಬ್ಗಳನ್ನು ಬಳಸಿದಾಗ, ಅವರು ಲೇಔಟ್ ಕಾರಣಗಳಿಗಾಗಿ ಅವುಗಳನ್ನು ಬಳಸುತ್ತಿದ್ದಾರೆ ಅಥವಾ ಪಠ್ಯವನ್ನು ನಿರ್ದಿಷ್ಟ ಸ್ಥಳಕ್ಕೆ ತೆರಳಲು ಅಥವಾ ಇನ್ನೊಂದು ಅಂಶದಿಂದ ಸ್ವಲ್ಪ ಅಂತರವನ್ನು ಪಡೆಯಲು ಬಳಸುತ್ತಾರೆ. ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ, ಆ ದೃಶ್ಯ ಶೈಲಿಗಳು ಅಥವಾ ಲೇಔಟ್ ಅಗತ್ಯಗಳನ್ನು ಸಾಧಿಸಲು ನೀವು ತಿಳಿಸಿದ ಸ್ಪೇಸ್ ಪಾತ್ರಗಳನ್ನು ಬಳಸಲು ಸಾಧ್ಯವಿಲ್ಲ.

ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ, ಸಂಕೇತದಲ್ಲಿನ ಹೆಚ್ಚುವರಿ ಅಂತರದ ಅಕ್ಷರಗಳ ಬಳಕೆಯನ್ನು ಆ ಕೋಡ್ ಅನ್ನು ಓದುವ ಸುಲಭವಾಗುವುದು. ವೆಬ್ ವಿನ್ಯಾಸಕರು ಮತ್ತು ಅಭಿವರ್ಧಕರು ಆಗಾಗ್ಗೆ ಕೋಡ್ಗಳನ್ನು ಇಂಡೆಂಟ್ ಮಾಡಲು ಟ್ಯಾಬ್ಗಳನ್ನು ಬಳಸುತ್ತಾರೆ, ಆದ್ದರಿಂದ ಯಾವ ಅಂಶವು ಇತರ ಅಂಶಗಳ ಮಕ್ಕಳು ಎಂಬುದನ್ನು ಅವರು ನೋಡಬಹುದು - ಆದರೆ ಆ ಇಂಡೆಂಟ್ಗಳು ಪುಟದ ದೃಶ್ಯ ವಿನ್ಯಾಸವನ್ನು ಪರಿಣಾಮ ಬೀರುವುದಿಲ್ಲ. ಅಗತ್ಯ ದೃಶ್ಯ ವಿನ್ಯಾಸದ ಬದಲಾವಣೆಗಳಿಗಾಗಿ, ನೀವು ಸಿಎಸ್ಎಸ್ (ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್) ಗೆ ತಿರುಗಬೇಕಾಗುತ್ತದೆ.

ಎಚ್ಟಿಎಮ್ಎಲ್ ಟ್ಯಾಬ್ಗಳು ಮತ್ತು ಸ್ಪೇಸಿಂಗ್ ರಚಿಸಲು ಸಿಎಸ್ಎಸ್ ಬಳಸಿ

ಇಂದು ವೆಬ್ಸೈಟ್ಗಳು ರಚನೆ ಮತ್ತು ಶೈಲಿಯನ್ನು ಬೇರ್ಪಡಿಸುವ ಮೂಲಕ ನಿರ್ಮಿಸಲಾಗಿದೆ. ಒಂದು ಪುಟದ ರಚನೆಯು ಎಚ್ಟಿಎಮ್ಎಲ್ನಿಂದ ನಿರ್ವಹಿಸಲ್ಪಡುತ್ತದೆ, ಆದರೆ ಶೈಲಿ ಸಿಎಸ್ಎಸ್ನಿಂದ ಆಜ್ಞಾಪಿಸಲ್ಪಟ್ಟಿದೆ. ಇದರರ್ಥ ಅಂತರವನ್ನು ರಚಿಸಲು ಅಥವಾ ನಿರ್ದಿಷ್ಟ ವಿನ್ಯಾಸವನ್ನು ಸಾಧಿಸಲು, ನೀವು ಸಿಎಸ್ಎಸ್ ಗೆ ತಿರುಗಿರಬೇಕು ಮತ್ತು HTML ಕೋಡ್ಗೆ ಸ್ಪೇಸಿಂಗ್ ಅಕ್ಷರಗಳನ್ನು ಸೇರಿಸಲು ಪ್ರಯತ್ನಿಸಬಾರದು.

ಪಠ್ಯದ ಕಾಲಮ್ಗಳನ್ನು ರಚಿಸಲು ಟ್ಯಾಬ್ಗಳನ್ನು ಬಳಸಲು ನೀವು ಪ್ರಯತ್ನಿಸುತ್ತಿದ್ದರೆ, ಆ ಕಾಲಮ್ ಲೇಔಟ್ ಪಡೆಯಲು ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಸ್ಥಾನದಲ್ಲಿರುವ

ಅಂಶಗಳನ್ನು ನೀವು ಬಳಸಬಹುದು. ಈ ಸ್ಥಾನೀಕರಣವನ್ನು ಸಿಎಸ್ಎಸ್ ಫ್ಲೋಟ್ಗಳು, ಪರಿಪೂರ್ಣ ಮತ್ತು ಸಾಪೇಕ್ಷ ಸ್ಥಾನೀಕರಣ, ಅಥವಾ ಫ್ಲೆಕ್ಸ್ಬಾಕ್ಸ್ ಅಥವಾ ಸಿಎಸ್ಎಸ್ ಗ್ರಿಡ್ನಂತಹ ಹೊಸ ಸಿಎಸ್ಎಸ್ ಲೇಔಟ್ ತಂತ್ರಗಳ ಮೂಲಕ ಮಾಡಬಹುದಾಗಿದೆ.

ನೀವು ಔಟ್ ಹಾಕುತ್ತಿರುವ ಡೇಟಾ ಕೋಷ್ಟಕ ಡೇಟಾವಾಗಿದ್ದರೆ, ನೀವು ಬಯಸಿದಂತೆ ಆ ಡೇಟಾವನ್ನು align ಮಾಡಲು ನೀವು ಕೋಷ್ಟಕಗಳನ್ನು ಬಳಸಬಹುದು. ಟೇಬಲ್ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ವೆಬ್ ವಿನ್ಯಾಸದಲ್ಲಿ ಕೆಟ್ಟ ರಾಪ್ ಅನ್ನು ಪಡೆದುಕೊಳ್ಳುತ್ತವೆ ಏಕೆಂದರೆ ಅವುಗಳನ್ನು ಹಲವು ವರ್ಷಗಳವರೆಗೆ ಶುದ್ಧ ಲೇಔಟ್ ಉಪಕರಣಗಳಾಗಿ ದುರುಪಯೋಗಪಡಿಸಿಕೊಂಡಿದ್ದಾರೆ, ಆದರೆ ನಿಮ್ಮ ವಿಷಯವನ್ನು ತಿಳಿಸಿದ ಕೋಷ್ಟಕ ಡೇಟಾವನ್ನು ಒಳಗೊಂಡಿರುವ ಕೋಷ್ಟಕಗಳು ಇನ್ನೂ ಸಂಪೂರ್ಣವಾಗಿ ಮಾನ್ಯವಾಗಿರುತ್ತವೆ.

ಅಂಚುಗಳು, ಪ್ಯಾಡಿಂಗ್ ಮತ್ತು ಪಠ್ಯ-ಇಂಡೆಂಟ್

ಕೆಳಗಿನ CSS ಶೈಲಿಗಳಲ್ಲಿ ಒಂದನ್ನು ಬಳಸುವುದರ ಮೂಲಕ ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಅಂತರವನ್ನು ರಚಿಸುವ ಅತ್ಯಂತ ಸಾಮಾನ್ಯ ಮಾರ್ಗವೆಂದರೆ:

ಉದಾಹರಣೆಗೆ, ನೀವು ಕೆಳಗಿನ ಸಿಎಸ್ಎಸ್ನೊಂದಿಗೆ ಟ್ಯಾಬ್ನಂತಹ ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಮೊದಲ ಸಾಲನ್ನು ಇಂಡೆಂಟ್ ಮಾಡಬಹುದು (ಇದು ನಿಮ್ಮ ಪ್ಯಾರಾಗ್ರಾಫ್ಗೆ "ಮೊದಲಿಗೆ" ಲಗತ್ತಿಸಲಾದ ವರ್ಗ ಗುಣಲಕ್ಷಣವನ್ನು ಹೊಂದಿದೆ ಎಂದು ಇದು ಊಹಿಸುತ್ತದೆ):

p.first {
ಪಠ್ಯ-ಇಂಡೆಂಟ್: 5em;
}

ಈ ಪ್ಯಾರಾಗ್ರಾಫ್ ಈಗ 5 ಅಕ್ಷರಗಳನ್ನು ಇಂಡೆಂಟ್ ಮಾಡಲಾಗುವುದು.

ಒಂದು ಅಂಶದ ಮೇಲಿನ, ಕೆಳಗಿನ, ಎಡ, ಅಥವಾ ಬಲಕ್ಕೆ (ಅಥವಾ ಆ ಬದಿಗಳ ಸಂಯೋಜನೆಗಳಿಗೆ) ಅಂತರವನ್ನು ಸೇರಿಸಲು CSS ನಲ್ಲಿ ಅಂಚು ಅಥವಾ ಪ್ಯಾಡಿಂಗ್ ಗುಣಗಳನ್ನು ನೀವು ಬಳಸಬಹುದು. ಅಂತಿಮವಾಗಿ, ನೀವು CSS ಗೆ ತಿರುಗಿ ಬೇಕಾದ ಯಾವುದೇ ಅಂತರವನ್ನು ಸಾಧಿಸಬಹುದು.

ಸಿಎಸ್ಎಸ್ ಇಲ್ಲದೆ ಒಂದು ಜಾಗಕ್ಕಿಂತ ಹೆಚ್ಚಿನ ಪಠ್ಯವನ್ನು ಚಲಿಸಲಾಗುತ್ತಿದೆ

ಮುಂಚಿನ ಐಟಂನಿಂದ ನಿಮ್ಮ ಪಠ್ಯವನ್ನು ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚು ಜಾಗವನ್ನು ಸರಿಸುವುದಕ್ಕಾಗಿ ನಿಮಗೆ ಬೇಕಾಗಿರುವುದಾದರೆ, ನೀವು ಮುರಿಯದ ಸ್ಥಳವನ್ನು ಬಳಸಬಹುದು.

ಮುರಿಯದ ಸ್ಥಳವನ್ನು ಬಳಸಲು, ನೀವು ಕೇವಲ & nbsp; ನಿಮ್ಮ HTML ಮಾರ್ಕ್ಅಪ್ನಲ್ಲಿ ನಿಮಗೆ ಅಗತ್ಯವಿರುವಷ್ಟು ಬಾರಿ.

ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಪದವನ್ನು ಐದು ಸ್ಥಳಾವಕಾಶಗಳನ್ನು ಸರಿಸಲು ಬಯಸಿದರೆ, ಪದವನ್ನು ಮೊದಲು ನೀವು ಸೇರಿಸಬಹುದು.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp;

ಎಚ್ಟಿಎಮ್ಎಲ್ ಇದನ್ನು ಗೌರವಿಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳನ್ನು ಒಂದೇ ಜಾಗಕ್ಕೆ ಕುಸಿಯುವುದಿಲ್ಲ. ಆದಾಗ್ಯೂ, ಲೇಔಟ್ ಅಗತ್ಯಗಳನ್ನು ಸಾಧಿಸುವುದಕ್ಕಾಗಿ ಮಾತ್ರ ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ಹೆಚ್ಚುವರಿ ಎಚ್ಟಿಎಮ್ಎಲ್ ಮಾರ್ಕ್ಅಪ್ ಅನ್ನು ಸೇರಿಸುವುದರಿಂದ ಇದು ಬಹಳ ಕಳಪೆ ಅಭ್ಯಾಸ ಎಂದು ಪರಿಗಣಿಸಲಾಗಿದೆ . ರಚನೆ ಮತ್ತು ಶೈಲಿಯನ್ನು ಬೇರ್ಪಡಿಸುವಿಕೆಯನ್ನು ಉಲ್ಲೇಖಿಸಿ, ನೀವು ಬಯಸಿದ ಲೇಔಟ್ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸಲು ಸರಳವಾಗಿ ಅಲ್ಲದ ಬ್ರೇಕಿಂಗ್ ಸ್ಥಳಗಳನ್ನು ಸೇರಿಸುವುದನ್ನು ತಪ್ಪಿಸಬೇಕು ಮತ್ತು ಬದಲಾಗಿ ಸಿಎಸ್ಎಸ್ ಮಾರ್ಜಿನ್ಗಳು ಮತ್ತು ಪ್ಯಾಡಿಂಗ್ ಬಳಸಬೇಕು.