Monday , 18 November 2019
Home » Tag Archives: html

Tag Archives: html

wapkiz code|ফ্রিতে নিয়ে নিন New Disigne Time And Date wapkiz code ।

হ্যালো বন্দুরা , আমাদের আজকের পোস্টের বিষয় হল – wapkiz code

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

কাজের কথায় আসি । বন্ধুরা আজকের বিষয় হলো wapkiz সাইট এর Time And Date কোড । কোনো রকম কোড ডাউনলোড ঝামেলা ছারা কপি করে পেষ্ট করুন আপনার সাইটে । অনেকে এই  code খোজে কিন্তু পায় না তাই শেয়ার করলাম আপনাদের জন্য ।

প্রথমেই দেখেনিন এই কোড টি আপনার সাইটে ইউজ করলে কেমন আউটফুট দেবে-

wapkiz code

 

এই বক্স থেকে কোডটি কপি করে আপনার সাইটে পেষ্ট করুন কাজ হয়ে যাবে

কোড টি যদি ভাল লাগে তাহলে পোস্টে একটা লাইক করুন,wordpress সাইটে কোড শেয়ার করলে কোড গুলো ঠিক ভাবে সো করে না,তাই এই wapkiz code টা যদি আপনার সামনে সো না করে বা ভুল দেখায় তাহলে অবশ্যই কমেন্ট বক্সে কমেন্ট করুন আমি আপনাকে সটিক কোড টি দিয়ে দেব।অথবা যেকোন wapkiz code কোড প্রয়োজন হলে ও কমেন্ট করুন আমি আপনাকে দেওয়ার চেস্টাকরব,এছারা আমাদের সাইতে অনেক ওয়াপকিজ কোড শেয়ার করা আছে যেগুলো আমাদের web design category তে পাবেন।

আরো দেখুন-

[Hot Post] নিয়ে নিন বন্ধুরা Wapkiz সাইটের ফুটার এড হাইড করার কোড ।

নিয়ে নিন wapkiz download সাইট এর জন্য Future Update Code

। ধন্যবাদ সবাইকে । আজ আর নয় । ভালো থাকুন সুস্থ থাকুন এই সাইটের সাথে থাকুন ।

HTML বাংলা টিউটোরিয়াল (পর্ব-৭),এইচটিএমএল টেক্সট ফরম্যাটিং।

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

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

সবাই কেমন আছেন<আজকে আম আপনাদের জন্য নিয়ে এসেছি HTML বাংলা টিউটোরিয়াল (পর্ব-৭),এইচটিএমএল টেক্সট ফরম্যাটিং। চলুন দেখেনেই আজকের পর্ব-

আমরা যখন কোন ওয়েবসাইট ভিজিট করি, তখন সেখানে বিভিন্ন ধরণের টেক্সট (লেখা) দেখতে পাই।

বিভিন্ন ধরণের টেক্সট বলতে – টেক্সটকে বিভিন্নভাবে সাজানো হয়ে থাকে। যেমন ঃ লেখাকে বোল্ড করা, আন্ডারলাইন করা, প্যারাগ্রাফ আকারে লিখা, লেখার কালার পরিবর্তন করা, ফন্ট পরিবর্তন করা ইত্যাদি। আপনারা যারা মাইক্রোসফট ওয়ার্ড এ কাজ করেছেন, তারা জানেন – লেখাকে এমন বিভিন্ন আঙ্গিকে প্রকাশ করা কেবল কিছু অপশনে ক্লিক করা মাত্র। যেমন ঃ ” b ” বাটনে ক্লিক করে লেখাকে বোল্ড করা, ” Font color” অপশন থেকে বিভিন্ন কালার নির্বাচন করা, ” Font size ” অপশন থেকে লেখার আকার পরিবর্তন করা ইত্যাদি। এইচটিএমএল এও বিষয়গুলো অনেকটা একই, তবে পার্থক্য হলো মাইক্রোসফট ওয়ার্ড এ যেমন কাজগুলো আমরা ক্লিক করে করে করেছি, আর এখানে ম্যানুয়ালী কোড লিখে লিখে করতে হবে। প্রয়োজন হবে বিভিন্ন ইলিমেন্ট ব্যবহার করার। ব্যবহারের দিক থেকে এসব ইলিমেন্টসমূহকে আবার বিভিন্ন ভাগে
ভাগ করা হয়েছে। এখন আমরা এসব ইলিমেন্টস সম্পর্কে বিস্তারিত জানবো।

Heading ( <h1> থেকে <h6>) Elements

আমরা যখন পত্র-পত্রিকায় কোন লেখা পড়ি, তখন লেখার উপর শিরোনাম দেখে থাকি। ঠিক তেমনি ওয়েবসাইটেও বিভিন্ন আর্টিকেল, পোস্ট, ইমেজ অ্যালবাম ইত্যাদির উপর শিরোনাম ব্যবহার করা হয়ে থাকে, যাতে করে পাঠকরা এক নজরে পুরো বিষয়বস্তুটি বুঝে নিতে পারে। আর ওয়েবপেজে এসব বিষয়ে শিরোনাম ব্যবহার করার ক্ষেত্রে এইচটিএমএল এর হেডিং ইলিমেন্ট (< h1 > থেকে < h6 >) ব্যবহৃত হয়ে থাকে। এইচটিএমএল এ ছয় ধরণের হেডিং ইলিমেন্ট রয়েছে। যথা ঃ

1. h1 (Heading 1)

2. h2 (Heading 2)

3. h3 (Heading 3)

4. h4 (Heading 4)

5. h5 (Heading 5)

6. h6 (Heading 6)

এক্ষেত্রে ব্রাউজার Heading 1 (< h1 >) ইলিমেন্ট এর ভিতর এর লেখাকে সবচেয়ে বড় আকারে প্রদর্শিত করে এবং ক্রমানুসারে এ আকার ছোট হতে থাকে। নিচের উদাহরণের মাধ্যমে বিষয়টি সম্পর্কে পরিষ্কার হওয়া যাক।

চিত্রঃ(এইচটিএমএল হেডিং ১ ইলিমেন্ট ব্যবহার করে ব্রাউজারে তার আউটপুট দেখা)।

কোড বিশে- ষণ ঃ

উপরের প্রোগ্রামে এইচটিএমএল এর সকল হেডিং ইলিমেন্ট (< h1 > থেকে < h6 >) এর ব্যবহার দেখানো হয়েছে। এখানে হেডিং ১ ইলিমেন্ট (< h1 >……</ h1 > ) এর ভিতর ” This is Heading 1–The largest o।।” লেখাটুকু ব্রাউজারে সবচেয়ে বড় আকারে প্রদর্শিত হবে। হেডিং ২ ইলিমেন্ট (< h2 >………</ h2 > ) এর ভিতর ” “This is Heading 2 – The larger one ” লেখাটুকু ব্রাউজারে হেডিং ১ ইলিমেন্ট এর চাইতে ছোট আকারে প্রদর্শিত হবে। এভা। ক্রমানুসারে লেখার আকার ছোট হয়ে আসবে।এখন ফাইলটি ব্রাউজারে রান করালে নিচের মতো আউটপুট প্রদর্শিত হবে।

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

উপরে আমরা এইচটিএমএল এর সকল হেডিং ইলিমেন্টসমূহের আউটপুট দেখতে পাচ্ছি। এখন প্রশ্ন হচ্ছে, কোন ক্ষেত্রে কোন হেডিংটি ব্যবহার করবো?? হ্যা !! মূলত বিষয়বস্তুর গুরূত্বপূর্ণতার ক্রম অনুসারে এসব হেডিং ইলিমেন্ট এর ব্যবহা হয়ে থাকে। কোন বিষয়বস্তুর প্রধান সেকশন/শিরোনামকে হেডিং ১ (<h1>) ইলিমেন্ট এর মধ্যে লেখা হয়ে থাকে।

তার চেয়ে একটু কম গুরুত্বপূর্ণ সেকশনকে হেডিং ২ (<h2>) ইলিমেন্ট এর মধ্যে লেখা হয়ে থাকে।

আবার তার চেয়েও একটু কম গুরূত্বপূর্ণ সেকশনকে হেডিং ৩ (<h3>) ইলিমেন্ট এর মধ্যে লেখা হয়ে থাকে। তবে এখানে লক্ষ্যনীয় বিষয় হচ্ছে, উপরের প্রোগ্রামে ব্যবহার করা (<h4>, <h5> এবং <h6>) হেডিংসমূহের আউটপুট অনেকটা স্বাভাবিক টেক্সট এর
মতোই প্রদর্শিত হচ্ছে। এক্ষেত্রে ভিজিটর বুঝতে পারবে না যে, কোনটি আসলে হেডিং আর কোনটি নরমাল টেক্সট।

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

উপরের প্রোগ্রামটিতে আমি ” Web Designing ” লেখাটিতে হেডিং ১ (<h1>) ব্যবহার করেছি, কারণ-এই লাইনটিকে আমি প্রধান শিরোনাম হিসেবে উল্যেখ করতে চাচ্ছি। পরবর্তীতে আমি ” HTML (HyperText Markup Language ” এবং ” “CSS (Cascading Style Sheet) ” এই দুটি জায়গায় হেডিং ২ (<h2>) ব্যবহার করেছি, কারণএই লেখা দু’টিকে আমি ” Web Designing ” এর উপ-শিরোনাম হিসেবে উল্যেখ করতে চাচ্ছি। আশা করি বিষয়টি বুঝতে পেরেছেন।

এখন উপরের প্রোগ্রামটি ব্রাউজারে রান করালে নিচের মতো আউটপুট প্রদর্শিত হবে।

“Web Designing” লেখাটিতে হেডিং ১ ব্যবহার করার কারণে এটি ব্রাউজারে সবচেয়ে বড় আকারে প্রদর্শিত হচ্ছে। অন্যদিকে, “HTML (HyperText Markup Language)”
এবং “CSS (Cascading Style Sheet)” লেখা দু’টিতে হেডিং ২ ব্যবহার করার কারণে এটি ব্রাউজারে হেডিং ১ এর চাইতে কিছুটা ছোট আকারে প্রদর্শিত হচ্ছে।

তাহলে বন্ধুরা আমরা আজকের পর্বে এইটুকু জানলাম যে কীভাবে এইচটিএমএল এ হেডিং লিখতে হয় পরবর্তি পর্বে আমরা জানব কিভাবে হেডিং এলিমেন্ট এ এট্রিবিউট ব্যবহার করতে হয়।

আজকের পর্ব অনেক বড় হয়ে যাচ্ছে তাই আজকের মত বিদায় নিচ্ছি এখানেই।

আল্লাহ হাফেজ

download সাইট এর জন্য Future Update Wapkiz Code

কেমন আছেন বন্ধুরা আসা করি ভালো আছেন । আজকের এই পোষ্টে এর সবাইকে স্বাগতম । আজকের বিষয় হলো Download সাইট এর জন্য Future Update Wapkiz Code। অনেকে আমাকে request করেছিল তাই দিচ্ছি । তো চলুন দেখে নেই

 </p>
<h2><font color="green">Future Update</font></h2>
<p> :var:color=[rand-open]#FF0000[r]#3D991F[r]#0000CC[r]#B88A00[r]#00CC7A[r]#088A29[r]#FF00FF[/rand-close]:[fm]d=all,o=u,l=3,lu=1,s=:to-page:,fn=1,no=no Latest Update|| </p>
<div class="fl">
<table>
<tr>
<td width="35"> <img src="https://i.postimg.cc/vZjSjk6P/new.gif" style="width:60px;height:60px;border:1px solid #769468" /></td>
<td align="left"><a href="site-4.html?to-fid=%id%&to-name=%name%"> Uploaded by : <span style="color: :v:color:">Bisnu Ray</span> - <span style="color: :v:color:"><b>%name%</b></span></a></td>
</tr>
</table>
</div>
<p>[/fm]<font face="Tahoma"><a target="_blank" href="http://adf.ly/19327173/banner/http://asobondhu24.wapkiz.com/"></a></font>  

এই বক্স থেকে কোডটি কপি করে পেস্ট করুন ।

এটিই ছিল আজকের Future Update Wapkiz Code

সবাই ভালো থাকুন আজ আর নয় Thanks All এই সাইটের সাথে থাকুন ।

আরো Wapkiz Code

HTML বাংলা টিউটোরিয়াল (পর্ব-৬)body ইলিমেন্ট এ অ্যাট্রিবিউট এর ব্যবহার।


হ্যালো বন্দুরা ,HTML বাংলা টিউটোরিয়াল এ আপনাদের স্বাগতম।

যারা আগের পর্ব দেখেন নি তারা দেখুন- HTML বাংলা টিউটোরিয়াল(পর্ব-৫)Elements in HTML.

আমাদের আজকের বিষয় হল-

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

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

 alink

 background

 bgcolor

 link

 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 অ্যাট্রিবিউট এর ব্যবহার দেখানো হলো ঃ

কোড বিশে- ষণ ঃ

উপরের প্রোগ্রামে <<body alink=”red”> এর মাধ্যমে ধষরহশ অ্যাট্রিবিউট এর ভ্যালিউ হিসেবে লাল কালার ব্যবহার করা হয়েছে। এখানে আমরা কালার এর নাম উল্যেখ করে কাজটি করেছি। চাইলে RGB অথবা Hexadecimal Code ব্যবহার করেও কাজটি করতে পারতাম। এর নিচে <p><a href=”http://www.w3schools.com”> W3Schools.com </a></p> এবং <p> <a href=”http://www.w3schools.com/html/”>HTML Tutorial </a></p> লাইন দু’টির মাধ্যমে ওয়েবপেজে দু’টি লিংক তৈরি করা হয়েছে। (লিংক নিয়ে টিউটোরিয়াল এর পরবর্তীতে বিস্তারিত আলোচনা করা হয়েছে)।

এখন পেজটি ব্রাউজারে রান করালে নিচের চিত্রের মতো আউটপুট আসবে

চিত্রঃ(এইচটিএমএল পেজকে ব্রাউজারে শো করানো)।

এবার ওয়েবপেজে প্রদর্শিত লিংক দু’টির ( (W3Schools.com এবং HTML Tutorial) উপর ক্লিক করলে, এগুলো লাল রং (কারণ, আমাদের অ্যাট্রিবিউট এর ভ্যালিউ লাল রংয়ের ছিল) ধারণ করবে। এখন আমি যদি ঐ HTML Tutorial লিংকটির উপর ক্লিক করি, তাহলে দেখি বিষয়টি কি হয় !!

চিত্রঃ HTML Tutorial লিংকে ক্লিক করা।

উপরের চিত্রে লক্ষ করা যাচ্ছে যে, HTML Tutoria লিংকটির উপর ক্লিক করাতে এটি লাল রং ধারণ করছে।

Note :

*) HTML 5 – < alink> অ্যাট্রিবিউট সাপোর্ট করে না।
*) HTML 4.01 ভার্সনে এটিকে অবচিত ঘোষনা করা হয়।
*) এর পরিবর্তে CSS ব্যবহার করা যেতে পারে।

background

ওয়েবপেজের ব্যাকগ্রাউন্ডে ইমেজ ব্যবহারের জন্য এই অ্যাট্রিবিউটটি ব্যবহার করা হয়ে থাকে।

Value :

background অ্যাট্রিবিউট এর ভ্যালিউ/মান হিসেবে URL (Uniform Resource Locator) অর্থাৎ লিংক ব্যবহার করা হয়। অর্থাৎ যেখান থেকে আপনি ইমেজটি ব্যবহার করতে চাচ্ছেন, সেখানকার লিংক এখানে উল্যেখ করেক দিতে হয়। এক্ষেত্রে দুই ধরণের লিংক ব্যবহার করা হয়। যথা ঃ

১)Absolute URL : যখন অন্য কোন ওয়েবসাইটের লিংক ব্যবহার করা হয়, তখন এটিকে Absolute URL বলা হয়। যেমনঃ(www.anotherwebsite.com/images/body_image.jpeg)

২) Relative URL : যখন একই ওয়েবসাইটের কোন লিংক ব্যবহার করা হয়, তখন এটিকে Relative URL বলা হয়। যেমন ঃ (images/body_image.jpeg)

লিখার নিয়ম ঃ
< body background=”URL of image” >

HTML বাংলা টিউটোরিয়াল

কোড বিশেষণ ঃ
উপরের প্রোগ্রামে ব্যকগ্রাউন্ড ইমেজের জন্য একটি Absolute Url ” < body background=”http://pubpages.unh.edu/~cas254/html.jpg” >” ব্যবহার করা হয়েছে।এখন পেজটি ব্রাউজারে রান করালে নিচের মতো আউটপুট প্রদর্শিত হবে।

HTML বাংলা টিউটোরিয়াল

উপরের চিত্রে “HTML Logo” সম্বলিত একটি ইমেজ আমাদের ওয়েবপেজের ব্যবকগ্রাউন্ডে দেখা যাচ্ছে।

bgcolor ঃ

ওয়েবপেজের ব্যাকগ্রাউন্ডে কালার ব্যবহার করার জন্য bgcolor অ্যাট্রিবিউটটি ব্যবহার করা হয়।

Value :

bgcolor অ্যাট্রিবিউটে া value /মান হিসেবে Color নির্ধারণ করা হয়। এইচটিএমএল এ তিনভাবে কালার নির্ধারণ করা যায়।

১. . Color name (কালার এর নাম ব্যবহার করে – যেমন ঃ “green,red,yellow”);

২. RGB (Red, Greeen & Blue) Code – RGB মান, যেমন ঃ rgb(0,0,0) ব্যবহার করে

৩. Hex (Hexadecimal) কোড ব্যবহার করে – যেমন ঃ- “#0000FF”।

লিখার নিয়ম ঃ

< body bgcolor=”Color_name অথবা RGB_Code অথবা Hex_Code”>

নিচে bgcolor অ্যাট্রিবিউট এর ব্যবহার দেখানো হলো ঃ

HTML বাংলা টিউটোরিয়াল

কোড বিশেষণ ঃ

উপরের প্রোগ্রামে-ওয়েবপেজের ব্যাকগ্রাউন্ড এ কালার দেয়ার জন্য “< body bgcolor=”A52A2A “>” লাইনটি ব্যবহার করা হয়েছে। এখানে Brown (বাদামি) কালারটি নির্বাচন করা হয়েছে এবং কালার এর জন্য Hex_Code “A52A2A” ব্যবহার করা হয়েছে।
এখন উপরের পেজটি ব্রাউজারে রান করালে নিচের মতো আউটপুট প্রদর্শিত হবে।

HTML বাংলা টিউটোরিয়াল

Note :

*) HTML 5 – < bgcolor > অ্যাট্রিবিউট সাপোর্ট করে না।
*) HTML 4.01 ভার্সনে এটিকে অবচিত ঘোষনা করা হয়।
*) এর পরিবর্তে CSS ব্যবহার করা যেতে পারে।

link

ওয়েবপেজে ব্যবহৃত সকল লিংক এর কালার সেট করার জন্য এই link অ্যাট্রিবিউটটি ব্যবহৃত হয়ে থাকে।

Value :

link অ্যাট্রিবিউটে value /মান হিসেবে Color নির্ধারণ করা হয়। এইচটিএমএল এ তিনভাবে কালার নির্ধারণ করা যায়।

১. Color (কালার এর নাম ব্যবহার করে – যেমনঃ “green,red,yellow”);
২. RGB (Red, Greeen & Blue) Code – RGB মান, যেমন ঃ rgb (0,0,0) ব্যবহার করে
৩. Hex (Hexadecimal) কোড ব্যবহার করে – যেমন ঃ- ” – “#0000FF”

লিখার নিয়ম ঃ
< body link=”Color_Name অথবা RGB_Code অথবা Hex_Code”>

vlink ঃ

Visited link এর সংক্ষিপ্ত রূপ হচ্ছে vlink. Visited link বলতে যে সকল লিংক পূর্বে ভিজিট করা হয়েছে/ক্লিক করা হয়েছে, সে সকল লিংক এর কালার vlink অ্যাট্রিবিউট এর মাধ্যমে নির্ধারণ করে দেয়া যায়।

Value :

text অ্যাট্রিবিউটে value /মান হিসেবে Color নির্ধারণ করা হয়। এইচটিএমএল এ তিনভাবে কালার নির্ধারণ করা যায়।

link অ্যাট্রিবিউটে value /মান হিসেবে Color নির্ধারণ করা হয়। এইচটিএমএল এ তিনভাবে কালার নির্ধারণ করা যায়।

১. Color (কালার এর নাম ব্যবহার করে – যেমনঃ “green,red,yellow”);
২. RGB (Red, Greeen & Blue) Code – RGB মান, যেমন ঃ rgb (0,0,0) ব্যবহার করে
৩. Hex (Hexadecimal) কোড ব্যবহার করে – যেমন ঃ- ” – “#0000FF”

লিখার নিয়ম ঃ
< body vlink=”Color_Name অথবা body vlink=”Color_Name অথবা Hex_Code”>

Note :

*) HTML 5 – < alink> অ্যাট্রিবিউট সাপোর্ট করে না।
*) HTML 4.01 ভার্সনে এটিকে অবচিত ঘোষনা করা হয়।
*) এর পরিবর্তে CSS ব্যবহার করা যেতে পারে।

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

কমেন্ট করে জানাতে ভুলবেন না আপনার কাছে কেমন লাগছে আমাদের 

HTML বাংলা টিউটোরিয়াল

আল্লাহ হাফেজ

পরের পর্ব-HTML বাংলা টিউটোরিয়াল (পর্ব-৭),এইচটিএমএল টেক্সট ফরম্যাটিং।

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 >

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

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

আল্লাহ হাফেজ