Claude.ai ইউজ করবেন যেভাবে
কম্পিউটার থেকে যেকোন একটি ব্রাউজার ওপেন করে Claude.ai Website (https://claude.ai) ওপেন করুন।
হোমপেজে পৌঁছানোর পরে, Continue with google অথবা Enter your personal or work email অপশন দুইটির যেকোন একটি বেছে নিতে পারেন।
Enter your personal or work email এ একটি ইমেইল ইনপুট করে **Continue with email ** বাটনে ক্লিক করলে ইমেইল ভেরিফিকেশন এর মাধ্যমে সাইন আপ করতে বলবে।
ইমেইলে একটি Sign Up Claude .ai লিংক যাবে। Sign Up Claude .ai বাটনে ক্লিক করলে নাম্বার ভেরিফিকেশন এর জন্য একটি ইন্টারফেস আসবে।
মোবাইল নাম্বার ভেরিফিকেশন সম্পন্ন করা
প্রথমে Country সিলেক্ট করতে হবে। Bangladesh সিলেক্ট করে একটি মোবাইল নাম্বার Country কোড(+880) সহ ইনপুট করে Send Verification Code বাটনে ক্লিক করতে হবে। আমি একটি টেলিটক নাম্বার দিয়ে ভেরিফিকেশন করেছি। কোন রকম সমস্যা হয়নি। অপশনে যেহেতু বাংলাদেশ আছে সেহেতু বাংলাদেশ সিলেক্ট করেই করেছি।
আপনার ইনবক্স চেক করুন। যে নাম্বারটি দিয়েছেন সেই নাম্বারে একটি ভেরিফিকেশন কোড যাবে সেই কোডটি কপি করুন।
পরবর্তি ইন্টারফেসে কোডটি ইনপুট করে ভেরিফাই সম্পন্ন করুন। ভেরিফিকেশন সফল হলে আপনার একাউন্ট সক্রিয় হয়ে যাবে। এখন ইউজ করা যাবে।
GitHub Copilot এর একাউন্ট তৈরি
GitHub Copilot ব্যবহার করতে আপনাকে প্রথমে GitHub একাউন্ট তৈরি করতে হবে।
GitHub Website (https://github.com) এ যেতে হবে।
Sign Up করার জন্য বেশ কিছু স্টেপ অতিক্রম করতে হবে।
আপনার ইমেইল, ইউজারনেম এবং পাসওয়ার্ড ইত্যাদি দিলে রেজিস্ট্রেশন সম্পন্ন হবে।
রেজিস্ট্রেশনের পরে GitHub ইউজ করতে পারবেন।
Visual Studio Code এ ফ্রি GitHub Copilot সেটআপ
Visual Studio Code ওপেন করুন।
উপরের দিকে টপ বারে কোপাইলট আইকন দেখতে পাবেন সেখানে ক্লিক করে নিচের দিকে একটি লগিন বাটন দেখতে পাবেন। সেখান থেকে লগিন করে নিতে পারেন। কিছু সময় অপেক্ষা করলে সেটিং হয়ে যাবে। তারপরে ইউজ করতে পারবেন।
অথবা
Extensions (পাজল আইকন) এ ক্লিক করুন। সার্চ বক্সে টাইপ করুন: GitHub Copilot।
GitHub Copilot Extension ইনস্টল করুন।
ইনস্টল শেষে, Sign In to GitHub বাটন ক্লিক করুন।
আপনার GitHub অ্যাকাউন্ট দিয়ে লগইন করুন।
GitHub Copilot এখন প্রস্তুত! 
ChatGPT একাউন্ট তৈরি (Sign Up)
আপনি যদি প্রথমবার চ্যাট জিপিটি ইউজ করতে চান। তাহলে আপনাকে প্রথমে একবার Sign Up করে একাউন্ট ক্রিয়েট করে নিতে হবে। Sign Up না করলে লগিন করা যায়না 
। চলুন একাউন্ট করা শুরু করি।
OpenAI Website (https://openai.com) এ যেতে হবে।
Sign Up বাটনে ক্লিক করার পর একটি রেজিস্ট্রেশন পেজ আসবে।
সেখানে প্রথমে আপনার ইমেইল তারপর সিকিউরড পাসওয়ার্ড দিয়ে রেজিস্ট্রেশন করলে লগিন হয়ে যাবে। পরবর্তিতে আবার কখনো লগ আউট হয়ে গেলে আবার সেই ইমেইল এবং পাসওয়ার্ড দিয়ে লগিন করে নিতে হবে।
প্রথম বার লগইন (Log In)
Log In বাটনে ক্লিক করুন।
ইমেইল ও পাসওয়ার্ড দিয়ে প্রবেশ করুন।
প্রথম প্রম্পট দেওয়া
প্রশ্ন: “HTML ফুল ফর্ম কি?”
উত্তর: “HTML এর পূর্ণরূপ হলো HyperText Markup Language। এটি ওয়েব পেজ তৈরি করার জন্য ব্যবহৃত হয়।”
এতটুকুই! এখন আপনি ChatGPT ব্যবহার করতে পারবেন! 
ফাইল এক্সটেনশন শো করা
কেন ফাইল এক্সটেনশন শো করা প্রয়োজন?
ফাইল এক্সটেনশন শো করলে আপনি সহজেই ফাইলের ধরন (যেমন .html, .css, .js) বুঝতে পারবেন। এটা সঠিক ফাইল তৈরি করার জন্য খুবই গুরুত্বপূর্ণ। আপনি যদি প্রথম প্রথম প্রাক্টিস করা শুরু করেন তাহলে দেখবেন - আপনি html ফাইল ক্রিয়েট করছেন কিন্তু হচ্ছেনা। আপনি চাচ্ছেন heading.html তৈরি করতে কিন্তু হয়ে যাচ্ছে heading.html.txt বা অন্য কিছু । এমন অনেকেরই হয়ে থাকে। তাই এই সমস্যা দূর করার জন্য ফাইল এক্সটেনশন শো করা প্রয়োজন। প্রতিটি কাজই বিভিন্নভাবে করা যায়। আমি এখানে তার মধ্য থেকে যেকোন একটি দেখাচ্ছি। চলুন শুরু করি।
প্রথমে Windows File Explorer খুলুন।
উপরের Menu Bar থেকে View ট্যাবে যান।
Show সেকশনে ক্লিক করে File name extensions চেকবক্সটি টিক দিন 
।
এখন প্রতিটি ফাইলের শেষে সেই ফাইলের ফাইল এক্সটেনশন যেমন .html, .css, .js ইত্যাদি দেখতে পারবেন।
টেক্সট Wrap করা
কেন টেক্সট Wrap প্রয়োজন?
লম্বা লাইনগুলো কোড এডিটরে ফিট করতে এবং কোড সহজে পড়তে টেক্সট Wrap ব্যবহার করা প্রয়োজন।
Visual Studio Code ওপেন করুন।
স্ক্রিনের নিচে থাকা Settings (
) আইকনে ক্লিক করুন।
সার্চ বক্সে টাইপ করুন: Word Wrap.
Editor: Word Wrap অপশনটি সিলেক্ট করে On করুন।
শর্টকাট পদ্ধতি:
- Alt + Z চাপ দিয়ে দ্রুত টেক্সট Wrap চালু করতে পারেন।
প্রজেক্ট ফোল্ডার তৈরি করা
আপনার কম্পিউটারের যেকোন ড্রাইভে (যেমন D:/Projects/) একটি নতুন ফোল্ডার তৈরি করুন।
ফোল্ডারের নাম দিন HTML_Project.
ফোল্ডারের মধ্যে একটি নতুন ফাইল তৈরি করুন, নাম দিন index.html বা অন্যকিছু।
Windows-এ সরাসরি .html ফাইল তৈরি করতে: ডেক্সটপের যেকোন জায়গায় মাউসের রাইট বাটন ক্লিক করে
- New Text Document তৈরি করুন।
- ফাইলের একটি টপিক্স রিলেটেড নাম দিন।
- নামে একের অধিক শব্দ ইউজ করতে চাইলে হাইফেন (-) অথবা আন্ডারস্কোর(_) ইউজ করুন।
- টেক্সট ফাইলের .txt এক্সটেনশন পরিবর্তন করে
.htmlলিখুন।
HTML ফাইল ওপেন করুন এবং কোড লিখুন
Visual Studio Code এ index.html ফাইলটি ওপেন করুন।
নিচের কোডটি লিখুন:
<!DOCTYPE html>
<html>
<head>
<title>My HTML Project</title>
</head>
<body>
<h1>ওয়েব ডিজাইনে আপনাকে স্বাগতম! 🎉</h1>
<p>এটা আমার প্রথম HTML পেজ। </p>
</body>
</html>
Ctrl + S চাপ দিয়ে সেভ করুন। ফাইলের উপর ডাবল ক্লিক করে ফাইলটিকে ওপেন করুন।
- প্রতিদিন কিছু না কিছু প্র্যাকটিস করুন।
- নতুন টুলস এবং ফিচার এক্সপ্লোর করুন।
- ভুল হলে ভয় পাবেন না, কারণ ভুল থেকেই শিখতে হয়।
HTML Structure এবং গুরুত্বপূর্ণ ট্যাগসমূহ 
HTML শেখার প্রথম ধাপ হলো এর কাঠামো এবং ট্যাগ বোঝা। এখানে HTML এর গঠন এবং প্রয়োজনীয় ট্যাগগুলো বিস্তারিতভাবে ব্যাখ্যা করা হলো।
HTML এর গঠন (Structure) 
HTML একটি নির্দিষ্ট গঠনে লেখা হয়।
- DOCTYPE:
<!DOCTYPE html>(ব্রাউজারকে বলে এটি HTML5 ডকুমেন্ট)। - HTML ট্যাগ:
<html>...</html>(সব HTML কনটেন্ট এই ট্যাগের ভিতরে থাকে। Head সেকশন: এবং Body সেকশন: এই ট্যাগের মধ্যে থাকে)। - Head সেকশন:
<head>...</head>(মেটা তথ্য, শিরোনাম, এবং স্টাইল সংক্রান্ত বিষয়গুলো এর ট্যাগের মধ্যে থাকে)। - Body সেকশন:
<body>...</body>(ওয়েব পেজে যাবতীয় যা কিছু দেখা যায় সবই এই ট্যাগের মধ্যে থাকে)।
HTML এর ট্যাগের প্রকারভেদ 
HTML এর ট্যাগ দুটি প্রকারের হতে পারে:
সিঙ্গেল ট্যাগ (Single Tag):
যে ট্যাগগুলোর শুধুমাত্র ওপেনিং অংশ থাকে এবং কোনো ক্লোজিং অংশ নেই।
উদাহরণ:
<br>: নতুন লাইন তৈরি করতে ব্যবহার করা হয়।<img>: ছবি যোগ করতে ব্যবহার করা হয়।
ডাবল ট্যাগ (Double Tag):
যে ট্যাগগুলোতে ওপেনিং এবং ক্লোজিং দুই অংশই থাকে।
উদাহরণ:
<h1>...</h1>: হেডিং এর জন্য।<p>...</p>: প্যারাগ্রাফ এর জন্য। এমন আরো অনেক অনেক ট্যাগ আছে।
Heading ট্যাগসমূহ (Heading Tags)
HTML এ ৬টি হেডিং ট্যাগ রয়েছে। এগুলো দিয়ে টাইটেল বা শিরোনাম তৈরি করা হয়।
| ট্যাগ | ব্যবহার | স্ট্যান্ডার্ড সাইজ (Pixel) |
|---|---|---|
<h1> |
প্রধান শিরোনাম | 32px |
<h2> |
সাব-শিরোনাম | 24px |
<h3> |
মাঝারি শিরোনাম | 18.72px |
<h4> |
ছোট শিরোনাম | 16px |
<h5> |
ক্ষুদ্র শিরোনাম | 13.28px |
<h6> |
সবচেয়ে ছোট | 10.72px |
উদাহরণ:
<h1>এইচ ১: সবচেয়ে বড় শিরোনাম</h1>
<h2>এইচ ২: সাব-শিরোনাম</h2>
<h3>এইচ ৩: মাঝারি শিরোনাম</h3>
<h4>এইচ ৪: ছোট শিরোনাম</h4>
<h5>এইচ ৫: ক্ষুদ্র শিরোনাম</h5>
<h6>এইচ ৬: সবচেয়ে ছোট শিরোনাম</h6>
Paragraph ট্যাগ (Paragraph Tag) 
প্যারাগ্রাফ তৈরি করার জন্য <p> ট্যাগ ব্যবহার করা হয়।
| ট্যাগ | ডিফল্ট সাইজ (Pixel) |
|---|---|
<p> |
16px |
উদাহরণ:
<p>এটি একটি সাধারণ প্যারাগ্রাফ</p>
Break ট্যাগ (Break Tag) 
লাইনে বিরতি দেওয়ার জন্য <br> সিঙ্গেল ট্যাগ ব্যবহার করা হয়।
উদাহরণ:
<p>এই লাইনটি প্রথম।<br>এই লাইনটি দ্বিতীয়।</p>
Inspect Element (ইনস্পেক্ট এলিমেন্ট) 
Inspect Element অর্থাৎ ডেভেলপার টুল ব্যবহার করে ওয়েব পেজের প্রায় সবকিছু ডিবাগ করা যায়। ভুল থাকলে তা এখান থেকে দেখা যায়। অনেক কিছু করা যায় এখান থেকে।
ব্যবহার পদ্ধতি:
ওয়েব পেজে রাইট ক্লিক করুন।
“Inspect” বা “Inspect Element” অপশন সিলেক্ট করুন।
এলিমেন্ট এবং স্টাইল অপশন দেখুন। ধীরে ধীরে বাকি অপশন গুলো দেখে নেওয়া যাবে।
Happy Learning 
