এইচ টি এম এল-৪ আসার পর একটা দীর্ঘ সময় লেগে গেছে এইচ টি এম এল এর নতুন ভাসর্ন এইচ টি এম এল-৫ আমাদের মাঝে আসতে। যদিও সময় বেশি লেগেছে কিন্তু ওয়েব ডিজাইনার এবং ডেভলপারদের জন্য বেশ সমৃদ্ধ হয়েই এসেছে এইচ টি এম এল-৫। এটির এনিমেশন কৌশন যে কোন ব্যক্তিকেই তাক লাগিয়ে দেয়ার জন্য যথেষ্ঠ।
……………………………………………………………..
আজ এইচ টি এম এল-৫ এর ক্যানভাস ইলিমেন্ট এর মাধ্যমে তৈরি একটা লোগো তৈরির কৌশল সকলের সাথে শেয়ার করব।
এইচ টি এম এল-৫ এর সাথে আমরা অনেকেই পরিচিত, আবার অনেকে নাম শুনেছেন কিন্তু এ বিষয়ে তেমন ধারণা নেই, আবার এমন অনেকেই আছেন হয়তবা নামই শোনেন নি। যাই হোক আমি নিজেও আপনাদের দলেই; যারা নাম শুনেছেন অনেক আগেই কিন্তু খুব বেশি ধারনা নেই। একটু অখন্ড অবসর পেলাম, তাই চেষ্টা করলাম দেখি কিছু করা যায় কিনা এইচ টি এম এল-৫ দিয়ে।
অবাক হলাম যখন এইচ টি এম এল-৫ এর ক্যানভাস ইলিমেন্ট এর সামান্য কিছু ক্রিয়া কৌশল রপ্ত করলাম। চেষ্টা করলাম সৃজনশীলতা বলে নাকি কিছু একটা আছে, সেটাকে প্রয়োগ করার।
বলতে পারেন উপরের লোগো দুইটি কিসের? খুব সহজ উত্তর : এইচ টি এম এল-৫ এর । আসল ব্যপারটা হচ্ছে কেউ কি বলতে পারেন এই লোগো দুটির মধ্যে প্রধান পার্থক্য কি?
প্রকৃতপক্ষে লোগো দুটি দেখতে একরকম হলেও এই দুইটি লোগো তৈরির পদ্ধতি কিন্তু এক নয়।একটি তৈরি হয়েছে ফটোশপ দিয়ে আর অন্যটি তৈরি হয়েছে এইচ টি এম এল-৫ এর মাধ্যমে শুধুমাত্র কোডিং করে।
এবার দেখুন তো ধরতে পারেন কি না কোন লোগোটা তৈরি হয়েছে এইচ টি এম এল-৫ দিয়ে আর কোনটা ফটোশপ দিয়ে?
প্রথম লোগোটা তৈরির জন্য প্রয়োজনীয় এইচ টি এম এল-৫ কোড
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Logo</title>
</head>
<body>
<center>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3; background:#fff3ee;"></canvas>
<h2> HTML5 Logo Design By HTML5.</h2>
</center>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
//border and background
ctx.moveTo(232,70);
ctx.lineTo(70,70);
ctx.lineTo(90,220);
ctx.lineTo(208,220);
ctx.lineTo(230,66);
ctx.fillStyle="#f26629";
ctx.fill();
//5
ctx.moveTo(200,90);
ctx.lineTo(102,90);
ctx.lineTo(107,120);
ctx.lineTo(190,120);
ctx.lineTo(180,175);
ctx.lineTo(153,183);
ctx.lineTo(122,175);
ctx.lineTo(118,150);
//L
ctx.moveTo(210,25);
ctx.lineTo(210,55);
ctx.lineTo(230,55);
//M
ctx.moveTo(190,58);
ctx.lineTo(190,25);
ctx.moveTo(190,28);
ctx.lineTo(175,48);
ctx.moveTo(160,28);
ctx.lineTo(160,58);
ctx.moveTo(160,31);
ctx.lineTo(175,48);
ctx.moveTo(175,46);
ctx.lineTo(175,51);
//T
ctx.moveTo(145,30);
ctx.lineTo(115,30);
ctx.moveTo(130,30);
ctx.lineTo(130,58);
//H
ctx.moveTo(100,25);
ctx.lineTo(100,58);
ctx.moveTo(80,25);
ctx.lineTo(80,58);
ctx.moveTo(80,42);
ctx.lineTo(100,42);
//stroke color size
ctx.lineWidth = 9;
ctx.strokeStyle="#000";
ctx.stroke();
</script>
</body>
</html>
প্রথমে একটা Notepad Open করে উপরের Code টুকু লিখুন । File মেনু থেকে Save as এ ক্লিক করে File name হিসেবে index.html বা home.html অথবা যেকোন নাম.html দিয়ে, Save as type হিসেবে All files সিলেক্ট করে এরপর Save বাটনে ক্লিক করে Save করুন। এখন Mozilla দিয়ে index.html open করলে নিচের ছবির মত এইচ টি এম এল-৫ লোগোটি দেখতে পাবেন।
………………………………………………………………………………..
আজ এখানেই শেষ করছি। সকলের জন্য শুভ কামনা রইল।
আসাধারন
ধন্যবাদ রাসেল ভাই, শুভকামনা রইল।
মজা পেলাম 🙄
মজা পাওয়ার পাশাপাশি আমরা যদি কিছু শিখে থাকি, সেটাই আমাদের জন্য পরম প্রাপ্তি বলে মনে করি। ধন্যবাদ।
ভাই ওয়েভ ডিজাইন এর জন্য কিছু টিপস পাঠান.
ভাল লাগার মত পোস্ট………।
Thanks.
code গুলি বিশ্লেষণ করলে আমাদের মত নতুন শিক্ষার্থীদের বুঝে কাজ করতে সুবিধা হত । বিশ্লেষণ না থাকায় আপনার কোড কপি করা ছাড়া উপায় থাকল না ।