Post Search

HTML

ব্যাকগ্রাউন্ড (Background) Tutorials | SP Foundationbd

Background attribute এর সাহায্যে html টেবিলে ইমেজকে background image হিসাবে দেখানো যায়।

<table height="50" width="100"

background="http://www.SPFoundation.com/images/stories/imagel.jpg" >

<tr><td>This table has a background  image</td></tr>

</table>

প্রদর্শন:

This table has a background image

Html Background Repeat:

উপরের উদাহরনে দেখা গিয়েছে যে table এর আকার ছবির আকারের সমান বলে কোন সমস্যা হয় নি । যদি টেবিল এর আকার ছবির আকারের চেয়ে বড় হয় তবে background ছবি repeat হবে।

<table height="200" width="300"

background="http://www.SPFoundation.com/images/stories/imagel.jpg" >

<tr><td>This table has a background  image</td&g ..... ..... ......

Codeigniter

কোডইগনাইটার pagination tutorials (CodeIgniter Pagination Tutorial) - ২য় পদ্ধতিতে pagination

Query স্ট্রি ব্যবহার করে pagination

উপরের code ব্যবহার করেই এই pagination করা যাবে শুধু কনফিগারেশনে কিছু নতুন জিনিস যোগ করতে হবে।

কেন query string দিয়ে pagination: সবসময় ১ম পদ্ধতি কাজ করবেনা যেমন সার্চিং এর সময়। ১ম পদ্ধতি ব্যবহার করে কাজ ..... ..... ......

Codeigniter

Codeigniter পেজিনেশন Tutorials (CodeIgniter Pagination Tutorial) | SP Foundationbd

যখন কোন টেবিলে শত শত data থাকে তখন Pagination করা হয় কারন একসাথে সব row যদি একটা পেজে দেখাতে যান তাহলে লোড হতে অনেক সময় লাগবে তাছাড়া scroll করে দেখাও সমস্যা। কোডইগনাইটারে pagination করা খুব সহজ। কন্ট্রোলারে কয়েকটি configuration প্যারামিটার দিতে হয় এরপর ভিউ ফাইলে ১টা লাইন লিখলেই আপনার কাজ শেষ। বাকি সব কাজ কোডইগনাইটার একাই করবে।

 পেজিনেশন দুইভাবে করা যায়। প্রথমত URL এ কোয়েরি স্ট্রিং ছাড়া এবং দ্বিতীয়ত প্যারামিটার যেমন page number (কোয়েরি স্ট্রিং) ইত্যাদি ব্যবহার করে। ১ নম্ব ..... ..... ......

Codeigniter

Codeigniter bootstrap integration এবং best প্রাকটিস | SP Foundationbd

এই টিউটোরিয়ালে দেখাব কিভাবে কোডইগনাইটারের Project css javascript ফাইল ইত্যাদি রাখতে হয় এবং কোথায় রাখা সবচেয়ে ভাল। সাধারনত প্রফেশনালি "assets" নামের একটি ডিরেক্টরি তৈরী করে সেখানে এসব রাখা হয়। এই "assets" ফোল্ডারটি প্রজেক্টের root ডিরেক্টরিতে রাখবেন। যেমন

এবার এই "assets" এ js নামে একটি ফোল্ডার বানিয়ে প্রজেক্টের সব javascript file সেখানে রাখতে পারেন আবার ছবি থাকলে "images" নামের ডিরেক্টরি বানিয়ে সেখানে সব ছবি রাখতে পারেন। যেমন আমি রেখেছি দেখুন নিচের ছবিতে

Header Footer

প্রত্যেকটি ভিউয়ের যেটুকু প ..... ..... ......

CSS

How to learn সিএসএস লিংক | SP Foundationbd

Html link কে css দিয়ে চমৎকার style করা যায়। যেমন

1.a{

2.color: maroon;

3.text-decoration:none;

  1.  

5.}

 

এখন ধরুন আপনি চান লিংকের রং মেরুন রংয়ের দেখাক কিন্তু যখন একবার ইউজার লিংটিতে click করবে এরপর থেকে লাল দেখাবে যাতে করে ইউজার বুঝতে পারে কোন কোন লিংক সে visit করেছে। এসব করতে css বিশেষ ক্লাস আছে নাম pseudo-class.

কয়েক ধরনের সিডো class আছে যেমন

01.a{

02.color:maroon;

03.text-decoration:none;

04.}

05.a:visited{

06.color:red;

07.}

08.a:hover{

09.color: #000;

10.text-decoration : underline;

11.}

12.a:focus{

13.color: magenta;

14.}

15.a:active{

16.color: yellow;

17.}

 

** সিডো ক্লাস দিয়ে স্ ..... ..... ......

CSS

How to learn সিএসএস লিস্ট | SP Foundationbd

HTML এ দুই ধরনের এলিমেন্ট আছে list তৈরীর জন্য এটা আগে আমরা জেনে এসেছি। <ul></ul> এবং <ol></ol>

Navigation মেনু বা যেকোন তালিকা তৈরীর সময় এই ul, ol এবং li ব্যবহার করে থাকি। এই list styling এর জন্য সিএসএস এ বেশ কয়েকটি প্রোপার্টিজ আছে। যেমন

list-style-type, list-style-position, list-style-image, list-style, marker-offset

 list-style-type

যখন list তৈরী করা হয় তখন (ul দিয়ে) বাই ডিফল্ট প্রতিটি লিস্টের সামনে একটা করে বুলেট চলে আসে যেমন

1.<ul>

2.<li>HTML</li>

3.<li>CSS</li>

4.<li>PHP</li>

5.<li>MySQL</li>

6.</ul>

৭ নম্বর লাইনের "disc" বাই ডিফল্ট থাকে। অ ..... ..... ......

Jquery & Ajax

jQuery tooltip tutorial | SP Foundationbd

বিভিন্ন সাইটে দেখে থাকবেন কোন text, button, link ইত্যাদির উপর mouse নিয়ে গেলে মাউসের আশেপাশে কিছু অতিরিক্ত বর্ননা দেখায় এটাই টুলটিপ।আমি এখানে একটা ফর্মের জন্য tooltip তৈরী করে দেখাচ্ছি যেখানে প্রতিটি form ফিল্ডের উপর mouse নিয়ে গেলে এই ফিল্ডে কি ধরনের তথ্য দিয়ে পুরন করতে হবে তা দেখাবে।

index.html ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title>SPFoundationbd ToolTip tutorials</title>

05.<link rel="stylesheet" href="/style.css" type="text/css">

06.<script type="text/javascript" src="/jquery_latest.js"></script>

07.<script type="text/javascript" src="/script.js"></script>

08.</head>

09.<body>

10.<h ..... ..... ......

CSS

How to learn সিএসএস বর্ডার | SP Foundation

HTML element এর চারপাশে border দেয়া যায়। border-style, border-width, border-color ইত্যাদি প্রোপার্টি দিয়ে এই বর্ডারের অনেক style করা যায়।

যেমন

01.p.one {

02.border-style: solid;

03.border-width: 3px;

04.border-color: maroon;

  1.  

06.}

  1.  

08.p.two {

09.border-style: solid;

10.border-width: medium;

11.}

12.p.three{

13.border-style: double;

14.}

15.p.four{

16.border-style: groove;

17.}

18.p.five{

19.border-style: dotted;

20.}

21.p.six{

22.border-style: dashed;

23.}

24.p.seven{

25.border-style: inset;

26.}

  1.  

28.p.eight{

29.border-style: outset;

30.}

31.p.nine{

32.border-style: ridge;

33.}

34.p.ten{

35.border-style: hidden;

36.}

** border-width প্রোপার্টি টি একা থাকলে কাজ করবেনা, তার আগে border ..... ..... ......

Jquery & Ajax

jQuery form validation | SP Foundationbd

যেকোন সাইটের Application নিয়ে কাজ করার সময় সাধারনত form লাগে। Registration form, জরিপ form, Login form  ইত্যাদি।যাইহোক এরুপ form থাকলে validation রাখতে হয়।যদি server side (php) validation রাখেন তাহলে এটা ইউজারের জন্য বেশ বিরক্তিকর।যতক্ষন পর্যন্ত ডেটাবেস থেকে কোন মান চেক করতে না হয় ততক্ষন server সাইড validation না রাখাই ভাল। Jquery দিয়েই সব ধরনের validation করা সম্ভব।নিচের একটি উদাহরন ব্যাখ্যাসহ দেয়া হল।

index.html ফাইল

01.<!DOCTYPE html>

02.<html>

03.<head>

04.<title>SP Foundationbd form validation tutorials</title>

05.<link rel="stylesheet" href="/style.css" type="text/css"/>

06.<script src="/jquery_latest.js" type="text/javascript">< ..... ..... ......

CSS

How to learn সিএসএস প্যাডিং | SP Foundation

Padding হচ্ছে html এলিমেন্টের বর্ডার এবং কনটেন্টের মাঝখানের দুরত্ব। যেকোন একটা html এলিমেন্টে css দিয়ে বর্ডার দিন এবার সেখানে padding দিন তাহলে স্পষ্ট দেখতে/বুঝতে পারবেন যে প্যাডিং দিলে কোথায় ফাকা বা স্পেস বাড়ে। যেমন

1.border : 2px solid #fff;

2.padding : 5px; 

padding : 5px; দেয়াতে এলিমেন্টের চারিদিকে ৫ পিক্সেল করে স্পেস হবে। শুধু একদিকে বা কয়েক দিকেও প্যাডিং দেয়া যায়। যেমন

1.padding-top : 5px;

2.padding-bottom: 5px;

3.padding-right: 5px;

4.padding-left: 5px;

এভাবে চারবার লেখার কাজ একবারে করা যায়, এটাকে শর্টহ্যান্ড প্রোপার্টি ..... ..... ......