ಚಿತ್ರದ ಸುತ್ತಲಿನ ಪಠ್ಯವನ್ನು ಹೇಗೆ ಸುತ್ತುವುದು

ಯಾವುದೇ ವೆಬ್ ಪುಟವನ್ನು ನೋಡಿ ಮತ್ತು ಪಠ್ಯ ವಿಷಯ ಮತ್ತು ಚಿತ್ರಣಗಳ ಸಂಯೋಜನೆಯನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ. ಈ ಎರಡೂ ಅಂಶಗಳು ವೆಬ್ಸೈಟ್ನ ಯಶಸ್ಸಿನಲ್ಲಿ ಅತ್ಯಗತ್ಯ ಅಂಶಗಳಾಗಿವೆ. ಪಠ್ಯ ವಿಷಯವು ಯಾವ ಸೈಟ್ ಭೇಟಿಗಳು ಓದಬಹುದು ಮತ್ತು ಹುಡುಕಾಟ ಎಂಜಿನ್ಗಳು ತಮ್ಮ ಶ್ರೇಯಾಂಕ ಕ್ರಮಾವಳಿಗಳ ಭಾಗವಾಗಿ ಬಳಸುತ್ತವೆ . ಚಿತ್ರಗಳು ಸೈಟ್ಗೆ ದೃಷ್ಟಿಗೋಚರ ಆಸಕ್ತಿಯನ್ನು ಸೇರಿಸುತ್ತವೆ ಮತ್ತು ಪಠ್ಯ ವಿಷಯವನ್ನು ಎದ್ದು ಕಾಣುವಂತೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ವೆಬ್ಸೈಟ್ಗಳಿಗೆ ಪಠ್ಯ ಮತ್ತು ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸುವುದು ಸುಲಭ. ಪ್ಯಾರಾಗ್ರಾಫ್ಗಳು, ಶಿರೋನಾಮೆಗಳು ಮತ್ತು ಪಟ್ಟಿಗಳಂತಹ ಸ್ಟ್ಯಾಂಡರ್ಡ್ HTML ಟ್ಯಾಗ್ಗಳೊಂದಿಗೆ ಪಠ್ಯವನ್ನು ಸೇರಿಸಲಾಗುತ್ತದೆ, ಆದರೆ ಚಿತ್ರಗಳನ್ನು ಅಂಶದೊಂದಿಗೆ ಪುಟದಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ. ಒಮ್ಮೆ ನೀವು ನಿಮ್ಮ ವೆಬ್ ಪುಟಕ್ಕೆ ಇಮೇಜ್ ಅನ್ನು ಸೇರಿಸಿದ ಬಳಿಕ, ಅದರ ಕೆಳಗೆ ಅಲೈನ್ ಮಾಡುವುದಕ್ಕಿಂತ ಹೆಚ್ಚಾಗಿ ಪಠ್ಯದ ಹರಿವನ್ನು ನೀವು ಹೊಂದಲು ಬಯಸಬಹುದು (ಇದು HTML ಕೋಡ್ಗೆ ಸೇರಿಸಲಾದ ಇಮೇಜ್ ಅನ್ನು ಬ್ರೌಸರ್ನಲ್ಲಿ ನಿರೂಪಿಸುತ್ತದೆ). ತಾಂತ್ರಿಕವಾಗಿ, ನೀವು ಈ ನೋಟವನ್ನು ಸಾಧಿಸಬಹುದು, ಸಿಎಸ್ಎಸ್ ಬಳಸಿ (ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ) ಅಥವಾ ದೃಶ್ಯ ಸೂಚನೆಗಳನ್ನು ನೇರವಾಗಿ HTML ಗೆ ಸೇರಿಸುವ ಮೂಲಕ (ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ಗೆ ಶೈಲಿ ಮತ್ತು ವಿನ್ಯಾಸದ ಪ್ರತ್ಯೇಕತೆಯನ್ನು ಕಾಪಾಡಿಕೊಳ್ಳಲು ನೀವು ಬಯಸಿದಲ್ಲಿ) ಶಿಫಾರಸು ಮಾಡಬೇಡಿ.

ಸಿಎಸ್ಎಸ್ ಬಳಸಿ

ಪುಟದ ಪಠ್ಯ ಮತ್ತು ಚಿತ್ರಗಳ ವಿನ್ಯಾಸ ಮತ್ತು ಬ್ರೌಸರ್ನಲ್ಲಿ ಅವರ ದೃಷ್ಟಿ ಶೈಲಿಗಳು ಹೇಗೆ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತವೆ ಎನ್ನುವುದನ್ನು ಸರಿಯಾದ ರೀತಿಯಲ್ಲಿ ಬದಲಿಸಲು CSS ನೊಂದಿಗೆ. ನಾವು ಪುಟದಲ್ಲಿ ದೃಶ್ಯ ಬದಲಾವಣೆಯ ಕುರಿತು ಮಾತನಾಡುತ್ತಿದ್ದರೇ (ಚಿತ್ರದ ಸುತ್ತಲೂ ಪಠ್ಯ ಹರಿವನ್ನು ಮಾಡುವಿಕೆ) ಎಂದು ನೆನಪಿಡಿ, ಇದರರ್ಥ ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್ಸ್ನ ಡೊಮೇನ್.

1. ಮೊದಲು, ನಿಮ್ಮ ಇಮೇಜ್ ಅನ್ನು ನಿಮ್ಮ ವೆಬ್ ಪುಟಕ್ಕೆ ಸೇರಿಸಿ. ಆ HTML ನಿಂದ ಯಾವುದೇ ದೃಶ್ಯ ಗುಣಲಕ್ಷಣಗಳನ್ನು (ಅಗಲ ಮತ್ತು ಎತ್ತರ ಮೌಲ್ಯಗಳಂತೆ) ಹೊರಗಿಡಲು ನೆನಪಿಡಿ. ಇದು ಮುಖ್ಯವಾದುದು, ವಿಶೇಷವಾಗಿ ಬ್ರೌಸರ್ನ ಆಧಾರದ ಮೇಲೆ ಚಿತ್ರದ ಗಾತ್ರವು ಬದಲಾಗಬಲ್ಲ ಒಂದು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವೆಬ್ಸೈಟ್ಗೆ . ಅಡೋಬ್ ಡ್ರೀಮ್ವೇವರ್ನಂತಹ ಕೆಲವು ಸಾಫ್ಟ್ವೇರ್, ಆ ಉಪಕರಣದೊಂದಿಗೆ ಸೇರಿಸಲಾದ ಚಿತ್ರಗಳಿಗೆ ಅಗಲ ಮತ್ತು ಎತ್ತರದ ಮಾಹಿತಿಯನ್ನು ಸೇರಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಈ ಮಾಹಿತಿಯನ್ನು HTML ಕೋಡ್ನಿಂದ ತೆಗೆದುಹಾಕಲು ಮರೆಯಬೇಡಿ! ಆದಾಗ್ಯೂ, ಸರಿಯಾದ ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು ಸೇರಿಸಲು ಮರೆಯಬೇಡಿ. ನಿಮ್ಮ HTML ಕೋಡ್ ಹೇಗೆ ಕಾಣಿಸಬಹುದು ಎಂಬುದರ ಒಂದು ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ:
2. ಶೈಲಿಯ ಉದ್ದೇಶಗಳಿಗಾಗಿ, ನೀವು ಚಿತ್ರಕ್ಕೆ ವರ್ಗವನ್ನು ಸೇರಿಸಬಹುದು. ಈ ವರ್ಗ ಮೌಲ್ಯವು ನಮ್ಮ ಸಿಎಸ್ಎಸ್ ಫೈಲ್ನಲ್ಲಿ ನಾವು ಬಳಸುವುದು. ನಾವು ಇಲ್ಲಿ ಬಳಸುವ ಮೌಲ್ಯವು ಅನಿಯಂತ್ರಿತವಾಗಿದೆ, ಆದರೆ, ಈ ನಿರ್ದಿಷ್ಟ ಶೈಲಿಗೆ ನಾವು ನಮ್ಮ ಇಮೇಜ್ ಅನ್ನು ಅಲೈನ್ ಮಾಡಲು ಬಯಸುವ ರೀತಿಯಲ್ಲಿ, "ಎಡ" ಅಥವಾ "ಬಲ" ಮೌಲ್ಯಗಳನ್ನು ಬಳಸುತ್ತೇವೆ. ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುವ ಸರಳ ಸಿಂಟಾಕ್ಸ್ ಅನ್ನು ನಾವು ಕಂಡುಕೊಳ್ಳುತ್ತೇವೆ ಮತ್ತು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಭವಿಷ್ಯದಲ್ಲಿ ಒಂದು ಸೈಟ್ ಅನ್ನು ನಿರ್ವಹಿಸುವ ಇತರರಿಗೆ ಸುಲಭವಾಗಬಹುದು, ಆದರೆ ನೀವು ಬಯಸುವ ಯಾವುದೇ ವರ್ಗ ಮೌಲ್ಯವನ್ನು ನೀವು ನೀಡಬಹುದು.
   2. ಸ್ವತಃ, ಈ ವರ್ಗ ಮೌಲ್ಯ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ. ಚಿತ್ರವು ಪಠ್ಯದ ಎಡಭಾಗದಲ್ಲಿ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಜೋಡಿಸಲ್ಪಡುವುದಿಲ್ಲ. ಇದಕ್ಕಾಗಿ, ನಾವು ಈಗ ನಮ್ಮ ಸಿಎಸ್ಎಸ್ ಫೈಲ್ಗೆ ತಿರುಗಬೇಕಾಗಿದೆ.

1. ನಿಮ್ಮ ಸ್ಟೈಲ್ಶೀಟ್ನಲ್ಲಿ, ನೀವು ಈ ಕೆಳಗಿನ ಶೈಲಿಯನ್ನು ಸೇರಿಸಬಹುದು:
   1. .ಎಲೆಫ್ಟ್ {
   2. ಫ್ಲೋಟ್: ಎಡ;
   3. ಪ್ಯಾಡಿಂಗ್: 0 20px 20px 0;
   4. }
   5. ನೀವು ಇಲ್ಲಿ ಏನು ಮಾಡಿದ್ದೀರಿ ಎನ್ನುವುದು ಸಾಮಾನ್ಯ ಡಾಕ್ಯುಮೆಂಟ್ ಹರಿವಿನಿಂದ ಚಿತ್ರವನ್ನು ಎಳೆಯುವ CSS (ಫ್ಲೋಟ್) ಆಸ್ತಿಯನ್ನು ಬಳಸುತ್ತದೆ (ಅದು ಸಾಮಾನ್ಯವಾಗಿ ಚಿತ್ರ ಪ್ರದರ್ಶಿಸುವ ರೀತಿಯಲ್ಲಿ, ಅದರ ಕೆಳಗೆ ಜೋಡಿಸಲಾದ ಪಠ್ಯದೊಂದಿಗೆ) ಮತ್ತು ಅದರ ಧಾರಕದ ಎಡಭಾಗಕ್ಕೆ ಅದನ್ನು ಜೋಡಿಸುತ್ತದೆ . ಎಚ್ಟಿಎಮ್ಎಲ್ ಮಾರ್ಕ್ಅಪ್ನಲ್ಲಿ ಅದರ ನಂತರ ಬರುವ ಪಠ್ಯ ಈಗ ಅದರ ಸುತ್ತಲೂ ಸುತ್ತುತ್ತದೆ. ನಾವು ಕೆಲವು ಪ್ಯಾಡಿಂಗ್ ಮೌಲ್ಯಗಳನ್ನು ಕೂಡಾ ಸೇರಿಸಿದ್ದೇವೆ, ಆದ್ದರಿಂದ ಈ ಪಠ್ಯವು ಇಮೇಜ್ ವಿರುದ್ಧ ನೇರವಾಗಿ ಅಲ್ಲ. ಬದಲಾಗಿ, ಇದು ಪುಟದ ವಿನ್ಯಾಸದಲ್ಲಿ ದೃಷ್ಟಿಗೆ ಆಕರ್ಷಕವಾದ ಕೆಲವು ಉತ್ತಮ ಅಂತರವನ್ನು ಹೊಂದಿರುತ್ತದೆ. ಪ್ಯಾಡಿಂಗ್ಗಾಗಿ ಸಿಎಸ್ಎಸ್ ಸಂಕ್ಷಿಪ್ತ ರೂಪದಲ್ಲಿ, ನಾವು ಚಿತ್ರದ ಮೇಲಿನ ಮತ್ತು ಎಡ ಭಾಗಕ್ಕೆ 0 ಮೌಲ್ಯಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ, ಮತ್ತು ಅದರ ಎಡ ಮತ್ತು ಕೆಳಕ್ಕೆ 20 ಪಿಕ್ಸೆಲ್ಗಳನ್ನು ಸೇರಿಸಿದ್ದೇವೆ. ನೆನಪಿಡಿ, ಎಡ ಜೋಡಿಸಲಾದ ಚಿತ್ರದ ಬಲ ಭಾಗವನ್ನು ಪ್ಯಾಡಿಂಗ್ ಮಾಡಲು ನೀವು ಸೇರಿಸಬೇಕಾಗಿದೆ. ಬಲ ಜೋಡಿಸಿದ ಚಿತ್ರ (ನಾವು ಒಂದು ಕ್ಷಣದಲ್ಲಿ ನೋಡುತ್ತೇವೆ) ಪ್ಯಾಡಿಂಗ್ ಅದರ ಎಡಭಾಗಕ್ಕೆ ಅನ್ವಯಿಸುತ್ತದೆ.
2. ನಿಮ್ಮ ವೆಬ್ಪುಟವನ್ನು ಬ್ರೌಸರ್ನಲ್ಲಿ ನೀವು ವೀಕ್ಷಿಸಿದರೆ, ನಿಮ್ಮ ಇಮೇಜ್ ಪುಟದ ಎಡಭಾಗಕ್ಕೆ ಜೋಡಿಸಲ್ಪಟ್ಟಿರುವುದನ್ನು ನೀವು ನೋಡಬೇಕು ಮತ್ತು ಅದರ ಸುತ್ತಲಿನ ಪಠ್ಯ ಚೆನ್ನಾಗಿ ಸುತ್ತುತ್ತದೆ. ಇದನ್ನು ಹೇಳಲು ಇನ್ನೊಂದು ವಿಧಾನವೆಂದರೆ "ಎಡಕ್ಕೆ ತೇಲುತ್ತದೆ".

1. ಈ ಚಿತ್ರವನ್ನು ಬಲಕ್ಕೆ ಸರಿಹೊಂದಿಸಲು ನೀವು ಬಯಸಿದರೆ (ಈ ಲೇಖನವನ್ನು ಒಳಗೊಂಡಿರುವ ಫೋಟೋ ಉದಾಹರಣೆಯಲ್ಲಿರುವಂತೆ), ಅದು ಸರಳವಾಗಿದೆ. ಮೊದಲಿಗೆ, "ಎಡ" ದ ವರ್ಗ ಮೌಲ್ಯಕ್ಕಾಗಿ ನಾವು ನಮ್ಮ CSS ಗೆ ಸೇರಿಸಿದ ಶೈಲಿಗೆ ಹೆಚ್ಚುವರಿಯಾಗಿ, ನಾವು ಬಲ-ಜೋಡಣೆಗಾಗಿ ಒಂದನ್ನು ಹೊಂದಿದ್ದೇವೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಇದು ಹೀಗೆ ಕಾಣುತ್ತದೆ:
   1. .right {
   2. ಫ್ಲೋಟ್: ಸರಿ;
   3. ಪ್ಯಾಡಿಂಗ್: 0 0 20px 20px;
   4. }
   5. ನಾವು ಬರೆದ ಮೊದಲ ಸಿಎಸ್ಎಸ್ಗೆ ಇದು ಒಂದೇ ರೀತಿಯದ್ದಾಗಿದೆ ಎಂದು ನೀವು ನೋಡಬಹುದು. "ಫ್ಲೋಟ್" ಆಸ್ತಿ ಮತ್ತು ನಾವು ಬಳಸುವ ಪ್ಯಾಡಿಂಗ್ ಮೌಲ್ಯಗಳಿಗೆ ನಾವು ಬಳಸುವ ಮೌಲ್ಯವು ಒಂದೇ ವ್ಯತ್ಯಾಸವಾಗಿದೆ (ಕೆಲವು ಬದಲಾಗಿ ನಮ್ಮ ಚಿತ್ರದ ಎಡಭಾಗದಲ್ಲಿದೆ).
2. ಅಂತಿಮವಾಗಿ, ನೀವು ನಿಮ್ಮ HTML ನಲ್ಲಿ "ಎಡ" ದಿಂದ "ಬಲ" ಗೆ ಚಿತ್ರದ ವರ್ಗದ ಮೌಲ್ಯವನ್ನು ಬದಲಾಯಿಸಬಹುದು:
3. ಈಗ ನಿಮ್ಮ ಪುಟವನ್ನು ಬ್ರೌಸರ್ನಲ್ಲಿ ನೋಡೋಣ ಮತ್ತು ನಿಮ್ಮ ಚಿತ್ರವು ಅದರ ಸುತ್ತಲೂ ಸುತ್ತುತ್ತಿರುವ ಪಠ್ಯದೊಂದಿಗೆ ಬಲಕ್ಕೆ ಸರಿಹೊಂದಬೇಕು. ಈ ಎರಡೂ ಶೈಲಿಗಳನ್ನು ನಾವು "ಎಡ" ಮತ್ತು "ಬಲ" ನ್ನು ಎಲ್ಲಾ ನಮ್ಮ ಸ್ಟೈಲ್ಶೀಟ್ಗಳಿಗೆ ಸೇರಿಸುತ್ತೇವೆ, ಇದರಿಂದಾಗಿ ನಾವು ವೆಬ್ ಪುಟಗಳನ್ನು ರಚಿಸುವಾಗ ಅಗತ್ಯವಿರುವ ಈ ದೃಶ್ಯ ಶೈಲಿಗಳನ್ನು ಬಳಸಬಹುದು. ಈ ಎರಡು ಶೈಲಿಗಳು ಉತ್ತಮವಾದ, ಪುನರ್ಬಳಕೆಯ ವೈಶಿಷ್ಟ್ಯಗಳಾಗಿ ಮಾರ್ಪಡುತ್ತವೆ, ಅವುಗಳ ಸುತ್ತಲೂ ಪಠ್ಯದ ಸುತ್ತಿಕೊಳ್ಳುವಿಕೆಯೊಂದಿಗೆ ನಾವು ಶೈಲಿಯ ಚಿತ್ರಗಳನ್ನು ಮಾಡಬೇಕಾಗಬಹುದು.

ಸಿಎಸ್ಎಸ್ ಬದಲಿಗೆ ಎಚ್ಟಿಎಮ್ಎಲ್ ಬಳಸಿ (ಮತ್ತು ಏಕೆ ನೀವು ಮಾಡಬಾರದು)

ಎಚ್ಟಿಎಮ್ಎಲ್ನೊಂದಿಗಿನ ಚಿತ್ರದ ಸುತ್ತಲೂ ಸುತ್ತುವ ಪಠ್ಯವನ್ನು ಮಾಡಲು ಸಾಧ್ಯವಾದರೂ, ವೆಬ್ ಸ್ಟ್ಯಾಂಡರ್ಡ್ಸ್ ಸಿಎಸ್ಎಸ್ (ಮತ್ತು ಮೇಲೆ ನೀಡಲಾದ ಹಂತಗಳು) ನಾವು ರಚನೆಯ ಪ್ರತ್ಯೇಕತೆ (ಎಚ್ಟಿಎಮ್ಎಲ್) ಮತ್ತು ಶೈಲಿ (ಸಿಎಸ್ಎಸ್) ಅನ್ನು ಉಳಿಸಿಕೊಳ್ಳುವ ಮಾರ್ಗವನ್ನು ನಿರ್ದೇಶಿಸುತ್ತದೆ. ಕೆಲವು ಸಾಧನಗಳು ಮತ್ತು ಚೌಕಟ್ಟಿನಲ್ಲಿ, ಆ ಚಿತ್ರವು ಚಿತ್ರದ ಸುತ್ತ ಹರಿಯುವ ಅಗತ್ಯವಿಲ್ಲ ಎಂದು ನೀವು ಪರಿಗಣಿಸಿದಾಗ ಇದು ಮುಖ್ಯವಾಗುತ್ತದೆ. ಸಣ್ಣ ಪರದೆಗಳಿಗೆ, ಒಂದು ಪ್ರತಿಕ್ರಿಯಾಶೀಲ ವೆಬ್ಸೈಟ್ನ ವಿನ್ಯಾಸವು ಪಠ್ಯವು ನಿಜಕ್ಕೂ ಚಿತ್ರವನ್ನು ಕೆಳಗೆ ಜೋಡಿಸಬೇಕೆಂದು ಮತ್ತು ಪರದೆಯ ಪೂರ್ಣ ಅಗಲವನ್ನು ವಿಸ್ತರಿಸುವುದು ಅಗತ್ಯವಾಗಿರುತ್ತದೆ. ನಿಮ್ಮ ಶೈಲಿಗಳು ನಿಮ್ಮ HTML ಮಾರ್ಕ್ಅಪ್ನಿಂದ ಬೇರ್ಪಟ್ಟಿದ್ದರೆ ಮಾಧ್ಯಮ ಪ್ರಶ್ನೆಗಳು ಇದನ್ನು ಸುಲಭವಾಗಿ ಮಾಡಬಹುದಾಗಿದೆ. ಇಂದಿನ ಬಹು-ಸಾಧನ ಜಗತ್ತಿನಲ್ಲಿ, ವಿಭಿನ್ನ ಪ್ರವಾಸಿಗರಿಗೆ ಮತ್ತು ವಿಭಿನ್ನ ಪರದೆಗಳಿಗೆ ಚಿತ್ರಗಳನ್ನು ಮತ್ತು ಪಠ್ಯ ವಿಭಿನ್ನವಾಗಿ ಕಾಣಿಸಿಕೊಳ್ಳುವಲ್ಲಿ, ವೆಬ್ ಪುಟದ ದೀರ್ಘ-ಅವಧಿಯ ಯಶಸ್ಸು ಮತ್ತು ನಿರ್ವಹಣೆಗೆ ಈ ವಿಭಜನೆ ಅತ್ಯಗತ್ಯ.