30 ನಂಬಲಾಗದಷ್ಟು ಸರಳ ವೆಬ್ ಪುಟಗಳು

ಕೆಲವು ಪ್ರಸಿದ್ಧ ಪುಟಗಳು ಮಾಹಿತಿಯೊಂದಿಗೆ ಹೆಚ್ಚು ಹೊರೆಯಾಗಿವೆ, ಆದರೆ ನಾನು ಇದಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ ಆದ್ಯತೆ ನೀಡುತ್ತೇನೆ: ಸರಳವಾದವುಗಳು.

ನಿಸ್ಸಂಶಯವಾಗಿ ಈ ಗುಂಪಿನ ದೊಡ್ಡ ಘಾತಾಂಕವು ಗೂಗಲ್ ತನ್ನ ಪ್ರಯಾಣವನ್ನು ಪ್ರಾರಂಭಿಸಿದಾಗಿನಿಂದ ಅದರ ಕನಿಷ್ಠ ಮುಖಪುಟವನ್ನು ಹೊಂದಿದೆ, ಆದರೆ ಸ್ಪಷ್ಟವಾಗಿ ಇದು ಅಂತರ್ಜಾಲದಲ್ಲಿ ಮಾತ್ರವಲ್ಲ, ವಿಷಯಗಳನ್ನು ಸರಳವಾಗಿಡಲು ಬದ್ಧವಾಗಿದೆ.

ಸರಳ HTML ವೆಬ್ ಪುಟ ಉದಾಹರಣೆಗಳು

ಕೀನ್ ರಿಚ್ಮಂಡ್

ಕೀನ್ ರಿಚ್ಮಂಡ್ ಕೆಲವು ಅಂಶಗಳೊಂದಿಗೆ ಆಡುವ ಸರಳತೆಯನ್ನು ನಮಗೆ ಕಾಣುವಂತೆ ಮಾಡುತ್ತದೆ, ಆದರೆ ಅದನ್ನು ಚೆನ್ನಾಗಿ ಇರಿಸಲಾಗಿದೆ ಕನಿಷ್ಠೀಯತಾವಾದಕ್ಕೆ ಉತ್ತಮ ಭಾವನೆ ನೀಡಿ. ಮೇಲಿನ ಎಡಭಾಗದಲ್ಲಿರುವ ಅವರ ಲೋಗೊ, ಬಲ ಮತ್ತು ಮಧ್ಯದಲ್ಲಿ ಟ್ವಿಟರ್ ಮತ್ತು ಸಂಪರ್ಕ ಐಕಾನ್‌ಗಳು, ಕಣ್ಣಿಗೆ ಕಟ್ಟುವ ಫಾಂಟ್‌ನೊಂದಿಗೆ, ಅವನು ಏನು ಮಾಡುತ್ತಾನೆ ಎಂಬುದಕ್ಕೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಕೀನ್ರಿಕ್ ಮೊಂಡ್

ಆಲಿಸ್ ಡ್ರಾಗಾರ್ಡ್

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

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಆಲಿಸ್ ಡ್ರಾಗಾರ್ಡ್

ಜೊನಾಥನ್ ಒಗ್ಡೆನ್

ಆಗ್ಡೆನ್ ಲೋಗೋದಂತೆ ನಿಮ್ಮ ಹೆಸರು ಎಷ್ಟು ಸರಳವಾಗಿದೆ ಎಂದು ಆಟವಾಡಿ, ಗಮನವನ್ನು ಸೆಳೆಯದೆ ಸ್ವಲ್ಪ ಕೆಳಗೆ ಇರುವ ಸಾಮಾಜಿಕ ನೆಟ್‌ವರ್ಕ್‌ಗಳು ಮತ್ತು ಅವುಗಳ ವಿನ್ಯಾಸವು ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಇದರಿಂದ ನಾವು ತ್ವರಿತವಾಗಿ ಅವುಗಳ ಮೂಲಕ ಹೋಗಬಹುದು. ಒಂದು ಪುಟದಲ್ಲಿ ಅದು ಮುಖ್ಯವಾದ ಎಲ್ಲವನ್ನೂ ತೋರಿಸುತ್ತದೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಜೊನಾಥನ್ ಒಗ್ಡೆನ್

ಫಿಂಚ್

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

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಫಿಂಚ್

ವಿಭಿನ್ನ ವಿನ್ಯಾಸ

ಈ ವೆಬ್‌ಸೈಟ್ ವಿಭಿನ್ನವಾಗಿ ಆಡಲು. ಹೆಡರ್ ಹೊಂದಿರುವ ವಾಲ್‌ಪೇಪರ್ ಬಳಸಿ, ಇದರಿಂದ ನಾವು ಮುಖ್ಯ ಪುಟಗಳು, ನಿಮ್ಮ ಫೋನ್ ಮತ್ತು ನಿಮ್ಮ ಸಾಮಾಜಿಕ ನೆಟ್‌ವರ್ಕ್‌ಗಳಿಗೆ ಲಿಂಕ್‌ಗಳಿಗೆ ಹೋಗಬಹುದು.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ವಿಭಿನ್ನ ವಿನ್ಯಾಸ

ಬ್ರಿಜ್

ಕೈ ತನ್ನದೇ ಆದ ವ್ಯಕ್ತಿಯೊಂದಿಗೆ ನಮ್ಮನ್ನು ವಿವರಿಸುತ್ತಾನೆ ಅಮೂರ್ತ ತ್ರಿಕೋನ ಮತ್ತು ಸೂಕ್ತವಾದ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ನಿಕಟತೆಯನ್ನು ನೀಡಲು. ನಾವು ಅವನ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿದುಕೊಳ್ಳಲು ಬಯಸಿದರೆ ಅವರು ತಮ್ಮ ಬಯೋದ ಭಾಗವನ್ನು ಸಣ್ಣ ಗಾತ್ರದಲ್ಲಿ ಫಾಂಟ್‌ನೊಂದಿಗೆ ನೀಡುತ್ತಾರೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಬ್ರಿಜ್

ಲಂಬ ಉದ್ಯಾನ ವಿನ್ಯಾಸ

ಹಿಂದಿನಂತೆಯೇ, ಲಂಬ ಉದ್ಯಾನ ವಿನ್ಯಾಸವು ವೇಗವಾಗಿ ತೋರಿಸುವ photograph ಾಯಾಚಿತ್ರದ ಕಡೆಗೆ ಹೋಗುತ್ತದೆ ಓಸ್ಲೋ ವಿಮಾನ ನಿಲ್ದಾಣದಲ್ಲಿ ಅವರ ಅತ್ಯುತ್ತಮ ಉದ್ಯೋಗಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಮೇಲ್ಭಾಗದಲ್ಲಿ ನಾವು «nav bar» ಅಥವಾ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್‌ನೊಂದಿಗೆ ಹೆಡರ್ ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ ಮತ್ತು ಭಾಷೆಯನ್ನು ಬದಲಾಯಿಸುವ ಸಾಧ್ಯತೆಯನ್ನೂ ಸಹ ಹೊಂದಿದ್ದೇವೆ. ಲೋಗೋ ಅದನ್ನು ಸರಳ ಪುಟಕ್ಕೆ ಅಂತಿಮ ಸ್ಪರ್ಶವನ್ನು ನೀಡಲು ಲಂಬ ಸ್ವರೂಪದಲ್ಲಿ ಇರಿಸುತ್ತದೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಲಂಬ ಉದ್ಯಾನ ವಿನ್ಯಾಸ

247 ಡಿಗ್ರಿ

247 ಡಿಗ್ರಿ ಏಕವರ್ಣದ ಮತ್ತು ಹಿನ್ನೆಲೆ ಚಿತ್ರದೊಂದಿಗೆ ಪ್ಲೇ ಮಾಡಿ ಬಹುತೇಕ ಸಂಪೂರ್ಣವಾಗಿ ಕತ್ತಲೆಯಾಗಿದೆ. ಒಟ್ಟಾರೆ ವಿನ್ಯಾಸದಲ್ಲಿ ಉತ್ತಮ ವ್ಯತಿರಿಕ್ತತೆಯನ್ನು ರಚಿಸಲು ಹೆಡರ್ ಫಾಂಟ್, ಪಠ್ಯ ಮತ್ತು ಹೆಡರ್ ಗಿಂತ ಚಿಕ್ಕದಾಗಿದೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: 247 ಡಿಗ್ರಿ

ಇದನ್ನು ಆನಂದಿಸಿ

ಉನಾ ಉತ್ತಮ ಮುದ್ರಣಕಲೆಯು ಅಧಿಕೃತ ಎಂಬ ಸಂಕೇತವಾಗಿದೆ ಮತ್ತು ನಾವು ಏನು ಮಾಡುತ್ತೇವೆ ಎಂದು ನಮಗೆ ತಿಳಿದಿದೆ. ಸಂದೇಶವು ನೇರವಾಗಿದ್ದರೆ ನೀವು ಹೆಚ್ಚಿನದನ್ನು ನೀಡಬೇಕಾಗಿಲ್ಲ. ಅವರು ಅದನ್ನು ಸ್ಪಷ್ಟಪಡಿಸುತ್ತಾರೆ: ಸುಂದರವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು ಮತ್ತು ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅವರು ಇಷ್ಟಪಡುತ್ತಾರೆ. ಅವರು ಯೋಜನೆಗಳಿಗಾಗಿ ಮೇಲ್ ಮತ್ತು ಅವರ ಅಧ್ಯಯನವನ್ನು ಮತ್ತೊಂದು ಲಿಂಕ್‌ನಲ್ಲಿ ಬಿಡುತ್ತಾರೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಇದನ್ನು ಆನಂದಿಸಿ

ಆಲಿಸನ್ ಹೌ

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

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಆಲಿಸನ್ ಹೌ

ಪಿಕ್ಸೆಲಾಟ್

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

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಪಿಕ್ಸೆಲಾಟ್

ಲಿಯೋನೆಲ್ ಶಾಲೆಗಳು

ನಿಮಗೆ ಬೇಕಾದರೆ ನಿಮ್ಮ ಪುನರಾರಂಭವನ್ನು ಆನ್‌ಲೈನ್‌ನಲ್ಲಿ ಮಾಡಿ, ಲಿಯೋನೆಲ್ ನಿಮಗೆ ಹಂತಗಳನ್ನು ತೋರಿಸುತ್ತದೆ. ಸೂಕ್ತವಾದ ಫಾಂಟ್, ಮೇಲಿನ ಎಡಭಾಗದಲ್ಲಿರುವ ನಿಮ್ಮ ಫೋಟೋ, ನಿಮ್ಮ ಸಾಮಾಜಿಕ ನೆಟ್‌ವರ್ಕ್‌ಗಳಿಗೆ ಲಿಂಕ್‌ಗಳು ಮತ್ತು ನಿಮ್ಮ ಅನುಭವ. ಅಲಂಕಾರಿಕ ಅಂಶವೆಂದರೆ ವಿಭಿನ್ನ ಬಣ್ಣಗಳ ಎರಡು ಸಮತಲ ರೇಖೆಗಳು.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಲಿಯೋನೆಲ್ ಶಾಲೆಗಳು

ಸೊಗಸಾದ ಸೀಗಲ್ಗಳು

ನಾವು ಮರಳಿದೆವು ಕನಿಷ್ಠೀಯತೆಯ ಸೊಬಗುಗೆ ಮತ್ತು ಆ ದೊಡ್ಡ ಖಾಲಿ ಸ್ಥಳಗಳು. ಒಂದೆಡೆ, ಶಿರೋಲೇಖವು ಉಳಿದ ಅಂಶಗಳಿಂದ ಬಹಳ ದೂರದಲ್ಲಿದೆ, ಮತ್ತು ಮತ್ತೊಂದೆಡೆ, ಆ ಅಂಶಗಳು ಅವುಗಳ ನಡುವೆ ದೊಡ್ಡ ದೃಶ್ಯ ಸಾಮರಸ್ಯವನ್ನು ಉಂಟುಮಾಡುವ ರೀತಿಯಲ್ಲಿ ಆಕಾರವನ್ನು ಹೊಂದಿವೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಸೊಗಸಾದ ಸೀಗಲ್ಗಳು

ವಾಸಸ್ಥಾನ

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

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ವಾಸಸ್ಥಾನ

ಪಿಂಕ್‌ಪಾಯಿಂಟ್

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

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಪಿಂಕ್‌ಪಾಯಿಂಟ್

IWC

ಇದರೊಂದಿಗೆ ಉತ್ತಮ photograph ಾಯಾಚಿತ್ರ ಉತ್ತಮವಾಗಿ ಆಯ್ಕೆಮಾಡಿದ ಟೈಪ್‌ಫೇಸ್ ಮತ್ತು "ಹೀರೋ" ಅಂಶ ನೀವು ಈ ವೆಬ್‌ಗೆ ನೀಡಬಹುದು. ಸ್ಲೈಡರ್ನೊಂದಿಗೆ ಅದು ಕೆಲಸದ ಪರಿಕಲ್ಪನೆಯನ್ನು ಸರಳವಾಗಿ ತೋರಿಸುತ್ತದೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: IWC

ಚಾಪ್ ಚಾಪ್

ಡಿಜಿಟಲ್ ವಿವರಣೆಯು ಚಾಪ್ ಚಾಪ್ನೊಂದಿಗೆ ನಮ್ಮನ್ನು ತರುತ್ತದೆ ಅದರ ಎಲ್ಲಾ ದೃಶ್ಯ ಉಪಸ್ಥಿತಿಯನ್ನು ತಿನ್ನುವ ಚಿತ್ರ. ಹೆಡರ್ನಲ್ಲಿನ ನೀಲಿ ಬಣ್ಣವು ವೆಬ್ನಿಂದ ಯೋಜಿಸಲಾದ ಸಂಪೂರ್ಣ ಚಿತ್ರದೊಂದಿಗೆ ಕ್ರೊಮ್ಯಾಟಿಕ್ ಮೌಲ್ಯಗಳನ್ನು ರಚಿಸಲು ಅದರ ಬಿಂದುವನ್ನು ನೀಡುತ್ತದೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಚಾಪ್ ಚಾಪ್

7 ಪೈನ್

7 ಮನೆಯ ತಟ್ಟೆಯ ಶ್ರೇಷ್ಠ ನಾಯಕನಾಗಲು ಪೈನ್ ಹಸಿರು ಬಣ್ಣದೊಂದಿಗೆ ಆಡುತ್ತಾನೆ. ಉಳಿದವರು ಅದನ್ನು ಸಂಯೋಜಿಸುತ್ತಾರೆ ಸಾಕಷ್ಟು ಹಸಿರು ಮತ್ತು ಸರಳ ಹೆಡರ್ ಹೊಂದಿರುವ ಚಿತ್ರ ಅದು ಲಾಂ by ನದಿಂದ ಗಮನಕ್ಕೆ ಬರಲು ಬಯಸುತ್ತದೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: 7 ಪೈನ್

ಮೊತ್ತ

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

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಮೊತ್ತ

ಹ್ಯಾಟ್ಬಾಕ್ಸ್

ಈ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ನೀಲಿ ಬಣ್ಣವು ಪ್ರಧಾನ ಬಣ್ಣವಾಗಿದೆ, ಇದರಲ್ಲಿ ಬಿಳಿ ಬಣ್ಣದಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಕಾಶಿಸಲ್ಪಟ್ಟ ಚಿತ್ರಗಳ ಕೊರತೆಯಿಲ್ಲ ಮತ್ತು ಆಟ ಯಾವುದು ಆ ಸೈಟ್ ಬಿಲ್ಡರ್ನ 3D ಯಲ್ಲಿ ನಾವು ಚಲಿಸುವಾಗ ಅದು ಚಲಿಸುತ್ತದೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಹ್ಯಾಟ್ಬಾಕ್ಸ್

ಕಾರಾ ಲೈಟ್

ಕಾರಾ ಹೋಗುತ್ತದೆ ಅದರ ನೈಸರ್ಗಿಕ ಮತ್ತು ಸುಂದರವಾದ ಉಪಸ್ಥಿತಿಯೊಂದಿಗೆ ಸರಳತೆ ಮತ್ತು ಕನಿಷ್ಠೀಯತೆ ನಿಮ್ಮ .ಾಯಾಚಿತ್ರದಲ್ಲಿ. ಉಳಿದವು ಹೆಡರ್ನ ಮುಖ್ಯ ಅಂಶಗಳು ಮತ್ತು ಅದನ್ನು ತೆರೆಯಲು ಹ್ಯಾಂಬರ್ಗರ್ ಬಟನ್ ಜೊತೆಗೆ ಬರುವ ಪಠ್ಯವಾಗಿದೆ.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಕಾರಾ ಲೈಟ್

ಆಂತರಿಕ ಸ್ಟುಡಿಯೋ ಮಾರ್ಕೆಟಿಂಗ್

Es ಸರಳ ವೆಬ್ ಆದರೆ ಬ್ಲಾಗ್ ಮಾಡುವುದು ಏನು ಎಂದು ಅದು ನಮಗೆ ತೋರಿಸುತ್ತದೆ. ಕೆಂಪು ಮತ್ತು ಕಪ್ಪು ಬಹಳ "ಬ್ಲಾಗ್" ಸೈಟ್‌ನ ನಕ್ಷತ್ರಗಳು.

ವೆಬ್‌ಗೆ ಲಿಂಕ್ ಮಾಡಿ: ಆಂತರಿಕ ಸ್ಟುಡಿಯೋ ಮಾರ್ಕೆಟಿಂಗ್

HTML ನಲ್ಲಿ ಸರಳ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು

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

ಕೆಲವನ್ನು ನೋಡಿದ ನಂತರ ಸರಳ ವೆಬ್ ಉದಾಹರಣೆಗಳು ನಿಮ್ಮ ತಲೆಯನ್ನು ಹೆಚ್ಚು ಮುರಿಯದೆ ನಿಮ್ಮ ಸ್ವಂತ ವಿನ್ಯಾಸಗಳನ್ನು ಮಾಡಲು ನೀವು ನಿಮ್ಮನ್ನು ಸಾಕಷ್ಟು ಪ್ರೇರೇಪಿಸಬಹುದು. ಕೆಲವೊಮ್ಮೆ ಸರಳವಾದವು ನಮ್ಮನ್ನು ಸಂಕೀರ್ಣ ವಿಷಯಗಳಲ್ಲಿ ಸಂಕೀರ್ಣಗೊಳಿಸುವುದಕ್ಕಿಂತ ಉತ್ತಮ ಪರಿಣಾಮವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಹೆಚ್ಚಿನ ಸಂದರ್ಭಗಳಲ್ಲಿ ಸರಳವು ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ನೀವು ನೋಡುತ್ತೀರಿ. ಅದಕ್ಕಾಗಿ ಹೋಗಿ.

HTML ನಲ್ಲಿ ಸರಳವಾದ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ರಚಿಸುವುದು ಮೊದಲಿಗೆ ತೋರುತ್ತಿರುವುದಕ್ಕಿಂತ ಸುಲಭವಾಗಿದೆ. ಒಂದು ವೆಬ್‌ಸೈಟ್ ಶಿರೋಲೇಖ, ದೇಹವನ್ನು ಒಳಗೊಂಡಿದೆ ಅಥವಾ ವಿಷಯ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿ ಅಥವಾ ಅಡಿಟಿಪ್ಪಣಿ ಮುಖ್ಯ ಅಂಶಗಳಾಗಿ. ನಾವು ಅವುಗಳನ್ನು ಈ ರೀತಿ ವರ್ಗೀಕರಿಸಬಹುದು:

• ಡಾಕ್ಯುಮೆಂಟ್ಗಳು: ನಾವು ರಚಿಸಲು ಹೊರಟಿರುವ ಎಲ್ಲಾ ದಾಖಲೆಗಳನ್ನು a ಯೊಂದಿಗೆ ಮಾಡಬೇಕು . ನಾವು ಎ ಮತ್ತು ಯಾವಾಗಲೂ a ನೊಂದಿಗೆ ಮುಚ್ಚುತ್ತದೆ
• ದೇಹ ಅಥವಾ ದೇಹ: ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಗೋಚರ ಭಾಗವು ನಡುವೆ ಇರುತ್ತದೆ ವೈ
• ಶೀರ್ಷಿಕೆಗಳು: ಅವುಗಳನ್ನು H1, H2, H3 ನಿಂದ ಕರೆಯಲಾಗುತ್ತದೆ ... ನಾವು a ನಿಂದ ಪ್ರಾರಂಭಿಸುತ್ತೇವೆ ಮತ್ತು ನಾವು a ನೊಂದಿಗೆ ಮುಚ್ಚುತ್ತೇವೆ . ಒಳಗೆ ಇರುವ ಪಠ್ಯವು ಹೆಡರ್ ಆಗಿ ಗೋಚರಿಸುತ್ತದೆ ಮತ್ತು ಅದರ ಸಂಖ್ಯೆಯನ್ನು ಅವಲಂಬಿಸಿ ಅದು ಸಣ್ಣ ಅಥವಾ ದೊಡ್ಡ ಗಾತ್ರದಲ್ಲಿ ಮಾಡುತ್ತದೆ.
• ಪ್ಯಾರಾಗಳು: ಪ್ಯಾರಾಗ್ರಾಫ್ ಅನ್ನು ಎ ಮತ್ತು ಇದರೊಂದಿಗೆ ಮುಚ್ಚುತ್ತದೆ
• ಎನ್ಲೇಸಸ್: ಸ್ಪಷ್ಟ ಉದಾಹರಣೆಯೆಂದರೆcreativosonline.org/»> ಗೆ ಲಿಂಕ್ ಮಾಡಿ Creativos Online
• ಚಿತ್ರಗಳು: ನಾವು ಅವುಗಳನ್ನು ಲೇಬಲ್ ಮೂಲಕ ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ . ಒಂದು ಉದಾಹರಣೆ . ನಾವು ಉಲ್ಲೇಖಗಳ ನಡುವೆ ಚಿತ್ರವನ್ನು ಆಹ್ವಾನಿಸುತ್ತೇವೆ ಮತ್ತು ಎಸ್‌ಇಒಗೆ ಅಗತ್ಯವಾದ ಪರ್ಯಾಯ ಪಠ್ಯಕ್ಕಾಗಿ ಆಲ್ಟ್ ಅನ್ನು ಬಳಸುತ್ತೇವೆ.
• ಪಟ್ಟಿಗಳು: ನಾವು ಇದರೊಂದಿಗೆ ಪಟ್ಟಿಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೇವೆ ಗೊಂದಲಮಯ ಮತ್ತು ಜೊತೆ ಅಚ್ಚುಕಟ್ಟಾಗಿ. ಪಟ್ಟಿ ವಸ್ತುಗಳನ್ನು ಇದರೊಂದಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ . ಅವುಗಳನ್ನು ಬಾರ್‌ನೊಂದಿಗೆ ಮುಚ್ಚಲು ಯಾವಾಗಲೂ ಮರೆಯದಿರಿ.

ಈ ಅಂಶಗಳೊಂದಿಗೆ ನಾವು ಹೊಂದಿರುತ್ತೇವೆ ಸರಳ ವೆಬ್‌ಸೈಟ್ ರಚಿಸಲು ಆಧಾರ ಮುಂದಿನ ಭಾಗದಲ್ಲಿ ನಾವು ನಿಮಗೆ ಕಲಿಸುವ ಉತ್ತಮ ಪ್ರಮಾಣವನ್ನು ನೀವು ನೋಡುತ್ತೀರಿ. ಅದರ ಪ್ರಮುಖ ಅಂಶಗಳನ್ನು ಹೊಂದಿರುವ ಶಬ್ದಾರ್ಥದ ರಚನೆಯು ಈ ರೀತಿ ಕಾಣುತ್ತದೆ ಎಂದು ಹೇಳೋಣ:

• ಅದರ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್‌ನೊಂದಿಗೆ ಹೆಡರ್ ಸೈಟ್ನ ವಿಭಿನ್ನ ಪುಟಗಳಿಗಾಗಿ.
• ಲೇಖನ ಅಥವಾ ದೇಹದ ಸ್ಥಳ ಇದರಲ್ಲಿ ನಾವು ಬ್ಲಾಗ್ ನಮೂದನ್ನು ರಚಿಸಬಹುದು, ನಮ್ಮ ಪಠ್ಯಕ್ರಮ ಅಥವಾ ಚಿತ್ರವನ್ನು ಹಾಕಬಹುದು.
• ಸೈಡ್ಬಾರ್ ಅಥವಾ ಸೈಡ್ಬಾರ್ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ಹಾಕಲು.
• ಅಡಿಟಿಪ್ಪಣಿ ಅಥವಾ ಕಾಲು, ಅಲ್ಲಿ ನಾವು ಸೈಟ್‌ನ ಪ್ರಮುಖ ಪುಟಗಳಿಗೆ ಮತ್ತು ಸಾಮಾಜಿಕ ನೆಟ್‌ವರ್ಕ್‌ಗಳ ಐಕಾನ್‌ಗಳಿಗೆ ಲಿಂಕ್‌ಗಳನ್ನು ಇಡುತ್ತೇವೆ (ಯಾವಾಗಲೂ ಉದಾಹರಣೆಯಾಗಿ).

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

ನಾವು ಅದನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತೇವೆ ನಿಮ್ಮ ತಲೆ ಮುರಿಯಬೇಡಿ ಮತ್ತು ಸರಳಕ್ಕೆ ಹೋಗಿ. ಮುಖ್ಯ ವಿಷಯವೆಂದರೆ ಈ ಪ್ರದೇಶಗಳನ್ನು ಉಳಿದ ಭಾಗಗಳಿಂದ ಸೆಕೆಂಡುಗಳ ದೃಶ್ಯ ಪಾಸ್‌ನಲ್ಲಿ ಬೇರ್ಪಡಿಸಲಾಗುತ್ತದೆ. ಸಮಯದೊಂದಿಗೆ ನಾವು ನಮ್ಮನ್ನು ಸಂಕೀರ್ಣಗೊಳಿಸಬಹುದು ಮತ್ತು ಇತರ ಸ್ಥಳಗಳಲ್ಲಿ ಕೆಲಸ ಮಾಡಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ.

ಇದು HTML ಕೋಡ್‌ನ ಸ್ಪಷ್ಟ ಉದಾಹರಣೆ ಪ್ರಮುಖ ಅಂಶಗಳೊಂದಿಗೆ:

<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8'/>
    <title>HTML Semántico</title>
  </head>
  <body>

    <h1>Crear web es fácil!</h1>
    <ul>
      <li><a href='#'>Inicio</a></li>
      <li><a href='#'>Acerca de</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Iniciar sesión</a></li>
    </ul>

  </body>
</html>

ಎಚ್ಟಿಎಮ್ಎಲ್ ಕೋಡ್ನ ಈ ಸಾಲುಗಳೊಂದಿಗೆ ನಾವು ಹೊಂದಿದ್ದೇವೆ ಮೊದಲು ಹೆಡರ್ ನಲ್ಲಿ ಪುಟ ಶೀರ್ಷಿಕೆಯನ್ನು ರಚಿಸಿದೆ, ಈ ಸಂದರ್ಭದಲ್ಲಿ «ಲಾಕ್ಷಣಿಕ HTML», ನಾವು ಶೀರ್ಷಿಕೆಯನ್ನು ಎರಡೂ ಮುಚ್ಚುತ್ತೇವೆ , ಹೆಡರ್ ಜೊತೆ ಮತ್ತು ನಾವು ದೇಹವನ್ನು ತೆರೆಯಲು ದಾರಿ ಮಾಡಿಕೊಡುತ್ತೇವೆ .

ನಾವು ಒಂದು ಇದರೊಂದಿಗೆ H1 ನಲ್ಲಿ ಮೊದಲ ಹೆಡರ್ ಅದನ್ನು ಮುಚ್ಚಲು , ಮತ್ತು ನಮ್ಮ ಸೈಟ್‌ನ ವಿಭಿನ್ನ ಪುಟಗಳಿಗಾಗಿ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ಅನ್ನು ರಚಿಸಲು ನಮಗೆ ಸಹಾಯ ಮಾಡುವ ಪಟ್ಟಿಗೆ ನಾವು ಹೋಗುತ್ತೇವೆ. ನಾವು ಪಟ್ಟಿಯನ್ನು ಮುಚ್ಚುತ್ತೇವೆ , ನಾವು ಮುಚ್ಚುತ್ತೇವೆ ಮತ್ತು ಅಂತಿಮವಾಗಿ HTML ಡಾಕ್ಯುಮೆಂಟ್ .

ಅಂತಿಮವಾಗಿ, ಯಾವಾಗಲೂ ಡಾಕ್ಯುಮೆಂಟ್ ತೆರೆಯಿರಿ ಸ್ಲ್ಯಾಷ್‌ನೊಂದಿಗೆ ಸಂಪೂರ್ಣ ಕೋಡ್‌ನ ಕೊನೆಯಲ್ಲಿ ಅದನ್ನು ಮುಚ್ಚಲು. ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ತೆರೆದ ನಂತರ, ಭಾಷೆಯ ಉಲ್ಲೇಖವನ್ನು ಯಾವಾಗಲೂ ಬಳಸಲಾಗುತ್ತದೆ, ಈ ಸಂದರ್ಭದಲ್ಲಿ ಸ್ಪ್ಯಾನಿಷ್ «es with ಮತ್ತು a .

ನೀವು ಕೋಡ್ ಅನ್ನು ಮತ್ತು ಯಾವಾಗ ಬೇಕಾದರೂ ಹತ್ತಿರದಿಂದ ನೋಡುವುದು ಮುಖ್ಯ ನೀವು ಅದನ್ನು ಬಾರ್‌ನೊಂದಿಗೆ ಮುಚ್ಚುವ ಕಾರ್ಯವನ್ನು ತೆರೆಯುತ್ತೀರಿ ಅನುಗುಣವಾದ

ಸ್ವಲ್ಪ ಸಿಎಸ್ಎಸ್

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

ಒಂದೆಡೆ ನಾವು ಹೆಡರ್ ಅಥವಾ ಹೆಡರ್, ದೇಹ ಅಥವಾ ದೇಹವನ್ನು ಅದರ ಲೇಖನ ಅಥವಾ ಚಿತ್ರ ಮತ್ತು ಅಡಿಟಿಪ್ಪಣಿ ಯಾವುದು ಎಂಬುದಕ್ಕೆ HTML ನ ಶಬ್ದಾರ್ಥದ ಬಳಕೆಯನ್ನು ಹೊಂದಿದ್ದರೆ, ಸಿಎಸ್ಎಸ್ನಲ್ಲಿ ನಾವು ಗುರುತಿಸಲು «ಡಿವ್» ಕಾರ್ಯವನ್ನು ಬಳಸುತ್ತೇವೆ ವಿನ್ಯಾಸದಲ್ಲಿ ಅಗತ್ಯವಾದ ಬದಲಾವಣೆಗಳನ್ನು ನಂತರ ಅನ್ವಯಿಸಲು ಈ ಪ್ರತಿಯೊಂದು ಸ್ಥಳಗಳಿಗೆ.

ಸರಳವಾದದ್ದು:

ನಾವು ಡಿವ್‌ನೊಂದಿಗೆ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಬಹುದು, ಸೂಕ್ತವಾದ ಮತ್ತು ಪರಿಪೂರ್ಣವಾದ ರಚನೆಯು ಸಹಾಯ ಮಾಡುತ್ತದೆ ಆದ್ದರಿಂದ ವೆಬ್ ಕ್ರಾಲರ್‌ಗಳು ನಮ್ಮ ವಿಷಯದ ಬಗ್ಗೆ ಸಂಪೂರ್ಣವಾಗಿ "ಓದಬಹುದು", ಆದ್ದರಿಂದ ನಾವು ಆ ಮೂಲ ರಚನೆಯನ್ನು ಅನುಸರಿಸಿದರೆ, ನಮಗೆ ಮೊದಲು ಉತ್ತಮ ಕೆಲಸ ಮತ್ತು ಆಧಾರವಿರುತ್ತದೆ.

Un ಸರಳ ಸಿಎಸ್ಎಸ್ ಕೋಡ್ ಉದಾಹರಣೆ:

h1 {
ಬಣ್ಣ: ಬಿಳಿ;
ಪಠ್ಯ-ಜೋಡಣೆ: ಸೆಂಟರ್;
}

ನಾವು ಎಚ್ 1 ಮತ್ತು ಪಠ್ಯವನ್ನು ಕರೆಯುತ್ತೇವೆ ನಾವು ಅದನ್ನು ಬಿಳಿ ಬಣ್ಣದಲ್ಲಿ ಬಣ್ಣದಲ್ಲಿ ಇಡುತ್ತೇವೆ: ಬಿಳಿ; ಮತ್ತು ನಾವು ಅದನ್ನು «text align with ನೊಂದಿಗೆ ಕೇಂದ್ರಕ್ಕೆ ಜೋಡಿಸುತ್ತೇವೆ. H1 ಕರೆಗೆ ತೆರೆದ ನಂತರ ಯಾವಾಗಲೂ ಚದರ ಆವರಣಗಳೊಂದಿಗೆ ಮುಚ್ಚಿ.

ನ ಹೆಡರ್ ಫೋಟೋ ಗ್ರೆಗ್ ರಾಕೊಜಿ