Awesome! টিউনস
সকল Awesome! টিউনস

ওয়েব প্রোগ্রামিং শিখিয়েই ছাড়ব…।।।( final html tune ) ২ পেজ এর পুরনাঙ্গ ওয়েবসাইট তৈরি , ফ্রী হস্টিং এবং ডোমেইন রেজিস্ত্রেশন এবং ফাইল আপলোড ।

3,464 দেখা 9 টিউমেন্টস জোসস
টিউন বিভাগ প্রোগ্রামিং
প্রকাশিত
Level 0

11 টিউনস 97 টিউমেন্টস 0 ফলোয়ার 
আসসালামুয়ালিকুম , সবাই কেমন আছেন । আপনাদের কাছে আসতে মাঝখানে একটু দেরি হয়ে গেল । আসলে আমি অসুস্থ ছিলাম । তাই , কিন্তু বুঝেনই তো FB আর TT এর পোকা , এদের ছাড়া কি থাকতে পারি । তাই অসুখ হওয়া সত্তেও মোবাইল দিয়ে TT brows করেছি , মাঝে মাঝে কিছু পোস্টে কমেন্ট ও করেছি । আচ্ছা যাই হোক , আপনাদের দেওয়া কথা অনুযায়ী আজকে আমার এইচটিএমএল ফাইনাল পোস্ট । আর এই পোস্ট এ আমি আপনাদের ২ পেজ এর একটি পুরনাঙ্গ ওয়েবসাইট বানান দেখাব ।
তো শুরু করি ..................................................................................................................................................................
তো প্রথমে আপনাদের কিছু image লাগবে , অশুবিধা কি , আমি dropbox এ upload করে দিচ্ছি , আপনাদের সুবিদারথে ।
তো প্রথমে ,header এর জন্য কাজ শুরু করি ;)
একটি ফাইল বানান আর নাম দেন , index.html
অবশ্যই নামের শেষে .html দিতে হবে  ......... আর এই code গুলো পেস্ট করেন ।
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>ttdemo for all</title>
<link href="default.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div id="header-wrapper">
	<div id="header">
		<div id="logo">
			<h1><a href="#">Floral Garden</a></h1>
		</div>
		<div id="menu">
			<ul>
				<li class="current_page_item"><a href="index.html">Home</a></li>
				<li><a href="contact us.php">Contact Us</a></li>
			</ul>
		</div>
	</div>
</div>
এখানে আমরা তিনটি পেজ বানাব তাই তিনটি list item নিছি এদের মদ্ধে একটা হল HOME , দ্বিতীয়টি হল ABOUT US , এবনহ তৃতীয়টি হল CONTACT US .
এখানে একটি কথা বলে রাখি contact পেজ টির জন্য আমরা php ব্যবহার করব । ( আরে চিন্তা করেন কেন , code গুল তো আমি অবশ্যই দেবো )
এখন main body এর কাজ শুরু করি
<div id="footer-wrapper">
	<div id="footer-content">
		<div id="fbox1">
			<h2><span>Aenean</span> facilisis</h2>
			<p>Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis:</p>
			<p>&nbsp;</p>
			<ul class="style2">
				<li class="first"><a href="#">Maecenas luctus lectus at sapien</a></li>
				<li><a href="#">Mauris vulputate dolor sit amet nibh</a></li>
				<li><a href="#">Integer gravida nibh quis urna</a></li>
				<li><a href="#">Etiam posuere augue sit amet nisl</a></li>
				<li><a href="#">Mauris vulputate dolor sit amet nibh</a></li>
				<li><a href="#">Praesent scelerisque scelerisque erat</a></li>
			</ul>
			<p class="button-style"><a href="#">More Details</a></p>
		</div>
		<div id="fbox2">
			<h2><span>Fusce ultrices</span> fringilla</h2>
			<p><img src="images/img05.jpg" alt="" /></p>
			<p>Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum id, elementum congue, nibh. Donec leo, vivamus fermentum nibh in augue praesent a lacus at urna congue rutrum elementum congue.</p>
			<p class="button-style"><a href="#">More Details</a></p>
		</div>
		<div id="fbox3">
			<h2><span>Mauris</span> scelerisque</h2>
			<ul class="style1">
				<li class="first">
					<p><a href="#">Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum congue.</a></p>
				</li>
				<li>
					<p><a href="#">Aliquam erat volutpat. Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum congue.</a></p>
				</li>
				<li><a href="#">Pellentesque tristique ante ut risus. Quisque dictum. Integer nisl risus, sagittis convallis, rutrum congue.</a> </li>
			</ul>
			<p class="button-style"><a href="#">More Details</a></p>
		</div>
	</div>
</div>
<div id="page-wrapper">
	<div id="page">
		<div id="content">
			<div>
				<h2>Nulla luctus eleifend</h2>
				<p>This is <strong>Floral Garden </strong>, a free, fully standards-compliant CSS template designed by <a href="http://www.freecsstemplates.org/" rel="nofollow">FreeCSSTemplates.org</a>.   The photos in this template are from <a href="http://fotogrph.com/"> Fotogrph</a>. This free template is released under a <a href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attributions 3.0</a> license, so you are pretty much free to do whatever you want with it (even use it commercially) provided you keep the links in the footer intact. Aside from that, have fun with it :) </p>
				<p>&nbsp;</p>
				<p>Maecenas pede nisl, elementum eu, ornare ac, malesuada at, erat. Proin gravida orci porttitor enim accumsan lacinia. Donec condimentum, urna non molestie semper, ligula enim ornare nibh, quis laoreet eros quam eget ante. Aliquam libero. Vivamus nisl nibh, iaculis vitae, viverra sit amet, ullamcorper vitae, turpis. Aliquam erat volutpat. Vestibulum dui sem, pulvinar sed, imperdiet nec, iaculis nec, leo. Fusce odio. Etiam arcu dui, faucibus eget, placerat vel, sodales eget, orci. Donec ornare neque ac sem. Mauris aliquet. </p>
				<p class="button-style"><a href="#">More Details</a></p>
			</div>
		</div>
		<div id="sidebar">
			<h2>Maecenas  lectus</h2>
			<ul class="style3">
				<li class="first"><img src="images/img02.jpg" alt="">
					<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
					<p class="posted">March 22, 2013  |  (10 )  Comments</p>
				</li>
				<li><img src="images/img03.jpg" alt="">
					<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
					<p class="posted">March 18, 2013  |  (10 )  Comments</p>
				</li>
				<li><img src="images/img04.jpg" alt="">
					<p>Nullam non wisi a sem eleifend. Donec mattis libero eget urna. </p>
					<p class="posted">March 11, 2013  |  (10 )  Comments</p>
				</li>
			</ul>
		</div>
	</div>
</div>
এখানে আর কিছু বলার নাই , কারন আমরা শুধু আমদের ছবি গুলি লিঙ্ক করে দিছি , এবং কিছু text এড করেছি ।
এখন আপনারা সবাই জানেন যে , যে ওয়েবসাইটই আমরা বানাই না কেন css ছাড়া ওয়েবসাইট অসম্ভব , কিন্তু এটা css এর tune না , তাই আমি সিএসএস দেখাব না , কিন্তু হ্যাঁ code গুল অবশ্যই আপনাদের দিয়ে দেবো ।
home এর কাজ তো শেষ এখন শুরু করি contact us এর কাজ
একটা ফাইল বানান নাম দেন contact us.php
এবং আরেকটা ফাইল বানান নাম দেন next.php ( আরে দুইটারই দরকার আছে  )
এই php code গুলো কপি করে নিএ contact us.php তে পেস্ট করেন
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style001 {
	font-size: 18px;
	color: #0066FF;
}
-->
</style>
</head>

<body>
<div align="center"><span class="style001"><u>Contact to Admin</u></span></div>
<form action="contactsent.php"s method="post">
Name: <input type="text" name="name">
<br>
E-mail: <input type="text" name="email">
<br>
Message: <br> <textarea name="message" cols="25" rows="5"></textarea>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
আর এই code গুলো নিএ contactsent.php তে পেস্ট করেন
<?php
$name=$_POST['name'];
$email=$_POST['email'];
$comments=$_POST['message'];
$to="[email protected]";
$message="Name: $name \n\n E-mail: $email \n\n Comments: $comments ";
if(mail($to,"Contact from your site",$message,"From: $email")) {
echo "Thank you, your email has been send.";
} else {
echo "Sorry but there is an error. Try again please.";
}
?>
লক্ষ করেন এখানে আমি $to="[email protected]" দিছি কারন আমার কাছে contact এর জন্য মেইল টা পাথাবে তা আমার এই মেইল id তে যাবে , আপনি আপনার ইচ্ছা মতে এটা পরিবর্তন করে নিতে পারেন ।
এখন style.css নামে একটা ফাইল নেন আর এই code গুল copy করে paste করেন ।
body {
	margin: 0;
	padding: 0;
	font-family: 'Istok Web', sans-serif;
	font-size: 13px;
	color: #8F8F8F;
}

h1, h2, h3 {
	margin: 0;
	padding: 0;
	font-weight: 200;
	color: #222222;
}

p, ol, ul {
	margin: 0px;
	padding: 0px;
}

p, ol {
	line-height: 180%;
}

strong {
}

a {
	color: #5C5539;
}

a:hover {
	text-decoration: none;
}

a img {
	border: none;
}

img.border {
}

img.alignleft {
	float: left;
}

img.alignright {
	float: right;
}

img.aligncenter {
	margin: 0px auto;
}

hr {
	display: none;
}

/** WRAPPER */

#wrapper {
}

.container {
	width: 1000px;
	margin: 0px auto;
}

.clearfix {
	clear: both;
}

/* Header */

#header-wrapper {
	overflow: hidden;
	height: 157px;
	background: #5532A3;
}

#header {
	width: 1000px;
	height: 140px;
	margin: 0 auto;
	padding: 0px 0px;
}

/* Logo */

#logo {
	float: left;
	width: 300px;
	height: 80px;
	margin: 0px;
	padding: 0px;
}

#logo h1 {
	padding: 50px 0px 0px 0px;
	background: url(images/img02.png) no-repeat left 50%;
	text-transform: lowercase;
	letter-spacing: -2px;
	font-size: 3.6em;
}

#logo h1 a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Menu */

#menu {
	float: right;
	width: 650px;
	height: 80px;
}

#menu ul {
	float: right;
	margin: 0;
	padding: 70px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}

#menu li {
	float: left;
}

#menu a {
	display: block;
	margin-left: 1px;
	padding: 5px 20px 5px 20px;
	text-decoration: none;
	text-align: center;
	font-size: 14px;
	font-weight: 300;
	color: #FFFFFF;
}

#menu a:hover, #menu .current_page_item a {
	text-decoration: none;
	color: #FFFFFF;
}

/* Page */

#page-wrapper {
	overflow: hidden;
	background: #F1F2E9;
}

#page {
	overflow: hidden;
	width: 1000px;
	margin: 0px auto;
	padding: 50px 0px;
	color: #8F8F8F;
}

/** CONTENT */

#content {
	float: left;
	width: 660px;
	padding: 0px 0px 0px 0px;
}

#content h2 {
	padding: 0px 0px 30px 0px;
	letter-spacing: -1px;
	font-size: 36px;
	color: #222222;
}

#content .subtitle {
	padding: 0px 0px 30px 0px;
	text-transform: uppercase;
	font-size: 18px;
	color: #81AFC5;
}

/** SIDEBAR */

#sidebar {
	float: right;
	width: 290px;
	padding: 0px 0px 20px 0px;
}

#sidebar h2 {
	padding: 0px 0px 30px 0px;
	letter-spacing: -1px;
	font-size: 1.50em;
}

/* Footer */

#footer {
	height: 100px;
	margin: 0 auto;
	padding: 50px 0px 15px 0px;
}

#footer p {
	margin: 0;
	letter-spacing: 1px;
	line-height: normal;
	text-align: center;
	color: #8F8F8F;
}

#footer a {
	color: #FFFFFF;
}

/* Three Column Footer Content */

#footer-wrapper {
	background: #FFFFFF;
}

#footer-content {
	overflow: hidden;
	width: 1000px;
	margin: 0px auto;
	padding: 50px 0px 50px 0px;
	color: #717171;
}

#footer-content a {
}

#footer-content h2 {
	margin: 0px;
	padding: 0px 0px 30px 0px;
	letter-spacing: -1px;
	font-size: 30px;
	color: #7D7D7D;
}

#footer-content h2 span {
	color: #5C5539;
}

#footer-content #fbox1 {
	float: left;
	width: 320px;
	margin-right: 20px;
}

#footer-content #fbox2 {
	float: left;
	width: 320px;
}

#footer-content #fbox2 img {
	margin-bottom: 1.5em;
	border-radius: 10px;
}

#footer-content #fbox3 {
	float: right;
	width: 320px;
}

/* Banner Style */

#banner-wrapper {
	overflow: hidden;
	height: 345px;
	padding: 40px 0px;
	background: url(images/img03.png) repeat;
}

#banner {
	overflow: hidden;
	width: 1000px;
	margin: 0px auto;
}

/* Button Style */

.button-style {
	display: inline-block;
	margin-top: 30px;
	padding: 7px 30px;
	background: #5532A3;
	border-radius: 5px;
	border: 1px solid #442881;
}

.button-style a {
	letter-spacing: 1px;
	text-decoration: none;
	font-weight: 300;
	color: #FFFFFF;
}

/* List Style 1 */

ul.style1 {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

ul.style1 li {
	padding: 20px 0px 20px 0px;
	border-top: 1px dashed #E6E7DC;
}

ul.style1 a {
	text-decoration: none;
	color: #6B6B6B;
}

ul.style1 a:hover {
	text-decoration: underline;
	color: #6B6B6B;
}

ul.style1 .first {
	padding-top: 0px;
	border-top: none;
}

/* List Style 2 */

ul.style2 {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

ul.style2 li {
	padding: 9px 0px 9px 0px;
	border-top: 1px dashed #E6E7DC;
}

ul.style2 .first {
	padding-top: 0px;
	border-top: none;
}

/* List style 3 */

ul.style3 {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

ul.style3 li {
	padding: 20px 0px 20px 0px;
	background: url(images/link-style1-divider.png) repeat-x left top;
}

ul.style3 p {
	margin: 0px;
	padding: 0px;
}

ul.style3 img {
	float: left;
	margin-top: 3px;
	margin-right: 20px;
	border-radius: 5px;
}

ul.style3 .posted {
	padding: 10px 0px 0px 0px;
	font-size: 8pt;
	color: #A2A2A2;
}

ul.style3 .first {
	padding-top: 0px;
	background: none;
}

এখন আসি এগুলো upload এর জন্য hosting এবং domain নেওয়ার বেপার .
জাদের টাকা আছে তারা তো অবশ্যই paid domain and hosting use করবেন , কিন্তু নাতুন বা যাদের আমার মতো টাকা নাই তারা কি করবেন ? আরে আমি বলতাছি ।
domain এর জন্য এই লিঙ্কে জান { এটা আমার রেফারাল লিঙ্ক ( tt নিতাছিল না তাই , short link করে দিলাম এতো কষ্ট করে পোস্ট লিখলাম কিছু তো দিবেন তাই না  ) তবুও আপনাদের ইচ্ছা না হলে সরাসরি registration করতে পারেন । }
LINK
এখানে এইরকম একটি পেজ দেখতে পাবেন ্‌

এখানে আপনার পছন্দের domain লিখে সার্চ দেন আমি এইটা দিলাম ttdemoforall.cu.cc

এরপরে 2 years select করেন , আর তাই কি হইছে 1 year অথবা 2 years সবই ত ফ্রী ফ্রী ......... (D)
এরপর checkout এ click করেন , এইরকম পেজ দেখতে পাবেন

ঝটপট account খুলেনিন ।
এর পরের পেজ এ my account এ click করে username এবং password দিয়ে login করুন এবং উপর থেকে my domains এ click করুন

এখন অই pencil টায় click করুন ।
এরকম পেজ আশবে

এখন nameserver এ click করুন

এখানে nameserver হিশেবে nsi.neq3.com
হ্যাঁ আমরা এখানে neq3 hosting ব্যবহার করব । এখন update এ click করুন ।
এখন পালা hosting এর
এই লিঙ্ক এ যান
link> ( এটাও আমার রেফারাল লিঙ্ক , কিছু তো দেন :D )
neq3.com hosting খুবই ভাল একটা free hosting site আমি গত ২ বছর ধরে neq3 ব্যবহার করছি । এদের feature গুলো সবার থেকে আলাদা । বলতে গেলে paid hosting এর মতই ।
এখন ঝটপট registration টা সেরে ফেলেন 
registration এর সময় mars plan select করে registration করবেন ।
তারপর cpanel.neq.com এ যান এবং আপনারফ email এবং password ফিএ login জরুন 
তাহলে এরকম পেজ দেখতে পাবেন

তারপর CONTROL PANEL এ CLICK করুন , তাহলে এরকম page দেখতে পাবেন 
 
এখন create new account এ click করুন তাহলে এরকম পেজ আশবে

এখানে hosting options থেকে venus select করুন ( আমরা venus নিব কারন তারা venus এ কোন ad দেয় না , আপনি যদি MARS select করেন তাহলে তারা জায়গা বুঝে একটা অথবা দুইটা দিবে )
তারপর এরকম পেজ আশবে

এখানে domain select করুন আমি ttdemoforall.cu.cc নিয়েছি । আপনি আপনার টা লেখবেন  ( আরে মনে নাই আমরা কি domain রেজিস্ট্রেশান করছিলাম  )
্তারপর create এ click করুন । এখন account create হয়ে যাবে ।
এখন আবার control panel এ যান এবং SWITCH এ ক্লিক করুন

এখন আপনি সরাসরি cpanel এ প্রবেশ করবেন , সেখানে details থেকে ftp এর সব detail গুল নিএ নেন ।

এখন filezilla দিয়ে connect করে default.php ফাইল টা delete করে দেন এবন আমাদের করা সবগুল ফাইল টেনে নিএ upload করে দেন ।

কাজ শেষ । ইচ্ছা করলে আমাদের মাত্র বানান সাইট টা একবার দেখে আস্তে পারেন
TTDEMOFORALL.CU.CC
আর আমাদের ব্যবহার করা code গুলো ইছা করলে ডাউনলোড করতে পারেন 
dropbox link
প্রায় ২ ঘন্টা ধরে শুয়ে শুয়ে এই পোস্ট টা লিখলাম । অসুস্থ তো । আপনাদের ভাল লাগলেই আমার কষ্ট সার্থক ।
আমি আজকে রোজা রাখছি । আপনারও মনে হয় রাখছেন ।
আমার জন্য দোয়া করবেন আমার সামনে JSC পরিক্ষা ( রাগ উঠে গেছে শিক্ষামন্ত্রী খালি সাজেশন বদালায়  :evil: )
তো ভাল থাকবেন , আজকে এখানেই বিদায় নিলাম .....................।।
আসসালামুয়ালিকুম ।
আপনাদের comment এর অপেক্ষায় থাকলাম ।
রোজার দিনে এই গানটা শুনতে খুব ভালই লাগতেছে ।
download মারেন
LINK

Level 0

আমি আমি কে !!!। বিশ্বের সর্ববৃহৎ বিজ্ঞান ও প্রযুক্তির সৌশল নেটওয়ার্ক - টেকটিউনস এ আমি 11 বছর 6 মাস যাবৎ যুক্ত আছি। টেকটিউনস আমি এ পর্যন্ত 11 টি টিউন ও 97 টি টিউমেন্ট করেছি। টেকটিউনসে আমার 0 ফলোয়ার আছে এবং আমি টেকটিউনসে 0 টিউনারকে ফলো করি।

টিউনস

আরও টিউনস

টিউনারের আরও টিউনস

টিউমেন্টস

Level 2

onek sundor hyse post ta. chaliye jan. ekhane kisu help paben asha kori.

http://codesschool.blogspot.com

Level 0

দারুন পদক্ষেপ। তবে বাংলাগুলো যদি একটু নতুন করে লিখতেন। তাহলে আমাদের উপকার হত।

    Level 0

    @micromission: ধন্যবাদ . . . . . . .এবং বাংলা লেখার বিষয়ে আমিও বুঝতেছি না কি হইছে , তারপরও দেখতেছি কী করা যায় . . . . . . . . .

Level 0

ভাই সব বুঝে করলাম। কিন্তু Filezilla দিয়ে কানেক্ট করলে স্ক্রীনে এরকম লেখা আসে।
Status: Connection attempt failed with “EAI_NONAME – Neither nodename nor servname provided, or not known”.
Error: Could not connect to server
একটু বুঝিয়ে বললে ভালো হতো।

    Level 0

    @mithun_halder: ভাই । বুঝলাম । আমার ,মনে হয় আপনি যখন connect করার জন্য চেশ্তা করেছেন তখন । neq3 এর server আপনার সাইট এর জন্য পুরপুরি তৈরি হয় নি । এখন try করতে পারেন । আর যদি না হয় , আমার সাথে যোগাযোগ কইরেন । আমি আছি 😀

Level 0

ভাই আমারও একই প্রবলেম দেখা দিচ্ছে
Status: Connection attempt failed with “EAI_NONAME – Neither nodename nor servname provided, or not known”.
Error: Could not connect to server
কতক্ষণ পর সার্ভার ঠিক হয় ?

Level 0

এখনো ঠিক হয়নাই

    Level 0

    @cityboy: আমারটা তো মাত্র ১০ মিনিটেই হইছে । তারা বলে সর্বচ্চ ১২ ঘন্টা লাগে ।