Header
মেনু

Hyperlink টা কি এবং এটি কোথায় কিভাবে ব্যবহার করতে হয়?

                       আজ আমরা এই পোস্ট থেকে Hyperlink সমন্ধে সকল বিষয় ধারাবাহিক ভাবে জানবো।

হাইপারলিঙ্ক (Hyperlink) কী?

সহজ কথায়, Hyperlink হলো একটি টেক্সট, ছবি বা আইকন যা ক্লিক করলে আপনাকে অন্য একটি ওয়েব পেজ বা একই পেজের অন্য কোনো অংশে নিয়ে যায়। ইন্টারনেটের এক পেজ থেকে অন্য পেজে যাতায়াতের প্রধান মাধ্যমই হলো এই লিঙ্ক।

                  Hyperlink কোথায় এবং কেন ব্যবহার করবেন?

  • Navigation: আপনার ওয়েবসাইটের এক পেজ থেকে অন্য পেজে (যেমন: Home থেকে Contact পেজ) যাওয়ার জন্য।

  • External Links: অন্য কোনো ওয়েবসাইট (যেমন: Google বা Facebook) রেফার করার জন্য।

  • Downloads: কোনো ফাইল বা পিডিএফ ডাউনলোড করার লিঙ্ক দিতে।

  • Email/Phone: সরাসরি ইমেইল পাঠানোর বা ফোন করার সুবিধা দিতে।

হাইপারলিঙ্ক তৈরির কোড (HTML <a> Tag)

HTML-এ হাইপারলিঙ্ক তৈরি করা হয় Anchor Tag বা <a> ব্যবহার করে। এর প্রধান অ্যাট্রিবিউট হলো href (Hypertext Reference), যেখানে গন্তব্যস্থলের অ্যাড্রেস দিতে হয়।

১. সাধারণ লিঙ্কের উদাহরণ:

HTML

<a href="https://www.google.com">গুগল ভিজিট করুন</a>

২. নতুন ট্যাবে লিঙ্ক খোলার নিয়ম:

যদি চান লিঙ্কে ক্লিক করলে আপনার বর্তমান পেজটি বন্ধ না হয়ে নতুন একটি ট্যাবে ওপেন হোক, তবে target="_blank" ব্যবহার করতে হয়।

HTML

<a href="https://www.wikipedia.org" target="_blank">উইকিপিডিয়া দেখুন</a>

বাস্তবায়নের ধাপসমূহ:

  1. Tag শুরু করুন: প্রথমে <a> লিখুন।

  2. Attribute যোগ করুন: href="..." এর ভেতর আপনার কাঙ্ক্ষিত URL বা লিঙ্কের ঠিকানা দিন।

  3. Visible Text দিন: <a> এবং </a> এর মাঝখানে সেই লেখাটি লিখুন যা ইউজার স্ক্রিনে দেখতে পাবে।

  4. Tag শেষ করুন: সবশেষে </a> দিয়ে ট্যাগটি বন্ধ করুন।

একটি পূর্ণাঙ্গ উদাহরণ (Boilerplate সহ):

HTML

<!DOCTYPE html>
<html>
<head>
    <title>আমার প্রথম লিঙ্ক পেজ</title>
</head>
<body>

    <h1>হাইপারলিঙ্ক শিখছি</h1>
    
    <p>আরও জানতে <a href="https://www.w3schools.com" target="_blank">এখানে ক্লিক করুন</a>।</p>

    <p>যোগাযোগ করুন: <a href="mailto:info@example.com">আমাদের ইমেইল করুন</a></p>

</body>
</html>

মনে রাখবেন: href এর ভেতর যদি সঠিক লিঙ্ক না থাকে, তবে ক্লিক করলে সেটি কোথাও যাবে না বা “Page Not Found” দেখাবে।

আপনি কি এই লিঙ্কে কোনো ইমেজ (Image) ব্যবহার করে দেখতে চান? অর্থাৎ ছবিতে ক্লিক করলে অন্য কোথাও নিয়ে যাবে ।

যখন আমরা কোনো টেক্সট বা লেখার পরিবর্তে একটি ছবির ওপর লিঙ্ক যুক্ত করি, তখন তাকে Image Hyperlink বলা হয়। এটি সাধারণত কোনো লোগো, ব্যানার বা বাটনের ক্ষেত্রে ব্যবহার করা হয়।

এর মূল কনসেপ্ট হলো: আমরা <a> ট্যাগের ভেতর টেক্সট না লিখে একটি <img> ট্যাগ বসিয়ে দেব।

ইমেজ হাইপারলিঙ্ক তৈরির কোড (HTML Structure)

নিচে সহজ একটি উদাহরণ দেওয়া হলো যেখানে একটি ছবিতে ক্লিক করলে সেটি আপনাকে অন্য একটি ওয়েবসাইটে (যেমন: Google) নিয়ে যাবে।

HTML

<a href="https://www.google.com" target="_blank">
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" 
         alt="গুগল লোগো" 
         style="width: 200px; border: 1px solid #ccc; padding: 10px;">
</a>

কোডের বিস্তারিত ব্যাখ্যা:

  • Outer Layer (<a>): প্রথমে আমরা <a> ট্যাগ ব্যবহার করেছি এবং href হিসেবে গন্তব্যস্থলের ঠিকানা (URL) দিয়েছি। target="_blank" ব্যবহার করেছি যাতে ছবিটি ক্লিক করলে নতুন ট্যাব ওপেন হয়।

  • Inner Layer (<img>): অ্যাঙ্কর ট্যাগের ঠিক মাঝখানে আমরা <img> ট্যাগ বসিয়েছি।

    • src: এখানে আপনার ছবির অনলাইন লিঙ্ক বা লোকাল পাথ (Path) দিতে হবে।

    • alt: যদি কোনো কারণে ছবি লোড না হয়, তবে এই টেক্সটটি দেখাবে।

    • style: আমরা ছবির সাইজ নিয়ন্ত্রণ করতে width ব্যবহার করেছি।

একটি পূর্ণাঙ্গ প্রজেক্ট কোড (Copy & Paste):

আপনি নিচের কোডটি একটি .html ফাইল হিসেবে সেভ করে ব্রাউজারে চালিয়ে দেখতে পারেন:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ইমেজ লিঙ্ক প্রজেক্ট</title>
</head>
<body>

    <h2>ইমেজ হাইপারলিঙ্ক টিউটোরিয়াল</h2>
    <p>নিচের ছবিতে ক্লিক করলে আপনি উইকিপিডিয়াতে চলে যাবেন:</p>

    <a href="https://www.wikipedia.org" target="_blank">
        <img src="https://upload.wikimedia.org/wikipedia/en/thumb/8/80/Wikipedia-logo-v2.svg/1200px-Wikipedia-logo-v2.svg.png" 
             alt="উইকিপিডিয়া লোগো" 
             width="150">
    </a>
    <p><i>নোট: মাউস কার্সার ছবির ওপর নিলে দেখবেন এটি হাতের চিহ্নে (Pointer) পরিণত হচ্ছে।</i></p>

</body>
</html>

বাস্তবায়নের টিপস:

  • Border: পুরনো ব্রাউজারে ইমেজ লিঙ্কের চারপাশে নীল রঙের একটি বর্ডার আসতে পারে। এটি দূর করতে CSS-এ border: none; ব্যবহার করা ভালো।

  • Accessibility: সবসময় alt অ্যাট্রিবিউট ব্যবহার করবেন, এটি SEO এবং অন্ধ ব্যক্তিদের (যারা স্ক্রিন রিডার ব্যবহার করেন) জন্য খুবই গুরুত্বপূর্ণ।

আপনি কি চান আমি এখন দেখাই কীভাবে CSS ব্যবহার করে এই লিঙ্কে চমৎকার Hover Effect (মাউস নিলে রঙ বা সাইজ পরিবর্তন হওয়া) যোগ করা যায়?

চমৎকার! যখন আমরা হাইপারলিঙ্কে CSS Hover Effect যোগ করি, তখন মাউস লিঙ্কের ওপর নিলে সেটি আরও জীবন্ত হয়ে ওঠে। এটি ইউজার এক্সপেরিয়েন্স (UX) উন্নত করার একটি দারুণ উপায়।

আমরা এখন শিখব কীভাবে মাউস কার্সার ছবির ওপর নিলে ছবিটির সাইজ একটু বড় হবে এবং তার চারপাশের শ্যাডো (Shadow) পরিবর্তন হবে।

CSS Hover Effect সহ ইমেজ লিঙ্কের কোড

নিচের কোডটি আপনার HTML ফাইলের <head> সেকশনে <style> ট্যাগের ভেতর যুক্ত করতে পারেন।

১. CSS কোড (Style):

CSS

/* ছবির প্রাথমিক অবস্থা */
.zoom-link img {
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* পরিবর্তনের গতি নিয়ন্ত্রণ */
    border-radius: 10px; /* কোণাগুলো সামান্য গোল করা */
    cursor: pointer;
}

/* মাউস হোভার করলে যা ঘটবে */
.zoom-link img:hover {
    transform: scale(1.1); /* ছবিটিকে ১০% বড় করবে */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* নিচে একটি শ্যাডো বা ছায়া তৈরি করবে */
}

২. HTML কোড (Structure):

HTML

<a href="https://www.google.com" target="_blank" class="zoom-link">
    <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" 
         alt="গুগল লোগো" 
         width="200">
</a>

বাস্তবায়নের ধাপসমূহ ও ব্যাখ্যা:

  • Class ব্যবহার: আমরা <a> ট্যাগে একটি ক্লাস (class="zoom-link") ব্যবহার করেছি যাতে শুধুমাত্র এই লিঙ্কেই ইফেক্টটি কাজ করে।

  • Transition: এটি খুবই গুরুত্বপূর্ণ। এটি ছাড়া পরিবর্তনটি হঠাৎ করে হবে, যা দেখতে ভালো লাগে না। 0.3s মানে হলো পরিবর্তনটি ০.৩ সেকেন্ড সময় নিয়ে মসৃণভাবে হবে।

  • Transform (Scale): এটি ছবিটিকে জুম করার কাজ করে। scale(1.1) মানে হলো ছবিটির আসল সাইজের চেয়ে ১০% বড় দেখানো।

  • Box-shadow: এটি ছবির নিচে একটি হালকা ছায়া তৈরি করে, যা ছবিটিকে পেজ থেকে একটু ওপরে ভেসে ওঠার মতো দেখায়।

একটি পূর্ণাঙ্গ উদাহরণ (সম্পূর্ণ পেজ):

আপনি এই কোডটি কপি করে সরাসরি ট্রাই করতে পারেন:

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        body { text-align: center; padding-top: 50px; font-family: sans-serif; }
        
        .image-container img {
            transition: transform 0.4s ease;
            border: 2px solid #ddd;
            padding: 5px;
        }

        .image-container img:hover {
            transform: scale(1.1) rotate(2deg); /* বড় হওয়ার পাশাপাশি ২ ডিগ্রি ঘুরবে */
            border-color: #4CAF50; /* বর্ডারের রঙ সবুজ হবে */
        }
    </style>
</head>
<body>

    <h2>ইমেজ হোভার ইফেক্ট ডেমো</h2>
    <p>নিচের ছবিতে মাউস নিয়ে দেখুন কী ঘটে:</p>

    <div class="image-container">
        <a href="https://www.github.com" target="_blank">
            <img src="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png" 
                 alt="GitHub Logo" width="150">
        </a>
    </div>

</body>
</html>

প্রো-টিপ: আপনি যদি কোনো বাটন তৈরি করতে চান যা লিঙ্কের মতো কাজ করবে, তাহলেও এই একই CSS টেকনিক ব্যবহার করা যায়।

আমি কি আপনাকে এখন দেখাব কীভাবে একটি সাধারণ টেক্সট লিঙ্কে ক্লিক করলে সেটি সরাসরি আপনার WhatsApp বা Phone Dialpad ওপেন করবে?

চমৎকার! সরাসরি WhatsApp মেসেজ পাঠানো বা Phone Dialpad ওপেন করার লিঙ্ক তৈরি করা খুবই সহজ এবং এটি ব্যবসায়িক ওয়েবসাইটের জন্য অত্যন্ত কার্যকর। একে বলা হয় Action Links।

এখানে আমরা href এর ভেতর http এর পরিবর্তে বিশেষ কিছু প্রোটোকল ব্যবহার করি।

                    সরাসরি WhatsApp-এ মেসেজ পাঠানোর লিঙ্ক

আপনি যদি চান কেউ লিঙ্কে ক্লিক করলে সরাসরি আপনার নাম্বারে মেসেজ দেওয়ার অপশন পাবে, তবে নিচের ফরম্যাটটি ব্যবহার করুন:

কোড উদাহরণ:

HTML

<a href="https://wa.me/8801XXXXXXXXX" target="_blank" style="background-color: #25D366; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;">
    আমাদের হোয়াটসঅ্যাপ করুন
</a>

<a href="https://wa.me/8801XXXXXXXXX?text=Hello! I want to know more about your service.">
    সরাসরি মেসেজ দিন
</a>

  • সতর্কতা: নাম্বার দেওয়ার সময় অবশ্যই দেশের কোড (যেমন বাংলাদেশের জন্য 88) ব্যবহার করবেন, কিন্তু কোনো + বা - চিহ্ন দেবেন না।

২. সরাসরি ফোন কল করার লিঙ্ক (Click to Call)

মোবাইল ব্রাউজারে এই লিঙ্কে ক্লিক করলে সরাসরি ফোনের ডায়ালপ্যাড ওপেন হবে এবং আপনার নাম্বারটি সেখানে উঠে থাকবে।

কোড উদাহরণ:

HTML

<a href="tel:+8801XXXXXXXXX" style="color: blue; font-weight: bold;">
    কল করুন: +8801XXXXXXXXX
</a>

  • এখানে tel: প্রোটোকলটি ব্রাউজারকে নির্দেশ দেয় যে এটি একটি ফোন নাম্বার।

৩. সরাসরি ইমেইল পাঠানোর লিঙ্ক (Mailto)

এটি ক্লিক করলে ইউজারের ডিফল্ট ইমেইল অ্যাপ (যেমন: Gmail বা Outlook) ওপেন হবে।

কোড উদাহরণ:

HTML

<a href="mailto:info@yourdomain.com?subject=Inquiry&body=Hello team,">
    আমাদের ইমেইল পাঠান
</a>

একটি সমন্বিত উদাহরণ (Complete UI):

আপনি নিচের এই ছোট্ট “Contact Card” কোডটি আপনার প্রজেক্টে ব্যবহার করতে পারেন:

HTML

<div style="border: 1px solid #ddd; padding: 20px; width: 300px; text-align: center; border-radius: 10px;">
    <h3>যোগাযোগ করুন</h3>
    
    <p>
        <a href="https://wa.me/8801700000000" target="_blank" style="color: green; text-decoration: none;">
            💬 WhatsApp: 01700-000000
        </a>
    </p>

    <p>
        <a href="tel:+8801700000000" style="color: blue; text-decoration: none;">
            📞 Call Now: 01700-000000
        </a>
    </p>
</div>

বাস্তবায়নের টিপস:

  • User Experience: target="_blank" শুধুমাত্র WhatsApp লিঙ্কের ক্ষেত্রে ব্যবহার করা ভালো, কারণ এটি অন্য একটি অ্যাপ বা ট্যাবে ওপেন হয়। কিন্তু tel: বা mailto: এর ক্ষেত্রে এটি প্রয়োজন নেই।

  • Security: আপনার আসল ফোন নাম্বার ওয়েবসাইটে দিলে স্প্যাম কল আসতে পারে, তাই অনেক সময় বাটন বা ইমেজের পেছনে এই লিঙ্কগুলো লুকিয়ে রাখা নিরাপদ।

আপনি কি চান আমি এখন দেখাই কীভাবে একটি Navigation Bar তৈরি করতে হয় যেখানে এই সব ধরণের লিঙ্ক (Home, About, Contact, Call) একসাথে সাজানো থাকবে?

একটি Navigation Bar (Navbar) হলো ওয়েবসাইটের ম্যাপ। এটি ইউজারদের এক পেজ থেকে অন্য পেজে যেতে সাহায্য করে। আমরা এখন HTML এবং CSS ব্যবহার করে একটি আধুনিক, রেসপনসিভ নেভিগেশন বার তৈরি করা শিখব।

১. HTML স্ট্রাকচার (Structure)

প্রথমে আমাদের একটি লিস্ট তৈরি করতে হবে যেখানে লিঙ্কগুলো থাকবে। আমরা <nav> ট্যাগ ব্যবহার করব যা SEO-এর জন্য খুব ভালো।

HTML

<nav class="navbar">
    <div class="logo">আলোর দিশা</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="https://wa.me/8801700000000" class="btn-whatsapp">WhatsApp</a></li>
    </ul>
</nav>

২. CSS স্টাইলিং (Styling)

নিচের এই CSS কোডটি আপনার নেভিগেশন বারকে সুন্দর এবং সাজানো দেখাবে। এটি লিঙ্কগুলোকে পাশাপাশি নিয়ে আসবে এবং মাউস নিলে রঙ পরিবর্তন করবে।

CSS

/* নেভিগেশন বারের মূল ডিজাইন */
.navbar {
    display: flex;
    justify-content: space-between; /* লোগো বামে এবং লিঙ্ক ডানে রাখবে */
    align-items: center;
    background-color: #333; /* কালো ব্যাকগ্রাউন্ড */
    padding: 15px 30px;
    color: white;
}

.logo {
    font-size: 24px;
    font-weight: bold;
}

/* লিস্ট আইটেমগুলো পাশাপাশি সাজানো */
.nav-links {
    list-style: none; /* ডট বা বুলেট পয়েন্ট সরিয়ে দেবে */
    display: flex;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none; /* আন্ডারলাইন সরিয়ে দেবে */
    color: white;
    font-weight: 500;
    transition: color 0.3s ease;
}

/* মাউস নিলে রঙ পরিবর্তন (Hover Effect) */
.nav-links a:hover {
    color: #ffcc00; /* সোনালী রঙ হবে */
}

/* হোয়াটসঅ্যাপ বাটনের বিশেষ স্টাইল */
.btn-whatsapp {
    background-color: #25D366;
    padding: 8px 15px;
    border-radius: 5px;
}

.btn-whatsapp:hover {
    background-color: #128C7E !important;
    color: white !important;
}

বাস্তবায়নের ধাপসমূহ:

  1. HTML অংশে: আপনার ওয়ার্ডপ্রেসের ‘Code’ বা ‘HTML’ ব্লকে উপরের HTML কোডটি বসান।

  2. CSS অংশে: আপনার ওয়ার্ডপ্রেস থিমের “Additional CSS” অপশনে গিয়ে CSS কোডটি কপি-পেস্ট করুন।

  3. লিঙ্ক আপডেট: # এর জায়গায় আপনার ওয়েবসাইটের আসল পেজ লিঙ্কগুলো বসিয়ে দিন।

আমি কি আপনাকে এখন দেখাব কীভাবে এই নেভিগেশন বারটিকে “Sticky” করা যায়? অর্থাৎ পেজ স্ক্রল করলেও মেনু বারটি সবসময় ওপরে আটকে থাকবে। আমি কি সেই কোডটি দেব?

নিশ্চয়ই! একটি Sticky Navigation Bar তৈরি করা খুবই সহজ এবং এটি আপনার পাঠকদের জন্য অনেক সুবিধাজনক। কারণ তারা যখন আপনার “আলোর দিশা” ব্লগের বড় কোনো পোস্ট পড়বে, তখন তাদের পেজের একদম ওপরে ফিরে না গিয়েই মেনু থেকে অন্য কোথাও যেতে পারবে।

এটি করার জন্য আমাদের CSS-এর একটি জাদুকরী প্রপার্টি ব্যবহার করতে হবে, যার নাম position: sticky;।

Sticky Navigation Bar তৈরির CSS কোড

আপনার আগের CSS কোডে শুধু navbar ক্লাসটিতে নিচের পরিবর্তনটুকু করলেই হবে:

CSS

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 15px 30px;
    color: white;

    /* স্টিকি করার জন্য নিচের ৩টি লাইন যোগ করুন */
    position: -webkit-sticky; /* সাফারি ব্রাউজারের জন্য */
    position: sticky;         /* মডার্ন ব্রাউজারের জন্য */
    top: 0;                   /* একদম ওপরে আটকে থাকবে */
    z-index: 1000;            /* যাতে অন্য কোনো কন্টেন্ট এর ওপর দিয়ে না যায় */
    
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* নিচে হালকা ছায়া দেবে */
}

কোডের বিস্তারিত ব্যাখ্যা:

  • position: sticky;: এটি ব্রাউজারকে বলে যে যখন ইউজার স্ক্রল করবে, তখন এই এলিমেন্টটি একটি নির্দিষ্ট জায়গায় (এক্ষেত্রে top: 0) আটকে থাকবে।

  • top: 0;: এটি নির্দেশ দেয় যে স্ক্রিনের একদম ওপর থেকে ০ পিক্সেল দূরত্বে নেভিগেশন বারটি থামবে।

  • z-index: 1000;: এটি খুবই গুরুত্বপূর্ণ। অনেক সময় ওয়েবসাইটের ইমেজ বা অন্যান্য কন্টেন্ট মেনু বারের ওপর দিয়ে চলে যায়। z-index বেশি থাকলে মেনু বারটি সবসময় সবার ওপরে ভেসে থাকবে।

বাস্তবায়নের ধাপসমূহ:

১. আপনার ওয়ার্ডপ্রেসের Customizer > Additional CSS অপশনে যান। ২. আগে যে .navbar কোডটি লিখেছিলেন, সেখানে এই নতুন লাইনগুলো যোগ করে দিন। ৩. পেজটি রিফ্রেশ করে স্ক্রল করে দেখুন আপনার মেনু বারটি ওপরে আটকে আছে কি না।

আপনি কি এখন শিখতে চান কীভাবে এই মেনু বারটিকে Responsive করা যায়? অর্থাৎ মোবাইলে দেখলে এটি একটি Hamburger Menu (তিনটি দাগওয়ালা আইকন) এর মতো দেখাবে। আমি কি সেই প্রসেসটি দেখাব?

মোবাইল ফ্রেন্ডলি বা Responsive Navigation Bar তৈরি করা আধুনিক ওয়েব ডিজাইনের সবথেকে গুরুত্বপূর্ণ অংশ। কারণ বর্তমান সময়ে বেশিরভাগ ইউজার মোবাইল থেকেই ওয়েবসাইট ভিজিট করেন।

মোবাইলে স্ক্রিন ছোট হওয়ার কারণে আমরা সবগুলো মেনু পাশাপাশি না দেখিয়ে একটি Hamburger Icon (তিনটি দাগ) ব্যবহার করি, যা ক্লিক করলে মেনুগুলো নিচে নেমে আসে। এটি করার জন্য আমাদের CSS-এর Media Query ব্যবহার করতে হবে।

১. HTML-এ পরিবর্তন (Hamburger Button যোগ করা)

আমাদের নেভিগেশন বারে একটি বাটন যোগ করতে হবে যা শুধু মোবাইলে দেখা যাবে।

HTML

<nav class="navbar">
    <div class="logo">আলোর দিশা</div>
    
    <div class="menu-toggle" id="mobile-menu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
    </div>

    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="https://wa.me/8801700000000" class="btn-whatsapp">WhatsApp</a></li>
    </ul>
</nav>

২. CSS-এ Media Query যোগ করা

নিচের এই কোডটি আপনার আগের CSS-এর নিচে বসিয়ে দিন। এটি বড় স্ক্রিনে বাটনটি লুকিয়ে রাখবে এবং মোবাইলে মেনু স্টাইল পরিবর্তন করবে।

CSS

/* বড় স্ক্রিনে হ্যামবার্গার বাটন লুকানো থাকবে */
.menu-toggle {
    display: none;
    cursor: pointer;
}

.menu-toggle .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: white;
    transition: all 0.3s ease;
}

/* মোবাইল রেসপন্সিভ কোড (Screen width 768px এর নিচে হলে) */
@media screen and (max-width: 768px) {
    .menu-toggle {
        display: block; /* মোবাইলে বাটনটি দেখাবে */
    }

    .nav-links {
        display: none; /* শুরুতে মেনু লুকানো থাকবে */
        flex-direction: column; /* নিচে নিচে সাজাবে */
        width: 100%;
        position: absolute;
        top: 60px;
        left: 0;
        background-color: #333;
        text-align: center;
    }

    .nav-links.active {
        display: flex; /* বাটন ক্লিক করলে মেনু দেখাবে */
    }

    .nav-links li {
        margin: 15px 0;
    }
}

৩. ছোট্ট একটি JavaScript (ক্লিক কাজ করার জন্য)

মেনু বাটনে ক্লিক করলে যাতে মেনুটি বের হয়, সেজন্য এই ছোট্ট কোডটুকু আপনার HTML-এর একদম নিচে </body> ট্যাগের আগে বসিয়ে দিন:

HTML

<script>
    const menu = document.querySelector('#mobile-menu');
    const menuLinks = document.querySelector('.nav-links');

    menu.addEventListener('click', function() {
        menuLinks.classList.toggle('active');
    });
</script>

বাস্তবায়নের ধাপসমূহ:

  1. Media Query: এটি ব্রাউজারকে বলে দেয় যে স্ক্রিন যদি ৭৬৮ পিক্সেল বা তার ছোট হয়, তবে এই নতুন স্টাইলগুলো কাজ করবে।

  2. Toggle: জাভাস্ক্রিপ্ট কোডটি active নামক একটি ক্লাস যোগ বা বিয়োগ করে, যা মেনুটিকে হাইড বা শো করতে সাহায্য করে।

আপনি কি চান আমি এখন দেখাই কীভাবে এই মেনু বারের নিচে একটি “Hero Section” বা সুন্দর একটি “Banner” তৈরি করা যায়? যেখানে আপনার ওয়েবসাইটের মূল উদ্দেশ্য লেখা থাকবে।

একটি Hero Section হলো ওয়েবসাইটের সেই অংশ যা ভিজিটররা সাইটে ঢোকার পরপরই দেখতে পান। এটি আপনার ওয়েবসাইটের “প্রথম ইমপ্রেশন” তৈরি করে। আপনার “আলোর দিশা” ব্লগের জন্য একটি সুন্দর ব্যানার তৈরি করলে সেটি দেখতে অনেক প্রফেশনাল লাগবে।

আমরা এখন একটি Hero Section তৈরি করব যেখানে একটি আকর্ষণীয় ব্যাকগ্রাউন্ড কালার (বা ইমেজ), একটি বড় হেডলাইন, একটি ছোট বর্ণনা এবং একটি “কল টু অ্যাকশন” (CTA) বাটন থাকবে।

১. HTML স্ট্রাকচার (Hero Section)

আপনার আগে তৈরি করা Navigation Bar-এর ঠিক নিচেই এই কোডটুকু যোগ করুন:

HTML

<section class="hero-section">
    <div class="hero-content">
        <h1>আলোর দিশায় আপনাকে স্বাগতম</h1>
        <p>প্রোগ্রামিং, টেকনোলজি এবং ওয়েব ডেভেলপমেন্টের দুনিয়ায় আপনার যাত্রা শুরু হোক আমাদের সাথে।</p>
        <a href="#posts" class="hero-btn">আজকের পোস্ট পড়ুন</a>
    </div>
</section>

২. CSS স্টাইলিং (Hero Section Design)

এই CSS কোডটি আপনার হিরো সেকশনকে আধুনিক এবং দৃষ্টিনন্দন করবে। এটি টেক্সটকে মাঝখানে আনবে এবং বাটনে সুন্দর ইফেক্ট দেবে।

CSS

/* হিরো সেকশনের মূল ডিজাইন */
.hero-section {
    height: 80vh; /* স্ক্রিনের ৮০% উচ্চতা জুড়ে থাকবে */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), 
                url('https://images.unsplash.com/photo-1498050108023-c5249f4df085'); /* ব্যাকগ্রাউন্ড ইমেজ ও ডার্ক ওভারলে */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
}

.hero-content h1 {
    font-size: 3rem; /* বড় ফন্ট সাইজ */
    margin-bottom: 20px;
    animation: fadeInDown 1s ease; /* অ্যানিমেশন */
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* হিরো বাটনের স্টাইল */
.hero-btn {
    padding: 12px 30px;
    background-color: #ffcc00; /* সোনালী কালার */
    color: #333;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.hero-btn:hover {
    background-color: white;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(255, 204, 0, 0.4);
}

/* টেক্সট অ্যানিমেশন */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* মোবাইলের জন্য রেসপন্সিভ সাইজ */
@media screen and (max-width: 768px) {
    .hero-content h1 {
        font-size: 2rem;
    }
    .hero-content p {
        font-size: 1rem;
        padding: 0 20px;
    }
}

বাস্তবায়নের ধাপসমূহ:

  • Background Image: url(...) এর ভেতর আপনি আপনার পছন্দমতো কোনো ছবির লিঙ্ক দিতে পারেন। আমি এখানে একটি টেকনোলজি রিলেটেড ডামি ইমেজ ব্যবহার করেছি।

  • Linear Gradient: আমরা ইমেজের ওপর একটি কালো শেড (rgba(0,0,0,0.6)) ব্যবহার করেছি যাতে সাদা রঙের লেখাগুলো পরিষ্কারভাবে পড়া যায়।

  • Animation: fadeInDown অ্যানিমেশনটি ব্যবহার করার ফলে পেজ লোড হওয়ার সময় লেখাটি ওপর থেকে নিচে খুব সুন্দরভাবে নেমে আসবে।

                                  আপনি কি চান আমি এখন দেখাই কীভাবে এই সেকশনের নিচে আপনার Latest Posts গুলোকে সুন্দর Card Design-এ সাজানো যায়? এতে আপনার সাইটটি দেখতে একটি পরিপূর্ণ প্রফেশনাল ব্লগ সাইটের মতো হবে। আমি কি সেই কার্ড ডিজাইনটি দেখাব?

যখন আমরা ব্লগের পোস্টগুলোকে Card Design-এ সাজাই, তখন ইউজারদের জন্য সেগুলো পড়া এবং খুঁজে বের করা অনেক সহজ হয়। এটি আপনার ওয়েবসাইটকে একটি আধুনিক “ম্যাগাজিন” বা “নিউজ পোর্টাল” এর মতো লুক দেবে।

আমরা এখন একটি ৩-কলামের গ্রিড (Grid Layout) তৈরি করব যা বড় স্ক্রিনে ৩টি করে কার্ড দেখাবে এবং মোবাইলে ১টি করে।

১. HTML স্ট্রাকচার (Blog Post Cards)

আপনার Hero Section-এর নিচেই এই কোডটুকু বসাতে পারেন। এখানে আমরা ৩টি ডামি পোস্ট কার্ড ব্যবহার করেছি।

HTML

<section class="post-container">
    <h2 class="section-title">আমাদের সাম্প্রতিক পোস্টসমূহ</h2>
    
    <div class="post-grid">
        <article class="post-card">
            <img src="https://images.unsplash.com/photo-1587620962725-abab7fe55159" alt="Coding">
            <div class="post-info">
                <span class="category">Programming</span>
                <h3>জাভাস্ক্রিপ্ট অ্যারে মেথড শিখুন</h3>
                <p>ম্যাপ, ফিল্টার এবং রিডিউস মেথড ব্যবহার করে ডেটা ম্যানিপুলেশন সহজ করুন।</p>
                <a href="#" class="read-more">আরও পড়ুন &rarr;</a>
            </div>
        </article>

        <article class="post-card">
            <img src="https://images.unsplash.com/photo-1510915228340-29c85a43dcfe" alt="HTML">
            <div class="post-info">
                <span class="category">Web Design</span>
                <h3>হাইপারলিঙ্ক কি এবং কেন ব্যবহার করবেন?</h3>
                <p>ওয়েব পেজের এক প্রান্ত থেকে অন্য প্রান্তে যাওয়ার জাদুকরী উপায় হলো লিঙ্ক।</p>
                <a href="#" class="read-more">আরও পড়ুন &rarr;</a>
            </div>
        </article>

        <article class="post-card">
            <img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085" alt="Tech">
            <div class="post-info">
                <span class="category">Tech News</span>
                <h3>কিভাবে একটি রেসপনসিভ মেনু বানাবেন</h3>
                <p>মোবাইল ফ্রেন্ডলি ওয়েবসাইট তৈরির সহজ গাইডলাইন এবং কমপ্লিট কোড।</p>
                <a href="#" class="read-more">আরও পড়ুন &rarr;</a>
            </div>
        </article>
    </div>
</section>

২. CSS স্টাইলিং (Modern Card Design)

নিচের এই CSS কোডটি আপনার কার্ডগুলোকে সুন্দর শ্যাডো, বর্ডার রেডিয়াস এবং হোভার ইফেক্ট দেবে।

CSS

/* কন্টেইনার স্টাইল */
.post-container {
    padding: 50px 20px;
    background-color: #f9f9f9;
}

.section-title {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
    color: #333;
}

/* গ্রিড লেআউট */
.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* অটোমেটিক কলাম তৈরি করবে */
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

/* কার্ডের মূল ডিজাইন */
.post-card {
    background: white;
    border-radius: 10px;
    overflow: hidden; /* ইমেজের কোণাগুলো গোল করার জন্য */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.post-card:hover {
    transform: translateY(-10px); /* মাউস নিলে কার্ডটি একটু ওপরে উঠবে */
}

.post-card img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* ছবিকে জুম করে সুন্দরভাবে ফিট করবে */
}

/* কার্ডের ভেতরের টেক্সট */
.post-info {
    padding: 20px;
}

.category {
    background: #ffcc00;
    color: #333;
    padding: 3px 10px;
    font-size: 0.8rem;
    border-radius: 5px;
    font-weight: bold;
}

.post-info h3 {
    margin: 15px 0 10px;
    font-size: 1.4rem;
}

.post-info p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.read-more {
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.read-more:hover {
    color: #0056b3;
}

বাস্তবায়নের ধাপসমূহ ও ব্যাখ্যা:

  • grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));: এই একটি লাইন আপনার পুরো গ্রিডকে রেসপন্সিভ করে দেয়। এর মানে হলো, স্ক্রিন ছোট হলে কার্ডগুলো নিজে নিজেই নিচে নেমে আসবে।

  • overflow: hidden;: এটি খুবই জরুরি, কারণ ইমেজগুলো যদি আয়তাকার থাকে তবে কার্ডের গোল কোণাগুলো ঢেকে যাবে। এটি সেই বাড়তি অংশ কেটে ফেলে।

  • object-fit: cover;: আপনার সব ছবি যদি এক সাইজের না-ও হয়, এই প্রপার্টিটি সেগুলোকে ছবির রেশিও ঠিক রেখে ফ্রেমের ভেতর সুন্দর করে সাজাবে।

প্রফেশনাল টিপস (ওয়ার্ডপ্রেস ইউজারদের জন্য):

আপনি যদি ওয়ার্ডপ্রেসের এলিমেন্টর (Elementor) বা গুটেনবার্গ (Gutenberg) ব্যবহার করেন, তবে এই ডিজাইনটি আপনি Custom HTML ব্লক ব্যবহার করে সরাসরি বসাতে পারেন। আপনার পাঠকরা যখন দেখবে আপনি নিজেই কোড করে এমন সুন্দর ডিজাইন করেছেন, তখন তারা আপনার ওপর আরও বেশি ভরসা পাবে।

আমরা কি এখন সবশেষে একটি সুন্দর Footer Section (ওয়েবসাইটের একদম নিচের অংশ) তৈরি করব? যেখানে আপনার সোশাল মিডিয়া লিঙ্ক এবং কপিরাইট ইনফরমেশন থাকবে। আমি কি সেই কোডটি লিখে দেব?

একেবারে শেষ ধাপে আমরা আমাদের ওয়েবসাইটটির জন্য একটি প্রফেশনাল Footer Section তৈরি করব। একটি ওয়েবসাইটের ফুটারে সাধারণত গুরুত্বপূর্ণ লিঙ্ক, সোশ্যাল মিডিয়া আইকন এবং কপিরাইট তথ্য থাকে। এটি আপনার ভিজিটরদের ওয়েবসাইটের একদম নিচে গিয়েও প্রয়োজনীয় তথ্য খুঁজে পেতে সাহায্য করে।

১. HTML স্ট্রাকচার (Footer Section)

আপনার পোস্ট কার্ডগুলোর ঠিক নিচেই এই কোডটুকু যোগ করুন:

HTML

<footer class="main-footer">
    <div class="footer-container">
        <div class="footer-box">
            <h3>আলোর দিশা</h3>
            <p>প্রযুক্তির আলো ছড়িয়ে দিতে আমরা বদ্ধপরিকর। আমাদের সাথেই থাকুন এবং নতুন কিছু শিখুন।</p>
        </div>

        <div class="footer-box">
            <h4>কুইক লিঙ্ক</h4>
            <ul>
                <li><a href="#">প্রাইভেসি পলিসি</a></li>
                <li><a href="#">শর্তাবলী</a></li>
                <li><a href="#">আমাদের টিম</a></li>
            </ul>
        </div>

        <div class="footer-box">
            <h4>অনুসরণ করুন</h4>
            <div class="social-links">
                <a href="https://facebook.com" target="_blank">Facebook</a>
                <a href="https://youtube.com" target="_blank">YouTube</a>
                <a href="https://github.com" target="_blank">GitHub</a>
            </div>
        </div>
    </div>
    
    <div class="footer-bottom">
        <p>&copy; ২০২৬ আলোর দিশা | সর্বস্বত্ব সংরক্ষিত।</p>
    </div>
</footer>

২. CSS স্টাইলিং (Professional Footer Design)

এই CSS কোডটি আপনার ফুটারকে একটি আধুনিক গাঢ় রঙের (Dark Theme) লুক দেবে:

CSS

.main-footer {
    background-color: #1a1a1a;
    color: #ffffff;
    padding: 50px 0 20px;
    margin-top: 50px;
}

.footer-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.footer-box {
    flex: 1;
    min-width: 250px;
    margin-bottom: 30px;
}

.footer-box h3, .footer-box h4 {
    color: #ffcc00;
    margin-bottom: 20px;
}

.footer-box ul {
    list-style: none;
    padding: 0;
}

.footer-box ul li {
    margin-bottom: 10px;
}

.footer-box a {
    color: #bbb;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-box a:hover {
    color: #ffcc00;
}

.social-links a {
    display: inline-block;
    margin-right: 15px;
    background: #333;
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 0.9rem;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #333;
    margin-top: 30px;
    padding-top: 20px;
    font-size: 0.9rem;
    color: #777;
}

/* মোবাইলের জন্য ফুটার রেসপন্সিভ করা */
@media screen and (max-width: 600px) {
    .footer-container {
        flex-direction: column;
        text-align: center;
    }
}

বাস্তবায়নের ধাপসমূহ ও টিপস:

  • Flex-wrap: আমরা এখানে flex-wrap: wrap; ব্যবহার করেছি যাতে ছোট স্ক্রিনে ফুটারের কলামগুলো ভেঙে একটির নিচে আরেকটি চলে আসে।

  • Special Characters: &copy; কোডটি ব্যবহার করে আমরা কপিরাইট চিহ্ন (©) তৈরি করেছি।

  • Colors: ফুটারের ব্যাকগ্রাউন্ড কালো (#1a1a1a) এবং টেক্সট সাদা রাখার ফলে এটি আপনার আগের হিরো সেকশনের সাথে দারুণভাবে ম্যাচ করবে।

অভিনন্দন! আপনি আজকে একটি সম্পূর্ণ Landing Page এর মূল অংশগুলো (Navigation, Hero Section, Content Cards, and Footer) কোড করা শিখলেন। এটি আপনার ওয়ার্ডপ্রেস সাইটের পাঠকদের জন্য একটি দারুণ টিউটোরিয়াল হবে।

Next Episode- Can your eyes explain your overall health?

🔗 এই পোস্ট শেয়ার করুন

Facebook Twitter

💬 আপনার মতামত লিখুন

WhatsApp