বেয়ার হাড়ের ওয়েব পেজ: 10 টি ধাপ

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

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

এই নির্দেশের শেষে, আপনার স্ক্র্যাচ থেকে একটি ওয়েব পৃষ্ঠা তৈরি করার প্রাথমিক দক্ষতা থাকবে এবং আবিষ্কার করুন যে কোডিংটি যতটা কঠিন মনে হয় ততটা কঠিন নয়!

ধাপ 1: নোটপ্যাড ব্যবহার করা

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

নোটপ্যাড খুলতে, আপনার স্ক্রিনের নিচের বাম কোণে আপনার অনুসন্ধান বারে যান এবং "নোটপ্যাড" টাইপ করুন। তারপর সার্চ ফলাফলে আসা "নোটপ্যাড" অ্যাপ্লিকেশনটি নির্বাচন করুন। একটি নতুন উইন্ডো খোলা উচিত।

ধাপ 2: বেসিক HTML ডকুমেন্ট ট্রি যোগ করা

আপনার ওয়েব পৃষ্ঠাটি প্রক্রিয়া এবং প্রদর্শন করার জন্য আপনার ওয়েব ব্রাউজার (ক্রোম, ফায়ারফক্স, এজ, ইন্টারনেট এক্সপ্লোরার, সাফারি …) এর জন্য সমস্ত ওয়েব পেজকে অবশ্যই একটি আদর্শ কঙ্কাল কাঠামো অনুসরণ করতে হবে।

একে বলা হয় এইচটিএমএল ডকুমেন্ট ট্রি। নোটপ্যাডে, স্ক্রিন শটে প্রদর্শিত html "উপাদান" বা "ট্যাগ" টাইপ করুন। পাশাপাশি কপি এবং পেস্ট বিনা দ্বিধায়:

ধাপ 3: একটি.html পৃষ্ঠা হিসাবে সংরক্ষণ করা

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

1. নির্বাচন করুন 'ফাইল'> 'এই হিসাবে সংরক্ষণ করুন …' (স্ক্রিনশট 1)
2. ফাইলের ধরন পরিবর্তন করে 'সব ফাইল' (স্ক্রিনশট 2)
3. আপনার ফাইলকে আপনার পছন্দের একটি নাম দিন। আপনি আপনার কম্পিউটারে ডকুমেন্টটি কোথায় সংরক্ষণ করছেন তা খেয়াল করুন যাতে আপনি পরে এটি খুলতে পারেন। এটি আপনার কম্পিউটারকে একটি ওয়েবপৃষ্ঠা হিসেবে চিনতে দেবে। সুতরাং যদি আপনি আপনার ফাইলের নাম "my_webpage" রাখতে চান, তাহলে এর শেষে.html যোগ করতে ভুলবেন না, যেমন "my_webpage.html"

ধাপ 4: আপনার ওয়েব পেজে একটি শিরোনাম যোগ করা

তাই ওয়েব ব্রাউজারের জন্য আমাদের ওয়েব পেজটি ব্যাখ্যা এবং প্রদর্শন করার জন্য আমাদের প্রাথমিক HTML কাঠামো প্রয়োজন, কিন্তু আমাদের কোন বিষয়বস্তু নেই। আসুন এটি পরিবর্তন করি!

আমাদের প্রথম যে কাজটি করা উচিত তা হল আমাদের ওয়েব পেজে একটি শিরোনাম দেওয়া। বেশিরভাগ ওয়েব পেজের একটি শিরোনাম থাকে। এটি আপনার ওয়েব ব্রাউজারে ট্যাবে প্রদর্শিত হয় (স্ক্রিন শট দেখুন)। আমি আমার ওয়েব পেজকে "টেলরের ওয়েবসাইট" শিরোনাম দিতে যাচ্ছি। এটি করার জন্য, আমাদের একটি 'শিরোনাম' উপাদান যোগ করতে হবে।

টেলরের ওয়েবসাইট

এই মুহুর্তে আপনি লক্ষ্য করবেন যে প্রতিটি ট্যাগের একটি "খোলা" ট্যাগ এবং একটি "বন্ধ" ট্যাগ রয়েছে। যেমন

এবং.

শিরোনামটি কোথায় শুরু হয় এবং কোথায় শেষ হয় তা বোঝা যায়। প্রায় সব এইচটিএমএল ট্যাগ এটি অনুসরণ করে, তবে কিছু ব্যতিক্রম আছে।

ধাপ 5: আপনার ওয়েব পেজে কন্টেন্ট যোগ করা

ঠিক আছে, আমাদের ওয়েব পেজের জন্য আমাদের একটি শিরোনাম আছে, কিন্তু আমাদের কাছে এখনও এর জন্য কোন প্রকৃত সামগ্রী নেই। আসুন কিছু স্বভাব যোগ করি!

আমরা একটি 'শিরোনাম' উপাদান ব্যবহার করে আমাদের ওয়েব পেজে একটি শিরোনাম যুক্ত করেছি। আসুন আমাদের ওয়েবপেজটিকে একটি বড়, মনোযোগ আকর্ষণকারী হেডার দিয়ে একটি 'h1' উপাদান ব্যবহার করি যা একটি শিরোনাম উপাদান।

টেলরের ওয়েবসাইট

আমার ওয়েব পাতা স্বাগতম

ধাপ 6: আমাদের পরিবর্তনগুলি এতদূর দেখা

আমাদের একটি শিরোনাম আছে, আমাদের কিছু সামগ্রী আছে, আসুন আমাদের ওয়েব পেজটি পরীক্ষা করে দেখি কিভাবে এটি এতদূর আসছে।

1. আপনার ফাইলটি নোটপ্যাডে সংরক্ষণ করুন
2. যেখানে আপনি আপনার ফাইলটি সংরক্ষণ করেছেন সেখানে যান এবং এটিতে ডাবল ক্লিক করুন। এটি স্বয়ংক্রিয়ভাবে আপনার ডিফল্ট ওয়েব ব্রাউজারে খোলা উচিত। সুন্দর লাগছে!

ধাপ 7: একটি অনুচ্ছেদ ট্যাগ যোগ করা

আমাদের একটি শিরোনাম, একটি শিরোনাম আছে, এখন আসুন আরো কিছু পাঠ সহ একটি অনুচ্ছেদ যোগ করি। একটি অনুচ্ছেদের উপাদান নাম 'পি'। আপনি নীচে এর ব্যবহার দেখতে পারেন:

টেলরের ওয়েবসাইট

আমার ওয়েব পাতা স্বাগতম

আজ আমরা শিখবো কিভাবে এই খুব সহজ ওয়েব পেজ তৈরি করতে হয়!

দ্রষ্টব্য: নোটপ্যাড সংরক্ষণ করে এবং ফাইলটি খোলার মাধ্যমে আপনি যে কোনো সময় আপনার পরিবর্তন দেখতে পারেন।

ধাপ 8: এটি কিছু রঙ দিন

আমরা আমাদের ওয়েবপেজ ডানদিকে ঘূর্ণায়মান আছে, কিন্তু এটা বেশ সরল। আসুন আমাদের অনুচ্ছেদ ট্যাগ কিছু রঙ দিন!

আমরা নীচের বিশদ অনুযায়ী 'পি' ট্যাগে একটি 'স্টাইল' বৈশিষ্ট্য যুক্ত করে বিভিন্ন উপাদানগুলিকে রঙ করতে পারি:

টেলরের ওয়েবসাইট

আমার ওয়েব পাতা স্বাগতম

আজ আমরা শিখবো কিভাবে এই খুব সহজ ওয়েব পেজ তৈরি করতে হয়!

ধাপ 9: একটি ছবি যোগ করা

ছবি ছাড়া ওয়েবসাইট কি? আমাদের ওয়েবসাইটে একটি ছবি যোগ করা যাক!

প্রথম ধাপ হল আপনার পছন্দ মতো একটি ছবি খুঁজে বের করা। আমি একটি সুবর্ণ পুনরুদ্ধারের জন্য অনুসন্ধান করতে গুগল চিত্র ব্যবহার করেছি। ছবিটি উপরে টানুন এবং নিশ্চিত করুন যে url.jpg,.png,.gif,.jpg, ইত্যাদিতে শেষ হয়েছে।

একবার আপনি আপনার ছবিটি বেছে নিলে, আমাদের এটি একটি 'img' ট্যাগ ব্যবহার করে HTML পৃষ্ঠায় যুক্ত করতে হবে। আমার ছবি হল:

একটি 'src' বৈশিষ্ট্য সহ একটি 'img' ট্যাগ ব্যবহার করে আপনার পৃষ্ঠায় এটি যোগ করুন:

টেলরের ওয়েবসাইট

আমার ওয়েব পাতা স্বাগতম

আজ আমরা শিখবো কিভাবে এই খুব সহজ ওয়েব পেজ তৈরি করতে হয়!

ধাপ 10: চূড়ান্ত পণ্য দেখা

নোটপ্যাড ফাইলটি সংরক্ষণ করুন এবং চূড়ান্ত পণ্যটি খুলুন। আপনার ওয়েব পেজ দেখা উচিত!