ಇದರ ಚಿತ್ರದೊಂದಿಗೆ ಉಳಿಯುವ ವೆಬ್ ಶೀರ್ಷಿಕೆ ಸೇರಿಸಿ

9 ಸುಲಭ ಹಂತಗಳಲ್ಲಿ ವೆಬ್ ಚಿತ್ರಣಗಳಿಗೆ HTML ಶೀರ್ಷಿಕೆಗಳನ್ನು ಸೇರಿಸಿ

ಚಿತ್ರಗಳು ನಿಮ್ಮ ವೆಬ್ಪುಟಗಳಿಗೆ ಜೀವನವನ್ನು ಸೇರಿಸುತ್ತವೆ ಮತ್ತು ವೀಕ್ಷಕರ ಗಮನವನ್ನು ಸೆಳೆಯುತ್ತವೆ. ಶೀರ್ಷಿಕೆಗಳು ನಿಮ್ಮ ವೆಬ್ ಚಿತ್ರಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದರೆ ಮುಂದುವರಿದ HTML ಮತ್ತು CSS ಕೌಶಲ್ಯವಿಲ್ಲದೆಯೇ ವೆಬ್ಪುಟಗಳಿಗೆ ಸೇರಿಸಲು ಅವು ಕಷ್ಟವಾಗಬಹುದು. ನೀವು ಅದನ್ನು ವೆಬ್ಪುಟದಲ್ಲಿ ಸರಿಸುವಾಗಲೆಲ್ಲಾ ಚಿತ್ರದೊಂದಿಗೆ ಉಳಿಯುವ ಚಿತ್ರಕ್ಕೆ ಸರಳ, ಆದರೆ ಆಕರ್ಷಕ, ಶೀರ್ಷಿಕೆ ಸೇರಿಸುವುದಕ್ಕಾಗಿ ವಿಶ್ವಾಸಾರ್ಹ ವಿಧಾನ ಇಲ್ಲಿದೆ.

9 HTML ಚಿತ್ರದ ಶೀರ್ಷಿಕೆಗೆ ಕ್ರಮಗಳು

ಇಮೇಜ್ಗೆ ಶೀರ್ಷಿಕೆಯನ್ನು ಸೇರಿಸಿ ಮತ್ತು ನೀವು ಎಲ್ಲಿ ಬೇಕಾದರೂ ಅವುಗಳನ್ನು ಒಟ್ಟಿಗೆ ಸ್ಥಳಾಂತರಿಸಿ:

1. ನಿಮ್ಮ ವೆಬ್ಪುಟಕ್ಕೆ ಚಿತ್ರವನ್ನು ಸೇರಿಸಿ .
2. ನಿಮ್ಮ ವೆಬ್ಪುಟಕ್ಕಾಗಿ HTML ನಲ್ಲಿ, ಚಿತ್ರದ ಸುತ್ತ ಒಂದು DIV ಟ್ಯಾಗ್ ಇರಿಸಿ:
3. DIV ಟ್ಯಾಗ್ಗೆ ಶೈಲಿಯ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸಿ:
   style = "" >
4. ಅಗಲ ಶೈಲಿಯ ಆಸ್ತಿಯೊಂದಿಗೆ ಚಿತ್ರದ ಅಗಲಕ್ಕೆ DIV ಅಗಲವನ್ನು ಹೊಂದಿಸಿ:
   width: image width px; ">
5. ಸುತ್ತಮುತ್ತಲಿನ ಪಠ್ಯಕ್ಕಿಂತ ಸ್ವಲ್ಪ ಚಿಕ್ಕದಾದ ಶೀರ್ಷಿಕೆಗಳಿಗೆ, ಫಾಂಟ್ ಗಾತ್ರದ ಆಸ್ತಿಯನ್ನು DIV ಶೈಲಿಗೆ ಸೇರಿಸಿ:
   font-size: 80%; ">
6. ಚಿತ್ರದ ಕೆಳಗೆ ಕೇಂದ್ರಿಕೃತಗೊಂಡಿದ್ದರೆ ಶೀರ್ಷಿಕೆಗಳು ಉತ್ತಮವಾಗಿ ಕಾಣುತ್ತವೆ, ಆದ್ದರಿಂದ ಶೈಲಿ ಗುಣಲಕ್ಷಣಕ್ಕೆ ಪಠ್ಯ-ಅಲೈನ್ ಆಸ್ತಿ ಸೇರಿಸಿ:
   text-align: center; "> < img src = "URL" alt = "ಪರ್ಯಾಯ ಪಠ್ಯ" ಅಗಲ = "ಅಗಲ" ಎತ್ತರ = "ಎತ್ತರ" />
7. ಅಂತಿಮವಾಗಿ, ಪ್ಯಾಡಿಂಗ್-ಬಾಟಮ್ ಸ್ಟೈಲ್ ಆಸ್ತಿಯೊಂದಿಗೆ ಚಿತ್ರದ ಶೈಲಿಯ ಗುಣಲಕ್ಷಣವನ್ನು ಸೇರಿಸುವ ಮೂಲಕ ಚಿತ್ರ ಮತ್ತು ಶೀರ್ಷಿಕೆಯ ನಡುವೆ ಸ್ವಲ್ಪ ಹೆಚ್ಚುವರಿ ಸ್ಥಳವನ್ನು ಸೇರಿಸಿ:
   ಶೈಲಿ =" ಪ್ಯಾಡಿಂಗ್-ಬಾಟಮ್: 0.5em; " />

1. ನಂತರ ಚಿತ್ರದ ಕೆಳಗೆ ನೇರವಾಗಿ ಶೀರ್ಷಿಕೆ ಶೀರ್ಷಿಕೆಯನ್ನು ಸೇರಿಸಿ:
   ಇದು ನನ್ನ ಶೀರ್ಷಿಕೆ

ನಿಮ್ಮ ಸರ್ವರ್ಗೆ ವೆಬ್ಪುಟವನ್ನು ಅಪ್ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಅದನ್ನು ಬ್ರೌಸರ್ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ.

ಶೀರ್ಷಿಕೆಯ ಶೀರ್ಷಿಕೆಗಳು

• ಅಗಲಗಳು : ಸಿಎಸ್ಎಸ್ ಆಯಾಮಗಳು ವಿವಿಧ ಅಳತೆಗಳಲ್ಲಿರುತ್ತವೆ, ಆದ್ದರಿಂದ ನೀವು ಸಾಮಾನ್ಯವಾಗಿ ಮಾಪನ ಪ್ರಕಾರವನ್ನು ಒಳಗೊಂಡಿರಬೇಕು. ಉದಾಹರಣೆಗೆ: ಅಗಲ: 100 px ; ಹೇಗಾದರೂ, ಎಚ್ಟಿಎಮ್ಎಲ್ ಇಮೇಜ್ ಆಯಾಮಗಳು ಯಾವಾಗಲೂ ಪಿಕ್ಸೆಲ್ಗಳಲ್ಲಿರುತ್ತವೆ, ಆದ್ದರಿಂದ ನೀವು ಅಳತೆಯನ್ನು ಬಿಟ್ಟುಬಿಡುತ್ತೀರಿ. ಅಗಲ = "100"
• ಇಮೇಜ್ ಅಗಲಕ್ಕಿಂತ ಅಗಲವಾದ ಅಗಲವನ್ನು ಅಗಲವನ್ನಾಗಿಸಿದರೆ, ಚಿತ್ರವನ್ನು ಚಿತ್ರದ ಪಕ್ಕದಲ್ಲಿ ಕಾಣಿಸಬಹುದು. ನಿಮಗೆ ಬೇಕಾದುದಾದರೆ, ನಂತರ ಶೀರ್ಷಿಕೆಯ ಮೊದಲು ಮತ್ತು ಇಮೇಜ್ ಟ್ಯಾಗ್ನ ನಂತರ ಒಂದು
  ಟ್ಯಾಗ್ ಅನ್ನು ಸೇರಿಸಿ.