সবাই কেমন আছেন? আশা করি ভাল আছেন। আজ আমি আলোচনা করব এইচটিএমএল ৫ সম্পর্কে। আপনারা হয়তো জানেন এইচটিএমএল ৫, সিএসএস ৩, জেকুয়ারি দিয়ে এখন অনেক সুন্দর ওয়েবপেজ ডিজাইন করা হচ্ছে। আসলে জেকুয়ারি সামনে হয়তো ফ্ল্যাশ কে পুরোপুরি বিদায় দিয়ে দেবে। তো আসুন আজ আমরা শিখে নেই কিছু এইচটিএমএল ৫ কোড সম্পর্কে।
এইচটিএমএল ৪ যেহেতু SGML এর উপর ভিত্তি করে তৈরি করা হয়েছিল তাই তখন DTD এর রেফারেন্স লেখতে হত।কিন্তু এইচটিএমএল ৫ তা দেখানো লাগে না।
<!DOCTYPE html></div>
এখানে আপনি একটা ইমেজ এর ভিতর এর ক্ষুদ্র অংশের ইমেজ বড় করে দেখাতে পারবেন।
<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>
এই লিঙ্ক টা দেখলে আরো ভাল করে বুজতে পারবেন।
আপনি কোন কিছু যেমন একটি ফ্ল্যাশ ভিডিও যোগ করতে চাইলে শুধু এই ট্যাগ টা ব্যবহার করতে পারবেন।
<embed src="helloworld.swf" />
কোন রাইটার এর ইনফর্মেশন দেখানোর জন্য এটি ব্যবহার হয়। এটি ইটালিক ভাবে লেখাটি দেখাবে।
<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>
সবচেয়ে মজার ব্যাপার হল আপনি কোন ফ্ল্যাশ প্লেয়ার ছাড়াই ওয়েবপেজ এ অডিও চালাতে পারবেন।
<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>
কোন প্লেয়ার ছাড়াই ওয়েবপেজ এ ভিডিও চালাতে পারবেন। তবে শুধু 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>
ওয়েবপেজ এ ক্যানভাস আঁকার জন্য এটি ব্যবহার করতে পারেন।
<canvas id="myCanvas" width="200" height="100"></canvas>
ওয়েবপেজ এ সিএসএস ছাড়াই সার্কেল আঁকার জন্য এটি ব্যবহার করতে পারেন।
<!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>
এইচটিএমএল ৫ এ সিএসএস ৩ ব্যবহার করে কোন ইমেজ কে rotate করতে পারবেন।
{
transform:rotate(30deg);
}
কোন ইমেজ ড্রাগ অ্যান্ড ড্রপ করতে করা যাবে এইচটিএমএল ৫ এ
এটার কোড না দিয়ে লিঙ্ক ই দিলাম যাতে ভাল করে বুজতে পারেন।
সবচেয়ে মজার ব্যাপার হল আপনি চাইলেই আপনার ওয়েবপেজ এ আপনার লোকেশান দেখতে পারবেন ম্যাপ এ।
<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>
এইচটিএমএল ৫ দিচ্ছে আপনাকে অফলাইন Browsing এর সুবিধা। এটি আপনার ওয়েবপেজকে Cache করবে পরবর্তীতে দেখার জন্য।
বিস্তারিতঃ লিঙ্ক
এছাড়াও এইচটিএমএল ৫ এ নতুন অনেক Element আছে যা আপনি নিজে নিজেই শিখে নিতে পারবেন। আজ আর নয়। পরবর্তীতে আবারো নতুন কিছু নিয়ে আসার চেষ্টা করব। আপনারা ভাল থাকবেন।
Source: http://www.w3schools.com
আমি parag44। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 3 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 6 টি টিউন ও 41 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।
কালার কোড সাপোর্ট করবে কয়টি। আমরা জানি এইচটিএমএল এ ২৫৬ কালার সাপোর্ট করে। হেক্সা কোডে। বিস্তারিত জানতে চাচ্ছি। ধন্যবাদ!!!
@মোঃ আসিফ- উদ-দৌলাহ্: এইচটিএমএল ৫ এ ও আপনার সব কালার কোড সাপোর্ট করবে। বিস্তারিত দেখুন http://www.tutorialspoint.com/html5/html5_color_code_builder.htm
বিভিন্ন প্রোগ্রামিং ল্যাঙ্গুয়েজের কোড যেমন HTML, CSS, JS, PHP ইত্যাদি কোড সুন্দর ও সঠিক ভাবে দেখাতে টেকটিউনসের রয়েছে নিজেস্ব “কোড হাইলাইটার”। টেকটিউনসের “কোড হাইলাইটার” কিভাবে ব্যবহার করতে হয় তা জানতে এই টিউনটি https://www.techtunes.io/?p=77692 দেখুন।
![jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব](https://dnc.techtunes.io/tDrive/tuner/2018/04/techtunes_fee81aa370998cccf57ea2d7dc08eaa8-368x207.jpg "jQuery for Web Design [পর্ব-০৪] :: jQuery এর FadeIn FadeOut মেথড জানবো ও ব্যবহার করে দেখব")
vai khub kaj er jennes