এইচ টি এম এল ৫ ওয়েব ডিজাইন এবং ডেভলপমেন্ট এর ক্ষেত্রে নতুন দিগন্ত সৃষ্টির প্রত্যয় নিয়ে ইতোমধ্যেই আমাদের মাঝে চলে এসেছে। এর ক্যানভাস ইলিমেন্ট এর মাধ্যমে খুব সহজেই আকর্ষণীয়ভাবে নিজের সৃজনশীলতাকে গ্রাফিক্স এর মাধ্যমে উপস্থাপন করা যায়। আশা করা যাচ্ছে ওয়েব ডেভলপারদের ফটোশপের উপর নির্ভরশীলতা কমিয়ে আনতে এইচ টি এম এল ৫ অনেক বেশি সহায়ক হবে। আনেক দিন হল সৃজনশীল তেমন কিছু করা হচ্ছে না।
টিউটোরিয়াল লেখতে লেখতে কেমন যেন এক ঘেয়েমি মনে হচ্ছে।তাই ভাবলাম ছোটখাটো নতুন কিছু চেষ্টা করা যাক। এইচ টি এম এল ৫ এর ক্যানভাস ইলিমেন্ট এর মাধ্যমে লাইন ড্রইং এর বিষয়টা মাথায় এল, ভাবলাম এটা দিয়ে একটা ঘরের মডেল ডিজাইন করা যেতে পারে। তৈরি করে ফেললাম একটা সাধারণ ঘরের মডেল।
একবার দেখে নেয়া যাক এইচ টি এম এল ৫ দিয়ে ডিজাইন করা ঘরের মডেলটি।
অনুশীলণ প্রজেক্ট
[sourcecode language=”js”]
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
background:#099;
}
#myHouse {
border: 1px solid #9C9898;
margin:15px;
background:#F99;
}
h2{color:#fff;}
</style>
<script>
window.onload = function() {
var canvas = document.getElementById("myHouse");
var context = canvas.getContext("2d");
//left roof
context.beginPath();
context.moveTo(100,100);
context.lineTo(300, 10);
context.stroke();
//right roof
context.beginPath();
context.moveTo(300,10);
context.lineTo(500, 100);
context.stroke();
// roof ground
context.beginPath();
context.moveTo(100,100);
context.lineTo(500, 100);
context.stroke();
//left side
context.beginPath();
context.moveTo(200,100);
context.lineTo(200, 180);
context.stroke();
//right side
context.beginPath();
context.moveTo(400,100);
context.lineTo(400, 180);
context.stroke();
//top floor
context.beginPath();
context.moveTo(100,180);
context.lineTo(500, 180);
context.stroke();
//ground floor
context.beginPath();
context.moveTo(100,198);
context.lineTo(500, 198);
context.stroke();
//floor left side
context.beginPath();
context.moveTo(100,180);
context.lineTo(100, 198);
context.stroke();
//floor rite side
context.beginPath();
context.moveTo(500,180);
context.lineTo(500, 198);
context.stroke();
//door left side
context.beginPath();
context.moveTo(260,110);
context.lineTo(260, 170);
context.stroke();
//door right side
context.beginPath();
context.moveTo(340,110);
context.lineTo(340, 170);
context.stroke();
//door top
context.beginPath();
context.moveTo(260,110);
context.lineTo(340, 110);
context.stroke();
//door down
context.beginPath();
context.moveTo(260,170);
context.lineTo(340, 170);
context.stroke();
};
</script>
</head>
<body>
<center>
<canvas id="myHouse" width="578" height="300"></canvas>
<h2> A Simple House made by HTML 5.</h2>
</center>
</body>
</html>
[/sourcecode]
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
এইচ টি এম এল অংশে <canvas id=”myHouse” width=”578″ height=”300″></canvas> দ্বারা ক্যানভাস ডিজাইন করা হয়েছে । অর্থাৎ ক্যানভাসটির উচ্চতা এবং চওড়া কতটুকু হবে তা নির্ধারণ করা হয়েছে। ক্যানভাস ইলিমেন্ট বা ক্যানভাস ট্যাগ <canvas></canvas> অন্যান্য এইচ টি এম এল ট্যাগ যেমন <div> <p> ইত্যাদির মতই কাজ করে কিন্তু পার্থক্য হচ্ছে এর কনটেন্ট সমূহ জাভাস্ক্রিপ্টের সাহয্য নিয়ে এক্সিকিউট হয়।
[sourcecode language=”js”]
window.onload = function() {
var canvas = document.getElementById("myHouse");
var context = canvas.getContext("2d");
[/sourcecode]
এই কোডটুকু যুক্ত করা হয়েছে আমরা যেন ক্যানভাস DOM অবজেক্টকে id দ্বারা একসেস করতে পারি। আমরা <canvas></canvas> এর জন্য id=”myHouse” অনুরূপ আইডি নির্ধারণ করেছি।
[sourcecode language=”js”]
context.beginPath();
context.moveTo(100,100);
context.lineTo(300, 10);
context.stroke();
[/sourcecode]
প্রতিটা লাইন তৈরির জন্য উপরের কোডটুকুর অনুরূপ কোড ব্যবহার করা হয়েছে।পুরো ঘরটি তৈরি করতে মোট ১৩ টি লাইন তৈরি করতে হয়েছে।
context.beginPath(); এর মাধ্যমে ড্রইং এর জন্য একটা পাত তৈরি করা হয়েছে।
সহজ ভাবে উপস্থাপন করলে বলা যায়, context.moveTo(100,100); এর মাধ্যমে প্রতিটা লাইনের শুরুর বিন্দুটির স্থানাংক নির্ধারণ করা হয়েছে। স্থানাংক হিসাব করতে হবে বাম দিকে উপরেরে কর্ণার থেকে।
context.lineTo(300, 10); এর মাধ্যমে প্রতিটা লাইনের শেষ বিন্দুটির স্থানাংক নির্ধারণ করা হয়েছে।এক্ষেত্রেও স্থানাংক হিসাব করতে হবে বাম দিকে উপরেরে কর্ণার থেকে।
context.stroke(); এর মাধ্যমে প্রতিটা লাইনের কালার নিধারণ করা হয়। এখানে কোন কালার নির্ধারণ করা হয় নি তাই কালার কালো দেখাচ্ছে।
কোন কালার নির্ধারণ করতে হলে context.strokeStyle = “#ff0000”; এর অনুরূপ কোডে context.stroke(); এর পাশাপাশি যুক্ত করতে হবে।
………………………………………………………………………………..
জ্ঞন বিজ্ঞানের সংস্পর্শে আলোকিত একটা সুন্দর সমৃদ্ধ পৃথিবীর প্রত্যাশায় আজ এখানেই শেষ করছি। সকলের জন্য শুভকামনা রইল।
এইচটিএমএল৫ নিয়ে বাংলাদেশে তেমন লেখালেখি নাই।
প্রোজেক্টটি খুব সুন্দর হয়েছে। ধন্যবাদ।
মাহবুব ভাই কেমন আছে? আপনি কি বলতে পারবেন আমি কোন ইমেল-এ টিউটোরিয়াল বিডিতে রেজিট্রেষণ করেছিলাম?
ধন্যবাদ মাহাবুব ভাই, আর একটা প্রজেক্ট নিয়ে কাজ করছি; একটা টেক্সট বাবল তৈরির চেষ্টা করছি। সফল হলে এটা নিয়ে একটা পোস্ট দেব।
HTML5 দিয়ে বাড়ি ।অসাধারণ টিউন হইসে দাদা । চেষ্টা করে দেখতে হবে ।
ধন্যবাদ দেবাশীষ দা। tune অর্থ হচ্ছে সুর, সুতরাং দাদা, আমার কাছে মনে হয়, আমাদের এখানে টিউন না বলে টিউটোরিয়াল বলা উচিৎ, তাই নয় কি? আপনার জন্য শুভ কামনা রইল।
AWESOME POST. EVERY POST IS VERY MUCH HELPFUL FOR OTHERS. SO, IT’S NOT TO TELL YOU DESERVE THANKS FOR MANY TIMES. SIMPLY SAY THAT YOU DO BRILLIANT FOR THOSE WHO WANTS TO KNOW. JUST CARRY ON.AGAIN THANKS. WISH YOU ALL THE BEST.
ধ্রুব ভাই, একটু কষ্ট করে বাংলায় মন্তব্য লেখলে ভাল হয়। আমরা আসলে বাংলা ভাষায় বিজ্ঞান ও প্রযুক্তি এবং শিক্ষা বিস্তারে জন্য কাজ করছি। আর আমাদের প্রচেষ্টাকে সফল করার জন্য আপনাদের সংযুক্তি এবং সহযোগিতা একান্তভাবে কাম্য। ধন্যবাদ । অঅপনার জন্য শুভকামনা রইল।
জটিল পোষ্ট ভাই। ভাবছি আমি HTML 5 লেখা শুরু করবো নাকি!!
Wow, amazing blog layout! How long have you been blogging for? you made blogging look easy. The overall look of your web site is wonderful, let alone the content!. Thanks For Your article about আর ফটোশপ নয় ঘরের ডিজাইন তৈরি করà§à¦¨ à¦à¦‡à¦š টি à¦à¦® à¦à¦² ৫ দিয়েই | টিউটোরিয়ালবিডি .
I just want to mention I am just beginner to blogging and site-building and absolutely enjoyed you’re web-site. Most likely I’m planning to bookmark your website . You definitely come with terrific articles and reviews. Appreciate it for sharing your web page.