এইচটিএমএল-৭ [Embed Music, Video, Body, Div]

Embed Music

এইচটিএমএল ৫ এ অডিও ভিডিও প্রদর্শনের জন্য নতুন কিছু ট্যাগ এসেছে ফলে ব্রাউজারে অডিও ভিডিও চালানো এখন খুব সহজ। আগে embed নামের একটি ট্যাগ দিয়ে এই কাজগুলি চালানো হত তবে অনেক সমস্যা ছিল। যেমন embed ট্যাগ কাজ করার জন্য প্লাগিন ইনস্টল থাকতে হত (ব্রাউজারে)। এদের মধ্যে খুব পরিচিত একটি প্লাগিন হচ্ছে ফ্লাশ প্লেয়ার এছাড়া কুইক টাইম, ভিএলসি (VLC), Windows Media Player ইত্যাদি।

সমস্যা হত যদি ইউজারের ব্রাউজারে কোন মিডিয়া প্লেয়ার প্লাগিন ইনস্টল না থাকত। যাই HTML 5 এসব সমস্যার সমাধান নিয়ে এসেছে। যদি এখনও IE (ইন্টারনেট এক্সপ্লোরার) HTML 5 সাপোর্ট করেনা তবে IE এর সর্বশেষ ভার্সনে (IE 9+) এসব সমাধান আসছে।

যেহেতু এখন বেশিরভাগ মানুষই মজিলা বা গুগল ক্রোম ব্রাউজার ব্যবহার করে তাই আমরা HTML 5 এরই উপর ভিত্তি করে টিউটোরিয়াল দিচ্ছি।

এইচটিএমএল ৫ ব্যবহার করে এখানে mp3 ফাইল বাজিয়ে দেখাচ্ছি এবং এর জন্য কোন প্লাগিন লাগবেনা। audio নামের ট্যাগ দিয়ে এটা করা যায়।

1.<audio controls>

2.<source src="/media/Duniya_Ke_Ae_Musafir.ogg" type="audio/ogg" />

3.<source src="/media/Duniya_Ke_Ae_Musafir.mp3" type="audio/mpeg" />

4.<h1>Your Browser doesn't support audio tag</h1>

5. 

6.</audio>

প্রয়োগ দেখুন

** মজিলাতে mp3  সাপোর্ট করেনা তাই ogg ফরমেটে দিয়েছি তবে গুগল ক্রোমে mp3 টি চলবে।

** দেখুন দটি source ট্যাগ দিয়েছি অথচ একটি দেয়া উচিৎ ছিল বলে ভাবতে পারেন। না আমারটাই ঠিক আছে কেননা ব্রাউজার fallback ফরমেট মেথড ব্যবহার করে দেখে কোন ফরমেটটি সে সাপোর্ট করে। একটার পর একটা চেক করে দেখতে দেখতে যেটা সাপোর্টেড ফরমেট সেটা বাজানো শুরু করবে।

** type এট্রিবিউট টি ঐচ্ছিক তবে দিলে পারফমেন্স বাড়বে।

<audio> এর ভিতরে controls="controls" এভাবে দিতে পারেন অথবা আমি যেভাবে দিয়েছি সেটাও হবে। এটা হচ্ছে pause/play, sound ইত্যাদি প্লেয়ারে দেখাবে কিনা সেটার জন্য। এরপর controls এর মত  autoplay আরেকটা এট্রিবিউট আছে এটা দিলে অটোমেটিক মিউজিক প্লে হবে।

loop নামে একটা এট্রিবিউট আছে এটা দিলে মিউজিকটি একবার শেষ হলে আবার প্রথম থেকে শুরু হবে এভাবে ঘুরে ঘুরে বাজতে থাকবে।

preload নামের আরেকটা এট্রিবিউট আছে audio এলিমেন্টের জন্য এবং এটার ৩ রকম মান দেয়া যায়।

১. auto দিলে পেজ লোড হবার আগেই অডিটি ডাউনলোড করবে আগে

২. meta দিলে পেজ লোড হবার সাথে সাথে মেটাডেটা যেমন author ইত্যাদি লোড হবে।

৩. none দিলে মেটাডেটা কিংবা অডিও কোনটাই পেজের আগে লোড হবেনা।

** source ট্যাগটি না দিয়ে যদি audio ট্যাগে src এট্রিবিউট দিয়ে মিডিয়া ফাইলটির উৎস দেখিয়ে দেন তবু হবে।

এখন সমস্যা হল যেহেতু audio ট্যাগ সব ব্রাউজারে সাপোর্ট করেনা তাছাড়া mp3, ogg, wav ছাড়া অন্য ফরমেট চলেনা তাই সব ব্রাউজার কমপিটাবিলাটির জন্য আপাতত embed ট্যাগ ব্যবহার করতে পারেন। তবে এটার জন্য যেকোন মিডিয়া প্লেয়ার আপনার ব্রাউজারে ইনস্টল থাকতে হবে। সাধারনত VLC media player আপনার পিসিতে ইনস্টল থাকলে VLC Web Plugin নামে একটা ছোট্র প্লাগিন আপনার ব্রাউজারে অটোমেটিক ইনস্টল আছে।

1.<object width="300" height="42" type="audio/mpeg" data="audio/my_music.mp3">

2.<param name="src" value="/media/Duniya_Ke_Ae_Musafir.mp3" />

3.<embed src="/media/Duniya_Ke_Ae_Musafir.mp3" width="300" height="42">

4.</embed>

5.</object>

 

Video

audio ট্যাগের মত video নামে একটা ট্যাগ আছে এইচটিএমএল ৫ এ। এটা ভিডিও ওয়েব পেজে প্রদর্শনের জন্য। কোন প্লাগিন লাগেনা খুব সহজ। <img ট্যাগ দিয়ে ছবি দেখানোর মত। তবে audio ট্যাগের মতই video ট্যাগও ইন্টারনেট এক্সপ্লোরারে (IE 9 এর নিচে) সাপোর্ট করেনা।

এক লাইন কোড লিখেই ভিডিও পেজে দেখাতে পারেন যেমন

1.<video src="/media/can_you_say_apple.mp4" controls></video>

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

source ট্যাগ এখানেও ব্যবহার করতে পারেন, উপকার আগের টিউটোরিয়ালে যেটা বললাম সেটাই। ব্রাউজার ফরমেট চেক করে এবং সাপোর্ট না করলে পরেরটাতে যায় এভাবে যতগুলি source ট্যাগ থাকবে সব চেক করবে।

01.<video controls height="300" width="410" poster="/media/title_pic.png">

02. 

03.<source src="/media/Can you say banana.webm"

04. 

05.type='video/webm;codecs="vp8, vorbis"'/>

06. 

07.<source src="/media/can_you_say_apple.mp4"

08. 

09.type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>

10.<h1>Your browser doesn't support video tag</h1>

11.</video>

প্রয়োগ দেখুন

video এলিমেন্টে উপরে ৩টি এট্রিবিউট ব্যবহার করেছি। height এবং width তো দেখেই বোঝা যাচ্ছে এগুলি দিয়ে দৈর্ঘ প্রস্থ ঠিক করে দিয়েছি। poster এট্রিবিউট টি চমৎকার কাজের জিনিস। প্রথমে পিচ্চিটার জিহবা বের করা ছবিটা ভিডিওটির পোস্টার হিসেবে দিয়েছি। poster ব্যবহার করে আপনি ইচ্ছেমত ছবি দিতে পারেন।

এছাড়া muted নামে আরেকটা এট্রিবিউট আছে এটা দিলে (শুধু controls যেভাবে লিখেছি সেভাবে দিলেই হবে) শব্দ শোনা যাবেনা। বাকি সব এট্রিবিউটগুলি আগের টিউটোরিয়ালের মত।

** ৩টি ভিডিও ফরমেট সাপোর্ট করে - webm, ogg আর mp4

এখানেও embed এবং object ট্যাগ ব্যবহার করে ভিডিও দেখাতে পারেন যদি সব ব্রাউজারে দেখানো প্রয়োজন হয় যেমন

1.<object width="300" height="200" type="video/webm" data="/media/Can you say banana.webm">

2.<embed src="/media/Can you say banana.webm" width="300" height="200">

3.</embed>

4.</object>

অনলাইন এডিটরে দিয়ে দেখুন

embed কাজ করার জন্য যেকোন ভিডিও প্লেয়ার প্লাগিন ব্রাউজারে ইনস্টল থাকতে হয় যেমন vlc web plugin

** সবচেয়ে ভাল হবে যদি আপনি সবগুলি অপশন একসাথে এমনভাবে রাখেন যাতে কোন না কোন একটাতে ইউজারের ব্রাউজার ধরা পরবেই। এজন্য এইচটিএমএল ৫ এবং embed একসাথে রাখুন ফলে HTML 5 সাপোর্ট না করলে embed ট্যাগ কাজ করবে।

01.<video controls height="300" width="410" poster="/media/title_pic.png" autoplay>

02. 

03.<source src="/media/Can you say banana.webm"

04. 

05.type='video/webm;codecs="vp8, vorbis"'/>

06. 

07.<source src="/media/can_you_say_apple.mp4"

08. 

09.type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>

10. 

11.<object width="300" height="410" type="video/webm" data="/media/Can you say banana.webm">

12.<embed src="/media/Can you say banana.webm" width="300" height="410">

13.</embed>

14.</object>

15.</video>

এখানে embed এর ভিতর ঐ ফরমেট দিতে হবে যেটা সাধারনত সব ব্রাউজার সাপোর্ট করে যেমন ফ্লাশ দিতে পারেন তবে তার আগে ভিডিওটি এই ফরমেটে বানিয়ে নিতে হবে।

Body

body ট্যাগ এর আগের টিউটোলিয়ালগুলির প্রায় সব জায়গায় ব্যবহার করা হয়েছে। <body></body> এর ভিতরেই সব কনটেন্ট রাখতে হয়। ul, li, a, h1 ... h6, p, div এক কথায় সব এলিমেন্ট এর ভিতরে থাকবে html আর head এর ভিতর যে কয়েকটি এলিমেন্ট নির্দিষ্ট করা আছে সে কয়েকটি ছাড়া।

যেকোন ওয়েব পেজে যান এবং সেটার সোর্স কোড দেখুন, স......ব এলিমেন্ট body এর ভিতর দেখতে পাবেন। মজিলা ফায়ারফক্স দিয়ে সোর্স দেখার জন্য ওয়েব পেজের উপর রাইট বাটন ক্লিক করে "View Page Source" এ ক্লিক করুন তাহলে পেজটির পুরো এইচটিএমএল দেখতে পাবেন।

leftmargin, topmargin, text, background, bgcolor এরকম আরো বেশকিছু এট্রিবিউট ছিল body এলিমেন্টের জন্য তবে HTML 5 এ এখন এটা Deprecated (ডেপ্রিকেটেড অর্থ হচ্ছে এইচটিএমএল অর্গানাইজেশন আর এটার জন্য সাপোর্ট দিচ্ছেনা এবং শীঘ্রই এইচটিএমএল থেকে সমপূর্ন সরিয়ে ফেলা হবে তবে সরিয়ে ফেলার আগ পর্যন্ত ব্রাউজার সাপোর্ট করবে backward compitability এর জন্য)।

আরেকটা টেকনিকাল শব্দ আছে Obsolete. এর অর্থ হচ্ছে সম্পূর্ন সরিয়ে ফেলা। যখন কোন কিছু W3C specification থেকে Obsolete করা হয় তার কিছু আগে আগে জিনিসটি Deprecated করে দেয় (এইচটিএমএল অর্গানাইজেশন)

যাইহোক গ্লোবাল এট্রিবিউটগুলি body এলিমেন্টে ব্যবহার করা যাবে। আসলে সব এইচটিএমএল এলিমেন্টেই গ্লোবাল এট্রিবিউট ব্যবহার করা যায়। যেমন

dir : ডকুমেন্টের এলিমেন্টগুলির দিক নির্নয়ের জন্য। এর ৩টি মান দেয়া যায়

১. ltr দিলে বা থেকে ডানে টেক্টট দেখাবে যেমন আমাদের সাইটটি দেখাচ্ছে।

২. rtl দিলে লেখা ডান থেকে বামে দেখাবে যেমন আরবী, হিব্রু ভাষার সাইটগুলিতে দেখবেন

<body dir="rtl"> এমন থাকে

৩.  auto দিলে ব্রাউজার নিজেই বের করে নেয়ার চেষ্টা করবে যে কোন দিকে দেখাবে। এমন ভাষার যদি সাইট বানান যেটা বা থেকে ডানে নাকি ডান থেকে বামে হবে জানেন না তখন এটা ব্যবহার করতে পারেন।

id, class, style, lang (ভাষার জন্য যেমন বাংলা ভাষার সাইট বানালে দিতে হবে <body lang=''bn">) ইত্যাদি।

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title>HTML body element tutorial</title>

05. 

06.</head>

07.<body lang="en" id="main_container", style="background:#ddd;">

08. 

09.<h1>Webcoachbd demo heading</h1>

10. 

11.<p>demo content goes here.</p>

12. 

13.</body>

14.</html>

অনলাইন এডিটরে দিয়ে দেখুন।

এছাড়া HTML 5 নতুন কিছু এট্রিবিউট আছে এগুলি দিতে পারেন। dropzone, draggable, spellcheck ইত্যাদি। 

Div

div ট্যাগ (<div></div>) খুব গুরত্বপূর্ন একটি ট্যাগ এইচটিএমএল এর। এইচটিএমএল এর এলিমেন্ট এর ভিতরে রেখে section (খন্ড) তৈরী করা হয়। যতগুলি div ততগুলি খন্ড। একটা <div></div> এলিমেন্ট তার ভিতরে থাকা সব এলিমেন্টের জন্য পাত্র বা container হিসেবে কাজ করে।

লেআউট বানানোর জন্য div এর জুরি নেই। এইচটিএমএল এ লেআউটের জন্য টেবিল ব্যবহার শূন্যের কোঠায় চলে এসেছে বিভিন্ন কারনে। আর তাই div এখন লেআউট তৈরীর অবিচ্ছেদ্য উপাদান।

01.<div style="border:1px solid #f00">

02.<h1>HTML div tutorial in Webcoachbd</h1>

03.<p>Basically div layout designed by CSS</p>

04. 

05.</div>

06.<div style="border:1px solid #f00">

07.<h1>HTML div tutorial in Webcoachbd</h1>

08.<p>Basically div layout designed by CSS</p>

09. 

10.</div>

প্রয়োগ দেখুন

div দিয়ে কোড লেখার পর সিএসএস দিয়ে সেটা প্রয়োজনীয় আকৃতি দেয়া হয়। সিএসএস টিউটোরিয়ালে এসব আলোচনা হবে।

এখানে শুধু জেনে রাখুন div একটি অন্যান্য এ্ইচটিএমএল এলিমেন্টের মত একটা এলিমেন্ট । এটা ব্লক লেভেল এলিমেন্ট। align নামে একটা এট্রিবিউট ব্যবহার করা যায় তবে HTML 5 এটা deprecated, আসলে align এট্রিবিউটের সব কাজ সিএসএস দিয়ে করা যায় বা করা য়।

এখানে ইনলাইন সিএসএস লিখেছি (style="border:1px solid #ddd") এরুপ সিএসএস দিয়ে সুন্দর সুন্দর লেআউট বানানো যায়।

01.<div style="float:left;background:yellow;width:100%;">

02.<ul>

03.<li>item1</li>

04.<li>item 2</li>

05.</ul>

06.</div>

07.<div style="border:1px solid #f00; float:left ;width:48% ">

08. 

09.<h1>HTML div tutorial in Webcoachbd</h1>

10. 

11.<p>Basically div layout designed by CSS</p>

12. 

13.</div>

14. 

15.<div style="border:1px solid #f00; float:left;width:48%;margin-left:5px">

16. 

17.<h1>HTML div tutorial in Webcoachbd</h1>

18. 

19.<p>Basically div layout designed by CSS</p>

20. 

21.</div>

22.<div style="background:#000;width:100%;float:left;color:#fff;text-align:center;">

23.Copyright © Webcoachbd

24.</div>

প্রয়োগ দেখুন

div এ গ্লোবাল (যেমন id, class, style, dir etc) এবং ইভেন্ট এট্রিবিউট (যেমন onmouseover, dblclick etc) ব্যবহার করা যাবে।