বর্তমানে একজন অতি সাধারণ মানুষেরও একটি নিজস্ব ওয়েব সাইট থাকে।
এইচটিএমএল এর মাধ্যমে আপনি আপনার এই নিজস্ব ওয়েবসাইটটি তৈরি করতে পারবেন।
আমাদের এই টিউটোরিয়ালটি আমরা খুবই সহজভাবে উপস্থাপন করেছি যেন আপনিও খুব সহজেই পুরো এইচটিএমএল শিখতে পারেন এবং নিজের ওয়েবসাইটটি তৈরি করতে কোন ডেভেলপার ভাড়া না করে নিজেই করতে পারেন।
এইচটিএমএল শেখা খুবই সহজ এবং আশা করি আপনি আমাদের এই টিউটোরিয়ালটি উপভোগ করবেন।
আমাদের প্রতিটি পরিচ্ছেদে আছে অসংখ্য উদাহরণ সেকশন। আপনি উদাহরণ সেকশনে মাউস নিয়ে গেলে উপরের কোণায় কোড copyকরার একটি অপশন দেখতে পাবেন। copyঅপশনে মাউস ক্লিক করলে ক্লিপবোর্ডে কোড কপি হবে।
আপনি আপনার এডিটর ওপেন করে copy করা কোড paste করতে পারবেন। এছাড়া উদাহরণ সেকশনের নিচে উদাহরণের ফলাফলও দেখানো হয়েছে।
উদাহরণ
<!DOCTYPE html> <html> <head> <title>এইচটিএমএল উদাহরণ</title> </head> <body> <h1>এটি একটি হেডিং</h1> <p>এটি একটি প্যারাগ্রাফ।</p> </body> </html>
Copy
ফলাফল
এইচটিএমএল পরিচিতি
ভার্সনসনএইচটিএমএল১৯৯১এইচটিএমএল(২.০)১৯৯৫এইচটিএমএল(৩.২)১৯৯৭এইচটিএমএল(৪.০১)১৯৯৯এক্সএইচটিএমএল২০০০এইচটিএমএল(৫)২০১৪
এইচটিএমএল
ওয়েব ডকুমেন্টকে বর্ণনা করার জন্য এইচটিএমএল হলো একটি মার্কআপ ল্যাঙ্গুয়েজ।
HTML এর পূর্নরূপঃ Hyper Text Markup Language।
মার্কআপ ল্যাঙ্গুয়েজ বলতে একগুচ্ছ মার্কআপ ট্যাগকে বুঝায়।
এইচটিএমএল ট্যাগ দিয়ে এইচটিএমএল ডকুমেন্ট তৈরি করা হয়।
এইচটিএমএল পেজের গঠন
নিচে একটি এইচটিএমএল পেজের গঠন দেখানো হলোঃ
<html>
<head>
<title>পেজ টাইটেল</title>
</head>
<body>
<h3>ডকুমেন্ট হেডিং</h3>
<p>এইচটিএমএল প্যারাগ্রাফ।</p>
<img src="URL" alt="Some_text" style="width:100px; height:1000px;">
</body>
</html>
শুধুমাত্র <body> সেকশনের কন্টেন্ট ব্রাউজারে প্রদর্শিত হয়।
একেবারেই সাধারণ একটি এইচটিএমএল ডকুমেন্ট
উদাহরণ
<!DOCTYPE html> <html> <head> <title>পেজ টাইটেল</title> </head> <body> <h3>স্যাট একাডেমী</h3> <img src="../images/satt.png" alt="SATT Academy" height="142" width="142"> </body> </html>
Copy
ফলাফল
উপরের উদাহরণের বিস্তারিত বর্ণনাঃ
ডকুমেন্টের টাইপ সেট করতে <!DOCTYPE html> ডিক্লেয়ার করা হয়। এটি এইচটিএমএল এর সর্বশেষ ভার্সন HTML5 কে নির্দেশ করে।
<html> এবং </html> ট্যাগের মাঝের কন্টেন্টগুলো এইচটিএমএল ডকুমেন্টকে বর্ণনা করে।
<head> এবং </head> ট্যাগের মাঝের কন্টেন্টগুলো এইচটিএমএল ডকুমেন্টের জন্য অতিরিক্ত তথ্য সরবরাহ করে।
<title> এবং </title> ট্যাগের মাঝের টেক্সট ডকুমেন্টের টাইটেল/নাম সেট করে।
<body> এবং </body> ট্যাগের মাঝের কন্টেন্টগুলো ওয়েব পেজে প্রদর্শিত হয়।
<h3> এবং </h3> ট্যাগ ডকুমেন্টের একটি হেডিং/শিরোনাম তৈরি করে। হেডিং ট্যাগ কন্টেন্ট এর গুরুত্ব আরোপ করে।
<img> ট্যাগ এর মাধ্যমে ব্রাউজারে বিভিন্ন টাইপের ইমেজ/চিত্র প্রদর্শিত হয়।
এইচটিএমএল ট্যাগ
এইচটিএমএল ট্যাগ সচরাচর জোড়ায়-জোড়ায় থাকে। যেমন <p> এবং </p>।
জোড়ার প্রথম ট্যাগকে ওপেনিং ট্যাগ এবং দ্বিতীয় ট্যাগকে ক্লোজিং ট্যাগ বলা হয়।
ক্লোজিং ট্যাগকে ওপেনিং ট্যাগের মতই লেখা হয়, ক্লোজিং ট্যাগের ক্ষেত্রে ট্যাগের নামের আগে শুধুমাত্র একটি ফরওয়ার্ড স্ল্যাশ(/) দিতে হয়।
<!DOCTYPE>ডিক্লেয়ারেশন
<!DOCTYPE> ডিক্লেয়ারেশন ডকুমেন্টের টাইপ সেট করে এবং একটি ওয়েব পেজকে সঠিকভাবে ব্রাউজারে দেখাতে সাহায্য করে।
যেকোনো ওয়েব ডকুমেন্টের এটাই প্রথম ট্যাগ অর্থাৎ সকল এইচটিএমএল ট্যাগের পূর্বে এই ট্যাগটি শুধুমাত্র একবারই লিখতে হয়।
বিভিন্ন ধরনের ডকুমেন্ট টাইপ ও ভার্সন রয়েছে। তাই ওয়েব পেজকে সঠিকভাবে দেখানোর জন্য ব্রাউজারকে টাইপ ও ভার্সন দুটিই জানাতে হয়।
DOCTYPE ডিক্লেয়ারেশন কেস-সেন্সিটিভ নয়। এতে ছোট এবং বড় উভয় ধরনের অক্ষরই গ্রহনযোগ্য।
<!DOCTYPE html> <!doctype HTML>
Copy
এইচটিএমএলের বিভিন্ন ভার্সনে <!DOCTYPE>ডিক্লেয়ারেশনঃ
এইচটিএমএল(৫)
<!DOCTYPE html>
Copy
এইচটিএমএল(৪.০১)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Copy
এক্সএইচটিএমএল(১.০)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Copy
0 comments: