ಟ್ಯಾಗ್ ಮಾಡಿ ವೆಬ್ ಪುಟದಲ್ಲಿ GIF, JPEG ಅಥವಾ PNG ಗ್ರಾಫಿಕ್ ಸ್ವರೂಪದಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಪ್ರದರ್ಶಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಇಮೇಜ್ ಫೈಲ್‌ನ ವಿಳಾಸವನ್ನು src ಗುಣಲಕ್ಷಣದ ಮೂಲಕ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ. ಅಗತ್ಯವಿದ್ದರೆ, ಟ್ಯಾಗ್ ಅನ್ನು ಇರಿಸುವ ಮೂಲಕ ಡ್ರಾಯಿಂಗ್ ಅನ್ನು ಮತ್ತೊಂದು ಫೈಲ್ಗೆ ಲಿಂಕ್ ಮಾಡಬಹುದು ಒಂದು ಪಾತ್ರೆಯಲ್ಲಿ . .
ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಚಿತ್ರದ ಸುತ್ತಲೂ ಫ್ರೇಮ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ, ಇದನ್ನು ಟ್ಯಾಗ್‌ಗೆ ಬಾರ್ಡರ್="0" ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ತೆಗೆದುಹಾಕಬಹುದು.
ಚಿತ್ರದ ಸುತ್ತಲಿನ ಚೌಕಟ್ಟಿನ ದಪ್ಪ.
ಚಿತ್ರದ ಎತ್ತರ.
ಚಿತ್ರವು ಸರ್ವರ್-ಸೈಡ್ ಇಮೇಜ್ ಮ್ಯಾಪ್ ಎಂದು ಬ್ರೌಸರ್‌ಗೆ ಹೇಳುತ್ತದೆ.
ಚಿತ್ರದ ಟಿಪ್ಪಣಿಯನ್ನು ಹೊಂದಿರುವ ಡಾಕ್ಯುಮೆಂಟ್ನ ವಿಳಾಸವನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಕಡಿಮೆ ಗುಣಮಟ್ಟದ ಚಿತ್ರದ ವಿಳಾಸ.ಗ್ರಾಫಿಕ್ ಫೈಲ್ಗೆ ಮಾರ್ಗ.
ಪುಟಕ್ಕೆ ಚಿತ್ರವನ್ನು ಸೇರಿಸಲು, IMG HTML ಟ್ಯಾಗ್ ಬಳಸಿ. ಚಿತ್ರಕ್ಕಾಗಿ, ಕನಿಷ್ಠ ಎರಡು ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕು: src (ಚಿತ್ರದೊಂದಿಗೆ ಫೈಲ್ಗೆ ಮಾರ್ಗ) ಮತ್ತು alt (ಚಿತ್ರವನ್ನು ಲೋಡ್ ಮಾಡದಿದ್ದರೆ ಬಳಕೆದಾರರು ನೋಡುವ ಪರ್ಯಾಯ ಪಠ್ಯ). ಆಲ್ಟ್ ಗುಣಲಕ್ಷಣವು ಖಾಲಿಯಾಗಿರಬಹುದು, ಆದರೆ ಪ್ರಸ್ತುತವಾಗಿರಬೇಕು. ನೀವು ಶೀರ್ಷಿಕೆ ಗುಣಲಕ್ಷಣವನ್ನು ಸಹ ಹೊಂದಿಸಬಹುದು, ಮತ್ತು ನಂತರ ನೀವು ಚಿತ್ರದ ಮೇಲೆ ಸುಳಿದಾಡಿದಾಗ, ಈ ಗುಣಲಕ್ಷಣದಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಪಠ್ಯವನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
ಚಿತ್ರದೊಂದಿಗೆ ಫೈಲ್ ಅದು ಲೋಡ್ ಆಗಿರುವ ಪುಟದಂತೆಯೇ ಅದೇ ಫೋಲ್ಡರ್ನಲ್ಲಿದ್ದರೆ, ನಂತರ src ಗುಣಲಕ್ಷಣದಲ್ಲಿ ನೀವು ಫೈಲ್ ಹೆಸರನ್ನು ಮಾತ್ರ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ:
ಪುಟವು http://www..html ನಲ್ಲಿ ನೆಲೆಗೊಂಡಿದ್ದರೆ ಮತ್ತು ಚಿತ್ರವು http://www..jpg ಆಗಿದ್ದರೆ, ನಂತರ ಚಿತ್ರದ ಮಾರ್ಗವನ್ನು ಈ ಕೆಳಗಿನಂತೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ:
ಪುಟವು http://www..site/logo.jpg ಫೋಲ್ಡರ್ನಲ್ಲಿದ್ದರೆ, ಮಾರ್ಗವು ಈ ರೀತಿ ಇರುತ್ತದೆ:
ಚಿತ್ರವು http://www.site/images/ ಫೋಲ್ಡರ್ನಲ್ಲಿದ್ದರೆ, ಚಿತ್ರವನ್ನು ಸೇರಿಸಲಾದ ಅದೇ ಸೈಟ್‌ನಲ್ಲಿನ ಪುಟವು ಯಾವ ಫೋಲ್ಡರ್‌ನಲ್ಲಿದ್ದರೂ, ಫೈಲ್ಗೆ ಮಾರ್ಗವನ್ನು ಈ ಕೆಳಗಿನಂತೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು:
ಅಥವಾ ಇನ್ನೊಂದು ಸೈಟ್‌ನಲ್ಲಿದ್ದರೆ ಇಮೇಜ್ ಫೈಲ್ಗೆ ಪೂರ್ಣ ಮಾರ್ಗವನ್ನು ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು:
HTML ನ ಹಿಂದಿನ ಆವೃತ್ತಿಗಳಲ್ಲಿ, ಎತ್ತರ ಮತ್ತು ಅಗಲವನ್ನು ಅಗಲ ಮತ್ತು ಎತ್ತರದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಹೊಂದಿಸಲಾಗಿದೆ, ಆದರೆ ಈಗ ಚಿತ್ರದ ಪ್ರದರ್ಶನದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಎಲ್ಲವನ್ನೂ ಶೈಲಿ ಗುಣಲಕ್ಷಣದಲ್ಲಿ CSS ಬಳಸಿ ಹೊಂದಿಸಲಾಗಿದೆ. ಹೆಚ್ಚಾಗಿ, ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಪಿಕ್ಸೆಲ್‌ಗಳಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗುತ್ತದೆ:
ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ, ಚಿತ್ರವನ್ನು ಅದರ ಮೂಲ ಗಾತ್ರದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಮೌಲ್ಯಗಳು ಇದ್ದರೆ ಸಣ್ಣ ಗಾತ್ರಗಳುಮೂಲ, ನಂತರ ಬ್ರೌಸರ್ ಕಡಿಮೆ ರೂಪದಲ್ಲಿ ಚಿತ್ರವನ್ನು ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಮೌಲ್ಯಗಳು ದೊಡ್ಡದಾಗಿದ್ದರೆ, ಬ್ರೌಸರ್ ಚಿತ್ರವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಆಯಾಮಗಳಿಗೆ ವಿಸ್ತರಿಸುತ್ತದೆ, ಆದರೆ ಈ ಸಂದರ್ಭದಲ್ಲಿ ಚಿತ್ರವು ಕಡಿಮೆ ಸ್ಪಷ್ಟವಾಗಿರುತ್ತದೆ. ಆಕಸ್ಮಿಕವಾಗಿ ಚಿತ್ರವನ್ನು ವಿರೂಪಗೊಳಿಸದಿರಲು, ನೀವು ಹೊಂದಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ, ಎತ್ತರವನ್ನು ಮಾತ್ರ ಮತ್ತು ನಂತರ ನಿರ್ದಿಷ್ಟ ಎತ್ತರದ ಮೌಲ್ಯಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಅಗಲವನ್ನು ಕಡಿಮೆಗೊಳಿಸಲಾಗುತ್ತದೆ ಅಥವಾ ಹೆಚ್ಚಿಸಲಾಗುತ್ತದೆ.
ಅಲ್ಲದೆ, ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಬ್ರೌಸರ್ ವಿಂಡೋದ ಅಗಲ ಅಥವಾ ಎತ್ತರದ ಶೇಕಡಾವಾರು ಅಥವಾ ಇಮೇಜ್ ಇರುವ ಯಾವುದೇ ಬ್ಲಾಕ್ ಅಂಶವಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು:
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಪಠ್ಯವನ್ನು ಚಿತ್ರದ ಕೆಳಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. ಚಿತ್ರದ ಸುತ್ತಲೂ ಪಠ್ಯವನ್ನು ಸುತ್ತುವಂತೆ ಮಾಡಲು, ಫ್ಲೋಟ್ CSS ಆಸ್ತಿಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಇದು ಅಲೈನ್ ಗುಣಲಕ್ಷಣವನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ಚಿತ್ರವು ಪಠ್ಯದ ಎಡಭಾಗದಲ್ಲಿರಲು ಮತ್ತು ಪಠ್ಯವು ಅದರ ಸುತ್ತಲೂ ಬಲಕ್ಕೆ ಮತ್ತು ಕೆಳಗೆ ಹರಿಯಬೇಕೆಂದು ನಾವು ಬಯಸಿದರೆ, ನಂತರ ನಾವು CSS ಫ್ಲೋಟ್ ಆಸ್ತಿಗಾಗಿ ಎಡ ಮೌಲ್ಯವನ್ನು ಹೊಂದಿಸುತ್ತೇವೆ ಮತ್ತು ಚಿತ್ರವು ಬಲಭಾಗದಲ್ಲಿದ್ದರೆ, ನಂತರ ನಾವು ಸರಿಯಾದ ಮೌಲ್ಯವನ್ನು ಸೂಚಿಸುತ್ತೇವೆ:
ಪ್ಯಾರಾಗ್ರಾಫ್ನ ಪಠ್ಯವು ಇಲ್ಲಿ ಹೋಗುತ್ತದೆ
ನೀವು ಚಿತ್ರದ ಮೇಲಿನ, ಬಲ, ಕೆಳಗಿನ ಮತ್ತು ಎಡಭಾಗದಲ್ಲಿ ಇಂಡೆಂಟ್‌ಗಳನ್ನು ಹೊಂದಿಸಬಹುದು:
ಅದೇ ಸಂಕ್ಷಿಪ್ತ ರೂಪದಲ್ಲಿ ಹೇಳಬಹುದು:
ಪರ್ಯಾಯವಾಗಿ, ನೀವು ಲೆಗಸಿ vspace ಮತ್ತು hspace ಗುಣಲಕ್ಷಣಗಳ ಬದಲಿಗೆ ಎರಡು ಮಾರ್ಜಿನ್ ಆಸ್ತಿ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಲಂಬ ಮತ್ತು ಅಡ್ಡ ಅಂಚುಗಳನ್ನು ಹೊಂದಿಸಬಹುದು. ನಮಗೆ ಮೇಲ್ಭಾಗ ಮತ್ತು ಕೆಳಭಾಗದಲ್ಲಿ 10 ಪಿಕ್ಸೆಲ್‌ಗಳ ಅಂಚು ಮತ್ತು ಎಡ ಮತ್ತು ಬಲದಲ್ಲಿ 8 ಪಿಕ್ಸೆಲ್‌ಗಳ ಅಂಚು ಬೇಕು ಎಂದು ಹೇಳೋಣ:
ಅಥವಾ ನಾವು ನಮ್ಮದೇ ಆದ ಬಣ್ಣ, ಪ್ರಕಾರ ಮತ್ತು ಚಿತ್ರದ ಚೌಕಟ್ಟಿನ ದಪ್ಪವನ್ನು ಹೊಂದಿಸಬಹುದು:
ವಿಶಿಷ್ಟವಾಗಿ, ವೆಬ್‌ಸೈಟ್‌ಗಳು ಬಹು ಇಮೇಜ್ ಫಾರ್ಮ್ಯಾಟ್‌ಗಳನ್ನು ಬಳಸುತ್ತವೆ. ಛಾಯಾಚಿತ್ರಗಳಿಗಾಗಿ, JPEG ಸ್ವರೂಪವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಆದರೆ ನೀವು ಪಾರದರ್ಶಕ ಹಿನ್ನೆಲೆಯನ್ನು ಹೊಂದಲು ಚಿತ್ರ ಅಗತ್ಯವಿದ್ದರೆ, ನಂತರ PNG ಸ್ವರೂಪವನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಹಿಂದೆ, PNG ಸ್ವರೂಪದ ಬದಲಿಗೆ GIF ಅನ್ನು ಬಳಸಲಾಗುತ್ತಿತ್ತು, ಆದರೆ ಇದು ಈಗಾಗಲೇ ಹಳೆಯದಾಗಿದೆ - ಅದರ ಏಕೈಕ ಪ್ರಯೋಜನವೆಂದರೆ ಅನಿಮೇಟೆಡ್ ಚಿತ್ರಗಳನ್ನು ರಚಿಸುವ ಸಾಮರ್ಥ್ಯ. ವಿಶಿಷ್ಟವಾಗಿ, PNG ಮತ್ತು GIF ಅನ್ನು ವಿನ್ಯಾಸದ ಅಂಶಗಳಾಗಿ ಮಾತ್ರ ಬಳಸಲಾಗುತ್ತದೆ, ಮತ್ತು ಚಿತ್ರವು ಪಾರದರ್ಶಕ ಪ್ರದೇಶಗಳನ್ನು ಹೊಂದಿರಬೇಕಾದ ಸಂದರ್ಭಗಳಲ್ಲಿ ಅಥವಾ ಅರೆಪಾರದರ್ಶಕವಾಗಿರಬೇಕು. ಈ ಸ್ವರೂಪಗಳಲ್ಲಿನ ಫೈಲ್‌ಗಳು ಗಾತ್ರದಲ್ಲಿ ತುಂಬಾ ದೊಡ್ಡದಾಗಿರುವುದರಿಂದ, ಅವುಗಳನ್ನು ಸಾಮಾನ್ಯ ಛಾಯಾಚಿತ್ರಗಳಿಗೆ ಬಳಸಲು ಶಿಫಾರಸು ಮಾಡುವುದಿಲ್ಲ - ಇದಕ್ಕಾಗಿ JPEG ಸ್ವರೂಪವಿದೆ. ಸೈಟ್‌ಗೆ ಚಿತ್ರಗಳನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡುವ ಮೊದಲು, ಅವುಗಳ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಸೈಟ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವ ಗಾತ್ರಕ್ಕೆ ಕಡಿಮೆ ಮಾಡುವುದು ಯೋಗ್ಯವಾಗಿದೆ ಇದರಿಂದ ಅವು ಬಳಕೆದಾರರಿಗೆ ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತವೆ.
ಲೇಖನವನ್ನು ನಕಲಿಸುವುದನ್ನು ನಿಷೇಧಿಸಲಾಗಿದೆ.
ಹಲೋ, ಸೈಟ್ ಸೈಟ್ನ ಪ್ರಿಯ ಓದುಗರು. ಇಂದು ನಾವು ಹೆಚ್ಚಿನದಕ್ಕೆ ಹೋಗೋಣ ಆಸಕ್ತಿದಾಯಕ ವಿಷಯ, ಅವುಗಳೆಂದರೆ ಅಳವಡಿಕೆ ಚಿತ್ರಗಳು. ನಮ್ಮ ಬ್ರೌಸರ್ ಚಿತ್ರದೊಂದಿಗೆ ಪುಟವನ್ನು ತ್ವರಿತವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ತೆರೆಯಲು, ನಮಗೆ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ ಚಿತ್ರದ ಅಗತ್ಯವಿದೆ (ಚಿತ್ರಗಳನ್ನು ಏಕೆ ಮತ್ತು ಹೇಗೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಎಂಬುದರ ಕುರಿತು). ಅಂತಹ ಪೂರ್ವ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ ಚಿತ್ರವನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು, ಬಲ ಕ್ಲಿಕ್ ಮಾಡುವ ಮೂಲಕ ಮತ್ತು "ಇಮೇಜ್ ಅನ್ನು ಹೀಗೆ ಉಳಿಸಿ" ಆಯ್ಕೆ ಮಾಡುವ ಮೂಲಕ ಈ ಚಿತ್ರವನ್ನು ಉಳಿಸಿ.
ಚಿತ್ರಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು, ನಾವು ನಮ್ಮ HTML ಫೋಲ್ಡರ್‌ನಲ್ಲಿ ಮತ್ತೊಂದು ಫೋಲ್ಡರ್ "ಇಮೇಜಸ್" ಅನ್ನು ರಚಿಸುತ್ತೇವೆ ಮತ್ತು ಚಿತ್ರವನ್ನು ಅಲ್ಲಿ ಇರಿಸುತ್ತೇವೆ.
ಶೀರ್ಷಿಕೆ ಮತ್ತು ಮೊದಲ ಪ್ಯಾರಾಗ್ರಾಫ್ ನಡುವಿನ ಚಿತ್ರದೊಂದಿಗೆ ನಮ್ಮ ಚಿತ್ರವನ್ನು ಸೇರಿಸಲು ಪ್ರಯತ್ನಿಸೋಣ. ಇದನ್ನು ಮಾಡಲು, ನಾವು ಕೋಡ್ನಲ್ಲಿ ನಮ್ಮ ಟ್ಯಾಗ್ ಅನ್ನು ಬರೆಯುತ್ತೇವೆ . ಇದು ಚಿಕ್ಕದಾಗಿದೆ ಇಂಗ್ಲಿಷ್ ಪದಚಿತ್ರವು ಒಂದು ಚಿತ್ರವಾಗಿದೆ ಮತ್ತು ಇದು ಒಂದೇ ಟ್ಯಾಗ್ ಆಗಿದೆ.
ಟ್ಯಾಗ್ ಸ್ವತಃ ನಿಜವಾಗಿಯೂ ಬ್ರೌಸರ್‌ಗೆ ಏನನ್ನೂ ಹೇಳುವುದಿಲ್ಲ. ಆದ್ದರಿಂದ, ನಾವು ಖಂಡಿತವಾಗಿಯೂ ಟ್ಯಾಗ್‌ಗಾಗಿ ಗುಣಲಕ್ಷಣಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕು. ಗುಣಗಳಲ್ಲಿ ಮುಖ್ಯವಾದುದು ಗುಣ src - ಮೂಲ. ನಮ್ಮ ಚಿತ್ರದ ಮೂಲವನ್ನು ನಾವು ಸೂಚಿಸಬೇಕು. ನಮ್ಮ ಸಂದರ್ಭದಲ್ಲಿ, ಚಿತ್ರವು HTML ಫೋಲ್ಡರ್‌ಗೆ ಸಂಬಂಧಿಸಿದ ಚಿತ್ರಗಳ ಫೋಲ್ಡರ್‌ನಲ್ಲಿದೆ. ಆ. ನಮ್ಮ ಇಮೇಜ್ alarm.jpg ಚಿತ್ರಗಳ ಫೋಲ್ಡರ್‌ನಲ್ಲಿದೆ ಎಂದು ನಾವು ಸೂಚಿಸಬೇಕಾಗಿದೆ. ಮತ್ತು ಇದು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ.
ಟ್ಯಾಗ್‌ಗಾಗಿ ಈ ಗುಣಲಕ್ಷಣವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ , ಬ್ರೌಸರ್, ಈ ಕೋಡ್ ಅನ್ನು ಎದುರಿಸುವಾಗ, ಚಿತ್ರಗಳ ಫೋಲ್ಡರ್‌ಗೆ ಹೋಗುತ್ತದೆ ಮತ್ತು ಫೈಲ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ - alarm.jpg ಚಿತ್ರ.
ಆದರೆ ಇಷ್ಟೇ ಅಲ್ಲ. ಈ ಚಿತ್ರದ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ಸೂಚಿಸಲು ಸಹ ಸಲಹೆ ನೀಡಲಾಗುತ್ತದೆ, ಏಕೆಂದರೆ ಈ ಚಿತ್ರಕ್ಕಾಗಿ ಎಷ್ಟು ಜಾಗವನ್ನು ನಿಯೋಜಿಸಬೇಕೆಂದು ಬ್ರೌಸರ್ ನಿಖರವಾಗಿ ತಿಳಿದಿರಬೇಕು ಮತ್ತು ಸಂಪೂರ್ಣ ಲೋಡಿಂಗ್ ವೇಗವಾಗಿ ಮತ್ತು ಮುಖ್ಯವಾಗಿ, ಬ್ಲಾಕ್ ಆಫ್‌ಸೆಟ್‌ಗಳಿಲ್ಲದೆ ನಡೆಯುತ್ತದೆ.
ನಾವು ಆಯಾಮಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸದಿದ್ದರೆ, ಬ್ರೌಸರ್ ಚಿತ್ರವನ್ನು ಸರಿಯಾಗಿ ಪ್ರದರ್ಶಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಸ್ವಲ್ಪ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಹೆಚ್ಚಿನ ಸಮಯ ಏಕೆಂದರೆ ಅವನು ಮೊದಲು ಚಿತ್ರವನ್ನು ಅಪ್‌ಲೋಡ್ ಮಾಡಬೇಕಾಗುತ್ತದೆ ಮತ್ತು ನಂತರ ಮಾತ್ರ ಅವನು ಎಷ್ಟು ಜಾಗವನ್ನು ನಿಯೋಜಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ನೀವು ಆರಂಭದಲ್ಲಿ ಚಿತ್ರಕ್ಕಾಗಿ ಆಯಾಮಗಳನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದರೆ, ಇದು ಬ್ರೌಸರ್ಗಾಗಿ ಕಾರ್ಯವನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ. ಹೆಚ್ಚುವರಿಯಾಗಿ, ಕೋಡ್ನಲ್ಲಿ ಚಿತ್ರದ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸುವ ಮೂಲಕ, ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಆಯಾಮಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ಬ್ರೌಸರ್ ಅದನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸುತ್ತದೆ.
ಚಿತ್ರದ ಗಾತ್ರವನ್ನು ಕಂಡುಹಿಡಿಯಲು, ಅದರ ಮೇಲೆ ಬಲ ಕ್ಲಿಕ್ ಮಾಡಿ ಮತ್ತು "ಪ್ರಾಪರ್ಟೀಸ್" ಮೆನು ಐಟಂ ಅನ್ನು ಆಯ್ಕೆ ಮಾಡಿ. ಮುಂದೆ, "ವಿವರಗಳು" ಟ್ಯಾಬ್ಗೆ ಹೋಗಿ.
ನೀವು ನೋಡುವಂತೆ, ಚಿತ್ರದ ಅಗಲವು 307 ಪಿಕ್ಸೆಲ್ಗಳು ಮತ್ತು ಎತ್ತರವು 450 ಪಿಕ್ಸೆಲ್ಗಳು. ಕೋಡ್ನಲ್ಲಿ ಆಯಾಮಗಳನ್ನು ಬರೆಯೋಣ:
ಮತ್ತೊಂದು ಟ್ಯಾಗ್ ಗುಣಲಕ್ಷಣ , ಚಿತ್ರವನ್ನು ಸೇರಿಸುವಾಗ ಸೂಚಿಸಲು ಸಲಹೆ ನೀಡಲಾಗುತ್ತದೆ, ಇದು ಆಲ್ಟ್ ಆಗಿದೆ. ತಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಚಿತ್ರಗಳ ಪ್ರದರ್ಶನವನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದ ಇಂಟರ್ನೆಟ್ ಬಳಕೆದಾರರಿಗೆ ಇದು ಉದ್ದೇಶಿಸಲಾಗಿದೆ. ಆ. ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ನಿಷ್ಕ್ರಿಯಗೊಳಿಸಿದರೆ, ನಮ್ಮ ಚಿತ್ರದ ಬದಲಿಗೆ ಬಳಕೆದಾರರು ಆಲ್ಟ್ ಗುಣಲಕ್ಷಣಕ್ಕಾಗಿ ನಾವು ಬರೆಯುವ ಪದ ಅಥವಾ ಪದಗುಚ್ಛವನ್ನು ನೋಡುತ್ತಾರೆ. ಜೊತೆಗೆ, ಹುಡುಕಾಟ ಇಂಜಿನ್ಗಳುನಿಮ್ಮ ಸೈಟ್ನ ಮೌಲ್ಯವನ್ನು ನಿರ್ಧರಿಸುವಾಗ, ಚಿತ್ರಗಳ ಆಲ್ಟ್ ಆಟ್ರಿಬ್ಯೂಟ್‌ನಿಂದ ಅವರಿಗೆ ಮಾರ್ಗದರ್ಶನ ನೀಡಲಾಗುತ್ತದೆ, ಆದ್ದರಿಂದ ಅದನ್ನು ಹೊಂದಿಸುವುದು ಕಡ್ಡಾಯವಾಗಿದೆ.
ಟ್ಯಾಗ್‌ಗಾಗಿ ಈ ನಾಲ್ಕು ಗುಣಲಕ್ಷಣಗಳು ಪುಟಕ್ಕೆ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸುವಾಗ ಸೂಚಿಸಲು ಸಲಹೆ ನೀಡಲಾಗುತ್ತದೆ. ನಾನು ಈ ನಾಲ್ಕು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಮತ್ತೊಮ್ಮೆ ಸೂಚಿಸುತ್ತೇನೆ: ಮೂಲ, ಅಗಲ, ಎತ್ತರ ಮತ್ತು ಪರ್ಯಾಯ ಪಠ್ಯ.
ಪ್ರದರ್ಶನವನ್ನು ಪರಿಶೀಲಿಸೋಣ:
ನಮ್ಮ ರೇಖಾಚಿತ್ರವು ನಿಖರವಾಗಿ ಅಲ್ಲಿ ಕಾಣಿಸಿಕೊಂಡಿದೆ. ಆದರೆ ನೀವು ಗಮನಿಸಿದರೆ, ಚಿತ್ರವು ಕೇವಲ 307 ಪಿಕ್ಸೆಲ್‌ಗಳಷ್ಟು ಅಗಲವಾಗಿದ್ದರೂ, ಬ್ರೌಸರ್ ಸಂಪೂರ್ಣ ಸಾಲನ್ನು ಅದಕ್ಕೆ ನಿಯೋಜಿಸುತ್ತದೆ. ಚಿತ್ರವು ಅದರ ಸುತ್ತಲೂ ಹರಿಯುವ ನಂತರ ಪಠ್ಯವನ್ನು ಮಾಡಲು ಆಗಾಗ್ಗೆ ಕಾರ್ಯವು ಉದ್ಭವಿಸುತ್ತದೆ, ಅಂದರೆ. ಅವಳೊಂದಿಗೆ ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ನಿಂತರು. ಈ ಸಾಧ್ಯತೆಯು ಅಸ್ತಿತ್ವದಲ್ಲಿದೆ. ಪರಿಚಿತರ ಸಹಾಯದಿಂದ ಇದನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ align ಗುಣಲಕ್ಷಣ- ಜೋಡಣೆ.
ಈ ಗುಣಲಕ್ಷಣವು ನಮ್ಮ ಟ್ಯಾಗ್‌ಗೆ ಅನ್ವಯಿಸುತ್ತದೆ . ಈ ಚಿತ್ರಕ್ಕಾಗಿ ನಾವು ಬಲ ಜೋಡಣೆಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು ( ಬಲ), ನಂತರ ಚಿತ್ರವು ಪರದೆಯ ಬಲಭಾಗಕ್ಕೆ ಹೋಗುತ್ತದೆ ಮತ್ತು ಪಠ್ಯವು ಅದರ ಸುತ್ತಲೂ ಎಡಭಾಗದಲ್ಲಿ ಹರಿಯುತ್ತದೆ. ಅಥವಾ ನಾವು ಎಡ ಜೋಡಣೆಯನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು ( ಬಿಟ್ಟರು) - ನಂತರ ಚಿತ್ರವು ಹೋಗುತ್ತದೆ ಎಡಭಾಗಪರದೆ, ಮತ್ತು ಪಠ್ಯವು ಅದರ ಸುತ್ತಲೂ ಬಲಕ್ಕೆ ಸುತ್ತುತ್ತದೆ. ನಮ್ಮ ಟ್ಯಾಗ್‌ಗೆ ಎಡ ಜೋಡಣೆಯನ್ನು ಹೊಂದಿಸೋಣ .
ಈಗ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಏನಾಯಿತು ಎಂಬುದನ್ನು ಪರಿಶೀಲಿಸೋಣ.
ಪಠ್ಯವು ಚಿತ್ರದ ಸುತ್ತಲೂ ಬಲಭಾಗದಲ್ಲಿ ಸುತ್ತುತ್ತದೆ ಎಂದು ನೀವು ನೋಡಬಹುದು, ಏಕೆಂದರೆ ನಾವು ಚಿತ್ರಕ್ಕೆ ಎಡ ಜೋಡಣೆಯನ್ನು ನೀಡಿದ್ದೇವೆ. ಈಗ ಬಲ ಅಂಚಿಗೆ ಜೋಡಣೆಯನ್ನು ಬದಲಾಯಿಸೋಣ.
ಮತ್ತು ಅಂತಿಮವಾಗಿ, ಪ್ರಮುಖ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ "ಶೀರ್ಷಿಕೆ" - ನೀವು ಮೌಸ್ನೊಂದಿಗೆ ಅದರ ಮೇಲೆ ಸುಳಿದಾಡಿದಾಗ ಅದು ಚಿತ್ರದ ಟೂಲ್ಟಿಪ್ ಅನ್ನು ಮಾಡುತ್ತದೆ.
ನೀವು ನೋಡಿ! ಎಲ್ಲವನ್ನೂ ಮತ್ತು ಯಾವಾಗಲೂ ಬ್ಲಾಗ್ ಸೈಟ್ನ ಪುಟಗಳಲ್ಲಿ ಇರಿಸಿಕೊಳ್ಳಿ
ಯೋಜನೆಗೆ ಸಹಾಯ ಮಾಡಿ - ನಮ್ಮ Yandex.Zen ಚಾನಲ್‌ಗೆ ಚಂದಾದಾರರಾಗಿ!
ಟ್ಯಾಗ್ ಮಾಡಿ ಚಿತ್ರವನ್ನು ಪುಟಕ್ಕೆ ಸೇರಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.
ತಾಂತ್ರಿಕವಾಗಿ, ಚಿತ್ರವನ್ನು ಪುಟಕ್ಕೆ ಸೇರಿಸಲಾಗಿಲ್ಲ, ಪುಟವು ಚಿತ್ರಕ್ಕೆ ಲಿಂಕ್ ಅನ್ನು ಹೊಂದಿರುತ್ತದೆ ಮತ್ತು ಚಿತ್ರಕ್ಕಾಗಿ ಜಾಗವನ್ನು ಬಿಡುತ್ತದೆ.
ಟ್ಯಾಗ್ ಮಾಡಿ ಅಗತ್ಯವಿರುವ ಎರಡು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿದೆ: src ಮತ್ತು alt.
ಟ್ಯಾಗ್ ಮಾಡಿ ಎಲ್ಲಾ ಪ್ರಮುಖ ಬ್ರೌಸರ್‌ಗಳಿಂದ ಬೆಂಬಲಿತವಾಗಿದೆ.
HTML ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಮುಚ್ಚುವ ಟ್ಯಾಗ್ ಅನ್ನು ಹೊಂದಿಲ್ಲ ಮತ್ತು XHTML ನಲ್ಲಿ ಅದನ್ನು ಮುಚ್ಚಬೇಕು.
HTML 4.01 ನಲ್ಲಿ "align", "border", "hspace" ಮತ್ತು "vspace" ಗುಣಲಕ್ಷಣಗಳನ್ನು ಅಸಮ್ಮತಿಸಲಾಗಿದೆ ಮತ್ತು XHTML 1.0 ಕಟ್ಟುನಿಟ್ಟಾದ DTD ನಲ್ಲಿ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.
ಆಲ್ಟ್ ಗುಣಲಕ್ಷಣವು ಚಿತ್ರದ ಪರ್ಯಾಯ ಪಠ್ಯವಾಗಿದೆ, ಪಠ್ಯವನ್ನು ಹೋವರ್ ಮಾಡಿರುವುದಿಲ್ಲ. ಚಿತ್ರಕ್ಕಾಗಿ ಪಾಪ್-ಅಪ್ ಪಠ್ಯವನ್ನು ಸೇರಿಸಲು, ಶೀರ್ಷಿಕೆ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿ, ಉದಾಹರಣೆಗೆ,
DTD
DTD ಯ ಯಾವ ಆವೃತ್ತಿಯಲ್ಲಿ ಗುಣಲಕ್ಷಣದ ಬಳಕೆಯನ್ನು ಅನುಮತಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು DTD ಸೂಚಿಸುತ್ತದೆ. ಎಸ್=ಸ್ಟ್ರಿಕ್ಟ್, ಟಿ=ಟ್ರಾನ್ಸಿಷನಲ್ ಮತ್ತು ಎಫ್=ಫ್ರೇಮ್‌ಸೆಟ್.
ಹಳತಾಗಿದೆ. CSS ಬಳಸಿ.
ಸುತ್ತಮುತ್ತಲಿನ ಅಂಶಗಳಿಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ಚಿತ್ರವನ್ನು ಜೋಡಿಸುವುದು
ಚಿತ್ರದ ಸುತ್ತ ಚೌಕಟ್ಟಿನ ಅಗಲ
ಪಕ್ಕದ ಅಂಶಗಳಿಗೆ ಎಡ ಮತ್ತು ಬಲ ಪ್ಯಾಡಿಂಗ್
ಮೇಲಿನ ಮತ್ತು ಕೆಳಗಿನಿಂದ ಪಕ್ಕದ ಅಂಶಗಳಿಗೆ ಅಂಚು
ಟ್ಯಾಗ್ ಮಾಡಿ ಕೆಳಗಿನ ಪ್ರಮಾಣಿತ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ:
ಪ್ರಮಾಣಿತ ಗುಣಲಕ್ಷಣಗಳ ಕುರಿತು ಹೆಚ್ಚಿನ ಮಾಹಿತಿ.
ಟ್ಯಾಗ್ ಮಾಡಿ ಕೆಳಗಿನ ಈವೆಂಟ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ:
ಬಗ್ಗೆ ಹೆಚ್ಚಿನ ಮಾಹಿತಿ
ಹಲೋ, ಬ್ಲಾಗ್ ಸೈಟ್ನ ಪ್ರಿಯ ಓದುಗರು. ಲೇಖನದಲ್ಲಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಪುಟಗಳಲ್ಲಿ ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಲು ಯಾವವುಗಳು ಮತ್ತು ಯಾವ ಸಂದರ್ಭಗಳಲ್ಲಿ ಬಳಸುವುದು ಉತ್ತಮ ಎಂಬುದರ ಕುರಿತು ನಾವು ವಿವರವಾಗಿ ಮಾತನಾಡಲು ನಿರ್ವಹಿಸುತ್ತಿದ್ದೇವೆ, ಅದರ ಲಿಂಕ್ ಅನ್ನು ಮೇಲೆ ನೀಡಲಾಗಿದೆ.
ಇಂದು ನಾವು ಚಿತ್ರಗಳನ್ನು ಸೇರಿಸಲು Img ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸುವ ಎಲ್ಲಾ ಅಂಶಗಳನ್ನು ವಿವರವಾಗಿ ನೋಡುತ್ತೇವೆ, Html ಕೋಡ್ನಲ್ಲಿ ಫೋಟೋವನ್ನು ಸುತ್ತುವಂತೆ ಪಠ್ಯವನ್ನು ಹೇಗೆ ಹೊಂದಿಸುವುದು ಎಂಬುದನ್ನು ನೋಡಿ, ಸೈಟ್‌ಗೆ ಹಿನ್ನೆಲೆಯಾಗಿ ಚಿತ್ರಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು, ಅವುಗಳ ಗಾತ್ರವನ್ನು ಹೇಗೆ ಬದಲಾಯಿಸುವುದು ಮತ್ತು ಹೇಗೆ ಸೆಟ್ ಜೋಡಣೆ (ಮಧ್ಯ, ಎಡ ಮತ್ತು ಬಲ).
ಆದ್ದರಿಂದ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ನೀವು ಗ್ರಾಫಿಕ್ಸ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಬಹುದು ಎಂದು ನೋಡೋಣ. ಮೊದಲನೆಯದಾಗಿ, ಪುಟದ Html ಕೋಡ್‌ಗೆ ಒಂದು ಅಂಶವಾಗಿ (ವಸ್ತು) ಚಿತ್ರವನ್ನು ಸೇರಿಸಲು ಸಾಧ್ಯವಿದೆ. ಅಂತಹ ಅಳವಡಿಕೆಯನ್ನು Img ಬಳಸಿ ನಡೆಸಲಾಗುತ್ತದೆ, ಇದು ವಿಶೇಷವಾಗಿದೆ - ಬದಲಿ ವಿಷಯದೊಂದಿಗೆ ಇನ್ಲೈನ್ ಅಂಶ, ಇದು ಕೇವಲ ನಾಲ್ಕನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಅವುಗಳಲ್ಲಿ ಕೆಲವನ್ನು ನಾವು ಈಗಾಗಲೇ ಉಲ್ಲೇಖಿಸಿದ್ದೇವೆ ಮತ್ತು ಇತರ ಮೂರು - ( ಆಧುನಿಕ ಆವೃತ್ತಿಫ್ರೇಮ್‌ಗಳನ್ನು ಬಳಸುವುದು), (ವೀಡಿಯೊ ಮತ್ತು ಇತರ ಮಾಧ್ಯಮ ವಿಷಯವನ್ನು ಸೇರಿಸಲು).
ಇದು ನಿಖರವಾಗಿ ಇನ್ಲೈನ್ ಅಂಶದಂತೆ ವರ್ತಿಸುತ್ತದೆ, ಆದರೆ ಬಾಹ್ಯ ಬಾಹ್ಯ ವಿಷಯವನ್ನು ಅದರೊಳಗೆ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ (Img ಅಥವಾ ವೀಡಿಯೊದ ಸಂದರ್ಭದಲ್ಲಿ ಫೋಟೋ ಮತ್ತು ಆಬ್ಜೆಕ್ಟ್ ಮತ್ತು ಎಂಬೆಡ್ ಸಂದರ್ಭದಲ್ಲಿ ಫ್ಲಾಶ್). ಈ ನಾಲ್ಕು ಅಂಶಗಳಲ್ಲಿ ಯಾವುದಾದರೂ ಬಾಹ್ಯ ಫೈಲ್‌ನ ಉಪಸ್ಥಿತಿಯನ್ನು ಸೂಚಿಸುತ್ತದೆ, ಅದನ್ನು ಅದರ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಪ್ರದೇಶಕ್ಕೆ ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ.
ಪುಟಕ್ಕೆ ಲೋಡ್ ಮಾಡಬೇಕಾದ ಗ್ರಾಫಿಕ್ ಫೈಲ್ಗೆ ಮಾರ್ಗವನ್ನು ಸೂಚಿಸಲು, ವಿಶೇಷವನ್ನು ಬಳಸಿ Src ಗುಣಲಕ್ಷಣ.
ಬಳಕೆದಾರರ ಬ್ರೌಸರ್, ಪುಟದ Html ಕೋಡ್ ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡುವಾಗ, ಅದರಲ್ಲಿ Img ಟ್ಯಾಗ್ ಅನ್ನು ಎದುರಿಸಿದ ತಕ್ಷಣ, ಬಾಹ್ಯ ಫೈಲ್ (ಉದಾಹರಣೆಗೆ, ಫೋಟೋ) ಲೋಡ್ ಆಗುವ ಇನ್ಲೈನ್ ಅಂಶಕ್ಕಾಗಿ ತಕ್ಷಣವೇ ಒಂದು ಪ್ರದೇಶವನ್ನು ರಚಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ Src ನ ವಿಷಯಗಳಿಂದ ಫೈಲ್ಗೆ ಮಾರ್ಗವನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.
ನಿಮ್ಮ ಸರ್ವರ್‌ನಿಂದ ಬಳಕೆದಾರರ ಕಂಪ್ಯೂಟರ್‌ಗೆ ಚಿತ್ರವನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿದಾಗ, ಬ್ರೌಸರ್ ಈ ಚಿತ್ರದ ನಿಜವಾದ ಆಯಾಮಗಳನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ ಮತ್ತು ಕೋಡ್ನಲ್ಲಿ Img ಅಂಶವನ್ನು ಪತ್ತೆಹಚ್ಚಿದಾಗ ಅದು ರಚಿಸಿದ ಲೈನ್ ಪ್ರದೇಶವನ್ನು ಅದೇ ಆಯಾಮಗಳಿಂದ ವಿಸ್ತರಿಸುತ್ತದೆ.
ಈ ಅಂಶಕ್ಕೆ ಅಗತ್ಯವಿರುವ ಗಾತ್ರದ ಪ್ರದೇಶವನ್ನು ಬ್ರೌಸರ್ ತಕ್ಷಣವೇ ನಿಯೋಜಿಸಲು ನೀವು ಬಯಸಿದರೆ ಮತ್ತು ನಂತರ ಲೋಡ್ ಮಾಡಲಾದ ಚಿತ್ರದ ಗಾತ್ರದ ಬಗ್ಗೆ ಡೇಟಾವನ್ನು ಸ್ವೀಕರಿಸುವಾಗ ಅದನ್ನು ಬದಲಾಯಿಸದಿದ್ದರೆ, ನೀವು ನಿರ್ದಿಷ್ಟಪಡಿಸಬೇಕಾಗುತ್ತದೆ ಅಗಲ ಮತ್ತು ಎತ್ತರದ ಗುಣಲಕ್ಷಣಗಳು.
ನೀವು ಅವುಗಳನ್ನು ಹೊಂದಿಸಿದರೆ, ನಂತರ ಬಳಕೆದಾರರ ಬ್ರೌಸರ್ ಇದರೊಂದಿಗೆ ಪ್ರದೇಶವನ್ನು ರಚಿಸುತ್ತದೆ ಸರಿಯಾದ ಗಾತ್ರಗಳುಮತ್ತು ನಿಮ್ಮ ಫೋಟೋ ಬೇರೆ ಗಾತ್ರದಲ್ಲಿದ್ದರೂ ಅಲ್ಲಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ. ಮೂಲಕ, ಅನನುಭವಿ ವೆಬ್‌ಮಾಸ್ಟರ್‌ಗಳ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಕೆಲವೊಮ್ಮೆ ನೀವು ಅಂತಹ ದೋಷವನ್ನು ಎದುರಿಸುತ್ತೀರಿ.
ಹಲವಾರು ಮೆಗಾಬೈಟ್‌ಗಳ ತೂಕದ ಬೃಹತ್ ಗ್ರಾಫಿಕ್ ಫೈಲ್ ಅನ್ನು ಸರ್ವರ್‌ಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ (ಪ್ರಕ್ರಿಯೆಯಿಲ್ಲದೆ ಛಾಯಾಚಿತ್ರ ಮಾಡಿದ ತಕ್ಷಣವೇ) ಮತ್ತು ಅದರ ಮಾರ್ಗವನ್ನು Src ನಲ್ಲಿ ಬರೆಯಲಾಗಿದೆ. ಮತ್ತು ಚಿತ್ರವು ಸಂಪೂರ್ಣ ಪರದೆಯನ್ನು ಆಕ್ರಮಿಸುವುದಿಲ್ಲ, ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು Img ಟ್ಯಾಗ್‌ಗೆ ಸೇರಿಸಲಾಗುತ್ತದೆ ಸ್ವೀಕಾರಾರ್ಹ ಗಾತ್ರಗಳುಅಗಲ ಮತ್ತು ಎತ್ತರದಲ್ಲಿ.
ಮತ್ತು ಫಲಿತಾಂಶವೇನು? ಅಂತಹ ಸೈಟ್‌ಗೆ ಭೇಟಿ ನೀಡುವವರು ಉಲ್ಲೇಖಿಸಲಾದ ಗುಣಲಕ್ಷಣಗಳಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ತುಲನಾತ್ಮಕವಾಗಿ ಸಣ್ಣ ಪ್ರದೇಶಕ್ಕೆ ನಿರಾಶಾದಾಯಕವಾಗಿ ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವುದನ್ನು ಗಮನಿಸುತ್ತಾರೆ (ಹಲವಾರು ಮೆಗಾಬೈಟ್‌ಗಳ ತೂಕವು 300 ರಿಂದ 400 ಪಿಕ್ಸೆಲ್‌ಗಳ ಗಾತ್ರಕ್ಕೆ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ).
ಆದ್ದರಿಂದ, ತಕ್ಷಣವೇ ನೀವು ಸೈಟ್‌ನಲ್ಲಿ ಪ್ರದರ್ಶಿಸುವ ಅದೇ ಗಾತ್ರದ ವೆಬ್‌ನಲ್ಲಿ ಪೋಸ್ಟ್ ಮಾಡಲು ಚಿತ್ರಗಳನ್ನು ಮಾಡಿ ಮತ್ತು Img ಟ್ಯಾಗ್‌ನ ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು ನಮೂದಿಸಿ. ನಿಮ್ಮ ಬಳಕೆದಾರರನ್ನು ಗೌರವಿಸಿ ಮತ್ತು ಅವರ ಸಂಚಾರವನ್ನು ವ್ಯರ್ಥ ಮಾಡಬೇಡಿ (ವಿಶೇಷವಾಗಿ ಮೊಬೈಲ್). ನೀವು, ಉದಾಹರಣೆಗೆ, FastStone ಇಮೇಜ್ ವೀಕ್ಷಕ ಅಥವಾ ಯಾವುದೇ ಇತರ ಗ್ರಾಫಿಕ್ ಸಂಪಾದಕದಲ್ಲಿ, ಉದಾಹರಣೆಗೆ, .
ಮೂಲಕ, ವೆಬ್‌ಸೈಟ್ ಪುಟಗಳಲ್ಲಿ ಅಳವಡಿಕೆಗಾಗಿ ಚಿತ್ರಗಳ ಗಾತ್ರವನ್ನು ಪೂರ್ವಭಾವಿಯಾಗಿ ಕಡಿಮೆ ಮಾಡುವುದರ ಜೊತೆಗೆ, ನೀವು ತೂಕದ ಆಪ್ಟಿಮೈಸೇಶನ್ ಅನ್ನು ಅತ್ಯಂತ ಎಚ್ಚರಿಕೆಯಿಂದ ಸಂಪರ್ಕಿಸಬೇಕು. ಕೆಲವೊಮ್ಮೆ ಗುಣಮಟ್ಟದ ನಷ್ಟವಿಲ್ಲದೆಯೇ ಗ್ರಾಫಿಕ್ ಫೈಲ್‌ಗಳ ತೂಕದಲ್ಲಿ ಬಹು ಕಡಿತವನ್ನು ಸಾಧಿಸಲು ಸಾಧ್ಯವಿದೆ, ಇದು ಹೆಚ್ಚು ವೇಗವಾಗಿ ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ಹೋಸ್ಟಿಂಗ್ ಸರ್ವರ್‌ನಲ್ಲಿ ಲೋಡ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಈ ಉದ್ದೇಶಕ್ಕಾಗಿ ನೀವು ತುಂಬಾ ಅನುಕೂಲಕರ ಮತ್ತು ಪರಿಣಾಮಕಾರಿ ಸಾಧನವನ್ನು ಬಳಸಬಹುದು.
Img ಟ್ಯಾಗ್‌ನ Src ನಲ್ಲಿ ಇಮೇಜ್ ಫೈಲ್ಗೆ ನೀವು ಮಾರ್ಗವನ್ನು ಹೇಗೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು ಎಂಬುದನ್ನು ಈಗ ನೋಡೋಣ. ವಾಸ್ತವವಾಗಿ, ನೀವು ಬಳಸಬಹುದು ಮತ್ತು, ಮೇಲಿನ ಲೇಖನದಲ್ಲಿ ನಾನು ಈಗಾಗಲೇ ಸ್ವಲ್ಪ ವಿವರವಾಗಿ ಬರೆದಿದ್ದೇನೆ. ಇದು ಎಲ್ಲಾ ಸೂಕ್ಷ್ಮತೆಗಳು ಮತ್ತು ಅನುಕೂಲತೆಯ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ.
ಆ. Src ಒಳಗೊಂಡಿರಬಹುದು, ಉದಾಹರಣೆಗೆ, ಈ ಕೆಳಗಿನ ನಮೂದುಗಳು:
ಮೊದಲ ಸಂದರ್ಭದಲ್ಲಿ, ಗ್ರಾಫಿಕ್ ಫೈಲ್ ನಿಮ್ಮ ವೆಬ್ ಪುಟದ ಫೈಲ್‌ನಂತೆಯೇ ಅದೇ ಫೋಲ್ಡರ್‌ನಲ್ಲಿರಬೇಕು (ನೀವು ಬಳಸಿದರೆ, ಮೊದಲ ಎರಡು ಆಯ್ಕೆಗಳು ನಿಮಗೆ ಸರಿಹೊಂದುವುದಿಲ್ಲ, ಆದರೂ ಇದು CSS ನಲ್ಲಿ ಹಿನ್ನೆಲೆ ಚಿತ್ರವನ್ನು ಹೊಂದಿಸಲು ತುಂಬಾ ಅನುಕೂಲಕರವಾಗಿದೆ). ಎರಡನೆಯ ಸಂದರ್ಭದಲ್ಲಿ, ಗ್ರಾಫಿಕ್ಸ್ ನಿಮ್ಮ ಪುಟದ ಫೈಲ್ಗೆ ಸಂಬಂಧಿಸಿದ ಸಬ್‌ಫೋಲ್ಡರ್‌ನಲ್ಲಿದೆ, ಮತ್ತು ಮೂರನೇ ಸಂದರ್ಭದಲ್ಲಿ, ಚಿತ್ರದೊಂದಿಗೆ ಫೈಲ್ಗೆ ಸಂಪೂರ್ಣ ಮಾರ್ಗವನ್ನು Src ನಲ್ಲಿ ಸೂಚಿಸಲಾಗುತ್ತದೆ.
ಸಾಮಾನ್ಯವಾಗಿ, Html ಭಾಷೆಯ ನಿಯಮಗಳ ಪ್ರಕಾರ, ನಿಮ್ಮ ಸರ್ವರ್‌ನಲ್ಲಿ ಡಾಕ್ಯುಮೆಂಟ್ (ವೆಬ್ ಪುಟ) ಮಾತ್ರ ಇರಬೇಕು ಮತ್ತು ಅದರೊಂದಿಗೆ ಲೋಡ್ ಆಗುವ ಎಲ್ಲಾ ಇತರ ಡಾಕ್ಯುಮೆಂಟ್‌ಗಳು ಮತ್ತು ಫೈಲ್‌ಗಳು (ಗ್ರಾಫಿಕ್ಸ್, ವೀಡಿಯೊಗಳು, ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು, ಶೈಲಿಗಳು) ಆಗಿರಬಹುದು ವಿವಿಧ ಸರ್ವರ್‌ಗಳಲ್ಲಿದೆ.
ಇದು, ಮೂಲಕ, ಹೆಚ್ಚಿಸುವ ಮಾರ್ಗಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಮತ್ತು ಮಾನಿಟರ್ ಮಾಡಲು ನಿಮ್ಮ ಸಂಪನ್ಮೂಲದಲ್ಲಿ ನೀವು ಬಹುಶಃ ಬಳಸುವ ಅದೇ ಭೇಟಿ ಕೌಂಟರ್‌ಗಳು ನಿಮ್ಮದಲ್ಲದ ಹೋಸ್ಟ್‌ಗಳಿಂದ ಅವರ ಇನ್ಫಾರ್ಮರ್‌ಗಳು ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ.
Img ಅಂತರ್ಗತವಾಗಿ ಇನ್ಲೈನ್ ಅಂಶವಾಗಿದ್ದರೆ, ಅದು ಸರಳವಾಗಿರಬಹುದು ಎಣಿಕೆ ದೊಡ್ಡ ಅಕ್ಷರ , ಅಂದರೆ ಹೈಪರ್‌ಲಿಂಕ್‌ನೊಳಗೆ ಈ ಟ್ಯಾಗ್ ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಚಿತ್ರವನ್ನು ಲಿಂಕ್ ಮಾಡುವುದರಿಂದ ನಮಗೆ ಏನೂ ಅಡ್ಡಿಯಾಗುವುದಿಲ್ಲ. ಸಾಮಾನ್ಯವಾಗಿ, ನಾನು ಈಗಾಗಲೇ ಈ ಬಗ್ಗೆ ಇತ್ತೀಚಿನ ಲೇಖನದಲ್ಲಿ ಸ್ವಲ್ಪ ವಿವರವಾಗಿ ಬರೆದಿದ್ದೇನೆ, ಆದರೆ ನನ್ನನ್ನು ಸ್ವಲ್ಪ ಪುನರಾವರ್ತಿಸುವುದು ಪಾಪವಲ್ಲ.
Ru/image/webcamxp.png">
IE ಬ್ರೌಸರ್‌ನಲ್ಲಿ, ನೀವು ಲಿಂಕ್ ಮಾಡಿದ ಚಿತ್ರದ ಸುತ್ತಲೂ ಮೂರು-ಪಿಕ್ಸೆಲ್ ಅಗಲದ ಫ್ರೇಮ್ ಕಾಣಿಸುತ್ತದೆ. ಅದನ್ನು ತೆಗೆದುಹಾಕಲು, ನೀವು ಅದನ್ನು Img ಟ್ಯಾಗ್‌ಗೆ ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ ಗಡಿ ಗುಣಲಕ್ಷಣಶೂನ್ಯ ಮೌಲ್ಯದೊಂದಿಗೆ:
ಕೆಲವು ಕಾರಣಗಳಿಗಾಗಿ ಗ್ರಾಫಿಕ್ ಫೈಲ್ ಅನ್ನು Html ಡಾಕ್ಯುಮೆಂಟ್‌ನೊಂದಿಗೆ ಲೋಡ್ ಮಾಡಲು ಸಾಧ್ಯವಾಗದಿದ್ದಾಗ (ಅದಕ್ಕೆ ಮಾರ್ಗವನ್ನು ಸರಿಯಾಗಿ ಬರೆಯಲಾಗಿಲ್ಲ ಅಥವಾ ಬೇರೆ ಯಾವುದಾದರೂ) ವಿಶೇಷವಾದದನ್ನು ಒದಗಿಸಲಾಗಿದೆ ಆಲ್ಟ್ ಗುಣಲಕ್ಷಣ.
ಆಲ್ಟ್ ಪರ್ಯಾಯ ಚಿತ್ರ ವೀಕ್ಷಣೆಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ. ಗ್ರಾಫಿಕ್ಸ್ ಲೋಡ್ ಆಗದಿದ್ದಾಗ ಏನಾಗುತ್ತದೆ? ಬ್ರೌಸರ್ ಹೇಗಾದರೂ, ಕೋಡ್ನಲ್ಲಿ Img ಅಂಶವನ್ನು ಪತ್ತೆಹಚ್ಚಿದ ನಂತರ, ಅದರ ಅಡಿಯಲ್ಲಿ ಒಂದು ಪ್ರದೇಶವನ್ನು ರೂಪಿಸುತ್ತದೆ, ಇದು ಬಳಕೆದಾರರು ಬಳಸುವ ಬ್ರೌಸರ್ ಅನ್ನು ಅವಲಂಬಿಸಿ, ನಿರ್ದಿಷ್ಟ ಗಾತ್ರದಲ್ಲಿ ಉಳಿಯಬಹುದು ಅಥವಾ ಕುಸಿಯಬಹುದು.
ಆದರೆ ಪುಟದಲ್ಲಿ ಈ ಸ್ಥಳದಲ್ಲಿ ಚಿತ್ರ ಇರಬೇಕು ಎಂಬ ಕಲ್ಪನೆಯನ್ನು ಬಳಕೆದಾರರು ಹೊಂದಿರುವುದರಿಂದ, ನೀವು Img ನಲ್ಲಿ Alt ಅನ್ನು ನಮೂದಿಸಿ, ಇಲ್ಲಿ ನೀವು ಏನನ್ನು ಚಿತ್ರಿಸಬೇಕು ಎಂಬುದನ್ನು ವಿವರಿಸುವ ಪಠ್ಯವನ್ನು ನಮೂದಿಸಿ. ಆಲ್ಟ್‌ನ ವಿಷಯಗಳನ್ನು ಅನ್‌ಲೋಡ್ ಮಾಡಲಾದ ಫೋಟೋದ ಪ್ರದೇಶದಲ್ಲಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.
ಒಳ್ಳೆಯದು, ಮತ್ತು ಇದರ ಹೊರತಾಗಿ, Html ಕೋಡ್‌ನಲ್ಲಿರುವ ಚಿತ್ರಗಳಿಗಾಗಿ, ಹಾಗೆಯೇ ಹೈಪರ್‌ಟೆಕ್ಸ್ಟ್ ಮಾರ್ಕ್‌ಅಪ್ ಭಾಷೆಯ ಇತರ ಅಂಶಗಳಿಗಾಗಿ (ಉದಾಹರಣೆಗೆ, ಎಲ್ಲಾ ಒಂದೇ ಹೈಪರ್‌ಲಿಂಕ್‌ಗಳಿಗಾಗಿ), ಬಳಕೆದಾರರು ಮೌಸ್ ಕರ್ಸರ್ ಅನ್ನು ಮೇಲಿರುವಾಗ ಕೆಲವು ಜೊತೆಗಿನ ಪಠ್ಯವನ್ನು ತೋರಿಸಲು ಸಾಧ್ಯವಿದೆ. ಅವುಗಳನ್ನು.
ವಿಶೇಷ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ಇದನ್ನು ಮಾಡಲಾಗುತ್ತದೆ ಶೀರ್ಷಿಕೆ, ಇದು ನಮ್ಮ ಸಂದರ್ಭದಲ್ಲಿ Img ಗೆ ಸೇರಿಸಲ್ಪಟ್ಟಿದೆ. ಇದು ಮೂಲಭೂತವಾಗಿ ಒಂದು ಟೂಲ್ಟಿಪ್ ಆಗಿದೆ ಮತ್ತು ನೀವು ಏನನ್ನಾದರೂ ಮತ್ತಷ್ಟು ಸ್ಪಷ್ಟಪಡಿಸಬೇಕಾದಾಗ ಪುಟದಲ್ಲಿ ಗೋಚರಿಸುವ ಬಹುತೇಕ ಎಲ್ಲಾ Html ಕೋಡ್ ಅಂಶಗಳಿಗೆ ಬಳಸಬಹುದು.
ಈ ಹಿಂದೆ, ಆಲ್ಟ್ ಪಠ್ಯವನ್ನು ಸೇರಿಸುವುದು ಸಹ ಟೂಲ್‌ಟಿಪ್‌ಗೆ ಕಾರಣವಾಯಿತು, ಆದರೆ ಈಗ ಈ ನಡವಳಿಕೆಯನ್ನು ಕೈಬಿಡಲಾಗುತ್ತಿದೆ ಮತ್ತು ಈ ಗುಣಲಕ್ಷಣವು ಈಗ ಮುಖ್ಯವಾಗಿ ಪರ್ಯಾಯ ಪಠ್ಯವಾಗಿ ಮಾತ್ರ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಮತ್ತು ಶೀರ್ಷಿಕೆಯನ್ನು ಟೂಲ್‌ಟಿಪ್‌ಗಳಿಗಾಗಿ ಪ್ರತ್ಯೇಕವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.
Pngе" height="71" width="90" alt="" title="">
ವಾಸ್ತವವಾಗಿ, Img ಟ್ಯಾಗ್‌ನ Alt ಮತ್ತು ಶೀರ್ಷಿಕೆಯ ವಿಷಯಗಳು ನಿಮ್ಮ ಸೈಟ್‌ಗೆ ಭೇಟಿ ನೀಡುವವರ ಅನುಕೂಲಕ್ಕಾಗಿ ಮಾತ್ರವಲ್ಲದೆ ನಿಮ್ಮ ಯೋಜನೆಯನ್ನು ಪ್ರಚಾರ ಮಾಡುವ ಯಶಸ್ಸಿನಲ್ಲಿ ಬಹಳ ಮಹತ್ವದ ಪಾತ್ರವನ್ನು ಹೊಂದಬಹುದು.
ಇದನ್ನು ಮಾಡಲು, ನೀವು ಬಳಸಲು ನೆನಪಿಡುವ ಅಗತ್ಯವಿರುತ್ತದೆ, ನಾನು ಈ ಬಗ್ಗೆ ಹಲವು ಬಾರಿ ಬರೆದಿದ್ದೇನೆ, ಉದಾಹರಣೆಗೆ, ಬಗ್ಗೆ ಅಥವಾ ಪ್ರಕಟಣೆಯಲ್ಲಿ ಲೇಖನದಲ್ಲಿ.
Alt ಮತ್ತು ಶೀರ್ಷಿಕೆಯಲ್ಲಿ (ವಿಶೇಷವಾಗಿ Alt ನಲ್ಲಿ) ಕೀವರ್ಡ್‌ಗಳು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು, ಹಾಗೆಯೇ ಸೇವೆಗಳಲ್ಲಿ. ಆದಾಗ್ಯೂ, ಇದರೊಂದಿಗೆ ಎಚ್ಚರಿಕೆಯಿಂದ ಅಗತ್ಯವಿದೆ, ಏಕೆಂದರೆ ಇದು ಅಡಿಯಲ್ಲಿ ಪಡೆಯಲು ಸಾಕಷ್ಟು ಸುಲಭ.
ಈಗ Html ಕೋಡ್ನಲ್ಲಿ ಸೇರಿಸಲಾದ ಚಿತ್ರಗಳನ್ನು ಜೋಡಿಸುವ ಬಗ್ಗೆ ಮಾತನಾಡೋಣ. ಬದಲಾಯಿಸಬಹುದಾದ ವಿಷಯದೊಂದಿಗೆ ಎಲ್ಲಾ ನಾಲ್ಕು ಇನ್ಲೈನ್ ಅಂಶಗಳು (Img, Iframe, Object ಮತ್ತು ಎಂಬೆಡ್) ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ಜೋಡಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಹೊಂದಿವೆ ಜೋಡಿಸು. ಆದರೆ ಇದು ವಾಸ್ತವವಾಗಿ ಬ್ಲಾಕ್ ಅಂಶಗಳಿಗೆ ಮಾತ್ರ ಅನ್ವಯಿಸುತ್ತದೆ ಮತ್ತು ಉಲ್ಲೇಖಿಸಲಾದ ಟ್ಯಾಗ್‌ಗಳು ಇನ್ಲೈನ್ ಟ್ಯಾಗ್‌ಗಳಾಗಿವೆ.
ಆದ್ದರಿಂದ, Img ಗಾಗಿ ಕೆಲವು ಅಲೈನ್ ಮೌಲ್ಯಗಳು (ಉದಾಹರಣೆಗೆ, ಚಿತ್ರದ ಸುತ್ತಲೂ ಸುತ್ತುವಂತೆ ಪಠ್ಯವನ್ನು ಹೊಂದಿಸುವುದು) ಬ್ಲಾಕ್ ಅಂಶಗಳಲ್ಲಿ (ಇತ್ಯಾದಿ) ಒಂದೇ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸುವಾಗ ಸಂಪೂರ್ಣವಾಗಿ ವಿಭಿನ್ನವಾದದ್ದನ್ನು ಅರ್ಥೈಸುತ್ತದೆ.
ಸಾಮಾನ್ಯವಾಗಿ, Img ನಲ್ಲಿ ಬಳಸಿದಾಗ Align ಅನ್ನು ಬಳಸಿಕೊಂಡು ಚಿತ್ರಗಳನ್ನು ಜೋಡಿಸುವುದನ್ನು ಎರಡು ಗುಂಪುಗಳಾಗಿ ವಿಂಗಡಿಸಬಹುದು.
ಆದ್ದರಿಂದ, ನಾವು ಡಾಕ್ಯುಮೆಂಟ್ನ ಪಠ್ಯಕ್ಕೆ ಗ್ರಾಫಿಕ್ ಫೈಲ್ ಅನ್ನು ಸೇರಿಸಿದಾಗ ಏನಾಗುತ್ತದೆ? ವಾಸ್ತವವಾಗಿ, ಇದು ಒಂದು ದೊಡ್ಡ ಅಕ್ಷರದಂತೆ ಕಾಣುತ್ತದೆ:
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ, ಕೆಳಭಾಗದ ಜೋಡಣೆಯನ್ನು ಬಳಸಲಾಗುತ್ತದೆ, ಅಂದರೆ. Img ಅಂಶಕ್ಕೆ align="bottom" ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವುದರಿಂದ ಏನನ್ನೂ ಬದಲಾಯಿಸುವುದಿಲ್ಲ. ಆದರೆ ನೀವು ಅಂಶಕ್ಕೆ align="top" ಅನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಚಿತ್ರದ ಜೋಡಣೆಯನ್ನು ಮೇಲಿನ ಅಂಚಿಗೆ ಹೊಂದಿಸಲು ಪ್ರಯತ್ನಿಸಬಹುದು:
Png" align="top">
ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಫೋಟೋ ಇರುವ ಸಾಲಿನಲ್ಲಿನ ಪಠ್ಯವನ್ನು ಅದರ ಮೇಲಿನ ಅಂಚಿನಲ್ಲಿ ಜೋಡಿಸಲಾಗಿದೆ.
ಈ ಗುಣಲಕ್ಷಣಕ್ಕೆ ಮತ್ತೊಂದು ಸಂಭವನೀಯ ಮೌಲ್ಯವಿದೆ align="ಮಧ್ಯ":
Png" align="middle">
ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಚಿತ್ರದೊಂದಿಗೆ ಸಾಲಿನಲ್ಲಿರುವ ಪಠ್ಯವನ್ನು ಇದೇ ಚಿತ್ರದ ಮಧ್ಯದಲ್ಲಿ ಜೋಡಿಸಲಾಗುತ್ತದೆ.
ಆದರೆ ಲಂಬವಾದ ಜೋಡಣೆಯ ಜೊತೆಗೆ, HTML ಸಹ ಒದಗಿಸುತ್ತದೆ ಸುತ್ತಲೂ ಹರಿಯುತ್ತದೆಪಠ್ಯದೊಂದಿಗೆ ಚಿತ್ರಗಳು, ಮೌಲ್ಯಗಳನ್ನು ಯಾವುದಕ್ಕಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ - ಎಡ ಮತ್ತು ಬಲ. ಅಲೈನ್ ಗುಣಲಕ್ಷಣ ಮೌಲ್ಯಗಳ ಈ ಗುಂಪು ಹಿಂದಿನದಕ್ಕಿಂತ ಬಹಳ ಭಿನ್ನವಾಗಿದೆ.
Img ಅಂಶದ ಒಳಗೆ ಎಡ ಮತ್ತು ಬಲ ಮೌಲ್ಯಗಳನ್ನು ಬಳಸುವಾಗ, Html ಕೋಡ್ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾದ ಚಿತ್ರದ ಸುತ್ತಲೂ ಪಠ್ಯವನ್ನು ಸುತ್ತುವುದನ್ನು ನಾವು ಸಾಧಿಸುತ್ತೇವೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಡ್ರಾಯಿಂಗ್ ಆಗುತ್ತದೆ ಮತ್ತು ಪಠ್ಯವು ಅದರ ಸುತ್ತಲೂ ಹರಿಯಲು ಪ್ರಾರಂಭವಾಗುತ್ತದೆ.
ಉದಾಹರಣೆಗೆ, align="left" ನೊಂದಿಗೆ ನಾವು ಈ ಕೆಳಗಿನ ಫಲಿತಾಂಶವನ್ನು ಪಡೆಯುತ್ತೇವೆ:
Png" align="left">
Img ನಲ್ಲಿ ಎಡ ಮೌಲ್ಯವು ಫೋಟೋ ತೇಲುತ್ತದೆ ಎಂದರ್ಥ ಎಡಭಾಗ, ಮತ್ತು ಪಠ್ಯವು ಅದರ ಸುತ್ತಲೂ ಬಲಭಾಗದಲ್ಲಿ ಹರಿಯುತ್ತದೆ. align="right" ಸಂದರ್ಭದಲ್ಲಿ ಚಿತ್ರವು ಬಲಕ್ಕೆ ತೇಲುತ್ತದೆ ಮತ್ತು ಪಠ್ಯವು ಅದರ ಸುತ್ತಲೂ ಎಡಕ್ಕೆ ಹರಿಯುತ್ತದೆ:
Png" align="right">
ಚಿತ್ರದ ಸುತ್ತಲೂ ಸುತ್ತುವಂತೆ ಪಠ್ಯವನ್ನು ಹೊಂದಿಸುವಾಗ, ಒಂದು ಎಚ್ಚರಿಕೆ ಇರುತ್ತದೆ - ಪಠ್ಯವು ಅದರ ಹತ್ತಿರದಲ್ಲಿದೆ, ಇದು ಅಹಿತಕರ ನೋಟವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ ಅಂಟಿಕೊಳ್ಳುವ ಪರಿಣಾಮ. ಈ ಸಮಸ್ಯೆಬಳಸಿಕೊಂಡು ಪರಿಹರಿಸಲು ಇದು ತುಂಬಾ ಸುಲಭ, ಆದರೆ ಶುದ್ಧ HTML ಸಹ ತನ್ನದೇ ಆದ ಪರಿಹಾರವನ್ನು ಹೊಂದಿದೆ.
ಇದನ್ನು ಮಾಡಲು, ನೀವು Img ಅಂಶದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಬಹುದು - Hspace ಮತ್ತು Vspace. ಚಿತ್ರದಿಂದ ಸುತ್ತುವ ಪಠ್ಯವನ್ನು ಒತ್ತಲು ಅವುಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. Hspace ಚಿತ್ರದಿಂದ ಸುತ್ತಮುತ್ತಲಿನ ಪಠ್ಯಕ್ಕೆ ಎಡ ಮತ್ತು ಬಲ ಪ್ಯಾಡಿಂಗ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ ಮತ್ತು Vspace ಮೇಲ್ಭಾಗ ಮತ್ತು ಕೆಳಭಾಗವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುತ್ತದೆ. ಇಂಡೆಂಟ್‌ಗಳನ್ನು ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗಿದೆ, ಉದಾಹರಣೆಗೆ:
Png" align="left" hspace="30" vspace="30">
ಗ್ರಾಫಿಕ್ ಫೈಲ್‌ಗಳನ್ನು ಪುಟ ಕೋಡ್ ಅಂಶಗಳಾಗಿ ಮಾತ್ರವಲ್ಲದೆ ಅದರ ಹಿನ್ನೆಲೆಯಾಗಿಯೂ ಸಹ ಬಳಸಬಹುದು. ಸಾಮಾನ್ಯವಾಗಿ, HTML ಭಾಷೆಯಲ್ಲಿ ನೀವು ಅದನ್ನು ಬಣ್ಣದಿಂದ ಅಥವಾ ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳನ್ನು ಬಳಸಿ ಹೊಂದಿಸಬಹುದು. ಸರಿ, ಸಿಎಸ್ಎಸ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುವುದು ಮುಖ್ಯ ಅಂಶಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ಏಕೆಂದರೆ ಆಧುನಿಕ ಸೈಟ್ಗಳ ಪುಟಗಳಲ್ಲಿ Img ಬಳಸಿ ಯಾವುದೇ ವಿನ್ಯಾಸ ಅಂಶಗಳನ್ನು ಸೇರಿಸಲಾಗಿಲ್ಲ.
ಆದ್ದರಿಂದ, ಹಿನ್ನೆಲೆ ಚಿತ್ರಗಳು ಬಹಳ ಮುಖ್ಯವಾದ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತವೆ ಪ್ರಮುಖ ಪಾತ್ರ CSS ಅನ್ನು ಬಳಸಿಕೊಂಡು ಆಧುನಿಕ ವಿನ್ಯಾಸದಲ್ಲಿ (ನಾವು ಮೇಲಿನ ಲೇಖನದಲ್ಲಿ ಇದರ ಬಗ್ಗೆ ಮಾತನಾಡುತ್ತೇವೆ). ಇದೀಗ, ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಿಕೊಂಡು ಶುದ್ಧ HTML ನಲ್ಲಿ ಇದನ್ನು ಹೇಗೆ ಮಾಡಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ನಾವು ನೋಡುತ್ತೇವೆ ಹಿನ್ನೆಲೆಎಲಿಮೆಂಟ್ ಬಾಡಿ ಮತ್ತು , ವೆಬ್ ಪುಟ ಅಥವಾ ಟೇಬಲ್ (ಅಥವಾ ಅದರ ಪ್ರತ್ಯೇಕ ಸೆಲ್) ತುಂಬುವ ಗ್ರಾಫಿಕ್ ಫೈಲ್ಗೆ ಮಾರ್ಗವನ್ನು ತೋರಿಸುತ್ತದೆ.
ಉದಾಹರಣೆಗೆ, ದೇಹಕ್ಕೆ ಹಿನ್ನೆಲೆ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವುದು ಕೆಳಗಿನ ಪ್ರಕಾರ:
ಗುಣಿಸಿದ ಫೋಟೋವನ್ನು ಒಳಗೊಂಡಿರುವ ನಮ್ಮ ಸೈಟ್‌ಗೆ ನಾವು ಹಿನ್ನೆಲೆಯನ್ನು ಪಡೆಯುತ್ತೇವೆ, ಅದು ಸಂಪೂರ್ಣ ಗೋಚರ ಪ್ರದೇಶವನ್ನು ಟೈಲ್‌ನಂತೆ ತುಂಬುತ್ತದೆ:
ಎಡದಿಂದ ಪ್ರಾರಂಭವಾಗುವ ಹಿನ್ನೆಲೆ ಚಿತ್ರ ಮೇಲಿನ ಮೂಲೆಯಲ್ಲಿ, ಏಕಕಾಲದಲ್ಲಿ ಎರಡು ಅಕ್ಷಗಳ ಉದ್ದಕ್ಕೂ ಪುನರಾವರ್ತಿಸಲಾಗುತ್ತದೆ (ಅಬ್ಸಿಸ್ಸಾ ಮತ್ತು ಆರ್ಡಿನೇಟ್). ನಂತರದವು ಹಿಂದಿನದಕ್ಕೆ ಸಂಪರ್ಕ ಹೊಂದಿದೆ, ಇತ್ಯಾದಿ. ಮೂಲಕ, ನೀವು ಪುಟ ಅಥವಾ ಟೇಬಲ್‌ನ ಹಿನ್ನೆಲೆಯನ್ನು ಒಂದು ಬಣ್ಣದಿಂದ ತುಂಬಲು ಬಯಸಿದರೆ, ಇದಕ್ಕಾಗಿ ನೀವು ಹಿನ್ನೆಲೆಯನ್ನು ಬಳಸಬೇಕಾಗಿಲ್ಲ, ಆದರೆ ಗುಣಲಕ್ಷಣವನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ bgcolor, ನೀವು ಸೇರಿಸಬಹುದಾದ ಮೌಲ್ಯದಂತೆ, ಉದಾಹರಣೆಗೆ, ಈ ರೀತಿ:
ನಂತರ ನಾವು bgcolor ಮೂಲಕ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಕೆಳಗಿನ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಪಡೆಯುತ್ತೇವೆ:
ಹಿನ್ನೆಲೆ ಗುಣಲಕ್ಷಣದಂತೆಯೇ, ಸಂಪೂರ್ಣ ಟೇಬಲ್ ಅಥವಾ ಅದರ ಪ್ರತ್ಯೇಕ ಅಂಶಗಳ ಹಿನ್ನೆಲೆಯನ್ನು ಹೊಂದಿಸಲು bgcolor ಅನ್ನು ಸಹ ಬಳಸಬಹುದು.
ನಿಮಗೆ ಶುಭವಾಗಲಿ! ಬ್ಲಾಗ್ ಸೈಟ್ನ ಪುಟಗಳಲ್ಲಿ ಶೀಘ್ರದಲ್ಲೇ ನಿಮ್ಮನ್ನು ಭೇಟಿ ಮಾಡುತ್ತೇವೆ
ನೀವು ಆಸಕ್ತಿ ಹೊಂದಿರಬಹುದು
ವೈಟ್‌ಸ್ಪೇಸ್ ಅಕ್ಷರಗಳು ಮತ್ತು ಹೆಚ್‌ಟಿಎಂಎಲ್‌ನಲ್ಲಿ ಕೋಡ್‌ನ ಫಾರ್ಮ್ಯಾಟಿಂಗ್, ಹಾಗೆಯೇ ವಿಶೇಷ ನಾನ್-ಬ್ರೇಕಿಂಗ್ ಸ್ಪೇಸ್ ಕ್ಯಾರೆಕ್ಟರ್‌ಗಳು ಮತ್ತು ಇತರ ಜ್ಞಾಪಕಗಳು Html 4.01 ಮಾನದಂಡದ ಪ್ರಕಾರ H1-H6 ಶೀರ್ಷಿಕೆಗಳ ಟ್ಯಾಗ್‌ಗಳು ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳು, ಅಡ್ಡ ರೇಖೆ Hr, ಲೈನ್ ಬ್ರೇಕ್ Br ಮತ್ತು ಪ್ಯಾರಾಗ್ರಾಫ್ P Html ನಲ್ಲಿ ಕೋಷ್ಟಕಗಳು - ಟೇಬಲ್, Tr ಮತ್ತು Td ಟ್ಯಾಗ್‌ಗಳು, ಹಾಗೆಯೇ ಅವುಗಳನ್ನು ರಚಿಸಲು ಕಾಲ್ಸ್‌ಪಾನ್, ಸೆಲ್‌ಪ್ಯಾಡಿಂಗ್, ಸೆಲ್‌ಸ್ಪೇಸಿಂಗ್ ಮತ್ತು ರೋಸ್‌ಪ್ಯಾನ್ ಡ್ರಾಪ್-ಡೌನ್ ಪಟ್ಟಿಗಳು ಮತ್ತು ಪಠ್ಯ ಕ್ಷೇತ್ರಗಳ ರೂಪಕ್ಕಾಗಿ ಆಯ್ಕೆ, ಆಯ್ಕೆ, ಟೆಕ್ಸ್ಟ್ಯಾರಿಯಾ, ಲೇಬಲ್, ಫೀಲ್ಡ್‌ಸೆಟ್, ಲೆಜೆಂಡ್ - Html ಟ್ಯಾಗ್‌ಗಳು ಎಂಬೆಡ್ ಮತ್ತು ಆಬ್ಜೆಕ್ಟ್ - ವೆಬ್ ಪುಟಗಳಲ್ಲಿ ಮಾಧ್ಯಮ ವಿಷಯವನ್ನು (ವಿಡಿಯೋ, ಫ್ಲ್ಯಾಷ್, ಆಡಿಯೋ) ಪ್ರದರ್ಶಿಸಲು Html ಟ್ಯಾಗ್‌ಗಳು HTML - IMG ಮತ್ತು A ಟ್ಯಾಗ್‌ಗಳಿಗೆ ಲಿಂಕ್ ಮತ್ತು ಚಿತ್ರವನ್ನು (ಫೋಟೋ) ಸೇರಿಸುವುದು ಹೇಗೆ Html ಮತ್ತು CSS ಕೋಡ್ನಲ್ಲಿ ಬಣ್ಣಗಳನ್ನು ಹೇಗೆ ಹೊಂದಿಸಲಾಗಿದೆ, ಕೋಷ್ಟಕಗಳಲ್ಲಿ RGB ಛಾಯೆಗಳ ಆಯ್ಕೆ, Yandex ಔಟ್‌ಪುಟ್ ಮತ್ತು ಇತರ ಕಾರ್ಯಕ್ರಮಗಳು ಹೈಪರ್‌ಟೆಕ್ಸ್ಟ್ ಮಾರ್ಕ್‌ಅಪ್ ಭಾಷೆ Html ಎಂದರೇನು ಮತ್ತು W3C ವ್ಯಾಲಿಡೇಟರ್‌ನಲ್ಲಿ ಎಲ್ಲಾ ಟ್ಯಾಗ್‌ಗಳ ಪಟ್ಟಿಯನ್ನು ಹೇಗೆ ವೀಕ್ಷಿಸುವುದು ಫಾಂಟ್ (ಮುಖ, ಗಾತ್ರ ಮತ್ತು ಬಣ್ಣ), ಬ್ಲಾಕ್‌ಕೋಟ್ ಮತ್ತು ಪೂರ್ವ ಟ್ಯಾಗ್‌ಗಳು - ಶುದ್ಧ HTML ನಲ್ಲಿ ಪರಂಪರೆ ಪಠ್ಯ ಫಾರ್ಮ್ಯಾಟಿಂಗ್ (ಯಾವುದೇ CSS ಬಳಸಲಾಗಿಲ್ಲ) ಸೈಟ್‌ಗಾಗಿ Html ಫಾರ್ಮ್‌ಗಳು - ವೆಬ್ ಫಾರ್ಮ್ ಅಂಶಗಳನ್ನು ರಚಿಸಲು ಟ್ಯಾಗ್‌ಗಳು ಫಾರ್ಮ್, ಇನ್‌ಪುಟ್ ಮತ್ತು ಸೆಲೆಕ್ಟ್, ಆಯ್ಕೆ, ಟೆಕ್ಸ್ಟೇರಿಯಾ, ಲೇಬಲ್ ಮತ್ತು ಇತರೆ
