বিস্তারিত ও মূলকথা ;
হান্ডেড ক্লাস একাডেমীর সর্বপ্রথম ওয়েবসাইট নিয়ে আর্টিকেল, How to create simple webpage using HTML & 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 । ছবির ফরম্যাট জানার জন্য ছবিটি ওপেন করে ডিটেইলস এ গিয়ে দেখতে পারবে ।
- চাইলে তুমি সবগুলো কোড কপি করে নিয়ে লিখতে পারো ।
ক্রেডিট কোড
<!-- 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>
<title> Simple Website by 100 Class Academy </title>
</head>
<body>
<header>
<div class="logo">
<img src="logo-2.png" width="100%">
</div>
<ul>
<li><a class="active" href="#"> Home </a></li>
<li><a href="#"> Services </a></li>
<li><a href="#"> Payments </a></li>
<li><a href="#"> Dashboard </a></li>
<li><a href="#"> Support </a></li>
<li><a href="#"> About </a></li>
</ul>
</header>
<div class="hero-title">
<h1> Edubin Education Management </h1>
<button class="button1"> Enroll Now </button>
<button class="button2"> 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("bg1.jpg");
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
.logo img {
float:left;
width:200px;
margin-top:2px;
margin-left:15px;
height:auto;
}
ul {
list-style-type:none;
float:right;
margin-top:20px;
margin-right:10px;
text-decoration:none;
}
ul li {
display:inline-block;
text-decoration:none;
}
ul li a {
text-decoration:none;
padding:10px 8px;
border-radius:2px;
margin:2px;
background:transparent;
color:white;
transition:0.6s ease;
}
ul li a:hover {
background:white;
color:black;
transition:0.6s ease;
}
.active {
background:white;
color:black;
}
.hero-title {
color:white;
top:50%;
position:absolute;
left:50%;
text-align:center;
transform:translate(-50%, -50%);
}
.button1 {
background:white;
border:none;
padding:10px 18px;
display:inline-block;
color:black;
}
.button2 {
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: