From d0a2422de8d35a9868c34d631117d678769658ef Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:44:50 +0100 Subject: unslug bn: move --- files/bn/web/api/canvas_api/index.html | 73 +++++ files/bn/web/api/canvas_api/tutorial/index.html | 47 +++ files/bn/web/api/document/hasfocus/index.html | 66 ++++ files/bn/web/api/document_object_model/index.html | 91 ++++++ files/bn/web/api/webrtc_api/index.html | 40 +++ files/bn/web/css/getting_started/color/index.html | 281 ---------------- .../css/getting_started/how_css_works/index.html | 127 -------- files/bn/web/css/getting_started/index.html | 28 -- .../css/getting_started/readable_css/index.html | 133 -------- .../web/css/getting_started/text_styles/index.html | 110 ------- .../web/css/getting_started/why_use_css/index.html | 104 ------ .../\340\246\250\340\246\207/index.html" | 355 --------------------- .../index.html" | 302 ------------------ files/bn/web/guide/api/dom/index.html | 22 -- files/bn/web/guide/api/webrtc/index.html | 40 --- files/bn/web/guide/graphics/index.html | 53 +++ files/bn/web/guide/html/canvas_tutorial/index.html | 47 --- .../bn/web/guide/html/content_editable/index.html | 44 --- .../bn/web/guide/html/editable_content/index.html | 44 +++ files/bn/web/guide/html/forms/index.html | 342 -------------------- files/bn/web/guide/html/html5/index.html | 180 +++++++++++ .../html/html5/introduction_to_html5/index.html | 29 ++ .../index.html" | 53 --- .../bn/web/html/attributes/crossorigin/index.html | 130 ++++++++ files/bn/web/html/canvas/index.html | 73 ----- files/bn/web/html/canvas/tutorial/index.html | 43 --- .../web/html/cors_settings_attributes/index.html | 130 -------- .../web/html/focus_management_in_html/index.html | 66 ---- .../web/javascript/language_resources/index.html | 102 ++++++ .../index.html" | 102 ------ 30 files changed, 855 insertions(+), 2402 deletions(-) create mode 100644 files/bn/web/api/canvas_api/index.html create mode 100644 files/bn/web/api/canvas_api/tutorial/index.html create mode 100644 files/bn/web/api/document/hasfocus/index.html create mode 100644 files/bn/web/api/document_object_model/index.html create mode 100644 files/bn/web/api/webrtc_api/index.html delete mode 100644 files/bn/web/css/getting_started/color/index.html delete mode 100644 files/bn/web/css/getting_started/how_css_works/index.html delete mode 100644 files/bn/web/css/getting_started/index.html delete mode 100644 files/bn/web/css/getting_started/readable_css/index.html delete mode 100644 files/bn/web/css/getting_started/text_styles/index.html delete mode 100644 files/bn/web/css/getting_started/why_use_css/index.html delete mode 100644 "files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" delete mode 100644 "files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" delete mode 100644 files/bn/web/guide/api/dom/index.html delete mode 100644 files/bn/web/guide/api/webrtc/index.html create mode 100644 files/bn/web/guide/graphics/index.html delete mode 100644 files/bn/web/guide/html/canvas_tutorial/index.html delete mode 100644 files/bn/web/guide/html/content_editable/index.html create mode 100644 files/bn/web/guide/html/editable_content/index.html delete mode 100644 files/bn/web/guide/html/forms/index.html create mode 100644 files/bn/web/guide/html/html5/index.html create mode 100644 files/bn/web/guide/html/html5/introduction_to_html5/index.html delete mode 100644 "files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" create mode 100644 files/bn/web/html/attributes/crossorigin/index.html delete mode 100644 files/bn/web/html/canvas/index.html delete mode 100644 files/bn/web/html/canvas/tutorial/index.html delete mode 100644 files/bn/web/html/cors_settings_attributes/index.html delete mode 100644 files/bn/web/html/focus_management_in_html/index.html create mode 100644 files/bn/web/javascript/language_resources/index.html delete mode 100644 "files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" (limited to 'files/bn/web') diff --git a/files/bn/web/api/canvas_api/index.html b/files/bn/web/api/canvas_api/index.html new file mode 100644 index 0000000000..b64f663d74 --- /dev/null +++ b/files/bn/web/api/canvas_api/index.html @@ -0,0 +1,73 @@ +--- +title: ক্যানভাস +slug: Web/HTML/Canvas +translation_of: Web/API/Canvas_API +--- +

 HTML5 এ যুক্ত HTML {{HTMLElement("canvas")}} এলিমেন্টটি ব্যবহার করে স্ক্রিপ্টিংয়ের (সাধারণত জাভাস্ক্রিপ্ট) সাহায্যে গ্রাফিক্স আঁকা যায়। উদাহরণস্বরুপ, এটি গ্রাফিক্স আঁকা, ছবির কম্পোজিশন তৈরি করা, অ্যানিমেশন তৈরি করা অথবা এমনি রিয়েল-টাইম ভিডিও রেন্ডারিং অথবা প্রসেসিংয়ের কাজেও ব্যবহার করা যায়।

+

<canvas> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা ফায়ারফক্স ১.৫) থেকে। মূলত এ্যাপল তাদের ড্যাশবোর্ড এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। ইন্টারনেট এক্সপ্লোরার ৯ ভার্সন থেকে <canvas> সাপোর্ট করে; ইন্টারনেট এক্সপ্লোরারের পুরনো সংস্করণের জন্য গুগলের Explorer Canvas প্রজেক্টের একটি স্ক্রিপ্ট যুক্ত করে কার্যকরভাবে <canvas> এর সাপোর্ট যোগ করা যায়। গুগল ক্রোম এবং অপেরা ৯ <canvas> ক্যানভাস সাপোর্ট করে।

+

<canvas> টি দিয়ে WebGL এর সাহায্যে হার্ডওয়্যার-এক্সেলারেশনের মাধ্যমে ওয়েব পেজে ত্রিমাত্রিক (3D) গ্রাফিক্স দেখানো সম্ভব।

+
+
+

ডকুমেন্টেশন

+
+
+ স্পেসিফিকেশন
+
+ <canvas> এলিমেট হল WhatWG ওয়েব অ্যাপ্লিকেশনস ১.০ স্পেসিফিকেশন বা HTML5 এর অংশ।
+
+ ক্যানভাস টিউটোরিয়াল
+
+  <canvas> এর সাধারণ ব্যবহার এবং এর অ্যাডভান্সড ফিচারের ওপর একটি বিস্তারিত টিউটোরিয়াল।
+
+ কোড স্নিপেট: ক্যানভাস
+
+ <canvas> সংক্রান্ত এক্সটেনশন ডেভেলপার সংশ্লিষ্ট কোড স্নিপেট।
+
+ ক্যানভাস উদাহরণ
+
+ কিছু <canvas> ডেমো।
+
+ ক্যানভাসে DOM অবজেক্ট আঁকা
+
+ যেভাবে HTML এলিমেন্টের ন্যায় DOM কন্টেন্ট একটি ক্যানভাসে আঁকবেন।
+
+ একটি সাধারণ raycaster
+
+ ক্যানভাসের সাহায্যে ray-tracing এনিমেশনের ডেমো।
+
+ ক্যানভাস DOM ইন্টারফেস
+
+ গিকোতে ক্যানভাস DOM ইন্টারফেস সমূহ।
+
+

সব দেখুন...

+
+
+

কমিউনিটি

+ +

তথ্যভান্ডার

+ +

লাইব্রেরি

+
    +
  • libCanvas একটি হালকা ও শক্তিশালী ক্যানভাস ফ্রেমওয়ার্ক
    • +
  • Processing.js হল প্রসেসিং ভিজ্যুয়ালাইজেশন ল্যাঙ্গুয়েজের পোর্ট
    • +
  • EaselJS হল একটি ফ্ল্যাশের মত API সমৃদ্ধ লাইব্রেরি
    • +
  • PlotKit হল একটি চার্ট ও গ্রাফ তৈরির লাইব্রেরি
    • +
  • Rekapi হল ক্যানভাসের জন্য অ্যানিমেশনের কি-ফ্রেম করার API।
    • +
  • PhiloGL হল ডাটা ভিজ্যুয়ালাইজেশন, সৃজনশীল কোডিং ও গেম ডেভেলপমেন্টের জন্য একটি WebGL ফ্রেমওয়ার্ক।
    • +
  • JavaScript InfoVis Toolkit ওয়েবের জন্য ইন্টারএ্যাক্টিভ 2D ক্যানভাস ডাটা ভিজ্যুয়ালাইজেশন তৈরি করে।
    • +
  • Frame-Engine হল অ্যাপ্লিকেশন ও গেম ডেভেলপ করার একটি ফ্রেমওয়ার্ক।
    • +
+ + +
+
+
+ {{HTML5ArticleTOC()}}
diff --git a/files/bn/web/api/canvas_api/tutorial/index.html b/files/bn/web/api/canvas_api/tutorial/index.html new file mode 100644 index 0000000000..2118fa3c97 --- /dev/null +++ b/files/bn/web/api/canvas_api/tutorial/index.html @@ -0,0 +1,47 @@ +--- +title: ক্যানভাস টিউটোরিয়াল +slug: Web/Guide/HTML/Canvas_tutorial +tags: + - NeedsReview +translation_of: Web/API/Canvas_API/Tutorial +--- +

+

<canvas> হচ্ছে একটি HTML element যেটা স্ক্রিপ্টিং (সাধারণত JavaScript ) ব্যবহার করে  গ্রাফিক্স আঁকার জন্য ব্যবহার করা হয় । উদাহরণস্বরূপ  গ্রাফ আঁকতে, ছবি কম্পোজিশন অথবা সাধারন ( তবে বেশি সাধারন নয় ) অ্যানিমেশন তৈরি করতে এটি ব্যবহার করা হয় । ডানপাশের ছবিতে <canvas> প্রয়োগ করে কিছু উদাহরণ দেওয়া হয়েছে যা আমরা পরে এর টিউটোরিয়াল এ দেখবো।

+

<canvas> সর্বপ্রথম Apple এর Mac OS X ড্যাশবোর্ড এ ব্যবহার করার জন্য প্রকাশিত হয় এবং পরে Safari এবং  Google Chrome এ প্রয়োগ করা হয়. Gecko 1.8- ভিত্তিক browsers, যেমন Firefox 1.5 ও এই element কে সমর্থন করে. এই <canvas> element হচ্ছে  WhatWG Web applications 1.0 এর একটি অংশ যা HTML5 নামেও পরিচিত।

+

এই টিউটোরিয়াল কিভাবে <canvas> element ব্যবহার করে প্রাথমিক ভাবে 2D গ্রাফিক্স তৈরি করা যায় তা বর্ণনা করে । আপনি canvas ব্যবহার করে কি করতে পারবেন এই উদাহরণগুলো তার সুস্পষ্ট ধারণা দেয় এবং code কে snippets করে আপনার নিজের কাঙ্ক্ষিত বিষয়কে তৈরি করতে শুরু করে ।

+

শুরু করার পূর্বে

+

<canvas> element ব্যবহার করা কঠিন কিছু নয় তবে আপনার HTML এবং  JavaScript সম্পর্কে প্রাথমিক ধারণা থাকতে হবে । কিছু পুরাতন browsers এ  <canvas> element সমর্থন করে না, কিন্তু সম্প্রতি সকল প্রধান browsers গুলো তে সমর্থন করে ।  canvas এর default সাইজ হচ্ছে 300px * 150px (width * height). কিন্তু custom size গুলো CSS এর height এবং width property ব্যবহার করে উল্লেখ করা যায় । canvas এ গ্রাফিক্স আঁকতে গেলে আমরা javascript context object ব্যবহার করি , যা গ্রাফিক্সটিকে অনেক উন্নতমানের করে তুলে ।

+

এই টিউটোরিয়াল এ যা আছে

+ +

আরও দেখুন

+ +

A note to contributors

+

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.

+
+ {{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/bn/web/api/document/hasfocus/index.html b/files/bn/web/api/document/hasfocus/index.html new file mode 100644 index 0000000000..adbe5e1e9b --- /dev/null +++ b/files/bn/web/api/document/hasfocus/index.html @@ -0,0 +1,66 @@ +--- +title: Focus management in HTML +slug: Web/HTML/Focus_management_in_HTML +translation_of: Web/API/Document/hasFocus +translation_of_original: Web/HTML/Focus_management_in_HTML +--- +

এইচটিএমএল৫ এর ওয়ার্কিং ড্রাফট, একটিভআলিমেন্ত ডোম অ্যাট্রিবিউট এবং হেজফোকাস() ডোম মেথড প্রোগ্রামারকে ইউজার এর কারনে পেজ এর ইন্টারআক্তিভিটিতে আরও ভালো নিয়ন্ত্রণ করার ক্ষমতা দেয়। উদাহরণস্বরূপ, দুইটিকে পরিসংখ্যান এর সাধারণ উদ্দেশে ব্যাবহার করা যায়, একটি পেজ এর কিছু লিংকের ক্লিক সংখ্যা বের করা,একটি এলিমেন্তের উপর ফোকাসের সময় বের করা, এবং আরও অনেক।অতিরিক্ত, আজাক্স টেকনোলজির সাহায্যে, সার্ভারের রিকুস্তের সংখ্যা কমানো যায় যা ইউজার এবং পেজ এর লেআউট এর উপর নির্ভর করে।

+ +

ব্রাউজার কম্পাতিবিলিটি

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("1.9.2")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[১] গিককো ৮.০ তে শুরু {{geckoRelease("8.0")}},ফায়ারফক্স এখন একটি ফোকাস রিং আঁকে যেকোনো এলিমেন্ত এর উপর যখন তার তাবিনেক্স ভেলু ০ থেকে বড়, শুধু একটি সীমিত সাবসেট আইটেমস এর পরিবর্তে। এই নিয়মের কিছু বাতিক্রম আছেঃ  {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("iframe")}}, {{HTMLElement("frame")}}, {{HTMLElement("body")}}, and {{HTMLElement("html")}}.

+ +

আরও দেখুন

+ + diff --git a/files/bn/web/api/document_object_model/index.html b/files/bn/web/api/document_object_model/index.html new file mode 100644 index 0000000000..07bef2b618 --- /dev/null +++ b/files/bn/web/api/document_object_model/index.html @@ -0,0 +1,91 @@ +--- +title: ডকুমেন্ট অবজেক্ট মডেল (DOM) +slug: DOM +tags: + - DOM + - NeedsTranslation + - References + - TopicStub +translation_of: Web/API/Document_Object_Model +translation_of_original: DOM +--- +
+
+ W3C DOM এর ১ম কোর লেভেল ব্যবহার করা
+ W3C DOM এর হাতেখড়ি।
+
+
+

ডকুমেন্ট অবজেক্ট মডেল (Document Object Model) বা সংক্ষেপে DOM হচ্ছে HTML এবং XML ডকুমেন্ট ম্যানিপুলেট করার জন্য একটি অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস বা API । এটা ডকুমেন্ট এর একটি গাঠনিক উপস্থাপনা প্রদান করে, আর আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করে এর ভেতরে থাকা কন্টেন্ট এবং দৃশ্যমান উপাদানগুলোকে সংশোধন করার সুবিধা প্রদান করে।

+
+
+
+

DOM সম্পর্কে ডকুমেন্টেশন

+
+
+ DOM রেফারেন্স
+
+ ডকুমেন্ট অবজেক্ট মডেল এর রেফারেন্স।
+
+ ডকুমেন্ট অবজেক্ট মডেল সম্পর্কে
+
+ DOM সম্পর্কে সংক্ষিপ্ত বর্ণনা।
+
+ DOM এবং জাভাস্ক্রিপ্ট
+
+ DOM কি ? জাভাস্ক্রিপ্ট কি ? কিভাবে আমি এই দুটোকে একসাথে আমার ওয়েব পেজে ব্যবহার করব ? এখানে পাবেন এমন সব প্রশ্নের উত্তর।
+
+ ডায়নামিক স্টাইলিং তথ্য ব্যবহার করা
+
+ DOM এর মাদ্ধমে কিভাবে তথ্য সংগ্রহ করা যায় এবং স্টাইলিং ম্যানিপুলেট করা যায়।
+
+ DOM ইভেন্ট রেফারেন্স
+
+ DOM ইভেন্ট সমূহের অর্থসহ তালিকা।
+
+ History API: ব্রাউজারের ইতিহাস ম্যানিপুলেট করা
+
+ HTML5-এ চালু হওয়া DOM এর বর্ণনা করে {{ domxref("window.history") }} অবজেক্ট, ব্রাউজারের ইতিহাস ডায়নামিক্যালি পরিবর্তন করার সুবিধা প্রদান করে।
+
+ ফাইল API: ওয়েব অ্যাপ্লিকেশন থেকে ফাইল ব্যবহার করা
+
+ HTML5-এ প্রবর্তিত লোকাল ফাইল নির্বাচন করার এবং পড়ার ক্ষমতা বর্ণনা।
+
+ Page এর Visibility API ব্যবহার করা
+
+ এখানে বর্ণনা করা হয়েছে, কিভাবে একটি ওয়েব পেজ সনাক্ত করতে হবে এবং উক্ত ওয়েব পেজ থেকে প্রাপ্ত তথ্য ব্যবহার করতে হবে; সেটা ব্যাকগ্রাউন্ডে ব্যবহৃত হোক বা ফোরগ্রাউন্ডে।
+
+ Fullscreen API: ফুলস্ক্রিন মোড ব্যবহার করা
+
+ এতে বর্ণনা করা হয়েছে, কিভাবে একটি পেজকে ব্রাউজারের কোন এলিমেন্ট ছাড়া সমগ্র স্ক্রিন জুড়ে দেখার জন্য তৈরি করতে হবে।
+
+ এলিমেন্টের মাত্রা নির্ণয়
+
+ আপনার প্রয়োজন অনুযায়ী সঠিক ভাবে এলিমেন্টের মাত্রা নির্ধারণের কৌশল এখানে বর্ণনা করা হয়েছে।
+
+ Dynamically modifying XUL-based user interface
+
+ The basics of manipulating the XUL UI with DOM methods.
+
+

View All...

+
+
+

Getting help from the community

+

You need help on a DOM-related problem and can't find the solution in the documentation?

+
    +
  • Consult the dedicated Mozilla forum: {{ DiscussionList("dev-tech-dom", "mozilla.dev.tech.dom") }}
    • +
+

Tools easing working with the DOM

+ +

View All...

+ + +
+
+

 

diff --git a/files/bn/web/api/webrtc_api/index.html b/files/bn/web/api/webrtc_api/index.html new file mode 100644 index 0000000000..48a47d8aa1 --- /dev/null +++ b/files/bn/web/api/webrtc_api/index.html @@ -0,0 +1,40 @@ +--- +title: ওয়েব আরটিসি (WebRTC) +slug: Web/Guide/API/WebRTC +tags: + - এপিআই + - ওয়েব আরটিসি + - পরিচিতি + - ল্যান্ডিং +translation_of: Web/API/WebRTC_API +translation_of_original: Web/Guide/API/WebRTC +--- +

WebRTC (যেখানে RTC এর পূর্ণরুপ Real-Time Communications) হল একটি প্রযুক্তি যা একাধিক ব্রাউজারের মধ্যে ব্রাউজার-ব্রাউজার অডিও/ভিডিও স্ট্রিমিং কিংবা ডাটা শেয়ারিং সুবিধা প্রদান করে থাকে। WebRTC এর সাহায্যে কোনরূপ প্লাগ-ইন বা এক্সটেনশন ব্যবহার ছাড়াই স্ট্যান্ডার্ড ওয়েব এপিআই এর সাহায্যে টেলিকনফারেন্সিং কিংবা ডাটা শেয়ারিং সম্ভব।

+ +

WebRTC এর অংশগুলোকে জাভাস্ক্রিপ্ট এপিআই এর সাহায্য ব্যবহার করা যায়: Network Stream API একটি অডিও/ভিডিও স্ট্রিম নির্দেশ করে, PeerConnection API এর সাহায্য দুই বা ততোধিক ব্রাউজারের মধ্যে সংযোগ স্থাপন করা যায়, এবং DataChannel API এর সাহায্য অডিও/ভিডিও ব্যতীত অন্যান্য ধরণের ডাটা আদানপ্রদান করা যায় - যা গেমিং, চ্যাট কিংবা ফাইল ট্রান্সফারের জন্য অসাধারণ!

+ +
+

উল্লেখ্য: এই ডকুমেন্টেশন নতুন যায়গায় চলে যাচ্ছে।

+
+ +

গাইড

+ +
+
WebRTC এর সাহায্যে পিয়ার-টু-পিয়ার যোগাযোগ
+
ওয়েবআরটিসি এপিআই এর সাহায্যে পিয়ার টু পিয়ার যোগাযোগ করা।
+
WebRTC এর আর্কিটেকচার পরিচিতি
+
WebRTC এর অনেকগুলো আলাদা আলাদা অংশ রয়েছে যা নবাগতদের জন্য প্রচণ্ড বিভ্রান্তকর। এই আর্টিকেলে এইসকল অংশগুলোর পরিচয় দিয়ে, তারা কিভাবে একত্রে কাজ করে - সে সম্পর্কে ধারণা দেওয়া হয়েছে।
+
WebRTC এর সাধারণ বিষয়াবলী
+
Now you understand the WebRTC architecture, you can move on to this article, which takes you through the creation of a basic cross-browser RTC App.
+
+ +

রেফারেন্স

+ +
+
Navigator.getUserMedia
+
মিডিয়া (ভিডিও/অডিও) ক্যাপচার করার এপিআই।
+
RTCPeerConnection
+
দুইটি পিয়ারের মধ্যে ডাটা স্ট্রিমিং করার ইন্টারফেস।
+
RTCDataChannel
+
পিয়ার কানেকশনের মধ্যে দিয়ে ডাটা (মিডিয়া নয় এমন) পাঠানোর ইন্টারফেস।
+
diff --git a/files/bn/web/css/getting_started/color/index.html b/files/bn/web/css/getting_started/color/index.html deleted file mode 100644 index 715c208203..0000000000 --- a/files/bn/web/css/getting_started/color/index.html +++ /dev/null @@ -1,281 +0,0 @@ ---- -title: রং -slug: Web/CSS/Getting_Started/Color -tags: - - CSS - - Example - - Guide - - NeedsReview -translation_of: Learn/CSS/Introduction_to_CSS/Values_and_units#Colors -translation_of_original: Web/Guide/CSS/Getting_started/Color ---- -

{{ CSSTutorialTOC() }}

-

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles")}}এটা হচ্ছে  যেভাবে শুরু করবেন CSS   টিউটোরিয়ালের ৮ম বিভাগ; এটা ব্যাখ্যা করবে কিভাবে আপনি CSS এ রং উল্লেখ করবেন. আপনি আপনার নমুনা স্টাইলশিট এ পরিচিত হবেন background রং এর সাথে।

-

তথ্য: রং (color)

-

এই টিউটোরিয়ালে এখন পর্যন্ত ,আপনি ব্যবহার করেছেন একটি নির্দিষ্ট সংখ্যক রং এর নাম . CSS 2 সর্বোপরি ১৭ টি রং এর নাম বহন করে। কিছু নাম হয় তো সেগুলো, যেগুলো আপনি আশা করেন না।

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 black gray silver white 
primariesred lime blue 
secondariesyellow aqua fuchsia 
 maroon orange olive purple green navy teal 
-

 

-
-
- বিস্তারিত
-

আপনার  browser হয়ত আরও অনেক রং এর নাম বহন করতে পারে, যেমনঃ

- - - - - - - - - - - - - - - -
dodgerblue peachpuff tan firebrick aquamarine 
-

এই প্রসারিত তালিকার আরও বিস্তারিত জানার জন্য দেখুন: SVG color keywords  CSS 3 এর রং এর মডিউল এ। সতর্ক থাকুন ওই সব রং এর নাম ব্যবহারে যেগুলো আপনার পাঠকের browsers এ হয়ত বহন করে না।

-
-

একটি বৃহৎ palette এর জন্য, যে রং গুলো আপনি চান সেগুলোর লাল (red), সবুজ(green) এবং নীল( blue) উপাদানগুলো উল্লেখ করুন হ্যাশট্যাগ (#) দিয়ে এবং ৩টি হেক্সাডেসিমাল(hexadecimal) সংখ্যা যাদের শ্রেণী 0 - 9 , a – f.  a – f অক্ষরগুলো দিয়ে 10 – 15 এর মান বুঝায়:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000
pure red #f00
pure green #0f0
pure blue #00f
white #fff
-

সম্পূর্ণ palette এর জন্য, প্রতিটি উপাদানের ক্ষেত্রে উল্লেখ করুন দুইটি হেক্সাডেসিমাল সংখ্য:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
black #000000
pure red #ff0000
pure green #00ff00
pure blue #0000ff
white #ffffff
-

আপনি সচারচর এই ৬ সংখ্যার হেক্সাডেসিমাল কোড গুলো আপনার গ্রাফিক্স প্রোগ্রাম অথবা অন্য কোন টুলস থেকে পেতে পারেন।

-
-
- উদাহরণ
-
- সামান্য প্র্যাকটিস করে, আপনি তিন সংখ্যার রং গুলো আপনার বেশিরভাগ কাজের জন্য সুবিন্যস্ত করতে পারবেনঃ
-
-  
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
শুরু লাল এর সাথে: #f00
একে হাল্কা করার জন্য, কিছু সবুজ এবং নীল যোগ করুনঃ #f77
একে আরও কমলা করার জন্য, সামান্য একটু এক্সট্রা সবুজ যোগ করুনঃ #fa7
আরও ডার্ক করার জন্য, এর সব উপাদান মুছে ফেলুন: #c74
এর সম্পৃক্তি দূর করার জন্য, এর উপাদান গুলো কে আরও সমান করুনঃ #c98
আপনি যদি একদম সমান করেন তাহলে আপনি পাবেন ধুুসরঃ #ccc
-

একটি মোমের মত শেডের জন্য যেমন বর্ণহীন নীলঃ

- - - - - - - - - - - - - -
শুরু একদম শুভ্র সাদা থেকে: #fff
অন্যান্য উপাদানগুলো সামান্য কমান: #eef
-
-
-
- আরও বিস্তারিত
-

আপনি আরও উল্লেখ করতে পারেন একতি রং এর ডেসিমাল RGB মানগনগুলো যাদের শ্রেণী 0 – 25 অথবা percentages.

-

উদাহরণস্বরূপ ,মেরুন (dark red):

- 
rgb(128, 0, 0)
-

কিভাবে রং উল্লেখ করা যায় তার আরও বিস্তারিত জানার জন্য দেখুনঃ রং CSS সুনির্দিষ্টকরণে এ। ম্যাচিং সিস্টেম রং যেমন মেনু এবং ThreeDFace, দেখুন: CSS2 System Colors CSS সুনির্দিষ্টকরণে এ।

-
-

 

-

আপনি ইতিমধ্যে {{ cssxref("color") }} প্রপার্টি text এ ব্যবহার করেছেন ।

-

আপনি চাইলে আরও ব্যবহার করতে পারেন {{ cssxref("background-color") }} প্রপার্টি টি যাতে করে আপনি উপাদানগুলোর ব্যাকগ্রাউন্ড পরিবর্তন করতে পারেন।

-

ব্যাকগ্রাউন্ড টি আপনি সেট করতে পারেন স্বচ্ছ ভাবে যাতে করে আপনি স্পষ্টভাবে যে কোন রং মুছে ফেলতে পারেন, মূল উপাদানের ব্যাকগ্রাউন্ড প্রকাশ করে।

-
-
- উদাহরণ
-

এই টিউটোরিয়ালে উদাহরণ বাক্সগুলোতে বর্ণহীন হলুদ ব্যাকগ্রাউন্ড ব্যবহার করা হয়েছে:

- 
background-color: #fffff4;
-
-

আরও বিস্তারিত বাক্সগুলো এই বর্ণহীন ধূসর ব্যবহার করেছেঃ

- 
background-color: #f4f4f4;
-
-
-

 

-

কাজ: কালার কোড এর ব্যবহার

-
    -
  1. আপনার CSS ফাইল সম্পাদন করুন।
    2. -
  2. এখানে মোটা করে যেগুলো দেখানো হয়েছে সেগুলো পরিবর্তন করুন, যাতে করে আপনি আদি অক্ষরগুলো কে একটি বর্ণহীন নীল রং দিতে পারেন। ( যে বিন্যাসগুলো এবং মন্তব্যগুলো আপনার ফাইলে দেখানো হয়েছে সেগুলো সম্ভবত দেখানো ফাইলগুলো হতে ভিন্ন।এই বিন্যাস এবং উক্তিগুলো আপনার মত করে সেভ করে রাখুন।)
    - 
    /*** CSS Tutorial: Color page ***/
-
-/* page font */
-body {font: 16px "Comic Sans MS", cursive;}
-
-/* paragraphs */
-p {color: blue;}
-#first {font-style: italic;}
-
-/* initial letters */
-strong {
-  color: red;
-  background-color: #ddf;
-  font: 200% serif;
-  }
-
-.carrot {color: red;}
-.spinach {color: green;}
-
    -
    3. -
  3. ফাইলটি সেভ করুন এবং আপনার ব্রাউজার টিকে রিফ্রেশ করুন যাতে করে আপনি ফলাফলটি দেখতে পারেন।
    4. -
- - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
- - - - - - -
-

প্রতিদন্দিতাঃ
- আপনার CSS ফাইলে ,সব গুলো কালারের নাম পরিবর্তন করে 3 ডিজিট এর কালার কোড এ পরিবর্তন করুন ফলাফলে কোন প্রভাব না ফেলে।

-

(এটা হয়ত একদম সঠিক ভাবে হবে না, কিন্তু আপনি কাছাকাছি যেতে পারবেন। একদম সঠিক ভাবে করার জন্য আপনার প্রয়োজন 6 ডিজিট এর কোডসমূহ, এবং প্রয়োজন CSS সুনির্দিষ্টকরন দেখা অথবা ব্যবহার করুন একটি গ্রাফিক্স টুল যাতে করে কালার গুলো মিল করাতে পারেন।)

-

                                                                                 প্রতিদ্বন্দ্বিতার জন্য সমাধান দেখুন।

-
-

এরপর কি?

-


- {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content")}}আপনার নমুনা ডকুমেন্ট এবং আপনার নমুনা stylesheet এর থেকে সম্পূর্ণভাবে আলাদা। এর পরে পরবর্তী বিভাগ  ব্যাখ্যা করবে কেমন করে আপনি এই সম্পূর্ণ আলাদা জিনিস থেকে ভিন্ন কিছু তৈরি করবেন।
-  

diff --git a/files/bn/web/css/getting_started/how_css_works/index.html b/files/bn/web/css/getting_started/how_css_works/index.html deleted file mode 100644 index 944a2f0398..0000000000 --- a/files/bn/web/css/getting_started/how_css_works/index.html +++ /dev/null @@ -1,127 +0,0 @@ ---- -title: কিভাবে CSS কাজ করে -slug: Web/CSS/Getting_Started/How_CSS_works -tags: - - Beginner - - CSS - - 'CSS:Getting_Started' - - NeedsReview - - Web -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/How_CSS_works ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}} এটিCSS Getting Started টিউটোরিয়াল এর তৃতীয় অধ্যায়; এটা আপনার ব্রাউজারে CSS কিভাবে কাজ করে ব্যাখ্যা করে। আপনার নমুনা ডকুমেন্ট বিশ্লেষণ করেন,তার স্টাইল এর বিবরণ প্রকাশের মধ্য দিয়ে।

- -

তথ্য: CSS কিভাবে কাজ করে

- -

যখন একটি ব্রাউজার একটি ডকুমেন্ট প্রদর্শন করে, এটি অবশ্যই ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল তথ্য এর সমন্বয় ঘটায়।এটি ডকুমেন্ট টি কে দুই ধাপে প্রসেস করে থাকেঃ

- -
    -
  1. ব্রাউজার টি মার্ক আপ লেঙ্গুয়েজ এবং সিএসেস একটি কাঠামোতে পরিবর্তন করে যেটির নাম DOM (ডকুমেন্ট অবজেক্ট মডেল). The DOM কম্পিউটার এর মেমরি তে ডকুমেন্ট কে উপস্থাপন করে.এটি ডকুমেন্ট এর উপকরনের সাথে এর স্টাইল এর সমন্বয় ঘটায়।
    2. -
  2. ব্রাউজার টি DOM এর কন্টেন্ট গুলো কে তুলে ধরে।
    3. -
- -

একটি মার্ক আপ ল্যাঙ্গুয়েজ elementsব্যাবহার করে ডকুমেন্ট এর গঠন ব্যাখ্যা দেয়ার জন্য। ট্যাগ ব্যাবহার করে আপনি একটি elementকে মার্ক করতে পারেন, এর মধ্যে আছে স্ট্রিং যেটা শুরু হয় '<' দিয়ে এবং শেষ হয় '<' দিয়ে। বেশির ভাগ এলিমেন্ট এর জোড়া ট্যাগ আছে।একটি স্টার্ট ট্যাগ আর এন্ড ট্যাগ। স্টার্ট এর ক্ষেত্রে, elementএর নাম, '< >' এর ভিতরে ।এন্ড ট্যাগ এর ক্ষেত্রে element এর নাম এর আগে ,'<' এর পরে '/' বসাতে হবে।

- -

মার্ক আপ ল্যাঙ্গুয়েজ এর উপর ভিত্তি করে, কিছু element এর শুধু মাত্র স্টার্ট ট্যাগ অথবা শুধুমাত্র সিঙ্গেল ট্যাগ থাকবে যেখানে '/' নাম এর পরে আসে।

- -

একটি element একটি পাত্র হতে পারে , স্টার্ট ট্যাগ এবং এন্ড ট্যাগ এর মাঝে অন্যান্য উপকরন নিএ।

- -

একটি DOM এর গাছ এর মত কাঠামো থাকে. মার্ক আপ ল্যাঙ্গুয়েজ এ প্রতিটি element and টেক্সট এর রান একটি  node হিসেবে কাজ করে এই গাছ কাঠামোতে. DOM nodes গুলো পাত্র নয়। বরং, এগুলোকে শিশু node এর অভিভাবক ধরা যায়।

- -
-
উদাহরনঃ
-আপনার সেম্পল উদাহরনে, <p> ট্যাগ এবং এর অ্যান্ড ট্যাগ </p> একটি পাত্র তৈরি করে - -
<p>
-  <strong>C</strong>ascading
-  <strong>S</strong>tyle
-  <strong>S</strong>heets
-</p>
-
- -

বাস্তব উদাহরণঃ

- -

http://jsfiddle.net/djaniketster/6jbpS/

- -

DOM এ corresponding P node টি কে অভিভাবক ধরা হয় .এর শিশু node গুলো  হল স্ট্রং nodes and টেক্সট nodes. স্ট্রং nodes গুলো নিজেরাই হল অভিভাবক, text nodes গুলোকে নিয়ে নিজেদের শিশু node হিসেবে ।

- -
P
-├─STRONG
-│ └─"C"
-├─"ascading"
-├─STRONG
-│ └─"S"
-├─"tyle"
-├─STRONG
-│ └─"S"
-└─"heets"
-
- -

 DOM বোঝা আপনাকে সাহায্য করবে ডিজাইন করতে, debug করতে and আপনার CSS রক্ষণাবেক্ষণ করতে কারন  DOM হল যেখানে আপনার CSS ডকুমেন্ট এর content মিলিত হয়.

- -

কার্যকরণ: একটি DOM বিশ্লেষণ

- -

DOM Inspector ব্যাবহার

- -

একটি DOM বিশ্লেষণ করতে হলে, আপনার প্রয়জনহবে স্পেশাল সফটওয়্যার এর.এখানে আপনি ব্যাবহার করবেন মোজিলার  DOM Inspector (DOMi) add-on , একটি DOM বিশ্লেষণ এর জন্য। এই কাজ টি করার জন্য আপনাকে add-on টি ইন্সটল করতে হবে।

- -
    -
  1. মোজিলা ব্রাউজার টি ব্যাবহার করুন আপনার স্যাম্পল HTML ডকুমেন্ট টি ওপেন করবার জন্য.
    2. -
  2. আপনার ব্রাউজার এর মেনু বার থেকে , বাছাই করুন Tools > DOM Inspector, অথবা এভাবে Tools > Web Development > DOM Inspector. -
    -
    আরও
    - -

    যদি আপনার মোজিলা ব্রাউজার এ DOMi না থাকে, তাহলে এটি ব্যাবহার করতে পারেন install it from the Add-ons site এবং ব্রাউজার রি-স্টার্ট করতে হবে। তারপর ফিরে যাবেন টিউটোরিয়াল এ।

    - -

    যদি আপনি DOMi ইন্সটল করতে না চান ( অথবা আপনি নন- মোজিলা ব্রাউজার ব্যাবহার করেন), আপনি ব্যাবহার করতে পারেন Web X-Ray Goggles, যেভাবে বিবরন দেয়া আছে পরবর্তী সেকশন এ। অথবা আপনি সেকশন টি বাদ রেখে পরবর্তী পেজ এ চলে যেতে পারেন. সেকশন টি বাদ দিয়ে গেলে টিউটোরিয়াল এর বাকি অংশে কোন প্রভাব ফেলবে না।

    -
    -
    3. -
  3. DOMi এ, আপনার ডকুমেন্ট এর  nodes গুলোকে বিস্তৃত করুন arrows এ ক্লিক করার মাধ্যমে। -

    দ্রষ্টব্য:  আপনার HTML ফাইল এ স্পেসিং করলে হয়ত DOMi কিছু শুন্য text nodes দেখাতে পারে,যেগুলো আপনি উপেক্ষা করতে পারেন।

    - -

    রেসাল্ট এর অংশ হয়ত এরূপ দেখাবে যা নিরভর করছে আপনি কোন nodes গুলোকে বিস্তৃত করেছেন:

    - - 
    │ ▼╴P
-│ │ │ ▼╴STRONG
-│ │ └#text
-│ ├╴#text
-│ ►╴STRONG
-│ │
    - -

    যখন আপনি একটি node সিলেক্ট করবেন, আপনিDOMi's এর ডান-হাত প্যান টি ব্যাবহার করতে পারেন আরও কিছু খুজে বের করার জন্য. উদাহরন সরূপ , আপনি যখন একটি text node সিলেক্ট করবেন, DOMi আপনাকে ডান-হাত  প্যান এ টেক্সট টি দেখাবে.

    - -

    যখন আপনি একটি element node সিলেক্ট করবেন, DOMi সেটি বিশ্লেষণ করবে এবং ডান হাত প্যান এ অনেক তথ্য সরবরাহ করবে।স্টাইল তথ্য হল বিতরন করা তথ্য এর ই একটি অংশ।

    -
    4. -
- -
-
চেলেঞ্জঃ
-DOMi তে, স্ট্রং  node এ ক্লিক করুন।
- -

DOMi এর ডান হাত প্যান টি ব্যাবহার করুন খুজে বের করার জন্য কোথায় node এর রঙ লাল রাখা হয়েছে এবং কোথায় এটিকে সাধারন টেক্সট এর তুলনায় গাঢ় দেখান হয়েছে।

- -
-
Possible solution
- -

In the menu above the right-hand pane, choose CSS Rules. You see two items listed, one that references an internal resource and one that references your stylesheet file. The internal resource defines the font-weight property as bolder; your stylesheet defines the color property as red.

-Hide solution
-See a solution for the challenge.
- -

 Web X-Ray Goggles এর বেবহারঃ

- -

Web X-Ray Goggles ,  DOM Inspector এর তুলনায় কম তথ্য সরবরাহ  করে কিন্তু এটি ব্যাবহার করা ও ইন্সটল করা সহজ।

- -
    -
  1. Web X-Ray Goggles এর জন্য হোম পেজ এ যান।
    2. -
  2. পেজের bookmarklet এর লিংক টি কে টেনে ব্রাউজার টুলবার এ আনুন।
    3. -
  3. আপনার স্যাম্পল  HTML ডকুমেন্ট টি খুলুন।
    4. -
  4. Web X-Ray Goggles কে এক্টিভেট করুন টুলবার এর  bookmarklet এ ক্লিক করার মাধ্যমে।
    5. -
  5. আপনার কার্সর এর পয়েন্টআর টিকে, ডকুমেন্ট এর এলেমেন্ট দেখার জন্য ডকুমেন্ট এর উপর ঘোরান।
    6. -
- -

পরবর্তীতে কি আছে?

- -

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & Inheritance") }}যদি আপনি চ্যালেঞ্জ টি গ্রহন করে থাকেন,আপনি দেখতে পেয়েছেন যে একাধিক জায়গা থেকে স্টাইল তথ্য যোগাযোগ স্থাপন করে একটি এলেমেন্ট  এর জন্য একটি ফাইনাল স্টাইল তৈরি করতে।next page এই সব যোগাযোগ স্থাপনের বেপারে আরও বিবরন দিবে।

diff --git a/files/bn/web/css/getting_started/index.html b/files/bn/web/css/getting_started/index.html deleted file mode 100644 index bafa4f6776..0000000000 --- a/files/bn/web/css/getting_started/index.html +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: যেভাবে শুরু করবেন (CSS টিউটোরিয়াল) -slug: Web/CSS/Getting_Started -translation_of: Learn/CSS/First_steps -translation_of_original: Web/Guide/CSS/Getting_started ---- -

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

-

CSS এ নতুন, এমন পাঠকদের জন্যই এই টিউটোরিয়াল লেখা হয়েছে, যদি আপনার CSS এর কিছু অতি সাধারণ বিষয় জানাশোনা তারপরেও আপনি এটি ব্যবহার করতে পারবেন। আপনি যদি CSS এ অভিজ্ঞ হয়ে থাকেন, তবে এই টিউটোরিয়ালটি আপনার বিশেষ একটা উপকার করতে পারবে না, CSS এর মূল পৃষ্ঠায় আরও এ্যাডভান্সড বিষয়ের তালিকা রয়েছে।

- -

শুরু করার পূর্বে আপনার কি করা প্রয়োজন?

-

এই টিউটোরিয়ালটি ভালোভাবে অনুসরণ করতে চাইলে আপনার প্রয়োজন একটি টেক্সট এডিটর এবং একটি আধুনিক ব্রাউজার। কি করে এগুলো ব্যবহার করতে হয় - এ সংক্রান্ত বেসিক জানাশোনা থাকা ভালো।

-

আপনি যদি ফাইল নিয়ে ঘাঁটাঘাঁটি না করতে চান, তবে আপনি পুরো টিউটোরিয়ালটি শুধু পড়ে যেতে পারেন, এবং ছবিগুলোর দিকে চোখ বুলিয়ে যেতে পারেন, কিন্তু এ পদ্ধতিটি খুব একটা কার্যকর বা ভালো পদ্ধতি নয় বলে আমরা মনে করি।

-

উল্লেখ্য: CSS এর সাহায্যে রং নিয়ে কাজ করা যায়, তাই এই টিউটোরিয়ালের কিছু অংশ রংয়ের ওপর নির্ভরশীল। আপনি এই অংশগুলো সহজেই কাজে লাগাতে পারবেন যদি আপনার একটি রঙিন মনিটর বা ডিসপ্লের পাশাপাশি স্বাভাবিক রং দেখায় কোন শারীরিক সমস্যা না থাকে।

-

যেভাবে টিউটোরিয়ালটি ব্যবহার করবেন

-

এই টিউটোরিয়ালটি ব্যবহারের জন্য প্রতিটা পৃষ্ঠা ভালোভাবে এবং ধারাবাহিকভাবে পড়ুন। যদি আপনি একটি পৃষ্ঠা বাদ দিয়ে ফেলেন, তাহলে পরবর্তী পৃষ্ঠাগুলো বোঝা আপনার জন্য অনেকটা কঠিন হতে পারে।

-

সিএসএস কিভাবে কাজ করে বোঝার জন্য প্রতিটি পৃষ্ঠার "তথ্যাবলী" অংশটি ভালো করে পড়ুন। "হাতে-কলমে" অংশগুলো পড়ে আপনার নিজের কম্পিউটারে CSS ব্যবহারের চেষ্টা করে দেখুন।

-

আপনি কতটুকু বুঝতে পেরেছেন, তা যাচাই করতে প্রতিটি পৃষ্ঠার শেষে থাকা "চ্যালেঞ্জ" গ্রহণ করুন। চ্যালেঞ্জের সমাধান কিন্তু চ্যানলেঞ্জের নিচেই লিংকের মাধ্যমে দেওয়া আছে, তাই ওগুলো খুব বেশি প্রয়োজন হলে না দেখাই ভালো! নিজে নিজে অবশ্যই চেষ্টা করতে হবে এবং যদি ব্যর্থ হন বারবার, তবে সামান্য একটু উঁকি মেরে দেখা দোষের কিছু না!

-

CSS আরও গভীরভাবে বুঝতে চাইলে "অতিরিক্ত তথ্য" লেখা বাক্সগুলোর তথ্য পড়ুন। লিংকগুলোর সাহায্যে CSS সংক্রান্ত আরও অনেক রেফারেন্স তথ্য খুঁজে বের করতে পারবেন।

-

টিউটোরিয়াল ২য় পর্ব

-

এই টিউটোরিয়ালের দ্বিতীয় পর্বে অন্যান্য ওয়েব ও মোজিলা প্রযুক্তির সাথে CSS ব্যবহারের কথা আলোচনা করা হয়েছে।

-
    -
  1. JavaScript (জাভাস্ক্রিপ্ট)
    2. -
  2. SVG গ্রাফিক্স
    3. -
  3. XML ডাটা
    4. -
  4. XBL বাইন্ডিং
    5. -
  5. XUL ইউজার ইন্টারফেস
    6. -
diff --git a/files/bn/web/css/getting_started/readable_css/index.html b/files/bn/web/css/getting_started/readable_css/index.html deleted file mode 100644 index 49bdc94605..0000000000 --- a/files/bn/web/css/getting_started/readable_css/index.html +++ /dev/null @@ -1,133 +0,0 @@ ---- -title: Readable CSS -slug: Web/CSS/Getting_Started/Readable_CSS -tags: - - NeedsReview -translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable -translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS ---- -

{{ CSSTutorialTOC() }}

-

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}This is the 6th section of the CSS Getting Started tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.

-

তথ্য: পাঠযোগ্য CSS

-

আপনি এগুলো আরো পাঠযোগ্য করার জন্য আপনার স্টাইলশীট  এ সাদা স্থান এবং মন্তব্য যুক্ত করতে পারেন।  You can also group selectors together? যখন একই স্টাইল নিয়ম বিভিন্ন ভাবে নির্বাচিত উপাদানের উপর প্রয়োগ করা যায় ।

-

সাদা স্থান

-

হোয়াইট স্পেস মানে প্রকৃত স্পেস, ট্যাব ও নতুন লাইন . আপনি আপনার স্টাইলশীট আরো পাঠযোগ্য করতে সাদা স্থান যোগ করতে পারেন।

-

পৃষ্ঠা বিন্যাস এবং গঠন context এর মধ্যে সাদা স্থান হচ্ছে পৃষ্ঠার অচিহ্নিত অংশ : কলাম এবং টাইপ লাইনের মধ্যে  মার্জিন, gutters, এবং স্থান।

-

 আপনার নমুনা সিএসএস ফাইল বর্তমানে এক নিয়ম প্রতি লাইনে এবং প্রায় সর্বনিম্ন সাদা স্থান  আছে। একটি জটিল স্টাইলশীটে এই বিন্যাস পড়া কঠিন হয়ে দাড়াবে এবং স্টাইলশীট বজায় রাখাও কঠিন হবে ।

-

আপনার নির্বাচিত বিন্যাস সাধারণত একটি ব্যক্তিগত পছন্দ, কিন্তু আপনার স্টাইলশীট যদি ভাগ প্রকল্পের অংশ হয়, তাহলে ঐসব প্রকল্পের তাদের নিজস্ব নিয়মাবলী থাকতে পারে।
-  

-
-
- উদাহরণ
-
- কিছু মানুষ যেমন কম্প্যাক্ট বিন্যাস আমরা  ব্যবহার করছি , শুধুমাত্র একটি লাইন বিভাজন যখন এটা খুব দীর্ঘ হয়ে যায় :
-
- 
.carrot {color: orange; text-decoration: underline; font-style: italic;}
-
-

কিছু মানুষ প্রতি লাইনে একটি মান পছন্দ করে :

- 
.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-
-

কিছু মানুষ  indention ব্যবহার করে যেমন- দুই স্পেস, চার স্পেস  অথবা একটি ট্যাব  হচ্ছে সাধারণ:

- 
.carrot {
-  color: orange;
-  text-decoration: underline;
-  font-style: italic;
-}
-
-

 কিছু মানুষ সবকিছু  ঊর্ধ্বাভাবে  লাইনে লিখতে পছন্দ করে (কিন্তু এর মত একটি বিন্যাস বজায় রাখা কঠিন):

- 
.carrot
-    {
-    color           : orange;
-    text-decoration : underline;
-    font-style      : italic;
-    }
-
-

কিছু মানুষ পাঠযোগ্যতা উন্নত করার লক্ষে্য  মিশ্র হোয়াইটস্পেস ব্যবহার করে।

- 
.vegetable         { color: green; min-height:  5px; min-width:  5px }
-.vegetable.carrot  { color: orange;    height: 90px;     width: 10px }
-.vegetable.spinach { color: darkgreen; height: 30px;     width: 30px }
-
-
-

কিছু মানুষ বিন্যাসের জন্য ট্যাব ব্যবহার করেন । কিছু মানুষ শুধুমাত্র ফাঁকা স্থান ব্যবহার করেন।

-

মন্তব্য

-

CSS এর মধ্যে মন্তব্য শুরু হয় /* এবং শেষ হয় */ দিয়ে ।

-

আপনি আপনার স্টাইলশীট এ প্রকৃত মন্তব্য করতে মন্তব্য ব্যবহার করতে পারেন, এবং এছাড়াও  সাময়িকভাবে উদ্দেশ্যে পরীক্ষার জন্য একটা অংশ মন্তব্য করতে  পারেন ।

-

স্টাইলশীট  মন্তব্য অংশ আউট  করার জন্য, সে অংশ একটি একটি মন্তব্যে লিখুন যাতে ব্রাউজার এটি উপেক্ষা করে। আপনি সতর্ক থাকুন যেখানে মন্তব্য  শুরু এবং শেষ। বাকি স্টাইলশীট এ সঠিক স্যনটেক্স থাকতে হবে।

-
-
- উদাহরণ
- 
/* প্রথম অনুচ্ছেদে প্রাথমিক অক্ষর C এর জন্য শৈলী  */
-.carrot {
-  color:            orange;
-  text-decoration:  underline;
-  font-style:       italic;
-  }
-
-
-

দলবদ্ধ নির্বাচক

-

যখন অনেক উপাদানের একই শৈলী থাকে, আপনি নির্বাচক একটি গ্রুপ উল্লেখ করে কমা দিয়ে তাদের পৃথক করতে পারেন। ঘোষণা সমস্ত নির্বাচিত উপাদানের ক্ষেত্রে প্রযোজ্য।

-

অন্যত্র আপনার স্টাইলশীট আপনি আবার পৃথকভাবে একই নির্বাচক নির্দিষ্ট করতে পারেন, তাদের ব্যক্তিগত শৈলী নিয়ম প্রযোজ্য।

-
-
- উদাহরণ
-

এই নিয়ম  {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, এবং {{ HTMLElement("h3") }} উপাদান একই রং তৈরি করে।

-

 শুধুমাত্র এক জায়গায় রঙ উল্লেখ করা সুবিধাজনক, যদি না এটি পরিবর্তন করা হয়।

- 
/* color for headings */
-h1, h2, h3 {color: navy;}
-
-
-

প্রক্রিয়া: মন্তব্য যোগ এবং বিন্যাস উন্নতি

-
    -
  1. আপনার CSS ফাইল সম্পাদনা করুন, এবং এটি এই নিয়ম আছে কিনা তা নিশ্চিত করুন (in any order): - 
    strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-
    -
    2. -
  2. এটি আরো পাঠযোগ্য করুন সাজানোর দ্বারা এমন একটি উপায়ে যেন এটি আপনি যৌক্তিক খুঁজে  পান , এবং হোয়াইটস্পেস এবং মন্তব্য যুক্ত করে যাই হোক না কেন  যে উপায়  আপনি সেরা মনে করেন।
    3. -
  3. আপনার ব্রাউজারে প্রদর্শন ফাইল সংরক্ষণ করুন এবং রিফ্রেশ করুন,নিশ্চিত করুন যে স্টাইলশীট যেভাবে কাজ করে আপনার পরিবর্তন তাকে প্রভাবিত না করেঃ  - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    4. -
-
-
- চ্যালেঞ্জ
-

আপনার স্টাইলশীট অংশের আউট মন্তব্য, অন্য কিছু পরিবর্তন ছাড়া, আপনার নথির খুব প্রথম অক্ষর লাল করা,

- - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
-

(এই কাজ করতে একাধিক উপায় আছে ।)

-
-
- Possible solution
- One way to do this is to put comment delimiters around the rule for .carrot: - 
/*.carrot {
-  color: orange;
-}*/
- Hide solution
- See a solution for the challenge.
-

What next?

-

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to specify the appearance of text in your document.

diff --git a/files/bn/web/css/getting_started/text_styles/index.html b/files/bn/web/css/getting_started/text_styles/index.html deleted file mode 100644 index 3a53021fe2..0000000000 --- a/files/bn/web/css/getting_started/text_styles/index.html +++ /dev/null @@ -1,110 +0,0 @@ ---- -title: টেক্সট স্টাইল -slug: Web/CSS/Getting_Started/Text_styles -tags: - - Beginer - - CSS - - 'CSS:Getting_Started' - - Guide - - NeedsLiveSample - - Web -translation_of: Learn/CSS/Styling_text/Fundamentals -translation_of_original: Web/Guide/CSS/Getting_started/Text_styles ---- -

{{ CSSTutorialTOC() }}

-

{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}এটি হচ্ছে CSS Getting Started এর ৭ম টীউটোরিয়াল, এখানে টক্সট স্টাইল এর অনেক উদাহরণ দেয়া আছে। একাহে বর্ণনা করা হয়েছে কিভাবে আপনি আপনার নমুনা stylesheet এ বিভিন্ন ফন্ট ব্যাবহার করবেন।

-

তথ্য: টেক্সট স্টাইল

-

সিএসএস স্টাইলিং লেখার জন্য বিভিন্ন  ধরণ আছে।

-

এখানে {{ cssxref("font") }}আপনি আপনার লেখার বিভিন্ন দিক উল্লেখ করতে পারবেন,—যেমন:

- -
- 
উদাহরণ
-p {font: italic 75%/125% "Comic Sans MS", cursive;}
-
-

এই নিয়মে বিভিন্ন ফন্টের ধরণ দেয়া আছে, প্রতিটি অনুচ্ছেদ এর লেখা হবে ইতালিক ফরমে।

-

প্রতিটি অনুচ্ছেদ এর মূল উপাদান আকার  ফন্ট সাইজ তিন চতুর্থাংশ সেট করা হয়েছে, লাইন উচ্চতা ১২৫% সেট করা হয়েছে। (স্বাভাবিক তুলনায় একটু বেশি ব্যবধানযুক্ত)।

-

Comic Sans MS এ,কিছু ফন্ট আকার সেট করা থাকে কিন্তু যদি তা গ্রহণ যোগ্য না হয় তবে ব্রাউজার ডিফল্ট কারসিভ (hand-written) আকার ব্যাবহার করতে পারবে।

-

এই নিয়মে বোল্ড এবং ছোট হাতের অক্ষরের পার্শ্ব প্রতিক্রিয়া আছে:(setting them to normal):

-
-

ফন্টের আকার

-

আপনি ভবিষৎ বানী করতে পারবেনা আপনার ডকুমেন্টি কোন ধরনের পাঠক পাবে। সুতরাং আপনি একটি উল্লেখযোগ্য ফন্টের আকার দিতে পারেন, সব থেকে ভাল হয় যদি আপনি পছন্দ অনুযায়ী একটি ফন্টের তালিকা দেন।

-

একটি ডিফল্ট আকার  দিয়ে লিস্টটি শেষ করুনঃ serif, sans-serif, cursive, fantasy or monospace.

-

ডকুমেন্ট এ যদি কিছু ফন্ট আকার সমর্থন না করে তবে ব্রাউজার এ আপনি ফন্ট আকার প্রতিস্থাপন করতে পারেন। ডকুমেন্ট এ সমর্থন করে না এমন বিশেষ অক্ষর থাকতে পারে। যদি ব্রাউজার ঐই অক্ষরের কোন ফন্ট আকার খুজে পায় তবে আপনি সেটি ব্যাবহার করতে পারেন।

-

তার নিজস্ব ফন্ট আকার উল্লেখ করার {{ cssxref("font-family") }}এটি ব্যাবহার করুণ।

-

ফন্টের মাপ

-

ব্রাউজার ব্যাবহারকারি পৃষ্ঠাটি পড়ার সময় ডিফল্ট ফন্টরে মার অথবা লেখার আকার পরিবর্তন করতে পারেন,তাই সবথেকে ভাল যদি আপনি একটি আপেক্ষিক মাপ ব্যাবহার করতে পারেন।

-

আপনি ফন্টের ভাল মাপের জন্য কিছু বিল্ট ইন মান ব্যবহার করতে পারেন,যেম্ন-বড়,ছোট এবং মাঝারি। আপনি চাইলে ওই মান গুলো ব্যবহার করতে পারেন যেগুলো মূল উপাদানের ফন্টের আকারের সাথে সম্পর্কিত, যেমন ছোট বড় , ১৫০% অথবা ১.৫ em।একটি "em" হচ্ছে "m" অক্ষরের সমান প্রস্থের(মূল উপাদানের ফন্টের আকারের জন্য); এইভাবে ১.৫em হচ্ছে মূল উপাদানের এক এবং অর্ধ আকার।

-

প্রয়োজনে আপনি একটি নিদ্রিষ্ট আকার , যেমন: 14px (14 pixels) ডিসপ্লে ডিভাইস  এর জন্য অথবা 14pt (14 points) প্রিন্টারের জন্য নির্ধারণ করতে পারেন। এটা তাদের পরিবর্তন করার অনুমতি দেয় না, কারণ এইটা impaired ব্যাবহারকারিদের জন্য অ্যাক্সেসযোগ্য হয় না। আরো  ভাল কৌশল ডকুমেন্টের উপরের স্তরের এবং মাঝারিতে একটি বিল্ট-ইন মান সেট করা হয়,এবং তারপর তার সমস্ত descendent উপাদানের জন্য আপেক্ষিক মাপ সেট করা হয়।

-

তার নিজস্ব একটি ফন্ট সাইজ উল্লেখ করার জন্য {{ cssxref("font-size") }}ব্যাবহার করুন।

-

লাইনের উচ্চতা

-

লাইনের উচ্চতা ২টা লাইনের মধ্যকার স্পেস উল্লেখ করে। আপনার ডকুমেন্টে দীর্ঘ লাইনের অনুচ্ছেদ থাক্লে,বিশেষ করে ফন্টের রাকার যদি ছোট হয় তবে পড়ার সুবিধারতে স্বাভাবিকের থেকে একটু বড় স্পেস দিন।

-

তার নিজস্ব একটি লাইন উচ্চতা উল্লেখ করার জন্য{{ cssxref("line-height") }} ব্যাবহার করুণ।

-

সজ্জা

-

{{ cssxref("text-decoration") }} ব্যাবহার করে আপনি আন্দার-লাইন অথবা অনন্য ডেকোরেশন করতে পারেন। আপনি স্পষ্টভাবে ডেকোরেশন অপসরণ করতেও এটি ব্যাবহার করতে পারেন।

-

অন্যান্য বৈশিষ্ট্য

-

Italic জন্য ব্যাবহার করুন {{ cssxref("font-style") }}: italic;
- Bold জন্য ব্যাবহার করুন {{ cssxref("font-weight") }}: bold;
- Small capitals জন্য ব্যাবহার করুন {{ cssxref("font-variant") }}: small-caps;

-

পৃথকভাবে এই গুলো বন্ধ করার জন্য, আপনি স্বাভাবিক মান সুনির্দিষ্টভাবে উল্লেখ করুন।

-
-
- আরো বিস্তারিত
-

আপনি অন্য কোন উপায়েও বিভিন্ন টেক্সট স্টাইল নির্দিষ্ট করতে পারেন।

-

উদাহরণস্বরূপ, এখানে উল্লিখিত অন্য কিছু মান আছে যা আপনি ব্যবহার করতে পারেন।

-

একটি জটিল স্টাইলশীট,shorthand font property এড়িয়ে চলে কারণ তার কিছু পার্শ্ব প্রতিক্রিয়া আছে (resetting other individual properties)।

-

আরো তথ্যের জন্য Fonts in the CSS Specification দেখতে পারেন। টেক্সট ডেকোরেশন এর আরো তথ্যের জন্য দেখুন Text।

-

আপনি ব্যবহারকারীদের সিস্টেমে ইনস্টল আকারেরউপর নির্ভর করতে না ছাইলে, আপনি ব্যবহার করতে পারেন{{ cssxref("@font-face") }}এটি একটি অনলাইন ফন্ট উল্লেখ করে। যদিও এই নিয়ম সমর্থন করে ব্যাবহারকারিদের এমন একটি ব্রাউজার থাকা প্রয়োজন।

-
-

কর্ম: উল্লেখ ফন্ট

-

একটি সহজ ডকুমেন্ট এর জন্য {{ HTMLElement("body") }} তে আপনি ফন্ট এবং ডকুমেন্ট এর বাকি সেটিংস সেট করতে পারেন।

-
    -
  1. আপনার সিএসএস ফাইল সম্পাদনা করুন.
    2. -
  2. ডকুমেন্ট জুড়ে ফন্ট পরিবর্তন করতে নিম্নলিখিত নিয়ম যোগ করুন. সিএসএস ফাইল উপরে এটি একটি লজিক্যাল জায়গা, কিন্তু আপনি যখন এখানে রাখবেন সেখানেও তার একই প্রভাব পরবে: - 
    body {font: 16px "Comic Sans MS", cursive;}
-
    -
    3. -
  3. একটি মন্তব্য যোগ করুন যেটি নিয়ম ব্যাখ্যা করে এবং একটি স্পেস দিন যাতে করে আপনার পছন্দের বিন্যাসের সাথে এটি মিলে যায়।
    4. -
  4. ফাইল সংরক্ষণ করুন এবং ফলাফল দেখতে আপনার ব্রাউজার রিফ্রেশ করুন। যদি আপনার  Comic Sans MS এ থাকা আকার অথবা হাতে লেখা  itlic আকার সমর্থন না করে ,তবে আপনার ব্রাউজার অন্নক্স কোন আকার পছন্দ করতে পারেঃ
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    5. -
  5. ব্রাউজার মেনুবার, View > Text Size > Increase (or View > Zoom > Zoom In) পছন্দ করতে পারে। আপনি স্টাইল টি 16 পিক্সেল উল্লেখ যদিও, ডকুমেন্ট পড়া একটি ব্যবহারকারী মাপ পরিবর্তন করতে পারেন।
    6. -
-
- Challenge -

Without changing anything else, make all six initial letters twice the size in the browser's default serif font:

- - - - - - - - - -
Cascading Style Sheets
Cascading Style Sheets
-
-
- Possible solution
-

Add the following style declaration to the strong rule:

- 
  font: 200% serif;
-
- If you use separate declarations for font-size and font-family, then the font-style setting on the first paragraph is not overridden. -

 

- Hide solution
- See a solution for the challenge.
-

পরবর্তী ?

-

{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}আপনার নমুনা ডকুমেন্ট ইতিমধ্যে বিভিন্ন নামে রং ব্যবহার করতে সক্ষম. The next section দেয়া আছে রং এর তালিকা এবং কিভাবে আপনি রং প্রয়োগ করবেন।

diff --git a/files/bn/web/css/getting_started/why_use_css/index.html b/files/bn/web/css/getting_started/why_use_css/index.html deleted file mode 100644 index 860f960e96..0000000000 --- a/files/bn/web/css/getting_started/why_use_css/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title: কেন CSS ব্যবহার করবেন ? -slug: Web/CSS/Getting_Started/Why_use_CSS -tags: - - NeedsReview -translation_of: Learn/CSS/First_steps/How_CSS_works -translation_of_original: Web/Guide/CSS/Getting_started/Why_use_CSS ---- -

{{ CSSTutorialTOC() }}

- -

{{ previousPage("/bn-BD/docs/Web/Guide/CSS/Getting_Started/What_is_CSS", "What is CSS?") }}এটি  CSS Getting Started টিউটোরিয়ালের দ্বিতীয় অধ্যায় এবং ব্যাখ্যা করে কেন ডকুমেন্ট CSS ব্যবহার করে। আপনি CSS ব্যবহার করেন আপনার নমুনা ডকুমেন্ট একটি স্টাইলশীট যুক্ত করতে।

- -

তথ্য:  CSS কেন ব্যবহার করব ?

- -

CSS একটি ডকুমেন্টের তথ্য সামগ্রী সেটি কিভাবে প্রদর্শিত হবে তার বিবরণ থেকে পৃথক রাখতে সাহায্য করে। ডকুমেন্ট কিভাবে প্রদর্শিত হবে তার বিবরণ স্টাইল হিসাবে পরিচিত। আপনি কন্টেন্ট থেকে স্টাইল আলাদা রাখুন যাতে আপনি পারেন :

- - - -
-
উদাহরণ
- -

আপনার ওয়েব সাইটের হাজার হাজার পৃষ্ঠা থাকতে পারে যারা অনুরূপ। CSS এর ব্যবহার করে,আপনি একটি সাধারণ ফাইলের মধ্যে তথ্য সংরক্ষণ করুন যা সকল পৃষ্ঠা শেয়ার করে।

- -

যখন একজন ব্যবহারকারী একটি ওয়েব পেইজ প্রদর্শন করে,ব্যবহারকারীর ব্রাউজার পৃষ্ঠার কন্টেন্টের পাশাপাশি স্টাইলের তথ্য লোড করে।

- -

যখন একজন ব্যবহারকারী একটি ওয়েব পেজ প্রিন্ট করে, আপনি বিভিন্ন স্টাইলের তথ্য প্রদান করেন যা মুদ্রিত পৃষ্ঠা পড়তে সহজ করে তোলে।

-
- -

HTML দিয়ে সাধারণত আপনি ডকুমেন্টের তথ্য সামগ্রী বর্ণনা করেন মার্কআপ ভাষা ব্যবহার করে,তার স্টাইল নয়।আপনি CSS ব্যবহার  করেন এর স্টাইল নির্দিষ্ট করতে,এর বিষয়বস্তু নয় ।(পরবর্তীতে এই টিউটোরিয়ালে, আপনি এই ব্যবস্থার কিছু ব্যতিক্রম দেখতে পাবেন।)

- -
-
আরো তথ্য
- -

এছাড়াও HTML এর মত একটি মার্কআপ ভাষা স্টাইল নির্দিষ্ট করতে কিছু উপায় প্রদান করে।

- -

উদাহরণস্বরূপ, HTML এ আপনি টেক্সট গাঢ় করতে একটি <b> ট্যাগ ব্যবহার করতে পারেন, এবং আপনি তার <body> ট্যাগে একটি পৃষ্ঠার ব্যাকগ্রাউন্ড রং নির্ধারণ করতে পারবেন।

- -

আপনি যখন CSS ব্যবহার করেন,আপনি সাধারণত মার্কআপ ভাষার এই বৈশিষ্ট্যগুলি ব্যবহার এড়িয়ে যান যাতে করে আপনার সকল ডকুমেন্ট এর স্টাইল সংক্রান্ত তথ্য এক জায়গায় হয়।

-
- -

অ্যাকশন: একটি স্টাইলশীট তৈরি

- -
    -
  1. পূর্বের মত একই ডিরেক্টরির মধ্যে আরেকটি টেক্সট ফাইল তৈরি করুন। এই ফাইলটি আপনার স্টাইলশীট হবে. এটির নাম দিন : style1.css
    2. -
  2. আপনার CSS ফাইলের মধ্যে, এই এক লাইন কপি এবং পেস্ট করুন, তারপর ফাইলটি সংরক্ষণ করুন: - 
    strong {color: red;}
-
    -
    3. -
- -

আপনার ডকুমেন্টের সাথে স্টাইলশীট যুক্তকরণ

- -
    -
  1. আপনার ডকুমেন্ট এর সাথে আপনার স্টাইলশীট সংযুক্ত করতে,আপনার HTML ফাইল সম্পাদনা করুন। এখানে হাইলাইট করা লাইনটি যোগ করুন: - - 
    <!DOCTYPE html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    2. -
  2. ফাইলটি সংরক্ষণ করুন এবং আপনার ব্রাউজারের ডিসপ্লে রিফ্রেশ করুন। স্টাইলশীটটি প্রথম অক্ষরগুলোকে লাল করে তোলে, এভাবে: - - - - - - -
    Cascading Style Sheets
    -
    3. -
- -
-
চ্যালেঞ্জ
- -

লাল ছাড়াও, CSS কিছু অন্যান্য রং এর নাম প্রদান করে।

- -

রেফারেন্স না দেখে, আরো পাঁচটি  রঙের নাম খুঁজে বের করুন যা আপনার স্টাইলশীট এ কাজ করে।

- -
-
Possible solution
- -

CSS supports common color names like orange, yellow, blue, green, or black. It also supports some more exotic color names like chartreuse, fuschia, or burlywood. See CSS Color value for a complete list as well as other ways of specifying colors.

-Hide solution
-See a solution for the challenge.
- -

পরবর্তীতে  কি?

- -

{{nextPage("/bn-BD/docs/Web/Guide/CSS/Getting_started/How_CSS_works", "How CSS works.")}}এখন আপনার একটি পৃথক স্টাইলশীট এর সাথে যুক্ত একটি নমুনা ডকুমেন্ট আছে, আপনি প্রস্তুত জানতে learn more কিভাবে আপনার ব্রাউজার তাদের সমন্বয় করে যখন এটি ডকুমেন্ট প্রদর্শন করে।

diff --git "a/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" "b/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" deleted file mode 100644 index ab2f05fae5..0000000000 --- "a/files/bn/web/css/getting_started/\340\246\250\340\246\207/index.html" +++ /dev/null @@ -1,355 +0,0 @@ ---- -title: নির্বাচক সমুহ -slug: Web/CSS/Getting_Started/নই -tags: - - Beginner - - CSS - - CSS Selector - - 'CSS:Getting_Started' - - Example - - Guide - - NeedsBeginnerUpdate - - NeedsLiveSample - - NeedsUpdate - - Web -translation_of: Learn/CSS/Building_blocks/Selectors -translation_of_original: Web/Guide/CSS/Getting_started/Selectors ---- -

{{ CSSTutorialTOC() }}

-

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascading & inheritance")}}এটি CSS Getting Started টিউটোরিয়াল এর ৫ম অংশ; এটি ব্যাখ্যা করে আপনি কিভাবে স্টাইল সমুহ নির্বাচিতভাবে প্রয়োগ করবেন, এবং কিভাবে বিভিন্ন প্রকার নির্বাচক সমুহ বিভিন্ন প্রাধান্য পায়। আপনি আপনার নমুনা নিবন্ধে কিছু এট্রিবিউট যোগ করতে পারেন, এবং আপনি সেসব এট্রিবিউটগুলো আপনার নমুনা স্টাইলশীটে ব্যবহার করতে পারেন ।

-

তথ্যঃ নির্বাচকসমুহ

-

সি এস এস ভাষা ব্যাখ্যা করার জন্য সি এস এস এর নিজস্ব পারিভাষিক শব্দ আছে। এই টিউটোরিয়াল এর পূর্বে, আপনি একটি লাইন তৈরি করুন যেমনঃ

-
strong {
-  color: red;
-}
-
-

সি এস এস পারিভাষিক শব্দে, এই সমগ্র লাইন হল নিয়ম। এই নিয়ম শুরু হ্য় strong দিয়ে, যেটা একটা নির্বাচক। এটা নির্বাচন করে কোন উপাদানগুলো DOM-এ আছে কোন নিয়ম প্রয়োগ করা আছে ।

-

আরো বিস্তারিত

-

বাকা বন্ধনীর ভেতরের অংশে প্রকাশিত হয়।

-
-

মূলশব্দ color হল একটি বৈশিষ্ট্য এবং red হল একটি মান।

-

একই প্রকাশিত অংশে বৈশিষ্ট্যের জোড়া মানের পর সেমিকোলন দিয়ে অন্য বৈশিষ্ট্যের জোড়া মান থেকে আলাদা করা হয়।

-

এই টিউটোরিয়াল এ নির্বাচক যেমন strong উল্লেখ করা হয় ট্যাগ নির্বাচক হিসেবে। সি এস এস সুনির্দিষ্টভাবে এটিকে টাইপ নির্বাচক হিসেবে উল্লেখ করে।

-
-

নির্বাচকসমুহ যেগুলো আপনি সি এস এস নিয়মে ব্যবহার করতে পারেন এই টিউটোরিয়ালের পাতা সেগুলো সম্পর্কে আরো বেশি ব্যাখ্যা করে।

-

ট্যাগ নামের সাথে আপনি এট্রিবিউট এর মান নির্বাচকসমুহে ব্যবহার করতে পারেন।এটি আপনার নিয়মকে আরো সুনির্দিষ্ট করতে অনুমোদন করে।

-

সি এস এস এর দুইটি এট্রিবিউট এর বিশেষ অবস্থা আছে। তারা হল class এবং id.

-

নির্বচকসমুহের ক্লাস

-

class এট্রিবিউট একটি উপাদানকে নামকৃত ক্লাস এ বরাদ্দ করার জন্য ব্যবহার করা হয়। আপনি আপনার ক্লাস এর জন্য কোন নাম পছন্দ করবেন এটা আপনার উপর। একটা নিবন্ধে বিভিন্ন উপাদান একই নামের হতে পারে।

-

আপনার স্টাইলশীটে, ক্লাস নামের পূর্বে আপনি যখন একটি নির্বাচকে ব্যবহার করবেন তখন দাড়ি লিখুন(period) ।

-

নির্বাচকসমুহের আইডি

-

id এট্রিবিউট একটি উপাদানকে একটি আইডিতে বরাদ্দ করার জন্য ব্যবহৃত হয়। আপনি আইডিটার জন্যে কি নাম পছন্দ করবেন এটি আপনার উপর। নিবন্ধটিতে আইডি নাম অবশ্যই একটি এবং অনন্য হতে হবে।

-

আপনার স্টাইলশীটে, আপনি যখন নির্বাচকে ব্যবহার করবেন আইডির পূর্বে একটি নাম্বার সাইন(hash) লিখুন।

-
-
- উদাহরণ
- এই এইচ টি এম এল ট্যাগের একটি class এট্রিবিউট এবং একটি id এট্রিবিউট আছেঃ
- 
<p class="key" id="principal">
-
-

নিবন্ধে আইডি মান, মূল, অবশ্যই এক এবং অনন্য হতে হবে, কিন্তু অন্য ট্যাগসমুহে একই ক্লাস নাম, মূল থাকতে পারে।

-

একটি সি এস এস স্টাইলশীটে, এই নিয়ম সকল উপাদানকে একই ক্লাস key green এর অন্তর্ভূক্ত করেছে। (তারা সবাই {{ HTMLElement("p") }} এর উপাদান নাও হতে পারে)

- 
.key {
-  color: green;
-}
-
-

এই নিয়ম একটি উপাদানকে id principal বোল্ড করে :

- 
#principal {
-  font-weight: bolder;
-}
-
-
-

যদি একটির বেশি নিয়ম একটি উপাদান এ প্রয়োগ করা হয় এবং একই বৈশিষ্ট্য উল্লেখ করা হয়, তাহলে সি এস এস নিয়মের উপর প্রাধান্য দেয় যেটা আরো বেশি সুনির্দষ্ট নির্বাচক। একটি আইডি নির্বাচক ক্লাস নির্বাচক এর চেয়ে আরো সুনির্দিষ্ট, যেটা পর্যায়ক্রমে একটি ট্যাগ নির্বাচক এর চেয়ে আরো বেশি সুনির্র্দিষ্ট।

-
-
- আরো বিস্তারিত
-

আপনি নির্বাচকসমুহকে একত্রিত করতে পারেন, নির্বাচককে আরো বেশি সুনির্দিষ্ট করার জন্যে।

-

উদাহরণ স্বরুপ, নির্বাচক .key ক্লাস নাম key যুক্ত সকল উপাদানকে নির্বাচন করে। নির্বাচক p.key ক্লাস নাম key যুক্ত উপাদানকে শুধুমাত্র {{ HTMLElement("p") }} নির্বাচন করে ।

-

আপনি দুইটি বিশেষ এট্রিবিউট class এবং id দ্বারা নিয়ন্ত্রিত নন। আপনি অন্য এট্রিবিউট সুনির্দিষ্ট করতে পারেন স্কয়ার বন্ধনী ব্যবহার করে। যেমন, নির্বাচক [type='button']button মানের একটি type এট্রিবিউট দ্বারা সকল উপাদানকে নির্বাচিত করে ।

-
-

যদি স্টাইলশীটে নিয়মগুলো পরস্পর বিরোধী হ্য় এবং তারা সমানভাবে সুনির্দিষ্ট হয়, তাহলে তারা সি এস এস নিয়মকে প্রাধান্য দেয় যেটা স্টাইলশীটে পরের দিকে আছে।

-

যখন পরস্পর বিরোধী নিয়মের কারণে আপনার সমস্যা হবে, আরো সুনির্দিষ্ট কোন নিয়মের দ্বারা এটি সমাধান করার চেষ্টা করুন, তাহলে সেটাই প্রাধান্য পাবে। যদি আপনি সেটা করতে না পারেন, চেষ্টা করুন স্টাইলশীটের শেষের দিকের কোন নিয়মের কাছাকাছি যেতে তাহলে সেটিই প্রাধান্য পাবে।

-

নকল ক্লাসের নির্বাচকসমূহ

-

একটি pseudo-class সি এস এস এর মূলশব্দ নির্বাচকের সাথে যুক্ত যেটা উপাদানের বিশেষ অবস্থা নির্বাচনের জন্য সুনির্দিষ্ট করে। উদাহরণ সরূপ, {{ Cssxref(":hover") }} একটা স্টাইল প্রয়োগ করা যাবে যখন কোন ব্যবহারকারী নির্বাচকের দ্বারা সুনির্দিষ্ট করে দেয়া উপাদানের উপর চলাচল করবে।

-

নকল ক্লাসসমুহ, নকল উপাদানগুলোর সাথে, আপনাকে একটি উপাদানের উপর শুধু স্টাইল প্রয়োগ করতে দেয়না, সেই সাথে বহিরাগত কারণের সাথে সংযোগ করে যেমন নেভিগেটরের ইতিহাস ({{ cssxref(":visited") }}, উদাহরণ স্বরূপ), এটার উপাদানের অবস্থা (যেমন {{ cssxref(":checked") }} কিছু উপাদানের গঠনের উপর), অথবা মাউসের অবস্থান (যেমন {{ cssxref(":hover") }} যেটা আপনাকে জানাবে মাউসটি উপাদানের উপর আছে নাকি নাই). একটি সম্পূর্ণ নির্বাচক সমুহের তালিকা, CSS3 Selectors working spec এখানে যান।

-
-
- Syntax
- 
selector:pseudo-class {
-  property: value;
-}
-
-
-

নকল ক্লাসসমুহের তালিকা

- -

তথ্যঃ সম্পর্কের ভিত্তিতে নির্বাচক সমুহ

-

উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের ভিত্তিতে উপাদান সমুহ নির্বাচন করার জন্য সি এস এস এর কিছু উপায় আছে। নির্বাচক সমুহকে আরো বেশি সুনির্দিষ্ট করার জন্যে আপনি এগুলো ব্যবহার করতে পারেন।

- - - - - - - - - - - - - - - - - - - - - - - - -
- সম্পর্কের ভিত্তিতে পরিচিত নির্বাচকসমুহ
নির্বাচকনির্বাচিতসমুহ
A EAny E element that is a descendant of an A element (that is: a child, or a child of a child, etc.)
A > EAny E element that is a child of an A element
E:first-childAny E element that is the first child of its parent
B + EAny E element that is the next sibling of a B element (that is: the next child of the same parent)
-

আপনি জটিল সম্পর্কগুলোকে প্রকাশ করার জন্যে এগুলো একত্রিত করতে পারেন।

-

আপনি * (asterisk) এই চিহ্নটি ব্যবহার করতে পারেন "যেকোনো উপাদান" বুঝানোর জন্যে।

-
-
- উদাহরণ
-

একটি এইচ টি এম এল টেবিলের একটি id এট্রিবিউট, কিন্তু এটির সারি এবং ছোট অংশগুলোর আলাদা আলাদা সনাক্তকারী থাকে নাঃ

- 
<table id="data-table-1">
-...
-<tr>
-<td>Prefix</td>
-<td>0001</td>
-<td>default</td>
-</tr>
-...
-
-

এই নিয়মগুলা সকল সারির প্রথম অংশকে বোল্ড করে, এবং দ্বিতীয় অংশকে মনোস্থানিক করে। তারা শুধু একটি সুনির্দিষ্ট টেবিলকে প্রভাবিত করেঃ

- 
    #data-table-1 td:first-child {font-weight: bolder;}
-    #data-table-1 td:first-child + td {font-family: monospace;}
-
-

ফলাফল এরূপ দেখায়ঃ

- - - - - - -
- - - - - - - - -
Prefix0001default
-
-
-
-
- আরো বিস্তারিত
-

প্রচলিত উপায়ে, আপনি যদি একটি নির্বাচককে আরো সুনির্দিষ্ট করেন, তখন আপনি এটার প্রাধান্য বৃদ্ধি করতে পারবেন।

-

আপনি যদি পদ্ধতিগুলো ব্যবহার করেন, আপনার নিবন্ধে অনেকগুলো ট্যাগ-এর class অথবা id এট্রিবিউটগুলোকে আপনি সুনির্দিষ্ট করার প্রয়োজন পরিহার করতে পারবেন। তা ব্যতীত, সি এস এস কাজ করবে না।

-

অনেক বড় নকশার ক্ষেত্রে যেখানে গতি গুরুত্বপূর্ণ, আপনি আপনার স্টাইলশীটকে আরো নিপুণ করতে পারবেন জটিল নিয়মসমুহকে পরিহার করে যেটা উপাদান সমুহের মধ্যে পারস্পরিক সম্পর্কের উপর নির্ভর করে।

-

টেবিল সম্পর্কে আরো বেশি উদাহরণ এর জন্যে, সি এস এস রেফারেন্স পাতায় Tables দেখুন।

-
-

কাজঃ ক্লাস এবং আইডি নির্বাচক সমুহের ব্যবহার

-

১। আপনার এইচ টি এম এল ফাইলটি সম্পাদনা করুন, কপি এবং পেস্ট করার মাধ্যমে।

-

২। তারপর প্রথম কপিতে আইডি এবং ক্লাস এট্রিবিউট ব্যবহার করুন এবং একটি আইডি এট্রিবিউট দ্বিতীয় কপিতে দিন যেমন নিচে দেখানো হয়েছে। বিকল্পরূপে, আবার সমগ্র ফাইলকে কপি এবং পেস্ট করুনঃ

-
    -
  1. - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p id="first">
-      <strong class="carrot">C</strong>ascading
-      <strong class="spinach">S</strong>tyle
-      <strong class="spinach">S</strong>heets
-    </p>
-    <p id="second">
-      <strong>C</strong>ascading
-      <strong>S</strong>tyle
-      <strong>S</strong>heets
-    </p>
-  </body>
-</html>
-
    -
    2. -
  2. এখন আপনি আপনার সি এস এস ফাইলটি সম্পাদনা করুন। সমগ্র বিষয় পুনঃস্থাপন করুনঃ
    - 
    strong { color: red; }
-.carrot { color: orange; }
-.spinach { color: green; }
-#first { font-style: italic; }
-
    -
    3. -
  3. ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    - লাইনের ক্রম কোন প্রভাব ফেলে না এটি দেখানোর জন্য আপনি আপনার সি এস এস ফাইলে লাইনগুলো পুনরায় সাজানোর চেষ্টা করতে পারেন।
    -
    -

    ক্লাস নির্বাচকসমুহ .carrot এবং .spinach ট্যাগ নির্বাচক strong এর উপরে প্রাধান্য পায়।

    -

    আইডি নির্বাচক #first ক্লাস এবং ট্যাগ নির্বাচকের উপরে প্রাধান্য পায়।

    -
    4. -
-
-
- প্রতিদ্বন্দ্বিতাসমুহ
-
    -
  1. আপনার এইচ টি এম এল ফাইল পরিবর্তন করা ছাড়া, আপনার সি এস এস ফাইলে একটি একক নিয়ম যোগ করুন যেটা সকল প্রথম অক্ষরকে একই রং এর করে রাখে যেমন এখন তারা আছে, কিন্তু দ্বিতীয় বর্ণনায় অন্য সকল টেক্সটকে নীল করে।
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    2. -
  2. আপনি যে নিয়মটি এইমাত্র যোগ করেছেন তা এখন পরিবর্তন করে (অন্য কিছু পরিবর্তন না করে), প্রথম বর্ণনাকে নীল করার জন্যেঃ
    - - - - - - - - - -
    Cascading Style Sheets
    Cascading Style Sheets
    -
    3. -
-
-
- Possible solution
-
    -
  1. Add a rule with an ID selector of #second and a declaration color: blue;, as shown below: - 
    #second { color: blue; }
-
    - A more specific selector, p#second also works.
    2. -
  2. Change the selector of the new rule to be a tag selector using p: - 
    p { color: blue; }
-
    -
    3. -
- Hide solution
- See a solution for the challenge.
-

কাজঃ নকল ক্লাসের নির্বাচকসমুহের ব্যবহার

-
    -
  1. নিচের মত একটি এইচ টি এম এল ফাইল তৈরি করুনঃ
    2. -
  2. - 
    <!doctype html>
-<html>
-  <head>
-  <meta charset="UTF-8">
-  <title>Sample document</title>
-  <link rel="stylesheet" href="style1.css">
-  </head>
-  <body>
-    <p>Go to our <a class="homepage" href="http://www.example.com/" title="Home page">Home page</a>.</p>
-  </body>
-</html>
-
    -
    3. -
  3. এখন আপনার সি এস এস ফাইল সম্পাদনা করুন। সমগ্র বিষয়গুলো পুনঃস্থাপন করুনঃ
    - 
    a.homepage:link, a.homepage:visited {
-  padding: 1px 10px 1px 10px;
-  color: #fff;
-  background: #555;
-  border-radius: 3px;
-  border: 1px outset rgba(50,50,50,.5);
-  font-family: georgia, serif;
-  font-size: 14px;
-  font-style: italic;
-  text-decoration: none;
-}
-
-a.homepage:hover, a.homepage:focus, a.homepage:active {
-  background-color: #666;
-}
-
    -
    4. -
  4. ফাইলগুলো সংরক্ষণ করুন এবং ফলাফল দেখার জন্য আপনার ব্রাউজার রিফ্রেশ করুনঃ (আপনার মাউসটি নিচের লিংকের উপর রাখুন প্রভাব দেখার জন্য): - - - - - - -
    Go to our Home page  
    -
    5. -
-

কাজঃ সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহের ব্যবহার

-

সম্পর্ক এবং নকল ক্লাসের ভিত্তিতে নির্বাচকসমুহ দ্বারা আপনি জটিল ক্যাসকেড এলগরিদম তৈরি করতে  পারবেন।এটি ব্যবহার করার জন্য একটি সাধারণ কৌশল , উদাহরণ স্বরূপ, in order to create pure-CSS dropdown menus তৈরি করার জন্য (এটি শুধুমাত্র সি এস এস, JavaScript ব্যতিরেকে). এই কৌশল এর সারাংশ হল নিম্নে বর্ণিত নিয়মের মত একটি নিয়ম তৈরি করাঃ

-
div.menu-bar ul ul {
-  display: none;
-}
-
-div.menu-bar li:hover > ul {
-  display: block;
-}
-

প্রয়োগ করার জন্য একটি এইচ টি এম এল গঠন নিম্নে দেয়া হলঃ

-
<div class="menu-bar">
-  <ul>
-    <li>
-      <a href="example.html">Menu</a>
-      <ul>
-        <li>
-          <a href="example.html">Link</a>
-        </li>
-        <li>
-          <a class="menu-nav" href="example.html">Submenu</a>
-          <ul>
-            <li>
-              <a class="menu-nav" href="example.html">Submenu</a>
-              <ul>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-                <li><a href="example.html">Link</a></li>
-              </ul>
-            </li>
-            <li><a href="example.html">Link</a></li>
-          </ul>
-        </li>
-      </ul>
-    </li>
-  </ul>
-</div>
-
-

আপনার সম্পূর্ণ CSS-based dropdown menu example দেখুন একটি সম্ভব সংকেতের জন্য।

-

পরবর্তীতে কি?

-

আপনার নমুনা স্টাইলশীট এখন এবং জটিল দেখাতে শুরু করেছে। পরবর্তী অংশ সি এস এসকে easier to read করার উপায় বর্ণনা করে {{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "Readable CSS")}}

diff --git "a/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" "b/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" deleted file mode 100644 index 557ea8824c..0000000000 --- "a/files/bn/web/css/getting_started/\340\246\262\340\247\207-\340\246\206\340\246\211\340\246\237/index.html" +++ /dev/null @@ -1,302 +0,0 @@ ---- -title: Layout -slug: Web/CSS/Getting_Started/লে-আউট -tags: - - CSS - - CSS Float - - CSS Text Align - - CSS Unit - - 'CSS:Getting_Started' - - Example - - Guide - - Intermediate - - NeedsLiveSample - - NeedsUpdate - - Web - - needs review -translation_of: Learn/CSS/CSS_layout -translation_of_original: Web/Guide/CSS/Getting_started/Layout ---- -

{{ CSSTutorialTOC() }}

-

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")}} CSS শুরু করার ১২তম অধ্যায় এটি;  আপনার ডকুমেন্টের লে-আউট কীভাবে adjust করা যায় তা রয়েছে এখানে। আপনার নমুনা ডকুমেন্টের লে-আউট আপনি পরিবর্তন করতে পারেন।

-

তথ্যঃ লে-আউট

-

বিভিন্ন দৃশ্যমান প্রভাব বিশেষায়িত করার জন্য আপনি CSS ব্যবহার করতে পারেন যা আপনার ডকুমেন্টের লে-আউট পরিবর্তন করে। লে-আউট বিশেষায়িত করার কিছু পদ্ধতি বেশ অগ্রসর এবং সেগুলো এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।

-

আপনি যখন একাধিক ব্রাউজারে প্রায় একইরকম দৃশ্যমান লে-আউট ডিজাইন করেন, তবে তা আপনার স্টাইলশীট ব্রাউজারের ডিফল্ট স্টাইলশীট এবং লে-আউট ইঞ্জিনের সাথে যেভাবে interact করে তা বেশ জটিল হতে পারে। এটিও একটি অগ্রসরমান বিষয়, এই বেসিক টিউটোরিয়ালের ঊর্ধ্বে।

-

এই পেজে আপনার চেষ্টা করে দেখার জন্য কিছু সহজ কৌশল বর্ণনা করা আছে।

-

ডকুমেন্ট স্ট্রাকচার

-

আপনি যদি আপনার ডকুমেন্টের লে-আউট নিয়ন্ত্রণ করতে চান তবে আপনাকে এর স্ট্রাকচার পরিবর্তন করতে হতে পারে।

-

আপনার ডকুমেন্টের মার্কআপ ল্যাংগুয়েজের খুব সম্ভবত স্ট্রাকচার তৈরি করার জন্য general-purpose ট্যাগ আছে। যেমন ধরুনঃ HTMLএ আপনি স্ট্রাকচার তৈরির জন্য {{ HTMLElement("div") }} এলিমেন্ট ব্যবহার করতে পারেন।

-
-
- উদাহরণ
-

নমুনা ডকুমেন্টে, দ্বিতীয় শিরোনামের আওতায় সংখ্যায়িত প্যারাগ্রাফে নিজস্ব কোন কন্টেইনার নেই।

-

আপনার স্টাইলশীট প্যারাগ্রাফগুলোর চারদিকে বর্ডার টানতে পারে না, কারণ এই সেক্টরটি বিশেষায়িত করার জন্য কোন এলিমেন্ট নাই।

-

স্ট্রাকচারের এই সমস্যা সমাধানের জন্য, আপনি প্যারাগ্রাফের চারদিকে একটি {{ HTMLElement("div") }} ট্যাগ যোগ করতে পারেন। এই ট্যাগটি ,তাই এটি নির্দিষ্ট করা যেতে পারে একটি id অ্যাট্রিবিউট দিয়েঃ

- 
<h3>Numbered paragraphs</h3>
-<div id="numbered">
-  <p>Lorem ipsum</p>
-  <p>Dolor sit</p>
-  <p>Amet consectetuer</p>
-  <p>Magna aliquam</p>
-  <p>Autem veleum</p>
-</div>
-
-

এখন আপনার স্টাইলশীট দুটি লিস্টের চারদিকে বর্ডার দেওয়ার জন্য একটি রুল ব্যবহার করতে পারেঃ

- 
ul, #numbered {
-  border: 1em solid #69b;
-  padding-right:1em;
-}
-
-

এরকম দেখতে পাওয়ার কথাঃ

- - - - - - -
-

(A) The oceans

-
-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-
-

সাইজ ইউনিট

-

এত দূর পর্যন্ত এই টিউটোরিয়ালে আপনি pixel (px)এ সাইজ নির্ধারণ করেছেন। কম্পিউটার স্ক্রিনের মত কিছু কিছু ডিসপ্লে ডিভাইসের ক্ষেত্রের জন্য এটি যথাযথ। কিন্তু ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করে তখন আপনার লে-আউটে সমস্যা দেখা দিতে পারে।

-

অধিকাংশ ক্ষেত্রেই শতকরা হিসাবে অথবা ems (em)এ সাইজ নির্দিষ্ট করে দেওয়াই ভাল। em হল nominally চলমান ফন্টের (একটি m এর প্রসস্ততা) সাইজ। ব্যবহারকারী যখন ফন্ট সাইজ পরিবর্তন করেন, আপনার লে-আউট নিজে পরিবর্তন থেকেই হয়ে যায়।

-
-
- উদাহরণ
-

এই টেক্সটের বামদিকের বর্ডারের সাইজ পিক্সেলে নির্ধারিত।

-

ডানদিকের বর্ডারের সাইজ ems দিয়ে নির্ধারিত।

-

আপনার ব্রাউজারে, ফন্ট পরিবর্তন করে দেখতে পারেন কীভাবে ডানদিকের বর্ডার adjusts হয় কিন্তু বাঁদিকের বর্ডার হয় নাঃ

- - - - - - -
-
- আমার আকার পুনঃনিরধারণ করুন
-
-
-
-
- বিস্তারিত
-

অন্যান্য ডিভাইসের ক্ষেত্রে, অন্যান্য দৈর্ঘ্য একক প্রযোজ্য।

-

এই টিউটোরিয়ালের পরবর্তী পেজে এ সংক্রান্ত আরো তথ্য আছে।

-

মান ও একক সংক্রান্ত বিস্তারিত জানার জন্য, CSS Specificationএ আপনি  see Values ব্যবহার করতে পারেন।

-
-

টেক্সট লে-আউট

-

কোন এলিমেন্টের একাধিক কন্টেন্ট কীভাবে এক লাইনে নিয়ে আসা যায় তা দুইটি প্রপার্টি দিয়ে নির্ধারিত হয়। সাধারণ লে-আউট adjustment এর জন্য আপনি সেগুলো ব্যবহার করতে পারেনঃ

-
-
- {{ cssxref("text-align") }}
-
- কন্টেন্ট এক লাইনে নিয়ে আসা। এই ভেল্যুগুলোর যেকোনটি ব্যবহার করেঃ left, right, center, justify
-
- {{ cssxref("text-indent") }}
-
- আপনার নির্ধারিত পরিমাণ অনুসারে কন্টেন্ট ইনডেন্ট করেঃ
-
-

শুধুমাত্র লেখাতেই না কোন এলিমেন্টের লেখা সদৃশ যেকোন কনটেন্টে এই প্রপার্টিগুলো প্রয়োগ করা যেতে পারে। খেয়াল রাখবেন, এগুলো এলিমেন্টের children দিয়ে inherited, তাই অবান্তর ফলাফল এড়াতে  আপনাকে খুব সম্ভবত childrenএ সেগুলো বন্ধ করে নেওয়ার প্রয়োজন হতে পারে।

-
-
- উদাহরণ
-

শিরোনাম মাঝে আনতেঃ

- 
h3 {
-  border-top: 1px solid gray;
-  text-align: center;
-}
-
-

ফলাফলঃ

- - - - - - -
-

(A) The oceans

-
-

যে কোন HTML ডকুমেন্টে, শিরোনামের নিচে আপনি যে কনটেন্ট দেখেন তা গঠনগত ভাবে শিরোনামের আওতাধীন নয়। তাই আপনি যখন এরক্ম কোন শিরোনামকে এক লাইনে নিয়ে আসেন, তখন শিরোনামের নিচের ট্যাগগুলো ওই স্টাইলের অন্তর্ভুক্ত হয় না।

-
-

Floats

-

{{ cssxref("float") }} প্রপার্টি কোন এলিমেন্টকে ডানে-বামে সরায়। এলিমেন্টের অবস্থান ও আকার নির্ধারণের জন্য এটি একটি সহজ উপায়।

-

ডকুমেন্ট কনটেন্টের বাকি অংশ সাধারণত floated এলিমেন্টের চারদিকেই থাকে। অন্যান্য এলিমেন্টগুলোতে {{ cssxref("clear") }} প্রপার্টি ব্যবহার করে আপনি তাদের ফ্লট এর বাইরে থাকা নিয়ন্ত্রণ করতে পারেন।

-
-
- উদাহরণ
-

আপনার নমুনা ডকুমেন্টে, লিস্ট উইন্ডোতে ছড়িয়ে থাতে পারে। সেগুলোকে বাঁদিকে সরিয়ে আপনি তা রোধ করতে পারেন।

-

শিরোনামগুলোকে সঠিক স্থানে রাখার জন্য, আপনাকে অবশ্যই এটি নির্দিষ্ট করে দিতে হবে যেন সেগুলো ফ্লট মুক্ত থাকেঃ

- 
ul, #numbered {float: left;}
-h3 {clear: left;}
-
-
-

এমন দেখতে পাওয়ার কথাঃ

- - - - - - -
-

(A) The oceans

-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-
-

(বক্সের ডানদিকে সামান্য padding দরকার, সেখানে বর্ডার লেখার খুবই কাছে হয়ে গিয়েছে।)

-

অবস্থান নির্ধারণ

-

চারটি উপায়ে আপনি কোন এলিমেন্টের অবস্থান নির্ধারণ করতে পারেন {{ cssxref("position") }} প্রপার্টি এবং নিচের যেকোন একটি ভেল্যু নির্দিষ্ট করে।

-

এগুলো এডভান্সড প্রপার্টি। সহজভাবেও এগুলো ব্যবহার করা যায় — সেজন্যই এই বেসিক টিউটোরিয়ালে এ সম্পর্কে বলা হয়েছে। তবে কমপ্লেক্স লে-আউটের জন্য এগুলো ব্যবহার করা কিছুটা জটিল হতে পারে।

-
-
- relative
-
- এলিমেন্টের স্বাভাবিক অবস্থানের আপেক্ষিক পরিবর্তন করা হয়। Use this to shift an element by a specified amount. You can sometimes use the element's margin to achieve the same effect.
-
- fixed
-
- এক্ষেত্রে এলিমেন্টের অবস্থান নির্দিষ্ট। এলিমেন্টের অবস্থান ডকুমেন্ট উইন্ডো অনুযায়ী নির্ধারণ করুন। বাকি ডেকুমেন্ট স্ক্রল করলেও এ ক্ষেত্রে এলিমেন্টটি স্থির থাকবে।
-
- absolute
-
- parent এলিমেন্টের তুলনায় এলিমেন্টের অবস্থান স্থির থাকবে। শুধুমাত্র একটি parent যার নিজের অবস্থান relative, fixed অথবা absolute দিয়ে নির্ধারিত সেটি কাজ করবে। position: relative নির্দিষ্ট করে আপনি যেকোন parent এলিমেন্টকেই এর জন্য প্রস্তুত করে নিতে পারেন; এর জন্য কোন শিফট ব্যবহার না করেই।
-
- static
-
- ডিফল্ট। অবস্থান নির্ধারণ করা সম্পূর্ণ বন্ধ করার প্রয়োজন হলে এই ভেল্যুটি ব্যবহার করুন।
-
-

position প্রপার্টির এই ভেল্যুগুলোর সাথে সাথে (static ব্যতীত), আরো কিছু প্রপার্টি নির্দিষ্ট করুনঃ top, right, bottom, left, width, height। আপনি কোথায় আপনার এলিমেন্টটি দেখতে পেতে চান তা এগুলো নির্দেশ করে এবং এর সাথে সাথে আকারও।

-
-
- উদাহরণ
-

দুইটি এলিমেন্ট একে অপরের উপর অবস্থাআন দেওয়ার জন্য, আপনার ডকুমেন্টের ভেতরে দুইটি এলিমেন্টসহ একটি  parent কন্টেইনার তৈরি করুনঃ

- 
<div id="parent-div">
-  <p id="forward">/</p>
-  <p id="back">\</p>
-</div>
-
-

আপনার স্টাইলশীটে, parents এর অবস্থান relative করুন। এখানে কোন প্রকৃত শিফট নির্ধারণের কোন প্রয়োজন নেই। children এর অবস্থান absolute নির্ধারণ করুনঃ

- 
#parent-div {
-  position: relative;
-  font: bold 200% sans-serif;
-}
-
-#forward, #back {
-  position: absolute;
-  margin:0px; /* no margin around the elements */
-  top: 0px; /* distance from top */
-  left: 0px; /* distance from left */
-}
-
-#forward {
-  color: blue;
-}
-
-#back {
-  color: red;
-}
-
-

ফলাফলে ফরওয়ার্ড শ্ল্যাশের উপরে ব্যাকশ্ল্যাশ দিয়ে এমনটি দেখতে পাওয়ার কথাঃ

-
-

/

-

\

-
- - - - - - -
 
-
-
-
- আরো বিস্তারিত
-

অবস্থান নির্ধারণের পুরো বিষয়টির উপর CSS Specificationএ দুইটি জটিল অধ্যায় আছেঃ  Visual formatting model এবং Visual formatting model details.

-

আপনি যদি একাধিক ব্রাউজারে কার্যকর কোন স্টাইলশীট ডিজাইন করতে থাকেন, তবে আপনারও তা অ্যাকাউন্ট ডিফারেন্সে নেওয়ার দরকার হতে পারে, যেভাবে ব্রাউজার স্ট্যান্ডার্ডের সাথে interpret করে এবং খুব সম্ভবত নির্দিষ্ট কিছু ব্রাউজারের বিশেষ কিছু ভার্সনে বাগ করতে পারে।

-
-

Action: লে-আউট নির্ধারণ

-
    -
  1. আপনার নমুনা ডকুমেন্ট পরিবর্তন করুন, doc2.html এবং স্টাইলশীট, style2.css, এই অংশে উপরের উদাহরণ ডকুমেন্ট স্ট্রাকচার এবং ফ্লটস।
    2. -
  2. ফ্লটস উদাহরণে, আপনার padding যুক্ত করুন ডানদিকের বর্ডার থেকে টেক্সট 0.5 em দূরে সরানোর জন্য।
    3. -
-
-
- চ্যালেঞ্জ
-

আপনার নমুনা ডকুমেন্ট পরিবর্তন করুন, doc2.html, শেষ করার আগ দিয়ে এই ট্যাগটি যুক্ত করে, </body> ট্যাগের ঠিক আগে।

- 
<img id="fixed-pin" src="Yellow-pin.png" alt="Yellow map pin">
-
-

এই টিউটোরিয়ালে আপনি যদি ইমেজ ফাইলটি আগে থেকে ডাউনলোড না করে থাকেন, তবে এখন সেটি ডাউনলোড করে নিন এবং নমুনা ফাইলের মত একই ডিরেক্টরিতে এটি রাখুনঃ

- - - - - - -
Image:Yellow-pin.png
-

আপনার ডকুমেন্টের কোথায় ইমেজটি দেখা যেতে ঠিক করে নিন। এবার আপনার ব্রাউজার রিফ্রেশ করুন আপনার কাজ সঠিক হয়েছে কিনা তা দেখার জন্য।

-

আপনার স্টাইলশীটে একটি রুল যুক্ত করুন যা আপনার ডকুমেন্টে উপরের দিকে ডানে ইমেজটি রাখে।

-

আপ্নার ব্রাউজার রিফ্রেশ করে উইন্ডোটি ছোট করুন। যখন আপনি আপনার ডকুমেন্ট স্ক্রল করেন তখন দেখুন ইমেজটি উপরের দিকে ডানে থাকে কিনাঃ

-
-
-

(A) The oceans

-
-
    -
  • Arctic
    • -
  • Atlantic
    • -
  • Pacific
    • -
  • Indian
    • -
  • Southern
    • -
-
-

(B) Numbered paragraphs

-
-

1: Lorem ipsum

-

2: Dolor sit

-

3: Amet consectetuer

-

4: Magna aliquam

-

5: Autem veleum

-
-

 

-
- Yellow map pin
-
-
-
-

 এই চ্যালেঞ্জটির একটি সমাধান দেখুন।

-

এর পরে?

-

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Tables", "Tables") }} এইমাত্র আপনি এই বেসিক CSS টিউটোরিয়ালের সব টপিক প্রায় শেষ করে ফেলেছেন। পরবর্তী পেজটি CSS রুলের আরো অ্যাডভান্সড সিলেক্টর বর্ণনা করে এবং আরো কিছু নির্দিষ্ট উপায় যা দিয়ে আপনি টেবিল স্টাইল করতে পারেন।

diff --git a/files/bn/web/guide/api/dom/index.html b/files/bn/web/guide/api/dom/index.html deleted file mode 100644 index 253046a6c3..0000000000 --- a/files/bn/web/guide/api/dom/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: DOM developer guide -slug: Web/Guide/API/DOM -tags: - - API - - DOM - - Guide - - NeedsTranslation - - TopicStub -translation_of: Web/API/Document_Object_Model -translation_of_original: Web/Guide/API/DOM ---- -

{{draft}}

-

The Document Object Model is an API for HTML and XML documents. It provides a structural representation of the document, enabling the developer to modify its content and visual presentation. Essentially, it connects web pages to scripts or programming languages.

-

All of the properties, methods, and events available to the web developer for manipulating and creating web pages are organized into objects (e.g., the document object that represents the document itself, the table object that represents a HTML table element, and so forth). Those objects are accessible via scripting languages in most recent web browsers.

-

The DOM is most often used in conjunction with JavaScript. However, the DOM was designed to be independent of any particular programming language, making the structural representation of the document available from a single, consistent API. Though we focus on JavaScript throughout this site, implementations of the DOM can be built for any language.

-

The World Wide Web Consortium establishes a standard for the DOM, called the W3C DOM. It should, now that the most important browsers correctly implement it, enable powerful cross-browser applications.

-

Why is the DOM important?

-

"Dynamic HTML" (DHTML) is a term used by some vendors to describe the combination of HTML, style sheets and scripts that allows documents to be animated. The W3C DOM Working Group is working hard to make sure interoperable and language-neutral solutions are agreed upon (see also the W3C FAQ).

-

As Mozilla claims the title of "Web Application Platform", support for the DOM is one of the most requested features, and a necessary one if Mozilla wants to be a viable alternative to the other browsers. The user interface of Mozilla (also Firefox and Thunderbird) is built using XUL, using the DOM to manipulate its own UI.

-

More about the DOM

-

{{LandingPageListSubpages}}

diff --git a/files/bn/web/guide/api/webrtc/index.html b/files/bn/web/guide/api/webrtc/index.html deleted file mode 100644 index 48a47d8aa1..0000000000 --- a/files/bn/web/guide/api/webrtc/index.html +++ /dev/null @@ -1,40 +0,0 @@ ---- -title: ওয়েব আরটিসি (WebRTC) -slug: Web/Guide/API/WebRTC -tags: - - এপিআই - - ওয়েব আরটিসি - - পরিচিতি - - ল্যান্ডিং -translation_of: Web/API/WebRTC_API -translation_of_original: Web/Guide/API/WebRTC ---- -

WebRTC (যেখানে RTC এর পূর্ণরুপ Real-Time Communications) হল একটি প্রযুক্তি যা একাধিক ব্রাউজারের মধ্যে ব্রাউজার-ব্রাউজার অডিও/ভিডিও স্ট্রিমিং কিংবা ডাটা শেয়ারিং সুবিধা প্রদান করে থাকে। WebRTC এর সাহায্যে কোনরূপ প্লাগ-ইন বা এক্সটেনশন ব্যবহার ছাড়াই স্ট্যান্ডার্ড ওয়েব এপিআই এর সাহায্যে টেলিকনফারেন্সিং কিংবা ডাটা শেয়ারিং সম্ভব।

- -

WebRTC এর অংশগুলোকে জাভাস্ক্রিপ্ট এপিআই এর সাহায্য ব্যবহার করা যায়: Network Stream API একটি অডিও/ভিডিও স্ট্রিম নির্দেশ করে, PeerConnection API এর সাহায্য দুই বা ততোধিক ব্রাউজারের মধ্যে সংযোগ স্থাপন করা যায়, এবং DataChannel API এর সাহায্য অডিও/ভিডিও ব্যতীত অন্যান্য ধরণের ডাটা আদানপ্রদান করা যায় - যা গেমিং, চ্যাট কিংবা ফাইল ট্রান্সফারের জন্য অসাধারণ!

- -
-

উল্লেখ্য: এই ডকুমেন্টেশন নতুন যায়গায় চলে যাচ্ছে।

-
- -

গাইড

- -
-
WebRTC এর সাহায্যে পিয়ার-টু-পিয়ার যোগাযোগ
-
ওয়েবআরটিসি এপিআই এর সাহায্যে পিয়ার টু পিয়ার যোগাযোগ করা।
-
WebRTC এর আর্কিটেকচার পরিচিতি
-
WebRTC এর অনেকগুলো আলাদা আলাদা অংশ রয়েছে যা নবাগতদের জন্য প্রচণ্ড বিভ্রান্তকর। এই আর্টিকেলে এইসকল অংশগুলোর পরিচয় দিয়ে, তারা কিভাবে একত্রে কাজ করে - সে সম্পর্কে ধারণা দেওয়া হয়েছে।
-
WebRTC এর সাধারণ বিষয়াবলী
-
Now you understand the WebRTC architecture, you can move on to this article, which takes you through the creation of a basic cross-browser RTC App.
-
- -

রেফারেন্স

- -
-
Navigator.getUserMedia
-
মিডিয়া (ভিডিও/অডিও) ক্যাপচার করার এপিআই।
-
RTCPeerConnection
-
দুইটি পিয়ারের মধ্যে ডাটা স্ট্রিমিং করার ইন্টারফেস।
-
RTCDataChannel
-
পিয়ার কানেকশনের মধ্যে দিয়ে ডাটা (মিডিয়া নয় এমন) পাঠানোর ইন্টারফেস।
-
diff --git a/files/bn/web/guide/graphics/index.html b/files/bn/web/guide/graphics/index.html new file mode 100644 index 0000000000..fdf50fc2b7 --- /dev/null +++ b/files/bn/web/guide/graphics/index.html @@ -0,0 +1,53 @@ +--- +title: গ্রাফিক্স অন দি ওয়েব +slug: Web/Guide/গ্রাফিক্স +tags: + - NeedsReview +translation_of: Web/Guide/Graphics +--- +

আধুনিক ওয়েব সাইট এবং অ্যাপ্লিকেশনে প্রায়ই গ্রাফিক্স উপস্থাপন প্রয়োজন পরে। {{HTMLElement("img")}} উপাদান ব্যবহার করে সহজেই স্ট্যাটিক ইমেজ প্রদর্শিত করা যায়, অথবা {{cssxref("background-image")}} প্রোপার্টি ব্যবহার করে এইচটিএমএল উপাদানের পটভূমি নির্ধারণ করা যায়।

+

আপনি প্রায়ই অন-দা-ফ্লাই  গ্রাফিক্স নির্মাণ করতে চান, অথবা ঘটনার পরে ছবি প্রদর্শন করতে চান। এই নিবন্ধনটি আপনাকে সাহায্য করবে কিভাবে আপনি তা সম্পন্ন করতে পারেন।

+
+
+

2D গ্রাফিক্স

+
+
+ Canvas(ক্যানভাস)
+
+ এই {{HTMLElement("canvas")}}উপাদানটি APIs প্রদান করে যেন জাভাস্ক্রিপ্ট ব্যাবহার করে 2D গ্রাফিক্স তৈরি করা যায়।
+
+ SVG(এস ভি জি)
+ স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) লাইনস, কারভস, এবং অন্যান্য জ্যামিতিক আকার প্রদান করে। bitmaps ব্যাবহার করা এড়িয়ে চলার মাধ্যমে, আপনি যেকোনো আকারের ছবি পরিছন্নভাবে তৈরি করতে পারেন।
+
+

সম্পূর্ণ দেখুন্‌...

+
+
+

3D গ্রাফিক্স

+
+
+ WebGL(ওয়েব জি এল)
+
+
+
+ WebGL শুরু করার একটি নির্দেশিকা, ওয়েবের জন্য 3D গ্রাফিক্স API. এই প্রযুক্তি আপনাকে ওয়েবের মধ্যে স্ট্যান্ডার্ড OpenGL ES ব্যাবহার করতে দেয়।
+
+
+
+

ভিডিও

+
+
+ HTML5 (অডিও এবং ভিডিও ব্যাবহার)
+
+
+
+ একটি HTML নথিতে ভিডিও এম্বেড এবং প্লেব্যাক নিয়ন্ত্রণ।
+
+
+
+ WebRTC(ওয়েব আর টি সি)
+
+  WebRTC(ওয়েব আর টি সি) এর RTC (আর টি সি) বলতে Real-Time Communications (রিয়েল টাইম কমিউনিকেশন) কে বুঝায়, এই প্রযুক্তি অডিও / ভিডিও স্ট্রিমিং এবং ব্রাউজার ক্লায়েন্টস (মিত্রগণ) মধ্যে তথ্য ভাগ করতে সক্ষম।
+
+
+
+

 

diff --git a/files/bn/web/guide/html/canvas_tutorial/index.html b/files/bn/web/guide/html/canvas_tutorial/index.html deleted file mode 100644 index 2118fa3c97..0000000000 --- a/files/bn/web/guide/html/canvas_tutorial/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: ক্যানভাস টিউটোরিয়াল -slug: Web/Guide/HTML/Canvas_tutorial -tags: - - NeedsReview -translation_of: Web/API/Canvas_API/Tutorial ---- -

-

<canvas> হচ্ছে একটি HTML element যেটা স্ক্রিপ্টিং (সাধারণত JavaScript ) ব্যবহার করে  গ্রাফিক্স আঁকার জন্য ব্যবহার করা হয় । উদাহরণস্বরূপ  গ্রাফ আঁকতে, ছবি কম্পোজিশন অথবা সাধারন ( তবে বেশি সাধারন নয় ) অ্যানিমেশন তৈরি করতে এটি ব্যবহার করা হয় । ডানপাশের ছবিতে <canvas> প্রয়োগ করে কিছু উদাহরণ দেওয়া হয়েছে যা আমরা পরে এর টিউটোরিয়াল এ দেখবো।

-

<canvas> সর্বপ্রথম Apple এর Mac OS X ড্যাশবোর্ড এ ব্যবহার করার জন্য প্রকাশিত হয় এবং পরে Safari এবং  Google Chrome এ প্রয়োগ করা হয়. Gecko 1.8- ভিত্তিক browsers, যেমন Firefox 1.5 ও এই element কে সমর্থন করে. এই <canvas> element হচ্ছে  WhatWG Web applications 1.0 এর একটি অংশ যা HTML5 নামেও পরিচিত।

-

এই টিউটোরিয়াল কিভাবে <canvas> element ব্যবহার করে প্রাথমিক ভাবে 2D গ্রাফিক্স তৈরি করা যায় তা বর্ণনা করে । আপনি canvas ব্যবহার করে কি করতে পারবেন এই উদাহরণগুলো তার সুস্পষ্ট ধারণা দেয় এবং code কে snippets করে আপনার নিজের কাঙ্ক্ষিত বিষয়কে তৈরি করতে শুরু করে ।

-

শুরু করার পূর্বে

-

<canvas> element ব্যবহার করা কঠিন কিছু নয় তবে আপনার HTML এবং  JavaScript সম্পর্কে প্রাথমিক ধারণা থাকতে হবে । কিছু পুরাতন browsers এ  <canvas> element সমর্থন করে না, কিন্তু সম্প্রতি সকল প্রধান browsers গুলো তে সমর্থন করে ।  canvas এর default সাইজ হচ্ছে 300px * 150px (width * height). কিন্তু custom size গুলো CSS এর height এবং width property ব্যবহার করে উল্লেখ করা যায় । canvas এ গ্রাফিক্স আঁকতে গেলে আমরা javascript context object ব্যবহার করি , যা গ্রাফিক্সটিকে অনেক উন্নতমানের করে তুলে ।

-

এই টিউটোরিয়াল এ যা আছে

- -

আরও দেখুন

- -

A note to contributors

-

Due to an unfortunate technical error that occurred the week of June 17, 2013, we lost the history of this tutorial, including attributions to all past contributors to its content. We apologize for this, and hope you'll forgive this unfortunate mishap.

-
- {{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/bn/web/guide/html/content_editable/index.html b/files/bn/web/guide/html/content_editable/index.html deleted file mode 100644 index 0e8770f603..0000000000 --- a/files/bn/web/guide/html/content_editable/index.html +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Content Editable -slug: Web/Guide/HTML/Content_Editable -tags: - - NeedsReview -translation_of: Web/Guide/HTML/Editable_content ---- -

HTML5 এ যেকোনো অংশ পরিবর্তনীয়। কিছু জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি একটি ওয়েব পেজ একটি সম্পূর্ণ এবং দ্রুত rich-text editor এ রুপান্তর করতে পারবেন । এই অনুচ্ছেদ আপনাকে এর কার্যকারিতা সম্পর্কে কিছু তথ্য প্রদান করবে।

-

সামঞ্জস্যতা

-

পরিবর্তনীয় বিষয়গুলো সম্পূর্ণভাবে বর্তমান ব্রাউজার গুলোর সাথে সামঞ্জস্যপূর্ণ।

- -

এখন পর্যন্ত অপেরা মিনি তে সমর্থিত নয়।

-

এটা কিভাবে কাজ করে ?

-

contenteditable এট্রিবিউট  টি আপনার HTML উপাদান এ true সেট করুন। এটা প্রায় সকল HTML উপাদান এ ব্যবহার করা যায়।

-

উদাহরণ

-

একটি সহজ উদাহরণ

-
<!DOCTYPE html>
-<html>
-  <body>
-    <div contenteditable="true">
-      This text can be edited by the user.
-    </div>
-  </body>
-</html>
-

আপনি এখানে লোকালস্টোরেজ ব্যবহার করে জাভাস্ক্রিপ্ট ইন্টিগ্রেশন এর একটি কার্যকর উদাহরন দেখতে পারেন। এই উৎস-এর সাথে

-

আরও দেখুন

-
user_pref("capability.policy.policynames", "allowclipboard");
-user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
-user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
-user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
-

কিভাবে এই বিষয় এর সাথে কাজ করবেন  (old IE style API) এবং এখানে

-
- {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}
diff --git a/files/bn/web/guide/html/editable_content/index.html b/files/bn/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..0e8770f603 --- /dev/null +++ b/files/bn/web/guide/html/editable_content/index.html @@ -0,0 +1,44 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +tags: + - NeedsReview +translation_of: Web/Guide/HTML/Editable_content +--- +

HTML5 এ যেকোনো অংশ পরিবর্তনীয়। কিছু জাভাস্ক্রিপ্ট ইভেন্ট হ্যান্ডলার ব্যবহার করে আপনি একটি ওয়েব পেজ একটি সম্পূর্ণ এবং দ্রুত rich-text editor এ রুপান্তর করতে পারবেন । এই অনুচ্ছেদ আপনাকে এর কার্যকারিতা সম্পর্কে কিছু তথ্য প্রদান করবে।

+

সামঞ্জস্যতা

+

পরিবর্তনীয় বিষয়গুলো সম্পূর্ণভাবে বর্তমান ব্রাউজার গুলোর সাথে সামঞ্জস্যপূর্ণ।

+ +

এখন পর্যন্ত অপেরা মিনি তে সমর্থিত নয়।

+

এটা কিভাবে কাজ করে ?

+

contenteditable এট্রিবিউট  টি আপনার HTML উপাদান এ true সেট করুন। এটা প্রায় সকল HTML উপাদান এ ব্যবহার করা যায়।

+

উদাহরণ

+

একটি সহজ উদাহরণ

+
<!DOCTYPE html>
+<html>
+  <body>
+    <div contenteditable="true">
+      This text can be edited by the user.
+    </div>
+  </body>
+</html>
+

আপনি এখানে লোকালস্টোরেজ ব্যবহার করে জাভাস্ক্রিপ্ট ইন্টিগ্রেশন এর একটি কার্যকর উদাহরন দেখতে পারেন। এই উৎস-এর সাথে

+

আরও দেখুন

+
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+

কিভাবে এই বিষয় এর সাথে কাজ করবেন  (old IE style API) এবং এখানে

+
+ {{ languages({ "ja": "ja/HTML/Content_Editable", "zh-cn": "zh-cn/HTML/Content_Editable" }) }}
diff --git a/files/bn/web/guide/html/forms/index.html b/files/bn/web/guide/html/forms/index.html deleted file mode 100644 index 2e0e03ea83..0000000000 --- a/files/bn/web/guide/html/forms/index.html +++ /dev/null @@ -1,342 +0,0 @@ ---- -title: HTML forms guide -slug: Web/Guide/HTML/Forms -tags: - - NeedsReview -translation_of: Learn/Forms ---- -

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

-

বর্ন মালা

-
    -
  1. আমার প্রথম   HTML form
    2. -
  2. HTML form কি ভাবে গঠন  করতে হয় 
    3. -
  3. নেটিভ    form  উইজেট
    4. -
  4. CSS সাথে HTML forms -
      -
    1. HTML forms এর উন্নতি
      2. -
    2.  HTML forms উন্নতির ধরন
      3. -
    3.  উইজেট এর টেবিল হতে Property শামাযশ্যতা
      4. -
    -
    5. -
  5. তথ্য হতে  পাঠাতে এবং চেষ্টা করতে
    6. -
  6.  তথ্য হতে বৈধতা
    7. -
  7.  উইজেট হতে কিভাবে coustom তৈরি করতে হয়
    8. -
  8.  JavaScript কি ভাবে নিক্ষেপ করতে হয় -
      -
    1. ডাটা অবজেকট কিভাবে ব্যাবহার  করতে হয়
      2. -
    -
    9. -
  9. HTML  হতে ব্রাউজারে
    10. -
-

HTML Documentation

-

HTML Elements

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ElementRelated DOM interfaceDescription
{{HTMLElement("button")}}{{domxref("HTMLButtonElement")}}The button element represents a clickable button.
{{HTMLElement("datalist")}}{{domxref("HTMLDataListElement")}}The datalist element contains a set of {{ HTMLElement("option") }} elements that represent the possible options for the value of other forms elements.
{{HTMLElement("fieldset")}}{{domxref("HTMLFieldSetElement")}}The fieldset is used to group several form elements within a form.
{{HTMLElement("form")}}{{domxref("HTMLFormElement")}}The form element represents a section of document that contains interactive element that enable a user to submit information to a web server.
{{HTMLElement("input")}}{{domxref("HTMLInputElement")}}The  input element is used to create interactive controls for forms.
{{HTMLElement("keygen")}}{{domxref("HTMLKeygenElement")}}The keygen element exists to facilitate generation of key material, and submission of the public key as part of an HTML form
{{HTMLElement("label")}}{{domxref("HTMLLabelElement")}}The label element represents a caption for an item in a user interface
{{HTMLElement("legend")}}{{domxref("HTMLLegendElement")}}The legend element represents a caption for the content of its parent {{ HTMLElement("fieldset") }}.
{{HTMLElement("meter")}}{{domxref("HTMLMeterElement")}}The meter element  represents either a scalar value within a known range or a fractional value.
{{HTMLElement("optgroup")}}{{domxref("HTMLOptGroupElement")}}the optgroup element creates a group of options within a {{ HTMLElement("select") }} element.
{{HTMLElement("option")}}{{domxref("HTMLOptionElement")}}the HTML option element is used to create a control representing an item within a {{ HTMLElement("select") }}, an {{ HTMLElement("optgroup") }} or a {{ HTMLElement("datalist") }} element.
{{HTMLElement("output")}}{{domxref("HTMLOutputElement")}}The output element represents the result of a calculation.
{{HTMLElement("progress")}}{{domxref("HTMLProgressElement")}}The progress element is used to view the completion progress of a task.
{{HTMLElement("select")}}{{domxref("HTMLSelectElement")}}The select element represents a control that presents a menu of options.
{{HTMLElement("textarea")}}{{domxref("HTMLTextAreaElement")}}The textarea element represents a multi-line plain-text editing control.
-
-

Note: All form elements, as all HTML elements, support the {{domxref("HTMLElement")}} DOM interface.

-
-

HTML Attributes

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Attribute NameElementsDescription
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}List of types the server accepts, typically a file type.
accept-charset{{ HTMLElement("form") }}List of supported charsets.
action{{ HTMLElement("form") }}The URI of a program that processes the information submitted via the form.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}Indicates whether controls in this form can by default have their values automatically completed by the browser.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}The element should be automatically focused after the page loaded.
challenge{{ HTMLElement("keygen") }}A challenge string that is submitted along with the public key.
checked{{ HTMLElement("input") }}Indicates whether the element should be checked on page load.
cols{{ HTMLElement("textarea") }}Defines the number of columns in a textarea.
data{{ HTMLElement("object") }}Specifies the URL of the resource.
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether the user can interact with the element.
enctype{{ HTMLElement("form") }}Defines the content type of the form date when the method is POST.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}Describes elements which belongs to this one.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates the form that is the owner of the element.
high{{ HTMLElement("meter") }}Indicates the lower bound of the upper range.
keytype{{ HTMLElement("keygen") }}Specifies the type of key generated.
list{{ HTMLElement("input") }}Identifies a list of pre-defined options to suggest to the user.
low{{ HTMLElement("meter") }}Indicates the upper bound of the lower range.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Indicates the maximum value allowed.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Defines the maximum number of characters allowed in the element.
method{{ HTMLElement("form") }}Defines which HTTP method to use when submitting the form. Can be GET (default) or POST.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}Indicates the minimum value allowed.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Indicates whether multiple values can be entered in an input of the type email or file.
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Name of the element. For example used by the server to identify the fields in form submits.
novalidate{{ HTMLElement("form") }}This attribute indicates that the form shouldn't be validated when submitted.
optimum{{ HTMLElement("meter") }}Indicates the optimal numeric value.
pattern{{ HTMLElement("input") }}Defines a regular expression which the element's value will be validated against.
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Provides a hint to the user of what can be entered in the field.
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}Indicates whether the element can be edited.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}Indicates whether this element is required to fill out or not.
rows{{ HTMLElement("textarea") }}Defines the number of rows in a textarea.
selected{{ HTMLElement("option") }}Defines a value which will be selected on page load.
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}Defines the width of the element (in pixels). If the element's type attribute is text or password then it's the number of characters.
src{{ HTMLElement("input") }}The URL of the embeddable content.
step{{ HTMLElement("input") }} 
target{{ HTMLElement("form") }} 
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}Defines the type of the element.
usemap{{ HTMLElement("input") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}Defines a default value which will be displayed in the element on page load.
wrap{{ HTMLElement("textarea") }}Indicates whether the text should be wrapped.
-

Normative reference

- diff --git a/files/bn/web/guide/html/html5/index.html b/files/bn/web/guide/html/html5/index.html new file mode 100644 index 0000000000..bc45480642 --- /dev/null +++ b/files/bn/web/guide/html/html5/index.html @@ -0,0 +1,180 @@ +--- +title: HTML5 +slug: HTML/HTML5 +tags: + - Guide + - HTML + - HTML5 + - NeedsReview + - Overview + - Web + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML বলতে যা বুঝায় HTML5  তার সর্বাধুনিক বিবর্তন। বিষয়টি দুইটি ভিন্ন ধারনা কে প্রতিনিধিত্ব করে :

+ +
+ +
+ +

সকল উন্মুক্ত ওয়েব ডেভলপারদের ব্যবহার উপযোগী করা সাজানো হয়েছে। এই পৃষ্ঠায় অসংখ্যা HTML5 প্রযুক্তির তথ্য সমৃদ্ধ পৃষ্ঠার লিংক দেওয়া আছে। কার্যকরিতার উপর ভিত্তি করে এগুলোকে বিভিন্ন দলে বিভক্ত করা হয়েছে।

+ + + +
+
+

সিম্যানটিকস

+ +
+
HTML5 এর সেকশন এবং আউটলাইন
+
HTML5 এর নতুন আউটলাই এবং সেকশন উপাদানের এক ঝলক: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} এবং {{HTMLElement("hgroup")}}.
+
HTML5 অডিও এবং ভিডিও'র ব্যবহার
+
{{HTMLElement("audio")}} এবং {{HTMLElement("video")}} উপাদান এম্বেড থাকা এবং নতুন মাল্টিমিডিয়ার ব্যবহার নিশ্চিত করা।
+
HTML5 এর ফর্ম
+
এক নজরে HTML5 এ ওয়েব ফর্মের উন্নয়নগুলো দেখে নেই: কন্সট্রেইন্ট ভ্যালিডেশন এপিআই, কিছু নতুন এট্রিবিউট, {{HTMLElement("input")}} এট্রিবিউটের জন্য নতুন নতুন ভ্যালু {{htmlattrxref("type", "input")}} এবং {{HTMLElement("output")}} নামক নতুন এলিমেনট।
+
নতুন সিমানটিকস এলিমেন্ট
+
সেকশন, মিডিয়া এবং ফর্ম এলিমেন্টের পাশাপারশি আরো নতুন নতুন এলিমেন্ট এসেছে, যেমন
+
{{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, অথবা{{HTMLElement("meter")}}, যা HTML5 এলিমেন্টের পরিমান বৃদ্ধি করে দিচ্ছে।
+
{{HTMLElement("iframe")}} এর আরো উন্নয়ন
+
‌{{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}}, and {{htmlattrxref("srcdoc", "iframe")}} এট্রিবিউটের ব্যবহার করে, ডেভলপারগন নিরাপত্তার মান কে আরো যথাযথ করতে পারছেন এবং  {{HTMLElement("iframe")}} এর চাহিদা মতন রেন্ডারিং করতে পারছেন।
+
MathML
+
গাণিতিক ফর্মুলার সরাসরি ব্যবহার নিশ্চিত করেছে।
+
HTML5 এর পরিচিতি
+
আপনি HTML5 এর মাধ্যমে কোন ওয়েব ডিজাইন করলে অথবা কোন ওয়েব এপ্লিকেশন তৈরি করতে চাইলে কিভাবে শুরু করবেন তা এই নিবন্ধে বলা আছে।
+
HTML5-সমর্থিত পার্সার
+
এটি একটি পার্সার, যা HTML ডকুমেন্টের বাইটকে ডকুমেন্ট অবজেক্ট মডেলে (DOM) রূপান্তর করে। এটাকে এখন বর্ধিত করা হয়েছে এবং  এখন আরো ভালভাবে সকল ক্ষেত্রে কাজ করার উপযুক্ত করা হয়েছে। এমন কি ভুল মার্কআপ পাওয়ার পরও যাতে ঠিকঠাক কাজ করতে পারে, তেমন ক্ষমতা দেয়া হয়েছে । এতে করে HTML5 সমর্থিত ব্রাউজার গুলোর মদ্ধে আন্তঃ পরিচালন ক্ষমতা ও অনুমানের দক্ষতা বৃদ্ধি পেয়েছে।
+
+ +

কানেক্টিভিটি

+ +
+
ওয়েব সকেট
+
ওয়েব পেজ এবং সার্ভারের মধ্যে, HTML নয় এমন তথ্য আদান-প্রদানের জন্য, একটি স্থায়ী সংযোগ তৈরি করার সুবিধা দেয়।
+
সার্ভার-প্রেরিত ইভেন্ট‌
+
আগে সার্ভার গুলো শুধু গ্রাহকের অনুরোধের ভিত্তিতে তথ্য পাঠাতে পারত। কিন্তু এই নতুন সংযোজনটি বারবার অনুরোধের ঝামেলা ছাড়াই সরাসরি গ্রাহকের কাছে ইভেন্ট প্রেরণের অনুমতি দেয়।
+
WebRTC
+
RTC মানে Real Time Communication বা তাৎক্ষণিক যোগাযোগ। এটি ব্রাউজারের মাদ্ধমে অন্যদের সাথে চ্যাট বা ভিডিও কনফারেন্সিং এর সুবিধা দেয়। আর এই প্রযুক্তি ব্যবহারের ফলে কোন প্রকার আলাদা সফটওয়্যার বা প্লাগিনেরও প্রয়োজন হয়না।
+
+ +

অফলাইন এবং স্টোরেজ

+ +
+
অফলাইন রিসোর্স: এপ্লিকেশন ক্যাশ
+
ফায়ারফক্স সম্পূর্ণ ভাবে HTML5 অফলাইন রিসোর্স সমর্থন করে। বাকি সবারও একই ধরনের অফলাইন রিসোর্স সমর্থন আছে।
+
অনলাইন এবং অফলাইন ইভেন্ট
+
ফায়ারফক্স ৩ WHATWG অনলাইন এবং অফলাইন ইভেন্ট সমর্থন করে, যা একটি এপ্লিকেশন এবং এক্সটেনশন কে সচল ইন্টারনেট সংযোগ আছে কিনা তা পরীক্ষা করার সুযোগ দেয়, সাথে সাথে সংযোগ কি উঠা নামা করছে কিনা তাও পরীক্ষা করে।
+
WHATWG ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ (এককথায় DOM স্টোরেজ)
+
ক্লায়েন্ট সাইড সেসন এবং স্থায়ী স্টোরেজ ওয়েব এপ্লিকেশন কে ক্লায়েন্ট সাইডে তথ্য সংরক্ষণে সুবিধা দেয়।
+
IndexedDB
+
ইহা একটি ওয়েব মান যা একটি উল্লেখযোগ্য পরিমান সাজানো তথ্য ব্রাজারে সংরক্ষণকে বুঝায় এবং ইন্ডেক্স ব্যবহার করে উচ্চ ক্ষমতায় তথ্য অনুসন্ধানের সুবিধা দেয়।
+
ওয়েব এপ্লিকেশন থেকে ফাইলের ব্যবহার
+
নতুন HTML5 ফাইল এপিআই গিকোতে যুক্ত হয়েছে, যা ব্যবহারকারী দ্বারা নির্বাচিত স্থানীয় ফাইল ব্যবহার করাকে সম্ভব করেছে। এরমধ্যে রয়েছে {{HTMLElement("input")}} ও multiple অ্যাট্রিবিউট ব্যবহার করে একাধিক ধরণের file নির্বাচন সমর্থন। এরমধ্যে FileReaderও আছে।
+
+ +

মাল্টিমিডিয়া

+ +
+
HTML5 অডিও ও ভিডিও ব্যবহার করা
+
{{HTMLElement("audio")}} এবং {{HTMLElement("video")}} এর সাহায্যে মাল্টিমিডিয়া কন্টেন্ট ওয়েবপেজে যুক্ত করার এবং ম্যানিপুলেট করার সুবিধা দেয়।
+
WebRTC
+
RTC অর্থ রিয়েল টাইম কমিউনিকেশন, যা ব্রাউজারেই অতিরিক্ত প্লাগ-ইনের সাহায্য ছাড়া অন্যান্য মানুষের সাথে যোগাযোগ করা এবং সরাসরি ভিডিও-কনফারেন্সিং নিয়ন্ত্রণ করা সম্ভব করে।
+
ক্যামেরা API ব্যবহার করা
+
কম্পিউটারের ক্যামেরা থেকে ছবি ব্যবহার, পরিবর্তন এবং সংরক্ষণের সুবিধা প্রদান করে।
+
ট্র্যাক এবং WebVTT
+
{{HTMLElement("track")}} সাবটাইটেল এবং চ্যাপ্টারের সুবিধা প্রদান করে। WebVTT একটি টেক্সট ট্র্যাক ফরম্যাট।
+
+ +

ত্রিমাত্রিক গ্রাফিক্স এবং ইফেক্ট

+ +
+
ক্যানভাস টিউটোরিয়াল
+
নতুন HTML {{HTMLElement("canvas")}} এলিমেন্ট এবং গ্রাফিক্স ও অন্যান্য অবজেক্ট আঁকা সম্পর্কে জানুন
+
<canvas> এলিমেন্টের জন্য HTML টেক্সট API
+
{{HTMLElement("canvas")}} এখন HTML5 টেক্সট API সমর্থন করে।
+
WebGL
+
WebGL (ওয়েব জি, এল) OpenGL ES 2.0 এর কাছাকাছি একটি API এর সাহায্যে ওয়েবে {{HTMLElement("canvas")}} এলিমেন্টে ত্রিমাত্রিক গ্রাফিক্স নিয়ে আসে। 
+
SVG
+
সরাসরি HTML এ যুক্ত করার উপযোগী ভেক্টর ইমেজের জন্য XML-ভিত্তিক ফাইল ফরম্যাট।
+
 
+
+
+ +
+

কার্যকারিতা এবং ইন্ট্রিগ্রেশন

+ +
+
Web Workers (ওয়েব ওয়ার্কার)
+
জাভাস্ক্রিপ্টকে ব্যাকগ্রাউন্ড থ্রেডের প্রতিনিধিত্ব ও মূল্যায়ন করার সুবিধা প্রদান করে। এরফলে ইন্টার‍্যাক্টিভ ইভেন্টগুলো ধীর গতির হয়না।
+
XMLHttpRequest লেভেল 2
+
সময় এবং ব্যবহারকারীর কার্যক্রমের উপর নির্ভর করে বিক্ষিপ্তভাবে একটি পাতার কিছু অংশ নিয়ে আসে। আর এই প্রক্রিয়ায় আনার ফলে কন্টেন্ট গুলো ডায়নামিক হওয়ার সুযোগ পায়। এটাই Ajax এর পেছনের প্রযুক্তি।
+
JIT-কম্পাইল করা জাভাস্ক্রিপ্ট ইঞ্জিন
+
নতুন প্রজন্মের জাভাস্ক্রিপ্ট ইঞ্জিন পূর্বের চেয়ে অনেক শক্তিশালী যার ফলে অধিক পারফরম্যান্স নিশ্চিত করে।
+
হিস্টোরি API
+
এটি ব্রাউজারের হিস্টোরি ম্যানিপুলেট করার সুযোগ দেয়, যেসকল ওয়েবপেজ ইন্টারএ্যাক্টিভভাবে তথ্য লোড করে, তাদের জন্য এটি বিশেষভাবে উপযোগী।
+
contentEditable attribute: আপনার ওয়েবসাইটকে উইকিতে রুপান্তর করুন!
+
HTML5 contentEditable এ্যাট্রিবিউটটি স্ট্যান্ডার্ডের অন্তর্ভুক করেছে। এই নতুন ফিচারটি সম্পর্কে জানুন।
+
ড্র্যাগ-এন্ড-ড্রপ
+
The HTML5 drag and drop API allows support for dragging and dropping items within and between web sites. This also provides a simpler API for use by extensions and Mozilla-based applications.
+
HTML এ ফোকাস ব্যবস্থাপনা
+
নতুন HTML5 activeElement এবং hasFocus এট্রিবিউটগুলো এখন সমর্থিত!
+
ওয়েব-ভিত্তিক প্রোটোকল হ্যান্ডেলার
+
আপনে এখন প্রটোকল হ্যান্ডেলার হিসেবে ওয়েব এ্যাপ্লিকেশন রেজিস্টার করতে পারবেন navigator.registerProtocolHandler() মেথডের সাহায্যে।
+
requestAnimationFrame
+
সর্বোত্তম পারফরম্যান্সের জন্য এ্যানিমেশন নিয়ন্ত্রণের সুবিধা প্রদান করে।
+
ফুলস্ক্রিন API
+
ব্রাউজারের ইন্টারফেস প্রদর্শন ব্যতিত আপনার ওয়েব পেজ বা এ্যাপ্লিকেশনকেই সম্পূর্ণ স্ক্রিনে প্রদর্শন নিয়ন্ত্রণ করে।
+
পয়েন্টার লক API
+
সবসময় কোন কন্টেন্ট এর পয়েন্টার লক করে রাখে, তাই গেমস অথবা একই ধরনের কোন এপ্লিকেশনের ক্ষেত্রে পয়েন্টার উইন্ডো সীমায় পৌছে গেলেও তা ফোকাস হারায় না।
+
অনলাইন এবং অফলাইন ইভেন্ট
+
অফলাইনে চলবে এমন একটি ভালো মানের এপ্লিকেশন তৈরী করতে হলে, আপনাকে জানতে হবে আপনার এপ্লিকেশন কখন অফলাইনে আছে। আপনার এপ্লিকেশন কখন অনলাইনে আসতে পারে তাও আপনাকে জাতে হবে।
+
+ +

যন্ত্রের ব্যবহার

+ +
+
ক্যামেরা API এর ব্যবহার
+
কম্পিউটারের ক্যামেরা থেকে ছবি ব্যবহার এবং সংরক্ষণ করে।
+
টাচ ইভেন্ট
+
টাচ স্ক্রিন চাপলে ব্যবহারকারী কর্তৃক তৈরী করা ইভেন্ট অনুযায়ি কাজ করবে।
+
জিওলোকেশনের ব্যবহার
+
জিওলোকেশন ব্যবহার করে ব্রাউজার কে ব্যবহারকারীর বর্তমান অবস্থান নির্দিষ্ট করতে দেয়।
+
ডিভাইসের স্থিতি সনাক্ত করা
+
এটা ডিভাইসের স্থিতি অর্থাৎ ডিভাইসটি উল্লম্ব ভাবে আছে, নাকি আনুভূমিক ভাবে আছে (আরও সহজ করে বলতে গেলে ডিভাইসটি সোজা করে ধরা হয়েছে না কাত করে ধরা হয়েছে) তা সনাক্ত করে ব্রাউজারকে মাপ পরিবর্তনে সহায়তা করে। এটা ইনপুট ডিভাইস হিসেবেও ব্যবহার করা যায়। যেমনঃ অবস্থান বা নড়াচড়াকে গেমের নিয়ন্ত্রণ হিসেবে ব্যবহার করা বা পেজের লেআউটে পরিবর্তন ইত্যাদি।
+
পয়েন্টার লক API
+
কন্টেন্টের সাথে পয়েন্টারকে লক করে রাখতে দেয়, যাতে করে পয়েন্টার পর্দার শেষ প্রান্তে পৌছালেও গেম এবং সদৃশ অ্যাপ গুলো আকর্ষণ না হারায়।
+
+ +

সাজসজ্জা

+ +

সিএসএসকে আরও জটিল নিয়মে এলিমেন্ট গুলোকে স্টাইল করার জন্য বর্ধিত করা হয়েছে। যদিও এটা এখন মনোলিথিক বৈশিষ্ট্যের মধ্যে নেই এবং আলাদা মডিউল গুলোও ৩য় স্তরে নেই, তারপরও এটাকে প্রায়ই সিএসএস৩ বলা হয়। এর মডিউল গুলোর মধ্যে কিছু ১ম স্তরে আছে, আবার কিছু ৪র্থ স্তরে আছে।

+ +
+
নতুন ব্যাকগ্রাউন্ড স্টাইলিং বৈশিষ্ট্য সমূহ
+
এখন {{cssxref("box-shadow")}} ব্যবহার করে একটি বক্সের নিচে ছায়া এবং একাধিক ব্যাকগ্রাউন্ড প্রয়োগ করা যাবে।
+
আরও রুচিসম্মত বর্ডার সমূহ
+
এখন {{cssxref("border-image")}} ব্যবহার করে শুধু বর্ডার স্টাইলই করা যাবে না, এর সাথে সংশ্লিষ্ট অন্যান্য লং-হ্যান্ড প্রপার্টিও ব্যবহার করা যাবে। কিন্তু গোলাকার বর্ডার শুধু {{cssxref("border-radius")}} ব্যবহার করেই প্রয়োগ করা যাবে।
+
স্টাইল অ্যানিমেট করা
+
সিএসএস ট্রানজিশন ব্যবহার করে দুইটি ভিন্ন অবস্থার মধ্যে অ্যানিমেট করা যাবে অথবা সিএসএস অ্যানিমেশন ব্যবহার করে কোন ইভেন্ট ট্রিগার না করেই বিভিন্ন অংশ অ্যানিমেট করা যাবে। আর এসব অ্যানিমেশনের সময়, ধরন, গতি-প্রকৃতি সবই আপনি নিয়ন্ত্রণ করতে পারবেন।
+
টাইপোগ্রাফি উন্নয়ন
+
ভালো টাইপোগ্রাফি ব্যবহার করার জন্য ডিজাইনারদের এখন আরও বেশি নিয়ন্ত্রণ দেয়া হয়েছে। তারা এখন {{cssxref("text-overflow")}} এবং হাইফেনেশন নিয়ন্ত্রণ করতে পারেন। ছায়া যুক্ত করতে পারেন অথবা অনেক সূক্ষ্মভাবে অলঙ্করণ করতে পারেন। নিজের ইচ্ছামত ফন্ট ডাউনলোড করে প্রয়োগ করা যাবে। এজন্য ধন্যবাদ দিতে হয় {{cssxref("@font-face")}} নিয়মটিকে।
+
নতুন প্রেজেন্টেশন লেআউট সমূহ
+
ডিজাইনের নমনীয়তা বৃদ্ধি করার জন্য নতুন দুইটি লেআউট যুক্ত করা হয়েছেঃ একটি হচ্ছে CSS multi-column layout, এবং অপরটি CSS flexible box layout।
+
+
+
+ +

 

diff --git a/files/bn/web/guide/html/html5/introduction_to_html5/index.html b/files/bn/web/guide/html/html5/introduction_to_html5/index.html new file mode 100644 index 0000000000..bb65db9a7f --- /dev/null +++ b/files/bn/web/guide/html/html5/introduction_to_html5/index.html @@ -0,0 +1,29 @@ +--- +title: HTML5 এ হাতেখড়ি +slug: HTML/HTML5/Introduction_to_HTML5 +tags: + - Guide + - HTML + - HTML5 + - NeedsContent + - Web + - গাইড +translation_of: Web/Guide/HTML/HTML5/Introduction_to_HTML5 +--- +

HTML এর পঞ্চম ও সর্বশেষ সংস্করণ HTML5। এর নতুন কিছু ফিচার রয়েছে যেমন শুধু রিচ মিডিয়াই সমর্থন করা, ওয়েব এপ্লিকেশন তৈরি করা এখন আরও সহজ। এসব ওয়েব এপ্লিকেশন ব্যবহারকীর সাথে ইন্টার-এক্ট করতে পারে, ব্যবহারকারীর কম্পিউটারের ডেটা নিয়ে কাজ করতে পারে, সার্ভারের সাথে যোগাযোগ করতে পারে আগের থেকে অনেক কার্যকরভাবে।

+

HTML5 এখনও ডেভেলপ হচ্ছে, সে কারণে এখনো এর নির্দেশিকায় টুকটাক পরিবর্তন চলছে। এখনো সব ব্রাউজারে সব ফিচার চলে না। যাইহোক, গেকো এবং তার এক্সটেনশন, ফায়ারফক্স খুব ভালভাবেই HTML5 সমর্থন করে, এবং এর আরও ফিচার সমর্থনের কাজ চলছে। গেকো ১.৮.১ সংস্করণ থেকে HTML5 এর ফিচার সমর্থন করা শুরু করেছে। গেকো বর্তমানে HTML5 এর কি কি ফিচার সমর্থন করে তা HTML5 এর মুল পেজে জানতে পারেন। অন্যান্য ব্রাউজারে HTML5 সাপোর্ট করে কি না, তা বিস্তারিত জানতে CanIUse ওয়েবসাইটে যেতে পারেন।

+

যেভাবে বলবেন আপনার ডকুমেন্টে HTML5 মার্ক-আপ আছে

+

HTML5 এর জন্য ডকটাইপ খুবই সাধারন। আপনার HTML কন্টেন্ট যে HTML5 ব্যাবহার করছে তা বলার জন্য ডকুমেন্টের শুরুতে নিচের কোড লিখুনঃ

+
<!DOCTYPE html>
+
+

যেসব ব্রাউজার এখনো HTML5 সমর্থন করে না, তারাও এই কোড দেখলে স্ট্যান্ডার্ড মোডে চলে যাবে, যার অর্থ হল তারা HTML এর আগের সমর্থিত কোডগুলো ঠিকমতই দেখাবে এবং শুধুমাত্র যেসব HTML5 এলিমেন্ট তারা সমর্থন করে না সেগুলোই দেখাবে না।

+

নতুন এই ডকটাইপ আগের ডক্টাইপগুলো থেকে অনেক ছোট, যে কারণে এটা সহজেই মনে রাখা যায়। তাছাড়া ছোট হওয়ার জন্য কম বাইট ডাউনলোড হয় ব্যবহারকারীর মেশিনে।

+

<meta charset> লিখে ক্যারেক্টার-সেট ডিক্লেয়ার করুন

+

সাধারণতঃ পেইজের শুরুতেই এটি কোন ক্যারেক্টার-সেট ব্যবহার করছে তা বলে দিতে হয়। HTML এর আগের সংস্করণে জটিল {{HTMLElement("meta")}} ট্যাগ দিয়ে এটি করা লাগত, কিন্তু এখন যা খুবই সহজঃ

+
<meta charset="UTF-8">
+

{{HTMLElement("head") }} এর পরেই উপরের কোড লিখুন, যেহেতু কিছু ব্রাউজার HTML ডকুমেন্ট পার্স করা নতুন করে শুরু করে, যদি আপনার ডিক্লেয়ার করা ক্যারেক্টার-সেট ব্রাউজার যেটা ধরে নিয়েছিল সেটার থেকে আলাদা হয়। এছাড়া, আপনি যদি UTF-8 ব্যবহার না করেন তাহলে আপনাকে UTF-8 ব্যবহার করতে নির্দেশনা দেওয়া হচ্ছে, কারণ এটি অনেক স্ক্রিপ্টেই ক্যারেক্টার ব্যবহার করা অনেক সহজ করে দেয়।

+

খেয়াল করুনঃ HTML5 নির্দেশনা দিয়েছে যে বৈধ ক্যারেক্টার-সেট অবশ্যই ASCII সমর্থিত হতে হবে আর কমপক্ষে ৮ বিট ব্যবহার করে এমন হতে হবে। নিরাপত্তা বাড়াতে আর কিছু এটাক (আক্রমণ!) ঠেকানোর জন্যই এই ব্যবস্থা।

+

নতুন HTML5 পার্সার

+

HTML5 পার্সিং নিয়মকানুন, (যা কিনা HTML কোডের অর্থ বের করে) HTML5 এ নিখুঁতভাবে বলা হয়েছে। HTML5 আসার আগে শুধুমাত্র বৈধ মার্ক-আপ কী সেটাই বলা থাকত, যেকারণে যখনই মার্ক-আপে কোন ভুল পাওয়া যেত (প্রায় সব ওয়েবসাইটেই কিছু না কিছু ভুল থাকে) একেক ব্রাউজার একেকভাবে আচরণ করত। কিন্তু এখন HTML5 এ যেহেতু মার্ক-আপে ভুল থাকলে কি করতে হবে সেটাও বলা হয়েছে, সব HTML5-সমর্থিত ব্রাউজার ভুল কোড পেলেও একইরকম আচরণ করবে।

+

এর ফলে ওয়েব ডেভেলপারদের এখন সুখের সময়। যদিও সব আধুনিক ব্রাউজার-ই HTML5-সমর্থিত, কিছু পুরনো ব্রাউজার পাওয়া যায় যারা কিনা HTML5 পার্সিং নিয়ম মেনে চলে না। এইসব HTML5-অসমর্থিত ব্রাউজার এখনো মানুষজন ব্যবহার করে। ডেভেলপারদের কে ভুল না করে, মার্ক-আপ লিখতে উৎসাহিত করা হয়, কারণ ভুলবিহীন কোড সহজেই বুঝা যায় আর পরেও কোড করতে সুবিধা হয়। আর বড় কথা হল, কোডে ভুল থাকলে পুরনো একেক ব্রাউজারে একেক আচরণ দেখা যাবে - কারণ পুরনো ব্রাউজারগুলো HTML5 পার্সিং নিয়ম মেনে চলে না।

+

টেনশন করার কোন দরকার-ই নেই, আপনার ওয়েবসাইটের কোন কিছু পরিবর্তন করা লাগবে না - ওয়েব ব্রাউজারের ডেভেলপার-রাই এসব নিয়ে মাথা ঘামাচ্ছে!

diff --git "a/files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" "b/files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" deleted file mode 100644 index fdf50fc2b7..0000000000 --- "a/files/bn/web/guide/\340\246\227\340\247\215\340\246\260\340\246\276\340\246\253\340\246\277\340\246\225\340\247\215\340\246\270/index.html" +++ /dev/null @@ -1,53 +0,0 @@ ---- -title: গ্রাফিক্স অন দি ওয়েব -slug: Web/Guide/গ্রাফিক্স -tags: - - NeedsReview -translation_of: Web/Guide/Graphics ---- -

আধুনিক ওয়েব সাইট এবং অ্যাপ্লিকেশনে প্রায়ই গ্রাফিক্স উপস্থাপন প্রয়োজন পরে। {{HTMLElement("img")}} উপাদান ব্যবহার করে সহজেই স্ট্যাটিক ইমেজ প্রদর্শিত করা যায়, অথবা {{cssxref("background-image")}} প্রোপার্টি ব্যবহার করে এইচটিএমএল উপাদানের পটভূমি নির্ধারণ করা যায়।

-

আপনি প্রায়ই অন-দা-ফ্লাই  গ্রাফিক্স নির্মাণ করতে চান, অথবা ঘটনার পরে ছবি প্রদর্শন করতে চান। এই নিবন্ধনটি আপনাকে সাহায্য করবে কিভাবে আপনি তা সম্পন্ন করতে পারেন।

-
-
-

2D গ্রাফিক্স

-
-
- Canvas(ক্যানভাস)
-
- এই {{HTMLElement("canvas")}}উপাদানটি APIs প্রদান করে যেন জাভাস্ক্রিপ্ট ব্যাবহার করে 2D গ্রাফিক্স তৈরি করা যায়।
-
- SVG(এস ভি জি)
- স্কেলেবল ভেক্টর গ্রাফিক্স (SVG) লাইনস, কারভস, এবং অন্যান্য জ্যামিতিক আকার প্রদান করে। bitmaps ব্যাবহার করা এড়িয়ে চলার মাধ্যমে, আপনি যেকোনো আকারের ছবি পরিছন্নভাবে তৈরি করতে পারেন।
-
-

সম্পূর্ণ দেখুন্‌...

-
-
-

3D গ্রাফিক্স

-
-
- WebGL(ওয়েব জি এল)
-
-
-
- WebGL শুরু করার একটি নির্দেশিকা, ওয়েবের জন্য 3D গ্রাফিক্স API. এই প্রযুক্তি আপনাকে ওয়েবের মধ্যে স্ট্যান্ডার্ড OpenGL ES ব্যাবহার করতে দেয়।
-
-
-
-

ভিডিও

-
-
- HTML5 (অডিও এবং ভিডিও ব্যাবহার)
-
-
-
- একটি HTML নথিতে ভিডিও এম্বেড এবং প্লেব্যাক নিয়ন্ত্রণ।
-
-
-
- WebRTC(ওয়েব আর টি সি)
-
-  WebRTC(ওয়েব আর টি সি) এর RTC (আর টি সি) বলতে Real-Time Communications (রিয়েল টাইম কমিউনিকেশন) কে বুঝায়, এই প্রযুক্তি অডিও / ভিডিও স্ট্রিমিং এবং ব্রাউজার ক্লায়েন্টস (মিত্রগণ) মধ্যে তথ্য ভাগ করতে সক্ষম।
-
-
-
-

 

diff --git a/files/bn/web/html/attributes/crossorigin/index.html b/files/bn/web/html/attributes/crossorigin/index.html new file mode 100644 index 0000000000..4888d9d63c --- /dev/null +++ b/files/bn/web/html/attributes/crossorigin/index.html @@ -0,0 +1,130 @@ +--- +title: সি ও আর এস বৈশিষ্ট্যাবলী সেটিংস +slug: Web/HTML/CORS_settings_attributes +tags: + - এইচ টি এম এল +translation_of: Web/HTML/Attributes/crossorigin +--- +

 

+ +
+
HTML5 এর মধ্যে, যেমন {{HTMLElement ("গান")}} অথবা হিসাবে সি ও আর এস জন্য সমর্থন প্রদান যা কিছু HTML উপাদান, {{HTMLElement ("ভিডিও")}}, আপনি কনফিগার করতে দেয়, যা একটি crossorigin অ্যাট্রিবিউট (crossOrigin সম্পত্তি), আছে সি ও আর এস উপাদান এর সংগৃহীত তথ্য জন্য অনুরোধ. এই বৈশিষ্ট্যাবলী গণিত, এবং নিম্নলিখিত সম্ভব মান আছে:
+
+ + + + + + + + + + + + + + + + +
KeywordDescription
anonymousCORS requests for this element will not have the credentials flag set.
use-credentialsCORS requests for this element will have the credentials flag set; this means the request will provide credentials.
+ +

 

+ +

ডিফল্ট (অ্যাট্রিবিউট উল্লেখ না করা হলে, যে হয়) দ্বারা, কর্ড সব সময়ে ব্যবহার করা হয় না। "বেনামী" শব্দ  সি ও আর এস স্পেসিফিকেশন পরিভাষা বিভাগে বর্ণিত হিসাবে কুকিজ, ক্লায়েন্ট প্রান্তের SSL সার্টিফিকেট বা HTTP প্রমাণীকরণের মাধ্যমে ব্যবহারকারী শংসাপত্র কোন বেচা কেনা নেই এবং হবে।
+ একটি অবৈধ শব্দ এবং একটি খালি স্ট্রিং বেনামী শব্দ হিসেবে পরিচালিত হবে।

+ +

 বিশেষ উল্লেখ

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
+ +

 ব্রাউজার উপযুক্ততা

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ CompatGeckoDesktop("8.0") }}11{{ CompatNo() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoDesktop("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoMobile("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
+
+ +

 আরো দেখুন

+ + diff --git a/files/bn/web/html/canvas/index.html b/files/bn/web/html/canvas/index.html deleted file mode 100644 index b64f663d74..0000000000 --- a/files/bn/web/html/canvas/index.html +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: ক্যানভাস -slug: Web/HTML/Canvas -translation_of: Web/API/Canvas_API ---- -

 HTML5 এ যুক্ত HTML {{HTMLElement("canvas")}} এলিমেন্টটি ব্যবহার করে স্ক্রিপ্টিংয়ের (সাধারণত জাভাস্ক্রিপ্ট) সাহায্যে গ্রাফিক্স আঁকা যায়। উদাহরণস্বরুপ, এটি গ্রাফিক্স আঁকা, ছবির কম্পোজিশন তৈরি করা, অ্যানিমেশন তৈরি করা অথবা এমনি রিয়েল-টাইম ভিডিও রেন্ডারিং অথবা প্রসেসিংয়ের কাজেও ব্যবহার করা যায়।

-

<canvas> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা ফায়ারফক্স ১.৫) থেকে। মূলত এ্যাপল তাদের ড্যাশবোর্ড এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। ইন্টারনেট এক্সপ্লোরার ৯ ভার্সন থেকে <canvas> সাপোর্ট করে; ইন্টারনেট এক্সপ্লোরারের পুরনো সংস্করণের জন্য গুগলের Explorer Canvas প্রজেক্টের একটি স্ক্রিপ্ট যুক্ত করে কার্যকরভাবে <canvas> এর সাপোর্ট যোগ করা যায়। গুগল ক্রোম এবং অপেরা ৯ <canvas> ক্যানভাস সাপোর্ট করে।

-

<canvas> টি দিয়ে WebGL এর সাহায্যে হার্ডওয়্যার-এক্সেলারেশনের মাধ্যমে ওয়েব পেজে ত্রিমাত্রিক (3D) গ্রাফিক্স দেখানো সম্ভব।

-
-
-

ডকুমেন্টেশন

-
-
- স্পেসিফিকেশন
-
- <canvas> এলিমেট হল WhatWG ওয়েব অ্যাপ্লিকেশনস ১.০ স্পেসিফিকেশন বা HTML5 এর অংশ।
-
- ক্যানভাস টিউটোরিয়াল
-
-  <canvas> এর সাধারণ ব্যবহার এবং এর অ্যাডভান্সড ফিচারের ওপর একটি বিস্তারিত টিউটোরিয়াল।
-
- কোড স্নিপেট: ক্যানভাস
-
- <canvas> সংক্রান্ত এক্সটেনশন ডেভেলপার সংশ্লিষ্ট কোড স্নিপেট।
-
- ক্যানভাস উদাহরণ
-
- কিছু <canvas> ডেমো।
-
- ক্যানভাসে DOM অবজেক্ট আঁকা
-
- যেভাবে HTML এলিমেন্টের ন্যায় DOM কন্টেন্ট একটি ক্যানভাসে আঁকবেন।
-
- একটি সাধারণ raycaster
-
- ক্যানভাসের সাহায্যে ray-tracing এনিমেশনের ডেমো।
-
- ক্যানভাস DOM ইন্টারফেস
-
- গিকোতে ক্যানভাস DOM ইন্টারফেস সমূহ।
-
-

সব দেখুন...

-
-
-

কমিউনিটি

- -

তথ্যভান্ডার

- -

লাইব্রেরি

-
    -
  • libCanvas একটি হালকা ও শক্তিশালী ক্যানভাস ফ্রেমওয়ার্ক
    • -
  • Processing.js হল প্রসেসিং ভিজ্যুয়ালাইজেশন ল্যাঙ্গুয়েজের পোর্ট
    • -
  • EaselJS হল একটি ফ্ল্যাশের মত API সমৃদ্ধ লাইব্রেরি
    • -
  • PlotKit হল একটি চার্ট ও গ্রাফ তৈরির লাইব্রেরি
    • -
  • Rekapi হল ক্যানভাসের জন্য অ্যানিমেশনের কি-ফ্রেম করার API।
    • -
  • PhiloGL হল ডাটা ভিজ্যুয়ালাইজেশন, সৃজনশীল কোডিং ও গেম ডেভেলপমেন্টের জন্য একটি WebGL ফ্রেমওয়ার্ক।
    • -
  • JavaScript InfoVis Toolkit ওয়েবের জন্য ইন্টারএ্যাক্টিভ 2D ক্যানভাস ডাটা ভিজ্যুয়ালাইজেশন তৈরি করে।
    • -
  • Frame-Engine হল অ্যাপ্লিকেশন ও গেম ডেভেলপ করার একটি ফ্রেমওয়ার্ক।
    • -
- - -
-
-
- {{HTML5ArticleTOC()}}
diff --git a/files/bn/web/html/canvas/tutorial/index.html b/files/bn/web/html/canvas/tutorial/index.html deleted file mode 100644 index 85ee94310d..0000000000 --- a/files/bn/web/html/canvas/tutorial/index.html +++ /dev/null @@ -1,43 +0,0 @@ ---- -title: ক্যানভাস টিউটোরিয়াল -slug: Web/HTML/Canvas/Tutorial -translation_of: Web/API/Canvas_API/Tutorial -translation_of_original: Canvas-tutorial-broken ---- -

<canvas> হল একটি HTML এলিমেন্ট, যা দ্বারা স্ক্রিপ্টিংয়ের (সাধারণত জাভাস্ক্রিপ্ট) সাহায্যে গ্রাফিক্স আঁকা যায়। এটি অবশ্য গ্রাফিক্স আঁকা, ছবি কম্পোজিশন তৈরি করা এবং সাধারণ (এবং অসাধারণ) এনিমেশন তৈরির কাজ করতে পারে।

-

<canvas> এর জন্য মোজিলা অ্যাপ্লিকেশনসমূহ সাপোর্ট পাওয়া শুরু করেছে গিকো ১.৮ (বা ফায়ারফক্স ১.৫) থেকে। মূলত এ্যাপল তাদের ড্যাশবোর্ড এবং সাফারির জন্য এলিমেন্টটি প্রকাশ করে। <canvas> এলিমেন্টটি WhatWG Web applications 1.0 স্পেসিফিকেশনের একটি অংশ, যা HTML5 নামেও পরিচিত।

-

এই টিউটোরিয়ালে আপনার HTML পেজে <canvas> এলিমেন্ট ব্যবহারের প্রক্রিয়া আলোচনা করা হয়েছে। উদাহরণগুলো থেকে আপনি <canvas> দিয়ে কি করতে পারেন, তা আন্দাজ করতে পারেন এবং আপনার নিজের ইমপ্লিমেন্টেশন তৈরিতে সাহায্য করতে পারে।

-

শুরু করার পূর্বে

-

<canvas> ব্যবহার করা খুব কঠিন - তা নয়। কিন্তু, আপনার অবশ্যই HTML এবং জাভাস্ক্রিপ্ট এর সাধারণ ধারণা থাকতে হবে।

-

<canvas> টি অনেক পুরনো ব্রাউজার সাপোর্ট করে না কিন্তু, ফায়ারফক্স ১.৫ ও পরবর্তী ভার্সন, অপেরা ৯ ও পরবর্তী, এবং সাফারি, গুগল ক্রোমের নতুন ভার্সন ও ইন্টারনেট এক্সপ্লোরার ৯ হতে কাজ করে।

-

এই টিউটোরিয়ালে আছে

- -

আরও দেখুন

- -
- {{ Next("Canvas_tutorial/Basic_usage") }}
diff --git a/files/bn/web/html/cors_settings_attributes/index.html b/files/bn/web/html/cors_settings_attributes/index.html deleted file mode 100644 index 4888d9d63c..0000000000 --- a/files/bn/web/html/cors_settings_attributes/index.html +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: সি ও আর এস বৈশিষ্ট্যাবলী সেটিংস -slug: Web/HTML/CORS_settings_attributes -tags: - - এইচ টি এম এল -translation_of: Web/HTML/Attributes/crossorigin ---- -

 

- -
-
HTML5 এর মধ্যে, যেমন {{HTMLElement ("গান")}} অথবা হিসাবে সি ও আর এস জন্য সমর্থন প্রদান যা কিছু HTML উপাদান, {{HTMLElement ("ভিডিও")}}, আপনি কনফিগার করতে দেয়, যা একটি crossorigin অ্যাট্রিবিউট (crossOrigin সম্পত্তি), আছে সি ও আর এস উপাদান এর সংগৃহীত তথ্য জন্য অনুরোধ. এই বৈশিষ্ট্যাবলী গণিত, এবং নিম্নলিখিত সম্ভব মান আছে:
-
- - - - - - - - - - - - - - - - -
KeywordDescription
anonymousCORS requests for this element will not have the credentials flag set.
use-credentialsCORS requests for this element will have the credentials flag set; this means the request will provide credentials.
- -

 

- -

ডিফল্ট (অ্যাট্রিবিউট উল্লেখ না করা হলে, যে হয়) দ্বারা, কর্ড সব সময়ে ব্যবহার করা হয় না। "বেনামী" শব্দ  সি ও আর এস স্পেসিফিকেশন পরিভাষা বিভাগে বর্ণিত হিসাবে কুকিজ, ক্লায়েন্ট প্রান্তের SSL সার্টিফিকেট বা HTTP প্রমাণীকরণের মাধ্যমে ব্যবহারকারী শংসাপত্র কোন বেচা কেনা নেই এবং হবে।
- একটি অবৈধ শব্দ এবং একটি খালি স্ট্রিং বেনামী শব্দ হিসেবে পরিচালিত হবে।

- -

 বিশেষ উল্লেখ

- - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('HTML WHATWG', 'infrastructure.html#cors-settings-attributes', 'CORS settings attributes')}}{{Spec2('HTML WHATWG')}} 
{{SpecName('HTML WHATWG', 'embedded-content.html#attr-img-crossorigin', 'crossorigin')}}{{Spec2('HTML WHATWG')}} 
- -

 ব্রাউজার উপযুক্ততা

- -

{{ CompatibilityTable() }}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support13{{ CompatGeckoDesktop("8.0") }}11{{ CompatNo() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoDesktop("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{ CompatUnknown() }}{{ CompatGeckoMobile("8.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatVersionUnknown() }}
{{ HTMLElement("video")}}{{ CompatUnknown() }}{{ CompatGeckoMobile("12.0") }}{{ CompatUnknown() }}{{ CompatUnknown() }}{{ CompatUnknown() }}
-
- -

 আরো দেখুন

- - diff --git a/files/bn/web/html/focus_management_in_html/index.html b/files/bn/web/html/focus_management_in_html/index.html deleted file mode 100644 index adbe5e1e9b..0000000000 --- a/files/bn/web/html/focus_management_in_html/index.html +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Focus management in HTML -slug: Web/HTML/Focus_management_in_HTML -translation_of: Web/API/Document/hasFocus -translation_of_original: Web/HTML/Focus_management_in_HTML ---- -

এইচটিএমএল৫ এর ওয়ার্কিং ড্রাফট, একটিভআলিমেন্ত ডোম অ্যাট্রিবিউট এবং হেজফোকাস() ডোম মেথড প্রোগ্রামারকে ইউজার এর কারনে পেজ এর ইন্টারআক্তিভিটিতে আরও ভালো নিয়ন্ত্রণ করার ক্ষমতা দেয়। উদাহরণস্বরূপ, দুইটিকে পরিসংখ্যান এর সাধারণ উদ্দেশে ব্যাবহার করা যায়, একটি পেজ এর কিছু লিংকের ক্লিক সংখ্যা বের করা,একটি এলিমেন্তের উপর ফোকাসের সময় বের করা, এবং আরও অনেক।অতিরিক্ত, আজাক্স টেকনোলজির সাহায্যে, সার্ভারের রিকুস্তের সংখ্যা কমানো যায় যা ইউজার এবং পেজ এর লেআউট এর উপর নির্ভর করে।

- -

ব্রাউজার কম্পাতিবিলিটি

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatUnknown}}{{CompatGeckoDesktop("1.9.2")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatGeckoMobile("2.0")}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[১] গিককো ৮.০ তে শুরু {{geckoRelease("8.0")}},ফায়ারফক্স এখন একটি ফোকাস রিং আঁকে যেকোনো এলিমেন্ত এর উপর যখন তার তাবিনেক্স ভেলু ০ থেকে বড়, শুধু একটি সীমিত সাবসেট আইটেমস এর পরিবর্তে। এই নিয়মের কিছু বাতিক্রম আছেঃ  {{HTMLElement("input")}}, {{HTMLElement("button")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}, {{HTMLElement("iframe")}}, {{HTMLElement("frame")}}, {{HTMLElement("body")}}, and {{HTMLElement("html")}}.

- -

আরও দেখুন

- - diff --git a/files/bn/web/javascript/language_resources/index.html b/files/bn/web/javascript/language_resources/index.html new file mode 100644 index 0000000000..c539ad7321 --- /dev/null +++ b/files/bn/web/javascript/language_resources/index.html @@ -0,0 +1,102 @@ +--- +title: জাভাস্কিপ্ট ভাষার রিসোর্স +slug: Web/JavaScript/ভাষার_রিসোর্স +tags: + - JavaScript + - JavaScript Language Resource + - জাভাস্ক্রিপ্ট +translation_of: Web/JavaScript/Language_Resources +--- +
{{JsSidebar}}
+ +

ECMAScript হচ্ছে এক প্রকার স্ক্রিপ্টিং ভাষা যার ওপর ভিত্তি করে জাভাস্ক্রিপ্ট তৈরি। আন্তর্জাতিক ECMA সংস্থা ECMA স্ক্রিপ্ট এর জন্য ECMA-262 এবং ECMA-402 এই দুইটি মান নির্ধারণ করে দিয়েছে। নিচের ECMAScript স্টান্ডার্ডগুলো অনুমোদিত হয়েছে:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
নামলিঙ্কতারিখবর্ননা
ECMA-262 সংস্করণ ৫.১PDF, HTMLজুন ২০১১ +

ECMAScript ৫.১, জাভাস্ক্রিপ্ট নির্দেশনার সর্বশেষ প্রকাশিত সংস্করণ
+ এই সংস্করণ সম্পূর্ণরূপে আন্তর্জাতিক আইএসও/আইইসি ১৬২৬২:২০১১ এর তৃতীয় সংস্করণ সমর্থিত। এতে ES5 Errata সংশোধন অন্তর্ভূক্ত করা হয়েছে, নতুন কোন বৈশিষ্ট্য অন্তর্ভুক্ত করা হয়নি।

+
CMA-402PDF, HTMLডিসেম্বর ২০১২ECMAScript আন্তর্জাতিকায়ন API
ECMA-357 সংস্করণ ২PDFডিসেম্বর ২০০৫এক্সএমএল (E4X) এর জন্য ECMAScript.
অপ্রচলিত সংস্করণ
ECMA-262PDFজুন ১৯৯৭ECMAScript এর আদি সংস্করণ।
ECMA-262 সংস্করণ ২PDFআগস্ট ১৯৯৮ +

ECMAScript স্ট্যান্ডার্ড এর দ্বিতীয় সংস্করণ; এছাড়াও আইএসও স্ট্যান্ডার্ড ১৬২৬২।

+
ECMA-262 সংস্করণ ৩PDFডিসেম্বর ১৯৯৯ECMAScript প্রমিত তৃতীয় সংস্করণ; জাভাস্ক্রিপ্ট এর ১.৫ এর অনুরূপ।
+ আরো দেখুন errata
ECMA-262 সংস্করণ ৫PDFডিসেম্বর ২০০৯ECMAScript ৫
+ আরো দেখুন ES5 errata এবং ECMAScript ৫ মোজিলা সমর্থন
ECMA-357PDFজুন ২০০৪এক্সএমএল (E4X) এর জন্য ECMAScript
+ আরো দেখুন E4X errata
+ +

ECMAScript এর ইতিহাস সম্পর্কে আরও তথ্যের জন্য উইকিপিডিয়া ECMAScript এন্ট্রি দেখুন।

+ +

ECMAScript ভাষার স্পেসিফিকেশন এর পরবর্তী সংস্করণ, কোড-নাম "হারমনি" এর কাজ এ আপনি অংশগ্রহণ বা শুধু ট্র্যাক করতে পারেন, এবং পাবলিক উইকির মাধ্যমে ECMAScript আন্তর্জাতিকায়ন এপিআই স্পেসিফিকেশন এবং ecmascript.org হতে es-discuss মেইলিং তালিকায় অংশগ্রহণ করতে পারেন।

+ +

বাস্তবায়ন

+ + + +

আরো দেখুন

+ + diff --git "a/files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" "b/files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" deleted file mode 100644 index c539ad7321..0000000000 --- "a/files/bn/web/javascript/\340\246\255\340\246\276\340\246\267\340\246\276\340\246\260_\340\246\260\340\246\277\340\246\270\340\247\213\340\246\260\340\247\215\340\246\270/index.html" +++ /dev/null @@ -1,102 +0,0 @@ ---- -title: জাভাস্কিপ্ট ভাষার রিসোর্স -slug: Web/JavaScript/ভাষার_রিসোর্স -tags: - - JavaScript - - JavaScript Language Resource - - জাভাস্ক্রিপ্ট -translation_of: Web/JavaScript/Language_Resources ---- -
{{JsSidebar}}
- -

ECMAScript হচ্ছে এক প্রকার স্ক্রিপ্টিং ভাষা যার ওপর ভিত্তি করে জাভাস্ক্রিপ্ট তৈরি। আন্তর্জাতিক ECMA সংস্থা ECMA স্ক্রিপ্ট এর জন্য ECMA-262 এবং ECMA-402 এই দুইটি মান নির্ধারণ করে দিয়েছে। নিচের ECMAScript স্টান্ডার্ডগুলো অনুমোদিত হয়েছে:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
নামলিঙ্কতারিখবর্ননা
ECMA-262 সংস্করণ ৫.১PDF, HTMLজুন ২০১১ -

ECMAScript ৫.১, জাভাস্ক্রিপ্ট নির্দেশনার সর্বশেষ প্রকাশিত সংস্করণ
- এই সংস্করণ সম্পূর্ণরূপে আন্তর্জাতিক আইএসও/আইইসি ১৬২৬২:২০১১ এর তৃতীয় সংস্করণ সমর্থিত। এতে ES5 Errata সংশোধন অন্তর্ভূক্ত করা হয়েছে, নতুন কোন বৈশিষ্ট্য অন্তর্ভুক্ত করা হয়নি।

-
CMA-402PDF, HTMLডিসেম্বর ২০১২ECMAScript আন্তর্জাতিকায়ন API
ECMA-357 সংস্করণ ২PDFডিসেম্বর ২০০৫এক্সএমএল (E4X) এর জন্য ECMAScript.
অপ্রচলিত সংস্করণ
ECMA-262PDFজুন ১৯৯৭ECMAScript এর আদি সংস্করণ।
ECMA-262 সংস্করণ ২PDFআগস্ট ১৯৯৮ -

ECMAScript স্ট্যান্ডার্ড এর দ্বিতীয় সংস্করণ; এছাড়াও আইএসও স্ট্যান্ডার্ড ১৬২৬২।

-
ECMA-262 সংস্করণ ৩PDFডিসেম্বর ১৯৯৯ECMAScript প্রমিত তৃতীয় সংস্করণ; জাভাস্ক্রিপ্ট এর ১.৫ এর অনুরূপ।
- আরো দেখুন errata
ECMA-262 সংস্করণ ৫PDFডিসেম্বর ২০০৯ECMAScript ৫
- আরো দেখুন ES5 errata এবং ECMAScript ৫ মোজিলা সমর্থন
ECMA-357PDFজুন ২০০৪এক্সএমএল (E4X) এর জন্য ECMAScript
- আরো দেখুন E4X errata
- -

ECMAScript এর ইতিহাস সম্পর্কে আরও তথ্যের জন্য উইকিপিডিয়া ECMAScript এন্ট্রি দেখুন।

- -

ECMAScript ভাষার স্পেসিফিকেশন এর পরবর্তী সংস্করণ, কোড-নাম "হারমনি" এর কাজ এ আপনি অংশগ্রহণ বা শুধু ট্র্যাক করতে পারেন, এবং পাবলিক উইকির মাধ্যমে ECMAScript আন্তর্জাতিকায়ন এপিআই স্পেসিফিকেশন এবং ecmascript.org হতে es-discuss মেইলিং তালিকায় অংশগ্রহণ করতে পারেন।

- -

বাস্তবায়ন

- - - -

আরো দেখুন

- - -- cgit v1.2.3-54-g00ecf