HTML Audio
আগে embed ট্যাগ দিয়ে অডিও দিলে ব্রাউজার এ প্লাগিন ইন্সটল
থাকতে হত। কিন্তু এইচটিএমএল ৫ এর <audio>
এলিমেন্ট টি ব্যাবহার করে খুব সহজে ওয়েব পেজে অডিও
দেয়া যায়।
Internet
Explorer: MP3
Chrome: MP3,Wav,Ogg
Firefox:
MP3,Wav,Ogg
Safari:
MP3,Wav
Opera:
MP3,Wav,Ogg
<audio>: ওয়েব পেজে অডিও যুক্ত করতে এই এলিমেন্ট ব্যাবহার করা হয়।
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Audio</title>
</head>
<body>
<audio src=”audio/htmlaudio.ogg” control
autoplay>
<p> This is audio file and play automatically
</p>
</audio>
</body>
</html>
src: অডিও ফাইল যুক্ত করতে
ব্যাবহার করা হয়েছে।
controls : ব্রাউজার তার নিজস্ব প্লেয়ার এ অডিও প্রদর্শন করে ।এক্ষেত্রে এক এক ব্রাউজার এক এক
ভাবে দেখাবে।
ব্রাউজার এর নিজস্ব প্লেয়ার
এ অডিও চালু হয় এবং play/pause/etc বাটন তৈরি হয়।
autoplay: এই অ্যাট্রিবিউট ব্যাবহার করলে পেজ লোড হবার সাথে সাথে
অটোমেটিকালি অডিও চালু হবে।
loop: loop অ্যাট্রিবিউট এর কাজ হল এটা অডিও একবার শেষ হলে আবার প্রথম
থেকে শুরু হবে।
preload: autoplay
attribute ব্যাবহার না করা হলে তখন preload ব্যাবহার করা হয়।এর তিনটি
মান আছে। none, auto, metadata
none: অডিওটি ডাউনলোড করতে ব্রাউজার কে নিষেধ করবে।
auto: পেজ লোড হবার আগেই অডিও ডাউনলোড করবে।
metadata: অডিওর মেটা ডাটা যেমন অডিওর দৈর্ঘ্য বা ফরম্যাট (length or format)ইত্যাদি লোড হবে।
HTML Video
সাধারন আলোচনাঃ
এইচটিএমএল ৫ এর আগে জটিল
কোড ব্যাবহার করে ভিডিও দেয়া হত।তখন খুব
জটিল কোড লিখতে হত।আগে embed ট্যাগ দিয়ে ভিডিও
দিলে ব্রাউজার এ প্লাগিন ইন্সটল থাকতে হত। কিন্তু এইচটিএমএল ৫ এর <video> এলিমেন্ট টি ব্যাবহার করে খুব সহজে ওয়েব পেজে ভিডিও দেয়া
যায়।<video>এলিমেন্ট শুধু মাত্র নতুন ব্রাউজার এ সাপোর্ট করবে।পুরানো
ব্রাউজার এ সাপোর্ট করবে না । তাই এইচটিএমএল ৫ এর <video> এর সাথে <embed>
বা <object> এলিমেন্ট দিয়েও ভিডিও দেবার প্রয়োজন হবে।
আবার সব ব্রাউজার এ সব
ধরনের ভিডিও ফরম্যাট সাপোর্ট করে না।
MP4 : Safari 3+ , Internet Explorer 9+ , Chrome
OGG : Firefox 3.5+ ,Chrome 3+ ,Opera 10.5+
WebM : Firefox 4+ ,Chrome 6+ ,Opera 10.6+
<video>: ওয়েব পেজে ভিডিও যুক্ত করতে এই এলিমেন্ট ব্যাবহার করা হয়।
<!DOCTYPE html>
<html>
<head>
<title> HTML5 Video Add</title>
</head>
<body>
<video src="video/watelily.mp4" poster="images/waterlily.jpg"
width="400" height="300" preload
controls loop>
<p>A video of a waterlily</p>
</video>
</body>
</html>
src: ভিডিও ফাইল যুক্ত করতে
ব্যাবহার করা হয়েছে।
poster: poster ব্যাবহার করে ভিডিও এর উপরে আপনি আপনার ইচ্ছা মত যে কোন
পোস্টার দিতে পারবেন।
width, height : প্লেয়ার এর দৈর্ঘ্য ও প্রস্থ পিক্সেল এ প্রকাশ করতে
ব্যাবহার করা হয়।
controls : ব্রাউজার তার নিজস্ব প্লেয়ার এ ভিডিও প্রদর্শন করে ।এক্ষেত্রে এক এক ব্রাউজার এক এক
ভাবে দেখাবে। জাভাস্ক্রিপ্ট ব্যাবহার করতে হবে যদি আপনি ইচ্ছামত কোন ভিডিও প্লেয়ার
প্রদর্শন করাতে চান।
ব্রাউজার এর নিজস্ব প্লেয়ার
এ ভিডিও চালু হয় এবং play/pause/etc বাটন তৈরি হয়।
muted : এটা দিলে ভিডিও চলবে
কিন্তু কোন শব্দ শুনতে পারবে না।
autoplay: এই অ্যাট্রিবিউট ব্যাবহার করলে পেজ লোড হবার সাথে সাথে
অটোমেটিকালি ভিডিও চালু হবে।
loop: loop অ্যাট্রিবিউট এর কাজ হল এটা ভিডিও একবার শেষ হলে আবার প্রথম
থেকে শুরু হবে।
preload: autoplay
attribute ব্যাবহার না করা হলে তখন preload ব্যাবহার করা হয়।এর তিনটি
মান আছে। none, auto, metadata
none: ভিডিওটি ডাউনলোড করতে ব্রাউজার কে নিষেধ করবে।
auto: পেজ লোড হবার আগেই ভিডিও ডাউনলোড করবে।
metadata: ভিডিওর মেটা ডাটা যেমন ভিডিওর দৈর্ঘ্য বা ফরম্যাট (length or format)ইত্যাদি লোড হবে।
<source>:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Video Sources</title>
</head>
<body>
<video poster="images/ watelily.jpg"
width="400"height="320" preload controls loop>
<source src="video/ watelily.mp4"
type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
<source src="video/ watelily.webm"
type='video/webm;codecs="vp8, vorbis"' />
<p>A video of a watelily </p>
</video>
</body>
</htm
সব ব্রাউজার এ সব ধরনের
ভিডিও ফরম্যাট সাপোর্ট করে না । <source>
এলিমেন্ট ব্যাবহার করে আপনি একই ভিডিওর অনেক
ফরম্যাট একসাথে ব্যাবহার করতে পারবেন।ব্রাউজার এ
যে ফরম্যাট সাপোর্ট করবে সেটাই
চলবে।ব্রাউজার fallback ফরমেট মেথড
ব্যবহার করে নিজের থেকে খুজতে শুরু
করবে কোন ফরম্যাট টা সাপোর্ট করবে এবং সেটা চালু করে দেখাবে। ধরুন iPad এর জন্য MP4
video format লাগবে নতুবা এটা চালু হবে
না। তখন এই <source> এলিমেন্ট ব্যাবহার করতে হবে।কারন আবার অনেক ব্রাউজার থাকতে
পারে যেখানে MP4 সাপোর্ট করবে না ,সাপোর্ট করবে webm।
source গ্লোবাল ও ইভেন্ট
অ্যাট্রিবিউট সাপোর্ট করে।
type এট্রিবিউটটি দিলেও হবে না দিলেও সমস্যা নাই। তবে দিলে পারফমেন্স বাড়বে।
codecs: type attribute এর ভিতরে সঙ্কেতাক্ষরে ভিডিও সরবরাহ
করতে ব্যাবহার করা হয়। যদি ব্রাউজার <video> এলিমেন্টে রাখা ভিডিও ফরম্যাট
সাপোর্ট না করে তাই codecs ব্যাবহার করে ভিডিওর ফরম্যাট লিখে দেয়া হয়।এবং
ব্রাউজারে ভিডিও সাপোর্টের জন্য সহায়তা করে।
subtitles : <track> দিয়ে ভিডিওতে কোন লেখা যোগ করতে ব্যাবহার করা
হয়। webVTTfile করে সাবটাইটেল দেয়া হয়।
HTML Head
Head এলিমেন্টের ভিতরে এইচটিএমএল এর গুরুত্বপূর্ণ ট্যাগ সমূহ থাকে।যেমন <title>,
<style>, <meta>, <link>, <script>, and <base>
<Isindex> ইত্যাদি।এসব ট্যাগ দিয়ে পেজ সম্পর্কিত তথ্য প্রদর্শন করা হয়। এমনকি SEO এর কাজও করা হয়ে থাকে। Head Section এর ভিতরের লেখা কোন কিছু ব্রাউজারে প্রদর্শিত হয়
না।
Title(শিরোনাম) :
একটা ডকুমেন্টের শিরোনাম লিখতে ব্যাবহার করা হয়। <title> </title> ট্যাগ ব্যাবহার করে একটা
পেজের শিরোনাম যোগ করা হয়।এই শিরোনাম সার্চ ইঞ্জিন এর জন্য অনেক জরুরী।
<title> </title> ট্যাগ ব্যাবহার করে কিছু যুক্ত করলে সেটা ব্রাউজার এর title bar এ পেজের title (শিরোনাম) হিসেবে
প্রদর্শিত হবে।
<title> Web design tutorial</title> এভাবে লিখতে হয়।
তাহলে Web design tutorial লেখাটা ব্রাউজার এর title এ দেখাবে।
পেজ title বা শিরোনাম দেয়া খুব জরুরি।একটা valid html document এর জন্যও এটা দরকার।
আপনি যে বিষয়ের উপর ওয়েব পেজ বানাবেন সে বিষয়ের সাথে মিল রেখে শিরোনাম দিবেন।
যাতে ব্যাবহারকারি (visitor) title দেখেই পেজ সম্পর্কে ধারনা পেতে পারে।যেমন আপনি একটা বাংলা
ব্লগ টিউটোরিয়াল পেজ খুললেন তাহলে আপনি শিরোনাম দিতে পারেন এভাবে –
<title> Bangla Blog Tutorial</title> এভাবে পেজের সাথে মিল রেখে
শিরোনাম দিলে সার্চ ইঞ্জিন সহজে আপনার পেজকে indexing করবে এবং ব্যাবহারকারিও
উপকৃত হবে।
তাই বলা যায় ওয়েব পেজের জন্য title ট্যাগ ব্যাবহার করে পেজের
শিরোনাম দেয়া অতি জরুরি।
<html>
<title>Title in here</title>
<body>
<p>web design tutorial page</p>
</body>
</html>
Link (লিংক) :
Head Section এর ভিতরের যে link ট্যাগটি ব্যাবহার করা হয়
সেটা দিয়ে css style sheet এর সাথে লিংক করা হয়।
<link
rel="stylesheet" type="text/css"
href="styles.css" />
<!DOCTYPE html>
<html>
<title>Title in here</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<body>
<p>This is a paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<title>Title in here</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<body>
<p>This is a paragraph.</p>
</body>
</html>
Style (স্টাইল) :
এটা দিয়ে এইচটিএমএল
ডকুমেন্টের ভিতরে মানে inline style ব্যাবহার করার জন্য লেখা হয়।
<html>
<head>
<title>Title
in here</title>
<style>
body
{background-color:green;}
p
{color:red;font-size:30px;}
</style>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
এখানে style ব্যাবহার করে Head Section এর ভিতরের body {background-color:green;} দিয়ে ব্যাকগ্রাউন্ড কালার
গ্রীন করে দেয়া হয়েছে। p {color:red;font-size:30px;}
দিয়ে p এর সাইজ ও কালার পরিবর্তন
করা হয়েছে।
Script (স্ক্রিপ্ট) :
বিভিন্ন script যেমন javascript ,jquary
ইত্যাদি যুক্ত করতে <script> ট্যাগ ব্যাবহার করা
হয়।
<!DOCTYPE
html>
<html>
<title>Page
title in here</title>
<script>
function
myFunction() {
document.getElementById("demo").innerHTML =
"Javascript";
}
</script>
<body>
<h1> Web
design tutorial </h1>
<p
id="demo">Paragraph</p>
<button
type="button" onclick="myFunction()">Click
me</button>
</body>
</html>
আবার আপনি আলাদা script ফাইল লিখেও এইচটিএমএল এ
লিংক বা যুক্ত করে দিতে পারেন।
<script
type="text/javascript" src="jquery.js"></script>
<script
type="text/javascript"
src="sliding_effect.js"></script>
এভাবে Head Section এর ভিতরের লিখতে হয়।
Meta (মেটা) :
আপনি একটা ওয়েব পেজ বানালেন
কিন্তু সেটা কারো কাছে পৌছাতে পারলেন না।সার্চ ইঞ্জিনে সার্চ করে কেউ পেলোনা।আপনার
কাঙ্খিত ভিজিটর আসল না ।তাহলে আপনার সব কষ্টই বৃথা গেল।
মেটা ট্যাগ ব্যাবহার করে
একটা ওয়েব সাইটকে সার্চ ইঞ্জিনের টপে(Top) আনা যায়। আর এতে ব্যাবহারকারি
সার্চ করে সহজে আপনার ওয়েব সাইটটা পেয়ে যাবে , আপনার সাইটের ইউজার বাড়বে।
Seo (সার্চ ইঞ্জিন
অপটিমাইজেশন) ওয়েব সাইটের জন্য একটা অতি গুরুত্বপূর্ণ বিষয়।
মেটা ট্যাগ দিয়ে পেজের
বর্ণনা , লেখকের নাম এবং আরও অনেক মেটাডেটা লেখা হয়ে থাকে।যা সার্চ ইঞ্জিন
অপটিমাইজেশন এর জন্য দরকার।
মেটা ট্যাগের কোন শেষ ট্যাগ
নেই।
মেটা ট্যাগের সাধারণ গঠন :-
<meta name=”metaname” content=”metacontent”>
<meta name=”metaname” content=”metacontent”>
১. <meta name=”Developer” content=”akram”>
দেখুন এখানে name ও content attribute
ব্যাবহার করে ওয়েব Developer এর নাম দেয়া হয়েছে।ভিজিটর Developer এর নামে সার্চ দিতে পারে।তাই হেড এর ভিতরে মেটা ট্যাগে Developer এর নাম লেখা হয়েছে।
২. <meta name=”keywords” content=”HTML , CSS , Javascript , PHP , jQuary ,
MySql , Tips & Tricks”>
এখানে পেজের keywords গুলো দেয়া হয়েছে
সার্চ ইঞ্জিন এর জন্য।
৩.<meta name=”description” content=”Free
Bangla Web Design Tutorial ”>
নাম্বার ৩ এ ওয়েব পেজের সংক্ষিপ্ত একটা বিবরণ দেয়া হয়েছে।
৪. <meta name=”author”
content=”ovi ahmed”>
এখানে author দিয়ে লেখকের নাম
জুড়ে দেয়া হয়েছে।
৫.আপনি যদি চান
আপনার ওয়েব পেজটা নির্দিষ্ট সময় পর পর Refresh (পুনঃলোড) হবে তাহলে সেটাও
আপনি মেটা ট্যাগ ব্যাবহার করে দিতে পারবেন।
<meta http-equiv=”refresh”
content=”60”>
(৬০ সেকেন্ড পর পর
আপনার পেজটা refresh হবে। )
৬. আপনি যদি চান
আপনার নির্দিষ্ট সময় পরে আপনার পেজ আপডেট করতে তখনও আপনি মেটা ট্যাগ ব্যাবহার করে
এই কাজটা করতে পারেন।
<meta http-equiv=”expires”
content=”sun.01 jan,2016,12.00AM,GMT”>
এর কারনে 1 jan এর পরে ব্রাউজার
সার্ভার থেকে নতুন ডকুমেন্ট কপি করে আনবে।
এতে সদস্যতা:
মন্তব্যসমূহ (Atom)