How to build a simple website using HTML and CSS

বর্তমান যুগ হলো ইন্টারনেটের যুগ যেখানে এমন কিছু নেই যে আপনি খুঁঁজে পাবেন না! কোন পণ্যের দাম থেকে শুরু করে কোথায় কোন পন্য পাওয়া যায়, কোথায় কি আছে প্রায় সব কিছুই আপনি এই ইন্টারনেটের মাধ্যমে খুঁজে পাবেন। শুধু মাত্র আপনাকে search engine যেমন google, yahoo বা bing কে বলে দিতে হবে আপনি কি জানতে বা খুঁজতে চাচ্ছেন। ব্যাস, নিমিষেই আপনি আপনার কাংঙ্খিত ফলাফল পেয়ে যাবেন এই search engine গুলোর মাধ্যমে। মুলত এই search engine গুলো কতগুলো website আপনাকে search result হিসেবে দেখায়। এই website গুলোর মধ্যে আপনি আপনার যাবতীয় তথ্য খুঁজে পাবেন।
এই website গুলো মূলত দুই ধরনের হয়ে থাকে। প্রথমটি হলো static website এবং পরেরটি হলো dynamic website

static website কি?

static website হলো এমন এক ধরনের website যেখানে fixed content থাকে। fixed content বলতে বুঝানো হচ্ছে যে এখানে তথ্য গুলো প্রতিনিয়ত পরিবর্তন হয় না। এই static website এ যত রকম page থাকে সবগুলোই HTML দিয়ে তৈরী করা হয় এবং সব visitor এর জন্য একই রকম তথ্য প্রদান করে। static website তৈরী করতে কোন প্রকার database এর প্রয়োজন হয় না কারন তথ্য তো আর প্রতিনিয়ত পরিবর্তন হচ্ছে না। শুধুমাত্র HTML page তৈরী করে web server এ রেখে দিতে হবে। যদি তথ্য পরিবর্তন করার প্রয়োজন পড়ে তখন সেই page কে manually web server থেকে download করে পরিবর্তন করতে হবে ।

dynamic website কি?

dynamic website হলো এমন এক ধরনের website যেখানে content গুলো প্রতিনিয়ত পরিবর্তন হয়ে থাকে। এই content গুলো সংরক্ষন করার জন্য database ব্যবহার করা হয়। এই ধরনের dynamic website তৈরী করার জন্য ব্যবহার করা হয় PHP, ASP ইত্যাদি scripting language।
আজকে আমরা একটি সাধারন static website তৈরী করব যার design টি আপনারা এই article এর ছবি দেখেই বুঝতে পারছেন।

চলুন design টি একটু ব্যাখ্যা করা যাক।

এই design এ আমরা ৮টি section ব্যবহার করেছি। আর তা হলো-
১। Logo and Menu bar section.
html css layout
২। Our Service Section
html css layout
৩। Banner Section.
html css layout
৪। About Us Section
html css layout
৫। Our Work Section
html css layout
৬। Latest Blog Section
html css layout
৭। Contact Us Section
html css layout
৮। Footer Section
html css layout
এবং এই প্রত্যেকটি Section এর জন্য আমরা div tag ব্যবহার করেছি।

এবার চলুন প্রতেকটি Section এ কোন কোন tag ব্যবহার করা হয়েছে তা জেনে আসি-

এই সম্পূর্ণ website টি কে center এ আনার জন্য এবং container হিসেবে ব্যবহার করার জন্য আমরা প্রথমেই একটি div নিয়েছি এবং এই div এ wrapper নামে একটি class ব্যবহার করেছি। আমাদের website এর সম্পূর্ণ code গুলো থাকবে এই wrapper এর ভিতরে।

এই wrapper নামক class এর কাজ হলো সম্পূর্ণ website টি কে center এ প্রদর্শন করা। আর তার জন্য আমরা ব্যবহার করেছি এই CSS code-

.wrapper {
    width : 1140px;
    margin : 0 auto;
}

১। Logo and Menu bar section.
এই Logo and Menu bar section এর জন্য আমরা একটি div নিয়েছি এবং এই div এর ভিতর header নামক একটি class declare করেছি। এই header class এর কাজ হলো আমাদের logo এবং navbar কে hold করা বা ধরে রাখা। এর ভিতর আমরা আবার ২টি div নিয়েছি এবং এই ২ টি div এর ভিতর আরো ২ টি class যাদের নাম হলো logo এবং nav নিয়েছি।

 

 

</div>

logo class এর কাজ হলো আমাদের logo কে বাম দিকে নিয়ে যাওয়া এবং nav class এর কাজ হলো আমাদের navbar কে ডান দিকে নিয়ে যাওয়া। এই section এর CSS code হলো-

.header {
	float: left;
	position: relative;
	width: 1136px;
}
.header .logo {
	float: left;
	width: 174px;
}
.header .nav {
	width: 960px;
	background-color: #fff;
	border : 1px solid #fff;
	float: right;
}
.header .nav ul {
	float: right;
}
.header .nav ul li {
	display: inline;
	padding-left: 20px;
}
.header .nav ul li a{
	color : #E82281;
	text-decoration: none;
	font-weight: bold;
}

div কি?

HTML এ div ট্যাগটি container বা section এর জন্য ব্যবহার করা হয়। এই div ট্যাগটি
HTML elements গুলোকে ধরে রাখে বা একটি container বা section হিসেবে কাজ করে।

h1 কি?

h1 tag হলো কোন লেখার heading এর জন্য ব্যবহার করা হয়। heading tag ৬ রকমের আছে। h1, h2, h3, h4, h5 এবং h6।

ul কি?

ul মানে হলো unorder list। আমরা unorder list আকারে কোনে লেখাকে দেখাতে চাইলে প্রথমে ul tag টি ব্যবহার করবো এবং এর ভিতর প্রত্যেকটি লেখাকে আবার li tag এর ভিতর লিখবো। তাহলেই আমাদের unorder list তৈরী হয়ে যাবে।

a কি?

hyperlink তৈরী করার জন্য এই a tag টি ব্যবহার করা হয়। hyperlink মানে হলো কোন একটি লেখার উপর click করার সুবিধা দেওয়া যাতে ঐ লেখার উপর click করলেই অন্য একটা location এ চলে যায়। আর এই location টি বলে দিতে হয় href নামক একটি attribute এর ভিতর। আমরা এখানে কোন location ব্যবহার করি নি।

সকল HTML কোড

<!DOCTYPE html>
<html>
<head>
	<title>Simple Website Using HTML and CSSs</title>
	<link rel="stylesheet" type="text/css" href="assets/css/style.css">
</head>
<body>
 

 

 

</div>

 

 

Our Services

 

 

 

Service 1

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 

 

 

Service 2

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 

 

 

Service 3

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 

</div>

 

 

 

About Us

 

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> <img src=”assets/images/about-us.jpg” alt=”about us”> </div>

 

 

Our Work

 

<img src=”assets/images/work-01.jpg” alt=””> <img src=”assets/images/work-02.jpg” alt=””> <img src=”assets/images/work-03.jpg” alt=””> <img src=”assets/images/work-04.jpg” alt=””> <img src=”assets/images/work-05.jpg” alt=””> <img src=”assets/images/work-06.jpg” alt=””> </div>

 

 

Latest Blog

 

 

Some of your blog title

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
 

 

Some of your blog title

 
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod.
 

</div>

 

 

 

Contact Us

 

<form action=”” method=”post”> <table> <tr> <td><input type=”text” name=”name” placeholder=”Your Name”></td> </tr> <tr> <td><input type=”text” name=”subject” placeholder=”Subject”></td> </tr> <tr> <td><input type=”email” name=”email” placeholder=”Email Address”></td> </tr> <tr> <td><textarea name=”message” placeholder=”Message”></textarea></td> </tr> <tr> <td><input type=”submit” name=”submit” value=”Send Message” class=”btn-submit”></td> </tr> </table> </form> </div>

 

Our Address

 

Dhanmondi 15 No,
Dhaka-1209,
Bangladesh. Phone: +8801671133639
Email : [email protected]

 

[googlemaps https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3652.053059057656!2d90.37075924650325!3d23.74548724808845!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x26436b1b9dcd741e!2sIbn+Sina+Diagnostic+and+Imaging+Center!5e0!3m2!1sen!2sus!4v1553176042226&w=600&h=275]

</div> </div>

</div>

</body> </html>

সকল CSS কোড

@font-face {
  font-family: CenturyGothic;
  src: url("../font/CenturyGothic.ttf");
}
body {
	font-size: 16px;
	color : #000;
	font-family: 'CenturyGothic', sans-serif;
	font-weight: normal;
}
.wrapper {
	width : 1140px;
	margin : 0 auto;
}
header {
	float: left;
	position: relative;
	width: 1136px;
}
header .logo {
	float: left;
	width: 174px;
}
header nav {
	width: 960px;
	background-color: #fff;
	border : 1px solid #fff;
	float: right;
}
header nav ul {
	float: right;
}
header nav ul li {
	display: inline;
	padding-left: 20px;
}
header nav ul li a{
	color : #E82281;
	text-decoration: none;
	font-weight: bold;
}
h1 {
	font-size: 36px;
	color: #EB2280;
}
h3 {
	font-size: 24px;
	color: #EB2280;
}
.banner {
	position: relative;
	float: left;
}
.banner img {
	width: 100%;
}
.center-text {
	text-align: center;
}
.our-services {
	position: relative;
	float: left;
	width: 1140px;
}
.service-box {
	float: left;
	width: 360px;
	margin-right: 30px;
}
.service-box:nth-child(5) {
	margin-right: 0;
}
.about-us {
	width : 1136px;
	border : 2px solid #fff;
	position: relative;
	float: left;
}
.about-us-content {
	float: left;
	width: 550px;
}
.about-us img {
	float: right;
}
.our-work {
	width : 1136px;
	border : 2px solid #fff;
	position: relative;
	float: left;
}
.our-work img {
    float: left;
    margin-right: 87px;
    margin-bottom: 120px;
    padding: 10px;
}
.our-work img:nth-child(5), img:nth-child(8) {
	margin-right: 0px;
}
.our-work img:nth-child(6), img:nth-child(7), img:nth-child(8) {
	margin-bottom: 0;
}
.latest-blog {
	width : 1136px;
	border : 2px solid #fff;
	position: relative;
	float: left;
}
.latest-blog .blog {
    float: left;
    width: 478px;
    margin-right: 135px;
    padding: 10px;
}
.latest-blog .blog:nth-child(4) {
	margin-right: 0;
}
.contact-us {
	width : 1140px;
	position: relative;
	float: left;
}
.contact {
	float: left;
	width: 440px;
}
.address {
	width: 600px;
	float: right;
	margin-top: 65px;
}
.address address {
	margin-bottom: 15px;
}
input, textarea {
    width: 390px;
    height: 35px;
    padding: 10px;
    background-color: #F3F4F6;
    border: none;
    margin-bottom: 20px;
}
textarea {
	height: 100px;
}
input.btn-submit {
    width: 100%;
    background: #E92382;
    color: #fff;
}
.footer {
	width : 100%;
	position: relative;
	float: left;
	background-color: #F3F4F6;
	text-align: center;
	padding : 25px 0;
	font-size: 13px;
	margin-top: 1s00px;
}
.underline {
    display: block;
    height: 1px;
    border: 0;
    border-top: 3px solid #ee3d8e;
    margin: 0 0 40px 0;
    padding: 0;
    width: 100px;
    box-shadow: 9px 8px 4px #ffe8f3;
}
.center {
	margin : 0 auto 40px auto;
}
.spacer {
	margin : 50px 0;
}
img {
	width: auto;
	box-shadow: 6px 5px 17px #e0e0e0;
	border-top-right-radius: 5px;
	padding: 10px 10px 10px 0;
	border: 1px solid #ffffff;
}

 

Demo | Download the files: Download

 

4 Comments

  1. I have been browsing on-line more than three hours as of late, but I by no means found any fascinating article like yours. It抯 beautiful worth sufficient for me. In my opinion, if all website owners and bloggers made good content material as you did, the web will probably be a lot more helpful than ever before.

  2. I must show my appreciation to this writer for bailing me out of this particular incident. As a result of surfing throughout the internet and seeing recommendations which were not pleasant, I assumed my life was well over. Existing minus the approaches to the difficulties you have fixed by means of your website is a critical case, and the kind which may have negatively damaged my entire career if I hadn’t noticed your website. Your primary competence and kindness in playing with all the details was precious. I don’t know what I would’ve done if I hadn’t discovered such a solution like this. I’m able to at this moment relish my future. Thank you so much for your impressive and results-oriented guide. I will not hesitate to endorse your blog post to any individual who needs and wants guidelines about this topic.

Leave a Comment