এইচটিএমএল এর মাধ্যমে ওয়েবসাইট তৈরির সহজ পদ্ধতি (Easy way to create website with HTML)

এইচটিএমএল কি?

এইচটিএমএল (HTML) এর সম্পূর্ণ অর্থ হলো HyperText Markup Language। এটি একটি মার্কআপ ল্যাঙ্গুয়েজ, যা ওয়েবপেজ তৈরি করার জন্য ব্যবহৃত হয়। এটি একটি বিশেষ মার্কআপ ভাষা, যা মূলত ওয়েবপেজ ডিজাইন এবং তৈরি করতে ব্যবহৃত হয়। এটি অন্যান্য প্রোগ্রামিং ল্যাংগুয়েজ, CSS এবং JavaScript-এর সঙ্গে মিলে কাজ করে।

এইচটিএমএল এর গুরুত্ব

১. ওয়েবপেজের কাঠামো তৈরি করা:
এইচটিএমএল এর মাধ্যমে আমরা ওয়েবপেজে টেক্সট, ইমেজ, লিঙ্ক, ভিডিও, ফর্ম ইত্যাদি যোগ করতে পারি।

২. ব্রাউজারের জন্য নির্দেশনা প্রদান:
ব্রাউজার এইচটিএমএল ফাইল পড়ে এবং আমাদের জন্য ওয়েবপেজ প্রদর্শন করে।

৩. ডেভেলপারদের জন্য সহজলভ্য:
এটি শেখা সহজ এবং এটি এমন একটি ভাষা যা সব ওয়েব ডেভেলপারের জন্য অপরিহার্য।

একটি সাধারণ এইচটিএমএল ডকুমেন্ট

এইচটিএমএল ডকুমেন্ট সাধারণত একটি নির্দিষ্ট কাঠামো মেনে চলে। নিচে একটি উদাহরণ দেওয়া হলো:

<!DOCTYPE html>
 <html lang="bn">
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <title>আমার প্রথম এইচটিএমএল পৃষ্ঠা</title> 
</head> 
   <body> 
<h1>স্বাগতম</h1> 
<p>এটি একটি সাধারণ এইচটিএমএল ডকুমেন্ট।</p> 
<a href="https://www.example.com">এখানে ক্লিক করুন</a> 
   </body> 
</html>

কোড বিশ্লেষণ:
১. <!DOCTYPE html>: এটি ব্রাউজারকে বলে যে এটি একটি HTML5 ডকুমেন্ট।
২. <html>ট্যাগ: পুরো এইচটিএমএল ডকুমেন্টকে ঘিরে রাখে।
৩. <head>ট্যাগ: এখানে পৃষ্ঠার মেটাডেটা থাকে, যেমন টাইটেল, ক্যারেক্টার সেট ইত্যাদি।
৪. <body>ট্যাগ: পৃষ্ঠার দৃশ্যমান অংশ যা ব্যবহারকারীরা দেখতে পায়।

গুরুত্বপূর্ণ এইচটিএমএল ট্যাগ

১. <h1> থেকে <h6>: শিরোনাম যোগ করার জন্য।
২. <p>: প্যারাগ্রাফ তৈরি করার জন্য।
৩. <a>: লিঙ্ক যোগ করার জন্য।
৪. <img>: ইমেজ যোগ করার জন্য।
৫. <ul> এবং <ol>: আনঅর্ডারড এবং অর্ডারড তালিকা তৈরির জন্য।
৬. <table>: টেবিল তৈরি করার জন্য।

HTML শেখার উপায়

১. অনুশীলন করা:
নিয়মিত কোড লেখার মাধ্যমে এইচটিএমএল শেখা সহজ হয়।

২. অনলাইন রিসোর্স:
আপনি W3Schools, Mozilla Developer Network (MDN) ইত্যাদি ব্যবহার করে HTML শিখতে পারেন।

৩. প্রকল্প তৈরি করা:
একটি ছোট ওয়েবসাইট তৈরি করার মাধ্যমে এইচটিএমএল এবং অন্যান্য ওয়েব টেকনোলজি ব্যবহার শিখুন।

HTML দিয়ে ওয়েবসাইট তৈরির ধাপসমূহ

ওয়েবসাইট তৈরির জন্য HTML ব্যবহার করার ধাপগুলো নিচে আলোচনা করা হলো।

ধাপ ১: প্রয়োজনীয় সরঞ্জামসমূহ

ওয়েবসাইট তৈরির জন্য আপনার কয়েকটি সরঞ্জাম প্রয়োজন:

টেক্সট এডিটর: কোড লেখার জন্য ব্যবহার করা হয়। উদাহরণ: Notepad++, VS Code, Sublime Text।
ওয়েব ব্রাউজার: Html দিয়ে আপনার তৈরিকৃত ওয়েবসাইট পরীক্ষা করার জন্য বিভিন্ন ধরনের ওয়েব ব্রাউজার রয়েছে তার মধ্যে Google Chrome, Mozilla Firefox এবং Opera অন্যতম।

ধাপ ২: HTML ডকুমেন্ট তৈরি করা

প্রথমে একটি নতুন ফাইল তৈরি করুন এবং এটিকে .html এক্সটেনশন দিয়ে সংরক্ষণ করুন। উদাহরণস্বরূপ, index.html নামে একটি ফাইল তৈরি করুন।

HTML ফাইলের মৌলিক কাঠামো:

<!DOCTYPE html>
<html lang="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>আমার প্রথম ওয়েবসাইট</title>
</head>
<body>
    <h1>স্বাগতম!</h1>
    <p> এইচটিএমএল দিয়ে তৈরি করা এটা আমার প্রথম ওয়েবসাইট ।</p>
</body>
</html>

কোড ব্যাখ্যা:

<!DOCTYPE html>: এটি HTML5 ডকুমেন্টের সূচক।
<html>: পুরো HTML ডকুমেন্টকে ঘিরে রাখে।
<head>: এখানে পৃষ্ঠার মেটাডেটা (যেমন টাইটেল) থাকে।
<body>: এখানে পৃষ্ঠার দৃশ্যমান উপাদান থাকে।

ধাপ ৩: HTML ট্যাগ ব্যবহার

HTML ট্যাগ ওয়েবপেজের বিভিন্ন উপাদান নির্ধারণ করতে ব্যবহৃত হয়। নিচে কিছু গুরুত্বপূর্ণ ট্যাগ আলোচনা করা হলো:

১. শিরোনাম ট্যাগ (<h1> থেকে <h6>)
শিরোনাম যোগ করতে শিরোনাম ট্যাগ ব্যবহার করা হয়।
<h1>এটি প্রধান শিরোনাম</h1>
<h2>এটি উপ-শিরোনাম</h2>
<h3>এটি তৃতীয় স্তরের শিরোনাম</h3>

২. প্যারাগ্রাফ ট্যাগ (<p>)
প্যারাগ্রাফ তৈরি করতে ব্যবহৃত হয়।
<p>এটি একটি প্যারাগ্রাফ। HTML দিয়ে ওয়েবপেজ তৈরি করা সহজ এবং মজার।</p>

৩. লিঙ্ক ট্যাগ (<a>)
লিঙ্ক যোগ করতে <a> ট্যাগ ব্যবহার করা হয়।
<a href="https://www.google.com" target="_blank">গুগলে যান</a>

৪. ছবি যোগ করার ট্যাগ (<img>)
<img> এই ট্যাগ ব্যবহার করে ওয়েবপেজে ছবি এড করা হয়।
<img src="image.jpg" alt="ছবির বিবরণ" width="300">

৫. তালিকা ট্যাগ
•	অর্ডারড তালিকা (সংখ্যা সহ):

<ol>
    <li>HTML শেখা</li>
    <li>CSS শেখা</li>
    <li>JavaScript শেখা</li>
</ol>
আনঅর্ডারড তালিকা (বুলেট পয়েন্ট):
<ul>
    <li>কম্পিউটার</li>
    <li>মোবাইল</li>
    <li>ট্যাবলেট</li>
</ul>

ধাপ ৪: CSS যোগ করে ওয়েবপেজ সাজানো

HTML এর সংঙ্গে CSS (Cascading Style Sheets) ব্যবহার করে আপনার ওয়েবসাইটকে সাধারণ মানুষের কাছে আরও বেশি আকর্ষণীয় করে তোলা সম্ভব। নিচে উদাহরণ দেওয়া হলো:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Website Design</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            line-height: 1.6;
        }
        header {
            background: #007BFF;
            color: #fff;
            padding: 10px 0;
            text-align: center;
        }
        nav {
            display: flex;
            justify-content: center;
            background: #0056b3;
            padding: 10px 0;
        }
        nav a {
            color: #fff;
            margin: 0 15px;
            text-decoration: none;
            font-size: 16px;
        }
        nav a:hover {
            text-decoration: underline;
        }
        .hero {
            background: #e9ecef;
            padding: 50px 20px;
            text-align: center;
        }
        .hero h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        .hero p {
            font-size: 1.2em;
        }
        .container {
            padding: 20px;
        }
        .services {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
        }
        .service {
            background: #f8f9fa;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-align: center;
        }
        footer {
            background: #343a40;
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }
        footer a {
            color: #17a2b8;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </nav>
    <div class="hero">
        <h1>Your Solution Starts Here</h1>
        <p>Discover our services and make your life easier.</p>
    </div>
    <div class="container">
        <h2>Our Services</h2>
        <div class="services">
            <div class="service">
                <h3>Service 1</h3>
                <p>Details about this service.</p>
            </div>
            <div class="service">
                <h3>Service 2</h3>
                <p>Details about this service.</p>
            </div>
            <div class="service">
                <h3>Service 3</h3>
                <p>Details about this service.</p>
            </div>
        </div>
    </div>
    <footer>
        <p>&copy; 2024 My Website | <a href="#">Privacy Policy</a></p>
    </footer>
</body>
</html>

Output:

ধাপ ৬: ফর্ম তৈরি

ওয়েবপেজে তথ্য ইনপুট নেওয়ার জন্য ফর্ম ব্যবহার করা হয়।

<form action="/submit" method="POST">
    <label for="name">নাম:</label>
    <input type="text" id="name" name="name"><br><br>
    
    <label for="email">ইমেইল:</label>
    <input type="email" id="email" name="email"><br><br>
    
    <label for="message">বার্তা:</label><br>
    <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
    
    <input type="submit" value="জমা দিন">
</form>

ধাপ ৭: ব্রাউজারে দেখুন

HTML ফাইলটি সেভ করার পর যেকোনো ব্রাউজারে ফাইলটি ওপেন করুন। আপনার প্রথম ওয়েবসাইট ব্রাউজারে প্রদর্শিত হবে।

ধাপ ৮: ফাইল ব্যবস্থাপনা

ওয়েবসাইটের ফাইলগুলো সুশৃঙ্খল রাখতে, আলাদা আলাদা নামে ফোল্ডার তৈরি করুন। উদাহরণস্বরূপ, HTML, CSS, ইমেজ এবং অন্যান্য ফাইলগুলোর জন্য পৃথক ফোল্ডার ব্যবহার করে সেগুলো সংরক্ষণ করুন। এতে ফাইল ম্যানেজমেন্ট সহজ হবে এবং প্রজেক্ট পরিচালনা আরও কার্যকর হবে।

ধাপ ৯: ওয়েবসাইট হোস্ট করা

আপনার তৈরি ওয়েবসাইটকে অনলাইনে প্রদর্শন করার জন্য একটি হোস্টিং প্ল্যাটফর্ম ব্যবহার করুন। কিছু জনপ্রিয় হোস্টিং প্ল্যাটফর্ম হলো:
•	GitHub Pages
•	Netlify
•	Vercel

উপসংহার : এইচটিএমএল দিয়ে একটি ওয়েবসাইট তৈরি করা খুবই সহজ। এই টিউটোরিয়ালের মাধ্যমে আপনি HTML এর মূল বিষয়গুলি শিখতে পারবেন। নিয়মিত অনুশীলনের মাধ্যমে আপনি একটি পূর্ণাঙ্গ ওয়েবসাইট তৈরি করতে সক্ষম হবেন।

এখনই আপনার প্রথম ওয়েবসাইট তৈরি করুন এবং আপনার দক্ষতা বৃদ্ধি করুন!