ವಿಜಯನಗರ ಬಾಲ್ಕ್ ಬ್ಲಾಗ್ ಓದುಗರಿಗೆ ಇವತ್ತು ಒಂದು ವಿಶೇಷ ತರಗತಿಯ ಜೊತೆ ಬಂದಿದ್ದೇವೆ. ನೀವು ಭವಿಷ್ಯದಲ್ಲಿ ವೆಬ್ ಡಿಸೈನರ್ ಮತ್ತು ಡೆವಲಪರ್ ಆಗಲು ಬಯಸಿದರೆ ಆ ಜಗತ್ತಿನ ಸಣ್ಣ ಪರಿಚಯ ಇಲ್ಲಿದೆ. ಇಲ್ಲಿ ಕೆಲವೊಂದು ಕೋಡ್ ಬರೆಯುವುದು ಹೇಗೆ ಎಂದು ತಿಳಿಸಿಕೊಡಲಾಗಿದೆ. ನೀವೇ ಪ್ರ್ಯಾಕ್ಟೀಸ್ ಮಾಡಿ, ಯಶಸ್ಸು ಪಡೆಯಿರಿ.
ನೀವು ಸ್ವಂತ ಬ್ಲಾಗ್, ವೆಬ್ಸೈಟ್ ಹೊಂದಲು ಬಯಸಿದರೆ ಕೋಡಿಂಗ್ ನ ಬೇಸಿಕ್ಸ್ ಕಲಿತಿದ್ದರೆ ಉತ್ತಮ. ಇದನ್ನು ಕೋಡಿಂಗ್ ಸಂಬಂತ ಉದ್ಯೋಗ ಮಾಡಲು ಬಯಸುವವರು ಮಾತ್ರವಲ್ಲದೆ ಎಲ್ಲರೂ ಕಲಿಯಬಹುದು. ಕಂಪ್ಯೂಟರ್ ಭಾಷೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಇದರಿಂದ ಸಾಧ್ಯವಾಗುತ್ತದೆ.
ಏನಿದು ಎಚ್ ಟಿಎಂಎಲ್?
ವೆಬ್ ಪುಟಗಳನ್ನು ರಚಿಸಲು ಎಚ್ಟಿಎಂಎಲ್ ಎನ್ನುವುದು ಪ್ರಮಾಣಿತ ಭಾಷೆಯಾಗಿದೆ. ಎಚ್ಟಿಎಂಎಲ್ ವಿಸ್ತೃತ ರೂಪ: ಹೈಪರ್ ಟೆಕ್ಸ್ಟ್ ಮಾರ್ಕಪ್ ಲ್ಯಾಂಗ್ವೇಜ್. ವೆಬ್ಸೈಟ್ ಎಂಬ ಕಟ್ಟಡ ಕಟ್ಟಲು ಎಚ್ಟಿಎಂಎಲ್ ಮಾರ್ಕಪ್ಗಳು ಇಟ್ಟಿಗೆಗಳಾಗಿವೆ. ಎಚ್ಟಿಎಂಎಲ್ ಅಂಶಗಳನ್ನು ಟ್ಯಾಗ್ಗಳಿಂದ ರಚಿಸಲಾಗುತ್ತದೆ. ಹೆಡ್ಡಿಂಗ್, ಪ್ಯಾರಾಗ್ರಾಫ್, ಟೇಬಲ್ ಇತ್ಯಾದಿ ಟ್ಯಾಗ್ ಲೇಬಲ್ಗಳನ್ನು ಎಚ್ಟಿಎಂಎಲ್ ಹೊಂದಿದೆ. ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಎಚ್ಟಿಎಂಎಲ್ ಟ್ಯಾಗ್ಗಳು ಕಾಣಿಸುವುದಿಲ್ಲ. ಎಚ್ಟಿಎಂಎಲ್ ಭಾಷೆಯಲ್ಲಿ ಬರೆದಿರುವುದು ಕಂಟೆಂಟ್ ಆಗಿ ವೆಬ್ ಗಳಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುತ್ತದೆ.
ಒಂದು ಉದಾಹರಣೆ ಇಲ್ಲಿದೆ
ಕಂಪ್ಯೂಟರ್ ನಲ್ಲಿ ನೋಟ್ ಪ್ಯಾಡ್ ತೆರೆಯಿರಿ. ಅದರಲ್ಲಿ ಈ ಕೆಳಗೆ ಬರೆದಂತೆ ಟೈಪ್ ಮಾಡಿರಿ.
<!DOCTYPE html>
<html>
<head>
<title> Website Title Vijayanagar Balc </title>
</head>
<body>
<h1>My first heading </h1>
<p>My first paragraph </p>
</body>
</html>
ಉದಾಹರಣೆಯ ವಿವರಣೆ ಇಲ್ಲಿದೆ
ಇಲ್ಲಿ
<!DOCTYPE html>ಎನ್ನುವುದು ನೀವು ಎಚ್ಟಿಎಂಎಲ್5ನಲ್ಲಿ ಡಾಕ್ಯುಮೆಂಟ್ ಸಿದ್ಧಪಡಿಸುತ್ತಿದ್ದೀರಿ ಎನ್ನುವುದನ್ನು ಘೋಷಿಸುವುದಾಗಿದೆ.
<html>
ಪುಟದ ಮೂಲ ಅಂಶವಾಗಿದೆ.
ನೀವು ರಚಿಸುವ ಡಾಕ್ಯುಮೆಂಟ್ನಲ್ಲಿ ಒಳಗೊಂಡಿರುವ ಮಾಹಿತಿಗಳ ಮೆಟಾ ಇನ್ಫಾರ್ಮೆಷನ್
<head> ಇದಾಗಿದೆ.
ಡಾಕ್ಯುಮೆಂಟ್ನ ಶೀರ್ಷಿಕೆಯನ್ನು <title> ಸೂಚಿಸುತ್ತದೆ.
* ವೆಬ್ಪುಟದಲ್ಲಿ ಕಣ್ಣಿಗೆ ಕಾಣಿಸುವ ಅಂಶಗಳನ್ನು <body> ಸೂಚಿಸುತ್ತದೆ.
* ದೊಡ್ಡ ಗಾತ್ರದ ಹೆಡ್ಡಿಂಗ್ ಕಾಣಿಸಬೇಕಾದರೆ <h1> ಎಂದು ಬರೆಯಬೇಕು.
ಪ್ಯಾರಾಗ್ರಾಫ್ ಬೇಕಿದ್ದರೆ <p> ಎಂದು ಬರೆಯಬೇಕು.
ನೀವೇ ಮಾಡಿ ನೋಡಿ
ನೋಟ್ಬುಕ್ ತೆರೆಯಿರಿ (ಮ್ಯಾಕ್ನಲ್ಲಿ ಟೆಕ್ಸ್ಟ್ ಎಡಿಟ್). ಈ ಮುಂದಿನಂತೆ ಟೈಪ್ ಮಾಡಿ.
<!DOCTYPE html>
<html>
<body>
<h1>Vijaya Nagara BALC HTML Heading </h1>
<p>Vijaya Nagara BALC First Paragraph.</p>
</body>
</html>
ನೋಟ್ಪ್ಯಾಡ್ನಲ್ಲಿ ಇಷ್ಟು ಬರೆದು ಇದನ್ನು ಈಗ ಸೇವ್ ಮಾಡಿ. ಸೇವ್ ಮಾಡುವಾಗ ಅದಕ್ಕೆ ಯಾವುದಾದರೂ ಹೆಸರು ನೀಡಬಹುದು. ಉದಾಹರಣೆಗೆ vijayanagara balc class ಎಂದು ಹೆಸರು ನೀಡಿ. ಸೇವ್ ಮಾಡುವಾಗ ಒಂದಿಷ್ಟು ಮಾಹಿತಿ ಗಮನಿಸಿ. ಫೈಲ್ ನೇಮ್ ಮುಂದೆ ನೀವು ಎಚ್ಟಿಎಂ (vijayanagarabalcclass.htm)) ಎಂದು ಬರೆಯಬೇಕು. ಸೇವ್ ಮಾಡುವಲ್ಲಿ ಎನ್ಕೋಡಿಂಗ್ ಎಂಬ ವಿಭಾಗದಲ್ಲಿ ಯುಟಿಎಫ್-8 ಎನ್ನುವುದನ್ನು ಆಯ್ಕೆ ಮಾಡಿಕೊಂಡು ಸೇವ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ. ಇದನ್ನು ಡೆಸ್ಕ್ಟಾಪ್ನಲ್ಲಿ ಸೇವ್ ಮಾಡಿಟ್ಟುಕೊಂಡರೆ ಸುಲಭವಾಗಿ ತೆರೆಯಬಹುದು. ಈಗ ಡೆಸ್ಕ್ಟಾಪ್ಗೆ ಹೋಗಿ ವಿಜಯನಗರ ಬಾಲ್ಕ್ ಕ್ಲಾಸ್ ಎಂಬ ಫೈಲ್ ಅನ್ನು ತೆರೆಯಿರಿ. ಅದು ವೆಬ್ಸೈಟ್ ಪುಟದಂತೆ ತೆರೆದುಕೊಳ್ಳುತ್ತದೆ ಅಲ್ಲವೇ? ಗುಡ್ ನೀವು ಮೊದಲ ವೆಬ್ಪುಟ ರಚಿಸಿದ್ದೀರಿ.
ಈ ವಿಷಯಗಳನ್ನು ನೆನಪಿಡಿ.
ಎಚ್ಟಿಎಂಎಲ್ ಡಾಕ್ಯುಮೆಂಟ್ನ ಆರಂಭ ಹೀಗಿರುತ್ತದೆ <html>
ಮತ್ತು ಅಂತ್ಯ ಹೀಗಿರುತ್ತದೆ: </html>.
ಇದೇ ರೀತಿ ಆರಂಭ <body> ಮತ್ತು ಅಂತ್ಯ </body> ಹೀಗಿರುತ್ತದೆ.
ಅಂದರೆ, ಅಂತ್ಯಕ್ಕೆ / ಬಳಸಬೇಕು. ನೀವೇ ಮಾಡಿ ನೋಡಿ
ಹೆಡ್ಡಿಂಗ್ ರಚನೆ: ನೀವು ವಿವಿಧ ಗಾತ್ರದ ಹೆಡ್ಡಿಂಗ್ಗಳನ್ನು ಬರೆಯಲು ಬಯಸಿದ್ದೀರಿ ಎಂದಿಟ್ಟುಕೊಳ್ಳೋಣ. ನೋಟ್ಪ್ಯಾಡ್ನಲ್ಲಿ ಈ ಕೆಳಗಿನಂತೆ ಕೋಡ್ ಬರೆಯಿರಿ. ಇಲ್ಲಿ ಎಚ್1 ನಿಂದ ಎಚ್6 ತನಕ ವಿವಿಧ ಗಾತ್ರದ ಹೆಡ್ಡಿಂಗ್ಗಳನ್ನು ಬರೆಯಬಹುದು. ಪ್ರತಿಯೊಂದು ಎಚ್1 ಇತ್ಯಾದಿಗಳನ್ನು ಅಂತ್ಯಗೊಳಿಸುವಾಗ `/’ ಬಳಸಲು ಮರೆಯಬೇಡಿ.
<!DOCTYPE html>
<html>
<body>
<h1>This is BALC heading 1</h1>
<h2> This is BALC heading 2</h2>
<h3> This is BALC heading 3</h3>
<h4> This is BALC heading 1</h4>
<h5> This is BALC heading 2</h5>
<h6> This is BALC heading 3</h6>
</body>
</html>ನಂತರ ಮೇಲೆ ತಿಳಿಸಿದಂತೆ ಸೇವ್ ಮಾಡುವಾಗ ಫೈಲ್ ಹೆಸರಿನ ಮುಂದೆ .ಎಚ್ಟಿಎಂ ಎಂದು ಬರೆಯಿರಿ. ನಂತರ ತೆರೆದು ನೋಡಿರಿ.
ಪ್ಯಾರಾಗ್ರಾಫ್: ಇದೇ ರೀತಿ ಪ್ಯಾರಾಗ್ರಾಫ್ ಬರೆಯುವುದನ್ನು ಕಲಿಯಿರಿ. ಪ್ಯಾರಾಗ್ರಾಫ್ಗೆ ಪಿ ಅಕ್ಷರ ಬಳಸಬೇಕು. ನೋಟ್ಪ್ಯಾಡ್ನಲ್ಲಿ
<p>This is a paragraph.</p>
<p>This is another paragraph.</p> ಬರೆಯಿರಿ
ಮತ್ತು .ಎಚ್ಟಿಎಂ ಎಂದು ಸೇವ್ ಮಾಡಿ ತೆರೆದು ನೋಡಿ.ಲಿಂಕ್ ಬಳಕೆ: ನೀವು ವೆಬ್ಪುಟದಲ್ಲಿ ಯಾವುದಾದರೂ ಅಕ್ಷರ ಬರೆದು ಆ ಅಕ್ಷರ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ ಯಾವುದಾದರೂ ವೆಬ್ಸೈಟ್ಗೆ ಹೋಗಬೇಕು ಎಂದುಕೊಳ್ಳೋಣ. ಇಂತಹ ಸಮಯದಲ್ಲಿ ನೀವು ಈ ಮುಂದಿನಂತೆ ಕೋಡ್ ಅನ್ನು ನೋಟ್ಬುಕ್ನಲ್ಲಿ ಬರೆದು ಸೇವ್ ಮಾಡಬೇಕು.
<a href=" www.vijaynagarbalc.com"> ವಿಜಯನಗರಬಾಲ್ಕ್ ಬ್ಲಾಗ್ /a>
ಇಲ್ಲಿ ನಾವು Vijayanagar balc blog
ಲಿಂಕ್ ಅನ್ನು ಉದಾಹರಣೆಯಾಗಿ ತೆಗೆದುಕೊಂಡಿದ್ದೇವೆ.
ನೀವು ನಿಮಗೆ ಇಷ್ಟವಾಗುವ ವೆಬ್ಸೈಟ್ಗೆ ಲಿಂಕ್ ಕೊಡಬಹುದು.
ಚಿತ್ರಗಳ ಬಳಕೆ: ವೆಬ್ಸೈಟ್ನ ಅಂದ ಹೆಚ್ಚಿಸಲು ಚಿತ್ರಗಳ ಪಾತ್ರ ಮಹತ್ವದ್ದಾಗಿದೆ.
ನೀವು ವೆಬ್ ಸೈಟ್‌ನಲ್ಲಿ ಚಿತ್ರ ಬಳಕೆ ಮಾಡಲು <img> ಎಂಬ ಟ್ಯಾಗ್ ಬಳಸಬೇಕು.
ಇದರೊಂದಿಗೆ ಸೋರ್ಸ್ ಫೈಲ್ (src),
ಪರ್ಯಾಯ ಅಕ್ಷರ (alt),
ಅಗಲ ಮತ್ತು ಎತ್ತರವನ್ನು
(width, and height )
ಅಟ್ರಿಬ್ಯುಟ್ಸ್ ಆಗಿ ನೀಡಬೇಕು.
ನೋಟ್ಪ್ಯಾಡ್ನಲ್ಲಿ ನೀವು ಈ ಹಿಂದೆ ಬರೆದ ಕೋಡ್ನ
ಜೊತೆಗೆ ಈ ಕೆಳಗಿನ ಕೋಡ್ ಸೇರಿಸಿ.
<img src="nimmaimagehesaru.jpg" alt=" http://www.vijayanagarabalc.com" width="104" height="142">ಇಲ್ಲಿ ವಿಜಯನಗರ ಬಾಲ್ಕ್ ವೆಬ್ಸೈಟ್ ವಿಳಾಸದ ಸ್ಥಳದಲ್ಲಿ ನೀವು ಚಿತ್ರ ಇರುವ ವೆಬ್ಸೈಟ್ ಹೆಸರು ಬರೆಯಬಹುದು.
ಬಟನ್ ಗಳು:ಇಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡಿ, ಇಲ್ಲಿ ಒತ್ತಿರಿ ಇತ್ಯಾದಿ ಬಟನ್ಗಳನ್ನು ವೆಬ್ಸೈಟ್ಗಳಲ್ಲಿ ನೀವು ನೋಡಿರಬಹುದು. ಇಂತಹ ಬಟನ್ ರಚಿಸಲು ನೋಟ್ಬುಕ್ನಲ್ಲಿ ನೀವು ಈ ಕೋಡ್ ಬರೆಯಿರಿ.
ಎಚ್ಟಿಎಂಎಲ್ ಕೋಡ್: <button>Click me</button>
ಲಿಸ್ಟ್: ಇದೇ ರೀತಿ ಲಿಸ್ಟ್ಗಳನ್ನು ರಚಿಸಬೇಕಾದರೆ ಆರಂಭದಲ್ಲಿ <li>
ಮತ್ತು ಅಂತ್ಯದಲ್ಲಿ </li> ಕೋಡ್ ಬಳಸಬೇಕು. ಫಾಂಟ್ ಬಳಕೆ, ಬಣ್ಣ ಬಳಕೆ, ಟೇಬಲ್ ಬಳಕೆ … ಹೀಗೆ ಕಲಿಯಲು ಇನ್ನೂ ಸಾಕಷ್ಟು ಸಂಗತಿಗಳು ಇವೆ.
ಅಬ್ಬಾ ಒಂದೇ ತರಗತಿಯಲ್ಲಿ ಎಷ್ಟೊಂದು ವಿಷಯ ಕಲಿತಿರಿ ಅಲ್ವೇ? ಹಾಗಾದರೆ, ನೀವು ವಿಜಯನಗರ ಬಾಲ್ಕ್ ಸಂಸ್ಥೆಯಲ್ಲಿರುವ ವೆಬ್ ಡಿಸೈನಿಂಗ್, ಸಿಪ್ಲಸ್ಪ್ಲಸ್ , ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ಪೈಥಾನ್ ಇತ್ಯಾದಿ ಕೋರ್ಸ್ಗಳಿಗೆ ಸೇರಿದರೆ ಎಷ್ಟೊಂದು ಕಲಿಯಬಹುದು ಅಲ್ವೆ? ಇನ್ನೇಕೆ ತಡ, ಹೆಚ್ಚಿನ ವಿವರ ಪಡೆಯಲು ಇಲ್ಲಿ ಕ್ಲಿಕ್ ಮಾಡಿ.
