নতুনদের জন্য আপনার নিজস্ব ওয়েবসাইট তৈরি করা: 5 টি ধাপ

2024 লেখক: John Day | [email protected]. সর্বশেষ পরিবর্তিত: 2024-01-30 08:00

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

সরবরাহ

• একটি ম্যাকিনটোশ বা উইন্ডোজ পিসি (যদিও লিনাক্স ডিস্ট্রোস ব্যবহার করা যেতে পারে, আমি আপাতত এগুলি এড়িয়ে যাচ্ছি কারণ এটি একটি শিক্ষানবিশ ভূমিকা)
• আপনার টেক্সট এডিটর পছন্দ আমার অভিজ্ঞতায়, আমি ভিসুয়াল স্টুডিও কোডটি নিজের জন্য সবচেয়ে ভাল কাজ করার জন্য পেয়েছি তাই আমি এখানে এটি পরীক্ষা করার পরামর্শ দিচ্ছি: https://code.visualstudio.com/ এটি উল্লেখ না করে যে এটি সমস্ত ওএস প্ল্যাটফর্মে কাজ করে।

ধাপ 1: ট্যাগ এবং ইতিহাসের একটি বিট

একবার আপনি আপনার টেক্সট এডিটর বা আইডিই পছন্দ করার সিদ্ধান্ত নিলে, আসুন মূল বিষয়গুলি দিয়ে শুরু করা যাক।

বিশ্বাস করুন বা না করুন, এইচটিএমএল বা হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ এখন প্রায় years০ বছর ধরে চলে আসছে এবং প্রতিবছরই ভাষার আরও বেশি উন্নতি হয়েছে। এখন, আপনি হয়তো জিজ্ঞাসা করছেন, কিভাবে একটি ব্রাউজার পর্দায় কি লাগাতে পারে তা ব্যাখ্যা করে? এটি কয়েকটি অংশে করা হয়:

HTML ডকুমেন্ট ফরম্যাট করা সহজ। আপনার মাথা এবং শরীর নামে পরিচিত দুটি বিভাগ রয়েছে। একটি ওয়েবসাইটের প্রধানের মধ্যে এমন কোড থাকে যা ব্যবহারকারীর কাছে দৃশ্যমান নয়। এটি স্টাইলশীটগুলিকে লিঙ্ক করার জন্য এবং সাইটটি সঠিকভাবে প্রদর্শনের জন্য প্রয়োজনীয় অন্যান্য প্রয়োজনীয় বিট ঘোষণার জন্য ব্যবহৃত হয়। মাথার পিছনে, শরীরটি যেমন শোনাচ্ছে, ওয়েবসাইটের শরীর। এখানেই আপনি আপনার ভয়েস বলতে পারবেন এবং শ্রোতাদের আপনার দুর্দান্ত HTML দক্ষতা দেখাতে পারবেন! এখন এটি কেবল শরীরে টেক্সট টাইপ করা এবং আপনি যেভাবে চান ঠিক সেভাবে প্রদর্শন করা যতটা সহজ তা নয়, কিন্তু আমরা ট্যাগ বলা জিনিসগুলির ব্যবহারের সাথে এটি একটি অর্থে প্রায় সহজ।

এখানে কিছু মৌলিক HTML ট্যাগ দেওয়া হল:

• শিরোনাম - যা ব্রাউজারকে পৃষ্ঠার শিরোনাম কী তা বলতে ব্যবহৃত হয়। আপনি যখন একটি ওয়েবপৃষ্ঠার ট্যাবের দিকে তাকান তখন এটিও আপনি দেখতে পান।
• h1, h2, h3, h4 - যা বিভিন্ন হেডারের আকারের জন্য ব্যবহৃত হয় যার সাথে h1 সবচেয়ে বড় এবং h4 হচ্ছে সবচেয়ে ছোট। আমি পরবর্তী বিভাগে এই বিষয়ে আরও কভার করব।
• p - অনুচ্ছেদ, পাঠ্যের অনুচ্ছেদ লেখার জন্য ব্যবহৃত। একটি কাগজে অনুচ্ছেদের মত।
• br - বিরতি, যা পাঠ্যের সাথে সামঞ্জস্য রেখে একটি বিরতি োকায়।
• একটি - ক্লিকযোগ্য লিঙ্কের মতো অন্যান্য পৃষ্ঠায় লিঙ্ক তৈরির জন্য ব্যবহৃত হয়।
• img - ওয়েবপৃষ্ঠায় একটি চিত্র সংযুক্ত করার জন্য ব্যবহৃত হয়।
• ul, ol, li - unordered তালিকা, আদেশ তালিকা, এবং তালিকা আইটেম।
• - কোডে ইনলাইন মন্তব্য করার জন্য ব্যবহৃত হয় যা শেষ ব্যবহারকারী দেখতে পাবে না।

এবং এখানে কিছু CSS ট্যাগ (চাক্ষুষ):

• রঙ - একটি নির্দিষ্ট উপাদানকে একটি নির্দিষ্ট রঙ বরাদ্দ করতে বা ওয়েবপেজে সেট করতে ব্যবহৃত হয়।
• ফন্ট সাইজ-পৃষ্ঠায় ফন্ট সাইজ পরিবর্তন করতে ব্যবহৃত হয়।
• ব্যাকগ্রাউন্ড-কালার-নির্দিষ্ট উপাদান বা পুরো পৃষ্ঠার ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে ব্যবহৃত হয়।

আমি যদি আপনাকে কিছুটা নষ্ট মনে হয় তবে আপনাকে সাহায্য করার জন্য আমি একটি ছোট চিট-শীট সংযুক্ত করেছি, তবে চিন্তা করবেন না, আপনি কিছুক্ষণের মধ্যেই এটি ঝুলিয়ে ফেলবেন! উপরন্তু, www.w3schools.com আপনার প্রোগ্রামিং প্রশ্নের যে কোন একটি চমৎকার সম্পদ। তারা নিশ্চয়ই আমাকে বা অনেক সময় বাঁচিয়েছে।

মূলত ব্রাউজার কিভাবে ফাইলটি পড়ে তা সহজ। এটি লাইন দ্বারা লাইন যায় এবং ফাংশন দ্বারা ফাংশন প্রক্রিয়া করে। অক্ষরগুলি একটি ট্যাগ ঘোষণার জন্য ব্যবহার করা হয় যেমন

এবং ট্যাগ বন্ধ করতে ব্যবহৃত হয় যেমন

। এটি গুরুত্বপূর্ণ অন্যথায় ব্রাউজার কোথায় থামবে তা নয়। এর মাঝে

এবং

ট্যাগ, যেখানে আপনি যা খুশি প্রবেশ করেন!

পদক্ষেপ 2: সম্পাদক সেটআপ

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

নোটপ্যাডের মধ্যে:

• নোটপ্যাডের সাথে, প্রোগ্রামটি একটি ফাঁকা ফাইল দিয়ে চালু হয় যা এটি শুরু করা খুব সহজ করে তোলে। এটি আমাদের ভিএস কোড ব্যবহারের তুলনায় কয়েক ধাপ লাফিয়ে উঠতে দেবে। আসুন সঠিক ফরম্যাটে ফাইল সংরক্ষণ করে শুরু করা যাক।
• File> Save এ ক্লিক করুন
• . Html এর পরে আপনার ফাইলের জন্য একটি নাম লিখুন এবং টাইপ হিসাবে সংরক্ষণ করুন, সমস্ত ফাইল নির্বাচন করুন। সেভ ক্লিক করুন।

ভিএস কোডের মধ্যে:

• আপনার জন্য আইডিই এর সকল বৈশিষ্ট্যের সুবিধা নেওয়ার সর্বোত্তম উপায় হল ফাইল তৈরি করা এবং আইডিইকে বলুন এটি কোন ধরনের ফাইল। ইহা এভাবে করা যাবে:
• ফাইল> নতুন ফাইল ক্লিক করুন
• একটি ফাঁকা ফাইল খোলে
• এর পরে, আপনি ফাইলটি সংরক্ষণ করে শুরু করতে চান, যদিও ফাঁকা, কারণ এটি IDE কে বুঝতে পারবে যে শেষ পণ্যটি কী ধরনের ফাইল হতে চলেছে। সেভ করার সময় ফাইলের নামের শেষে.html এক্সটেনশন অন্তর্ভুক্ত করতে ভুলবেন না। সেভ ক্লিক করুন।

ধাপ 3: ব্লুপ্রিন্ট

আপনি আপনার filename.html ফাইল সফলভাবে সেভ করার পর, আমাদের ওয়েবপেজের জন্য ফ্রেমওয়ার্ক তৈরি করে শুরু করা যাক। উপরের HTML পৃষ্ঠা তৈরি করা শুরু করার আগে আমাদের ফাইলের কী কী অংশগুলি ঘোষণা করতে হবে তা মনে রাখবেন। প্রো-টিপ: সাইটের ফ্রেমওয়ার্ক শুরু করার সময়,! DOCTYPE HTML ট্যাগ ব্রাউজারকে বলে যে এটি যে ফাইলটি পড়ছে সেটি একটি html ফাইল। আপনার যদি একই ফাইলে বিভিন্ন ধরনের কোড থাকে এবং দোভাষীদের মধ্যে স্যুইচ করতে চান তাহলে এটি কাজে আসতে পারে। এই নির্দেশের সুযোগের জন্য, আমরা এটিকে খুব বেশি স্পর্শ করব না কিন্তু যদি এই নির্দেশের পরে আপনি এইচটিএমএল ডেভেলপমেন্ট সম্পর্কে আরও জানতে আগ্রহী হন তবে নির্দ্বিধায় এটি একটি শট দিন। আমি সেরা অনুশীলনের জন্য ফাইলের শীর্ষে! DOCTYPE HTML ট্যাগ willোকাবো। সঙ্গে খুলতে এবং বন্ধ করতে মনে রাখবেন।

প্রোগ্রামিং শুরু করার আগে ফাইলটি সেভ করা এখানে কাজ করে, এখন যেহেতু IDE জানে যে এটি একটি এইচটিএমএল ফাইলের সাথে কাজ করছে, এটি অভিব্যক্তিটি শেষ করতে এবং পরামর্শ দেওয়ার জন্য ইন্টেলিসেন্স ব্যবহার করবে যাতে আপনি ভুল করে একটি ট্যাগ বন্ধ করতে ভুলবেন না । মনে রাখবেন যে আপনারা যারা নোটপ্যাড ব্যবহার করছেন তাদের জন্য আইডিই -এর মতো ইন্টেলিসেন্স পাওয়া যায় না। আমরা নিম্নরূপ মাথা এবং শরীরের ট্যাগ প্রবেশ করে শুরু করি: (দ্বিতীয় ছবি দেখুন)।

এখন যেহেতু ডকুমেন্ট সেটআপ সম্পন্ন হয়েছে, আমরা প্রতিযোগিতায় নামতে এবং কিছু মজা করতে সক্ষম!

ধাপ 4: কোড; কোড; কোড;

আমরা আমাদের নতুন তৈরি করা ফাইলের জন্য একটি শিরোনাম সন্নিবেশ করে শুরু করতে পারি। আপনি যা চান তা লিখুন। মনে রাখবেন যে এটি ব্রাউজার ট্যাবে প্রদর্শিত নাম। আসুন আমাদের সাইটের জন্য একটি শিরোনাম প্রবেশ করে শুরু করি। আমরা কীভাবে এটি করি তার আগে থেকে স্মরণ করুন। আমি কি h1/2/3/4 শুনেছি? এটাই সঠিক!

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

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

ট্যাগ যোগ করার চেষ্টা করুন এবং HTML এর সাথে আপনি যে বিভিন্ন জিনিসগুলি করতে পারেন তার সাথে খেলার চেষ্টা করুন। আপনি নীচে দেখতে পাচ্ছেন, আমি কিছু অনুচ্ছেদ, বিরতি, বাহ্যিক হাইপারলিঙ্ক যোগ করেছি Instructables.com, একটি ইমেজ, (যা হয় একটি বাহ্যিক উৎস থেকে অথবা একই ডিরেক্টরিতে যেখানে। HTML ফাইল সংরক্ষণ করা হয়), একটি অননুমোদিত তালিকা, একটি আদেশকৃত তালিকা এবং সবশেষে একটি মন্তব্য।

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

ধাপ 5: চূড়ান্ত চিন্তা

এবং সেখানে আপনি এটা আছে; আপনি সফলভাবে আপনার প্রথম ওয়েবপেজ তৈরি করেছেন! যেহেতু এটি একটি শিক্ষানবিস গাইড, আমি HTML এর সাথে আপনার প্রথম অভিজ্ঞতাকে উপভোগ্য করতে চাই। আমার অভিজ্ঞতায় শেখার সর্বোত্তম উপায় হল ডুব দেওয়া এবং জিনিসগুলি হাতে নিয়ে চেষ্টা করা, আপনার কোড দিয়ে আপনি কী করতে পারেন তা দেখুন এবং দেখুন কিভাবে আপনি আপনার কোড ভাঙ্গতে পারেন। এটি অখণ্ডতা তৈরি করে এবং কোডটি কীভাবে এবং কীভাবে কাজ করে তা আরও ভালভাবে বুঝতে আপনাকে সহায়তা করে। মনে রাখবেন যে www. W3Schools.com প্রশ্নগুলির জন্য একটি দুর্দান্ত সম্পদ এবং তারা আপনার কোডটি চেষ্টা করার জন্য ব্রাউজারের মধ্যে একটি ভার্চুয়াল স্যান্ডবক্সও অফার করে। আশা করি আপনি কিছু শিখেছেন এবং খুশি কোডিং!