হ্যালো বন্ধুরা, কেমন আছেন সবাই আশা করি সবাই ? আশা করি, সবাই ভাল আছেন। সবাইকে স্বাগতম এই ওয়েবসাইটে। আজকে আমি এই পোস্টে আপনাদেরকে জানাবো, কিভাবে আপনি খুব সহজেই এইচটিএমএল সিএসএস এবং জাভা স্ক্রিপ্ট কোডিং করতে পারেন এবং খুব সহজেই এর আউটপুট দেখতে পারবেন। এজন্য আপনাকে একটি অ্যাপ ডাউনলোড করতে হবে। যে অ্যাপটি আপনি প্লে স্টোরে পেয়ে যাবেন। অ্যাপটির নাম ওয়েব এক্স টুল । একটি আপনি সার্চ করলে আপনার সামনে নাও আসতে পারে। এজন্য আপনাকে এই পেজের নিচে দেওয়া লিংকটি ব্যবহার করে সরাসরি আপনি প্লে স্টোর থেকে ডাউনলোড করতে পারবেন।
তো শুরু করা যাক, মোবাইল অ্যাপটির মাধ্যমে আপনি কি কি সুবিধা পাচ্ছেন তার আলোচনা। একটি ব্যবহার করতে প্রথমেই আপনাকে এই লিংক থেকে ডাউনলোড করে নিতে হবে। এই টুলটির ব্যবহারে আপনি খুব সহজেই html এর আউটপুট দেখতে পারবেন। তাছাড়াও এই অ্যাপ্লিকেশনে থাকছে বিভিন্ন ধরনের সুযোগ-সুবিধা।
.png "Web x HTML coding app logo")
Web X
এই অ্যাপ্লিকেশনটি আপনি প্লে স্টোরে পেয়ে যাবেন। এপ্লিকেশনের মাধ্যমে কিভাবে আপনি এইচটিএমএল সিএসএস এবং জাভা স্ক্রিপ্ট কোড কে টেস্ট করবেন এবং কোডিং করবেন তা এই পোস্টে আলোচনা করব। চলুন কথা না বাড়িয়ে শুরু করা যাক....
সবার প্রথমে যে স্ক্রিন টি আপনি দেখতে পাচ্ছেন এটা হল অ্যাপটির প্রথম স্ক্রিন এখানে অ্যাপটির নাম লেখা আছে। এই স্ক্রিনটি একা একাই চলে যাবে। এরপরে আসবে প্রথম ইন্টারফেস বা প্রথম যে স্ক্রিন টি আপনি যেখানে আপনার প্রজেক্ট তৈরি করবেন।
প্লাস বাটনে ক্লিক করে আপনি আপনার নতুন প্রজেক্ট তৈরি করে নিন। এখানে আপনাকে একটি নাম দিতে হবে আপনি যে কোন একটি নাম সিলেক্ট করতে পারেন। আপনি চাইলে একই নাম অনেকগুলো প্রজেক্টে ব্যবহার করতে পারবেন। এজন্য আপনাকে ক্লিক করে প্রজেক্ট এর একটি নতুন নাম সিলেক্ট করলে উপরের চিত্রটির মতো আপনি দেখতে পাবেন। উপরে চিত্রে দেখানো My website নাম দিয়ে আমি একটি প্রজেক্ট তৈরি করেছি। এরপরে প্রোজেক্টের উপরে ক্লিক করলেই আপনি প্রজেক্ট এর ভেতরে প্রবেশ করবেন। প্রথমবার প্রবেশ করলে আপনার কে স্টোরেজ পারমিশন দিতে হবে। এরপরে আপনি নিচের চিত্রের মত একটি দৃশ্য দেখতে পাবেন।
এখানে আপনি আপনার কোড গুলো লেখার জন্য একটি নোটপ্যাড পেয়ে যাবেন। আপনি চাইলে এখানে এইচটিএমএল সিএসএস এবং জাভা স্ক্রিন ব্যবহার করে আপনার ওয়েবসাইট অথবা ওয়েব পেজ কিংবা আপনার ব্লগার পেইজের জন্য বিভিন্ন ধরনের টুলস গেমস এবং স্ক্রিপ্ট তৈরি করতে পারে। আমি এই ওয়েবসাইটের এই স্ক্রিপ্ট টেমপ্লেট যা কিনা এইচটিএমএল এক্সএমএল সিএসএস এবং জাভা স্ক্রিপ এর মাধ্যমে তৈরি করা। এই ওয়েবসাইটের টেমপ্লেট টি আমি এই অ্যাপটির মধ্যে পেস্ট করলাম। তো আপনি এরকম একটি স্ক্রিন দেখতে পাবেন।
আপনি যদি ডান পাশে থাকা এন্টেনার মত অপশনটিতে ক্লিক করেন তাহলে আপনি এর আউটপুট দেখতে পারবেন। অথবা সবার উপরে থাকা প্লে বাটনে ক্লিক করলেও আপনি আউটপুট দেখতে পাবেন। তাছাড়া এন্টেনা চিহ্নের বাম পাশে যে অ্যানালিটিক্স এর মত অপশনটি আছে ওখানে ক্লিক করলেও আপনি আউটপুট দেখতে পাবেন। তবে এই তিনটি অপশনেই আউটপুট দেখার পার্থক্য আছে। যেমন সবার উপরে প্লে বাটনে ক্লিক করলে আপনাকে নতুন একটি স্ক্রিনে নিয়ে যাওয়া হবে এখানে আপনি আপনার আসল আউটপুটটি দেখতে পাবেন। ও স্ক্রিনে আপনি দুটি অপশন পাবেন একটি হল কম্পিউটার ভার্সনে দেখা অন্যটি হলো মোবাইল ভার্সনে দেখা। সুতরাং আপনি যদি মোবাইল ভার্সন অথবা ভার্সন এর ফুল স্ক্রিনে দেখতে চান তাহলে প্লে বাটনে ক্লিক করে দেখবেন। এবং এনালিটিক্স এর মত যদি আপনি অপশনটিতে ক্লিক করেন তাহলে এইচটিএমএল এর একটি সাধারণ আউট আপনি দেখতে পাবেন। যা html এর কিছু বেসিক আউটপুট আপনাকে দেখাবে। এবং এই অপশনটিতে ক্লিক করলে আপনাকে নতুন কোন উইন্ডোতে নেয়া হবে না। এই নোটপ্যাডের ওপরেই একটি নতুন উইন্ডো তৈরি হবে। এবং আপনি কোটিং করার পাশাপাশি সরাসরি লাইভ আপনি আপনার কোডিং এর আউটপুট দেখতে পারবেন। এজন্য আপনাকে ওই অ্যানালিটিস চিহ্নের উপর ক্লিক করে কোডিং শুরু করতে হবে অথবা কোডিং এর মাঝেও আপনি ক্লিক করে আউটপুট দেখা শুরু করতে পারেন। ওই বাটনটি আবারো ক্লিক করলে উপরের উইন্ডটি গায়েব হয়ে যাবে বা চলে যাবে।
তৃতীয়তঃ এন্টেনার মতো অপশনটি ব্যবহার করে আপনি এইচটিএমএল সিএসএস এবং জাভাস্ক্রিপ এর আসল একটি আউটপুট দেখতে পাবেন যা আপনি পেলে বাটনে ক্লিক করে দেখতে পারতেন। তবে এই দুটি অপশনের মধ্যে পার্থক্য হল আপনি প্লে বাটনে ক্লিক করলে নতুন উইন্ডো বা নতুন একটা স্ক্রিন চলে আসতো এবং notepad চলে যেত। কিন্তু এই এয়ারটেলের মত অপশনটিতে একই সাথে আপনি কোডিং করতে পারবেন এবং আসল আউটপুট দেখতে পারবেন যতবার আপনি এন্টেনার উপর ক্লিক করবেন ততবার আপনি নতুন আউটপুট গুলো দেখতে পাবেন যা আপনি প্রোগ্রাম করেছেন। এখানে আপনি যা কিছুই লিখবেন সব html ফরমেটে লিখতে হবে। এই অ্যাপ্লিকেশনের ভেতর আপনি এইচটিএমএল এর বিভিন্ন প্লাগিন ব্যবহার করতে পারেন ।এবং আপনার কোডিং এক্সপেরিয়েন্স বা অভিজ্ঞতাটা আরো বাড়িয়ে নিতে পারেন।
যারা এইচটিএমএল শিখতে চান তাদের জন্য এই অ্যাপটি অনেকটা সহায়ক হবে। এই অ্যাপটিতে চাইলে আপনি আপনার পছন্দমত ফন্টট ব্যবহার করতে পারবেন। তাছাড়াও কোন html বা কোন টেক্সট ফাইলকে পড়া ইমপোর্ট করা আপনার প্রজেক্ট ব্যাকআপ করা ইত্যাদি তো থাকছেই। এখানে আপনি আরো বিভিন্ন ধরনের ফিচারস পাবেন। যা আপনাকে অ্যাপ টি ব্যবহার দেখতে হবে । তাহলেই আপনি বুঝতে পারবেন এই অ্যাপটির ব্যবহার সম্বন্ধে।
তবে এই অ্যাপটির সব থেকে আকর্ষণীয় বিষয়টি হলো এর এই আউটপুট এর জন্য মোবাইল উইন্ডোটি যা ভিশনই এট্রাক্টিভ।
আজ এ পর্যন্তই ধন্যবাদ সবাইকে। আশা করি এই অ্যাপটি আপনাদের পছন্দ হবে।