HTML:
সাধাৰণ ৱেব পৃষ্ঠা নিৰ্মাণ,
ছবি আৰু লিংক
🔷 ১. HTML
পৰিচয়
HTML (HyperText Markup Language) হৈছে ইণ্টাৰনেটৰ পৃষ্ঠাবোৰ (web
pages) বনাবলৈ ব্যৱহাৰ কৰা মূল ভাষা।
- HTML
এটা
markup
language — ই content ৰ গঠন (structure) জনায়।
- ইয়াৰ সহায়ত বিভিন্ন element বা tag ব্যৱহাৰ কৰি কন্টেন্টৰ ৰূপ আৰু বিন্যাস নিৰ্ধাৰণ কৰা হয়।
🔷 ২. HTML
পৃষ্ঠাৰ মূল গঠন
এটা সাধাৰণ HTML ডকুমেন্টৰ গঠন এনেকুৱা:
<!DOCTYPE
html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a simple HTML page.</p>
</body>
</html>
ব্যাখ্যা:
- <!DOCTYPE
html>: HTML5 ৰ নিৰ্দেশ।
- <html>:
সমগ্ৰ HTML ডকুমেন্টৰ মূল টেগ।
- <head>:
শিৰোনাম আৰু অন্যান্য তথ্য সংৰক্ষণ কৰে।
- <title>:
ৱেব পৃষ্ঠাৰ নাম,
ব্ৰাউজাৰৰ টেবত দেখা যায়।
- <body>:
প্ৰদৰ্শনযোগ্য অংশ (text, image, link) থাকে।
🔷 ৩. পাঠ্য (Text)
ফৰ্মেটিং টেগসমূহ
|
টেগ |
কাৰ্য |
|
<h1> to <h6> |
শিৰোনাম, <h1> ডাঙৰ আৰু <h6> সৰু |
|
<p> |
অনুচ্ছেদ |
|
<b> / <strong> |
দুডো টেগে bold কৰায় |
|
<i> / <em> |
italic লিখা |
|
<u> |
underline |
|
<br> |
নতুন লাইন |
|
<hr> |
অনুভূমিক ৰেখা |
উদাহৰণ:
<p>This
is <strong>important</strong> and <em>emphasized</em>
text.</p>
🔷 ৪. সাধাৰণ ৱেব পৃষ্ঠা বনোৱা
ধাপ:
1.Notepad,
VS Code আদি editor খোলক।
2.HTML
কোড লিখক।
3..html
extension লৈ ছেভ কৰক (যেনে: index.html)।
4.ফাইলটো browser-ত খোলক।
🔷 ৫. HTML-ত ছবি সংযোগ
ছবি যোগ কৰিবলৈ
<img>
টেগ ব্যৱহাৰ কৰা হয়।
গঠন:
<img
src="image.jpg" alt="ছবিৰ বৰ্ণনা" width="300" height="200">
- src:
ছবিৰ ফাইলপথ
- alt:
ছবিখন দেখা নপালে এই লেখা দেখায়
- width
আৰু
height:
ছবি কিমান ডাঙৰ হ’ব
উদাহৰণ:
<img
src="nature.jpg" alt="প্ৰকৃতিৰ ছবি" width="500" height="300">
📌 টিপ:
<img>
টেগটো self-closing
হয়, ইয়াৰ শেষ টেগ নাই।
🔷 ৬. HTML-ত লিংক সংযোগ
হাইপাৰলিংক বা লিংক বানাবলৈ
<a>
(anchor) টেগ ব্যৱহাৰ হয়।
গঠন:
<a
href="https://www.example.com">Example Website</a>
- href:
য’ত লিংক কৰা হৈছে।
- ভিতৰৰ টেক্সটটো ক্লিকযোগ্য।
উদাহৰণ:
<a
href="https://www.google.com" target="_blank">Google খুলক</a>
- target="_blank":
নতুন টেবত লিংক খোলক।
🔷 ৭. লোকেল (স্থানীয়) লিংক আৰু ছবিৰ লিংক
স্থানীয় ফাইল লিংক:
<a
href="about.html">আমাৰ বিষয়ে</a>
ছবিকো লিংকৰ ৰূপে ব্যৱহাৰ:
<a
href="https://www.wikipedia.org">
<img src="wiki.png" alt="Wikipedia"
width="100">
</a>
🔷 ৮. তালিকা (List)
HTML-ত
অশৃংখল তালিকা (Unordered):
<ul>
<li>গণিত</li>
<li>ভৌতবিজ্ঞান</li>
</ul>
শৃংখল তালিকা (Ordered):
<ol>
<li>প্ৰথম খোজ</li>
<li>দ্বিতীয় খোজ</li>
</ol>
🔷 ৯. মন্তব্য (Comments)
HTML-ত মন্তব্য লিখা যায় যি ইউজাৰক দেখা নাযায়।
<!--
এইটো মন্তব্য -->
🔷 ১০. ভাল প্ৰক্ৰিয়া (Best Practices)
✅ সকল HTML
টেগ small
letter ত লিখক।
✅ code readable কৰি indent
কৰক।
✅ ছবিত alt
ব্যৱহাৰ কৰক।
✅ center, font আদি অপ্ৰচলিত tag
এৰক।
✅ Link বা Image
ফাইলবোৰ একে ফোল্ডাৰত ৰাখক।
📌 চমু সাৰাংশ
|
বিষয় |
বৰ্ণনা |
|
HTML |
ৱেব কনটেন্টৰ গঠন দিবলৈ |
|
<img> |
ছবি দেখুৱাবলৈ |
|
<a> |
লিংক যোগ কৰিবলৈ |
|
<p>, <h1> |
Paragraph আৰু Heading টেগ |
|
Comments |
কোডৰ ভিতৰত মন্তব্য |
🔶 নমুনা সাধাৰণ ৱেব পৃষ্ঠা
<!DOCTYPE
html>
<html>
<head>
<title>মোৰ প্ৰথম ৱেব পৃষ্ঠা</title>
</head>
<body>
<h1>মই B.Sc (Maths) ৰ ছাত্ৰ!</h1>
<p>এইটো মোৰ প্ৰথম HTML পৃষ্ঠা।</p>
<img src="https://keralakonnect.com/web/image/product.product/207/image_1024/BSc%20Mathematics%20%28Calicut%20University%29?unique=cd1504a"
alt="গণিতৰ ছবি" width="400">
<p>অধিক জানিবলৈ তলত ক্লিক কৰক:</p>
<a href="https://xmguidance.blogspot.com/"_blank">Exam
Guidance</a>
</body>
</html>
Web
View
