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

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

HTML5 <!DOCTYPE>

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

<!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

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

<embed src="helloworld.swf" />

HTML5 <address> Tag

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

<address>
Written by <a href="mailto:[email protected]">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

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

<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 আছে যা আপনি নিজে নিজেই শিখে নিতে পারবেন। আজ আর নয়। পরবর্তীতে আবারো নতুন কিছু নিয়ে আসার চেষ্টা করব। আপনারা ভাল থাকবেন।

Source: http://www.w3schools.com

Level 0

আমি parag44। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 10 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 6 টি টিউন ও 41 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


টিউনস


আরও টিউনস


টিউনারের আরও টিউনস


টিউমেন্টস

vai khub kaj er jennes

Level 0

Thanks

Valo tune. Vi ebook akare cai html5 er bangla tutorial.

কালার কোড সাপোর্ট করবে কয়টি। আমরা জানি এইচটিএমএল এ ২৫৬ কালার সাপোর্ট করে। হেক্সা কোডে। বিস্তারিত জানতে চাচ্ছি। ধন্যবাদ!!!

Level 0

বিভিন্ন প্রোগ্রামিং ল্যাঙ্গুয়েজের কোড যেমন HTML, CSS, JS, PHP ইত্যাদি কোড সুন্দর ও সঠিক ভাবে দেখাতে টেকটিউনসের রয়েছে নিজেস্ব “কোড হাইলাইটার”। টেকটিউনসের “কোড হাইলাইটার” কিভাবে ব্যবহার করতে হয় তা জানতে এই টিউনটি https://www.techtunes.io/?p=77692 দেখুন।

    Level 0

    @.: ধন্যবাদ মেহেদী ভাই। জানা ছিল না ব্যাপারটা।

Level 0

হম জোস