বিস্তারিত ও মূলকথা ;
হান্ড্রেড ক্লাস একাডেমীর ওয়েবসাইট নিয়ে ২য় আর্টিকেল, How to create simple webpage with dropdown menu using HTML and CSS (কিভাবে এইচটিএমএল ও সিএসএস দিয়ে মাল্টি মেনু / ড্রপডাউন মেনু ওয়েবপেইজ তৈরী করতে হয়) ।
আমরা আগের দিন শিখেছি কিভাবে ওয়েবপেজ বানাতে হয় । আজ আমরা এতে একটু নতুনত্ব আনলাম, অর্থাৎ ড্রপডাউন মেনু যুক্ত করলাম । যারা আগের আর্টিকেল পড়েছো, তাদের জন্য এটা সুবিধেজনক হবে । আর যারা পড়োনি, তারা পড়ে নিও । কোড আগের মতই আছে, একটু ভিন্ন ।
নিচে আমাদের সম্পুর্ন কোড দেওয়া আছে, তার আগে আমরা কোডগুলো একটু বিশ্লেষণ করবো । তাহলে শুরু করা যাক ।
- প্রথমত আমরা একটি কোড রাইটার নির্বাচন করবো, যেখানে আমরা এই কোডগুলি লিখতে পারবো । যদি তুমি কম্পিউটার / ল্যাপটপ ব্যাবহার করো, তাহলে ওপেন করো "Notepad/নোটপ্যাড" । যদি মোবাইল ব্যাবহার করো, তাহলে প্লে-স্টোরে গিয়ে ডাউনলোড করো "AnWriter Free" এবং ওপেন করো ।
-
কোড লিখার আগে বলে রাখি, এইচটিএমএল এর কোনো কিছু যা দিয়ে অর্থাৎ যেই ট্যাগ দিয়ে শুরু হবে তা দিয়ে শেষ হবে ।
যেমন একটি ট্যাগ
<body>শুরু হলে শেষও হবে<body>দিয়ে, তবে তার পুর্বে একটি "/" বসবে । অর্থাৎ</body>হবে । -
এবার কোড লিখার পালা । প্রথমত আমরা লিখবো
<!DOCTYPE html>, যা কিনা আমাদের ডকুমেন্ট কি ধরনের তা নির্দেশ করবে । -
তারপর লিখবো
<html>, যার মাধ্যমে আমাদের মুল কোড শুরু হবে । -
<head>ট্যাগ হলো ওয়েবসাইট এর মুল অংশ । তারপর লিখবো<Title> My First Webpage </title>, এই টাইটেলের মাঝখানে যা লিখবো তা ব্রাউজারের টাইটেল বারে দেখানো হবে । তারপর</head>লিখে হেড ট্যাগ শেষ করবো । -
<header>ট্যাগ হলো ওয়েবপেইজ এর হেডিং অংশ, অর্থাৎ লোগো, মেনু, সার্ভিস ইত্যাদির জন্য ব্যবহৃত হয় । -
<div>ট্যাগ অর্থ হলো Division Tag. অর্থাৎ যেকোনো একটি ডিভিশন নির্দেশ করে । id=" " / class=" " হলো ওই ডিভিশনটাকে আলাদা করে নেওয়ার উপায় । যেমন একটি ওয়েবসাইটে অনেকগুলো ডিভিশন থাকতে পারে,তাই এদের মধ্য থেকে প্রতিটি ডিভিশনকে আলাদা করে নেওয়ার পন্থাই হলো আইডি অথবা ক্লাস । এই আইডি বা ক্লাশ এর " " এর মাঝখানে যা লিখবা তাই হবে তোমার ওই ক্লাশ এর নাম । যেমন : id="Gallery" / class="logo" ইত্যাদি ইত্যাদি । -
<img>হলো ইমেজ বা ছবি প্রদর্শিনের ট্যাগ । src=" " হলো ছবির সোর্স / Source । এখানে " " এর মাঝখানে ছবির নাম ও তার ফরম্যাট (.jpg/.png/.jif.....) । এই ট্যাগের শেষ নেই । এদেরকে বলে এম্পটি (Empty Tag) ট্যাগ । -
<ul>হলো আনঅর্ডার লিস্ট এবং<li>হলো লিস্ট এর বিষয়াবলী । -
<h1>হলো হেডার 1, এটা h1 - h6 পর্যন্ত আছে । এটা লিখার সাইজ নির্ধারণ করে -
<button>হলো যেকোন ধরনের বাটন বানানোর কোড । -
<footer>হলো ওয়েবসাইট এর নিচের অংশ, যেখানে কপিরাইট, নীতিমালা, সাইটম্যাপ ইত্যাদি উল্লেখ করা থাকে । -
<p>হলো প্যারাগ্রাফ লিখার কোড । এর মাধ্যমে যেকোনো লিখা প্রদর্শন করা হয় । - সিএসএস নিয়ে একটু আলোচনা করি । যেকোনো class="---" কে ডিজাইন করতে সেই ক্লাস এর নামের পূর্বে (.) দিয়ে শুরু করতে হবে, আর কোনো id="---" কে ডিজাইন করতে তার পুর্বে (#) দিয়ে শুরু করতে হবে । যেমন (.active / .logo / .button) অথবা (#main / #pic / #button) ইত্যাদি ।
- সিএসএস নিয়ে বাকি কথা আমাদের সিএসএস পেইজে পাওয়া যাবে । কারো কোনো প্রশ্ন থাকলে কমেন্ট করে জানাবে ।
যেভাবে শুরু করবে ;
- প্রথমত আমরা একটি কোড রাইটার নির্বাচন করবো, যেখানে আমরা এই কোডগুলি লিখতে পারবো । যদি তুমি কম্পিউটার / ল্যাপটপ ব্যাবহার করো, তাহলে ওপেন করো "Notepad/নোটপ্যাড" । যদি মোবাইল ব্যাবহার করো, তাহলে প্লে-স্টোরে গিয়ে ডাউনলোড করো "AnWriter Free" এবং ওপেন করো ।
- মোবাইল বা পিসির ফাইল ম্যানেজারে গিয়ে "My Html" নামে একটি ফাইল বানাবে ।
- তুমি যেই লোগোটি ব্যবহার করবে ও যেই ব্যাকগ্রাউন্ড ব্যাবহার করবে সেই ছবিগুলো রাখবে ।
- Notepad / AnWriter ওপেন করে কোডগুলো লিখবে ও সেভ করবে "My Html" নামের ফাইলে তোমার যেই নামে ইচ্ছা । পিসির জন্য Ctrl+S ও AnWriter এর জন্য ডানে উপরে থাকা "Save" চিহ্নতে ক্লিক করে সেভ করবে । অবশ্যই সেভ করার পূর্বে নামের পরে ".html" লিখবে । যেমনঃ My First Website.html / Animal.html / Fahim.html / Website.html ।
- ছবি প্রদর্শনের জন্য আমাদের দেওয়া ছবির নাম পরিবর্তন করে তোমার ছবির নাম ও ফরম্যাট লিখবে । যেমনঃ mylogo.png / background.jpg / Image.jpg / hero.png । ছবির ফরম্যাট জানার জন্য ছবিটি ওপেন করে ডিটেইলস এ গিয়ে দেখতে পারবে ।
- চাইলে তুমি সবগুলো কোড কপি করে নিয়ে লিখতে পারো ।
- অরেকটি বিষয় বলে রাখি, যারা মোবাইলে এই কোডগুলি দিয়ে ডিজাইন করবে, তারা কোড রাইটারে কোড রান করলে উপরে উল্লেখিত ছবির ন্যায় ফলাফল দেখবে না, অন্যরকম দেখাবে । কেবল ল্যাপটপ / পিসি / ট্যাব ব্যবহারকারী ছবির ন্যায় দেখতে পাবে । অর্থাৎ কোডগুলি ঠিকই থাকবে, কিন্তু মোবাইলের স্ক্রিন ছোট হওয়ার কারনে দেখা যাবে না । ছবির ন্যায় দেখতে চাইলে ফাইলটি সেভ করে ফাইল ম্যানেজারে গিয়ে ছবিটি ওপেন করার সময় "HTML Viewer"সেলেক্ট করতে হবে, তাহলে দেখতে পারবে ।
ক্রেডিট কোড
<!-- Theme Name: Simple Website By 100 Class Academy
Theme URL: https://hclassacademy.blogspot.com /
Author: Ibrahim Adorer
Author URL: https://ibrahimadorer.blogspot.com /
Thanks: I2RH & You -->
এইচটিএমএল কোড
<!--HTML CODE-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> Simple Website by 100 Class Academy - Dropdown Navigation </title>
</head>
<body>
<img class="logo" src="logo-2.png" width="100%" >
<div class="navigation">
<a href="#">FAQ</a>
<a href="#">Support</a>
<a href="#">Review</a>
<a href="#">About</a>
<div class="moremenu">
<button class="more">Services
<i class="fa fa-caret-down"></i>
</button>
<div class="moremenu-content">
<a href="#">HTML</a>
<a href="#">CSS</a>
<a href="#">PHP</a>
<a href="#">Java</a>
</div>
</div>
</div>
<div class="hero-title" >
<h1> 100 Class Academy </h1>
<button class="b1" > Enroll Now </button> <button class="b2" > Discover </button>
</div>
<footer>
<p class="copyright" >© 2020 - 100 Class Academy | All Rights Reserved </p>
</footer>
</body>
</html>
সিএসএস কোড
/* CSS CODE */
<style type="text/css">
body {
background-image:url("bg4.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.logo {
float:left;
width:200px;
margin-top:5px;
margin-left:15px;
height:auto;
}
.navigation a {
float:right;
font-size: 16px;
color:white;
margin-top:19px;
border-radius:2px;
padding: 10px 20px;
text-decoration: none;
}
.moremenu {
float: right;
}
.moremenu .more {
font-size: 16px;
border: none;
border-radius:2px;
outline: none;
color:white;
padding: 10px 20px;
background-color: inherit;
font-family: inherit;
margin-top:18px;
}
.navigation a:hover, .moremenu:hover .more {
background-color: #fdc900;
color:black;
}
.moremenu-content {
display: none;
margin-top:0px;
position: absolute;
background-color: #f9f9f9;
min-width: 140px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.moremenu-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
margin-top:0px;
text-align: left;
}
.moremenu-content a:hover {
background-color: #ddd;
}
.moremenu:hover .moremenu-content {
display: block;
}
.hero-title {
color:white;
top:50%;
position:absolute;
left:38%;
text-align:center;
transform:translate(-50%, -50%);
}
.b1 {
background:white;
border:none;
padding:10px 18px;
display:inline-block;
color:black;
}
.b2 {
background:transparent;
border:1px solid white;
padding:9px 18px;
display:inline-block;
color:white;
}
.copyright {
position:absolute;
top:100%;
bottom:0%;
color:white;
left:50%;
text-align:center;
transform:translate(-50%, -50%);
}
</style>
[ প্রশ্ন থাকলে কমেন্টে জানাও ]
সম্পূর্ণ ফাইলটি ডাউনলোড করতে নিচের বাটনে ক্লিক করো :
File Developed by : Md.Ibrahim
তোমার মতামত জানাও:
0 comments: