কন্টেন্ট

• পদক্ষেপ
• 4 টির 1 পদ্ধতি: একটি শক্ত পটভূমির রঙ সেট করা
• পদ্ধতি 4 এর 2: পটভূমি হিসাবে একটি ছবি ব্যবহার
• পদ্ধতি 4 এর 3: একটি গ্রেডিয়েন্ট পটভূমি তৈরি করুন
• 4 এর 4 পদ্ধতি: ওয়ালপেপার হিসাবে রঙিন অ্যানিমেশন সেট করুন

এইচটিএমএলে কোনও ওয়েব পৃষ্ঠার পটভূমি সেট করতে সক্ষম হতে আপনাকে কেবল "বডি" উপাদানটিতে একটি ছোট পরিবর্তন করতে হবে শৈলী </ शैली> ট্যাগ. পদক্ষেপগুলি আপনি কীভাবে আপনার ওয়ালপেপারটি দেখতে চান তার উপর নির্ভর করে। কীভাবে আপনার ওয়েবসাইটের পটভূমিটিকে একটি শক্ত রঙ, চিত্র, গ্রেডিয়েন্ট বা রঙ অ্যানিমেশন হিসাবে সেট করতে হয় তা শিখুন।

পদক্ষেপ

4 টির 1 পদ্ধতি: একটি শক্ত পটভূমির রঙ সেট করা

1. আপনার প্রিয় পাঠ্য সম্পাদকটিতে আপনার এইচটিএমএল ফাইলটি খুলুন। এইচটিএমএল 5 হিসাবে, এইচটিএমএল বৈশিষ্ট্য বিগক্লোর> আর সমর্থিত নয়। আপনার পৃষ্ঠার অন্যান্য স্টাইলের দিকের মতো পটভূমির রঙ অবশ্যই সিএসএসের সাথে সেট করা উচিত।
2. যুক্ত করুন শৈলী </ शैली> আপনার দস্তাবেজ ট্যাগ করে। আপনার পৃষ্ঠার সমস্ত স্টাইলের ডেটা (পটভূমির রঙ সহ) এই ট্যাগগুলির মধ্যে এনকোড করা উচিত। আপনার কি আছে? শৈলী> ট্যাগগুলি ইতিমধ্যে নির্দেশিত, তারপরে আপনি কেবল ফাইলের সেই অংশে স্ক্রোল করতে পারেন।

   ! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শৈলী </ শৈলী> / প্রধান> / এইচটিএমএল

3. এর ভিতরে "বডি" উপাদানটি টাইপ করুন শৈলী </ शैली> ট্যাগ. সিএসএসে আপনি "বডি" উপাদানটিতে যে কোনও কিছু পরিবর্তন করুন পুরো পৃষ্ঠাটিকে প্রভাবিত করবে।

   ! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শৈলী> দেহ {} / শৈলী </ মাথা> দেহ </ b> </ html>

4. "দেহ" উপাদানটিতে "ব্যাকগ্রাউন্ড-রঙ" বৈশিষ্ট্য যুক্ত করুন। এই প্রসঙ্গে শুধুমাত্র "রঙ" এর একটি মাত্র বানান কাজ করবে (রঙ নয়)।

   ! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শৈলী> দেহ {পটভূমি-রঙ:} / শৈলী </ b> <<<<<<<<<<<<

5. "ব্যাকগ্রাউন্ড-রঙ" এর পিছনে পছন্দসই পটভূমি রঙ রাখুন। আপনি এখন একটি রঙের নামটি নির্দেশ করতে পারেন (সবুজ, নীল, ed, ইত্যাদি), হেক্সাডেসিমাল (হেক্স) কোডগুলি ব্যবহার করুন (প্রাক্তন)। #000000 কালো জন্য, # ff0000 লাল ইত্যাদির জন্য) বা রঙের জন্য আরজিবি মান টাইপ করে (যেমন আরজিবি (255,255,0) হলুদ জন্য)। নীচে হেক্সাডেক্সিমাল কোড সহ একটি উদাহরণ দেওয়া হয়েছে, পটভূমিটি উইকির শো ব্যানারের মতো করে তোলে:

   ! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শৈলী> শরীরের {পটভূমি-রঙ: # 93B874; } / শৈলী </ হেড> দেহ </ b>> এইচটিএমএল

   • সাদা: #FFFFFF
   • হালকা গোলাপি: # এফএফসিসিই 6
   • পোড়ানো Sienna: #993300
   • নীল - # 4B0082
   • ভায়োলেট - # EE82EE
   • আপনি চান যে কোনও রঙের হেক্স কোডগুলি খুঁজতে w3schools.com এইচটিএমএল কালার পিকারটি দেখুন।
6. অন্যান্য উপাদানগুলিতে পটভূমির রঙ প্রয়োগ করতে "ব্যাকগ্রাউন্ড-রঙ" ব্যবহার করুন। আপনি যেমন শরীরের উপাদান সেট করেছেন, আপনি অন্যান্য উপাদানগুলির ব্যাকগ্রাউন্ড সেট করতে ব্যাকগ্রাউন্ড-রঙ ব্যবহার করতে পারেন। এই উপাদানগুলির মধ্যে কেবল স্থান দিন শৈলী </ शैली> পটভূমির রঙের সম্পত্তি সহ।

   ! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শৈলী> শরীরের {পটভূমি-রঙ: # 93B874; } এইচ 1 {পটভূমি রঙ: কমলা; } পি {ব্যাকগ্রাউন্ড-রঙ: আরজিবি (255,0,0); style / শৈলী </ head> শরীর> এইচ 1> এই শিরোনামটি একটি কমলা পটভূমি </ h1> p> এই অনুচ্ছেদটি একটি লাল ব্যাকগ্রাউন্ড </ p> / বডি </ html> পায়

পদ্ধতি 4 এর 2: পটভূমি হিসাবে একটি ছবি ব্যবহার

1. একটি পাঠ্য সম্পাদকটিতে এইচটিএমএল ফাইলটি খুলুন। অনেক লোক তাদের ওয়েবসাইটের পটভূমি হিসাবে কোনও চিত্র ব্যবহার করতে পছন্দ করেন। এটির সাহায্যে আপনি প্যাটার্ন, টেক্সচার, ফটো বা অন্য কোনও চিত্রকে ব্যাকগ্রাউন্ড হিসাবে সেট করতে পারেন। এইচটিএমএল 5 থেকে সমস্ত ব্যাকগ্রাউন্ড অবশ্যই এর মধ্যে সিএসএস (ক্যাসকেডিং স্টাইল শীট) দিয়ে সেট করা উচিত শৈলী </ शैली> ট্যাগ.
2. যুক্ত করুন শৈলী </ शैली> আপনার এইচটিএমএল ফাইল ট্যাগ। আপনার পৃষ্ঠার সমস্ত স্টাইলের ডেটা (পটভূমির রঙ সহ) এই ট্যাগগুলির মধ্যে নির্দেশিত হওয়া উচিত। তুমি কি ইতিমধ্যেই শৈলী> ট্যাগ সেট, ফাইলের যে অংশে স্ক্রোল।

   ! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শৈলী </ শৈলী> / প্রধান> / এইচটিএমএল

3. এর ভিতরে "বডি" উপাদানটি টাইপ করুন শৈলী </ शैली> ট্যাগ. সিএসএসে আপনি "বডি" উপাদানটিতে যে কোনও কিছু পরিবর্তন করুন পুরো পৃষ্ঠাটিকে প্রভাবিত করবে।

   ! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শৈলী> দেহ {} / শৈলী </ মাথা> দেহ </ b> </ html>

4. "ব্যাকগ্রাউন্ড-চিত্র" বৈশিষ্ট্যটিকে "দেহ" উপাদানটিতে যুক্ত করুন। এই সম্পত্তি যুক্ত করার সময় আপনার নিজের চিত্রের ফাইলের নাম প্রয়োজন হবে। নিশ্চিত করুন যে চিত্রটি এইচটিএমএল ফাইলের মতো একই ফোল্ডারে সংরক্ষিত হয়েছে (বা আপনার ওয়েব সার্ভারে ফাইলের পুরো পথ যুক্ত করুন)।

   ! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শৈলী> দেহ {পটভূমি-চিত্র: ইউআরএল ("চিত্রনাম.পিএনজি"); পটভূমি-রঙ: # 93B874; } / শৈলী </ হেড> দেহ </ b>> এইচটিএমএল

   • কোডটি অন্তর্ভুক্ত করা ভাল ধারণা পেছনের রঙ কেবলমাত্র যদি পটভূমির চিত্রটি লোড না হয়।
5. একাধিক চিত্র স্তর। আপনি একে অপরের উপরে একাধিক চিত্র স্ট্যাক করতে পারেন। আপনার যদি স্বচ্ছ ব্যাকগ্রাউন্ড সহ চিত্রগুলি থাকে যখন সুপারপোজ করা হয় তখন একে অপরের পরিপূরক হয়।

   ! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শৈলী> দেহ {পটভূমি-চিত্র: ইউআরএল ("চিত্র 1.png"), ইউআরএল ("চিত্র 2.gif"); পটভূমি-রঙ: # 93B874; } / শৈলী </ হেড> দেহ </ b>> এইচটিএমএল

   • প্রথম চিত্র শীর্ষে রয়েছে। দ্বিতীয় চিত্রটি প্রথমের নিচে।

পদ্ধতি 4 এর 3: একটি গ্রেডিয়েন্ট পটভূমি তৈরি করুন

1. গ্রেডিয়েন্ট পটভূমি তৈরি করতে CSS ব্যবহার করুন। যদি আপনি কোনও দৃ color় রঙের চেয়ে কিছুটা স্টাইলাইজড কিছু খুঁজছেন তবে কোনও রঙ অ্যানিমেশনের মতো ব্যস্ত না হন তবে গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড ব্যবহার করে দেখুন। গ্রেডিয়েন্টস হ'ল রঙগুলি যা অন্যান্য সাম্যগুলিতে পরিবর্তিত হয়। আপনি আপনার গ্রেডিয়েন্ট তৈরি এবং সামঞ্জস্য করতে সিএসএস ব্যবহার করতে পারেন। রঙিন গ্রেডিয়েন্ট তৈরি করা শুরু করার আগে, আপনার সিএসএস দিয়ে একটি ওয়েব পৃষ্ঠা ফর্ম্যাট করার প্রাথমিক বিষয়গুলি সম্পর্কে পর্যাপ্ত জ্ঞান অর্জন করা উচিত।
2. স্ট্যান্ডার্ড সিনট্যাক্সটি বুঝুন। গ্রেডিয়েন্ট তৈরি করার সময়, আপনার প্রয়োজন হবে এমন দুটি টুকরো তথ্য: প্রারম্ভিক বিন্দু এবং প্রারম্ভিক কোণ এবং সেই রঙগুলির মধ্যে যা রূপান্তর ঘটবে। আপনি একাধিক রং নির্বাচন করতে পারেন যা সমস্ত ওভারল্যাপ করে এবং আপনি গ্রেডিয়েন্টের জন্য একটি দিক বা একটি কোণ নির্দিষ্ট করতে পারেন।

   পটভূমি: রৈখিক-গ্রেডিয়েন্ট (দিক / কোণ, রঙ 1, রঙ 2, বর্ণ 3, ইত্যাদি);

3. একটি উল্লম্ব গ্রেডিয়েন্ট তৈরি করুন। আপনি যদি কোনও দিক নির্দেশ না করেন, রঙ উপরে থেকে নীচে চলবে। বিভিন্ন ব্রাউজারের গ্রেডিয়েন্ট ফাংশনের বিভিন্ন সংস্করণ থাকে তাই আপনার কোডের বিভিন্ন সংস্করণ যুক্ত করতে হবে।

   ! ডক্টইপিইটি এইচটিএমএল> এইচটিএমএল> শৈলী> এইচটিএমএল {ন্যূনতম উচ্চতা: 100%; / * গ্রেডিয়েন্টটি পুরো পৃষ্ঠাটি * /} বডি {ব্যাকগ্রাউন্ডে ছড়িয়ে রয়েছে তা নিশ্চিত করার জন্য প্রয়োজনীয়: -উইবকিট-লিনিয়ার-গ্রেডিয়েন্ট (# 93B874, # সি 9ডিসিবি 9); / * ক্রোম 10+, সাফারি 5.1+ * / ব্যাকগ্রাউন্ড: -ও-লিনিয়ার-গ্রেডিয়েন্ট (# 93B874, # সি 9ডিসি9); / * অপেরা 11.1+ * / পটভূমি: -মোজ-লিনিয়ার-গ্রেডিয়েন্ট (# 93B874, # সি9ডিসিবি 9); / * ফায়ারফক্স 3.6+ * / পটভূমি: রৈখিক-গ্রেডিয়েন্ট (# 93B874, # সি9ডিসি9); / * ডিফল্ট বাক্য গঠন (অবশ্যই শেষ হতে হবে) * / পটভূমি-রঙ: # 93B874; / * গ্রেডিয়েন্ট load * /} / শৈলী </ মাথা> শরীর </ b>> / এইচটিএমএল> লোড না করে এমন একটি পটভূমি রঙ সেট করা ভাল ধারণা is

4. একটি দিক দিয়ে গ্রেডিয়েন্ট তৈরি করুন। গ্রেডিয়েন্টে একটি দিক যুক্ত করা আপনাকে রঙ বদলানোর পথে সামঞ্জস্য করতে দেয়। নোট করুন যে বিভিন্ন ব্রাউজারগুলি দিকনির্দেশকে আলাদাভাবে ব্যাখ্যা করবে। তারা সবাই একই রঙের গ্রেডিয়েন্ট প্রদর্শন করবে।

   ! ডক্টইপিইটি এইচটিএমএল> এইচটিএমএল> শৈলী> এইচটিএমএল {ন্যূনতম উচ্চতা: 100%; } বডি {পটভূমি: -webkit- রৈখিক-গ্রেডিয়েন্ট (বাম, # 93B874, # C9DCB9); / * বাম থেকে ডান * / ব্যাকগ্রাউন্ড: -o-লিনিয়ার-গ্রেডিয়েন্ট (ডান, # 93B874, # সি9ডিসিবি 9); / * প্রান্তটি ডানদিকে * / ব্যাকগ্রাউন্ড: -মোজ-লিনিয়ার-গ্রেডিয়েন্ট (ডান, # 93B874, # সি9ডিসি9); / * ডানদিকে শেষ * / ব্যাকগ্রাউন্ড: লিনিয়ার-গ্রেডিয়েন্ট (ডান থেকে ডান, # 93B874, # সি 9ডিসিবি 9); / * ডানদিকে চলে * / পটভূমি-রঙ: # 93B874; / * পটভূমির রঙ সেট করা ভাল ধারণা, যদি গ্রেডিয়েন্ট লোড না করে তবে * / style / শৈলী> / প্রধান> শরীর </ b>> html>

5. গ্রেডিয়েন্ট সামঞ্জস্য করতে অন্যান্য বৈশিষ্ট্যগুলি ব্যবহার করুন। গ্রেডিয়েন্টের সাহায্যে আপনি আরও অনেক কিছু করতে পারেন।
   • উদাহরণস্বরূপ, আপনি কেবল দুটিরও বেশি রঙ ব্যবহার করতে পারবেন না, তবে প্রতিটিটির পিছনে একটি শতাংশ রাখুন। এটির সাহায্যে আপনি প্রতিটি রঙ বিভাগে কত স্থান পাবেন তা নির্দেশ করতে পারেন।

     পটভূমি: রৈখিক-গ্রেডিয়েন্ট (# 93B874 10%, # C9DCB9 70%, # 000000 90%);

   • রঙগুলিতে স্বচ্ছতা যুক্ত করুন। এটি দিয়ে আপনি রঙগুলি বিবর্ণ করতে পারেন। রঙ থেকে কিছুই ম্লান করতে একই রঙটি ব্যবহার করুন। আপনি ফাংশন পছন্দ করবে rgba () রঙ নির্দেশ করতে অবশ্যই ব্যবহার করতে হবে। শেষ মান স্বচ্ছতার ডিগ্রি নির্ধারণ করে: 0 অস্বচ্ছ এবং জন্য 1 স্বচ্ছ জন্য।

     ব্যাকগ্রাউন্ড: রৈখিক গ্রেডিয়েন্ট (ডানদিকে, rgba (147,184,116.0), rgba (147,184,116.1));

4 এর 4 পদ্ধতি: ওয়ালপেপার হিসাবে রঙিন অ্যানিমেশন সেট করুন

1. নেভিগেট করুন শৈলী> আপনার এইচটিএমএল কোডে। যদি আপনি একটি শক্ত পটভূমির রঙ খুঁজে পান তবে তা নয়, রঙের ব্যাকগ্রাউন্ড পরিবর্তন করে পরীক্ষা করুন। এইচটিএমএল 5 থেকে, ব্যাকগ্রাউন্ডের রঙগুলি সিএসএস (ক্যাসকেডিং স্টাইল শীট) দিয়ে সংজ্ঞায়িত করা উচিত। আপনি যদি কখনও সিএসএসের সাথে কোনও পটভূমি রঙ সেট করেন না, এই পদ্ধতিটি চেষ্টা করার আগে একটি শক্ত পটভূমির রঙ সেট করার বিভাগটি পড়ুন।
2. সম্পত্তি যুক্ত করুন অ্যানিমেশন "শরীর" উপাদান। প্রতিটি ব্রাউজারের জন্য আলাদা আলাদা কোডের প্রয়োজন হওয়ায় আপনাকে 2 টি আলাদা আলাদা বৈশিষ্ট্য যুক্ত করতে হবে।

   ! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শৈলী> বডি we-ওয়েবেকিট-অ্যানিমেশন: রঙিনচঞ্চল 60 এর দশকের অসীম; অ্যানিমেশন: রঙ পরিবর্তন 60s অসীম; } / শৈলী </ হেড> দেহ </ b>> এইচটিএমএল

   • -উইবকিট-অ্যানিমেশন সম্পত্তিটি ক্রোম-ভিত্তিক ব্রাউজারগুলির জন্য প্রয়োজনীয় (ক্রোম, অপেরা, সাফারি)। অ্যানিমেশন অন্যান্য সমস্ত ব্রাউজারের জন্য এটি আদর্শ।
   • রঙ পরিবর্তন এই উদাহরণে অ্যানিমেশন বলা হয়।
   • 60 এর দশক অ্যানিমেশন / ট্রানজিশনের সময়কাল (60 সেকেন্ড)। ওয়েবকিট এবং ডিফল্ট সিনট্যাক্স উভয়ের জন্য এটি সেট করার বিষয়টি নিশ্চিত করুন।
   • অসীম নির্দেশ করে যে অ্যানিমেশনটি অনির্দিষ্টকালের জন্য পুনরাবৃত্তি করা উচিত। আপনি যদি রঙগুলি লুপ করতে পছন্দ করেন এবং তারপরে শেষ রঙে থামেন, আপনি এই অংশটি বাদ দিতে পারেন।
3. আপনার অ্যানিমেশনে রঙ যুক্ত করুন। এখন আপনি @keyframes বিধিটি পটভূমির রঙগুলি অবিচ্ছিন্নভাবে সেট করতে, পাশাপাশি প্রতিটি পৃষ্ঠায় কতক্ষণ দেখা যাবে তা সেট করতে যাচ্ছেন। আবার আপনাকে বিভিন্ন ব্রাউজারের জন্য একাধিক এনকোডিং যুক্ত করতে হবে।

   ! ডক্টইপিটি এইচটিএমএল> এইচটিএমএল> প্রধান> শৈলী> বডি we-ওয়েবেকিট-অ্যানিমেশন: রঙিনচঞ্চল 60 এর দশকের অসীম; অ্যানিমেশন: রঙ পরিবর্তন 60s অসীম; } @ -webkit- কীফ্রেমে রঙিন পরিবর্তন {0% {পটভূমি: # 33FFF3;} 25% {পটভূমি: # 78281F;} 50% {পটভূমি: # 117A65;} 75% {পটভূমি: # DC7633;} 100% {পটভূমি: # 9B59B6; key} @keyframes রঙ পরিবর্তন change 0% {পটভূমি: # 33FFF3;} 25% {পটভূমি: # 78281F;} 50% {পটভূমি: # 117A65;} 75% {পটভূমি: # DC7633;} 100% {পটভূমি: # 9 বি 59 বি 6;}} / শৈলী </ b> <<<<<<<<<<<<<<<

   • লক্ষ্য করুন যে দুটি লাইন (@ -webkit-keyframes এবং @keyframes পটভূমির রঙ এবং শতাংশের জন্য একই মান রয়েছে। এটি অভিন্ন থাকতে হবে যাতে অভিজ্ঞতা সমস্ত ব্রাউজারের জন্য একই থাকে।
   • শতাংশ (0%, 25%, ইত্যাদি) অ্যানিমেশনের মোট সময়কাল উপস্থাপন করে (60 এর দশক)। পৃষ্ঠাটি লোড হয়ে গেলে, পটভূমিতে রঙ সেট হয়ে যাবে 0% এবং (# 33FFF3)। যখন 25% বা 60 সেকেন্ড অ্যানিমেশনটি বাজানো হয়, তখন পটভূমিতে স্থানান্তরিত হয় # 78281F, ইত্যাদি।
   • আপনি পছন্দসই সময়কাল এবং রঙগুলি সামঞ্জস্য করতে পারেন।