ওয়েব পেইজ তৈরি করুন HTML ও CSS দিয়ে

যারা ওয়েব সাইট তৈরি করা শিখতে চান তাদের জন্য এই প্রয়াস।কোন ধরনের ডিটেলে যাব না।কাজ করতে করতে শিখা হোক সবকিছু।তাই সরাসরি সাইট তৈরি করার টিউটোরিয়াল দিচ্ছি, প্রথমে একটি পেজ , ধাপে ধাপে header , menu, main section, footer এভাবে পুরো সাইটির ভিবিন্ন অংশ তৈরি করা শিখব সাথে সাথে  শিখব HTML এবং  CSS এর বিভিন্ন এলিমেন্ট

ওয়েব পেইজ তৈরি করুন খুব সহজে

ওয়েব পেইজ  তৈরি করার জন্য প্রথমেই একটি HTML ডকুমেন্ট তৈরি করতে হবে।একটি পেইজের ভিতরে Image, Music Clip, Videos থাকতে পারে ,থাকতে পারে এনিমেশন, তথ্য  ইত্যাদি ।ওয়েবপেইজ দুধরনের হতে পারে।Static এবং Dynamic।স্টাটিক ওয়েবপেইজের মধ্যে বিভিন্ন একশন থাকে না যেমন, কোন একটি ডকুমেন্ট ভিত্তিক সাইট, যাতে সবাই গিয়ে প্রয়োজনীয় ইনফর্মেশন পেয়ে থাকে।অন্যদিকে ডায়নামিক ওয়েবপেইজ ভিউয়ার দের  সাইন ইন করার সুযোগ দেয়,বিভিন্ন অনলাইন গেম খেলার সুযোগ দেয়,অর্থাৎ বেশ অনেক ধরনের সুযোগ সুবিধা নিয়ে ডায়নামিক ওয়েবপেজগুলো বর্তমানে ওয়েব্ দুনিয়ায়  রাজত্ব করছে।

কিভাবে ওয়েব পেইজের জন্য index file তৈরি করব?

ওয়েবপেইজ তৈরি করার এই টিউটরিয়াল টিতে একই সাথে আমরা শিখব HTML ,CSS এবংJavaScript।প্রথমে HTML দিয়ে সাইট টির স্ট্রাকচার তৈরি করব,CSS দিয়ে এটিতে স্টাইল যোগ করব এবং সবশেষে JavaScript দিয়ে আমাদের ওয়েবপেইজটিতে কিছু dynamic content যোগ করব।

  • ১। প্রথমেই Website নামে একটি নতুন ফোল্ডার তৈরে করে নেই।এই ফোল্ডারের ভিতর Images নামে আরেকটি ফোল্ডার তৈরি করি যার মধ্যে এই ওয়েবপেইজে ব্যাবহার করা সকল ছবিগুলো থাকবে।এক্ষেত্রে png বা  jpeg ফাইল ব্যাবহার করব আমরা।
  • ২। তিন ধরনের ফাইল এতে ব্যবহার করা হবে
    • ১। .html File
    • ২। .css file
    • ৩। .js file

    প্রথম ধাপে ওয়েব পেইজের  index file টি তৈরি করতে হবে।এই ফাইল টি তৈরি করব এইচটিএমএল(HTML-HyperText Markup Language) এর মাধ্যমে।Html সম্পর্কে আগে একটু জেনে নিতে চাইলে এই লিঙ্ক টি থেকে ঘুরে আসতে পারেন

    তাহলে প্রথম একটি এইচটিএমএল ফাইল তৈরি করি।

    (windows key) +R চেপে তাতে টাইপ করুন notepad ,তারপর ok.

    একটি notepad ফাইল ওপেন হবে।এখানেই আমাদের ওয়েব পেইজ তৈরির প্রাথমিক কোড লিখতে হবে।

    উপরের ছবিটিতে যে কোডটুকু আছে সেটি নোটপ্যাডে টাইপ করে সেভ করুন index.html এই নামে।
    এবার websites ফোল্ডারে গিয়ে index.html ফাইলটিতে ডাবল ক্লিক করে সেটিকে ব্রাউজারে ওপেন করতে হবে।
    এটি দেখতে এমন হবে ,

    আমাদের প্রাথমিক কাজ শেষ।এর পরবর্তী tutorial এ আমারা এই পেইজ টিতে কিছু স্টাইল যোগ করব।আর সেটি করব Cascading Style Sheet  বা সংক্ষেপে CSS এর মাধ্যমে।
    নোটঃযদি সবার আগ্রহ থাকে তবে ইচ্ছে টিউনটি ধারাবাহিক ভাবে করা।

    Level 0

    আমি Zobayeda। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 13 বছর 1 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 2 টি টিউন ও 18 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।


    টিউনস


    আরও টিউনস


    টিউনারের আরও টিউনস


    টিউমেন্টস

    ধন্যবাদ।

      Level 0

      আপনাকে ও ধন্যবাদ।

    Agroho ase. Pls cntnue…

      Level 0

      ইচ্ছে আছে চালিয়ে যাওয়ার।দোয়া করবেন।

    ভাই চালিয়ে যান আমার মত নতুন দের কাজে লাগবে।
    শুভকামনা

      Level 0

      জী, আশা করছি চালিয়ে যাব।অনেক ধন্যবাদ আপনাকে।

    Level New

    যদিও ছোট ছোট সাইট বানাতে পারি, তবে আশা করব আপনার থেকে শিখে বড় বড় সাইট বানাতে পারব 😀 শুরু করে দিন। শুভ কামনা রইল 🙂

      Level 0

      অনেক ধন্যবাদ।শুরু করে দিয়েছি ভাই।দেখি টিউটোরিয়ালের সাথে সাথে বানানো সাইট টি শেষ পর্যন্ত কি চেহারা পায়।

    ধারাবাহিক ভাবে চালিয়ে গেলে উপকারে আসবে ।ধন্যবাদ।

      Level 0

      ধারাবাহিক ভাবেই চালিয়ে যাব ইনশাআল্লাহ ! সাথে থাকুন।অনেক ধন্যবাদ আপনাকে।

    Level 0

    সুন্দর টিউন । ধন্নবাদ ।

    বড় আশা নিয়ে পড়লাম।কিন্তু,এত ছোট টিউন হবে আমি ভাবতে পরেনি। শিরোনাম দেখে ভাবলাম,পরিপূর্ন টিউন এটি। ভাই যদি পারেন বড় আকারে তাড়াতাড়ি পরিপুর্ন টিউন দেন। আশায় রইলাম।

    Level 0

    আসলে একটি টিউনে পুরো সাইট টি তৈরি করা সম্ভব নয়।ধাপে ধাপে পরবর্তী টিউনগুলো নিয়ে আসছি।সাথে থাকুন ।

    Level 0

    সুন্দর উপস্থাপনা। প্রথম থেকেই একটি প্রজেক্ট নিয়ে শুরু করুন। তাহলে সকলের জন্য অনেক ভাল হবে। টিউন করার জন্য ধন্যবাদ। পরবর্তী টিউনের দ্রুততার সাথে চাই।

      Level 0

      অনেক ধন্যবাদ আপনাকে। সময়ের অভাবে হয়ত মাঝে মাঝে একটু দেরি হতে পারে টিউন করতে।তবে সাথে থাকুন।দ্রুত পরবর্তী টিউন দেয়ার চেস্টা করব অবশ্যই।

    na bhai choto choto kore tune korven.ate kore amader moto notun ra valo vave shikte parbe.thanks for ur nice tune

      Level 0

      আসলে ছোট ছোট বিষয় নিয়ে বড় করে একটু বিস্তারিত লিখে টিউন করব ইনশাআল্লাহ।
      যারা শিখতে চান , আমার পরামর্শ থাকবে , একটি ফোল্ডারে ফাইল গুলো তৈরি করে নিয়ে রেখে দিন।প্রতি টিউন
      প্রকাশ হওয়ার পর সেটি থেকে ধারনা নিয়ে কাজ শুরু করে দিন ।
      আগামি কাল আশা করছি সিএসএস নিয়ে পেইজটির আর কিছু আপডেট করে সেটির উপর টিউন করব।
      ভাল থাকুন।

    খুব সুন্দর হয়েছে। চালিয়ে যান….

    ধন্যবাদ।

    Level 0

    thanx a lot. i have been waiting for such a tune…………plz continue

      Level 0

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

    চালিয়ে যান….ধন্যবাদ টিউনের জন্য 🙂

      Level 0

      ধন্যবাদ আপনাকে ও।আসলে সবার আগ্রহ দেখে খুব ভালো লাগছে।দ্রুত পরবর্তী টিউন করব ইনশাআল্লাহ।

    খুব দ্রুত শুরু করুন পরেরটি। এমন টিউনের আশায় বসে থাকি। ধন্যবাদ।

      Level 0

      সাথে সাথে অনুশীলন ও করবেন আশা করি তবেই শিখা হয়ে যাবে, ধন্যবাদ ।

    thanx a lot. i have been waiting for such a tune…………plz continue recenly

    ধন্যবাদ।চালিয়ে যান।