HTML5 এর নতুনত্ব পর্ব-১

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

১. নতুন Doctype ডিক্লার করা:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

২. ছবির প্রকাশনা

এখন নতুনভাবে দেখতে পাবেন ছবির প্রকাশনা।

  1. <figure>
  2. <img src="path/to/image" alt="About image" />
  3. <figcaption>
  4. <p>This is an image of something interesting. </p>
  5. </figcaption>
  6. </figure>

এ পদ্ধতিতে আরও সুন্দরভাবে ছবি প্রকাশ করা যাবে। যদিও এটা অনেকের কাছে বাড়তি ও বিরক্তকর কোড বলে মনে হয়।

৩. Type এট্রিবিউট ব্যবহার হবে না আর

জাভাস্ক্রিপ্ট ও সিএসএস এর ফাইল কল করার জন্য টাইপ ডিফাইন করা হতো নিচের মতো করে-

  1. <link rel="stylesheet" href="path/to/stylesheet.css" type="text/css" />
  2. <script type="text/javascript" src="path/to/script.js"></script>

মজার বেপার হলো এখন আর সেটা উল্লেখ করার দরকার নাই । নিচের মতো কোড লিখলেই চলবে-

  1. <link rel="stylesheet" href="path/to/stylesheet.css" />
  2. <script src="path/to/script.js"></script>

৪. কষ্ট করে এখন আর ট্যাগ এর শেষ অংশ লিখতে হবে না

পূর্বে : <p class=myClass id=someId> Start the reactor.</p>

পরে: <p class=myClass id=someId> Start the reactor.

৫. কনটেন্ট সম্পাদনার মজার ও সহজ উপায়

HTML5 এর নতুনত্ব

contenteditable="true" এর ব্যবহারের মাধ্যমে সহজে সম্পাদনা করা যাবে কনটেন্ট।

নিচের কোডগুলো দেখুন:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>untitled</title>
  6. </head>
  7. <body>
  8. <h2> To-Do List </h2>
  9. <ul contenteditable="true">
  10. <li> Break mechanical cab driver. </li>
  11. <li> Drive to abandoned factory
  12. <li> Watch video of self </li>
  13. </ul>
  14. </body>
  15. </html>

৬. ই-মেইল ইনপুট বক্স

এখন আগের মতো ঝামেলা করতে হবে না ইনপুটবক্স বানাতে। ই-মেইল ইনপুট বক্স সহজেই মনে রাখবে আপনার পূর্বে উল্লেখিত ইমেইল ঠিকানাগুলো।

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="utf-8">
  5. <title>untitled</title>
  6. </head>
  7. <body>
  8. <form action="" method="get">
  9. <label for="email">Email:</label>
  10. <input id="email" name="email" type="email" />
  11. <button type="submit"> Submit Form </button>
  12. </form>
  13. </body>
  14. </html>

৭. টেক্স বক্সে ডিফল্ট টেক্স দেওয়ার সহজ সমাধান

আগের মতো জাভাস্ক্রিপ্ট নির্ভরশীল হতে হবে না সাধারন placeholder এর জন্য । এখন এসেছে placeholder এট্রিবিউট।

<input name="email" type="email" placeholder="doug@givethesepeopleair.com" />

HTML5 এর নতুনত্ব পর্ব-১

Leave a Comment