কিভাবে html এ একটি সাধারণ ব্যাকগ্রাউন্ড কালার করা যায়। পাঠ্য এবং পটভূমির রঙ পরিবর্তন করা হচ্ছে

আপনি যে সম্পাদকটি ব্যবহার করছেন তাতে সম্পাদনার জন্য আপনার HTML পৃষ্ঠা ফাইলটি খুলুন। এটি করার জন্য, আপনি নথিতে ডান-ক্লিক করতে পারেন এবং "এর সাথে খুলুন" বিভাগটি নির্বাচন করতে পারেন।

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

এই ক্ষেত্রে, চিত্রের পথটি একটি URL হতে পারে (http:// দিয়ে শুরু)। অবস্থানটি রুট ডিরেক্টরি (/root/folder/background.jpg) থেকে বা HTML নথি সম্পাদনা করা অবস্থানের সাথে সম্পর্কিত (উদাহরণস্বরূপ, ফোল্ডার/background.jpg) থেকে সেট করা যেতে পারে।

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

bgcolor প্যারামিটার

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

এই কোড পৃষ্ঠাটিকে একটি নীল পটভূমি দেয়। আপনি যদি একটি রঙের আভা বা আরও সুনির্দিষ্ট রঙ সেট করতে চান, তাহলে HTML প্যালেট মানগুলি ব্যবহার করুন:

এই ক্ষেত্রে, #002902 হল সেই রঙ যা পেজে দিতে হবে।

CSS গুণাবলী

আপনি বিকল্পগুলিতে CSS কোড ব্যবহার করে ব্যাকগ্রাউন্ড সেট করতে পারেন :

CSS ব্যবহার করে, আপনি ব্যাকগ্রাউন্ড-ইমেজের মাধ্যমে পৃষ্ঠার জন্য একটি ব্যাকগ্রাউন্ড ইমেজও নির্দিষ্ট করতে পারেন:

CSS এবং HTML ব্যবহার করে একই ফলাফল পাওয়া যায়, তবে, পৃষ্ঠা প্রদর্শনের পরামিতি সেট করার সময়, CSS ব্যবহার করা বাঞ্ছনীয়।

একটি HTML সাইটের পটভূমি উভয় ট্যাগ বৈশিষ্ট্য ব্যবহার করে পরিবর্তন করা যেতে পারে শরীর, এবং CSS শৈলী ব্যবহার করে ট্যাগেও প্রয়োগ করা হয় শরীর. একটি ওয়েবসাইটের জন্য একটি ব্যাকগ্রাউন্ড তৈরি করার জন্য উভয় বিকল্প বিবেচনা করা যাক।

এইচটিএমএল ব্যবহার করে পটভূমির রঙ পরিবর্তন করা

ট্যাগ শরীর, প্রায় যেকোনো HTML ট্যাগের মতো, এর নিজস্ব বৈশিষ্ট্য রয়েছে। গুণাবলী ট্যাগ করতে শরীরবলা:

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

HTML ব্যবহার করে পটভূমির রঙ পরিবর্তন করতে, আমরা বৈশিষ্ট্যটি ব্যবহার করব bgcolor:

এটি একটি উদাহরণ পাঠ্য সাদা, বডি ট্যাগের টেক্সট অ্যাট্রিবিউট ব্যবহার করে নির্দিষ্ট করা হয়েছে।

বিঃদ্রঃ:পটভূমি সাদা হলেও একটি পৃষ্ঠার পটভূমির রঙ নির্দিষ্ট করার পরামর্শ দেওয়া হয়। এর কারণ হল কিছু ব্যবহারকারী তাদের ব্রাউজারে একটি অ-মানক ব্যাকগ্রাউন্ডের রঙ ব্যবহার করতে পারে এবং এর ফলে আপনার সাইটের পাঠ্য অপঠনযোগ্য হতে পারে।

CSS ব্যবহার করে পৃষ্ঠার পটভূমির রঙ পরিবর্তন করা

এটি ব্যাকগ্রাউন্ড সিএসএস ব্যবহার করে সাদা টেক্সট সেটের একটি উদাহরণ। পৃষ্ঠার পটভূমিও CSS ব্যবহার করে সেট করা হয়েছে।

Nubex ওয়েবসাইট বিল্ডারে, যে কোনো ওয়েবসাইটের জন্য আপনি ছবির একটি বড় লাইব্রেরি থেকে একটি রেডিমেড ব্যাকগ্রাউন্ড নির্বাচন করতে পারেন, অথবা আপনার নিজের যোগ করতে পারেন।

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

আমাদের খোলা যাক index.html, সম্পাদনার জন্য: আমি ব্যবস্থা করেছি!!! এবং এর একটু পরিবর্তন করা যাক, বৈশিষ্ট্য যোগ করুন: text="#000000" bgcolor="#ffffff"> আমি এটা করেছি!!! বৈশিষ্ট্যএকটি ট্যাগ প্যারামিটার যা ট্যাগের মধ্যে "জোড়া" (প্যারামিটার নাম + প্যারামিটার মান) হিসাবে ঢোকানো হয়।
ট্যাগ বৈশিষ্ট্য মান সন্নিবেশ করা হয়:
1) টেক্সট=#000000 উদ্ধৃতি ছাড়া;
2) text="#000000" একক উদ্ধৃতিতে;
3) টেক্সট="#000000" ডবল উদ্ধৃতিতে।
এই বিকল্পগুলির যে কোনওটি সঠিক, তবে আপনি যদি কোড নীতিশাস্ত্রের বিষয়ে যত্নশীল হন তবে এটি ব্যবহার করা আরও ভাল উদ্ধৃতি চিহ্ন, উপরে আমার উদাহরণ হিসাবে.

বৈশিষ্ট্য "পাঠ্য"সমগ্র পৃষ্ঠার পাঠ্যের রঙ নিয়ন্ত্রণ করে, এবং "bgcolor"পৃষ্ঠার পটভূমির রঙ নিয়ন্ত্রণ করে।

এখন আমি HTML নথির জন্য রং সম্পর্কে কথা বলার প্রস্তাব করছি। রঙ সেট করা হয়েছে:
1) text="সোনা"- ইংরেজিতে শব্দ, উদাহরণস্বরূপ: সোনা (সোনালি), লাল (লাল), সবুজ (সবুজ) এবং আরও অনেক কিছু...
তবে একটি রঙ শুধুমাত্র একটি শব্দ নিয়ে গঠিত হতে পারে, উদাহরণস্বরূপ "লাল", কিন্তু আপনি যদি "সবুজ-লাল" লেখেন তবে ব্রাউজার এটি বুঝতে পারবে না এবং এটিকে উপেক্ষা করবে।
2) টেক্সট="#000000"- RBG রঙের স্কিম (লাল সবুজ নীল)। "#" এই চিহ্নটি নির্দেশ করে যে এটি একটি রঙের সংখ্যা, প্রথম দুটি প্রতীক (আমার উদাহরণে শূন্য) আমাদেরকে বলে যে আমরা কতগুলি "লাল" রং নিয়েছি, দ্বিতীয়টি সবুজ এবং শেষ দুটি নীল।
প্রতিটি রঙ 00 থেকে FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F) থেকে নির্দিষ্ট করা হয়েছে, উদাহরণস্বরূপ #000000-কালো, #ffffff-সাদা, #ff0000-লাল, # 00ff00- সবুজ #0000ff-নীল

সাইট থেকে বোনাস হিসেবে, আমি আপনাকে কালার প্যালেট (2kB) ডাউনলোড করার পরামর্শ দিচ্ছি, যা উপরের ছবিতে দেখানো হয়েছে। আপনাকে সংরক্ষণাগারটি আনপ্যাক করতে হবে এবং ফাইলটি চালাতে হবে color.html, তারপর বড় ক্ষেত্রে, আপনার প্রয়োজনীয় রঙের উপর মাউস পয়েন্টার রাখুন, যা একটি ছোট উইন্ডোতে প্রদর্শিত হবে, এবং আপনি যদি এই সময়ে মাউসে ক্লিক করেন, তাহলে ডানদিকের ছোট উইন্ডোতে রঙের কোড প্রদর্শিত হবে।

এখন আমাদের ফাইলে ফিরে যাওয়া যাক index.htmlএবং এটি হিসাবে সংরক্ষণ করুন tsvet.html, এখন দেখা যাক কি হয়েছে। তিনি কেমন ছিলেন এবং তিনি কেমন রয়ে গেছেন? এবং আপনি একেবারে সঠিক, কারণ সাদা পটভূমির জন্য এবং কালো পাঠ্যের জন্য ডিফল্ট রঙ। পার্থক্য লক্ষ্য করতে, আসুন বৈশিষ্ট্যের মান পরিবর্তন করি:

text=gold" bgcolor="#0900b8"> আমি এটা করেছি!!! আসুন সংরক্ষণ করি এবং দেখি (একটি নতুন ট্যাবে খোলে)

এইচটিএমএল ফাইলে টেক্সট সেট করার অন্যান্য উপায় আছে, কিন্তু এই দুটিকে প্রধান হিসেবে বিবেচনা করা হয়।

পরবর্তী অধ্যায়ে আমরা শিখব কিভাবে BR ট্যাগ দিয়ে টেক্সট ম্যানিপুলেট করা যায় এবং টেক্সটকে অন্য লাইনে মোড়ানো যায়।

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

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

প্রথমত, আপনার ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করুন, কারণ ধীর ইন্টারনেট কানেকশন আছে এমন লোকেরা অবিলম্বে সাইটের ব্যাকগ্রাউন্ড ইমেজ দেখতে পাবে না। কিছুক্ষণের জন্য, ছবিটি লোড হওয়ার সময়, তারা শুধুমাত্র আপনার সাইটের রঙ দেখতে সক্ষম হবে।
ট্যাগে প্রবেশ করুন প্যারামিটার bgcolor=”*****”, যেখানে ***** হল রঙের কোড। আপনি "ওয়েবের জন্য" বিকল্পটি নির্বাচন করে বা https://colorscheme.ru/color-names ওয়েবসাইটে যে কোনও গ্রাফিক সম্পাদকে HTML-এর রঙগুলি খুঁজে পেতে পারেন

আপনাকে শুধু বৃত্ত প্যালেটে একটি রঙ নির্বাচন করতে হবে এবং বর্গক্ষেত্রের মধ্যে এর তীব্রতা নির্ধারণ করতে হবে। ডানদিকে আপনি html এর জন্য দুটি কোড দেখতে পাবেন। সেগুলো কপি করে নোটপ্যাডে পেস্ট করুন।

একটি রঙ নির্বাচন করে কোডে ঢোকানোর পরে, আপনি ব্রাউজার থেকে ফলস্বরূপ ওয়েব পৃষ্ঠাটি দেখে সবকিছু সঠিকভাবে করেছেন কিনা তা দেখুন।

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

এখন ফাইলটির অবস্থান খুঁজে বের করুন এটিতে ডান-ক্লিক করে, "ওপেন উইথ" নির্বাচন করে এবং আপনার কম্পিউটারে ইনস্টল করা যেকোনো ব্রাউজারে ক্লিক করে।

আপনার ব্রাউজারের অনুসন্ধান বার থেকে ঠিকানাটি অনুলিপি করুন।

এখন ট্যাগে লাইন লিখুন:

• স্টাইল="পটভূমি-চিত্র: url('file:///C:/Users/FILE_PATH.jpg')"

আপনার ফাইল সংরক্ষণ করুন.

আপনার ওয়েব পৃষ্ঠা পরীক্ষা করুন. আপনি দেখতে পাবেন যে আপনার পাঠ্যের জন্য পটভূমি প্রতিস্থাপিত হয়েছে।

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

• ব্যাকগ্রাউন্ড-পুনরাবৃত্তি: "মান।" আপনার মানের জন্য বিকল্পগুলি হতে পারে: "রিপিট-এক্স" - অনুভূমিকভাবে এবং উল্লম্বভাবে আপনার পটভূমি চিত্রের পুনরাবৃত্তি করে৷ "repeat-y" - পুনরাবৃত্তি শুধুমাত্র উল্লম্বভাবে। "না-পুনরাবৃত্তি" - চিত্রটি জায়গায় হিমায়িত এবং পুনরাবৃত্তি হয় না। "স্পেস" - পুরো পৃষ্ঠাটি ছবির সর্বাধিক সংখ্যক অনুলিপি দিয়ে পূর্ণ হবে, সবচেয়ে বাইরেরটি ক্রপ করা হবে। "বৃত্তাকার" - একই বিকল্প, কিন্তু চিত্রের প্রান্তগুলি সাবধানে মাপ করা হবে;
• ব্যাকগ্রাউন্ড-সংযুক্তি: "মান।" আপনি যদি ভ্যালু শব্দের পরিবর্তে "স্ক্রোল" ট্যাগটি প্রতিস্থাপন করেন, তাহলে ছবিটি সাইটের সাথে স্ক্রোল করবে। "স্থির" - স্ক্রল করার সময় পটভূমি অপরিবর্তিত থাকে;
• ব্যাকগ্রাউন্ড-আকার: মান Value2. এখানে মানগুলি অবশ্যই পিক্সেলে একটি মান নিতে হবে। যেমন: 100px 200px। পিক্সেল ছাড়াও, শতাংশ মান গৃহীত হয়। এটি একটি চিত্র দিয়ে পৃষ্ঠাটি পূরণ করার একটি বিকল্প। সংখ্যা ছাড়াও, আপনি দুটি পরামিতি লিখতে পারেন: "ধারণ" - দীর্ঘ দিক বরাবর একটি চিত্র দিয়ে পৃষ্ঠাটি পূরণ করে এবং "কভার" - প্রস্থ বরাবর একটি চিত্র দিয়ে পৃষ্ঠাটি পূরণ করে৷

একবার আপনি এইচটিএমএল-এ ব্যাকগ্রাউন্ড সহ একটি পৃষ্ঠা পূরণ করার প্রাথমিক বিষয়গুলি জানলে, আপনি আপনার প্রথম ওয়েবসাইট তৈরি করতে প্রস্তুত৷

লেখক থেকে: webformyself-এ স্বাগতম এবং আজ আমি আপনাদের বলতে চাই কিভাবে সাইটের ব্যাকগ্রাউন্ড পরিবর্তন করতে হয়। পটভূমিতে পটভূমির রঙ বা চিত্র একটি সাইটকে কেমন দেখায় তাতে একটি বিশাল ভূমিকা পালন করতে পারে, তাই আপনাকে এটি কীভাবে সেট করতে হবে তা জানতে হবে।

কিভাবে ওয়ার্ডপ্রেসে ব্যাকগ্রাউন্ড পরিবর্তন করবেন

আবার, আপনার যদি ওয়ার্ডপ্রেস ইঞ্জিন থাকে, তাহলে পেজের সাধারণ ব্যাকগ্রাউন্ড পরিবর্তন করা কঠিন হবে না। আপনাকে শুধু "আদর্শ" ট্যাবে "কাস্টমাইজ" বোতামে ক্লিক করতে হবে। এখানে আপনাকে "রঙ" নির্বাচন করতে হবে। আপনার চয়ন করা টেমপ্লেটের উপর নির্ভর করে, আপনি বিভিন্ন উপাদানের জন্য রঙ চয়ন করতে সক্ষম হতে পারেন। তবে আপনি যে কোনও ক্ষেত্রে পৃষ্ঠার রঙ চয়ন করতে পারেন - আপনার সামনে একটি সুবিধাজনক রঙের প্যানেল খুলবে।

এখানে সেটিংস সংখ্যা আপনার কি টেমপ্লেট আছে উপর নির্ভর করে. যাই হোক না কেন, পুরো পৃষ্ঠার জন্য অবশ্যই রঙ সেট করা সম্ভব হবে; বিভিন্ন টেমপ্লেটে আপনি শিরোনাম, লিঙ্ক ইত্যাদির জন্য পটভূমি এবং রঙও সেট করতে পারেন।

আসলে, যে সব আপনি জানতে হবে. আপনি যদি একটি পটভূমি ছবি ডাউনলোড করতে চান, উপযুক্ত আইটেম নির্বাচন করুন এবং আপনার কম্পিউটারে প্রয়োজনীয় ফাইল খুঁজুন।

জাভাস্ক্রিপ্ট। দ্রুত শুরু

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

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

প্রথমত, আপনাকে একটি পুনরাবৃত্তি পদ্ধতি বেছে নিতে বলা হবে। ইতিমধ্যে 4টি বিকল্প রয়েছে: শুধুমাত্র অনুভূমিকভাবে পুনরাবৃত্তি করুন, শুধুমাত্র উল্লম্বভাবে, উভয় দিকে এবং পুনরাবৃত্তি করবেন না। আপনি যে ছবিটি ব্যবহার করছেন তার উপর নির্ভর করে আপনাকে একটি পছন্দ করতে হবে।

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

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

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

উদাহরণস্বরূপ, আপনার যদি 1000 পিক্সেলের একটি ব্যাকগ্রাউন্ড ইমেজ উচ্চতা থাকে এবং আপনি এটি পুনরাবৃত্তি বা ক্যাপচার না করেন, তাহলে আপনি যখন নিচে স্ক্রোল করেন তখন এটি দৃশ্য থেকে অদৃশ্য হয়ে যাবে। ব্যাকগ্রাউন্ড ঠিক করা ছবিকে সব সময় দেখার অনুমতি দেয়। কখনও কখনও এটি একটি খুব কার্যকর সমাধান।

জাভাস্ক্রিপ্ট। দ্রুত শুরু

কিভাবে একটি ওয়েব অ্যাপ্লিকেশন তৈরি করতে হয় তার একটি হ্যান্ডস-অন উদাহরণ সহ জাভাস্ক্রিপ্টের মূল বিষয়গুলি শিখুন৷

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

কিভাবে html এ একটি ওয়েবসাইটের ব্যাকগ্রাউন্ড পরিবর্তন করবেন

ঠিক আছে, আমরা একটি সম্পূর্ণ ভিজ্যুয়াল সংস্করণ দেখেছি, যেখানে আপনাকে কোডে যেতে হবে না এবং সেখানে কিছু লিখতে হবে না। এখন আসুন জেনে নেই কিভাবে html এবং css এর মাধ্যমে ব্যাকগ্রাউন্ড পরিবর্তন করা যায়। এই সুবিধা কি প্রদান করে? আপনি শুধুমাত্র সাধারণভাবে সাইটের জন্য নয়, প্রতিটি উপাদানের জন্যও আলাদাভাবে ব্যাকগ্রাউন্ড ইমেজ সেট করতে পারেন। যেমন কিছু উইজেট, মেনু, হেডার ইত্যাদির জন্য। এটি ওয়েবসাইট ডিজাইন এবং এর ডিজাইন পরিবর্তনে অনেক বেশি সুযোগ দেয়।

এই সমস্ত স্টাইলিং অ্যাক্সেস করার জন্য, আপনাকে আপনার টেমপ্লেটের প্রধান স্টাইল শীটটি খুঁজে বের করতে হবে। সাধারণত এটি রুট বা সিএসএস ফোল্ডারে থাকে এবং একে style.css বা main.css বলা হয়।

এটিতে আপনি কোড দেখতে পাবেন যা আপনার সাইটের বিভিন্ন উপাদান ডিজাইন করে। আপনি যদি বিশ্বব্যাপী ব্যাকগ্রাউন্ড সেট করতে চান, তাহলে আপনি বডি সিলেক্টর, অর্থাৎ পৃষ্ঠার বডিতে একটি ব্যাকগ্রাউন্ড বরাদ্দ করে এটি করতে পারেন।

ব্যাকগ্রাউন্ড কিভাবে সেট করা হয়?

মনে রাখবেন - পটভূমি সম্পত্তি. আজ এই সম্পত্তি লেখার সংক্ষিপ্ত সংস্করণ ব্যবহার করা ভাল। উদাহরণ স্বরূপ:

বডি (পটভূমি: #ccc url(bg.png) নো-রিপিট 50% 50% স্থির;)

শরীর ( পটভূমি: #ccc url(bg.png) নো-রিপিট 50% 50% স্থির;

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

এর পরে আমি যে সমস্ত পরামিতি লিখেছি তা ঐচ্ছিক এবং পছন্দসই হিসাবে নির্দিষ্ট করা যেতে পারে। তাই, আমি উল্লেখ করেছি যে পটভূমি চিত্রটি পুনরাবৃত্তি করা উচিত নয়, অনুভূমিকভাবে এবং উল্লম্বভাবে কেন্দ্রে অবস্থান করা উচিত এবং একই জায়গায় স্থির করা উচিত যাতে স্ক্রল করার সময় অদৃশ্য না হয়।

আপনি দেখতে পাচ্ছেন, এখানে সমস্ত একই প্যারামিটার রয়েছে যা আপনি দৃশ্যত কনফিগার করেছেন, তবে এখানে সেগুলি পটভূমি সম্পত্তির মান হিসাবে নিবন্ধিত হয়েছে।

এই উদাহরণে, আমি একটি সংক্ষিপ্ত সম্পত্তি স্বরলিপি ব্যবহার করেছি, এটি আরও সুবিধাজনক, কিন্তু প্রকৃতপক্ষে, প্রতিটি পৃথক প্যারামিটারের নিজস্ব সম্পত্তি রয়েছে: রঙের জন্য ব্যাকগ্রাউন্ড-কালার, একটি ছবির জন্য ব্যাকগ্রাউন্ড-ইমেজ, একটি অবস্থান সেট করার জন্য ব্যাকগ্রাউন্ড-অবস্থান।

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

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

জাভাস্ক্রিপ্ট। দ্রুত শুরু

কিভাবে একটি ওয়েব অ্যাপ্লিকেশন তৈরি করতে হয় তার একটি হ্যান্ডস-অন উদাহরণ সহ জাভাস্ক্রিপ্টের মূল বিষয়গুলি শিখুন৷