Skip to main content

#এইচটিএমএল৫ এর এডিটর সাবলাইম টেক্সট: Interactive Forms with HTM...


🖥️ HTML5 এর এডিটর: Sublime Text – বাংলা টিউটোরিয়াল

🔧 Sublime Text কী?

Sublime Text হলো একটি লাইটওয়েট, ফাস্ট ও সুন্দর ইন্টারফেসযুক্ত টেক্সট এডিটর, যেটা প্রোগ্রামার ও ওয়েব ডেভেলপাররা কোড লেখার জন্য ব্যবহার করে।

✅ কেন HTML5 শেখার জন্য Sublime Text ভালো?

  • 📝 লাইভ সিনট্যাক্স হাইলাইটিং (HTML, CSS, JS)

  • ⚡ অটো-কমপ্লিশন (Emmet ইন্টিগ্রেশন)

  • 🔄 মাল্টিপল সিলেকশন এডিটিং

  • 🎨 বিভিন্ন থিম ও কালার স্কিম

  • 🔌 এক্সটেনশন/প্লাগইন সাপোর্ট

  • 💾 খুব হালকা, RAM খুব কম ব্যবহার করে

🚀 শুরু করার ধাপগুলো:

🔽 ১. Sublime Text ইনস্টল করুন

  • অফিসিয়াল সাইট থেকে ডাউনলোড: https://www.sublimetext.com

  • Windows, Mac, Linux – সব OS-এ চলে

🧪 ২. HTML ফাইল তৈরি করুন

  1. Sublime Text ওপেন করুন

  2. File → New File → Save As → index.html

  3. নিচের মতো করে HTML5 Boilerplate লিখুন:


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First HTML Page</title>
</head>
<body>
  <h1>Hello World!</h1>
  <p>This is my first HTML file using Sublime Text.</p>
</body>
</html>

💡 Shortcut: টাইপ করুন html → তারপর Tab চাপুন (Emmet থাকলে অটো কোড জেনারেট হবে)।

🔌 ৩. Emmet ইনস্টল করুন (Highly Recommended)

Emmet আপনাকে দ্রুত HTML ও CSS লিখতে সাহায্য করে। যেমন:

ul>li*5 → Tab চাপলে → 5টি <li> এলিমেন্টসহ <ul> তৈরি হবে

ইনস্টল পদ্ধতি:

  1. Ctrl + Shift + P → "Install Package" লিখুন

  2. Package Control: Install Package ক্লিক করুন

  3. "Emmet" লিখে Enter চাপুন

👨‍💻 HTML লিখে কীভাবে ব্রাউজারে চালাবেন?

  1. ফাইলটি .html এক্সটেনশনে সেভ করুন

  2. ফোল্ডারে গিয়ে ফাইলের উপর ডাবল ক্লিক করুন → ব্রাউজারে ওপেন হবে
    অথবা

  3. Right-click → "Open in Browser" (প্লাগইনের মাধ্যমে)

📌 উপসংহার:

Sublime Text হল: ✅ দ্রুত
✅ সহজ
✅ ফিচার-সমৃদ্ধ
✅ HTML শেখার জন্য পারফেক্ট এডিটর

Comments

Post a Comment

Popular posts from this blog

# এইচটিএমএল (HTML)-এ কিভাবে ছবি (Image), অডিও (Audio), এবং ভিডিও (Video) ওয়েব এড করা হয় তা দেখানো হয়েছে:

এখন আমরা আলোচনা করবো HTML-এ কিভাবে ছবি (Image), অডিও (Audio), এবং ভিডিও (Video) ওয়েবপেজে যুক্ত বা ইমপোর্ট করতে হয়। এইগুলো ওয়েব কনটেন্টকে আরও প্রাণবন্ত ও আকর্ষণীয় করে তোলে। 🖼️ ১. ইমেজ (Image) ইমপোর্ট – <img> HTML-এ ছবি দেখানোর জন্য ব্যবহার হয় <img> ট্যাগ। ✅ উদাহরণ: < img src = "images/pic.jpg" alt = "Beautiful Scenery" width = "400" height = "300" > অ্যাট্রিবিউট কাজ src ছবির লোকেশন (Path or URL) alt ছবির না-লোড হলে দেখানো টেক্সট width / height ছবির আকার ✅ এটি একটি self-closing tag । 🔊 ২. অডিও (Audio) ইমপোর্ট – <audio> অডিও ফাইল প্লে করাতে ব্যবহার হয় <audio> ট্যাগ। ✅ উদাহরণ: < audio controls > < source src = "audio/music.mp3" type = "audio/mpeg" > Your browser does not support the audio tag. </ audio > অ্যাট্রিবিউট কাজ controls প্লে-পজ বাটন দেখায় autoplay পেজ লোড হলে অটো প্লে করে loop শেষ হলে আবার শুরু করে muted শুরুতে মিউট করে দেয় 🎥 ৩. ভিডিও (Vi...
2 comments
Read more

# মোবাইল/পিসি/ল্যাপটপের জন্য Best Video Editors:

  📱 মোবাইলের জন্য Best Video Editor Apps (Android/iOS): CapCut (Free + Pro features) ইউজার-ফ্রেন্ডলি, ট্রানজিশন, মিউজিক, ইফেক্ট, AI tools TikTok বা Instagram ভিডিও বানানোর জন্য একদম পারফেক্ট। KineMaster লেয়ার সাপোর্ট, গ্রীন স্ক্রিন, ভয়েস ওভার, টাইমলাইন কন্ট্রোল কিছু ফিচার প্রো ভার্সনে। VN Video Editor (Free) খুব প্রফেশনাল লুক, সহজ ইন্টারফেস YouTube ভিডিও বা vlog বানানোর জন্য দারুন। InShot Social media content বানাতে এক নম্বর Trim, crop, filters, speed control সব কিছুই সোজা। 💻 পিসি/ল্যাপটপের জন্য Best Video Editors: Adobe Premiere Pro (🔥 প্রফেশনাল লেভেল) সিনেমা, মিউজিক ভিডিও, ইউটিউব সব কিছুর জন্য। কিন্তু শেখা একটু সময় লাগে, আর পেইড। DaVinci Resolve (Free + Studio version) Color grading-এর জন্য ওয়ার্ল্ড ক্লাস Free ভার্সনেই অনেক কিছু করা যায়। Final Cut Pro (Mac only) ম্যাক ইউজারদের জন্য অসাধারণ খুবই ফাস্ট, কিন্তু পেইড। Filmora (Easy & Feature-rich) Beginners এর জন্য আদর্শ ট্রানজিশন, এফেক্...
2 comments
Read more

🌟 কিভাবে গ্রাফিক্স ডিজাইন দিয়ে ফ্রিল্যান্সিং শুরু করবেন? How can you do graphics design of freelancing marketplace?

  🌟 কিভাবে গ্রাফিক্স ডিজাইন দিয়ে ফ্রিল্যান্সিং শুরু করবেন? 🖌️ ১. গ্রাফিক ডিজাইন শেখা (Skill Building) ✅ যে জিনিসগুলো শিখতে হবে: Logo Design Business Card, Flyer, Poster Social Media Design (Facebook/Instagram Ads, Banners) T-Shirt Design UI/UX (Basic Mobile/Web Design) 📦 সফটওয়্যার: Adobe Photoshop Adobe Illustrator (বিকল্প: Canva, Figma – বেসিক ও সহজ কাজে) 🎓 শেখার প্ল্যাটফর্ম: YouTube – ফ্রিতে শিখার জন্য Udemy Coursera LinkedIn Learning 🧰 ২. একটি শক্তিশালী পোর্টফোলিও তৈরি করুন আপনার কাজগুলো সুন্দরভাবে সাজিয়ে অনলাইনে দেখানোর ব্যবস্থা করুন। 🖼️ Behance , Dribbble বা নিজের Google Drive ব্যবহার করুন। 📁 অন্তত ৮-১২টি ভালো ডিজাইন রাখুন: Logo Social media post Poster Business card Banner Mockup (পণ্যের উপর ডিজাইন বসিয়ে বাস্তব রূপ) 🌐 ৩. ফ্রিল্যান্সিং সাইটে একাউন্ট তৈরি করুন 🎯 জনপ্রিয় সাইট: সাইট বৈশিষ্ট্য Fiverr গিগ ভিত্তিক, নতুনদের জন্য ভালো Upwork বিড করে কাজ নিতে হয় Freelancer.com বিভিন্ন ধরনের প্র...
Post a Comment
Read more