Mar 29

jQuery ইফেক্টস – জাপ্সা ইফেক্ট । jQuery Effects – Fading

আলামিন মনির

 

jQuery এর ফেইড পদ্ধতি নিম্নে দেয়া হলঃ

JQuery দিয়ে আপনি একটি লেখাকে দৃশ্যমানতা এবং এই উপাদানটি আউট/বিবর্ণ করতে পারেন।

jQuery এর নিম্নলিখিত বিবর্ণ পদ্ধতি আছে:

fadeIn()

JQuery এর FadeIn () মেথড প্রদর্শন করে।

jQuery fadeOut()

JQuery এর Fadeout () মেথড প্রদর্শন করে।

jQuery fadeToggle()

JQuery এর fadeToggle () মেথড প্রদর্শন করে।

jQuery fadeTo()

JQuery এর fadeTo () মেথড প্রদর্শন করে।

 

jQuery এর FadeIn () পদ্ধতি

JQuery তে FadeIn () মেথডটি লুকানো উপাদান দেখতে ব্যবহার করা হয়।

Syntax 
$(selector).fadeIn(speed,callback);

আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে FadeIn () মেথড দেখানো হলঃ

যেমনঃ

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

ফলাফল : fadeIn()

 

jQuery এর fadeout () পদ্ধতি

JQuery এর fadeout () মেথড দিয়ে একটি দৃশ্যমান উপাদানকে আউট করতে ব্যবহার করা হয়।

Syntax 
$(selector).fadeOut(speed,callback);

 

এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeout () মেথড দেখানো হলঃ

যেমনঃ

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

ফলাফল : fadeOut()

 

jQuery এর fadeToggle () পদ্ধতি

JQuery এর fadeToggle () মেথড হচ্ছে FadeIn () এবং fadeout () পদ্ধতির মধ্যে পার্থক্য।

উপাদান কে হাইড করে দেয়,এবং fadeToggle () তাদের আবার বিবর্ণ করে দেয়।

উপাদান কে হাইড করে দেয় এবং fadeToggle () তাদের আবার দৃশ্যমান করে দেয়।

Syntax 
$(selector).fadeToggle(speed,callback);

এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড।

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeToggle () মেথড দেখানো হলঃ

যেমনঃ

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

ফলাফল : fadeToggle()

 

jQuery এর fadeTo () পদ্ধতি

JQuery এর fadeTo () মেথড (0 এবং 1 এর মধ্যে মান) একটি প্রদত্ত অস্বচ্ছতা ফেইড দেখাতে পারবেন।

Syntax
$(selector).fadeTo(speed,opacity,callback);

এখানেও আপনি ইফেক্ট প্যারামিটার ব্যবহার করে গতি নির্ধারণ করে দিতে পারেন। নিম্নলিখিত মান গ্রহণ করতে পারেন: “ধীর”, “দ্রুত”, বা মিলিসেকেন্ড।

FadeTo () মেথড প্রয়োজন অস্বচ্ছতা করতে প্যারামিটারের মান দিয়ে দিতে পারবেন। অস্বচ্ছতা ফেইড নির্দিষ্ট (0 মধ্যে মান 1) এর মধ্যে।

অপশনাল কলব্যাক প্যারামিটারটি ফেইড সমাপ্ত হওয়া পর্যন্ত কার্যকর থাকে।

নিম্নলিখিত উদাহরণে বিভিন্ন পরামিতি সঙ্গে fadeTo () মেথড দেখানো হলঃ

$("button").click(function(){
     $("#div1").fadeTo("slow", 0.15);
     $("#div2").fadeTo("slow", 0.4);
     $("#div3").fadeTo("slow", 0.7);
 });

ফলাফল : fadeTo()

Mar 29

আপনার ওয়েব পেজ এ যেভাবে JQuery ব্যবহার/Install করবেন । Installing JQuery Library

আপনার ওয়েব পেজ এ যেভাবে JQuery ব্যবহার/Install করবেন । Installing JQuery Library ।
Name: Md. Ariful Islam. Edited by Sayed Ahmed
============================================
আপনার ওয়েব সাইটে jQuery ব্যবহার করার জন্য বেশ কিছু উপায় আছে।যেমন:
*JQuery.com থেকে jQuery লাইব্রেরি ডাউনলোড করে ব্যবহার করা।
*অথবা, CDN (Content Delivery Network) থেকে jQuery ব্যবহার করা। কিছু CDN যেমন: গুগল, মাইক্রোসফট এর CDN

jQuery ডাউনলোড করে ব্যবহার-
…………………………………………………
ডাউনলোড করার জন্য jQuery এর দুটি সংস্করণ পাওয়া যায়। সেগুলি হল:
১. Production সংস্করণ।-এটা minified version এটাকে সংকুচিত/compressed করা হয়েছে, কারণ এটা আপনার লাইভ ওয়েবসাইট এ ব্যবহার করার জন্য।এটা জায়গা কম নেয় এবং দ্রুত লোড হয় ।
২. Development সংস্করণ।-এটা পরীক্ষামূলক ব্যবহার করার জন্য এবং এটা একটা পাঠযোগ্য কোড। এটার বিস্তারিত আমরা পরবর্তীতে জনবো। আপনি ডেভেলপ করার সমই আএই ভারসন ব্যবহার করে কোড ডিবাগ করতে পারবেন।

দুটি সংস্করণই jQuery.com থেকে ডাউনলোড করা যাবে।

JQuery লাইব্রেরি একটি একক জাভাস্ক্রিপ্ট ফাইল।

আপনার ডাউনলোড করা jQuery ফাইলটি একই ডিরেক্টরির/folder এর মধ্যে রাখুন। তারপর HTML Script tag ব্যবহার করে HTML file থেকে jquery library কে পয়েন্ট করুন।

 

<head>
<script src=”jquery-1.11.1.min.js”></script>
</head>

——

CDN থেকে কিভাবে JQuery ব্যবহার করবেন

 

Google CDN:

<head>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
</head>

Microsoft CDN:

<head>
<script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js”></script>
</head>

গুগল বা মাইক্রোসফট থেকে হোস্ট থেকে jQuery ব্যবহার করার বড় সুবিধা হল:

অনেকেই হইত CDN থেকে ইতিমধ্যে JQuery ডাউনলোড করেছে যখন অন্য ওয়েবসাইট ব্রাউজ করেছে। সেহেতু তাদের কম্পিউটারে আপনার ওয়েবসাইট তারাতারি লোড হবে কারন JQuery তাদের cache থেকে লোড হবে। ব্যবহারকারী অন্য সাইট ভিজিট করার সময় যখন গুগল বা মাইক্রোসফট থেকে jQuery ডাউনলোড করে তখন তা তার browser এর cache তে থাকে । পরবর্তীতে অন্য কোন jQuery সাইট ভিজিট করলে website টি cache থেকে jquery ডাটা নিয়ে খুব দ্রুত লোড হয়।

Mar 29

JQuery Introduction : JQuery শুরুর কথা

JQuery Introduction : JQuery শুরুর কথা : Partially edited by Sayed Ahmed

আপনার jQuery সম্পর্কে জানার আগে কয়েকটি মৌলিক জ্ঞান থাকতে হবেঃ
এইচটিএমএল
সিএসএস
জাভাস্ক্রিপ্ট

JQuery কি?

JQuery একটি লাইটওয়েট, জাভাস্ক্রিপ্ট লাইব্রেরি। JQuery এর উদ্দেশ্য হচ্ছে সহজভাবে আপনার ওয়েবসাইটে জাভাস্ক্রিপ্ট ব্যবহার করা। JQuery দ্বারা অনেকটা একই ধরনের কাজ করা হয়, যে পদ্ধতিটি হল জাভাস্ক্রিপ্ট এর অনেকগুলো লাইন কোড আকারে সাজিয়ে সেগুলোকে একটিমাত্র লাইনের কোডে বসানোর পদ্ধতি।
JQuery হল জাভাস্ক্রিপ্ট, AJAX ও DOM দক্ষতার সাথে ব্যবহার এর জটিল বিষয়সমূহকে আরও অনেক সহজসাধ্য করা।

JQuery লাইব্রেরি এর নিম্নলিখিত আরও কিছু বৈশিষ্ট্য রয়েছেঃ
এইচটিএমএল / DOM ম্যানিপুলেশন
সিএসএস এর ম্যানিপুলেশন
এইচটিএমএল ঘটনা পদ্ধতি
ইফেক্ট এবং অ্যানিমেশন
AJAX এর
ইউটিলিটি

কেন JQuery?
আরও অন্যান্য অনেক জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কস বা অবকাঠামো রয়েছে কিন্তু JQuery বর্তমানে সবচেয়ে জনপ্রিয় এবং সবচেয়ে বাড়তি সুবিধাজনক মনে হয়। অনেক বড় বড় জনপ্রিয় কোম্পানির ওয়েবসাইটে JQuery ব্যবহার করে থাকে। যেমন-
গুগল
মাইক্রোসফট
আইবিএম
Netflix
ইতাদি আরও সাইট রয়েছে…

এখন প্রশ্ন JQuery এর সব ব্রাউজারে কাজ করবে?
JQuery ইন্টারনেট এক্সপ্লোরার 6 সহ সব প্রধান ব্রাউজারগুলোতে ঠিকভাবে কাজ করবে।

Mar 29

JQUERY নীড়: JQuery ভুমিকা

ফয়সাল রকি : Partially edited by Sayed Ahmed

JQuery হলো JavaScript এর Library. JavaScript প্রোগ্রামকে সহজীকরণ করে। এর সাহায্যে জটিলতম JavaScript প্রোগ্রামগুলোকে সহজে একসূত্রে গাঁথা যায়। খুব সামান্য চেষ্টা এবং শ্রম ব্যয় করে আপনি JQuery শিখতে পারবেন।

উদাহরণ:
$(document).ready(function(){
$(“p”).click(function(){
$(this).hide();
});
});

JQuery উদাহরণ

উদাহরণের সাহায্যে শিক্ষন একটি আধুনিক প্রক্রিয়া! এই ওয়েবসাইটে JQuery এর প্রচুর উদাহরণ রয়েছে। উদাহরণগুলো ধারাবাহিকভাবে বিন্যস্ত করা আছে.

JQuery রেফারেন্স

JQuery এর পরিপূর্ণ শিক্ষণের জন্য এর অবজেক্ট ও মেথড সম্পর্কে যথার্থ শিক্ষা উপকরণ প্রয়োজন। এই ওয়েবসাইটে অবজেক্ট ও মেথড সম্পর্কে পরিপূর্ণ রেফারেন্স পাওয়া যাবে।

—————–

Mar 29

Google Maps- এর প্রাথমিক ধারনা. একটি মৌলিক গুগল ম্যাপ তৈরি করুন. Create a simple Google Map of a Location

Paste the translated text here
Google Maps- কি?Google Maps- এ আপনি সর্বদা আপনার ওয়েব সাইটে মানচিত্র প্রদর্শন করতে পারবেন:
Google Maps API
এই টিউটোরিয়ালটি গুগল ম্যাপস এপিআই (অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস) সম্পর্কে.
গুগল ম্যাপস এপিআইর সঙ্গে, আপনি আপনার মানচিত্র এবং মানচিত্র তথ্য. নিজের মতো করে (কিছু) পরিবর্তন করতে পারেন,.
একটি API সফ্টওয়্যার অ্যাপ্লিকেশন নির্মাণের জন্য যে পদ্ধতি এবং সরঞ্জাম ব্যবহার করা যেতে পারে তার একটি সংকলন.
Google Maps- এ প্রাথমিক ধারনা
একটি মৌলিক গুগল ম্যাপ তৈরি করুন
লন্ডন, ইংল্যান্ড কেন্দ্রিক একটি Google ম্যাপ:তৈরি করে এই উদাহরণটি করাঃ
উদাহরণঃ
<!DOCTYPE html>
<html>
<head>
<script
src=”http://maps.googleapis.com/maps/api/js”>
</script><script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);
}
google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>

<body>
<div id=”googleMap” style=”width:500px;height:380px;”></div>

</body>
</html>
এটা নিজে চেষ্টা করে দেখুন»
এই পৃষ্ঠার বাকি অংশ উপরের উদাহরণে ধাপে ধাপে বর্ণনা করা হলো.
1. Load the Google API
গুগল ম্যাপস এপিআই জাভাস্ক্রিপ্ট লাইব্রেরি. এটি একটি স্ক্রিপ্ট ট্যাগের সঙ্গে একটি ওয়েব পৃষ্ঠা যোগ করা যেতে পারে:
<script src=”http://maps.googleapis.com/maps/api/js”></script>

2. মানচিত্রের বৈশিষ্ট্য ঠিক করা

মানচিত্র আরম্ভ করার জন্য একটি ফাংশন তৈরি করুন:
function initialize() {
}
ফাংশনের শুরুতে, মানচিত্র জন্য বৈশিষ্ট্য নির্ধারণ করতে একটি বস্তু (mapProp) তৈরি করতে হবে:
var mapProp = {
center:new google.maps.LatLng(51.508742, -0.120850),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
কেন্দ্রিয় ভূসম্পত্তিটি নির্দিষ্ট করে যেখানে ম্যাপ কেন্দ্র. একটি নির্দিষ্ট বিন্দু ম্যাপ কেন্দ্র একটি অক্ষাংশ দ্রাঘিমাংশ বস্তুর তৈরি করুন. যাতে স্থানাঙ্ক পাস: অক্ষাংশ, দ্রাঘিমাংশ.

zoom ভূসম্পত্তিটি নির্ধারণ করে মানচিত্রের zoom স্তর . zoom: 0 পৃথিবীর একটি মানচিত্র zoomed out সম্পূর্ণরূপে দেখায়. উচ্চ zoom স্তর একটি উচ্চ রেজল্যুশনের zoom.

MapTypeId সম্পত্তি প্রদর্শন মানচিত্র ধরন নির্ধারণ করা হয়.

নিম্নলিখিত মানচিত্র ধরনের সমর্থিত হবে:

রোডম্যাপ (স্বাভাবিক, ডিফল্ট 2D ম্যাপ)
উপগ্রহ (ফোটোগ্রাফিক ম্যাপ)
হাইব্রীড (ফোটোগ্রাফিক মানচিত্র + + সড়ক ও শহরের নাম)
ভূখণ্ড (ইত্যাদি পাহাড়, নদী, সঙ্গে ম্যাপ)

3. একটি মানচিত্র ধারক তৈরি করুন

মানচিত্রে “contain” একটি নামে <div> এলিমেন্ট তৈরি করুন. আকার উপাদান CSS ব্যবহার করুন:
উদাহরণ
<div id=”googleMap” style=”width:500px;height:380px;”></div>

4. একটি মানচিত্রের লক্ষ্য তৈরি করুন
উদাহরণঃ
var map=new google.maps.Map(document.getElementById(“googleMap”), mapProp);
5. মানচিত্র লোড করার একটি Event Listener যোগ করুন

উইন্ডো লোড (পৃষ্ঠা লোড করা হয়) উপর আরম্ভ () ফাংশন চালানো হবে যে একটি DOM শ্রোতা যুক্ত করুন:
google.maps.event.addDomListener(window, ‘load’, initialize);

Asynchronously Loading
এটির সাহায্যে গুগল ম্যাপস এপিআই লোড করা সম্ভব.

উদাহরণ নিচে পাতা সম্পূর্ণরূপে লোডের পর গুগল ম্যাপস এপিআই লোড window.onload ব্যবহার করে.

LoadScript () ফাংশন গুগল ম্যাপস এপিআই <script> ট্যাগ সৃষ্টি করে. API- টি সম্পূর্ণরূপে লোড হয় উপরন্তু, কলব্যাক = আরম্ভ পরামিতি আরম্ভ () ফাংশন চালানো URL এর শেষে যোগ করা হয়েছে:
<!DOCTYPE html>
<html>
<head>
<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:7,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp);
}

function loadScript()
{
var script = document.createElement(“script”);
script.type = “text/javascript”;
script.src = “http://maps.googleapis.com/maps/api/js?key=&sensor=false&callback=initialize”;
document.body.appendChild(script);
}

window.onload = loadScript;
</script>
</head>

<body>
<div id=”googleMap” style=”width:500px;height:500px;”></div>

</body>
</html>

এটা নিজে চেষ্টা করে দেখুন»

একাধিক মানচিত্র

উদাহরণস্বরূপ নিচের ওয়েব পৃষ্ঠা (বিভিন্ন মানচিত্র ধরনের সঙ্গে চার মানচিত্র) চার মানচিত্র সংজ্ঞায়িত:
<!DOCTYPE html>
<html>
<head>
<script
src=”http://maps.googleapis.com/maps/api/js”>
</script>

<script>
function initialize()
{
var mapProp = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapProp2 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapProp3 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var mapProp4 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById(“googleMap”),mapProp);
var map2 = new google.maps.Map(document.getElementById(“googleMap2”),mapProp2);
var map3 = new google.maps.Map(document.getElementById(“googleMap3”),mapProp3);
var map4 = new google.maps.Map(document.getElementById(“googleMap4″),mapProp4);
}

google.maps.event.addDomListener(window, ‘load’, initialize);
</script>
</head>

<body>
<div id=”googleMap” style=”width:400px;height:300px;”></div>
<br>
<div id=”googleMap2″ style=”width:400px;height:300px;”></div>
<br>
<div id=”googleMap3″ style=”width:400px;height:300px;”></div>
<br>
<div id=”googleMap4″ style=”width:400px;height:300px;”></div>

</body>
</html>
এটা নিজে চেষ্টা করে দেখুন»

Google API Key
Google allows your web site to call any Google API, many thousand times per day.
গুগল সর্বদা আপনার ওয়েব সাইটে যে কোন গুগল এপিআই, প্রতিদিন অনেক হাজার হাজার গুণ কল করতে পারবেন.

আপনি ভারী ট্রাফিকের জন্য পরিকল্পনা, আপনি গুগল থেকে একটি বিনামূল্যে API Key পাওয়া উচিত.

একটি বিনামূল্যে Key পেতে https://console.developers.google.com এ যান.

যেখানেএকটি API লোড হয় সেখানে Google Maps- key parameter এর মধ্যে API key টি খুঁজে পেতেআশা করে
<script src=”http://maps.googleapis.com/maps/api/js?key=YOUR_KEY”></script>

Mar 29

এইচটিএমএল অনুচ্ছেদ. HTML Paragraphs

Paste the translated text here
এইচটিএমএল অনুচ্ছেদ
________________________________________
এইচটিএমএল তথ্য গুলো অনুচ্ছেদ আকারে দেয়া হয়
________________________________________
এইচটিএমএল অনুচ্ছেদ
এইচটিএমএল <p> উপাদান গুলকে অনুচ্ছেদ বলে ।
উদাহরন
<p> এটা একটা অনুচ্ছেদ </p>
<p> এটা আরেকটা অনুচ্ছেদ </p>
ব্রাউজার সয়ংক্রিয় ভাবে শূন্য যাইগা যোগ করে দিবে অনুচ্ছেদ এর আগে ও পরেএইচটিএমএল দেখুন
আপনি নিশ্চিত হতে পারবেন না কিভাবে এইচটিএমএল অনুচ্ছেদ দেখান হবে ।
ছোট অথবা বড় পর্দা এবং আকার পরিবর্তন করা উইন্ডোজ গুলো আলাদা আলাদা দেখাবে ।
এইচটিএমএল দিয়ে আপনি বাইরের জিনিস পরিবর্তন করতে পারবেন না, অথবা অতিরিক্ত ফাকা যাইগা অথবা বেশি সারি রেখে এইচটিএমএল সুত্র এর মাধ্যমে ।
আপনার ব্রাউজার টি পেজ দেখানোর সময় অতিরিক্ত ফাকা জাইগা অথবা সারি মুছে ফেলবে ।
যেকোনো ফাকা জাইগা অথবা ফাকা সারি একটা ফাকা জাইগা হিসেবে ধরা হবে ।
উদাহরন
<p>
এই অনুচ্ছেদটাতে অনেক ফাকা জাইগা আছে কিন্তু ব্রাউজার সেটা গণ্য করবে না

</p>

<p>
এই অনুচ্ছেদটাতে অনেক ফাকা জাইগা আছে কিন্তু ব্রাউজার সেটা গণ্য করবে না

________________________________________
কখনোই শেষ এ ট্যাগ যুক্ত করতে ভুলবেন না ।
অধিকাংশ ব্রাউজারই এইচটিএমএল সঠিকভাবে দেখাবে যদিও আপনি শেষে ট্যাগ যুক্ত করতে ভুলে গিয়ে থাকেন ।
উদাহরন
<p> এটি একটি উদাহরন
<p> এটা আরেকটা উদাহরনTry it Yourself »
উদাহরন গুলো মোটামুটি সবগুল ব্রাউজার এই কাজ করবে কিন্তু এর উপর নির্ভরশীল হওয়া যাবে না ।
শেষে ট্যাগ যুক্ত করতে ভুলে গেলে অনাকাঙ্ক্ষিত ভুল ফলাফল দেখাবে ।
এইচটিএমএল এর উন্নত ভার্সন গুলো যেমন একসএইচটিএমএল আপনাকে শেষে ট্যাগ যুক্ত না করা গ্রহন করবে না ।

এইচটিএমএল লাইন ভাঙা
এইচটিএমএল <br> গুলকে লাইন ভাঙা বলে ।
<br> ব্যাবহার করুন যদি আপনি লাইন ভাঙতে চান নতুন অনুচ্ছেদ শুরু না করেই ।
উদাহরন
<p>This is<br>a para<br>graph with line breaks</p>
নিজে চেষ্টা করুণ
<br> এই উপাদানটি এইচটিএমএল শূন্য উপাদান । এখানে কোন ট্যাগ নেই ।
________________________________________

কবিতার সমস্যা
উদাহরন
<p> এই কবিতাটি এক সারিতে দেখাবে </p>

<p>

বনি সাগরে শুয়ে থাকে
বনি নদিতে শুয়ে থাকে
বনি সাগরে শুয়ে থাকে
ওহ বনিকে আমার কাছে এনে দাও

</p>

নিজে চেষ্টা করুন
________________________________________
এইচটিএমএল <pre> উপাত্ত
এইচটিএমএল <pre> উপাত্ত গুলো আগে থেকে ঠিক করা লেখা বোঝায় যেখানে সঠিক ফাকা যাইগা ও সারি আছে ।
যে কোন কিছু দেখাতে হলে , সঠিক ফাকা যাইগা ও লাইন ভাঙ্গার আপনাকে লেখাটিকে মুড়ে ফেলতে হবে <pre> ।
উদাহরন
<p> এটা কবিতার মত দেখাবে </p>

<pre>

বনি সাগরে শুয়ে থাকে
বনি নদিতে শুয়ে থাকে
বনি সাগরে শুয়ে থাকে
ওহ বনিকে আমার কাছে এনে দাও

</pre> নিজে চেষ্টা করুন
________________________________________
আপনার অভিজ্ঞতা থেকে যাচাই করুন
অভিজ্ঞতা ১ অভিজ্ঞতা ২ অভিজ্ঞতা ৩
________________________________________
এইচটিএমএল ট্যাগ এর সুত্র
W3Schools’ ট্যাগ সুত্র এইচটিএমএল নিয়ে অতিরিক্ত তথ্য আরোপ করে

ট্যাগ বর্ণনা
<p>
অনুচ্ছেদ কে বোঝায়
<br>
একটি লাইন ভাঙা বোঝায়
<pre>
আগে থেকে করা লেখা বোঝায়

Mar 29

এইচটিএমএল এর ভিত্তি এর উদাহরন

Paste the translated text here
এইচটিএমএল এর ভিত্তি এর উদাহরন
ভয় পাবার কারন নেই যদি এই উদাহরন গুলো আপনি না শিখে থাকেন । আপনি পরবর্তী অধ্যায় এ শিখতে পারবেন ।
________________________________________
এইচটিএমএল উপাত্ত
সকল এইচটিএমএল দলিল একটি ঘোষণা দিয়ে শুরু হবে <!DOCTYPE html>.
এইচটিএমএল দলিল নিজে নিজেই এটা দিয়ে শুরু হয় <html> এবং শেষ হয় </html>.
এইচটিএমএল এর দৃশ্যমান অংশ গুলো <body> and </body> এর মধ্যে হয় ।
উদাহরন
<!DOCTYPE html>
<html>
<body><h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Try it Yourself »

________________________________________
এইচটিএমএল শিরনাম
এইচটিএমএল শিরোনাম <h1> থেকে <h6> পর্যন্ত যুক্ত করে সংজ্ঞায়িত করা হয় ।
উদাহরন
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

Try it Yourself »

________________________________________
এইচটিএমএল অনুচ্ছেদ
HTML অনুচ্ছেদ এভাবে দেখান হয় <p> ।
উদাহরন
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Try it Yourself »

________________________________________
এইচটিএমএল লিংক
এইচটিএমএল লিংক গুলো এভাবে দেখান হয় <a>
উদাহরন
<a href=”http://bangla.salearningschool.com”>This is a link</a>

Try it Yourself »
লিংক ঠিকানা টি এভাবে আরোপ করা হয় href ।
এইচটিএমএল এর তথ্যগুলো অতিরিক্ত তথ্য দেবার জন্য ব্যাবহার করা হয় ।
________________________________________
এইচটিএমএল ছবি
এইচটিএমএল ছবি গুলো এভাবে যুক্ত করে দেখান হয় <img>
উৎস ফাইল গুলো (src), বিকল্প লেখা (alt), এবং আকার (লম্বা এবং আড়াআড়ি) এভাবে আরোপ করা হয়
উদাহরন
<img src=”w3schools.jpg” alt=”W3Schools.com” width=”104″ height=”142″>

Mar 29

পিএইচপি 5 পরিচিতি । PHP5

পিএইচপি 5 পরিচিতি ।

 পিএইচপি কি ?

• পিএইচপি একটি ব্যাপক ব্যবহৃত , ওপেন সোর্স স্ক্রিপ্টিং ভাষা।
• পিএইচপি একটি আদ্যক্ষর ” পিএইচপি: হাইপারটেক্সট প্রসেসর।
• পিএইচপি বিনামূল্যে ডাউনলোড যোগ্য।

পিএইচপি একটি বিস্ময়কর এবং জনপ্রিয় ভাষা !

এটি ওয়েব (ওয়ার্ডপ্রেস ) উপর সবচেয়ে বড় ব্লগিং সিস্টেম এর মূল হতে যথেষ্ট শক্তিশালী হয়।
এটি বৃহত্তম সামাজিক নেটওয়ার্ক ( ফেসবুক) চালানোর জন্য যথেষ্ট গভীর।

 পিএইচপি ফাইল কি ?

• পিএইচপি ফাইল এ টেক্সট, এইচটিএমএল, সিএসএস, জাভাস্ক্রিপ্ট, এবং পিএইচপি কোড থাকতে পারে।
• পিএইচপি ফাইল এ এক্সটেনশন ” পিএইচপি ” আছে।

 পিএইচপির আগে আপনার নিম্নলিখিত মৌলিক জ্ঞান থাকা উচিত:

• এইচটিএমএল
• সিএসএস
• জাভাস্ক্রিপ্ট

 পিএইচপি কি করতে পারে ?

• পিএইচপি ডাইনামিক কন্টেন্ট পাতা তৈরি করতে পারে।
• পিএইচপি, পড়া, খোলা, নির্মাণ, লিখুন, মুছে ফেলা এবং সার্ভার ফাইল বন্ধ করতে পারে।
• পিএইচপি ফর্ম তথ্য সংগ্রহ করতে পারে।
• পিএইচপি তথ্য পাঠাতে এবং কুকি গ্রহণ করতে পারে।
• পিএইচপি ডাটাবেসের মধ্যে তথ্য, যোগ মুছে দিন এবং পরিবর্তন করতে পারেন
• পিএইচপি ব্যবহারকারীর এক্সেস নিয়ন্ত্রণ করতে ব্যবহার করা যেতে পারে।
• পিএইচপি তথ্য এনক্রিপ্ট করতে পারে।
• পিএইচপি এর আউটপুট এইচটিএমএল এ সীমাবদ্ধ নয়. আপনি আউটপুট ইমেজ, পিডিএফ ফাইল এবং এমনকি ফ্ল্যাশ সিনেমা করতে পারেন।

 পিএইচপি কেন ?

• পিএইচপি বিভিন্ন প্ল্যাটফর্মের (উইন্ডোজ, লিনাক্স , ইউনিক্স , ম্যাক ওএস , ইত্যাদি) উপর সঞ্চালিত হয়
• পিএইচপি আজ প্রায় সব সার্ভার ব্যবহৃত সঙ্গে সামঞ্জস্যপূর্ণ। (এ্যাপাচি , আইআইএস ইত্যাদি)
• পিএইচপি পিএইচপি বিনামূল্যে ডাউনলোড যোগ্য এবং এটি ডাউনলোড করুন : www.php.net হতে।

Mar 29

এইচটিএমএল কি? HTML Document Example

Paste the translated text here
প্রথম পেইজঃ
এইচটিএমএল কি?
উওর: এইচটিএমএল ডকুমেন্ট (ওয়েব পেজ) বর্ণনা জন্য একটি মার্কআপ ভাষা.
এইচটিএমএল ল্যাঙ্গুয়েজ অনেক গুলো টেক্সট এর মার্কআপ করা।
কিছু মার্কআপ ট্যাগ এর সমন্বয়ে এইচটিএমএল ট্যাগ গুলো গঠিত।
এইচটিএমএল ডকুমেন্ট এইচটিএমএল ট্যাগ দ্বারা বর্ননা করা হয়।
প্রতিটি এইচটিএমএল ট্যাগ বিভিন্ন ডকুমেন্টের বিষয়বস্তু বর্ণনা করে থাকে।
যেমনঃ
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head><body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>
এখানে লক্ষ করলে দেখা যে, প্রথমে <html> দিয়ে শুরু হয়েছে এবং শেষে </html> দিয়ে ডকুমেন্ট শেষ করা হয়েছে। এরকম প্রতিটি ট্যাগের শুরু এবং শেষ করতে হবে। এখানে এক একটি ট্যাগের এক এক ধরনের কাজ। যেমনঃ ওয়েবপেজে টাইটেল দিতে <title>Page Title</title> এই ট্যাগটি ব্যবহার করা হয়। <body>………</body> এই ট্যাগটির মাঝে সব রকম ট্যাগ ব্যবহার করা হয়। এই ট্যাগটির নাম বডি ট্যাগ।
যেমনঃ
<title>Page Title</title>
উপরের এটি একটি এইচটিএমএল ট্যাগ। যা দ্বারা আপনার এইচটিএমএল ডকুমেন্ট এর টাইটেল নির্দেশ করে। এটিকে টাইটেল ট্যাগ বলে। এমন অনেক এইচটিএমএল ট্যাগ রয়েছে।
যেমনঃ
<head>
<title>Page Title</title>
</head>
এখানে দুটি ট্যাগ ব্যবহার করা হয়েছে। একটি হেড ট্যাগ অন্যটি টাইটেল ট্যাগ।
<h1>My First Heading</h1>
h1, h2, h3, h4, h5, h6 এমন ছয়টি ট্যাগ আছে। যেগুলো দিয়ে লেখাকে বড় করা হয়ে থাকে। সবচেয়ে বড় h1 ট্যাগ। এবং সবচেয়ে ছোট h6 ট্যাগ।
<p>My first paragraph.</p>
এখানে যে ট্যাগটি ব্যবহার করা হয়েছে তাকে বলা হয় পি ট্যাগ। এর কাজ হল আপনার লেখাকে প্যারা করে সাজানো।
এখানে একটি কথা অবশ্যই মনে রাখতে হবে যে, প্রতিটি ট্যাগের শুরু এবং শেষ করতে হবে। এছাড়াও অন্য একটি ট্যাগ আছে যাকে ওপেন ট্যাগ বলে।
যেমনঃ <link />, <img />, <hr /> ইত্যাদি। এগুলোকে ওপেন ট্যাগ বলে।
দ্বিতীয় পেইজঃ
আপনি যে কোন টেক্স এডিটর ব্যবহার করতে পারেন। এক্ষেত্রে বিভিন্ন এডিটর ব্যবহার করা হয়ে থাকে। যেমনঃ Adobe Dreamweaver, Microsoft Expression Web, CoffeeCup HTML Editor ইত্যাদি। এসব সফটওয়ার গুলো খুব ভাল মানের কাজের জন্য ব্যবহার করা হয়ে থাকে।
যাইহোক আমরা খুব সহজে আমার পিসি থেকে Notepad (PC) এটি ওপেন করে নিব।
আমরা বিশ্বাস করি একটি সহজ টেক্সট এডিটর ব্যবহার করে এইচটিএমএল শিখা একটি ভালো উপায়।
নোটপ্যাড দিয়ে আপনার প্রথম ওয়েব পেজ তৈরি করার জন্য নীচের চারটি ধাপ অনুসরণ করুন.
ধাপ-১: আপানার নোটপ্যাডটি ওপেন করুন। স্টার্ট ক্লিক করুন>তার পর অল প্রোগ্রাম সিলেক্ট করুন>তারপর এক্সেসরিজ সিলেক্ট করুন>তারপর নোটপ্যাড সিলেক্ট করুন।
ধাপ-২: কিছু এইচটিএমএল ট্যাগ লিখুন। যেমনঃ <!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
ধাপ-৩: ফাইলটি আপনার কম্পিউটারের একটি নির্দিষ্ট ফোল্ডারে সেইভ করুন। ক্লিক ফাইল>তারপর সেইভএস এ ক্লিক করুন। এখানে অবশ্যই ফাইল নেইম “file_name.html” এক্সটেনশন ব্যবহার করতে হবে। অন্যথায় কিন্তু আপনার ব্রাউজার ফাইলটি রিট করতে পারবে না।
ধাপ-৪: এবার আপনার ফাইলটি ওপেন করুন যে কোন একটি ব্রাউজারে। তখন আপনি দেখতে পাবেন যা যা লিখেছেন সব ব্রাউজারে দেখা যাবে।

Mar 29

CSS পরিচিতি : CSS Overview

আগে থেকেই আপনার যা জানা উচিত
CSS শেখা শুরু করার আগে আপনার HTML/XHTML সম্পর্কে সাধারণ ধারণা থাকা উচিত।
CSS কি
* CSS বলতে বুঝায় ক্যাসকেডিং স্টাইল শিটস (Cascading Style Sheets)
* এই স্টাইল নির্ধারণ করে HTML উপাদানগুলো কেমনভাবে প্রদর্শিত হবে
* HTML 4.0 ভার্সনের সঙ্গে স্টাইল যোগ করা হয়েছিল একটি সমস্যা সমাধানের উপায় হিসেবে
* স্টাইল শিট বাড়তি পরিশ্রমের হাত থেকে রক্ষা করে
* CSS ফাইলের মধ্যে গোটা স্টাইলশিট সংরক্ষণ করা থাকে

স্টাইল একটি বড় সমস্যা সমাধান করেছিল
ডকুমেন্ট ফরম্যাটিং বা সজ্জার কাজে HTML এর সাথে কখনো ট্যাগ ব্যবহার করার পরিকল্পনা ছিল না। HTML কেবল ডকুমেন্টের বিষয়বস্তুকে নির্দেশ করার জন্য ব্যবহারের কথা ছিল। যেমন:

এটি একটি শিরোনাম

এটি একটি প্যারাগ্র্যাফ

HTML 3.2 ভার্সনের সাথে যখন বিভিন্ন রকম ট্যাগ যেমন কিংবা color উপাদানগুলো ব্যবহার শুরু হলো, তখন ওয়েব ডেভলপারদের জন্য তা একপ্রকার দু:স্বপ্নে পরিণত হলো। বড় বড় ওয়েবসাইটের প্রতিটি পৃষ্ঠায় font এবং color উপাদানগুলো ব্যবহার করা অনেক কষ্টদায়ক ও সময়সাপেক্ষ হয়ে উঠল।
আর এই সমস্যা সমাধানের লক্ষ্যে ওয়ার্ল্ড ওয়াইড ওয়েব কনসোর্টিয়াম (W3C) প্রণয়ন করে CSS.
HTML 4.0 ভার্সন থেকেই সকল HTML ডকুমেন্ট থেকে পৃথক ফরম্যাটিং বাদ দেয়া সম্ভব হল। পরিবর্তে একটি আলাদা CSS ফাইলে ফরম্যাটিং নির্দেশনা সংরক্ষণের ব্যবস্থা করা হলো।
——————————————————————————–

CSS বাক্যরীতি (Syntax)

একটি CSS সেট একটি সিলেক্টর (selector) এবং একটি ডিক্লেয়ারেশন (declaration) ব্লক দ্বারা গঠিত:

CSS সিলেক্টর
সিলেক্টর নির্দেশ করে দেয় আপনি HTML উপাদানগুলোকে কিভাবে সাজাবেন।
ডিক্লেয়ারেশন ব্লকে এক কিংবা একাধিক ডিক্লেয়ারেশন সেমিকোলন দ্বারা পৃথক করা হয়। প্রতিটি ডিক্লেয়ারেশনে একটি প্রোপার্টির (property) নাম এবং তার মান (value) কোলন (:) দ্বারা আলাদা করা থাকে।

CSS উদাহরণ
একটি CSS ডিক্লেয়ারেশন সবসময় সেমিকোলনের মাধ্যমে শেষ হয়। ডিক্লেয়ারেশন গ্রুপটি দ্বিতীয় বন্ধনী “{}” দ্বারা ঘেরা থাকে। যেমন:
p {color:red;text-align:center;}

তবে CSS কোডকে সহজে পঠন ও উপলব্ধির জন্য ডিক্লেয়ারেশনগুলো আলাদা লাইনে দেয়া যেতে পারে:
যেমন

p {
color: red;
text-align: center;
}