বিস্তারিত ও মূলকথা ;
হান্ড্রেড ক্লাস একাডেমীর ওয়েবসাইট নিয়ে ৩য় আর্টিকেল, How to create simple login form page 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" ইত্যাদি ইত্যাদি । -
<center>হলো যেকোনো কিছুকে পেইজের মাঝখানে রাখার কোড ।<center> ------- </center>এর মাঝে যা কিছু রাখা হবে, তা পেইজের মধ্যখানে প্রদর্শিত হবে । -
<form>ট্যাগের কাজ হলো যেকোনো ধরনের ফর্ম তৈরীতে সহায়তা করা । যেমন রেজিস্ট্রেশন ফর্ম, লগইন ফর্ম, সাইন আপ ফর্ম, বুকিং ফর্ম ইত্যাদি । এই<form>ট্যাগের ভিতরেই থাকে ফর্মের বিভিন্ন উপাদান, যেমন পাসওয়ার্ড, নাম, ইমেইল, ঠিকানা ইত্যাদি । - action="form.php" মানে হলো ব্যাবহারকারি ফর্মের মধ্যে যেই তথ্য দিবে তা কোথায় গিয়ে জমা হবে । এর জন্য হালকা পাতলা পিএইচপি (Personal Home Page) এর জ্ঞান দরকার ।
-
<level>হলো ফর্মের বিভিন্ন উপাদানের পরিচয়, যেমন পাসওয়ার্ড এর জন্য হবে "Password" । -
<input>ট্যাগের কাজ হলো ফর্মের বিভিন্ন উপাদানের জন্য ঘর করে দেওয়া, অর্থাৎ ঘর বানানো । যেমন আমার ফর্মের জন্য ৫টি ঘর দরকার, নাম, ইমেইল, ডাকনাম, বয়স ও পাসওয়ার্ড । তাহলে আমি ৫টি<input>ট্যাগ ব্যাবহার করবো । -
<type="----">হলো ঘরে কি ধরনের জিনিস নেওয়া হবে, সহজ করে বলতে গেলে ঘরটি কিসের জন্য । পাসওয়ার্ড এর জন্য নাকি নাম এর জন্য । কেবলমাত্র পাসওয়ার্ড এর জন্য হলে type="------" এর কোটেশন এ "password" লিখবে । বাকি যেকোনো লিখার জন্য "text" লিখবে । - placeholder="----" এ যা লিখবে, তোমার ফর্মের খালিঘরে তাই দেখাবে । আমাদের ফর্মে দেখো লিখা আছে ।
- name="----" হলো ফর্মের এই ঘরটির নিজস্ব পরিচয় । অর্থাৎ কম্পিউটার তাকে এর নামে চিনবে । এক্ষেত্রে ভালোকাজ হলো name এর জায়গায় ওই ঘরের নাম লিখা ।
- আর সবার শেষে দেখো required লিখা, এর মানে হলো কেউ ফর্মের এই ঘরটি খালি রেখে যেতে পারবে না ।
-
<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 - Login Form </title>
</head>
<body>
<center>
<div class="formbox">
<form action="login.php">
<h1 align="center">100 Class Academy</h1>
<h3 align="center">Login Form</h3>
<hr width="150px">
<label for="email"><b>Your Email</b></label>
<input type="text" placeholder="reach_someone@gmail.com" name="Email" required>
<label for="psw"><b>Your Password</b></label>
<input type="password" placeholder="**********" name="Password" required>
<button type="submit" class="loginbutton">Login</button>
</form>
<p> Forget Password ? <a href="#"> Click Here </a></p>
</div>
</center>
<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("loginbg.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
.formbox {
background:white;
padding:10px;
top:30%;
text-align:left;
width:35%;
}
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
.loginbutton{
background-color: Dodgerblue;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
p, a {
text-align:center;
text-decoration:none;
}
/* ডিভাইসের প্রস্থ 700 পিক্সেল এর নিচে হলে যেরকম দেখাবে তার সাইজ */
@media screen and (max-width: 700px) {
.formbox {
width: 80%;
display: block;
}
}
</style>
[ প্রশ্ন থাকলে কমেন্টে জানাও ]
সম্পূর্ণ ফাইলটি ডাউনলোড করতে নিচের বাটনে ক্লিক করো :
File Developed by : Md.Ibrahim
তোমার মতামত জানাও:
0 comments: