ಸಿಂಪಲ್ ಆಗಿ ವೆಬ್‌ಸೈಟ್ ಮಾಡೋದು ಹೇಗೆ? (HTML/CSS ಬೇಸಿಕ್ಸ್)

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

ಮೊದಲು ನೀನು ಮಾಡಬೇಕಿರೋದು ಒಂದು ಸಣ್ಣ ಸಾಹಸ. ನಿನ್ನ ಹೆಸರಲ್ಲೇ ಒಂದು ವೆಬ್ ಪೇಜ್ ಕ್ರಿಯೇಟ್ ಮಾಡು. ಒಂದು ನೋಟ್‌ಪ್ಯಾಡ್ ಅಥವಾ ವಿಶುವಲ್ ಸ್ಟುಡಿಯೋ ಕೋಡ್ (VS Code) ಓಪನ್ ಮಾಡಿಕೋ. ಅಲ್ಲಿ HTML ಟ್ಯಾಗ್‌ಗಳನ್ನು ಬಳಸಿ ನಿನ್ನ ಹೆಸರು, ನಿನ್ನ ಫೋಟೋ ಮತ್ತು ನಿನ್ನ ಬಗ್ಗೆ ಒಂದು ಸಣ್ಣ ಡಿಸ್ಕ್ರಿಪ್ಶನ್ ಬರಿ. ಇಲ್ಲಿ <h1> ಅಂದ್ರೆ ದೊಡ್ಡ ಹೆಡ್ಡಿಂಗ್, <p> ಅಂದ್ರೆ ಪ್ಯಾರಾಗ್ರಾಫ್ ಅಂತ ನಿನಗೆ ಗೊತ್ತಿರಲಿ. ನೀನು ಬರೆದ ಆ ಕೋಡ್ ಅನ್ನು .html ಅಂತ ಸೇವ್ ಮಾಡಿ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಓಪನ್ ಮಾಡಿದ್ರೆ ಸಾಕು, ಜಗತ್ತಿನ ಯಾವುದೇ ಮೂಲೆಯಲ್ಲಿದ್ದರೂ ನಿನ್ನ ಕಂಪ್ಯೂಟರ್ ಪರದೆಯ ಮೇಲೆ ನಿನ್ನ ಹೆಸರಿನ ಪೇಜ್ ಪ್ರತ್ಯಕ್ಷವಾಗುತ್ತೆ. ಇದೇ ನೋಡು ನಿನ್ನ ಮೊದಲ ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಹೆಜ್ಜೆ. ಬರೀ ಬಿಳಿ ಪರದೆಯ ಮೇಲೆ ಕಪ್ಪು ಅಕ್ಷರಗಳನ್ನು ನೋಡೋದಕ್ಕೆ ಸ್ವಲ್ಪ ಬೋರ್ ಅನ್ಸಬಹುದು, ಅದಕ್ಕೇ ನಾವು ಈ ಸೌಂದರ್ಯವರ್ಧಕ ಸಿಎಸ್‌ಎಸ್ ಬಳಸ್ತೀವಿ.

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

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

Tech Vaidya WhatsApp ಚಾನೆಲ್ AI, ಟೆಕ್ ಸುದ್ದಿ, ಸೈಬರ್ ಸುರಕ್ಷತೆ ಮಾಹಿತಿ ಹಾಗೂ ಉಪಯುಕ್ತ ಟೆಕ್ ಟಿಪ್ಸ್ಗಳನ್ನು ಪಡೆಯಲು ನಮ್ಮ WhatsApp ಚಾನೆಲ್ ಸೇರಿ.

ಚಾನೆಲ್ ಸೇರಿ

ವೆಬ್‌ಸೈಟ್ ಡಿಸೈನ್ ಮಾಡುವಾಗ ನಿನಗೆ ಕಲರ್ ಪ್ಯಾಲೆಟ್ ಬಗ್ಗೆ ಸ್ವಲ್ಪ ಅರಿವಿರಲಿ. ಎಲ್ಲೆಂದರಲ್ಲಿ ಗಾಢವಾದ ಬಣ್ಣಗಳನ್ನು ಬಳಸುವ ಬದಲು ಕಣ್ಣಿಗೆ ತಂಪು ನೀಡುವ ಮತ್ತು ಪ್ರೊಫೆಷನಲ್ ಆಗಿ ಕಾಣುವ ಬಣ್ಣಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಿಕೋ. ಬಟನ್‌ಗಳ ಮೇಲೆ ಮೌಸ್ ತಗೊಂಡು ಹೋದಾಗ ಅವುಗಳ ಬಣ್ಣ ಬದಲಾಗೋ ಹಾಗೆ ಮಾಡೋದು (Hover Effect) ಕಲಿಯೋದು ತುಂಬಾನೇ ಮಜಾ ಇರುತ್ತೆ. ಇಂತಹ ಸಣ್ಣ ಸಣ್ಣ ಅನಿಮೇಷನ್‌ಗಳು ನಿನ್ನ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ತುಂಬಾನೇ ಲೈವ್ಲಿ ಆಗಿ ಇರಿಸುತ್ತವೆ. ಬರೀ ಥಿಯರಿ ಓದೋದಕ್ಕಿಂತ ಹೀಗೆ ಪ್ರಾಕ್ಟಿಕಲ್ ಆಗಿ ಏನಾದರೂ ಒಂದು ವಿಷಯಕ್ಕೆ ವೆಬ್‌ಸೈಟ್ ಮಾಡೋದಕ್ಕೆ ಶುರು ಮಾಡಿದರೆ ಕೋಡಿಂಗ್ ಬೇಗ ತಲೆಗೆ ಹತ್ತುತ್ತೆ.

ಈಗಿನ ಕಾಲದಲ್ಲಿ ಮೊಬೈಲ್ ಫೋನ್‌ಗಳಲ್ಲೇ ಎಲ್ಲರೂ ವೆಬ್‌ಸೈಟ್ ನೋಡ್ತಾರೆ ಅಲ್ವಾ? ಹಾಗಾಗಿ ನಿನ್ನ ವೆಬ್‌ಸೈಟ್ ಮೊಬೈಲ್‌ನಲ್ಲೂ ಚೆನ್ನಾಗಿ ಕಾಣುವಂತೆ ಮಾಡೋದಕ್ಕೆ 'ರೆಸ್ಪಾನ್ಸಿವ್ ಡಿಸೈನ್' ಕಲಿಯೋದು ಬಹಳ ಮುಖ್ಯ. ಇದಕ್ಕಾಗಿ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳನ್ನ ಬಳಸ್ತೀವಿ. ಅಂದ್ರೆ ದೊಡ್ಡ ಲ್ಯಾಪ್ಟಾಪ್ ಸ್ಕ್ರೀನ್‌ನಲ್ಲಿ ಹೇಗೆ ಕಾಣಬೇಕು ಮತ್ತು ಸಣ್ಣ ಮೊಬೈಲ್ ಸ್ಕ್ರೀನ್‌ನಲ್ಲಿ ಹೇಗೆ ಅಡ್ಜಸ್ಟ್ ಆಗಬೇಕು ಅನ್ನೋದನ್ನ ನೀನು ಈ ಹಂತದಲ್ಲಿ ಡಿಸೈಡ್ ಮಾಡಬಹುದು. ಇದು ಸ್ವಲ್ಪ ಅಡ್ವಾನ್ಸ್ ಅನಿಸಬಹುದು, ಆದ್ರೆ ಒಮ್ಮೆ ಅರ್ಥವಾದರೆ ತುಂಬಾನೇ ಸಿಂಪಲ್. ಬರೀ ಕೋಡಿಂಗ್ ಮಾಡೋದು ಅಷ್ಟೇ ಅಲ್ಲ, ಆ ಕೋಡ್ ಅನ್ನು ಹೇಗೆ ಅರೇಂಜ್ ಮಾಡಬೇಕು ಅನ್ನೋದು ಒಬ್ಬ ಡೆವಲಪರ್ ಗೆ ಗೊತ್ತಿರಬೇಕಾದ ಕಸುಬು.

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

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

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

ಸರಿ ತಮ್ಮಾ, ಇವತ್ತೇ ನಿನ್ನ ಫಸ್ಟ್ ಎಚ್‌ಟಿಎಮ್‌ಎಲ್ ಫೈಲ್ ಕ್ರಿಯೇಟ್ ಮಾಡು. ಮೊದಲೇ ಹೇಳಿದ ಹಾಗೆ ಯಾರಿಗಾದರೂ ಗಿಫ್ಟ್ ಕೊಡೋ ಪ್ಲಾನ್ ಇದ್ರೆ ಅದನ್ನೇ ಒಂದು ಪ್ರಾಜೆಕ್ಟ್ ತರ ತಗೋ. ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಬಗ್ಗೆ ಇನ್ನು ಏನಾದರೂ ಡೌಟ್ಸ್ ಇದ್ರೆ ಕೆಳಗೆ ಕಾಮೆಂಟ್ ಮಾಡಿ ಕೇಳು, ನಾನಿದ್ದೇನೆ ನಿನಗೆ ಸಹಾಯ ಮಾಡೋಕೆ. ಹಾಗೆಯೇ ನೀನು ಮೊದಲ ವೆಬ್ ಪೇಜ್ ಮಾಡಿದ ಮೇಲೆ ಆ ಎಕ್ಸ್‌ಪೀರಿಯನ್ಸ್ ಹೇಗಿತ್ತು ಅಂತ ತಿಳಿಸೋದನ್ನ ಮರಿಬೇಡ!