আসসালামু আলাইকুম। কেমন আছেন প্রিয় টেকটিউনস বন্ধুরা আলহামদুলিল্লাহ আমিও ভালো আছি। ওয়েব ডিজাইন বাংলা এর সিরিজ টিউটোরিয়ালের আজকে 13তম পর্বে আপনাদেরকে স্বাগত জানাই। আজকের এই পর্বে আমরা আলোচনা করবো HTML5 block level element, html5 inline element, class attribuite, html5 class attribute, HTML5 div tag, HTML5 span tag সহ আরও বেশ কিছূ বিষয় নিয়ে।
HTML5 এ Block level element হলো সেই ধরনো tag যা আমরা ব্যাবহার করলো সেই tag এর আগে এবং পরে একটি নতুন লাইন তৈরি হয়ে থাকে। যেমন <p> একটি ব্লক লেভেল tag. অর্থ্যাৎ আমরা যদি <p> ট্যাগ ব্যাবহার করে থাকি তাহলে এই <p> ট্যাগের আগে এবং পরে একটি করে নতুন লাইন তৈরি হবে। নিচের কোডগুলো খেয়াল করুন।
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
</p>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
</p>
আমরা যখন উপরের কোডটি রান করবো তখন দেখবো দুটি paragraph এর মাঝখানে নতুন লাইন তৈরি হয়েছে। অর্থ্যাৎ দুটি paragraph সর্ম্পর্ণ রূপে আলাদাভাবে দেখাচ্ছে। নিচের স্ক্রিন শর্টটি খেয়াল করুন।
এবারে নিচের কোডটি দেখুন।
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not
</p>
<a href=”http://solutionpuzzle.xyz”>Solution Puzzle</a>
আমরা যখন এই কোডটিকে রান করাবো তখন আমরা দেখবো যে <a> ট্যাগ এবং <p> ট্যাগ সর্ম্পর্ণ আলাদা দুটি ট্যাগ আকারে দেখাবে।
আমরা যদি এই <a> ট্যাগটিকে <p> ট্যাগের ভেতরেই দেখতে চাই তাহলে আমাদেরকে কোডটিকে নিচের মতো করে লেখতে হবে।
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<a href=”http://solutionpuzzle.xyz”>Solution Puzzle</a> It has survived not
</p>
অর্থ্যাৎ <a> ট্যাগটিকে আমাদেরকে <p> ট্যাগের মাঝখানে নিয়ে আসতে হবে। আউটপুটতি দেখুন।
আমি এই আর্টিকেল এর সাথে যে ভিডিওটি যুক্ত করেছি সেখানে বাকি ব্লক লেভেল tag গুলোর বিস্তারিত বিবরন দিয়েছি। আপনারা দেখে নিবেন।
এখানে একটি বিষয় ভিডিও এর মাঝে আপনি পাবেন তা হলো সিমানটিক ইলিমেন্ট গুলো। আমরা জানি সিমান্টিক ইলিমেন্ট গুলো আমরা সার্চ ইন্জিন যেন আমাদের সাইটটিকে সঠিকভাবে সার্চ করে পেতে পারে তার জন্য ব্যাবহার করে থাকি।
কিন্তু আমরা যখন একটি পূর্নাঙ্গ ওয়েবসাইট তৈরি করে থাকি তখন সাইটের সকল অংশ আমরা সিমান্টিক ইলিমেন্ট এর মাধ্যমে করতে পারিনা। এজন্য আমরা আমাদের সাইটে যে ট্যাগটি সবথেকে বেশি ব্যাবহার করে থাকবো তা হলো <div> এবং <span> ট্যাগ।
আমরা যখন কোন সাইটে পাশের একটি নির্ধরিত পোরশান এড করতে চাই, ধরুন আমাদের সাইটের একটি aside বার থাকবে তার পাথে একটি article বার থাকবে। এই জন্য আমরা চাইলে semantic ট্যাগ ব্যাবহার করতে পারি। কিন্তু যখন আমরা পুরো একটা সাইট build up করবো তখন আমাদেরকে <div> tag ব্যাবহার করতে হবে। নিচের কোডটি খেয়াল করুন।
<div style=”height: 250px; width: 500px; float: left; background-color: grey;”>
<div>
এবারে আমরা যখন কোন একটি লাইনো মাঝখানে কোন একটি নির্ধারিত টেক্সট বা অন্য কোন portion কে ডিজাইন করতে চাই তখন <span> tag ব্যাবহার করে থাকি।
আমি এই আর্টিকেলটির বিস্তারিত নিচের ভিডিওটিতে practically দেখিয়েছি। যারা লেখাটি পরে পরির্পর্ণভাবে বুঝতে পারেননি, তারা নিচের ভিডিওটি দেখে নিবেন। তার পরও কোন প্রশ্ন থাকলে আমাকে কমেন্ট করে জানাবেন।
 এইস.টি.এম.এল-৫, পর্ব-১৩){kind=link}