এসএইচএম ডিজিটাল • শিক্ষণীয় গাইডলাইন

ওয়েব ডেভেলপমেন্ট
মাস্টার রিসোর্স হাব

বেসিক HTML (Link, Image, Marquee, Text Formatting) থেকে শুরু করে CSS, JavaScript, ব্লগার কাস্টমাইজেশন, এবং গুগল শিট অটোমেশনের কমপ্লিট গাইডলাইন। নতুনদের জন্য উদাহরণসহ কোড ও প্রিভিউ সুবিধা দেওয়া হলো।

সহজ, সাবলীল ও তথ্যবহুল

প্রতিটি মডিউলে রয়েছে রিয়েল-ওয়ার্ল্ড কোড স্নিপেট, প্র্যাকটিক্যাল টিপস এবং প্রিভিউ করার অপশন।

১১টিপ্রধান মডিউল
১০০%ফ্রি ও ওপেন
লাইভকোড প্রিভিউ

বেসিক HTML (নতুনদের জন্য)

ওয়েব ডেভেলপমেন্টের প্রাথমিক ধাপ। এই কোডগুলো কপি করুন এবং "প্রিভিউ" বাটনে ক্লিক করে সাথে সাথে রেজাল্ট দেখুন।

টেক্সট ফরম্যাটিং (b, span)

লেখাকে বোল্ড করা এবং নির্দিষ্ট অংশে ডিজাইন দেওয়া।

ব্যবহারের নিয়ম

সাধারণ লেখাকে মোটা করতে <b> ট্যাগ এবং লেখার নির্দিষ্ট অংশের রং বা স্টাইল বদলাতে <span> ট্যাগ ব্যবহার করা হয়।

এইচটিএমএল কোড

<p>এটি একটি সাধারণ লেখা এবং <b>এটি বোল্ড লেখা</b>।</p>
<p>এই বাক্যের একটি শব্দ <span style="color: red; font-weight: bold;">লাল রঙের</span> হবে।</p>
HTML Text<b><span>

ছবি যুক্ত করা (img src)

ওয়েবপেজে ছবি বা লোগো প্রদর্শন করার নিয়ম।

ব্যবহারের নিয়ম

ছবি যুক্ত করতে <img> ট্যাগ ব্যবহৃত হয়। src এর ভেতরে ছবির লিংক এবং alt এর ভেতরে ছবির নাম দিতে হয়।

এইচটিএমএল কোড

<img src="https://via.placeholder.com/200x100.png?text=SHM+Digital" alt="Demo Image" style="border-radius: 8px; border: 2px solid #ccc;">
<p>ওপরেরটি একটি ডেমো ছবি।</p>
Images<img>

স্ক্রলিং টেক্সট (marquee)

ওয়েবপেজে চলমান বা স্ক্রলিং টেক্সট তৈরি করা।

ব্যবহারের নিয়ম

লেখাকে ডান থেকে বামে বা উপর-নিচে স্ক্রল করাতে <marquee> ট্যাগ ব্যবহার করা হয়। direction এবং scrollamount দিয়ে এর দিক ও গতি নিয়ন্ত্রণ করা যায়।

নোট: এটি একটি পুরোনো ট্যাগ, তবে নতুনদের অ্যানিমেশন শেখার জন্য বেশ মজার।

এইচটিএমএল কোড

<marquee direction="left" scrollamount="6" style="color: #ff3366; font-weight: bold; font-size: 20px;">
  এসএইচএম ডিজিটাল হাব-এ আপনাকে স্বাগতম!
</marquee>
Animation<marquee>

অ্যাডভান্সড টপিকস ও স্ক্রিপ্টিং

প্রোজেক্টের জন্য রেডি-মেড টেমপ্লেট এবং অটোমেশন কোড।

ব্লগারে কাস্টম ডোমেইন ম্যাপিং

সাবডোমেইন বা মূল ডোমেইন ব্লগারের সাথে যুক্ত করার সহজ ডিএনএস গাইড।

কীভাবে কাজ করে?

আপনার ডোমেইন প্রোভাইডারের ডিএনএস (DNS) প্যানেলে সঠিক CNAME রেকর্ড যুক্ত করতে হয়। গুগলের বর্তমান নির্দেশনা অনুযায়ী সাবডোমেইনের সিএনএএসই সরাসরি ghs.googlehosted.com-এর দিকে নির্দেশ করে।

টিপস: ডিএনএস আপডেট হওয়ার পর গ্লোবালি কার্যকর হতে ২৪ থেকে ৪৮ ঘণ্টা পর্যন্ত সময় লাগতে পারে।

ডিএনএস সেটিংস উদাহরণ

Type     Host/Name     Target
CNAME    blog          ghs.googlehosted.com

Verification CNAME:
CNAME    [Google token] [Google verification target]
DNSCNAMEব্লগার

গুগল শিটস + অ্যাপস স্ক্রিপ্ট ওয়েব অ্যাপ

স্প্রেডশিটকে ব্যাকএন্ড ডেটাস্টোর হিসেবে ব্যবহার করার পদ্ধতি।

আর্কিটেকচার ওভারভিউ

ফ্রন্টএন্ড ফর্ম থেকে ডেটা নিয়ে সরাসরি গুগল শিটে সেভ করার জন্য Apps Script অত্যন্ত কার্যকরী এবং সম্পূর্ণ খরচমুক্ত পদ্ধতি।

ব্যাকএন্ড কোড স্কেচ

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function saveData(name, mobile) {
  const sheet = SpreadsheetApp.openById('SHEET_ID').getSheetByName('Data');
  sheet.appendRow([new Date(), name, mobile]);
  return { status: "success" };
}
Google SheetsApps Script

এ৪ প্রিন্টেবল লেআউট + সিএসএস মিডিয়া

মার্কশিট ও অফিসিয়াল ডকুমেন্টের জন্য প্রিন্ট ডিজাইন।

প্রিন্ট স্টাইলিংয়ের নিয়ম

স্ক্রিন লেআউট থেকে প্রিন্ট পেজ আলাদা রাখতে @media print ব্যবহার করা হয়। এর মাধ্যমে অপ্রয়োজনীয় নেভিগেশন হাইড করা যায়।

সিএসএস কোড

@page {
  size: A4 portrait;
  margin: 10mm;
}

@media print {
  .no-print { display: none !important; }
  .page-box { box-shadow: none; border: none; }
}
A4 SizeCSS Print

SheetJS দিয়ে ব্রাউজারে এক্সেল ফাইল রিড

সার্ভার আপলোড ছাড়াই স্প্রেডশিট ডেটা প্রসেসিং করার উপায়।

ব্যবহারের সুবিধা

ইউজার এক্সেল (.xlsx) আপলোড করলেই তা জাভাস্ক্রিপ্টের মাধ্যমে ইনস্ট্যান্ট রিড করে টেবিলে রূপান্তর করা যায়।

জাভাস্ক্রিপ্ট স্নিপেট

document.querySelector('#excelFile').addEventListener('change', async e => {
  const file = e.target.files[0];
  const data = await file.arrayBuffer();
  const workbook = XLSX.read(data);
  const rows = XLSX.utils.sheet_to_json(workbook.Sheets[workbook.SheetNames[0]]);
  console.log(rows);
});
XLSXClient-side

ডার্ক ড্যাশবোর্ড + রেসপন্সিভ ইউআই

সিএসএস গ্রিড ও ফ্লেক্সবক্স দিয়ে ইন্টারফেস ডিজাইন।

ডিজাইন প্রিন্সিপাল

মোবাইল ও ডেস্কটপ উভয় ডিভাইসেই পারফেক্ট লেআউট নিশ্চিত করতে CSS Grid এবং Responsive Breakpoints জরুরি।

লেআউট স্নিপেট

.dashboard-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 20px;
}
@media (max-width: 800px) {
  .dashboard-grid { grid-template-columns: 1fr; }
}
CSS GridUI/UX

বেসিক CSS (কালার ও বক্স স্টাইল)

এইচটিএমএল এলিমেন্টে ব্যাকগ্রাউন্ড কালার, প্যাডিং এবং মার্জিন দেওয়ার নিয়ম।

ব্যবহারের নিয়ম

ডিজাইন করার জন্য style="..." (Inline CSS) অথবা <style> ট্যাগ ব্যবহার করা হয়। নিচে একটি সুন্দর বক্সের উদাহরণ দেওয়া হলো।

সিএসএস ও এইচটিএমএল কোড

<style>
  .demo-box {
    background-color: #20e3b2;
    color: #06101d;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    font-weight: bold;
    font-size: 18px;
  }
</style>
<div class="demo-box">এটি একটি কাস্টম স্টাইল করা বক্স</div>
Basic CSSStyling
কোড সফলভাবে কপি হয়েছে!