From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- .../learn/css/howto/generated_content/index.html | 133 +++++++ files/bn/learn/css/howto/index.html | 88 +++++ files/bn/learn/css/index.html | 67 ++++ files/bn/learn/html/index.html | 50 +++ .../bn/learn/html/introduction_to_html/index.html | 73 ++++ .../the_head_metadata_in_html/index.html | 286 ++++++++++++++ files/bn/learn/index.html | 99 +++++ files/bn/learn/javascript/first_steps/index.html | 70 ++++ .../index.html" | 421 +++++++++++++++++++++ files/bn/learn/javascript/index.html | 55 +++ files/bn/learn/server-side/django/index.html | 64 ++++ files/bn/learn/server-side/first_steps/index.html | 53 +++ .../first_steps/website_security/index.html | 180 +++++++++ files/bn/learn/server-side/index.html | 59 +++ 14 files changed, 1698 insertions(+) create mode 100644 files/bn/learn/css/howto/generated_content/index.html create mode 100644 files/bn/learn/css/howto/index.html create mode 100644 files/bn/learn/css/index.html create mode 100644 files/bn/learn/html/index.html create mode 100644 files/bn/learn/html/introduction_to_html/index.html create mode 100644 files/bn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html create mode 100644 files/bn/learn/index.html create mode 100644 files/bn/learn/javascript/first_steps/index.html create mode 100644 "files/bn/learn/javascript/first_steps/\340\246\234\340\246\276\340\246\255\340\246\276\340\246\270\340\247\215\340\246\225\340\247\215\340\246\260\340\246\277\340\246\252\340\247\215\340\246\237-\340\246\225\340\247\200/index.html" create mode 100644 files/bn/learn/javascript/index.html create mode 100644 files/bn/learn/server-side/django/index.html create mode 100644 files/bn/learn/server-side/first_steps/index.html create mode 100644 files/bn/learn/server-side/first_steps/website_security/index.html create mode 100644 files/bn/learn/server-side/index.html (limited to 'files/bn/learn') diff --git a/files/bn/learn/css/howto/generated_content/index.html b/files/bn/learn/css/howto/generated_content/index.html new file mode 100644 index 0000000000..90cef28d3b --- /dev/null +++ b/files/bn/learn/css/howto/generated_content/index.html @@ -0,0 +1,133 @@ +--- +title: বিষয়বস্তু +slug: Learn/CSS/Howto/Generated_content +tags: + - Basic + - Beginner + - CSS + - CSS Backgraound + - 'CSS:Getting_Started' + - Guide + - NeedsLiveSample + - NeedsUpdate + - Web +translation_of: Learn/CSS/Howto/Generated_content +--- +

{{ CSSTutorialTOC() }}

+

{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}এটি CSS Getting Started টিউটোরিয়ালের ৯ম বিভাগ; এখানে বর্ণনা করা হয়েছে কিভাবে আপনি CSS ব্যাবহার করে একটি ডকুমেন্টে বিষয়বস্তু যোগ করবেন। আপনি টেক্সট কন্টেন্ট এবং ইমেজ যোগ করার জন্য আপনার স্টাইলশীট পরিবর্তন করুন।

+

তথ্য: বিষয়বস্তু

+

CSS এর গুরুত্বপূর্ণ বৈশিষ্ট হল এটি একটি ডকুমেন্টের বিষয়বস্তু থেকে ডকুমেন্টের স্টাইলকে আলাদা করতে সাহায্য করে। এখনো সেখানে এমন কিছু অবস্থা আছে যেখানে এটা বুঝায় যে স্টাইলশিট এর অংশ হিসেবে কিছু নির্দিষ্ট বিষয়বস্তু ঠিক করতে হয়, ডকুমেন্ট এর অংশ হিসেবে নয়।

+

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

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

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

+

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

+

একটি স্টাইলশীট নির্দিষ্ট বিষয়বস্তু DOM এর অংশ নয়।

+
+

টেক্সট কন্টেন্ট

+
+
+ একটি উপাদান আগে বা পরে আপনি CSS টেক্সট কন্টেন্ট সন্নিবেশ করতে পারেন। কিভাবে আপনি কন্টেন্টি  {{ cssxref("::before") }} অথবা {{ cssxref("::after") }} যোগ করবেন তার একটি নির্দিষ্ট নিয়ম selector এ দেয়া আছে। টেক্সট কন্টেন্ট নির্দিষ্ট মান {{ cssxref("content") }} প্রোপার্টির সাথে উল্লেখ করুন।
+
+
+
+ উদাহরণ
+

এই নিয়মে টেক্সট এ যোগ করুণ Reference : before every element with the class ref:

+ 
.ref:before {
+  font-weight: bold;
+  color: navy;
+  content: "Reference: ";
+}
+
+
+
+
+ আরো বিস্তারিত
+

একটি স্টাইলশিট এর অক্ষরের সেট ডিফল্ট রুপে UTF-8 থাকে, কিন্তু এটা সংযুক্ত করে নির্দিষ্ট করা যায় অথবা স্টাইলশিট এটা নিজে অথবা আরও বিভিন্ন উপায়ে। আরও বিস্তারিত জানার জন্য দেখুন 4.4 CSS style sheet representation CSS নির্দিষ্টকরণ।

+

আলাদা অক্ষরগুলোও escape প্রক্রিয়ায় নির্দিষ্ট করা যায় যেটি backslash ব্যবহার করে escape অক্ষর বা চিহ্ন হিসেবে। উদাহরণস্বরূপ, \265B হচ্ছে দাবার black queen ♛ এর প্রতীক। আরও বিস্তারিত জানার জন্য দেখুন,  Referring to characters not represented in a character encoding এবং Characters and case CSS নির্দিষ্টকরণে ।

+
+

ইমেজ বা ছবি বিষয়বস্তু

+

একটি উপাদানের আগে বা পরে ছবি সংযুক্ত করার জন্য, আপনি ছবিটির URL  এই{{ cssxref("content") }} প্রপার্টি এর মানের মাঝে বসাবেন।

+
+

উদাহরণ
+ এই নিয়মটি প্রতিটি link এর পরে একটি space দেয় এবং একটি icon যোগ করে  যেটিতে class glossary আছে:

+ 
a.glossary:after {content: " " url("../images/glossary-icon.gif");}
+
+
+

কোন উপাদানের background এ ছবি বা ইমেজ সংযুক্ত করার জন্য, কোন একটি ছবি বা ইমেজ এর URL {{ cssxref("background") }} প্রপার্টি এর মানের মাঝে নির্দিষ্ট করুন।এটি একটি shorthand প্রপার্টি যেটি background color, ছবি, কিভাবে ছবি এবং অন্যান্য বিস্তারিত নির্দিষ্টকরণে সহায়তা করে।

+
+
+ উদাহরণ
+

এই নিয়মটি একটি নির্দিষ্ট উপাদানের background সেট করে, URL ব্যবহার করে image file উল্লেখ করে।

+

selector কোন উপাদানের id উল্লেখ করে। no-repeat মানটি image কে একবার দেখাতে সাহায্য করে :

+ 
#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
+
+
+
+
+ আরও বিস্তারিত
+

আলাদা আলাদা প্রপার্টিজ affecting backgrounds এবং অন্যান্য options যখন আপনি background ইমেজ গুলো ঠিক করেন সেইসব তথ্য এর জন্য, দেখুন{ cssxref("background") }} রেফেরেন্স পৃষ্ঠা।

+
+

Action: Adding a background ইমেজ

+

এ ইমেজ টি একটি সাদা বর্গ যেখানে এর নিচে একটি নীল লাইনে আছে :

+ + + + + + +
Image:Blue-rule.png
+
    +
  1. ইমেজ ফাইল টি Download করুন CSS file এর মত একই পদ্ধতিতে। (উদাহরণস্বরূপ, ডান পাশের বাটন এ ক্লিক করুন context মেনুটির জন্য, তারপর Save Image As টি তে ক্লিক করুন এবং এই টিউটোরিয়াল এর জন্য যে পদ্ধতি টি ব্যবাহার করছেন সেটি উল্লেখ করুন।)
    2. +
  2. আপনার CSS ফাইলটি সম্পাদন করুন এবং এই নিয়মটি body তে যোগ করুন , সম্পূর্ণ পৃষ্ঠার জন্য ব্যাকগ্রাউন্ড image যোগ করুন ।
    + 
    background: url("Blue-rule.png");
+
    +

    repeat মান টি ডিফল্ট, তাই একে কিছু করতে হবে না। ইমেজ বা ছবিটি বা অনূভুমিকপভাবে বা উলম্বভাবে পুনরাবৃত্তি হয় , যেটা রেখাযুক্ত লেখা কাগজের মত দেখায় :

    +
    +

    Image:Blue-rule-ground.png

    +
    +
    +

    Cascading Style Sheets

    +
    +
    +

    Cascading Style Sheets

    +
    +
    +
    +
    3. +
+
+
+ চ্যালেঞ্জ
+

এই ইমেজ টি ডাউনলোড করুন:

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

আপনার স্টাইলশিট এ একটি নিয়ম যোগ করুন যাতে করে এটি প্রতিটি লাইনের প্রথমে ইমেজ বা ছবি প্রদর্শন করে :

+
+

Image:Blue-rule-ground.png

+
+
+ image:Yellow-pin.png Cascading Style Sheets
+
+ image:Yellow-pin.png Cascading Style Sheets
+
+
+
+
+ Possible solution
+

Add this rule to your stylesheet:

+ 
p:before{
+  content: url("yellow-pin.png");
+}
+
+

 

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

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

+

{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}একটি সাধারণ প্রক্রিয়া  stylesheets কিভাবে লিস্টে বিভিন্ন আইটেম মার্ক করার জন্য বিষয়বস্তু যোগ করে। পরবর্তী বিভাগ বর্ণনা করবে কিভাবে specify style for list elements।

diff --git a/files/bn/learn/css/howto/index.html b/files/bn/learn/css/howto/index.html new file mode 100644 index 0000000000..d862a4cb53 --- /dev/null +++ b/files/bn/learn/css/howto/index.html @@ -0,0 +1,88 @@ +--- +title: Use CSS to solve common problems +slug: Learn/CSS/Howto +translation_of: Learn/CSS/Howto +--- +
Translation in progress
+ +
{{LearnSidebar}}
+ +

The following links provide solutions to common problems you can solve with CSS.

+ +

Common use cases

+ +
+
+

Basics

+ + + +

CSS and text

+ + +
+ +
+

Boxes and layouts

+ + +
+
+ +

Uncommon and advanced techniques

+ +

CSS allows very advanced design techniques. These articles help demistify the harder use cases you may face.

+ +

General

+ + + +

Advanced effects

+ + + +

Layout

+ + + +

See also

+ +

CSS FAQ — A variety of topics: from debugging to selector usage.

diff --git a/files/bn/learn/css/index.html b/files/bn/learn/css/index.html new file mode 100644 index 0000000000..7714bdbd67 --- /dev/null +++ b/files/bn/learn/css/index.html @@ -0,0 +1,67 @@ +--- +title: Learn to style HTML using CSS +slug: Learn/CSS +tags: + - Beginner + - CSS + - CodingScripting + - Debugging + - Landing + - NeedsContent + - NeedsTranslation + - Style + - Topic + - TopicStub + - length + - specificity +translation_of: Learn/CSS +--- +
{{LearnSidebar}}
+ +

Cascading Stylesheets — or {{glossary("CSS")}} — is the first technology you should start learning after {{glossary("HTML")}}. While HTML is used to define the structure and semantics of your content, CSS is used to style it and lay it out. For example, you can use CSS to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features.

+ +

Learning pathway

+ +

You should learn the basics of HTML before attempting any CSS. We recommend that you work through our Introduction to HTML module first. In that module, you will learn about:

+ + + +

Once you understand the fundamentals of HTML, we recommend that you learn HTML and CSS at the same time, moving back and forth between the two topics. This is because HTML is far more interesting and much more fun to learn when you apply CSS, and you can't really learn CSS without knowing HTML.

+ +

Before starting this topic, you should also be familiar with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up as detailed in Installing basic software and understand how to create and manage files, as detailed in Dealing with files — both of which are parts of our Getting started with the web complete beginner's module.

+ +

It is recommended that you work through Getting started with the web before proceeding with this topic. However, doing so isn't absolutely necessary as much of what is covered in the CSS basics article is also covered in our Introduction to CSS module, albeit in a lot more detail.

+ +

Modules

+ +

This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.

+ +
+
Introduction to CSS
+
This module gets you started with the basics of how CSS works, including using selectors and properties; writing CSS rules; applying CSS to HTML; specifying length, color, and other units in CSS; controlling cascade and inheritance; understanding box model basics; and debugging CSS.
+
Styling text
+
Here, we look at text-styling fundamentals, including setting font, boldness, and italics; line and letter spacing; and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page and styling lists and links.
+
Styling boxes
+
Next up, we look at styling boxes, one of the fundamental steps towards laying out a web page. In this module, we recap the box model, then look at controlling box layouts by setting padding, borders and margins, setting custom background colors, images, and fancy features such as drop shadows and filters on boxes.
+
CSS layout
+
At this point, we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now, it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.
+
Responsive design (TBD)
+
With so many different types of devices able to browse the web these days, responsive web design (RWD) has become a core web development skill. This module will cover the basic principles and tools of RWD; explain how to apply different CSS to a document depending on device features like screen width, orientation, and resolution; and explore the technologies available for serving different videos and images depending on such features.
+
+ +

Solving common CSS problems

+ +

Use CSS to solve common problems provides links to sections of content explaining how to use CSS to solve very common problems when creating a web page.

+ +

From the beginning, you'll primarily apply colors to HTML elements and their backgrounds; change the size, shape, and position of elements; and add and define borders on elements. But there's not much you can't do once you have a solid understanding of even the basics of CSS. One of the best things about learning CSS is that once you know the fundamentals, usually you have a pretty good feel for what can and can't be done, even if you don't actually know how to do it yet!

+ +

See also

+ +
+
CSS on MDN
+
The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.
+
diff --git a/files/bn/learn/html/index.html b/files/bn/learn/html/index.html new file mode 100644 index 0000000000..bcfa885427 --- /dev/null +++ b/files/bn/learn/html/index.html @@ -0,0 +1,50 @@ +--- +title: HTML +slug: Learn/HTML +translation_of: Learn/HTML +--- +
{{LearnSidebar}}
+ +

To build websites, you should know about {{Glossary('HTML')}} — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.

+ +

Learning pathway

+ +

Ideally you should start your learning journey by learning HTML. Start by reading Introduction to HTML. You may then move on to learning about more advanced topics such as:

+ + + +

Before starting this topic, you should have at least basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content). You should have a basic work environment set up as detailed in Installing basic software, and understand how to create and manage files, as detailed in Dealing with files — both are parts of our Getting started with the web complete beginner's module.

+ +

It is recommended that you work through Getting started with the web before attempting this topic, however it isn't absolutely necessary; much of what is covered in the HTML basics article is also covered in our Introduction to HTML module, albeit in a lot more detail.

+ +

Modules

+ +

This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.

+ +
+
Introduction to HTML
+
This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.
+
Multimedia and embedding
+
This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.
+
HTML Tables
+
Representing tabular data on a webpage in an understandable, {{glossary("Accessibility", "accessible")}} way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.
+
HTML Forms
+
Forms are a very important part of the Web — these provide much of the functionality you need for interacting with web sites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.
+
+ +

Solving common HTML problems

+ +

Use HTML to solve common problems provides links to sections of content explaining how to use HTML to solve very common problems when creating a webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

+ +

See also

+ +
+
+
HTML (HyperText Markup Language) on MDN.
+
The main entry point for HTML documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.
+
+
diff --git a/files/bn/learn/html/introduction_to_html/index.html b/files/bn/learn/html/introduction_to_html/index.html new file mode 100644 index 0000000000..42fc47f662 --- /dev/null +++ b/files/bn/learn/html/introduction_to_html/index.html @@ -0,0 +1,73 @@ +--- +title: Introduction to HTML +slug: Learn/HTML/Introduction_to_HTML +tags: + - CodingScripting + - HTML + - Introduction to HTML + - Landing + - Links + - NeedsTranslation + - Structure + - Text + - TopicStub + - head + - semantics +translation_of: Learn/HTML/Introduction_to_HTML +--- +
{{LearnSidebar}}
+ +

At its heart, {{glossary("HTML")}} is a fairly simple language made up of {{Glossary("Element","elements")}}, which can be applied to pieces of text to give them different meaning in a document (Is it a paragraph? Is it a bulleted list? Is it part of a table?), structure a document into logical sections (Does it have a header? Three columns of content? A navigation menu?), and embed content such as images and videos into a page. This module will introduce the first two of these and introduce fundamental concepts and syntax you need to know to understand HTML.

+ +

Prerequisites

+ +

Before starting this module, you don't need any previous HTML knowledge, but you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it and consuming content). You should have a basic work environment set up (as detailed in Installing basic software), and understand how to create and manage files (as detailed in Dealing with files). Both are parts of our Getting started with the web complete beginner's module.

+ +
+

Note: If you are working on a computer/tablet/other devices that doesn't let you create your own files, you can try out (most of) the code examples in an online coding program such as JSBin or Glitch.

+
+ +

Guides

+ +

This module contains the following articles, which will take you through all the basic theory of HTML and provide ample opportunity for you to test out some skills.

+ +
+
Getting started with HTML
+
Covers the absolute basics of HTML, to get you started — we define elements, attributes, and other important terms, and show where they fit in the language. We also show how a typical HTML page is structured and how an HTML element is structured, and explain other important basic language features. Along the way, we'll play with some HTML to get you interested!
+
What’s in the head? Metadata in HTML
+
The {{Glossary("Head","head")}} of an HTML document is the part that is not displayed in the web browser when the page is loaded. It contains information such as the page {{htmlelement("title")}}, links to {{glossary("CSS")}} (if you want to style your HTML content with CSS), links to custom favicons, and metadata (data about the HTML, such as who wrote it, and important keywords that describe the document).
+
HTML text fundamentals
+
One of HTML's main jobs is to give text meaning (also known as {{Glossary("Semantics","semantics")}}), so that the browser knows how to display it correctly. This article looks at how to use HTML to break up a block of text into a structure of headings and paragraphs, add emphasis/importance to words, create lists, and more.
+
Creating hyperlinks
+
Hyperlinks are really important — they are what makes the web a web. This article shows the syntax required to make a link and discusses best practices for links.
+
Advanced text formatting
+
There are many other elements in HTML for formatting text that we didn't get to in the HTML text fundamentals article. The elements here are less well-known, but still useful to know about. In this article, you'll learn about marking up quotations, description lists, computer code and other related text, subscript and superscript, contact information, and more.
+
Document and website structure
+
As well as defining individual parts of your page (such as "a paragraph" or "an image"), HTML is also used to define areas of your website (such as "the header," "the navigation menu," or "the main content column.") This article looks into how to plan a basic website structure and how to write the HTML to represent this structure.
+
Debugging HTML
+
Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help.
+
+ +

Assessments

+ +

The following assessments will test your understanding of the HTML basics covered in the guides above.

+ +
+
Marking up a letter
+
We all learn to write a letter sooner or later; it is also a useful example to test out text formatting skills. In this assessment, you'll be given a letter to mark up.
+
Structuring a page of content
+
This assessment tests your ability to use HTML to structure a simple page of content, containing a header, a footer, a navigation menu, main content, and a sidebar.
+
+ +

See also

+ +
+
Web literacy basics 1
+
An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the Introduction to HTML module. Learners get familiar with reading, writing, and participating on the web in this six-part module. Discover the foundations of the web through production and collaboration.
+
+ +
+

Feedback

+ +

Help us improve our guides and tutorials like this one by taking our survey here.

+
diff --git a/files/bn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html b/files/bn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html new file mode 100644 index 0000000000..dce5a1f342 --- /dev/null +++ b/files/bn/learn/html/introduction_to_html/the_head_metadata_in_html/index.html @@ -0,0 +1,286 @@ +--- +title: What’s in the head? Metadata in HTML +slug: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +translation_of: Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML +--- +
{{LearnSidebar}}
+ +
{{পূর্ববর্তীমেনেক্সট ("শিখুন / এইচটিএমএল / ভূমিকা_ টুটোঅ্যাপ / গেটিং_স্টার্ট" "" শিখুন / এইচটিএমএল / পরিচিতি_ টুআউটএইচএমএল / এইচটিএমএল_পাঠন_ফান্ডমেন্টস ")," শিখুন / এইচটিএমএল / ভূমিকা_to_HTML ")}
+ +

এইচটিএমএল ডকুমেন্টের {। শব্দকোষ ("প্রধান", "মাথা")} এমন অংশ যা পৃষ্ঠাটি লোড হওয়ার পরে ওয়েব ব্রাউজারে প্রদর্শিত হয় না। এটিতে {t htmlelement ("শিরোনাম")} page পৃষ্ঠা, {{গ্লসারি ("CSS")) links (আপনি যদি CSS এর সাথে আপনার HTML বিষয়বস্তু স্টাইল করতে পছন্দ করেন), কাস্টম ফেভিকনগুলির লিঙ্ক এবং অন্যান্য সম্পর্কিত তথ্য রয়েছে মেটাডেটা (এইচটিএমএল সম্পর্কিত ডেটা, যেমন লেখক, এবং গুরুত্বপূর্ণ কীওয়ার্ড যা দস্তাবেজ বর্ণনা করে mark) আপনাকে নিবন্ধের সাথে কাজ করার জন্য একটি ভাল ভিত্তি দেওয়ার জন্য এই নিবন্ধে আমরা উপরের এবং আরও অনেকগুলি কভার করব।

+ + + + + + + + + + + + +
পূর্বশর্ত:এইচটিএমএল দিয়ে শুরু করার ক্ষেত্রে কভার হিসাবে বেসিক এইচটিএমএল পরিচিতি ।
উদ্দেশ্য:এইচটিএমএল হেড, তার উদ্দেশ্য, এটিতে থাকা সবচেয়ে গুরুত্বপূর্ণ আইটেমগুলি এবং এটি HTML ডকুমেন্টে কী প্রভাব ফেলতে পারে তা সম্পর্কে জানতে।
+ +

এইচটিএমএল প্রধান কি?

+ +

আসুন আমরা আগের প্রবন্ধে কভার করা সাধারণ HTML নথিটি আবার ঘুরে দেখি :

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My test page</title>
+  </head>
+  <body>
+    <p>This is my page</p>
+  </body>
+</html>
+ +

এইচটিএমএল হেড হ'ল t t এইচটিএম্লেলেটমেন্ট ("মাথা")}} উপাদানটির বিষয়বস্তু - {t এইচটিএমলেলেট ("বডি")}} উপাদান (যা ব্রাউজারে লোড করার সময় পৃষ্ঠায় প্রদর্শিত হয়) এর বিপরীতে, মাথার সামগ্রীটি পৃষ্ঠায় প্রদর্শিত হয় না। পরিবর্তে, দস্তাবেজের বিষয়ে প্রধানের কাজটি ss। শব্দকোষ ("মেটাডাটা", "মেটাডেটা") contain contain থাকা। উপরের উদাহরণে, মাথাটি বেশ ছোট:

+ +
<head>
+  <meta charset="utf-8">
+  <title>My test page</title>
+</head>
+ +

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

+ +

একটি শিরোনাম যুক্ত করা হচ্ছে

+ +

আমরা ইতিমধ্যে ক্রিয়াকলাপে {t htmlelement ("শিরোনাম")}} উপাদানটি দেখেছি - এটি নথিতে একটি শিরোনাম যুক্ত করতে ব্যবহার করা যেতে পারে। তবে এটি আপনার শরীরের সামগ্রীতে শীর্ষ স্তরের শিরোনাম যুক্ত করতে ব্যবহৃত which t htmlelement ("h1")}} উপাদানটির সাথে বিভ্রান্ত হতে পারে - এটি কখনও কখনও পৃষ্ঠা শিরোনাম হিসাবেও উল্লেখ করা হয়। তবে এগুলি আলাদা জিনিস!

+ + + +

সক্রিয় শেখা: একটি সাধারণ উদাহরণ পরিদর্শন করা

+ +
    +
  1. এই সক্রিয় শেখার শুরু করতে, আমরা চাই আপনি আমাদের গিটহাব রেপোতে গিয়ে আমাদের শিরোনাম-উদাহরণ । Html পৃষ্ঠাটির একটি অনুলিপি ডাউনলোড করুন । এটি করার জন্য, হয় + +
      +
    1. পৃষ্ঠার বাইরে কোডটি অনুলিপি করুন এবং আপনার কোড সম্পাদকে একটি নতুন পাঠ্য ফাইলে আটকান, তারপরে এটি কোনও বোধগম্য জায়গায় সংরক্ষণ করুন।
      2. +
    2. গিটহাব পৃষ্ঠায় "কাঁচা" বোতাম টিপুন, যার ফলে কাঁচা কোড প্রদর্শিত হবে (সম্ভবত একটি নতুন ব্রাউজার ট্যাবে)। এরপরে, আপনার ব্রাউজারের  ফাইল> পৃষ্ঠা হিসাবে সংরক্ষণ করুন ... মেনু চয়ন করুন এবং ফাইলটি সংরক্ষণ করার জন্য একটি বুদ্ধিমান জায়গা চয়ন করুন।
      3. +
    +
    2. +
  2. এখন আপনার ব্রাউজারে ফাইলটি খুলুন। আপনার এইরকম কিছু দেখতে পাওয়া উচিত: +

    <শিরোনাম> উপাদানটিতে শিরোনামযুক্ত একটি সাধারণ ওয়েব পৃষ্ঠা এবং <h1> উপাদানটিকে <h1> সেট করা আছে।এটি এখন সম্পূর্ণ স্পষ্ট হওয়া উচিত যেখানে <h1>সামগ্রীটি প্রদর্শিত হবে এবং যেখানে <title>সামগ্রী প্রদর্শিত হবে!

    +
    3. +
  3. আপনার কোড সম্পাদকে কোডগুলি খোলার চেষ্টা করা উচিত, এই উপাদানগুলির বিষয়বস্তু সম্পাদনা করে, তারপরে আপনার ব্রাউজারে পৃষ্ঠাটি রিফ্রেশ করুন। এটা দিয়ে কিছু মজা আছে।
    4. +
+ +

<title>উপাদান বিষয়বস্তু অন্যান্য উপায়ে ব্যবহার করা হয়। উদাহরণস্বরূপ, আপনি যদি পৃষ্ঠাটি বুকমার্ক করার চেষ্টা করেন ( বুকমার্কস> এই পৃষ্ঠাটি বুকমার্ক করুন বা ফায়ারফক্সের URL বারে তারকা আইকন), আপনি <title>প্রস্তাবিত বুকমার্কের নাম হিসাবে ভরাট সামগ্রী দেখতে পাবেন ।

+ +

ফায়ারফক্সে একটি ওয়েবপেজ বুকমার্ক করা হচ্ছে; বুকমার্কের নামটি <শিরোনাম> উপাদানটির সামগ্রীতে স্বয়ংক্রিয়ভাবে পূর্ণ হয়ে গেছে filled

+ +

<title>বিষয়বস্তু এছাড়াও, অনুসন্ধান ফলাফল ব্যবহার করা হয় যেমন আপনি নীচের দেখতে পাবেন।

+ +

মেটাডেটা: <মেটা> উপাদান

+ +

মেটাডেটা এমন ডেটা যা ডেটা বর্ণনা করে এবং এইচটিএমএল একটি নথিতে মেটাডেটা যুক্ত করার একটি "অফিসিয়াল" উপায় রয়েছে - {{htmlelement ("meta")}। উপাদান। অবশ্যই, আমরা এই নিবন্ধটিতে অন্যান্য জিনিসগুলির কথা বলছি তাও মেটাডেটা হিসাবে বিবেচনা করা যেতে পারে। বিভিন্ন ধরণের <meta>উপাদান রয়েছে যা আপনার পৃষ্ঠার <হেড> এ অন্তর্ভুক্ত করা যেতে পারে তবে আমরা এ পর্যায়ে সেগুলি ব্যাখ্যা করার চেষ্টা করব না, কারণ এটি কেবল খুব বিভ্রান্ত হবে। পরিবর্তে, আমরা আপনাকে কিছু ধারণা দেবো যা আপনি সাধারণত দেখতে পারেন, কেবল আপনাকে ধারণা দেওয়ার জন্য।

+ +

আপনার নথির অক্ষর এনকোডিং নির্দিষ্ট করা

+ +

আমরা উপরের উদাহরণে দেখেছি, এই লাইনটি অন্তর্ভুক্ত ছিল:

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

এই উপাদানটি কেবল নথির অক্ষর এনকোডিং নির্দিষ্ট করে - নথিটি ব্যবহারের জন্য অনুমোদিত এমন অক্ষর সেট। utf-8একটি সর্বজনীন চরিত্র সেট যা কোনও মানব ভাষা থেকে যে কোনও চরিত্রকে অন্তর্ভুক্ত করে। এর অর্থ হ'ল আপনার ওয়েব পৃষ্ঠাটি যে কোনও ভাষা প্রদর্শিত হ্যান্ডেল করতে সক্ষম হবে; সুতরাং আপনার তৈরি প্রতিটি ওয়েব পৃষ্ঠায় এটি সেট করা ভাল ধারণা! উদাহরণস্বরূপ, আপনার পৃষ্ঠাটি ইংলিশ এবং জাপানিদের ঠিক জরিমানা করতে পারে:

+ +

ইংরেজি এবং জাপানি অক্ষর সমন্বিত একটি ওয়েব পৃষ্ঠা, সর্বজনীন বা utf-8 এ অক্ষর এনকোডিং রয়েছে with উভয় ভাষা সূক্ষ্ম প্রদর্শন করে,আপনি যদি নিজের চরিত্রের এনকোডিং সেট করেন ISO-8859-1, উদাহরণস্বরূপ (লাতিন বর্ণমালার জন্য বর্ণচিহ্ন সেট করা), আপনার পৃষ্ঠার রেন্ডারিং সমস্ত গোলমেলে প্রদর্শিত হতে পারে:

+ +

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

+ +
+

দ্রষ্টব্য : কিছু ব্রাউজার (যেমন ক্রোম) স্বয়ংক্রিয়ভাবে ভুল এনকোডিংগুলি ঠিক করে দেয়, তাই আপনি কোন ব্রাউজারটি ব্যবহার করেন তার উপর নির্ভর করে আপনি যেভাবেই এই সমস্যাটি দেখতে পাবেন না। utf-8অন্য ব্রাউজারগুলিতে কোনও সম্ভাব্য সমস্যা এড়াতে আপনার পাতায় এখনও কোনও এনকোডিং সেট করা উচিত ।

+
+ +

সক্রিয় শেখা: চরিত্রের এনকোডিংয়ের পরীক্ষা

+ +

এটি চেষ্টা করার জন্য, পূর্ববর্তী বিভাগে <title>( শিরোনাম-উদাহরণ html পৃষ্ঠা ) আপনি প্রাপ্ত সাধারণ এইচটিএমএল টেমপ্লেটটি আবার ঘুরে দেখুন , মেটা চরসেট মানটিতে পরিবর্তন করার চেষ্টা ISO-8859-1করুন এবং আপনার পৃষ্ঠায় জাপানিদের যুক্ত করুন। এটি আমরা ব্যবহার করা কোড:

+ +
<p> জাপানি উদাহরণ: ভাত গরম। ? </ P>
+ +

একজন লেখক এবং বিবরণ যুক্ত করা হচ্ছে

+ +

অনেক <meta>উপাদান অন্তর্ভুক্ত nameএবং contentবৈশিষ্ট্য:

+ + + +

আপনার পৃষ্ঠায় অন্তর্ভুক্ত করতে দরকারী এমন দুটি মেটা উপাদান পৃষ্ঠার লেখককে সংজ্ঞায়িত করে এবং পৃষ্ঠার একটি সংক্ষিপ্ত বিবরণ সরবরাহ করে। আসুন একটি উদাহরণ তাকান:

+ +
<মেটা নাম = "লেখক" সামগ্রী = "ক্রিস মিলস">
+<মেটা নাম = "বিবরণ" সামগ্রী = "এমডিএন ওয়েব ডক্স লার্নিং এরিয়া সরবরাহ করার লক্ষ্য
+ওয়েবে তাদের জানতে প্রয়োজনীয় সমস্ত কিছুর সাথে ওয়েবে শুরু করুন
+ওয়েব সাইট এবং অ্যাপ্লিকেশন বিকাশ করে শুরু হয়েছে "">
+ +

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

+ +

আপনার পৃষ্ঠার সামগ্রীর সাথে সম্পর্কিত কীওয়ার্ড সহ একটি বিবরণ উল্লেখ করা দরকারী কারণ এটি আপনার পৃষ্ঠায় অনুসন্ধান ইঞ্জিনগুলিতে সম্পাদিত প্রাসঙ্গিক অনুসন্ধানগুলিতে উচ্চতর প্রদর্শিত হওয়ার সম্ভাবনা রয়েছে (এই জাতীয় ক্রিয়াকলাপটিকে অনুসন্ধান ইঞ্জিন অপ্টিমাইজেশন বা "এসইও" বলা হয়) )}}।)

+ +

সক্রিয় শিক্ষণ: অনুসন্ধান ইঞ্জিনগুলিতে বর্ণনার ব্যবহার

+ +

বর্ণনাটি অনুসন্ধান ইঞ্জিনের ফলাফল পৃষ্ঠাগুলিতেও ব্যবহৃত হয়। এটি এক্সপ্লোর করার জন্য অনুশীলনের মধ্য দিয়ে যাওয়া যাক

+ +
    +
  1. মজিলা বিকাশকারী নেটওয়ার্কের প্রথম পৃষ্ঠায় যান ।
    2. +
  2. পৃষ্ঠার উত্স দেখুন (পৃষ্ঠায় ডান / Ctrl+ ক্লিক করুন, প্রসঙ্গ মেনু থেকে পৃষ্ঠা উত্স দেখুন চয়ন করুন )
    3. +
  3. বর্ণনা মেটা ট্যাগ সন্ধান করুন। এটি এর মতো কিছু দেখবে (যদিও এটি সময়ের সাথে সাথে এটি পরিবর্তিত হতে পারে): + 
    <মেটা নাম = "বিবরণ" সামগ্রী = "এমডিএন ওয়েব ডক্স সাইট 
+  ওপেন ওয়েব প্রযুক্তি সম্পর্কিত তথ্য সরবরাহ করে 
+  এইচটিএমএল, সিএসএস এবং উভয় ওয়েব সাইট এবং এর জন্য এপিআই সহ 
+  প্রগতিশীল ওয়েব অ্যাপ্লিকেশন "">
    +
    4. +
  4. এখন আপনার পছন্দসই সার্চ ইঞ্জিনে "MDN ওয়েব ডক্স" অনুসন্ধান করুন (আমরা গুগল ব্যবহার করেছি)) আপনি অনুসন্ধানের ফলাফলটিতে ব্যবহৃত বিবরণ <meta>এবং <title>উপাদান সামগ্রীটি লক্ষ্য করবেন - অবশ্যই তা মূল্যবান! +

    "মজিলা বিকাশকারী নেটওয়ার্ক" এর জন্য ইয়াহু অনুসন্ধানের ফলাফল

    +
    5. +
+ +
+

দ্রষ্টব্য : গুগলে আপনি মূল হোমপেজ লিঙ্কের নীচে তালিকাভুক্ত MDN ওয়েব ডক্সের কিছু প্রাসঙ্গিক উপ পৃষ্ঠা দেখতে পাবেন - এগুলিকে সাইটলিঙ্কস বলা হয় এবং গুগলের ওয়েবমাস্টার সরঞ্জামগুলিতে কনফিগার করা যায় - গুগল অনুসন্ধান ইঞ্জিনে আপনার সাইটের অনুসন্ধানের ফলাফলকে আরও উন্নত করার একটি উপায়।

+
+ +
+

দ্রষ্টব্য : অনেকগুলি <meta>বৈশিষ্ট্য আর ব্যবহার করা হয় না। উদাহরণস্বরূপ, কীওয়ার্ড <meta>এলিমেন্ট ( <meta name="keywords" content="fill, in, your, keywords, here">) - যা বিভিন্ন অনুসন্ধানের পদগুলির জন্য সেই পৃষ্ঠার প্রাসঙ্গিকতা নির্ধারণের জন্য অনুসন্ধান ইঞ্জিনগুলির জন্য কীওয়ার্ড সরবরাহ করার কথা ছিল - অনুসন্ধান ইঞ্জিনগুলি দ্বারা উপেক্ষা করা হয়, কারণ স্প্যামাররা কেবলমাত্র শত শত কীওয়ার্ড সহ কীওয়ার্ডের তালিকাটি পূরণ করছিল, বাইসিং ফলাফলগুলি ।

+
+ +

অন্যান্য ধরণের মেটাডেটা

+ +

আপনি যখন ওয়েবে ঘুরে দেখেন, আপনি অন্যান্য ধরণের মেটাডেটাও দেখতে পাবেন। ওয়েবসাইটগুলিতে আপনি দেখতে পাবেন এমন অনেকগুলি বৈশিষ্ট্য হ'ল মালিকানাধর্মী সৃজন, নির্দিষ্ট সাইটগুলি (যেমন সোশ্যাল নেটওয়ার্কিং সাইটগুলি) তারা ব্যবহার করতে পারেন এমন নির্দিষ্ট তথ্য সরবরাহ করার জন্য ডিজাইন করা।

+ +

উদাহরণস্বরূপ, ওপেন গ্রাফ ডেটা এমন একটি মেটাডেটা প্রোটোকল যা ফেসবুক ওয়েবসাইটগুলির জন্য আরও সমৃদ্ধ মেটাডেটা সরবরাহ করার জন্য আবিষ্কার করেছিল। MDN ওয়েব ডক্স সোর্সকোডে আপনি এটি পাবেন:

+ +
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
+<meta property="og:description" content="The Mozilla Developer Network (MDN) provides
+information about Open Web technologies including HTML, CSS, and APIs for both Web sites
+and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">
+<meta property="og:title" content="Mozilla Developer Network">
+ +

এর একটি প্রভাব হ'ল আপনি যখন ফেসবুকে MDN ওয়েব ডক্সের সাথে লিঙ্ক করেন, লিঙ্কটি একটি চিত্র এবং বর্ণনার সাথে উপস্থিত হয়: ব্যবহারকারীদের জন্য আরও সমৃদ্ধ অভিজ্ঞতা।

+ +

ফেসবুকে প্রদর্শিত হিসাবে এমডিএন হোমপেজ থেকে গ্রাফ প্রোটোকল ডেটা খুলুন, একটি চিত্র, শিরোনাম এবং বিবরণ দেখায়।

+ +

টুইটারের নিজস্ব টুইটার কার্ড নামে নিজস্ব মালিকানাধীন মেটাডেটাও রয়েছে, যা সাইটের ইউআরএল টুইটার ডটকমে প্রদর্শিত হলে একই প্রভাব ফেলে। উদাহরণ স্বরূপ:

+ +
<meta name="twitter:title" content="Mozilla Developer Network">
+ +

আপনার সাইটে কাস্টম আইকন যুক্ত করা হচ্ছে

+ +

আপনার সাইটের নকশাটিকে আরও সমৃদ্ধ করতে, আপনি আপনার মেটাডেটাতে কাস্টম আইকনগুলিতে উল্লেখ যুক্ত করতে পারেন এবং এগুলি নির্দিষ্ট প্রসঙ্গে প্রদর্শিত হবে। এর মধ্যে সর্বাধিক ব্যবহৃত হ'ল ফেভিকন (ব্রাউজারগুলিতে "ফেভারিট" বা "বুকমার্কস" তালিকায় এর ব্যবহারের উল্লেখ করে "ফেভারিট আইকন" এর জন্য সংক্ষিপ্ত)।

+ +

নম্র ফ্যাভিকন প্রায় বহু বছর ধরে রয়েছে। এটি এই ধরণের প্রথম আইকন: একাধিক জায়গায় ব্যবহৃত 16 পিক্সেল বর্গ আইকন। আপনি প্রতিটি ব্রাউজার পাতায় থাকা ব্রাউজার ট্যাবে এবং বুকমার্ক প্যানেলে বুকমার্কযুক্ত পৃষ্ঠাগুলির পাশে ফ্যাভিকনগুলি (ব্রাউজারের উপর নির্ভর করে) দেখতে পাবেন।

+ +

আপনার পৃষ্ঠায় একটি ফেভিকন যুক্ত করা যেতে পারে:

+ +
    +
  1. সাইটের সূচক পাতা, সংরক্ষিত হিসাবে একই ডিরেক্টরির মধ্যে সংরক্ষণ .icoবিন্যাস (অধিকাংশ ব্রাউজারের মতো আরো সাধারণ বিন্যাসে ফ্যাবিকনগুলি সমর্থন করবে .gifবা .png, কিন্তু ICO ফরম্যাটে ব্যবহার করে এটি পর্যন্ত ফিরে ইন্টারনেট এক্সপ্লোরার 6. যেমন হিসাবে কাজ করে তা নিশ্চিত হবে)
    2. +
  2. এটি উল্লেখ করার জন্য আপনার এইচটিএমএল এর M {এইচটিএমলেমেন্ট ("প্রধান")}} ব্লকটিতে নিম্নলিখিত লাইনটি যুক্ত করা: + 
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    +
    3. +
+ +

এখানে একটি বুকমার্ক প্যানেলে ফ্যাভিকনের উদাহরণ রয়েছে:

+ +

ফায়ারফক্স বুকমার্কস প্যানেল, পাশে একটি ফ্যাভিকন সহ একটি বুকমার্কড উদাহরণ দেখায়।

+ +

এই দিনগুলিতেও বিবেচনার জন্য প্রচুর অন্যান্য আইকন ধরণের রয়েছে। উদাহরণস্বরূপ, আপনি এটি MDN ওয়েব ডক্স হোমপেজের উত্স কোডে পাবেন:

+ +
<!-- third-generation iPad with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://developer.cdn.mozilla.net/static/img/favicon144.a6e4162070f4.png">
+<!-- iPhone with high-resolution Retina display: -->
+<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://developer.cdn.mozilla.net/static/img/favicon114.0e9fabd44f85.png">
+<!-- first- and second-generation iPad: -->
+<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://developer.cdn.mozilla.net/static/img/favicon72.8ff9d87c82a0.png">
+<!-- non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
+<link rel="apple-touch-icon-precomposed" href="https://developer.cdn.mozilla.net/static/img/favicon57.a2490b9a2d76.png">
+<!-- basic favicon -->
+<link rel="shortcut icon" href="https://developer.cdn.mozilla.net/static/img/favicon32.e02854fdcf73.png">
+ +

প্রতিটি আইকন কীসের জন্য ব্যবহৃত হয় তা মন্তব্যগুলিতে ব্যাখ্যা করা হয় - ওয়েবসাইটগুলি যখন কোনও আইপ্যাডের হোম স্ক্রিনে সংরক্ষণ করা হয় তখন এই উপাদানগুলি ব্যবহার করার জন্য একটি দুর্দান্ত উচ্চ রেজোলিউশন আইকন সরবরাহ করার মতো জিনিসগুলিকে আবরণ দেয়।

+ +

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

+ +
+

দ্রষ্টব্য: আপনার সাইটটি এর সুরক্ষা বাড়ানোর জন্য যদি কোনও বিষয়বস্তু সুরক্ষা নীতি (সিএসপি) ব্যবহার করে, তবে নীতিটি ফেভিকনে প্রযোজ্য। যদি আপনার ফেভিকনটি লোড না হওয়ার সমস্যা হয়, তবে যাচাই করুন যে {{HTTPHeader ("বিষয়বস্তু-সুরক্ষা-নীতি")}। শিরোনামের img-srcনির্দেশিকা এতে অ্যাক্সেস রোধ করছে না।

+
+ +

এইচটিএমএলে সিএসএস এবং জাভাস্ক্রিপ্ট প্রয়োগ করা হচ্ছে

+ +

আপনি আধুনিক দিনে যে সমস্ত ওয়েবসাইট ব্যবহার করবেন সেগুলি সম্পর্কে {গ্লসারি ("সিএসএস")} emplo তাদের দুর্দান্ত দেখানোর জন্য এবং ভিডিও প্লেয়ারের মতো ইন্টারেক্টিভ কার্যকারিতা পাওয়ার জন্য {{গ্লসারি ("জাভাস্ক্রিপ্ট") y emplo নিযুক্ত করবে , মানচিত্র, গেমস এবং আরও অনেক কিছু। এগুলি যথাক্রমে page t htmlelement ("লিঙ্ক")}} উপাদান এবং {{htmlelement ("স্ক্রিপ্ট")}} উপাদান ব্যবহার করে কোনও ওয়েব পৃষ্ঠায় সাধারণত প্রয়োগ করা হয়।

+ + + +

সক্রিয় শিক্ষা: একটি পৃষ্ঠায় সিএসএস এবং জাভাস্ক্রিপ্ট প্রয়োগ করা

+ +
    +
  1. এই সক্রিয় শেখা শুরু করার জন্য, আমাদের একটি কপি দখল মেটা-example.html , script.js এবং style.css ফাইল, এবং একই ডিরেক্টরির মধ্যে আপনার কম্পিউটারে সংরক্ষণ করুন। এগুলি সঠিক নাম এবং ফাইল এক্সটেনশনের সাহায্যে সংরক্ষিত হয়েছে তা নিশ্চিত করুন।
    2. +
  2. আপনার ব্রাউজার এবং আপনার পাঠ্য সম্পাদক উভয়ই HTML ফাইল খুলুন।
    3. +
  3. উপরের বর্ণিত তথ্য অনুসরণ করে আপনার HTML এ t t htmlelement ("লিঙ্ক")}} এবং {{htmlelement ("স্ক্রিপ্ট")}} উপাদান যুক্ত করুন, যাতে আপনার সিএসএস এবং জাভাস্ক্রিপ্ট আপনার HTML এ প্রয়োগ হয়।
    4. +
+ +

যদি সঠিকভাবে সম্পন্ন করা হয়, আপনি যখন আপনার এইচটিএমএল সংরক্ষণ করেন এবং আপনার ব্রাউজারটি রিফ্রেশ করেন তখন আপনাকে দেখতে পারা উচিত যে জিনিসগুলি পরিবর্তিত হয়েছে:

+ +

সিএসএস এবং জাভাস্ক্রিপ্ট সহ কোনও পৃষ্ঠা দেখানো উদাহরণ এটিতে প্রয়োগ করা হয়েছে। সিএসএস পৃষ্ঠাটিকে সবুজ করে তুলেছে, যেখানে জাভাস্ক্রিপ্ট পৃষ্ঠায় একটি গতিশীল তালিকা যুক্ত করেছে।

+ + + +
+

দ্রষ্টব্য : আপনি যদি এই অনুশীলনে আটকে যান এবং সিএসএস / জেএস প্রয়োগ করতে না পারেন তবে আমাদের সিএসএস এবং জেএসএইচটিএমএল উদাহরণ পৃষ্ঠাটি পরীক্ষা করে দেখুন।

+
+ +

নথির প্রাথমিক ভাষা সেট করা হচ্ছে

+ +

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

+ +
<html lang = "en-US">
+ +

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

+ +

আপনি আলাদা আলাদা ভাষা হিসাবে স্বীকৃতি পেতে আপনার দস্তাবেজের সাব-বিভাগগুলিও সেট করতে পারেন। উদাহরণস্বরূপ, আমরা আমাদের জাপানি ভাষার বিভাগটি জাপানি হিসাবে স্বীকৃতি হিসাবে সেট করতে পারি:

+ +
<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>
+ +

এই কোডগুলি আইএসও 639-1 স্ট্যান্ডার্ড দ্বারা সংজ্ঞায়িত করা হয়েছে । আপনি এইচটিএমএল এবং এক্সএমএলে ভাষা ট্যাগগুলিতে তাদের সম্পর্কে আরও জানতে পারেন ।

+ +

সারসংক্ষেপ

+ +

এটি এইচটিএমএল হেডের আমাদের কুইকফায়ার সফরের সমাপ্তি চিহ্নিত করে - আপনি এখানে আরও অনেক কিছু করতে পারেন তবে একটি বিস্তৃত ভ্রমণ এই পর্যায়ে বিরক্তিকর এবং বিভ্রান্তিকর হবে এবং আমরা আপনাকে সর্বাধিক সাধারণ বিষয় সম্পর্কে ধারণা দিতে চাইছিলাম আপনি আপাতত সেখানে খুঁজে পাবেন! পরবর্তী নিবন্ধে আমরা এইচটিএমএল পাঠ্যের মূল বিষয়গুলি খুঁজছি।

+ +

{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Getting_started", "Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals", "Learn/HTML/Introduction_to_HTML")}}

+ +

এই মডিউলটিতে

+ + diff --git a/files/bn/learn/index.html b/files/bn/learn/index.html new file mode 100644 index 0000000000..d97b02594f --- /dev/null +++ b/files/bn/learn/index.html @@ -0,0 +1,99 @@ +--- +title: Web কে শিখুনwww +slug: Learn +tags: + - Beginner + - Index + - Landing + - Learn + - NeedsTranslation + - TopicStub + - Web +translation_of: Learn +--- +
+

আপনি কি আপনার নিজের ওয়েবসাইট বা ওয়েব এ্যাপ বানাতে চান ? আপনি একেবারে সঠিক জায়গায়তেই এসেছেন।

+
+ +

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

+ +

কোথায় থেকে শুরু করতে চান?

+ +

আপনি যেখানেই যেতে চান আমরা আপনার সাথে সেখানেই নিয়ে যাব । কোন বিবরনটি আপনার কাছে বেশি সুবিধা জনক ?

+ + + +
+

Note: In the future we're planning to publish more learning pathways, for example for experienced coders learning specific advanced techniques, native developers who are new to the Web, or people who want to learn design techniques.

+
+ +

{{LearnBox({"title":"Quick learning: Vocabulary"})}}

+ +

অন্যান্য জনের সাথে শিখুন

+ +

 যদি আপনার কিছু জানার থাকে or are still wondering where to go, Mozilla is a global community of Web enthusiasts, including mentors and teachers who are glad to help you. Get in touch with them through WebMaker:

+ + + +

Sharing knowledge

+ +

This whole Learning Area is built by our contributors. We need you in our team whether you are a beginner, a teacher, or a skilled web developer. If you're interested, take a look at how you can help, and we encourage you to chat with us on our mailing lists or IRC channel. :)

+ +
+
EXLskills 
+
মেন্টরশিপ এবং প্রকল্প ভিত্তিক শেখার সঙ্গে, প্রযুক্তি দক্ষতা দক্ষতা জন্য বিনামূল্যে এবং খোলা কোর্স
+
+ + + +
    +
  1. Getting started with the web
    2. +
  2. Learn the web +
      +
    1. Web Literacy Map
      2. +
    2. Web mechanics
      3. +
    3. Infrastructure
      4. +
    4. Coding & Scripting
      5. +
    5. Design & Accessibility
      6. +
    6. Writing & planning
      7. +
    +
    3. +
  3. Learn technologies +
      +
    1. HTML
      2. +
    2. CSS
      3. +
    3. JavaScript
      4. +
    4. Python
      5. +
    +
    4. +
  4. Learning tutorials +
      +
    1. How to build a web site?
      2. +
    2. Information security basics
      3. +
    +
    5. +
  5. Learning resources
    6. +
  6. Getting help +
      +
    1. FAQ
      2. +
    2. Glossary
      3. +
    3. Ask your questions
      4. +
    4. Meet teachers and mentors
      5. +
    +
    7. +
  7. How to contribute
    8. +
diff --git a/files/bn/learn/javascript/first_steps/index.html b/files/bn/learn/javascript/first_steps/index.html new file mode 100644 index 0000000000..ad6df0a101 --- /dev/null +++ b/files/bn/learn/javascript/first_steps/index.html @@ -0,0 +1,70 @@ +--- +title: জাভাস্ক্রিপ্ট প্রথম ধাপ +slug: Learn/JavaScript/First_steps +tags: + - Arrays + - Article + - Assessment + - Beginner + - CodingScripting + - Guide + - JavaScript + - Landing + - Module + - NeedsTranslation + - Numbers + - Operators + - TopicStub + - Variables + - 'l10n:priority' + - maths + - strings +translation_of: Learn/JavaScript/First_steps +--- +
{{LearnSidebar}}
+ +

আমাদের প্রথম জাভাস্ক্রিপ্ট মডিউলে আমরা কিছু ভৌত প্রশ্নের উত্তর দিব, যেমন "জাভাস্ক্রিপ্ট কি?" , "এটা  কেমন দেখতে?" , "এটা কি করতে পারে?" । আপনাকে আপনার প্রথম জাভাস্ক্রিপ্ট লেখার বাস্তব অভিজ্ঞতার মধ্য দিয়ে নিয়ে যাওয়ার আগে আমরা এগুলো শিখবো। তারপর আমরা কিছু  কি বিল্ডিং ব্লক নিয়ে বিশদে আলোচনা করবো, যেমন ভ্যারিয়েবল, স্ট্রিং, নাম্বার এবং array ।

+ +

পূর্বশর্ত 

+ +

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

+ + + +
+

বিঃদ্রঃ : আপনি যদি এমন একটি কম্পিউটার/ট্যাবলেট কিংবা অন্যান্য ডিভাইসে কাজ করেন যেখানে আপনার নিজের কোনো ফাইল তৈরী করা সম্ভব নয়, সেক্ষেত্রে আপনার তৈরী করা কোডগুলো নিয়ে গবেষণা করতে পারেন অনলাইন কোডিং প্রোগ্রামগুলোতে যেমন JSBin অথবা Thimble। 

+
+ +

গাইড

+ +
+
জাভাস্ক্রিপ্ট কি?
+
নবীন শিক্ষার্থীদের জন্য আয়োজিত MDN এর জাভাস্ক্রিপ্ট কোর্সে আপনাকে স্বাগতম। এই প্রথম আর্টিকেলে আমরা জাভাস্ক্রিপ্টকে উঁচু স্তর থেকে দেখবো। আমরা উত্তর দেব "এটা কি?" , এবং "এটা কি করছে?" এবং নিশ্চিত করবো যে আপনি জাভাস্ক্রিপ্ট এর উদ্দেশ্য নিয়ে সাচ্ছন্দবোধ করছেন। 
+
জাভাস্ক্রিপ্ট এর প্রথম ঝলক
+
এখন আপনি জাভাস্ক্রিপ্ট সম্পর্কে কিছু তত্ত্ব শিখেছেন এবং আপনি জানেন আপনি এটা দিয়ে কি করতে পারবেন। আমরা আপনাকে একটি সংক্ষিপ্ত কোর্সে সম্পূর্ণ প্রাকটিকাল টিউটোরিয়াল এর মাধ্যমে জাভাস্ক্রিপ্টের ভৌত বৈশিষ্টগুলো শেখাবো। এখানে ধাপে ধাপে আপনি "Guess the number" নামের একটি সাধারণ গেম তৈরী করবেন।  
+
কি সমস্যা হলো? জাভাস্ক্রিপ্ট মেরামত
+
পূর্বের আর্টিকেলে যখন আপনি "Guess the number" গেমটি তৈরী করেছিলেন তখন নিশ্চয়ই খেয়াল করেছিলেন যে এটা কাজ করছিলো না। ভয় পাওয়ার দরকার নেই - এই আর্টিকেল সেই উদ্দেশ্য নিয়ে লেখা হয়েছে কিছু সাধারণ টিপস সহকারে যাতে আপনি সহজে জাভাস্ক্রিপ্ট প্রোগ্রামের সমস্যা নির্ণয় করতে পারেন ও তার সমাধান করতে পারেন। 
+
আপনার দরকারি তথ্য Storing (সংরক্ষণ) করা — Variables (চলক)
+
পূর্বের গুটিকতক আর্টিকেল পড়ার পরে আপনার এখন জানা উচিত জাভাস্ক্রিপ্ট কি, এটা আপনার জন্য কি করতে পারে, অন্যান্য ওয়েব টেকনোলজির পাশাপাশি আপনি এটাকে কিভাবে ব্যবহার করতে পারেন, এবং এটার মূল বৈশিষ্ট উঁচু স্তর থেকে দেখতে কেমন লাগে। এই আর্টিকেলে আমরা একেবারে মৌলিক বিষয় দেখবো যেটা হলো জাভাস্ক্রিপ্টের প্রথম মৌলিক বিল্ডিং ব্লক - Variables (চলক)। 
+
জাভাস্ক্রিপ্ট এর মৌলিক গণিত — numbers and operators
+
এই মুহূর্তে আমরা আলোচনা করবো জাভাস্ক্রিপ্টের গণিত নিয়ে - আমরা কিভাবে অপারেটর একত্র করতে পারি কিভাবে নাম্বারকে আমাদের আদেশ পালন করার জন্য পরিচালনা করতে পারি। 
+
টেক্সট সামলানো — strings in JavaScript
+
পরবর্তীতে আমরা আমাদের মনোযোগ ঘোরাবো স্ট্রিং এর দিকে - টেক্সট এর টুকরাকে প্রোগ্রামিংয়ের ভাষায় এটাই বলা হয়ে থাকে। এই আর্টিকেলে আমরা সেই সবকিছু দেখবো যেটা জাভাস্ক্রিপ্ট শেখার সময় স্ট্রিং সম্পর্কে আপনার জানা থাকার দরকার, যেমন স্ট্রিং তৈরী, স্ট্রিং থেকে কোটেশন এর মুক্তি এবং তাদেরকে একত্র করা। 
+
সুবিধাজনক স্ট্রিং মেথড
+
এখন আমরা দেখলাম স্ট্রিং এর একেবারে মৌলিক বিষয়গুলো, এখন একটু গতি বাড়িয়ে চিন্তা করে দেখা যাক বিল্ট-ইন মেথড ব্যবহার করে স্ট্রিং এর উপর কি ধরণের লাভজনক অপারেশন করা যেতে পারে, যেমন একটি স্ট্রিং এর দৈর্ঘ্য পরিমাপ করা, স্ট্রিং একত্র ও পৃথক করা, স্ট্রিং এর একটি অক্ষর অন্যটির জন্য বাদ দেওয়া, এবং আরো অনেক কিছু।  
+
Arrays
+
এই মডিউলের সর্বশেষ আর্টিকেলে আমরা দেখবো Array - একটিমাত্র চলকের মধ্যে একটি ডাটার তালিকা সংরক্ষণ করার সহজ উপায়। এখানে আমরা দেখবো কেন এটি সুবিধাজনক, তারপর দেখবো কিভাবে একটি Array তৈরী করতে হয়, Array পুনরুদ্ধার, সংযোজন এবং Array এর তালিকা থেকে আইটেম বিয়োজন, এবং এর পাশাপাশি আরো অনেক কিছু। 
+
+ +

মূল্যায়ন

+ +

নিচের কাজটি থেকে মূল্যায়ন করা হবে আপনি উপরের জাভাস্ক্রিপ্ট কোর্সের গাইড অনুসরণ করে কি শিখেছেন। 

+ +
+
মজাদার গল্প উৎপাদক
+
এই মূল্যায়নে আপনাকে একটি কাজ দেওয়া হবে, মডিউলগুলো থেকে কিছু শিখে আপনাকে একটি মজাদার App বানাতে হবে যেটা মজাদার গল্প তৈরী করে। শুভেচ্ছা রইলো !
+
diff --git "a/files/bn/learn/javascript/first_steps/\340\246\234\340\246\276\340\246\255\340\246\276\340\246\270\340\247\215\340\246\225\340\247\215\340\246\260\340\246\277\340\246\252\340\247\215\340\246\237-\340\246\225\340\247\200/index.html" "b/files/bn/learn/javascript/first_steps/\340\246\234\340\246\276\340\246\255\340\246\276\340\246\270\340\247\215\340\246\225\340\247\215\340\246\260\340\246\277\340\246\252\340\247\215\340\246\237-\340\246\225\340\247\200/index.html" new file mode 100644 index 0000000000..f42a4814cc --- /dev/null +++ "b/files/bn/learn/javascript/first_steps/\340\246\234\340\246\276\340\246\255\340\246\276\340\246\270\340\247\215\340\246\225\340\247\215\340\246\260\340\246\277\340\246\252\340\247\215\340\246\237-\340\246\225\340\247\200/index.html" @@ -0,0 +1,421 @@ +--- +title: জাভাস্ক্রিপ্ট কী? +slug: Learn/JavaScript/First_steps/জাভাস্ক্রিপ্ট-কী +translation_of: Learn/JavaScript/First_steps/What_is_JavaScript +--- +
{{LearnSidebar}}
+ +
{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}
+ +

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

+ + + + + + + + + + + + +
আগে থেকে যা জানতে হবেকম্পিউটার 
উদ্দেশ্য:জাভাস্ক্রিপ্ট এর সাথে পরিচিতি,
+ +

জাভস্ক্রিপ্ট এর পূর্ণাঙ্গ সংজ্ঞা

+ +

জাভাস্ক্রিপ্ট মূলত একটি scripting ভাষা বা programming ভাষা। জাভাস্ক্রিপ্ট ব্যবহার করে ওয়েবসাইটে জটিল বৈশিষ্ট্য যুক্ত করা যায় যেমন নির্দিষ্ট সময় অনু্যায়ী কনটেন্ট পরিবর্তন করা, মানচিত্র যোগ করা ওয়েবসাইটে  2D/3D animation যুক্ত করা ইত্যাদি। নিচের ওয়েব প্রযুক্তি রূপক যে কেক আছে সেটার তৃতীয় স্তর হচ্ছে জাভাস্ক্রিপ্ট। 

+ +

+ + + +

তিনটা পর্যায় একটি আরেকটির উপর সুন্দরভাবে তৈরি। উদাহরণস্বরূপ নিচের টেক্সটটিকে দেখা যাক। HTML ব্যবহার করে আমরা লেখাটিকে মার্ক আপ করবঃ  

+ +
<p>Player 1: Chris</p>
+ +

+ +

তারপর লেখাটিকে সুন্দর করার জন্য আমরা কিছু CSS যোগ করবঃ

+ +
p {
+  font-family: 'helvetica neue', helvetica, sans-serif;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  text-align: center;
+  border: 2px solid rgba(0,0,200,0.6);
+  background: rgba(0,0,200,0.3);
+  color: rgba(0,0,200,0.6);
+  box-shadow: 1px 1px 2px rgba(0,0,200,0.4);
+  border-radius: 10px;
+  padding: 3px 10px;
+  display: inline-block;
+  cursor: pointer;
+}
+ +

+ +

এবং সবশেষে আমরা জাভাস্ক্রিপ্ট ব্যবহার করে কনটেন্ট যুক্ত করবঃ 

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+
+ +

{{ EmbedLiveSample('A_high-level_definition', '100%', 80, "", "", "hide-codepen-jsfiddle") }}

+ +

কী ঘটছে তা দেখার জন্য লেখাটির সর্বশেষ সংস্করনে ক্লিক করে দেখুন (উল্লেখ্য আপনি এই ডেমোটা GitHub এও পাবেন — সোর্স কোড দেখুন, অথবা  সরাসরি চালিয়ে দেখুন )!

+ +

জাভাস্ক্রিপ্ট আরো অনেক কিছু করতে পারে - বিস্তারিত জেনে নেওয়া যাক। 

+ +

জাভাস্ক্রিপ্ট প্রকৃতভাবে কী কী করতে পারে? 

+ +

মূল client-side জাভাস্ক্রিপ্ট সাধারণ কিছু প্রোগ্রামিং বৈশিষ্ট্য নিয়ে তৈরি যা দিয়ে আপনি নিচের 

+ + + +

What is even more exciting however is the functionality built on top of the client-side JavaScript language. So-called Application Programming Interfaces (APIs) provide you with extra superpowers to use in your JavaScript code.

+ +

APIs are ready-made sets of code building blocks that allow a developer to implement programs that would otherwise be hard or impossible to implement. They do the same thing for programming that ready-made furniture kits do for home building — it is much easier to take ready-cut panels and screw them together to make a bookshelf than it is to work out the design yourself, go and find the correct wood, cut all the panels to the right size and shape, find the correct-sized screws, and then put them together to make a bookshelf.

+ +

They generally fall into two categories.

+ +

+ +

Browser APIs are built into your web browser, and are able to expose data from the surrounding computer environment, or do useful complex things. For example:

+ + + +
+

Note: Many of the above demos won't work in an older browser — when experimenting, it's a good idea to use a modern browser like Firefox, Chrome, Edge or Opera to run your code in. You will need to consider cross browser testing in more detail when you get closer to delivering production code (i.e. real code that real customers will use).

+
+ +

Third party APIs are not built into the browser by default, and you generally have to grab their code and information from somewhere on the Web. For example:

+ + + +
+

Note: These APIs are advanced, and we'll not be covering any of these in this module. You can find out much more about these in our Client-side web APIs module.

+
+ +

There's a lot more available, too! However, don't get over excited just yet. You won't be able to build the next Facebook, Google Maps, or Instagram after studying JavaScript for 24 hours — there are a lot of basics to cover first. And that's why you're here — let's move on!

+ +

What is JavaScript doing on your page?

+ +

Here we'll actually start looking at some code, and while doing so, explore what actually happens when you run some JavaScript in your page.

+ +

Let's briefly recap the story of what happens when you load a web page in a browser (first talked about in our How CSS works article). When you load a web page in your browser, you are running your code (the HTML, CSS, and JavaScript) inside an execution environment (the browser tab). This is like a factory that takes in raw materials (the code) and outputs a product (the web page).

+ +

+ +

A very common use of JavaScript is to dynamically modify HTML and CSS to update a user interface, via the Document Object Model API (as mentioned above). Note that the code in your web documents is generally loaded and executed in the order it appears on the page. If the JavaScript loads and tries to run before the HTML and CSS it is affecting has been loaded, errors can occur. You will learn ways around this later in the article, in the Script loading strategies section.

+ +

Browser security

+ +

Each browser tab has its own separate bucket for running code in (these buckets are called "execution environments" in technical terms) — this means that in most cases the code in each tab is run completely separately, and the code in one tab cannot directly affect the code in another tab — or on another website. This is a good security measure — if this were not the case, then pirates could start writing code to steal information from other websites, and other such bad things.

+ +
+

Note: There are ways to send code and data between different websites/tabs in a safe manner, but these are advanced techniques that we won't cover in this course.

+
+ +

JavaScript running order

+ +

When the browser encounters a block of JavaScript, it generally runs it in order, from top to bottom. This means that you need to be careful what order you put things in. For example, let's return to the block of JavaScript we saw in our first example:

+ +
const para = document.querySelector('p');
+
+para.addEventListener('click', updateName);
+
+function updateName() {
+  let name = prompt('Enter a new name');
+  para.textContent = 'Player 1: ' + name;
+}
+ +

Here we are selecting a text paragraph (line 1), then attaching an event listener to it (line 3) so that when the paragraph is clicked, the updateName() code block (lines 5–8) is run. The updateName() code block (these types of reusable code blocks are called "functions") asks the user for a new name, and then inserts that name into the paragraph to update the display.

+ +

If you swapped the order of the first two lines of code, it would no longer work — instead, you'd get an error returned in the browser developer console — TypeError: para is undefined. This means that the para object does not exist yet, so we can't add an event listener to it.

+ +
+

Note: This is a very common error — you need to be careful that the objects referenced in your code exist before you try to do stuff to them.

+
+ +

Interpreted versus compiled code

+ +

You might hear the terms interpreted and compiled in the context of programming. In interpreted languages, the code is run from top to bottom and the result of running the code is immediately returned. You don't have to transform the code into a different form before the browser runs it. The code is received in its programmer-friendly text form and processed directly from that.

+ +

Compiled languages on the other hand are transformed (compiled) into another form before they are run by the computer. For example, C/C++ are compiled into machine code that is then run by the computer. The program is executed from a binary format, which was generated from the original program source code.

+ +

JavaScript is a lightweight interpreted programming language. The web browser receives the JavaScript code in its original text form and runs the script from that. From a technical standpoint, most modern JavaScript interpreters actually use a technique called just-in-time compiling to improve performance; the JavaScript source code gets compiled into a faster, binary format while the script is being used, so that it can be run as quickly as possible. However, JavaScript is still considered an interpreted language, since the compilation is handled at run time, rather than ahead of time.

+ +

There are advantages to both types of language, but we won't discuss them right now.

+ +

Server-side versus client-side code

+ +

You might also hear the terms server-side and client-side code, especially in the context of web development. Client-side code is code that is run on the user's computer — when a web page is viewed, the page's client-side code is downloaded, then run and displayed by the browser. In this module we are explicitly talking about client-side JavaScript.

+ +

Server-side code on the other hand is run on the server, then its results are downloaded and displayed in the browser. Examples of popular server-side web languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can also be used as a server-side language, for example in the popular Node.js environment — you can find out more about server-side JavaScript in our Dynamic Websites – Server-side programming topic.

+ +

Dynamic versus static code

+ +

The word dynamic is used to describe both client-side JavaScript, and server-side languages — it refers to the ability to update the display of a web page/app to show different things in different circumstances, generating new content as required. Server-side code dynamically generates new content on the server, e.g. pulling data from a database, whereas client-side JavaScript dynamically generates new content inside the browser on the client, e.g. creating a new HTML table, filling it with data requested from the server, then displaying the table in a web page shown to the user. The meaning is slightly different in the two contexts, but related, and both approaches (server-side and client-side) usually work together.

+ +

A web page with no dynamically updating content is referred to as static — it just shows the same content all the time.

+ +

How do you add JavaScript to your page?

+ +

JavaScript is applied to your HTML page in a similar manner to CSS. Whereas CSS uses {{htmlelement("link")}} elements to apply external stylesheets and {{htmlelement("style")}} elements to apply internal stylesheets to HTML, JavaScript only needs one friend in the world of HTML — the {{htmlelement("script")}} element. Let's learn how this works.

+ +

Internal JavaScript

+ +
    +
  1. First of all, make a local copy of our example file apply-javascript.html. Save it in a directory somewhere sensible.
    2. +
  2. Open the file in your web browser and in your text editor. You'll see that the HTML creates a simple web page containing a clickable button.
    3. +
  3. Next, go to your text editor and add the following in your head — just before your closing </head> tag: + 
    <script>
+
+  // JavaScript goes here
+
+</script>
    +
    4. +
  4. Now we'll add some JavaScript inside our {{htmlelement("script")}} element to make the page do something more interesting — add the following code just below the "// JavaScript goes here" line: + 
    document.addEventListener("DOMContentLoaded", function() {
+  function createParagraph() {
+    let para = document.createElement('p');
+    para.textContent = 'You clicked the button!';
+    document.body.appendChild(para);
+  }
+
+  const buttons = document.querySelectorAll('button');
+
+  for(let i = 0; i < buttons.length ; i++) {
+    buttons[i].addEventListener('click', createParagraph);
+  }
+});
    +
    5. +
  5. Save your file and refresh the browser — now you should see that when you click the button, a new paragraph is generated and placed below.
    6. +
+ +
+

Note: If your example doesn't seem to work, go through the steps again and check that you did everything right. Did you save your local copy of the starting code as a .html file? Did you add your {{htmlelement("script")}} element just before the </head> tag? Did you enter the JavaScript exactly as shown? JavaScript is case sensitive, and very fussy, so you need to enter the syntax exactly as shown, otherwise it may not work.

+
+ +
+

Note: You can see this version on GitHub as apply-javascript-internal.html (see it live too).

+
+ +

External JavaScript

+ +

This works great, but what if we wanted to put our JavaScript in an external file? Let's explore this now.

+ +
    +
  1. First, create a new file in the same directory as your sample HTML file. Call it script.js — make sure it has that .js filename extension, as that's how it is recognized as JavaScript.
    2. +
  2. Replace your current {{htmlelement("script")}} element with the following: + 
    <script src="script.js" defer></script>
    +
    3. +
  3. Inside script.js, add the following script: + 
    function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
    +
    4. +
  4. Save and refresh your browser, and you should see the same thing! It works just the same, but now we've got our JavaScript in an external file. This is generally a good thing in terms of organizing your code and making it reusable across multiple HTML files. Plus, the HTML is easier to read without huge chunks of script dumped in it.
    5. +
+ +
+

Note: You can see this version on GitHub as apply-javascript-external.html and script.js (see it live too).

+
+ +

Inline JavaScript handlers

+ +

Note that sometimes you'll come across bits of actual JavaScript code living inside HTML. It might look something like this:

+ +
+
function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+ +
<button onclick="createParagraph()">Click me!</button>
+
+ +

You can try this version of our demo below.

+ +

{{ EmbedLiveSample('inline_js_example', '100%', 150, "", "", "hide-codepen-jsfiddle") }}

+ +

This demo has exactly the same functionality as in the previous two sections, except that the {{htmlelement("button")}} element includes an inline onclick handler to make the function run when the button is pressed.

+ +

Please don't do this, however. It is bad practice to pollute your HTML with JavaScript, and it is inefficient — you'd have to include the onclick="createParagraph()" attribute on every button you want the JavaScript to apply to.

+ +

Using a pure JavaScript construct allows you to select all the buttons using one instruction. The code we used above to serve this purpose looks like this:

+ +
const buttons = document.querySelectorAll('button');
+
+for(let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +

This might be a bit longer than the onclick attribute, but it will work for all buttons — no matter how many are on the page, nor how many are added or removed. The JavaScript does not need to be changed.

+ +
+

Note: Try editing your version of apply-javascript.html and add a few more buttons into the file. When you reload, you should find that all of the buttons when clicked will create a paragraph. Neat, huh?

+
+ +

Script loading strategies

+ +

There are a number of issues involved with getting scripts to load at the right time. Nothing is as simple as it seems! A common problem is that all the HTML on a page is loaded in the order in which it appears. If you are using JavaScript to manipulate elements on the page (or more accurately, the Document Object Model), your code won't work if the JavaScript is loaded and parsed before the HTML you are trying to do something to.

+ +

In the above code examples, in the internal and external examples the JavaScript is loaded and run in the head of the document, before the HTML body is parsed. This could cause an error, so we've used some constructs to get around it.

+ +

In the internal example, you can see this structure around the code:

+ +
document.addEventListener("DOMContentLoaded", function() {
+  ...
+});
+ +

This is an event listener, which listens for the browser's "DOMContentLoaded" event, which signifies that the HTML body is completely loaded and parsed. The JavaScript inside this block will not run until after that event is fired, therefore the error is avoided (you'll learn about events later in the course).

+ +

In the external example, we use a more modern JavaScript feature to solve the problem, the defer attribute, which tells the browser to continue downloading the HTML content once the <script> tag element has been reached.

+ +
<script src="script.js" defer></script>
+ +

In this case both the script and the HTML will load simultaneously and the code will work.

+ +
+

Note: In the external case, we did not need to use the DOMContentLoaded event because the defer attribute solved the problem for us. We didn't use the defer solution for the internal JavaScript example because defer only works for external scripts.

+
+ +

An old-fashioned solution to this problem used to be to put your script element right at the bottom of the body (e.g. just before the </body> tag), so that it would load after all the HTML has been parsed. The problem with this solution is that loading/parsing of the script is completely blocked until the HTML DOM has been loaded. On larger sites with lots of JavaScript, this can cause a major performance issue, slowing down your site.

+ +

async and defer

+ +

There are actually two modern features we can use to bypass the problem of the blocking script — async and defer (which we saw above). Let's look at the difference between these two.

+ +

Scripts loaded using the async attribute (see below) will download the script without blocking rendering the page and will execute it as soon as the script finishes downloading. You get no guarantee that scripts will run in any specific order, only that they will not stop the rest of the page from displaying. It is best to use async when the scripts in the page run independently from each other and depend on no other script on the page.

+ +

For example, if you have the following script elements:

+ +
<script async src="js/vendor/jquery.js"></script>
+
+<script async src="js/script2.js"></script>
+
+<script async src="js/script3.js"></script>
+ +

You can't rely on the order the scripts will load in. jquery.js may load before or after script2.js and script3.js and if this is the case, any functions in those scripts depending on jquery will produce an error because jquery will not be defined at the time the script runs.

+ +

async should be used when you have a bunch of background scripts to load in, and you just want to get them in place asap. For example, maybe you have some game data files to load, which will be needed when the game actually begins, but for now you just want to get on with showing the game intro, titles, and lobby, without them being blocked by script loading.

+ +

Scripts loaded using the defer attribute (see below) will run in the order they appear in the page and execute them as soon as the script and content are downloaded:

+ +
<script defer src="js/vendor/jquery.js"></script>
+
+<script defer src="js/script2.js"></script>
+
+<script defer src="js/script3.js"></script>
+ +

All the scripts with the defer attribute will load in the order they appear on the page. So in the second example, we can be sure that jquery.js will load before script2.js and script3.js and that script2.js will load before script3.js. They won't run until the page content has all loaded, which is useful if your scripts depend on the DOM being in place (e.g. they modify one of more elements on the page).

+ +

To summarize:

+ + + +

Comments

+ +

As with HTML and CSS, it is possible to write comments into your JavaScript code that will be ignored by the browser, and exist simply to provide instructions to your fellow developers on how the code works (and you, if you come back to your code after six months and can't remember what you did). Comments are very useful, and you should use them often, particularly for larger applications. There are two types:

+ + + +

So for example, we could annotate our last demo's JavaScript with comments like so:

+ +
// Function: creates a new paragraph and appends it to the bottom of the HTML body.
+
+function createParagraph() {
+  let para = document.createElement('p');
+  para.textContent = 'You clicked the button!';
+  document.body.appendChild(para);
+}
+
+/*
+  1. Get references to all the buttons on the page in an array format.
+  2. Loop through all the buttons and add a click event listener to each one.
+
+  When any button is pressed, the createParagraph() function will be run.
+*/
+
+const buttons = document.querySelectorAll('button');
+
+for (let i = 0; i < buttons.length ; i++) {
+  buttons[i].addEventListener('click', createParagraph);
+}
+ +
+

Note: In general more comments are usually better than less, but you should be careful if you find yourself adding lots of comments to explain what variables are (your variable names perhaps should be more intuitive), or to explain very simple operations (maybe your code is overcomplicated).

+
+ +

Summary

+ +

So there you go, your first step into the world of JavaScript. We've begun with just theory, to start getting you used to why you'd use JavaScript and what kind of things you can do with it. Along the way, you saw a few code examples and learned how JavaScript fits in with the rest of the code on your website, amongst other things.

+ +

JavaScript may seem a bit daunting right now, but don't worry — in this course, we will take you through it in simple steps that will make sense going forward. In the next article, we will plunge straight into the practical, getting you to jump straight in and build your own JavaScript examples.

+ + + +

{{NextMenu("Learn/JavaScript/First_steps/A_first_splash", "Learn/JavaScript/First_steps")}}

+ +

In this module

+ + diff --git a/files/bn/learn/javascript/index.html b/files/bn/learn/javascript/index.html new file mode 100644 index 0000000000..c74e72a302 --- /dev/null +++ b/files/bn/learn/javascript/index.html @@ -0,0 +1,55 @@ +--- +title: JavaScript +slug: Learn/JavaScript +translation_of: Learn/JavaScript +--- +
{{LearnSidebar}}
+ +

{{Glossary("JavaScript")}}  হচ্ছে একটি প্রোগ্রামিং ভাষা যা আপনাকে ওয়েব পৃষ্ঠাগুলিতে জটিল জিনিসগুলি বাস্তবায়ন করতে দেয়। প্রতিবার একটি ওয়েব পৃষ্ঠা কেবল সেখানে একিরকম থাকে এবং আপনার জন্য স্ট্যাটিক তথ্য প্রদর্শন করে - সময়মত লেখার  আপডেটগুলি, বা মিথষ্ক্রিয় মানচিত্র, বা অ্যানিমেটেড 2 ডি / 3 ডি গ্রাফিক্স বা স্ক্রোলিং ভিডিও জুকবক্সগুলি ইত্যাদি প্রদর্শন করে - এবং  সম্ভবত আপনি জড়িত জাভাস্ক্রিপ্ট বিট করতে পারেন।

+ +

Learning pathway

+ +

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

+ + + +

Having previous experience with other programming languages might also help.

+ +

After getting familiar with the basics of JavaScript, you should be in a position to learn about more advanced topics, for example:

+ + + +

Modules

+ +

This topic contains the following modules, in a suggested order for working through them.

+ +
+
JavaScript first steps
+
In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.
+
JavaScript building blocks
+
In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code block such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.
+
Introducing JavaScript objects
+
In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.
+
Client-side web APIs
+
When writing client-side JavaScript for web sites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other web sites or services. In this module we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work. 
+
+ +

Solving common JavaScript problems

+ +

Use JavaScript to solve common problems provides links to sections of content explaining how to use JavaScript to solve very common problems when creating a webpage.

+ +

See also

+ +
+
JavaScript on MDN
+
The main entry point for core JavaScript documentation on MDN — this is where you'll find extensive reference docs on all aspects of the JavaScript language, and some advanced tutorials aimed at experienced JavaScripters.
+
Coding math
+
An excellent series of video tutorials to teach the math you need to understand to be an effective programmer, by Keith Peters.
+
diff --git a/files/bn/learn/server-side/django/index.html b/files/bn/learn/server-side/django/index.html new file mode 100644 index 0000000000..8452a4f9d7 --- /dev/null +++ b/files/bn/learn/server-side/django/index.html @@ -0,0 +1,64 @@ +--- +title: Django Web Framework (Python) +slug: Learn/Server-side/Django +tags: + - Beginner CodingScripting django Intro Learn Python Server-side programming +translation_of: Learn/Server-side/Django +--- +
{{LearnSidebar}}
+ +
জ্যাঙ্গ সম্পুর্ন বৈশিষ্ট্যযুক্ত জনপ্রিয় server-side web framework যা Python এ লিখিত। এই মডিউল আপনাকে দেখাবে জ্যাঙ্গ কেন সবচেয়ে জনপ্রিয় web server frameworks, কিভাবে এনভাইরনমেন্ট সেটআপ করতে হবে এবং দেখাবে কিভাবে আপনি আপনার নিজস্ব ওয়েব আপ্লিকেশন তৈরি করবেন।
+ +

পূর্বশর্ত 

+ +

এই মডিউল শুরু করার পুর্বে আপনার জ্যাঙ্গ সম্পর্কে কোন জ্ঞানের প্রয়োজন নেই। মুলত যেটা জানতেই হবে তা হচ্ছে, server-side web programming কি, web programming এবং web frameworks সম্পর্কে বিস্তারিত জানেতে আমাদের এই অংশটি দেখুন যেইখানে মুলত প্রথম থেকে শুরু হয়েছে, Server-side website programming first steps.

+ +

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

+ +
+

মনেরাখুন: পাইথন সবচেয়ে সহজ প্রোগ্রামিং ল্যাঙ্গুয়েজ যা কিনা যেকোনো অনভিজ্ঞ লোকের পক্ষেই পড়া এবং বোঝা সহজ।  বলে রাখি, আপনি যদি এই মডিউলটি আরও ভালভাবে বুঝতে চান তবে আপনাকে সাহায্য করার জন্য ইন্টারনেটে প্রচুর বিনামূল্যে বই এবং টিউটোরিয়াল উপলব্ধ রয়েছে (নতুন প্রোগ্রামাররা python.org উইকিতে Python for Non Programmers পৃষ্ঠাগুলি চাইলে দেখতে পারেন)।

+
+ +

নির্দেশনাঃ 

+ +
+
Django introduction
+
এই আর্টিকেলটির প্রথমেই আমরা এই প্রশ্নের জবাব দিবো যে, "জ্যাঙ্গ কি?" এবং কি কারনে এই ওয়েব ফ্রেমওয়ার্কটি বিশেষ করে তোলে তার একটি সংক্ষিপ্ত বিবরণ আপনাকে দিবো। আমরা মুলত প্রধান বৈশিষ্ট্যগুলির বর্ননা করব এবং কিছু উন্নত কার্যকারিতা সহ যেহেতু আমাদের হাতে পর্যাপ্ত সময় নেই সবকিছু বিশদ ভাবে ব্যাখ্যা করার। এটি সেট আপ করার আগে এবং জ্যাঙ্গ নিয়ে মাঠে নামার আগে এটি কী করতে পারে তার একটি ধারণা দেওয়ার জন্য আমরা আপনাকে জ্যাঙ্গো অ্যাপ্লিকেশনের কয়েকটি মূল বিল্ডিং ব্লক প্রদর্শন করব।
+
Setting up a Django development environment
+
+

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

+
+
Django Tutorial: The Local Library website
+
প্রথম আর্টিকেল এ আপনি আমাদের প্রাক্টিকাল টিউটোরিয়াল সিরিজ আপনাকে দেখাবে আপনি কি শিক্ষা গ্রহন করতে যাচ্ছেন এবং মুলত আপনি লকাল লাইব্রেরি সম্পর্কেই সাধারন নির্দেশনা পাবেন -- উদাহরণ সরূপ, আমরা একটি ওয়েবসাইট নিয়ে কাজ করব এবং তাকে বিকশিত করব।
+
Django Tutorial Part 2: Creating a skeleton website
+
এই অধ্যায়ে আপনি একটি ওয়েবসাইট প্রোজেক্ট এর স্কেলেটন তৈরি করা দেখানো হবে যেখানে আপনি site-specific settings, urls, models, views, and templates সম্পর্কে জানতে পারবেন।
+
Django Tutorial Part 3: Using models
+
এই নিবন্ধটি দেখায় যে কীভাবে LocalLibrary ওয়েবসাইটের মডেলগুলি সংজ্ঞায়িত করতে হয় - মডেলগুলি আমাদের অ্যাপ্লিকেশনটির ডেটা সংরক্ষণ করতে চাই এমন ডেটা স্ট্রাকচারকে উপস্থাপন করে এবং জ্যাঙ্গোকে আমাদের জন্য একটি ডাটাবেসে ডেটা সংরক্ষণ করার অনুমতি দেয় (এবং পরে এটি সংশোধন করে)। একটি মডেল কী তা ব্যাখ্যা করা হয়েছে, এটা কিভাবে ডিক্লিয়ার করা হয়েছে এবং কিছু মেইন ফিল্ড টাইপ্স। কিভাবে আপনি মডেল ডেটা অ্যাক্সেস করতে পারবেন এমন কয়েকটি প্রধান উপায় সংক্ষেপে দেখানো হয়েছে।
+
Django Tutorial Part 4: Django admin site
+
এখন আমরা LocalLibrary ওয়েবসাইটের জন্য মডেল তৈরি করেছি, আমরা কিছু "real" বইয়ের ডেটা যুক্ত করতে জাঙ্গো অ্যাডমিন সাইটটি ব্যবহার করব। প্রথমে আমরা আপনাকে অ্যাডমিন সাইটের সাথে কীভাবে মডেলগুলি নিবন্ধভুক্ত করব তা দেখাব, তারপরে আমরা আপনাকে লগইন করতে এবং কিছু ডেটা তৈরি করার উপায় দেখাব। শেষে আমরা কয়েকটি উপায় প্রদর্শন করি যার মাধ্যমে আপনি Admin সাইটের উপস্থাপনাটি আরও উন্নত করতে পারেন।
+
Django Tutorial Part 5: Creating our home page
+
আমরা এখন আমাদের প্রথম পূর্ণ পৃষ্ঠাটি প্রদর্শন করার জন্য code যুক্ত করতে প্রস্তুত - LocalLibrary একটি হোম পৃষ্ঠা যা প্রতিটি মডেলের ধরণের আমাদের কাছে কত রেকর্ড রয়েছে তা দেখায় এবং আমাদের অন্যান্য পৃষ্ঠাগুলিতে সাইডবারের নেভিগেশন লিঙ্ক সরবরাহ করে। যেভাবে আমরা basic URL maps এবং ভিউ লিখতে, ডাটাবেস থেকে রেকর্ড পেতে এবং টেমপ্লেট ব্যবহার করে ব্যবহারিক অভিজ্ঞতা অর্জন করব।
+
Django Tutorial Part 6: Generic list and detail views
+
এই টিউটোরিয়ালটি বই এবং লেখকদের তালিকা এবং বিশদ পৃষ্ঠা যুক্ত করে আমাদের LocalLibrary  ওয়েবসাইটকে প্রসারিত করে। এখানে আমরা জেনেরিক class-based views সম্পর্কে শিখব, এবং তারা ব্যবহারের সাধারণ ক্ষেত্রে আপনার কোড লিখতে হবে এমন কোডের পরিমাণ কীভাবে হ্রাস করতে পারে তা দেখাব। আমরা বেসিক প্যাটার্নের matching পারফর্ম করব এবং তা দেখিয়ে আরও বিশদ বিবরণে url হ্যান্ডলিংয়ে যাব। 
+
Django Tutorial Part 7: Sessions framework
+
এই টিউটোরিয়ালটি home page এ একটি সেশন-ভিত্তিক ভিজিট-কাউন্টার যুক্ত করে, আমাদের LocalLibrary  ওয়েবসাইটকে প্রসারিত করে। এটি তুলনামূলকভাবে সহজ উদাহরণ, তবে এটি দেখায় যে আপনি কীভাবে আপনার নিজের সাইটগুলিতে বেনাম ব্যবহারকারীদের জন্য অবাধ চলাচল নিশ্চিত করার জন্য সেশন ফ্রেমওয়ার্কটি ব্যবহার করতে পারেন।.
+
Django Tutorial Part 8: User authentication and permissions
+
এই টিউটোরিয়ালে আমরা আপনাকে কীভাবে ব্যবহারকারীদের নিজের অ্যাকাউন্টে আপনার সাইটে লগইন করতে দেওয়া হবে এবং কীভাবে তারা কী করতে পারে তা নিয়ন্ত্রণ করতে হবে এবং লগ ইন করা হয়েছে কি না এবং তাদের অনুমতিগুলির ভিত্তিতে তা কীভাবে দেখানো হবে তা আমরা আপনাকে দেখাব। এই ব্যাখ্যার অংশ হিসাবে, আমরা LocalLibrary ওয়েবসাইট প্রসারিত করব, লগইন এবং লগ-আউট pages এবং বই যে ধার করা হয়েছে দেখার জন্য user- ও staff-specific pages নির্দিষ্ট পৃষ্ঠাগুলি যোগ করব।
+
Django Tutorial Part 9: Working with forms
+
এই টিউটোরিয়ালে আমরা আপনাকে জ্যাঙ্গ তে  HTML Forms এর সাথে কীভাবে কাজ করব এবং বিশেষত মডেল উদাহরণগুলি তৈরি করতে, আপডেট করতে এবং মুছতে ফর্মগুলি লেখার সহজ উপায়টি দেখাব। এই ব্যাখ্যার অংশ হিসাবে, আমরা LocalLibrary ওয়েবসাইট প্রসারিত করব, যাতে গ্রন্থাগারিকরা আমাদের নিজস্ব ফর্মগুলি (অ্যাডমিন অ্যাপ্লিকেশন ব্যবহার না করে) ব্যবহার করে লেখকদের বই পুনর্নবীকরণ(renew) করতে এবং তৈরি করতে, আপডেট করতে এবং মুছতে পারেন।
+
Django Tutorial Part 10: Testing a Django web application
+
ওয়েবসাইটগুলি বড় হওয়ার সাথে সাথে এগুলি ম্যানুয়ালি পরীক্ষা করা আরও শক্ত হয়ে ওঠে- পরীক্ষার জন্য মনেহতে পারে আরও অনেক কিছুই নেই, তবে components এর মধ্যে interaction আরও জটিল হয়ে উঠার সাথে সাথে, একটি ছোট্ট পরিবর্তন, পরিবর্তনের সাথে অন্যান্য area এর প্রভাবটি যাচাই করতে আরও অনেক অতিরিক্ত পরীক্ষার প্রয়োজন হতে পারে। এই সমস্যাগুলি সহজ করার একটি উপায় হ'ল স্বয়ংক্রিয় পরীক্ষাগুলি লিখুন যা আপনি প্রতিবার পরিবর্তন করার সময় সহজেই এবং নির্ভরযোগ্যতার সাথে চালানো যেতে পারে। এই টিউটোরিয়ালটি দেখায় যে কীভাবে জাঙ্গোর পরীক্ষার কাঠামোটি ব্যবহার করে আপনার ওয়েবসাইটের unit testing স্বয়ংক্রিয় করবেন।
+
Django Tutorial Part 11: Deploying Django to production
+
এখন আপনি একটি দুর্দান্ত লোকাল লাইব্রেরি ওয়েবসাইট তৈরি করেছেন (এবং পরীক্ষা করেছেন), আপনি এটিকে একটি পাবলিক ওয়েব সার্ভারে ইনস্টল করতে চাইছেন যাতে এটিতে লাইব্রেরি স্টাফ এবং সদস্যরা ইন্টারনেটে অ্যাক্সেস করতে পারে। এই আর্টিকেলটিতে আলোচনা করা হয়েছে, আপনাকে আপনার ওয়েবসাইট স্থাপন করতে কীভাবে একটি হোস্ট সন্ধান করতে হবে এবং আপনার সাইটকে প্রডাকশনের জন্য প্রস্তুত করার জন্য আপনাকে কী করতে হবে।
+
Django web application security
+
ব্যবহারকারীর ডেটা রক্ষা করা যে কোনও ওয়েবসাইট ডিজাইনের একটি অপরিহার্য অংশ। আমরা এর আগে Web security প্রবন্ধে আরও কয়েকটি সাধারণ সুরক্ষা হুমকির ব্যাখ্যা দিয়েছিলাম - এই নিবন্ধটিতে জ্যাঙ্গোর বিল্ট-ইন সুরক্ষাগুলি কীভাবে এই জাতীয় হুমকিগুলি পরিচালনা করে তার একটি ব্যাবহারিক প্রয়োগ প্রদর্শন করা হয়েছে।
+
+ +

Assessments

+ +

এই মূল্যায়নটি জ্যাঙ্গো ব্যবহার করে কীভাবে একটি ওয়েবসাইট তৈরি করবেন সে সম্পর্কে আপনার বোধগম্যতার পরীক্ষা করবে, যা উপরের তালিকাভুক্ত গাইডগুলিতে বর্ণিত ছিলো।

+ +
+
DIY Django mini blog
+
এই মূল্যায়নটিতে আপনি আপনার নিজের ব্লগ তৈরি করতে এই মডিউলটি থেকে শিখেছেন এমন কিছু জ্ঞান ব্যবহার করবেন।
+
diff --git a/files/bn/learn/server-side/first_steps/index.html b/files/bn/learn/server-side/first_steps/index.html new file mode 100644 index 0000000000..1b2c9597a9 --- /dev/null +++ b/files/bn/learn/server-side/first_steps/index.html @@ -0,0 +1,53 @@ +--- +title: Server-side website programming first steps +slug: Learn/Server-side/First_steps +tags: + - Beginner + - CodingScripting + - Guide + - Intro + - Landing + - Learn + - NeedsTranslation + - Server-side programming + - TopicStub +translation_of: Learn/Server-side/First_steps +--- +
{{LearnSidebar}}
+ +

In this module we answer a few fundamental questions about server-side programming — "What is it?", "How does it differ from client-side programming?", and "Why is it so useful?". We then provide an overview of some of the most popular server-side web frameworks, along with guidance on how to select the most suitable framework for creating your first site. Finally, we provide a high-level introductory article about web server security.

+ +

Prerequisites

+ +

Before starting this module, you don't need to have any knowledge of server-side website programming, or indeed any other type of programming. 

+ +

However, you do need to understand how the web works. We recommend that you first read the following topics:

+ + + +

With that basic understanding, you'll be ready to work your way through the modules in this section. 

+ +

Guides

+ +
+
Introduction to the server side
+
Welcome to the MDN beginner's server-side programming course! In this first article, we look at server-side programming from a high level, answering questions such as "What is it?", "How does it differ from client-side programming?", and "Why it is so useful?". After reading this article, you'll understand the additional power available to websites through server-side coding.
+
Client-Server overview
+
Now that you know the purpose and potential benefits of server-side programming, we're going to examine in detail what happens when a server receives a "dynamic request" from a browser. As most websites' server-side code handles requests and responses in a similar way, this will help you understand what you need to do when writing your own code.
+
Server-side web frameworks
+
The last article showed you what a server-side web application needs to do in order to respond to requests from a web browser. Now we show how web frameworks can simplify these tasks, and help you choose the right framework for your first server-side web application.
+
Website security
+
Website security requires vigilance in all aspects of website design and usage. This introductory article won't make you a website security guru, but it will help you understand the first important steps you can take to protect your web application against the most common threats.
+
+ +
+

Note: This topic deals with server-side frameworks, and how to use them to create websites. If you are looking for information on client-side JavaScript frameworks, consult our Understanding client-side JavaScript frameworks module.

+
+ +

Assessments

+ +

This "first steps" module doesn't have any assessment because we haven't yet shown you any code. We do hope that at this point you have a good understanding of what sorts of functionality you can deliver using server-side programming, and that you have made a decision about what server-side web framework you will use to create your first website.

diff --git a/files/bn/learn/server-side/first_steps/website_security/index.html b/files/bn/learn/server-side/first_steps/website_security/index.html new file mode 100644 index 0000000000..dcc862f5fc --- /dev/null +++ b/files/bn/learn/server-side/first_steps/website_security/index.html @@ -0,0 +1,180 @@ +--- +title: নিরাপদ ওয়েবসাইট +slug: Learn/Server-side/First_steps/Website_security +translation_of: Learn/Server-side/First_steps/Website_security +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}
+ +

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

+ + + + + + + + + + + + +
+

যা জানা থাকা আবশ্যক

+ 		+

কম্পিউটারের সম্পর্কে মৌলিক জ্ঞান

+
+

উদ্দেশ্য:

+ 		ওয়েব এপ্লিকেশনের নিরাপত্তা সংক্রান্ত সবচেয়ে সাধারণ ঝুঁকিগুলোকে সম্পর্কে জানা এবং ওয়েবসাইট হ্যাক হওয়ার ঝুঁকি কমানোর জন্য কী কী করা যায় সে সম্পর্কে ধারণা লাভ
+ +

ওয়েবসাইটের নিরাপত্তা কী?

+ +

ইন্টারনেট একটি ঝুঁকিপূর্ণ স্থান। আমরা হরহামেশাই ওয়েবসাইটকে খুঁজে না পাওয়া অথবা হ্যাক হয়েছে এরকম তথ্য প্রকাশ করা কথা শুনতে পাই।

+ +

The purpose of website security is to prevent these (or any) sorts of attacks. The more formal definition of website security is the act/practice of protecting websites from unauthorized access, use, modification, destruction, or disruption.

+ +

Effective website security requires design effort across the whole of the website: in your web application, the configuration of the web server, your policies for creating and renewing passwords, and the client-side code. While all that sounds very ominous, the good news is that if you're using a server-side web framework, it will almost certainly enable "by default" robust and well-thought-out defense mechanisms against a number of the more common attacks. Other attacks can be mitigated through your web server configuration, for example by enabling HTTPS. Finally, there are publically available vulnerability scanner tools that can help you find out if you've made any obvious mistakes.

+ +

The rest of this article gives you more details about a few common threats and some of the simple steps you can take to protect your site.

+ +
+

Note: This is an introductory topic, designed to help you start thinking about website security, but it is not exhaustive.

+
+ +

Website security threats

+ +

This section lists just a few of the most common website threats and how they are mitigated. As you read, note how threats are most successful when the web application either trusts, or is not paranoid enough about the data coming from the browser.

+ +

Cross-Site Scripting (XSS)

+ +

XSS is a term used to describe a class of attacks that allow an attacker to inject client-side scripts through the website into the browsers of other users. Because the injected code comes to the browser from the site, the code is trusted and can do things like send the user's site authorization cookie to the attacker. When the attacker has the cookie, they can log into a site as though they were the user and do anything the user can, such as access their credit card details, see contact details, or change passwords.

+ +
+

Note: XSS vulnerabilities have been historically more common than any other type of security threat.

+
+ +

The XSS vulnerabilities are divided into reflected and persistent, based on how the site returns the injected scripts to a browser.

+ + + +

While the data from POST or GET requests is the most common source of XSS vulnerabilities, any data from the browser is potentially vulnerable, such as cookie data rendered by the browser, or user files that are uploaded and displayed.

+ +

The best defense against XSS vulnerabilities is to remove or disable any markup that can potentially contain instructions to run the code. For HTML this includes elements, such as <script>, <object>, <embed>, and <link>.

+ +
+

The process of modifying user data so that it can't be used to run scripts or otherwise affect the execution of server code is known as input sanitization. Many web frameworks automatically sanitize user input from HTML forms by default.

+
+ +

SQL injection

+ +

SQL injection vulnerabilities enable malicious users to execute arbitrary SQL code on a database, allowing data to be accessed, modified, or deleted irrespective of the user's permissions. A successful injection attack might spoof identities, create new identities with administration rights, access all data on the server, or destroy/modify the data to make it unusable.

+ +
+

SQL injection types include Error-based SQL injection, SQL injection based on boolean errors, and Time-based SQL injection.

+
+ +

This vulnerability is present if user input that is passed to an underlying SQL statement can change the meaning of the statement. For example, the following code is intended to list all users with a particular name (userName) that has been supplied from an HTML form:

+ +
statement = "SELECT * FROM users WHERE name = '" + userName + "';"
+ +

If the user specifies a real name, the statement will work as intended. However, a malicious user could completely change the behavior of this SQL statement to the new statement in the following example, by simply specifying the text in bold for the userName.

+ +
SELECT * FROM users WHERE name = 'a';DROP TABLE users; SELECT * FROM userinfo WHERE 't' = 't';
+
+ +

The modified statement creates a valid SQL statement that deletes the users table and selects all data from the userinfo table (which reveals the information of every user). This works because the first part of the injected text (a';) completes the original statement.

+ +

To avoid this sort of attack, you must ensure that any user data that is passed to an SQL query cannot change the nature of the query. One way to do this is to escape all the characters in the user input that have a special meaning in SQL.

+ +
+

Note: The SQL statement treats the ' character as the beginning and end of a string literal. By putting a backslash in front of this character (\'), we escape the symbol, and tell SQL to instead treat it as a character (just a part of the string).

+
+ +

In the following statement, we escape the ' character. The SQL will now interpret the name as the whole string in bold (which is a very odd name indeed, but not harmful).

+ +
SELECT * FROM users WHERE name = 'a\';DROP TABLE users; SELECT * FROM userinfo WHERE \'t\' = \'t';
+
+
+ +

Web frameworks will often take care of the character escaping for you. Django, for example, ensures that any user-data passed to querysets (model queries) is escaped.

+ +
+

Note: This section draws heavily on the information in Wikipedia here.

+
+ +

Cross-Site Request Forgery (CSRF)

+ +

CSRF attacks allow a malicious user to execute actions using the credentials of another user without that user’s knowledge or consent.

+ +

This type of attack is best explained by example. John is a malicious user who knows that a particular site allows logged-in users to send money to a specified account using an HTTP POST request that includes the account name and an amount of money. John constructs a form that includes his bank details and an amount of money as hidden fields, and emails it to other site users (with the Submit button disguised as a link to a "get rich quick" site).

+ +

If a user clicks the submit button, an HTTP POST request will be sent to the server containing the transaction details and any client-side cookies that the browser associated with the site (adding associated site cookies to requests is normal browser behavior). The server will check the cookies, and use them to determine whether or not the user is logged in and has permission to make the transaction.

+ +

The result is that any user who clicks the Submit button while they are logged in to the trading site will make the transaction. John gets rich.

+ +
+

Note: The trick here is that John doesn't need to have access to the user's cookies (or access credentials). The browser of the user stores this information and automatically includes it in all requests to the associated server.

+
+ +

One way to prevent this type of attack is for the server to require that POST requests include a user-specific site-generated secret. The secret would be supplied by the server when sending the web form used to make transfers. This approach prevents John from creating his own form, because he would have to know the secret that the server is providing for the user. Even if he found out the secret and created a form for a particular user, he would no longer be able to use that same form to attack every user.

+ +

Web frameworks often include such CSRF prevention mechanisms.

+ +

Other threats

+ +

Other common attacks/vulnerabilities include:

+ + + +

For a comprehensive listing of website security threats see Category: Web security exploits (Wikipedia) and Category: Attack (Open Web Application Security Project).

+ +

A few key messages

+ +

Almost all of the security exploits in the previous sections are successful when the web application trusts data from the browser. Whatever else you do to improve the security of your website, you should sanitize all user-originating data before it is displayed in the browser, used in SQL queries, or passed to an operating system or file system call.

+ +
+

Important: The single most important lesson you can learn about website security is to never trust data from the browser. This includes, but is not limited to data in URL parameters of GET requests, POST requests, HTTP headers and cookies, and user-uploaded files. Always check and sanitize all incoming data. Always assume the worst.

+
+ +

A number of other concrete steps you can take are:

+ + + +

Web frameworks can help mitigate many of the more common vulnerabilities.

+ +

Summary

+ +

This article has explained the concept of web security and some of the more common threats against which your website should attempt to protect. Most importantly, you should understand that a web application cannot trust any data from the web browser. All user data should be sanitized before it is displayed, or used in SQL queries and file system calls.

+ +

With this article, you've come to the end of this module, covering your first steps in server-side website programming. We hope you've enjoyed learning these fundamental concepts, and you're now ready to select a Web Framework and start programming.

+ +

{{PreviousMenu("Learn/Server-side/First_steps/Web_frameworks", "Learn/Server-side/First_steps")}}

+ +

In this module

+ + diff --git a/files/bn/learn/server-side/index.html b/files/bn/learn/server-side/index.html new file mode 100644 index 0000000000..8fcc639d2c --- /dev/null +++ b/files/bn/learn/server-side/index.html @@ -0,0 +1,59 @@ +--- +title: Server-side website programming +slug: Learn/Server-side +tags: + - Beginner + - CodingScripting + - Intro + - Landing + - Learn + - NeedsTranslation + - Server + - Server-side programming + - Topic + - TopicStub +translation_of: Learn/Server-side +--- +
{{LearnSidebar}}
+ +

The Dynamic Websites – Server-side programming topic is a series of modules that show how to create dynamic websites; websites that deliver customised information in response to HTTP requests. The modules provide a general introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.

+ +

Most major websites use some kind of server-side technology to dynamically display data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook. Displaying all of these using different static pages would be extremely inefficient, so instead such sites display static templates (built using HTML, CSS, and JavaScript), and then dynamically update the data displayed inside those templates when needed, such as when you want to view a different product on Amazon.

+ +

In the modern world of web development, learning about server-side development is highly recommended.

+ +

Learning pathway

+ +

Getting started with server-side programming is usually easier than client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.

+ +

Basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".

+ +

You will need to understand "how the web works". We recommend that you first read the following topics:

+ + + +

With that basic understanding, you'll be ready to work your way through the modules in this section. 

+ +

Modules

+ +

This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks. 

+ +
+
Server-side website programming first steps
+
This module provides technology-agnostic information about server-side website programming such as "what is it?", "how does it differ from client-side programming?", and "why is it useful?". This module also outlines some of the more popular server-side web frameworks and gives guidance on how to select the best one for your site. Lastly, an introduction to web server security is provided.
+
Django Web Framework (Python)
+
Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.
+
Express Web Framework (Node.js/JavaScript)
+
Express is a popular web framework, written in JavaScript and hosted within the node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.
+
+ +

See also

+ +
+
Node server without framework
+
This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.
+
-- cgit v1.2.3-54-g00ecf