যদিও আপনি আজ আমাদের সাইটগুলিকে শক্তিশালী করে এমন অনেকগুলি প্রযুক্তি খুঁজে পেতে পারেন, সমগ্র ইন্টারনেটে দুটি সবচেয়ে গুরুত্বপূর্ণ ফাইল হল HTML এবং CSS৷ হ্যাঁ, আপনার যদি জটিল কিছুর প্রয়োজন হয়, তবে তাদের সাথে যেতে আপনার আরও প্রযুক্তির প্রয়োজন হবে। কিন্তু আপনি যদি চান একটি সাধারণ ব্যক্তিগত ওয়েবপেজ তৈরি করতে, HTML এবং CSS আপনার প্রয়োজন।
বেসিকগুলির ভূমিকা
এটি HTML এবং CSS-এর একটি শিক্ষানবিস গাইড যা আপনাকে দেখাবে কিভাবে যত দ্রুত সম্ভব একটি সাধারণ সাইট তৈরি করা যায়। ফলাফল অগত্যা "মান-সম্মত" হবে না। এবং আপনি যদি এটিকে আরও টুইক এবং প্রসারিত করতে চান তবে আপনাকে নিজে থেকে কিছু পড়া করতে হবে। কিন্তু এটি একটি সাইট হবে এবং বেশিরভাগ ব্রাউজারে "যেমন করা উচিত" কাজ করবে৷
৷যেহেতু স্থান একটি প্রিমিয়ামে রয়েছে, তাই আমরা ওয়েব ডেভেলপমেন্ট এবং ডিজাইনের প্রতিটি দিকের গভীরে ডুব দেব না। পরিবর্তে, প্রক্রিয়ায় সবকিছু কী করে তা ব্যাখ্যা করে, আমরা আপনাকে শূন্য থেকে সম্পূর্ণরূপে কার্যকরী ওয়েবপৃষ্ঠায় যাওয়ার পদক্ষেপগুলি নিয়ে যাব৷
দুটি প্রয়োজনীয় ফাইল
একটি আধুনিক সাইট অনেকগুলি ফাইল নিয়ে গঠিত, তবে দুটি সবচেয়ে প্রয়োজনীয়:একটি HTML এবং একটি CSS ফাইল৷ HTML ফাইল একটি পৃষ্ঠার উপাদান এবং গঠন সংজ্ঞায়িত করে। CSS ফাইল সেই উপাদানগুলির উপস্থিতি নির্ধারণ করে।
উভয়ই মূলত সাধারণ পাঠ্য ফাইল, বিশেষভাবে কাঠামোবদ্ধ পাঠ্য রয়েছে। এগুলি তৈরি বা টুইক করার জন্য আপনার কোনও বিশেষ ধরণের প্রোগ্রামের প্রয়োজন নেই:যে কোনও "সরল" পাঠ্য সম্পাদক এটি করবে। "সাধারণ" দ্বারা আমরা আপনার সাধারণ নোটপ্যাড-স্টাইলের অ্যাপ্লিকেশনকে বোঝাতে চাই, LibreOffice-এর সম্পাদক বা Microsoft Words এর মতো কিছু নয় যা পাঠ্যকে যেকোনো উপায়ে "সমৃদ্ধ" করতে পারে।
প্রথম ধাপ হল আপনার ডেস্কটপে একটি নতুন ফোল্ডার তৈরি করা যার ভিতরে দুটি খালি টেক্সট ফাইল রয়েছে। তাদের একটির নাম “index.html” এবং দ্বিতীয়টি “style.css”।
আপনার কর্মক্ষেত্র সেট আপ করুন
আপনার প্রিয় ব্রাউজারটি চালান এবং এতে HTML ফাইলটি লোড করুন, হয় "ফাইল -> খুলুন" নির্বাচন করে অথবা ফাইলটিকে এর উইন্ডোতে টেনে এনে ফেলে দিন৷
আপনার প্রিয় নোটপ্যাড-টাইপ টেক্সট এডিটরে HTML এবং CSS ফাইল উভয়ই খুলুন।
একই সময়ে তিনটি উইন্ডো দেখতে সক্ষম হওয়া কাজ করার সবচেয়ে সুবিধাজনক উপায়। আপনার কাছে সেগুলি ছড়িয়ে দেওয়ার জন্য দুটি স্ক্রিন না থাকলে, আমরা নীচের ছবির মতো উইন্ডোগুলি সাজানোর পরামর্শ দিই৷
আপনার ব্রাউজার উইন্ডোটিকে স্ক্রিনের একপাশে "স্টিক" করুন যাতে এটির অর্ধেক (উল্লম্বভাবে) 4 দখল করে এবং দুটি নোটপ্যাড উইন্ডো অন্য পাশে, একটির নীচে রাখুন৷
বিল্ডিং ব্লক
HTML ফাইল দিয়ে নোটপ্যাডে কিছু লিখুন এবং পরিবর্তনগুলি সংরক্ষণ করুন। এরপর, F5 টিপে আপনার ব্রাউজার উইন্ডো রিফ্রেশ করুন। আপনি অবিলম্বে আপনার ব্রাউজার উইন্ডোতে আপনার লেখা টেক্সট প্রদর্শিত হবে দেখতে পাবেন.
শুধু আপনার প্রথম সাইট সেট আপ করার জন্য অভিনন্দন! এবং আমরা মজা করছি না, যেহেতু ইন্টারনেটে প্রথম সাইটগুলি আপনি এইমাত্র তৈরি করেছেন তার তুলনায় তাদের চেহারাতে খুব বেশি পার্থক্য ছিল না। গুরুত্বপূর্ণ বিষয়, তখনকার বিষয়বস্তু নিজেই।
HTML আপনাকে "কোডের" একটি নির্দিষ্ট সেট ব্যবহার করে "প্রতিটি বিষয়বস্তুর অংশ কী তা চিহ্নিত করতে" দেয়৷ সবচেয়ে গুরুত্বপূর্ণ কিছু হল:
html:একটি html নথি নির্দেশ করে। প্রতিটি html ফাইলের শুরুতে থাকা উচিত।body:আপনি ব্রাউজারে যে সমস্ত বিষয়বস্তু দেখেন তা এইbody-এ আবদ্ধ ট্যাগ এটি একটি html নথির ভিজ্যুয়াল দিককে উপস্থাপন করে।p:পাঠ্য অনুচ্ছেদimg:ছবিa href:ওয়েব ঠিকানার লিঙ্কdiv:যে কোনো বিষয়বস্তুর চারপাশে একটি "বক্স" সেট করে যা আপনি CSS এর সাথে "স্টাইল" করতে পারেন।
বিষয়বস্তুর একটি অংশকে "সংজ্ঞায়িত" করার জন্য, এটি সাধারণত শুরুতে এবং শেষে সামান্য পার্থক্য সহ একই কোড দ্বারা আবদ্ধ হতে হবে। উদাহরণস্বরূপ, পাঠ্যের একটি অনুচ্ছেদ এইভাবে সংজ্ঞায়িত করা হয়েছে:
<p>Standard Text Paragraph</p>
“
” ইঙ্গিত করে যে “অনুসরণ করা একটি অনুচ্ছেদ” এবং “
” যে “অনুচ্ছেদটি এখানে শেষ হয়।” উভয় ক্ষেত্রেই "p" কে "div" দিয়ে প্রতিস্থাপন করে, আপনি "এটিকে একটি অনুচ্ছেদ হিসাবে চিহ্নিত করার" পরিবর্তে বিষয়বস্তুকে ঘেরা একটি বাক্স সংজ্ঞায়িত করেন৷উল্লেখ্য যে ব্যতিক্রম আছে:ইমেজ (img) এবং ডিভাইডিং লাইন (hr) এর মতো উপাদানগুলির জন্য "ক্লোজিং কোড" প্রয়োজন হয় না৷
পরিবর্তন করুন এবং রিফ্রেশ করুন
আপনার এইচটিএমএল ফাইলের সবকিছুকে নিম্নলিখিত দিয়ে প্রতিস্থাপন করুন:
<html> <body> <div id="header">HEADER</div> <div id="content">CONTENT</div> <div id="footer">FOOTER</div> </body> </html>
আপনার ব্রাউজার (F5) রিফ্রেশ করুন, এবং আপনি দেখতে পাবেন HEADER, CONTENT, এবং FOOTER শব্দগুলি একটির নীচে একটি দেখা যাচ্ছে৷ আমরা এইমাত্র তিনটি অদৃশ্য, স্বায়ত্তশাসিত "div" বাক্স তৈরি করেছি৷ তাদের প্রত্যেকটিতে একটি করে শব্দ রয়েছে।
CSS এর মাধ্যমে তাদের চেহারা সংজ্ঞায়িত করতে সক্ষম হওয়ার জন্য, আমরা প্রত্যেকের জন্য একটি কীওয়ার্ড বরাদ্দ করেছি, একটি "পরিচয়" (কোডের "আইডি=নাম"), তাদের বিষয়বস্তুর সাথে সম্পর্কিত:হেডার, বিষয়বস্তু এবং ফুটার। একটি ওয়েবপৃষ্ঠার সমস্ত উপাদানের একটি উপনাম থাকতে পারে, হয় একটি "শ্রেণী" বা একটি "আইডি" হিসাবে সেট আপ। ক্লাসগুলি একই ওয়েবপেজে একাধিকবার প্রদর্শিত আইটেমগুলির উপনাম সংজ্ঞায়িত করে, যেমন অনুচ্ছেদ, লিঙ্ক, ইত্যাদি। আইডিগুলি এমন উপাদানগুলির জন্য উপনাম সংজ্ঞায়িত করে যা প্রতিটি পৃষ্ঠায় শুধুমাত্র একবার প্রদর্শিত হয়, যেমন একটি সাইটের নাম বা লোগো৷
বাস্তব বিষয়বস্তু
ডিভ কোডগুলির মধ্যে "হেডার" শব্দটি মুছুন - তাদের গঠন পরিবর্তন না করে - এবং পরিবর্তে, আপনার সাইটের জন্য আপনি যে নামটি চান তা লিখুন৷
আপনার “কন্টেন্ট”-এর জন্যও একই কাজ করুন, তবে শুধু টেক্সট না দিয়ে, প্রতিটি অনুচ্ছেদের শুরু এবং শেষ যেমন আমরা আগে দেখেছি তা নিশ্চিত করুন। পাঠ্যের দুই বা তিনটি অনুচ্ছেদ দিয়ে "কন্টেন্ট" প্রতিস্থাপন করুন।
এখন লিঙ্ক সম্পর্কে কথা বলার সময়। আপনার পাঠ্যের যেকোনো শব্দগুচ্ছকে একটি লিঙ্কে রূপান্তর করতে, এটিকে এইভাবে গঠন করুন:
<a href="ADDRESS">TEXT</a>৷
আপনি এটিকে কপি-পেস্ট করতে পারেন এবং "ADDRESS" এর পরিবর্তে "আপনি আপনার লিঙ্কটি কী নির্দেশ করতে চান" এবং "পাঠ্য" বাক্যাংশটি আপনার সাইটে প্রদর্শিত হবে। আমরা আমাদের পাদচরণে একটি বাক্যাংশ আমাদের ওয়েবসাইটের সাথে নিম্নলিখিতগুলির সাথে লিঙ্ক করেছি:
<a href="https://www.maketecheasier.com">Make Tech Easier</a>
সবশেষে, আপনার নামের সাথে "FOOTER" শব্দটি প্রতিস্থাপন করুন, একটি ছোট বাক্য যা নির্দেশ করে যে সাইটটির ডিজাইন বা মালিক কে বা আপনি চান অন্য কিছু৷
পরিবর্তনগুলি সংরক্ষণ করুন এবং তাদের সেখানে দেখতে আপনার ব্রাউজার রিফ্রেশ করুন৷
৷
আপনার স্টাইল (.CSS) আছে
যেকোনো ওয়েব পেজের প্রথম উপাদান হল হেড। এটিতে, আমরা সাধারণত এমন কোড খুঁজে পাই যা সাইটের পরিচয়, এর নাম, নির্মাতা এবং ভাষা, সেইসাথে যেকোন প্রযুক্তি - HTML ছাড়াও - এতে ব্যবহৃত হয়। এখানেই যেকোন বাহ্যিক জাভাস্ক্রিপ্ট এবং CSS ফাইলের বেশিরভাগ লিঙ্ক লাইভ থাকে। html-এর ঠিক পরে, আপনার HTML ফাইলের একেবারে উপরে নিম্নলিখিতটি সন্নিবেশ করে আপনার সাইটে একটি যোগ করুন ট্যাগ:
<head> </head>
CSS দিয়ে একটি ওয়েবপৃষ্ঠার উপাদানগুলিকে স্টাইল করতে সক্ষম হতে, আপনাকে HTML এর ভিতর থেকে CSS ফাইলটি লোড করতে হবে। এবং এর অর্থ এটি আপনার "মাথায়" অন্তর্ভুক্ত করা। নিম্নলিখিতটি নির্দেশ করে যে HTML পৃষ্ঠাটি "টেক্সট/সিএসএস" টাইপের একটি "স্টাইলশীট" ফাইলের সাথে "লিঙ্ক" করবে। নাম “style.css”:
<link rel="stylesheet" type="text/css" href="style.css">
আমাদের কোড কপি করুন এবং পেস্ট করুন, ঠিক যেমন আপনি দেখেন, মাথার "ভিতরে" - অর্থাৎ "" এর নীচে এবং "" এর উপরে। পরিবর্তনগুলি সংরক্ষণ করুন এবং CSS ফাইলের দিকে আপনার মনোযোগ দিন৷ সেখানে, নিম্নলিখিত লিখুন:
body {}
#header, #content, #footer {}
#header, #footer {}
#header {}
#content {}
#footer {}
img {}
বাস্তব সাইট
CSS, বা ক্যাসকেডিং স্টাইল শীটগুলি হল কেবল প্রদর্শনের নিয়মগুলির সেট যা একটি ওয়েব পৃষ্ঠার নির্দিষ্ট উপাদানগুলির সাথে সঙ্গতিপূর্ণ৷ CSS এর মাধ্যমে আমরা "কোথায়" এবং "কিভাবে" উভয়ই স্টাইল করতে পারি সবকিছু একটি ওয়েবপেজে প্রদর্শিত হবে।
আগের ধাপে আমরা আমাদের পৃষ্ঠার সমস্ত উপাদানের জন্য ফাঁকা নিয়মের একটি সেট প্রবর্তন করেছি। এখন, আসুন দেখি কিভাবে আমরা তাদের সাথে প্যারামিটার যোগ করতে পারি যা তাদের চেহারাকে সংজ্ঞায়িত করবে।
শরীরের সাথে শুরু করুন, যা আপনার ওয়েবসাইটের সবকিছু অন্তর্ভুক্ত করে। এটিকে নিম্নরূপ পরিবর্তন করুন:
body {
width: 100%;
position: relative;
margin: 0;
padding: 0;
} উপরের নিয়মগুলি বলে যে আমরা আমাদের সাইটটি ব্রাউজার উইন্ডোর পুরো প্রস্থ (প্রস্থ:100%) দখল করতে চাই, যে আমরা চাই না যে এটি ব্রাউজার উইন্ডোর প্রান্তগুলি থেকে কোনো দূরত্ব থাকুক (মার্জিন:0), এবং না এর চারপাশে কোন ফাঁকা জায়গা চাই (প্যাডিং:0)।
একটি উপাদানের জন্য সমস্ত নিয়ম বন্ধনীগুলির মধ্যে আবদ্ধ হওয়া উচিত এবং প্রতিটি নিয়ম একটি ";" দিয়ে শেষ হওয়া উচিত নিম্নলিখিত মত:
#Element_ID {
RULE 1;
RULE 2;
RULE 3;
} আপনার “#header, #content, #footer” CSS নিম্নলিখিতটিতে আপডেট করে চালিয়ে যান:
#header, #content, #footer {
float: left;
position: relative;
}
এর সাথে, আপনি বলছেন যে তিনটি উপাদানের অবস্থানের কিছু সাধারণ নিয়ম অনুসরণ করা উচিত:প্রতিটিটি আগেরটির সাথে "আপেক্ষিক" হওয়া উচিত এবং এটিকে "অনুসরণ" করা উচিত (float: left ) তাদের আকার, আকৃতি, চেহারা বা অন্য কোন বিষয় যাই হোক না কেন, তাদের প্রত্যেকটি পরবর্তী উপাদানকে "ধাক্কা দেবে" এবং সেগুলি কখনই ওভারল্যাপ হবে না।
আপনার ওয়েবপৃষ্ঠাটিকে একটি প্রকৃত সাইটের মতো দেখতে নিম্নলিখিতটি সহ #হেডার, #ফুটার আপডেট করুন:
#header, #footer {
width: 100%;
height: 100px;
background: rgba(0,0,0,0.9);
color: rgba(255,255,255,0.9);
text-align: center;
font-size: 12px;
} উপরেরটি সংজ্ঞায়িত করে যে আমরা আমাদের ওয়েবসাইটের শিরোনাম এবং ফুটার উভয়ই 100% চওড়া, 100 পিক্সেল উচ্চ এবং তাদের মধ্যে প্রদর্শিত পাঠ্যটি আকারে 3em এবং কেন্দ্রিক হতে চাই৷
ব্যাকগ্রাউন্ড এবং রঙের নিয়মগুলি যথাক্রমে, পুরো হেডার এবং ফুটার "ডিভ বক্স"-এ কী রঙ থাকবে এবং সেগুলিতে থাকা কোনও পাঠ্যের রঙ নির্দিষ্ট করে। "RGBA" লাল - সবুজ - নীল রঙের মিশ্রণের মানদণ্ডের উপর ভিত্তি করে রঙ সেট করে। প্রতিটি রঙের মান 0 থেকে 255 হতে পারে, বিভিন্ন লাল, সবুজ এবং নীল মানের সমন্বয়ে যেকোন রঙের প্রদর্শনের অনুমতি দেওয়া হয়। শেষ সংখ্যাটি স্বচ্ছতার সাথে মিলে যায়। সুতরাং RGBA(255,0,0,0.5) আমাদের একটি স্বচ্ছ লাল দেবে, যেখানে RGBA(50,50,255,1) একটি উজ্জ্বল এবং "কঠিন" নীল দেবে।
সাইটের মৌলিক বিষয়বস্তুর উপর ফোকাস করে শেষ করুন। এটির চেহারাটি এইভাবে সংজ্ঞায়িত করুন:
#content {
width: 80%;
background: rgba(255,255,255,0.9);
color: rgba(0,0,0,0.9);
margin: 0 10%;
} সমস্ত পরিবর্তন আবার সংরক্ষণ করুন, এবং সেগুলি দেখতে আপনার ব্রাউজার উইন্ডো রিফ্রেশ করুন৷
ইমেজ স্টাইলিং
আপনার সাইটে ছবি যোগ করতে, আপনাকে HTML ফাইলে ফিরে যেতে হবে। সেখানে, বিষয়বস্তুর "ভিতরে" কিন্তু প্রথম অনুচ্ছেদের আগে, নিম্নলিখিতটি লিখুন:
<img src="/PATH/FILE.JPG" alt="TEXT">
যেখানে "PATH" এবং "FILE.JPG" হল যেকোন ছবির "অবস্থান" এবং ফাইলের নাম, অনলাইন বা স্থানীয়ভাবে উপলব্ধ, এবং "টেক্সট" এটি অ্যাক্সেসযোগ্যতার উদ্দেশ্যে কী উপস্থাপন করে তার একটি বিবরণ৷
আপনি যদি সংরক্ষণ করার চেষ্টা করেন এবং এই সংযোজনের পরে পরিবর্তনগুলি পরীক্ষা করেন তবে আপনি দেখতে পাবেন যে আপনার সাইটটি বিকৃত হয়েছে৷ আপনার ওয়েবসাইটে ছবিগুলি কীভাবে প্রদর্শিত হবে সে সম্পর্কে আপনি CSS নিয়ম তৈরি করার পরে সমস্যাটি ঠিক হয়ে যাবে৷
CSS ফাইলে ফিরে যান এবং ঘোষণা করুন যে আপনি কীভাবে সমস্ত ছবি (img) বাম-সারিবদ্ধ করতে চান, অন্যান্য উপাদানের প্রবাহ অনুসরণ করে (ফ্লোট:বাম এবং অবস্থান:আপেক্ষিক)।
পৃষ্ঠার সীমানা অতিক্রম না করার জন্য, আপনি কীভাবে তাদের প্রস্থ পৃষ্ঠার সর্বাধিক হতে চান তা নির্দিষ্ট করুন (প্রস্থ:100%)। ছবিগুলি আপনার পাঠ্যকে স্পর্শ না করতে, উপরে এবং নীচে কিছু উল্লম্ব মার্জিন যুক্ত করুন৷ ফলাফল এই মত হওয়া উচিত:
img {
float: left;
position: relative;
width: 100%;
margin: 5px 0;
padding: 0;
}
অন্য ইমেজ যোগ করে সম্পূর্ণ করুন, এইবার বাম বা ডানে সারিবদ্ধ। আগের মতো, আপনাকে প্রথমে HTML কোডে ফিরে যেতে হবে এবং সেখানে আপনার ছবির একটি লিঙ্ক পেস্ট করতে হবে, যেমনটি আমরা আগে দেখেছি। পার্থক্য হল আপনাকে একটি "শ্রেণী" যোগ করতে হবে, উপাদানটিতে একটি শনাক্তকারী। তারপরে আপনি এটিতে CSS প্রদর্শনের নিয়ম এবং অন্য যেকোন উপাদানের মাধ্যমে উল্লেখ করবেন যেখানে একই ক্লাস "সংযুক্ত"।
আমরা আমাদের ক্লাসের নাম দিয়েছি "সারিবদ্ধ" কারণ আমরা চাই যে কোনো বস্তু, যেখানে এটি সংযুক্ত আছে, পৃষ্ঠার ডানদিকে প্রদর্শিত হোক।
নিজেই কোড তৈরি করার চেষ্টা করুন। একটি .alignright {} যোগ করুন আপনার "style.css"-এ ক্লাস করুন এবং তারপরে নিয়ম তৈরি করুন যাতে এটি স্টাইল করা উচিত। CSS কোডটি নির্দিষ্ট করা উচিত যে আমরা উপাদানগুলিকে পৃষ্ঠার ডানদিকে ভাসতে চাই এবং 46% প্রশস্ত (প্রস্থ:46%) হতে চাই। আমরা চাই না যে ছবিগুলি পাঠ্যকে স্পর্শ করুক, তাই আমাদের তাদের চারপাশে 2% ফাঁক যোগ করা উচিত, 1% মার্জিন (অন্য যে কোনও উপাদান থেকে দূরত্ব) এবং 1% প্যাডিং (কিছু "উপাদানের চারপাশে অতিরিক্ত ফাঁকা স্থান) হিসাবে বিভক্ত করা উচিত। ”)।
সুতরাং, আমাদের নিয়মগুলিকে সংজ্ঞায়িত করা উচিত যে একটি .alignright সহ যে কোনও চিত্র৷ সংযুক্ত ক্লাস পৃষ্ঠার প্রস্থের 46%, এবং প্রতিটি পাশে 1% মার্জিন, এবং প্রতিটি পাশে 1% প্যাডিং গ্রহণ করবে। এটি সব 50% পর্যন্ত যোগ করে - ঠিক পৃষ্ঠার প্রস্থের অর্ধেক। ফলাফলটি এইরকম দেখতে হবে:
img.alignright {
float: right;
width: 46%;
margin: 1%;
padding: 1%;
} পরবর্তী পৃষ্ঠা
আপনার প্রথম ওয়েবপেজ প্রস্তুত এবং সম্পূর্ণরূপে চালু আছে। এইচটিএমএল এবং সিএসএস উভয় সম্পর্কে আরও জানার মাধ্যমে, আপনি এর বিষয়বস্তুকে আরও সমৃদ্ধ করতে, নতুন উপাদান যোগ করতে এবং এর চেহারা উন্নত করতে পারেন। পরবর্তী পদক্ষেপ হিসাবে, HTML ফাইলের অনুলিপি এবং নাম পরিবর্তন করার চেষ্টা করুন, এর বিষয়বস্তু পরিবর্তন করুন এবং প্রতিটি নতুন পৃষ্ঠা অন্যদের সাথে লিঙ্ক করুন৷
এটা খুব কঠিন শোনাচ্ছে না, তাই না? ওয়েব ডেভেলপমেন্টে স্বাগত:লিঙ্কের মাধ্যমে বিভিন্ন পৃষ্ঠাগুলিকে অনুলিপি, পরিবর্তন এবং লিঙ্ক করার মাধ্যমে, আপনি আপনার প্রথম সম্পূর্ণ, “সঠিক,” বহু-পৃষ্ঠা সাইট তৈরি করবেন!
