এই অধ্যায়ে আমরা কিছু প্রাথমিক HTML উদাহরণ দেখাবো।
চিন্তা করবেন না, আপনি যদি HTML ট্যাগ না বুঝেই ব্যবহার করে থাকেন, তবে বুঝবেন ।
এইচটিএমএল ডকুমেন্টস
সমস্ত এইচটিএমএল ডকুমেনট অবশ্যই শুরু করতে হবে <!DOCTYPE html> দিয়ে ।
প্রত্যেকটি এইচটিএমএল ডকুমেন্ট নিজেই <html> দিয়ে শুরু হয় এবং </ html> দিয়ে শেষ হয়।
এইচটিএমএল ডকুমেন্টের দৃশ্যমান অংশটি <body> এবং </body> এর মধ্যে থাকে।
<!DOCTYPE html> <html> <body> <h1>আমার প্রথম হেডিং</h1> <p>আমার প্রথম প্যারাগ্রাফ.</p> </body> </html>
<!DOCTYPE> ডিকলারেশন
<!DOCTYPE> ডকুমেন্টের ডিকলারেশন অর্থাৎ এটি কোন ধরনের ডকুমেন্ট সেটা উপস্থাপন করে এবং ওয়েব ব্রাউজার কে সঠিক ভাবে ওয়েব ডকুমেন্ট টি দেখানোর জন্য সাহায্য করে ।
এটি কেবলমাত্র একবার প্রদর্শিত হবে পৃষ্ঠার শুরুতে ( HTML ট্যাগের আগে) ।
<!DOCTYPE> ডিকলারেশন কেস সেনসেটিভ না । আপনি চাইলে ছোট অক্ষরে ও অর্থাৎ <!doctype> লিখতে পারেন । এবং এটি HTML5 নির্দেশ করে ।
<!DOCTYPE html>
এইচটিএমএল শিরোনাম বা হেডিং
এইচটিএমএল শিরোনাম বা হেডিং গুলোকে <h1> থেকে <h6> ট্যাগ দিয়ে সংজ্ঞায়িত করা হয়।
<h1> সর্বাধিক গুরুত্বপূর্ণ শিরোনামকে সংজ্ঞায়িত করে। <h6> সর্বাধিক গুরুত্বপূর্ণ শিরোনামটি সংজ্ঞায়িত করে:
<h1>This is a heading tag</h1> <h2>This is a heading tag</h2> <h3>This is a heading tag</h3> <h4>This is a heading tag</h4> <h5>This is a heading tag</h5> <h6>This is a heading tag</h6>
এইচটিএমএল অনুচ্ছেদ বা প্যারাগ্রাফ
এইচটিএমএল অনুচ্ছেদগুলি <p> ট্যাগ দিয়ে সংজ্ঞায়িত করা হয় :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Paragraph Example </title>
</head>
<body>
<p>
This is just a p tag to show some paragraph in
this web page. Now I am learning HTML p tag to write some paragraph
in this web page. Later on I will learn some more tag to
create my own website.
</p>
</body>
</html>এইচটিএমএল লিঙ্ক
এইচটিএমএল লিঙ্ক <a> ট্যাগ দিয়ে সংজ্ঞায়িত করা হয়। এটি ওয়েব পেজে এক পেজের সাথে অন্য পেজের সম্পর্ক তৈরি করে ।
<a href="https://kivabe.com">kivabe</a>
উপরের কোড টি একটু ভালো করে দেখুন । এবার শুধু <a> না হয়ে হয়েছে <a href=”https://kivabe.com”> এবং এখানে href এটি একটি এট্রিবিউট এবং এর ভেলু হচ্ছে https://kivabe.com .
আপনি পরবর্তী অধ্যায়ে বৈশিষ্ট্যগুলি বা এট্রিবিউট সম্পর্কে আরও শিখবেন।
এইচটিএমএল চিত্র বা ছবি
HTML চিত্রগুলি <img> ট্যাগ দিয়ে সংজ্ঞায়িত করা হয়।
<!DOCTYPE html>
<html>
<head>
<title>Show Image in HTML </title>
</head>
<body>
<h1>A new Image</h1>
<img src="https://kivabe.com/wp-content/uploads/2017/04/img-tag-in-html.jpg" alt="My image">
</body>
</html>img tag এর এট্রিবিউট হিসেবে src ও alt আছে এবং এর কোন ক্লোজিং ট্যাগ নেই । src বলে দেয় ওয়েব পেজে কোন ইমেজ টি দেখানো হবে অর্থাৎ ইমেজ ফাইল পাথ ঠিক করে দেয় src attribute. আর alt বলে দেয় ইমেজটি কোন করানে না দেখালে সেখানে কি লেখা থাকবে ।
অনেকেই ইমেজ বা ফাইল এর পাথ ঠিক করতে গিয়ে ভুল করে বসেন । তাই দেখে নিন এই টিউটোরিয়াল টি : https://youtu.be/qMnzoGOk_F0
HTML Source Code দেখুন
HTML Source Code হলো ওয়েব পেজ টি যে যে HTML Element বা ট্যাগ নিয়ে কোড করে হয়েছে সেগুলো দেখা । ওয়েব ব্রাউজার এ প্রতিটি ওয়েব পেজের এইচটিএমএল কোড চলে যায় এবং সেগুলো সাধারনত দেখাও যায় ।
পেজের উপর রাইট ক্লিক করে “View Page Source” এ ক্লিক করলে পেজ সোর্স পেয়ে যাবেন । একই কার “Ctrl + U” চেপেও করা যায় ।
কোন কোন ওয়েব সাইট তাদের কন্টেট এর নিরাপত্তার জন্য “View Page Source” বা “Ctrl + U” বন্ধ করে রাখে ।
আর ওয়েব পেজের যে কোন কনটেন্ট এর উপর রাইট ক্লিক করে Inspect এ ক্লিক করে কোড ইন্সপেক্ট করা হয় । নিচের ভিডিওটিতে আরো বিস্তারিত বুঝতে পারবেন ।