HTML বাংলা টিউটোরিয়াল পর্ব-০২
এইচটিএমএল (HTML) এর ব্যাসিক গঠন (সিনট্যাক্স)
আসসালামু-আলাইকুম ।
আশা করি আপনারা সবাই ভাল আছেন। আজকে আমি আপনাদের মাঝে হাজির হলাম HTML বাংলা টিউটোরিয়াল পর্ব-০২ নিয়ে । এই সাইটের ফেসবুক পেইজে লাইক দিতে ভুলবেন না।
বাংলা টিউটোরিয়াল ফেসবুক পেজ
যারা আগের পর্ব দেখেন নাই তারা এখান থেকে দেখে নিতে পারেন।HTML বাংলা টিউটোরিয়াল পর্ব-০১
পর্ব-০২ এ যা যা পাবেন-
এইচটিএমএল (HTML) স্ট্রাকচার (Structure)
এইচটিএমএল (HTML) ট্যাগ
এইচটিএমএল (HTML) এলিমেন্ট
এইচটিএমএল (HTML) ডকুমেন্ট
এইচটিএমএল (HTML) এট্রিবিউট
এইচটিএমএল (HTML) ডকটাইপ
এইচটিএমএল (HTML) স্ট্রাকচার (Structure)
এইচটিএমএল (HTML) মূলত <html> ট্যাগ দিয়ে শুরু এবং </html> ট্যাগ দিয়ে শেষ হয়। সাধারণত এইচটিএমএল (HTML) এর গঠনকে দুই ভাগে ভাগ করা যায়। যথাঃ হেড (head) সেকশন এবং বোডি (body) সেকশন । হেড (head) সেকশন <head> ট্যাগ দিয়ে শুরু এবং </head> ট্যাগ দিয়ে শেষ হয়। বোডি (body) সেকশন <body> ট্যাগ দিয়ে শুরু এবং </body> ট্যাগ দিয়ে শেষ হয়। দুটি সেকশনই এইচটিএমএল (HTML) ট্যাগের মধ্যে থাকতে হবে যেমন-
<html>
<head>
হেড অংশ
</head>
<body>
বোডি অংশ
</body>
</html>
এখন এমন একটি পেইজ তৈরি করবো যে পেইজে দেখাবে – Bangladesh is my motherland. চলুন শুরু করা যাক-
প্রথমে আপনি আপনার কম্পিউটারে একদম নিচে বামপাশের Start-এ ক্লিক করুন। সার্চ বক্সে notepad লিখুন এবং নিচের মত পেইজ আসলে উপরের notepad লেখায় ক্লিক করে notepad ওপেন করেন।
এখন নিচের কোডগুলো লিখুন।
<html>
<head>
<title>Webpage</title>
</head>
<body>
Bangladesh is my motherland.
<h1> Bangladesh is my motherland.</h1>
<h2> Bangladesh is my motherland.</h2>
</body>
</html>
এবার নোটপ্যাডের উপরের File লেখায় ক্লিক করলে কিছু option দেখতে পাবেন সেখান থেকে Save as লেখায় ক্লিক করুন। এবার নিচের ছবির মত পেইজ পাবেন।
এখন File name-এ index.html বা index.htm লিখুন এবং Save as type বক্সে All type (“”) সিলেক্ট করে save বাটনে ক্লিক করেন। এখানে ফাইলের লোকেশন হিসেবে Desktop দেওয়া আছে আপনি যেকোন জায়গায় সেভ করতে পারেন। এবার যেখানে সেভ করেছেন সেখানে গিয়ে যেকোন একটি ব্রাউজার দিয়ে file টি ওপেন করেন। ওপেন করতে না পারলে প্রথমে ফাইলটির উপর মাউসের রাইট বাটন ক্লিক করুন কিছু option আসবে এখান থেকে open as এ গিয়ে যেকোন একটি ব্রাউজার (Mozilla firefox,Google crome) সিলেক্ট করে ok দেন।
এবার ব্রাউজারে নিচের মত ছবি দেখতে পারবেন।
আউটপুটঃ
কোড বিশ্লেষনঃ
<html> এটি এইচটিএমএল এর ব্যাসিক গঠন। যেকোন এইচটিএমএল কোডিং এটি দিয়ে শুরু করতে হয়। <head> এটি হেড সেকশন শুরু। <title> এবং </title> এর মাঝে যা লেখা হবে তাই ব্রাউজারের উপরের বারের শিরনামে দেখাবে। এই লেখাটি আপনার পেইজটি কি সম্পর্কিত তাই হতে হবে। এতে আপনার পেইজকে গুগলের খুজে পেতে সহজ হবে। এছাড়া এখানে কিছু মেটা ট্যাগ ব্যবহার করা হয়।এসইও সম্পর্কে যখন শিখবেন তখন এখানকার মেটা ট্যাগগুলো সম্পর্কে বিস্তারিত জানতে পারবেন। <body> এটি বডি সেকশন শুরু। এখানে যা লেখা হবে তাই ব্রাউজারে দেখাবে।</body> এটি বডি সেকশন শেষ।
<h1> হচ্ছে হেডিং। h1 থেকে h6 পর্যন্ত হেডিং আছে যা পরে আলোচনা করা হবে। </html> এটি এইচটিএমএল শেষ।
মনে রাখবেন এইচটিএমএল কোডিং-এ প্রত্যেকটি ট্যাগ শেষ করতে হয় বাম এংগেল ব্র্যাকেট (<) এর পর স্লাশ (/) ব্যবহার করে । যেমন- শুরু <html> শেষ </html> , শুরু<title> শেষ </title> , শুরু <body> শেষ </body> । এছাড়া কিছু ট্যাগ আছে যাদের শেষ ট্যাগ নেই। যেমন- <br>,<hr> ইত্যাদি।
এখন আপনি I live in Bangladesh, Bangladesh is a beautiful country, I love my country very much. এসব লেখা ব্রাউজারে দেখানোর চেষ্টা করুন। যত বেশি সম্ভব চর্চা করুন।
এইচটিএমএল (HTML) ট্যাগ
এইচটিএমএল এর আত্মা বা প্রান বলতে পারেন এইচটিএমএল ট্যাগকে। আত্মা ছাড়া যেমন মানুষ বাঁচতে পারে না এইচটিএমএলও তেমনি এইচটিএমএল ট্যাগ ছাড়া কিছুই করতে পারে না। প্রত্যেক ট্যাগকে বাম এংগেল ব্র্যাকেট (<) দিরে শুরু এবং ডান এঙ্গেল ব্র্যাকেট (>) দিয়ে শেষ করতে হয়। এদের মাঝখানে থাকে কিও্য়ার্ড। যেমন- <html> ,<title>, <head>, <body>.
এইচটিএমএল যেহেতু Case Sensetive নয় তাই আপনি Capital Letter ব্যাবহার করতে পারেন। তবে Small Letter ব্যবহার করাই ভাল । এইচটিএমএল কোডিং-এ প্রত্যেকটি ট্যাগ শেষ করতে হয় বাম এংগেল ব্র্যাকেট (<) এর পর স্লাশ (/) ব্যবহার করে । যেমন- শুরু <html> শেষ </html> , শুরু<title> শেষ </title> , শুরু <body> শেষ </body> ।
এইচটিএমএল (HTML) এলিমেন্ট
এইচটিএমএল (HTML) এলিমেন্ট মূলত এইচটিএমএল (HTML) ট্যাগ দিয়েই গঠিত হয়। অনেকেই ট্যাগ এবং এলিমেন্টের মধ্যে পার্থক্য কি বুঝতে পারে না। সহজে বুঝার জন্য আমি একটা উদাহরণ দিচ্ছি-
কোন প্যারাগ্রাফ লিখতে হলে আমাদের <p> দিয়ে শুরু এবং </p> দিয়ে শেষ করতে হয়। <p> এবং </p> মিলেই হলো এলিমেন্ট আর <p>, </p> এক একটি ট্যাগ। আশা করতেছি আপনাদের আর এটা বুঝতে সমস্যা হবে না। এইচটিএমএল-এ অনেক এলিমেন্ট রয়েছে। এদের মধ্যে html,head,title,body বেশি গুরত্বপূর্ণ। তবে এদের ব্যবহারের কিছু নিয়ম আছে তা হলো-
স্টার্ট বা ওপেনিং ট্যাগ দিয়ে শুরু করতে হবে ।
এন্ডিং বা ক্লোজিং ট্যাগ দিয়ে শেষ করতে হবে।
স্টার্ট ও ক্লোজিং ট্যাগ এর মাঝে কিওয়ার্ড ব্যবহার করতে হবে।
তবে কিছু ট্যাগের ক্লোজিং ট্যাগ নেই। যেমন- <br>, <hr>
এইচটিএমএল (HTML) ডকুমেন্ট
এইচটিএমএল এলিমেন্ট দিয়ে আমরা যে ওয়েব পেইজ বানাই আসলে সেটাই হল ডকুমেন্ট। ডকুমেন্টকে অবশ্যই .html or htm দিয়ে save করতে হয়। অন্যথায় এটি কাজ করবে না।
এইচটিএমএল (HTML) এট্রিবিউট
এইচটিএমএল এ কোন লেখা,ইমেজ ইতাদির অবস্থান নির্দিষ্ট করে দেওয়ার জন্য কিছু ওয়ার্ড ব্যবহার করা হয় তাকেই মূলত এট্রিবিউট বলা হয়। সহজভাবে বলা যায় কোন লেখা বা ইমেজকে বামে বা ডানে বা মাঝখানে রখার জন্য যে ওয়ার্ড ব্যবহার করি তাই হচ্ছে এট্রিবিউট। যেমন-
<html>
<head>
<title>Webpage</title>
</head>
<body>
<h1 align="left">Bangladesh is my motherland.</h1>
</body>
</html>
এটি সেভ করে ব্রাউজারে রান করালে লেখা বামে দেখাবে ।
আউটপুটঃ
উদাহরণঃ
<html>
<head>
<title>Webpage</title>
</head>
<body>
<h1 align="center">Bangladesh is my motherland.</h1>
</body>
</html>
এটি সেভ করে ব্রাউজারে রান করলে লেখা মাঝখানে দেখাবে।
আউটপুটঃ
উদাহরণঃ
<html>
<head>
<title>Webpage</title>
</head>
<body>
<h1 align="right">Bangladesh is my motherland.</h1>
</body>
</html>
এটি সেভ করে ব্রাউজারে রান করলে লেখা মাঝখানে দেখাবে।
আউটপুটঃ
এইচটিএমএল (HTML) ডকটাইপ
কোন ওয়েব সাইটের Souce code দেখলে দেখতে পাওয়া যায় কোডিং এর শুরুতে <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> লেখাটি থাকে। এটিকে বলে Doctype । এটি মূলত ফাইলটি কোন ধরনের , কোন ভাষায় লেখা, কততম ভার্সন তা নির্দেশ করে। এর ফলে ব্রাউজার সহজেই আপনার এইচটিএমএল কে ইন্টারপ্রেট করতে সক্ষম। এটি ব্যবহার করলে ব্রাউজার খুব দ্রুত আপনার ফাইল সম্পর্কে বুঝতে পারে । তাই এইচটিএমএল (HTML)-এ ডকটাইপ খুব দরকারি।
আপনি যতটুকু শিখবেন তা সবার মাঝে ছড়িয়ে দেওয়ার চেষ্টা করুন। এই পর্বে কোন বিষয়ে বুঝতে সমস্যা হলে কমেন্ট করুন। আমার পক্ষে যতটুকু সম্ভব সমাধান করার চেষ্টা করব। পেইজটি শেয়ার করতে ভুলবেন না। নিজে জানুন এবং অন্যকে জানাতে সাহায্য করুন। নিচে শেয়ার করার জন্য বিভিন্ন অপশন আছে যেমন ফেসবুক, টুইটার, গুগল প্লাস ইত্যাদি।
আজ আর নয়। আগামি পর্বে আলোচনা করবো বডি সেকশন নিয়ে। পরের পর্বের আমন্ত্রণ জানিয়ে আজকের মত বিদায় বন্দুরা।
ধন্যবাদ সবাইকে।
HTML বাংলা টিউটোরিয়াল পর্ব-০২
HTML বাংলা টিউটোরিয়াল পর্ব-০৩
HTML বাংলা টিউটোরিয়াল পর্ব-০৪
HTML বাংলা টিউটোরিয়াল পর্ব-০৫
HTML বাংলা টিউটোরিয়াল পর্ব-০৬
HTML বাংলা টিউটোরিয়াল পর্ব-০৭
HTML বাংলা টিউটোরিয়াল পর্ব-০৮
HTML বাংলা টিউটোরিয়াল পর্ব-০৯
HTML বাংলা টিউটোরিয়াল পর্ব-১০
HTML বাংলা টিউটোরিয়াল পর্ব-১১
HTML বাংলা টিউটোরিয়াল পর্ব-১২
HTML বাংলা টিউটোরিয়াল পর্ব-১৩
No comments:
Post a Comment