শীর্ষ সংবাদ পোর্টাল নির্মাণের সম্পূর্ণ গাইড: স্টেপ-বাই-স্টেপ কোডিং
শীর্ষ সংবাদ পোর্টাল নির্মাণের সম্পূর্ণ গাইড: স্টেপ-বাই-স্টেপ কোডিং
হোমপেজের মূল বৈশিষ্ট্যসমূহ
একটি আধুনিক বাংলা নিউজ পোর্টাল তৈরি করার জন্য এই মূল বৈশিষ্ট্যগুলো অন্তর্ভুক্ত করা গুরুত্বপূর্ণ:
- হেডার: লোগো, বাংলা তারিখ প্রদর্শন, এবং নেভিগেশন মেনু।
- ব্রেকিং নিউজ টিকার: স্ক্রলিং মার্কি বা টিকার মিডিয়ে ব্রেকিং নিউজ।
- ফিচারড/বড় সংবাদ: প্রধান সংবাদ গ্রহণের জন্য বড় ছবি এবং শিরোনাম সহ।
- নিউজ গ্রিড: রেস্পন্সিভ গ্রিড লেআউট সহ বিভিন্ন সংবাদ নিবন্ধ।
- ক্যাটাগরি সেকশন্স: বিভিন্ন নিউজ বিভাগ স্পষ্ট সনাক্তকরণের জন্য।
- সাইডবার: জনপ্রিয় সংবাদ, বিজ্ঞাপন, এবং সোশ্যাল মিডিয়া লিঙ্ক।
- ফুটার: কপিরাইট, যোগাযোগ তথ্য, এবং গুরুত্বপূর্ণ লিঙ্কগুলি।
ইউজার ইন্টারফেস ডিজাইন
Bootstrap 5 ফ্রেমওয়ার্ক ব্যবহার করে আমাদের ডিজাইনে একটি পরিষ্কার এবং পেশাদারী রূপ তৈরি হবে। এখানে HTML, CSS এবং JavaScript কোডের উদাহরণ দেওয়া হল:
HTML কোড:
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400&display=swap" rel="stylesheet">
<title>বাংলা নিউজ পোর্টাল</title>
</head>
<body style="font-family: 'Hind Siliguri', sans-serif;">
<div class="container-fluid">
<header class="d-flex justify-content-between align-items-center p-3 bg-dark text-light">
<img src="logo.png" alt="Logo" class="img-fluid">
<span id="date"></span>
<nav>
<ul class="nav nav-pills">
<li class="nav-item"><a class="nav-link" href="#">জাতীয়</a></li>
<li class="nav-item"><a class="nav-link" href="#">আন্তর্জাতিক</a></li>
<li class="nav-item"><a class="nav-link" href="#">ক্রীড়া</a></li>
<li class="nav-item"><a class="nav-link" href="#">বিনোদন</a></li>
</ul>
</nav>
</header>
<div class="marquee bg-danger text-light p-2">
<span>এটি একটি ব্রেকিং নিউজ টিকার।</span>
</div>
<section class="my-4">
<div class="featured-news mb-4">
<img src="featured.jpg" class="img-fluid" alt="Featured News">
<h2>লাইভ খবর: প্রধান সংবাদ শিরোনাম</h2>
</div>
<div class="row">
<div class="col-md-8">
<div class="row">
<div class="col-12 col-md-6">
<div class="card mb-4">
<img src="news-1.jpg" class="card-img-top" alt="News 1">
<div class="card-body">
<h5 class="card-title">শিরোনাম: নিউজ টাইটেল</h5>
<p class="card-text">সংক্ষিপ্ত বর্ণনা এখানে...</p>
<p class="text-muted">তারিখ: ২০শে সেপ্টেম্বর, ২০২৩</p>
</div>
</div>
</div>
</div>
</div>
<aside class="col-md-4">
<h4>জনপ্রিয় সংবাদ</h4>
<ul>
<li><a href="#">জনপ্রিয় নিউজ ১</a></li>
<li><a href="#">জনপ্রিয় নিউজ ২</a></li>
</ul>
<div class="ad-banner">বিজ্ঞাপন স্পেস</div>
<a href="#">ফেসবুক</a> | <a href="#">টুইটার</a>
</aside>
</div>
</section>
<footer class="bg-light text-dark p-4">
<p>© ২০২৩ আলোক বার্তা<|> <a href="#">About Us</a> <|> <a href="#">Privacy Policy</a></p>
</footer>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0/js/bootstrap.min.js"></script>
<script>
document.getElementById('date').innerText = new Date().toLocaleDateString('bn-BD', { year: 'numeric', month: 'long', day: 'numeric' });
// ব্রেকিং নিউজ টিকার জন্য কোড
</script>
</body>
</html>
CSS কোড:
body {
margin: 0;
padding: 0;
color: #000;
}
.ad-banner {
height: 200px;
background: #ddd;
margin: 10px 0;
}
.marquee {
overflow: hidden;
white-space: nowrap;
animation: marquee 15s linear infinite;
}
@keyframes marquee {
0% { transform: translate(100%); }
100% { transform: translate(-100%); }
}
ফাংশনালিটি তৈরি করুন
এখন HTML ও CSS তৈরি হলে, আমাদের কিছু ফাংশনালিটি যোগ করা উচিত। JS কোডটি আমাদের ব্রেকিং নিউজ টিকার কাজ করতে সাহায্য করবে। উপরের HTML-এর অন্তর্ভুক্ত JavaScript কোডটি দেখুন।
উপসংহার
এখন আপনি একটি আধুনিক বাংলা সংবাদ পোর্টালের জন্য একটি সম্পূর্ণ টেম্পলেট তৈরি করেছেন যা দ্রুত, রেস্পন্সিভ এবং পেশাদার। উপরের কোড ও নির্দেশনাগুলি অনুসরণ করে, আপনি সহজেই একটি কার্যকরী নিউজ পোর্টাল তৈরি করতে পারেন। চেষ্টা করুন এবং উপলব্ধির মাধ্যমে আপনার দক্ষতা উন্নত করুন!