Home-theater-designers
একটি ওয়েবসাইট তৈরি করা নিজেকে প্রকাশ করার একটি দুর্দান্ত উপায়। যদিও অনেক ওয়েবসাইট তৈরির সরঞ্জাম রয়েছে, ওয়েবসাইটগুলি পর্দার আড়ালে কীভাবে কাজ করে সে সম্পর্কে আরও জানার একটি মজার উপায়। একটি ভাল শিক্ষানবিস প্রকল্প হল একটি ওয়েবসাইট তৈরি করা এবং CSS এর সাথে একটি ব্যাকগ্রাউন্ড ইমেজ যোগ করা। এই প্রকল্পটি আপনাকে এইচটিএমএল এবং সিএসএস উভয় দিয়েই চলবে।
CSS কি?
CSS মানে ক্যাসকেডিং স্টাইল শীট। এটি একটি প্রোগ্রামিং ভাষা যা আপনাকে মার্কআপ ভাষাগুলিকে স্টাইল করতে দেয়। এমনই একটি মার্কআপ ল্যাঙ্গুয়েজ হল এইচটিএমএল বা হাইপার-টেক্সট মার্কআপ ল্যাঙ্গুয়েজ। HTML তৈরি করা হয় ওয়েবসাইট তৈরিতে। যদিও আপনি এইচটিএমএল ব্যবহার করে ওয়েবসাইটের কিছু স্টাইল নিয়ন্ত্রণ করতে পারেন, সিএসএস অনেক বেশি নিয়ন্ত্রণ এবং নকশা বিকল্পগুলি সরবরাহ করে।
HTML দিয়ে একটি বেসিক ওয়েবসাইট তৈরি করা
যেহেতু CSS একটি স্টাইল ল্যাঙ্গুয়েজ, তাই এটি ব্যবহার করার জন্য, আমাদের প্রথমে স্টাইল করার জন্য কিছু দরকার। CSS দিয়ে খেলা শুরু করার জন্য আমাদের জন্য একটি খুব প্রাথমিক ওয়েবসাইটই যথেষ্ট হবে। আমাদের পেজ 'হ্যালো ওয়ার্ল্ড' প্রদর্শন করবে।
Hello World
যদি আপনি এইচটিএমএল এর সাথে পরিচিত না হন, তাহলে আসুন তাড়াতাড়ি যাই সব উপাদান কি করে। যেমন উল্লেখ করা হয়েছে, এইচটিএমএল একটি মার্কআপ ল্যাঙ্গুয়েজ, যার অর্থ হল এটি ট্যাগ ব্যবহার করে লেখাটি কী তা চিহ্নিত করে। যখনই দেখবেন কোন শব্দ ঘিরে আছে এটি একটি ট্যাগ। দুটি ধরণের ট্যাগ রয়েছে, একটি ট্যাগ যা ব্যবহার করে একটি বিভাগের শুরুকে চিহ্নিত করে এবং একটি যা ব্যবহার করে একটি বিভাগের শেষে চিহ্নিত করে। একটি বিভাগের অন্তর্গত পাঠ্যটিও এই পার্থক্যটিকে সহজে দেখার জন্য তৈরি করা হয়েছে।
আমাদের উদাহরণে, আমাদের চারটি ট্যাগ আছে। দ্য html ট্যাগ নির্দেশ করে যে কোন উপাদানগুলি ওয়েবসাইটের অংশ। দ্য মাথা ট্যাগটিতে হেডার তথ্য রয়েছে যা পৃষ্ঠায় প্রদর্শিত হয় না কিন্তু পৃষ্ঠাটি তৈরি করার জন্য প্রয়োজন হয়। প্রদর্শিত সমস্ত উপাদানগুলির মধ্যে রয়েছে শরীর ট্যাগ. আমরা শুধুমাত্র একটি প্রদর্শিত উপাদান আছে, পৃ ট্যাগ এটি ওয়েব ব্রাউজারকে বলে যে পাঠ্যটি একটি অনুচ্ছেদ।
সম্পর্কিত: 10 টি সহজ CSS কোড উদাহরণ আপনি 10 মিনিটে শিখতে পারেন
HTML- এ CSS যোগ করা
এখন আমাদের একটি সহজ পৃষ্ঠা আছে, আমরা CSS দিয়ে স্টাইল কাস্টমাইজ করতে পারি। আমাদের পৃষ্ঠাটি এখন বেশ সহজ, এবং আমরা অনেক কিছু করতে পারি না, তবে আসুন আমরা আমাদের অনুচ্ছেদটি আলাদা করে শুরু করি যাতে আমরা একটি সীমানা যুক্ত করে পটভূমি থেকে আলাদা করতে পারি।
Hello World
এখন, আমাদের অনুচ্ছেদ একটি কালো সীমানা দ্বারা বেষ্টিত হবে। আমাদের অনুচ্ছেদ ট্যাগে সিএসএস -এ একটি শৈলীর বিবরণ যোগ করা ওয়েবসাইটকে বলে যে অনুচ্ছেদটি কীভাবে স্টাইল করা যায়। আমরা আরো বর্ণনা যোগ করতে পারেন। আসুন আমাদের অনুচ্ছেদের চারপাশে সাদা স্থান বা প্যাডিং বৃদ্ধি করি এবং আমাদের পাঠ্যকে কেন্দ্র করি।
Hello World
আমাদের ওয়েবসাইট আরও ভাল দেখায়, কিন্তু আমাদের HTML অনুচ্ছেদ ট্যাগের সমস্ত বিবরণের সাথে অগোছালো দেখতে শুরু করেছে। আমরা এই তথ্যটি আমাদের হেডারে স্থানান্তর করতে পারি। আমাদের হেডার হল তথ্যের জন্য যা আমাদের ওয়েবসাইটটি সঠিকভাবে প্রদর্শন করতে হবে।
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}
Hello World
এখন আমাদের HTML পড়া সহজ। আপনি লক্ষ্য করবেন যে আমাদের চারপাশে কিছু জিনিস পরিবর্তন করতে হয়েছে। শৈলী ট্যাগ ওয়েব ব্রাউজার শৈলী তথ্য, কিন্তু কি শৈলী খুব। আমাদের উদাহরণে, আমরা স্টাইলটি কী তা বলার জন্য দুটি ভিন্ন উপায় ব্যবহার করেছি। দ্য পৃ শৈলী ট্যাগ ওয়েব ব্রাউজারকে বলছে যে সমস্ত অনুচ্ছেদ ট্যাগগুলিতে সেই শৈলী প্রয়োগ করুন। দ্য #আমাদের অনুচ্ছেদ বিভাগটি আইডি সহ কেবল শৈলী উপাদানগুলিকে বলে আমাদের অনুচ্ছেদ । লক্ষ্য করুন আইডি আমাদের শরীরের p ট্যাগে তথ্য যোগ করা হয়েছে।
আমি কিভাবে আমার আইফোনের ব্যাকআপ অবস্থান পরিবর্তন করব?
আপনার ওয়েবসাইটে একটি CSS ফাইল আমদানি করা
হেডারে শৈলীর তথ্য যোগ করা আমাদের কোডটি পড়তে অনেক সহজ করে তোলে। যাইহোক, যদি আমরা একইভাবে বিভিন্ন পৃষ্ঠাগুলিকে স্টাইল করতে চাই, আমাদের সেই পাঠ্যটি প্রতিটি পৃষ্ঠার শীর্ষে যুক্ত করতে হবে। এটি অনেক কাজ বলে মনে হতে পারে না, আপনি এটি অনুলিপি করতে পারেন এবং সর্বোপরি এটি অতীত করতে পারেন, তবে আপনি যদি পরে কোনও উপাদান পরিবর্তন করতে চান তবে এটি প্রচুর কাজ তৈরি করে।
পরিবর্তে, আমরা একটি পৃথক ফাইলে CSS তথ্য রাখতে যাচ্ছি এবং পৃষ্ঠাটি স্টাইল করতে ফাইলটি আমদানি করতে যাচ্ছি। একটি নতুন CSS ফাইলে স্টাইল ট্যাগের মধ্যে তথ্য কপি এবং পেস্ট করুন ourCSSfile.css ।
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}তারপর, ফাইলটি HTML ফাইলে আমদানি করুন।
Hello World
CSS এর সাথে একটি ব্যাকগ্রাউন্ড ইমেজ যোগ করা
এখন যেহেতু এইচটিএমএল এবং সিএসএস -এ আপনার একটি শক্ত ভিত্তি রয়েছে, তাই ব্যাকগ্রাউন্ড ইমেজ যোগ করা কেকের একটি অংশ হবে। প্রথমে, আপনি কোন উপাদানকে ব্যাকগ্রাউন্ড ইমেজ দিতে চান তা চিহ্নিত করুন। আমাদের উদাহরণে, আমরা পুরো পৃষ্ঠায় একটি পটভূমি যুক্ত করব। এর মানে হল যে আমরা এর স্টাইল পরিবর্তন করতে চাই শরীর । মনে রাখবেন, শরীরের ট্যাগগুলিতে সমস্ত দৃশ্যমান উপাদান রয়েছে।
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
border-style: solid;
padding: 30px;
}সিএসএস -এ বডি স্টাইল পরিবর্তন করতে প্রথমে ব্যবহার করুন শরীর কীওয়ার্ড তারপর কোঁকড়া বন্ধনী যোগ করুন যেমন আমরা আগে করেছি {}। শরীরের জন্য শৈলী তথ্য সব কোঁকড়া বন্ধনী মধ্যে হতে হবে। আমরা যে শৈলী বৈশিষ্ট্যটি পরিবর্তন করতে চাই তা হল পটভূমি-চিত্র । অনেক শৈলী বৈশিষ্ট্য আছে। তাদের সব মুখস্থ করার আশা করবেন না। আপনি মনে রাখতে চান এমন বৈশিষ্ট্য সহ একটি সিএসএস বৈশিষ্ট্য চিট-শীট বুকমার্ক করুন।
সম্পর্কিত: 8 দুর্দান্ত এইচটিএমএল প্রভাব যা যে কেউ তাদের ওয়েবসাইটে যুক্ত করতে পারে
আপনার নিজস্ব বিন্দু সংযুক্ত করুন
অ্যাট্রিবিউটের পরে, আপনি কিভাবে অ্যাট্রিবিউট পরিবর্তন করবেন তা নির্দেশ করতে একটি কোলন ব্যবহার করুন। একটি ছবি আমদানি করতে, ব্যবহার করুন url () । এটি ইঙ্গিত করে যে আপনি ছবিটি নির্দেশ করার জন্য একটি লিঙ্ক ব্যবহার করছেন। উদ্ধৃতি চিহ্নের মধ্যে বন্ধনীতে ফাইলের অবস্থান রাখুন। অবশেষে, একটি সেমিকোলন দিয়ে লাইন শেষ করুন। যদিও সিএসএস -এ হোয়াইট স্পেসের কোনো মানে নেই, তবে সিএসএস -কে পড়তে সহজ করতে ইন্ডেন্টেশন ব্যবহার করুন।
আমাদের উদাহরণ এই মত দেখাচ্ছে:
যদি আপনার চিত্রটি ছবির আকারের কারণে সঠিকভাবে প্রদর্শিত না হয়, তাহলে আপনি সরাসরি ছবিটি পরিবর্তন করতে পারেন। যাইহোক, CSS এ ব্যাকগ্রাউন্ড স্টাইলের বৈশিষ্ট্য রয়েছে যা আপনি ব্যাকগ্রাউন্ড পরিবর্তন করতে ব্যবহার করতে পারেন। পটভূমির চেয়ে ছোট ছবিগুলি স্বয়ংক্রিয়ভাবে পটভূমিতে পুনরাবৃত্তি হবে। এটি বন্ধ করতে, যোগ করুন পটভূমি পুনরাবৃত্তি:পুনরাবৃত্তি; আপনার উপাদান।
একটি ইমেজ পুরো পটভূমি কভার করার দুটি উপায় আছে। প্রথমে, আপনি ব্যাকগ্রাউন্ড-সাইজ দিয়ে স্ক্রিনের সাইজে সেট করতে পারেন পটভূমি আকার: 100% 100%; , কিন্তু এটি ইমেজকে প্রসারিত করবে এবং ইমেজটিকে খুব বেশি বিকৃত করতে পারে। আপনি যদি ছবির অনুপাত পরিবর্তন করতে না চান, তাহলে আপনি ব্যাকগ্রাউন্ড-সাইজও সেট করতে পারেন আবরণ । কভার ব্যাকগ্রাউন্ড ইমেজকে ব্যাকগ্রাউন্ড কভার করবে, কিন্তু ইমেজ বিকৃত করবে না।
পটভূমির রঙ পরিবর্তন করা
একটি শেষ জিনিস পরিবর্তন করা যাক। এখন যেহেতু আমাদের একটি পটভূমি আছে, আমাদের অনুচ্ছেদটি পড়া কঠিন। এর পটভূমি সাদা করা যাক। প্রক্রিয়া একই রকম। যে উপাদানটি আমরা সংশোধন করতে চাই তা হল #আমাদের অনুচ্ছেদ। # নির্দেশ করে যে 'আমাদের প্যারাগ্রাফ' একটি আইডি নাম। পরবর্তী, আমরা সেট করতে চাই পেছনের রঙ সাদা বৈশিষ্ট্য।
body{
background-image: url('sky.jpg');
}
p {
text-align: center
}
#ourParagraph {
background-color: white;
border-style: solid;
padding: 30px;
}অনেক ভাল.
CSS দিয়ে আপনার ওয়েবসাইট ডিজাইন করা অব্যাহত
এখন যেহেতু আপনি জানেন যে কিভাবে বিভিন্ন এইচটিএমএল উপাদানগুলির স্টাইল পরিবর্তন করতে হয়, আকাশ সীমা! শৈলী বৈশিষ্ট্য পরিবর্তন করার মৌলিক পদ্ধতি একই। আপনি যে উপাদানটি পরিবর্তন করতে চান তা চিহ্নিত করুন এবং বৈশিষ্ট্যটি কীভাবে পরিবর্তন করবেন তা বর্ণনা করুন। আরও জানার সেরা উপায় হল বিভিন্ন গুণাবলীর সাথে খেলা করা। পরের লেখার রঙ পরিবর্তন করতে নিজেকে চ্যালেঞ্জ করুন।
শেয়ার করুন শেয়ার করুন টুইট ইমেইল মানসম্মত এইচটিএমএল কোডিং উদাহরণের জন্য 8 টি সেরা সাইটআপনার নিজস্ব ওয়েবসাইট এবং অ্যাপ্লিকেশন কোড করতে HTML শিখতে চান? নিজেকে HTML এবং CSS শেখানোর জন্য এই ওয়েব পেজের উদাহরণ এবং সোর্স কোড ব্যবহার করুন।
পরবর্তী পড়ুন সম্পর্কিত বিষয়- প্রোগ্রামিং
- এইচটিএমএল
- ওয়েব ডিজাইন
- সিএসএস
জে সিটন একজন বিজ্ঞান লেখক যিনি জটিল বিষয়গুলো ভাঙতে পারদর্শী। তিনি সাসকাচোয়ান বিশ্ববিদ্যালয় থেকে পিএইচডি করেছেন; তার গবেষণা অনলাইনে শিক্ষার্থীদের ব্যস্ততা বৃদ্ধির জন্য গেম-ভিত্তিক শিক্ষাকে কাজে লাগানোর দিকে মনোনিবেশ করেছে। যখন সে কাজ করছে না, তখন তুমি তাকে পড়বে, ভিডিও গেম খেলবে অথবা বাগান করবে।
জেনিফার সিটন থেকে আরোআমাদের নিউজলেটার সদস্যতা
প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!
সাবস্ক্রাইব করতে এখানে ক্লিক করুন