কিভাবে একটি HTML পেজ তৈরি করবেন

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

একটি html পৃষ্ঠা তৈরি করা হচ্ছে

এইচটিএমএল একটি মার্কআপ ভাষা. একটি ওয়েব পৃষ্ঠার প্রতিটি উপাদান একটি ট্যাগ দ্বারা প্রতিনিধিত্ব করা হয়. একটি ট্যাগ কোণ বন্ধনী দ্বারা চিহ্নিত করা হয়, এবং প্রতিটি উপাদান এক বা একাধিক ট্যাগ আছে. কিছু উপাদান শুধুমাত্র একটি ট্যাগ প্রয়োজন; অন্যদের দুটি প্রয়োজন হতে পারে. ওপেনিং এবং ক্লোজিং ট্যাগগুলির একটি ফরোয়ার্ড স্ল্যাশ রয়েছে (/). উদাহরণ স্বরূপ, অনুচ্ছেদ উপাদান p ট্যাগ দ্বারা প্রতিনিধিত্ব করা হয়. ওপেনিং এবং ক্লোজিং ট্যাগের মধ্যবর্তী টেক্সট হল প্যারাগ্রাফ টেক্সট.

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

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

একটি xml সাইটম্যাপ তৈরি করা হচ্ছে

আপনার যদি একটি HTML পৃষ্ঠা থাকে, সার্চ ইঞ্জিনগুলিকে আপনার ওয়েবসাইট ক্রল করতে সাহায্য করার জন্য আপনি একটি XML সাইটম্যাপ তৈরি করতে চাইতে পারেন৷. যদিও এটি আপনার অনুসন্ধান র‌্যাঙ্কিংকে প্রভাবিত করবে না, এটি সার্চ ইঞ্জিনগুলিকে আপনার বিষয়বস্তু বুঝতে এবং তাদের ক্রলিং হার সামঞ্জস্য করতে সাহায্য করবে৷. এই পথে, আপনার ওয়েবসাইট সার্চ ইঞ্জিন ফলাফল আরো দৃশ্যমান হবে. শুরু করার জন্য এখানে কিছু সহজ পদক্ষেপ রয়েছে:

একটি HTML সাইটম্যাপ তৈরি করা সহজ. আপনাকে যা করতে হবে তা হল আপনার সাইটের পৃষ্ঠাগুলির একটি সাধারণ টেবিল তৈরি করা, প্রতিটি পৃষ্ঠার লিঙ্ক সহ. তারপর হেডার বা ফুটারে সেই সাইটম্যাপ পৃষ্ঠার সাথে লিঙ্ক করুন. এই পথে, আপনার সাইটের কতগুলি পেজই হোক না কেন, মানুষ সহজে তাদের মাধ্যমে নেভিগেট করতে পারেন. তাছাড়া, সাইটম্যাপ তৈরি করতে আপনাকে এসইও জমা দিতে হবে না.

একবার আপনার HTML পেজ লাইভ হয়, এটি Google অনুসন্ধান কনসোলে জমা দিন. আপনি যেকোনো ফাইল এক্সটেনশন ব্যবহার করতে পারেন এবং আপনার XML সাইটম্যাপের নাম দিতে পারেন. আপনি Google এ XML সাইটম্যাপ জমা দিতে পারেন, কিন্তু এটা প্রয়োজনীয় নয়. Google-এর ক্রলাররা সাধারণত নতুন কন্টেন্ট আবিষ্কারে বেশ ভালো, এবং আপনাকে তাদের কাছে একটি সাইটম্যাপ জমা দেওয়ার দরকার নেই. আপনি এটি অন্যান্য সার্চ ইঞ্জিনেও জমা দিতে পারেন, কিন্তু এটি গ্যারান্টি দেয় না যে আপনি Google দ্বারা আবিষ্কৃত হবেন.

আপনার ওয়েব পৃষ্ঠায় একটি XML সাইটম্যাপ যোগ করার প্রয়োজন নেই, কিন্তু এটি আপনার ওয়েবসাইটের এসইও বাড়াবে. সাইটম্যাপগুলি সার্চ ইঞ্জিন দ্বারা তাদের সূচী পৃষ্ঠাগুলিকে সাহায্য করার জন্য ব্যবহার করা হয় যা সরাসরি একটি ওয়েব পৃষ্ঠার সাথে লিঙ্ক করা হয় না. সাইটম্যাপগুলি সমৃদ্ধ মিডিয়া সামগ্রীর অ্যাক্সেসযোগ্যতা উন্নত করতেও সাহায্য করে. আপনার ওয়েবসাইটে একটি সাইটম্যাপ যোগ করা আপনার সাইটটিকে সার্চ ইঞ্জিন বটগুলিতে আরও অ্যাক্সেসযোগ্য করে তুলতে সাহায্য করতে পারে.

একটি ছবি যোগ করা হচ্ছে

HTML এ, আপনি img ট্যাগ ব্যবহার করে একটি পৃষ্ঠায় একটি ছবি যোগ করতে পারেন. এই ট্যাগে শুধুমাত্র ইমেজ এবং তার বৈশিষ্ট্য রয়েছে; এটি একটি বন্ধ ট্যাগ প্রয়োজন হয় না. এই ইমেজ ট্যাগটি এইচটিএমএল ডকুমেন্টের বডি বিভাগের মধ্যে সন্নিবেশ করা উচিত. ছবির প্রস্থ এবং উচ্চতা ছাড়াও, আপনার ছবি বর্ণনা করে একটি Alt বৈশিষ্ট্য অন্তর্ভুক্ত করা উচিত. Alt ট্যাগটি এমনভাবে লিখতে হবে যেন আপনি এমন একজন ব্যক্তির জন্য বর্ণনা লিখছেন যিনি এটি দেখতে পাচ্ছেন না.

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

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

একটি লিঙ্ক যোগ করা হচ্ছে

আপনি একটি ব্যবহার করে আপনার নথিতে HTML এ একটি লিঙ্ক যোগ করতে পারেন> href এট্রিবিউট দিয়ে ট্যাগ করুন. এটি নথির জন্য একটি বুকমার্ক তৈরি করবে এবং এটি একটি নতুন ট্যাবে খুলবে. আপনি ডকুমেন্টে একটি ইমেজ সন্নিবেশ করতে একটি href অ্যাট্রিবিউট ব্যবহার করতে পারেন. আপনি একটি লিঙ্কে একটি HTML বোতাম রূপান্তর করতে JavaScript কোড সহ একটি লিঙ্ক ব্যবহার করতে পারেন. একবার আপনি এই কাজ করেছেন, আপনি CSS বা JavaScript কোড দিয়ে আপনার লিঙ্ক স্টাইল করতে পারেন.

একটি লিঙ্ক একটি ওয়েব সম্পদ থেকে অন্য একটি সংযোগ. এটি দুটি প্রান্ত নিয়ে গঠিত, একটি উৎস নোঙ্গর এবং একটি গন্তব্য নোঙ্গর. একটি লিঙ্ক একটি ইমেজ থেকে একটি টেক্সট ফাইলের যেকোনো কিছু হতে পারে. বেশিরভাগ সোশ্যাল নেটওয়ার্কিং সাইট এবং ওয়েবসাইট ব্যবহারকারীদেরকে একটি নির্দিষ্ট ইউআরএলে নির্দেশ করার জন্য লিঙ্ক ব্যবহার করে. HTML একটি লিঙ্কের অবস্থান নির্দিষ্ট করতেও ব্যবহার করা যেতে পারে. এটা একটা’ বৈশিষ্ট্য আপনাকে একটি URL এর সাথে কোড উপাদান লিঙ্ক করতে দেয়.

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

একটি টেবিল যোগ করা হচ্ছে

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

আপনি td উপাদানের সাথে একটি টেবিল হেডার এবং টেবিল ডেটা যোগ করতে পারেন, যা ব্যক্তিকে সংজ্ঞায়িত করে “বাক্স” বিষয়বস্তুর জন্য. একটি টেবিল শিরোনাম যোগ করা একটি ওয়েবপেজে ডেটা প্রদর্শনের প্রথম ধাপ, এবং আপনি যদি চান প্রথম একটি যোগ করা উচিত. একটি টেবিলের তিনটি সারি শিরোনাম থাকা উচিত. একটি শিরোনাম খালি হওয়া উচিত. যদি আপনার টেবিলে কলাম থাকে, আপনাকে প্রতিটি কলামের জন্য সারি শিরোনামও তৈরি করতে হবে.

আপনি আপনার টেবিলে ক্যাপশন যোগ করতে পারেন. ক্যাপশনটি একটি ঐচ্ছিক উপাদান যা টেবিলের উদ্দেশ্য বর্ণনা করে. ক্যাপশনগুলি অ্যাক্সেসযোগ্যতার জন্যও সহায়ক. সারণিতে ডেটার গোষ্ঠী বর্ণনাকারী কোষও থাকতে পারে. অবশেষে, আপনি সারি এবং কলামের একটি সেট সংজ্ঞায়িত করতে থিড উপাদান যোগ করতে পারেন. আপনি উভয় উপাদান একসাথে বা পৃথকভাবে ব্যবহার করতে পারেন. এমনকি আপনি তাদের সংমিশ্রণে ব্যবহার করতে পারেন, তবে ক্যাপশনটি সবচেয়ে গুরুত্বপূর্ণ.

একটি ডিভ যোগ করা হচ্ছে

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

আপনি একটি div ভিতরে কোড সন্নিবেশ করার জন্য innerHTML বৈশিষ্ট্য ব্যবহার করতে পারেন. এই পদ্ধতিটি একটি স্ট্রিং এ আবদ্ধ কোড গ্রহণ করে, এবং যদি এটি div-এর মধ্যে না থাকে, বিষয়বস্তু সরানো হবে. আপনি এইভাবে একটি ডিভিতে কোড সন্নিবেশ করা এড়াতে হবে, কারণ এটি আপনার ওয়েবসাইটকে ক্রস-সাইট স্ক্রিপ্টিং দুর্বলতার সাথে প্রকাশ করতে পারে. আপনি যদি জাভাস্ক্রিপ্টের মতো স্ক্রিপ্টিং ভাষা ব্যবহার করেন, আপনি innerHTML অ্যাট্রিবিউট ব্যবহার করতে পারেন.

একটি div একটি মৌলিক HTML ট্যাগ যা একটি নথির মধ্যে গ্রুপ কোড করতে ব্যবহৃত হয়. এতে একটি অনুচ্ছেদ থাকতে পারে, ব্লক উদ্ধৃতি, ইমেজ, শ্রুতি, বা এমনকি একটি হেডার. এর অবস্থান আপনাকে একটি পৃষ্ঠার বিভিন্ন বিভাগে একটি অভিন্ন শৈলী এবং ভাষা প্রয়োগ করতে দেয়. পরপর উপাদানগুলির গোষ্ঠীতে সাধারণ শব্দার্থবিদ্যাকে চিহ্নিত করার জন্য Divগুলি সবচেয়ে ভাল ব্যবহার করা হয়. একটি ডিভ ব্যবহার করা উচিত যখন আপনি পুরো পৃষ্ঠাটি পুনর্লিখন না করেই একটি বিভাগে শৈলী যোগ করতে চান.