Sunday , 15 September 2019
Home » Tag Archives: web design tutorial

Tag Archives: web design tutorial

HTML বাংলা টিউটোরিয়াল(পর্ব-৫)Elements in HTML.

হ্যালো বন্ধুরা,

আসসালামু আলাইকুম

মাইরেভিনিউয়ার্স এইচটিএমএল বাংলা টিউটোরিয়াল এর ৫ম পর্বে আপনাদের সবাইকে স্বাগতম ,সবাই কেমন আছেন আশা করি ভাল আছেন,আজকে আমাদের এইচটিএমএল টিউটোরিয়াল এর ৫ম পর্ব আর আজকের পর্বে আমরা আলোচনা করব এইচটিএমএল এর ইলিমেন্ট সম্পর্কে।তাহলে চলুন শুরু করে দেই আজকের আলোচনাঃ

১)এইচটিএমএল ইলিমেন্ট-

ইলিমেন্ট বলতে যখন এইচটিএমএল এর কোন ট্যাগ এর পরিপূর্ণ ব্যবহার হয়, তখন ঐ পুরো ট্যাগ এর ব্যবহারকে একটি
ইলিমেন্ট বলে। যেমন ঃ- <p> একটি ট্যাগ। যখন এই p ট্যাগটির সম্পূর্ণ ব্যবহার হবে, তখন পুরো বিষয়টি মিলে এটি হবে p ইলিমেন্ট।

<p> This is Paragraph Text </p>

১) এখানে <p> ওপেনিং ট্যাগ

২) ) This is Paragraph Text– হচ্ছে p ট্যাগ এর কনটেন্ট

৩) এবং </p> হচ্ছে ক্লোজিং ট্যাগ
এখন এই পুরো বিষয়টি মিলে এটিকে বলা হবে < p > ইলিমেন্ট।
নিচে আরো কিছু উদাহরণ এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক –

ইলিমেন্ট এর গঠন

১) ওপেনিং ট্যাগ দিয়ে শুরূ হতে হবে
২) ক্লোজিং ট্যাগ ব্যবহার করে শেষ করতে হবে
৩) ওপেনিং এবং ক্লোজিং ট্যাগ এর ভিতর অন্যান্য ট্যাগ/ইলিমেন্ট অথবা কনটেন্ট থাকবে
৪) এম্পটি ইলিমেন্টকে (যেমন ঃ – hr, br, img ইত্যাদি) ওপেনিং ট্যাগ এর ভিতরই ক্লোজ করতে হবে (< hr/>, < br />,<img src=html.jpg” />)।
৫) প্রায় সকল ইলিমেন্ট এর মধ্যেই অ্যাট্রিবিউট ব্যবহার হতে পারে। যেমন ঃ- <body>, < img>, < a>< abbr > ইত্যাদি।

নেষ্টেড এইচটিএমএল ইলিমেন্ট

প্রতিটি এইচটিএমএল ডকুমেন্ট/পেইজ অসংখ্য ইলিমেন্ট এর সমন্বয়ে গঠিত। এইচটিএমএল এর প্রায় প্রতিটি ইলিমেন্ট অপর কোন ইলিমেন্টকে ধারণ করে এবং যখন কোন ইলিমেন্ট অপর কোন ইলিমেন্টকে ধারণ করে থাকে, তখন পুরো বিষয়টিকে Nested Element (একাধিক ইলিমেন্ট এর ব্যবহার) বলা হয়ে থাকে। নিচে কিছু উদাহরণ এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক।

এখানে <head> element <body>,h1 and <p> কে ধারন করেছে

এইচটিএমএল এর প্রধান ইলিমেন্টসমূহ

প্রতিটি এইচটিএমএল পেইজ তৈরিতে প্রধান চারটি ইলিমেন্ট ব্যবহৃত হয়, যেগুলো না হলেই নয়। এই ইলিমেন্টগুলো হলো ঃ

১-<html>

2-<head>

3-<title>

4-<body>

<html> Element

কোন এইচটিএমএল ডকুমেন্ট/পেইজ এর প্রধান ইলিমেন্ট হল এই < html > ইলিমেন্ট। এইচটিএমএল পেইজের সমস্ত ইলিমেন্ট/কনটেন্ট এই ইলিমেন্ট এর মধ্যে অবস্থান করে (! DOCTYPE বাদে)। এইচটিএমএল এর ওপেনিং ট্যাগকে সবার প্রথমে (! DOCTYPE এর পরে) এবং ক্লোজিং ট্যাগকে সবার শেষে লিখতে হয়। এক্ষেত্রে আমরা কোন ওয়েবপেজের সোর্স কোড ( Source Code) দেখেও বিষয়টি সম্পর্কে পরিস্কার হতে পারি।

source কোড দেখা

কোন ওয়েবপেজের সোর্স কোড দেখার জন্য প্রথমে ওয়েবপেজের যে কোন জায়গায় মাউসের ডান বাটন ক্লিক করূন।অতঃপর আগত অপশনগুলো থেকে “View Page Source” লেখাটির উপর ক্লিক করূন।

চিত্রঃ view page source এ ক্লিক করা

এবার আপনার সোর্চ কোড টি নিচের চিত্রের মত চলে আসবে।

চিত্রঃ ওয়েব পেইজ এর সোর্স কোড দেখা

< head> Element

কোন ওয়েবপেজের শিরোনাম, ওয়েবপেজ সংক্রান্ত বিভিন্ন তথ্যাবলি, বিভিন্ন CSS (Cascading Style Sheet) Style, Javascript কোড < head > ইলিমেন্ট এর ভিতর লিখতে হয়। < head > ইলিমেন্টকে <html> ওপেনিং ট্যাগ এর পরে-শুরূ এবং < body > এর ওপেনিং ট্যাগ শুরূ হওয়ার পূর্বে-শেষ করতে হয় এবং <head> ইলিমেন্ট এর ওপেনিং এবং ক্লোজিং ট্যাগ (<head>….<head> ) এর ভিতর <head> ইলিমেন্ট এর অন্যান্য ইলিমেন্ট,উপাদান(<title>, <meta>, < base> ইত্যাদি) লিখতে হয়। নিচে একটি উদাহরণ এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক ঃ

চিত্রঃ <head> element এর ব্যবহার

হেড ইলিমেন্ট এর ভিত্রে ব্যবহৃত অন্যান্য এলিমেন্ট সমুহঃ

 <title>

 <style>

 <base>

 <link>

 <meta>

<script>

 <noscript>

<title>element

ওয়েবপেজ এর টাইটেল/শিরোনাম এর জন্য < title > ইলিমেন্টটি ব্যবহার করা হয়ে থাকে। টাইটেলকে (টাইটেল ইলিমেন্ট) কোন সম্পূর্ণ ওয়েবপেইজ উপস্থাপন করার মাধ্যম হিসেবেও আখ্যায়িত করা হয়। টাইটেল দেখে কোন একজন ভিজিটর বুঝতে পারেন যে, এটি আসলে কোন ধরণের ওয়েবসাইট। তাছাড়া, সার্চ ইঞ্জিন অপটিমাইজেশন (এসইও) এর ক্ষেত্রেও টাইটেল ইলিমেন্ট অত্যন্ত গুরূত্বপূর্ণ ভূমিকা পালন করে। ওয়েবপেজের টাইটেল ব্যবহারে বিভিন্ন কৌশল ব্যবহার করা যেতে পারে। আর ওয়েবসাইটে এমন বিভিন্ন কৌশল ব্যবহার করে ওয়েবসাইটকে সার্চ ইঞ্জিন রেজাল্টের শীর্ষে নিয়ে আসার জন্য আমাদের ‘‘সার্চ ইঞ্জিন অপটিমাইজেশন’’ টিউটোরিয়াল দেখে নিতে পারেন। কোন ওয়েবপেজের টাইটেল ব্রাউজারের সবার উপরে প্রদর্শিত হয়।

title element এর ব্যবহারঃ

Title ইলিমেন্টকে এইচটিএমএল পেইজের হেড সেকশন এর ভিতর লিখতে হয়।নিচে একটী চিত্রে দেখানো হল।

চিত্রঃuse of title element

চিত্রঃআউটফুট

<body>Element

আমরা কোন ওয়েবপেজের মধ্যে যা কিছু দেখতে পাই (ইমেজ, অডিও, ভিডিও, টেক্সট, লিংক ইত্যাদি), তা সব কিছুই এই < body > ইলিমেন্ট এর অন্তর্ভূক্ত। নিচে একটি উদাহরন এর মাধ্যমে বিষয়টি সম্পর্কে পরিস্কার হওয়া যাক –

চিত্রঃ<Body>ইলিমেন্ট এর উপাদানসমূহ


উপরের চিত্রে মার্ক করা প্রতিটি অংশ, অর্থাৎ কোন ওয়েবপেজে দৃশ্যমান সকল কিছুই < body > ইলিমেন্ট এর অন্তর্ভূক্ত।

< body >ইলিমেন্ট এর ব্যবহারঃ

< body > ইলিমেন্টকে এইচটিএমএল পেইজের < head > এর ক্লোজিং ট্যাগ (</head>) এর পরে-ওপেন এবং <html> এর ক্লোজিং ট্যাগ (</ html >) এর পূর্বে-ক্লোজ করতে হয় এবং ওয়েবপেজে প্রদর্শনের জন্য অন্যান্য সকল ইলিমেন্ট,কনটেন্টকে < body > ইলিমেন্ট এর ওপেনিং এবং ক্লোজিং ট্যাগ (<body> . . . . .</ body > ) এর ভিতর রাখতে হয়। নিচে একটি উদাহরণ এর মাধ্যমে বডি ইলিমেন্ট এর ব্যবহার দেখানো হলো ঃ

কোড বিশেষণ-

body ইলিমেন্ট এ অ্যাট্রিবিউট এর ব্যবহার

এইচটিএমএল এর বডি ইলিমেন্ট এ নিম্নোক্ত অ্যাট্রিবিউটগুলো ব্যবহৃত হয়ে থাকে।

 alink

 background

 bgcolor

 link

 text Ges

 vlink

alink

“active link” এর সংক্ষিপ্ত রূপ হচ্ছে “alink”. এই অ্যাট্রিবিউট ব্যবহার করে লিংকের কালার নির্ধারণ করে দেয়া হয়। ভিজিটর যখন ওয়েবপেজে ব্যবহৃত কোন লিংকের উপর ক্লিক করে, তখন এই অ্যাট্রিবিউটটি কাজ করে। অর্থাৎ,কোন লিংকের উপর ক্লিক করার সময় “alink” অ্যাট্রিবিউট এ ব্যবহার করা কালারটি প্রদর্শিত হবে।

Value :

alink অ্যাট্রিবিউটে value /মান হিসেবে Color নির্ধারণ করা হয়। এইচটিএমএল এ তিনভাবে কালার নির্ধারণ করা যায়।
১. Color name (কালার এর নাম ব্যবহার করে – যেমনঃ ” green “);
২. RGB (Red, Greeen & Blue) Code – RGB মান, যেমন ঃrgb (0,0,0) ) ব্যবহার করে
৩. . Hex (Hexadecimal) কোড ব্যবহার করে – যেমন ঃ- “#0000FF”।
এইচটিএমল কালার নিয়ে টিউটোরিয়াল পরবর্তীতে বিস্তারিত আলোচনা করা হবে।
লিখার নিয়ম ঃ
< body alink=”Color_name অথবা RGB_Code অথবা Hex_Code”>
নিচে alink অ্যাট্রিবিউট এর ব্যবহার দেখানো হলো ঃ

তাহলে বন্ধুরা আজকের পর্ব এখানেই শেষ করতেছি,ইনশাআল্লাহ আগামি পর্বে আমরা এইচটিএমএল এর ইলিমেন্নট নিয়ে আরো আলোচনা করব আরো এলিমেন্ট এর সাথে পরিচিত হব,সবাইকে আগামি পর্বের আমন্ত্রন জানিয়ে শেষ করছি আজকের পর্ব সবাই ভাল থাকবেন আল্লাহ হাফেজ।

HTML বাংলা টিউটোরিয়াল(পর্ব-৪),এইচটিএমএল এর ব্যাসিক আলোচনা -৩

হ্যালো বন্ধুরা

আসসালামু আলাইকুম

সবাই কেঅন আছেন ,আশাকরি ভাল আছেন আজকে আমি য়াপনাদের জন্য নিয়ে এসেছি HTML বাংলা টিউটোরিয়াল এর পর্ব ৪,চলুন আমরা দেখেনেই কী আছে আমাদের পর্ব ৪ এ-

১) HTML ফাইল এর ব্যাসিক গঠনঃ

এইচটিএমএল ফাইল এর একটি নিজস্ব বৈসশিষ্ট/গঠন পদ্ধতি রয়েছে। সেই গঠন/নিয়ম অনুসারে এইচটিএমএল ফাইল লিখতে হয়। এর বাইরে এইচটিএমএল ফাইল কাজ করবে না। নিচে একটি এইচটিএমএল ফাইল এর ব্যাসিক গঠন পদ্ধতি নিয়ে আলোচনা করা হল


চিত্র : HTML ফাইল এর ব্যাসিক গঠন।

HTML ফাইল শুরূ করতে হয় <HTML> ( HTML এর ওপেনিং ট্যাগ) দিয়ে, এবং শেষ করতে হয় <HTML>( html এর ক্লোজিং ট্যাগ) দিয়ে। এই html এর ওপেনিং এবং ক্লোজিং ট্যাগ এর মধ্যে আমাদের অন্যান্য সমস্ত ট্যাগ,কনটেন্ট থাকবে। html এর ওপেনিং এবং ক্লোজিং ট্যাগ এর মধ্যে প্রধান যে দু’টি সেকশন থাকবে, এগুলো হল ঃ head সেকশন এবং body সেকশন। head সেকশন এর ভিতর পেজ সম্পর্কে বিভিন্ন ইনফরমেশন, পেজ এর শিরোনাম,বিভিন্ন স্ক্রিপ্ট, স্টাইল ইত্যাদি বিষয়সমূহ যোগ করা হয়ে থাকে। head সেকশনকে body সেকশন শুরূ হওয়ার আগেই ক্লোজ করতে হবে। head সেকশন নিয়ে টিউটোরিয়াল এর পরবর্তীতে বিস্তারিত আলোচনা করা হবে। আর আমরা আমাদের ওয়েবপেজে যে সকল কিছু (টেক্সট, ইমেজ, ফ্ল্যাশ ইত্যাদি) দেখতে পাই, তার সবই body সেকশন এর মধ্যে উল্যেখ করতে হয়। এখানে আরো একটি বিষয় লক্ষ্যনীয় যে, যে ট্যাগ সবার আগে শুরূ হয়েছে, সেটি সবার পরে এসে শেষ
হয়েছে। এ সকল বিষয়গুলো আমরা টিউটোরিয়াল এর পরবর্তীতে প্র্যাকটিক্যালী দেখতে পাবো।

২) HTML এ প্রথম প্রোগ্রাম লেখাঃ

এতক্ষন আমরা এইচটিএমএল এর খুঁটিনাটি বিষয়গুলো সম্পর্কে জেনেছি। এখন এসকল বিষয়গুলো ব্যবহার করে
এইচটিএমএল এ আমরা আমাদের প্রথম প্রোগ্রাম লিখে তা ব্রাউজারে রান করে দেখবো। চলুন, তাহলে শুরূ করা যাক . .

খধাপ-১ ঃ নোটপ্যাড ওপেন কর

এজন্য প্রথমে আপনার কম্পিউটারের Start মেন্যু থেকে Run এ ক্লিক করূন।

চিত্রঃ Start >>>Run ক্লিক করা

অথবা, কী-বোর্ড থেকে ( win + r বাটন ) প্রেস করূন।

চিত্রঃ কিবোর্ড থেকে win+ r button press

এখন নিচের মতো একটি ডায়ালগ বক্স আসবে। এখন নিচের মতো একটি ডায়ালগ বক্স আসবে।

চিত্র : রান ডায়ালগ বক্স।

এবার Open এর পাশের টেক্সট ফিল্ডে ” notepad ” টাইপ করূন এবং Ok বাটনে ক্লিক করূন।

চিত্র : ২.৮.৪ (টেক্সট ফিল্ডে notepad টাইপ করে Ok বাটনে ক্লিক করা)।

তাহলে নিচের চিত্রের মতো একটি নোটপ্যাড ওপেন হবে।

চিত্রঃনোটপ্যাড ওপেন হওয়া

ধাপ- ২ ঃ এইচটিএমএল ফাইলে কোড লিখাঃ

এবার আগত নোটপ্যাডে নিচের মতো HTML কোড/ট্যাগ লিখি

চিত্রঃ Notepad এ HTML লিখা

ধাপ-৩ ঃ ফাইল সেভ করা

এবার ফাইলটিকে আমরা এইচটিএমএল ফরম্যাটে সেভ করবো। এজন্য প্রথমে ফাইল মেন্যু থেকে Save As……এ ক্লিক করি।

প্রথমে Save in এর পাশের ড্রপ-ডাউন লিস্ট থেকে এর লোকেশন, অর্থাৎ ফাইলটি কোথায় গিয়ে সংরক্ষিত হবে, তা ঠিক করে দিই। এবার ফাইলটির জন্য একটি নাম দিতে হবে এবং নামের শেষে অবশ্যই .html এক্সটেনশন ব্যবহার করতে হবে। নিচের মতো File name এর ঘরে আমাদের ফাইল এর জন্য একটি নাম লিখি।

চিত্রঃ html এক্সটেনশন ব্যবহারে করে এইচটিএমএল ফাইলের নাম লেখা।

এখানে একটি বিষয় লক্ষ্যনীয় যে, এইচটিএমএল ফাইল এর নামে কোন হোয়াইট স্পেস (” “) ব্যবহার করা যাবে না। হোয়াইট
স্পেস এর পরিবর্তে হাইফেন (“-“) অথবা আন্ডারস্কোর (“_”) ব্যবহার করতে পারেন।
এবার ঝধাব Save as type ফিল্ড হতে All Files সিলেক্ট করূন।

সবশেষে Save বাটনো ক্লিক করে ফাইলটি সেভ করূন।

ধাপ-৪ ঃ আউটপুট

এবার যে ফাইলটি কিছুক্ষন আগে সেভ করেছেন, সেটি কোন একটি ব্রাউজার দিয়ে ওপেন করূন। এজন্য ফাইলটির উপর মাউস এর ডান বাটন ক্লিক করূন। তারপর Open With এবং এখান থেকে আগত যে কোন একটি ব্রাউজার (যেমন ঃ- Internet Explorer, Mozilla Firefox, Google Chrome, Opera ইত্যাদি) এর নামের উপর ক্লিক করূন, যেগুলো আপনার কম্পিউটারে ইনস্টল করা আছে।
বি ঃ দ্রঃ এইচটিএমএল এর অনেক ট্যাগ, অ্যাট্রিবিউট-ব্রাউজার এর উপর নির্ভর করে কাজ করে। এ সম্পর্কে আমরার পরবর্তী পর্ব গুলোতে বিস্তারিত জানবো।

চিত্র :(এইচটিএমএল ফাইল এর আউটপুট দেখার জন্য ব্রাউজার সিলেক্ট করা )।

এবার নিচের মতো আপনার তৈরিকৃত এইচটিএমএল ফাইল এর আউটপুট ব্রাউজারে দেখতে পাবেন।

৩) ইনডেন্টেশন ( Indention )

প্রোগ্রাম লেখার সময় নির্দিষ্ট স্থানে ফাঁকা (আমি এখানে চারটি করে স্পেস ব্যবহার করেছি – এ কাজটি আপনি সহজে করার জন্য কী-বোর্ড থেকে Tab বাটন ব্যবহার করতে পারেন) রেখে রেখে প্রোগ্রামিংয়ে সৌন্দর্য/স্পষ্টতা বৃদ্ধি করাই হচ্ছে Indentation . যেমনঃ উপরের এইচটিএমএল ফাইলটিতে Indentation ব্যবহার করে ফাইলটি লিখেছি। আমি যদি ইনডেন্টেশন ব্যবহার নাও করতাম, তবুও আমার ফাইলটি কাজ করতো।

কিন্তু, আপনি একজন ভালো ওয়েব ডিজাইনার/ডেভেলপার/প্রোগ্রামার-অন্য কোন প্রোগ্রামার এর কাছে আপনার দক্ষতা আপনি প্রোগ্রাম লিখার মাধ্যমে প্রকাশ করতে পারেন। তাছাড়া অনেক সময় প্রোগ্রামিংয়ে ইনডেন্টেশন ব্যবহার না করার কারনে অনেকে ইন্টারভিউ থেকেও বাদ পড়ে যায়। যেকোন ভালো অভ্যাসের মতো প্রোগ্রামিংয়ে ইনডেন্টেশন ব্যবহার করাটাও সময় সাধ্য ব্যাপার। উপরের প্রোগ্রামটিতে আমি < html > লেখায় কোন ইনডেন্টেশন ব্যবহার করিনি, কারণ html ট্যাগ এইচটিএমএল ফাইলের প্রথম/প্রধান অংশ।

< html >

</ html >
কিন্তু, head এবং body সেকশন ব্যবহার এর সময় ইনডেন্টেশন ব্যবহার করেছি,কারণ এগুলো html এর এক একটি ইলিমেন্ট (অর্থাৎ, < html > এখানে প্রধান ইলিমেন্ট, আর < head > এবং < body > হচ্ছে < html > এর ইলিমেন্ট)।

<html>

<head>

</head>

<body>

</body>

</html>
আবার হেড সেকশন এর ভিতর টাইটেল ট্যাগটিকে আলাদা ইননেন্টশন ব্যবহার করে লিখেছি। কারণ,title হ‛েছ head এর ইলিমেন্ট। ইলিমেন্ট নিয়ে আমরা tutorial পরবর্তীতে বিস্তারিত আলোচনা করা করব।

<head>

< title > This is my first HTML Program;) </ title >

<head>
ঠিক তেমনি, < body > এর ভিতরের Hellow World!! লেখাটিতে ইনডেন্টেশন ব্যবহার করেছি। কারণ, Hellow World!! ! < body > এর কনটেন্ট।

< body > Hellow World!! < /body >

৪) এইচটিএমএল কমেন্টঃ

কমেন্টস এর কথা শুনলে হয়তো বা ফেসবুক কমেন্ট এর কথা মনে হতে পারে। বিষয়টি আসলে তা না। ফেসবুক কমেন্ট এর মতো এটি ব্রাউজারে প্রদর্শিত হয় না। এইচটিএমএল এ কমেন্ট ব্যবহার করবেন কেবল আপনার বুঝার সুবিধার্থে।মনে করূন, আজ আপনার তৈরি করা একটি এইচটিএমএল পেইজ/প্রোগ্রাম/ডকুমেন্ট-আজ থেকে আগামী ৬ মাস পর এর বিভিন্ন কোড এর ব্যবহার নাও বুঝতে পারেন। এক্ষেত্রে কোড এর পাশে কমেন্ট ব্যবহার করে এই সমস্যা থেকে মুক্তি পেতে পারেন।

তাছাড়া অনেক সময় ওয়েবপেজ ডিজাইন/ডেভেলপমেন্ট এর ক্ষেত্রে একাধিক ডিজাইনার/ডেভেলপার একসাথে কাজ করে থাকেন, তখন আপনার প্রোগ্রামটি অন্যান্য ডিজাইনার এর বুঝার সুবিধার্থেও কমেন্ট ব্যবহারের প্রয়োজন হয়ে থাকে।

কমেন্ট এর ব্যবহার

এইচটিএমএল এ কমেন্ট ব্যবহার করার জন্য কমেন্ট (!–) ট্যাগ ব্যবহৃত হয়।
যে লেখাকে কমেন্ট এর ভিতরে রাখতে চান, তার প্রথমে “<!–” এবং শেষে “–>”ব্যবহার করতে হয়। অর্থাৎ,

<!–This is a comment & will not be displayed in the browser –>

নিচে একটি উদাহরন এর মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক।


চিত্র : (প্রোগ্রাম এ কমেন্ট এর ব্যবহার)।

কোড বিশেষণ ঃ
উপরে আমরা This is a comment. The Comment line(s) w ..লাইনটিকে কমেন্ট ট্যাগ এর ভিতরে রেখেছি,তাই এটি ব্রাউজারে প্রদর্শিত হবে না। কিন্তু নিচের লাইনটি ঠিকই ব্রাউজারে প্রদর্শিত হবে।

৫)ডকুমেন্ট টাইপ ডিক্লেয়ারেশন

কোন এইচটিএমএল পেইজে এর ডকুমেন্ট টাইপ ডিক্লেয়ার না করা হলে ব্রাউজার বুঝতে পারে না যে, এটি এইচটিএমএল এর কোন ভার্সনে তৈরি। সেক্ষেত্রে এইচটিএমএল সংক্রান্ত বিভিন্ন তথ্যই ব্রাউজার এর নিকট পৌঁছায় না। ডকুমেন্ট টাইপ ডিক্লেয়ার করা ছাড়া এইচটিএমএল পেইজ ভ্যালিডেশনও সম্ভব নয়। তাই যথাযথ ডকুমেন্ট টাইপ ডিক্লেয়ার করা জরূরী।

ডকুমেন্ট টাইপ ডিক্লেয়ার করার জন্য এইচটিএমএল এর <!DOCTYPE> ব্যবহৃত হয়। তবে, এটি এইচটিএমএলএর কোন ট্যাগ নয়। এটি এইচটিএমএল পেইজ এর শুরূতে (<এইচটিএমএল> ট্যাগ এর প্রথমে উল্যেক করতে হয়।

HMTL 5 ভার্সনে ডকুমেন্ট টাইপ ডিক্লেয়ার করাঃ

<! DOCTYPE html >

তাহলে বন্ধুরা আমরা আজিকের পর্বে অনেক কিছু নিয়ে আলোচনা করেছি,এবং আজকের পর্ব অনেক বড় হয়ে যাচ্ছে তাই আওরা আজকের পর্ব এখানেই শেষ করি।আপনারা আজকের পর্বের বিষয় গুলো ভাল ভাব্র প্রেক্টীস করে ফেলুন,আপনাদের জন্য পরের পর্ব শিগ্রই নিয়ে আসব ইনশাআল্লাহ।

সবাই ভাও থাকুন

আল্লাহ হাফেজ