- প্রকাশিত
HTML এবং CSS সহ একটি ওয়েবসাইট তৈরি করা: উদাহরণ এবং সর্বোত্তম অনুশীলন ( পর্ব ছয় )
- লেখক
- Name
- Mohammed Nasim
- টুইটার
- @nasimStg
HTML এবং CSS হল ওয়েবের বিল্ডিং ব্লক। এগুলো দিয়ে একসাথে, আপনি দৃশ্যত আকর্ষণীয় এবং কার্যকরী ওয়েবসাইট তৈরি করতে পারবেন যা ব্যবহারকারীদের জড়িত ( এঙ্গেজ ) করে এবং ফলাফল দেয়। এই ব্লগ পোস্টে, আমরা HTML এবং CSS ব্যবহার করে একটি ওয়েবসাইট তৈরির প্রক্রিয়া এক্সপ্লোর করব এবং আপনাকে উদাহরণ ও সেরা অনুশীলনগুলি প্রদান করব৷
সূচিপত্র
এইচটিএমএল, বা হাইপারটেক্সট মার্কআপ ল্যাঙ্গুয়েজ, ওয়েব পেজ তৈরি করতে ব্যবহৃত একটি স্ট্যান্ডার্ড মার্কআপ ভাষা। HTML শিরোনাম, অনুচ্ছেদ, ছবি এবং লিঙ্ক সহ একটি ওয়েবসাইটের গঠন এবং বিষয়বস্তু প্রদান করে। একটি ওয়েবসাইট তৈরি করতে, আপনাকে বিভিন্ন HTML ট্যাগ এবং সেগুলি কীভাবে ব্যবহার করা হয় তা বুঝতে হবে। আমাদের গত পর্বগুলি না দেখে থাকলে আমি আপনাকে সেগুলো দেখার পরামর্শ দিব । পর্ব ১ ওয়েব ডিজাইন ও ডেভেলপমেন্ট সম্পর্কে, ২, ৩ এইচটিএমএল ট্যাগ সম্পর্কে, পর্ব চার সিএসএস সম্পর্কে এবং পর্ব পাঁচ এডিটর সম্পর্কে ।
- ওয়েব ডিজাইন অ্যান্ড ডেভেলপমেন্ট সম্পূর্ণ কোর্স বাংলায় প্রথম পর্ব
- ওয়েব ডিজাইন অ্যান্ড ডেভেলপমেন্ট সম্পূর্ণ কোর্স বাংলায় দ্বিতীয় পর্ব
- ওয়েব ডিজাইন অ্যান্ড ডেভেলপমেন্ট সম্পূর্ণ কোর্স বাংলায় তৃতীয় পর্ব
- CSS ফান্ডামেন্টালস: একটি গাইড ফর ওয়েব ডেভেলপমেন্ট পর্ব চার
- সেরা Online HTML Editor দিয়ে সহজেই HTML কোড তৈরি এবং এডিট করুন
CSS, বা ক্যাসকেডিং স্টাইল শীট হল একটি স্টাইল শীট ভাষা যা HTML এ লেখা একটি ডকুমেন্টের চেহারা এবং বিন্যাস বর্ণনা করতে ব্যবহৃত হয়। রঙ, ফন্ট এবং স্পেসিং সহ একটি ওয়েবসাইটের ডিজাইন এবং লেআউটের জন্য CSS ব্যাবহার করা হয়। CSS ব্যবহার করে, আপনি দৃশ্যত আকর্ষণীয় ওয়েবসাইট তৈরি করতে পারেন যা নেভিগেট এবং ব্যবহার করা সহজ।
HTML এবং CSS ব্যবহার করে একটি ওয়েবসাইট তৈরি করতে, আপনাকে এই পদক্ষেপগুলি অনুসরণ করতে হবে:
- আপনার ওয়েবসাইটের কাঠামো এবং বিষয়বস্তু পরিকল্পনা করুন।
- আপনার ওয়েবসাইটের গঠন এবং বিষয়বস্তুর জন্য HTML কোড লিখুন।
- আপনার ওয়েবসাইটের ডিজাইন এবং লেআউটের জন্য CSS কোড লিখুন।
- আপনার ওয়েবসাইট পরীক্ষা করুন এবং পরিমার্জন করুন।
এখানে এইচটিএমএল এবং সিএসএস ব্যবহার করে তৈরি ওয়েবসাইটগুলির কিছু উদাহরণ রয়েছে:
সূচিপত্র
Personal Portfolio Website: একটি ব্যক্তিগত পোর্টফোলিও ওয়েবসাইট আপনার দক্ষতা এবং অভিজ্ঞতা প্রদর্শনের জন্য একটি দুর্দান্ত জায়গা। আপনি আপনার পটভূমি, শিক্ষা এবং কাজের অভিজ্ঞতার পাশাপাশি আপনার কাজের নমুনা সম্পর্কে তথ্য অন্তর্ভুক্ত করতে পারেন।
E-commerce Website: একটি ই-কমার্স ওয়েবসাইট অনলাইনে পণ্য এবং পরিষেবা বিক্রির একটি প্ল্যাটফর্ম। একটি ই-কমার্স ওয়েবসাইট তৈরি করতে, আপনাকে আপনার পণ্য এবং পরিষেবাগুলির পাশাপাশি একটি শপিং কার্ট এবং চেকআউট প্রক্রিয়া সম্পর্কে তথ্য অন্তর্ভুক্ত করতে হবে।
Blog Website: একটি ব্লগ ওয়েবসাইট হল একটি প্ল্যাটফর্ম যা আপনার চিন্তাভাবনা এবং ধারণাগুলি অন্যদের সাথে ভাগ করে নেওয়ার জন্য। একটি ব্লগ ওয়েবসাইট তৈরি করতে, আপনাকে আপনার ব্লগের থিম সম্পর্কে তথ্য অন্তর্ভুক্ত করতে হবে, সেইসাথে পাঠকদের মন্তব্য করার জন্য একটি প্ল্যাটফর্ম।
এই উদাহরণগুলি ছাড়াও, আরও অনেক ধরণের ওয়েবসাইট রয়েছে যা আপনি HTML এবং CSS ব্যবহার করে তৈরি করতে পারেন। গুরুত্বপূর্ণ বিষয় হল আপনার ওয়েবসাইট এর গঠন, বিষয়বস্তু এবং ডিজাইনের উপর ফোকাস করে সাবধানে পরিকল্পনা করা।
আপনার ওয়েবসাইট তৈরি করার সময়, নিম্নলিখিত সেরা অনুশীলনগুলি মনে রাখা গুরুত্বপূর্ণ:
- আপনার কোড সংগঠিত এবং পঠনযোগ্য রাখুন.
- বর্ণনামূলক এবং অর্থপূর্ণ HTML ট্যাগ এবং CSS ক্লাস ব্যবহার করুন।
- একাধিক ডিভাইস এবং ব্রাউজার জুড়ে আপনার ওয়েবসাইট পরীক্ষা করুন.
- আপনার ওয়েবসাইট যে কোনও ডিভাইসে দুর্দান্ত দেখাচ্ছে তা নিশ্চিত করতে প্রতিক্রিয়াশীল ডিজাইন ব্যবহার করুন।
উপসংহারে, এইচটিএমএল এবং সিএসএস একটি ওয়েবসাইট তৈরির জন্য অপরিহার্য বিল্ডিং ব্লক। এই ব্লগ পোস্টে বর্ণিত ধাপগুলি এবং সর্বোত্তম অনুশীলনগুলি অনুসরণ করে, আপনি একটি ওয়েবসাইট তৈরি করতে সক্ষম হবেন যা ব্যবহারকারীদের জড়িত করে এবং ফলাফলগুলি চালায়৷ তাই আজ শুরু করুন এবং আপনার কল্পনা বন্য চালানো যাক!
Personal Portfolio Website Example Code html css:
<!DOCTYPE html>
<html>
<head>
<title>My Personal Portfolio</title>
<style>
/* CSS for styling the portfolio page */
body {
font-family: Arial, sans-serif;
color: #333333;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
.section {
margin-bottom: 40px;
}
.card {
width: 300px;
height: 400px;
background-color: #f2f2f2;
border-radius: 10px;
float: left;
margin-right: 20px;
margin-bottom: 20px;
box-shadow: 2px 2px 5px #cccccc;
}
.card h2 {
font-size: 24px;
margin: 20px;
}
.card p {
font-size: 16px;
margin: 20px;
}
</style>
</head>
<body>
<h1>My Personal Portfolio</h1>
<div class="section">
<h2>About Me</h2>
<p>I'm a web developer with 5 years of experience. I specialize in HTML, CSS, and JavaScript, and I love to create beautiful and functional websites.</p>
</div>
<div class="section">
<h2>My Work</h2>
<div class="card">
<h2>Sample Project 1</h2>
<p>A description of Sample Project 1</p>
</div>
<div class="card">
<h2>Sample Project 2</h2>
<p>A description of Sample Project 2</p>
</div>
</div>
</body>
</html>
E-commerce Website Website Example Code html css:
<!DOCTYPE html>
<html>
<head>
<title>My E-commerce Website</title>
<style>
/* CSS for styling the e-commerce page */
body {
font-family: Arial, sans-serif;
color: #333333;
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
.product-list {
display: flex;
flex-wrap: wrap;
}
.product-card {
width: 300px;
height: 400px;
background-color: #f2f2f2;
border-radius: 10px;
margin-right: 20px;
margin-bottom: 20px;
box-shadow: 2px 2px 5px #cccccc;
text-align: center;
padding: 20px;
}
.product-card h2 {
font-size: 24px;
margin-bottom: 20
}
.product-card img {
width: 200px;
height: 200px;
margin-bottom: 20px;
}
.product-card p {
font-size: 16px;
}
.product-card button {
background-color: #0066ff;
color: #ffffff;
font-size: 16px;
padding: 10px 20px;
border-radius: 10px;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>My E-commerce Website</h1>
<div class="product-list">
<div class="product-card">
<img src="https://picsum.photos/200/300" alt="Product 1">
<h2>Product 1</h2>
<p>$20</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="https://picsum.photos/200/300" alt="Product 2">
<h2>Product 2</h2>
<p>$30</p>
<button>Add to Cart</button>
</div>
<div class="product-card">
<img src="https://picsum.photos/200/300" alt="Product 3">
<h2>Product 3</h2>
<p>$40</p>
<button>Add to Cart</button>
</div>
</div>
</body>
</html>
Blog Website Website Example Code html css:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Personal Blog</title>
</head>
<body>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
.hero-section {
text-align: center;
padding: 100px 0;
}
.post-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 50px 0;
}
.post-section img {
width: 200px;
height: 200px;
border-radius: 50%;
margin-bottom: 20px;
}
.post-section a {
color: #333;
text-decoration: none;
margin-top: 20px;
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px;
}
</style>
<header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section class="hero-section">
<h1>Welcome to My Personal Blog</h1>
<p>Here, I share my thoughts, experiences and learnings on a variety of topics.</p>
</section>
<section class="post-section">
<h2>My Latest Blog Post</h2>
<img src="https://picsum.photos/200" alt="Post Thumbnail">
<h3>The Power of Positive Thinking</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In consectetur fringilla commodo. Nam rutrum id ligula a tincidunt.</p>
<a href="#">Read More</a>
</section>
</main>
<footer>
<p>Copyright © My Personal Blog</p>
</footer>
</body>
</html>