HTML এবং CSS সম্পর্কে মোটামুটি ধারণা আছে, কিন্তু কিভাবে একটা ওয়েব পেইজ তৈরি করবেন, তা বুঝতে পারছেন না, তাদের জন্য এই লেখা। লেখাটি দেখে এবং নিজে নিজে চেষ্টা করলে নিজে নিজে একটা ওয়েব সাইট তৈরি করতে পারবেন। তার জন্য আপনার HTML, CSS সম্পর্কে অল্প কিছু ধারণা থাকতে হবে। যেমন- HTML কি, HTML Tag কি, CSS কি, CSS Class এবং ID কি, এসব । তাহলে HTML এবং CSS দিয়ে একটি পূর্ণাঙ্গ ওয়েব সাইট তৈরি করতে পারবো।
আমারা যে ওয়েব সাইটটি তৈরি করব, তার কঙ্কাল / স্ট্র্যাকচারঃ
উপরের ইমেজটি লক্ষ্য করি। header অংশ হচ্ছে আমদের ওয়েব পেইজের হেডার অংশ, যেখানে থাকে সাইটের লগো, সাইটের নাম ইত্যাদি।
এরপরের অংশ হচ্ছে nav, navigation এর সংক্ষিপ্ত রুপ। যেখানে থাকে মেনু বার। Home, About Us, Contact Us এমন পেইজ গুলোর লিঙ্ক ।
এরপর দেখি aside অংশ। যা হচ্ছে সাইডবার। সাইডবারে অনেক কিছু থাকে, যেমন About Me, ফেসবুক লাইক বক্স, এডভার্টাইজ ইত্যাদি ।
এরপর দেখি aside অংশ। যা হচ্ছে সাইডবার। সাইডবারে অনেক কিছু থাকে, যেমন About Me, ফেসবুক লাইক বক্স, এডভার্টাইজ ইত্যাদি ।
এরপর দেখি aside অংশ। যা হচ্ছে সাইডবার। সাইডবারে অনেক কিছু থাকে, যেমন About Me, ফেসবুক লাইক বক্স, এডভার্টাইজ ইত্যাদি ।
Section এ থাকে পেইজের প্রধান কন্টেন্ট। এখন একটা Section এ একের অধিক কন্টেন্ট থাকতে পারে। এক একটা কন্টেন্টকে এক একটা article বলতে পারি। আর সে গুলো লেখা হয় article ট্যাগ দিয়ে।
এরপর প্রতিটি ওয়েব পেইজেই আমরা দেখি এক একটা ফুটার। যেখানে কপিরাইট তথ্য, ডেভেলপারের তথ্য ইত্যাদি লেখা থাকে ।
এখানে header, nav, aside, section, article, footer সব গুলোই হচ্ছে HTML ট্যাগ। এ গুলো ব্যবহার করে আমরা আমাদের ওয়েব পেইজটি তৈরি করব ।
শুরু করার জন্য আমরা প্রথমে একটি HTML ফাইল তৈরি করব। এরপর css নামে একটি ফোল্ডার তৈরি করব। তার ভেতরে style.css নামে একটি ফাইল তৈরি করব ।
images নামে একটি ফোল্ডার তৈরি করে রাখব । যেখানে আমাদের ওয়েব পেইজে যে ইমেজ গুলো ব্যবহার করব, সেগুলো রাখব।
এবার index.html এ html পেইজের ব্যাসিক মার্কআপ গুলো লিখে ফেলব। যেমন- <!DOCTYPE html>, head, body ইত্যাদি। এবং style.css নামক css ফাইলটা হেডারে লিঙ্ক করব। আমাদের index.html স্টার্ট ফাইলের কন্টেন্ট তাহলে নিচের মত হবেঃ
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title> Advanced ICT </title>
<link rel=”stylesheet” href=”css/style.css” type=”text/css” />
</head>
<body class=”container”>
<h1>Hello Web!</h1>
</body>
</html>
এবার আমরা আমদের ওয়েব পেইজে header, nav, aside, section, article, footer এসব যুক্ত করব। প্রথম ইমেজটির মতঃ
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<title> Advanced ICT</title>
<link rel=”stylesheet” href=”css/style.css” type=”text/css” />
</head>
<body class=”container”>
<header >
</header>
<nav id=”navigaion”>
</nav>
<aside class=”sidebar”>
</aside>
<section class=”content”>
<article>
</article>
</section>
<footer id=”footer”>
</footer>
</body>
</html>
যেখানে শুধু ট্যাগ গুলোই লিখেছি, ট্যাগের ভেতরে আমরা কোন কনটেন্ট লিখিনি। আমরা এবার ট্যাগের ভেতর কনটেন্ট যুক্ত করব। যেমন- হেডারে লগো হিসেবে একটি লগো যুক্ত করব। এ লগো এর পরিবর্তে পরে আমাদের প্রজেক্টের লগো ব্যবহার করব।
ন্যাভিগেশনে কয়েকটা পেইজের লিঙ্ক যুক্ত করব। Home, About, News, History, Contact নামে।
আর সাইডবার/aside এ একটা ইমেজ আর কিছু টেক্সট যুক্ত করব ।
সেকশনের আর্টিকেলে একটা ইমেজ এবং কিছু লেখা যুক্ত করব ।
ফুটারে কপিরাইট যুক্ত করব। সব গুলো যুক্ত করার পর index.html এর কোড হবে হবে নিচের মতঃ
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Advanced ICT</title>
<link rel=”stylesheet” href=”css/style.css” type=”text/css”/>
</head>
<body id=”container”>
<header id=”header”>
<img src=”images/Logo.png”/>
</header>
<nav id=”navigation”>
<ul>
<li><a href=”index.html”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>News</a></li>
<li><a href=”#”>History</a></li>
<li><a href=”#”>Contact</a></li>
</ul>
</nav>
<aside class=”sidebar”>
<h3>About Me</h3>
<img src=”images/ict_expert.jpg” width=”220px”/>
<h3>I am *****, ICT Expert</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<hr>
<p>Information and communications technology (ICT) is an extended term for information technology (IT) which stresses the role of unified communications[1] and the integration of telecommunications (telephone lines and wireless signals), computers as well as necessary enterprise software, middleware, storage, and audio-visual systems, which enable users to access, store, transmit, and manipulate information. </p>
<hr>
</aside>
<section class=”content”>
<article>
<h2>Advance ICT Course</h2>
<img src=”images/ict.jpg”/>
<p>The Advanced ICT course, designed under TQI-II will train 100 Master Trainers, drawn from TTCs and School, Madrasah, Government and non Government Colleges, who will the take part in the training of 1,000 secondary school teachers in web development, including graphical design, and mobile application development.</p>
<p>The objectives of this course are to increase the availability of interactive learner centred web based e-learning resources and mobile apps which can access the web-based learning resources. E-learning resources developed by teachers will ensure that these materials are aligned to the curriculum and the resources are freely available. The development of 100 master trainers from TTCs and general colleges will ensure that these institutions will have the capacity to develop e-learning materials and sustain this by conducting further training.</p>
<p>The Facebook group is only for those who are participating in this course, and those who are related to this course in some other capacity. </p>
</article>
</section>
<footer id=”footer”>
<p>© Advanced ICT course 2016.
</footer>
</body>
</html>
প্রথমে একটা ইমেজ ট্যাগ ব্যবহার করবো, লগো এইচটিএমএল ফাইলে যুক্ত করার জন্য ।
এরপর একটা লিস্ট যুক্ত করবো, মেনু যুক্ত করার জন্য ।
এরপর সাইডবারে একটা ইমেজ এবং কিছু কনেন্ট যুক্ত করবো । তারপর সেকশনে কিছু টেক্সট যুক্ত করবো । এবং শেষে কপিরাইট ইনফো যুক্ত করবো ।
কেমন হিবি জিবি তাই না?
আমাদের HTML ফাইল এখন কেমন এলোমেলো দেখাছে, কারণ আমরা কোন স্টাইল যুক্ত করিনি। এখন আমাদের CSS যুক্ত করতে হবে। যা দিয়ে আমরা কালার দিব, দিব স্টাইল। তার জন্য CSS ফোল্ডারে থাকা style.css এ আমরা css কোড গুলো লিখব ।
আমাদের পেইজের একটা ওয়াইড ঠিক করে দিব । আর তারপর কন্টেন্ট গুলো যে মাঝখানে এলাইন হয় তার জন্য লিখবঃ
#container{
width:1180px;
margin:0 auto;
box-shadow: 0px 0px 20px 3px #000;
}
হেডারের কালার পরিবর্তন করব। তার জন্য css ফাইলে লিখবঃ
#header{
background: #3498db;
}
মেনু কিভাবে তৈরি করতে হয়, তা আমরা দেখেছি। মেনু গুলো ঠিক মত দেখানোর জন্য লিখবঃ
#navigation{
background: #a04000;
width:100%;
height: 35px;
margin: 5px 0;
}
#navigation ul{
list-style-type:none;
margin:0;
padding:0;
}
#navigation li{
float:left;
border-right: 1px solid #fff;
}
#navigation a:link{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
}
#navigation a:hover{
color:#000;
}
#navigation a:visited{
color:#fff;
} এ কোড গুলো সিএসএস ফাইল লেখার পর দেখতে পাবো আমাদের ওয়েব পেইজের হেডার অংশ অনেক সুন্দর করে দেখাছে।
সাইডবারের জন্য সিএসএস লিখবঃ
.sidebar{
background:#1F6C7E;
width:250px;
float:left;
padding:10px;
}
কন্টেন্ট এর জন্য সিএসএসঃ
.content{
width: 850px;
float: right;
background: #aed6f1;
padding:10px;
margin-bottom:5px;
}
সর্বোশেষ ফুটারের জন্য সিএসএসঃ
#footer{
clear:both;
background:#1F6C7E;
padding:10px;
text-align:center;
color:#fff;
}
ইমেজ গুলো যেন সুন্দর মত কন্টেন্টের মাঝখানে দেখায়, এবং ইমেজের ওয়াইড কন্টেইনারের বাহিরে না যায়, তার জন্য আমরা এ সিএসএসটি যুক্ত করে দিব ।
img{
max-width:100%;
margin:0 auto;
display:block;
}
তাহলে আমাদের সম্পুর্ণ সিএসএস ফাইল হবেঃ
#container{
width:1180px;
margin:0 auto;
box-shadow: 0px 0px 20px 3px #000;
}
#header{
background: #3498db;
}
#navigation{
background: #a04000;
width:100%;
height: 35px;
margin: 5px 0;
}
#navigation ul{
list-style-type:none;
margin:0;
padding:0;
}
#navigation li{
float:left;
border-right: 1px solid #fff;
}
#navigation a:link{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
text-align:center;
padding:4px;
text-decoration:none;
}
#navigation a:hover{
color:#000;
}
#navigation a:visited{
color:#fff;
}
.sidebar{
background:#1F6C7E;
width:250px;
float:left;
padding:10px;
}
.content{
width: 650px;
float: right;
background: #aed6f1;
padding:10px;
margin-bottom:5px;
}
#footer{
clear:both;
background:#1F6C7E;
padding:10px;
text-align:center;
color:#fff;
}
img{
max-width:100%;
margin:0 auto;
display:block;
}
এখন আমরা জানি একটি ওয়েব সাইট হচ্ছে অনেক গুলো ওয়েব পেইজের সমষ্টি। আমরা চাইলে এখন index.html কে কপি করে এটার ভেতরের কিছু কন্টেন্ট পরিবর্তন করে দিয়ে আরেকটা পেইজ তৈরি করে ফেলতে পারি।
এবার এখান থেকে নিজের ক্রিয়েটিভিটি প্রয়োগ করে আমরা যে কোন ডিজানের যে কোন ওয়েবসাইটই তৈরি করে ফেলতে পারি। তাছাড়া আমরা চাইলে আমাদের পছন্দের যে কোন ওয়েব সাইট কিভাবে তৈরি, তা দেখে নিতে পারি তার সোর্স কোড দেখে। কোন ওয়েব সাইটের উপর রাইট ক্লিক করে View Source কোড এ ক্লিক করলেই আমাদের ঐ সাইটের সোর্স কোড দেখাবে।
