HTML5 শেখার জন্য ৭ টি ওয়েবসাইটের ঠিকানা দিয়েছিলাম কিছুদিন আগে। এখন HTML5 এর নতুন নতুন ফিচারগুলোর সাথে পরিচিত হবো। আশা করি ভবিষ্যত ওয়েব নির্মানে এটি আমাদের এগিয়ে যেতে সহায়তা করবে।
১. নতুন Doctype ডিক্লার করা:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
২. ছবির প্রকাশনা
এখন নতুনভাবে দেখতে পাবেন ছবির প্রকাশনা।
- <figure>
- <img src=”path/to/image” alt=”About image” />
- <figcaption>
- <p>This is an image of something interesting. </p>
- </figcaption>
- </figure>
এ পদ্ধতিতে আরও সুন্দরভাবে ছবি প্রকাশ করা যাবে। যদিও এটা অনেকের কাছে বাড়তি ও বিরক্তকর কোড বলে মনে হয়।
৩. Type এট্রিবিউট ব্যবহার হবে না আর
জাভাস্ক্রিপ্ট ও সিএসএস এর ফাইল কল করার জন্য টাইপ ডিফাইন করা হতো নিচের মতো করে-
- <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
- <script type=”text/javascript” src=”path/to/script.js”></script>
মজার বেপার হলো এখন আর সেটা উল্লেখ করার দরকার নাই । নিচের মতো কোড লিখলেই চলবে-
- <link rel=”stylesheet” href=”path/to/stylesheet.css” />
- <script src=”path/to/script.js”></script>
৪. কষ্ট করে এখন আর ট্যাগ এর শেষ অংশ লিখতে হবে না
পূর্বে : <p class=myClass id=someId> Start the reactor.</p>
পরে: <p class=myClass id=someId> Start the reactor.
৫. কনটেন্ট সম্পাদনার মজার ও সহজ উপায়
contenteditable=”true” এর ব্যবহারের মাধ্যমে সহজে সম্পাদনা করা যাবে কনটেন্ট।
নিচের কোডগুলো দেখুন:
- <!DOCTYPE html>
- <html lang=”en”>
- <head>
- <meta charset=”utf-8″>
- <title>untitled</title>
- </head>
- <body>
- <h2> To-Do List </h2>
- <ul contenteditable=”true”>
- <li> Break mechanical cab driver. </li>
- <li> Drive to abandoned factory
- <li> Watch video of self </li>
- </ul>
- </body>
- </html>
৬. ই-মেইল ইনপুট বক্স
এখন আগের মতো ঝামেলা করতে হবে না ইনপুটবক্স বানাতে। ই-মেইল ইনপুট বক্স সহজেই মনে রাখবে আপনার পূর্বে উল্লেখিত ইমেইল ঠিকানাগুলো।
- <!DOCTYPE html>
- <html lang=”en”>
- <head>
- <meta charset=”utf-8″>
- <title>untitled</title>
- </head>
- <body>
- <form action=”” method=”get”>
- <label for=”email”>Email:</label>
- <input id=”email” name=”email” type=”email” />
- <button type=”submit”> Submit Form </button>
- </form>
- </body>
- </html>
৭. টেক্স বক্সে ডিফল্ট টেক্স দেওয়ার সহজ সমাধান
আগের মতো জাভাস্ক্রিপ্ট নির্ভরশীল হতে হবে না সাধারন placeholder এর জন্য । এখন এসেছে
placeholder এট্রিবিউট।
<input name=”email” type=”email” placeholder=”doug@givethesepeopleair.com” />