সুপ্রিয় পাঠক, আনলাইনে আয়ে ঢাকার অবস্থান পৃথিবীতে তৃতীয়। ভারতের চেন্নাই ও ফিলিপাইনের ম্যানিলার পর ঢাকার প্রোগ্রামাররা অবস্থান করে নিয়েছে। অসংখ্য মানুষ অনলাইনে কাজকরে আয় করছে মাসে লক্ষ্য লক্ষ্য টাকা। সমপ্রতি বেসিস এর উদ্যোগে পুরস্কার ও সম্মানিত করা হল বাংলাদেশে আউটসোর্সিং কাজের শীর্ষে আছে এ রকম ১০ জনকে। নানা উপায়ে আয় করতে পারেন আপনি । তবে অনেকেই না বুঝে মূল্যবান সময় নষ্ট করে PTC নামের জালে। কেউ বা ব্লগিং করেও আয় করছেন কিছু কিছু। কিন্তু আমরা আপনাকে উপযোগী করে তুলতে চাই সবচেয়ে নির্ভরযোগ্য ও সম্মানজনক কাজের জন্য। আর এ জন্যই PSD To HTML এবংJoomla TEMPLATING কাজে দক্ষ করে তোলার জন্য এই আয়োজন। ২ টি পর্ব যারা পাননি তারা অবশ্যই সংগ্রহ করে নিবেন ধারাবাহিক এই আয়োজনে আমাদের সাথে থাকুন। আপনিও ক্রমান্বয়ে হয়ে উঠবেন দক্ষ আউটসোর্সার
সুপ্রিয় পাঠক, সবাইকে অসংখ্য শুভেচ্ছা জানাচ্ছি । ফাল্গুনের শুরুতে বিশ্ব ভালবাসা দিবসের মধূর ভালবাসার ছোয়া লাগুক সবার। ভালবাসার জন্য মাঝে মাঝে খরচ ও তো দরকার। ঘরে বসে যদি বেশ কিছু টাকা আয় করা যায় তো মন্দ কি?
আগের পর্বে আমরা শিখেছিলাম, কিভাবে একটা HTML File এবং CSS তৈরী করে Link করা যায়। আজ আমরা শিখব একটা Index তৈরী করার জন্য কিভাবে শুরু করবেন। Index Page হল একটা ওয়েব সাইটের প্রথম Page . কেউ একজন একটা ওয়েব এড্রেস এ ঢুকলে প্রথমেই এই Pageটি আসবে। এখন আমরা জানবDiv base HTML ও CSS দিয়ে কাজ করার সময় কিভাবে Plan করা হবে।
একটা Page কে তিনটি ভাগে ভাগ করে ফেলতে হবে Program এর সুবিধার্থে। ভাগ তিনটি হল Top, Middle, Bottom সাধারনত Top ও Botton এ কোন পরিবর্তন হয় না। অর্থাৎ Middleঅংশের ছবি, লেখা মাঝে মাঝে আপডেট হতে পারে তবে অন্য দুটি অংশে খুব বেশি পরিবর্তন হয় না। Top অংশের মাঝে সাধারনত থাকে Logo, Small Menu, Main Menu Slogan, ইত্যাদি। আমরা MTA এরWeb টাতেলক্ষ্য করি।Top অংশের মাঝে আছে Logo Slogan Small Menu এবং Main Menu . আমরা Main Menu কে Nav নামে অভিহিত করব। যা Navigation বোঝায়। তাহলে তিনটি ভাগের জন্য আমাদের তিনটি উরা প্রয়োজন। আমরা index.html এর মাঝে নিচেরCode টুকু লিখব।
<html>
<head>
<title>MTA Home Page</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div class="top"> </div>
<div class="middle"> </div>
<div class="bottom"></div>
</div>
</body>
</html>
উপরের কোডটুকু html file অর্থাৎ index.html এর মাঝে লেখার পর Save করে রাখুন। এখন খুলুনStyle.css file টি এবং তার মাঝে থাকবে নিচের কোডটুকু।
#wrapper {
width:800px;
margin:0px auto;
min-height:800px;
}
.top {
width:100%;
margin-top:15px;
background:url(../images/top_bg.png) no-repeat top;
}
.middle {
width:775px;
margin:0 auto;
}
.bottom {
width:100%;
padding-bottom:10px;
}
এবার CSS File এর কোডটুকু লেখা শেষে ঝধাব করুন, তার পর index.html File টি Fire Fox দিয়ে খুলে দেখুন ফলাফল কি যদি Image না পায় তবে বুঝতে হবে Image Location পাচ্ছে না। Imageগুলো Download করে নিতে পারেন এই www.icdbd.com/images.htm থেকে। আপনারFolder এর মাঝে তাহলে থাকবে Images ও CSS নামে দুটি Folder ও Index.html File. CSS এর মাঝে Style.CSS ও Image এর মাঝে Image এর Slice গুলো। আগামী পর্বে খুব গুরুত্বপূর্ণ একটি কাজ শিখব। তাহল Menu তৈরী করা। এই কাজটির জন্য আজকে পর্যন্ত যে বিষয়গুলি শেখানো হল তা বার বার চর্চা করে কোন অসুবিধা থাকলে তা দূর করে ফেলুন। আপনি ধীরে ধীরে প্রবেশ করছেন প্রোগ্রামিং এর গভীরে। নিজেকে তার জন্য প্রস্তুত করতে থাকুন। যদি এই পর্বেই আটকে যান তবে সামনে এগোনোর পথ হারিয়ে যাবে। একটা চক্রে ঘুরতে থাকবেন। কাজেই কোন সমস্যায় যোগাযোগ করার দরকার হলেcombarta@gmail.com এই ঠিকানায়।
সবাইকে অনেক অনেক শুভেচ্ছা জানিয়ে আজকের পর্ব এখানেই শেষ করছি। সবাই ভালো, সুস্থ থাকুন।
সুপ্রিয় পাঠক, সবাইকে অসংখ্য শুভেচ্ছা জানাচ্ছি । ফাল্গুনের শুরুতে বিশ্ব ভালবাসা দিবসের মধূর ভালবাসার ছোয়া লাগুক সবার। ভালবাসার জন্য মাঝে মাঝে খরচ ও তো দরকার। ঘরে বসে যদি বেশ কিছু টাকা আয় করা যায় তো মন্দ কি?
আগের পর্বে আমরা শিখেছিলাম, কিভাবে একটা HTML File এবং CSS তৈরী করে Link করা যায়। আজ আমরা শিখব একটা Index তৈরী করার জন্য কিভাবে শুরু করবেন। Index Page হল একটা ওয়েব সাইটের প্রথম Page . কেউ একজন একটা ওয়েব এড্রেস এ ঢুকলে প্রথমেই এই Pageটি আসবে। এখন আমরা জানবDiv base HTML ও CSS দিয়ে কাজ করার সময় কিভাবে Plan করা হবে।
একটা Page কে তিনটি ভাগে ভাগ করে ফেলতে হবে Program এর সুবিধার্থে। ভাগ তিনটি হল Top, Middle, Bottom সাধারনত Top ও Botton এ কোন পরিবর্তন হয় না। অর্থাৎ Middleঅংশের ছবি, লেখা মাঝে মাঝে আপডেট হতে পারে তবে অন্য দুটি অংশে খুব বেশি পরিবর্তন হয় না। Top অংশের মাঝে সাধারনত থাকে Logo, Small Menu, Main Menu Slogan, ইত্যাদি। আমরা MTA এরWeb টাতেলক্ষ্য করি।Top অংশের মাঝে আছে Logo Slogan Small Menu এবং Main Menu . আমরা Main Menu কে Nav নামে অভিহিত করব। যা Navigation বোঝায়। তাহলে তিনটি ভাগের জন্য আমাদের তিনটি উরা প্রয়োজন। আমরা index.html এর মাঝে নিচেরCode টুকু লিখব।
<html>
<head>
<title>MTA Home Page</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div class="top"> </div>
<div class="middle"> </div>
<div class="bottom"></div>
</div>
</body>
</html>
উপরের কোডটুকু html file অর্থাৎ index.html এর মাঝে লেখার পর Save করে রাখুন। এখন খুলুনStyle.css file টি এবং তার মাঝে থাকবে নিচের কোডটুকু।
#wrapper {
width:800px;
margin:0px auto;
min-height:800px;
}
.top {
width:100%;
margin-top:15px;
background:url(../images/top_bg.png) no-repeat top;
}
.middle {
width:775px;
margin:0 auto;
}
.bottom {
width:100%;
padding-bottom:10px;
}
এবার CSS File এর কোডটুকু লেখা শেষে ঝধাব করুন, তার পর index.html File টি Fire Fox দিয়ে খুলে দেখুন ফলাফল কি যদি Image না পায় তবে বুঝতে হবে Image Location পাচ্ছে না। Imageগুলো Download করে নিতে পারেন এই www.icdbd.com/images.htm থেকে। আপনারFolder এর মাঝে তাহলে থাকবে Images ও CSS নামে দুটি Folder ও Index.html File. CSS এর মাঝে Style.CSS ও Image এর মাঝে Image এর Slice গুলো। আগামী পর্বে খুব গুরুত্বপূর্ণ একটি কাজ শিখব। তাহল Menu তৈরী করা। এই কাজটির জন্য আজকে পর্যন্ত যে বিষয়গুলি শেখানো হল তা বার বার চর্চা করে কোন অসুবিধা থাকলে তা দূর করে ফেলুন। আপনি ধীরে ধীরে প্রবেশ করছেন প্রোগ্রামিং এর গভীরে। নিজেকে তার জন্য প্রস্তুত করতে থাকুন। যদি এই পর্বেই আটকে যান তবে সামনে এগোনোর পথ হারিয়ে যাবে। একটা চক্রে ঘুরতে থাকবেন। কাজেই কোন সমস্যায় যোগাযোগ করার দরকার হলেcombarta@gmail.com এই ঠিকানায়।
সবাইকে অনেক অনেক শুভেচ্ছা জানিয়ে আজকের পর্ব এখানেই শেষ করছি। সবাই ভালো, সুস্থ থাকুন।
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন