HTML5 টিউটরিয়াল পর্ব-৩

HTML5 এসেছে ওয়েবের চেহারা পরিবর্তন করে দিতে। এর আগেও এইচটিএমএল৫ এর বেপারে বেশ কিছু আলোচনা হয়েছিলো। এখন মূলতঃ কিছু কোডিং শিখবো যা আগে ব্যাবহৃত হয় নি। যদিও খুব কম সংখ্যক ওয়েবসাইটে HTML5 এর ব্যাবহার দেখা যাচ্ছে তবুও ভবিষ্যতের ওয়েব নির্মানে এর ব্যাবহার ওয়েবে ব্যাপকভিত্তিক পরিবর্তন আনবে বলেই সবার বিশ্বাস। HTML5 এর আগের দুটি টিউটরিয়াল (পর্ব একপর্ব দুই ) দেখে নিতে পারেন।

১. ইন্টারনেট এক্সপ্লোরার চেনার সহজ কোডিং

যদিও ইন্টারনেট এক্সপ্লোরার-৮ ও তার পরের ভার্শনগুলো HTML5 সাপোর্ট করে, এর আগের ভার্শনের জন্য ব্রাউজার চেক করে নিতে হলে নিচের মতো কোডিং করে নিতে হবে। html5.js ফাইলটি যে কোন ব্রাউজারকেই HTML5 এর সুবিধা প্রদান করবে।

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

এখন মজিলা, সাফারী, গুগলক্রোম এর বর্তমান ভার্শনগুলো HTML5 সাপের্ট করে। এ বেপারে আরও জানতে এখানে দেখুন

২. ওয়েব ফরম

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

<input type="search">
<input type="tel">
<input type="url">
<input type="email">
<input type="datetime">
<input type="date">
<input type="month">
<input type="week">
<input type="time">
<input type="datetime-local">
<input type="number">
<input type="range">
<input type="color">
এই বেপারটি আরও বিস্তারিত জানতে এখানে দেখুন।

আরও নতুন কয়েকটি ট্যাগঃ

এছাড়াও কনটেন্টসমুহকে সুবিন্নস্ত করতে বেশ কিছু নতুন ট্যাগ দেখতে পাব। এই ট্যাগগুলোর জন্য আগে আমাদের সিএসএস ব্যবহার করতে হতো।
<header> </header>
আগে যেখানে <div id="header"> ব্যাবহার করা হতো সেখানে ্ই ট্যাগ ব্যাবহার করলেই চলবে। লগো বা প্রাথমিক নেভিগেশন এর মধ্যে রাখাই ভাল।
<footer> </footer>
ফুটারের তথ্য সমুহ এই ট্যাগের মধ্যে রাখতে পারেন।
<section> </section>
কনটেন্টের যে অংশটি বারবার পূনরাবৃত্তি হবে (অর্থাৎ উইজেট এরিয়া) তা এই অংশে রাখাটা বাঞ্চনীয়।
<article> </article>
মূল কনটেন্ট এ অংশে থাকবে। ব্লগের ক্ষেত্রে এই অংশেই মূল পোষ্টটি রাখা যেতে পারে।
<aside> </aside>
মূল কনটেন্টের সারমর্ম বা মেটা ডাটা বা ফুটনোট এই অংশে থাকতে পারে।
আরও জানুন এখান থেকে
টিউটরিয়ালবিডিতে প্রাথমিক বেশ কিছু বিষয়ে আলোচনা করা হচ্ছে বা হবে। একেবারে বেসিক বিষয়গুলো থেকে শুরু করে আরও অনেক টিউটরিয়াল লেখার ইচ্ছা আছে। বাংলাভাষায় শিক্ষাগ্রহনের এই প্লাটফর্মটিকে এগিয়ে নিতে আপনারাও লেখা জমা দিতে পারেন। আর লেখককে অনুপ্রানিত করতে মতামত অংশে আপনাদের মতামত দিন। আশা করা যায় এতে করে নতুন নতুন টিউটরিয়াল লিখতে লেখকগণ অনুপ্রানিত হবেন। সাথে থাকুন, ভাল থাকুন।


7 thoughts on “HTML5 টিউটরিয়াল পর্ব-৩”

  1. অনেক ধন্যবাদ এইচটিএমএল৫ নতুন সঙযোগ করা হয়েছে ভাল লাগছে আপনাদের মাধ্যমে জানতে পারছি নতুন নতুন ট্যাগ।

  2. Wow, awesome blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is magnificent, as well as the content!. Thanks For Your article about HTML5 টিউটরিয়াল পর্ব-৩ | টিউটোরিয়ালবিডি .

  3. ধন্যবাদ ,আপনার ব্লগ গুলো সবসময় ভালো লাগে ,আপাতত ব্লগ পরে পরে ওয়েব সম্পর্কে ধারনা নিচ্ছি ।আপনাদের মতো ব্লগার দের অনেক কৃতজ্ঞতা জানাই ।

  4. Hello tuto vai ,
    I’m learning html4.i want to know from you that if there is any differences between 4 & 5 which really matters in my learning.And by the way, i have found that your twitter page is not working.

  5. টিউটো ভাই ধন্যবাদ……..
    আরো HTML5 টিউটরেয়ালের অপেক্ষার প্রহর গুনছি……………….
    হুম…….. পরবর্তিতে যারা ডিজাইন শুরু করবেন তাদের অনেক সুবিধা হবে………….

    1. @ইমরান, ওয়েব ডিজাইনাররা HTML5 নিয়ে অনেক বেশ স্বপ্ন দেখছেন। মুটামুটি নতুন অনেকগুলো বিষয়ই আলোচনা হয়ে গেছে। সিএসএস৩ আর এইচটিএমএল৫ মিলে অনেক ভাল ভাল ওয়েব এপ্লিকেশন বানানো সম্ভব। ওয়েবে জে-কোয়েরীর ও আজাক্সের ব্যাবহারও একটা বিশাল পরিবর্তন। মোবাইল এপ্লিকেশন, আইপডের ব্যাবহার বৃদ্ধিত, ইন্টারনেটটিভি সব মিলিয়ে একটি ব্যাপক ভিত্তিক আলোরনের ছোয়া আসতেছে ওয়েবে।
      আশা করি নতু কিছু শিখে..এখানে শেখানোর চেষ্টা করতে পারবো।

Comments are closed.