পূর্ববর্তী ক্লাসঃ ওয়েব ডিজাইন এন্ড ডেভেলপমেন্ট ফুল কোর্স: পর্ব - ০২ : ওয়েব সাইট, ওয়েব এড্রেস এবং ওয়েব সাইট খোঁজা

সকল টিউজার এবং টিউডারকে স্বাগতম। কেমন আছেন সবাই? আজ আমি নিয়ে আসলাম আমদের ৩য় ক্লাস।

আজকের ক্লাস টপিকসঃ HTML কি? ফাইল এক্সটেনশন,   ডিফল্ট ব্রাউজার নিয়ে আলোচনা এবং একটি বেসিক পেজ বানানো।

তো চলুন শুরু করা যাক। (মোবাইল ইউজার দের জন্য মোবাইল স্পেশাল নিচের দিকে আছে। )

আপনি যে ফেসবুক ইউজ করেন। বা এই মুহুর্তে আপনি যে টেকটিউনস ইউজ করছেন, এই ওয়েব সাইট কিছু কিছু জিনিস দিয়ে তৈরী। আমরা সেগুলো একটু একটু করে শিখব।

এখন আমরা মানুষেরা যদি একটি নির্দিষ্ট ভাষা জানলে ঐ ভাষা ভিন্ন অন্য কোনো ভাষায় যদি আমাদের কে কিছু জিজ্ঞাসা করে আমরা সেগুলো আমরা বুঝতে পারব না। তেমনি আমরা যে সকল ব্রাউজার Firefox, Chrome ইত্যাদি ব্রাউজার একটি নির্দিষ্ট ভাষা জানে। আর সেটা হচ্ছে HTML. যত রকম ওয়েব সাইট ব্রাউজারে আমরা দেখি বা ব্রাউজ করি সেসকল ওয়েব সাইট HTML এ রুপান্তরিত হয়ে ব্রাউজারে আসে। সুতরাং আমরা যদি HTML জানতে পারি তাহলে ব্রাউজারকে সেই HTML দিয়ে অনেক ডিজাইন করতে পারব।

▶ টিউনটি ভিডিওতে দেখতে এখানে ক্লিক করুন

এবার আমরা আসি কম্পিউটারে একটি HTML ফাইল তৈরী করা যাক।

আমাদের কম্পিউটারে কোনো ফাইল তৈরী করার জন্য আমরা আমাদের কম্পিটারে My Computer/Computer (Windows XP/7/8 এর জন্য) বা This PC (Windows 10 এর জন্য) এ প্রবেশ করতে হবে। আমরা এই মাই কম্পিউটার বা দিজ পিসি এর মাঝে কোনো একটা ড্রাইভে একটি ফোল্ডার করে তার মধ্যে আমরা কাজ করব। অবশ্যই সেই ফোল্ডার আমরা সি ড্রাইভ (লোকাল ডিস্ক সি) এর মাঝে করব না।

এজন্য প্রথমে আমরা ডেস্কটপ থেকে মাই কম্পিউটার বা দিজ পিসিতে যাইব। (অল্টার নেটিভ ভাবে Windows + E স্টার্ট বাটন আর E বাটন একসাথে প্রেস করে অথবা টাস্ক বারের এক্সপ্লোরার আইকনে চেপে আমরা ঢুকতে পারি)।  সেখান থেকে সি ড্রাইভ (লোকাল ডিস্ক সি) ভিন্ন অন্য কোনো একটা ড্রাইভে গিয়ে আমরা একটি ফোল্ডার করে নেই

মনে করি আমরা D Drive (Local Disk D) এর মধ্যে গিয়ে মাউসের ডান বাটন চেপে নিয়ে সেখান থেকে New থেকে New Folder করে নেই আর সেখানে একটি নাম দেই Web Class. তার মাঝে আর একটি ফোল্ডার একই ভাবে করে নেই Class – 03 নামে করে নেই। নতুন ফোল্ডার তৈরী করার জন্য কিবোর্ডে শর্টকার্টে একসাথে Ctrl, Shift আর N বাটন একসাথে চাপতে পারেন।

এবার আমরা একই ভাবে মাউসের রাইট বাটনে ক্লিক করে New তে গিয়ে নিচের দিক থেকে New Text Document এ ক্লিক করে একটি ফাইল তৈরী করি।

নিচের স্ক্রিনশট গুলোতে পর্যায় ক্রমে স্টেপ গুলো দেওয়া হল।

একই পদ্ধতিতে এর মাঝে Class – 03 নামে একটা ফোল্ডার করে নিয়ে তার মাঝে নিচের মত করে একটি ফাইল তৈরি করি।

এখন দেখেন আমাদের যে ফাইলটা তৈরী হয়েছে এটা একটি টেক্সট ফাইল। কিন্তু এই নামের শেষে আর কিছু নেই। কিন্তু কম্পিটারে সকল ফাইলেরই একটি এক্সটেনশন থাকে। যেমন ভিডিও এক্সটেনশন mp4, mkv, avi ইত্যাদি থাকে, আবার অডিওর এক্সটেনশন mp3, wav, amr, aac ইত্যাদি থাকে। কিন্তু বাই ডিফল্ট এসব দেখা যায়না। এইটা দেখার জন্য আমাদেরকে এক্সটেনশন শো করতে হবে। এইটা করার জন্য Windows XP/7/8/8.1/10 এর জন্য পদ্ধতিঃ

আপনি স্টার্ট আইকনে (বাটনে) চাপ দিয়ে সার্চ বক্সে লিখবেন Folder Option তাহলে দেখবেন Folder Options নামে কিছু একটা আসবে সেটায় ক্লিক করবেন (Windows 7 এ), বা উইন্ডোজ ১০ এ File Explorer Options নামে একটা রেজাল্ট আসবে সেখানে ক্লিক করবেন। নিচে উইন্ডোজ সেভেন/এইট এবং উইন্ডোজ টেন এর স্ক্রিনশট দেওয়া হল।

আপনার জন্য যেটা আসে সেইটার মাঝে ঢুকবেন এবং উপর থেকে View ট্যাবে ক্লিক করবেন (১ নং)। সেখান থেকে নিচে Hide Extensions for known file types এর টিক তুলে দিবেন (২ নং) এবং অবশেষে ওকে করে দিবেন (৩ নং)।

যদি আপনার নতুন ফাইল তৈরী করার পর নামের শেষে.txt থাকে তবে এই স্টেপ গুলো করতে হবেনা।

আচ্ছা, চলুন ফিরে যাই আগের স্টেপে যেখানে আমরা তৈরী করেছিলাম New Text Document, এখন সেখানে দেখবেন নামটা হয়ে গিয়েছে New Text Document.txt এই.txt হচ্ছে এক্সটেনশন। যার দ্বারা আমাদের কম্পিউটার বুঝে থাকে এই টাইপের ফাইলটা কি হতে পারে আর কোন সফটওয়্যার দ্বারা এটা খুলতে হবে। যাহোক এখন এই ফাইলটা যদি আমরা ডাবল ক্লিক করি তবে একটি সফটওয়্যার এটিকে ওপেন করে ব্লাঙ্ক দেখাবে। ওপেন করে দেখুন এবং সেটাকে কেটে দিন।

এবার আমরা এই তৈরী করা New Text Document.txt ফাইলটা রিনেম করব। রিনেম করার জন্য এই ফাইলটার উপর মাউস রেখে রাইট বাটনে ক্লিক করে রিনেম সিলেক্ট করুন অথবা কিবোর্ড থেকে F2 বাটনটি চাপ দিন। এখন রিনেম করে নামের শেষে থাকা txt কেটে সেখানে html দিয়ে ওকে করুন। দেখবেন একটি পপ আপ এলার্ট বক্স আসবে। যে কোনো কাজের সময় এই পপ-আপ বক্সের লেখা ভালো করে পড়ে নিয়ে ওকে বা ক্যানসেল করবেন। এখানে পপ-আপে লেখাটা নিচের মত। যা বলে যে, ফাইল এক্সটেনশন চেঞ্জ করলে ফাইলটি ব্যবহারের অযোগ্য হতে পারে। তবুও আমরা নেম চেঞ্জ করতে চাই তাই ইয়েস করবেন।

এখন (আপনার উইন্ডোজ টেন হলে) কিবোর্ডে একসাথে Ctrl, Shift আর উপরের নাম্বার থেকে 2 চাপুন (উইন্ডোজ সেভেন হলে ডান পাশে উপরে থেকে মিডিয়াম সিলেক্ট করে নিন) আর দেখবেন যে তৈরী করা ফাইলটার ছবি কেমন আছে। যেমন আমার ক্ষেত্রে ছবিটা আছে নিচের প্রথমটি। কেননা আমার ডিফল্ট ব্রাউজার ফায়ারফক্স।

আপনার ক্ষেত্রে অন্যরকম ছবিও হতে পারে। আপনার ডিফল্ট ব্রাউজার পর্যায়ক্রমে ক্রোম, ইন্টারনেট এক্সপ্লোরার বার এজ হলে আপনার পর্যায়ক্রমে পরের ছবির মত আসতে পারে।

আপনার ডিফল্ট ব্রাউজার যেমন থাকবে ছবিটা সেই ব্রাউজারের আইকনের মত হবে। আমরা এই ডিফল্ট ব্রাউজার থেকে চেঞ্জ করে অন্য রকম করতে পারি, এই জন্য আমরা আমাদের ফাইলটার উপর মাউস রেখে মাউসের ডান বাটনে ক্লিক করে Properties এ যাইব সেখান থেকে –

এই চেঞ্জ লেখায় চাপ দিয়ে অন্য কোন ব্রাউজার সিলেক্ট করে ওকে করব।

এবার আমাদের ফাইলটাকে ডাবল ক্লিক করলে আমাদের ব্রাউজারে একটা সাদা পেজ আসবে। কারণ এই ফাইলের মাঝে আমরা কিছুই লিখিনি এখন পর্যন্ত।

এটা ব্রাউজারে এভাবে থাকতে লাগুক। তত সময়ে আমরা কিছু লিখে আশাকরি। Notepad না থাকলে নিচের স্টেপ ফলো করুন।

▶ টিউনটি ভিডিওতে দেখতে এখানে ক্লিক করুন

Open with এ যাওয়ার পর সেখান থেকে Open with another বা browse another app এ যান আর সেখান থেকে Notepad সিলেক্ট করে দিন।

যদি ওপেন উইথের লিস্টের মাঝে না থাকে তবে উইন্ডোজ ৭ এর জন্য নিচের স্ক্রিনশট ফলো করুন।

ওপেন উইথে চাপুন এবং Choose default program… এ চাপ দিন। সেখানে নিচের মত আসবে।

এখান থেকে ১ নং এরোতে চেপে আনফোল্ড করবেন এরপর ২ নং স্থান থেকে Notepad সিলেক্ট করবেন। এরপর ৩ নং স্থানের টিক অফ করে দিবেন, তারপর ওকে করবেন। এরপর থেকে ওপেন উইথ করলে নিচের মত Notepad পেয়ে যাইবেন।

আর আপনার উইন্ডোজ ১০ হলে নিচের মত করে করুন।

ওপেন উইথ থেকে চেঞ্জ অ্যানাদার এপ এ যান, সেখান থেকে নোটপ্যাড সিলেক্ট করুন। নিচে টিক চিহ্ন থাকলে অবশ্যই তার টিক তুলে দিবেন। এরপর ওকে করুন।

এবার ওপেন উইথ নোটপ্যাডে ওপেন করে নিচের কোড টুকু লিখুন।

Hello This is our class 03.

আর সেভ করুন।

এরপর আপনি যে অল্টার চেপে ট্যাব চাপুন আর ঐ যে ব্রাউজারে গিয়ে উপর থেকে রিলোড দিয়ে দিন। অবশ্যই সেভ করে নিন। তাহলে কেমন আসল?

এমন আসছে। তাইতো? যদি এসে থাকে সমস্ত কাজ সঠিক ভাবেই আপনি করেছেন।

এবার আশাকরি, প্রয়োজনে অন্য কিছু নিব)। এটা ইন্সটল করে নিন।

এবার ইন্সটল করা এপটিকে ওপেন করেন আর নিচের স্টেপ গুলো ফলো করেন।

স্টেপ-১: অ্যাপ্লিকেশন টি ওপেন করলে একটি পপ-আপ আসবে এবং সেখানে জিগাবে Allow Notepad+ access photos, media, and files on your device? এইটাকে Allow করবেন।

স্টেপ-৩: যে অপশন গুলো সামনে আসবে সেখান থেকে New file এ চাপ দিবেন।

▶ টিউনটি ভিডিওতে দেখতে এখানে ক্লিক করুন

স্টেপ-৩: এবার একটি এডিটিং উইন্ডো আসবে সেখানে চাপ দিয়ে লিখুন This is our class 03.

স্টেপ-৪: এখন ডান পাশে উপরে সেভ আইকনে চাপ দিন। Save as এ চাপ দিন।

স্টেপ-৫: Name এর ঘরে নাম দিন New text document.html (সেখান আগে থেকেই.txt থাকবে সে সব কেটে দিবেন)।

স্টেপ-৬: Folder এর ঘরে চাপ দিয়ে যেটা লেখা আছে তার শেষে /Web Class/Class 03 লিখে ওকে করুন। দেখবেন নিচে একটা সাকসেস লেখা টোস্ট নোটিফিকেশন শো করে চলে গেছে।

স্টেপ-৭: এখন নোটপ্যাড প্লাস অ্যাপ থেকে বেরিয়ে আপনি আপনার ফাইল ম্যানেজার এ যান। সেখান থেকে ফোন মেমোরীর (ইন্টারনাল স্টোরেজের) Web Class ফোল্ডারের মাঝে প্রবেশ করুন। সেখান থেকে Class 03 ফোল্ডারে প্রবেশ করুন। এবং সেখানে দেখবেন যে New text document.html নামে একটা ফাইল আছে। সেটায় চাপ দিন। এবং যদি কোনো পপ-আপ শো করে সেখান থেকে Chrome (অথবা মোর থেকে Chrome) এর উপর ডাবল টাচ করুন।

স্টেপ-৮: আপনার তৈরী কৃত ফাইল এখন ব্রাউজারে আপনার সামনে।

আজ এ পর্যন্তই। আগামী ক্লাসে আমরা শুরু করব অন্য কিছু।

▶ টিউনটি ভিডিওতে দেখতে এখানে ক্লিক করুন

আমাদের সম্পূর্ণ কোর্সটি দেখনু 👉 https://www.youtube.com/WebGround

আমাদের ফেসবুকে ঘুরে আসতে 👉 https://www.facebook.com/groups/WebGround

আমাদের ওয়েব সাইটঃ https://www.webground.in