Gobd9: আপনার ওয়েবসাইটকে আকর্ষণীয় করুন এইচটিএমএল ৫ (HTML 5) দ্বারা

Thursday, March 23, 2017

আপনার ওয়েবসাইটকে আকর্ষণীয় করুন এইচটিএমএল ৫ (HTML 5) দ্বারা

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

HTML5 <!DOCTYPE>

এইচটিএমএল ৪ যেহেতু SGML এর উপর ভিত্তি করে তৈরি করা হয়েছিল তাই তখন DTD এর রেফারেন্স লেখতে হত।কিন্তু এইচটিএমএল ৫ তা দেখানো লাগে না।

1	`<!DOCTYPE` `html></div>`

HTML5 <area> Tag

এখানে আপনি একটা ইমেজ এর ভিতর এর ক্ষুদ্র অংশের ইমেজ বড় করে দেখাতে পারবেন।

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />
 
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

এই লিঙ্ক টা দেখলে আরো ভাল করে বুজতে পারবেন।

HTML5 <embed> Tag

আপনি কোন কিছু যেমন একটি ফ্ল্যাশ ভিডিও যোগ করতে চাইলে শুধু এই ট্যাগ টা ব্যবহার করতে পারবেন।

1	`<embed` `src="helloworld.swf"` `/>`

HTML5 <address> Tag

কোন রাইটার এর ইনফর্মেশন দেখানোর জন্য এটি ব্যবহার হয়। এটি ইটালিক ভাবে লেখাটি দেখাবে।

<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br />
Visit us at:<br />
Example.com<br />
Box 564, Disneyland<br />
USA
</address>

HTML5 <audio> Tag

সবচেয়ে মজার ব্যাপার হল আপনি কোন ফ্ল্যাশ প্লেয়ার ছাড়াই ওয়েবপেজ এ অডিও চালাতে পারবেন।

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mp3" />
Your browser does not support the audio tag.
</audio>

HTML5 Video

কোন প্লেয়ার ছাড়াই ওয়েবপেজ এ ভিডিও চালাতে পারবেন। তবে শুধু mp4 and ogg চালাতে পারবেন।

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

HTML5 Canvas

ওয়েবপেজ এ ক্যানভাস আঁকার জন্য এটি ব্যবহার করতে পারেন।

1	`<canvas` `id="myCanvas"` `width="200"` `height="100"></canvas>`

HTML5 SVG

ওয়েবপেজ এ সিএসএস ছাড়াই সার্কেল আঁকার জন্য এটি ব্যবহার করতে পারেন।

<!DOCTYPE html>
<html>
<body>
 
<h1>My first SVG</h1>
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="50" stroke="black" stroke-width="2" fill="green" />
</svg>
 
</body>
</html>

CSS3 in HTML5

এইচটিএমএল ৫ এ সিএসএস ৩ ব্যবহার করে কোন ইমেজ কে rotate করতে পারবেন।

CSS3 Example

{
transform:rotate(30deg);
}

HTML5 Drag and Drop

কোন ইমেজ ড্রাগ অ্যান্ড ড্রপ করতে করা যাবে এইচটিএমএল ৫ এ

এটার কোড না দিয়ে লিঙ্ক ই দিলাম যাতে ভাল করে বুজতে পারেন।

HTML5 Geolocation

সবচেয়ে মজার ব্যাপার হল আপনি চাইলেই আপনার ওয়েবপেজ এ আপনার লোকেশান দেখতে পারবেন ম্যাপ এ।

<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
}
</script>

HTML5 Application Cache

এইচটিএমএল ৫ দিচ্ছে আপনাকে অফলাইন Browsing এর সুবিধা। এটি আপনার ওয়েবপেজকে Cache করবে পরবর্তীতে দেখার জন্য।

বিস্তারিতঃ লিঙ্ক

এছাড়াও এইচটিএমএল ৫ এ নতুন অনেক Element আছে যা আপনি নিজে নিজেই শিখে নিতে পারবেন। আজ আর নয়। পরবর্তীতে আবারো নতুন কিছু নিয়ে আসার চেষ্টা করব। আপনারা ভাল থাকবেন।

Gobd9